/* ============================================================
   THE REAGENT ROOM — stylesheet
   System: warm-carbon dark neutral scale, one amber accent (≤5%),
   1px borders as depth, 0-radius containers, 2px radius on
   interactive elements only. No gradients, no shadows, no blur.
   ============================================================ */

:root {
  /* neutral scale — warm porcelain-to-cocoa (Terracotta Dust draw,
     approved-color-palette-bank). Names keep their dark-era roles:
     n950 deepest GROUND, n50 strongest INK. */
  --n950: #F3EBE2;
  --n900: #FAF5F0;
  --n850: #F1E7DB;
  --n800: #E7D9C7;
  --n700: #D9C9B8;
  --n600: #BCA58F;
  --n500: #8D7663;
  --n400: #97836F;
  --n300: #6B5546;
  --n200: #554134;
  --n100: #46342A;
  --n50:  #2C1B17;

  /* semantic */
  --bg: var(--n900);
  --bg-deep: var(--n950);
  --panel: var(--n850);
  --raised: var(--n800);
  --line: var(--n700);
  --line-soft: #E9DFD2;
  --ink: var(--n100);
  --ink-bright: var(--n50);
  --ink-mid: var(--n300);
  --ink-dim: var(--n400);

  /* the ONE accent — deep navy (Prussian blue, chemistry's first
     synthetic pigment; drawn from the approved bank) */
  --acc: #1D3557;
  --acc-press: #122238;
  --acc-ink: #F3F6FA;

  /* the one dark surface: the bench stage, where reactions glow */
  --stage: #16120C;

  /* type — drawn for "a laboratory ledger that learned to perform":
     Zilla Slab (Mozilla's technical slab) display, IBM Plex Sans body,
     IBM Plex Mono for data. Free/open-source, locked for the project. */
  --f-display: "Zilla Slab", "Rockwell", Georgia, serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "Consolas", monospace;

  /* space (4px scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  --r-int: 2px; /* radius: interactive elements only */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* the hidden attribute must always win, even over display rules
   (the result card's display:flex was overriding it) */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

#app { display: flex; height: 100vh; height: 100dvh; }

/* ============ RAIL ============ */
#rail {
  width: 236px;
  flex: 0 0 236px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: var(--s8) 0 var(--s6);
}

.rail-masthead { padding: 0 var(--s6) var(--s8); border-bottom: 1px solid var(--line-soft); }

.rail-eyebrow, .panel-eyebrow, .result-eyebrow, .rank-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}

.rail-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink-bright);
  margin-top: var(--s3);
}

.rail-nav { display: flex; flex-direction: column; padding: var(--s6) 0; flex: 1; }

.rail-link {
  text-align: left;
  padding: var(--s3) var(--s6);
  font-size: 14px;
  color: var(--ink-mid);
  border-left: 2px solid transparent;
}
.rail-link:hover { color: var(--ink-bright); background: var(--n850); }
.rail-link.active { color: var(--ink-bright); border-left-color: var(--acc); background: var(--n850); }

.rail-num { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); margin-right: var(--s2); }
.rail-link.active .rail-num { color: var(--acc); }

.rail-foot { padding: var(--s6) var(--s6) 0; border-top: 1px solid var(--line-soft); }

.rank-name { font-family: var(--f-display); font-size: 19px; color: var(--ink-bright); margin: var(--s1) 0 var(--s2); }

.xp-track { height: 3px; background: var(--n800); }
.xp-fill { height: 100%; width: 0%; background: var(--acc); transition: width 0.6s; }

.xp-readout { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: var(--s2); }

.foot-stats { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: var(--s4); line-height: 1.9; }
.foot-stats b { color: var(--ink-mid); font-weight: 400; }

/* ============ MAIN / VIEWS ============ */
#main { flex: 1; min-width: 0; background: var(--bg); overflow: hidden; }
.view { display: none; height: 100%; }
.view.active { display: block; }

.page-head { padding: var(--s10) var(--s10) var(--s6); max-width: 72ch; }
.page-title { font-family: var(--f-display); font-weight: 400; font-size: 42px; line-height: 1.05; color: var(--ink-bright); margin-top: var(--s2); }
.page-sub { color: var(--ink-mid); margin-top: var(--s3); max-width: 55ch; }

/* ============ LAB ============ */
.lab-grid { display: grid; grid-template-columns: 264px 1fr 300px; height: 100%; }

.shelf { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.obs { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }

.panel-head { padding: var(--s6) var(--s4) var(--s4); border-bottom: 1px solid var(--line-soft); }
.panel-title { font-family: var(--f-display); font-weight: 400; font-size: 21px; color: var(--ink-bright); margin-top: var(--s1); }

.shelf-filters { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.shelf-filter {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 3px 8px; color: var(--ink-dim);
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
}
.shelf-filter:hover { color: var(--ink); border-color: var(--line); }
.shelf-filter.active { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }

.shelf-list { overflow-y: auto; flex: 1; }

.shelf-item {
  display: block; width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.shelf-item:hover { background: var(--n850); }
.shelf-item:active { background: var(--n800); }

.shelf-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.shelf-item-name { font-size: 13.5px; color: var(--ink); }
.shelf-item-formula { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.shelf-item-sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; display: flex; align-items: center; gap: var(--s2); }
.swatch { width: 8px; height: 8px; border: 1px solid var(--line); display: inline-block; flex: 0 0 8px; }
.hazard { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; }
.hazard.h1 { color: var(--ink-dim); }
.hazard.h2 { color: #A8741A; }
.hazard.h3 { color: #8E2F3C; }

/* bench */
.bench { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.bench-canvas-wrap { position: relative; flex: 1; min-height: 0; background: var(--stage); }
#lab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.bench-readouts {
  position: absolute; top: var(--s4); left: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.readout {
  display: flex; align-items: baseline; gap: var(--s3);
  background: var(--bg); border: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  min-width: 148px;
}
.readout-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ink-dim); width: 46px; }
.readout-val { font-family: var(--f-mono); font-size: 14px; color: var(--ink-bright); }

.mix-tags {
  position: absolute; top: var(--s4); right: var(--s4);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1);
  max-width: 240px;
}
.mix-tag {
  font-family: var(--f-mono); font-size: 10.5px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-mid);
  padding: 2px 8px;
}

.bench-controls {
  display: flex; gap: var(--s2); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line); background: var(--bg);
  flex-wrap: wrap;
}
.ctl {
  border: 1px solid var(--line); border-radius: var(--r-int);
  padding: var(--s2) var(--s4);
  font-size: 13px; color: var(--ink);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.ctl:hover { border-color: var(--n600); background: var(--n850); }
.ctl:active { background: var(--n800); }
.ctl.lit { border-color: var(--acc); color: var(--acc); }
.ctl-key {
  font-family: var(--f-mono); font-size: 9px; color: var(--ink-dim);
  border: 1px solid var(--line-soft); padding: 0 4px; border-radius: var(--r-int);
}
.ctl-state { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); }
.ctl.lit .ctl-state { color: var(--acc); }

/* observations */
.obs-log { flex: 1; overflow-y: auto; padding: var(--s3) var(--s4); font-size: 12.5px; }
.obs-entry { padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-mid); }
.obs-entry .t { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); display: block; }
.obs-entry.note { color: var(--ink); }
.obs-entry.warn { color: #A8741A; }
.obs-entry.danger { color: #8E2F3C; }

/* ============ LEARN ============ */
.learn-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }

.lesson-index { padding: 0 var(--s10); max-width: 860px; }
.lesson-row {
  display: flex; align-items: baseline; gap: var(--s6);
  width: 100%; text-align: left;
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--line-soft);
}
.lesson-row:first-child { border-top: 1px solid var(--line-soft); }
.lesson-row:hover { background: var(--n850); }
.lesson-row-num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); width: 28px; flex: 0 0 28px; }
.lesson-row-title { font-family: var(--f-display); font-size: 20px; color: var(--ink-bright); flex: 1; }
.lesson-row-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; }
.lesson-row-meta .done { color: var(--acc); }

.lesson-reader { padding: 0 var(--s10); max-width: 72ch; }
.reader-back { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); padding: var(--s2) 0; }
.reader-back:hover { color: var(--acc); }

/* the way out of a long chapter — sticks to the bottom once you've scrolled
   past the back link at the top. Sticky rather than fixed so it rides inside
   the scroll container and never lands on the mobile bottom tab bar. Pushed
   to the RIGHT so it sits in the empty gutter beside the 72ch reading
   measure instead of covering the prose. */
.lesson-float-back {
  position: sticky;
  bottom: var(--s6);
  z-index: 12;
  display: block;              /* buttons are inline-block; auto margins need block */
  width: max-content;
  margin: 0 var(--s10) 0 auto;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--acc);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-int);
  padding: var(--s2) var(--s4);
}
.lesson-float-back:hover { border-color: var(--acc); background: var(--panel); color: var(--acc-press); }
.lesson-float-back:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@media (max-width: 860px) {
  /* no gutter exists at phone widths, so a floating pill would sit on top of
     the prose. Become a full-width bar instead: it reads as chrome rather
     than as something covering words, and .learn-wrap's 64px bottom padding
     already keeps the end of the chapter clear of it. */
  .lesson-float-back {
    /* form controls resolve width:auto to fit-content even as display:block,
       so the full-width bar needs an explicit 100% */
    width: 100%; margin: 0; bottom: 0;
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    border-top: 1px solid var(--line);
    text-align: left;
    padding: var(--s3) var(--s4);
  }
}
.reader-title { font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ink-bright); margin: var(--s2) 0 var(--s6); }
.reader-section { margin-bottom: var(--s8); }
.reader-h { font-family: var(--f-display); font-size: 21px; font-weight: 400; color: var(--ink-bright); margin-bottom: var(--s3); }
.reader-p { color: var(--ink-mid); margin-bottom: var(--s3); }
.reader-p b { color: var(--ink); font-weight: 700; }
.reader-p .chem { font-family: var(--f-mono); font-size: 0.92em; color: var(--ink); }
.try-it {
  border: 1px solid var(--line); border-left: 2px solid var(--acc);
  padding: var(--s3) var(--s4); margin: var(--s4) 0;
  font-size: 13.5px; color: var(--ink-mid);
}
.try-it .try-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--acc); display: block; margin-bottom: var(--s1); }

/* quiz */
.quiz { border-top: 1px solid var(--line); padding-top: var(--s6); margin-top: var(--s8); }
.quiz-q { margin-bottom: var(--s6); }
.quiz-q-text { color: var(--ink); margin-bottom: var(--s3); }
.quiz-q-num { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); display: block; }
.quiz-opt {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  padding: var(--s2) var(--s3); margin-bottom: var(--s2);
  font-size: 13.5px; color: var(--ink-mid);
}
.quiz-opt:hover { border-color: var(--n600); color: var(--ink); }
.quiz-opt.correct { border-color: var(--acc); color: var(--acc); }
.quiz-opt.wrong { border-color: #8E2F3C; color: #8E2F3C; }
.quiz-opt:disabled { cursor: default; }
.quiz-expl { font-size: 12.5px; color: var(--ink-dim); padding: var(--s2) var(--s3); border-left: 1px solid var(--line); margin-bottom: var(--s3); }
.quiz-score { font-family: var(--f-display); font-size: 24px; color: var(--ink-bright); margin: var(--s6) 0 var(--s2); }

/* ============ ELEMENTS ============ */
.elements-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.ptable-scroll { overflow-x: auto; padding: 0 var(--s10); }
.ptable {
  display: grid;
  grid-template-columns: repeat(18, 44px);
  grid-template-rows: repeat(7, 48px) 14px repeat(2, 48px);
  gap: 3px; width: max-content; padding-bottom: var(--s4);
}
.el {
  width: 44px; height: 48px;
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; line-height: 1.1;
}
.el:hover { border-color: var(--acc); }
.el.sel { border-color: var(--acc); background: var(--n850); }
.el-num { font-family: var(--f-mono); font-size: 8px; color: var(--ink-dim); }
.el-sym { font-family: var(--f-display); font-size: 16px; color: var(--ink-bright); }
.el-cat-dot { width: 14px; height: 2px; margin-top: 3px; }

.element-detail { margin: var(--s6) var(--s10) 0; border: 1px solid var(--line); padding: var(--s6); max-width: 860px; }
.detail-empty { color: var(--ink-dim); font-size: 13px; }
.detail-grid { display: flex; gap: var(--s8); align-items: flex-start; flex-wrap: wrap; }
.detail-tile { border: 1px solid var(--line); width: 128px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 128px; }
.detail-tile .n { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); }
.detail-tile .s { font-family: var(--f-display); font-size: 52px; color: var(--ink-bright); line-height: 1; }
.detail-tile .m { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mid); margin-top: var(--s2); }
.detail-body { flex: 1; min-width: 260px; max-width: 55ch; }
.detail-name { font-family: var(--f-display); font-size: 28px; color: var(--ink-bright); }
.detail-cat { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; margin: var(--s1) 0 var(--s3); }
.detail-fact { color: var(--ink-mid); font-size: 14px; }
.detail-props { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-dim); margin-top: var(--s3); line-height: 2; }
.detail-props b { color: var(--ink-mid); font-weight: 400; }

.ptable-legend { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); padding: var(--s4) var(--s10) 0; font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); }
.ptable-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ptable-legend i { width: 12px; height: 3px; display: inline-block; }

/* ============ JOURNAL ============ */
.journal-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.journal-badges { padding: 0 var(--s10) var(--s6); display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 860px; }
.badge {
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  padding: var(--s2) var(--s3);
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim);
}
.badge.earned { border-color: var(--acc); color: var(--acc); }

/* the specimen board — the collection, seen rather than listed */
.journal-board { margin: 0 var(--s10) var(--s2); max-width: 860px; width: auto; }
#journal-board-note { padding: 0 var(--s10); max-width: 72ch; margin-bottom: var(--s6); }
.disc-flash { background: var(--panel); }

.journal-list { padding: 0 var(--s10); max-width: 860px; }
.disc-row { display: flex; gap: var(--s6); align-items: baseline; padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line-soft); }
.disc-row:first-child { border-top: 1px solid var(--line-soft); }
.disc-row.locked { opacity: 0.45; }
.disc-num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); width: 28px; flex: 0 0 28px; }
.disc-name { font-family: var(--f-display); font-size: 19px; color: var(--ink-bright); flex: 1; }
.disc-row.locked .disc-name { color: var(--ink-dim); }
.disc-eq { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); }

/* ============ RESULT CARD ============ */
.result-card {
  position: fixed; inset: 0;
  background: rgba(44, 27, 23, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.result-inner {
  background: var(--panel); border: 1px solid var(--line);
  max-width: 520px; width: calc(100% - 48px);
  padding: var(--s8);
}
.result-title { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink-bright); margin: var(--s2) 0 var(--s4); }
.result-eq { font-family: var(--f-mono); font-size: 13px; color: var(--acc); padding: var(--s3) var(--s4); border: 1px solid var(--line-soft); margin-bottom: var(--s4); overflow-x: auto; white-space: nowrap; }
.result-body { color: var(--ink-mid); margin-bottom: var(--s3); }
.result-safety { font-size: 13px; color: #A8741A; border-left: 1px solid #A8741A; padding-left: var(--s3); margin-bottom: var(--s4); }
.result-xp { font-family: var(--f-mono); font-size: 12px; color: var(--acc); margin-bottom: var(--s6); }
.result-close { border-color: var(--acc); color: var(--acc); }

/* ============ TOAST ============ */
.toast {
  position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--acc);
  color: var(--ink-bright);
  font-family: var(--f-mono); font-size: 12px;
  padding: var(--s3) var(--s6);
  z-index: 60;
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--n700); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--n600); }

/* shake on explosion */
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 4px); }
  20% { transform: translate(7px, -5px); }
  30% { transform: translate(-6px, -4px); }
  40% { transform: translate(6px, 5px); }
  50% { transform: translate(-5px, 2px); }
  60% { transform: translate(4px, -3px); }
  70% { transform: translate(-3px, 3px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}
.shaking { animation: shake 0.55s linear; }

@media (max-width: 1100px) {
  .lab-grid { grid-template-columns: 220px 1fr 240px; }
}

/* ============ SOUND TOGGLE ============ */
.sound-toggle {
  margin-top: var(--s4);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-dim);
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  padding: var(--s1) var(--s3);
}
.sound-toggle:hover { color: var(--ink); border-color: var(--line); }
.sound-toggle.off { color: var(--ink-dim); text-decoration: line-through; }

/* ============ GUIDED STRIP (on the bench) ============ */
.guided-strip {
  border-top: 1px solid var(--acc);
  background: var(--bg);
  padding: var(--s3) var(--s4);
}
.gs-top { display: flex; align-items: baseline; gap: var(--s4); }
.gs-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--acc); }
.gs-progress { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); flex: 1; }
.gs-abort { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-dim); }
.gs-abort:hover { color: #8E2F3C; }
.gs-step { color: var(--ink); font-size: 14px; margin-top: var(--s1); }
.gs-step .gs-dev { font-family: var(--f-mono); font-size: 10.5px; color: #A8741A; margin-left: var(--s3); }

/* ============ GUIDED INDEX ============ */
.guided-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.guided-index { padding: 0 var(--s10); max-width: 860px; }
.gd-row {
  display: flex; align-items: baseline; gap: var(--s6);
  width: 100%; text-align: left;
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--line-soft);
}
.gd-row:first-child { border-top: 1px solid var(--line-soft); }
.gd-row:hover { background: var(--n850); }
.gd-num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); width: 28px; flex: 0 0 28px; }
.gd-main { flex: 1; }
.gd-title { font-family: var(--f-display); font-size: 20px; color: var(--ink-bright); }
.gd-blurb { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; max-width: 55ch; }
.gd-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; }
.gd-meta .grade { color: var(--acc); }

/* ============ SPECIMEN RACK ============ */
.rack {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.rack-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ink-dim); }
.tube-row { display: flex; gap: var(--s2); align-items: flex-end; }
.tube {
  width: 16px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 0 0 7px 7px; /* apparatus illustration, not a container */
  position: relative;
  background: transparent;
  padding: 0;
}
.tube:hover { border-color: var(--acc); }
.tube .tube-fill {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 55%;
  border-radius: 0 0 6px 6px;
}
.tube.empty { opacity: 0.4; }
.ctl-small { font-size: 11.5px; padding: 3px var(--s3); }

/* ============ BALANCER ============ */
.balance-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.puzzle-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); padding: 0 var(--s10) var(--s4); max-width: 860px; }
.puzzle-tab {
  font-family: var(--f-mono); font-size: 11px;
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  padding: var(--s1) var(--s3); color: var(--ink-dim);
}
.puzzle-tab:hover { color: var(--ink); border-color: var(--line); }
.puzzle-tab.active { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.puzzle-tab.solved { color: var(--acc); border-color: var(--acc); }
.puzzle-tab.solved.active { color: var(--acc-ink); }

.puzzle-area { padding: 0 var(--s10); max-width: 860px; }
.pz-name { font-family: var(--f-display); font-size: 24px; color: var(--ink-bright); margin-bottom: var(--s6); }
.pz-eq { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s8); }
.pz-term { display: flex; align-items: center; gap: var(--s2); }
.pz-coef { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pz-coef-val { font-family: var(--f-mono); font-size: 22px; color: var(--acc); min-width: 30px; text-align: center; }
.pz-btn {
  font-family: var(--f-mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-int);
  width: 30px; height: 20px; line-height: 1; color: var(--ink-mid);
}
.pz-btn:hover { border-color: var(--acc); color: var(--acc); }
.pz-formula { font-family: var(--f-mono); font-size: 20px; color: var(--ink-bright); }
.pz-op { font-family: var(--f-mono); font-size: 18px; color: var(--ink-dim); }
.pz-counts { border: 1px solid var(--line-soft); max-width: 480px; margin-bottom: var(--s6); }
.pz-count-row { display: flex; border-bottom: 1px solid var(--line-soft); }
.pz-count-row:last-child { border-bottom: none; }
.pz-count-row > span { padding: var(--s2) var(--s3); font-family: var(--f-mono); font-size: 12.5px; }
.pz-el { width: 64px; color: var(--ink); border-right: 1px solid var(--line-soft); }
.pz-l, .pz-r { width: 90px; color: var(--ink-mid); }
.pz-ok { color: var(--acc); }
.pz-bad { color: #8E2F3C; }
.pz-verdict { font-family: var(--f-display); font-size: 19px; color: var(--ink-bright); margin-bottom: var(--s4); min-height: 28px; }
.pz-verdict.solved { color: var(--acc); }
.pz-hintline { font-size: 12.5px; color: var(--ink-dim); max-width: 55ch; }

/* ============ MOLECULES ============ */
.molecules-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.mol-chips { display: flex; flex-wrap: wrap; gap: var(--s1); padding: 0 var(--s10) var(--s4); max-width: 860px; }
.mol-chip {
  font-family: var(--f-mono); font-size: 11.5px;
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  padding: var(--s1) var(--s3); color: var(--ink-mid);
}
.mol-chip:hover { color: var(--ink); border-color: var(--line); }
.mol-chip.active { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.mol-stage { display: flex; gap: var(--s6); padding: 0 var(--s10); max-width: 980px; flex-wrap: wrap; }
.mol-canvas { border: 1px solid var(--line); background: var(--panel); flex: 0 0 380px; height: 320px; display: flex; align-items: center; justify-content: center; }
.mol-canvas svg { display: block; }
.mol-info { flex: 1; min-width: 280px; max-width: 55ch; }
.mol-name { font-family: var(--f-display); font-size: 26px; color: var(--ink-bright); }
.mol-formula { font-family: var(--f-mono); font-size: 13px; color: var(--acc); margin: var(--s1) 0 var(--s3); }
.mol-desc { color: var(--ink-mid); font-size: 14px; }
.mol-props { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-dim); margin-top: var(--s3); line-height: 2; }

/* ============ TEACHER'S DESK ============ */
.teacher-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.teacher-cols { display: flex; gap: var(--s6); padding: 0 var(--s10); max-width: 1060px; flex-wrap: wrap; }
.teacher-panel { flex: 1; min-width: 320px; border: 1px solid var(--line); padding: var(--s6); }
.t-label { display: block; font-size: 12.5px; color: var(--ink-mid); margin: var(--s4) 0 var(--s2); }
.t-input {
  width: 100%; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-int);
  color: var(--ink-bright); font: inherit; padding: var(--s2) var(--s3);
}
.t-input:focus { outline: none; border-color: var(--acc); }
.t-code {
  width: 100%; height: 96px; margin-top: var(--s3);
  background: var(--bg-deep); border: 1px solid var(--line-soft); border-radius: var(--r-int);
  color: var(--ink-mid); font-family: var(--f-mono); font-size: 10.5px;
  padding: var(--s2) var(--s3); resize: vertical;
}
.t-code:focus { outline: none; border-color: var(--line); }
.t-row { display: flex; gap: var(--s2); margin-top: var(--s3); align-items: center; }
.t-note { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: var(--s3); min-height: 16px; }
.teacher-panel .ctl { margin-top: var(--s3); }

.roster-block { padding: var(--s8) var(--s10) 0; max-width: 1060px; }
.roster-summary { font-size: 13px; color: var(--ink-mid); margin: var(--s2) 0 var(--s4); max-width: 65ch; }
.roster-scroll { overflow-x: auto; border: 1px solid var(--line); }
.roster { border-collapse: collapse; width: 100%; min-width: 720px; }
.roster th {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-dim);
  text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.roster td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-mid); }
.roster td.r-name { color: var(--ink-bright); font-family: var(--f-display); font-size: 15px; }
.roster td.r-num { font-family: var(--f-mono); font-size: 12px; }
.roster tr:last-child td { border-bottom: none; }
.roster .r-empty { color: var(--ink-dim); font-size: 12.5px; padding: var(--s6); }

/* ============ LIVE CLASSROOM ============ */
.live-block { margin: 0 var(--s10) var(--s8); max-width: 1060px; border: 1px solid var(--line); border-left: 2px solid var(--acc); padding: var(--s6); }
.live-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.live-demo-tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; color: #A8741A; }
.live-cols { display: flex; gap: var(--s6); margin-top: var(--s4); flex-wrap: wrap; }
.live-panel { flex: 1; min-width: 300px; border: 1px solid var(--line-soft); padding: var(--s4); }
.live-desc { font-size: 13px; color: var(--ink-mid); margin-bottom: var(--s3); max-width: 55ch; }
.live-panel .t-input { margin-bottom: var(--s2); }
.live-join-code { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.3em; }
.live-start { border-color: var(--acc); color: var(--acc); }

.live-code-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-dim); }
.live-code {
  font-family: var(--f-mono); font-size: 54px; letter-spacing: 0.22em;
  color: var(--acc); line-height: 1.1; margin: var(--s2) 0;
}
.live-status { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mid); margin-bottom: var(--s3); }

.live-class-track-wrap { margin-top: var(--s6); }
.live-class-count { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-mid); margin-bottom: var(--s2); }
.live-class-track { height: 6px; }

.live-dash-cols { display: flex; gap: var(--s4); margin-top: var(--s4); flex-wrap: wrap; align-items: flex-start; }
.live-roster-scroll { flex: 2; min-width: 420px; }
.live-roster-scroll .roster { min-width: 560px; }
.r-event { font-size: 12px; color: var(--ink-dim); max-width: 220px; }

.dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; }
.dot.live { background: #5a9a5a; }
.dot.slow { background: #A8741A; }
.dot.idle { background: var(--n600); }

.live-feed-wrap { flex: 1; min-width: 240px; border: 1px solid var(--line-soft); padding: var(--s3) var(--s4); }
.live-feed { max-height: 320px; overflow-y: auto; margin-top: var(--s2); }
.feed-item { font-size: 12px; color: var(--ink-mid); padding: var(--s1) 0; border-bottom: 1px solid var(--line-soft); }
.feed-item .t { font-family: var(--f-mono); font-size: 9px; color: var(--ink-dim); margin-right: var(--s2); }
.feed-item.good { color: var(--ink); }
.feed-item.boom { color: #8E2F3C; }
.feed-item.warn { color: #A8741A; }

.class-bar { margin-top: var(--s4); }
.class-bar-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--acc); margin-bottom: var(--s1); }

/* ============ PRINT REPORT ============ */
.print-report { display: none; }
@media print {
  body { overflow: visible; background: #fff; /* design-ignore: print media — paper is white, tinted bg wastes ink */ }
  #app, .toast, .result-card { display: none !important; }
  .print-report {
    display: block;
    color: #1a1610;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt; line-height: 1.5;
    padding: 0.25in;
  }
  .pr-eyebrow { font-family: "Courier New", monospace; font-size: 8pt; letter-spacing: 0.2em; color: #555; }
  .pr-title { font-size: 24pt; margin: 4pt 0 2pt; font-weight: 400; }
  .pr-sub { font-size: 10pt; color: #444; margin-bottom: 16pt; }
  .pr-h { font-size: 14pt; margin: 16pt 0 6pt; border-bottom: 1pt solid #999; padding-bottom: 2pt; font-weight: 400; }
  .print-report table { border-collapse: collapse; width: 100%; font-size: 10pt; }
  .print-report th { text-align: left; border-bottom: 1pt solid #333; padding: 3pt 6pt; font-weight: 700; }
  .print-report td { border-bottom: 0.5pt solid #bbb; padding: 3pt 6pt; vertical-align: top; }
  .pr-eq { font-family: "Courier New", monospace; font-size: 9pt; }
  .pr-badges { font-family: "Courier New", monospace; font-size: 9pt; }
  .pr-sign { margin-top: 28pt; display: flex; gap: 40pt; }
  .pr-sign span { border-top: 0.5pt solid #333; padding-top: 3pt; font-size: 9pt; width: 180pt; }
}

/* ============================================================
   MOBILE — below 860px the rail becomes a bottom tab bar and
   the lab stacks: bench on top, reagent strip, observations.
   ============================================================ */
@media (max-width: 860px) {

  #app { flex-direction: column; }
  #main { order: 1; flex: 1; min-height: 0; }

  /* rail → bottom tab bar + compact rank strip */
  #rail {
    order: 2; width: 100%; flex: none;
    border-right: none; border-top: 1px solid var(--line);
    padding: 0; flex-direction: column;
  }
  .rail-masthead { display: none; }
  .rail-nav { flex-direction: row; overflow-x: auto; padding: 0; -webkit-overflow-scrolling: touch; }
  .rail-link {
    border-left: none; border-top: 2px solid transparent;
    white-space: nowrap; padding: var(--s3) var(--s4);
    font-size: 12.5px; flex: none;
  }
  .rail-link.active { border-left-color: transparent; border-top-color: var(--acc); }
  .rail-foot {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s1) var(--s3); border-top: 1px solid var(--line-soft);
  }
  .rank-block { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; }
  .rank-label, .xp-readout, .foot-stats { display: none; }
  .rank-name { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xp-track { flex: 1; min-width: 40px; }
  .class-bar { margin-top: 0; flex: 1; min-width: 0; }
  .class-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sound-toggle { margin-top: 0; flex: none; }

  /* lab view stacks */
  .lab-grid { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
  .bench { order: 1; flex: 1 1 auto; min-height: 0; }
  .bench-canvas-wrap { min-height: 240px; }
  .shelf {
    order: 2; flex: none;
    border-right: none; border-top: 1px solid var(--line);
  }
  .shelf .panel-head { display: none; }
  .shelf-filters { padding: var(--s2) var(--s3); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shelf-filter { flex: none; }
  .shelf-list { display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .shelf-item {
    flex: 0 0 156px; width: 156px;
    border-bottom: none; border-right: 1px solid var(--line-soft);
  }
  .obs {
    order: 3; flex: none; max-height: 20vh;
    border-left: none; border-top: 1px solid var(--line);
  }
  .obs .panel-head { display: none; }
  .obs-log { font-size: 11.5px; }

  /* bench overlays, controls, rack */
  .bench-readouts { top: var(--s2); left: var(--s2); gap: var(--s1); }
  .readout { min-width: 118px; padding: 3px var(--s2); }
  .readout-label { width: 36px; font-size: 8px; }
  .readout-val { font-size: 11.5px; }
  .mix-tags { top: var(--s2); right: var(--s2); max-width: 150px; }
  .mix-tag { font-size: 9px; }
  .bench-controls { padding: var(--s2) var(--s3); gap: var(--s1); }
  .ctl { padding: var(--s2) var(--s3); font-size: 12.5px; }
  .ctl-key { display: none; } /* keyboard hints are noise on touch */
  .rack { flex-wrap: wrap; padding: var(--s2) var(--s3); }

  /* generic page framing */
  .page-head { padding: var(--s6) var(--s4) var(--s4); }
  .page-title { font-size: 30px; }
  .lesson-index, .lesson-reader, .guided-index,
  .puzzle-tabs, .puzzle-area,
  .mol-chips, .mol-stage,
  .journal-badges, .journal-list,
  .teacher-cols, .roster-block,
  .ptable-scroll, .ptable-legend,
  .live-block { padding-left: var(--s4); padding-right: var(--s4); }
  .live-block { margin-left: var(--s4); margin-right: var(--s4); }
  .element-detail { margin-left: var(--s4); margin-right: var(--s4); padding: var(--s4); }

  .lesson-row { gap: var(--s3); }
  .lesson-row-title { font-size: 17px; }
  .gd-row { gap: var(--s3); flex-wrap: wrap; }

  /* molecules */
  .mol-canvas { flex: 1 1 100%; height: auto; padding: var(--s3); }
  .mol-canvas svg { max-width: 100%; height: auto; }

  /* live classroom + teacher desk */
  .live-code { font-size: 38px; }
  .live-panel, .teacher-panel { min-width: 0; width: 100%; }
  .live-roster-scroll { min-width: 0; width: 100%; }
  .live-feed { max-height: 200px; }

  /* result card */
  .result-inner { padding: var(--s6); max-height: 88vh; overflow-y: auto; width: calc(100% - 24px); }
  .result-title { font-size: 24px; }
}

/* ============================================================
   MOBILE PASS 2 — space budget, nav grid, readout strip,
   collapsible field notes, touch behavior, PWA polish.
   ============================================================ */

/* base (all sizes) */
button, .ctl, .rail-link, .shelf-item, .el, .quiz-opt { touch-action: manipulation; }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
.rl-short { display: none; }
.obs-toggle { display: none; }

@media (max-width: 860px) {

  /* --- bottom nav: 4×2 grid, short labels, every tab visible --- */
  .rail-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
  .rail-link {
    text-align: center;
    padding: var(--s2) var(--s1);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rail-num, .rl-full { display: none; }
  .rl-short { display: inline; }

  /* --- readouts: slim full-width strip instead of floating boxes --- */
  .bench-readouts {
    top: 0; left: 0; right: 0;
    flex-direction: row; gap: 0;
  }
  .readout {
    flex: 1; min-width: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    border: none; border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line-soft);
    background: rgba(250, 245, 240, 0.94);
    padding: 3px var(--s2) 4px;
  }
  .readout:last-child { border-right: none; }
  .readout-label { width: auto; font-size: 7.5px; }
  .readout-val { font-size: 11px; white-space: nowrap; }

  .mix-tags { top: 42px; right: var(--s1); max-width: 46%; max-height: 76px; overflow: hidden; }

  /* --- field notes: collapsed one-line ticker, tap to expand --- */
  .obs { max-height: none; }
  .obs-toggle {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; text-align: left;
    padding: var(--s2) var(--s3);
  }
  .obs-toggle-label { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--ink-dim); flex: none; }
  .obs-latest { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obs-caret { font-size: 8px; color: var(--ink-dim); flex: none; transition: transform 0.2s; }
  .obs.open .obs-caret { transform: rotate(180deg); }
  .obs:not(.open) .obs-log { display: none; }
  .obs.open .obs-log { max-height: 38vh; }

  /* --- tighter bench chrome --- */
  .bench-canvas-wrap { min-height: 200px; }
  .bench-controls { padding: var(--s1) var(--s2); }
  .rack { padding: var(--s1) var(--s2) var(--s2); }
  .guided-strip { padding: var(--s2) var(--s3); }

  /* --- shelf slimmer --- */
  .shelf-item { flex: 0 0 148px; width: 148px; padding: var(--s2) var(--s3); }

  /* --- periodic table: smaller tiles, more visible per screen --- */
  .ptable { grid-template-columns: repeat(18, 38px); grid-template-rows: repeat(7, 42px) 12px repeat(2, 42px); }
  .el { width: 38px; height: 42px; }
  .el-sym { font-size: 13px; }

  /* --- toast sits above the bottom nav --- */
  .toast { bottom: 128px; max-width: calc(100% - 32px); text-align: center; }
}

/* ============================================================
   TIER II markers
   ============================================================ */
.lesson-tier-head {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-dim);
  padding: var(--s6) var(--s2) var(--s2);
}
.lesson-tier-head:first-child { padding-top: 0; }
.adv-mark {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.08em;
  color: var(--acc); margin-left: 4px; vertical-align: 1px;
}
.puzzle-tab.active .adv-mark { color: var(--acc-ink); }

/* ============================================================
   MOBILE PASS 3 — touch truths: iOS input zoom, sticky hover,
   safe areas, landscape, momentum scrolling, tab bar at true bottom.
   ============================================================ */

/* touch devices: hover styles must not stick after a tap */
@media (hover: none) {
  .shelf-item:hover, .lesson-row:hover, .gd-row:hover, .rail-link:hover { background: none; color: var(--ink-mid); }
  .rail-link:hover { color: var(--ink-mid); }
  .rail-link.active:hover, .rail-link.active { color: var(--ink-bright); background: var(--n850); }
  .shelf-item:active, .lesson-row:active, .gd-row:active { background: var(--n800); }
  .ctl:hover { border-color: var(--line); background: none; }
  .ctl.lit:hover, .ctl.lit { border-color: var(--acc); }
  .ctl:active { background: var(--n800); border-color: var(--n600); }
  .el:hover { border-color: var(--line-soft); }
  .el.sel:hover, .el.sel { border-color: var(--acc); }
  .quiz-opt:hover { border-color: var(--line-soft); color: var(--ink-mid); }
  .quiz-opt.correct:hover, .quiz-opt.correct { border-color: var(--acc); color: var(--acc); }
  .quiz-opt.wrong:hover, .quiz-opt.wrong { border-color: #8E2F3C; color: #8E2F3C; }
}

@media (max-width: 860px) {
  /* iOS zooms any focused input under 16px — deny it the excuse */
  .t-input, .t-code { font-size: 16px; }

  /* tab bar at the true bottom edge: rank strip above, tabs below,
     with breathing room for the iPhone home indicator */
  #rail { flex-direction: column; }
  .rail-foot { order: 1; border-top: none; border-bottom: 1px solid var(--line-soft); }
  .rail-nav { order: 2; padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* momentum scrolling everywhere it matters */
  .obs-log, .shelf-list, .ptable-scroll, .learn-wrap, .guided-wrap,
  .balance-wrap, .elements-wrap, .molecules-wrap, .journal-wrap,
  .teacher-wrap, .live-feed, .roster-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .lesson-tier-head { padding-left: var(--s2); }
}

/* short landscape phones: reclaim every vertical pixel */
@media (max-width: 950px) and (max-height: 500px) {
  .rail-nav { grid-template-columns: repeat(8, 1fr); }
  .rail-link { font-size: 10px; padding: var(--s1); }
  .rail-foot { display: none; }
  .rack { padding: 2px var(--s2); }
  .rack-label { display: none; }
  .obs.open .obs-log { max-height: 30vh; }
  .shelf-item { flex: 0 0 132px; width: 132px; }
  .shelf-item-sub { display: none; }
  .shelf-filters { display: none; }
  .bench-canvas-wrap { min-height: 150px; }
  .bench-readouts { position: absolute; }
  .readout-label { display: none; }
  .page-head { padding: var(--s3) var(--s4) var(--s2); }
  .page-title { font-size: 22px; }
  .page-sub { display: none; }
}

/* ============================================================
   LESSON BUILDER + LESSON IMPORT
   ============================================================ */
.lesson-import { display: flex; gap: var(--s2); margin-top: var(--s4); max-width: 480px; }
.lesson-import .t-input { flex: 1; }

.builder-block { padding: var(--s8) var(--s10) 0; max-width: 860px; }
.builder-block .page-sub { margin: var(--s2) 0 var(--s4); }
.builder-empty { font-size: 13px; color: var(--ink-dim); margin-bottom: var(--s3); }

.builder-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.builder-row:first-child { border-top: 1px solid var(--line-soft); }
.builder-row-title { font-family: var(--f-display); font-size: 17px; color: var(--ink-bright); }
.builder-row-meta { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); margin-left: var(--s2); }
.builder-row-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }
.builder-share-code { margin: var(--s2) 0; height: 64px; }

#builder-form { border: 1px solid var(--line); border-left: 2px solid var(--acc); padding: var(--s6); margin-top: var(--s4); }
.bf-field { margin-bottom: var(--s3); }
.bf-area { resize: vertical; font-family: var(--f-body); }
.bf-subhead { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-dim); margin: var(--s6) 0 var(--s3); font-weight: 400; }
.bf-box { border: 1px solid var(--line-soft); padding: var(--s4); margin-bottom: var(--s3); }
.bf-box-head { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: var(--s3); display: flex; justify-content: space-between; }
.bf-remove { font-family: var(--f-mono); font-size: 9px; color: var(--ink-dim); text-decoration: underline; }
.bf-remove:hover { color: #8E2F3C; }
.bf-opt-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.bf-radio { accent-color: #1D3557; flex: none; width: 15px; height: 15px; }
.bf-hint { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); margin: 2px 0 var(--s3); }
.bf-save-row { margin-top: var(--s6); }

@media (max-width: 860px) {
  .builder-block { padding-left: var(--s4); padding-right: var(--s4); }
  .lesson-import { flex-direction: column; max-width: none; }
}

/* ============================================================
   COLLEGE LAB + PROBLEM SETS
   ============================================================ */
.college-wrap, .problems-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.inst-tabs, .pset-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); padding: 0 var(--s10) var(--s4); max-width: 860px; }
.inst-area, .pset-area { padding: 0 var(--s10); max-width: 860px; }
.inst-head { margin-bottom: var(--s4); }
.inst-desc { color: var(--ink-mid); font-size: 13.5px; max-width: 60ch; margin-top: var(--s2); }
.inst-detail { color: var(--ink-mid); font-size: 13.5px; margin: var(--s3) 0; max-width: 60ch; }
.inst-detail b { color: var(--ink-bright); font-weight: 400; font-family: var(--f-mono); }
.inst-verdict { font-family: var(--f-display); font-size: 17px; color: var(--ink); margin: var(--s3) 0; min-height: 22px; }
.inst-verdict.good { color: var(--acc); }
.inst-ro { margin-bottom: var(--s2); }

/* titration */
.titr-grid { display: flex; gap: var(--s6); margin-top: var(--s4); flex-wrap: wrap; align-items: flex-start; }
.titr-left { flex: 0 0 260px; }
.titr-right { flex: 1; min-width: 300px; border: 1px solid var(--line); padding: var(--s2); }
.titr-right canvas { display: block; width: 100%; height: auto; }
.titr-btns { margin: var(--s3) 0; flex-wrap: wrap; }
#titr-end { margin-bottom: var(--s3); }

/* beer's law */
.beer-table { max-width: 420px; margin-bottom: var(--s4); border: 1px solid var(--line); }

/* electrochem */
.cell-sel { max-width: 240px; }
.cell-diagram {
  display: flex; align-items: stretch; gap: var(--s3);
  border: 1px solid var(--line); padding: var(--s4); margin: var(--s4) 0;
  max-width: 560px;
}
.cell-electrode { flex: 1; border: 1px solid var(--line-soft); padding: var(--s3); text-align: center; }
.cell-el-name { font-family: var(--f-display); font-size: 34px; color: var(--ink-bright); }
.cell-el-role { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); line-height: 1.8; margin-top: var(--s2); }
.cell-wire { flex: 0 0 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); }
.cell-arrow { font-family: var(--f-mono); font-size: 12px; color: var(--acc); }
.cell-voltage { font-family: var(--f-mono); font-size: 22px; color: var(--ink-bright); border: 1px solid var(--line); padding: 2px 10px; }
.cell-bridge { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--ink-dim); }

/* problem sets */
.pset-scoreline { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: var(--s3); }
.pset-q { color: var(--ink); font-size: 15.5px; max-width: 60ch; margin-bottom: var(--s4); }
.pset-q b { color: var(--ink-bright); font-family: var(--f-mono); font-size: 0.95em; }
.pset-unit { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); }
.pset-input { max-width: 200px; font-family: var(--f-mono); }
.pset-steps { border-left: 1px solid var(--line); padding-left: var(--s4); margin-top: var(--s3); max-width: 60ch; }
.pset-step { font-size: 13px; color: var(--ink-mid); padding: var(--s1) 0; }
.pset-step b { color: var(--ink); font-family: var(--f-mono); font-size: 0.95em; }
.pset-step-n { font-family: var(--f-mono); font-size: 9.5px; color: var(--acc); margin-right: var(--s2); }

@media (max-width: 860px) {
  .rail-nav { grid-template-columns: repeat(5, 1fr); }
  .inst-tabs, .pset-tabs, .inst-area, .pset-area { padding-left: var(--s4); padding-right: var(--s4); }
  .titr-left { flex: 1 1 100%; }
  .cell-diagram { flex-direction: column; }
  .cell-wire { flex: none; padding: var(--s2) 0; }
}
@media (max-width: 950px) and (max-height: 500px) {
  .rail-nav { grid-template-columns: repeat(10, 1fr); }
}

/* ============================================================
   HOME — editorial stack, left-anchored, one action
   ============================================================ */
.home-wrap { height: 100%; overflow-y: auto; }
.home-stack { max-width: 72ch; padding: var(--s16) var(--s10) var(--s16); }
.home-display {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 64px); line-height: 1.04;
  color: var(--ink-bright);
  margin: var(--s4) 0 var(--s6);
}
.home-lede { color: var(--ink-mid); font-size: 16.5px; max-width: 52ch; margin-bottom: var(--s8); }
.home-cta {
  font-size: 16px; color: var(--acc-ink); background: var(--acc);
  border: 1px solid var(--acc); border-radius: var(--r-int);
  padding: var(--s3) var(--s8);
}
.home-cta:hover { background: var(--acc-press); border-color: var(--acc-press); }
.home-index { margin-top: var(--s12); }
.home-index-head {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-dim); padding: var(--s6) 0 var(--s2);
}
.home-row {
  display: block; width: 100%; text-align: left;
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--line-soft);
}
.home-row:first-of-type { border-top: 1px solid var(--line-soft); }
.home-row:hover { background: var(--panel); }
.home-row-t { display: block; font-family: var(--f-display); font-size: 20px; color: var(--ink-bright); }
.home-row-d { display: block; font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.home-stats { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: var(--s12); line-height: 2; }
.rail-masthead { cursor: pointer; }

/* landing sections — editorial rhythm, left-anchored */
.home-kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--ink-dim); margin-top: var(--s4);
}
.home-section { margin-top: var(--s16); }
.home-h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.1;
  color: var(--ink-bright); margin: var(--s2) 0 var(--s4);
}
.home-prose { color: var(--ink-mid); font-size: 15px; max-width: 58ch; margin-bottom: var(--s4); }

/* the spec ledger — numbers as an index, not a stats row */
.spec-ledger { margin-top: var(--s6); }
.spec-row {
  display: grid; grid-template-columns: 56px 168px 1fr;
  column-gap: var(--s3); align-items: baseline;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--line-soft);
}
.spec-row:first-child { border-top: 1px solid var(--line-soft); }
.spec-n { font-family: var(--f-mono); font-size: 20px; color: var(--ink-bright); text-align: right; }
.spec-t { font-family: var(--f-display); font-size: 16px; color: var(--ink); }
.spec-d { font-size: 13px; color: var(--ink-dim); }

/* floor-plan rows — numbered doors */
.fp-row { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s2); align-items: baseline; }
.fp-num { font-family: var(--f-mono); font-size: 12px; color: var(--ink-dim); grid-row: span 2; }
.fp-row .home-row-d { grid-column: 2; }

/* house rules */
.prin-row { padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.prin-row:first-of-type { border-top: 1px solid var(--line-soft); }
.prin-t { font-family: var(--f-display); font-size: 20px; color: var(--ink-bright); }
.prin-d { font-size: 13.5px; color: var(--ink-mid); margin-top: 2px; max-width: 55ch; }

/* the teacher link — an underlined action, not a second CTA */
.home-row.home-link, .home-row.home-link:first-of-type {
  display: inline-block; width: auto;
  border: none; padding: 0; margin-top: var(--s2);
  font-family: var(--f-display); font-size: 19px; color: var(--acc);
  text-decoration: underline; text-underline-offset: 4px;
}
.home-row.home-link:hover { background: none; color: var(--acc-press); }

/* ============================================================
   TEACHER'S DESK PIN — a privacy screen, not a bank vault
   ============================================================ */
.teacher-wrap { position: relative; }
.pin-gate {
  position: absolute; inset: 0; z-index: 5;
  background: var(--bg);
  padding: var(--s16) var(--s10);
}
.pin-gate-inner { max-width: 46ch; }
.pin-title { font-family: var(--f-display); font-size: 32px; color: var(--ink-bright); margin: var(--s2) 0 var(--s3); }
.pin-note { color: var(--ink-mid); font-size: 13.5px; margin-bottom: var(--s4); }
.pin-input { max-width: 180px; font-family: var(--f-mono); letter-spacing: 0.3em; }
.pin-err { color: #8E2F3C; font-family: var(--f-mono); font-size: 11px; margin-top: var(--s2); min-height: 16px; }
.pin-controls { margin-top: var(--s6); border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
.pin-controls .t-note { margin-top: var(--s2); }

@media (max-width: 860px) {
  .home-stack { padding: var(--s10) var(--s4); }
  .home-display { font-size: 34px; }
  .spec-row { grid-template-columns: 40px 1fr; }
  .spec-row .spec-d { grid-column: 2; }
  .rail-nav { grid-template-columns: repeat(6, 1fr); }
  .pin-gate { padding: var(--s10) var(--s4); }
}
@media (max-width: 950px) and (max-height: 500px) {
  .rail-nav { grid-template-columns: repeat(11, 1fr); }
}

/* ============================================================
   SYNTHESIS ROUTES + GAUNTLET + ACCESSIBILITY PASS 1
   ============================================================ */
.gauntlet-btn { margin-top: var(--s3); }
.synth-eq { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0; }
.synth-mol { font-family: var(--f-mono); font-size: 16px; color: var(--ink-bright); border: 1px solid var(--line); padding: var(--s2) var(--s4); }
.synth-arrow { font-family: var(--f-mono); font-size: 14px; color: var(--acc); }
.inst-area .quiz-opt { max-width: 460px; }
.synth-next { margin: var(--s3) 0; }
.sync-key-box { height: 72px; font-size: 13px; letter-spacing: 0.1em; }

/* keyboard focus is always visible */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* respect vestibular / motion preferences */
@media (prefers-reduced-motion: reduce) {
  .shaking { animation: none; }
  .xp-fill { transition: none; }
  .obs-caret { transition: none; }
}

/* ============================================================
   MOBILE NAV REBUILD — slide-in drawer replaces the bottom grid.
   This block is appended last so it overrides the earlier mobile
   rail rules at equal specificity.
   ============================================================ */
#m-topbar { display: none; }
#m-scrim { display: none; }

@media (max-width: 860px) {
  /* fixed top bar */
  #m-topbar {
    display: flex; align-items: center; gap: var(--s3);
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 70;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0 var(--s3);
    padding-top: env(safe-area-inset-top, 0px);
  }
  #m-menu {
    width: 40px; height: 40px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-int);
  }
  .m-burger, .m-burger::before, .m-burger::after {
    display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
  }
  .m-burger::before, .m-burger::after { content: ""; position: absolute; left: 0; }
  .m-burger::before { top: -6px; }
  .m-burger::after { top: 6px; }
  #m-title { font-family: var(--f-display); font-size: 18px; color: var(--ink-bright); }
  #m-context { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-dim); margin-left: auto; }

  #m-scrim {
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(44, 27, 23, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.22s;
  }
  body.drawer-open #m-scrim { opacity: 1; pointer-events: auto; }

  /* main content clears the fixed bar; no bottom nav anymore */
  #app { flex-direction: column; }
  #main { order: 0; flex: 1; min-height: 0; padding-top: 52px; }

  /* rail becomes an off-canvas drawer */
  #rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(84vw, 320px); height: 100dvh;
    flex-direction: column;
    background: var(--bg);
    border-right: 1px solid var(--line); border-top: none;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  body.drawer-open #rail { transform: none; }

  /* restore the readable vertical nav inside the drawer */
  .rail-masthead { display: block; order: 0; padding: calc(var(--s6) + env(safe-area-inset-top, 0px)) var(--s6) var(--s6); }
  .rail-nav { display: flex; flex-direction: column; grid-template-columns: none; order: 1; padding: var(--s3) 0; overflow: visible; }
  .rail-link {
    text-align: left; white-space: normal;
    border-top: none; border-left: 2px solid transparent;
    padding: var(--s3) var(--s6); font-size: 15px;
  }
  .rail-link.active { border-top-color: transparent; border-left-color: var(--acc); }
  .rail-num { display: inline; margin-right: var(--s2); }
  .rl-full { display: inline; }
  .rl-short { display: none; }

  .rail-foot {
    order: 2; display: block;
    border-top: 1px solid var(--line-soft); border-bottom: none;
    padding: var(--s6) var(--s6) var(--s6);
  }
  .rank-block { display: block; }
  .rank-label, .xp-readout, .foot-stats { display: block; }
  .rank-name { font-size: 19px; margin: var(--s1) 0 var(--s2); white-space: normal; }
  .class-bar { margin-top: var(--s4); }
  .sound-toggle { margin-top: var(--s4); }
}

/* landscape phones: same drawer model, just let content breathe */
@media (max-width: 950px) and (max-height: 500px) {
  #main { padding-top: 48px; }
  #m-topbar { height: 48px; }
}

/* ============================================================
   COLLAPSIBLE SPECIMEN RACK
   ============================================================ */
.rack { flex-direction: column; align-items: stretch; gap: var(--s2); }
.rack-toggle { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left; padding: 0; }
.rack-caret { font-size: 9px; color: var(--ink-dim); transition: transform 0.2s; display: none; }
.rack-body { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

@media (max-width: 860px) {
  .rack-caret { display: inline; }
  .rack:not(.rack-open) .rack-body { display: none; }
  .rack.rack-open .rack-caret { transform: rotate(180deg); }
  .rack { padding: var(--s2) var(--s3); }
}

/* ============================================================
   FORMATION LAB
   ============================================================ */
.formation-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.formation-cols { display: flex; gap: var(--s6); padding: 0 var(--s10); max-width: 1000px; flex-wrap: wrap; align-items: flex-start; }
.formation-index { flex: 0 0 300px; }
.formation-area { flex: 1; min-width: 320px; }
.form-io { font-size: 12.5px; color: var(--ink-mid); margin: var(--s2) 0 var(--s4); }
.form-io-k { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink-dim); }
.form-stage { border: 1px solid var(--line); background: var(--stage); padding: var(--s3); }
.form-stage canvas { display: block; width: 100%; height: auto; }
.form-meter { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.form-meter-track { flex: 1; height: 6px; background: rgba(255,255,255,0.08); }
.form-meter-fill { height: 100%; width: 0%; background: var(--acc); transition: width 0.3s; }
.form-meter-label { font-family: var(--f-mono); font-size: 11px; color: var(--ink-bright); min-width: 52px; text-align: right; }
.form-body { color: var(--ink-mid); font-size: 14.5px; margin: var(--s4) 0 var(--s3); max-width: 60ch; }
.form-fact { color: var(--ink-dim); font-size: 13px; border-left: 1px solid var(--line); padding-left: var(--s3); margin-bottom: var(--s6); max-width: 60ch; }
.form-quiz { border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
.form-quiz .quiz-opt { max-width: 480px; }

@media (max-width: 860px) {
  .formation-cols { padding: 0 var(--s4); }
  .formation-index { flex: 1 1 100%; }
}

/* ============================================================
   STANDARDS TAGS + FILTER, REVIEW BANNER, SHARE/SAFETY, A11Y
   ============================================================ */
/* accessibility: skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--acc); color: var(--acc-ink);
  padding: var(--s2) var(--s4); border-radius: var(--r-int);
}
.skip-link:focus { left: var(--s2); top: var(--s2); }
#main:focus { outline: none; }

/* standard tags on lesson / experiment rows */
.lesson-row-mid { flex: 1; min-width: 0; }
.std-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.gd-main .std-tags { margin-top: var(--s2); }
.std-tag {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.04em;
  color: var(--ink-mid); background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--r-int);
  padding: 1px 5px;
}

/* standards filter */
.std-filter { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.std-filter-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-dim); }
.std-select { max-width: 340px; }

/* review banner */
.review-banner {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 2px solid var(--acc);
  background: var(--panel);
  padding: var(--s3) var(--s4); margin-top: var(--s4); max-width: 640px;
}
.rb-text { font-size: 13.5px; color: var(--ink); flex: 1; min-width: 220px; }
.due-flag { color: var(--acc); font-family: var(--f-mono); font-size: 10px; }

/* share + safety controls */
#ctl-safety.sandbox { border-color: #A8741A; color: #A8741A; }
.safety-ico { font-size: 12px; }

@media (max-width: 860px) {
  .std-select { max-width: 100%; width: 100%; }
  .std-filter { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   TEXTBOOK MACHINERY — units, worked examples, misconceptions,
   vocabulary, summaries, glossary
   ============================================================ */
.learn-actions { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }

/* course-map unit headers */
.unit-head {
  margin: var(--s8) 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--s3); align-items: baseline;
}
.unit-head:first-child { margin-top: 0; }
.unit-num { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--acc); }
.unit-title { font-family: var(--f-display); font-size: 22px; color: var(--ink-bright); }
.unit-prog { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; }
.unit-blurb { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-dim); }

/* standards line in reader */
.reader-standards { margin-bottom: var(--s6); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rs-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-dim); }

/* worked examples */
.worked-box {
  border: 1px solid var(--line); border-left: 2px solid var(--acc);
  padding: var(--s4); margin-bottom: var(--s4); background: var(--panel);
}
.worked-q { color: var(--ink-bright); font-weight: 700; margin-bottom: var(--s3); }
.worked-steps { margin: 0 0 var(--s3) var(--s4); padding: 0; }
.worked-steps li { color: var(--ink-mid); font-size: 14px; margin-bottom: var(--s2); padding-left: var(--s2); }
.worked-answer { font-size: 14.5px; color: var(--ink); border-top: 1px solid var(--line-soft); padding-top: var(--s3); }
.wa-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--acc); margin-right: var(--s2); }

/* misconceptions */
.miscon-box { border: 1px solid var(--line-soft); border-radius: var(--r-int); padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.miscon-wrong { color: var(--ink-mid); margin-bottom: var(--s2); }
.miscon-right { color: var(--ink); }
.mc-x { color: #8E2F3C; font-family: var(--f-mono); margin-right: var(--s2); }
.mc-c { color: #4a7a4a; font-family: var(--f-mono); margin-right: var(--s2); }

/* vocabulary */
.vocab-list { margin: 0; }
.vocab-term { font-family: var(--f-display); font-size: 16px; color: var(--ink-bright); margin-top: var(--s3); }
.vocab-def { color: var(--ink-mid); font-size: 14px; margin: 2px 0 0; padding-bottom: var(--s2); border-bottom: 1px solid var(--line-soft); }

/* the story — the human history behind the chemistry */
.ext-label {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--ink-dim); margin-bottom: var(--s1);
}
.ext-note { color: var(--ink-dim); font-size: 13px; margin-bottom: var(--s4); }
.story-section { border-left: 2px solid var(--line); padding-left: var(--s4); }

/* go-deeper — collapsed by default */
.dive-section { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: var(--s3) 0; }
.dive-toggle {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--acc); text-align: left; width: 100%; padding: var(--s1) 0;
}
.dive-toggle:hover { color: var(--acc-press); }
.dive-body { padding-top: var(--s3); }

/* practice problems */
.practice-box { border-bottom: 1px solid var(--line-soft); padding: var(--s4) 0; }
.practice-q { color: var(--ink-bright); margin-bottom: var(--s3); }
.practice-num {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim);
  margin-right: var(--s3);
}
.practice-btns { display: flex; gap: var(--s2); }
.practice-reveal:not(:empty) { margin-top: var(--s3); }
.practice-hint { color: var(--ink-mid); font-size: 14px; margin-bottom: var(--s2); }
.ph-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-dim); margin-right: var(--s2); }
.practice-answer { color: var(--ink); font-size: 14.5px; }

/* out in the world */
.world-row {
  display: grid; grid-template-columns: 170px 1fr; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft);
}
.world-where { font-family: var(--f-display); font-size: 16px; color: var(--ink-bright); }
.world-what { color: var(--ink-mid); font-size: 14px; }

/* connects to — jump to a related lesson */
.connect-row {
  display: block; width: 100%; text-align: left;
  padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line-soft);
}
.connect-row:hover { background: var(--panel); }
.connect-title { display: block; font-family: var(--f-display); font-size: 17px; color: var(--acc); }
.connect-why { display: block; font-size: 13px; color: var(--ink-dim); margin-top: 2px; }

/* summary */
.summary-section { border: 1px solid var(--line); padding: var(--s4) var(--s6); background: var(--panel); }
.summary-list { margin: 0 0 0 var(--s4); }
.summary-list li { color: var(--ink); font-size: 14px; margin-bottom: var(--s2); }

/* glossary */
.gloss-search { max-width: 420px; margin-bottom: var(--s6); }
.gloss-list { max-width: 72ch; }
.gloss-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); }
.gloss-term { font-family: var(--f-display); font-size: 17px; color: var(--ink-bright); }
.gloss-def { color: var(--ink-mid); font-size: 14px; margin: 2px 0 0; }
.gloss-link { font-family: var(--f-mono); font-size: 10.5px; color: var(--acc); margin-left: var(--s2); }
.gloss-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .unit-head { grid-template-columns: auto 1fr; }
  .unit-prog { grid-column: 1 / 3; }
  .unit-blurb { grid-column: 1 / 3; }
  .gloss-search { max-width: 100%; }
}

/* ============================================================
   SKILLS LAB + CER REPORTS
   ============================================================ */
.skills-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.skill-readouts { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0; }
.skill-lbl { margin: 0; white-space: nowrap; }
.rates-graph { margin: var(--s4) 0; max-width: 480px; }
.ctl.solved { border-color: var(--acc); color: var(--acc); }

.powder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s4) 0; max-width: 760px; }
.powder-col { border: 1px solid var(--line-soft); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.powder-name { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-bright); }
.powder-sel { font-size: 12.5px; }
.powder-log { border: 1px solid var(--line-soft); padding: var(--s3) var(--s4); margin: var(--s3) 0; max-width: 760px; max-height: 220px; overflow-y: auto; }

.cer-form { border: 1px solid var(--line); border-left: 2px solid var(--acc); padding: var(--s4) var(--s6); margin-top: var(--s4); max-width: 640px; background: var(--panel); }
.cer-form .t-label { margin-top: var(--s3); }
.cer-evidence { border: 1px solid var(--line-soft); padding: var(--s2) var(--s3); margin: var(--s2) 0; background: var(--bg); }
.cer-ev-line { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-mid); padding: 2px 0; }
.cer-form .ctl { margin-top: var(--s4); }

.reports-block { padding: var(--s8) var(--s10) 0; max-width: 860px; }

@media (max-width: 860px) {
  .powder-grid { grid-template-columns: repeat(2, 1fr); }
  .reports-block { padding-left: var(--s4); padding-right: var(--s4); }
}

/* chromatography strip */
.chroma-strip {
  position: relative; width: 90px; height: 260px;
  border: 1px solid var(--line); background: var(--panel);
  margin: var(--s4) 0;
}
.chroma-front {
  position: absolute; top: 14px; left: 0; right: 0;
  border-top: 1px dashed var(--ink-dim);
  font-family: var(--f-mono); font-size: 8px; color: var(--ink-dim);
  padding: 2px 2px 0; white-space: nowrap;
}
.chroma-spot {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 22px; height: 12px; border-radius: 50%;
  opacity: 0.85;
}
.chroma-origin {
  position: absolute; bottom: 4px; left: 0; right: 0;
  font-family: var(--f-mono); font-size: 8px; color: var(--ink-dim);
  text-align: center;
}

/* ============================================================
   EDU TOOLS — assignments, tests, reader tools
   ============================================================ */
.assign-card {
  border: 1px solid var(--line); border-left: 2px solid var(--acc);
  padding: var(--s4); margin-top: var(--s6); max-width: 560px;
  background: var(--panel);
}
.assign-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.assign-title { font-family: var(--f-display); font-size: 19px; color: var(--ink-bright); }
.assign-count { font-family: var(--f-mono); font-size: 10.5px; color: var(--acc); white-space: nowrap; }
.assign-item {
  display: block; width: 100%; text-align: left;
  font-size: 13.5px; color: var(--ink-mid);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft);
}
.assign-item:hover { color: var(--ink-bright); }
.assign-item.done { color: var(--ink-dim); text-decoration: line-through; }
.assign-drop { margin-top: var(--s3); }

.assign-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px var(--s4); border: 1px solid var(--line-soft);
  padding: var(--s3); margin-bottom: var(--s3); max-height: 220px; overflow-y: auto;
}
.assign-pick-item { font-size: 12.5px; color: var(--ink-mid); display: flex; gap: 6px; align-items: center; }
.assign-pick-item input { accent-color: #1D3557; }

.test-timer {
  position: sticky; top: 0; z-index: 5;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--ink-bright); background: var(--panel);
  border: 1px solid var(--line); padding: var(--s2) var(--s4);
  margin-bottom: var(--s4); display: inline-block;
}
.test-timer.low { color: #8E2F3C; border-color: #8E2F3C; }
.quiz-opt.picked { border-color: var(--acc); color: var(--ink-bright); }

.reader-tools { margin: 0 0 var(--s6); }

@media (max-width: 860px) {
  .assign-pick { grid-template-columns: 1fr; max-height: 180px; }
  .assign-card { max-width: none; }
}

/* ---------- build stamp (Home) — version confusion should be impossible ---------- */
.build-stamp { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-dim); margin-top: var(--s3); }

/* ---------- seasonal packs (Teacher's Desk) ---------- */
.pack-card { border: 1px solid var(--line-soft); background: var(--panel); padding: var(--s4) var(--s6); margin-bottom: var(--s3); }
.pack-card.pack-now { border-color: var(--acc); }
.pack-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pack-season { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-dim); }
.pack-live { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--acc-ink); background: var(--acc); padding: 1px 8px; border-radius: var(--r-int); }
.pack-title { font-family: var(--f-display); font-weight: 600; font-size: 19px; color: var(--ink-bright); margin-top: var(--s1); }
.pack-blurb { font-size: 13.5px; color: var(--ink-mid); margin: var(--s1) 0 var(--s2); max-width: 640px; }
.pack-items { font-size: 12px; color: var(--ink-dim); margin-bottom: var(--s3); line-height: 1.7; }
.pack-card .t-code { margin-top: var(--s3); }

/* ---------- efficacy pilot (Teacher's Desk) ---------- */
.pilot-summary { font-family: var(--f-mono); font-size: 12px; color: var(--ink-mid); margin: var(--s3) 0; letter-spacing: 0.02em; }
.pilot-results { margin-top: var(--s4); }
.pilot-results .roster { min-width: 520px; }

/* ---------- lesson figures ---------- */
.fig-box { border: 1px solid var(--line-soft); background: var(--panel); padding: var(--s4) var(--s4) var(--s3); margin: var(--s4) 0; }
.fig-box svg { width: 100%; height: auto; display: block; }
.fig-cap { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-dim); margin-top: var(--s2); }

/* ---------- practice rounds ---------- */
.practice-block { border-top: 1px solid var(--line); margin-top: var(--s8); padding-top: var(--s6); }

/* ---------- data tables / reference ---------- */
.ref-table { border-collapse: collapse; width: 100%; margin: var(--s3) 0 var(--s4); }
.ref-table th { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-dim); text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); font-weight: 400; }
.ref-table td { font-size: 13.5px; color: var(--ink-mid); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft); }
.ref-table td b { font-family: var(--f-mono); font-size: 13px; color: var(--ink-bright); font-weight: 500; }
.ref-list { margin: var(--s3) 0 var(--s4) var(--s6); }
.ref-list li { font-size: 13.5px; color: var(--ink-mid); margin-bottom: var(--s2); }

/* ---------- whole-book search ---------- */
.book-search { margin-top: var(--s4); }
.book-results { margin-top: var(--s3); }
.bs-count { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); margin-bottom: var(--s2); }
.bs-row { display: block; width: 100%; text-align: left; padding: var(--s3) var(--s4); border: 1px solid var(--line-soft); background: var(--panel); margin-bottom: 2px; border-radius: var(--r-int); }
.bs-row:hover { border-color: var(--acc); }
.bs-title { display: block; font-family: var(--f-display); font-size: 15.5px; font-weight: 600; color: var(--ink-bright); }
.bs-snip { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

/* ---------- one-click unit tests ---------- */
.quick-tests { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gradebook-btn { margin-top: var(--s3); }

/* ---------- present (projector) mode ---------- */
.present-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; }
.present-slide { flex: 1; overflow-y: auto; max-width: 980px; width: 100%; margin: 0 auto; padding: var(--s16) var(--s10) var(--s8); cursor: pointer; }
.ps-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-dim); margin-bottom: var(--s6); }
.ps-title { font-family: var(--f-display); font-size: 52px; line-height: 1.1; color: var(--ink-bright); font-weight: 700; margin-bottom: var(--s6); }
.ps-h { font-family: var(--f-display); font-size: 40px; line-height: 1.15; color: var(--ink-bright); font-weight: 600; margin-bottom: var(--s6); }
.ps-p { font-size: 21px; line-height: 1.65; color: var(--ink); margin-bottom: var(--s4); max-width: 60ch; }
.ps-meta { font-family: var(--f-mono); font-size: 14px; color: var(--ink-mid); margin-bottom: var(--s3); }
.ps-fig { border: 1px solid var(--line-soft); background: var(--panel); padding: var(--s4); margin: var(--s6) 0; max-width: 720px; }
.ps-fig svg { width: 100%; height: auto; }
.ps-try { border-left: 3px solid var(--acc); background: var(--panel); padding: var(--s4) var(--s6); font-size: 18px; color: var(--ink); margin-top: var(--s6); }
.ps-try span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--acc); margin-bottom: var(--s1); }
.ps-list { margin-left: var(--s6); }
.ps-list li { font-size: 21px; line-height: 1.6; color: var(--ink); margin-bottom: var(--s3); }
.present-bar { display: flex; align-items: center; gap: var(--s4); justify-content: center; padding: var(--s4); border-top: 1px solid var(--line); background: var(--panel); }
.present-count { font-family: var(--f-mono); font-size: 12px; color: var(--ink-dim); min-width: 64px; text-align: center; }

@media (max-width: 860px) {
  .ps-title { font-size: 32px; }
  .ps-h { font-size: 26px; }
  .ps-p, .ps-list li { font-size: 16.5px; }
  .present-slide { padding: var(--s8) var(--s6); }
}

/* ---------- the model shop (simulations) ---------- */
.sims-wrap { height: 100%; overflow-y: auto; padding-bottom: var(--s16); }
.sim-head { margin-bottom: var(--s4); }
.sim-title { font-family: var(--f-display); font-size: 24px; font-weight: 600; color: var(--ink-bright); }
.sim-canvas { width: 100%; max-width: 720px; height: auto; display: block; border: 1px solid var(--line); background: var(--stage); margin: var(--s3) 0; }
.mol-stage-svg { width: 100%; max-width: 720px; height: auto; display: block; border: 1px solid var(--line); background: var(--panel); margin: var(--s3) 0; touch-action: none; cursor: pointer; }
.sim-readouts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); font-family: var(--f-mono); font-size: 12px; color: var(--ink-dim); margin: var(--s2) 0 var(--s3); }
.sim-readouts b { color: var(--ink-bright); font-weight: 500; }
.sim-lock { color: #A8741A; }
.sim-controls { flex-wrap: wrap; align-items: center; margin-bottom: var(--s3); }
.sim-slider { display: flex; align-items: center; gap: var(--s2); }
.sim-slider-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); }
.sim-slider input[type="range"] { accent-color: var(--acc); width: 140px; }
.sim-tasks { border: 1px solid var(--line-soft); background: var(--panel); padding: var(--s3) var(--s4); margin: var(--s4) 0; max-width: 720px; }
.sim-task { font-size: 13px; color: var(--ink-mid); padding: var(--s1) 0; }
.sim-task.done { color: var(--ink-dim); text-decoration: line-through; }
.sim-task .st-mark { margin-right: var(--s2); text-decoration: none; display: inline-block; }
.sim-verdict { font-size: 14px; color: var(--ink); margin: var(--s3) 0; max-width: 68ch; min-height: 22px; }
.mol-catalog { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.mol-cat-chip { font-family: var(--f-mono); font-size: 12px; color: var(--ink-mid); border: 1px solid var(--line); padding: 2px 10px; border-radius: var(--r-int); }
.mol-cat-chip.got { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.orb-board { border: 1px solid var(--line-soft); background: var(--panel); padding: var(--s4) var(--s6); max-width: 720px; }
.orb-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.orb-name { font-family: var(--f-mono); font-size: 12px; color: var(--ink-dim); width: 30px; }
.orb-box { width: 44px; height: 34px; border: 1px solid var(--ink-mid); background: var(--bg); border-radius: var(--r-int); font-family: var(--f-mono); font-size: 15px; color: var(--ink-bright); }
.orb-box:hover { border-color: var(--acc); }
.orb-config { font-family: var(--f-mono); font-size: 13px; color: var(--ink-mid); margin: var(--s3) 0; min-height: 20px; }

@media (max-width: 860px) {
  .sim-slider input[type="range"] { width: 100px; }
  .orb-box { width: 36px; height: 30px; }
}

/* ---------- field guide (onboarding) ---------- */
.guide-body { cursor: default; }
.guide-title { font-family: var(--f-display); font-size: 40px; line-height: 1.1; color: var(--ink-bright); font-weight: 700; margin-bottom: var(--s4); }
.guide-lede { font-size: 16px; line-height: 1.6; color: var(--ink-mid); max-width: 64ch; margin-bottom: var(--s8); }
.guide-row { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) 0; border-top: 1px solid var(--line-soft); }
.guide-num { font-family: var(--f-mono); font-size: 13px; color: var(--ink-dim); padding-top: 3px; min-width: 26px; }
.guide-text { flex: 1; }
.guide-name { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 600; color: var(--ink-bright); }
.guide-desc { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink-mid); margin-top: 2px; max-width: 62ch; }
.guide-hook { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--acc); margin-top: var(--s1); }
@media (max-width: 860px) {
  .guide-title { font-size: 28px; }
  .guide-row { gap: var(--s3); }
}

/* ---------- apparatus bay (bench glassware) ----------
   The specimen rack's toggle is a mobile-only affordance (its body is
   always shown on desktop), so .rack-toggle carries no button styling.
   The bay IS collapsible at every width, so it needs a real one: 1px
   border as the edge, a named action, and a caret that turns. */
.app-bay { margin-top: var(--s3); }
.bay-toggle {
  justify-content: space-between;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-int);
  background: var(--bg);
}
.bay-toggle:hover { border-color: var(--acc); background: var(--panel); }
.bay-toggle:hover .bay-verb, .bay-toggle:hover .bay-caret { color: var(--acc-press); }
.bay-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.bay-toggle .rack-label { color: var(--ink); }
.bay-action { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.bay-verb {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--acc);
}
.bay-caret {
  font-size: 9px; color: var(--acc);
  transition: transform 0.2s;
}
.app-bay.bay-open .bay-caret { transform: rotate(180deg); }
.bay-section { padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.bay-section:first-child { border-top: none; }
.bay-read { font-size: 12.5px; color: var(--ink-mid); margin: var(--s2) 0; }
.bay-read b { color: var(--ink-bright); }
.ctl.lit { border-color: var(--acc); color: var(--acc); }

/* ---------- mortar race ---------- */
.mortar-race { max-width: 560px; margin: var(--s4) 0; }
.mortar-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.mortar-label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-dim); min-width: 120px; }
.mortar-track { flex: 1; }
.mortar-status { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mid); min-width: 92px; }

/* ---------- separating funnel ---------- */
.sep-funnel { width: 150px; margin: var(--s4) 0; border: 2px solid var(--ink-mid); border-radius: 0 0 60px 60px; overflow: hidden; }
.sep-layer { display: flex; align-items: center; justify-content: center; transition: height 0.7s ease; }
.sep-layer span { font-family: var(--f-mono); font-size: 10px; color: #2C1B17; }
.sep-oil { height: 54px; background: #d9b23a; }
.sep-water { height: 54px; background: #7fa8d9; }
.sep-tap { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); text-align: center; padding: var(--s1) 0; border-top: 2px solid var(--ink-mid); }

/* ---------- pre-lab vouchers ---------- */
.prelab-note { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: #A8741A; margin: var(--s2) 0; }
.prelab-voucher { font-size: 13px; color: var(--ink); border: 1px solid var(--acc); background: var(--panel); padding: var(--s2) var(--s3); margin: var(--s2) 0; }
.prelab-voucher b { font-family: var(--f-mono); color: var(--acc); }
.prelab-check { margin: var(--s3) 0; display: flex; }