[x-cloak] { display: none !important; }

/* ==========================================================================
   Themes
   Every visual decision below reads a token. A theme redefines the tokens and
   nothing else, so a new look never means touching the layout rules.
   ========================================================================== */

:root {
  --cw: 3.1rem;
  --bh: 3.6rem;
  --pw: 1.2rem;

  /* exercise book — the original neo-brutalist look */
  --ink: #000;
  --muted: #444;
  --paper: #FBFCF6;
  --surface: #fff;
  --surface-2: #fff;
  --line: #000;
  --bw: 4px;
  --bw-thin: 3px;
  --radius: 0;
  --shadow: 8px 8px 0 var(--line);
  --shadow-sm: 4px 4px 0 var(--line);
  --shadow-btn: 5px 5px 0 var(--line);
  --press: 5px;
  --ring: #9B5DE5;
  --rule: 5px solid var(--line);

  --font-head: 'Gochi Hand', cursive;
  --font-body: 'Patrick Hand', cursive;
  --font-digit: 'Patrick Hand', cursive;

  --box-bg: #fff;
  --box-current: #FFD93D;
  --box-done: #D6F5C8;
  --box-wrong: #FFC9DE;
  --box-carry: #FFF9DB;

  --tone-sun: #FFD93D;
  --tone-bubble: #FF5DA2;
  --tone-mint: #2EC4B6;
  --tone-sky: #4CC9F0;
  --tone-grape: #9B5DE5;
  --tone-tangerine: #FF8A3D;
  --tone-lime: #B8E62D;
  --tone-ink: #000;

  --page-bg-image:
    linear-gradient(to right, rgba(40,120,200,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,120,200,.14) 1px, transparent 1px);
  --page-bg-size: 28px 28px;
}

/* space station — dark, thin lines, glow instead of hard shadow */
[data-theme="neon"] {
  --ink: #E7ECFF;
  --muted: #93A0C8;
  --paper: #0B1020;
  --surface: #141B33;
  --surface-2: #1B2444;
  --line: #34406E;
  --bw: 1px;
  --bw-thin: 1px;
  --radius: 12px;
  --shadow: 0 0 0 1px rgba(122,162,255,.18), 0 14px 40px rgba(0,0,0,.55);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.45);
  --shadow-btn: 0 6px 18px rgba(0,0,0,.45);
  --press: 2px;
  --ring: #61E8FF;
  --rule: 2px solid #61E8FF;

  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-digit: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  --box-bg: #0E1428;
  --box-current: #123A4A;
  --box-done: #12351F;
  --box-wrong: #3A1430;
  --box-carry: #16203C;

  --tone-sun: #FFE066;
  --tone-bubble: #FF6FB5;
  --tone-mint: #43F5D0;
  --tone-sky: #61E8FF;
  --tone-grape: #B98CFF;
  --tone-tangerine: #FFA463;
  --tone-lime: #C6FF5E;
  --tone-ink: #0B1020;

  --page-bg-image:
    radial-gradient(900px 500px at 12% -10%, rgba(97,232,255,.16), transparent 60%),
    radial-gradient(800px 500px at 92% 0%, rgba(185,140,255,.16), transparent 60%);
  --page-bg-size: auto;
}

/* plain and calm — hairlines, soft shadows, no decoration */
[data-theme="sleek"] {
  --ink: #1C2024;
  --muted: #6B7280;
  --paper: #F6F7F9;
  --surface: #fff;
  --surface-2: #FAFBFC;
  --line: #E2E6EB;
  --bw: 1px;
  --bw-thin: 1px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-btn: 0 1px 2px rgba(16,24,40,.06);
  --press: 1px;
  --ring: #3B82F6;
  --rule: 2px solid #1C2024;

  --font-head: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-digit: 'Inter', system-ui, sans-serif;

  --box-bg: #fff;
  --box-current: #FFF6D6;
  --box-done: #E8F6EC;
  --box-wrong: #FDE9EF;
  --box-carry: #F4F6F8;

  --tone-sun: #FBE38A;
  --tone-bubble: #F7B7CE;
  --tone-mint: #A6E0D6;
  --tone-sky: #AFD9F2;
  --tone-grape: #C8B6EE;
  --tone-tangerine: #F8C39A;
  --tone-lime: #D6E9A0;
  --tone-ink: #1C2024;

  --page-bg-image: none;
  --page-bg-size: auto;
}

/* ==========================================================================
   Page
   ========================================================================== */

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--page-bg-image);
  background-size: var(--page-bg-size);
  background-attachment: fixed;
}
h1, h2, h3, .marker { font-family: var(--font-head); }

/* ---------- panels and buttons ---------- */
.nb {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.nb-sm {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.btn {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  background: var(--surface);
  color: var(--ink);
  padding: .45rem 1rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-sm { padding: .3rem .7rem; font-size: 1rem; }
.btn-lead { padding: .55rem 1.25rem; font-size: 1.25rem; }

/* a key cap, for showing a shortcut where the action is */
.kbd {
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.4;
  padding: 0 .4rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: .7;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.btn.on, .btn:active {
  transform: translate(var(--press), var(--press));
  box-shadow: none;
}
.btn.on { border-color: var(--ring); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .07s ease, box-shadow .07s ease; }
}
.tag { transform: rotate(-2deg); }
[data-theme="neon"] .tag, [data-theme="sleek"] .tag { transform: none; }

/* ---------- palette
   These come after the panel and button rules on purpose: a tone is painted
   onto a panel, so it has to win the background it inherits from .nb / .btn. */
.tone-sun { background: var(--tone-sun); color: var(--tone-ink); }
.tone-bubble { background: var(--tone-bubble); color: var(--tone-ink); }
.tone-mint { background: var(--tone-mint); color: var(--tone-ink); }
.tone-sky { background: var(--tone-sky); color: var(--tone-ink); }
.tone-grape { background: var(--tone-grape); color: var(--tone-ink); }
.tone-tangerine { background: var(--tone-tangerine); color: var(--tone-ink); }
.tone-lime { background: var(--tone-lime); color: var(--tone-ink); }

/* a panel sitting inside a toned one goes back to the theme's own surface,
   so a dark-theme icon never lands dark-on-dark */
[class*="tone-"] .nb-sm { background: var(--surface); color: var(--ink); }

/* ==========================================================================
   Shell: topics on the left once there is room for them
   ========================================================================== */

.shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 16.5rem minmax(0, 1fr); }
  .side { position: sticky; top: 1rem; }
}

/* grid children default to min-width:auto, which lets one long word widen the
   whole page. The board is the only thing allowed to scroll sideways. */
.shell > *, .work > * { min-width: 0; }

.side { padding: 1rem; }
.sidehead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.sidehead h2 { font-size: 1.4rem; }
.sidetoggle { max-width: 100%; }
.sidetoggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebody { display: none; margin-top: .9rem; }
.side.is-open .sidebody { display: block; }
@media (min-width: 1024px) {
  .sidebody { display: block; }
  .sidetoggle { display: none; }
}

.sidegroup + .sidegroup { margin-top: 1rem; padding-top: .9rem; border-top: var(--bw-thin) dashed var(--line); }
.sidegroupname { font-size: 1.05rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }

.topicbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-align: left;
  padding: .5rem .7rem;
  margin-bottom: .45rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--tone-ink);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.topicbtn i { width: 1.3rem; text-align: center; }
.topicbtn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.topicbtn.on { box-shadow: inset 0 0 0 3px var(--ring); font-weight: 700; }

.levelrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.levelrow .btn { justify-content: center; padding: .3rem .2rem; font-size: .92rem; }

/* the board column, with the help panel beside it when the screen is wide */
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1280px) {
  .work.has-aside { grid-template-columns: minmax(0, 1fr) 19rem; }
}

/* ==========================================================================
   The working board
   ========================================================================== */

.board { overflow-x: auto; padding: 1.25rem .5rem; }
.stack { display: inline-block; min-width: min-content; }
.digit { font-family: var(--font-digit); font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }

.crow { display: flex; align-items: flex-end; gap: .35rem; }
.op { width: 2rem; text-align: center; font-size: 2rem; line-height: var(--bh); }
.cells { display: grid; }
.cells.ruled { border-bottom: var(--rule); padding-bottom: .15rem; }
.cell { height: var(--bh); display: flex; align-items: center; justify-content: center; }
.cell.wide { width: 5.5rem; }
.note { font-size: .95rem; padding-left: .5rem; color: var(--muted); white-space: nowrap; }

.box {
  width: 2.55rem; height: 3rem;
  border: var(--bw) solid var(--line);
  border-radius: calc(var(--radius) / 2);
  background: var(--box-bg);
  color: var(--ink);
  text-align: center;
  font-family: var(--font-digit);
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.box:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.box-sm { width: 1.8rem; height: 1.8rem; font-size: 1.05rem; background: var(--box-carry); }
.box-ghost { background: var(--surface-2); }
.gitem .box { width: 100%; }
.cell.wide .box { width: 5rem; }

.is-current { background: var(--box-current); box-shadow: 0 0 0 4px var(--ring); }
.is-done { background: var(--box-done); }
.is-wrong { background: var(--box-wrong); }
.box:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .is-wrong { animation: shake .32s; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
  .is-current { animation: pop .18s; }
  @keyframes pop { from { transform: scale(.9); } to { transform: scale(1); } }
}

/* long division */
.drow { display: flex; align-items: flex-end; }
.dleft { width: 4.5rem; display: flex; justify-content: flex-end; align-items: center; height: var(--bh); padding-right: .5rem; }
.gcells { display: grid; }
.gcells.overbar { border-bottom: var(--rule); }
.gcells.vline { border-left: var(--rule); }
.gcells.vline-pad { border-left: 5px solid transparent; }
.gitem { height: var(--bh); display: flex; align-items: center; justify-content: center; padding: 0 .1rem; }
.gitem.ruled { border-bottom: var(--bw) solid var(--line); }
.gitem.sign { font-size: 1.8rem; }

/* hcf / lcm ladder */
.ladder .lrow { display: flex; align-items: center; }
.lleft { width: 4rem; display: flex; justify-content: flex-end; padding-right: .6rem; }
.lnums { display: flex; border-left: var(--rule); padding-left: .9rem; }
.lnums.ruled { border-bottom: var(--bw-thin) dashed var(--line); }

.finalbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .9rem;
  border-top: var(--bw-thin) dashed var(--line);
}
.finallabel { font-size: 1.3rem; }
.finalbar .box { width: 5.5rem; }

/* ---------- order of operations and word problems ---------- */
.story {
  font-size: 1.35rem; line-height: 1.5;
  padding: .9rem 1rem; margin-bottom: 1rem;
  background: var(--surface-2);
  border-left: 6px solid var(--ring);
  border-radius: calc(var(--radius) / 2);
}
.exprstack { display: block; width: 100%; }
.exprline {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
  padding: .55rem 0;
}
.exprline + .exprline { border-top: var(--bw-thin) dashed var(--line); }
.exprlabel { min-width: 13rem; font-size: 1.1rem; color: var(--muted); }
.exprwork { display: flex; align-items: center; gap: .55rem; }
.exprsum { font-family: var(--font-digit); font-size: 1.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expreq { font-size: 1.6rem; }
.exprph {
  display: inline-block; width: 2.1rem; height: 1.9rem; vertical-align: -.35rem;
  border: var(--bw-thin) dashed var(--line);
  border-radius: calc(var(--radius) / 3);
  background: var(--surface-2);
}
.exprph-filled {
  border-style: solid;
  border-color: var(--box-done);
  background: var(--box-done);
  text-align: center;
  line-height: 1.9rem;
  width: auto; min-width: 2.1rem;
  padding: 0 .15rem;
}
.exprwork .box { width: 4.4rem; }
.exprafter { font-family: var(--font-digit); font-size: 1.5rem; margin-left: .1rem; }

/* ---------- diagrams ---------- */
.diagram { margin: 0 0 1rem; }
.shapesvg { display: block; width: 100%; max-width: 22rem; height: auto; }
.shapeline { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.shapepoly { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.shapearc { fill: none; stroke: var(--ring); stroke-width: 3; }
.shapearc-known { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 4; }
.shapedot { fill: var(--ink); }
.shapegrid { stroke: var(--line); stroke-width: 1; opacity: .45; }
.shapeghost { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; }
.shapetext {
  fill: var(--ink);
  font-family: var(--font-digit);
  font-size: 17px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.shapetext-end { text-anchor: end; }
.diagramnote { font-size: .95rem; color: var(--muted); margin-top: .2rem; }

/* ---------- fractions ---------- */
.fracstack { display: block; width: 100%; }

.fracq {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem;
  padding: .2rem 0 1.1rem;
  border-bottom: var(--bw-thin) dashed var(--line);
  margin-bottom: .3rem;
}
.fracline { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .55rem 0; }
.fracline + .fracline { border-top: var(--bw-thin) dashed var(--line); }
.fraclabel { min-width: 15rem; font-size: 1.1rem; color: var(--muted); }
.fraccells { display: flex; align-items: center; gap: .55rem; }
.fracop { font-size: 1.9rem; font-family: var(--font-digit); }

.frac {
  display: inline-flex; flex-direction: column; align-items: stretch;
  text-align: center;
  font-family: var(--font-digit);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.fracn { border-bottom: 3px solid var(--ink); padding: 0 .45rem .15rem; }
.fracd { padding: .15rem .45rem 0; }
.fracq .frac { font-size: 2.2rem; }
.fracline .frac { font-size: 1.7rem; }
/* the bar has to read as a fraction line even between two answer boxes */
.frac-live .fracn { border-bottom: 3px solid var(--ink); padding: 0 0 .3rem; }
.frac-live .fracd { padding: .3rem 0 0; }
.frac-live .exprph { margin: .15rem auto; }

/* ---------- flashcard sets ---------- */
.flashgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; width: 100%; }
.flashcard {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .8rem .5rem;
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.flashnum {
  position: absolute; top: -.6rem; left: -.6rem;
  width: 1.5rem; height: 1.5rem; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--tone-sun); color: var(--tone-ink);
  border: var(--bw-thin) solid var(--line); border-radius: 50%;
}
.flashq { font-family: var(--font-digit); font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flashcard .box { width: 3.4rem; }

/* single flashcard — one at a time on the practice board */
.flashsingle {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.5rem;
  padding: 3rem 1rem; min-height: 14rem;
}
.flashsingle-counter { font-size: 1.1rem; color: var(--muted); }
.flashsingle-card {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 2.5rem 3rem;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.flashsingle-q {
  font-family: var(--font-digit);
  font-size: clamp(2.5rem, 10vw, 4rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.flashsingle .box { width: 5rem; height: 4rem; font-size: 2.5rem; }

/* ==========================================================================
   Help asides
   ========================================================================== */

.aside { padding: .9rem 1rem; }
.aside + .aside { margin-top: .9rem; }
.asidetitle { font-size: 1.25rem; margin-bottom: .5rem; }
.asiderules { list-style: disc; padding-left: 1.1rem; }
.asiderules li { font-size: 1.02rem; line-height: 1.4; margin-bottom: .35rem; }
.asidepairs { display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem; font-size: 1.02rem; }
.asidepairs dt { font-weight: 700; }
.asidepairs dd { color: var(--muted); }
.asidetable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .7rem; list-style: none; }
.asidetable li { display: flex; justify-content: space-between; gap: .4rem; font-size: 1rem; font-variant-numeric: tabular-nums; }
.asidetable b { font-weight: 700; }

.asidescroll { overflow-x: auto; }
.tgrid { border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.tgrid th, .tgrid td { border: 1px solid var(--line); padding: .12rem .3rem; text-align: center; min-width: 1.7rem; }
.tgrid th { background: var(--surface-2); font-weight: 700; }
.tcorner { background: var(--tone-sun); color: var(--tone-ink); }

/* ==========================================================================
   Timed drill
   ========================================================================== */

.drillcard {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 2rem 1rem;
}
.drillq {
  font-family: var(--font-digit);
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.drillbox {
  width: 9rem; height: 4.5rem;
  border: var(--bw) solid var(--line);
  border-radius: calc(var(--radius) / 2);
  background: var(--box-bg); color: var(--ink);
  text-align: center;
  font-family: var(--font-digit);
  font-size: 2.6rem;
  font-variant-numeric: tabular-nums;
}
.drillbox:focus-visible { outline: 4px solid var(--ring); outline-offset: 3px; }
.drillstat { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.drillpill { padding: .3rem .8rem; border: var(--bw-thin) solid var(--line); border-radius: var(--radius); font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .flash-right { animation: pop .18s; }
  .flash-wrong { animation: shake .32s; }
}

/* ==========================================================================
   Worksheet
   ========================================================================== */

.wsgrid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsgrid-1 { grid-template-columns: minmax(0, 1fr); }
.wsgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wsgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .wsgrid-3, .wsgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wsgrid-3, .wsgrid-2 { grid-template-columns: minmax(0, 1fr); } }

.wsitem { border: var(--bw-thin) solid var(--line); padding: .6rem; position: relative; background: var(--surface); break-inside: avoid; }
.wsnum {
  position: absolute; top: -14px; left: -14px; width: 30px; height: 30px;
  background: var(--tone-sun); color: var(--tone-ink);
  border: var(--bw-thin) solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.wsbody { --cw: 2.5rem; --bh: 2.9rem; overflow-x: auto; padding-top: .4rem; }
.wsbody .digit { font-size: 1.7rem; }
.wsbody .box { width: 2.1rem; height: 2.5rem; font-size: 1.5rem; }
.wsbody .cell.wide { width: 4.4rem; }
.wsbody .cell.wide .box { width: 4rem; }
.wsbody .finalbar .box { width: 4.5rem; }
.wsbody .dleft { width: 3.4rem; }
.wsbody .lleft { width: 3rem; }
.wsbody .story { font-size: 1.05rem; padding: .5rem .6rem; margin-bottom: .6rem; }
.wsbody .exprlabel { min-width: 9rem; font-size: .95rem; }
.wsbody .exprsum { font-size: 1.4rem; }
.wsbody .exprwork .box { width: 3.4rem; }
.wsbody .shapesvg { max-width: 13rem; }
.wsbody .diagramnote { font-size: .8rem; }
.wsbody .fracq { font-size: .9em; padding-bottom: .6rem; }
.wsbody .fracq .frac { font-size: 1.5rem; }
.wsbody .fracline .frac { font-size: 1.2rem; }
.wsbody .fraclabel { min-width: 9rem; font-size: .95rem; }
.wsbody .flashgrid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.wsbody .flashq { font-size: 1.2rem; }
.wsbody .flashcard .box { width: 2.6rem; }
.box-blank { background: var(--surface); border-style: solid; }

.wskey { margin-top: 1.25rem; border-top: var(--bw-thin) dashed var(--line); padding-top: .75rem; }
.wskey h3 { font-size: 1.4rem; }
.wskeylist { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: 1.05rem; }

.wshelp { margin-top: 1.25rem; border-top: var(--bw-thin) dashed var(--line); padding-top: .75rem; break-inside: avoid; }
.wshelp h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.wshelp .aside { padding: 0; margin-bottom: .8rem; }
.wshelp .asidetable { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   Small screens — the board scrolls, the columns never reflow
   ========================================================================== */

@media (max-width: 640px) {
  :root { --cw: 2.5rem; --bh: 3rem; }
  .digit { font-size: 1.7rem; }
  .box { width: 2.1rem; height: 2.55rem; font-size: 1.5rem; }
  .dleft { width: 3.4rem; }
  .cell.wide { width: 4.5rem; }
  .cell.wide .box { width: 4rem; }
  .exprlabel { min-width: 100%; }
  .asidetable { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Welcome overlay & voice settings
   ========================================================================== */

/* session clock — tabular figures keep the width stable as digits change */
.session-clock { font-variant-numeric: tabular-nums; }

/* ---------- theme preview cards on the welcome page ---------- */
.tp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 640px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); }
}
.tp-card {
  display: flex; flex-direction: column; align-items: stretch;
  cursor: pointer; background: transparent; border: none; padding: 0;
  font-family: var(--font-body); color: var(--ink); text-align: left;
  transition: transform .1s;
}
.tp-card:hover { transform: translateY(-3px); }
.tp-screen {
  padding: 1.1rem 1rem; min-height: 9rem;
  display: flex; flex-direction: column; justify-content: center;
}
.tp-dot {
  display: inline-block; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; border: 2px solid;
}
.tp-label {
  text-align: center; padding: .6rem 0; font-size: 1.15rem;
}
.tp-picked .tp-screen { outline: 4px solid var(--ring); outline-offset: 2px; }
.tp-picked .tp-label { font-weight: 700; }

.welcome-overlay {
  display: flex; align-items: center; justify-content: center;
  min-height: 80vh; padding: 2rem 1rem;
}
.welcome-card { max-width: 52rem; width: 100%; }

.settings-dropdown {
  position: absolute; right: 0; top: 100%; z-index: 40;
  min-width: 18rem; margin-top: .5rem;
  background: var(--surface); box-shadow: var(--shadow);
}

/* progress report table */
.progress-table {
  width: 100%; border-collapse: collapse; font-size: 1.05rem;
}
.progress-table th, .progress-table td {
  padding: .45rem .7rem; text-align: left;
  border-bottom: var(--bw-thin) solid var(--line);
}
.progress-table th { font-weight: 600; }
.progress-table tr:last-child td { border-bottom: none; }

/* topic home — vertical tabs */
.topic-home { padding-top: 1rem; }

.home-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .home-tabs {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}
.home-tablist {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
@media (min-width: 640px) {
  .home-tablist {
    flex-direction: column; flex-wrap: nowrap;
    position: sticky; top: 1rem; align-self: start;
  }
}
.home-tab {
  padding: .6rem 1rem; text-align: left; font-size: 1.05rem;
  font-family: var(--font-body); color: var(--ink);
  border: var(--bw-thin) solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: transparent;
  transition: background .1s;
}
.home-tab.on {
  background: var(--sky); font-weight: 700;
  box-shadow: inset 0 0 0 3px var(--ring);
}

.home-tabpanel { min-width: 0; }

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .75rem;
}
.topic-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.25rem .75rem; text-align: center;
  cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.topic-card:hover { transform: translateY(-2px); }

/* full-screen popup overlay — no sidebar, problem fills screen */
.popup-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper); overflow-y: auto;
  padding: 1rem 1.5rem 4rem;
}
.popup-bar { padding-bottom: .5rem; border-bottom: var(--bw) solid var(--line); }
.popup-work { max-width: 56rem; margin: 0 auto; }

/* larger text inside the popup for focus */
.popup-work .board { font-size: 1.15em; }
.popup-work .box { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.popup-work .flashsingle-q { font-size: clamp(3rem, 12vw, 5rem); }

.dismiss-warning { background: var(--sun); }

/* dismiss dialog animation */
.dismiss-enter { transition: all 0.3s ease-out; }
.dismiss-enter-start { opacity: 0; transform: translateY(-1rem) scale(0.97); }
.dismiss-enter-end { opacity: 1; transform: translateY(0) scale(1); }
.dismiss-leave { transition: all 0.15s ease-in; }
.dismiss-leave-start { opacity: 1; transform: translateY(0) scale(1); }
.dismiss-leave-end { opacity: 0; transform: translateY(-0.5rem) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .dismiss-enter, .dismiss-leave { transition: none; }
}

/* ==========================================================================
   Print — the interface goes, the sheet stays
   ========================================================================== */

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { background: #fff !important; background-image: none !important; color: #000 !important; }
  .noprint, .welcome-overlay, .topic-home { display: none !important; }

  /* by default hide progress (worksheet printing keeps only #printable) */
  #progress-report { display: none !important; }

  #printable { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .box { box-shadow: none; background: #fff !important; border-color: #000 !important; }
  .box-sm { background: #fff !important; }
  .wsitem { border-color: #000 !important; }
  .tgrid th, .tgrid td { border-color: #000 !important; }
  .story { background: #fff !important; border-left-color: #000 !important; }
  .fracn { border-bottom-color: #000 !important; }
  .shapeline, .shapepoly, .shapearc { stroke: #000 !important; }
  .shapearc-known { stroke: #aaa !important; }
  .shapetext { fill: #000 !important; }
  .shapedot { fill: #000 !important; }
  .shapegrid { stroke: #888 !important; }
  .shapeghost { stroke: #888 !important; }

  /* progress report printing — show it, hide everything else */
  body.printing-progress .popup-overlay { display: none !important; }
  body.printing-progress #progress-report {
    display: block !important;
    border: none !important; box-shadow: none !important;
    background: #fff !important;
  }
  body.printing-progress .progress-table th,
  body.printing-progress .progress-table td {
    border-color: #000 !important;
  }
}