/* ============================================================
   Division Demonstrator — styles + 4 themes
   Themes only change colors/textures/fonts, never layout.
   ============================================================ */

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

:root {
  --cell: clamp(1.6rem, 4.5vw, 2.4rem);
  --touch: 44px;
  --radius: 10px;
  --speed: 1;
}
html[data-textsize="large"] { font-size: 115%; }
html[data-textsize="xlarge"] { font-size: 130%; }

/* ---------- theme variables ---------- */
body[data-theme="digital"] {
  --bg: #eef2f7; --surface: #ffffff; --surface2: #f4f7fb;
  --ink: #1c2733; --ink-soft: #51606f; --line: #c6d2de;
  --accent: #1d67c2; --accent-ink: #ffffff;
  --ok: #1c7a3d; --ok-bg: #e2f4e8; --err: #a33b12; --err-bg: #fbe9e0;
  --hilite: #fff3c4; --hilite-line: #b98a00;
  --focus: #7b3fd4;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-math: "Segoe UI", system-ui, sans-serif;
  --shadow: 0 2px 8px rgba(20, 40, 60, .12);
  --texture: none;
}
body[data-theme="whiteboard"] {
  --bg: #dde3e8; --surface: #fdfefe; --surface2: #f2f6f8;
  --ink: #14417c; --ink-soft: #4a6a94; --line: #b9c8d4;
  --accent: #c22f2f; --accent-ink: #ffffff;
  --ok: #14702f; --ok-bg: #e4f3e7; --err: #b0350f; --err-bg: #fbeae2;
  --hilite: #fdf3b9; --hilite-line: #a98500;
  --focus: #7b3fd4;
  --font: "Segoe Print", "Comic Sans MS", "Segoe UI", cursive;
  --font-math: "Segoe Print", "Comic Sans MS", cursive;
  --shadow: 0 2px 10px rgba(30, 50, 70, .14);
  --texture: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(160,180,200,.10), transparent 60%),
             radial-gradient(ellipse 70% 60% at 75% 80%, rgba(160,180,200,.08), transparent 60%);
}
body[data-theme="chalkboard"] {
  --bg: #1b241e; --surface: #2a3a2f; --surface2: #233329;
  --ink: #f2f0e4; --ink-soft: #c4c9b8; --line: #4f6255;
  --accent: #f7d774; --accent-ink: #22301f;
  --ok: #9fdcac; --ok-bg: #2c4a34; --err: #f3b09b; --err-bg: #4c332a;
  --hilite: #46523d; --hilite-line: #f7d774;
  --focus: #8ec9ff;
  --font: "Segoe Print", "Comic Sans MS", "Segoe UI", cursive;
  --font-math: "Segoe Print", "Comic Sans MS", cursive;
  --shadow: 0 2px 10px rgba(0, 0, 0, .4);
  --texture: repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px);
}
body[data-theme="paper"] {
  --bg: #e9e4d5; --surface: #fbf8ec; --surface2: #f3efdf;
  --ink: #4a4a55; --ink-soft: #77776f; --line: #cfc9b2;
  --accent: #3a68a8; --accent-ink: #ffffff;
  --ok: #2b7a3f; --ok-bg: #e6f2e4; --err: #a8502a; --err-bg: #f7e8dc;
  --hilite: #fdf0bd; --hilite-line: #a98500;
  --focus: #7b3fd4;
  --font: "Segoe Print", "Comic Sans MS", "Segoe UI", cursive;
  --font-math: "Segoe Print", "Comic Sans MS", cursive;
  --shadow: 0 2px 6px rgba(90, 80, 50, .18);
  --texture: repeating-linear-gradient(transparent 0 27px, rgba(90,130,180,.25) 27px 28px);
}
body[data-theme="paper"] .card,
body[data-theme="paper"] #modelView { background-image: var(--texture); background-attachment: local; }
body[data-theme="whiteboard"] #modelView,
body[data-theme="chalkboard"] #modelView { background-image: var(--texture); }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: .6em 1em; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- generic controls ---------- */
button, select, input[type="text"] { font-family: inherit; font-size: 1rem; color: var(--ink); }
button {
  min-height: var(--touch);
  padding: .45em .9em;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  touch-action: manipulation;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
button[disabled] { opacity: .45; cursor: not-allowed; }
button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
input[type="text"] {
  min-height: var(--touch);
  padding: .3em .5em;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  width: 7em;
}
input[type="text"]:focus { border-color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- header ---------- */
.app-header {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 2px solid var(--line);
}
.app-header h1 { font-size: 1.15rem; margin-right: auto; }
.app-header .tagline { display: none; color: var(--ink-soft); font-size: .85rem; }
@media (min-width: 900px) { .app-header .tagline { display: inline; } .app-header h1 { font-size: 1.3rem; } }
.header-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- problem bar ---------- */
.problem-bar { margin: .7rem; padding: .7rem .9rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.problem-bar .entry { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.problem-bar label { display: flex; flex-direction: column; font-size: .8rem; color: var(--ink-soft); gap: 2px; }
.problem-bar .op { font-size: 1.5rem; font-weight: 700; padding-top: 1rem; }
.problem-bar .grow { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
#entryMsg { flex-basis: 100%; color: var(--err); font-weight: 600; min-height: 0; }
#entryMsg:empty { display: none; }
#entryMsg.info { color: var(--ink-soft); }

#filters { flex-basis: 100%; }
#filters summary { cursor: pointer; color: var(--ink-soft); min-height: var(--touch); display: flex; align-items: center; gap: .4rem; width: max-content; padding: 0 .3rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 0; align-items: center; }
.filter-row .lbl { font-size: .85rem; color: var(--ink-soft); margin-right: .2rem; }
.chip-toggle { border-radius: 999px; padding: .3em .9em; font-size: .92rem; }

/* ---------- vocabulary strip ---------- */
#vocabStrip { margin: 0 .7rem .7rem; padding: .8rem; }
.vocab-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.vocab-head .fmt-switch { display: flex; gap: .3rem; }
.vocab-head button { min-height: 36px; padding: .2em .7em; font-size: .85rem; }
.vocab-eq { display: flex; align-items: flex-start; gap: .35rem; flex-wrap: wrap; font-family: var(--font-math); font-size: 1.25rem; }
.vocab-term { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vocab-term .val { padding: .1em .4em; border-radius: 6px; border: 2px dashed transparent; }
.vocab-term .tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); border-top: 2px solid var(--hilite-line); padding-top: 2px; }
.vocab-term[data-part="dividend"] .val { border-color: #3a7bd5; }
.vocab-term[data-part="divisor"] .val { border-color: #b0350f; }
.vocab-term[data-part="quotient"] .val { border-color: #1c7a3d; }
.vocab-term[data-part="remainder"] .val { border-color: #8a5b00; }
body[data-theme="chalkboard"] .vocab-term[data-part="dividend"] .val { border-color: #8ec9ff; }
body[data-theme="chalkboard"] .vocab-term[data-part="divisor"] .val { border-color: #f3b09b; }
body[data-theme="chalkboard"] .vocab-term[data-part="quotient"] .val { border-color: #9fdcac; }
body[data-theme="chalkboard"] .vocab-term[data-part="remainder"] .val { border-color: #f7d774; }
.vocab-frac { display: inline-flex; flex-direction: column; align-items: center; }
.vocab-frac .top { border-bottom: 2px solid var(--ink); padding: 0 .4em; }
.vocab-mini-ld { display: inline-flex; align-items: flex-end; }
.vocab-mini-ld .ld-in { border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); padding: 0 .4em; border-top-left-radius: 6px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: .4rem; margin: 0 .7rem .5rem; flex-wrap: wrap; }
.tabs [role="tab"], .tabs .mode-btn {
  flex: 1 1 auto; min-width: 7.5em; position: relative;
  border-bottom-width: 4px;
}
.tabs [role="tab"][aria-selected="true"], .mode-btn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.tabs .tab-warn { font-size: .78rem; display: block; opacity: .85; }
.tab-badge { font-size: .75rem; }

/* ---------- workspace ---------- */
#layout { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: 0 .7rem .7rem; align-items: start; }
@media (min-width: 860px) { #layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); } }

#modelView {
  padding: 1rem; min-height: 280px; overflow-x: auto;
  font-family: var(--font-math);
}
#sidePanel { display: flex; flex-direction: column; gap: .6rem; }
.panel-block { padding: .8rem .9rem; }
.panel-block h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .35rem; }
#stepExplain { font-size: 1.05rem; min-height: 3.2em; }
#stepExplain .step-title { font-weight: 700; color: var(--accent); display: block; margin-bottom: .15rem; }
body[data-theme="chalkboard"] #stepExplain .step-title { color: var(--accent); }

.step-note { color: var(--ink-soft); font-size: .9rem; margin-top: .4rem; }

/* interaction area */
#interaction:empty { display: none; }
#interaction { padding: .8rem .9rem; }
.answer-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.answer-row input { width: 6.5em; font-size: 1.2rem; text-align: center; font-family: var(--font-math); }
.prompt { font-weight: 600; }

/* chips (drag mode) */
.chip-tray { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .55rem; }
.chip {
  min-width: var(--touch); min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3em .8em; font-size: 1.25rem; font-family: var(--font-math); font-weight: 600;
  border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface2);
  cursor: grab; user-select: none; touch-action: none;
}
.chip[aria-pressed="true"], .chip.selected { background: var(--accent); color: var(--accent-ink); }
.chip.dragging { opacity: .4; }
.chip-ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -60%); }
.drop-slot {
  min-width: 3em; min-height: var(--touch);
  border: 2px dashed var(--accent); border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-family: var(--font-math); color: var(--ink-soft);
  padding: .1em .5em; background: var(--surface2); cursor: pointer;
}
.drop-slot.over { background: var(--hilite); border-style: solid; }
.drag-hint { font-size: .85rem; color: var(--ink-soft); margin-top: .4rem; }

/* feedback */
#feedback { min-height: 1.6em; font-weight: 700; padding: 0 .9rem; }
#feedback .ok { color: var(--ok); }
#feedback .err { color: var(--err); }
#feedback .icon { display: inline-block; margin-right: .3em; }

/* guidance */
#guidance { padding: .8rem .9rem; background: var(--surface2); }
#guidance .hint-text { margin: .4rem 0; }
#guidance .hint-level { font-size: .75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.guide-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }

/* step controls */
#stepControls {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  padding: .55rem .8rem; padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 2px solid var(--line);
}
#stepControls .count { color: var(--ink-soft); font-size: .9rem; min-width: 6em; text-align: center; }
#stepControls .spacer { flex: 1; }
#btnNext { min-width: 8.5em; font-size: 1.05rem; }

/* ============ LONG DIVISION GRID ============ */
.ld-wrap { display: inline-block; padding: .5rem .25rem; }
.ld-grid { display: grid; gap: 0; font-size: var(--cell); line-height: 1.25; }
.ld-cell {
  min-width: 1.15em; min-height: 1.25em;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 .06em; position: relative;
}
.ld-cell.pt { min-width: .5em; }
.ld-cell.divisor { padding-right: .35em; font-weight: 600; }
.ld-cell.bracket { border-left: 3px solid var(--ink); border-top-left-radius: .35em; }
.ld-cell.bar { border-top: 3px solid var(--ink); }
.ld-cell.mul { border-bottom: 2.5px solid var(--ink); }
.ld-cell.qdigit { font-weight: 700; }
.ld-cell.ext { color: var(--ink-soft); }
.ld-cell.rem { font-size: .6em; align-items: center; white-space: nowrap; padding-left: .4em; font-weight: 700; }
.ld-cell.now { background: var(--hilite); outline: 2.5px solid var(--hilite-line); outline-offset: -2px; border-radius: 4px; z-index: 1; }
.ld-cell.focus-cell { outline: 2.5px dashed var(--hilite-line); outline-offset: -2px; border-radius: 4px; background: var(--hilite); }
.ld-grid input.cell-input {
  font-size: .8em; width: 100%; min-height: 1.5em; text-align: center;
  border: 2px solid var(--accent); border-radius: 6px; font-family: var(--font-math);
  background: var(--surface2); align-self: end;
}
.ld-grid .drop-slot.in-grid { font-size: .55em; align-self: end; min-height: 1.8em; }
.point-picker { display: flex; align-items: center; gap: .15rem; margin-top: .5rem; font-size: 1.6rem; font-family: var(--font-math); flex-wrap: wrap; }
.point-picker .pp-digit { padding: .1em .15em; }
.point-picker .pp-gap {
  min-width: 34px; min-height: var(--touch); border: 2px dashed var(--accent);
  border-radius: 8px; background: var(--surface2); cursor: pointer; font-size: 1rem; color: var(--ink-soft);
}

/* ============ SHIFT (decimal move) PANEL ============ */
.shift-panel { text-align: center; padding: .5rem 0 1rem; }
.shift-row { display: flex; justify-content: center; align-items: center; gap: 1.2rem; flex-wrap: wrap; font-size: clamp(1.8rem, 7vw, 3rem); font-family: var(--font-math); }
.shift-num { display: inline-flex; align-items: baseline; position: relative; }
.shift-num .digit { padding: 0 .04em; }
.shift-num .digit.ph { color: var(--ink-soft); opacity: 0; transition: opacity .4s calc(1.1s * var(--speed)); }
.shift-num .dot {
  display: inline-block; width: .35em; text-align: center; font-weight: 700; color: var(--accent);
  transition: transform calc(.9s * var(--speed)) ease-in-out .3s;
}
body.anims-on .shift-panel.play .dot { transform: translateX(var(--dot-shift, 0)); }
body.anims-on .shift-panel.play .digit.ph { opacity: 1; }
body:not(.anims-on) .shift-panel .dot { transform: translateX(var(--dot-shift, 0)); }
body:not(.anims-on) .shift-panel .digit.ph { opacity: 1; }
.shift-x10 { font-size: 1rem; color: var(--accent); font-weight: 700; margin-top: .2rem; }
.shift-arrow { font-size: 1.4rem; color: var(--ink-soft); }
.shift-result { margin-top: .8rem; font-size: 1.3rem; font-weight: 600; }
.shift-why { max-width: 34em; margin: .6rem auto 0; color: var(--ink-soft); font-size: .95rem; }
.shift-replay { margin-top: .6rem; }

/* ============ AREA MODEL ============ */
.area-wrap { padding: .4rem 0; }
.area-fig { display: flex; align-items: stretch; gap: .5rem; }
.area-side { display: flex; flex-direction: column; justify-content: center; font-weight: 700; font-size: 1.3rem; padding-right: .2rem; }
.area-side .side-tag { font-size: .65rem; color: var(--ink-soft); text-transform: uppercase; }
.area-boxes { display: flex; gap: 0; flex: 1; min-width: 0; }
.area-col { display: flex; flex-direction: column; min-width: 4.2em; }
.area-col .a-top {
  text-align: center; font-weight: 700; font-size: 1.2rem; padding: .2rem .3rem; min-height: 2em;
  display: flex; align-items: center; justify-content: center;
}
.area-col .a-box {
  border: 2.5px solid var(--ink); min-height: 5.5em; padding: .4rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: var(--surface2);
}
.area-col + .area-col .a-box { border-left-width: 0; }
.area-col.now .a-box, .area-col.now .a-top { background: var(--hilite); }
.area-col.pending { opacity: 0; }
body.anims-on .area-col { transition: opacity calc(.45s * var(--speed)); }
.area-col.pending.revealed { opacity: 1; }
.area-rem-chip { align-self: center; margin-left: .6rem; padding: .4rem .7rem; border: 2px dashed var(--hilite-line); border-radius: var(--radius); font-size: 1rem; }
.area-footer { margin-top: .9rem; font-size: 1.15rem; }
.area-footer .left-track { color: var(--ink-soft); font-size: .95rem; margin-top: .3rem; }

/* ============ PARTIAL QUOTIENTS ============ */
.pq-wrap { display: inline-block; min-width: min(100%, 22em); }
.pq-table { border-collapse: collapse; font-size: 1.25rem; font-family: var(--font-math); }
.pq-table td { padding: .15em .5em; text-align: right; }
.pq-table .pq-side { border-left: 3px solid var(--ink); padding-left: .7em; text-align: left; font-weight: 700; color: var(--accent); white-space: nowrap; }
body[data-theme="chalkboard"] .pq-table .pq-side { color: var(--accent); }
.pq-table .pq-sub td:first-child { border-bottom: 2.5px solid var(--ink); }
.pq-table .pq-minus { text-align: left; padding-right: 0; }
.pq-table tr.now td { background: var(--hilite); }
.pq-table tr.head td { border-bottom: 3px solid var(--ink); font-weight: 700; }
.pq-sumline { margin-top: .7rem; font-size: 1.2rem; }
.pq-sumline .plus-row { color: var(--accent); font-weight: 700; }

/* ============ BASE-TEN BLOCKS ============ */
.bt-wrap { display: flex; flex-direction: column; gap: .9rem; }
.bt-pool, .bt-group {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: .5rem; min-height: 3.2em;
  background: var(--surface2);
}
.bt-pool.now, .bt-group.now { border-color: var(--hilite-line); background: var(--hilite); }
.bt-zone-label { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.bt-blocks { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; }
.bt-groups { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.block { display: inline-block; border: 1.5px solid var(--ink); border-radius: 2px; position: relative; }
body.anims-on .block { animation: blockIn calc(.35s * var(--speed)) ease-out; }
@keyframes blockIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.block.b3 { width: 30px; height: 30px; background: #b48ead; box-shadow: 3px -3px 0 0 #9a76a0, 6px -6px 0 0 #7e5f86; margin-top: 6px; margin-right: 6px; }
.block.b2 { width: 28px; height: 28px; background-color: #88b5e0; background-image: repeating-linear-gradient(0deg, rgba(0,0,30,.25) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(0,0,30,.25) 0 1px, transparent 1px 6px); }
.block.b1 { width: 9px; height: 28px; background-color: #8fc9a0; background-image: repeating-linear-gradient(0deg, rgba(0,30,0,.3) 0 1px, transparent 1px 6px); }
.block.b0 { width: 9px; height: 9px; background: #e9c46a; }
.block.b-1 { width: 9px; height: 20px; background: #e59fb4; border-style: dotted; }
.block.b-2 { width: 7px; height: 7px; background: #d98c8c; border-style: dotted; border-radius: 50%; }
body[data-theme="chalkboard"] .block { border-color: #dfe7d8; }
.bt-legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; color: var(--ink-soft); align-items: center; }
.bt-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.bt-count { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem; }

/* ============ completion banner ============ */
.done-banner { margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok); font-weight: 700; font-size: 1.1rem; border: 2px solid var(--ok); }

/* model unavailable notice */
.unavailable-note { max-width: 36em; padding: 1rem; font-size: 1.05rem; }
.unavailable-note h3 { margin-bottom: .4rem; }
.unavailable-note .sub { color: var(--ink-soft); margin-top: .5rem; font-size: .95rem; }

/* ---------- teacher drawer ---------- */
#teacherDrawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(340px, 92vw); z-index: 40;
  background: var(--surface); border-left: 2px solid var(--line); box-shadow: -4px 0 18px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  padding: 1rem; padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}
body:not(.anims-on) #teacherDrawer { transition: none; }
#teacherDrawer.open { transform: translateX(0); }
#teacherDrawer h2 { font-size: 1.05rem; margin-bottom: .6rem; }
#teacherDrawer fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .7rem; margin-bottom: .8rem; }
#teacherDrawer legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 0 .3em; }
#teacherDrawer .row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: var(--touch); flex-wrap: wrap; }
#teacherDrawer .row > span { flex: 1; }
#teacherDrawer select { min-height: 38px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); padding: .2em .4em; max-width: 11em; }
.drawer-close { float: right; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; border: 0; border-radius: 0; display: none; }
.scrim.show { display: block; }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; pointer-events: none; }
.switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(22px); }
.switch input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- dialogs ---------- */
dialog { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); max-width: min(30em, 92vw); padding: 1rem 1.2rem; margin: auto; }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h2 { margin-bottom: .6rem; font-size: 1.1rem; }
dialog dt { font-weight: 700; margin-top: .6rem; }
dialog dd { margin-left: 0; color: var(--ink-soft); }
.dialog-close-row { margin-top: 1rem; text-align: right; }

/* ---------- confetti ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 80; }
.confetti-bit { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confFall linear forwards; }
@keyframes confFall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .shift-panel .dot { transform: translateX(var(--dot-shift, 0)) !important; }
  .shift-panel .digit.ph { opacity: 1 !important; }
}
body:not(.anims-on) .block { animation: none; }
body:not(.anims-on) .confetti-bit { display: none; }

/* ---------- small phones & narrow windows ---------- */
@media (max-width: 600px) {
  :root { --cell: clamp(1.35rem, 6.5vw, 1.8rem); }
  .problem-bar { margin: .5rem; padding: .6rem; }
  .problem-bar input[type="text"] { width: 5em; }
  .problem-bar .op { font-size: 1.2rem; }
  .problem-bar .grow { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .problem-bar .grow button { padding: .4em .6em; font-size: .95rem; }
  #layout { margin: 0 .5rem .5rem; }
  .tabs { margin: 0 .5rem .4rem; }
  .tabs [role="tab"], .tabs .mode-btn { min-width: 5.5em; font-size: .9rem; padding: .35em .5em; }
  #modelView { padding: .7rem; }
  .bt-groups { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  #stepControls { gap: .3rem; padding: .45rem .5rem; padding-bottom: calc(.45rem + env(safe-area-inset-bottom, 0px)); }
  #stepControls button { padding: .4em .55em; font-size: .92rem; }
  #stepControls .count { min-width: 0; font-size: .8rem; }
  #stepControls .spacer { display: none; }
  #btnNext { min-width: 7em; }
}

/* print-ish very wide displays: cap content width */
@media (min-width: 1400px) {
  #layout, .problem-bar, .tabs, #vocabStrip { max-width: 1360px; margin-left: auto; margin-right: auto; }
  .problem-bar, #vocabStrip { width: calc(100% - 1.4rem); }
}