/* =========================================================================
   HHL training app — SaaS-clean chrome.
   Poppins headings, Inter body, light, hairline borders, pills, one gold
   accent carried over from the deck canvas.

   Everything is a token on an 8pt rhythm. Type is a fixed scale. Long-form
   text is held to a readable measure rather than the full column width.
   ========================================================================= */

:root{
  /* ink + surface */
  --ink:#14161a;          /* body text, 15.4:1 on white */
  --ink-2:#3d444e;        /* secondary text, 9.1:1 */
  --mute:#656d79;         /* tertiary, 5.4:1 — still AA at 14px */
  --faint:#949ba6;        /* non-text only */
  --line:#e6e3dd;         /* hairline */
  --line-2:#d6d2ca;       /* stronger hairline, inputs */
  --bg:#f6f5f2;          /* warm canvas, not cold grey */
  --card:#ffffff;
  --sunk:#eeece7;

  /* accent + state */
  --gold:#E2B54A;
  --gold-ink:#7a5c10;     /* gold text on light, 4.9:1 */
  --gold-wash:#fffcf2;
  --gold-line:#f0e2bb;
  --good:#17733f;
  --good-wash:#f0faf4;
  --bad:#b3261e;
  --bad-wash:#fdf4f3;

  /* 8pt spacing rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px;

  /* type scale */
  --t-xs:12px; --t-sm:13px; --t-base:14px; --t-body:16px;
  --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:34px;

  --rad:10px; --rad-sm:7px; --rad-lg:14px;
  --w:940px;              /* content column */
  --read:74ch;            /* reading measure inside prose */
  --rail:280px;
  --top:56px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --shadow:0 1px 2px rgba(16,20,28,.06), 0 1px 3px rgba(16,20,28,.04);
  --shadow-lg:0 1px 3px rgba(16,20,28,.1), 0 12px 32px rgba(16,20,28,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:var(--t-body)/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:Poppins,Inter,sans-serif;line-height:1.25;margin:0 0 var(--s3);letter-spacing:-.015em}
h1{font-size:var(--t-2xl);font-weight:700}
h2{font-size:var(--t-xl);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--t-lg);font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:#1a5fb4;text-underline-offset:2px}
code{background:var(--sunk);padding:2px 6px;border-radius:5px;font-size:.88em}
ul,ol{margin:0 0 1em;padding-left:1.35em}
li{margin:0 0 .4em}
strong,b{font-weight:650}

/* Keyboard users must always see where they are. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── top bar ──────────────────────────────────────────────────────── */
#top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s5);
  height:var(--top);padding:0 var(--s5);background:var(--ink);color:#fff;
}
#top .brand{
  font-family:Poppins,sans-serif;font-weight:700;font-size:var(--t-sm);
  letter-spacing:.01em;color:rgba(255,255,255,.55);flex:0 0 auto;
}
#top .titlewrap{min-width:0;display:flex;flex-direction:column;gap:5px;flex:0 1 auto}
#top .t{
  font-family:Poppins,sans-serif;font-weight:600;font-size:var(--t-base);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;
}
/* the course's own progress, sitting under its name where it belongs */
#top .tbar{height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
#top .tbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .35s var(--ease)}
#top .who{
  margin-left:auto;display:flex;align-items:center;gap:var(--s3);
  font-size:var(--t-sm);color:rgba(255,255,255,.55);white-space:nowrap;
}
#top .clock{font-variant-numeric:tabular-nums;letter-spacing:.02em}
#top .nav{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
#top button{
  min-height:36px;padding:0 var(--s3);
  font:600 var(--t-xs)/1 Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rad-sm);cursor:pointer;transition:background .16s var(--ease);
}
#top button:hover{background:rgba(255,255,255,.18)}
#top button.go{background:var(--gold);border-color:var(--gold);color:#2a2008}
#top button.go:hover{background:#d4a63a}
#top button[disabled],#top button.go[disabled],#top button[disabled]:hover{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.3);cursor:not-allowed;
}
#top .kbd{
  margin-left:6px;font:600 10px/1 Inter;opacity:.55;border:1px solid currentColor;
  border-radius:3px;padding:2px 4px;
}
@media(max-width:860px){
  #top .brand,#top .who{display:none}
  #top .t{max-width:18ch}
}

#bar{display:none}

#wrap{display:flex;align-items:stretch;min-height:calc(100vh - var(--top))}

/* ── left rail ────────────────────────────────────────────────────── */
#rail{
  width:var(--rail);flex:0 0 var(--rail);background:var(--card);
  border-right:1px solid var(--line);padding:var(--s5) 0;
  position:sticky;top:var(--top);align-self:flex-start;
  height:calc(100vh - var(--top));overflow:auto;
}
#rail .lh{
  font:650 var(--t-xs)/1 Inter;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);padding:0 var(--s5) var(--s4);
}
#rail ol{list-style:none;margin:0;padding:0}
#rail li{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s3) var(--s5);min-height:44px;
  font-size:var(--t-base);line-height:1.4;cursor:pointer;
  border-left:3px solid transparent;color:var(--ink-2);
  transition:background .16s var(--ease),color .16s var(--ease);
}
#rail li:hover{background:var(--bg)}
#rail li.cur{border-left-color:var(--gold);background:var(--gold-wash);color:var(--ink);font-weight:600}
#rail li.done{color:var(--ink)}
#rail li.lockd{cursor:not-allowed;color:var(--faint)}
#rail li.lockd:hover{background:transparent}
#rail li .m{
  flex:0 0 20px;font-weight:700;font-size:var(--t-xs);text-align:center;
  line-height:1.6;font-variant-numeric:tabular-nums;
}
#rail li.done .m{color:var(--good)}
#rail li .k{
  display:block;font:650 10px/1.5 Inter;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);
}

/* ── main column ──────────────────────────────────────────────────── */
#main{flex:1;padding:var(--s7) var(--s7) var(--s8);min-width:0}
.block{max-width:var(--w);margin:0 auto}
.meta{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3);min-height:24px;
}
.meta .kindpill{
  font:700 10px/1 Inter;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);background:var(--sunk);padding:6px 9px;border-radius:20px;
}
.meta .donepill{
  font:700 10px/1 Inter;letter-spacing:.1em;text-transform:uppercase;
  color:var(--good);background:var(--good-wash);padding:6px 9px;border-radius:20px;
}
.meta .where{
  margin-left:auto;font:600 var(--t-sm)/1 Inter;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.body{
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--s5) var(--s6);box-shadow:var(--shadow);
}
.body.flush{padding:0;overflow:hidden}
.hint{font-size:var(--t-base);color:var(--mute);margin:var(--s3) 0 0}

/* image + text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.split.wideimg{grid-template-columns:1.6fr 1fr}
.split img{min-height:260px;object-fit:contain;background:#fff}
.body.wide{padding:var(--s6)}
.split img{width:100%;border-radius:var(--rad-sm);display:block;border:1px solid var(--line)}
@media(max-width:860px){.split,.split.wideimg{grid-template-columns:1fr}}

/* media */
video{width:100%;display:block;background:#000}
audio{width:100%;display:block}
.clip{border:1px solid var(--line);border-radius:var(--rad-sm);padding:var(--s4);margin:0 0 var(--s3)}
.clip:last-child{margin-bottom:0}
.clip .cl{
  display:flex;gap:var(--s2);align-items:center;
  font-weight:600;font-size:var(--t-base);margin-bottom:var(--s3);
}
.clip .cl .tick{
  margin-left:auto;color:var(--good);font:650 var(--t-xs)/1 Inter;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--good-wash);padding:5px 9px;border-radius:20px;
}
.clipnote{
  font-size:var(--t-base);color:var(--ink-2);margin:var(--s3) 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line);
}
.deckframe{width:100%;height:min(74vh,640px);border:0;display:block;background:var(--ink)}

/* line by line */
.segs{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.seg{border:1px solid var(--line);border-radius:var(--rad-sm);padding:var(--s4);background:var(--card)}
.seg.cur{border-color:var(--gold);background:var(--gold-wash)}
.seg .sh{
  display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  font-size:var(--t-base);font-weight:600;cursor:pointer;min-height:36px;
}
.seg .sh .ts{
  font:650 var(--t-xs)/1 Inter;color:var(--ink-2);background:var(--sunk);
  padding:6px 9px;border-radius:5px;font-variant-numeric:tabular-nums;
}
.seg .sh .tick{
  margin-left:auto;color:var(--good);font:650 var(--t-xs)/1 Inter;
  letter-spacing:.06em;text-transform:uppercase;
}
.segsay{
  font-size:var(--t-base);color:var(--ink);background:var(--sunk);
  border-radius:6px;padding:var(--s3) var(--s4);margin:var(--s3) 0 0;
}
.seg .sq{margin-top:var(--s3)}

/* inputs */
textarea,input[type=text],input[type=password]{
  width:100%;font:var(--t-body)/1.7 Inter,sans-serif;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--rad-sm);
  padding:var(--s3) var(--s4);background:#fff;resize:vertical;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
textarea:focus,input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,181,74,.22);
}
textarea{min-height:140px}
input[type=text],input[type=password]{min-height:44px}
label.q{display:block;font-weight:600;font-size:var(--t-body);margin:0 0 var(--s3)}
.count{font-size:var(--t-sm);color:var(--mute);margin-top:var(--s2);font-variant-numeric:tabular-nums}

/* ── quiz: one question at a time ─────────────────────────────────── */
.qhead{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:0 0 var(--s4);margin:0 0 var(--s4);border-bottom:1px solid var(--line);
}
.qdots{display:flex;gap:7px;align-items:center;flex:1;flex-wrap:wrap}
.qdot{
  width:14px;height:14px;border-radius:50%;background:var(--sunk);
  border:1px solid var(--line-2);display:grid;place-items:center;
  font:700 9px/1 Inter;color:#fff;transition:all .18s var(--ease);
}
.qdot.cur{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,181,74,.25);background:#fff}
.qdot.right{background:var(--good);border-color:var(--good)}
.qdot.wrong{background:var(--bad);border-color:var(--bad)}
.qcount{font:600 var(--t-sm)/1 Inter;color:var(--mute);font-variant-numeric:tabular-nums}
.qtype{font:700 10px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 var(--s3)}
.qtext{font-size:var(--t-lg);line-height:1.55;margin:0 0 var(--s5);max-width:62ch}

.opts{display:flex;flex-direction:column;gap:var(--s2)}
.opt{
  display:flex;gap:var(--s4);align-items:flex-start;min-height:52px;
  border:1px solid var(--line-2);border-radius:var(--rad-sm);background:#fff;
  padding:var(--s3) var(--s4);cursor:pointer;text-align:left;width:100%;
  font:var(--t-body)/1.55 Inter,sans-serif;color:var(--ink);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.opt:hover{border-color:var(--gold);background:var(--gold-wash)}
.opt .ltr{
  flex:0 0 22px;font:700 var(--t-sm)/1.5 Inter;color:var(--mute);
}
.opt.idk{color:var(--mute);font-style:italic}
.opt.picked{border-color:var(--ink);background:var(--sunk)}
.opt.right{border-color:var(--good);background:var(--good-wash)}
.opt.right .ltr{color:var(--good)}
.opt.wrong{border-color:var(--bad);background:var(--bad-wash)}
.opt.wrong .ltr{color:var(--bad)}
.opt[disabled]{cursor:default}
.opt[disabled]:hover{border-color:var(--line-2);background:#fff}
.opt.picked[disabled]:hover{border-color:var(--ink);background:var(--sunk)}
.opt.right[disabled]:hover{border-color:var(--good);background:var(--good-wash)}
.opt.wrong[disabled]:hover{border-color:var(--bad);background:var(--bad-wash)}

.changeans{
  background:none;border:0;padding:var(--s2) 0;margin:var(--s3) 0 0;
  font:600 var(--t-base)/1 Inter;color:var(--mute);cursor:pointer;
}
.changeans:hover{color:var(--ink);text-decoration:underline}

/* confidence: the answer is half the signal, how sure they were is the rest */
.conf{margin:var(--s5) 0 0}
.conf .cq{font-size:var(--t-base);color:var(--ink-2);margin:0 0 var(--s3)}
.confrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.confbtn{
  position:relative;min-height:74px;border-radius:var(--rad-sm);cursor:pointer;
  border:1px solid transparent;font:600 var(--t-base)/1.3 Inter,sans-serif;
  display:grid;place-items:center;padding:var(--s4);transition:transform .14s var(--ease),filter .14s var(--ease);
}
.confbtn:hover{filter:brightness(.96);transform:translateY(-1px)}
.confbtn .num{
  position:absolute;top:8px;left:9px;font:700 10px/1 Inter;opacity:.6;
  border:1px solid currentColor;border-radius:3px;padding:2px 4px;
}
.confbtn.c1{background:#fbe9d2;color:#7a4a10;border-color:#f0d3ab}
.confbtn.c2{background:#dff0e4;color:#14603a;border-color:#bfe0cb}
.confbtn.c3{background:#e2dcf5;color:#3f2f86;border-color:#cbc1ea}
@media(max-width:620px){.confrow{grid-template-columns:1fr}.confbtn{min-height:54px}}

/* locked in */
.locked{margin:var(--s5) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--line)}
.locked .lh2{
  font:700 var(--t-xs)/1 Inter;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 var(--s3);
}
.locked.ok .lh2{color:var(--good)}
.locked.no .lh2{color:var(--bad)}
.locked p{font-size:var(--t-base);color:var(--ink-2);max-width:64ch;margin:0}
.locked .nextq{margin:var(--s5) 0 0}
.kbd{
  margin-left:7px;font:600 10px/1 Inter;opacity:.65;border:1px solid currentColor;
  border-radius:3px;padding:3px 5px;
}
.qdone{text-align:left}
.qdone .big{font:700 var(--t-3xl)/1 Poppins,Inter,sans-serif;letter-spacing:-.02em}
.qdone .big.ok{color:var(--good)}
.qdone .big.no{color:var(--bad)}
.qdone .sub{font-size:var(--t-base);color:var(--mute);margin:var(--s3) 0 0}
.score{font-weight:700}
.why{font-size:var(--t-base);color:var(--ink-2);margin:var(--s3) 0 0}

/* buttons */
.btn{
  font:600 var(--t-base)/1 Inter,sans-serif;background:var(--ink);color:#fff;border:1px solid var(--ink);
  min-height:44px;padding:0 var(--s5);border-radius:var(--rad-sm);cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),opacity .16s var(--ease);
}
.btn:hover{background:#262b33;border-color:#262b33}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--card);border-color:var(--ink-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2a2008}
.btn.gold:hover{background:#d4a63a;border-color:#d4a63a}
.btn.sm{min-height:34px;padding:0 var(--s3);font-size:var(--t-xs)}
/* Disabled last and with its own class on every variant: a gold button that
   is locked must never still look gold. That exact cascade bug made a locked
   Next button look clickable. */
.btn[disabled],.btn.gold[disabled],.btn.ghost[disabled],
.btn[disabled]:hover,.btn.gold[disabled]:hover,.btn.ghost[disabled]:hover{
  background:var(--sunk);border-color:var(--line-2);color:var(--faint);
  cursor:not-allowed;box-shadow:none;
}
#foot{
  max-width:var(--w);margin:var(--s5) auto 0;display:flex;gap:var(--s3);
  align-items:center;flex-wrap:wrap;
}
#foot .spacer{flex:1}

/* ── add-ons any block can carry ──────────────────────────────────
   A note from Beckett is a COMMENT, the way it reads in Notion: his face,
   his name, then what he said. Not a boxed label shouting READ THIS FIRST. */
.note{
  display:grid;grid-template-columns:34px 1fr;gap:var(--s3);
  max-width:var(--w);margin:0 0 var(--s5);align-items:start;
}
.note.after{margin:var(--s5) 0 0}
.note .av{
  width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;
  background:var(--sunk);border:1px solid var(--line);
}
.note .nb{min-width:0}
.note .nhead{
  display:flex;align-items:baseline;gap:var(--s2);margin:0 0 2px;flex-wrap:wrap;
  line-height:1.3;
}
.note .nname{font-weight:650;font-size:var(--t-base);color:var(--ink)}
.note .nwhen{font-size:var(--t-sm);color:var(--faint)}
.note .ntext{
  font-size:var(--t-base);line-height:1.7;color:var(--ink-2);
  max-width:70ch;
}
.note .ntext p{margin:0 0 .6em}
.note .ntext p:last-child{margin-bottom:0}

/* a question attached to a part: its own quiet card, not a shouted label */
.addon{
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--s5) var(--s6);margin:var(--s5) 0 0;max-width:var(--w);box-shadow:var(--shadow);
}
.addon .ah{
  display:inline-flex;align-items:center;gap:7px;
  font:650 var(--t-sm)/1 Inter;color:var(--mute);margin:0 0 var(--s4);
}
.addon .ah::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.setup{
  background:var(--gold-wash);border:1px solid var(--gold-line);
  border-radius:var(--rad-sm);padding:var(--s4) var(--s5);margin:0 0 var(--s5);
}
.setup h3{margin:0 0 var(--s2)}

/* ── start screen ─────────────────────────────────────────────────── */
.cover h1{font-size:var(--t-3xl);margin-bottom:var(--s3)}
.cover .introtxt{font-size:var(--t-lg);color:var(--ink-2);max-width:62ch;margin:0 0 var(--s5)}
.cover .bignum{font-size:var(--t-lg);margin:0 0 var(--s3)}
.cover .bignum b{font-size:var(--t-xl);font-weight:700}
.pillrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0}
.pill{
  display:inline-block;font:600 var(--t-xs)/1 Inter;letter-spacing:.03em;
  padding:7px 11px;border-radius:20px;background:var(--sunk);color:var(--ink-2);
}
.pill.ok{background:var(--good-wash);color:var(--good)}
.pill.open{background:var(--gold-wash);color:var(--gold-ink)}

/* ── DOCUMENT page — a script should look like a document ─────────── */
.docpage{background:var(--sunk);padding:var(--s6) var(--s4);border-radius:var(--rad)}
.docpage.tight{padding:var(--s4) var(--s3);max-height:min(62vh,560px);overflow:auto}
.docsheet{
  background:#fff;max-width:680px;margin:0 auto;padding:var(--s8) 72px;
  box-shadow:var(--shadow-lg);border-radius:3px;
  font-size:var(--t-body);line-height:1.95;color:#111418;
}
.docpage.tight .docsheet{padding:var(--s5) var(--s6);max-width:none;line-height:1.9}
.docsheet .doctitle{
  font-family:Poppins,Inter,sans-serif;font-size:var(--t-xl);text-align:center;
  margin:0 0 var(--s6);padding-bottom:var(--s4);border-bottom:1px solid var(--line);
  letter-spacing:-.005em;
}
.docsheet .docsec{
  font:700 var(--t-xs)/1 Inter;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:var(--s6) 0 var(--s4);
}
.docsheet .docsec:first-child{margin-top:0}
.docsheet p{margin:0 0 1.15em}
.docline{display:grid;grid-template-columns:90px 1fr;gap:var(--s4);margin:0 0 var(--s4);align-items:baseline}
.docline .who{font:700 var(--t-xs)/1.9 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.docline .say{font-size:var(--t-body)}
@media(max-width:760px){
  .docsheet{padding:var(--s6) var(--s5)}
  .docline{grid-template-columns:1fr;gap:var(--s1)}
}

/* ── TYPE IT OUT ──────────────────────────────────────────────────── */
.typewrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
@media(max-width:1100px){.typewrap{grid-template-columns:1fr}}
.tcol{display:flex;flex-direction:column;min-width:0}
.tch{
  display:flex;align-items:center;gap:var(--s2);
  font:700 var(--t-xs)/1 Inter;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:0 0 var(--s3);min-height:20px;
}
#tscript{user-select:none;-webkit-user-select:none}
#tscript span[data-w]{padding:1px 2px;border-radius:3px;transition:background .12s linear}
#tscript span.got{color:var(--faint)}
#tscript span.now{background:var(--gold);color:#2a2008;font-weight:600}
.ttype{min-height:min(62vh,560px);font-size:var(--t-body);line-height:1.9;padding:var(--s5)}
.tstat{
  display:flex;gap:var(--s3);align-items:baseline;margin-top:var(--s3);
  font-size:var(--t-base);flex-wrap:wrap;
}
.tacc{font-weight:600;font-variant-numeric:tabular-nums}
.tbad{color:var(--bad);font-weight:600}
.tpaste{color:var(--bad);font-weight:600}
.rtag{
  font:700 10px/1 Inter;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:5px 8px;border-radius:5px;
}

/* the read-to-the-bottom sentinel: needs real height, a zero-area target
   never produces a usable intersection ratio */
.endmark{height:1px;width:100%;margin-top:2px}

/* dev-only affordance, shown with ?dev=1 */
.devbtn{
  background:repeating-linear-gradient(45deg,#fff5d6,#fff5d6 7px,#ffeab0 7px,#ffeab0 14px);
  border:1px dashed #c9a43c;color:#6b5110;
}
.devbtn:hover{background:#ffeab0}

/* ── gate + operator ──────────────────────────────────────────────── */
.center{max-width:430px;margin:11vh auto;padding:0 var(--s5)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-lg);
      padding:var(--s6);box-shadow:var(--shadow-lg)}
.field{margin:0 0 var(--s4)}
.field label{display:block;font-weight:600;font-size:var(--t-base);margin:0 0 var(--s2)}
.err{color:var(--bad);font-size:var(--t-base);margin:var(--s3) 0 0;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:var(--t-base);background:var(--card)}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 var(--t-xs)/1 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--bg)}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.wide{max-width:1240px;margin:var(--s6) auto;padding:0 var(--s5)}
.stall{color:var(--bad);font-weight:600}
details summary{cursor:pointer;font-weight:600;font-size:var(--t-base);min-height:32px}
.ansbox{
  white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:var(--s3) var(--s4);margin:var(--s2) 0 0;font-size:var(--t-base);
}

/* ── responsive ───────────────────────────────────────────────────── */
@media(max-width:1024px){
  :root{--rail:232px}
  #main{padding:var(--s6) var(--s5) var(--s8)}
}
@media(max-width:768px){
  #wrap{flex-direction:column}
  #rail{
    width:100%;flex:none;position:static;max-height:none;
    border-right:0;border-bottom:1px solid var(--line);padding:var(--s4) 0;
  }
  #rail ol{display:flex;overflow-x:auto;gap:var(--s2);padding:0 var(--s4)}
  #rail li{
    flex:0 0 auto;max-width:200px;border-left:0;border-bottom:3px solid transparent;
    border-radius:var(--rad-sm);
  }
  #rail li.cur{border-left:0;border-bottom-color:var(--gold)}
  #main{padding:var(--s5) var(--s4) var(--s7)}
  .body,.addon{padding:var(--s4)}
  #top{padding:0 var(--s4);gap:var(--s3)}
  #top .who{font-size:var(--t-xs)}
  .kind .where{margin-left:0;width:100%}
  h1{font-size:var(--t-xl)}
  .cover h1{font-size:var(--t-2xl)}
}

/* ── reading pane: long documents scroll inside the page, not past it ── */
.readpane{
  max-height:calc(100vh - 290px);min-height:220px;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s5) var(--s6);
}
.readpane .prose{max-width:var(--read)}
.readpane::-webkit-scrollbar{width:10px}
.readpane::-webkit-scrollbar-thumb{background:#d8dde3;border-radius:20px;border:3px solid #fff}
.readpane::-webkit-scrollbar-thumb:hover{background:#c3cad2}
.readshade{
  position:relative;
}
.readshade::after{
  content:'';position:absolute;left:1px;right:1px;bottom:1px;height:42px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
  border-radius:0 0 var(--rad) var(--rad);opacity:1;transition:opacity .2s var(--ease);
}
.readshade.atend::after{opacity:0}
.scrollnote{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t-base);color:var(--mute);margin:var(--s3) 0 0;
}
.scrollnote .bar{
  flex:1;height:4px;background:var(--sunk);border-radius:20px;overflow:hidden;max-width:220px;
}
.scrollnote .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .15s linear}

/* why the button is locked, said plainly rather than implied */
.lockwhy{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--t-base);color:var(--mute);
}
.lockwhy.ready{color:var(--good);font-weight:600}

/* ── course cover on the start screen ─────────────────────────────── */
.coverhero{
  display:grid;grid-template-columns:260px 1fr;gap:var(--s6);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad-lg);
  padding:var(--s6);box-shadow:var(--shadow);margin:0 0 var(--s5);
}
.coverhero img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--rad);border:1px solid var(--line);background:var(--sunk);
}
.coverhero .cname{
  font:700 var(--t-xs)/1 Inter;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 var(--s3);
}
.coverhero h1{margin-bottom:var(--s3)}
@media(max-width:860px){
  .coverhero{grid-template-columns:1fr;gap:var(--s5)}
  .coverhero img{aspect-ratio:16/7}
}

/* a document sheet inside a scrolling read pane */
.readpane.docpane{background:var(--sunk);padding:var(--s5) var(--s4)}
.readpane.docpane .docsheet{max-width:720px;margin:0 auto;padding:var(--s7) 64px}
@media(max-width:760px){.readpane.docpane .docsheet{padding:var(--s5) var(--s4)}}

/* ── speaker avatars in a script document ─────────────────────────── */
.docline{grid-template-columns:104px 1fr}
.docline .who{
  display:flex;align-items:center;gap:7px;line-height:1.5;
}
.docline .who .pic{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;
  background:var(--sunk);border:1px solid var(--line-2);
  display:grid;place-items:center;overflow:hidden;
}
.docline .who .pic svg{width:13px;height:13px;display:block}
.docline .who .pic img{width:100%;height:100%;object-fit:cover;display:block}
.docline.them .who .pic{background:#fff}
@media(max-width:760px){
  .docline{grid-template-columns:1fr}
  .docline .who{margin-bottom:2px}
}

/* ── deck: keep its arrows inside the frame ───────────────────────── */
.deckwrap{position:relative;overflow:hidden;border-radius:var(--rad)}
.deckwrap .deckframe{border-radius:var(--rad)}

/* ── reading footer: bar and status on one tidy line ──────────────── */
.scrollnote{
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--t-base);color:var(--mute);margin:var(--s3) 0 0;
  max-width:var(--w);min-height:22px;
}

/* ── header extras ───────────────────────────────────────────────── */
#top .dev{
  background:repeating-linear-gradient(45deg,rgba(226,181,74,.18),rgba(226,181,74,.18) 6px,transparent 6px,transparent 12px);
  border-color:rgba(226,181,74,.45);color:#f3dda2;
}
#top .dev:hover{background:rgba(226,181,74,.3)}

/* ── deck control bar: ours, under the slide, in our own system ───── */
.deckbar{
  display:flex;align-items:center;gap:var(--s4);max-width:var(--w);
  margin:var(--s3) 0 0;padding:var(--s3) var(--s4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad-sm);
}
.deckbar .dcount{
  font:600 var(--t-sm)/1 Inter;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.deckbar .dtrack{
  flex:1;height:4px;background:var(--sunk);border-radius:20px;overflow:hidden;min-width:60px;
}
.deckbar .dtrack i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s var(--ease)}
.deckbar .dnext{margin-left:auto}
@media(max-width:620px){
  .deckbar{flex-wrap:wrap}
  .deckbar .dtrack{order:3;flex-basis:100%}
}


/* ── chapters, the path, recording slots, words, scenarios, write it ── */
#rail li.chhead{
  cursor:default;display:block;padding:var(--s3) var(--s3) var(--s1);border-left:0;
  font-size:var(--t-xs);font-weight:700;color:var(--ink);background:transparent;
}
#rail li.chhead:hover{background:transparent}

.stops{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3)}
.stop{
  font-size:var(--t-xs);font-weight:600;color:var(--faint);padding:3px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
}
.stop.past{color:var(--mute)}
.stop.on{background:var(--ink);border-color:var(--ink);color:#fff}

.recframe{
  aspect-ratio:16/9;border-radius:10px;background:#17191d;color:rgba(255,255,255,.72);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:var(--t-sm);
}
.recframe b{color:var(--gold);font-size:var(--t-lg)}
.body.after,.prose.after{margin-top:var(--s3)}
details.recslot{
  margin:var(--s3) 0;border:1px dashed var(--line-2);border-radius:10px;background:var(--card);
}
details.recslot summary{cursor:pointer;padding:12px var(--s3);font-size:var(--t-sm);font-weight:600}
.rectag{
  display:inline-block;font-size:var(--t-xs);font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--gold-wash);color:#7a5a10;margin-right:4px;
}
.recslot:not(details){padding:10px 14px;font-size:var(--t-sm)}
.recslot a{color:var(--gold-ink);font-weight:600;margin-left:6px}
.rectext{padding:0 var(--s3) var(--s3);font-size:var(--t-sm);line-height:1.6}
.rectext p{margin:0 0 10px}

#words{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:60;background:var(--card);
  border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(0,0,0,.12);
  display:flex;flex-direction:column;padding:var(--s3);gap:var(--s2);
}
#words[hidden]{display:none}
#words .wh{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-lg)}
#words .wclose{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;min-height:44px}
#words .wsearch{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:8px;font:inherit}
#words .wlist{overflow:auto;flex:1}
#words .wrow{padding:12px 0;border-top:1px solid var(--line)}
#words .wrow[hidden]{display:none}
#words .wterm{font-weight:700;margin-bottom:2px}
#words .wline{font-size:var(--t-sm);line-height:1.5}
#words .wgo{margin-top:6px;background:none;border:0;padding:0;color:#7a5a10;font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;text-decoration:underline}

.seg .tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
button.rtag{border:0;cursor:pointer;font-family:inherit}
button.rtag:hover{filter:brightness(.92)}
.segwhy{font-size:var(--t-sm);line-height:1.55;margin-top:6px;color:var(--mute)}

.docif{font-weight:700;margin:var(--s3) 0 var(--s1);padding-top:var(--s2);border-top:1px solid var(--line)}
.docnote{font-style:italic;color:var(--mute);font-size:var(--t-sm);margin:4px 0 8px}
.docalts{display:block;margin-top:6px;font-size:var(--t-sm);color:var(--mute)}
.docalts b{display:block;font-weight:600}
.docalt{display:block;color:var(--ink,inherit);margin-top:2px}

.prospect{
  margin:var(--s3) 0;padding:14px 16px;border-radius:12px;background:var(--sunk);
  font-size:var(--t-lg);font-weight:600;line-height:1.4;
}
.prospect .pl{display:block;font-size:var(--t-xs);font-weight:600;color:var(--mute);margin-bottom:4px}
.prospect.sms{border-bottom-left-radius:2px;max-width:32em}
.vrec{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.vstat{font-size:var(--t-sm);color:var(--mute)}
.vplay{height:36px}
.vplay[hidden]{display:none}

.writewrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4)}
.writewrap textarea{width:100%;min-height:92px}
.writewrap .qh{font-weight:400;color:var(--mute)}
.wside{font-size:var(--t-sm);line-height:1.6}
.wside .tch{font-weight:700;margin-bottom:8px}
@media (max-width:768px){.writewrap{grid-template-columns:1fr}}
.docsrc{display:block;font-size:var(--t-xs);color:var(--gold-ink);margin-top:2px}

/* tone: up is green, down is blue, warm is gold. Always with an arrow and a word. */
:root{--tone-up:#17733f;--tone-up-bg:#e7f5ec;--tone-down:#1f4e9c;--tone-down-bg:#e8eef9;--tone-warm:#7a5c10;--tone-warm-bg:#fbf1d6}
.toned,#tscript span[data-tone]{font-weight:700}
.toned.up,#tscript span[data-tone=up]{color:var(--tone-up);background:var(--tone-up-bg)}
.toned.down,#tscript span[data-tone=down]{color:var(--tone-down);background:var(--tone-down-bg)}
.toned.warm,#tscript span[data-tone=warm]{color:var(--tone-warm);background:var(--tone-warm-bg)}
.toned{padding:1px 4px;border-radius:4px}
#tscript span.now[data-tone]{color:inherit}
.tonepill{display:block;width:fit-content;font-size:var(--t-xs);line-height:1.4;padding:3px 10px;border-radius:999px;margin:0 0 6px}
.tonepill.up{color:var(--tone-up);background:var(--tone-up-bg)}
.tonepill.down{color:var(--tone-down);background:var(--tone-down-bg)}
.tonepill.warm{color:var(--tone-warm);background:var(--tone-warm-bg)}
.tonekey{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--s3)}
.tonekey .tonepill{margin:0}
.tkh{font-size:var(--t-xs);font-weight:700;color:var(--mute)}

/* ── lessons: a whole page per idea ─────────────────────────────────── */
.lesson{display:flex;flex-direction:column;gap:var(--s3)}
.lh2{font-family:Poppins,sans-serif;font-size:var(--t-xl);line-height:1.25;margin:var(--s5) 0 0;display:flex;gap:10px;align-items:baseline}
.lesson>.lh2:first-child{margin-top:0}
.lnum{flex:0 0 auto;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;background:var(--ink);color:#fff;font-size:15px}
.lesson .prose{max-width:var(--read)}
.lesson .prose p{margin:0 0 var(--s2)}
.lrules{margin-top:-8px}
.rchips{display:inline-flex;flex-wrap:wrap;gap:6px}
.say .rchips{display:flex;margin-top:6px}
.rchip{
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer;
  font:600 var(--t-xs)/1.3 Inter,sans-serif;padding:3px 9px;border-radius:999px;
}
.rchip:hover{border-color:var(--gold);background:var(--gold-wash)}
#rulepop{
  position:fixed;z-index:70;width:min(400px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:var(--s3);font-size:var(--t-sm);line-height:1.5;
}
#rulepop[hidden]{display:none}
#rulepop h3{margin:0 24px 6px 0;font-size:var(--t-lg)}
#rulepop p{margin:0 0 8px}
#rulepop blockquote{margin:0 0 10px;padding:0 0 0 10px;border-left:3px solid var(--gold);color:var(--ink-2)}
.rpv{font-size:var(--t-xs);font-weight:700;color:var(--gold-ink);margin-bottom:2px}
.rpclose{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;background:none;font-size:20px;cursor:pointer}

.lquote{margin:0;padding:var(--s2) var(--s3);border-left:4px solid var(--gold);background:var(--gold-wash);border-radius:0 10px 10px 0;line-height:1.55;max-width:var(--read)}
.lquote cite{display:block;font-style:normal;font-size:var(--t-xs);color:var(--mute);margin-top:4px}
.lanalogy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s3);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:var(--s3)}
.lanalogy>div:only-child{grid-column:1/-1}
.lanalogy img{width:100%;max-height:300px;object-fit:contain}
.lak{font-size:var(--t-xs);font-weight:700;color:var(--gold-ink);margin-bottom:2px}
.lfig{margin:0}
.lfig img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.lfig figcaption{font-size:var(--t-sm);color:var(--mute);margin-top:6px}
.lvideo{width:100%;border-radius:10px;background:#000}
.recframe.small{aspect-ratio:21/9}
.rgh{font-weight:700;margin-top:10px}
.rectext ul{margin:4px 0 0;padding-left:20px}
.rectext li{margin-bottom:4px}

.lclip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:var(--s3)}
.lclip .cl{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}
.lclip audio{width:100%}
.lclip .tick{color:var(--good);font-size:var(--t-xs)}
.tscript{margin-top:10px;max-height:460px;overflow:auto;border-top:1px solid var(--line)}
.tline{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:6px 4px;cursor:pointer;border-radius:6px;font-size:var(--t-sm);line-height:1.45}
.tline:hover{background:var(--bg)}
.tline.now{background:var(--gold-wash)}
.tline .tw{font-size:var(--t-xs);font-weight:700;color:var(--mute);padding-top:2px}
.tline.him .tw{color:var(--gold-ink)}
.tline.them .ts2{color:var(--ink-2)}
.tline.marked>.ts2{font-weight:600}
.lmark{font-weight:400;display:flex;gap:9px;align-items:flex-start;margin-top:6px;padding:9px 11px;background:var(--gold-wash);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;color:var(--ink);cursor:default}
.lmark .mav{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.lmark .mbody{min-width:0;line-height:1.5}
.lmark .mname{font-size:var(--t-xs);margin-right:2px}
.lmark .rchips{display:flex;margin-top:6px}

.lpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.lbad,.lgood,.lreal{border-radius:10px;padding:12px 14px;line-height:1.45;font-weight:600}
.lbad:only-child{grid-column:1/-1}
.lbad{background:var(--bad-wash);border:1px solid #f0d3d0}
.lgood{background:var(--good-wash);border:1px solid #cfe9d9}
.lreal{background:var(--sunk)}
.lpk{display:block;font-size:var(--t-xs);font-weight:700;margin-bottom:3px;color:var(--mute)}
.lbad .lpk{color:var(--bad)}
.lgood .lpk{color:var(--good)}
.lsrc{display:block;font-weight:400;font-size:var(--t-xs);color:var(--mute);margin-top:3px}
.lwhy{font-weight:400;font-size:var(--t-sm);margin-top:5px}
.lcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s2)}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:var(--s3);line-height:1.45;font-size:var(--t-sm)}
.lcard img{height:64px;display:block;margin-bottom:8px}
.lcard b{display:block;font-size:var(--t-lg);margin-bottom:4px}
.lcard.green{border-top:4px solid var(--good)}
.lcard.gold{border-top:4px solid var(--gold)}
.lcard.red{border-top:4px solid var(--bad)}
.lside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s4);align-items:center}
.lside>img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
@media (max-width:768px){.lside{grid-template-columns:1fr}.lpair,.lanalogy{grid-template-columns:1fr}.lesson,.lesson>*{min-width:0;max-width:100%}.tline{grid-template-columns:48px minmax(0,1fr)}}

/* the script, one chapter at a time */
.docsheet.focus{padding:var(--s4) var(--s5)}
.focusintro{margin-bottom:var(--s3);max-width:var(--read)}
.docphase{scroll-margin-top:12px}
.docphase.later>:not(h3){filter:blur(5px);user-select:none;pointer-events:none;opacity:.75}
.docphase.later>h3{color:var(--faint)}
.docphase.seen{opacity:.55}
.docphase.isnow{background:var(--gold-wash);box-shadow:0 0 0 12px var(--gold-wash);border-radius:4px;margin:var(--s3) 0}
.docsec{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:var(--s3)}
.secn{width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;letter-spacing:0}
.docnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3);position:sticky;top:0;background:#fff;padding:8px 0;z-index:2}
.docnav a{font-size:var(--t-xs);font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;text-decoration:none}
.docnav a:hover{border-color:var(--gold)}
.docline.them .say{color:var(--ink-2);background:var(--sunk);padding:6px 12px;border-radius:12px;width:fit-content}
.docback{display:inline-block;font-size:var(--t-sm);font-weight:600;color:var(--gold-ink);margin:2px 0 8px}
#top a.dev{font-size:12px;font-weight:600;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.25);border-radius:7px;padding:9px 12px}
#top a.dev[hidden]{display:none}

.lcard img{object-fit:contain;max-width:100%}
.lcard:has(img) img{height:120px}

/* Rule buttons: gold until opened, then a quiet tick. */
.rchip:not(.opened){border-color:var(--gold);background:var(--gold-wash);font-weight:600}
.rchip.opened::before{content:'\2713\00a0';color:var(--mute)}
.chiphint{border:0;background:none;color:var(--gold-ink);font:600 var(--t-sm) Inter,sans-serif;cursor:pointer;margin-left:auto;min-height:44px;padding:0 8px}
.chiphint[hidden]{display:none}
.goldtip{display:inline-block;margin:0 0 var(--s2);padding:4px 11px;border:1px solid var(--gold);background:var(--gold-wash);border-radius:999px;font:600 var(--t-xs)/1.4 Inter,sans-serif;color:var(--gold-ink)}
.goldtip[hidden]{display:none}

/* Fill in the definition, then check it against his. */
.writewrap.solo{display:block;max-width:var(--measure,720px)}
.wdef{margin:6px 0 4px;padding:9px 12px;background:var(--gold-wash);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;font-size:var(--t-sm);line-height:1.5}
.wdef::before{content:'What I mean: ';font-weight:600}
.wcheck{margin-top:12px;align-self:flex-start}
.wpart.short{border-color:var(--bad,#B3261E);box-shadow:0 0 0 1px var(--bad,#B3261E)}

/* Phone test: the objection sits in the script, at the line it interrupts. */
.spotnote{margin-bottom:var(--s2)}
.spothit{background:var(--gold-wash);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;margin:6px 0}
.spothit .say{font-weight:600;color:var(--ink)}
.spottag{display:block;font-size:var(--t-xs);font-weight:600;color:var(--gold-ink);margin-bottom:3px}
.spotturn .q{margin-top:0}
.spotrest{filter:blur(5px);opacity:.6;user-select:none;pointer-events:none;margin-top:var(--s2)}

/* The rail: done is a filled green tick, where you are is gold, not done is an empty ring. */
#rail li{align-items:flex-start}
#rail li[data-i] .m{
  flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line-2);background:var(--card);color:var(--mute);
  font:600 11px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;margin-top:1px;
}
#rail li.done .m{background:var(--good);border-color:var(--good);color:#fff;font-size:13px}
#rail li.cur .m{background:var(--gold);border-color:var(--gold);color:#2a2008}
#rail li.cur.done .m{background:var(--good);border-color:var(--good);color:#fff;box-shadow:0 0 0 3px var(--gold)}
#rail li.done:not(.cur){color:var(--mute)}
#rail li.lockd .m{background:transparent;border-style:dashed;color:var(--faint)}
#rail li.chhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#rail li.chhead .chn{font:600 11px Inter,sans-serif;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
#rail li.chhead.alldone .chn{color:var(--good)}

/* The award: big enough to enjoy, never wider than the column. */
.awardwrap{margin:var(--s3) 0}
.awardlock{padding:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:12px;max-width:560px}
.awardlock p{margin:0 0 var(--s3)}
.awardlock[hidden],.awardopen[hidden]{display:none}
.awardcv{display:block;width:100%;max-width:560px;height:auto;border-radius:10px;box-shadow:0 8px 28px rgba(16,24,40,.18)}
.awardgo{margin-top:var(--s3)}

/* Text test: a real looking thread. */
.smsstage{display:inline-block;margin:0 0 var(--s2);font:600 var(--t-xs)/1.4 Inter,sans-serif;color:var(--mute)}
.smsphone{max-width:480px;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 28px rgba(16,24,40,.08)}
.smshead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.smsav{width:32px;height:32px;border-radius:50%;background:var(--line);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.smslist{display:flex;flex-direction:column;gap:8px;padding:16px}
.smsb{max-width:82%;padding:9px 13px;border-radius:18px;font-size:var(--t-sm);line-height:1.4;overflow-wrap:anywhere}
.smsb.me{align-self:flex-end;background:#1F7AEC;color:#fff;border-bottom-right-radius:5px}
.smsb.them{align-self:flex-start;background:#ECEBE7;color:var(--ink);border-bottom-left-radius:5px}
.smsday{align-self:center;text-align:center;font-size:var(--t-xs);color:var(--mute);padding:8px 12px;line-height:1.4}
.smsreply{padding:12px 16px 14px;border-top:1px solid var(--line)}
.smsreply .q{margin-top:0}
.smsreply .count{display:none}
.smsreply textarea{width:100%;min-height:84px;border-radius:14px}