/* ===================================================================
   THE LONG GAME — Investing · app shell design system (DESIGN §9)
   The ledger / graph-paper register: ink on paper, one calm signal
   color (teal — "the water eye"), earthy ditch hues (clay Gambler,
   plum Sophisticate), desaturated fault hues for the Council chart.
   Restrained, grown-up, a little dry. Serif for teaching prose; a
   tabular / monospaced feel for every number and the ledger. NEVER
   fintech-neon; NEVER casino red/green.

   Paper (light) is the default register. Both themes:
   prefers-color-scheme while unset + an explicit [data-theme] toggle
   (the toggle always wins). 375px-first. prefers-reduced-motion
   respected (transform-only motion that leaves content visible if it
   fails). Visible :focus-visible rings, contrast held in both themes.

   Token names are shared with reader.html and the two modules so every
   surface reads as one ledger.
   =================================================================== */

:root{
  color-scheme: light dark;
  /* --- ledger paper, light (the default field) --- */
  --bg:#f4efe1; --panel:#faf6ec; --panel-2:#f0e9d8; --sink:#ece4d2;
  --ink:#20262e; --muted:#5c6673; --faint:#8a8676;
  --line:#d8cfb8; --line-soft:#e6ddc9;
  --signal:#2f7d75; --signal-ink:#256a63;
  --signal-soft:rgba(47,125,117,.12); --signal-line:rgba(47,125,117,.34); --signal-fill:rgba(47,125,117,.07);
  --grid:rgba(32,38,46,.05);
  --gambler:#b0563e; --sophisticate:#7c6aa8;
  --gambler-ink:#8f3f2b; --soph-ink:#5f4f8a;
  --gambler-soft:rgba(176,86,62,.12); --soph-soft:rgba(124,106,168,.13);
  /* fault hues (Council chart — desaturated, colorblind-aware, ledger-appropriate) */
  --f-chase:#c07a3e; --f-flight:#4f6d8a; --f-tinker:#9a8445; --f-forecast:#7c6aa8; --f-reach:#a24b40;
  --hover:rgba(32,38,46,.05);
  --target:rgba(47,125,117,.10);
  --focus:#256a63;
  --nav-bg:rgba(244,239,225,.86);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
}

/* ink-field dark — applied when the OS asks for dark AND the reader made no
   explicit choice, and whenever the explicit toggle selects dark. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#161b21; --panel:#1b2129; --panel-2:#212933; --sink:#12161b;
    --ink:#e9e3d4; --muted:#9aa3b0; --faint:#7c8492;
    --line:#2b3440; --line-soft:#232b34;
    --signal:#3f9a90; --signal-ink:#5cb3a8;
    --signal-soft:rgba(63,154,144,.14); --signal-line:rgba(63,154,144,.4); --signal-fill:rgba(63,154,144,.09);
    --grid:rgba(233,227,212,.045);
    --gambler:#c06a50; --sophisticate:#9483c0;
    --gambler-ink:#d0846c; --soph-ink:#a495cf;
    --gambler-soft:rgba(192,106,80,.14); --soph-soft:rgba(148,131,192,.15);
    --f-chase:#cf8b4f; --f-flight:#6d8cab; --f-tinker:#b39d5c; --f-forecast:#9483c0; --f-reach:#c0685c;
    --hover:rgba(233,227,212,.06);
    --target:rgba(63,154,144,.12);
    --focus:#5cb3a8;
    --nav-bg:rgba(22,27,33,.86);
  }
}
:root[data-theme="dark"]{
  --bg:#161b21; --panel:#1b2129; --panel-2:#212933; --sink:#12161b;
  --ink:#e9e3d4; --muted:#9aa3b0; --faint:#7c8492;
  --line:#2b3440; --line-soft:#232b34;
  --signal:#3f9a90; --signal-ink:#5cb3a8;
  --signal-soft:rgba(63,154,144,.14); --signal-line:rgba(63,154,144,.4); --signal-fill:rgba(63,154,144,.09);
  --grid:rgba(233,227,212,.045);
  --gambler:#c06a50; --sophisticate:#9483c0;
  --gambler-ink:#d0846c; --soph-ink:#a495cf;
  --gambler-soft:rgba(192,106,80,.14); --soph-soft:rgba(148,131,192,.15);
  --f-chase:#cf8b4f; --f-flight:#6d8cab; --f-tinker:#b39d5c; --f-forecast:#9483c0; --f-reach:#c0685c;
  --hover:rgba(233,227,212,.06);
  --target:rgba(63,154,144,.12);
  --focus:#5cb3a8;
  --nav-bg:rgba(22,27,33,.86);
}
/* explicit light always wins over a dark OS preference */
:root[data-theme="light"]{
  --bg:#f4efe1; --panel:#faf6ec; --panel-2:#f0e9d8; --sink:#ece4d2;
  --ink:#20262e; --muted:#5c6673; --faint:#8a8676;
  --line:#d8cfb8; --line-soft:#e6ddc9;
  --signal:#2f7d75; --signal-ink:#256a63;
  --signal-soft:rgba(47,125,117,.12); --signal-line:rgba(47,125,117,.34); --signal-fill:rgba(47,125,117,.07);
  --grid:rgba(32,38,46,.05);
  --gambler:#b0563e; --sophisticate:#7c6aa8;
  --gambler-ink:#8f3f2b; --soph-ink:#5f4f8a;
  --gambler-soft:rgba(176,86,62,.12); --soph-soft:rgba(124,106,168,.13);
  --f-chase:#c07a3e; --f-flight:#4f6d8a; --f-tinker:#9a8445; --f-forecast:#7c6aa8; --f-reach:#a24b40;
  --hover:rgba(32,38,46,.05);
  --target:rgba(47,125,117,.10);
  --focus:#256a63;
  --nav-bg:rgba(244,239,225,.86);
}

/* ---------- reset-ish ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background-color:var(--bg);
  /* the faint graph-paper grid — on-brand ledger texture */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:-1px -1px;
}
h1,h2,h3,p{ margin:0; }
a{ color:var(--signal-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
b{ font-weight:600; }

/* numbers wear the ledger's tabular hand */
.num, .dial-num, .acc, .att, .ct, .council-table td, .rbar .cap, .stat-row b{
  font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}

/* focus — visible on every interactive control, both themes */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:8px;
}
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute; left:8px; top:-48px; z-index:100;
  background:var(--signal); color:#fff; font:600 13px var(--sans);
  padding:9px 15px; border-radius:10px; transition:top .16s ease;
}
.skip-link:focus{ top:8px; text-decoration:none; }

/* ---------- shell ---------- */
.wrap{ width:100%; max-width:1000px; margin:0 auto; padding:0 clamp(16px,4vw,26px); }
.view-pad{ padding-top:24px; padding-bottom:76px; min-height:62vh; }
.view-pad:focus{ outline:none; }

.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--nav-bg);
  backdrop-filter:saturate(1.05) blur(9px); -webkit-backdrop-filter:saturate(1.05) blur(9px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); font:600 16px var(--serif); letter-spacing:.01em; }
.brand:hover{ text-decoration:none; }
.brand .mark{ flex:0 0 auto; }
.brand small{ font:400 11px var(--sans); color:var(--faint); letter-spacing:.16em; text-transform:uppercase; }

.applinks{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.applinks button[data-route], .applinks a{
  font:500 13.5px var(--sans); color:var(--muted);
  background:none; border:0; border-radius:8px; padding:7px 10px; cursor:pointer;
}
.applinks button[data-route]:hover, .applinks a:hover{ background:var(--hover); color:var(--ink); text-decoration:none; }
.applinks button[data-route].on{ color:var(--signal-ink); background:var(--signal-soft); }
.theme-toggle{ font-size:16px; line-height:1; width:34px; height:32px; color:var(--muted); }

.stamp-foot{ border-top:1px solid var(--line); margin-top:20px; background:var(--panel); }
.stamp{ font:400 12px var(--sans); color:var(--muted); line-height:1.6; padding:16px 0 20px; max-width:70ch; }
.stamp b{ color:var(--ink); }
.stamp .rev{ color:var(--faint); }

/* ---------- layout primitives ---------- */
.page{ margin:0 auto; }
.w600{ max-width:600px; } .w680{ max-width:680px; } .w760{ max-width:760px; } .w940{ max-width:940px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.center{ text-align:center; }
.serif{ font-family:var(--serif); }
.display{ font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.01em; }
.kicker{ font:600 12px var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.kicker.signal{ color:var(--signal-ink); }
.lead{ color:var(--muted); line-height:1.55; font-family:var(--serif); }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }

/* animated entrance — transform+opacity only (reduced-motion turns it off, content stays) */
.up{ opacity:0; transform:translateY(8px); animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
.up.d1{ animation-delay:.02s; } .up.d2{ animation-delay:.08s; } .up.d3{ animation-delay:.16s; } .up.d4{ animation-delay:.24s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* buttons */
.btn{ font:600 14.5px var(--sans); border-radius:11px; padding:11px 17px; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; }
.btn.primary{ background:var(--signal); color:#fff; border-color:var(--signal); }
.btn.primary:hover{ filter:brightness(1.05); text-decoration:none; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ background:var(--hover); text-decoration:none; }
.btn.signal-ghost{ background:var(--signal-soft); color:var(--signal-ink); border-color:var(--signal-line); }
.btn[disabled]{ opacity:.5; cursor:default; }
.quiet-link{ background:none; border:0; color:var(--muted); font:500 13.5px var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.quiet-link:hover{ color:var(--ink); }
.textlink{ background:none; border:0; cursor:pointer; font:500 14px var(--sans); }

.pill{ display:inline-flex; align-items:center; gap:5px; font:600 11.5px var(--sans); letter-spacing:.02em; color:var(--muted); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
.pill.signal{ color:var(--signal-ink); background:var(--signal-soft); border-color:var(--signal-line); }

.card, .panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.callout{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--signal); border-radius:12px; padding:13px 16px; }
.callout .lab{ font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--signal-ink); }
.callout .txt{ margin-top:5px; color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.5; }

.ta, .stone-input, .proofText{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); font:400 15.5px var(--serif); line-height:1.55; padding:11px 13px; resize:vertical; min-height:84px;
}
.ta::placeholder, .stone-input::placeholder, .proofText::placeholder{ color:var(--faint); }
.divider{ border:0; border-top:1px solid var(--line); margin:20px 0; }

/* ===================================================================
   ONBOARDING
   =================================================================== */
.hero{ text-align:center; padding:14px 0; }
.hero .display{ font-size:clamp(32px,9vw,44px); margin:.12em 0 0; }
.tracks{ display:grid; gap:12px; grid-template-columns:1fr; margin:22px 0 0; }
.track-card{
  text-align:left; background:var(--panel); border:1.5px solid var(--line); border-radius:14px;
  padding:16px 18px; cursor:pointer; color:var(--ink); position:relative;
}
.track-card:hover{ border-color:var(--signal-line); }
.track-card.sel{ border-color:var(--signal); background:var(--signal-fill); }
.track-card .chktop{ display:flex; align-items:center; justify-content:space-between; }
.track-card .chk{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); color:transparent; display:grid; place-items:center; font-size:13px; }
.track-card.sel .chk{ background:var(--signal); border-color:var(--signal); color:#fff; }
.track-card h3{ font:600 19px var(--serif); margin:10px 0 3px; }
.track-card p{ color:var(--muted); font-size:14px; }
.privacy{ font-size:12.5px; color:var(--faint); font-style:italic; margin-top:14px; }
.onb-notes{ text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:18px 0 0; }
.onb-notes li{ color:var(--muted); font-size:13.5px; line-height:1.65; margin:0 0 6px; }

/* ===================================================================
   DIAL — the honest readiness gauge + the 13-unit trail
   =================================================================== */
.dial-head{ text-align:center; margin-top:6px; }
.dial-wrap{ position:relative; width:min(230px,64vw); margin:12px auto 0; }
.dial-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dial-num{ font-size:34px; font-weight:600; color:var(--ink); }
.dial-lab{ font:600 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.dial-note{ max-width:40ch; margin:12px auto 0; color:var(--muted); font-size:13.5px; line-height:1.55; }
.day-band{ text-align:center; margin-top:22px; }
.day-band .daynum{ font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.day-title{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,6vw,30px); margin:4px 0 0; }

.sim-card{ background:var(--panel); border:1px solid var(--signal-line); border-radius:14px; padding:16px 18px; margin-top:22px; }
.sim-card .mt{ font:600 18px var(--serif); }
.sim-card .ms{ color:var(--muted); font-size:13.5px; margin:3px 0 8px; }
.sim-card .warn{ font-size:12.5px; color:var(--faint); font-style:italic; margin-top:10px; }
.sim-locked{ background:var(--panel); border:1px dashed var(--line); border-radius:14px; padding:14px 16px; margin-top:22px; color:var(--muted); font-size:13.5px; }

.carry-checkin, .recovery, .rusty-note{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:18px; }
.recovery{ border-left:3px solid var(--signal); }
.rusty-note .lab, .carry-checkin .kicker{ font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* the trail */
.trail-legend{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:14px 0 16px; font-size:12px; color:var(--muted); }
.trail-legend span{ display:inline-flex; align-items:center; gap:6px; }
.lg-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.trail{ display:grid; gap:12px; }
.stage{ position:relative; padding-left:26px; }
.stage .rail{ position:absolute; left:8px; top:20px; bottom:-12px; width:2px; background:var(--line); }
.stage:last-child .rail{ display:none; }
.stage .node{ position:absolute; left:2px; top:8px; width:13px; height:13px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); }
.stage.walked .node{ background:var(--signal); border-color:var(--signal); }
.stage.current .node{ background:var(--signal); border-color:var(--signal); box-shadow:0 0 0 4px var(--signal-fill); }
.stage-card{ background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:13px 15px; }
.stage.current .stage-card{ border-color:var(--signal-line); background:var(--signal-fill); }
.stage-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stage-rk{ font:600 11px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.stage.current .stage-rk{ color:var(--signal-ink); }
.stage-title{ font:600 17px var(--serif); margin:5px 0 2px; }
.stage-center{ color:var(--muted); font-size:13.5px; font-style:italic; }
.enemies{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0; }
.ditch{ border-radius:9px; padding:7px 9px; font-size:12px; line-height:1.4; }
.ditch.gambler{ background:var(--gambler-soft); border:1px solid var(--gambler); border-color:color-mix(in srgb, var(--gambler) 40%, transparent); }
.ditch.sophisticate{ background:var(--soph-soft); border:1px solid color-mix(in srgb, var(--sophisticate) 40%, transparent); }
.ditch .dh{ display:block; font-weight:600; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; }
.ditch.gambler .dh{ color:var(--gambler-ink); }
.ditch.sophisticate .dh{ color:var(--soph-ink); }
.ditch .dw{ color:var(--ink); }
.rbar{ margin-top:11px; }
.rbar .track{ height:6px; border-radius:99px; background:var(--sink); overflow:hidden; }
.rbar .fill{ height:100%; background:var(--signal); border-radius:99px; }
.rbar .cap{ display:flex; justify-content:space-between; gap:8px; margin-top:5px; font-size:11.5px; color:var(--muted); }

/* ===================================================================
   SESSION — the five-beat day
   =================================================================== */
.sess-head{ text-align:center; }
.sess-head .daynum{ font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sess-lesson{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,5.5vw,28px); margin:5px 0 0; }
.stepper{ position:relative; margin:22px 0 20px; }
.stepper .track-line{ position:absolute; left:8%; right:8%; top:13px; height:2px; background:var(--line); }
.stepper .lit-line{ position:absolute; left:8%; top:13px; height:2px; background:var(--signal); transition:width .3s ease; }
.stepper .nodes{ position:relative; display:flex; justify-content:space-between; }
.step{ background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; }
.step .dot{ width:28px; height:28px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); display:grid; place-items:center; font:600 12px var(--mono); color:var(--muted); }
.step.cur .dot{ background:var(--signal); border-color:var(--signal); color:#fff; }
.step.done .dot{ border-color:var(--signal); color:var(--signal-ink); }
.step .lbl{ font-size:11px; color:var(--muted); }
.step.cur .lbl{ color:var(--ink); font-weight:600; }
.beat{ min-height:180px; }
.beat-kick{ font:600 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--signal-ink); }
.bh{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,5.5vw,27px); margin:5px 0 12px; }
.sess-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.sess-foot .counter{ font-size:12px; color:var(--faint); }

.centerline{ background:var(--signal-fill); border:1px solid var(--signal-line); border-radius:12px; padding:12px 15px; margin:14px 0; }
.centerline .lab{ font:600 10.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--signal-ink); }
.centerline .txt{ font-family:var(--serif); font-size:17px; margin-top:4px; }
.lesson-body{ font-family:var(--serif); font-size:16.5px; line-height:1.66; }
.lesson-body p{ margin:0 0 14px; }
.arena-tag{ font-size:13px; color:var(--muted); margin-top:12px; }
.reader-link{ font-size:13px; margin-top:8px; }

.arrive-ring{ width:110px; height:110px; margin:0 auto; position:relative; }
.arrive-ring .cap{ position:absolute; inset:0; display:grid; place-content:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* quiz + drill */
.quizq-wrap{ margin-top:18px; }
.qlab{ font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.quizq{ margin:14px 0; }
.quizQ{ font-family:var(--serif); font-size:16px; line-height:1.5; }
.opts{ display:grid; gap:8px; margin-top:10px; }
.opt{ text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 13px; cursor:pointer; font:400 14.5px var(--sans); color:var(--ink); line-height:1.45; }
.opt:hover:not([disabled]){ border-color:var(--signal-line); }
.opt.correct{ border-color:var(--signal); background:var(--signal-fill); }
.opt.wrong{ border-color:var(--gambler); background:var(--gambler-soft); }
.why{ font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:8px; padding:9px 12px; background:var(--panel-2); border-radius:10px; border-left:2px solid var(--line); }
.why b{ color:var(--ink); }
.fault-tag{ display:inline-block; font:600 10.5px var(--sans); letter-spacing:.04em; text-transform:uppercase; border-radius:6px; padding:2px 6px; margin:0 0 4px; }
.fault-tag.gambler{ background:var(--gambler-soft); color:var(--gambler-ink); }
.fault-tag.sophisticate{ background:var(--soph-soft); color:var(--soph-ink); }

.stone{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin:11px 0; }
.stone .lbl{ font:600 11px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--signal-ink); }
.stone .q{ font-family:var(--serif); font-size:16px; margin:6px 0 9px; line-height:1.45; }

.module-card{ background:var(--panel); border:1px solid var(--signal-line); border-radius:14px; padding:18px; }
.module-card .mt{ font:600 20px var(--serif); }
.module-card .ms{ color:var(--signal-ink); font-size:13px; margin:3px 0 10px; }
.module-card .mblurb{ color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 14px; }

.carry-hero{ background:var(--signal-fill); border:1px solid var(--signal-line); border-radius:14px; padding:16px 18px; }
.carry-hero .lab{ font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--signal-ink); }
.carry-hero .txt{ font-family:var(--serif); font-size:18px; margin-top:6px; line-height:1.45; }

/* ===================================================================
   COUNCIL — the fault chart (units × five faults), tallies, data i/o
   =================================================================== */
.fault-banner{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:18px 0; }
.fault-banner .lab{ font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.fault-banner .words{ font-family:var(--serif); font-size:clamp(20px,5vw,25px); font-weight:600; margin:7px 0 4px; }
.fault-banner .gloss{ color:var(--ink); font-size:14.5px; line-height:1.5; }
.fault-banner .evidence{ color:var(--muted); font-size:13px; margin-top:8px; line-height:1.5; }
.fault-banner .cite{ color:var(--faint); font-size:12.5px; margin-top:8px; }

.council-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 4px; }
.council-table{ border-collapse:separate; border-spacing:5px; min-width:100%; }
.council-table th{ font:600 10.5px var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:2px 4px; text-align:center; white-space:nowrap; }
.council-table th.rowh{ text-align:left; position:sticky; left:0; background:var(--bg); z-index:1; }
.council-rowh{ font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:600; }
.council-table td{ padding:0; }
.cell{ width:100%; min-width:52px; height:44px; border-radius:9px; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; cursor:pointer; padding:2px; }
.cell.empty{ color:var(--faint); background:transparent; border-style:dashed; cursor:default; }
.cell .fc{ font:600 14px var(--mono); color:#fff; }
.cell .fk{ font-size:9px; color:rgba(255,255,255,.85); }
.cell.f-chase{ background:var(--f-chase); border-color:var(--f-chase); }
.cell.f-flight{ background:var(--f-flight); border-color:var(--f-flight); }
.cell.f-tinker{ background:var(--f-tinker); border-color:var(--f-tinker); }
.cell.f-forecast{ background:var(--f-forecast); border-color:var(--f-forecast); }
.cell.f-reach{ background:var(--f-reach); border-color:var(--f-reach); }
.cell.clean{ background:var(--signal-soft); border-color:var(--signal-line); color:var(--signal-ink); }
.cell.clean .fc{ color:var(--signal-ink); font-size:12px; }
.council-legend{ display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 2px; font-size:11.5px; color:var(--muted); }
.council-legend span{ display:inline-flex; align-items:center; gap:5px; }
.lg-sq{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.cell-detail{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin:12px 0; }
.cell-detail .lab{ font:600 12px var(--sans); color:var(--ink); }

.tallies{ display:grid; grid-template-columns:1fr; gap:16px; margin:18px 0; }
.tally .lab{ font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.tally-row{ display:grid; grid-template-columns:88px 1fr 28px; align-items:center; gap:9px; margin:6px 0; }
.tally-row .nm{ font-size:12.5px; color:var(--ink); text-transform:capitalize; }
.tally-row .bar{ height:8px; background:var(--sink); border-radius:99px; overflow:hidden; }
.tally-row .bar i{ display:block; height:100%; border-radius:99px; }
.tally-row .bar i.f-chase{ background:var(--f-chase); } .tally-row .bar i.f-flight{ background:var(--f-flight); }
.tally-row .bar i.f-tinker{ background:var(--f-tinker); } .tally-row .bar i.f-forecast{ background:var(--f-forecast); }
.tally-row .bar i.f-reach{ background:var(--f-reach); }
.tally-row .bar i.gambler{ background:var(--gambler); } .tally-row .bar i.sophisticate{ background:var(--sophisticate); }
.tally-row .ct{ font:600 12px var(--mono); color:var(--muted); text-align:right; }

.dataio{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:18px; }
.dataio .lab{ font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.dataio .never{ margin-top:12px; font-size:12.5px; color:var(--signal-ink); font-weight:600; }
.io-note{ font-size:13px; color:var(--muted); margin-top:6px; }

/* ===================================================================
   JOURNAL
   =================================================================== */
.journal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.journal-title{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,7vw,34px); margin:2px 0 0; }
.journal-meta{ display:flex; gap:18px; flex-wrap:wrap; margin:12px 0 4px; font-size:13px; color:var(--muted); }
.journal-meta b{ color:var(--ink); font-family:var(--mono); }
.jchips{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.jchip{ background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:6px 12px; font:500 13px var(--sans); color:var(--muted); cursor:pointer; }
.jchip.on{ background:var(--signal-soft); border-color:var(--signal-line); color:var(--signal-ink); }
.jchip .n{ font-family:var(--mono); font-size:11px; margin-left:5px; opacity:.8; }
.jentry{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0; }
.jmeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.jday{ font-family:var(--mono); font-weight:600; color:var(--ink); }
.jsep{ width:3px; height:3px; border-radius:50%; background:var(--faint); }
.jtag{ margin-left:auto; font:600 10.5px var(--sans); letter-spacing:.04em; text-transform:uppercase; border-radius:6px; padding:2px 7px; background:var(--panel-2); color:var(--muted); }
.jtag.signal{ background:var(--signal-soft); color:var(--signal-ink); }
.jtag.headline{ background:var(--gambler-soft); color:var(--gambler-ink); }
.jprompt{ font-family:var(--serif); font-size:14.5px; color:var(--muted); margin:8px 0 4px; }
.jresp{ font-family:var(--serif); font-size:15.5px; color:var(--ink); line-height:1.5; }

/* ===================================================================
   RESOLUTIONS — earned depth (the pyramid) + active / earned
   =================================================================== */
.pyramid{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:18px 0; }
.pyr-rows{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:14px 0 6px; }
.pyr-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:8px 12px; }
.pyr-row.earned{ background:var(--signal-fill); border-color:var(--signal-line); }
.pyr-row.next{ border-color:var(--signal); border-style:dashed; }
.pyr-row .k{ font:600 10.5px var(--mono); color:var(--muted); }
.pyr-row .nm{ font:600 13px var(--serif); color:var(--ink); }
.pyr-row .ct{ font:600 11px var(--mono); color:var(--faint); }
.pyr-caps{ display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:6px; }
.order-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:11px 0; }
.order-card.earned{ border-color:var(--signal-line); background:var(--signal-fill); }
.order-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.order-title{ font:600 15.5px var(--serif); }
.order-mission{ color:var(--muted); font-size:14px; line-height:1.55; margin:8px 0; }
.claimform{ margin-top:10px; }
.proof-well{ background:var(--panel-2); border-radius:10px; padding:10px 13px; margin-top:9px; }
.proof-well .plab{ font:600 10.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.proof-well .ptxt{ font-family:var(--serif); font-size:15px; color:var(--ink); margin-top:4px; line-height:1.5; }

/* ===================================================================
   SIMULATOR surface
   =================================================================== */
.sim-hero{ text-align:center; }
.sim-hero .display{ font-size:clamp(28px,7vw,36px); margin:.1em 0 8px; }
.sim-note{ background:var(--signal-fill); border:1px solid var(--signal-line); border-radius:12px; padding:12px 15px; margin:16px 0; color:var(--ink); font-size:14px; line-height:1.5; }
.sim-note b{ color:var(--signal-ink); }

/* ===================================================================
   REVIEW
   =================================================================== */
.review-q{ margin:12px 0; }
.review-q .rq{ font-family:var(--serif); font-size:15px; color:var(--muted); }
.review-q .ra{ font-family:var(--serif); font-size:15.5px; color:var(--ink); margin-top:4px; line-height:1.5; }
.review-q .ra.blank{ color:var(--faint); font-style:italic; }

/* ===================================================================
   CERTIFICATE — an acknowledgment (not a credential)
   =================================================================== */
.cert{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 22px; text-align:center; position:relative; }
.cert .ribbon{ font:600 11px var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--signal-ink); }
.cert h1{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,8vw,38px); margin:6px 0 2px; }
.cert .ctrack{ color:var(--muted); font-size:13.5px; }
.cert .clead{ color:var(--muted); font-size:14px; margin:16px 0 6px; font-family:var(--serif); }
.cert .recip{ font-family:var(--serif); font-size:22px; text-align:center; background:transparent; border:0; border-bottom:1.5px solid var(--line); color:var(--ink); padding:4px 8px; width:min(320px,86%); }
.cert .cite{ font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.6; max-width:46ch; margin:16px auto 0; }
.cstats{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:20px 0 0; }
.cstats .v{ font:600 17px var(--mono); color:var(--ink); }
.cstats .k{ font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.cnote{ font-size:12px; color:var(--faint); line-height:1.55; max-width:52ch; margin:18px auto 0; }
.cert-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.stat-row{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:16px 0; font-size:13px; color:var(--muted); }
.stat-row b{ display:block; font-size:19px; color:var(--ink); }

/* ===================================================================
   RESPONSIVE — 375px-first. Base styles target the small screen; these
   min-width steps progressively enhance wider viewports.
   =================================================================== */
@media (max-width: 375px){
  .applinks button[data-route], .applinks a{ padding:6px 7px; font-size:12.5px; }
  .cstats{ gap:14px; }
  .enemies{ grid-template-columns:1fr; }
}
@media (min-width: 620px){
  .tracks{ grid-template-columns:1fr 1fr; }
  .tallies{ grid-template-columns:1fr 1fr; }
}
@media (min-width: 760px){
  .stepper .track-line, .stepper .lit-line{ left:6%; right:6%; }
}

/* ===================================================================
   REDUCED MOTION — never move by transform; content is always visible.
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .up{ opacity:1; transform:none; animation:none; }
  .stepper .lit-line{ transition:none; }
}

@media print{
  .topbar, .stamp-foot, .cert-actions, .no-print{ display:none !important; }
  body{ background:#fff; }
}