/* Fonts — vendored locally (offline). Latin subsets. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/SpaceGrotesk-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/SpaceGrotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/SpaceGrotesk-600.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/SpaceMono-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/SpaceMono-700.woff2") format("woff2")}

/* Warm-paper theme (single, deliberate — no auto dark). */
:root{
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s:8px; --measure:36rem; --rail:15rem; --margin-w:17rem;
  --ease:cubic-bezier(.2,.72,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{height:100vh;overflow:hidden;background:var(--paper);color:var(--ink);
  font:16px/1.62 var(--sans);-webkit-font-smoothing:antialiased;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,var(--glow) 0%,var(--paper) 42%,var(--deep) 100%)}
#rail,#read,#margin{min-height:0}
::selection{background:rgba(168,67,46,.16)}

/* ── rail: the orientation guarantee. resident, quiet. ───────────── */
#rail{height:100vh;overflow-y:auto;background:var(--rail-paper);
  border-right:1px solid var(--line-soft);padding:calc(var(--s)*4) 0 calc(var(--s)*10);
  scrollbar-width:none}
#rail::-webkit-scrollbar{display:none}
.mast{padding:0 calc(var(--s)*2.5) calc(var(--s)*2)}
.mast a{display:block;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:500}
.mast a:hover{color:var(--accent)}
.mast .sub{font:9px/1.5 var(--mono);letter-spacing:.18em;color:var(--ink-faint);margin-top:2px}
.wk{padding:calc(var(--s)*1.75) calc(var(--s)*2.5) calc(var(--s)*.5);
  font:9px/1.5 var(--mono);letter-spacing:.18em;color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:6px}
.wk .dt{letter-spacing:.04em}
.mark{margin:calc(var(--s)*.5) calc(var(--s)*2.5) calc(var(--s)*.75);padding-left:calc(var(--s));
  border-left:1px solid var(--accent-soft);font:9.5px/1.5 var(--mono);
  letter-spacing:.08em;color:var(--ink-soft)}
#rail a.sec{display:flex;gap:calc(var(--s));align-items:baseline;
  padding:3px calc(var(--s)*2.5);text-decoration:none;color:var(--ink-soft);
  font-size:12.5px;line-height:1.4;border-left:2px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
#rail a.sec:hover{color:var(--ink)}
#rail a.sec.on{color:var(--accent);border-left-color:var(--accent)}
#rail a.sec .n{font:10.5px/1.4 var(--mono);color:var(--ink-faint);min-width:26px;
  font-variant-numeric:tabular-nums}
#rail a.sec.on .n{color:var(--accent)}
#rail a.sec .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rail a.sec[data-track="E"] .n::after{content:"e";font-size:8px;vertical-align:super;
  opacity:.55;margin-left:1px}

/* ── reading column: the only scroller ──────────────────────────── */
#read{height:100vh;overflow-y:auto;
  padding:calc(var(--s)*9) calc(var(--s)*6) calc(var(--s)*20)}
#doc{max-width:var(--measure);margin:0 auto}
.lede{font-size:16px;color:var(--ink-soft);margin-bottom:calc(var(--s)*4);max-width:34rem}
h1{font-size:27px;font-weight:500;line-height:1.24;letter-spacing:-.018em;
  margin-bottom:calc(var(--s)*.75)}
h1 .num{font:14px/1 var(--mono);color:var(--ink-faint);display:block;
  letter-spacing:.06em;margin-bottom:calc(var(--s)*1.25)}
.meta{font:10px/1.6 var(--mono);letter-spacing:.14em;color:var(--ink-faint);
  margin-bottom:calc(var(--s)*4)}
h2{font:11px/1.6 var(--mono);letter-spacing:.2em;color:var(--ink-faint);
  margin:calc(var(--s)*5) 0 calc(var(--s)*1.5);font-weight:400}

/* ── objectives ─────────────────────────────────────────────────── */
.obj{padding:calc(var(--s)*2) 0;border-bottom:1px solid var(--line-soft)}
.obj:last-child{border-bottom:0}
.otop{display:flex;gap:calc(var(--s)*1.5);align-items:baseline}
.oi{font:10px/1.9 var(--mono);color:var(--ink-faint);min-width:20px;letter-spacing:.06em}
.ot{flex:1;font-size:16px;line-height:1.45}
.oc{font:11px/1.7 var(--mono);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.obj.none .ot{color:var(--ink-soft)}
.obj.none .oc{color:var(--accent-soft)}

.chips{display:flex;flex-wrap:wrap;gap:calc(var(--s)*.75) calc(var(--s)*1.5);
  margin:calc(var(--s)*1.25) 0 0 calc(var(--s)*4.5)}
.p{font:11px/1.5 var(--mono);color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.p[data-c=medium]{border-bottom-style:dashed}
.p[data-c=low]{border-bottom-style:dotted}
.p[data-multi]{color:var(--ink)}
.p:hover,.p.lit{color:var(--accent);border-bottom-color:var(--accent)}

.rows{margin:calc(var(--s)*1.25) 0 0 calc(var(--s)*4.5);display:none}
body.detail .rows{display:block} body.detail .chips{display:none}
.row{display:flex;gap:calc(var(--s)*1.5);align-items:baseline;padding:5px 0;
  border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .pid{font:10.5px/1.6 var(--mono);color:var(--ink-faint);min-width:60px;text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.row[data-c=medium] .pid{border-bottom-style:dashed}
.row[data-c=low] .pid{border-bottom-style:dotted}
.row .lab{flex:1;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.row:hover .pid,.row.lit .pid{color:var(--accent);border-bottom-color:var(--accent)}
.row.lit .lab{color:var(--ink)}

.tg{font:9px/1 var(--mono);letter-spacing:.18em;background:none;border:0;
  color:var(--ink-faint);cursor:pointer;padding:0;
  border-bottom:1px solid var(--line);transition:color .16s var(--ease)}
.tg:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ── margin: empty at rest. marks accrue. ───────────────────────── */
#margin{height:100vh;overflow-y:auto;padding:calc(var(--s)*9) calc(var(--s)*3);
  scrollbar-width:none}
#margin::-webkit-scrollbar{display:none}
.mk{padding-left:calc(var(--s)*1.5);border-left:1px solid var(--accent-soft);
  margin-bottom:calc(var(--s)*2)}
.mk .kind{font:9px/1.6 var(--mono);letter-spacing:.18em;color:var(--ink-faint);
  display:block;margin-bottom:3px}
.mk .body{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.mk .body b{color:var(--ink);font-weight:500}

/* ── home ───────────────────────────────────────────────────────── */
.ov{display:flex;flex-wrap:wrap;gap:calc(var(--s)*4);margin-bottom:calc(var(--s)*4)}
.ov div{font:11px/1.7 var(--mono);letter-spacing:.1em;color:var(--ink-faint)}
.ov b{display:block;font:27px/1.2 var(--sans);font-weight:500;letter-spacing:-.018em;
  color:var(--ink);margin-bottom:2px}
.note{border-left:1px solid var(--accent-soft);padding-left:calc(var(--s)*2);
  margin:calc(var(--s)*2) 0}
.note p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.note p+p{margin-top:calc(var(--s))}
a.src{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);
  transition:color .16s var(--ease),border-color .16s var(--ease)}
a.src:hover{color:var(--accent);border-bottom-color:var(--accent)}
.note b{color:var(--ink);font-weight:500}

@media (max-width:1180px){body{grid-template-columns:var(--rail) minmax(0,1fr)}
  #margin{display:none}
/* The rail is navigation. On a page that has none to show it is 15rem of
   ground held open beside the work, so those pages drop it and the reading
   column takes the screen. */
body.no-rail{grid-template-columns:minmax(0,1fr)}

body.no-rail #rail{display:none}
body.no-rail #theme{left:calc(var(--s)*2);bottom:calc(var(--s)*2);width:auto;
  border-radius:99px;border:1px solid var(--line);background:var(--paper-lift);
  padding:7px 10px;box-shadow:0 6px 18px -10px var(--shade)}
.home{display:inline-flex;align-items:baseline;gap:calc(var(--s));
  font:10px/1.6 var(--mono);letter-spacing:.18em;color:var(--ink-faint);
  text-decoration:none;margin-bottom:calc(var(--s)*2)}
.home:hover{color:var(--accent)}
.home::before{content:"\2190"}}
@media (max-width:880px){:root{--rail:11rem}
  #read{padding:calc(var(--s)*5) calc(var(--s)*3) calc(var(--s)*14)}h1{font-size:23px}}
@media (max-width:620px){body{display:block;height:auto;overflow:auto}
  #rail{display:none}#read{height:auto;overflow:visible}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── problem detail (review mode) ────────────────────────────────── */
.rows{margin:calc(var(--s)*1.25) 0 0 calc(var(--s)*4.5)}
.prob{padding:calc(var(--s)*1.5) 0;border-bottom:1px solid var(--line-soft)}
.prob:last-child{border-bottom:0}
.ptop{display:flex;gap:calc(var(--s)*1.5);align-items:baseline}
.prob .pid{font:10.5px/1.6 var(--mono);color:var(--ink-faint);min-width:74px;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.prob[data-v=corrected] .pid{border-bottom-style:dashed}
.prob[data-v=clipped]   .pid{border-bottom-style:dotted}
.prob:hover .pid,.prob.lit .pid{color:var(--accent);border-bottom-color:var(--accent)}
.prob .stem{flex:1;font-size:14px;line-height:1.5}
.prob .kind{font:9px/1.6 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  white-space:nowrap}
.pbody{margin-left:calc(var(--s)*11);margin-top:calc(var(--s)*.75)}
.pmath{margin:calc(var(--s)*.75) 0;font-size:14.5px;overflow-x:auto}
.pmath .katex{font-size:1.02em}
.praw{font:11.5px/1.5 var(--mono);color:var(--ink-soft)}
.opts{margin-top:calc(var(--s)*.75)}
.opt{display:flex;gap:calc(var(--s));font-size:13px;line-height:1.5;
  color:var(--ink-soft);padding:2px 0}
.opt .k{font:10px/1.6 var(--mono);color:var(--ink-faint);min-width:14px}
.parts{margin-top:calc(var(--s)*.75);font-size:13px;color:var(--ink-soft)}
.parts div{padding:1.5px 0}

/* figures cannot be transcribed — say what is there, show nothing false */
.fig{margin:calc(var(--s)) 0;padding-left:calc(var(--s)*1.5);
  border-left:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.fig .t{font:9px/1.6 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  display:block}

/* clipped in the source; and inference, which must never look like fact */
.clip{margin:calc(var(--s)) 0;padding-left:calc(var(--s)*1.5);
  border-left:1px dotted var(--accent-soft);font-size:12.5px;color:var(--ink-soft)}
.clip .t{font:9px/1.6 var(--mono);letter-spacing:.16em;color:var(--accent-soft);
  display:block;margin-bottom:2px}
.infer{border-left-style:dashed}
.infer .basis{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-faint)}
.gone{color:var(--ink-faint);font-style:italic}
a.pgref{font:9px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink-faint);
  text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
a.pgref:hover{color:var(--accent);border-bottom-color:var(--accent)}
.prob .pid{cursor:default}

/* ══ component library ══════════════════════════════════════════ */
/* figures: ink on paper. one accent, used only for the thing being asserted */
.fg{display:block;max-width:100%;height:auto;overflow:visible}
.fg .axis{stroke:var(--ink);stroke-width:1.1}
.fg .axis-f{fill:var(--ink)}
.fg .grid{stroke:var(--line);stroke-width:1}
.fg .tick{stroke:var(--ink-soft);stroke-width:1}
.fg text{font-family:var(--mono);fill:var(--ink-faint)}
.fg .tlab{font-size:10px;text-anchor:middle}
.fg .tlab.end{text-anchor:end}
.fg .alab{font-size:9.5px;letter-spacing:.14em;text-anchor:middle;fill:var(--ink-faint)}
.fg .alab.start,.fg .plab.start,.fg .vlab.start{text-anchor:start}
.fg .sel{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.fg .ep{fill:var(--accent);stroke:var(--accent);stroke-width:2}
.fg .ep.hollow{fill:var(--paper)}
.fg .uni{fill:none;stroke:var(--line);stroke-width:1}
.fg .vc{fill:none;stroke:var(--ink-soft);stroke-width:1.2}
.fg .shade{fill:var(--accent);opacity:.18}
.fg .unshade{fill:var(--paper)}
.fg .vlab{font-size:12px;text-anchor:middle;fill:var(--ink-soft)}
.fg .vnum{font-size:12px;text-anchor:middle;fill:var(--ink)}
.fg .bar{fill:var(--ink-soft);opacity:.34}
.fg .bar.on{fill:var(--accent);opacity:.62}
.fg .curve{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round}
.fg .curve.dashed{stroke-dasharray:5 4;stroke:var(--ink-soft)}
.fg .pt{fill:var(--accent)}
.fg .pt.hollow{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.fg .plab{font-size:10px;fill:var(--ink-soft)}
.b-fig{margin:calc(var(--s)*1.5) 0;max-width:100%;overflow-x:auto}

/* content blocks */
.b-text{font-size:15px;line-height:1.55;margin:calc(var(--s)) 0}
.b-math{margin:calc(var(--s)*1.25) 0;overflow-x:auto}
.b-tablebox{margin:calc(var(--s)*1.5) 0;overflow-x:auto}
.b-cap{font:9px/1.6 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  margin-bottom:calc(var(--s)*.5)}
.b-table{border-collapse:collapse;font-size:13px}
.b-table th{font:8.5px/1.6 var(--mono);letter-spacing:.15em;color:var(--ink-faint);
  text-align:left;font-weight:400;padding:3px 14px 4px 0;border-bottom:1px solid var(--line)}
.b-table td{padding:4px 14px 4px 0;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums}
.b-table th.num,.b-table td.num{text-align:right;padding-right:16px}
.b-table .none{color:var(--ink-faint)}
.b-table.t-stemleaf td:first-child{border-right:1px solid var(--line);padding-right:10px;
  font-weight:500}
.b-table.t-reference{font-size:11.5px}
.b-unknown,.a-unknown{font:11px var(--mono);color:var(--accent);
  border-left:1px dotted var(--accent-soft);padding-left:calc(var(--s))}

/* answers */
.a-line{display:flex;align-items:baseline;gap:calc(var(--s));flex-wrap:wrap;
  margin:calc(var(--s)*.75) 0}
.a-prose{font-size:15px;line-height:2.1}
.a-label{font-size:14px;color:var(--ink-soft)}
.a-slot{display:inline-flex;align-items:baseline;gap:4px}
.a-in{font:14px/1.4 var(--mono);color:var(--ink);background:var(--paper-lift);
  border:0;border-bottom:1px solid var(--ink-soft);border-radius:0;
  padding:2px 6px;min-width:52px;transition:border-color .16s var(--ease)}
.a-in:focus{outline:0;border-bottom-color:var(--accent)}
.a-in:read-only{background:none;border-bottom-style:dotted;color:var(--ink-soft)}
.a-fix,.a-unit{display:inline;font-size:13.5px;color:var(--ink-soft)}
.a-note{font:11.5px/1.5 var(--mono);color:var(--ink-faint);margin-top:calc(var(--s)*.5)}
.a-sel{font:14px var(--sans);color:var(--ink);background:var(--paper-lift);
  border:0;border-bottom:1px solid var(--ink-soft);padding:2px 4px;border-radius:0}
.a-sel:focus{outline:0;border-bottom-color:var(--accent)}

.a-choice{margin-top:calc(var(--s)*1.25);display:flex;flex-direction:column;gap:2px}
.a-choice.is-fig{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:calc(var(--s)*1.5)}
.a-opt{display:flex;gap:calc(var(--s));align-items:flex-start;padding:5px 7px;
  border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:background .14s var(--ease),border-color .14s var(--ease)}
.a-opt:hover{background:var(--paper-lift)}
.a-opt:has(.a-radio:checked){border-color:var(--accent);background:var(--accent-tint)}
.a-radio{margin-top:5px;accent-color:var(--accent)}
.a-key{font:10px/1.7 var(--mono);color:var(--ink-faint);min-width:13px}
.a-optbody{flex:1;min-width:0}
.a-optbody .b-text{margin:0;font-size:14px}
.a-optbody .b-fig{margin:0}

.a-parts{margin-top:calc(var(--s))}
.a-part{display:flex;gap:calc(var(--s)*1.5);padding:calc(var(--s)) 0;
  border-top:1px solid var(--line-soft)}
.a-part:first-child{border-top:0}
.a-plabel{font:11px/1.7 var(--mono);color:var(--ink-faint);min-width:24px}
.a-pbody{flex:1;min-width:0}

/* a problem, whole */
.pr{border-bottom:1px solid var(--line);padding:calc(var(--s)*2.5) 0}
.pr-head{display:flex;gap:calc(var(--s)*1.5);align-items:baseline;
  margin-bottom:calc(var(--s)*.5)}
.pr-id{font:10.5px/1.6 var(--mono);color:var(--ink-faint)}
.pr-kind{font:9px/1.7 var(--mono);letter-spacing:.16em;color:var(--ink-faint)}

/* specimen page */
.spec{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:calc(var(--s)*3);
  padding:calc(var(--s)*2.5) 0;border-bottom:1px solid var(--line-soft);align-items:start}
.spec-src{font:10.5px/1.55 var(--mono);color:var(--ink-faint);white-space:pre-wrap;
  word-break:break-word;background:var(--paper-lift);padding:calc(var(--s)*1.25);
  border-radius:2px;overflow-x:auto}
.spec h3{font-size:15.5px;font-weight:500;margin-bottom:calc(var(--s)*.5)}
.spec .cnt{font:9px/1.7 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  margin-bottom:calc(var(--s))}
@media(max-width:900px){.spec{grid-template-columns:1fr}}
.pr-thin{font:10.5px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink-faint)}
.prob .pbody .b-text:first-child{margin-top:0}

/* ══ the problem as a card ═══════════════════════════════════════
   A problem is a genuine unit — stem, figure and answer belong together —
   so containment is earned here. But the apparatus around it stays absent
   until touched: at rest a card is just the problem on slightly lifted
   paper. Hover or focus summons the actions; leaving dismisses them.       */
.rows{margin:calc(var(--s)*1.25) 0 0 calc(var(--s)*4.5);
  display:flex;flex-direction:column;gap:calc(var(--s)*1.25)}
.prob{position:relative;background:var(--paper-lift);border:1px solid var(--line-soft);
  border-radius:3px;padding:calc(var(--s)*1.75) calc(var(--s)*2);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.prob:hover,.prob:focus-within{border-color:var(--line)}
.prob[data-v=clipped]{border-left:2px solid var(--accent-soft)}
.prob.is-tagged{border-left:2px solid var(--accent)}

.ptop{display:flex;gap:calc(var(--s)*1.5);align-items:baseline;
  margin-bottom:calc(var(--s)*.75)}
.prob .pid{min-width:0;border-bottom:0;padding:0}
.prob .stem{flex:1;font:9px/1.7 var(--mono);letter-spacing:.16em;color:var(--ink-faint)}

/* the action rail: summoned, never resident */
.pacts{position:absolute;top:calc(var(--s)*1.25);right:calc(var(--s)*1.5);
  display:flex;gap:2px;align-items:center;opacity:0;pointer-events:none;
  transition:opacity .16s var(--ease)}
.prob:hover .pacts,.prob:focus-within .pacts{opacity:1;pointer-events:auto}
.pact{font:9px/1 var(--mono);letter-spacing:.12em;background:none;cursor:pointer;
  border:1px solid var(--line);color:var(--ink-faint);padding:4px 7px;border-radius:2px;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.pact:hover{color:var(--accent);border-color:var(--accent)}
.pact.on{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}

/* a tag the user set — user-made state persists, so it may show at rest.
   All tags share one treatment; the WORD carries the distinction, not a hue. */
.ptags{display:flex;gap:calc(var(--s)*.75);flex-wrap:wrap;
  margin-top:calc(var(--s)*1.25);padding-top:calc(var(--s)*.75);
  border-top:1px solid var(--line-soft)}
.ptag{font:9px/1.6 var(--mono);letter-spacing:.14em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  padding:2px 7px;border-radius:2px;cursor:pointer}
.ptag:hover{border-color:var(--accent)}
.prob .pbody{margin-left:0}
.prob .clip{margin-top:calc(var(--s)*1.25)}

/* the count of what is tagged, in the margin — an answer to a gesture */
.tagsum{padding-left:calc(var(--s)*1.5);border-left:1px solid var(--accent-soft)}
.tagsum .kind{font:9px/1.6 var(--mono);letter-spacing:.18em;color:var(--ink-faint);
  display:block;margin-bottom:4px}
.tagsum .row{font-size:12.5px;color:var(--ink-soft);padding:1px 0}
.tagsum b{color:var(--ink);font-weight:500}
/* a choice whose options are expressions: a native select cannot render math */
.a-pills{display:inline-flex;gap:calc(var(--s)*.5);align-items:center;flex-wrap:wrap;
  vertical-align:middle}
.a-pill{display:inline-flex;gap:5px;align-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;padding:2px 8px;
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.a-pill:hover{border-color:var(--ink-faint)}
.a-pill:has(.a-pillin:checked){border-color:var(--accent);background:var(--accent-tint)}
.a-pillin{accent-color:var(--accent);margin:0}

/* ── objective map + stepper ─────────────────────────────────────── */
#objmap{margin-bottom:calc(var(--s)*3)}
.omap{display:flex;gap:calc(var(--s)*1.5);align-items:baseline;padding:5px 0;
  border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:color .16s var(--ease)}
.omap:last-child{border-bottom:0}
.omap .ot{flex:1;font-size:14px;color:var(--ink-soft);line-height:1.45}
.omap:hover .ot{color:var(--ink)}
.omap.on .ot{color:var(--ink)}
.omap.on .oi{color:var(--accent)}
.omap.on{border-left:2px solid var(--accent);margin-left:-10px;padding-left:8px}

.stepper{display:flex;align-items:center;gap:calc(var(--s)*2);
  margin-bottom:calc(var(--s)*1.5)}
.sbtn{font:9.5px/1 var(--mono);letter-spacing:.16em;background:none;cursor:pointer;
  border:1px solid var(--line);color:var(--ink-soft);padding:6px 11px;border-radius:2px;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.sbtn:hover{color:var(--accent);border-color:var(--accent)}
.spos{font:11px/1 var(--mono);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.spos i{font-style:normal;opacity:.5;margin:0 2px}
#stage .rows{margin-left:0}

/* ══ order-of-operations instrument ══════════════════════════════
   ONE live colour, reused every step, meaning "you may touch this now".
   Not a hue per precedence level — that would be a permanent category
   legend, which is the thing the colour rule exists to prevent, and it
   would need explaining. This teaches itself on the first click.        */
/* one tool, one objective, on the interactive-resources page */
.toolgroup{margin:calc(var(--s)*4) 0}
.toolgroup h3{display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--s)*2);font-size:15px;font-weight:500;color:var(--ink);
  padding-bottom:calc(var(--s));margin-bottom:calc(var(--s)*1.5);
  border-bottom:1px solid var(--line-soft)}
.tg-sec{font:9px/1 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  white-space:nowrap}

/* mode switch and example picker share one quiet strip above the stage */
.oo-head{display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--s)*2);flex-wrap:wrap;margin-bottom:calc(var(--s)*1.25)}
.oo-modes{display:flex;gap:0;border:1px solid var(--line);border-radius:2px;
  overflow:hidden}
.oo-mode{font:9px/1 var(--mono);letter-spacing:.14em;background:none;border:0;
  color:var(--ink-faint);padding:6px 11px;cursor:pointer;
  transition:color .14s var(--ease),background .14s var(--ease)}
.oo-mode+.oo-mode{border-left:1px solid var(--line)}
.oo-mode:hover{color:var(--ink-soft)}
.oo-mode.on{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,transparent)}
.oo-pickers{display:flex;align-items:center;gap:5px}
.oo-plabel{font:8.5px/1 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  margin-right:2px}
.oo-pick{font:9px/1 var(--mono);background:none;border:1px solid var(--line);
  color:var(--ink-faint);padding:5px 8px;border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.oo-pick:hover{color:var(--ink-soft)}
.oo-pick.on{color:var(--accent);border-color:var(--accent-soft)}

.oo-stage{display:grid;grid-template-columns:minmax(0,1fr) 220px;
  gap:calc(var(--s)*2.5);align-items:start;
  background:var(--paper-lift);border:1px solid var(--line-soft);
  border-radius:3px;padding:calc(var(--s)*2)}
.oo-bar{grid-column:1/-1;font:9px/1.7 var(--mono);letter-spacing:.18em;
  color:var(--ink-faint)}
/* what the letters stand for, before any of them is replaced */
.oo-given{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:calc(var(--s)*2.5);font-size:14px;color:var(--ink-soft);
  padding-top:calc(var(--s)*.75)}
.oo-given:empty{display:none}
.oo-gv{border-radius:2px;padding:1px 3px}
.oo-gv.oo-cite{animation:ooland .5s var(--ease)}

.oo-expr{position:relative;font-size:17px;overflow-x:auto;
  padding:calc(var(--s)*1.5) 0}
/* A mark the pointer is over. KaTeX's boxes make :hover unreliable on
   fractions and radicals (see markAt in solve.js), so the class is set from
   the same geometry the click uses, and the cursor is set on the container
   rather than the mark for the same reason. */
.oo-expr.oo-pointing{cursor:pointer}

/* the outgoing form of a replaced piece rides here, over the incoming one */
.oo-ghosts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.oo-ghost{position:absolute;display:inline-block;color:var(--ink-soft);
  transform-origin:50% 60%;will-change:transform,opacity}

/* transport, watch mode only */
.oo-transport{display:flex;gap:6px;margin-top:calc(var(--s)*1.25)}
.oo-transport:empty{display:none}
.oo-t{font:9px/1 var(--mono);letter-spacing:.14em;background:none;
  border:1px solid var(--line);color:var(--ink-faint);padding:6px 11px;
  border-radius:2px;cursor:pointer;min-width:76px;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.oo-t:hover{color:var(--accent);border-color:var(--accent-soft)}
/* in watch mode nothing is the student's to press, so nothing invites it */
.oo-root.is-watch .oo-c{cursor:default}

/* a node the learner may act on */
.oo-node{border-radius:2px;padding:1px 2px;transition:background .14s var(--ease),
  color .14s var(--ease),box-shadow .14s var(--ease)}
.oo-live{cursor:pointer;background:color-mix(in srgb,var(--accent) 15%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}
.oo-live:hover{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.oo-cleared{background:none;box-shadow:none;color:var(--ink)}
/* the flash a substituted piece lands with. Background only — the FLIP that
   slides the rest of the expression is already animating transform on this
   same element, and two owners of one property is a fight, not an effect. */
.oo-land{animation:ooland .5s var(--ease)}
@keyframes ooland{
  from{background:color-mix(in srgb,var(--accent) 42%,transparent)}
  to{background:none} }

/* a wrong reach fails visibly: the operation shudders and the argument that
   is still an expression — the actual reason — lights up instead */
.oo-refuse{animation:oorefuse .3s var(--ease)}
@keyframes oorefuse{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)} }
.oo-blocker{box-shadow:0 0 0 1.5px var(--accent-soft);border-radius:2px}

.oo-side{min-height:1px}
.oo-tip{padding-left:calc(var(--s)*1.5);border-left:1px solid var(--accent-soft)}
.oo-kind{font:8.5px/1.6 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  display:block;margin-bottom:4px}
.oo-tip p{font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.oo-keep{margin-top:calc(var(--s));font:9px/1 var(--mono);letter-spacing:.14em;
  background:none;border:1px solid var(--line);color:var(--ink-faint);
  padding:4px 8px;border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.oo-keep:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.oo-keep:disabled{opacity:.55;cursor:default}
.oo-fail{font:11px var(--mono);color:var(--accent);
  border-left:1px dotted var(--accent-soft);padding-left:calc(var(--s))}
@media(max-width:820px){.oo-stage{grid-template-columns:1fr}}
.pr-tool{margin-top:calc(var(--s)*1.75)}
.pact-tool{color:var(--ink-soft);border-color:var(--line)}
.pr-tool .oo-stage{background:var(--paper);border-color:var(--line)}
/* authored clickable pieces */
.oo-c{border-radius:2px;padding:1px 2px;transition:background .14s var(--ease),
  box-shadow .14s var(--ease)}
.oo-c.oo-live{cursor:pointer;background:color-mix(in srgb,var(--accent) 15%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}
.oo-c.oo-live:hover,
.oo-c.oo-live.oo-hover{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.oo-c.oo-cleared{background:none;box-shadow:none}

/* ══ neighbourhood view ══════════════════════════════════════════
   Never the whole graph. What comes before, what you are on, what comes
   after — time running left to right, which is the course's own order.
   Relation type is carried by VALUE (solid = hard requirement, dotted =
   soft ordering), the same convention the citation rules use, so it needs
   no legend. The reason an edge exists is pulled, never resident.        */
.gr{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:calc(var(--s)*2.5);
  align-items:start}
.gr-head{font:9px/1.7 var(--mono);letter-spacing:.18em;color:var(--ink-faint);
  padding-bottom:calc(var(--s)*.75);margin-bottom:calc(var(--s));
  border-bottom:1px solid var(--line-soft)}
.gr-col{min-width:0}

.gr-n{display:block;width:100%;text-align:left;background:none;cursor:pointer;
  border:0;border-left:1px solid var(--line);padding:calc(var(--s)*.75) 0
  calc(var(--s)*.75) calc(var(--s)*1.25);margin-bottom:calc(var(--s)*.75);
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.gr-n[data-type=requires]{border-left-style:solid}
.gr-n[data-type=prepares]{border-left-style:dotted}
.gr-n:hover{border-left-color:var(--accent)}
.gr-n:hover .gr-t{color:var(--ink)}
.gr-id{display:block;font:9.5px/1.6 var(--mono);letter-spacing:.1em;
  color:var(--ink-faint)}
.gr-n:hover .gr-id{color:var(--accent)}
.gr-t{display:block;font-size:13px;line-height:1.45;color:var(--ink-soft)}

.gr-here .gr-head{border-bottom-color:var(--accent-soft)}
.gr-focus{border-left:2px solid var(--accent);padding:calc(var(--s)) 0
  calc(var(--s)) calc(var(--s)*1.25)}
.gr-focus .gr-id{color:var(--accent)}
.gr-focus .gr-t{font-size:15.5px;color:var(--ink);line-height:1.4}
.gr-meta{display:block;margin-top:6px;font:9px/1.6 var(--mono);
  letter-spacing:.14em;color:var(--ink-faint)}

.gr-none{font-size:12.5px;line-height:1.5;color:var(--ink-faint);font-style:italic;
  padding-left:calc(var(--s)*1.25);border-left:1px solid var(--line-soft)}
.gr-why{margin-top:calc(var(--s)*2.5);padding-left:calc(var(--s)*1.5);
  border-left:1px solid var(--accent-soft);font-size:12.5px;line-height:1.55;
  color:var(--ink-soft);max-width:52ch;min-height:1em}
.gr-fail{font:11px var(--mono);color:var(--accent)}
@media(max-width:860px){.gr{grid-template-columns:1fr}}

/* a jump list that belongs to the page rather than to the operating system:
   the native control is stripped and rebuilt from the same tokens as the
   stepper beside it. Only the closed state can be themed; the opened list is
   drawn by the OS, which is why stepping is the primary affordance. */
select.jump{appearance:none;-webkit-appearance:none;
  font:9.5px/1 var(--mono);letter-spacing:.1em;color:var(--ink-faint);
  background:transparent;border:1px solid var(--line);border-radius:2px;
  padding:6px 22px 6px 10px;cursor:pointer;max-width:16rem;
  text-overflow:ellipsis;white-space:nowrap;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 1px),calc(100% - 8px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
select.jump:hover,select.jump:focus{outline:0;color:var(--accent);
  border-color:var(--accent)}
#picker .stepper{margin-bottom:calc(var(--s)*2.5)}
#picker .spos{min-width:5.5rem;text-align:center}
.gr-bridge{margin-top:calc(var(--s));padding-left:calc(var(--s)*1.5);
  border-left:1px solid var(--accent-soft);font-size:12.5px;color:var(--ink-soft)}
.gr-bridge span{display:block;font:10px/1.7 var(--mono);letter-spacing:.1em;
  color:var(--accent)}
.gr-caveat{margin-top:calc(var(--s)*1.5);font:10.5px/1.6 var(--mono);
  color:var(--ink-faint)}

/* ── timeline ────────────────────────────────────────────────────
   Course order along the axis, so position already carries meaning. An
   arc's height is how far the idea reaches before something uses it. */
.tl{display:block;width:100%;height:auto;overflow:visible;margin-top:calc(var(--s)*2)}
.tl-axis{stroke:var(--ink-soft);stroke-width:1}
.tl-div{stroke:var(--line);stroke-width:1}
.tl-ch{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;fill:var(--ink-faint)}
.tl-arc{fill:none;stroke:var(--ink-soft);stroke-width:.8;opacity:.30;
  transition:opacity .16s var(--ease),stroke .16s var(--ease)}
.tl-requires{stroke-dasharray:none}
.tl-prepares{stroke-dasharray:2.5 3}
.tl-dot{fill:var(--ink-soft);cursor:pointer;transition:fill .14s var(--ease)}
.tl-dot:hover{fill:var(--accent)}
.tl.dim .tl-arc{opacity:.07}
.tl.dim .tl-arc.lit{opacity:1;stroke:var(--accent);stroke-width:1.4}
.tl.dim .tl-dot{fill:var(--ink-faint)}
.tl.dim .tl-dot.lit{fill:var(--accent);r:5}
.tl-cap{margin-top:calc(var(--s));font-size:12.5px;color:var(--ink-soft);
  min-height:1.5em;padding-left:calc(var(--s)*1.5);
  border-left:1px solid var(--accent-soft)}
#views .stepper{margin-bottom:calc(var(--s)*2)}

/* full window, not a column: these pages are instruments, not prose */
body{max-width:none}
#read{padding-left:calc(var(--s)*5);padding-right:calc(var(--s)*5)}
#doc{max-width:none}
#doc .lede,#doc>.note{max-width:64ch}

/* ── dependency matrix ─────────────────────────────────────────── */
.mx-wrap{overflow-x:auto;margin-top:calc(var(--s)*2)}
.mx{display:block;aspect-ratio:1;height:auto;min-width:0;
  width:min(100%,calc(100vh - 13rem),820px);margin-inline:auto}
.mx-lab{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  fill:var(--ink-faint);text-anchor:middle}
.mx-lab.end{text-anchor:end}
.mx-div{stroke:var(--line-soft);stroke-width:1}
.mx-cell{fill:none;stroke:var(--line-soft);stroke-width:.6}
.mx-cell.diag{fill:var(--line-soft);stroke:none}
.mx-cell.has{fill:var(--ink-soft);stroke:none;cursor:pointer}
.mx-cell.has.hard{fill:var(--accent)}
.mx-cell.has:hover{stroke:var(--ink);stroke-width:1.4}
.mx-cap{margin-top:calc(var(--s)*1.5);min-height:5em;font-size:12.5px;
  color:var(--ink-soft);padding-left:calc(var(--s)*1.5);
  border-left:1px solid var(--accent-soft);max-width:70ch}
.mx-hint{font:9px var(--mono);letter-spacing:.16em;color:var(--ink-faint)}
.mx-list{margin-top:calc(var(--s));font-size:12px}
.mx-list div{padding:2px 0}
.mx-list span{display:block;font:9.5px/1.6 var(--mono);color:var(--ink-faint)}
.mx-more{font:9px var(--mono);color:var(--ink-faint);letter-spacing:.14em}

/* ── the choice a click opens ──────────────────────────────────── */
.gr-n{position:relative}
.gr-menu{position:absolute;left:calc(var(--s)*1.25);top:100%;z-index:20;
  background:var(--paper-lift);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 10px 26px -12px var(--shade);min-width:14rem;
  padding:calc(var(--s)*.5) 0}
.gr-menu-h{font:9px/1.7 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  padding:calc(var(--s)*.5) calc(var(--s)*1.5)}
.gr-menu button{display:block;width:100%;text-align:left;background:none;border:0;
  font:12.5px var(--sans);color:var(--ink-soft);padding:5px calc(var(--s)*1.5);
  cursor:pointer;transition:color .14s var(--ease),background .14s var(--ease)}
.gr-menu button:hover{color:var(--accent);background:var(--accent-tint)}
.gr-why.pinned{border-left-color:var(--accent)}

/* ── chapter view ──────────────────────────────────────────────── */
.ch{display:block;width:100%;height:auto;max-width:1100px;margin:calc(var(--s)*2) 0}
.ch-axis{stroke:var(--line);stroke-width:1}
.ch-arc{fill:none;stroke:var(--ink-soft);opacity:.5;cursor:pointer;
  transition:opacity .16s var(--ease),stroke .16s var(--ease)}
.ch-arc.hard{stroke:var(--accent);opacity:.62}
.ch-arc.soft{stroke-dasharray:3 4;opacity:.4}
.ch-arc.off{opacity:.08}
.ch-arc:hover{opacity:1;stroke:var(--accent)}
.ch-dot{fill:var(--paper-lift);stroke:var(--ink-soft);stroke-width:1.2;cursor:pointer;
  transition:fill .16s var(--ease),stroke .16s var(--ease)}
.ch-node:hover .ch-dot{stroke:var(--accent)}
.ch-node.sel .ch-dot{fill:var(--accent);stroke:var(--accent)}
.ch-lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  fill:var(--ink-soft);text-anchor:middle}
.ch-node.sel .ch-lab{fill:var(--accent)}
.ch-sub{font-family:var(--mono);font-size:8.5px;fill:var(--ink-faint);text-anchor:middle}
.ch-cap{min-height:2.2em;font-size:12.5px;color:var(--ink-soft);
  padding-left:calc(var(--s)*1.5);border-left:1px solid var(--accent-soft);
  max-width:70ch}
.ch-detail{margin-top:calc(var(--s)*2.5);max-width:44rem}
.ch-hint{font:9px var(--mono);letter-spacing:.16em;color:var(--ink-faint)}
.ch-dh{font:9px/1.7 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  margin-bottom:calc(var(--s))}
.ch-grp{margin-bottom:calc(var(--s)*1.5)}
.ch-grp>span{font:9px var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  display:block;margin-bottom:4px}
.ch-row{display:flex;gap:calc(var(--s)*1.5);align-items:baseline;padding:3px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.ch-row span{font:10.5px var(--mono);color:var(--ink);min-width:5.5rem}
.ch-row i{flex:1;font-style:normal;font-size:12px;color:var(--ink-soft)}
.ch-row em{font:11px var(--mono);font-style:normal;color:var(--accent)}

/* ── course landing ────────────────────────────────────────────── */
h1 .num{display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:calc(var(--s)*2);margin-bottom:calc(var(--s)*5)}
.card{display:block;text-decoration:none;border-left:1px solid var(--line);
  padding:calc(var(--s)*1.5) 0 calc(var(--s)*1.5) calc(var(--s)*2);
  transition:border-color .16s var(--ease)}
.card:hover{border-left-color:var(--accent)}
.ct{display:block;font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-.008em;margin-bottom:6px}
.card:hover .ct{color:var(--accent)}
.cd{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.cd b{color:var(--ink-faint);font:10px/1.9 var(--mono);letter-spacing:.1em;font-weight:400}
.cm{display:block;margin-top:calc(var(--s));font:9px var(--mono);
  letter-spacing:.16em;color:var(--ink-faint)}

/* ── the schedule page: one month at a time, filling the frame ──── */
.cal-nav{display:flex;flex-wrap:wrap;gap:calc(var(--s)*.5);
  padding-bottom:calc(var(--s)*1.5);margin-bottom:calc(var(--s)*2.5);
  border-bottom:1px solid var(--line-soft)}
.cal-nav button{background:none;border:0;cursor:pointer;
  padding:calc(var(--s)*1.25) calc(var(--s)*1.25);margin:calc(var(--s)*-1.25) 0;
  font:10px var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  border-bottom:1px solid transparent;transition:color .2s var(--ease)}
.cal-nav button:hover{color:var(--ink-soft)}
.cal-nav button[aria-current=true]{color:var(--ink);border-bottom-color:var(--accent)}
.cal-head{display:grid;font:9px var(--mono);letter-spacing:.18em;
  color:var(--ink-faint);padding-bottom:calc(var(--s)*.75)}
.cal-head span{padding-left:calc(var(--s)*1.25)}
.cal-head .cal-wh{padding-left:0;opacity:.6}
.cal-w{border-bottom:1px solid var(--line-soft);display:flex;
  align-items:flex-start;justify-content:flex-end;
  padding:calc(var(--s)*1.25) calc(var(--s)*1.25) 0 0;
  font:10px var(--mono);letter-spacing:.06em;color:var(--ink-faint);opacity:.7}
.cal-grid{display:grid;border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);margin-bottom:calc(var(--s)*6)}
.cal-c{border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);min-height:7.5rem;
  padding:calc(var(--s)*1.25);display:flex;flex-direction:column;
  gap:calc(var(--s)*.75)}
.cal-c.gone{border-color:transparent}
.cal-c.now{background:var(--accent-tint)}
.cal-n{font:10px var(--mono);letter-spacing:.06em;color:var(--ink-faint)}
.cal-c.now .cal-n{color:var(--accent)}
.cal-c.shut{opacity:.65}
.cal-shut{font:9.5px var(--mono);letter-spacing:.1em;color:var(--ink-faint)}
.cal-shut b{display:block;margin-top:3px;font-weight:400;color:var(--ink-soft)}
.cal-i{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-soft);
  text-decoration:none;transition:color .14s var(--ease)}
a.cal-i:hover{color:var(--accent)}
.cal-id{display:block;font:9px var(--mono);letter-spacing:.14em;
  color:var(--ink-faint);margin-bottom:3px}
.cal-exam{align-self:flex-start;background:var(--accent);color:var(--paper);
  border-radius:2px;padding:calc(var(--s)*.5) calc(var(--s)*.9);font-weight:500}
.cal-cov{display:block;font:9px var(--mono);letter-spacing:.1em;
  opacity:.85;margin-top:2px}
.cal-review,.cal-note{color:var(--ink-faint);font-size:13px}
@media (max-width:700px){
  .cal-c{min-height:5rem;padding:calc(var(--s)*.75)}
  .cal-i{font-size:12px}
}

/* ── review topics: a topic opens to the reviews inside it ──────── */
.topic{border-top:1px solid var(--line-soft)}
.topic + .topic{border-top:1px solid var(--line-soft)}
.topic:last-of-type{border-bottom:1px solid var(--line-soft)}
.topic summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:calc(var(--s)*2);padding:calc(var(--s)*2.25) 0}
.topic summary::-webkit-details-marker{display:none}
.topic summary::before{content:"+";font:12px/1 var(--mono);color:var(--ink-faint);
  width:1rem;flex:none;transition:color .16s var(--ease)}
.topic[open] summary::before{content:"\2212"}
.topic summary:hover::before,.topic summary:hover .tt{color:var(--accent)}
.tt{font-size:17px;font-weight:500;color:var(--ink);transition:color .16s var(--ease)}
.tn{margin-left:auto;font:9px var(--mono);letter-spacing:.16em;color:var(--ink-faint)}
.topic .cards{padding:0 0 calc(var(--s)*3) 1rem}

.cal-list{border-top:1px solid var(--line-soft)}
.cal-r{display:grid;grid-template-columns:5rem 15rem minmax(0,1fr);
  gap:calc(var(--s)*2);align-items:baseline;padding:calc(var(--s)*1.25) 0;
  border-bottom:1px solid var(--line-soft)}
.cal-rn{font:10px var(--mono);letter-spacing:.16em;color:var(--accent)}
.cal-rd{font-size:14px;color:var(--ink)}
.cal-rc{font:10px var(--mono);letter-spacing:.06em;color:var(--ink-faint)}
.cal-r.soon .cal-rn{color:var(--ink-faint)}
.cal-r.soon .cal-rd{color:var(--ink-soft)}
.cal-list.two .cal-r{grid-template-columns:4rem minmax(0,1fr)}
.cal-list.two .cal-rd{font-size:13.5px;color:var(--ink-soft)}
.cal-r.shut .cal-rn{color:var(--ink-faint)}
.cal-r.shut .cal-rd{color:var(--ink)}
@media (max-width:760px){
  .cal-r,.cal-list.two .cal-r{grid-template-columns:minmax(0,1fr);
    gap:calc(var(--s)*.25)}
}

.wkrow{display:flex;gap:calc(var(--s)*3);padding:calc(var(--s)*1.25) 0;
  border-bottom:1px solid var(--line-soft);align-items:baseline}
.wkh{min-width:11rem}
.wkh b{font:10px var(--mono);letter-spacing:.16em;color:var(--ink);font-weight:400}
.wkh span{display:block;font:9.5px var(--mono);color:var(--ink-faint);margin-top:2px}
.wkb{flex:1;display:flex;flex-wrap:wrap;gap:calc(var(--s)*.5) calc(var(--s)*2.5)}
.wks{display:flex;gap:calc(var(--s));align-items:baseline;text-decoration:none;
  font-size:13.5px;color:var(--ink-soft);transition:color .14s var(--ease)}
.wks:hover{color:var(--accent)}
.wks .n{font:10px var(--mono);color:var(--ink-faint);min-width:2.2rem}
.wkn{font:10px var(--mono);letter-spacing:.12em;color:var(--ink-faint)}
.wks i{font-style:normal;font:9px var(--mono);color:var(--ink-faint);
  letter-spacing:.1em}
.exam{font:9.5px var(--mono);letter-spacing:.12em;color:var(--accent-soft);
  border-left:2px solid var(--accent-soft);padding-left:calc(var(--s));
  width:100%;margin-bottom:4px}
footer{margin-top:calc(var(--s)*6);padding-top:calc(var(--s)*2);
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-faint);
  max-width:60ch;line-height:1.6}
.p.sh{color:var(--accent);border-bottom-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.note .src{margin-top:calc(var(--s)*1.25);font:10px var(--mono);letter-spacing:.1em;
  color:var(--ink-faint)}
.exlede{font-size:13px;color:var(--ink-faint);margin-bottom:calc(var(--s)*1.5);
  max-width:52ch}
.why{margin-top:calc(var(--s)*1.75);padding-left:calc(var(--s)*1.5);
  border-left:1px solid var(--accent-soft);font-size:13px;color:var(--ink-soft);
  line-height:1.55}
.why .t{display:block;font:9px var(--mono);letter-spacing:.16em;
  color:var(--ink-faint);margin-bottom:4px}
.why .k{display:block;margin-top:6px;font:11px var(--mono);color:var(--accent)}

/* ══ use the screen ══════════════════════════════════════════════
   These are working pages, not prose. A 36rem measure is right for reading
   paragraphs and wrong for a question you are solving: it leaves two thirds of
   a laptop screen empty and shrinks the mathematics to footnote size. Type
   goes up, the column goes away, and on a wide screen the objectives sit
   beside the question instead of pushing it down the page. */
body{font-size:17.5px}
#read{padding:calc(var(--s)*5) calc(var(--s)*6) calc(var(--s)*16)}
#doc{max-width:none}
h1{font-size:32px}
.lede{font-size:17px;max-width:52ch}
.meta{font-size:11px}

/* the objectives map: across, not down */
#objmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 calc(var(--s)*3);margin-bottom:calc(var(--s)*3)}
.omap{padding:7px 0}
.omap .ot{font-size:15px}

/* the question itself, at a size you can actually work with */
.prob{padding:calc(var(--s)*3) calc(var(--s)*3.5)}
.prob .pbody{font-size:18px}
.b-text{font-size:18px;line-height:1.5}
.b-math{margin:calc(var(--s)*2) 0;font-size:20px}
.b-math .katex{font-size:1.18em}
.pbody .katex{font-size:1.06em}
.a-line{margin:calc(var(--s)*1.5) 0}
.a-prose{font-size:18px;line-height:2.2}
.a-in{font-size:17px;padding:4px 9px;min-width:64px}
.opt .v{font-size:17px}
.opt{padding:8px 11px}
.a-part{padding:calc(var(--s)*1.5) 0}
.a-pbody{font-size:17px}
.why{font-size:15px;margin-top:calc(var(--s)*2.5)}
.sbtn{font-size:10.5px;padding:8px 14px}
.spos{font-size:12.5px}
.stepper{gap:calc(var(--s)*2.5);margin-bottom:calc(var(--s)*2.5)}

/* wide screens: the map beside the work, not above it */
/* The objectives list beside the question, on the homework page only. This was
   unscoped once: every page shares this stylesheet, so it turned each of them
   into a two-column grid that auto-placed headings into one column and their
   own content into the other. Keep it behind body.hw. */
@media (min-width:1500px){
  body.hw #doc{display:grid;grid-template-columns:minmax(0,31rem) minmax(0,1fr);
    gap:0 calc(var(--s)*7);align-items:start}
  body.hw #doc h1,body.hw #doc .meta{grid-column:1/-1}
  body.hw #doc h2:first-of-type,body.hw #objmap{grid-column:1}
  body.hw #objmap{grid-template-columns:1fr}
  body.hw #stage{grid-column:2;grid-row:3/span 4}
  body.hw #doc h2:nth-of-type(2),body.hw #doc .note{grid-column:1}
}
/* the margin column earns its place only where marks accrue; on a page that
   never writes to it, it is 17rem of nothing between the work and the edge */
#margin{display:none}
/* The rail is navigation. On a page that has none to show it is 15rem of
   ground held open beside the work, so those pages drop it and the reading
   column takes the screen. */
body.no-rail{grid-template-columns:minmax(0,1fr)}
body.no-rail #rail{display:none}

/* Pages without the rail scroll the document itself. The nested scroller
   exists so the rail can scroll independently; where there is no rail it
   only costs. A trackpad keeps a nested scroller coasting after the fingers
   lift, and a click landing during the coast is spent arresting the scroll
   instead of reaching what it hit. Pages carrying full-bleed art opt out
   with .bleed: their `width:100vw` is exact only while the document has no
   scrollbar of its own. */
body.no-rail:not(.bleed){height:auto;min-height:100vh;overflow:visible}
body.no-rail:not(.bleed) #read{height:auto;overflow:visible}
body.no-rail #theme{left:calc(var(--s)*2);bottom:calc(var(--s)*2);width:auto;
  border-radius:99px;border:1px solid var(--line);background:var(--paper-lift);
  padding:7px 10px;box-shadow:0 6px 18px -10px var(--shade)}
.home{display:inline-flex;align-items:baseline;gap:calc(var(--s));
  font:10px/1.6 var(--mono);letter-spacing:.18em;color:var(--ink-faint);
  text-decoration:none;margin-bottom:calc(var(--s)*2)}
.home:hover{color:var(--accent)}
.home::before{content:"\2190"}
body.with-margin{grid-template-columns:var(--rail) minmax(0,1fr) var(--margin-w)}
body.with-margin #margin{display:block}

/* The reason a relation exists has to be visible while the cursor is still on
   the item. With fourteen neighbours the column runs past the fold, so a block
   at the end of the document is never on screen at the moment it is wanted. */
.gr-why{position:sticky;bottom:0;z-index:5;margin-top:calc(var(--s)*3);
  background:var(--paper-lift);border-left:2px solid var(--accent);
  border-top:1px solid var(--line-soft);
  padding:calc(var(--s)*1.5) calc(var(--s)*2);max-width:none;
  box-shadow:0 -8px 20px -14px var(--shade)}
.gr-why[hidden]{display:none}

/* three columns of names read better than one long one */
.gr-col{min-width:0}
.gr-back,.gr-fwd{display:flex;flex-direction:column}
@media (min-width:1250px){
  .gr{grid-template-columns:1fr 1.05fr 1fr;gap:calc(var(--s)*3)}
  .gr-back,.gr-fwd{max-height:none}
}
.gr-n{padding-top:calc(var(--s)*.6);padding-bottom:calc(var(--s)*.6);
  margin-bottom:calc(var(--s)*.5)}
.gr-t{font-size:14px}
.gr-id{font-size:10px}
.gr-focus .gr-t{font-size:19px}
.gr-head{font-size:9.5px}

/* An input typeset inside an expression. The phantom behind it holds the
   space; the input lies over that space so it cannot push its neighbours
   apart, and it inherits KaTeX's font-size, which is how a slot in an
   exponent comes out at exponent size. */
.tslot{position:relative;display:inline-block}
.tslot .a-slot.in-math{position:absolute;inset:0;display:block}
.a-slot.in-math .a-in{width:100%;min-width:0;height:100%;font-size:inherit;
  padding:0;text-align:center;border:0;border-bottom:1.5px solid var(--accent-soft);
  border-radius:0;background:rgba(168,67,46,.05);line-height:1}
.a-slot.in-math .a-in:focus{background:var(--accent-tint);
  border-bottom-color:var(--accent);outline:none}

/* The matrix is square, so filling the column made it as tall as the column is
   wide and pushed the whole grid past the fold. It is sized to the viewport
   instead, which leaves width over — enough to stand the hover detail beside
   it rather than underneath, where a cell in the top row could not be read
   and pointed at simultaneously. */
@media (min-width:1180px){
  #tl{display:grid;align-items:start;gap:0 calc(var(--s)*5);
    grid-template-columns:min(calc(100vh - 13rem),820px,62%) minmax(0,1fr)}
  .mx-wrap{min-width:0}
  .mx-cap{position:sticky;top:calc(var(--s)*3);
    margin-top:calc(var(--s)*4);padding-left:calc(var(--s)*2);
    border-left:2px solid var(--accent);border-top:0;background:none;box-shadow:none}
}
@media (max-width:1179px){
  .mx-cap{position:sticky;bottom:0;z-index:5;background:var(--paper-lift);
    border-top:1px solid var(--line-soft);border-left:2px solid var(--accent);
    padding:calc(var(--s)*1.25) calc(var(--s)*2);
    box-shadow:0 -8px 20px -14px var(--shade)}
}
.mx-wrap{min-width:0}
.mx-list div{padding:3px 0;border-top:1px solid var(--line-soft)}
.mx-list div:first-child{border-top:0}

/* With nothing hovered the caption is an accent rule with no text beside it,
   which reads as a stray mark. */
.ch-cap:empty{min-height:0;border-left:0;padding-left:0}

/* ── syllabus information ─────────────────────────────────────────
   Label and value, the way a syllabus sets them out. */
.info{display:grid;grid-template-columns:minmax(7rem,11rem) minmax(0,1fr);
  gap:calc(var(--s)*1.5) calc(var(--s)*3.5);
  margin:calc(var(--s)*2) 0 calc(var(--s)*5);max-width:54rem}
.info dt{font:9.5px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:4px}
.info dd{font-size:15.5px;line-height:1.55}
.info dd i{font-style:italic}
.info dd code{font:13px var(--mono);background:var(--paper-lift);
  padding:1px 5px;border-radius:2px}
.info .sub{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;
  color:var(--ink-soft)}
.info a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--line)}
.info a:hover{border-bottom-color:var(--accent)}
@media (max-width:640px){
  .info{grid-template-columns:1fr;gap:calc(var(--s)*.5) 0}
  .info dd{margin-bottom:calc(var(--s)*1.75)}
}

.tables{display:flex;flex-wrap:wrap;gap:calc(var(--s)*7);
  margin:calc(var(--s)*2) 0 calc(var(--s)*2)}
.gt{border-collapse:collapse;min-width:15rem}
.gt caption{font:9.5px/1.9 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);text-align:left;
  padding-bottom:calc(var(--s)*.5)}
.gt td{padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.gt td+td{text-align:right;padding-left:calc(var(--s)*4);
  font:13px var(--mono);color:var(--ink-soft)}
.gt tr:last-child td{border-bottom:0}
.fine{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:44rem;
  margin-bottom:calc(var(--s)*5)}

/* Three destinations, so three columns once there is room for them; auto-fit
   alone leaves a 2 + 1 break at the widths this page is read at. */
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── using the width without losing the reading line ──────────────
   Two related blocks side by side, each one grid item carrying its own
   heading. Never make #doc itself a grid: its children are headings and
   content in alternation, and auto-placement then puts every heading in the
   opposite column from what it names. */
.col2{display:grid;grid-template-columns:repeat(auto-fit,minmax(27rem,1fr));
  gap:0 calc(var(--s)*9);align-items:start}
.col2 > section{min-width:0}
.col2 h2{margin-top:0}
.col2 .info{max-width:none}
@media (max-width:900px){ .col2{gap:0} }

/* The term is 16 short rows; in one tall column it wastes the whole right of
   the screen and forces a scroll to see a term that fits on a screen. */
#sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(23rem,1fr));
  gap:0 calc(var(--s)*7);align-items:start}
#sched .wkrow{display:block;min-width:0}
#sched .wkh{min-width:0;margin-bottom:calc(var(--s)*.75)}
#sched .wkb{gap:calc(var(--s)*.5) calc(var(--s)*2)}

/* ── type, sized for the screen it is read on ─────────────────────
   Set once here rather than per-component, so the page scales as a whole
   instead of drifting back to footnote size a rule at a time. */
@media (min-width:1100px){
  body{font-size:18.5px}
  h1{font-size:38px}
  h1 .num{font-size:15px}
  h2{font-size:12.5px;letter-spacing:.18em;
    margin:calc(var(--s)*6) 0 calc(var(--s)*2)}
  .info{grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);
    gap:calc(var(--s)*2) calc(var(--s)*4)}
  .info dt{font-size:11px}
  .info dd{font-size:17px;line-height:1.55}
  .info .sub{font-size:15px}
  .info dd code{font-size:14.5px}
  .gt caption{font-size:11px}
  .gt td{font-size:17px;padding:7px 0}
  .gt td+td{font-size:15px}
  .fine{font-size:15px;max-width:56ch}
  .card .ct{font-size:19px}
  .card .cd{font-size:15px}
  .card .cm{font-size:11px}
  .wkh b{font-size:11.5px}
  .wkh span{font-size:11px}
  .wks{font-size:15.5px}
  .wks .n{font-size:11.5px;min-width:2.6rem}
  .wks i{font-size:10.5px}
  .exam{font-size:11px}
  #foot{font-size:15px}
}
@media (min-width:1500px){
  body{font-size:19.5px}
  h1{font-size:44px}
  .info dd{font-size:18px}
  .gt td{font-size:18px}
  .wks{font-size:16.5px}
}

/* the services list is label-and-value too, so it splits the same way */
.info.wide{max-width:none}
@media (min-width:1200px){
  .info.wide{grid-template-columns:minmax(9rem,13rem) minmax(0,1fr)
                                   minmax(9rem,13rem) minmax(0,1fr);
    column-gap:calc(var(--s)*4)}
}

/* ── the objective's neighbourhood ───────────────────────────────── */
.gr-count{float:right;font:9.5px/1.9 var(--mono);letter-spacing:.1em;
  color:var(--ink-faint);text-transform:none}
.gr-grp{margin-bottom:calc(var(--s)*2)}
.gr-sec{font:9.5px/1.9 var(--mono);letter-spacing:.12em;color:var(--ink-faint);
  padding-bottom:2px;margin-bottom:calc(var(--s)*.5);
  border-bottom:1px solid var(--line-soft)}

/* A required relation is load-bearing and a preparatory one is not, so the
   mark is filled or hollow rather than two colours. */
.gr-n{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr);
  gap:0 calc(var(--s)*1.25);align-items:baseline;width:100%;text-align:left}
.gr-mark{width:7px;height:7px;border-radius:50%;align-self:center;
  border:1.5px solid var(--ink-faint);background:none}
.gr-n.hard .gr-mark{background:var(--accent);border-color:var(--accent)}
.gr-n .gr-t{grid-column:2}
.gr-n .gr-id{grid-column:2;display:block}
.gr-n:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.gr-filter{margin-top:calc(var(--s)*2.5);font:9.5px var(--mono);
  letter-spacing:.14em;background:none;border:1px solid var(--line);
  color:var(--ink-soft);padding:7px 12px;border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.gr-filter:hover{color:var(--accent);border-color:var(--accent)}
.gr-filter[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.gr.hard-only .gr-n:not(.hard){display:none}
.gr.hard-only .gr-grp:not(:has(.hard)){display:none}

/* an empty side should not hold a third of the screen open */
@media (min-width:1250px){
  .gr.none-back{grid-template-columns:minmax(0,.55fr) minmax(0,1fr) minmax(0,1.5fr)}
  .gr.none-fwd{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.55fr)}
}

/* ── what a section asks you to know ─────────────────────────────
   Name, statement, and where it earns one, the reason it is worth saying.
   Sits under the objectives, in the same column, so the practice beside it
   is read against a list of what the practice is for. */
h2 .kn-c{float:right;font:9.5px/1.9 var(--mono);letter-spacing:.1em;
  color:var(--ink-faint)}
#know{margin-bottom:calc(var(--s)*4)}
.kn-obj{margin-bottom:calc(var(--s)*3)}
.kn-h{display:flex;gap:calc(var(--s)*1.25);align-items:baseline;
  padding-bottom:calc(var(--s)*.75);margin-bottom:calc(var(--s)*1.25);
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.kn-i{font:9.5px var(--mono);letter-spacing:.1em;color:var(--ink-faint);
  min-width:1.6rem}
.kn-f{padding:calc(var(--s)*.75) 0 calc(var(--s)*.75) calc(var(--s)*2);
  border-left:1px solid var(--line-soft);margin-bottom:calc(var(--s)*.75)}
.kn-f:hover{border-left-color:var(--accent-soft)}
.kn-n{font-size:13.5px;color:var(--ink);margin-bottom:2px}
.kn-s{font-size:15px;color:var(--ink-soft);line-height:1.6}
.kn-s .katex{font-size:1.04em}
.kn-note{margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink-faint)}
@media (min-width:1100px){
  .kn-h{font-size:15.5px}
  .kn-n{font-size:14.5px}
  .kn-s{font-size:16px}
  .kn-note{font-size:14px}
}

/* foldable, because a student who has read it wants it out of the way */
#know{margin-bottom:calc(var(--s)*4)}
#know > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:calc(var(--s));font:11px/1.6 var(--mono);letter-spacing:.2em;
  color:var(--ink-faint);margin:calc(var(--s)*5) 0 calc(var(--s)*2);
  padding-bottom:calc(var(--s)*.75);border-bottom:1px solid var(--line)}
#know > summary::-webkit-details-marker{display:none}
#know > summary::before{content:"–";font-family:var(--mono);color:var(--ink-faint)}
#know:not([open]) > summary::before{content:"+"}
#know > summary:hover{color:var(--accent)}
#know .kn-c{margin-left:auto;letter-spacing:.1em}
#know .kn-obj:first-of-type{margin-top:calc(var(--s))}

/* ══ themes ══════════════════════════════════════════════════════
   Every text-carrying pair in each palette clears WCAG AA: 4.5:1 for the
   small mono labels and statements, 7:1 for body text. The previous
   --ink-faint was 2.30:1 against paper and carried every label on the site,
   which is why the type read as faint rather than quiet. */
:root[data-theme="paper"]{
  --paper:#f4f0e6; --paper-lift:#faf7f0; --deep:#e7e1d3; --rail-paper:#efe9db;
  --ink:#231f1a; --ink-soft:#5c554a; --ink-faint:#6f685b;
  --line:rgba(35,31,26,.16); --line-soft:rgba(35,31,26,.09);
  --accent:#9c3b27; --accent-soft:#8a5a34;
  --accent-tint:rgba(156,59,39,.10);
  --glow:#faf7f0; --shade:rgba(35,31,26,.30);
}
:root[data-theme="slate"]{
  --paper:#eef0f3; --paper-lift:#f6f7f9; --deep:#dde1e7; --rail-paper:#e5e8ec;
  --ink:#1b2027; --ink-soft:#4d5661; --ink-faint:#606975;
  --line:rgba(27,32,39,.16); --line-soft:rgba(27,32,39,.09);
  --accent:#2f5d8c; --accent-soft:#5a5f8a;
  --accent-tint:rgba(47,93,140,.10);
  --glow:#f6f7f9; --shade:rgba(27,32,39,.30);
}
:root[data-theme="sage"]{
  --paper:#edf0ea; --paper-lift:#f5f7f2; --deep:#dbe0d5; --rail-paper:#e4e8df;
  --ink:#1d2320; --ink-soft:#4e5851; --ink-faint:#606a62;
  --line:rgba(29,35,32,.16); --line-soft:rgba(29,35,32,.09);
  --accent:#7a3b32; --accent-soft:#4f6b52;
  --accent-tint:rgba(122,59,50,.10);
  --glow:#f5f7f2; --shade:rgba(29,35,32,.30);
}
:root, :root[data-theme="ink"]{
  --paper:#1b1e22; --paper-lift:#23272c; --deep:#141619; --rail-paper:#171a1e;
  --ink:#e8e6e1; --ink-soft:#b3b0a9; --ink-faint:#948f86;
  --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09);
  --accent:#d98a6a; --accent-soft:#c8a678;
  --accent-tint:rgba(217,138,106,.16);
  --glow:#23272c; --shade:rgba(0,0,0,.5);
}

/* the ground wash follows the theme instead of a baked-in cream */
body::before{background:radial-gradient(120% 90% at 50% 0%,
  var(--glow) 0%,var(--paper) 42%,var(--deep) 100%)}

/* ── theme switcher ─────────────────────────────────────────────── */
#theme{position:fixed;left:0;bottom:0;width:var(--rail);z-index:40;
  display:flex;gap:4px;padding:calc(var(--s)*1.25) calc(var(--s)*2);
  background:var(--rail-paper);border-top:1px solid var(--line-soft)}
#theme button{width:19px;height:19px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);padding:0;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
#theme button:hover{transform:scale(1.14)}
#theme button[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent)}
#theme button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:820px){ #theme{position:static;width:auto} }

/* ── the objective view, at reading size ─────────────────────────
   The columns are wider than they were, so the type that names an objective
   no longer has to be small enough to fit a third of a squeezed page. */
.gr-t{font-size:15px;line-height:1.5}
.gr-id{font-size:11px;letter-spacing:.08em}
.gr-head{font-size:11px;letter-spacing:.16em}
.gr-count{font-size:11px}
.gr-sec{font-size:11px;letter-spacing:.1em}
.gr-focus .gr-t{font-size:21px;line-height:1.32}
.gr-focus .gr-id{font-size:12px}
.gr-meta{font-size:11px}
.gr-none{font-size:14px}
.gr-filter{font-size:11px;padding:8px 13px}
.gr-why{font-size:15px;line-height:1.55}
.gr-n{padding-top:calc(var(--s)*.9);padding-bottom:calc(var(--s)*.9)}
.gr-mark{width:8px;height:8px}

@media (min-width:1250px){
  .gr-t{font-size:16.5px}
  .gr-focus .gr-t{font-size:25px}
  .gr-id{font-size:11.5px}
  .gr-head,.gr-count,.gr-sec{font-size:11.5px}
  .gr-why{font-size:16px}
  .gr-none{font-size:15px}
}
@media (min-width:1600px){
  .gr-t{font-size:17.5px}
  .gr-focus .gr-t{font-size:28px}
}

/* ── how two objectives are joined ───────────────────────────────
   The middle column stood empty below the focused objective while the list
   beside it did all the work. Selecting a neighbour puts the join there: a
   short worked example in which the focused objective is visibly used inside
   the later one. */
.gr-ex{margin-top:calc(var(--s)*3);padding:calc(var(--s)*2.5) calc(var(--s)*2.5);
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:3px;background:var(--paper-lift)}
.ex-h{display:flex;align-items:baseline;gap:calc(var(--s));flex-wrap:wrap;
  font:11px/1.7 var(--mono);letter-spacing:.1em;color:var(--ink-faint)}
.ex-a,.ex-b{color:var(--accent)}
.ex-arrow{color:var(--ink-faint)}
.ex-type{margin-left:auto;letter-spacing:.14em}
.ex-t{font-size:16px;line-height:1.4;color:var(--ink);
  margin:calc(var(--s)*.75) 0 calc(var(--s)*2)}
.ex-p{font-size:16px;line-height:1.6;color:var(--ink);
  padding-bottom:calc(var(--s)*1.5);margin-bottom:calc(var(--s)*1.5);
  border-bottom:1px solid var(--line-soft)}
.ex-steps{list-style:none;counter-reset:st;margin:0;padding:0}
.ex-steps li{counter-increment:st;position:relative;
  padding:calc(var(--s)*.9) 0 calc(var(--s)*.9) calc(var(--s)*3.25)}
.ex-steps li::before{content:counter(st);position:absolute;left:0;top:calc(var(--s)*1.1);
  font:10px var(--mono);color:var(--ink-faint)}
.ex-tex{display:block;font-size:17px}
.ex-say{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.ex-point{margin-top:calc(var(--s)*1.5);padding-top:calc(var(--s)*1.5);
  border-top:1px solid var(--line-soft);font-size:14.5px;line-height:1.6;
  color:var(--ink-soft)}
.ex-none{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.ex-acts{display:flex;gap:calc(var(--s));flex-wrap:wrap;margin-top:calc(var(--s)*2)}
.ex-acts button{font:10px var(--mono);letter-spacing:.12em;background:none;
  border:1px solid var(--line);color:var(--ink-soft);padding:7px 11px;
  border-radius:2px;cursor:pointer;transition:color .14s var(--ease),border-color .14s var(--ease)}
.ex-acts button:hover{color:var(--accent);border-color:var(--accent)}

/* the neighbour whose join is on show */
.gr-n.sel{background:var(--accent-tint)}
.gr-n.sel .gr-t{color:var(--ink)}
.gr-n.sel .gr-id{color:var(--accent)}

/* ── the practice sheet ──────────────────────────────────────────
   Over the page, not instead of it: you are checking what the problems look
   like without losing your place in the graph. */
.gr-practice{margin-top:calc(var(--s)*1.5);font:11px var(--mono);
  letter-spacing:.12em;background:none;border:1px solid var(--line);
  color:var(--ink-soft);padding:8px 13px;border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.gr-practice:hover{color:var(--accent);border-color:var(--accent)}

.sheet-back{position:fixed;inset:0;z-index:80;display:flex;
  align-items:center;justify-content:center;padding:calc(var(--s)*4);
  background:color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter:blur(7px) saturate(.85);
  -webkit-backdrop-filter:blur(7px) saturate(.85);
  animation:sheet-in .16s var(--ease)}
@supports not (backdrop-filter: blur(1px)){
  .sheet-back{background:color-mix(in srgb, var(--paper) 88%, transparent)}
}
@keyframes sheet-in{from{opacity:0}to{opacity:1}}

.sheet{width:min(56rem,100%);max-height:100%;overflow-y:auto;
  background:var(--paper-lift);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 30px 70px -30px var(--shade),0 2px 8px -4px var(--shade);
  padding:calc(var(--s)*3.5) calc(var(--s)*4) calc(var(--s)*4)}
.sheet-h{display:flex;align-items:flex-start;gap:calc(var(--s)*2);
  padding-bottom:calc(var(--s)*1.5);border-bottom:1px solid var(--line)}
.sheet-id{display:block;font:11px/1.7 var(--mono);letter-spacing:.12em;
  color:var(--accent)}
.sheet-t{display:block;font-size:20px;line-height:1.32;color:var(--ink);
  margin-top:2px}
.sheet-x{margin-left:auto;flex:none;font:10px var(--mono);letter-spacing:.14em;
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  padding:7px 11px;border-radius:2px;cursor:pointer}
.sheet-x:hover{color:var(--accent);border-color:var(--accent)}
.sheet-note{margin-top:calc(var(--s)*1.25);font:10px var(--mono);
  letter-spacing:.14em;color:var(--ink-faint)}

.sheet-q{display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:0 calc(var(--s)*1.5);padding:calc(var(--s)*2.5) 0;
  border-bottom:1px solid var(--line-soft)}
.sheet-q:last-child{border-bottom:0;padding-bottom:0}
.sheet-n{font:10px/2 var(--mono);color:var(--ink-faint)}
.sheet-lv{display:block;margin-top:3px;font-size:8.5px;letter-spacing:.1em;
  color:var(--accent-soft)}
.sheet-qb{min-width:0;font-size:16px;line-height:1.6}
.sheet-fail{font-size:14px;color:var(--accent)}

/* the answer keeps its shape so the question reads honestly, and does nothing */
.sheet-qb .inert{opacity:.72;pointer-events:none}
.sheet-qb .inert input,.sheet-qb .inert select{cursor:default}

/* ══ reflection prototype ═══════════════════════════════════════ */
.rf-lede{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:56ch;
  margin-bottom:calc(var(--s)*5)}
.rf-card{position:relative;border:1px solid var(--line);border-radius:3px;
  background:var(--paper-lift);padding:calc(var(--s)*3) calc(var(--s)*3.5);
  margin-bottom:calc(var(--s)*3);max-width:62rem}
.rf-num{position:absolute;left:calc(var(--s)*-4);top:calc(var(--s)*3);
  font:10px var(--mono);color:var(--ink-faint)}
@media (max-width:900px){.rf-num{position:static;margin-bottom:4px}}
.rf-tag{display:flex;gap:calc(var(--s)*1.5);align-items:baseline;flex-wrap:wrap;
  font:9.5px/1.8 var(--mono);letter-spacing:.14em;color:var(--ink-faint);
  padding-bottom:calc(var(--s)*1.25);border-bottom:1px solid var(--line-soft);
  margin-bottom:calc(var(--s)*2)}
.rf-kind{color:var(--accent)}
.rf-obj{margin-left:auto}
.rf-stem{font-size:17px;line-height:1.6;margin-bottom:calc(var(--s)*1.5)}
.rf-ask{font-size:16px;color:var(--ink);margin:calc(var(--s)*1.5) 0}
.rf-note{font-size:13.5px;color:var(--ink-soft);margin-bottom:calc(var(--s)*1.5)}

/* the claim, and the gate it opens */
.rf-rate{margin:calc(var(--s)*1.5) 0 calc(var(--s)*2)}
.rf-rate-q{font:9.5px var(--mono);letter-spacing:.14em;color:var(--ink-faint);
  margin-bottom:calc(var(--s))}
.rf-rate-row{display:flex;gap:calc(var(--s));flex-wrap:wrap}
.rf-claim{font-size:13px;background:none;border:1px solid var(--line);
  color:var(--ink-soft);padding:7px 12px;border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.rf-claim:hover{color:var(--accent);border-color:var(--accent-soft)}
.rf-claim.on{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}
.rf-veil{font:9.5px var(--mono);letter-spacing:.12em;color:var(--ink-faint);
  padding:calc(var(--s)*1.5) 0}
.rf-gate .rf-opts,.rf-gate .rf-grid-t{display:none}
.rf-gate.open .rf-opts,.rf-gate.open .rf-grid-t{display:block}
.rf-gate.open .rf-grid-t{display:table}
.rf-gate.open .rf-veil{display:none}

.rf-opts{margin-top:calc(var(--s))}
.rf-opt{display:flex;gap:calc(var(--s)*1.25);align-items:baseline;
  padding:8px 10px;border:1px solid transparent;border-radius:2px;cursor:pointer}
.rf-opt:hover{background:var(--paper)}
.rf-opt:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.rf-opt input{accent-color:var(--accent)}
.rf-k{font:10px var(--mono);color:var(--ink-faint);min-width:14px}
.rf-v{font-size:16px}

.rf-said{margin-top:calc(var(--s)*2);padding:calc(var(--s)*1.5) calc(var(--s)*2);
  border-left:2px solid var(--accent);background:var(--paper);
  font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.rf-said.ok{border-left-color:var(--accent-soft)}
.rf-said div+div{margin-top:6px}
.rf-point{margin-top:calc(var(--s));font-size:14px;color:var(--ink-faint);
  line-height:1.6}

/* method grid */
.rf-grid-t{border-collapse:collapse;margin-top:calc(var(--s))}
.rf-grid-t th{font:9.5px var(--mono);letter-spacing:.12em;color:var(--ink-faint);
  font-weight:400;padding:0 calc(var(--s)*2) calc(var(--s)) ;text-align:center}
.rf-grid-t td{padding:9px calc(var(--s)*2);text-align:center;
  border-top:1px solid var(--line-soft)}
.rf-rowq{text-align:left!important;font-size:16px}
.rf-grid-t input{accent-color:var(--accent)}

/* figures */
.rf-fig{margin:calc(var(--s)*2) 0}
.rf-plot{display:block;width:100%;max-width:34rem;height:auto}
.rf-grid{stroke:var(--line-soft);stroke-width:.5}
.rf-axis{stroke:var(--ink-faint);stroke-width:1}
.rf-curve{fill:none;stroke:var(--accent);stroke-width:2}
.rf-root{fill:var(--accent)}
.rf-rootlab{fill:var(--ink-soft);font:10px var(--mono);text-anchor:middle}
.rf-ctl{display:flex;align-items:center;gap:calc(var(--s)*1.5);
  margin-top:calc(var(--s))}
.rf-ctl-l{font:11px var(--mono);color:var(--ink-faint);min-width:1.2rem}
.rf-ctl input[type=range]{flex:1;max-width:22rem;accent-color:var(--accent)}
.rf-ctl-v{font:12px var(--mono);color:var(--ink-soft);min-width:8rem}
.rf-disc{margin-left:calc(var(--s));color:var(--ink-faint)}
.rf-form{margin-top:calc(var(--s))}
.rf-eq{margin-top:calc(var(--s)*1.5);font-size:18px}
.rf-fac{margin-left:calc(var(--s));color:var(--accent)}
.rf-after{margin-top:calc(var(--s)*2);padding-top:calc(var(--s)*2);
  border-top:1px solid var(--line-soft)}

/* tell, contrast, ladder */
.rf-tell-t{font:9.5px var(--mono);letter-spacing:.16em;color:var(--accent);
  margin-bottom:calc(var(--s))}
.rf-tell-b{font-size:17px;line-height:1.65}
.rf-contrast{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:calc(var(--s)*3);margin:calc(var(--s)*1.5) 0}
.rf-side{padding-left:calc(var(--s)*2);border-left:2px solid var(--line)}
.rf-side-x{font-size:24px}
.rf-side-v{font-size:18px;color:var(--accent);margin-top:6px}
.rf-side-l{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.rf-part{display:flex;gap:calc(var(--s)*1.5);margin-bottom:calc(var(--s)*2)}
.rf-part-l{font:11px var(--mono);color:var(--ink-faint);padding-top:3px}
.rf-part-b{flex:1;font-size:16px}
.rf-slots{display:flex;gap:calc(var(--s));align-items:center;margin-top:calc(var(--s))}
.rf-in{font:14px var(--mono);color:var(--ink);background:var(--paper);
  border:0;border-bottom:1px solid var(--ink-faint);padding:4px 6px}
.rf-in:focus{outline:0;border-bottom-color:var(--accent)}
.rf-reveal{font:9.5px var(--mono);letter-spacing:.12em;background:none;
  border:1px solid var(--line);color:var(--ink-soft);padding:5px 9px;
  border-radius:2px;cursor:pointer}
.rf-reveal:hover{color:var(--accent);border-color:var(--accent)}
.rf-ans{font:14px var(--mono);color:var(--accent)}

/* the 2x2 */
.rf-tally{margin-top:calc(var(--s)*6);padding-top:calc(var(--s)*3);
  border-top:1px solid var(--line);max-width:62rem}
.rf-2x2{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:calc(var(--s)*2);margin-top:calc(var(--s)*2)}
.rf-cell{padding:calc(var(--s)*2);border:1px solid var(--line);border-radius:3px;
  background:var(--paper-lift)}
.rf-cell.over{border-color:var(--accent);background:var(--accent-tint)}
.rf-cell-n{display:block;font:28px/1 var(--mono);color:var(--ink)}
.rf-cell.over .rf-cell-n{color:var(--accent)}
.rf-cell-l{display:block;font:9.5px var(--mono);letter-spacing:.14em;
  color:var(--ink-faint);margin-top:6px}
.rf-cell-f{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:8px;
  line-height:1.5}
.rf-tally-note{margin-top:calc(var(--s)*2);font:10px var(--mono);
  letter-spacing:.1em;color:var(--ink-faint)}

/* ══ reflections ═════════════════════════════════════════════════════
   A session, not a page of questions: cards accumulate downward so the
   student can see the way they came. Colour stays out of it except on the
   two verdicts and the report, because everything here is already
   consequential enough without being decorated.                        */
.rx-stage{margin-top:calc(var(--s)*2)}
.rx-card{border:1px solid var(--line-soft);border-left:2px solid var(--line);
  border-radius:3px;background:var(--paper-lift);
  padding:calc(var(--s)*2.25) calc(var(--s)*2.5);
  margin-bottom:calc(var(--s)*2)}
.rx-card.rx-anchor{border-left-color:var(--accent)}
.rx-card.rx-report{border-left-color:var(--accent);background:var(--paper)}
.rx-card.rx-note,.rx-card.rx-practice{background:var(--paper)}

.rx-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--s)*2);margin-bottom:calc(var(--s)*1.5)}
.rx-tag{font:9px/1 var(--mono);letter-spacing:.18em;color:var(--accent)}
.rx-src{font:9px/1 var(--mono);letter-spacing:.14em;color:var(--ink-faint)}
.rx-lede{font-size:13.5px;color:var(--ink-soft);margin-bottom:calc(var(--s)*1.5)}

/* the claim, committed before the question can be answered */
.rx-claim{margin-bottom:calc(var(--s)*2)}
.rx-claim-q{font-size:12.5px;color:var(--ink-soft);margin-bottom:calc(var(--s))}
.rx-claim-row{display:flex;flex-wrap:wrap;gap:6px}
.rx-claim-b{font:11px/1.3 var(--sans);text-align:left;background:none;
  border:1px solid var(--line);color:var(--ink-soft);padding:7px 11px;
  border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.rx-claim-b:hover{color:var(--ink);border-color:var(--ink-faint)}
.rx-claim.done .rx-claim-b{cursor:default;opacity:.4}
.rx-claim.done .rx-claim-b.on{opacity:1;color:var(--accent);
  border-color:var(--accent-soft)}

.rx-expr{font-size:19px;margin:calc(var(--s)*1.5) 0;overflow-x:auto}
.rx-ask{font-size:14px;margin-bottom:calc(var(--s)*1.5)}

.rx-opts{display:flex;flex-direction:column;gap:6px}
.rx-opt{display:flex;align-items:center;gap:calc(var(--s)*1.5);text-align:left;
  background:none;border:1px solid var(--line);border-radius:2px;
  padding:9px calc(var(--s)*1.5);cursor:pointer;color:var(--ink);
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.rx-opt:hover{border-color:var(--ink-faint)}
.rx-oi{font:9px/1 var(--mono);color:var(--ink-faint);flex:none;width:10px}
.rx-opts.done .rx-opt{cursor:default}
.rx-opts.done .rx-opt:hover{border-color:var(--line)}
.rx-opts.done .rx-opt.picked{border-color:var(--accent)}
.rx-opts.done .rx-opt.key{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rx-opts.done .rx-opt.key .rx-oi{color:var(--accent)}

.rx-entry{display:flex;align-items:center;gap:calc(var(--s));flex-wrap:wrap}
.rx-in{font:15px var(--mono);background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-bottom-color:var(--ink-faint);
  border-radius:2px;padding:7px 10px;width:150px;
  transition:border-color .14s var(--ease)}
.rx-in:focus{outline:none;border-color:var(--accent)}
.rx-in:disabled{opacity:.7}
.rx-go{font:9px/1 var(--mono);letter-spacing:.16em;background:none;
  border:1px solid var(--line);color:var(--ink-soft);padding:8px 13px;
  border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.rx-go:hover:not(:disabled){color:var(--accent);border-color:var(--accent-soft)}
.rx-go:disabled{opacity:.4;cursor:default}
.rx-hint{font-size:11.5px;color:var(--ink-faint)}

.rx-verdict{font-size:13px;line-height:1.6;margin-top:calc(var(--s)*1.75);
  padding-left:calc(var(--s)*1.5);border-left:2px solid var(--line)}
.rx-verdict.ok{border-left-color:var(--accent)}
.rx-verdict.no{border-left-color:var(--ink-faint);color:var(--ink-soft)}

.rx-note{font-size:13.5px;line-height:1.65;color:var(--ink)}
.rx-note.rx-quiet{font-size:12px;color:var(--ink-faint);
  padding-bottom:calc(var(--s)*1.5);margin-bottom:calc(var(--s)*.5);
  border-bottom:1px solid var(--line-soft)}

.rx-next{margin-top:calc(var(--s)*2);font:9px/1 var(--mono);letter-spacing:.16em;
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  padding:9px 15px;border-radius:2px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.rx-next:hover:not(:disabled){color:var(--accent);border-color:var(--accent-soft)}
.rx-next.spent{opacity:.35;cursor:default}

/* the report: the anchor again, annotated. No score anywhere. */
.rx-anchor-again{font-size:20px;margin:calc(var(--s)*1.5) 0 calc(var(--s)*2.5);
  overflow-x:auto}
.rx-rows{display:flex;flex-direction:column;gap:1px}
.rx-r{display:grid;grid-template-columns:1fr 1fr auto;gap:calc(var(--s)*1.5);
  align-items:baseline;padding:9px 0;border-top:1px solid var(--line-soft)}
.rx-r-n{font-size:13px;color:var(--ink)}
.rx-r-w{font-size:12px;color:var(--ink-faint)}
.rx-r-v{font:9px/1 var(--mono);letter-spacing:.14em;color:var(--ink-faint);
  white-space:nowrap}
.rx-r.rx-held .rx-r-v{color:var(--accent)}
.rx-r.rx-recovered .rx-r-v{color:var(--ink-soft)}
.rx-r.rx-open .rx-r-v{color:var(--ink);border-bottom:1px solid var(--accent)}
.rx-cal{margin-top:calc(var(--s)*2.5);padding-left:calc(var(--s)*1.5);
  border-left:2px solid var(--accent);font-size:13.5px;line-height:1.65}
.rx-fwd{margin-top:calc(var(--s)*2);font-size:12px;color:var(--ink-faint);
  line-height:1.6}

button.card{font:inherit;text-align:left;width:100%}
@media(max-width:700px){
  .rx-r{grid-template-columns:1fr auto}
  .rx-r-w{display:none}
}

/* ══ reflection: new node kinds ══════════════════════════════════════ */
.rx-card.rx-contrast,.rx-card.rx-fade{background:var(--paper)}
.rx-card.rx-exit{border-left-color:var(--ink-faint)}
.rx-shown{font-size:17px;margin:calc(var(--s)) 0 calc(var(--s)*1.5);
  padding-left:calc(var(--s)*1.5);border-left:2px solid var(--line);
  color:var(--ink-soft);overflow-x:auto}
.rx-pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--s)*2.5);
  margin:calc(var(--s)*2) 0}
.rx-side{padding:calc(var(--s)*1.5);border:1px solid var(--line-soft);
  border-radius:3px;text-align:center}
.rx-side-x{font-size:20px}
.rx-side-v{font-size:16px;color:var(--accent);margin-top:calc(var(--s)*.5)}
.rx-side-l{font-size:11.5px;color:var(--ink-faint);margin-top:calc(var(--s));
  line-height:1.5}
.rx-carry{margin-top:calc(var(--s)*1.5);font:10px/1.6 var(--mono);
  letter-spacing:.1em;color:var(--accent);padding-left:calc(var(--s)*1.5);
  border-left:2px solid var(--accent-soft)}
.rx-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:calc(var(--s)*2);font:10px/1.7 var(--mono);color:var(--ink-faint)}
.rx-trail-n{border:1px solid var(--line);border-radius:2px;padding:3px 7px}
.rx-trail-a{color:var(--line)}
@media(max-width:640px){.rx-pair{grid-template-columns:1fr}}

/* ══ instructor mode: the graph ══════════════════════════════════════
   You cannot hand-author a branching world you cannot see. Columns are
   distance from the anchor, so depth reads left to right.              */
.gv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--s)*2);
  padding:calc(var(--s)*1.5) 0;border-bottom:1px solid var(--line);
  margin-bottom:calc(var(--s)*2)}
.gv-stat{font:10px/1 var(--mono);letter-spacing:.14em;color:var(--ink-faint)}
.gv-stat b{color:var(--ink);font-size:13px;letter-spacing:0}
.gv-stat.bad b,.gv-bad{color:var(--accent)}
.gv-legend{margin-left:auto;display:flex;gap:6px}
.gv-key{font:9px/1 var(--mono);letter-spacing:.12em;padding:4px 8px;
  border-radius:2px;border:1px solid var(--line);color:var(--ink-faint)}
.gv-grid{display:flex;gap:calc(var(--s)*2);overflow-x:auto;
  padding-bottom:calc(var(--s)*2);align-items:flex-start}
.gv-col{flex:0 0 235px;display:flex;flex-direction:column;gap:calc(var(--s))}
.gv-col-h{font:9px/1 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  padding-bottom:calc(var(--s));border-bottom:1px solid var(--line-soft)}
.gv-node{border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:3px;padding:calc(var(--s)*1.25);cursor:pointer;
  background:var(--paper-lift);
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.gv-node:hover{border-color:var(--ink-faint)}
.gv-node.on{border-color:var(--accent);border-left-color:var(--accent)}
.gv-n-k{font:8.5px/1 var(--mono);letter-spacing:.16em;color:var(--accent)}
.gv-n-t{font-size:12.5px;color:var(--ink);margin:5px 0 3px;line-height:1.4}
.gv-n-i{font:9px/1.4 var(--mono);color:var(--ink-faint)}
.gv-n-e{display:flex;flex-direction:column;gap:2px;margin-top:calc(var(--s))}
.gv-e{font:9px/1.5 var(--mono);color:var(--ink-faint)}
.gv-e i{color:var(--accent);font-style:normal}
.gv-e-option{color:var(--ink-soft)}
.gv-e-wrong{color:var(--ink-faint)}
/* facet identity by border only — colour stays out of the content */
.gv-f-rad{border-left-color:#5b7c99}
.gv-f-bar{border-left-color:#a8432e}
.gv-f-prec{border-left-color:#7a8b5a}
.gv-f-sign{border-left-color:#9a6b3f}
.gv-k-exit{opacity:.72}

/* ══ the network ═════════════════════════════════════════════════════
   The same graph drawn as a graph. Edge WEIGHT carries kind, not hue:
   solid = an option, accented = a right answer, dashed = a wrong answer,
   dotted = a specific wrong value that has its own destination.       */
.nw-wrap{overflow:auto;border:1px solid var(--line-soft);border-radius:3px;
  background:var(--paper);padding:calc(var(--s))}
svg.nw{display:block}
.nw-e{stroke:var(--line);stroke-width:1.1px;opacity:.85}
.nw-e-right{stroke:var(--accent-soft)}
.nw-e-wrong{stroke-dasharray:4 3}
.nw-e-route{stroke-dasharray:1.5 3;stroke:var(--ink-faint)}
.nw-back{stroke:var(--accent-soft);stroke-dasharray:2 4;opacity:.5}
.nw-el{font:9.5px var(--mono);fill:var(--ink-faint);opacity:.8}
svg.nw.focused .nw-e{opacity:.13}
svg.nw.focused .nw-e.on{opacity:1;stroke-width:2px;stroke:var(--accent)}
svg.nw.focused .nw-el{opacity:.18}

.nw-n rect{fill:var(--paper-lift);stroke:var(--line);stroke-width:1px}
.nw-n text{font:11px var(--sans);fill:var(--ink-soft)}
.nw-n{cursor:pointer}
.nw-n .nw-tab{stroke:none}
.nw-f-rad .nw-tab{fill:#5b7c99}
.nw-f-bar .nw-tab{fill:#a8432e}
.nw-f-prec .nw-tab{fill:#7a8b5a}
.nw-f-sign .nw-tab{fill:#9a6b3f}
.nw-f-none .nw-tab{fill:var(--ink-faint)}
.nw-k-exit rect{stroke-dasharray:3 2}
.nw-term rect{fill:none;stroke:var(--accent-soft);stroke-dasharray:3 2}
.nw-term text{fill:var(--accent)}
.nw-src rect{fill:none;stroke:var(--accent);stroke-width:1.4px}
.nw-src text{font:11px var(--mono);fill:var(--accent)}
svg.nw.focused .nw-n rect{opacity:.4}
svg.nw.focused .nw-n.on rect{opacity:1;stroke:var(--accent)}
svg.nw.focused .nw-n text{opacity:.4}
svg.nw.focused .nw-n.on text{opacity:1;fill:var(--ink)}

/* ══ bigger type ═════════════════════════════════════════════════════ */
.gv-n-k{font-size:9.5px}
.gv-n-t{font-size:14px}
.gv-n-i{font-size:10px}
.gv-e{font-size:10.5px;line-height:1.6}
.gv-stat{font-size:11px}
.gv-stat b{font-size:14px}
.gv-col-h{font-size:10px}
.gv-key{font-size:10px}
.gv-col{flex:0 0 258px}

.rx-lede{font-size:15px}
.rx-ask{font-size:15.5px;line-height:1.55}
.rx-note{font-size:15px;line-height:1.7}
.rx-note.rx-quiet{font-size:13px}
.rx-verdict{font-size:14.5px;line-height:1.65}
.rx-claim-q{font-size:13.5px}
.rx-claim-b{font-size:12.5px}
.rx-opt{padding:11px calc(var(--s)*1.5);font-size:14.5px}
.rx-oi{font-size:10px;width:12px}
.rx-hint{font-size:12.5px}
.rx-side-l{font-size:12.5px}
.rx-side-x{font-size:21px}
.rx-side-v{font-size:17px}
.rx-tag,.rx-src{font-size:9.5px}
.rx-expr{font-size:20px}
.rx-in{font-size:16px;width:170px}
.rx-trail{font-size:10.5px}
.rx-carry{font-size:11px}

/* ══ node inspector ══════════════════════════════════════════════════
   Clicking a node in either instructor view shows the card as a student
   meets it, and where every answer sends them. A drawer rather than a
   panel below, so the graph stays in view while you read.            */
#inspect{position:fixed;right:0;top:0;bottom:0;width:420px;z-index:40;
  background:var(--paper);border-left:1px solid var(--line);
  box-shadow:-14px 0 34px rgba(0,0,0,.22);
  overflow-y:auto;padding:calc(var(--s)*3) calc(var(--s)*3) calc(var(--s)*6)}
#inspect[hidden]{display:none}
.ins-x-btn{position:absolute;top:calc(var(--s)*1.5);right:calc(var(--s)*2);
  font:9.5px/1 var(--mono);letter-spacing:.16em;background:none;
  border:1px solid var(--line);color:var(--ink-faint);padding:6px 10px;
  border-radius:2px;cursor:pointer}
.ins-x-btn:hover{color:var(--accent);border-color:var(--accent-soft)}
.ins-h{display:flex;flex-direction:column;gap:3px;margin-bottom:calc(var(--s)*1.5);
  padding-right:60px}
.ins-kind{font:9.5px/1 var(--mono);letter-spacing:.18em;color:var(--accent)}
.ins-id{font:10px/1.4 var(--mono);color:var(--ink-faint)}
.ins-t{font-size:16px;color:var(--ink);margin-bottom:calc(var(--s))}
.ins-sub{font:9.5px/1 var(--mono);letter-spacing:.14em;color:var(--ink-faint);
  margin:calc(var(--s)*2.25) 0 calc(var(--s));padding-bottom:5px;
  border-bottom:1px solid var(--line-soft)}
.ins-x{font-size:19px;margin:calc(var(--s)*1.5) 0;overflow-x:auto}
.ins-x.ins-shown{font-size:17px;padding-left:calc(var(--s)*1.5);
  border-left:2px solid var(--line);color:var(--ink-soft)}
.ins-ask{font-size:14.5px;line-height:1.6;color:var(--ink);
  margin:calc(var(--s)) 0}
.ins-note{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.ins-note.ins-quiet{font-size:12.5px;color:var(--ink-faint)}
.ins-meta{font:11px/1.6 var(--mono);color:var(--ink-faint)}
.ins-pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--s)*1.5);
  margin:calc(var(--s)*1.5) 0}
.ins-side{border:1px solid var(--line-soft);border-radius:3px;
  padding:calc(var(--s));text-align:center}
.ins-side-x{font-size:17px}
.ins-side-v{font-size:14px;color:var(--accent);margin-top:4px}
.ins-side-l{font-size:11px;color:var(--ink-faint);margin-top:5px;line-height:1.5}
.ins-rows{display:flex;flex-direction:column;gap:1px}
.ins-r{display:grid;grid-template-columns:auto 1fr;gap:4px calc(var(--s));
  padding:8px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.ins-r-k{font:11px/1.4 var(--mono);color:var(--ink);white-space:nowrap}
.ins-r-o{font-size:13px;color:var(--ink-soft)}
.ins-r-t{font:11px/1.4 var(--mono);color:var(--accent);grid-column:2}
.ins-r-d{grid-column:1/-1;font-size:12px;line-height:1.55;color:var(--ink-faint)}
.ins-r.ins-ok .ins-r-k{color:var(--accent)}
.ins-from{display:flex;flex-wrap:wrap;gap:5px}
.ins-fb{font:10.5px/1.4 var(--mono);border:1px solid var(--line);
  border-radius:2px;padding:4px 7px;color:var(--ink-faint)}
@media(max-width:900px){#inspect{width:100%;left:0}}