/* POPHIES Quality & Testing page — page-specific rules only.
   Source: 网站规划.md §6.5 (lines 189–210).
   Shared classes and tokens live in assets/css/tokens.css and style.css. */

/* ---------- Scope statement (plan line 208) ---------- */

.qt-scope {
  max-width: 62rem;
  margin-top: 2.5rem;
  padding: 1.75rem;
  border: 1px solid var(--stone);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.qt-scope__label {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass);
}

.qt-scope__text {
  max-width: 54ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

/* ---------- The four factors behind the scope ---------- */

.qt-factors { margin-top: 3.5rem; }

.qt-factor {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stone);
}

.qt-factor__title { margin: 0 0 0.45em; font-size: 1.05rem; }

.qt-factor__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--graphite);
}

/* ---------- The eight checks ---------- */

/* The cards stretch to the tallest in the row, so their bottom edges line up. */
.qt-tests { gap: 2.5rem; }

.qt-test {
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.qt-test .media { margin: 0; }

.qt-points { display: grid; gap: 0.9rem; margin: 0; }

.qt-point { min-width: 0; }

.qt-point dt {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass);
}

.qt-point dd {
  margin: 0.3rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--graphite);
  overflow-wrap: break-word;
}

/* ---------- The quality flow ---------- */

ol.qt-flow {
  max-width: var(--read);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qt-hold { margin-top: 4rem; }

.qt-hold__title { margin: 0 0 1.5rem; }

.qt-hold__list { margin: 0; }

.qt-hold__note {
  align-self: start;
  margin: 0;
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--brass);
  background: var(--white);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--graphite);
}

/* ---------- Testing and certification ---------- */

.qt-boundary { min-width: 0; }

.qt-boundary__title { margin: 0 0 1.25rem; }

.qt-boundary .checklist { margin: 0; }

/* ---------- Documents ---------- */

.qt-doc {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stone);
}

.qt-doc__title { margin: 0 0 0.7em; }

.qt-doc__text { margin: 0; color: var(--graphite); }

.qt-response {
  max-width: var(--read);
  margin: 2.5rem 0 0;
  padding-left: 1.15rem;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

/* ---------- Small screens: body copy stays at 16px (§19, lines 943–960) ---------- */

@media (max-width: 660px) {
  .qt-factor__text,
  .qt-point dd,
  .qt-hold__note,
  .qt-scope__text {
    font-size: 1rem;
  }

  .qt-scope__text { line-height: 1.45; }
}

/* ---------- Narrow layout: one column, never a sideways page ---------- */

@media (max-width: 699px) {
  .qt-tests { gap: 2rem; }
}