/*
  story.css — Door 2: The Story (/)
  ----------------------------------------------------------------------------
  The default door for anyone who discovers or is sent the link.
  Job: "What's the honest arc of this transformation?" — and leave them wanting
  to follow. Editorial scale (the Dispatch register): large expressive Fraunces,
  scrollytelling, the relational CONSTELLATION as the hero visual.
  Honesty markers are first-class. Reachability is the tone. All tokens from
  tokens.css; scroll-driven motion has a static prefers-reduced-motion fallback.
*/

body { overflow-x: hidden; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.skip { position: absolute; left: 0; top: -3rem; z-index: var(--z-overlay);
  background: var(--surface); color: var(--ink); padding: var(--sp-2) var(--sp-4);
  border: var(--border-hair); border-radius: var(--radius-sm); transition: top var(--dur-fast); }
.skip:focus { top: var(--sp-2); left: var(--sp-2); }

/* @layer chrome-base: the desktop nav chrome. Lives in a lower layer so the mobile
   app-bar (@layer chrome, tokens.css) wins at ≤600 WITHOUT !important. (#1007) */
@layer chrome-base {
  /* .story-top itself is the shared top-bar chrome rule in tokens.css (#1105). */
  .brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
  .brand-mark { width: 20px; height: 20px; background: var(--brand-mark) center / contain no-repeat; }
  .brand-name { font-family: var(--font-mono); font-size: var(--fs-small); }
  .doors { display: flex; align-items: center; gap: var(--sp-4); }
  .doors a { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }
  .doors a:hover { color: var(--ember); }
  .doors a[aria-current="page"] { color: var(--ember); border-bottom: 1px solid var(--ember); padding-bottom: 1px; cursor: default; }
}
.theme-toggle { appearance: none; cursor: pointer; background: transparent; border: var(--border-hair); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--ink) 0 50%, transparent 50% 100%); border: 1px solid var(--ink-muted); }

/* ── HERO ────────────────────────────────────────────────────────────────── */
/* overflow-x: clip contains the ::before bloom's -4% side-bleed at the hero box so it
   can't push document width (16px scroll at 390px / 31px at 768px); clip (not hidden)
   keeps overflow-y visible so the bloom still bleeds DOWN into the arc, and creates no
   scroll container. */
.hero { max-width: var(--container); margin-inline: auto; padding: clamp(2rem, 1rem + 6vw, 5rem) var(--gutter) var(--sp-7); position: relative; isolation: isolate; overflow-x: clip; }
/* v5 "forward" depth — a restrained warm bloom behind the hero + an EARNED glow on the
   live day-counter. Adds dimension/premium-feel without touching the palette or contrast. */
.hero::before { content: ""; position: absolute; z-index: -1; inset: -6% -4% auto -4%; height: 130%; pointer-events: none;
  background: radial-gradient(54% 46% at 67% 30%, var(--ember-wash), transparent 72%); }
/* #1469 — the claim tightened so the fold belongs to the loop dial below it. */
.hero-claim { padding-bottom: var(--sp-5); }

.kicker { color: var(--ember); }
.hero-day { color: var(--ink-muted); margin: var(--sp-2) 0 0; padding-left: var(--sp-2); border-left: 2px solid var(--ember); }
/* P2.1 — the live proof line paired with genesis, up in the hero. */
.hero-proof { color: var(--ember); font-family: var(--font-mono); font-size: var(--fs-small); margin: var(--sp-1) 0 0; padding-left: var(--sp-2); border-left: 2px solid var(--ember); }
/* The quiet-stretch line — muted ink on a hairline rule, never red, never a banner. */
.hero-quiet { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); margin: var(--sp-1) 0 0; padding-left: var(--sp-2); border-left: 2px solid var(--rule); }
/* #1469 — the claim register: --fs-h1 (not --fs-display) so the loop dial owns the fold. */
.hero-h {
  font-family: var(--font-serif); font-weight: var(--weight-med);
  font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.015em;
  margin-top: var(--sp-3); max-width: 22ch;
}
.hero-h em { font-style: italic; color: var(--ink); }
.hero-elena {
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-quote);
  line-height: 1.45; color: var(--ink-muted); margin-top: var(--sp-5); max-width: 40ch;
}
.hero-sub { margin-top: var(--sp-4); color: var(--ink-muted); font-size: var(--fs-body-lg); max-width: 52ch; }
.hero-cta { margin-top: var(--sp-5); }
.cta {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.04em; color: var(--ember); text-decoration: none;
  border-bottom: 1px solid var(--ember-line); padding-bottom: 2px;
}
.cta:hover { border-color: var(--ember); }
.cta:active { border-color: var(--ember); opacity: 0.8; }
.cta-quiet { color: var(--ink-faint); border-color: var(--ink-muted); }
.cta-quiet:hover { color: var(--ink-muted); }

/* ── #1469 variant A "the loop, drawn live" — the loop stage ──────────────────
   The measuring rule bent into the loop: tick ring + four door-icon stations +
   verbs on the arcs + the live day counter at the hub. Scroll drives the focus
   ([data-focus] on the stage → the current station and its outgoing arc take
   the ember accent, FLAT — "you are here" state, not glow). The hub day counter
   is the screen's ONE glow: it is the page's one truly-live signal (earned-glow
   rule, DESIGN_SYSTEM_V5 §7). Everything renders fully with JS off. */
.stage { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter) var(--sp-7); }
.stage-grid { display: grid; gap: clamp(2rem, 4vw, 5rem); }
.dial-wrap { max-width: 420px; margin-inline: auto; width: 100%; }
@media (min-width: 901px) {
  .stage-grid { grid-template-columns: minmax(320px, 460px) 1fr; }
  .dial-wrap { position: sticky; top: clamp(1rem, 6vh, 4rem); align-self: start; max-width: 460px; margin-inline: 0; }
}
.dial { position: relative; width: 100%; margin: 0; }
/* aspect-ratio reserves the dial's box before render — the fold must not shift (CLS). */
.dial svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.ld-tickring { stroke: var(--tick); opacity: 0.5; }
.seg { stroke: var(--rule-strong); fill: none; transition: stroke var(--dur) var(--ease-out); }
.seg-head { fill: var(--rule-strong); stroke: none; transition: fill var(--dur) var(--ease-out); }
/* stations: ink at rest; the sprite <use> icons ride currentColor on the group */
.st { color: var(--ink-muted); transition: color var(--dur) var(--ease-out); }
.st .st-ring { fill: var(--surface); stroke: var(--rule-strong); transition: stroke var(--dur) var(--ease-out); }
.st .ld-lab { fill: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-ld-lab); /* floored >=11px effective by svgtype.js (#1210/#1469) */
  letter-spacing: 0.16em; text-transform: uppercase; transition: fill var(--dur) var(--ease-out); }
.ld-verb { fill: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-ld-verb); /* floored >=11px effective by svgtype.js (#1210/#1469) */
  letter-spacing: 0.14em; }
/* the focused station + its outgoing arc take the flat ember accent ("you are HERE").
   [data-focus="all"] = the reduced-motion static state: the whole loop reads lit. */
[data-focus="data"] .st-data, [data-focus="coaching"] .st-coaching,
[data-focus="protocols"] .st-protocols, [data-focus="story"] .st-story,
[data-focus="all"] .st { color: var(--ember); }
[data-focus="data"] .st-data .st-ring, [data-focus="coaching"] .st-coaching .st-ring,
[data-focus="protocols"] .st-protocols .st-ring, [data-focus="story"] .st-story .st-ring,
[data-focus="all"] .st .st-ring { stroke: var(--ember); }
[data-focus="data"] .st-data .ld-lab, [data-focus="coaching"] .st-coaching .ld-lab,
[data-focus="protocols"] .st-protocols .ld-lab, [data-focus="story"] .st-story .ld-lab,
[data-focus="all"] .st .ld-lab { fill: var(--ember); }
[data-focus="data"] .seg-data, [data-focus="coaching"] .seg-coaching,
[data-focus="protocols"] .seg-protocols, [data-focus="story"] .seg-story,
[data-focus="all"] .seg { stroke: var(--ember); }
[data-focus="data"] .sh-data, [data-focus="coaching"] .sh-coaching,
[data-focus="protocols"] .sh-protocols, [data-focus="story"] .sh-story,
[data-focus="all"] .seg-head { fill: var(--ember); }
/* the hub: the ONLY glow on the screen — the live day counter (same treatment the
   shipped .hd-num carried; it binds dayNum and ticks daily). */
.dial-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  gap: var(--sp-1); pointer-events: none; }
.dial-center .dc-num { font-size: var(--fs-data-xl); line-height: 1; color: var(--ember);
  text-shadow: 0 0 24px var(--ember-soft); }
.dial-center .dc-sub { max-width: 16ch; margin-inline: auto; line-height: 1.5; }
.dial-caption { margin-top: var(--sp-3); color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-small); max-width: 44ch; }
.dial-caption a { color: var(--ink-muted); }
.dial-caption a:hover { color: var(--ember); }

/* the verses — scroll-stepped teaching; min-height only where the dial is sticky */
.verses { display: flex; flex-direction: column; }
.verse { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-6) 0; border-bottom: var(--border-hair); }
@media (min-width: 901px) { .verse { min-height: 56vh; } }
.verse:last-child { border-bottom: none; }
.verse h2 { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h2); line-height: 1.1; max-width: 20ch; }
.verse p { color: var(--ink-muted); max-width: 46ch; }
.verse p strong { color: var(--ink); font-weight: var(--weight-med); }
.verse .vgo { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--ember-line); align-self: flex-start; padding-bottom: 2px; }
.verse .vgo:hover { border-bottom-color: var(--ember); }
.verse .vgo:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs); }
.verse-close { gap: var(--sp-4); }
.verse-close .hero-elena { margin-top: 0; }
/* #1995 — the live brief line's anchor label ("yesterday's read"), inserted by
   story.js only when the daily line binds; pulled tight over its quote against
   the verse's flex gap. */
.verse-close .hero-elena-kicker { margin-bottom: calc(-1 * var(--sp-3)); }
/* #3066 — the absolute-date fragment stays on one line so the ISO date never
   splits mid-string when the kicker sentence wraps at the verse's 46ch cap. */
.hero-elena-asof { white-space: nowrap; }
.verse-close a:not(.cta):not(.vgo) { color: var(--ink-muted); }
.cta-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-2); }

/* the constellation's below-fold home (#1469) — the figure itself is unchanged */
.beat-constellation .constellation { margin-top: var(--sp-5); max-width: 520px; }

/* ── The constellation v2 (#590) — edges are MEASURED co-movement ─────────────
   Single-accent identity held: positive coupling (move together) is ember + solid,
   negative (trade off) is muted ink + dashed tension — no new hue, no alarm-red.
   Width tracks |r| (set inline via stroke-width); significance sets opacity so a
   thin/non-significant pair stays honestly faint. A pillar with no measured edge
   (relationships, today) renders .quiet — recessed, the absence stated not faked. */
.constellation {
  display: grid; gap: var(--sp-3);
  /* #1017 — SVG type in viewBox units; story.js sizeConstellation overrides these on the
     svg element from the live rendered scale so labels never fall below the 11px mobile
     type floor (§10.5). These are the desktop-true fallbacks if JS never runs. */
  --cn-fs-label: 9px;
  --cn-fs-score: 11px;
  --cn-fs-cue: 8px;
}
.constellation svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }

.constellation .edge { fill: none; stroke-linecap: round; transition: opacity var(--dur) var(--ease-out); }
.constellation .edge.pos { stroke: var(--ember-line); }
.constellation .edge.neg { stroke: var(--ink-faint); }                 /* trade-off: tension, not alarm */
.constellation .edge.sig { opacity: calc(0.34 + var(--emag, 0.5) * 0.52); }
.constellation .edge.faint { opacity: calc(0.12 + var(--emag, 0.3) * 0.20); }  /* not significant → always quiet */
/* An active designed cross-pillar effect (rare) — the engine's own coupling, firing now. */
.constellation .edge.effect { stroke: var(--ember); opacity: 0.95; filter: drop-shadow(0 0 5px var(--ember-soft)); }

.constellation .node circle:not(.hit) { fill: var(--surface-raised); stroke: var(--ink-faint); stroke-width: 1; transition: r var(--dur) var(--ease-out), stroke var(--dur-fast); }
/* #1017 — the invisible tap-target expander (§10.4): transparent still catches pointer
   events; sized to the 44px effective floor by story.js. Touch-only — desktop hover
   geometry stays exactly the visible node. */
.constellation .node .hit { fill: transparent; stroke: none; }
@media (hover: hover) and (pointer: fine) { .constellation .node .hit { display: none; } }
/* Earned glow — only pillars that are UP get the warm halo (design system §12:
   glow is reserved for "this is up", never decorative). Filters don't affect layout. */
.constellation .node.up circle:not(.hit) { stroke: var(--ember); stroke-width: 1.5; fill: color-mix(in oklch, var(--ember) 18%, var(--surface)); filter: drop-shadow(0 0 8px var(--ember-soft)); }
/* Uninstrumented pillar (no measured coupling yet) — honestly recessed, dashed. */
.constellation .node.quiet circle:not(.hit) { stroke-dasharray: 3 3; opacity: 0.5; }
.constellation .node.quiet .nlabel { opacity: 0.55; }
.constellation .node text { font-family: var(--font-mono); font-size: var(--cn-fs-label); /* fs-ok: SVG viewBox units, floored at 11px effective (#1017) */ fill: var(--ink-muted); text-anchor: middle; }
.constellation .node .score { fill: var(--ink); font-size: var(--cn-fs-score); } /* fs-ok: SVG viewBox units, floored at 12px effective (#1017) */
.constellation figcaption { color: var(--ink-faint); max-width: 40ch; }

/* Hover/focus DOOR affordance — the pillar icon rises + an "open →" cue, so the
   node reads as an entrance, not just a dot. Hidden until interaction. */
.constellation .node .door { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); pointer-events: none; }
.constellation .node .door .door-ico { display: block; color: var(--ember); line-height: 0; }
.constellation .node .door .door-cue { font-family: var(--font-mono); font-size: var(--cn-fs-cue); /* fs-ok: SVG viewBox units, floored at 11px effective (#1017) */ fill: var(--ember); text-anchor: middle; letter-spacing: 0.04em; }
.constellation a { cursor: pointer; }
.constellation a:hover .node .door, .constellation a:focus-visible .node .door { opacity: 1; }
.constellation a:hover .node circle:not(.hit), .constellation a:focus-visible .node circle:not(.hit) { stroke: var(--ember); stroke-width: 1.5; }
.constellation a:hover .node .nlabel { fill: var(--ink); opacity: 1; }
/* #579 — a real focus ring around the hit area (the thin-stroke change alone is too subtle). */
.constellation a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 50%; }

/* inline legend keys in the caption */
.cn-key { position: relative; padding-left: 1.6em; white-space: nowrap; }
.cn-key::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 1.2em; height: 0; }
.cn-key-pos::before { border-top: 2px solid var(--ember); }
.cn-key-neg::before { border-top: 1.5px dashed var(--ink-faint); }

/* per-beat "go deeper" link into the rest of the site */
.beat-deeper { margin-top: var(--sp-5); }

.scroll-rule { display: grid; place-items: center; margin-top: var(--sp-6); }
.scroll-rule span { display: block; width: 1px; height: 46px; background: linear-gradient(var(--tick), transparent); }

/* ── THE ARC ─────────────────────────────────────────────────────────────── */
.arc { max-width: var(--container-read); margin-inline: auto; padding: 0 var(--gutter); }
.beat { padding: clamp(3rem, 2rem + 6vw, 7rem) 0; border-top: var(--border-hair); }
.beat:first-child { border-top: 0; }
.beat-kicker { color: var(--ink-faint); }
.beat-h { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1); line-height: 1.1; margin-top: var(--sp-3); max-width: 22ch; }

/* Scroll-driven reveal — TRANSFORM ONLY. Content is never hidden (opacity stays
   1), so a first glance or a browser without scroll-timeline support always sees
   the full page; the slide is pure enhancement. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .beat { animation: beat-in linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
    @keyframes beat-in { from { transform: translateY(16px); } to { transform: none; } }
  }
}

/* Numbers beat */
.numbers { display: flex; gap: clamp(1.5rem, 1rem + 4vw, 4rem); flex-wrap: wrap; margin-top: var(--sp-5); }
/* Reserve space for async-injected containers so filling them doesn't shove content
   down (cuts cumulative layout shift on the home). */
[data-bind="weightchart"] { display: block; min-height: 150px; }
[data-bind="wall"] { display: block; min-height: 116px; }
.figure { display: grid; gap: var(--sp-1); }
.figure .num { font-family: var(--font-mono); font-weight: var(--weight-med); font-size: var(--fs-data-lg); line-height: 1; }
.figure .num.big { font-size: var(--fs-data-xl); color: var(--ember); }
.figure.is-up .num.big { color: var(--ink-muted); }   /* weight gained — honest, not celebrated */
.figure-cap { color: var(--ink-faint); }
.beat-note { margin-top: var(--sp-4); color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); }

/* Waveform — honest down-beats in muted ink, never alarm-red */
.waveform { margin-top: var(--sp-5); }
.wave { position: relative; height: clamp(96px, 38vw, 160px); width: 100%; }
/* #590 — the bars live in a fresh inner node that carries the shared data-cpts contract,
   so motion.js wires ONE focus dot + tooltip + keyboard path (the bespoke cursor-tooltip is gone). */
.wave .wave-cpts { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; touch-action: pan-y; }
.wave .bar { flex: 1; min-width: 2px; border-radius: 1px 1px 0 0; background: var(--ink-faint); transition: height var(--dur-slow) var(--ease-out), filter 0.14s var(--ease-out), transform 0.14s var(--ease-out); transform-origin: bottom; cursor: crosshair; }
.wave .bar:hover { filter: brightness(1.28); transform: scaleY(1.05); }
/* Scored bars are anchors into that day's cockpit (/cockpit/?date=) — same box as the
   spans, pointer instead of crosshair, keyboard-visible focus. */
.wave a.bar { text-decoration: none; cursor: pointer; }
.wave a.bar:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
/* #590: the interactive readout is now the shared .chart-tip / .chart-focus (motion.js),
   the same tooltip every other chart on the site uses — no bespoke .wave-tip anymore. */
.wave .bar.up { background: var(--ember); }
.wave .bar.mid { background: var(--ink-muted); }
.wave .bar.down { background: var(--ink-faint); opacity: 0.55; box-shadow: inset 0 -2px 0 0 var(--ink-muted); }
.wave .bar.none { background: repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px); }
.wave-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); color: var(--ink-faint); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.lg-up::before { background: var(--ember); } .lg-mid::before { background: var(--ink-muted); }
.lg-down::before { background: var(--ink-faint); } .lg-none::before { background: var(--rule); }
.lg-tap { color: var(--ink-faint); } .lg-tap::before { content: none; }

/* The Third Wall (two-voice, editorial scale) */
.beat-wall .wall { margin-top: var(--sp-5); border-left: 2px solid var(--ember-line); padding-left: var(--sp-5); }
.wall .voice { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; }
.wall .who { font-family: var(--voice-who-font); font-size: var(--voice-who-size); letter-spacing: var(--voice-who-tracking); text-transform: uppercase; color: var(--ink-faint); }
.wall .voice.machine .what { font-family: var(--voice-machine-font); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.wall .voice.human { border-top: var(--honest-border); padding-top: var(--sp-3); margin-top: var(--sp-1); }
.wall .voice.human .what { font-family: var(--voice-human-font); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; color: var(--ink); }
.wall-foot { margin-top: var(--sp-3); color: var(--ink-faint); }
/* P1.2 — Third Wall teaser line on Home (full exchange lives in Coaching). */
.wall-teaser { margin: var(--sp-3) 0 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.wall-teaser a, .dx-teaser .dx-foot a, .dx-read.dx-teaser a { color: var(--ember); }
/* P1.1/P1.3 — dispatches teaser on Home (full reader lives in Story). */
.dx-read.dx-teaser { border-left: 2px solid var(--ember-line); padding-left: var(--sp-5); }
/* P2.3 — Story promotes Matthew's voice + the timeline as first-class cards. */
.story-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
.story-feat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: var(--honest-border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color 0.15s; }
.story-feat:hover { border-color: var(--ember-line); }
.sf-kick { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.sf-title { font-family: var(--font-serif, Fraunces), serif; font-size: var(--fs-body-lg); color: var(--ink); line-height: 1.25; }
.story-feat .sf-sub { color: var(--ink-muted); }
@media (max-width: 760px) { .story-features { grid-template-columns: 1fr; } }
/* P2.4 — Coaching: readable disagreement cards (positions head-to-head + the integrator's call). */
.tt-card { list-style: none; border: var(--honest-border); border-radius: var(--radius-sm); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.tt-topic { margin: 0 0 var(--sp-3); font-family: var(--font-serif, Fraunces), serif; font-size: var(--fs-body-lg); }
.tt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tt-who { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--sp-1); }
.tt-text { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.tt-call { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; }
.tt-call-k { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--sp-1); }
.tt-asof { display: block; margin-top: var(--sp-2); color: var(--ink-faint); } /* #2383 — the band's as-of stamp (the cl-asof idiom) */
/* #540 — the dispute: a persisted inter-coach exchange, rendered as dialogue turns. */
.tt-dispute { margin-top: var(--sp-4); border: var(--honest-border); border-radius: var(--radius-sm); padding: var(--sp-4); }
.ttd-turn { margin-top: var(--sp-3); }
.ttd-turn.ttd-reply, .ttd-turn.ttd-rejoinder { margin-left: var(--sp-4); padding-left: var(--sp-3); border-left: 2px solid var(--rule); }
.ttd-who { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--sp-1); }
.ttd-kind { color: var(--ink-faint); text-transform: none; letter-spacing: normal; }
.ttd-line { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.55; }
.ttd-note { margin: var(--sp-3) 0 0; color: var(--ink-faint); }
@media (max-width: 600px) { .ttd-turn.ttd-reply, .ttd-turn.ttd-rejoinder { margin-left: var(--sp-2); } }
@media (max-width: 760px) { .tt-cols { grid-template-columns: 1fr; } }

/* Dispatches reader — chronicle · lab notes · journal (master-detail) */
.dx-tabs { display: flex; gap: var(--sp-1); margin-top: var(--sp-5); border-bottom: var(--border-hair); }
.dx-tab { appearance: none; background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  padding: var(--sp-3) var(--sp-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dx-tab:hover { color: var(--ink-muted); }
.dx-tab.is-active { color: var(--ink); border-bottom-color: var(--ember); }
.dx-layout { display: grid; gap: clamp(1.25rem, 0.6rem + 3vw, 3rem); margin-top: var(--sp-5); align-items: start; }
@media (min-width: 761px) { .dx-layout { grid-template-columns: 260px 1fr; } }
.dx-list { list-style: none; display: grid; gap: var(--sp-2); }
@media (min-width: 761px) { .dx-list { position: sticky; top: var(--sp-4); } }
/* Coaching on mobile: the rail becomes a horizontal chip strip so the READ sits near the
   top, not ~2 screens below an 8-coach vertical list (COACHING_SECTION_REVIEW mobile fix). */
@media (max-width: 760px) {
  [data-door="coaching"] .dx-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  [data-door="coaching"] .dx-item { width: auto; white-space: nowrap; }
  [data-door="coaching"] .dx-item-sub { display: none; }
}
.dx-item { width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: var(--border-hair);
  border-left: 2px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; color: inherit; }
.dx-item:hover { border-color: var(--rule-strong); }
.dx-item.is-active { border-left-color: var(--ember); background: color-mix(in oklch, var(--ember) 7%, var(--surface)); }
.dx-item-t { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.15; }
.dx-item-d { color: var(--ink-faint); }
.dx-empty { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-3) 0; }
.dx-read { min-width: 0; }
.dx-kicker { color: var(--ember); }
/* #2957 — the prior-cycle frame on an archived lab-notes reaction. Muted, not alarming:
   the entry is honest and worth keeping; it just isn't a reading of the live cycle. */
.dx-archival { color: var(--ink-muted); margin-top: var(--sp-2); }
.dx-title { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.12; margin-top: var(--sp-2); }
.dx-stats { color: var(--ink-faint); margin-top: var(--sp-2); }
.dx-prose { margin-top: var(--sp-4); color: var(--ink); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure); }
.dx-foot { color: var(--ink-faint); margin-top: var(--sp-4); }
.dx-readmore { margin-top: var(--sp-5); }
.dx-readmore a, .dx-readfull { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ember); text-decoration: none; }
.dx-readfull { appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0; }
.dx-readmore a:hover, .dx-readfull:hover { text-decoration: underline; }
.dx-readmore a:focus-visible, .dx-readfull:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ── PG-03 — per-dispatch subscribe foot + "start from the beginning" ──────── */
/* Ground is a RAMP step, not --ember-wash (#2592). The wash is a translucent
   accent tint: composited over --page in light mode it lands at #EDE1D1, a
   fifth surface DARKER than any ramp step, and the secondary ink register was
   never tuned for it — --ink-muted measured 4.39:1 and --ember 4.46:1 there,
   both under the 4.5:1 AA floor (axe color-contrast, 4 nodes, caught by the
   #1991 light-theme ledger once #2562 put this panel on a statically-rendered
   page). tests/test_paper_ramp_contrast.py already ENFORCES that --ink /
   --ink-muted / --ink-faint / --ember all hold >= 4.5:1 on every ramp step in
   both themes, so a ramp ground is AA by a guarded invariant rather than by
   luck. The ember identity stays in the 2px top rule and the CTA — which is
   also what DESIGN_SYSTEM_V5 §1 asks for: surface hierarchy from neutral
   tonality, never from leaning on the accent. */
.dx-subscribe {
  margin-top: var(--sp-7); padding: var(--sp-5);
  border: var(--border-hair); border-top: 2px solid var(--ember);
  border-radius: var(--radius); background: var(--surface-raised);
  max-width: var(--measure);
}
.dx-sub-h { font-family: var(--font-serif); font-size: var(--fs-body-lg); margin: 0; color: var(--ink); }
.dx-sub-p { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-muted); }
.dx-sub-cta { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin: 0; }
.dx-sub-btn {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em;
  color: var(--ember); text-decoration: none;
  border: 1px solid var(--ember-line); border-radius: var(--radius-xs);
  padding: var(--sp-2) var(--sp-4); transition: background var(--dur-fast);
}
.dx-sub-btn:hover { background: color-mix(in oklch, var(--ember) 14%, transparent); }
.dx-sub-rss { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ink-muted); text-decoration: none; }
.dx-sub-rss:hover { color: var(--ember); text-decoration: underline; }
.dx-startfirst {
  display: inline-block; margin-top: var(--sp-4);
  appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ink-muted);
}
.dx-startfirst:hover { color: var(--ember); text-decoration: underline; }
.dx-sub-btn:focus-visible, .dx-sub-rss:focus-visible, .dx-startfirst:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs); }
/* #1620 — outbound social follow row (end of a chronicle dispatch). Line-art marks
   inherit ink-muted, warm to ember on hover; flex-wraps so it never overflows narrow
   (mobile) or wide viewports. */
.dx-sub-social { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0 0; }
.dx-social-row { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dx-social { display: inline-flex; color: var(--ink-muted); transition: color var(--dur-fast); }
.dx-social .ico { width: 22px; height: 22px; }
.dx-social:hover { color: var(--ember); }
.dx-social:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: var(--radius-xs); }
/* #733 — per-post share affordance (the crawlable permalink, made shareable) */
.dx-share { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-6) 0 0; max-width: var(--measure); }
.dx-share-btn {
  appearance: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em;
  color: var(--ember); background: transparent;
  border: 1px solid var(--ember-line); border-radius: var(--radius-xs);
  padding: var(--sp-2) var(--sp-4); transition: background var(--dur-fast);
}
.dx-share-btn:hover { background: color-mix(in oklch, var(--ember) 14%, transparent); }
.dx-share-btn.is-copied { color: var(--ink-muted); }
.dx-share-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.dx-share-link { font-family: var(--font-mono); color: var(--ink-muted); word-break: break-all; }
/* full article, rendered inline in the v4 reader */
.dx-fulltext { margin-top: var(--sp-4); max-width: var(--measure); }
.dx-fulltext p { font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink); margin-top: var(--sp-4); }
.dx-fulltext p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 3.4em; /* fs-ok: drop cap, scales with its paragraph */ line-height: 0.82; float: left; margin: 0.05em var(--sp-2) 0 0; color: var(--ember); }
.dx-fulltext h2, .dx-fulltext h3 { font-family: var(--font-serif); font-weight: var(--weight-med); margin-top: var(--sp-6); line-height: 1.15; }
.dx-fulltext blockquote { border-left: 2px solid var(--ember); padding-left: var(--sp-4); margin-top: var(--sp-4); color: var(--ink-muted); font-style: italic; }
.dx-fulltext a { color: var(--ember); }
.dx-fulltext em { font-style: italic; }
.dx-fulltext strong { font-weight: var(--weight-med); }
/* lab-note two-voice inside the reader (reuses the Third Wall device) */
.dx-read .voice { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-top: var(--border-hair); }
.dx-read .voice:first-of-type { border-top: 0; }
.dx-read .voice .who { font-family: var(--voice-who-font); font-size: var(--voice-who-size); letter-spacing: var(--voice-who-tracking); text-transform: uppercase; color: var(--ink-faint); }
.dx-read .voice.machine .what { font-family: var(--voice-machine-font); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.dx-read .voice.human { border-top: var(--honest-border); }
.dx-read .voice.human .what { font-family: var(--voice-human-font); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; color: var(--ink); }
/* Pending Matthew-response placeholder — honest "not yet" state, visually de-emphasised. */
.dx-read .voice.voice-pending .what { color: var(--ink-faint); font-style: italic; }
/* P3.1 — the reply slot as first-class HELD SPACE (waiting, not absent). A dashed ember frame
   reads as reserved-and-open; the lead is present, the sub muted. Inviting, never a nag. */
.dx-read .voice.voice-pending { border-top: none; border: 1px dashed var(--ember-line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); background: var(--ember-wash); }
.voice-pending .pending-lead { font-family: var(--voice-human-font); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; color: var(--ink); margin: 0; }
.voice-pending .pending-sub { color: var(--ink-muted); margin: var(--sp-2) 0 0; line-height: 1.5; }
/* Podcast "next episode pending" notice — surfaces a skipped/held week instead of silence. */
.dx-read .panel-pending { border: var(--border-hair); border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-4); background: var(--surface); }
.dx-read .panel-pending .dx-prose { margin: var(--sp-1) 0 0; color: var(--ink-muted); }

/* Close */
.beat-close { text-align: center; border-top: var(--border-hair); }
.close-h { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1); line-height: 1.08; max-width: 20ch; margin-inline: auto; }
.close-sub { margin-top: var(--sp-4); color: var(--ink-muted); max-width: 44ch; margin-inline: auto; }
.close-cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-5); justify-content: center; flex-wrap: wrap; }

.story-foot { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; color: var(--ink-faint); border-top: var(--border-hair); }

.shimmer { color: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) { .shimmer { animation: pulse 1.6s var(--ease-inout) infinite; } @keyframes pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } } }

/* Loading skeletons (#1019) — design-system shimmer blocks, never spinners.
   Solid hairline-tone fills that pulse with the same rhythm as .shimmer;
   static (no animation) under prefers-reduced-motion. Page geometry (block
   sizes/rows) lives next to the page that uses them. */
.sk { display: flex; flex-direction: column; gap: var(--sp-3); }
.sk-b { display: block; background: var(--rule); border-radius: var(--radius-sm); opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) { .sk-b { animation: pulse 1.6s var(--ease-inout) infinite; } }

/* Phase 3: keyboard focus + sharper Third Wall voice separation */
.dx-tab:focus-visible, .dx-item:focus-visible, .doors a:focus-visible, .theme-toggle:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs);
}
.wall .voice.human { background: var(--ember-wash); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); }

/* ── /dispatches/ standalone page (Door 2's narrative sub-pages) ──────────── */
.dx-main { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); }
.dx-head { max-width: var(--measure); }
.dx-h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: 1.06; margin-top: var(--sp-2); }
.dx-lede { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
/* underlined so the link is distinguishable without relying on colour (WCAG 1.4.1) */
.dx-lede a { color: var(--ember); text-decoration: underline; text-underline-offset: 0.15em; }
.dx-lede a:hover { text-decoration-thickness: 2px; }
.dx-page .dx-tabs { flex-wrap: wrap; }
.dx-foot-bar { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; color: var(--ink-faint); border-top: var(--border-hair); }
.dx-foot-bar a { color: var(--ink-faint); text-decoration: none; }
.dx-foot-bar a:hover { color: var(--ember); }
.dx-loading { color: var(--ink-faint); margin-top: var(--sp-4); }

/* Timeline view */
.dx-timeline { list-style: none; margin-top: var(--sp-5); display: grid; gap: 0; border-left: var(--border-hair); padding-left: var(--sp-5); }
.dxt-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; position: relative; padding: var(--sp-3) 0; border-top: var(--border-hair); }
.dxt-item:first-child { border-top: 0; }
.dxt-item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-5) - 4px); top: calc(var(--sp-3) + 6px); width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.dxt-date { color: var(--ink-faint); }
.dxt-title { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.2; }
.dxt-note { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-top: 2px; }

/* ── The serial journey timeline (the "walk backwards" spine) ──────────────── */
.tl-recap { margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--border-hair);
  border-radius: var(--radius); background: color-mix(in oklch, var(--ember) 5%, var(--surface)); }
.tl-recap-k { color: var(--ink-faint); margin: 0; }
.tl-recap-h { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--ink); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.tl-recap-em { color: var(--ember); }
.tl-recap-s { color: var(--ink-muted); font-size: var(--fs-small); margin: var(--sp-1) 0 0; }
.tl-recap-s a, .tl-x { color: var(--ember); }
/* Phase 3 — Elena's "previously on" cold-open (richer than the stat aside) */
.tl-recap-elena { border-left: 3px solid var(--ember); }
.tl-recap-story { color: var(--ink); font-size: var(--fs-body); line-height: 1.6; margin: var(--sp-2) 0 0; }
.tl-recap-beats { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.tl-recap-beat { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.tl-recap-beat-k { color: var(--ink-faint); margin-right: var(--sp-1); }
.tl-recap-beat-k a { color: var(--ember); }
.tl-recap-now { color: var(--ink); font-size: var(--fs-small); margin: var(--sp-3) 0 0; font-style: italic; }
.tl-recap-asof { color: var(--ink-faint); margin: 2px 0 0; letter-spacing: 0.02em; }
.tl-recap-by { color: var(--ink-faint); margin: var(--sp-3) 0 0; text-align: right; }
/* The quiet stretch (2026-06-30) — when the owner's own logging goes quiet, or he
   returns. Sits below the recap; honest, never alarmist. Accent warms with a real
   lull (dark), reads neutral-warm on a return. No red. */
.tl-quiet { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--border-hair);
  border-left: 3px solid color-mix(in oklch, var(--ember) 40%, var(--rule));
  border-radius: var(--radius); background: color-mix(in oklch, var(--ember) 4%, var(--surface)); }
.tl-quiet[data-cls="dark"] { border-left-color: var(--ember); }
.tl-quiet-k { color: var(--ink-faint); margin: 0; }
.tl-quiet-line { color: var(--ink); font-size: var(--fs-body); line-height: 1.6; margin: var(--sp-2) 0 0; font-style: italic; }
.tl { list-style: none; margin: var(--sp-4) 0 0; padding-left: var(--sp-5); border-left: var(--border-hair); display: grid; gap: 0; }
.tl-month { margin: var(--sp-4) 0 var(--sp-1); }
.tl-month:first-child { margin-top: 0; }
.tl-month .label { color: var(--ink-faint); }
.tl-item { position: relative; padding: var(--sp-3) 0; border-top: var(--border-hair); }
.tl-month + .tl-item { border-top: 0; }
.tl-dot { position: absolute; left: calc(-1 * var(--sp-5) - 4px); top: calc(var(--sp-3) + 7px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 3px var(--page); transition: transform var(--dur-fast) var(--ease-out); }
.tl-date { color: var(--ink-faint); display: block; }
.tl-title { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.25; margin: 1px 0 0; }
.tl-note { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-top: 2px; }
.tl-x { display: inline-block; margin-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.03em; text-decoration: none; border-bottom: 1px solid var(--ember-line); }
.tl-x:hover { border-color: var(--ember); }
/* event-type dot colours — ember for the "up"/milestone moments, muted for the rest */
.tl-lv .tl-dot, .tl-ms .tl-dot, .tl-wt .tl-dot { background: var(--ember); }
/* visual P2 — node glyphs read by TYPE (same size, ink/ember only — no confetti):
   level-up = ember ring + core (the instrument motif) · milestone = filled ember ·
   life event = open square · discovery/correlation = rotated open diamond ·
   weight = filled ember dot (as before) · experiment = open circle. */
.tl-lv .tl-dot { background: transparent; border: 1.5px solid var(--ember); }
.tl-lv .tl-dot::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--ember); }
.tl-le .tl-dot { border-radius: 2px; background: transparent; border: 1.5px solid var(--ink-faint); }
.tl-dx .tl-dot, .tl-co .tl-dot { border-radius: 2px; background: transparent; border: 1.5px solid var(--ember); transform: rotate(45deg); }
.tl-dx .tl-item:hover .tl-dot, .tl-co .tl-item:hover .tl-dot { transform: rotate(45deg) scale(1.18); }
.tl-ex .tl-dot { background: transparent; border: 1.5px solid var(--ink-faint); }
.tl-item:hover .tl-dot { transform: scale(1.18); }
.tl-dx:hover .tl-dot, .tl-co:hover .tl-dot { transform: rotate(45deg) scale(1.18); }

/* "Previously" rail in the chronicle reader — step back through the serial. */
.dx-prev { margin: var(--sp-3) 0 var(--sp-4); padding-left: var(--sp-3); border-left: 2px solid var(--ember-line); }
.dx-prev-k { color: var(--ink-faint); margin: 0 0 var(--sp-1); }
.dx-prev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dx-prevlink { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); background: transparent;
  border: 0; padding: 2px 0; cursor: pointer; text-align: left; }
.dx-prev-lbl { color: var(--ember); flex: none; }
.dx-prev-t { font-family: var(--font-serif); color: var(--ink-muted); font-size: var(--fs-body); }
.dx-prevlink:hover .dx-prev-t { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Coach "how this read evolved" trail — dated commentary, newest-first. */
.ce-trail { list-style: none; margin: 0; padding-left: var(--sp-4); border-left: var(--border-hair); display: grid; gap: var(--sp-3); }
.ce-item { position: relative; }
.ce-item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-4) - 4px); top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.ce-date { color: var(--ink-faint); display: block; }
.ce-say { color: var(--ink-muted); margin: 1px 0 0; line-height: var(--lh-relaxed); }
.ce-themes { color: var(--ink-faint); margin: 2px 0 0; }
/* Cross-pillar link (podcast → the week's chronicle). */
.dx-xlink { margin: var(--sp-3) 0; }
.dx-xlink a { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-line); }
.dx-xlink a:hover { border-color: var(--ember); }

/* ── Narrow-screen topbar shrink. In @layer chrome-base so the mobile app-bar's
   own door sizing (@layer chrome) wins — these .doors bits are legacy top-nav; the
   brand/top-bar bits still apply (nothing in chrome competes with them). (#1007) ── */
@layer chrome-base {
  @media (max-width: 480px) {
    /* .story-top's narrow padding now comes from the shared rule (tokens.css, #1105) */
    .brand-door { display: none; }   /* drop the section tag; keep wordmark + nav */
    .doors { gap: var(--sp-3); }
    .doors a { font-size: 0.625rem; /* fs-ok: deliberate sub-label mobile step */ letter-spacing: 0.04em; }
  }
  @media (max-width: 360px) {
    .brand-name, .brand-door { display: none; }   /* keep the mark; reclaim ~100px */
    .doors { gap: var(--sp-2); }
    .doors a { font-size: 0.5625rem; } /* fs-ok: deliberate sub-label mobile step */
  }
}

/* Chronicle audio (the AI-voiced podcast) */
.dx-listen { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; flex-wrap: wrap; }
.dx-listen audio { height: 36px; max-width: 100%; }
/* #594 — the two hosts credited on a Panel episode, decorative only (the byline
   text beside them already carries the names for a11y/screen readers). */
.panel-hosts { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.panel-host { display: inline-flex; inline-size: 32px; block-size: 32px; }
.panel-host .portrait { inline-size: 100%; block-size: 100%; }

/* ── The Coaches (CC-01/02) — per-coach page in the reader pane ───────────── */
/* #1102 — coach-card header INVERSION (Matthew's product call): the specialty/board
   role leads as the big title, the doctor's name follows as the small line. This is a
   DELIBERATE divergence from the sitewide eyebrow convention, scoped to the coach card
   with its own classes — the shared .dx-kicker/.dx-title semantics are untouched. */
.coach-head-role { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h2); line-height: 1.12; margin: 0; }
.coach-head-name { color: var(--ember); margin: var(--sp-1) 0 0; }
.dx-disclosure { display: block; margin-top: var(--sp-2); color: var(--ink-faint); font-style: italic; max-width: var(--measure); }
.coach-stance, .coach-progress, .coach-report, .coach-voice, .coach-rel, .coach-char, .coach-hyp,
.coach-traits, .coach-live, .coach-build {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair);
}
/* The character — personality/background that shapes the coach's prompt. */
.cc-sig { margin-top: var(--sp-3); }
.cc-sig .label, .cc-tend, .cc-focus, .cc-voice, .cc-arc { color: var(--ink-faint); }
.cc-principles { margin: var(--sp-3) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.cc-principles li { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); }
.cc-tend, .cc-focus, .cc-voice, .cc-arc { margin-top: var(--sp-2); }
.cc-catch { margin-top: var(--sp-2); font-family: var(--font-serif); font-style: italic; color: var(--ember); }
/* Working hypotheses — live bets the coach is making right now. */
.ch-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ch-list li { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); border-left: 2px solid var(--ember-line); padding-left: var(--sp-3); }
.ch-list .label { color: var(--ember); margin-right: var(--sp-1); }
.ch-prediction { border-left-color: var(--ember); }
.cs-headline { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.15; margin-top: var(--sp-2); color: var(--ink); }
.cs-care, .cs-careless, .cr-edges { margin-top: var(--sp-3); color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--measure); }
.cs-care .label, .cs-careless .label, .cr-edges .label { display: block; color: var(--ember); margin-bottom: 2px; }
.cs-careless { color: var(--ink-muted); }   /* the "ignoring for now" candor reads softer */
.cs-gate { display: block; margin-top: var(--sp-3); color: var(--ink-faint); }
/* the evolution — the serial gold; marked with an ember rule, not faint */
.cs-evolve { margin-top: var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--ember);
  color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--measure); }
.cs-evolve .label { display: block; color: var(--ember); margin-bottom: 2px; }
.coach-outputs { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.coach-outputs li { margin-top: var(--sp-2); color: var(--ink); }
.coach-outputs .label { color: var(--ink-faint); margin-right: var(--sp-2); }
.cr-rate { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-data-lg); color: var(--ink); }
.cr-rate .label { font-size: var(--fs-label); color: var(--ink-faint); }
.cr-calls { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.cr-calls li { margin-top: var(--sp-2); color: var(--ink); }
.cr-calls .label { display: inline-block; min-width: 5.5em; text-transform: uppercase; }
/* #1975 — the decided outcome-color grammar (§4: one ember accent for "alive/up",
   down/flat = muted ink, never red/green). Applied identically across
   .pl-*/.cr-*/.sc-*: won/confirmed -> --ember, lost/refuted -> --ink-muted. */
.cr-confirmed .label { color: var(--ember); }
.cr-refuted .label { color: var(--ink-muted); }
.cr-caveat { display: block; margin-top: var(--sp-3); color: var(--ink-faint); }
.cr-tuning { margin-top: var(--sp-3); }
.cr-tuning summary { color: var(--ember); cursor: pointer; }
.cr-tuning ul { margin-top: var(--sp-2); padding-left: var(--sp-4); color: var(--ink-muted); }
.cr-tuning .label { color: var(--ink-faint); }
.cv-example { margin-top: var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--ember-line); font-family: var(--font-serif); font-size: var(--fs-quote); color: var(--ink); max-width: var(--measure); }

/* ── #1113 immersive bios — cast sheet · live record · how the voice is built ── */
.ct-note { margin-top: var(--sp-2); }
.ct-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); max-width: var(--measure); }
.ct-row { display: grid; gap: 2px; }
.ct-axis { color: var(--ember); }
/* #1470: a track rail is TONED paper (--surface-2), not floating paper — on the light
   ramp --surface-raised now lifts toward warm white, which would erase the rail. */
.ct-track { display: block; position: relative; block-size: 6px; border-radius: 3px; background: var(--surface-2); border: var(--border-hair); overflow: hidden; }
.ct-fill { display: block; block-size: 100%; background: var(--ember); border-radius: inherit; }
.ct-poles { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: var(--fs-label); }
.ct-disclosure { display: block; margin-top: var(--sp-3); color: var(--ink-faint); font-style: italic; }
.cl-asof { display: block; margin-top: var(--sp-2); color: var(--ink-faint); }
.cl-empty { margin-top: var(--sp-3); color: var(--ink-muted); }
.cl-trail-k, .cb-forbid-k, .cb-few-k { display: block; margin-top: var(--sp-4); color: var(--ember); }
.coach-live .coach-stance, .coach-live .coach-hyp { margin-top: var(--sp-3); padding-top: 0; border-top: 0; }
.cb-sources { margin-top: var(--sp-3); color: var(--ink); }
.cb-sources .label { color: var(--ink-faint); }
.cb-style { margin: var(--sp-3) 0 0; max-width: var(--measure); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); }
.cb-style dt { color: var(--ember); }
.cb-style dd { margin: 0; color: var(--ink); line-height: var(--lh-relaxed); }
.cb-forbid { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cb-forbid li { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small); color: var(--ink-muted); padding: var(--sp-1) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface-raised); text-decoration: line-through; text-decoration-color: var(--ember-line); }
@media (max-width: 600px) { .cb-style { grid-template-columns: 1fr; gap: var(--sp-1) 0; } .cb-style dd { margin-bottom: var(--sp-2); } }

/* ── "My Team" (CC-10) — the collective read on Matthew ───────────────────── */
.team-focus, .team-tension, .team-huddle { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.tf-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tf-list li { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); padding: var(--sp-1) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface-raised); }
.tt-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.tt-list li { margin-top: var(--sp-3); color: var(--ink); line-height: var(--lh-relaxed); max-width: var(--measure); }
.tt-list .label { display: block; color: var(--ember); margin-bottom: 2px; }
.th-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.th-btn { display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer; background: var(--surface-raised); border: var(--border-hair); border-radius: var(--radius-sm); padding: var(--sp-3); transition: border-color var(--dur-fast); }
.th-btn:hover { border-color: var(--ember); }
.th-name { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); }
.th-head { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); }
.th-watch { color: var(--ink-faint); }

/* ── Coach daily-journey timeline (CC-07) ─────────────────────────────────── */
.coach-journey { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.coach-latest { margin-top: var(--sp-3); color: var(--ink); line-height: var(--lh-relaxed); max-width: var(--measure); }
.coach-latest .label { color: var(--ink-faint); margin-right: var(--sp-2); }
.cj-band { color: var(--ember); margin-top: var(--sp-4); }
.cj-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.cj-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) 0; border-bottom: var(--border-hair); }
.cj-date { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cj-sum { color: var(--ink); line-height: var(--lh-relaxed); }
.cj-themes { grid-column: 2; color: var(--ink-faint); }

/* ── Coach daily reflection (CC-08) ───────────────────────────────────────── */
.coach-daily { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 2px solid var(--ember-line); background: var(--surface-raised); border-radius: var(--radius-sm); }
.cd-text { margin-top: var(--sp-2); color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure); }

/* ── Coach/Panel page type consistency (v5 Coherence, 2026-06-27) ──────────────
   The site's body voice is SANS everywhere (Data, Story prose). Coach pages had
   been forced to SERIF wholesale (2026-06-14), which made them read as a different
   design and left sans .dx-prose fallbacks alternating mid-page — the "fonts all
   over the place under each coach" report. Align coach NARRATIVE to the sans body;
   SERIF is reserved for genuine voice moments (the daily-reflection callout, the
   philosophy/voice pull-quotes — handled by their own rules below). Labels, dates,
   rates, chips, names stay mono (machine & data). */
.coach-stance, .coach-progress, .coach-report, .coach-journey, .coach-rel,
.coach-daily, .team-focus, .team-tension, .team-huddle,
.coach-char, .coach-hyp, .coach-voice, .coach-more, .team-lead,
.coach-traits, .coach-live, .coach-build { font-family: var(--font-sans); }
/* genuine "voice" moments stay serif (these win by being more specific) */
.cd-text, .tl-bio, .tl-philosophy, .cv-example,
.coach-voice blockquote, .coach-char blockquote, .coach-hyp blockquote { font-family: var(--font-serif); }
/* The disclosed-section wrapper (F-06): coaches speak serif inside it; its summary
   stays a mono kicker like every other section header. One type system. */
.coach-more { margin-top: var(--sp-4); }
.coach-more > summary { cursor: pointer; }
.coach-char .label, .coach-hyp .label, .coach-voice .label, .coach-more .label,
.coach-traits .label, .coach-live .label, .coach-build .label { font-family: var(--font-mono); }
.coach-stance .label, .coach-progress .label, .coach-report .label, .coach-journey .label,
.coach-rel .label, .coach-daily .label, .team-focus .label, .team-tension .label,
.team-huddle .label, .cr-rate, .tf-list li, .th-name, .cj-date { font-family: var(--font-mono); }

/* ── The lead / Principal Investigator card — head of the team (2026-06-13) ──── */
/* #1211 — the lead-tier marker rides the one ember accent (DESIGN_SYSTEM_V5 §4:
   the head coach IS the elevated one). Was raw sky #0ea5e9, off-palette. */
.team-lead { margin: var(--sp-4) 0; padding: var(--sp-4); border: 1px solid var(--ember-line); border-left: 3px solid var(--ember); background: var(--surface-raised); border-radius: var(--radius-sm); }
.team-lead .label { font-family: var(--font-mono); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); }
.tl-name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.tl-role { color: var(--ink-dim); }
.tl-bio { margin-top: var(--sp-2); font-family: var(--font-serif); }
.tl-philosophy { margin: var(--sp-3) 0 0; padding-left: var(--sp-3); border-left: 2px solid var(--ember-line); font-family: var(--font-serif); font-style: italic; color: var(--ink); max-width: var(--measure); }
.tl-focus { margin-top: var(--sp-3); font-family: var(--font-mono); color: var(--ink-dim); }

/* ── #1112 — the head coach at lead tier on the roster + detail surfaces ──────
   Same ember accent as the .team-lead card above: the cast hierarchy, visually
   (#1211 — was raw sky #0ea5e9; ember is the one sanctioned "elevated" accent). */
.dx-item--lead { border-left: 3px solid var(--ember); background: color-mix(in oklch, var(--ember) 6%, var(--surface)); }
.dx-item--lead.is-active { border-left-color: var(--ember); background: color-mix(in oklch, var(--ember) 12%, var(--surface)); }
.dx-item-lead { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.coach-head--lead { padding: var(--sp-3); border: 1px solid var(--ember-line); border-left: 3px solid var(--ember); background: var(--surface-raised); border-radius: var(--radius-sm); }
.coach-head-tier { margin: var(--sp-1) 0 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }

/* ── The Panel ledger — running bet scoreboard (2026-06-14) ──────────────────── */
.panel-ledger { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--ember-line); }
.pl-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-list li { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); }
.pl-tag { font-family: var(--font-mono); font-size: var(--fs-label); padding: 1px 6px; border-radius: var(--radius-sm); margin-right: var(--sp-2); white-space: nowrap; }
/* #1975 — outcome grammar (see cr-confirmed/cr-refuted above); .pl-open is the
   third, not-yet-decided state and stays at the lower ink-faint register (nothing
   to flag yet), never the amber semaphore. */
.pl-won .pl-tag { background: var(--ember-soft); color: var(--ember); }
.pl-lost .pl-tag { background: color-mix(in oklch, var(--ink-muted) 18%, transparent); color: var(--ink-muted); }
.pl-open .pl-tag { background: color-mix(in oklch, var(--ink-faint) 14%, transparent); color: var(--ink-faint); }

/* Episode transcript reader — speaker-attributed turns + an in-page "chapters"
   contents (the host's questions). Reads like a script; calm, library-grade. */
.dx-transcript { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.tx-toc { margin: var(--sp-2) 0 var(--sp-4); }
.tx-toc summary { cursor: pointer; }
.tx-chapters { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.tx-chapters a { color: var(--ink-muted); text-decoration: none; }
.tx-chapters a:hover { color: var(--ember); }
.tx-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.tx-turn { scroll-margin-top: var(--sp-6); }
.tx-who { display: block; color: var(--ember); margin-bottom: 2px; }
.tx-line { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); max-width: var(--measure); margin: 0; }

/* ── Ask the board (PG-ENG-2) — a capture card under the coaching header. Submits a
   reader question to a moderation queue; the board answers a selection in the lab
   notes. Ember-accented like the dispatch subscribe card; calm, never bait. ── */
.askboard { max-width: var(--measure); margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5);
  border: var(--border-hair); border-left: 3px solid var(--ember); border-radius: var(--radius); background: var(--surface-raised); }
.askboard-k { color: var(--ember); margin: 0; }
.askboard-lede { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-muted); line-height: 1.5; }
.askboard-form { display: grid; gap: var(--sp-3); }
.askboard-in { width: 100%; resize: vertical; min-height: 60px; background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: 1.5; padding: var(--sp-3) var(--sp-4); }
.askboard-in:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.askboard-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.askboard-email { flex: 1 1 180px; min-width: 0; background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-2) var(--sp-3); }
.askboard-email:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.askboard-btn { cursor: pointer; background: var(--ember); color: var(--page); border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; padding: var(--sp-2) var(--sp-5); min-height: 40px; white-space: nowrap; }
.askboard-btn:hover { filter: brightness(1.06); }
.askboard-btn:disabled { opacity: 0.55; cursor: progress; }
.askboard-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.askboard-out { margin: 0; min-height: 1.2em; color: var(--ink-muted); }
@media (max-width: 480px) { .askboard-email { flex-basis: 100%; } .askboard-btn { width: 100%; } }

/* ── The marginal instrument mark (visual P2) — the OG card's brand device, on
   exactly THREE surfaces (home loop beat · timeline header · the QA close). Faint
   by rule; the sigil draw-in animates it via the shared classes. ── */
.imark-rail { float: right; width: 44px; height: 44px; color: var(--ink-faint); opacity: 0.35; margin: 0 0 var(--sp-2) var(--sp-4); }
.imark-rail .imark { width: 100%; height: 100%; display: block; }
/* Story tab medium-marks (i-chronicle / i-podcast) — sit at label height. */
.dx-tab .tab-ico { width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 0.45em; }

/* ── "Is he okay this week?" (#789) — the friends/family surface. Plain-language,
   deterministic from the already-loaded /api/character pillars + /api/journey weight;
   honest absent ("not measured this week") via the engine's coverage provenance
   (ADR-104). Warm, low-quant: one serif lead sentence + a soft status row + an "as of"
   stamp. Ember is earned — only the "on the up" pillars get the accent rule. ── */
.okay-card { margin-top: var(--sp-4); }
.okay-lead { font-family: var(--font-serif); font-size: var(--fs-quote); line-height: 1.5; color: var(--ink); max-width: var(--measure); }
.okay-lead strong { color: var(--ink); font-weight: var(--weight-med); }
.okay-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; }
.okay-chip { display: inline-flex; align-items: baseline; gap: var(--sp-2); background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-small); }
.okay-lab { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.okay-val { color: var(--ink-muted); }
.okay-chip.okay-up { border-left: 3px solid var(--ember); }
.okay-chip.okay-up .okay-val { color: var(--ink); }
.okay-chip.okay-absent .okay-val { font-style: italic; color: var(--ink-faint); }
.okay-asof { margin-top: var(--sp-4); color: var(--ink-faint); }
.okay-fallback { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }

/* ── Returnability (uplevel P5) — the since-strip + NEW badges. Quiet by design:
   a single mono line, ember only on the section key; hides entirely when silent. ── */
.beat-since { padding: var(--sp-4) 0; }
.sv-line { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.7; max-width: none; }
.sv-k { color: var(--ember); margin-right: var(--sp-2); }
.sv-bit .label { color: var(--ink-faint); margin-right: 4px; }
.sv-more { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-line); white-space: nowrap; }
.nu-line { margin-top: var(--sp-2); color: var(--ink-faint); }
.dx-since { margin-top: var(--sp-4); }
.dx-new { color: var(--ember); border: 1px solid var(--ember-line); border-radius: var(--radius-xs); padding: 0 5px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; /* fs-ok: relative badge, scales with context */ vertical-align: 1px; }

/* ── The machinery ribbon (uplevel P3) — one quiet line above the coaching tabs
   surfacing the live disagreement + the falsifiable record. Ember only when a
   tension is genuinely live (earned); the record chip stays ink. ── */
.cm-ribbon { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.cm-bit { appearance: none; cursor: pointer; text-align: left; background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); color: var(--ink-muted);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.01em;
  transition: border-color var(--dur-fast), color var(--dur-fast); }
.cm-bit:hover { color: var(--ink); border-color: var(--rule-strong); }
.cm-bit .cm-k { color: var(--ink-faint); margin-right: var(--sp-2); text-transform: uppercase; }
.cm-tension { border-left: 3px solid var(--ember); }
.cm-tension .cm-k { color: var(--ember); }
.cm-bit:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── Convene the board (uplevel P2) — the live panel deliberation. Cards appear
   thinking the moment you ask; answers reveal in sequence. The stagger is gated on
   html.mo so reduced-motion (and no-JS-motion) shows every answer at once —
   interaction, not animation. Wrong/unavailable is muted ink, never red. ── */
.cv-all { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); cursor: pointer; }
.cv-all input { accent-color: var(--ember); }
.cv-panel { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.cv-q { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); max-width: var(--measure); }
.cv-q .label { display: block; color: var(--ink-faint); margin-bottom: 2px; }
.cv-card { border: var(--border-hair); border-left: 3px solid var(--ember-line); border-radius: var(--radius); background: var(--surface); padding: var(--sp-4); }
.cv-head { display: flex; align-items: center; gap: var(--sp-3); }
.cv-head .sigil-md svg, .cv-head .coach-mark svg { width: 40px; height: 40px; display: block; }
.cv-who { display: grid; gap: 1px; }
.cv-name { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.1; }
.cv-title { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.cv-text { margin-top: var(--sp-3); font-family: var(--font-serif); font-size: var(--fs-quote); line-height: 1.5; color: var(--ink); max-width: var(--measure); }
.cv-text.cv-unavailable { color: var(--ink-faint); font-style: italic; }
.cv-note { margin-top: var(--sp-4); color: var(--ink-muted); font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-quote); line-height: 1.5; max-width: var(--measure); border-left: 2px solid var(--rule); padding-left: var(--sp-4); }
/* #743: the grounding receipt — what the coach actually read, code-derived,
   never model-authored. Quiet meta line, not a callout — it's a receipt, not a claim. */
.cv-grounding { display: block; margin-top: var(--sp-3); }
@media (prefers-reduced-motion: no-preference) {
  html.mo .cv-text.is-answered { opacity: 0; animation: cvIn 0.6s var(--ease-out) forwards; animation-delay: var(--cv-delay, 0s); }
  @keyframes cvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* #546: per-card follow-up thread — continue with the SAME coach. */
.cv-fu-q { display: block; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--border-hair);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }
.cv-followup { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cv-fu-in { flex: 1 1 12rem; min-width: 0; font-family: var(--font-sans); font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--page); color: var(--ink); }
.cv-fu-in:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.cv-fu-btn { cursor: pointer; background: transparent; color: var(--ember); border: 1px solid var(--ember-line);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--font-sans); font-size: var(--fs-small); }
.cv-fu-btn:hover { background: var(--ember-wash); }
.cv-fu-btn:disabled { opacity: 0.55; cursor: progress; }
.cv-fu-note { flex-basis: 100%; color: var(--ink-faint); }

/* ── Commentary-first coaching (2026-06-28 re-cut). The Read = the board's read on
   you now; By Coach = the read on top of the domain data. Reuses dx-/coach-/tt- tokens. */
.read-priority { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--ember);
  background: var(--ember-wash); border-radius: var(--radius-sm); }
/* #3252 — the week's-call dateline, ABOVE the quote it frames (a stamp a reader
   meets after the claim is a footnote, not a frame). Its own class so the gap
   below it is the frame's, not .rp-text's leading margin. */
.rp-asof { margin: var(--sp-1) 0 0; color: var(--ink-faint); }
.rp-text { margin: var(--sp-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink); }
.read-digest { margin-top: var(--sp-5); }
.rd-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.rd-card { list-style: none; }
.rd-btn { width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: var(--border-hair);
  border-left: 3px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-3); align-items: flex-start; }
.rd-btn .sigil-md { margin-top: 2px; }
.rd-body { display: grid; gap: 4px; min-width: 0; }
/* The coach's signature hairline — their sanctioned color as a quiet left rule,
   so each card carries its author's mark (visual uplevel P1). */
.rd-card .rd-btn { border-left-color: color-mix(in srgb, var(--coach, transparent) 45%, transparent); }
.rd-btn:hover { border-left-color: var(--coach, var(--ember)); }
.rd-top { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.rd-dom { color: var(--ember); }
/* #3057 — a SECOND .rd-name definition (this file loads after tokens.css, so on
   any page that loads both, this rule is the one that actually wins the cascade).
   Same AA clamp as tokens.css's combined .rd-name/.th-name/.cv-name/.coach-name
   rule — see that comment for the derivation. Anchored on --ink rather than this
   rule's own --ink-muted fallback: --ink-muted's own AA margin (~4.5-4.9:1 on the
   paper ramp, tests/test_paper_ramp_contrast.py) is too thin to survive blending
   any adversarial --coach at all, where --ink's margin comfortably absorbs it. */
.rd-name { font-family: var(--font-mono); font-size: var(--fs-small); color: color-mix(in oklch, var(--coach, var(--ink-muted)) 25%, var(--ink) 75%); }
.rd-say { font-family: var(--font-sans); color: var(--ink); line-height: 1.5; }
.read-week { margin-top: var(--sp-5); }
.rw-list { margin: var(--sp-2) 0 0; }
.rw-dom { color: var(--ember); margin-top: var(--sp-3); text-transform: capitalize; }
.rw-note { margin: var(--sp-1) 0 0; }
/* By Coach — the read leads, the data sits right under it. */
.bc-read { margin: var(--sp-3) 0; }
.bc-analysis { margin: var(--sp-2) 0 0; }
.bc-rec { margin: var(--sp-3) 0 0; }
.bc-rec .label { color: var(--ember); display: block; margin-bottom: 2px; }
.bc-xnote, .bc-conf, .bc-asof { color: var(--ink-faint); margin: var(--sp-2) 0 0; }
/* The as-of stamp now leads the read as a DATELINE (2026-08-27) — the prose it
   frames dates itself in experiment days, so the frame must arrive first. Sits
   tight under the kicker with the gap below, inverting .bc-asof's trailing margin. */
.bc-dateline { margin: var(--sp-1) 0 var(--sp-2); }
.bc-data { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.bc-stat { margin: var(--sp-2) 0 0; }
.bc-statn { font-family: var(--font-mono); font-size: var(--fs-h3); color: var(--ink); }
.bc-delta { color: var(--ink-muted); }
.bc-spark { margin: var(--sp-2) 0 0; color: var(--ink-faint); font-size: var(--fs-label); word-spacing: 2px; }
.bc-datalink { margin: var(--sp-3) 0 0; }
.bc-datalink a, .bc-track { color: var(--ember); }
.bc-track { display: block; margin: var(--sp-3) 0; }
/* #1387 The Dossier — verbatim memory sections on the by-coach page. */
.bc-dossier { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.cd-h { color: var(--ember); margin: var(--sp-4) 0 var(--sp-2); }
.cd-count { color: var(--ink-muted); margin: 0 0 var(--sp-2); }
.cd-check { margin: 2px 0 0; color: var(--ink-faint); }
.cd-check a, .cd-corr { color: var(--ember); }
.cd-corr { margin: 4px 0 0; }
.cd-audit { margin: var(--sp-3) 0 0; color: var(--ink-faint); }
.dx-item-sub { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-faint); line-height: 1.4; }
.bc-session { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.ms-title { margin: var(--sp-2) 0 0; font-family: var(--font-serif); color: var(--ink); }
.ms-ex-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 4px; }
.ms-ex-list li { display: flex; gap: var(--sp-2); align-items: baseline; justify-content: space-between; border-bottom: var(--border-hair); padding-bottom: 4px; }
.ms-ex { font-family: var(--font-sans); color: var(--ink); }
/* Experiment-to-date arc — the board's read week by week (clickable into lab notes). */
.exp-arc { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.exp-btn { width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: var(--border-hair); border-left: 3px solid var(--ember); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: grid; gap: 4px; }
.exp-btn:hover { filter: brightness(1.04); }
.exp-top { display: flex; gap: var(--sp-2); align-items: baseline; justify-content: space-between; }
.exp-wkn { font-family: var(--font-serif); color: var(--ink); }
.exp-tone { color: var(--ink-muted); }
.exp-tone.tone-cautionary, .exp-tone.tone-urgent { color: var(--ember); }
.exp-date { color: var(--ink-faint); }
.exp-headline { display: block; font-family: var(--font-sans); color: var(--ink); font-size: 0.95em; /* fs-ok: relative de-emphasis under .exp-wkn */ margin-top: 2px; }
/* The board's cross-week arc synthesis above the week list (C-1). */
.exp-synth { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 2px solid var(--ember); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.exp-synth-k { color: var(--ember); margin: 0 0 var(--sp-2); }
.exp-throughline { font-family: var(--font-serif); font-size: var(--fs-quote); line-height: 1.4; color: var(--ink); margin: 0 0 var(--sp-3); }
/* Cardio-vs-lifts + per-muscle balance on the training coach (C-2). */
.bc-modality, .bc-muscle { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.bc-mod-h { margin: var(--sp-2) 0 var(--sp-1); color: var(--ember); }
.bc-mod-list, .bc-musc-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 4px; }
.bc-mod-list li { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.bc-mod-t, .bc-musc-m { font-family: var(--font-sans); color: var(--ink); }
.bc-musc { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2); align-items: baseline; border-bottom: var(--border-hair); padding-bottom: 4px; }
.bc-musc-n { font-family: var(--font-mono); }
.bc-musc.musc-over .bc-musc-s, .bc-musc.musc-high .bc-musc-s { color: var(--ember); }
.bc-musc.musc-under .bc-musc-s { color: var(--ink-faint); }
/* The Scorecard — the board's graded track record (C-3). */
.sc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.sc-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.sc-n { font-family: var(--font-mono); font-size: var(--fs-data-lg); line-height: 1; color: var(--ink); }
.sc-l { color: var(--ink-faint); }
.sc-note { color: var(--ink-muted); }
.sc-sub { margin-top: var(--sp-5); }
.sc-coachlist { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: 4px; }
.sc-coachbtn { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.sc-coachbtn:hover { border-color: var(--ember); }
.sc-coach { font-family: var(--font-sans); color: var(--ink); }
.sc-rate { font-family: var(--font-mono); color: var(--ink); }
.sc-mix { color: var(--ink-faint); }
.sc-call { margin: var(--sp-2) 0; padding: var(--sp-3); border-left: 2px solid var(--rule); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); }
.sc-call-top { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.sc-call-st { text-transform: uppercase; letter-spacing: 0.04em; }
.sc-call-claim { margin: 0; font-family: var(--font-serif); color: var(--ink); }
.sc-call-why { color: var(--ink-faint); margin: 4px 0 0; }
/* #1975 — outcome grammar (see cr-confirmed/cr-refuted above). */
.sc-confirmed { border-left-color: var(--ember); }
.sc-confirmed .sc-call-st { color: var(--ember); }
.sc-refuted { border-left-color: var(--ink-muted); }
.sc-refuted .sc-call-st { color: var(--ink-muted); }
.sc-call-m { font-family: var(--font-mono); color: var(--ink-faint); }
@media (max-width: 600px) { .sc-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ── #407→#1469: the loop teaser line retired (the fold dial teaches the loop);
   the constellation scale legend stays. ── */
.const-legend { display: inline-flex; align-items: center; gap: var(--sp-1); margin-right: var(--sp-2); color: var(--ink-faint); white-space: nowrap; }
.cl-dot { display: inline-block; border-radius: 50%; background: var(--ink-faint); }
.cl-dot.cl-sm { width: 5px; height: 5px; }
.cl-dot.cl-lg { width: 11px; height: 11px; margin-left: var(--sp-2); }

/* ── #413 "where would you land" — the client-only mirror ─────────────────── */
.beat-mirror .beat-note strong { color: var(--ink); }
.mirror-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); align-items: stretch; }
.mirror-metric, .mirror-in { background: var(--surface); color: var(--ink); border: var(--border-hair); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-2) var(--sp-3); }
.mirror-in { width: 9ch; }
.mirror-btn { cursor: pointer; background: var(--ember); color: var(--page); border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; padding: 0 var(--sp-4); }
.mirror-out { margin-top: var(--sp-5); max-width: var(--measure); }
.mirror-strip { position: relative; height: 44px; border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-6); }
.ms-mark { position: absolute; bottom: -5px; transform: translateX(-50%); text-align: center; }
.ms-mark i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); margin: 0 auto 4px; }
.ms-mark .label { color: var(--ink-faint); white-space: nowrap; }
.ms-mark.ms-you i { background: var(--ember); width: 11px; height: 11px; }
.ms-mark.ms-you .label { color: var(--ember); }
.mirror-read { font-family: var(--font-serif); font-size: var(--fs-quote); line-height: 1.5; color: var(--ink); }
.mirror-note { margin-top: var(--sp-2); color: var(--ink-faint); }

/* ── /story/attempts/ — the serial restarter's ledger (#1375) ─────────────────
   Down ≠ red: a dead attempt is ink, not alarm. Ember is reserved for the LIVE
   attempt — the one thing on this page that's still earning. */
.att-figs { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-6); }
.att-fig { display: flex; flex-direction: column; gap: var(--sp-1); }
.att-fig .att-fig-n { font-size: var(--fs-data-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.att-h { font-family: var(--font-serif); font-size: var(--fs-h3); margin-top: var(--sp-7); }
.att-fig-wrap { margin: var(--sp-4) 0 0; overflow-x: auto; }
.att-svg { width: 100%; height: auto; display: block; min-width: 640px; } /* #1375: below 640px the wrap scrolls (overflow-x) instead of compressing — floored glyphs would otherwise outgrow the geometry and clip */
.att-svg .att-grid { stroke: var(--rule); stroke-width: 1; }
.att-svg .att-tick, .att-svg .att-label { font-family: var(--font-mono); font-size: var(--fs-att-sm); fill: var(--ink-faint); } /* floored >=11px effective by svgtype.js (#1210/#1375) */
.att-svg .att-label { fill: var(--ink-muted); }
.att-svg .att-bar { stroke: var(--ink-muted); stroke-width: 6; stroke-linecap: round; }
.att-svg .att-bar.is-live { stroke: var(--ember); }
.att-svg .att-death { font-family: var(--font-mono); font-size: var(--fs-att-death); fill: var(--ink); } /* floored >=12px effective by svgtype.js (#1210/#1375) */
.att-svg .att-censor, .att-svg .att-live-mark { font-family: var(--font-mono); font-size: var(--fs-att-sm); fill: var(--ink-faint); } /* floored >=11px effective by svgtype.js (#1210/#1375) */
.att-svg .att-live-mark { fill: var(--ember); }
.att-log { list-style: none; margin-top: var(--sp-4); padding: 0; }
.att-card.is-live { border-left: 2px solid var(--ember); }
.att-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.att-head .att-no { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.att-fate { margin-top: var(--sp-2); font-family: var(--font-serif); font-size: var(--fs-body); }
.att-stats { margin-top: var(--sp-1); color: var(--ink-muted); }
.att-strip { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--ink-faint); overflow-wrap: anywhere; }
.att-note { margin-top: var(--sp-6); color: var(--ink-faint); }
.att-foot { margin-top: var(--sp-3); color: var(--ink-muted); }

/* ── The Broadcast feed (#1672, The Social Membrane) ─────────────────────────────
   Facade card grid — thumbnail + caption + link-out. Reverse-chron, responsive,
   never overflows the reader column (auto-fill + minmax(min(100%, …))), so a single
   narrow card on mobile collapses to full-width instead of forcing a scrollbar. */
.bc-feed { list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.bc-card { border: var(--border-hair); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
  transition: border-color var(--dur-fast), transform var(--dur-fast); }
.bc-card:hover { border-color: var(--ember); }
.bc-card:target { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
.bc-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.bc-media { margin: 0; aspect-ratio: 16 / 9; background: var(--rule); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.bc-thumb { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; }
.bc-thumb-empty { color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-mono); font-size: var(--fs-label); }
.bc-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.bc-meta { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; margin: 0; }
.bc-chan { color: var(--ember); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); }
.bc-date { color: var(--ink-faint); font-family: var(--font-mono); }
.bc-caption { margin: 0; font-family: var(--font-serif); font-size: var(--fs-body);
  line-height: 1.4; color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-cta { margin-top: auto; color: var(--ink-muted); font-family: var(--font-mono); }
.bc-link:hover .bc-cta { color: var(--ember); }
.bc-foot { margin: 0; padding: 0 var(--sp-3) var(--sp-3); }
.bc-permalink { color: var(--ink-faint); text-decoration: none; font-family: var(--font-mono); letter-spacing: 0.06em; }
.bc-permalink:hover { color: var(--ember); text-decoration: underline; }
.bc-subscribe { margin: var(--sp-5) 0 0; color: var(--ink-muted); font-family: var(--font-mono); }
.bc-subscribe a { color: var(--ember); }

/* #1707 — Horizons: the coach-curated media picks feed (Data door, /data/horizons/).
   A reverse-chron reading-column list (not the image grid) — the retrospective is the
   narrative pull, so each card is prose-first. Reuses the type triad + tokens. */
.hz-feed { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.hz-card { border: var(--border-hair); border-left: 2px solid var(--ember); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.hz-meta { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; margin: 0; }
.hz-format { color: var(--ember); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); font-size: var(--fs-label); }
.hz-source { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-label); }
.hz-week { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-label); margin-left: auto; }
.hz-title { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; }
.hz-title a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.hz-title a:hover { color: var(--ember); text-decoration: underline; }
.hz-pitch { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.hz-retro { margin: var(--sp-2) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--rule); }
.hz-retro-label { display: block; margin-bottom: 4px; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: 0.1em; font-family: var(--font-mono); font-size: var(--fs-label); }
.hz-retro-text { margin: 0; font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.hz-retro-pending { margin: var(--sp-2) 0 0; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-label); }
.hz-cta { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-label); text-decoration: none; }
.hz-cta:hover { color: var(--ember); }

/* #1377 — "Most Wrong This Month" on the scorecard: the graded-failure obituaries. */
.sc-wronglist { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: 4px; }
.sc-wrong a { display: grid; gap: 2px; padding: var(--sp-3); border: var(--border-hair); border-left: 2px solid var(--ember);
  border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; }
.sc-wrong-believed { color: var(--ink); }
.sc-wrong-num { color: var(--ink-muted); font-family: var(--font-mono); }
.sc-wrong-meta { color: var(--ink-faint); }

/* #1568 (ADR-142) — "from the journal, in his words": the consent-per-line
   pull-quotes. .jq-rail hosts the archive block inside the story journal list;
   .beat-journal-quote/.home-quote is the (dormant-by-default) weekly featured
   slot on home. Verbatim quotes take the .prose blockquote register — serif,
   italic, ember rule — because they are the human voice, not machine copy. */
.jq-rail { list-style: none; margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-4); border-bottom: var(--border-hair); }
.jq-block { display: grid; gap: var(--sp-3); }
.jq-kicker { color: var(--ember); }
.jq-note { color: var(--ink-faint); }
.jq-card { margin: 0; }
.jq-text { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-quote); line-height: 1.5;
  color: var(--ink); border-left: 2px solid var(--ember); padding-left: var(--sp-4); }
.jq-meta { display: block; margin-top: var(--sp-2); color: var(--ink-faint); }
.jq-meta a.jq-receipts { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-line); }
.beat-journal-quote .jq-text { font-size: var(--fs-h3); }
.beat-journal-quote .home-quote { max-width: var(--container-read); }

/* #1846 — the consent-gated diary shelf (/story/diary/). A reading-column list,
   prose-first: the day-mark (the canonical daily fingerprint, one visual system
   with the cockpit masthead and the studio HUD) sits beside the entry, his
   marked lines take the same serif/italic/ember-rule quote register as
   .jq-text, and everything withheld is stated in the quiet mono label register
   rather than drawn as a redacted row. */
.dsh-shelf { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-5);
  max-width: var(--container-read); } /* the shelf reads in the prose column, not the full 1200px shell */
.dsh-card { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4);
  border: var(--border-hair); border-left: 2px solid var(--ember); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--sp-4); }
.dsh-mark { width: 56px; }
.dsh-mark svg { width: 100%; height: auto; display: block; }
.dsh-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.dsh-stamp { margin: 0; color: var(--ember); }
.dsh-meta { margin: 0; color: var(--ink-faint); }
.dsh-theme { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }
.dsh-quote { margin: var(--sp-2) 0 0; font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-quote); line-height: 1.5; color: var(--ink);
  border-left: 2px solid var(--ember); padding-left: var(--sp-4); overflow-wrap: anywhere; }
.dsh-claims { list-style: none; margin: var(--sp-2) 0 0; padding: 0; color: var(--ink); } /* not the UA nested-list marker — the design system resets list-style everywhere */
.dsh-claim { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.5;
  border-left: 1px solid var(--ember-line); padding-left: var(--sp-4); margin-top: 4px; }
.dsh-held { margin: var(--sp-2) 0 0; color: var(--ink-faint); }
.dsh-receipts { margin: var(--sp-2) 0 0; }
.dsh-receipts a { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-line); }
.dsh-foot { margin: var(--sp-5) 0 0; max-width: var(--container-read); color: var(--ink-faint); }
.dsh-empty { margin: var(--sp-5) 0 0; max-width: var(--container-read); color: var(--ink-muted); }
@media (max-width: 480px) {
  .dsh-card { grid-template-columns: 1fr; }
  .dsh-mark { width: 44px; }
}

/* ── The bidirectional membrane (#1679, epic #1668 S11) ──────────────────────────
   Three stages of one loop: what went out → the membrane → what came back. Laid out
   as a single column that becomes three tracks on wide viewports, so the loop reads
   left-to-right where there's room and top-to-bottom where there isn't. Tokens only;
   no gloss — the join stage earns a hairline ember edge because it is the one thing
   on the page that is a decision rather than a count. */
.mb-loop { list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mb-stage { border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--sp-4); display: flex; flex-direction: column;
  gap: var(--sp-2); min-width: 0; }
.mb-stage.is-join { border-color: var(--ember); }
.mb-stage-k { margin: 0; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: 0.1em; font-family: var(--font-mono); }
.mb-stage-t { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3);
  line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.mb-figure { margin: var(--sp-2) 0 0; font-family: var(--font-mono);
  font-size: var(--fs-h1); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mb-stage.is-join .mb-figure { color: var(--ember); }
.mb-unit { margin: 0; color: var(--ink-muted); }
/* Absence, stated as absence — deliberately NOT a numeral (ADR-104). */
.mb-absent { margin: var(--sp-2) 0 0; font-family: var(--font-serif);
  font-size: var(--fs-body); line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.mb-note { margin: 0; color: var(--ink-faint); font-size: var(--fs-small); line-height: 1.5;
  overflow-wrap: anywhere; }
.mb-note a { color: var(--ember); }
.mb-rule { font-family: var(--font-mono); color: var(--ink-muted); overflow-wrap: anywhere; }
.mb-chips { list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mb-chip { display: inline-flex; align-items: baseline; gap: var(--sp-2);
  border: var(--border-hair); border-radius: var(--radius-sm);
  padding: 2px var(--sp-2); font-family: var(--font-mono); color: var(--ink-muted); }
.mb-chip-k { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.mb-chip-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.mb-chip[data-state="dormant"] .mb-chip-v { color: var(--ink-faint); }
.mb-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.mb-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--border-hair);
  text-decoration: none; color: inherit; min-width: 0; }
a.mb-row:hover .mb-row-k { color: var(--ember); }
.mb-row-k { font-family: var(--font-serif); color: var(--ink); min-width: 0;
  overflow-wrap: anywhere; }
.mb-row-v { color: var(--ink-faint); font-family: var(--font-mono); white-space: nowrap; }
.mb-foot { margin: var(--sp-5) 0 0; color: var(--ink-faint); font-family: var(--font-mono);
  line-height: 1.5; }