/* WEEKS·READ (502) — the week read surface: Quick / Full / Deep. (D-597→D-625)
 *
 * EXTRACTED VERBATIM from workbench/weeks/read.html's inline <style> (Stage 1 of the
 * read-surface port, briefs/cc-read-port-1-extract.md). Byte-for-byte: no rule was
 * re-derived, re-tokenised or "tidied" on the way out — the surface is design-locked and
 * the gate on the move was zero visual drift.
 *
 * ⚠️ The workbench DESK chrome (body · .wrap · .page-… · .states · .state-…) deliberately did NOT
 * come with it. That styling dresses the WB review page, not the surface; `body {
 * background: … }` shipped into the app would repaint every screen. It stays inline in
 * read.html, which is the only place it means anything.
 *
 * The `.afwrap .afframe .afscreen` rules DID come across: they are read-surface styling
 * that happens to be expressed through the in-situ harness (they set the screen to the
 * light card, and lift the article tint to the very top under the status strip, D-615.3).
 * They are inert anywhere `.afwrap` does not exist, i.e. in the app.
 *
 * Loaded by workbench/weeks/read.html; the app side lands in Stage 2 (D-470 mirror).
 */
  /* ═══════════════ THE WEEK READ SURFACE (wkr-) — token-native ═══════════════ */
  .wkr { max-width: var(--layout-col-max); margin: 0 auto; padding: 0 var(--space-16) var(--space-40); background: var(--surface-card); }
  /* the whole screen (incl. the status strip) reads on the light card — scoped here, not in the shared frame */
  .afwrap .afframe .afscreen { background: var(--surface-card); }
  /* ── 401 masthead, NO-CLOSE set (D-609/D-610) — the read is a PAGE, not a modal: no ×. The
     actions trigger is the 403 chevron wearing the masthead's round --surface-card circle +
     --accent glyph. Classes are the 401 port (.mast-*), paddings adapted to the read's rhythm. ── */
  .wkr .mast-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0 var(--space-8); }
  .wkr .mast-word { font-family: var(--font-display); font-weight: var(--weight-wordmark); font-size: var(--size-20); letter-spacing: var(--tracking-neg-01); color: var(--text-primary); } /* token-exception: canonical wordmark size, matches topbar.css (D-411) */
  .wkr .mast-word b { color: var(--brand); }
  .wkr .mast-r { display: flex; align-items: center; gap: var(--space-8); }
  .wkr .mast-r .act-chev { width: var(--dim-40); height: var(--dim-40); background: var(--surface-card); box-shadow: var(--shadow-card); color: var(--accent); }
  .wkr .mast-r .act-chev svg { width: var(--size-18); height: var(--size-18); }

  /* ── sections are REAL UNITS (O-065/D-409) + the EXTENT CUE (D-608/O-066 · D-615.1): FULL FILL.
     Opening a unit's chevron fills the WHOLE unit with its kind wash one step up from rest — the
     old box-shadow ring is retired. Fill is background-only (reflow-free: constant padding /
     negative margin on unpadded units) and reduce-motion-safe (D-450). ── */
  .wkr-sec { display: block; padding: 0 var(--space-8); margin: 0 calc(-1 * var(--space-8)); border-radius: var(--radius-card); }
  [data-unit] { transition: background-color var(--duration-200) var(--ease-standard), box-shadow var(--duration-200) var(--ease-standard); }
  [data-unit].act-lit { background-color: var(--teal-100); }                        /* neutral/teal-family units (sections · FAQ · defn · pull-quote · This-week) */
  .wkr-trackq.act-lit, .wkr-toolcard.act-lit, .wkr-stat.act-lit { background-color: var(--slate-200); }  /* Track: slate, one step up */
  .wkr-watchbox.act-lit { background-color: var(--gold-200); }                      /* safety: gold, one step up */
  .wkr-aside.act-lit, .wkr-tip.act-lit, .wkr-cu.act-lit { background-color: var(--teal-200); }  /* teal washes, one step up */
  .wkr-acard.act-lit { background-color: var(--kind-do-fill); }                     /* Do card: the clay kind wash */
  .wkr-acard.watch.act-lit { background-color: var(--kind-watch-fill); }            /* Watch card: the gold kind wash */
  .wkr.act-lit { background-color: var(--teal-100); }                               /* article: the whole read */
  /* D-618.1 — a lit CONTAINER is ONE UNIFORM FIELD: a lit section (or the lit article) absorbs
     every descendant box — fill AND border go transparent, the This-week box and the left
     kind-stripes included — so the wash reads as one field, never a field with odd-coloured
     boxes inside it. Only the CONTAINER-lit state flattens: a box lit on its OWN chevron keeps
     its own kind wash (the states can't co-occur — closeAll() keeps one menu open at a time).
     Border-color goes transparent, not border:none — widths keep, nothing reflows (D-450). */
  .act-lit .wkr-hl, .act-lit .wkr-acard, .act-lit .wkr-trackq, .act-lit .wkr-toolcard,
  .act-lit .wkr-aside, .act-lit .wkr-defn, .act-lit .wkr-stat, .act-lit .wkr-gauge,
  .act-lit .wkr-tip, .act-lit .wkr-watchbox, .act-lit .wkr-cu, .act-lit .wkr-pq,
  .act-lit .wkr-sources { background: transparent; border-color: transparent; }
  /* D-618.2 — the lit fill BLEEDS var(--space-8) past the unit's top/bottom so it never reads
     as chopped off at the text bounds. Painted as a zero-blur box-shadow pair — no layout, no
     reflow (D-450); siblings cannot move. Sections + the FAQ block only: boxes carry their own
     padding and already breathe. */
  .wkr-sec.act-lit, .wkr-faq.act-lit {
    box-shadow: 0 calc(-1 * var(--space-8)) 0 var(--teal-100),
                0 var(--space-8) 0 var(--teal-100);
  }
  /* D-615.3 — the article tint reaches the very TOP of the screen: when the whole read is lit, the
     frame screen behind the status strip tints too — no gap strip above the masthead. */
  .afwrap .afframe .afscreen { transition: background-color var(--duration-200) var(--ease-standard); }
  .afwrap .afframe .afscreen:has(.wkr.act-lit) { background: var(--teal-100); }
  @media (prefers-reduced-motion: reduce) { [data-unit], .afwrap .afframe .afscreen { transition: none; } }    /* D-450 */

  /* subhead line = title + the section's actions chevron, trailing (D-608) */
  .wkr-subrow { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-24) 0 0; }
  .wkr-subrow .wkr-sub { margin: 0; flex: 1; min-width: 0; }

  /* per-unit chevron placement — trailing edge of the unit's head line */
  .wkr-acard .head .act-wrap, .wkr-trackq .qk .act-wrap, .wkr-watchbox .qk .act-wrap,
  .wkr-cu .qk .act-wrap, .wkr-hl .hh .act-wrap, .wkr-aside .ttl .act-wrap,
  .wkr-defn .lab .act-wrap, .wkr-stat .act-wrap, .wkr-tip .act-wrap,
  .wkr-toolcard .act-wrap, .wkr-pq .act-wrap { margin-left: auto; }
  .wkr-stat .act-wrap, .wkr-tip .act-wrap, .wkr-toolcard .act-wrap, .wkr-pq .act-wrap { align-self: flex-start; }
  /* D-615.2 — ONE CHEVRON AXIS: every actions chevron right-aligns to a single vertical line,
     --wkr-chev-inset in from the text-column right edge. Sections nudge IN toward the middle;
     boxes/cards (16px pad) nudge OUT to meet it. The masthead chevron is exempt (it lives in
     the bar, not the text column). */
  .wkr { --wkr-chev-inset: var(--space-8); }
  .wkr-subrow .act-wrap { margin-right: var(--wkr-chev-inset); }
  /* boxes carry a 1px hairline the sections don't — fold it in so the axis is pixel-true */
  .wkr-acard .head .act-wrap, .wkr-trackq .qk .act-wrap, .wkr-watchbox .qk .act-wrap,
  .wkr-cu .qk .act-wrap, .wkr-hl .hh .act-wrap, .wkr-aside .ttl .act-wrap,
  .wkr-defn .lab .act-wrap, .wkr-stat .act-wrap, .wkr-tip .act-wrap,
  .wkr-toolcard .act-wrap { margin-right: calc(var(--wkr-chev-inset) - var(--space-16) - var(--nudge-1)); }
  .wkr-pq .act-wrap { margin-right: calc(var(--wkr-chev-inset) - var(--space-4)); }
  .wkr-faq .fact .act-wrap { margin-left: auto; margin-right: var(--wkr-chev-inset); }
  .wkr-aside .ttl, .wkr-defn .lab { display: flex; align-items: center; }
  .wkr-pq { display: flex; align-items: flex-start; gap: var(--space-8); }
  .wkr-pq .bd { flex: 1; min-width: 0; }
  .wkr-head { text-align: center; padding-top: var(--space-12); }
  .wkr-navrow { display: flex; align-items: center; justify-content: center; gap: var(--space-16); }
  /* hero week chevrons — mirrors the locked home-hero stepper (.wkhero-step, D-430) */
  .wkr-hstep { width: var(--dim-44); height: var(--dim-44); flex: none; display: grid; place-items: center; background: var(--surface-ground); color: var(--nav-active); border: 1px solid var(--border-hairline); border-radius: var(--radius-round); cursor: pointer; } /* token-exception */
  .wkr-hstep svg { width: var(--dim-16); height: var(--dim-16); display: block; }
  .wkr-hstep:active { background: var(--surface-card-hover); }
  .wkr-hstep:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-num { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-60); line-height: var(--leading-100); color: var(--nav-active); letter-spacing: var(--tracking-neg-015); }
  /* the week EYEBROW carries the teal accent (brief cc-affordance-polish-3 §1) — the "you're in a
     week" cue, label register only (Schibsted small-caps); the number and phase stay nav-active. */
  .wkr-weeks { font-family: var(--font-label); font-size: var(--size-12); font-weight: var(--weight-600); letter-spacing: var(--tracking-14); text-transform: uppercase; color: var(--accent); margin-top: var(--space-4); }
  .wkr-phase { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-16); color: var(--nav-active); margin-top: var(--space-8); }

  /* segmented depth selector — LOCKED chrome: names only, long-press peeks read-time */
  .wkr-seg { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-pill); padding: var(--space-4); margin-top: var(--space-12); }
  .wkr-seg button { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-tertiary); padding: var(--space-8) var(--space-16); border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; line-height: var(--leading-100); transition: background var(--duration-180), color var(--duration-180); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  .wkr-seg button:focus { outline: none; }
  .wkr-seg button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-seg button:active { transform: scale(0.97); }
  .wkr-seg button.on { background: var(--surface-card); color: var(--nav-active); box-shadow: 0 var(--nudge-1) var(--space-4) var(--ink-900-a12); }
  .wkr-readtime { font-family: var(--font-label); font-size: var(--size-13); color: var(--text-tertiary); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--duration-300) var(--ease-standard), opacity var(--duration-200) var(--ease-standard), margin var(--duration-300) var(--ease-standard); }
  .wkr-readtime.show { max-height: var(--space-28); opacity: 1; margin-top: var(--space-12); }

  /* the CONTINUOUS headline (locked) — the title's final full stop is teal */
  .wkr-headline { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-28); line-height: var(--leading-115); text-align: left; margin-top: var(--space-20); }
  .wkr-headline .fs { color: var(--brand); }

  /* read-aloud (Deep only, near top of read) — D-368 */
  /* no margin-top: it only ever follows the standfirst, whose space-24 bottom margin (§3) is
     the whole gap — an inline-flex button doesn't margin-collapse, so its own top would ADD */
  .wkr-readaloud { display: inline-flex; align-items: center; gap: var(--space-8); background: var(--surface-card); border: 1px solid var(--accent); color: var(--nav-active); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); cursor: pointer; } /* token-exception */
  .wkr-readaloud:active { transform: scale(0.98); }
  .wkr-readaloud:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-readaloud svg { width: var(--dim-16); height: var(--dim-16); }

  /* ── article base ── */
  /* Typography (D-594): standfirst = Fraunces italic @ --leading-155 in EVERY tier; body @ --leading-165 in every tier. */
  /* §3 (brief cc-affordance-polish-3): the standfirst carries its OWN bottom air — space-24,
     collapsing with whatever follows (subhead 24 · This-week 16 · button 0) to an even 24px
     in every tier, so it breathes into the body instead of the next block dictating the gap. */
  .wkr-stand { font-family: var(--font-display); font-weight: var(--weight-400); font-style: italic; font-size: var(--size-17); line-height: var(--leading-155); color: var(--text-secondary); margin: var(--space-12) 0 var(--space-24); }
  .wkr-p { font-size: var(--size-15); line-height: var(--leading-165); color: var(--text-primary); margin-top: var(--space-12); }
  .wkr-p b { font-weight: var(--weight-600); }
  .wkr-sub { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--text-subtitle); line-height: var(--leading-120); margin: var(--space-24) 0 0; }
  .wkr-sub .n { color: var(--accent); font-weight: var(--weight-500); font-size: var(--size-15); letter-spacing: var(--tracking-02); margin-right: var(--space-8); }

  /* §7.0 register per tier — carried by the BODY TYPEFACE only (D-594): Quick/Full = Inter body,
     Deep = magazine (Fraunces serif body, a touch larger standfirst). The standfirst font (Fraunces
     italic) and both line-heights are now uniform across tiers — no per-tier standfirst override. */
  .tier-deep .wkr-p { font-family: var(--font-display); font-size: var(--size-16); line-height: var(--leading-165); }

  /* This-week highlights — plain bullets (Quick + Full); replaced by mini-contents in Deep */
  .wkr-hl { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  /* D-619 1C: heading-led, not eyebrow-led */
  .wkr-hl .hh { display: flex; align-items: center; font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-600); color: var(--accent); margin-bottom: var(--space-8); }
  .wkr-hl ul { list-style: none; margin: 0; padding: 0; }
  .wkr-hl li { font-size: var(--size-14); line-height: var(--leading-150); padding-left: var(--space-20); position: relative; margin-bottom: var(--space-8); }
  .wkr-hl li:last-child { margin-bottom: 0; }
  .wkr-hl li::before { content: ""; position: absolute; left: 2px; top: 8px; width: var(--dim-6); height: var(--dim-6); border-radius: var(--radius-round); background: var(--accent); } /* token-exception */ /* bullet dot */

  /* DEEP's mini-contents — replaces the This-Week box up-tier */
  .wkr-toc { margin-top: var(--space-16); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); padding: var(--space-12) 0; } /* token-exception */
  .wkr-toc .t { font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-08); color: var(--text-tertiary); margin-bottom: var(--space-8); }
  .wkr-toc .r { display: flex; gap: var(--space-8); font-size: var(--size-13); color: var(--text-secondary); line-height: var(--leading-160); }
  .wkr-toc .r .n { font-family: var(--font-display); font-weight: var(--weight-500); color: var(--accent); flex: none; }

  /* component meta */
  .wkr-cbadge { font-family: var(--font-label); font-size: var(--size-9); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--white); border-radius: var(--radius-4); padding: var(--space-4) var(--space-8); }
  .wkr-ccite { font-family: var(--font-label); font-size: var(--size-10); color: var(--text-tertiary); margin-top: var(--space-8); }
  .wkr-ccite a { color: var(--accent); }

  /* action / Do card — Do=clay · Watch=gold (D-454); Deep adds the how-to accordion.
     FULL owns these at proper size (2–4 Do cards): the doing tier. */
  .wkr-acard { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: var(--dim-4) solid var(--kind-do-icon); border-radius: var(--radius-card); padding: var(--space-12) var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-acard .head { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-4); }
  .wkr-acard .wkr-cbadge { background: var(--kind-do-icon); }
  .wkr-acard .ti { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-16); }
  .wkr-acard .mini { font-family: var(--font-label); font-size: var(--size-10); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--text-tertiary); margin-bottom: var(--space-8); }
  .wkr-acard .clip { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-6); overflow: hidden; background: linear-gradient(135deg, var(--clay-100), var(--clay-200)); margin-bottom: var(--space-12); display: flex; align-items: center; justify-content: center; }
  .wkr-acard .clip .play { width: var(--dim-44); height: var(--dim-44); border-radius: var(--radius-round); background: var(--kind-do-icon); display: flex; align-items: center; justify-content: center; }
  .wkr-acard .clip .play svg { width: var(--dim-16); height: var(--dim-16); fill: var(--white); margin-left: var(--nudge-2); }
  .wkr-acard .lead { font-size: var(--size-13); line-height: var(--leading-150); color: var(--text-secondary); }
  .wkr-acard .steps-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--surface-sunken); border: 1px solid var(--border-hairline); border-radius: var(--radius-6); padding: var(--space-8) var(--space-12); margin-top: var(--space-8); cursor: pointer; font-family: var(--font-body); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-primary); } /* token-exception */
  .wkr-acard .steps-toggle:active { transform: scale(0.99); }
  .wkr-acard .steps-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  /* the how-to steps DISCLOSE BY TAPPING THE ROW — no glyph (AFFORDANCE-SPEC §1: disclosure has
     no glyph; the chevron is spoken for). The old rotating ⌄ on this row is gone. */
  .wkr-acard .steps { max-height: 0; overflow: hidden; transition: max-height var(--duration-300) var(--ease-standard); }
  .wkr-acard.open .steps { max-height: 22rem; } /* token-exception */
  .wkr-acard .steps ol { margin: var(--space-12) 0 var(--space-4); padding-left: var(--space-20); font-size: var(--size-13); line-height: var(--leading-160); }
  .wkr-acard.watch { border-left-color: var(--kind-watch-icon); }
  .wkr-acard.watch .wkr-cbadge { background: var(--kind-watch-icon); }
  .wkr-acard.watch .clip { background: linear-gradient(135deg, var(--kind-watch-fill), var(--gold-200)); }
  .wkr-acard.watch .clip .play { background: var(--kind-watch-icon); }

  /* inline TRACKING question (Track · slate) — parent-led capture; feeds Caïa's portrait (D-280/281,
     D-397). Reading = tracking. SaMD: logs the parent's own observation, never a per-child verdict. */
  .wkr-trackq { background: var(--kind-track-fill); border: 1px solid var(--slate-200); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  /* .qk is the shared NOTICE HEAD (one anatomy per D-614; FORM per D-619: Notice = 1C
     HEADING-LED — a Fraunces heading with a leading kind icon, NOT a small-caps eyebrow).
     Track / Worth-checking / Coming-up differ by kind colour ONLY. */
  .wkr-trackq .qk, .wkr-watchbox .qk, .wkr-cu .qk { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-600); margin-bottom: var(--space-8); }
  .wkr-trackq .qk { color: var(--kind-track-icon); }
  .wkr-trackq .qk svg, .wkr-watchbox .qk svg, .wkr-cu .qk svg { width: var(--dim-16); height: var(--dim-16); }
  .wkr-trackq .q { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-15); color: var(--text-primary); margin-bottom: var(--space-12); }
  .wkr-trackq .ans { display: flex; flex-wrap: wrap; gap: var(--space-8); }
  .wkr-trackq .ans button { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--nav-active); background: var(--surface-card); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); cursor: pointer; } /* token-exception */
  .wkr-trackq .ans button:active { transform: scale(0.97); }
  .wkr-trackq .ans button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-trackq .ans button.sel { background: var(--accent); color: var(--text-on-accent); }
  .wkr-trackq .done { font-family: var(--font-label); font-size: var(--size-12); color: var(--kind-track-icon); margin-top: var(--space-12); display: none; }
  .wkr-trackq.answered .done { display: block; }
  /* destination footer — the question routes to "Build Caïa's portrait" (Quick, D-595) */
  .wkr-trackq .dest { display: flex; align-items: center; gap: var(--space-8); width: 100%; margin-top: var(--space-12); padding: var(--space-8) 0 0; border: 0; border-top: 1px solid var(--slate-200); background: none; text-align: left; font-family: var(--font-label); font-size: var(--size-11); font-weight: var(--weight-600); color: var(--kind-track-icon); cursor: pointer; }
  .wkr-trackq .dest svg { flex: none; width: var(--dim-16); height: var(--dim-16); stroke: var(--kind-track-icon); fill: none; }
  .wkr-trackq .dest .ar { margin-left: auto; }
  .wkr-trackq .dest:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

  /* in-context TOOL card (Track · slate) — FULL only, where a tool is central to doing the week (D-360) */
  .wkr-toolcard { display: flex; align-items: flex-start; gap: var(--space-12); background: var(--kind-track-fill); border: 1px solid var(--slate-200); border-left: var(--dim-4) solid var(--kind-track-icon); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-toolcard .tic { flex: none; width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round); background: var(--slate-200); color: var(--kind-track-icon); display: flex; align-items: center; justify-content: center; }
  .wkr-toolcard .tic svg { width: var(--dim-16); height: var(--dim-16); }
  .wkr-toolcard .k { font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--kind-track-icon); }
  .wkr-toolcard .ti { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-16); margin-top: var(--nudge-2); }
  .wkr-toolcard .d { font-size: var(--size-13); line-height: var(--leading-150); color: var(--text-secondary); margin-top: var(--space-4); }
  .wkr-toolcard .cta { margin-top: var(--space-12); display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--nav-active); background: none; border: 0; cursor: pointer; padding: 0; }
  .wkr-toolcard .cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

  /* pull-quote (Deep voices) */
  .wkr-pq { margin: var(--space-20) 0 0; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16); border-left: var(--dim-4) solid var(--accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
  .wkr-pq .q { font-family: var(--font-display); font-style: italic; font-size: var(--text-subtitle); line-height: var(--leading-145); color: var(--nav-active); }
  .wkr-pq .cite { font-family: var(--font-label); font-size: var(--size-10); color: var(--text-tertiary); margin-top: var(--space-8); }
  .wkr-pq .cite a { color: var(--text-tertiary); }

  /* The Science aside (Read · teal tint) */
  .wkr-aside { background: var(--teal-100); border: 1px solid var(--teal-200); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  /* D-619 1C: heading-led, not eyebrow-led */
  .wkr-aside .ttl { font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-600); color: var(--nav-active); margin-bottom: var(--space-4); }
  .wkr-aside p { font-size: var(--size-13); line-height: var(--leading-150); margin: 0; color: var(--nav-active); }

  /* In-plain-words definition */
  .wkr-defn { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-12) var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  /* D-619 1C: heading-led, not eyebrow-led (In-plain-words is Notice-family) */
  .wkr-defn .lab { font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-600); color: var(--text-tertiary); margin-bottom: var(--space-4); }
  .wkr-defn .term { font-family: var(--font-display); font-weight: var(--weight-600); font-style: italic; font-size: var(--size-15); }
  .wkr-defn .d { font-size: var(--size-13); line-height: var(--leading-145); color: var(--text-secondary); margin-top: var(--space-4); }

  /* stat (Track · slate, gold number-emphasis D-440) */
  .wkr-stat { display: flex; align-items: center; gap: var(--space-16); background: var(--kind-track-fill); border: 1px solid var(--slate-200); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-stat .num { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-34); color: var(--gold-700); line-height: var(--leading-100); flex: none; }
  .wkr-stat .txt { font-size: var(--size-13); line-height: var(--leading-145); }

  /* range gauge (Track · slate) — the baby's own datum PLOTTED on the universal band.
     Display + teach only: the caption names the band; the app draws NO conclusion (SaMD rule 6 shape). */
  .wkr-gauge { background: var(--kind-track-fill); border: 1px solid var(--slate-200); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-gauge .gk { font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--kind-track-icon); margin-bottom: var(--space-8); }
  .wkr-gauge .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-8); }
  .wkr-gauge .gt { font-size: var(--size-13); font-weight: var(--weight-600); }
  .wkr-gauge .gv { font-family: var(--font-display); font-size: var(--size-15); font-weight: var(--weight-600); color: var(--kind-track-icon); }
  .wkr-gauge .track { position: relative; height: var(--dim-6); background: var(--surface-sunken); border-radius: var(--radius-3); }
  .wkr-gauge .typ { position: absolute; top: 0; bottom: 0; background: var(--teal-100); border: 1px solid var(--accent); border-radius: var(--radius-3); } /* token-exception */
  .wkr-gauge .mk { position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--dim-16); height: var(--dim-16); border-radius: var(--radius-round); background: var(--kind-track-icon); border: var(--nudge-2) solid var(--surface-card); }
  .wkr-gauge .scale { display: flex; justify-content: space-between; margin-top: var(--space-4); font-size: var(--size-10); color: var(--text-tertiary); }
  .wkr-gauge .gn { font-size: var(--size-12); color: var(--text-secondary); margin-top: var(--space-8); font-style: italic; }

  /* tip (teal acts, D-440) */
  .wkr-tip { display: flex; gap: var(--space-12); align-items: flex-start; background: var(--teal-100); border: 1px solid var(--teal-200); border-left: var(--dim-4) solid var(--accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: var(--space-12) var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-tip .ic { flex: none; width: var(--dim-16); height: var(--dim-16); color: var(--accent); margin-top: var(--nudge-2); }
  .wkr-tip .bd { font-size: var(--size-13); line-height: var(--leading-150); }

  /* "Worth checking" safety — the trackq box grammar in GOLD (D-614): gold-90 wash + gold hairline
     (D-602 — the wash system has NO exceptions) + the .qk head with the Phosphor magnifying-glass
     (heading-led per D-619 1C). Same full box in ALL three tiers (D-595 — Quick carries
     it as one of its two embedded items). Hard length cap: ≤2 sentences / ~40w / max 4 lines. */
  .wkr-watchbox { background: var(--gold-90); border: 1px solid var(--gold-200); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-watchbox .qk { color: var(--gold-700); }
  .wkr-watchbox p { font-size: var(--size-13); line-height: var(--leading-150); margin: 0; }

  /* FAQ — Quick (few) + Deep (fuller). Constant pad / negative margin (like .wkr-sec) so the
     D-615.1 whole-block fill causes no reflow. */
  .wkr-faq { margin: var(--space-20) calc(-1 * var(--space-8)) 0; padding: 0 var(--space-8); border-radius: var(--radius-card); }
  .wkr-faq .fh { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--nav-active); margin-bottom: var(--space-8); }
  .wkr-faq .fh svg { width: var(--dim-16); height: var(--dim-16); }
  .wkr-faq details { border-top: 1px solid var(--border-hairline); padding: var(--space-8) 0; } /* token-exception */
  /* D-613: a CLOSED row is QUESTION-ONLY and expands by tapping it — no +/– marker, no chevron
     (AFFORDANCE-SPEC §1/§6.3: disclosure has no glyph). Pin · Share live INSIDE the open answer
     (.fact, after the answer + source line) — actions are content-gated (O-066 by construction). */
  .wkr-faq summary { font-size: var(--size-14); font-weight: var(--weight-600); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-12); }
  .wkr-faq summary::-webkit-details-marker { display: none; }
  /* §2: source + chevron are ONE row — qsrc left, act-wrap right (margin-left:auto so a
     source-less row still right-aligns), centred on the chevron so the source sits with it */
  .wkr-faq .fact { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-4); }
  .wkr-faq .fact .qsrc { flex: 1; min-width: 0; margin-top: 0; }
  .wkr-faq summary:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-faq p { font-size: var(--size-13); line-height: var(--leading-150); color: var(--text-secondary); margin: var(--space-8) 0 0; }
  .wkr-faq .qsrc { font-family: var(--font-label); font-size: var(--size-10); color: var(--text-tertiary); margin-top: var(--space-4); }

  /* "keep exploring" FOOT — navigation-teal, icon-differentiated chips (topic / board / tool).
     NOT kind-family coloured (D-591): these are link-outs, teal = navigation. */
  .wkr-foot { margin-top: var(--space-24); }
  .wkr-foot .fl { font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-08); color: var(--text-tertiary); margin-bottom: var(--space-12); }
  .wkr-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-8); }
  .wkr-navchip { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--nav-active); background: var(--teal-100); border: 1px solid var(--teal-200); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-12); cursor: pointer; } /* token-exception */
  .wkr-navchip:active { transform: scale(0.97); }
  .wkr-navchip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-navchip svg { width: var(--dim-16); height: var(--dim-16); color: var(--accent); }

  /* sources block */
  .wkr-sources { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-20) 0 0; } /* token-exception */
  .wkr-sources .ttl { font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--text-tertiary); margin-bottom: var(--space-8); }
  .wkr-sources ul { list-style: none; margin: 0; padding: 0; }
  .wkr-sources li { font-size: var(--size-12); line-height: var(--leading-150); padding-left: var(--space-16); position: relative; margin-bottom: var(--space-4); color: var(--text-secondary); }
  .wkr-sources li::before { content: "—"; position: absolute; left: 0; color: var(--text-tertiary); }
  .wkr-sources li b { color: var(--text-primary); }
  .wkr-sources a { color: var(--accent); }
  .wkr-be { display: inline-block; font-family: var(--font-label); font-size: var(--size-9); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); color: var(--text-tertiary); border: 1px solid var(--border-hairline); border-radius: var(--radius-4); padding: 0 var(--space-4); margin-left: var(--space-4); vertical-align: 1px; } /* token-exception */ /* edition tag */
  .wkr-srcnote { font-family: var(--font-label); font-size: var(--size-10); color: var(--text-tertiary); margin-top: var(--space-8); font-style: italic; }

  /* provenance footrow — Source (left) · Reviewed-by (right), D-465/D-585 */
  .wkr-prov { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--border-hairline); font-family: var(--font-label); font-size: var(--size-10); color: var(--text-tertiary); } /* token-exception */
  .wkr-prov b { color: var(--text-secondary); font-weight: var(--weight-600); }
  .wkr-prov .rev { display: inline-flex; align-items: center; gap: var(--space-4); }
  .wkr-prov .rev .dot { width: var(--dim-6); height: var(--dim-6); border-radius: var(--radius-round); background: var(--accent); }

  /* COMING-UP card (D-596/D-614) — forward-look, ALWAYS at the very bottom directly above the
     stepper, all tiers. The trackq box grammar in TEAL: teal-100 wash + teal hairline + the .qk
     head with a leading arrow (heading-led, D-619 1C). Teaser body unchanged (non-italic Inter, per Andrew). */
  .wkr-cu { background: var(--teal-100); border: 1px solid var(--teal-200); border-radius: var(--radius-card); padding: var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
  .wkr-cu .qk { color: var(--nav-active); }
  .wkr-cu .t { font-family: var(--font-body); font-weight: var(--weight-400); font-size: var(--size-16); line-height: var(--leading-140); color: var(--text-primary); }

  /* WEEK STEPPER — the very bottom of the read (§10); NOT in the header. + return-to-this-week pill (D-434) */
  .wkr-stepper { display: flex; align-items: stretch; gap: var(--space-8); margin-top: var(--space-24); }
  .wkr-step { flex: 1; display: flex; align-items: center; gap: var(--space-8); color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-12); cursor: pointer; text-align: left; font-family: var(--font-body); } /* token-exception */
  .wkr-step:active { transform: scale(0.99); }
  .wkr-step:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .wkr-step.next { justify-content: flex-end; text-align: right; }
  .wkr-step .ar { flex: none; width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round); background: var(--surface-sunken); color: var(--nav-active); display: flex; align-items: center; justify-content: center; font-size: var(--size-20); }
  .wkr-step .lab .e { display: block; font-family: var(--font-label); font-size: var(--size-10); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--text-tertiary); }
  .wkr-step .lab .t { display: block; font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-14); color: var(--text-primary); }

  /* ═══ CORPUS-RENDERED UNITS (the data path, cc-week-read-takes-a-week) — every element the
     card can emit from content_blocks is styled here, under the card's own root class, zero
     reliance on page defaults (the 502 Stage-2 corollary). ═══ */
  /* body bullet list (hero_body "- " blocks) — the .wkr-hl li grammar at body size */
  .wkr-article .wkr-ul { list-style: none; margin: var(--space-12) 0 0; padding: 0; }
  .wkr-article .wkr-ul li { font-size: var(--size-15); line-height: var(--leading-165); color: var(--text-primary); padding-left: var(--space-20); position: relative; margin-top: var(--space-8); } /* token-exception */
  .tier-deep .wkr-ul li { font-family: var(--font-display); font-size: var(--size-16); } /* token-exception */
  .wkr-article .wkr-ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: var(--dim-6); height: var(--dim-6); border-radius: var(--radius-round); background: var(--accent); } /* token-exception */
  /* inline [text](url) links inside body copy */
  .wkr-article .wkr-p a { color: var(--accent); }
  /* the Notice box renders one <p> per authored item */
  .wkr-watchbox p + p { margin-top: var(--space-8); }
  /* the Deep read's own title block ("This week's read" · article_title · article_dek) */
  .wkr-ahead { margin-top: var(--space-28); }
  .wkr-akick { font-family: var(--font-label); font-size: var(--text-micro); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-08); color: var(--text-tertiary); }
  .wkr-atitle { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--text-title); line-height: var(--leading-120); color: var(--text-primary); margin: var(--space-8) 0 0; }
  .wkr-adek { font-family: var(--font-display); font-style: italic; font-size: var(--text-standfirst); line-height: var(--leading-155); color: var(--text-secondary); margin: var(--space-8) 0 0; }
  /* the closer line (corpus `closer`) — a quiet Fraunces-italic sign-off at body size */
  .wkr-closer { font-family: var(--font-display); font-style: italic; color: var(--text-secondary); }
  /* an unwritten tier is a DISABLED seg button — visible and honest (D-541) */
  .wkr-seg button[disabled] { opacity: 0.4; cursor: default; }