/* ═══ tokens ═══════════════════════════════════════════════ */
:root{
  --ink:#122A26;          /* deep forest — structural field */
  --ink-lift:#1B3B35;
  --body:#21322E;
  --body-2:#54706A;
  --body-3:#8AA099;
  --paper:#EFF1EC;
  --raise:#FAFBF8;
  --line:#D3DAD4;
  --line-soft:#E4E9E4;
  --brass:#B8873B;        /* the accent — reveal only */
  --brass-wash:#F7EFDD;
  --ok:#2D6A4F;
  --no:#9B3D2E;
  --measure:63ch;
  --serif:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,Charter,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;
}
.t-forever{--tri:#122A26;--tri-soft:#C3D0CB}
.t-six{--tri:#7C6A3E;--tri-soft:#E0D7C0}
.t-release{--tri:#8AA099;--tri-soft:#E1E7E3}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--serif);font-size:17.5px;line-height:1.64;font-kerning:normal;
  text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
a{color:inherit}
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:var(--line-soft);padding:.1em .32em;border-radius:2px}
hr{border:none;border-top:1px solid var(--line);margin:2.4rem 0}

/* ═══ shell ════════════════════════════════════════════════ */
.shell{display:grid;grid-template-columns:296px 1fr;min-height:100vh}

/* ── rail: a solid field, not a pale sidebar ─────────────── */
.rail{background:var(--ink);color:#CFDBD5;font-family:var(--sans);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding-bottom:3rem}
.rail::-webkit-scrollbar{width:9px}
.rail::-webkit-scrollbar-thumb{background:#2A4A43;border-radius:9px}

.brand{padding:1.9rem 1.7rem 1.5rem;border-bottom:1px solid #23423B}
.brand .mark{font-family:var(--serif);font-size:1.6rem;line-height:1.05;color:#fff;
  letter-spacing:-.025em;font-weight:400;margin:0}
.brand .mark em{font-style:italic;color:var(--brass)}
.brand .sub{font-size:.75rem;color:#7F9A92;margin:.55rem 0 0;letter-spacing:.01em}

.acct{padding:.85rem 1.7rem;border-bottom:1px solid #23423B;display:grid;gap:.12rem}
.acct .who{font-size:.8rem;color:#DCE6E1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .tier{font-size:.7rem;color:#6E8B83;line-height:1.35}
.acct .lnk{font-size:.75rem;color:var(--brass);text-align:left;padding:0;margin-top:.3rem;
  text-decoration:none;display:inline-block;width:auto;justify-self:start}
.acct .lnk:hover{text-decoration:underline}
.warn{margin:.6rem 1.2rem;padding:.6rem .75rem;background:#3A2E16;border-left:2px solid var(--brass);
  border-radius:0 3px 3px 0;font-size:.74rem;line-height:1.4;color:#E4D4B0}
.railnav{padding:.9rem 0 .3rem;border-bottom:1px solid #23423B}
.railnav button{display:block;width:100%;text-align:left;padding:.42rem 1.7rem;
  font-size:.85rem;color:#B4C6C0}
.railnav button:hover{color:#fff;background:#1B3B35}
.railnav button.on{color:#fff;box-shadow:inset 3px 0 0 var(--brass)}

.mod{border-bottom:1px solid #1C3A34}
.mod>button{display:grid;grid-template-columns:26px 1fr auto;gap:.75rem;align-items:baseline;
  width:100%;text-align:left;padding:.78rem 1.7rem}
.mod>button:hover{background:#1B3B35}
.mod .num{font-family:var(--serif);font-size:1.15rem;color:#3F635B;line-height:1}
.mod.open .num{color:var(--brass)}
.mod .nm{font-size:.88rem;color:#DCE6E1;line-height:1.25}
.mod .ct{font-size:.72rem;color:#6E8B83;font-variant-numeric:tabular-nums}
.mlist{display:none;padding:.1rem 0 .7rem}
.mod.open .mlist{display:block}
.mlist a{display:grid;grid-template-columns:14px 1fr;gap:.55rem;align-items:start;
  padding:.34rem 1.7rem .34rem 2.4rem;font-size:.83rem;line-height:1.35;
  color:#9FB6AF;text-decoration:none}
.mlist a:hover{color:#fff;background:#1B3B35}
.mlist a.on{color:#fff;background:#20443D;box-shadow:inset 3px 0 0 var(--brass)}
/* triage spine in the rail: filled / half / hollow */
.spine{width:3px;height:13px;margin-top:.34rem;border-radius:2px;background:var(--tri-soft)}
.t-forever .spine{background:#9FB6AF}
.t-six .spine{background:linear-gradient(var(--brass) 50%,#3F635B 50%)}
.t-release .spine{background:none;box-shadow:inset 0 0 0 1px #3F635B}
.mlist a.on .spine{background:var(--brass)}
.mlist a .tick{position:absolute}
.mlist a.done{color:#CFE0D8}
.mlist a.done .spine{background:#4E8A6E}

/* ═══ main ═════════════════════════════════════════════════ */
.main{padding:3.6rem 4.2rem 7rem;max-width:calc(var(--measure) + 8rem);
  margin:0;width:100%}
/* On very wide screens the reading column stays anchored near the rail
   rather than drifting to the centre of the viewport. */
@media(min-width:1500px){.main{padding-left:6rem}}

h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;letter-spacing:-.02em;color:var(--ink);font-weight:400}
h1{font-size:2.55rem;margin:0 0 .5rem}
h2{font-size:1.42rem;margin:2.6rem 0 .7rem;letter-spacing:-.015em}
h3{font-size:1.12rem;margin:2.1rem 0 .75rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.1rem;max-width:var(--measure)}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
details{margin:1.4rem 0;border-left:2px solid var(--line);padding:.1rem 0 .1rem 1.1rem}
summary{cursor:pointer;color:var(--body-2);font-family:var(--sans);font-size:.86rem}

/* ── hero ────────────────────────────────────────────────── */
.hero{margin:0 0 2.2rem}
.hero h1{font-size:3.15rem;line-height:1.04;letter-spacing:-.035em;max-width:17ch}
.hero h1 em{font-style:italic;color:var(--brass)}

.story{max-width:58ch;margin:0 0 2.6rem}
.story p{font-size:1.09rem;line-height:1.68;color:var(--body);margin:0 0 1.15rem;max-width:none}
.story p:first-child{font-size:1.19rem;line-height:1.6;color:var(--ink)}
.story p:first-child::first-letter{
  float:left;font-size:3.5rem;line-height:.82;padding:.16rem .5rem 0 0;color:var(--brass)}
.story em{font-style:italic}

/* ── triage key ──────────────────────────────────────────── */
.key{display:grid;gap:.55rem;margin:1.2rem 0 0;max-width:var(--measure)}
.keyrow{display:grid;grid-template-columns:16px 1fr;gap:.8rem;align-items:start;font-size:.9rem;color:var(--body-2)}
.keyrow .sw{width:4px;height:17px;border-radius:2px;margin-top:.22rem}
.keyrow.t-forever .sw{background:var(--ink)}
.keyrow.t-six .sw{background:linear-gradient(var(--brass) 50%,var(--line) 50%)}
.keyrow.t-release .sw{background:none;box-shadow:inset 0 0 0 1.5px var(--body-3)}
.keyrow b{color:var(--ink);font-weight:600}

/* ── lesson ──────────────────────────────────────────────── */
.lesson{position:relative;padding-left:1.9rem}
.lesson::before{content:"";position:absolute;left:0;top:.55rem;bottom:.5rem;width:3px;
  border-radius:2px;background:var(--tri)}
.t-six .lesson::before{background:var(--brass);opacity:.55}
.t-release .lesson::before{background:var(--body-3);opacity:.4}
.lhead{margin-bottom:2.4rem}
.lhead .sub{font-style:italic;color:var(--body-2);font-size:1.08rem;margin:.5rem 0 1.2rem;max-width:52ch}
.meta{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;font-family:var(--sans);font-size:.78rem;color:var(--body-3)}
.meta .tri{color:var(--tri);font-weight:600}

/* ── buttons ─────────────────────────────────────────────── */
.btn{font-family:var(--sans);font-size:.87rem;border-radius:3px;padding:.66rem 1.3rem;
  background:var(--ink);color:#F2F6F3;border:1px solid var(--ink);transition:background .12s}
.btn:hover{background:var(--ink-lift)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:#E5E9E4;border-color:var(--body-3)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btnrow{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-top:2.4rem}

/* ── question runner ─────────────────────────────────────── */
.qwrap{max-width:var(--measure)}
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--sans);font-size:.78rem;color:var(--body-3);
  padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.qhead .of{font-variant-numeric:tabular-nums}
.qhead .of b{font-family:var(--serif);font-size:1.5rem;color:var(--ink);vertical-align:-.12em;margin-right:.1rem}
.pips{display:flex;gap:3px}
.pip{width:15px;height:3px;border-radius:2px;background:var(--line)}
.pip.ok{background:var(--ok)}.pip.no{background:var(--no)}.pip.cur{background:var(--ink)}
.stem{font-size:1.2rem;line-height:1.5;color:var(--ink);margin-bottom:1.7rem}
.opt{display:grid;grid-template-columns:26px 1fr;gap:.2rem;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:4px;padding:.82rem 1.05rem;margin-bottom:.5rem;
  background:var(--raise);font-size:1rem;line-height:1.45;transition:border-color .12s,box-shadow .12s}
.opt:hover:not(:disabled){border-color:var(--body-3)}
.opt .k{font-family:var(--sans);font-size:.82rem;color:var(--body-3);padding-top:.16rem}
.opt.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.sel .k{color:var(--ink)}
.opt:disabled{cursor:default;opacity:.72}
.opt.right{border-color:var(--ok);background:#EDF4F0;box-shadow:inset 0 0 0 1px var(--ok);opacity:1}
.opt.right .k{color:var(--ok)}
.opt.wrong{border-color:var(--no);background:#F8EFEC;box-shadow:inset 0 0 0 1px var(--no);opacity:1}
.opt.wrong .k{color:var(--no)}

.reveal{margin-top:1.9rem;background:var(--brass-wash);border-radius:4px;
  border-top:3px solid var(--brass);padding:1.4rem 1.5rem}
.reveal.got-it{background:#EFF5F1;border-top-color:var(--ok)}
.reveal.got-it .errtag{color:#6C7F6F}
@media(prefers-reduced-motion:no-preference){
  .reveal{animation:rise .2s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
.verdict{font-family:var(--sans);font-size:.8rem;font-weight:600;margin:0 0 .7rem}
.verdict.ok{color:var(--ok)}.verdict.no{color:var(--no)}
.reveal>p{margin:0 0 1rem;max-width:none}
.rat{border-left:2px solid rgba(18,42,38,.14);padding-left:.9rem;margin-bottom:.85rem;
  font-size:.95rem;color:var(--body-2);max-width:none}
.rat:last-child{margin-bottom:0}
.rat .k{font-weight:600;color:var(--ink)}
.rat.yours{border-left-color:var(--no);background:rgba(155,61,46,.05);padding:.5rem 0 .5rem .9rem;border-radius:0 3px 3px 0}
.errtag{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  color:var(--brass);margin-top:.3rem}

/* ── results ─────────────────────────────────────────────── */
.score{font-family:var(--serif);font-size:4.4rem;line-height:1;letter-spacing:-.04em;color:var(--ink);margin:.3rem 0 0}
.score small{font-size:1.05rem;color:var(--body-3);letter-spacing:0}
.bars{margin:1.4rem 0 0;max-width:var(--measure)}
.bar{margin-bottom:.85rem}
.bar .top{display:flex;justify-content:space-between;align-items:baseline;font-size:.93rem;margin-bottom:.28rem}
.bar .n{font-family:var(--sans);font-size:.8rem;color:var(--body-3);font-variant-numeric:tabular-nums}
.bar .track{height:6px;background:var(--line-soft);border-radius:3px;overflow:hidden}
.bar .fill{height:100%;background:var(--brass);border-radius:3px}
.note{background:var(--raise);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:0 4px 4px 0;padding:1.15rem 1.35rem;max-width:var(--measure);margin:1.8rem 0}
.note p:last-child{margin-bottom:0}
.miss{border-left:2px solid var(--no);padding-left:1rem;margin-bottom:1.5rem;max-width:var(--measure)}
.miss .q{color:var(--ink);margin:0 0 .45rem}
.miss .you{font-family:var(--sans);font-size:.8rem;color:var(--no);margin:0 0 .5rem}
.miss .w{font-size:.95rem;color:var(--body-2);margin:0}
.empty{color:var(--body-2);max-width:var(--measure)}

/* ── module index + compression ──────────────────────────── */
.mgrid{max-width:var(--measure);margin-top:.6rem}
.mrow{display:grid;grid-template-columns:30px 1fr auto;gap:1.1rem;align-items:baseline;
  padding:.9rem 0;border-bottom:1px solid var(--line-soft);text-decoration:none}
.mrow:hover .t{color:var(--brass)}
.mrow .i{font-family:var(--serif);font-size:1.3rem;color:var(--body-3);line-height:1}
.mrow .t{font-size:1.05rem;color:var(--ink);transition:color .12s}
.mrow .s{font-family:var(--sans);font-size:.76rem;color:var(--body-3);font-variant-numeric:tabular-nums}
.cblock{border-left:3px solid var(--tri);padding-left:1.2rem;margin:0 0 2.2rem;max-width:var(--measure)}
.t-release .cblock{border-left-style:dotted}
.cblock h3{margin:0 0 .1rem}
.cblock h3 a{text-decoration:none}
.cblock h3 a:hover{color:var(--brass)}
.cblock .tag{font-family:var(--sans);font-size:.73rem;color:var(--tri);margin-bottom:.7rem}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto}
  .main{padding:2.2rem 1.4rem 4rem}
  .hero h1{font-size:2.4rem}
  h1{font-size:2rem}
  body{font-size:16.5px}