/*
  cockpit.css — Door 1: The Cockpit (/cockpit)
  ----------------------------------------------------------------------------
  Pattern: focus / logbook (LOCKED — Design System §4 Cockpit).
  Job (acceptance test): in ONE glance — "Am I winning, and what's the one
  thing right now?" Stays a one-second read; editorial drama is NOT here.
  Reads /api/snapshot + /api/weekly_priority; per-pillar detail lazy-loaded.
  Mobile-first (the daily glance happens on a phone), richer on desktop.
  All colour / type / spacing from tokens.css.
*/

/* ── Page frame ──────────────────────────────────────────────────────────── */
body { min-height: 100svh; display: flex; flex-direction: column; }

.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); }

/* .cockpit-top is the shared top-bar chrome rule in tokens.css (#1105) — sticky,
   full-bleed, --sp-3/--gutter padding, doors right-aligned like every other door. */

/* #578: slim the shared .page-hero on the cockpit — it's the dense daily
   instrument, so trim the standard hero padding to a thin orientation strip. */
.cockpit-hero { padding-block: var(--sp-3) var(--sp-2); }
.cockpit-hero .loop-ribbon { margin-top: var(--sp-2); }

/* ── #1106: the hero instrument strip — small ring() instruments + the faint
   instrument mark. Deliberately quiet: the tones (ember/muted/alert) come from
   the .vr primitive in tokens.css and encode the vitals page's established
   thresholds — nothing here adds glow, shadow, or motion. The strip stays a
   one-second read; the big score below remains the headline (#578). */
.hero-instruments {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4); margin-top: var(--sp-3);
}
.hero-instruments .hi-mark { display: flex; flex: none; color: var(--ink-faint); }
.hero-instruments .hi-imark { width: 30px; height: 30px; opacity: 0.75; }
.hero-instruments .hi-rings {
  display: grid; grid-template-columns: repeat(4, minmax(56px, 76px));
  gap: var(--sp-3); flex: 0 1 auto;
}
/* Scale the shared .vr primitive down to hero-strip size (tokens.css owns the
   tones; only the geometry is overridden here). */
.hero-instruments .vr { gap: 2px; }
.hero-instruments .vr-svg { max-width: 60px; }
.hero-instruments .vr-c { top: calc(50% - 1em); }
.hero-instruments .vr-v { font-size: 0.8rem; /* fs-ok: deliberate small-instrument scale */ }
.hero-instruments .vr-sub { font-size: 0.55rem; /* fs-ok: rides the smaller ring */ }
.hero-instruments .vr-l { font-size: 0.58rem; /* fs-ok: rides the smaller ring */ }
.hero-instruments .hi-note { flex-basis: 100%; margin: 0; color: var(--ink-faint); }
@media (max-width: 480px) {
  .hero-instruments { gap: var(--sp-3); }
  .hero-instruments .hi-mark { display: none; } /* the rings ARE the mark at phone width */
  .hero-instruments .hi-rings { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .hero-instruments .vr-svg { max-width: 54px; }
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--ember); box-shadow: 0 0 0 3px var(--ember-wash);
}
.brand-name { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.02em; }
.brand-door { color: var(--ember); }

/* #1105 — the scope switcher's own row: the doors moved up into the shared top
   bar, so the global time-scope control sits on its own line, right-aligned. */
.top-controls {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--sp-3);
  max-width: var(--container); width: 100%; margin-inline: auto;
  padding: var(--sp-3) var(--gutter) 0;
}

/* Time-scope: one global control that re-scopes everything */
.scope { display: inline-flex; gap: 2px; padding: 3px; border: var(--border-hair); border-radius: var(--radius-sm); }
.scope-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-xs);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.scope-btn:hover { color: var(--ink-muted); }
.scope-btn.is-active { color: var(--ink); background: color-mix(in oklch, var(--ink) 8%, transparent); }
/* P2.2 — Month/Journey are deeper scopes: quieter by default so the cockpit opens calm. */
.scope-sep { width: 1px; align-self: stretch; margin: 0 var(--sp-1); background: var(--rule); }
.scope-btn.scope-deep { opacity: 0.6; font-size: 0.9em; /* fs-ok: deliberate de-emphasis below the label size */ }
.scope-btn.scope-deep.is-active { opacity: 1; }
/* P2.2 — the composite level decomposes to its pillars (anti-black-box). */
.hub-decomp { text-align: center; margin: var(--sp-2) 0 0; }
.hub-decomp a { color: var(--ink-muted); text-decoration: none; }
.hub-decomp a:hover { color: var(--ember); }

/* #807 — one-sentence first-visit context for the bare level number. Muted,
   inline, dismissible; JS unhides it only until "got it" (localStorage). */
.hub-hint { margin: var(--sp-1) 0 var(--sp-2); max-width: 52ch; color: var(--ink-muted); line-height: 1.5; }
.hub-hint-x {
  appearance: none; background: none; border: none; padding: 0 0 0 4px;
  font: inherit; color: var(--ember); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.hub-hint-x:hover { color: var(--ink); }

.theme-toggle {
  appearance: none; cursor: pointer; background: transparent;
  border: var(--border-hair); border-radius: 50%; width: 28px; height: 28px;
  display: grid; place-items: center;
}
/* keyboard focus parity with the other doors (pillar rows are <button>s) */
.row:focus-visible, .theme-toggle:focus-visible, .scope-btn:focus-visible, .cockpit-foot a:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs);
}
.theme-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink) 0 50%, transparent 50% 100%);
  border: 1px solid var(--ink-muted);
}

/* ── The panel (with the rule-spine) ─────────────────────────────────────── */
.cockpit {
  flex: 1; width: 100%; max-width: var(--container-read);
  margin-inline: auto; padding: var(--sp-2) var(--gutter) var(--sp-8);
  position: relative; isolation: isolate;
}
/* v5 "forward" depth — a restrained warm bloom above the instrument panel, matching
   the home hero. Adds dimension; scoped, subtle, never gloss. */
.cockpit::before {
  content: ""; position: absolute; z-index: -1; inset: -2% 0 auto; height: 46%; pointer-events: none;
  background: radial-gradient(52% 70% at 50% 0%, var(--ember-wash), transparent 70%);
}

.panel {
  background: var(--surface);
  border: var(--border-hair); border-radius: var(--radius);
  display: flex; overflow: hidden;
  box-shadow: var(--shadow-panel);
}

/* ── First-run orientation card (PG-02) — shows once, never blocks the panel ── */
.cockpit-intro {
  position: relative;
  background: var(--surface); box-shadow: var(--shadow-panel);
  border: var(--border-hair); border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-4);
  animation: introIn 240ms ease-out both;
}
@keyframes introIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cockpit-intro { animation: none; } }
.cockpit-intro__k { margin: 0; color: var(--ember); }
.cockpit-intro__h {
  font-family: var(--font-serif); font-weight: var(--weight-med);
  font-size: var(--fs-h3); line-height: 1.1;
  margin: var(--sp-2) 0 var(--sp-4); max-width: 28ch;
}
.cockpit-intro__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cockpit-intro__list li { color: var(--ink-muted); line-height: 1.5; max-width: 64ch; }
.cockpit-intro__list strong { color: var(--ink); font-weight: var(--weight-med); }
.cockpit-intro__list em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ember); }
.cockpit-intro__go {
  appearance: none; cursor: pointer; margin-top: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em;
  color: var(--ember); background: var(--ember-wash);
  border: 1px solid var(--ember-line); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-xs); transition: background var(--dur-fast);
}
.cockpit-intro__go:hover { background: color-mix(in oklch, var(--ember) 16%, transparent); }
.cockpit-intro__note { margin: var(--sp-3) 0 0; color: var(--ink-muted); opacity: 0.8; }
.cockpit-intro__x {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  appearance: none; cursor: pointer; background: transparent; border: 0;
  font-size: var(--fs-body-lg); line-height: 1; color: var(--ink-muted); padding: 2px 8px;
  border-radius: var(--radius-xs); transition: color var(--dur-fast);
}
.cockpit-intro__x:hover { color: var(--ink); }
.cockpit-intro :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ── Predict the week (PG-ENG-1) — a glanceable bet card, ember-accented like the
   intro; honest small-n (muted reader %), wrong calls never red. ── */
.predict { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--surface);
  border: var(--border-hair); border-left: 3px solid var(--ember); border-radius: var(--radius); }
.predict .cap { color: var(--ember); }
.predict-body { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }
.predict-item { display: grid; gap: var(--sp-2); }
.predict-q { color: var(--ink); line-height: 1.4; }
.predict-q strong { color: var(--ink); font-weight: var(--weight-med); }
.predict-vote { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.predict-btn { appearance: none; cursor: pointer; flex: 1 1 0; min-width: 84px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--ember-wash); color: var(--ink); border: 1px solid var(--ember-line);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.02em;
  transition: background var(--dur-fast), border-color var(--dur-fast); }
.predict-btn .pb-g { color: var(--ember); font-size: var(--fs-small); }
.predict-btn:hover { background: color-mix(in oklch, var(--ember) 16%, transparent); border-color: var(--ember); }
.predict-btn:disabled { opacity: 0.5; cursor: progress; }
.predict-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.predict-state, .predict-reveal { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.predict-pick { color: var(--ember); font-family: var(--font-mono); }
.predict-tally, .predict-n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.predict-tallyrow { margin-top: 2px; }
.predict-actual { color: var(--ink); }            /* the outcome — neutral ink, never red */
.predict-hit { color: var(--ember); }
.predict-foot { margin-top: var(--sp-3); color: var(--ink-faint); }
@media (max-width: 480px) { .predict-vote { flex-direction: column; } .predict-btn { flex: none; } }

/* uplevel P4 — the time-travel day-slider (the date input stays as fallback). */
.scrub-wrap { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.scrub-days { width: 150px; accent-color: var(--ember); }
.scrub-day-label { color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 5.5em; }
.scrub-days:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* uplevel P3 — the verdict, staged: attributed + sentence-beats that reveal in
   sequence. Gated on html.mo; reduced-motion (or no JS motion) reads all at once. */
.vd-who { display: block; color: var(--ink-faint); margin-bottom: var(--sp-2); }
@media (prefers-reduced-motion: no-preference) {
  html.mo .vd-beat { opacity: 0; animation: vdIn 0.55s var(--ease-out) forwards; animation-delay: var(--vd-delay, 0s); }
  @keyframes vdIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Signature 1 — the measuring-rule spine */
.spine {
  width: var(--spine-width); flex-shrink: 0; position: relative;
  border-right: var(--spine-border); padding-top: var(--sp-5);
}
.spine-day {
  display: block; text-align: center;
  font-family: var(--font-mono); font-size: 9px; /* fs-ok: measuring-rule spine geometry */ letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.spine::after {
  content: ""; position: absolute; right: 0; top: calc(var(--sp-5) + 26px);
  bottom: var(--sp-5); width: var(--spine-tick-w); background: var(--spine-ticks);
}

/* #588 motion v2 — the measuring-rule "fills" with your progress through the
   readout. Scroll-driven, so the fill tracks real position, not a timer;
   @supports-gated + reduced-motion-gated (unsupported / reduced → full static
   rule, unchanged). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .spine::after {
      transform-origin: top;
      animation: spine-draw linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 65%;
    }
    /* starts at a visible base (never a bare rule at the top) and fills to full
       as you scroll — a measuring rule that tracks your progress. */
    @keyframes spine-draw { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
  }
}

.panel-body { flex: 1; min-width: 0; padding: var(--sp-6) clamp(1.1rem, 0.6rem + 2vw, 1.9rem) var(--sp-5); }

.cap { margin-bottom: var(--sp-2); }

/* The hub — biggest, calmest element. Score in big tabular mono. */
.hub { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-1); }
.big {
  font-family: var(--font-mono); font-weight: var(--weight-med);
  font-size: var(--fs-data-xl); line-height: 0.8; letter-spacing: var(--tracking-tight);
}
.tier { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1); line-height: 1; padding-bottom: 0.35rem; }
.movement {
  font-family: var(--font-mono); font-size: var(--fs-small); padding-bottom: 0.5rem;
  color: var(--ink-muted); letter-spacing: 0.02em;
}
.movement[data-dir="up"] { color: var(--ember); }
.movement[data-dir="down"], .movement[data-dir="flat"] { color: var(--ink-muted); }

/* Honesty chip — muted ink, dashed hairline, plain language. Never red. */
.honest {
  margin-top: var(--sp-3); display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--honest-ink); border: var(--honest-border);
  border-radius: var(--radius-xs); padding: var(--sp-2) var(--sp-3);
  letter-spacing: 0.01em; max-width: min(100%, var(--measure));
}

/* Signature 2 — the machine ↔ human dialogue */
.dialogue { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.voice { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; }
.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(--voice-who-ink); width: 62px; flex-shrink: 0; padding-top: 0.4rem;
}
.voice.machine .what {
  font-family: var(--voice-machine-font); font-size: var(--voice-machine-size);
  line-height: var(--voice-machine-lh); color: var(--voice-machine-ink); max-width: var(--measure);
}
.voice.machine .what b, .voice.machine .what .mark { color: var(--voice-machine-mark); font-weight: var(--weight-reg); }
.voice.human .what {
  font-family: var(--voice-human-font); font-style: var(--voice-human-style);
  font-size: var(--voice-human-size); line-height: var(--voice-human-lh); color: var(--voice-human-ink);
}

/* ── #591 presence: the verdict's signed mark + honest write-time ──────────── */
.vd-mark { display: inline-flex; inline-size: 22px; block-size: 22px; flex: none; vertical-align: -0.42em; margin-inline-end: 0.45em; }
.vd-mark .ck-mark, .turn-mark .ck-mark, .sc-mark .ck-mark { display: block; inline-size: 100%; block-size: 100%; }
.vd-stamp { color: var(--ink-faint); }

/* ── #591 the argument underneath — the inter-coach dispute thread (#540) ───── */
.board-thread { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--border-hair); }
.thread-cap { color: var(--ink-faint); margin-bottom: var(--sp-3); }
.thread-cap .mark { color: var(--ember); }
.thread-when { color: var(--ink-faint); }
.turn { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; align-items: flex-start; }
.turn-mark { display: inline-flex; inline-size: 26px; block-size: 26px; flex: none; margin-top: 0.15rem; }
.turn-who { color: var(--ink-muted); margin-bottom: 0.15rem; }
.turn-role { color: var(--ember); margin-inline-start: 0.35em; }
.turn-line { color: var(--voice-machine-ink); line-height: var(--voice-machine-lh); max-width: var(--measure); }
/* the reply/rejoinder step in slightly — a conversation, not a list */
.turn-reply { margin-inline-start: var(--sp-4); }
.turn-rejoinder { margin-inline-start: calc(var(--sp-4) * 2); }

/* ── #591 where the team stands — stance chips with honest "held since" ─────── */
.stance-strip { margin-top: var(--sp-4); }
.stance-cap { color: var(--ink-faint); margin-bottom: var(--sp-2); }
.stance-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.stance-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  border: var(--border-hair); border-radius: var(--radius-sm);
  padding: 0.3rem 0.55rem; font-size: var(--fs-small);
}
.sc-mark { display: inline-flex; inline-size: 16px; block-size: 16px; flex: none; }
.sc-name { color: var(--ink-muted); }
.sc-stage { color: var(--ink); }
.sc-held { color: var(--ink-faint); }

@media (prefers-reduced-motion: no-preference) {
  html.mo .turn { opacity: 0; animation: vdIn 0.55s var(--ease-out) forwards; animation-delay: var(--vd-delay, 0s); }
}

/* ── The two glance domains (bento) ──────────────────────────────────────── */
.domains { margin-top: var(--sp-5); display: grid; gap: var(--bento-gap); }
.domain { border-top: var(--border-hair); padding-top: var(--sp-3); }
.domain[data-domain="body"] { --domain-tint: var(--body-tint); }
.domain[data-domain="mind"] { --domain-tint: var(--mind-tint); }
.domain-head { display: flex; align-items: baseline; justify-content: space-between; }
.domain-roll { font-size: var(--fs-data-lg); font-weight: var(--weight-med); color: var(--ink); }

/* Pillar rows — label · track · value · trend (the reference language) */
.rows { margin-top: var(--sp-2); }
.row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: var(--border-hair);
  width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
  cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.row:first-child { border-top: 0; }
.rows .row:hover .lab { color: var(--ink); }
.row .lab { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); width: 106px; flex-shrink: 0; letter-spacing: 0.02em; text-transform: capitalize; }
.row .track { flex: 1; height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.row .track i { display: block; height: 100%; background: var(--down-fill); transition: width var(--dur) var(--ease-out); }
.row.up .track i { background: var(--up-fill); }
.row .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-body); width: 32px; text-align: right; }
.row .tr { font-family: var(--font-mono); font-size: var(--fs-small); width: 16px; text-align: center; color: var(--ink-faint); }
.row.up .tr { color: var(--ember); }
.row .chev { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); width: 12px; text-align: center; transition: transform var(--dur-fast); }
.row[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--ink-muted); }
/* #747: not-yet-instrumented pillars — a dashed empty track, never a filled
   bar implying a real reading, and a muted "n/a" instead of a bare number. */
.row .track.track-none { background: none; position: relative; }
.row .track.track-none::after { content: ""; position: absolute; inset: 0; border-top: 1px dashed var(--ink-faint); opacity: 0.6; }
.row .val.label { color: var(--ink-faint); font-size: var(--fs-small); letter-spacing: 0.02em; }

/* In-place pillar disclosure (View Transitions) — detail opens on the surface */
.pillar-detail {
  grid-column: 1 / -1; overflow: hidden;
  border-top: var(--honest-border); margin-top: -1px;
  padding: var(--sp-3) 0 var(--sp-4); padding-left: calc(106px + var(--sp-3));
}
.pillar-detail .pd-read { font-family: var(--voice-machine-font); font-size: var(--voice-machine-size); line-height: var(--voice-machine-lh); color: var(--ink); max-width: var(--measure); }
.pillar-detail .pd-who { color: var(--ink-faint); }
.pillar-detail .pd-action { margin-top: var(--sp-2); color: var(--ember); font-family: var(--font-mono); font-size: var(--fs-small); }
.pillar-detail .pd-meta { margin-top: var(--sp-2); display: flex; gap: var(--sp-4); color: var(--ink-faint); }
.pillar-detail .pd-conf { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .pillar-detail { animation: pd-open var(--dur) var(--ease-out); }
  @keyframes pd-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Consistency band — discipline strip, not a peer tile */
.band {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  width: 100%; cursor: pointer; background: transparent; text-align: left; color: inherit;
}
.band .meter { flex: 1; min-width: 120px; height: 3px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.band .meter i { display: block; height: 100%; background: var(--ember); transition: width var(--dur) var(--ease-out); }
.band-val { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }

.boardline {
  margin-top: var(--sp-4); font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-quote); line-height: 1.4; color: var(--ink-muted); max-width: var(--measure);
}

/* Last night → today — readiness from raw vitals (recovery / sleep / HRV /
   resting-HR). These are wake-date-keyed: they describe last night and set today
   up — the opposite temporal frame from same-day activity — so the band leads the
   daily arc, above the "today" pillar domains and below the hub. */
.readiness { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.rd-night { color: var(--ink-faint); }
.rd-rows {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-4);
}
.rd-row { display: flex; flex-direction: column; gap: 2px; }
.rd-row .label { text-transform: lowercase; color: var(--ink-faint); }
.rd-val { font-family: var(--font-mono); font-size: var(--fs-data-lg); line-height: 1; color: var(--ink); }
.rd-val small { color: var(--ink-muted); font-size: var(--fs-label); }
/* Recovery status colours follow the honesty vocab — low recovery cools toward
   the ember accent, informative not punitive; never alarm-red. */
.rd-row.is-yellow .rd-val { color: color-mix(in oklch, var(--ember) 70%, var(--ink)); }
.rd-row.is-red .rd-val { color: var(--ember); }

/* RQA-04 — stored readiness score + component breakdown. Band worded + ember-toned, never
   alarm-red; component bars are ember on an ink track. */
.rd-score { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-3); }
.rd-score-v { font-family: var(--font-mono); font-size: var(--fs-data-xl); line-height: 1; color: var(--ember); }
.rd-score-band { text-transform: lowercase; }
.rd-score-band.rd-band-high { color: var(--ember); }
.rd-score-band.rd-band-mid { color: color-mix(in oklch, var(--ember) 70%, var(--ink)); }
.rd-score-band.rd-band-low { color: var(--ink-muted); }
.rd-comp { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-comp-row { display: grid; grid-template-columns: 5.5em 1fr 2em; align-items: center; gap: var(--sp-3); }
.rd-comp-row .label { text-transform: lowercase; color: var(--ink-faint); }
.rd-comp-track { height: 6px; background: color-mix(in oklch, var(--ink) 10%, transparent); border-radius: 3px; overflow: hidden; }
.rd-comp-fill { display: block; height: 100%; background: var(--ember); }
.rd-comp-v { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-muted); text-align: right; }
/* A computed zero is real input, shown honestly — but de-emphasized (hairline
   track, faint value) so twin dead bars don't read as broken. One shared caption
   states what a zero means. */
.rd-comp-zero .rd-comp-track { height: 2px; opacity: 0.6; }
.rd-comp-zero .rd-comp-v { color: var(--ink-faint); }
.rd-comp-note { margin-top: 2px; color: var(--ink-faint); opacity: 0.85; }

/* "today — where you stand" band header, above the pillar domains. */
.cap-today { margin-top: var(--sp-5); margin-bottom: 0; }
.cap-today + .domains { margin-top: var(--sp-3); }

/* Tonight's forecast — circadian-compliance (predictive). Reads forward, not
   back; honesty vocab — a "poor" forecast is muted, never alarm-red. */
.circadian {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair);
}
.circ-cat { color: var(--ember); text-transform: lowercase; letter-spacing: 0.02em; }
.circ-gauge { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.circ-score { font-family: var(--font-mono); font-size: var(--fs-data-lg); line-height: 1; color: var(--ink); }
.circ-max { color: var(--ink-faint); }
.circ-meter {
  flex: 1; min-width: 120px; height: 3px; align-self: center;
  background: var(--rule); border-radius: 3px; overflow: hidden;
}
.circ-meter i { display: block; height: 100%; background: var(--ember); transition: width var(--dur) var(--ease-out); }
.circ-rx {
  margin-top: var(--sp-3); font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-quote); line-height: 1.4; color: var(--ink-muted); max-width: var(--measure);
}
.circ-weak { margin-top: var(--sp-2); color: var(--ink-faint); }
/* A weak forecast cools the accent toward neutral — informative, not punitive. */
.circadian[data-cat="poor"] .circ-meter i { background: color-mix(in oklch, var(--ember) 55%, var(--ink-faint)); }
.circadian[data-cat="poor"] .circ-cat { color: var(--ink-muted); }

/* The model expects (#541) — deterministic expectations with 80% ranges, graded
   daily. Reads forward like the circadian panel; the coverage stat in the header
   is the honesty line. */
.forecast { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.fx-cov { color: var(--ink-faint); }
.fx-rows { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.fx-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.fx-row > .label { min-width: 5.5em; }
.fx-point { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-point small { color: var(--ink-faint); }
.fx-range { color: var(--ink-faint); }
.fx-resolved { margin-top: var(--sp-2); color: var(--ink-muted); }

/* Presence / quiet stretch (2026-06-30) — an honest note when the owner's own
   logging goes quiet, or when he's back. Calm, not alarmist: the accent only warms
   as the gap lengthens (dark), and a return reads neutral-warm. Never red. */
.presence { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.presence-line {
  margin-top: var(--sp-2); font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-quote); line-height: 1.4; color: var(--ink-muted); max-width: var(--measure);
}
.presence-sub { margin-top: var(--sp-2); color: var(--ink-faint); }
.presence[data-cls="quiet"] .presence-line,
.presence[data-cls="dark"] .presence-line { color: var(--ink); }
.presence[data-cls="dark"] { border-top-color: color-mix(in oklch, var(--ember) 30%, var(--rule)); }
.presence[data-cls="returned"] .presence-line { color: var(--ink); }

/* Since your last visit — the returning-visitor strip. Machine voice, no drama:
   metric rows with from→to, the signed change, and a hairline sparkline. */
.lastvisit { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.lv-gap { color: var(--ink-faint); }
.lv-rows { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.lv-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.lv-row > .label { min-width: 5.5em; }
.lv-delta { color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-chg { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lv-spark { color: var(--ink-faint); align-self: center; }

/* Reading line (Mind pillar, ADR-097) — current book + read-today + streak. No red. */
.reading-line { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.rl-tick { color: var(--ember); }
.rl-now { display: block; margin-top: var(--sp-2); text-decoration: none; }
.rl-now .rl-title { font-family: var(--font-serif); font-size: var(--fs-quote); color: var(--ink); }
.rl-now:hover .rl-title { color: var(--ember); }
.rl-now .rl-author { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.rl-streak { margin-top: var(--sp-1); color: var(--ink-faint); }

/* ── #974: the levers — the Protocols station in the daily slice ─────────────
   What's actually being run today (the stack in protocol, the experiment under
   way), each row one link into /protocols/. Registry truth only; pre-genesis it
   reads as staged, never as fabricated progress. Rows are flex + wrap so 390px
   never overflows; the whole row is the tap target (≥44px, #1010). */
.levers { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.lever-cap-note { color: var(--ink-faint); }
.lever-rows { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; }
.lever-link {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  min-height: 44px; padding: var(--sp-1) 0; text-decoration: none; color: inherit;
}
.lever-row + .lever-row .lever-link { border-top: var(--honest-border); }
.lever-k { min-width: 5.5em; color: var(--ink-muted); }
.lever-what { font-family: var(--font-serif); font-size: var(--fs-quote); color: var(--ink); }
.lever-what .num { font-family: var(--font-mono); font-size: 0.85em; /* fs-ok: relative de-emphasis inside the clamp-sized serif line */ font-variant-numeric: tabular-nums; }
.lever-none { color: var(--ink-muted); font-style: italic; }
.lever-meter {
  flex: 1; min-width: 64px; max-width: 160px; height: 3px; align-self: center;
  background: var(--rule); border-radius: 3px; overflow: hidden;
}
.lever-meter i { display: block; height: 100%; background: var(--ember); transition: width var(--dur) var(--ease-out); }
.lever-note { color: var(--ink-faint); }
.lever-go { margin-left: auto; color: var(--ink-faint); }
.lever-link:hover .lever-what { color: var(--ember); }
.lever-link:hover .lever-go { color: var(--ember); }

/* ── #975: the inputs — manual-channel freshness, instrument health not a streak.
   Deliberately neutral: ink tones only, with the site's ember accent (never red,
   never a badge) for a channel that's gone quiet past its registry tolerance.
   Non-interactive text row (no tap target needed, #1010); flex + wrap so 390px
   never overflows. The lull note (.presence) stays the narrative voice. */
.inputs { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.inputs-note { color: var(--ink-faint); }
.input-rows {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}
.input-row { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.input-ch { color: var(--ink-muted); }
.input-mark { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink); font-variant-numeric: tabular-nums; }
.input-row.is-quiet .input-mark { color: color-mix(in oklch, var(--ember) 60%, var(--ink-muted)); }

/* Foot + states */
.cockpit-foot { margin-top: var(--sp-5); display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: baseline; }
.cockpit-foot a { color: var(--ink-faint); text-decoration: none; }
.cockpit-foot a:hover { color: var(--ember); }
.cockpit-foot .cockpit-follow { color: var(--ember); }
.cockpit-foot .asof { margin-left: auto; color: var(--ink-faint); }
.cockpit-error { margin-top: var(--sp-4); color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); }

/* Loading shimmer (calm, not a spinner) */
.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; } }
  .panel { opacity: 0; animation: rise var(--dur-slow) var(--ease-out) 0.06s forwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.cockpit[data-state="ready"] .shimmer { animation: none; }

/* ── Desktop: the deep read gets two columns for the domains ─────────────── */
@media (min-width: 761px) {
  .domains { grid-template-columns: 1fr 1fr; }
  .domain { border-top: 0; }
  .panel-body { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
  .spine { width: calc(var(--spine-width) + 8px); }
}

/* ── Journey scope: timeline + achievements ──────────────────────────────── */
.journey { margin-top: var(--sp-5); }
.jr-block { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.jr-block .cap { margin-bottom: var(--sp-3); }
.ach-count { color: var(--ember); margin-left: var(--sp-2); }

.timeline { list-style: none; }
.tl-item { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-top: var(--honest-border); position: relative; }
.tl-item:first-child { border-top: 0; }
.tl-item::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-3) + 6px); width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.tl-date { color: var(--ink-faint); width: 88px; flex-shrink: 0; padding-top: 1px; }
.tl-title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.tl-note { margin-top: var(--sp-1); color: var(--ink-muted); font-size: var(--fs-small); }
.tl-empty { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-3) 0; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.ach { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); opacity: 0.5; }
.ach.is-earned { opacity: 1; border-color: var(--ember-line); }
.ach-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.ach.is-earned .ach-dot { background: var(--ember); }
/* #1126: min-width:0 lets the label shrink under a sibling earned-date, but mono text
   kept painting past the shrunk box (label + date overlapped on the first earned badge
   with a date) — ellipsize instead; the full name lives in the tile's title attr. */
.ach-label { font-family: var(--font-mono); font-size: var(--fs-small); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-when { color: var(--ink-faint); }
/* #1126: the grid's link-out tile to /data/badges/ — navigation, not a badge state
   (full opacity, dashed frame, no earned glow). */
.ach-more { opacity: 1; border-style: dashed; text-decoration: none; color: var(--ink-muted); }

/* View-transition naming for the door + hub (door-to-door continuity) */
@media (prefers-reduced-motion: no-preference) {
  .panel { view-transition-name: cockpit-panel; }
}

/* ── Phase 3 polish: nav · a11y · honesty · mobile ────────────────────────── */
/* @layer chrome-base: `.cockpit-top .doors` (0,2,0) used to force the mobile app-bar
   to !important its way past it — now the app-bar (@layer chrome) wins by layer order. (#1007) */
@layer chrome-base {
  .cockpit-top .doors { display: inline-flex; align-items: center; gap: var(--sp-4); }
  .cockpit-top .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; }
  .cockpit-top .doors a:hover { color: var(--ember); }
  .cockpit-top .doors a[aria-current="page"] { color: var(--ember); border-bottom: 1px solid var(--ember); padding-bottom: 1px; cursor: default; }
}

/* Explicit, always-visible keyboard focus */
.scope-btn:focus-visible, .row:focus-visible, .band:focus-visible,
.theme-toggle:focus-visible, .cockpit-top .doors a:focus-visible,
.scope-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Locked achievements wear the honesty vocabulary (dashed, muted) — not just faded */
.ach:not(.is-earned) { border-style: dashed; opacity: 0.6; }

/* Mobile: shrink the spine + tighten labels so the glance isn't cramped */
@media (max-width: 480px) {
  .spine { width: 20px; }
  .spine::after { width: 5px; }
  .row .lab, .voice .who { width: 84px; }
  .hub { gap: var(--sp-3); }
}

/* Week scope (S-03): six instruments, seven days — glanceable spark rows */
.weekview { margin-top: var(--sp-5); }
.wk-rows { list-style: none; margin: 0; padding: 0; }
.wk-row { display: grid; grid-template-columns: 88px 120px auto auto 1fr; align-items: center;
          gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.wk-row .label { text-transform: capitalize; }
.wk-val { font-size: var(--fs-body); }
.wk-val small { color: var(--ink-muted); font-size: var(--fs-label); }
.wk-delta { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }
.wk-delta.is-up { color: var(--ember); }
.wk-delta.is-down { color: var(--ink-faint); }
.wk-note { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint);
           text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .wk-row { grid-template-columns: 72px 96px auto auto; }
  .wk-note { display: none; }
}

/* Month scope — SS-08 "what changed": 30d deltas + newly-unlocked correlations */
.monthview { margin-top: var(--sp-5); }
.mo-rows { list-style: none; margin: 0; padding: 0; }
.mo-row { display: grid; grid-template-columns: 110px auto auto 1fr; align-items: center;
          gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.mo-val { font-size: var(--fs-body); }
.mo-val small { color: var(--ink-muted); font-size: var(--fs-label); }
.mo-delta { font-family: var(--font-mono); font-size: var(--fs-small); }
.mo-row.is-up .mo-delta { color: var(--ember); }
.mo-row.is-down .mo-delta { color: var(--ink-faint); }
.mo-note { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint);
           text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-unlocks { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.mo-unlock { font-size: var(--fs-small); line-height: 1.5; color: var(--ink); padding-left: var(--sp-3);
             border-left: 2px solid var(--ember); }
.mo-unlock-k { color: var(--ember); margin-right: var(--sp-1); }
.mo-unlock-r { font-family: var(--font-mono); color: var(--ink-faint); }
@media (max-width: 480px) {
  .mo-row { grid-template-columns: 92px auto auto; }
  .mo-note { display: none; }
}

/* Time scrubber — any past morning's sheet (2026-06-13) */
.scrub-wrap { display: inline-flex; align-items: center; gap: var(--sp-2); }
.scrub { background: transparent; border: var(--border-hair); border-radius: var(--radius-xs);
  color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-label);
  padding: 2px var(--sp-2); color-scheme: dark; }
[data-theme="light"] .scrub { color-scheme: light; }
.scrub:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── #406: intra-day sync strip — real write times, earned glow only ──────── */
.sync-line { margin-top: var(--sp-2); color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline; }
.sync-src { white-space: nowrap; }
.sync-ago { color: var(--ink-muted); }
.sync-sep { color: var(--ink-faint); }
/* The dot's shape/glow-when-fresh is the shared .fr-dot primitive (tokens.css §12c,
   #589) — the glow is EARNED: it lights only while this source's real last-write is
   inside ITS OWN registry-derived window (data-fresh-ts/-window on the span). */