/* ===================================================================
   notes.css — shared template for The Student Hub teaching notes
   (Add Maths first; layout generalises to notes/<subject>/)
   Stream typography: body 21px/1.65 · h2 32px · maxw 880 · light only
   =================================================================== */

:root{
  --ink:#15233f;--navy:#1f3360;--navy-2:#2c4478;--muted:#5c6b86;--soft:#95a2ba;
  --line:#e7edf5;--line-2:#d8e1ee;--paper:#ffffff;--bg:#f6f9fd;
  --gold:#e8941e;--gold-2:#F5A623;--gold-soft:#fff7e8;--gold-line:#f0dcb4;
  --good:#0e9f6e;--good-soft:#edfaf3;--good-line:#c9eeda;
  --warn:#e8643f;--warn-soft:#fff4f1;--warn-line:#ffd9cf;
  --shadow:0 10px 40px rgba(20,40,80,.06);
  --font:var(--font-body,Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --maxw:910px;

  /* ---------- THE QUESTION SCALE ----------
     First principle: the QUESTION is the headline of its card, not a caption
     on it. A student's eye should land on the question before anything else.
     Previously every question surface was set SMALLER than the prose that
     explains it (worked-example titles 16px, quiz 18px, exercises 20px — all
     under the 22.5px body), which inverted the hierarchy and made questions
     read like metadata. One token now drives every question surface, so they
     are consistent everywhere and never smaller than body text. */
  --q-size:23px;        /* the question statement itself */
  --q-lh:1.5;           /* room to breathe over two or three lines */
  --q-ans:17.5px;       /* answer options / inputs — clearly secondary */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1100px 460px at 50% -160px,rgba(43,68,120,.05),transparent 60%),linear-gradient(180deg,#fbfcff,var(--bg));
  color:var(--ink);font-family:var(--font);font-size:22.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- zoom stage ----------
   #stage-outer gets a JS-managed compensating size so native scrollbars
   pan the zoomed stage. #stage is scaled from origin 0 0.               */
#stage-outer{position:relative;overflow:visible}
#stage{transform-origin:0 0;will-change:transform}
.zoom-chip{position:fixed;right:18px;bottom:84px;z-index:210;display:flex;align-items:center;gap:9px;
  background:#16294a;color:#fff;font-family:var(--font);font-weight:700;font-size:12.5px;
  padding:8px 8px 8px 14px;border-radius:30px;box-shadow:0 10px 26px rgba(20,40,80,.28);
  opacity:0;pointer-events:none;transition:opacity .25s}
.zoom-chip.show{opacity:1;pointer-events:auto}
.zoom-chip button{border:none;background:rgba(255,255,255,.16);color:#fff;font-family:inherit;font-weight:800;
  font-size:11.5px;border-radius:20px;padding:4px 11px;cursor:pointer}
.zoom-chip button:hover{background:rgba(255,255,255,.28)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px 130px}

/* ---------- crumb + header band ---------- */
.crumb{max-width:var(--maxw);margin:18px auto 0;padding:0 22px;font-size:13.5px;color:var(--muted);font-weight:600}
.crumb a{color:var(--navy-2);text-decoration:none}.crumb a:hover{text-decoration:underline}
.hdr{max-width:var(--maxw);margin:26px auto 6px;padding:24px 26px;background:linear-gradient(135deg,#16294a,#22386a);
  color:#fff;border-radius:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hdr::after{content:"";position:absolute;right:-40px;top:-40px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,166,35,.22),transparent 68%)}
.hdr .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffd88a;margin-bottom:8px}
.hdr h1{font-size:30px;line-height:1.16;font-weight:900;letter-spacing:-.02em;margin:0 0 12px;max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#eaf1ff;padding:4px 12px;border-radius:30px}
.hdr .meta{font-size:13.5px;color:#b9c6e2;font-weight:600}

/* ---------- objectives ---------- */
.objectives{max-width:var(--maxw);margin:14px auto 0;padding:16px 26px 16px 22px;background:#fff;border:1px solid var(--line-2);
  border-left:4px solid var(--gold-2);border-radius:16px;box-shadow:var(--shadow)}
.objectives .ot{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.objectives ul{margin:0;padding-left:22px;font-size:17px;color:#33456a}
.objectives li{margin:4px 0}

/* ---------- section rail (TOC) ---------- */
.rail{position:sticky;top:0;z-index:20;background:rgba(251,252,255,.88);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);margin-top:18px}
.rail-in{max-width:var(--maxw);margin:0 auto;padding:11px 22px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.rail a{flex:none;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;padding:6px 13px;border-radius:30px;
  border:1px solid transparent;white-space:nowrap;transition:.15s}
.rail a:hover{color:var(--ink);background:#fff;border-color:var(--line)}
.rail a.on{color:#fff;background:var(--navy);border-color:var(--navy)}

/* ---------- typography ---------- */
section{margin-top:44px;scroll-margin-top:70px}
h2{font-size:34px;line-height:1.12;font-weight:900;letter-spacing:-.02em;margin:0 0 6px;display:flex;align-items:center;gap:12px}
h2 .n{flex:none;width:38px;height:38px;border-radius:11px;background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--gold);font-size:17px;font-weight:900;display:grid;place-items:center}
.sub{color:var(--muted);font-size:16px;margin:0 0 18px}
p{margin:0 0 15px}
.lead{font-size:20px}
b,strong{font-weight:700}
ul.clean{list-style:none;padding:0;margin:0 0 16px}
ul.clean li{position:relative;padding:6px 0 6px 30px}
ul.clean li::before{content:"";position:absolute;left:6px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--gold-2)}
:focus-visible{outline:2.5px solid var(--gold-2);outline-offset:2px;border-radius:6px}

/* ---------- callouts ---------- */
.callout{border-radius:16px;padding:16px 20px;margin:18px 0;border:1px solid var(--line-2);background:var(--paper);box-shadow:var(--shadow)}
.callout .ct{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.callout.def{border-left:4px solid var(--navy-2)}.callout.def .ct{color:var(--navy-2)}
.callout.formula{background:var(--gold-soft);border-color:var(--gold-line);border-left:4px solid var(--gold-2)}.callout.formula .ct{color:var(--gold)}
.callout.tip{background:#eef6ff;border-color:#cfe2f7;border-left:4px solid #2f7fd6}.callout.tip .ct{color:#2f7fd6}
.callout.warn{background:var(--warn-soft);border-color:var(--warn-line);border-left:4px solid var(--warn)}.callout.warn .ct{color:var(--warn)}
.callout.good{background:var(--good-soft);border-color:var(--good-line);border-left:4px solid var(--good)}.callout.good .ct{color:#0b7a54}
.callout p:last-child{margin-bottom:0}

/* ---------- table ----------
   Tables are auto-wrapped in .tbl-scroll by notes.js (wrapTables) so a wide
   table scrolls *itself* instead of pushing the whole page sideways — the
   mobile horizontal-overflow bug. Authors keep writing plain <table class="ntab">. */
/* Neutral scroller: it must not restyle the table it wraps (pages hand-roll
   tables too), so .ntab keeps its own card look. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 4px;max-width:100%;padding-bottom:2px}
.tbl-scroll .ntab{margin:0}
.tbl-scroll.is-scrollable{border-right:1px dashed var(--line-2)}
.tbl-scroll.is-scrollable::-webkit-scrollbar{height:6px}
.tbl-scroll.is-scrollable::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.ntab{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:17px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ntab th{background:#16294a;color:#fff;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:800;padding:11px 14px;text-align:left}
.ntab td{padding:11px 14px;border-top:1px solid var(--line)}
.ntab tr td:first-child{font-weight:700}
.ntab tr:nth-child(even) td{background:#fafcff}

/* ---------- overflow containment (mobile release blocker) ----------
   Nothing inside the note may exceed the viewport. Wide things scroll
   themselves; media never exceeds its column.                          */
img,svg,video,canvas{max-width:100%}
pre,code{overflow-x:auto;max-width:100%}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}
.hub-steps{max-width:100%}
.hub-line .rhs,.hub-line .lhs{overflow-wrap:anywhere;min-width:0}
/* Keep every inline formula on ONE line — never let KaTeX break at an operator
   (e.g. "2n+1" splitting before the 1, or "600 + 400" mid-sum, which looks jerky).
   Surrounding plain text still wraps normally between words. Display math
   (.katex-display) has its own overflow-x scroll, so nowrap is safe there too. */
.katex{white-space:nowrap}

/* ---------- worked example (flow 4A) ---------- */
.we{background:#fff;border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);margin:22px 0;overflow:hidden}
/* The worked-example header IS the question. Tag = metadata on its own line;
   the question then gets the full width of the card and the question scale.
   (It used to sit inline next to the tag at 16px, so a long word problem
   wrapped awkwardly around a badge and read smaller than the body text.) */
.we-hd{display:block;padding:16px 22px 17px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcff)}
.we-hd .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--navy);padding:4px 11px;border-radius:8px;margin-bottom:11px}
.we-hd .ttl{display:block;font-weight:700;font-size:var(--q-size);line-height:var(--q-lh);color:var(--ink);max-width:60ch;text-wrap:pretty}
.we-bd{padding:18px 22px 20px}
.q{font-size:var(--q-size);line-height:var(--q-lh);margin:0 0 4px}
.qlist{margin:10px 0 16px;padding-left:26px;font-size:var(--q-size);line-height:var(--q-lh)}
.qlist li{margin:12px 0}

/* workspace */
.ws{position:relative;margin:16px 0;border:1.6px dashed #cdd8ea;border-radius:14px;background:#fff;height:380px;min-height:200px}
.ws.grid{background-image:linear-gradient(#eef3fb 1px,transparent 1px),linear-gradient(90deg,#eef3fb 1px,transparent 1px);background-size:24px 24px}
.ws .wmark{position:absolute;left:12px;bottom:26px;font-size:12px;color:var(--soft);font-weight:600;letter-spacing:.02em;pointer-events:none}
.ws .wgrid{position:absolute;right:10px;top:9px;font-size:11.5px;font-weight:700;color:var(--muted);background:#f3f7fd;
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;cursor:pointer;user-select:none}
.ws .wgrid:hover{color:var(--ink);border-color:var(--line-2)}
.ws-resize{position:absolute;left:0;right:0;bottom:0;height:22px;cursor:ns-resize;display:flex;align-items:center;justify-content:center;touch-action:none}
.ws-resize::before{content:"";width:46px;height:5px;border-radius:3px;background:#cdd8ea;transition:background .15s}
.ws-resize:hover::before{background:var(--gold-2)}

/* reveal controls */
.rev-btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:13px;padding:12px 20px;font-family:inherit;
  font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 8px 20px rgba(245,166,35,.25);cursor:pointer;transition:transform .14s}
.rev-btn:hover{transform:translateY(-2px)}
.rev-btn:disabled{cursor:default;transform:none}
.rev-btn.ghost{background:#fff;color:var(--navy-2);border:1.5px solid var(--line-2);box-shadow:none}
.rev-btn.ghost:disabled{opacity:.45}
.rev-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.stepcount{font-size:13.5px;font-weight:800;color:var(--muted);font-family:var(--mono)}
.stephint{font-size:12.5px;color:var(--soft);font-weight:600}
.sol{margin-top:16px}
.sol.hidden{display:none}

/* ---------- hub-method steps grid: LHS = RHS | reason ---------- */
.hub-steps{display:grid;grid-template-columns:auto auto 1fr auto;column-gap:.55em;row-gap:.6em;align-items:baseline;margin:6px 0 4px;font-size:21.5px}
.hub-line{display:contents}
.hub-line.hidden{display:none}
.hub-line .lhs{justify-self:end}
.hub-line .eq{color:var(--soft)}
.hub-line .rhs{justify-self:start}
.hub-line .rz{justify-self:end;color:var(--muted);font-style:italic;font-size:.68em;white-space:nowrap}
.hub-line .full{grid-column:1/-1;color:var(--muted);font-size:.78em;font-weight:600}
.hub-steps.numbered{grid-template-columns:auto auto auto 1fr auto}
.hub-line .qn2{justify-self:end;color:var(--soft);font-weight:800;font-size:.82em;font-family:var(--mono);padding-right:2px}
.hub-line.hl .rhs{background:var(--gold-soft);box-shadow:0 0 0 1px var(--gold-line);border-radius:6px;padding:1px 7px}
/* Full-width summary line: a centered aligned array (e.g. simultaneous-equation block, column base-addition) that must span all grid columns instead of squishing into column 1. */
.hub-line.elim{display:flex;grid-column:1/-1;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.15em .6em;margin:.2em 0}
.hub-line.elim .rz{white-space:normal;justify-self:auto}
.reveal-anim{animation:nrise .24s cubic-bezier(.2,.9,.25,1) both}
@keyframes nrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Answer box flows as normal inline text (NOT flex) so mixed math + words wrap
   cleanly on one baseline — inline-flex made each word-run a flex item and
   jumbled multi-line answers. */
.final{display:block;margin-top:12px;background:#16294a;color:#fff;padding:10px 18px;border-radius:12px;font-size:20px;line-height:1.55}
.final .lab{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd88a;margin-right:10px}

/* ---------- exercise set (flow 4B) ---------- */
.exset{background:#fff;border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);margin:22px 0;overflow:hidden;padding-bottom:16px}
.exset-hd{padding:15px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(180deg,#fff,#fbfcff)}
.exset-hd .ttl{font-weight:800;font-size:17px}
.exset-hd .hint{font-size:13px;color:var(--muted);font-weight:600}
.exgrid{padding:8px 22px 6px}
.exq{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;gap:6px 12px;align-items:baseline}
.exq:last-child{border-bottom:none}
.exq .qn{font-weight:800;color:var(--navy-2);font-size:17px}
.exq .qt{font-size:var(--q-size);line-height:var(--q-lh);text-wrap:pretty}
.exq .ex-sol{grid-column:2;margin-top:8px}
.exq .ex-sol.hidden{display:none}
.ex-toggle{grid-column:2;justify-self:start;margin-top:8px;font-size:13px;font-weight:800;color:var(--gold);background:none;border:none;cursor:pointer;padding:2px 0;font-family:inherit}
.ex-toggle:hover{color:var(--gold-2);text-decoration:underline}
.sol-div{margin:8px 22px 0;padding:12px 16px;border-radius:12px;background:var(--good-soft);border:1px solid var(--good-line);
  color:#0b7a54;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.method-lbl{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--navy-2);margin:14px 0 2px;padding:0 22px}

/* ---------- long-division tableau ---------- */
.ldiv{margin:16px 0 6px;overflow-x:auto;font-size:20px}
.ld-wrap{display:inline-grid;grid-template-columns:auto auto;column-gap:2px;--cw:4.7em}
.ld-q{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(var(--n),var(--cw));padding:0 0 5px 9px;border-left:2.5px solid transparent}
.ld-divisor{grid-column:1;grid-row:2;white-space:nowrap;padding:9px 10px 0 0;text-align:right}
.ld-grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(var(--n),var(--cw));border-top:2.5px solid var(--ink);border-left:2.5px solid var(--ink);padding:6px 0 3px 9px}
.ld-cell{text-align:right;padding:4px 7px;white-space:nowrap;line-height:1.5}
.ld-cell.ul{border-bottom:2px solid var(--ink)}
.ldcap{font-size:12.5px;font-weight:700;color:var(--muted);margin:6px 0 0}

/* ---------- note art (pastel scene bands + flork doodles) ----------
   .note-art  — the two per-class pastel images: chapter opener + breather.
                Width/height attrs required on the <img> (no CLS); lazy.
   .doodle    — small flork-style pointer figures pinned to callouts.
                White-bg PNGs blend on the white cards; decorative only.  */
.note-art{margin:26px 0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.note-art img{display:block;width:100%;height:auto}
.note-art .cap{padding:9px 16px;font-size:12.5px;color:var(--muted);font-weight:600;background:#fff;border-top:1px solid var(--line)}
.callout.has-doodle{position:relative;padding-right:96px}
.callout .doodle{position:absolute;right:10px;bottom:6px;width:78px;height:auto;pointer-events:none;user-select:none}
.takeaway.has-doodle{position:relative;padding-right:110px}
.takeaway .doodle{position:absolute;right:14px;bottom:10px;width:88px;pointer-events:none;user-select:none}
.doodle-inline{width:64px;height:auto;vertical-align:middle;margin:-8px 4px}
@media(max-width:640px){
  .callout.has-doodle,.takeaway.has-doodle{padding-right:20px}
  .callout .doodle,.takeaway .doodle{position:static;display:block;margin:8px 0 -4px auto;width:64px}
}

/* ---------- viz card (interactive charts live inside) ---------- */
.viz{background:#fff;border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow);margin:20px 0;overflow:hidden}
.viz-hd{padding:13px 20px;border-bottom:1px solid var(--line);font-weight:800;font-size:14.5px;color:var(--navy);background:linear-gradient(180deg,#fff,#fbfcff)}
.viz-bd{padding:18px 20px}
.viz-note{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:10px}
.viz input[type=range]{width:100%;accent-color:var(--gold-2);margin:12px 0 4px}
.viz .vz-read{font-size:17px;font-weight:700;margin-top:8px}
.viz .vz-read b{font-family:var(--mono)}
.viz .vz-btns{display:flex;gap:9px;flex-wrap:wrap}
.viz .vz-btns button{font-family:inherit;font-size:14px;font-weight:800;border:1.5px solid var(--line-2);background:#fff;color:var(--navy-2);border-radius:11px;padding:9px 16px;cursor:pointer}
.viz .vz-btns button:hover{border-color:var(--gold-2)}
.viz .vz-btns button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.viz .vz-gold{color:var(--gold);font-weight:800}

/* ---------- pop quiz (NotesQuiz — engine component) ---------- */
.pquiz{background:#fff;border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);margin:26px 0;overflow:hidden}
.pquiz .pq-hd{display:flex;align-items:center;gap:12px;padding:16px 22px;background:linear-gradient(135deg,#16294a,#22386a);color:#fff;font-weight:800;font-size:17px}
.pquiz .pq-hd .sub{font-size:12.5px;font-weight:600;color:#b9c6e2}
.pquiz .pq-score{margin-left:auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:5px 14px;font-size:13px;font-weight:800;font-family:var(--mono)}
.pq{padding:18px 22px;border-bottom:1px solid var(--line)}
.pq:last-of-type{border-bottom:none}
.pq-q{font-size:var(--q-size);line-height:var(--q-lh);font-weight:700;margin-bottom:14px;text-wrap:pretty}
.pq-q .qn{color:var(--gold);font-family:var(--mono);margin-right:6px}
.pq-opts{display:flex;flex-wrap:wrap;gap:9px}
.pq-opts button{font-family:inherit;font-size:var(--q-ans);font-weight:600;background:#fff;border:2px solid var(--line-2);border-radius:12px;padding:11px 19px;cursor:pointer;transition:.13s}
.pq-opts button:hover{border-color:var(--gold-2)}
.pq-opts button.good{background:var(--good-soft);border-color:var(--good);color:#0b7a54;font-weight:800}
.pq-opts button.bad{background:var(--warn-soft);border-color:var(--warn);color:#b23c1d}
.pq.locked .pq-opts button{cursor:default}
.pq-in{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pq-in input{font-family:var(--mono);font-size:var(--q-ans);font-weight:700;border:2px solid var(--line-2);border-radius:12px;padding:11px 14px;width:180px;outline:none}
.pq-in input:focus{border-color:var(--gold-2)}
.pq-in input.good{border-color:var(--good);background:var(--good-soft)}
.pq-in input.bad{border-color:var(--warn);background:var(--warn-soft);animation:pqshake .3s}
@keyframes pqshake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pq-check{font-family:inherit;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--gold-2),var(--gold));border:none;border-radius:11px;padding:11px 18px;cursor:pointer}
.pq-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.pq-cols button{font-family:inherit;font-size:var(--q-ans);font-weight:600;background:#fff;border:2px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;transition:.13s;width:100%}
/* MCQ cards are styled per-page, but the QUESTION obeys the shared scale */
.mcqx .mx-q{font-size:var(--q-size);line-height:var(--q-lh);text-wrap:pretty}
.mcqx .mx-opts button{font-size:var(--q-ans)}
.pq-cols button:hover{border-color:var(--gold-2)}
.pq-cols button.act{border-color:var(--gold-2);background:var(--gold-soft)}
.pq-cols button.good{background:var(--good-soft);border-color:var(--good);color:#0b7a54;cursor:default}
.pq-cols button.bad{animation:pqshake .3s;border-color:var(--warn)}
.pq-fb{margin-top:10px;font-size:14px;font-weight:700;min-height:0}
.pq-fb.ok{color:#0b7a54}.pq-fb.no{color:var(--warn)}
.pq-foot{display:flex;align-items:center;gap:14px;padding:16px 22px;background:#fbfcff;border-top:1px solid var(--line)}
.pq-verdict{font-size:15.5px;font-weight:800}
.pq-retry{margin-left:auto;font-family:inherit;font-size:13px;font-weight:800;color:var(--navy-2);background:#fff;border:1.5px solid var(--line-2);border-radius:11px;padding:9px 16px;cursor:pointer}
.pq-retry:hover{border-color:var(--gold-2)}
@media(max-width:640px){.pq-cols{grid-template-columns:1fr;gap:8px}.pq-in input{width:140px}}

/* ---------- takeaway ---------- */
.takeaway{margin-top:48px;background:linear-gradient(135deg,var(--gold-soft),#fffdf8);border:1px solid var(--gold-line);border-radius:20px;padding:22px 26px;box-shadow:var(--shadow)}
.takeaway h3{margin:0 0 12px;font-size:19px;font-weight:900;display:flex;align-items:center;gap:9px}
.takeaway ul{margin:0;padding-left:22px}
.takeaway li{margin:7px 0}

/* ---------- footer nav ---------- */
.pn{display:flex;gap:14px;margin-top:40px}
.pn a,.pn span{flex:1;display:block;text-decoration:none;border:1px solid var(--line-2);border-radius:16px;padding:15px 18px;background:#fff;transition:.15s}
.pn a:hover{border-color:var(--navy-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.pn .dir{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.pn .t{font-weight:700;color:var(--ink);font-size:15px;margin-top:3px}
.pn .disabled{opacity:.5;cursor:default}
.pn .next{text-align:right}

/* ---------- gate screen ---------- */
.gate{max-width:400px;margin:70px auto;background:#fff;border:1px solid #e3e9f2;border-radius:14px;box-shadow:0 8px 22px -14px rgba(22,41,74,.25);padding:16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.gate .gtitle{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy)}
.gate .gtitle svg{flex-shrink:0;color:var(--gold-2)}
.gate .gline{color:var(--muted);font-size:12px;margin:-4px 0 0}
.gate .gate-btn{display:flex;align-items:center;justify-content:center;height:40px;border-radius:9px;font-size:13.5px;font-weight:700;letter-spacing:.01em;color:#fff;background:var(--navy);text-decoration:none;transition:background .15s}
.gate .gate-btn:hover{background:var(--navy-2)}
.gate .gate-btn.ghost{background:#fff;color:var(--navy-2);border:1.5px solid var(--line-2)}
.gate .gate-btn.ghost:hover{border-color:var(--navy-2)}

/* ---------- class context + class switcher (navigation) ---------- */
.clsctx{max-width:var(--maxw);margin:10px auto 0;padding:0 22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clsctx .of{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:20px;padding:4px 12px;white-space:nowrap}
.clsctx .prog-mini{flex:1;min-width:90px;height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.clsctx .prog-mini i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold));border-radius:4px}
.cls-switch{position:relative;display:inline-flex;align-items:center}
.cls-switch select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--navy-2);
  background:#fff;border:1.5px solid var(--line-2);border-radius:20px;padding:6px 30px 6px 13px;cursor:pointer;max-width:230px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.cls-switch select:hover{border-color:var(--navy-2)}
.cls-switch::after{content:"▾";position:absolute;right:12px;pointer-events:none;font-size:11px;color:var(--muted)}

/* ---------- teaser lock (the gate, as a taste not a wall) ---------- */
.teaser-fade{position:relative;height:170px;margin-top:-170px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(246,249,253,.86) 55%,var(--bg))}
.tlock{max-width:var(--maxw);margin:0 auto 90px;padding:0 22px}
.tlock-card{background:#fff;border:1px solid var(--line-2);border-top:4px solid var(--gold-2);border-radius:20px;
  padding:26px 28px;box-shadow:var(--shadow);text-align:center}
.tlock-card .tl-ico{width:46px;height:46px;border-radius:14px;background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--gold);display:grid;place-items:center;margin:0 auto 12px}
.tlock-card h3{margin:0 0 6px;font-size:21px;font-weight:900;letter-spacing:-.01em}
.tlock-card .tl-sub{color:var(--muted);font-size:15px;margin:0 auto 16px;max-width:46ch}
.tl-inside{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.tl-inside span{font-size:12.5px;font-weight:700;background:#f3f7fd;border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;color:var(--muted)}
.tl-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tl-btns a,.tl-btns button{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:inherit;font-size:14.5px;font-weight:800;border-radius:12px;padding:12px 20px;cursor:pointer;border:none}
.tl-btns .prim{color:#fff;background:linear-gradient(135deg,var(--gold-2),var(--gold));box-shadow:0 8px 20px rgba(245,166,35,.25)}
.tl-btns .ghost{color:var(--navy-2);background:#fff;border:1.5px solid var(--line-2)}
.tl-btns .ghost:hover{border-color:var(--navy-2)}
.tl-peek{margin-top:14px;font-size:13px;color:var(--soft);font-weight:600}
.peek-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#16294a;color:#fff;display:flex;align-items:center;
  justify-content:center;gap:12px;padding:12px 18px;font-size:14px;font-weight:700;box-shadow:0 -8px 24px rgba(20,40,80,.2)}
.peek-bar .pk-n{font-family:var(--mono);font-size:18px;font-weight:800;color:var(--gold-2);min-width:22px;text-align:center}

/* ---------- index (subject home) ---------- */
.idx-head{max-width:var(--maxw);margin:16px auto 0;padding:18px 22px;background:#fff;border:1px solid var(--line-2);
  border-radius:18px;box-shadow:var(--shadow)}
.idx-head .ih-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.idx-head .ih-count{font-size:15px;font-weight:800;color:var(--navy)}
.idx-head .ih-count b{color:var(--gold);font-family:var(--mono)}
.idx-head .ih-next{font-size:13.5px;font-weight:700;color:var(--muted)}
.idx-head .ih-next b{color:var(--navy-2)}
.prog-bar{height:9px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:11px}
.prog-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold));border-radius:6px;transition:width .5s}
.idx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
/* ── each class card is a notepad: punched top, ruled paper, red margin ── */
.idx-card{display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,transparent 30px,rgba(224,90,90,.28) 30px,rgba(224,90,90,.28) 31.5px,transparent 31.5px),
    repeating-linear-gradient(180deg,transparent 0 25px,rgba(47,127,214,.08) 25px 26px),
    linear-gradient(180deg,#fffefb,#f9fbfe);
  border:1px solid var(--line-2);border-radius:8px 8px 18px 18px;
  padding:36px 20px 16px 44px;
  box-shadow:0 1.5px 0 rgba(16,27,45,.06),0 3px 0 -1px #fff,0 4px 0 rgba(16,27,45,.05),0 12px 26px rgba(16,27,45,.09);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.idx-card::before{content:"";position:absolute;top:8px;left:16px;right:16px;height:12px;
  background:radial-gradient(circle 4.5px at 10px 6px,#f3f6fb 52%,#c9d6ea 68%,transparent 72%) 0 0/30px 12px repeat-x}
.idx-card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:0 1.5px 0 rgba(16,27,45,.06),
  0 3px 0 -1px #fff,0 4px 0 rgba(16,27,45,.05),0 22px 44px rgba(16,27,45,.15);border-color:#cdd8ea}
.idx-card .cn{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.idx-card h3{margin:6px 0 8px;font-size:18px;line-height:1.3;padding-right:70px}
.idx-card .tp{display:flex;flex-wrap:wrap;gap:6px}
.idx-card .tp span{font-size:11.5px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 10px;color:var(--muted)}
.idx-card .dt{margin-top:10px;font-size:12.5px;color:var(--soft);font-weight:600}
/* ── hover: the pad flips to a page of the ACTUAL notes, writing itself ── */
.idx-card .pv{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;overflow:hidden;
  padding:34px 18px 12px 44px;transition:opacity .28s ease;
  background:
    linear-gradient(90deg,transparent 30px,rgba(224,90,90,.28) 30px,rgba(224,90,90,.28) 31.5px,transparent 31.5px),
    repeating-linear-gradient(180deg,transparent 0 25px,rgba(47,127,214,.10) 25px 26px),
    linear-gradient(180deg,#fffefb,#fbfcff)}
.idx-card .pv::before{content:"";position:absolute;top:8px;left:16px;right:16px;height:12px;
  background:radial-gradient(circle 4.5px at 10px 6px,#f3f6fb 52%,#c9d6ea 68%,transparent 72%) 0 0/30px 12px repeat-x}
.idx-card:hover .pv.ready,.idx-card:focus-visible .pv.ready{opacity:1}
.idx-card .pv-tag{position:absolute;top:12px;right:14px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:20px;padding:3px 9px}
.idx-card .pv-fade{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:1;
  background:linear-gradient(180deg,transparent,#fbfcff)}
.idx-card .pv-scroll{position:relative}
.idx-card:hover .pv.ready .pv-scroll{animation:pvScroll 16s linear 4.5s infinite alternate}
.idx-card .pv-line{font-family:'Caveat','Comic Sans MS',cursive;font-size:19.5px;line-height:26px;height:26px;
  color:#2b3f63;white-space:nowrap;overflow:hidden;width:0}
.idx-card .pv-line.hd{font-weight:700;font-size:21px;color:var(--navy);text-decoration:underline;
  text-decoration-color:rgba(232,148,30,.55);text-decoration-thickness:2px;text-underline-offset:4px}
.idx-card:hover .pv.ready .pv-line{animation:pvWrite .55s steps(22,end) forwards}
@keyframes pvWrite{from{width:0}to{width:100%}}
@keyframes pvScroll{from{transform:translateY(0)}to{transform:translateY(var(--pvh,-140px))}}
@media (prefers-reduced-motion:reduce){
  .idx-card{transition:none}
  .idx-card:hover .pv.ready .pv-line{animation:none;width:100%}
  .idx-card:hover .pv.ready .pv-scroll{animation:none}
}
/* class metadata row: time · difficulty · type */
.idx-card .meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--muted)}
.idx-card .meta-row .mi{display:inline-flex;align-items:center;gap:5px}
.idx-card .meta-row .mi svg{color:var(--soft)}
/* completion status pill */
.st-pill{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:20px;padding:4px 10px;border:1px solid}
.st-pill.new{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.st-pill.started{background:#eef6ff;border-color:#cfe2f7;color:#2f7fd6}
.st-pill.done{background:var(--good-soft);border-color:var(--good-line);color:#0b7a54}
.idx-card.locked{opacity:.72;border-style:dashed}
.idx-card.locked:hover{transform:none;box-shadow:var(--shadow)}
.idx-more{border:1.6px dashed #cdd8ea;border-radius:18px;display:grid;place-items:center;color:var(--muted);
  font-weight:700;font-size:15px;padding:26px;text-align:center;background:transparent;box-shadow:none}
/* collapsed course map (the roadmap) */
.cmap{margin-top:26px;background:#fff;border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.cmap summary{list-style:none;cursor:pointer;padding:15px 22px;font-weight:800;font-size:15px;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#fff,#fbfcff)}
.cmap summary::-webkit-details-marker{display:none}
.cmap summary .cm-hint{font-size:12.5px;font-weight:700;color:var(--soft)}
.cmap[open] summary{border-bottom:1px solid var(--line)}
.cmap ol{list-style:none;margin:0;padding:6px 10px 12px}
.cmap li{display:flex;align-items:baseline;gap:11px;padding:8px 12px;border-radius:10px;font-size:14.5px;color:var(--muted)}
.cmap li+li{border-top:1px solid #f3f6fb}
.cmap li .cm-n{font-family:var(--mono);font-weight:800;font-size:12px;color:var(--soft);min-width:24px}
.cmap li.rel{color:var(--ink);font-weight:600}
.cmap li.rel .cm-n{color:var(--gold)}
.cmap li.rel a{color:var(--navy-2);text-decoration:none;font-weight:700}
.cmap li.rel a:hover{text-decoration:underline}
.cmap li .cm-soon{margin-left:auto;font-size:11px;font-weight:800;color:var(--soft);letter-spacing:.04em;text-transform:uppercase}

/* ---------- the shelf (notes home): filters + continue ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.filters button{font-family:inherit;font-size:13px;font-weight:800;color:var(--muted);background:#fff;
  border:1.5px solid var(--line-2);border-radius:30px;padding:8px 16px;cursor:pointer;transition:.14s}
.filters button:hover{color:var(--ink);border-color:#cdd8ea}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.shelf-group{margin-top:26px}
.shelf-group>h2{font-size:19px;font-weight:900;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.shelf-group>h2 .gc{font-size:12px;font-weight:800;color:var(--soft);font-family:var(--mono)}
.continue{margin-top:24px;background:linear-gradient(135deg,#16294a,#22386a);border-radius:20px;padding:20px 24px;
  box-shadow:var(--shadow);color:#fff;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.continue .ct-lb{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ffd88a}
.continue h3{margin:4px 0 2px;font-size:19px;font-weight:900;letter-spacing:-.01em}
.continue .ct-sub{font-size:13.5px;color:#b9c6e2;font-weight:600}
.continue .ct-go{margin-left:auto;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14.5px;
  font-weight:800;color:#16294a;background:linear-gradient(135deg,var(--gold-2),var(--gold));border-radius:12px;padding:12px 20px}

/* ---------- objectives: collapsible on mobile (set up by notes.js) ---------- */
.objectives .obj-toggle{display:none;width:100%;margin-top:8px;font-family:inherit;font-size:13px;font-weight:800;
  color:var(--navy-2);background:none;border:none;border-top:1px solid var(--line);padding:9px 0 0;cursor:pointer;text-align:left}

/* ---------- responsive ----------
   Two jobs here: (1) nothing may overflow the viewport, (2) a student on a
   phone should reach the first lesson section fast. So the pre-content stack
   (hero → objectives → art → rail) is compacted, and everything gets a
   consistent 16px gutter instead of sitting flush to the screen edge.        */
@media(max-width:640px){
  body{font-size:18px}
  /* Questions scale down with the body but stay a touch LARGER than it —
     they must never shrink back below the prose that explains them. */
  :root{--q-size:19.5px;--q-lh:1.45;--q-ans:16px}
  h2{font-size:25px}
  .hub-steps{font-size:17px}
  .final{font-size:17px}
  .ld-wrap{--cw:3.6em}.ldiv{font-size:15px}
  .idx-grid{grid-template-columns:1fr}
  .hub-line .rz{white-space:normal;max-width:34vw}

  /* --- gutters: one consistent 16px edge everywhere --- */
  .wrap{padding:0 16px 90px}
  .crumb,.clsctx,.tlock{padding:0 16px}
  .rail-in{padding:9px 16px}
  .hdr,.objectives,.idx-head{margin-left:16px;margin-right:16px}

  /* --- compact the pre-content so the lesson starts sooner --- */
  .crumb{margin-top:12px;font-size:12.5px}
  .hdr{margin-top:14px;margin-bottom:0;padding:17px 18px;border-radius:18px}
  .hdr h1{font-size:22px;margin-bottom:9px}
  .hdr .eyebrow{font-size:11px;letter-spacing:.1em;margin-bottom:6px}
  .hdr .chips{gap:6px;margin-bottom:0}
  .hdr .chip{font-size:11.5px;padding:3px 10px}
  .hdr .meta{display:none}            /* flavour text — desktop only */
  .hdr::after{width:120px;height:120px}
  .objectives{margin-top:10px;padding:13px 16px 13px 14px;border-radius:14px}
  .objectives ul{font-size:15.5px;padding-left:19px}
  .objectives li{margin:3px 0}
  .objectives .obj-toggle{display:block}
  .objectives.collapsed ul{display:none}
  .clsctx{margin-top:9px}
  section{margin-top:32px;scroll-margin-top:56px}
  /* the opener banner is a welcome mat, not a wall — crop it on mobile */
  .note-art{margin:14px 0;border-radius:14px}
  .note-art img{max-height:128px;object-fit:cover}

  /* --- rail: shorter chips, tighter --- */
  .rail{margin-top:12px}
  .rail a{font-size:12px;padding:5px 11px}

  /* --- components that were pushing width --- */
  .we-hd,.we-bd,.exset-hd,.exgrid,.pq,.pq-hd,.pq-foot{padding-left:15px;padding-right:15px}
  .sol-div{margin-left:15px;margin-right:15px}
  .method-lbl{padding-left:15px;padding-right:15px}
  .viz-hd,.viz-bd{padding-left:15px;padding-right:15px}
  .callout{padding:14px 16px}
  .takeaway{padding:18px 18px;margin-top:34px}
  .pn{flex-direction:column;gap:10px}
  .qlist,.objectives ul{padding-left:20px}
  .exq{grid-template-columns:26px 1fr}
  .we-hd{padding:14px 15px 15px}
  .idx-card h3{padding-right:0}
  .st-pill{position:static;display:inline-block;margin-bottom:8px}
  .continue{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  .continue .ct-go{margin-left:0;width:100%;justify-content:center}
  .tlock-card{padding:20px 18px}
  .tl-btns a,.tl-btns button{width:100%}
}