/* ============================================================
   BuildingLife mockup — the Fluctuations shell.

   Restyled 2026-08-10 (Omer): BuildingLife adopts the design language of the
   Fluctuations rebuild viewer (Projects/fluctuations/rebuild/viewer.html — the
   one Raycast opens). Both already sat on the Allostasis tokens; what changes
   is the STRUCTURE. Was: a white top bar over a split stage/panel with hard
   borders. Now: one full-bleed clinical stage with frosted-glass chrome
   floating on it — identity top-left, a segmented view capsule top-right, the
   content column floating right, a transport dock bottom-centre.

   Every class name is unchanged, so the renderers (cards.js, verbs3d, the
   timeline and articulation surfaces) restyle without a line of JS.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root{
  --cream:#F1ECDD; --mid-teal:#4E9E9E; --deep-teal:#2D6F8C; --leaf:#7CB342;
  --paper:#FFFFFF; --page:#FBFBFA; --sunk:#F4F5F4;
  --ink:#1E3A40; --ink-2:#3F5C61; --ink-3:#6E8A8C;
  --line:#E7E9E8; --line-2:#EDEEED; --line-cream:#E8E2D2;
  /* the Fluctuations stage — a warmer teal than the old BL dark blue, and the
     exact gradient the rebuild viewer ships. The GL canvas is alpha-
     transparent, so this CSS is the scene background. */
  --stage:radial-gradient(130% 105% at 50% 16%, #2C5A66 0%, #1E3F49 52%, #142D34 100%);
  --stage-glass:rgba(255,255,255,.78);
  --glass:var(--stage-glass);
  --glass-edge:rgba(255,255,255,.65);
  --teal-50:#EAF2F2; --teal-100:#D4E6E6; --teal-200:#A9CFCF; --teal-700:#24586F;
  --ok:#7CB342; --ok-soft:#EAF2D9; --warn:#D98A3C; --bad:#C75D52; --bad-soft:#F4E0DD;
  --draft:#8a5fb0; --derived:#3f7fa8;
  --cell-tr:#6FB0B1; --cell-tl:#3E7E91; --cell-sr:#4F94A6; --cell-sl:#2D6F8C;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Newsreader',Georgia,serif;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(30,58,64,.04),0 1px 3px rgba(30,58,64,.05);
  --sh-md:0 4px 14px -4px rgba(30,58,64,.10),0 2px 6px -2px rgba(30,58,64,.07);
  --sh-lg:0 18px 48px -16px rgba(27,67,86,.20),0 6px 18px -8px rgba(30,58,64,.10);
  --sh-float:0 24px 60px -22px rgba(20,50,64,.30),0 8px 22px -10px rgba(20,50,64,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  /* aliases the vendor code's class vocabulary leans on */
  --panel:var(--paper); --muted:var(--ink-2); --faint:var(--ink-3);
  --accent:var(--deep-teal); --radius:var(--r-md);
  /* HOME SURFACE (2026-08-16) — the only two tokens the home build adds.
     --band is the stage's own gradient re-cut as a header band (same three
     stops, linear instead of radial), so the identity survives the skull
     leaving; --board is the warm page the content sits on. No new colours,
     no second type scale: fonts stay Inter / Newsreader / JetBrains Mono. */
  --band:linear-gradient(168deg,#2C5A66 0%,#1E3F49 62%,#142D34 100%);
  --board:#F6F5F1;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--font);color:var(--ink);background:var(--stage);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
::selection{background:#C6DE97;color:var(--ink)}
.glass{background:var(--stage-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-edge);box-shadow:var(--sh-md)}

/* ---------- shell: one full-bleed stage, chrome floating on it ----------
   The top bar is no longer a bar. It is a transparent overlay that positions
   two clusters — identity left, views right — directly over the stage, the way
   the Fluctuations viewer does. Only the clusters take pointer events, so the
   space between them stays draggable as orbit. */
.top{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;
  gap:14px;padding:26px 30px;background:transparent;border:0;pointer-events:none}
.top>*{pointer-events:auto}
/* identity is the eyebrow, on the bare stage — the page's own title carries the
   wordmark, so this stays small and quiet (the viewer's FLUCTUATIONS mark) */
.top .brand{order:0;display:flex;align-items:center;gap:9px;align-self:center;
  font:700 11.5px/1.2 var(--font);text-transform:uppercase;letter-spacing:.12em;
  color:var(--teal-200)}
.top .brand img{width:22px;height:22px;border-radius:50%;object-fit:cover;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.top .brand .life{color:var(--teal-200)}
/* controls cluster right: mesh readout, then the segmented view capsule */
.top .spacer{order:1}
.top .sub{order:2}
.top .navchips{order:3}
/* views: one glass capsule holding the segmented control */
.top .navchips{display:flex;align-items:center;gap:5px;margin-left:12px;padding:6px;
  border-radius:var(--r-pill);background:var(--stage-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-edge);box-shadow:var(--sh-md)}
.navchip{border:none;border-radius:var(--r-pill);padding:8px 15px;font-size:12.5px;font-weight:600;
  color:var(--ink-3);cursor:pointer;background:transparent;transition:.15s var(--ease);white-space:nowrap}
.navchip:hover{color:var(--ink-2);background:rgba(255,255,255,.5)}
.navchip.on{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.navchip .due{background:var(--leaf);color:#fff;border-radius:var(--r-pill);padding:0 7px;font-size:11px;margin-left:6px}
.top .spacer{flex:1}
/* mesh readout: a quiet glass chip, right */
.top .sub{color:var(--ink-2);font-size:11.5px;font-weight:500;padding:9px 14px;
  border-radius:var(--r-pill);background:var(--stage-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-edge);box-shadow:var(--sh-md);white-space:nowrap;align-self:center}

.main{display:block;height:100vh}
/* `!important` earns its keep here (2026-08-16). ship3d's scene3.create sets
   `host.style.position = 'relative'` INLINE, which beats a plain rule and drops
   #stage out of its full-viewport box — the element then has no height of its
   own and collapses to whatever aspect the canvas happens to carry (a 2:1 band
   with dead space beneath it). It never mattered much while the scene was built
   during boot, at a fixed moment in the layout; now that the scene is built
   lazily, on entry to the first surface that needs it, the box has to be
   deterministic whenever that happens. Vendor code stays untouched. */
#stage{position:fixed!important;inset:0;z-index:0;background:var(--stage)}
#stage canvas.gl{display:block;width:100%;height:100%;cursor:grab}
#stage canvas.gl:active{cursor:grabbing}
.loaderr{padding:40px;color:#F1B8B0;font-size:14px}
/* credits: bottom-left on the bare stage, the Fluctuations hint treatment */
.stagecap{position:absolute;left:30px;bottom:22px;color:var(--teal-200);font-size:10.5px;
  letter-spacing:.05em;max-width:60%;opacity:.72;z-index:2}
.stagecap>span{text-transform:uppercase;letter-spacing:.1em}
.stagecap .licence{margin-top:3px}
.stagecap .licence summary{cursor:pointer;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.stagecap .licence div{margin-top:4px;line-height:1.45;max-width:520px}
/* the content column floats over the stage as a stack of glass cards */
#panel{position:fixed;right:0;top:0;bottom:0;width:452px;max-width:46vw;z-index:4;
  overflow-y:auto;overscroll-behavior:contain;background:transparent;border:0;
  padding:104px 30px 34px 14px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
  /* content scrolling up meets the top cluster — fade it out rather than
     letting cards slide under the glass capsule edge-to-edge */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 76px,#000 104px,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 76px,#000 104px,#000 100%)}
#panel::-webkit-scrollbar{width:8px}
#panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
#panel.wide{width:660px;max-width:62vw}
@media(max-width:860px){
  #panel{position:fixed;left:0;right:0;top:auto;bottom:0;height:62vh;width:auto;max-width:none;
    padding:18px 18px 26px}
  .top{padding:18px}
  .top .brand{font-size:18px}
  .stagecap{display:none}
}

/* ---------- labels over the scene ---------- */
.labels3d{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.l3d{position:absolute;transform:translate(-50%,-130%);font-size:11.5px;color:var(--ink-2);
  background:var(--glass);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.l3d.hov{color:var(--ink);font-weight:600;border-color:var(--mid-teal)}
.l3d.gh{color:var(--ink-3);font-style:italic}
.l3d.lm{color:var(--ink-3);font-size:10px;letter-spacing:.2em;transform:translate(-50%,-50%)}
.l3d.reg{color:var(--ink-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;transform:translate(-50%,-100%)}

/* ---------- cards (the floating glass language) ----------
   Cards ARE the panel now — each one a frosted pane on the stage rather than a
   white box inside a white sheet. Opacity is a touch higher than the viewer's
   chrome because these carry long-form reading, not just controls. */
.qcard{background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--glass-edge);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--sh-float);margin-bottom:14px}
.qcard.menu p{margin:10px 0 0}
.qverb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pill{font-size:11px;letter-spacing:.05em;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 10px;color:var(--ink-2);background:var(--sunk)}
.pill.enc{color:#5c7d2b;border-color:#C6DE97;background:var(--ok-soft)}
.pill.verb-mcq{background:var(--cell-tr);border-color:var(--cell-tr);color:#fff}
.pill.verb-cloze{background:var(--cell-tl);border-color:var(--cell-tl);color:#fff}
.pill.verb-locate{background:var(--cell-sr);border-color:var(--cell-sr);color:#fff}
.pill.verb-build{background:var(--cell-sl);border-color:var(--cell-sl);color:#fff}
.pill.verb-sequence{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
/* trace (2026-08-31) — the pathway verb reuses the sequence slot UI, so it
   takes a sibling hue rather than a new visual language. */
.pill.verb-trace{background:var(--mid-teal);border-color:var(--mid-teal);color:#fff}
/* supply (2026-09-03, [CN-SUPPLY]) — branch↔target is theoretic recognition, so
   it takes the MCQ cell's hue: it renders through the mcq / mcq-multi cards and
   should not read as a fourth visual language. */
.pill.verb-supply{background:var(--cell-tr);border-color:var(--cell-tr);color:#fff}
.pill.draft{color:#fff;background:var(--draft);border-color:var(--draft)}
.pill.derived{color:#fff;background:var(--derived);border-color:var(--derived)}
.qprompt{font-size:17px;line-height:1.45;margin-bottom:10px;font-weight:600}
.qsub{color:var(--ink-2);font-size:12.5px;margin:8px 0}
.sub{color:var(--ink-2);font-size:13px}
.faint{color:var(--ink-3)} .small{font-size:12px} .spacer{flex:1}
.serif{font-family:var(--serif)}

/* playhead rides on the bare stage above the cards — light type, no box */
.playhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.prog{flex:1;height:5px;background:rgba(255,255,255,.22);border-radius:3px;overflow:hidden}
.prog .fill{height:100%;background:var(--teal-200);transition:width .25s var(--ease)}
.count{color:var(--teal-200);font-size:12.5px;font-variant-numeric:tabular-nums}
.playhead .btn{background:var(--stage-glass);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-color:var(--glass-edge)}
.runmeta{color:var(--teal-200);opacity:.85;margin-bottom:12px}

.actionsline{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);
  padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;user-select:none;
  display:inline-block;font-family:var(--font);transition:.15s var(--ease);box-shadow:var(--sh-sm)}
.btn:hover{color:var(--ink);border-color:var(--mid-teal)}
.btn.primary{background:var(--deep-teal);border-color:var(--deep-teal);color:#fff;font-weight:600;
  box-shadow:var(--sh-md)}
.btn.primary:hover{background:var(--teal-700);filter:brightness(1.06)}
.btn.primary:disabled{opacity:.35;cursor:default}
.btn.big{padding:9px 20px;font-size:14px}
.btn.small{padding:2px 10px;font-size:11.5px}

/* options / trays (verbs3d + cards vocabulary) */
.options{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.opt{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:10px 14px;
  cursor:pointer;text-align:left;font-size:14.5px;color:var(--ink);font-family:var(--font)}
.opt:hover{border-color:var(--mid-teal)}
.opt.sel{border-color:var(--deep-teal);background:var(--teal-50)}
.opt.correct{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt:disabled{cursor:default}
.opt .key{color:var(--ink-3);font-size:12px;margin-right:8px}
.tray,.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
.tchip{border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 13px;font-size:13px;
  cursor:pointer;background:var(--paper);color:var(--ink-2);user-select:none}
.tchip:hover{border-color:var(--mid-teal)}
.tchip.sel{border-color:var(--deep-teal);background:var(--teal-50);color:var(--ink)}
.tchip.placed{opacity:.4;text-decoration:line-through}
.tchip.okc{border-color:var(--ok);background:var(--ok-soft)}
.tchip.badc{border-color:var(--bad);background:var(--bad-soft)}

.fact{background:var(--cream);border:1px solid var(--line-cream);border-radius:var(--r-sm);
  padding:10px 14px;font-size:13.5px;margin-top:12px;font-family:var(--serif)}
.fact .t{display:block;font-family:var(--font);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}

.banner{font-size:13px;border-left:3px solid var(--mid-teal);background:var(--teal-50);
  padding:8px 12px;border-radius:0 8px 8px 0;margin-bottom:12px}
.banner.sib{border-color:var(--derived);background:#EAF2F7}
.banner.warn{border-color:var(--warn);background:#F9EFE2}

/* Task 4a/4b — the source is a grey one-liner at the card foot, page inline.
   The old details.prov drawer is gone: it could open on nothing, and it put the
   page number one click away from the claim it supports. */
/* Round 2, Task 7: a source line WRAPS, it never clips. It used to be cut at
   150 characters with an ellipsis, which broke words mid-syllable ("physiological
   cours…") and made a citation read as a corrupted string. It is prose — give it
   the room to be a sentence. */
.srcline{margin-top:12px;font-size:12px;line-height:1.45;color:var(--ink-3);
  padding-top:9px;border-top:1px solid var(--line-2);
  overflow-wrap:break-word;word-break:normal;white-space:normal}
.srcline+.srcline{margin-top:4px;padding-top:4px;border-top:0}
.srcfor{opacity:.8;font-style:italic}
.srcquote{margin-top:5px;padding:6px 10px;border-left:2px solid var(--line-cream);
  font-style:italic;font-family:var(--serif);font-size:12.5px;color:var(--ink-2)}

/* Task 6a (2026-08-16) — the quote folds away behind its own source line.
   A citation with no quote renders as a plain .srcline with no marker at all,
   so a disclosure can never open on nothing. The marker is a hairline caret
   on the source line itself: the affordance IS the citation, not a widget
   sitting beside it. */
.srcwrap>summary.srcline{cursor:pointer;list-style:none;position:relative;padding-right:16px}
.srcwrap>summary.srcline::-webkit-details-marker{display:none}
.srcwrap>summary.srcline::after{content:'▸';position:absolute;right:0;
  color:var(--ink-3);opacity:.55;font-size:10px;transition:transform .12s ease}
.srcwrap[open]>summary.srcline::after{transform:rotate(90deg)}
.srcwrap>summary.srcline:hover{color:var(--ink-2)}
.srcwrap+.srcwrap>summary.srcline,.srcline+.srcwrap>summary.srcline{margin-top:4px;padding-top:4px;border-top:0}
/* …and Gray's, where OCF is the primary, sits one fold further down (6b) */
.srcmore{margin-top:6px}
.srcmore>summary{cursor:pointer;font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);opacity:.85}
.srcmore>summary:hover{opacity:1}
.srcmore .srcline{border-top:0;margin-top:6px;padding-top:0}

/* the Build verb's post-check feedback block (Task 1b) — the verdict, what is
   still missing, and the relationship the structure IS, in the room the tray
   gave back */
.buildfb{margin-top:2px}

/* the reveal flashcard's answer block (round 2, Task 4) — the answer is the
   card's whole point, so it is set as prose at reading size, not as a caption */
.revealed{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--teal-50);border:1px solid var(--teal-100)}
.revlab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-teal);
  margin-bottom:6px}
.revline{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--ink);margin:3px 0}

/* grade bar */
.gradebar{display:flex;gap:8px;margin-top:14px;align-items:center;flex-wrap:wrap}
/* the label never pushes a pill onto its own line: four pills are ONE row, and
   a long label (the draft-build one) wraps above them instead (2026-08-16) */
.gradebar .lbl{font-size:12px;color:var(--ink-3);flex:1 0 100%}
.gradebar .lbl:only-child,.gradebar .lbl+.spacer{flex:0 1 auto}
.gbtn{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);padding:7px 15px;
  cursor:pointer;font-size:13.5px;color:var(--ink);font-family:var(--font)}
.gbtn:hover{border-color:var(--mid-teal)}
.gbtn.sug{border-color:var(--mid-teal);box-shadow:inset 0 0 0 1px var(--mid-teal)}
.gbtn.sel{background:var(--deep-teal);border-color:var(--deep-teal);color:#fff}
.gbtn:disabled{opacity:.5;cursor:default}
.clozeinput{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;font-size:15px;
  width:150px;font-family:var(--font);color:var(--ink);background:var(--paper)}
.clozeinput:focus{outline:2px solid var(--teal-100);border-color:var(--mid-teal)}
/* Task 7b — a typed answer is marked like a clicked one */
.clozeinput.okc{border-color:var(--ok);background:var(--ok-soft)}
.clozeinput.badc{border-color:var(--bad);background:var(--bad-soft)}
.verdict{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding:9px 12px;
  border-radius:var(--r-sm);font-size:13.5px;line-height:1.5;color:var(--ink)}
.verdict.ok{background:var(--ok-soft);border:1px solid var(--ok)}
.verdict.no{background:var(--bad-soft);border:1px solid var(--bad)}
.verdict .vicon{font-weight:800;line-height:1.35}
.verdict.ok .vicon{color:var(--ok)}
.verdict.no .vicon{color:var(--bad)}

/* Task 1b — interval-labelled grade pills, reveal-answer + undo, extra-knowledge */
.gbtn .iv{color:var(--ink-3);font-size:11.5px;font-weight:400;margin-left:2px}
.gbtn.sel .iv{color:#D6E8E8}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:2px}
.btn.ghost:hover{color:var(--deep-teal);border-color:transparent}
.reveal-row{margin-top:8px}
.btn.small.undo{border-color:var(--warn);color:var(--warn)}
.btn.small.undo:hover{background:#F9EFE2;border-color:var(--warn)}
.duedot{background:var(--leaf);color:#fff;border-radius:var(--r-pill);padding:0 7px;font-size:10.5px;margin-left:5px}
.btn.primary.faint{opacity:.55}
.extra{background:#EEF5EE;border:1px solid #D8E8D2;border-left:3px solid var(--leaf);border-radius:var(--r-sm);
  padding:10px 14px;font-size:13px;margin-top:12px;color:var(--ink)}
.extra .t{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#5c7d2b;margin-bottom:5px;font-weight:600}
.extra div{margin:2px 0}
/* T8f — public-domain figures inside the extra block */
.exfig{margin:10px 0 0;padding:0}
.exfig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.exfig figcaption{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.4}
.exfig .figsrc{display:block;color:var(--ink-3);opacity:.85;font-style:italic}
.devnote{margin-top:8px;font-size:11px;color:var(--draft);background:#F3EEF8;border:1px dashed #D9C9EC;
  border-radius:8px;padding:6px 10px;letter-spacing:.01em}

/* Task 3c — stage-pick (one timing per stage) */
.pill.verb-stage-pick{background:var(--cell-sl);border-color:var(--cell-sl);color:#fff}
.stagepick{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.stage{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--sunk)}
.stagelab{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.stageopts{display:flex;flex-wrap:wrap;gap:6px}
.sopt{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);
  padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:var(--font)}
.sopt:hover{border-color:var(--mid-teal)}
.sopt.sel{border-color:var(--deep-teal);background:var(--teal-50);color:var(--ink)}
.sopt.correct{border-color:var(--ok);background:var(--ok-soft);color:var(--ink)}
.sopt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--ink)}
.sopt:disabled{cursor:default}

/* Task 6a — Sutherland disarticulated-skull tray */
.sut-tray-wrap{margin:10px 0 4px}
.sut-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sut-mode{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sut-grid{display:flex;flex-direction:column;gap:6px}
.sut-row{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:6px;align-items:center;justify-items:center}
.sut-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  cursor:pointer;padding:5px 6px;user-select:none;transition:border-color .15s,background .15s}
.sut-cell:hover{border-color:var(--mid-teal);background:var(--teal-50)}
.sut-cell.empty{border:0;background:transparent;cursor:default;min-height:0}
.sut-cell.placed{opacity:.4;border-style:dashed;cursor:default}
.sut-cell.placed:hover{border-color:var(--line);background:var(--paper)}
.sut-name{font-size:12.5px;color:var(--ink-2);text-align:center;line-height:1.25}
.sut-mini{width:68px;height:68px;object-fit:contain;animation:sutspin 14s linear infinite}
/* Task 2a — the real turntable. 36 frames of the actual OBJ mesh in one strip;
   the cell rests on frame 0 (a three-quarter view) and steps through the strip
   on hover / when armed. Pixel-exact positions, not percentages, so every step
   lands on a frame boundary. 36 x 68px = 2448px. */
.sut-mini3d{width:68px;height:68px;display:block;background-repeat:no-repeat;
  background-size:2448px 68px;background-position:0 0}
.sut-cell:hover .sut-mini3d,.sut-cell.sel .sut-mini3d{animation:sutturn 1.8s steps(36) infinite}
@keyframes sutturn{from{background-position:0 0}to{background-position:-2448px 0}}
.sut-cap{font-size:10px;color:var(--ink-3);text-align:center;line-height:1.15}
/* honest degrade: no miniature asset yet → a labelled silhouette, never a blank */
.sut-silh{width:34px;height:26px;border-radius:46% 46% 40% 40%/58% 58% 34% 34%;
  background:linear-gradient(160deg,var(--cream),#DCD3BE);border:1px solid var(--line-cream);
  animation:sutspin 16s linear infinite}
@keyframes sutspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion: reduce){.sut-mini,.sut-silh,.sut-mini3d,.b3-drag3d{animation:none}}
/* Task 2c — what leaves the tray is the BONE, not a name chip. The dragged
   thing is the same turntable strip, turning continuously while it is in the
   student's hand, so they are carrying a solid over the ghost skull. */
.b3-drag3d{width:88px;height:88px;background-repeat:no-repeat;background-size:3168px 88px;
  background-position:0 0;animation:dragturn 2.2s steps(36) infinite;
  filter:drop-shadow(0 6px 12px rgba(30,58,64,.35))}
@keyframes dragturn{from{background-position:0 0}to{background-position:-3168px 0}}
/* armed + near-miss on a tray cell (the build tray shares the chip vocabulary) */
.sut-cell.sel{border-color:var(--deep-teal);background:var(--teal-50);box-shadow:inset 0 0 0 1px var(--deep-teal)}
.sut-cell.nofit,.tchip.nofit{animation:nofit .3s ease}
@keyframes nofit{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* targets the cranial tray does not lay out (atlas, hyoid) — never unplayable */
.b3-overflow{margin-top:6px}
.b3-overflow .b3-ovlabel{font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-right:4px}

/* Task 5b — articulations: the popup over the model + show-skull dock */
.artic-scrim{position:absolute;inset:0;background:rgba(10,37,49,.42);backdrop-filter:blur(1px);z-index:8}
.artic-pop{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,86%);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-float);
  padding:12px 14px;max-height:86%;overflow-y:auto}
.artic-pop.docked{left:auto;right:14px;top:14px;transform:none;width:min(360px,44%);max-height:calc(100% - 28px)}
.artic-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.artic-pop-body .qcard{box-shadow:none;border:0;padding:4px 2px;margin:0}
.artic-stagewrap{display:none}

/* Task 4e — modality toggle button in the verb row */
.btn.small.modtoggle{border-color:var(--derived);color:var(--derived);margin-left:2px}
.btn.small.modtoggle:hover{background:#EAF2F7;border-color:var(--derived)}

/* ---------- Lesion Patterns (the challenge surface) ----------
   The transport is the viewer's bottom-centre dock: a glass capsule with the
   round play control, floating on the stage rather than sitting in the card. */
/* lives inside #stage, centred on the stage area left of the content column */
.looprow{position:absolute;left:max(30px, calc((100% - 452px) / 2));bottom:30px;
  transform:translateX(-50%);z-index:5;margin:0;display:flex;align-items:center;gap:16px;
  padding:12px 20px;border-radius:32px;background:var(--stage-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-edge);box-shadow:var(--sh-lg);
  width:max-content;max-width:min(452px, calc(100% - 500px));flex-wrap:wrap;row-gap:0;
  padding:12px 20px 14px}
.looprow .loopbtn{width:48px;height:48px;padding:0;border-radius:50%;
  background:var(--deep-teal);border-color:var(--deep-teal);color:#fff;font-size:13px;
  line-height:1;box-shadow:var(--sh-md);flex:none;display:flex;align-items:center;justify-content:center}
.looprow .loopbtn:hover{filter:brightness(1.08);color:#fff;border-color:var(--deep-teal)}
.looprow .loopdiv{width:1px;height:34px;background:var(--line);flex:none}
.looprow .btn.ghost{color:var(--ink-2);text-decoration:none;background:transparent;box-shadow:none;
  border-color:transparent;flex:none}
.looprow .btn.ghost:hover{background:var(--sunk);color:var(--ink);border-color:transparent}
.looprow .faint{color:var(--ink-3);line-height:1.4;font-size:11.5px}
/* the transport proper — one band, always on its own line */
.looprow .loopband{display:flex;align-items:center;gap:16px;flex:1 1 100%}
/* PS-5 — the amplitude control. A native range input, so it arrives
   keyboard-operable and screen-reader-labelled without a custom widget. */
.looprow .ampctl{display:flex;align-items:center;gap:8px;flex:1 1 100%;cursor:pointer;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.looprow .ampctl input[type=range]{width:78px;height:18px;flex:none;cursor:pointer;
  accent-color:var(--deep-teal);background:transparent;margin:0}
.looprow .ampctl input[type=range]:focus-visible{outline:2px solid var(--deep-teal);
  outline-offset:3px;border-radius:9px}
.looprow .ampval{font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
/* the caption is the only flexible item in the row: it takes what is left, and
   drops to its own line rather than collapsing into a one-word column once the
   three controls have taken their width. */
.looprow .loopcap{flex:1 1 100%;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
@media(max-width:860px){
  .looprow{left:50%;bottom:calc(62vh + 16px);max-width:calc(100vw - 36px)}
  .looprow .faint,.looprow .loopdiv{display:none}
  /* …but the amplitude control keeps its own label and read-out: without them
     the slider is an unnamed stick. */
  .looprow .ampctl,.looprow .ampctl .faint{display:flex}
  .looprow .ampctl input[type=range]{width:64px}
}
/* PS-8 — the hint control. Deliberately quiet: it is an opt-in exception to the
   anti-telegraph rule, not a call to action. */
.hintrow{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.hintrow .btn.ghost{color:var(--ink-2);background:transparent;box-shadow:none;
  border:1px solid var(--line);text-decoration:none}
.hintrow .btn.ghost:hover{background:var(--sunk);color:var(--ink)}
.hintrow .btn.ghost[aria-pressed="true"]{background:var(--sunk);color:var(--ink);
  border-color:var(--deep-teal)}

/* the end-of-run recap — derived from the run's rows, never a stored score */
.recap{border-bottom:1px solid var(--line-2);padding-bottom:14px;margin-bottom:14px}
.recapstats{display:flex;gap:10px;margin:10px 0}
.recapstats .stat{flex:1;background:var(--sunk);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:10px 12px;box-shadow:none}
.recapstats .stat .n{font-size:22px;font-weight:700;color:var(--deep-teal);font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.confuse{margin:10px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-2)}
.confuse li{margin:3px 0}
.confuse b{color:var(--ink)}
/* a named deferral in a deck list — visible, disabled, never silent */
.subrow.deferred{opacity:.62}
.subrow.deferred .btn{border-style:dashed;cursor:default;box-shadow:none}
/* the stage's inherited BOW/STERN orientation tags mean nothing beside two
   loose bones — hidden while the pattern loop holds the stage. scene.js drives
   label visibility with inline styles, so this needs the !important to win
   without reaching into the vendored layer. */
body.loopstage .l3d{display:none!important}

/* ---------- explore: part search ---------- */
.searchcard{padding:14px 16px}
.clozeinput.search{width:100%;font-size:14px}
#srhits{display:flex;flex-direction:column;gap:6px;margin-top:8px}
#srhits:empty{margin-top:0}
.srhit{display:block}
.srhit b{font-weight:600}

/* ---------- home ---------- */
.home-hero{margin:0 0 16px;padding:0 4px}
.home-hero h1{font-size:30px;margin:0 0 4px;letter-spacing:-.02em;color:#fff;font-weight:700}
.home-hero h1 .life{color:var(--teal-200)}
.home-hero .tag{color:var(--teal-200);font-size:13.5px;font-family:var(--serif);font-style:italic;
  opacity:.92}
.modcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 18px;margin-bottom:10px;box-shadow:var(--sh-md);cursor:pointer}
.modcard:hover{border-color:var(--mid-teal)}
.modcard h3{margin:0 0 2px;font-size:15.5px}
.modcard .intent{color:var(--ink-2);font-size:12.5px;font-family:var(--serif)}
.modcard .lessons{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.lchip{border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 12px;font-size:12.5px;
  cursor:pointer;color:var(--ink-2);background:var(--sunk)}
.lchip:hover{border-color:var(--deep-teal);color:var(--ink)}
.lchip b{color:var(--deep-teal)}
.statrow{display:flex;gap:10px;margin:12px 0 14px}
.stat{flex:1;background:var(--stage-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-edge);border-radius:var(--r-md);padding:11px 14px;box-shadow:var(--sh-md)}
.stat .n{font-size:22px;font-weight:700;color:var(--deep-teal);font-family:var(--mono);
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat .l{font-size:10.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

/* deck cards — the same frosted pane as a question card */
.deckcard{background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--glass-edge);border-radius:var(--r-lg);
  padding:16px 20px;margin-bottom:12px;box-shadow:var(--sh-float)}
.deckcard h3{margin:0 0 3px;font-size:15.5px;font-weight:700}
.deckcard .intent{color:var(--ink-2);font-size:12.5px;font-family:var(--serif);line-height:1.5}
.deckcard .deckacts{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 4px}
.deckcard .subdecks{margin-top:8px;border-top:1px solid var(--line-2);padding-top:8px}
.subrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0}
.subrow .subname{font-size:13px;color:var(--ink-2)}
.subrow .subname b{color:var(--ink)}
.deckcard.reserved{opacity:.66}
/* the home footer notes sit on the stage, under the cards */
#pbody>p.faint{color:var(--teal-200);opacity:.8;padding:0 4px;font-size:11.5px;line-height:1.6}
#pbody>p.faint .btn{background:var(--stage-glass);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-color:var(--glass-edge)}
.banner:not(.qcard .banner){color:var(--ink)}

/* ---------- timeline surface ---------- */
.tl-band{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
  box-shadow:var(--sh-md);margin-bottom:12px}
.tl-band .bandlab{font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.tl-axis{position:relative;height:6px;background:var(--teal-100);border-radius:3px;margin:26px 6px 14px}
.tl-slots{display:flex;flex-direction:column;gap:8px}
.tl-slot{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--teal-100);border-radius:var(--r-sm);
  padding:8px 12px;min-height:38px;font-size:13.5px;color:var(--ink-3)}
.tl-slot.filled{border-style:solid;border-color:var(--line);color:var(--ink);background:var(--sunk)}
.tl-slot.okc{border-color:var(--ok);background:var(--ok-soft)}
.tl-slot.badc{border-color:var(--bad);background:var(--bad-soft)}
.tl-slot .ord{font-weight:800;color:var(--mid-teal);width:22px}
/* the trace reveal: the full pathway with the site each branch leaves at,
   withheld until the answer is checked (anti-telegraph). */
.tracepath{margin-top:8px;padding:8px 10px;border-left:3px solid var(--mid-teal);
  background:var(--sunk);border-radius:var(--r-sm);font-weight:600;line-height:1.5}
.tl-l1{font-size:12.5px;color:var(--ink-2);font-family:var(--serif);margin-top:3px}
/* T8b — the "show correct timeline" panel */
.tl-correct{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.tl-correct-row{margin-bottom:11px}
.tl-correct-row>b{color:var(--deep-teal)}
.tl-extra{font-size:12px;color:#5c7d2b;margin-top:3px;font-family:var(--serif)}
/* T8c — date-anchored slots + T8c/8d popup question over the band */
.tl-origin{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:10px 0 -8px}
.ord.anch{width:auto;min-width:76px;font-size:12px;font-weight:700;color:var(--deep-teal);letter-spacing:.01em}
.tl-anchsub{font-size:11px;color:var(--ink-3);margin-top:2px}
.tlq-scrim{position:fixed;inset:0;background:rgba(10,37,49,.32);z-index:20}
.tlq-pop{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,88vw);
  max-height:86vh;overflow-y:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-float);padding:12px 14px}
.tlq-pop .qcard{box-shadow:none;border:0;padding:2px;margin:0}

/* review list */
.ritem{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px;margin-bottom:10px}
.unitstate{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ustate{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--ink-2);background:var(--paper)}
.ustate b{color:var(--ink)}
table.log{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
table.log th,table.log td{border-bottom:1px solid var(--line);padding:4px 7px;text-align:left;color:var(--ink-2)}
table.log th{color:var(--ink);font-weight:600}

.rise{animation:rise .32s ease-out}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   THE HOME SURFACE  (2026-08-16, Fable return)

   Home stops being a glass panel over a live skull and becomes its own
   full-width scrolling page: a dark band carrying the brand and the streak,
   one white card overlapping it with today's number and today's single
   action, a quiet progress row, and deck doors ranked by what is due.

   Appended as one block rather than woven into the layout rules above, the
   timeline surface's precedent, so it can be lifted out whole.

   NAMESPACED `hm-`. The atoms the prototype calls .tile / .chip / .subrow
   collide with live classes here — .subrow and .deckcard are still worn by
   Explore's whole-pass list — so every new atom carries the prefix. Same
   tokens, same fonts, same shadows: one visual language, different names.

   Radii: 28px appears literally on the today card and the sheet. The handoff
   caps the new tokens at --band and --board, so this does NOT add an --r-xl
   to the scale for two uses.
   ============================================================ */

/* --- THE SCROLL RELEASE ---------------------------------------------------
   Same lesson as tl-solo, and the same fix: bl.css opens with
   `html,body{height:100%;overflow:hidden}`, correct while the stage is a
   fixed full-viewport canvas. BOTH elements are released — html carries the
   pair, so releasing body alone leaves the root a clamped scroll container
   and everything below the fold is unreachable by a person. tools/scroll-check.js
   asserts this at a constrained 900x700 that is never grown. */
html.home-solo,body.home-solo{height:auto;min-height:100%;overflow:visible}
body.home-solo{background:var(--board)}
body.home-solo .main{display:block;height:auto;min-height:100vh}
body.home-solo #stage{display:none}
body.home-solo .stagecap{display:none}
/* the band carries the identity now, so the floating chrome stands down —
   Explore and Review are doors ON the page, the prototype's own shape */
body.home-solo .top{display:none}
body.home-solo #panel,body.home-solo #panel.wide{
  position:static;inset:auto;width:auto;max-width:none;height:auto;
  padding:0;overflow:visible;background:transparent;
  -webkit-mask-image:none;mask-image:none}

.hm-wrap{max-width:760px;margin:0 auto;padding:0 18px 40px}
.hm-band .hm-wrap{padding-bottom:0}

/* --- the band: identity + streak, no skull -------------------------------- */
.hm-band{background:var(--band);padding:0 0 46px;position:relative;overflow:hidden}
.hm-glow{position:absolute;right:-70px;top:-60px;width:270px;height:270px;border-radius:50%;
  background:radial-gradient(60% 60% at 45% 40%,rgba(233,240,236,.12),rgba(233,240,236,0) 70%);
  pointer-events:none}
.hm-bandrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px}
.hm-brand{display:flex;align-items:center;gap:9px;font:700 12px/1.2 var(--font);
  text-transform:uppercase;letter-spacing:.12em;color:#fff}
.hm-brand .life{color:var(--teal-200)}
.hm-dot{width:22px;height:22px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--cream) 0 50%,var(--mid-teal) 50% 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.hm-tag{margin:18px 0 0;color:var(--teal-200);font:400 15px/1.45 var(--serif);
  font-style:italic;opacity:.92}

/* streak chip — status, not a shout; taps through to Progress */
.hm-streak{display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);border-radius:var(--r-pill);padding:7px 13px 7px 10px;
  cursor:pointer;color:#EAF1F0;font:600 12.5px/1 var(--font);transition:background .15s var(--ease)}
.hm-streak:hover{background:rgba(255,255,255,.16)}
.hm-wkm{display:flex;align-items:flex-end;gap:3px;height:16px}
.hm-wkm i{display:block;width:4px;border-radius:2px;background:var(--teal-200);opacity:.55;height:6px}
.hm-wkm i.q{opacity:1;height:16px;background:#C6DE97}
.hm-wkm i.h2{height:11px}.hm-wkm i.h1{height:8px}
.hm-wkm i.now{opacity:.85;background:rgba(255,255,255,.55)}
.hm-streak u{text-decoration:none;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --- today card: one number, one action ----------------------------------- */
.hm-today{position:relative;z-index:2;margin-top:-34px;background:var(--paper);
  border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh-lg);padding:20px 20px 18px}
.hm-eyeb{font:700 11px/1.2 var(--font);text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3)}
.hm-today .hm-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:10px}
.hm-big{font:600 42px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hm-big.hm-word{font-family:var(--font);font-size:32px}
.hm-big sub{font:600 14px/1 var(--font);vertical-align:baseline;color:var(--ink-3);margin-left:8px}
.hm-split{font:400 13px/1.55 var(--font);color:var(--ink-3);text-align:right}
.hm-split b{color:var(--ink-2);font-weight:600;font-family:var(--mono)}
.hm-cta{margin-top:16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.hm-note{margin-top:11px;font:400 12.5px/1.5 var(--font);color:var(--ink-3)}
.hm-fig{width:92px;height:92px;object-fit:contain;flex:none;align-self:center;
  filter:drop-shadow(0 4px 10px rgba(30,58,64,.18))}

/* the house .btn, re-metricked for a full-width page rather than a glass column */
.hm-page .btn{padding:9px 18px;font-size:13.5px;font-weight:600;box-shadow:var(--sh-sm)}
.hm-page .btn.primary{box-shadow:var(--sh-md)}
.hm-page .btn.small{padding:6px 13px;font-size:12px}
.hm-page .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.hm-page .btn.ghost:hover{color:var(--deep-teal);border-color:transparent}

/* --- the quiet progress row ----------------------------------------------- */
.hm-prog{margin-top:12px;display:flex;align-items:center;gap:12px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;cursor:pointer;
  box-shadow:var(--sh-sm);transition:border-color .15s var(--ease)}
.hm-prog:hover{border-color:var(--mid-teal)}
.hm-page .hm-t{font:600 13.5px/1.3 var(--font)}
.hm-page .hm-s{font:400 12.5px/1.4 var(--font);color:var(--ink-3);margin-top:2px}
.hm-page .hm-s b{color:var(--ink-2);font-family:var(--mono);font-weight:600}
.hm-days{display:flex;gap:4px;margin-left:auto;flex:none}
.hm-days i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:600 9.5px/1 var(--font);font-style:normal;color:var(--ink-3);
  background:var(--sunk);border:1px solid var(--line-2)}
.hm-days i.on{background:var(--ok-soft);border-color:#C6DE97;color:#5c7d2b}
.hm-days i.today{border-color:var(--mid-teal)}
.hm-chev{color:var(--ink-3);flex:none;margin-left:2px}

/* --- deck doors ------------------------------------------------------------ */
.hm-sect{display:flex;align-items:baseline;gap:10px;margin:26px 2px 10px}
.hm-mini{font:400 12px/1.2 var(--font);color:var(--ink-3)}
.hm-tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:16px 18px;margin-bottom:12px}
.hm-tile.reserved{opacity:.66}
.hm-th{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hm-tile h3{margin:0;font:700 16px/1.25 var(--font)}
.hm-intent{margin:5px 0 0;font:400 13.5px/1.5 var(--serif);color:var(--ink-2)}
.hm-draftnote{margin-top:9px;font:400 12px/1.4 var(--font);color:var(--ink-3)}
.hm-chip{flex:none;font:600 12px/1 var(--font);border-radius:var(--r-pill);padding:5px 11px;
  font-variant-numeric:tabular-nums}
.hm-chip.due{background:var(--ok-soft);color:#4c6b21;border:1px solid #C6DE97}
.hm-chip.due u{text-decoration:none;font-family:var(--mono)}
.hm-chip.zero{background:var(--sunk);color:var(--ink-3);border:1px solid var(--line-2)}
.hm-subdecks{margin-top:12px;border-top:1px solid var(--line-2)}
.hm-subrow{display:flex;align-items:center;gap:10px;padding:11px 2px;
  border-bottom:1px solid var(--line-2);cursor:pointer;
  transition:background .12s var(--ease);border-radius:6px}
.hm-subrow:hover{background:var(--teal-50)}
.hm-subrow:last-child{border-bottom:0}
.hm-sn{font:500 13.5px/1.3 var(--font)}
.hm-sm{font:400 12px/1.3 var(--font);color:var(--ink-3);margin-top:1px}
.hm-sm b{font-family:var(--mono);font-weight:500;color:var(--ink-2)}
.hm-sdue{font:600 12px/1 var(--font);color:#5c7d2b;font-variant-numeric:tabular-nums;
  flex:none;white-space:nowrap}
.hm-sdue.zero{color:var(--ink-3);font-weight:400}
/* named deferrals: visible, disabled, never silent */
.hm-subrow.deferred{opacity:.6;cursor:default}
.hm-subrow.deferred:hover{background:transparent}
.hm-pill-def{font:500 11px/1 var(--font);color:var(--ink-3);border:1px dashed var(--line);
  border-radius:var(--r-pill);padding:4px 10px;flex:none}
.hm-deckact{margin-top:12px;display:flex;gap:8px;align-items:center}

/* explore: a plain row — the browse door, not a scheduled deck */
.hm-rowlink{display:flex;align-items:center;gap:12px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;
  cursor:pointer;box-shadow:var(--sh-sm)}
.hm-rowlink:hover{border-color:var(--mid-teal)}
.hm-rowlink .hm-t{font-size:14px}
.hm-rowlink .hm-chev{margin-left:auto}

/* --- the honest foot ------------------------------------------------------- */
.hm-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line-cream);
  font:400 12px/1.65 var(--font);color:var(--ink-3)}
.hm-reset{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hm-reset:hover{color:var(--deep-teal)}
.hm-credits{margin-top:10px;font:400 11.5px/1.5 var(--font);color:var(--ink-3);opacity:.85}
.hm-credits.hm-mid{text-align:center}

/* --- the Progress STUB sheet ----------------------------------------------- */
.hm-scrim{position:fixed;inset:0;background:rgba(10,37,49,.34);z-index:20;backdrop-filter:blur(1px)}
.hm-sheet{position:fixed;z-index:21;left:50%;bottom:0;transform:translateX(-50%);
  width:min(560px,100vw);max-height:88vh;overflow-y:auto;background:var(--board);
  border-radius:28px 28px 0 0;box-shadow:var(--sh-lg);padding:18px 20px 30px}
@media(min-width:760px){.hm-sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:28px}}
.hm-shead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hm-shead h2{margin:0;font:700 17px/1.2 var(--font)}
.hm-stub{font:500 10.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);border:1px dashed var(--warn);border-radius:var(--r-pill);padding:4px 9px}
.hm-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 16px;margin-bottom:11px;box-shadow:var(--sh-sm)}
.hm-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.hm-hd b{font:700 22px/1 var(--mono)}
.hm-hd b i{font:600 12px/1 var(--font);font-style:normal;color:var(--ink-3);margin-left:5px}
.hm-chain{display:flex;align-items:flex-end;gap:3px;height:34px;margin:8px 0 4px}
.hm-chain i{flex:1;border-radius:2.5px;background:var(--line);min-height:4px}
.hm-chain i.q1{background:var(--teal-100);height:33%}
.hm-chain i.q2{background:var(--teal-200);height:66%}
.hm-chain i.q3{background:var(--deep-teal);height:100%}
.hm-chain i.cur{background:repeating-linear-gradient(135deg,var(--teal-200) 0 3px,transparent 3px 6px);
  outline:1px solid #C6DE97;outline-offset:-1px}
.hm-chainax{display:flex;justify-content:space-between;font:500 9.5px/1 var(--font);
  letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.hm-note2{font:400 12px/1.55 var(--font);color:var(--ink-3);margin:9px 0 0}
.hm-note2.hm-flat{margin:0}
.hm-mrow{margin-top:9px}
.hm-mt{display:flex;justify-content:space-between;font:500 12.5px/1.3 var(--font)}
.hm-mt u{text-decoration:none;color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums}
.hm-mbar{display:flex;height:7px;border-radius:4px;background:var(--sunk);overflow:hidden;margin-top:4px}
.hm-mbar i{display:block}
.hm-mbar i.m{background:var(--deep-teal)}
.hm-mbar i.l{background:var(--teal-200)}
.hm-leg{display:flex;gap:14px;margin-top:11px;font:400 11px/1 var(--font);color:var(--ink-3)}
.hm-leg s{text-decoration:none;display:flex;align-items:center;gap:5px}
.hm-leg b{width:9px;height:9px;border-radius:3px}
.hm-achg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.hm-ach{border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px;background:var(--paper)}
.hm-ach b{display:block;font:600 12.5px/1.3 var(--font)}
.hm-ach span{display:block;font:400 11px/1.4 var(--font);color:var(--ink-3);margin-top:2px}
.hm-ach.new{border-color:#C6DE97;background:var(--ok-soft)}
.hm-ach.lock{opacity:.62;border-style:dashed}
.hm-pg{display:inline-block;font:600 10.5px/1 var(--mono);color:var(--ink-2);background:var(--sunk);
  border-radius:var(--r-pill);padding:3px 8px;margin-top:4px}

@media(max-width:420px){
  .hm-big{font-size:38px}
  .hm-days{display:none}          /* the streak chip already carries the week */
}

/* --- add-to-Home-Screen prompt (GTM-6) ------------------------------------
   A bottom-anchored bar, never a modal: no scrim, no blocked stage. It slides
   in after the student's first interaction and, once dismissed, is gone for
   good (js/homescreen.js owns that state). Sits above the panel but below the
   sheets (z 20/21) so it can never cover an open sheet. */
.a2hs{position:fixed;z-index:19;left:50%;bottom:14px;transform:translate(-50%,calc(100% + 24px));
  width:min(560px,calc(100vw - 24px));display:flex;align-items:flex-start;gap:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-float);padding:14px 16px;opacity:0;
  transition:transform .28s var(--ease),opacity .28s var(--ease)}
.a2hs.in{transform:translate(-50%,0);opacity:1}
.a2hs-txt{flex:1;min-width:0}
.a2hs-txt b{display:block;font:700 14px/1.3 var(--font);color:var(--ink);margin-bottom:3px}
.a2hs-txt span{display:block;font:400 12.5px/1.45 var(--font);color:var(--ink-2)}
.a2hs-txt span b{display:inline;font-weight:600;margin:0;font-size:inherit;color:var(--ink)}
.a2hs-act{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:2px}
.a2hs-go{font:600 12.5px/1 var(--font);color:#fff;background:var(--deep-teal);border:0;
  border-radius:var(--r-pill);padding:9px 15px;cursor:pointer}
.a2hs-go:hover{background:var(--teal-700)}
.a2hs-no{font:500 12.5px/1 var(--font);color:var(--ink-3);background:none;border:0;
  padding:9px 6px;cursor:pointer}
.a2hs-no:hover{color:var(--ink-2)}
@media(max-width:620px){
  .a2hs{flex-direction:column;gap:10px}
  .a2hs-act{align-self:flex-end}
}