/* =====================================================================
   quiet.css: the de-cluttered layer. Loaded after skin.css.

   The audit (2026-10-16) found three navigation systems pointing at the same six
   sections, 24 to 31 type styles and 12 to 17 uppercase labels on every screen,
   and teal on 19 to 33 items at once. This layer keeps the layout and removes
   the competition: one secondary nav, one label style, one accent, one visual
   in the hero, and the footnotes under the buttons go.
   ===================================================================== */

/* ---------- 1. One secondary navigation ----------
   The left column (the channel) stays as a plain numbered list of the six questions.
   The question rail duplicated it; it stays only on screens too narrow for the channel. */
@media (min-width: 66rem) {
  .qrail { display: none; }
  .frame { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .channel { gap: 0; padding: 1.1rem 1rem 1.2rem 1.25rem; counter-reset: ch; }
  .channel .lbl { display: none; }
  .channel a {
    grid-template-columns: 1.7rem minmax(0, 1fr); gap: .5rem; align-items: baseline;
    padding: .62rem .6rem .62rem .7rem; border: 0; border-left: 2px solid transparent; border-radius: 0;
  }
  .channel a:hover { background: transparent; transform: none; }
  .channel a:hover .ch-text small { color: var(--ink); }
  .channel a.is-here { background: transparent; border-left-color: var(--teal); box-shadow: none; }
  .channel a.is-here .ch-text small { color: var(--ink); font-weight: 600; }
  .channel a::before {
    font-family: var(--f-sans); font-size: .72rem; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums;
    counter-increment: ch; content: counter(ch, decimal-leading-zero);
  }
  .channel a:first-of-type::before { counter-increment: none; content: "\2191"; }   /* the first link is the top of the page */
  .ch-thumb { display: none; }
  .channel .ch-text { gap: 0; }
  .channel .ch-text small {
    font-family: var(--f-sans); font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); line-height: 1.3;
  }
  .channel .ch-text b, .channel .ch-text .now, .channel a.is-here .ch-text .now { display: none; }
}

/* ---------- 2. One label style ----------
   The chapter question keeps its small capitals (it is the one label per screen that matters).
   Every other label is sentence case, grey, one size. */
.mono, .pg-head, .app-h, .tell .mark, .q-top, .q-opt span.k, .built span, .fld > span, .same-who, .apply-foot .note, .apply-status,
.q-leak .lbl, .week-item .fact, .skip, .stamp .logotag, .slots-mini .sd b small, .dx-item .mark, .dx-go .fine, .q-prize .fine, .q-again, .q-slidenav {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .78rem;
}
.stamp .logotag { text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; font-weight: 400; }   /* the card's top line stays */
.kicker, .hero .eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.kicker.q, .hero .eyebrow.q, .floor .kicker.q { color: var(--ink-soft); }
.chapter.k-teal .kicker, .chapter.k-teal .ch-num { color: #0B4A45; }
.chapter.k-dark .kicker, .chapter.k-dark .ch-num { color: #A9BAB7; }
.kicker::before, .hero .eyebrow::before { display: none; }
.pg-head { padding: .6rem 1.2rem; color: var(--ink-faint); }
.pg-head .pg-title { color: var(--ink-soft); font-weight: 500; }

/* ---------- 3. The chapter number: small, beside the question ---------- */
.ch-head { gap: .7rem; align-items: baseline; }
.ch-num { font-family: var(--f-sans); font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- 4. Fewer lines per screen ----------
   The footnote under each button repeated the panel. The italic hook stays: it is the voice. */
.ch-note { visibility: hidden; height: 0; overflow: hidden; }   /* stays the last child, so the stage still centres */
.hero-sig { display: none; }

/* ---------- 5. The hero: one visual, not two ----------
   One app card instead of three overlapping ones, and the fingerprint settles into the corner. */
.hero .app-2, .hero .app-3 { display: none; }
.hero .app-1 { left: 9%; right: 9%; top: 6%; width: auto; max-width: 22rem; margin-inline: auto; box-shadow: var(--shadow); }   /* centred without a transform: the card's own animation owns that */
.hero::before { opacity: .38; }
@media (max-width: 62rem) { .hero::before { opacity: .22; } }
.app-h b { color: var(--ink-soft); }

/* ---------- 6. One accent ----------
   Teal is for the "of", the italic voice line, the primary button and the current place. Numbers and tags are ink. */
.stat b, .stat.warn b, .whynow-facts .fig, .proof-figs b, .ticket .total .amt, .q-verdict { color: var(--ink); }
.tell .mark, .lane .lane-no, .log-item .tag, .q-leak .lbl, .split .col-a .head, .deal .side .head, .same-card.is-one .same-who, .week-item .fact { color: var(--ink-faint); }
.chapter.k-dark .stat b, .chapter.k-dark .whynow-facts .fig, .chapter.k-dark .proof-figs b { color: #fff; }

/* ---------- 7. Panels: a border, no shadow; the pager buttons step back ----------
   so the only solid teal button on a screen is the real one. */
.chapter .panel { box-shadow: none; border-radius: 14px; }
.pg-foot .btn, .pg-foot .btn-solid { background: transparent; color: var(--ink); border-color: var(--rule); box-shadow: none; padding: .5rem .95rem; font-size: .84rem; }
.pg-foot .btn:hover, .pg-foot .btn-solid:hover { background: var(--paper-2); color: var(--ink); border-color: var(--rule); transform: none; box-shadow: none; }
.chapter.k-dark .pg-foot .btn { color: #fff; border-color: var(--rule); }
.chapter.k-dark .pg-foot .btn:hover { background: var(--raised); color: #fff; }
.pg-bar { height: 2px; }
.app, .stat { box-shadow: none; }
.chapter .page .lane { border: 0; background: transparent; box-shadow: none; padding: 0; }

/* ---------- 8. The second button on a screen is quiet ---------- */
.btn-ghost { border-color: var(--rule); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }