/* Number of the Day (web/numberday.html): its own sheet, its own reset.
   A classroom worksheet look -- cream paper, a chalk-blue header, cards
   with a ruled feel -- big type for small hands on a phone, and a print
   layout that puts the same sheet on paper. */
/* The palette since 2026-09-24 (David: "please make it look more stylish"):
   indigo and violet with a sunny yellow and a pink, on a lavender page --
   the rules below all read these, so the whole sheet moved with them. The
   "blue" names are kept so no rule had to be renamed. */
:root {
    --paper: #f4f1ff;
    --ink: #1e1b3a;
    --muted: #6b6892;
    --blue: #5b4ee6;
    --blue-dark: #3a2c9e;
    --yellow: #ffc83d;
    --green: #1fb57a;
    --red: #ef5b6b;
    --line: #e5e0f7;
    --card: #ffffff;
    --pink: #ff6fae;
    --shadow: 0 8px 24px rgba(58, 44, 158, 0.10), 0 1px 2px rgba(58, 44, 158, 0.08);
    --round: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    background: var(--paper);
    color: var(--ink);
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }

/* --- header ------------------------------------------------------------- */
.nd-top {
    background: linear-gradient(160deg, var(--blue), var(--blue-dark));
    color: #fff;
    padding: calc(10px + env(safe-area-inset-top)) 16px 14px;
    text-align: center;
    position: relative;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}
/* Back and the music toggle sit in their own row above the title. They were
   `position: absolute` in the header's top corners, which is fine until the
   heading is wide: on a 375px phone "Number of the Day" ran from x 61 to 314
   and both pills sat across it (David, 2026-09-23: "the back to Speed Math
   button ... overlaps on where it says Number of the Day"). In flow they
   cannot overlap anything, at any width. */
.nd-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nd-back {
    color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600;
    padding: 5px 9px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
}
.nd-music {
    font: inherit; font-weight: 700; font-size: 0.78rem; cursor: pointer; touch-action: manipulation;
    color: #fff; background: transparent; padding: 5px 9px;
    border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
}
.nd-music.off { opacity: 0.6; }
body.display .nd-music { display: none; }
.nd-top h1 { margin: 10px 0 2px; font-size: 1.9rem; letter-spacing: 0.02em; font-weight: 800; }
.nd-top h1 span { font-weight: 400; font-size: 1.1rem; opacity: 0.85; }
.nd-date { font-size: 0.92rem; opacity: 0.9; }

/* --- body --------------------------------------------------------------- */
.nd-main { max-width: 640px; margin: 0 auto; padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); }
.nd-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.nd-panel { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.nd-grade-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; margin: 8px 0 6px; }
.nd-grade {
    font: inherit; font-weight: 800; font-size: 0.9rem; padding: 9px 0;
    border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer;
    touch-action: manipulation;
}
.nd-grade.on { background: var(--yellow); border-color: #d9a520; }
.nd-blurb { font-size: 0.86rem; color: var(--muted); }

.nd-hero {
    text-align: center; padding: 14px 10px 12px; margin-bottom: 12px;
    background: var(--card); border: 2px dashed var(--blue); border-radius: 18px;
}
/* The number on flip boards (reveal.js), Bob's "wheel. Of. Fortune."
   Each board is blank until it lands; `landing` is the flip, `calling` is
   the beat the class chants on. The place name sits under every digit, so
   the thing being chanted and the thing being taught are the same object. */
.nd-board { display: flex; justify-content: center; align-items: flex-start; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
.nd-tile {
    position: relative; display: grid; place-items: center;
    min-width: clamp(38px, 12vw, 62px); padding: 6px 4px 2px;
    background: var(--blue-dark); border-radius: 8px; border: 2px solid #17406e;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.nd-tile-face {
    font-size: clamp(2rem, 11vw, 3.4rem); font-weight: 900; line-height: 1.05;
    color: #fff; font-variant-numeric: tabular-nums; opacity: 0;
}
.nd-tile.up .nd-tile-face { opacity: 1; }
.nd-tile-place { font-size: clamp(0.42rem, 1.8vw, 0.56rem); letter-spacing: 0.08em; text-transform: uppercase; color: #bcd6f2; font-weight: 700; opacity: 0; }
.nd-tile.up .nd-tile-place { opacity: 1; }
.nd-tile.sep { background: none; border: none; box-shadow: none; min-width: 0; padding-left: 0; padding-right: 0; }
.nd-tile.sep .nd-tile-face { color: var(--blue-dark); }
.nd-tile.landing { animation: ndFlip 0.42s ease-out; }
.nd-tile.calling { background: var(--yellow); border-color: #d9a520; animation: ndCall 0.6s ease-out; }
.nd-tile.calling .nd-tile-face { color: var(--ink); }
.nd-tile.calling .nd-tile-place { color: #7a5c0a; }
@keyframes ndFlip {
    0% { transform: rotateX(-90deg) scale(0.9); }
    60% { transform: rotateX(12deg) scale(1.04); }
    100% { transform: none; }
}
@keyframes ndCall { 0% { transform: translateY(-6px) scale(1.09); } 100% { transform: none; } }
.nd-board.long .nd-tile { min-width: clamp(28px, 8vw, 46px); }
.nd-board.long .nd-tile-face { font-size: clamp(1.5rem, 7.5vw, 2.5rem); }
/* ... and on one line (Bob, 2026-09-25: "Can we have it so the last digit is on
   the same line for fifth grade"): the long place names were what widened the
   tiles past a phone's width, so they shrink and the row never wraps. */
.nd-board.long { flex-wrap: nowrap; gap: 3px; }
.nd-board.long .nd-tile { min-width: clamp(28px, 9.5vw, 46px); padding: 6px 3px 2px; flex: 0 1 auto; }   /* even widths, still one line at 320px */
.nd-board.long .nd-tile.sep { min-width: 0; }
.nd-board.long .nd-tile-place { font-size: clamp(0.34rem, 1.45vw, 0.5rem); letter-spacing: 0.02em; }

/* 1st grade's compare: the two numbers as base-ten blocks side by side (2026-09-25) */
.nd-compare-blocks { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.nd-compare-side { flex: 1 1 0; min-width: 0; text-align: center; }
.nd-compare-side .nd-model { max-width: 170px; }
.nd-compare-num { font-size: 1.4rem; font-weight: 900; color: var(--blue-dark); }
.nd-compare-gap { font-size: 1.6rem; font-weight: 900; color: #d63b7a; padding-bottom: 28px; }

.nd-chant { font-size: clamp(0.95rem, 4vw, 1.25rem); font-weight: 800; color: var(--blue-dark); margin: 2px 0 8px; transition: opacity 0.4s ease; }
.nd-chant.quiet { opacity: 0.25; }
.nd-hero-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.nd-hero-row .nd-btn { font-size: 0.82rem; padding: 7px 13px; }

/* Display mode: the teacher's board. Everything but the number and the
   chant goes; space chants it again, Escape comes back. */
.nd-display-exit { display: none; }
body.display { background: var(--blue-dark); }
body.display .nd-top, body.display .nd-panel, body.display .nd-tasks,
body.display .nd-done, body.display .nd-tools, body.display .nd-foot,
body.display .nd-progress-wrap { display: none !important; }
body.display .nd-main { max-width: none; padding: 0; display: grid; min-height: 100dvh; place-items: center; }
body.display .nd-hero { background: none; border: none; width: 100%; }
body.display .nd-label { color: #9fc2e8; font-size: 0.9rem; }
body.display .nd-tile { min-width: clamp(60px, 13vw, 150px); border-color: #0d2b4d; background: #123a66; }
body.display .nd-tile-face { font-size: clamp(3rem, 13vw, 9rem); }
body.display .nd-tile-place { font-size: clamp(0.6rem, 1.4vw, 1rem); }
body.display .nd-tile.sep { background: none; border: none; }
body.display .nd-tile.sep .nd-tile-face { color: #9fc2e8; }
body.display .nd-chant { color: #fff; font-size: clamp(1.2rem, 4vw, 2.4rem); }
body.display .nd-hero-row { display: none; }
body.display .nd-display-exit {
    display: block; position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 5;
    font: inherit; font-weight: 800; font-size: 0.85rem; padding: 8px 14px; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 999px; background: transparent; color: #fff;
}
.nd-progress-wrap { display: flex; align-items: center; gap: 10px; }
.nd-progress-track { flex: 1; height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.nd-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #63d08c); transition: width 0.3s ease; }
.nd-progress { font-weight: 800; font-size: 0.9rem; color: var(--muted); min-width: 4.2em; text-align: right; }

/* --- the task cards --------------------------------------------------------- */
.nd-tasks { display: flex; flex-direction: column; gap: 10px; }
.nd-card {
    background: var(--card); border: 1.5px solid var(--line); border-left: 6px solid var(--blue);
    border-radius: 12px; padding: 10px 12px 12px;
}
.nd-card.ok { border-left-color: var(--green); background: #f3fbf5; }
.nd-card.no { border-left-color: var(--red); }
.nd-card.pop { animation: ndPop 0.35s ease; }
@keyframes ndPop { 40% { transform: scale(1.02); } }
.nd-card-head { display: flex; align-items: center; gap: 8px; }
.nd-card-num { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 0.8rem; display: grid; place-items: center; flex: none; }
.nd-card.ok .nd-card-num { background: var(--green); }
.nd-card.no .nd-card-num { background: var(--red); }
.nd-card-title { font-weight: 800; font-size: 0.98rem; }
.nd-card-mark { margin-left: auto; font-weight: 900; font-size: 1.2rem; }
.nd-card.ok .nd-card-mark { color: var(--green); }
.nd-card.no .nd-card-mark { color: var(--red); }
.nd-prompt { margin: 8px 0 8px; font-size: 1.02rem; line-height: 1.35; }
.nd-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nd-hint, .nd-work { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }

.nd-input {
    font: inherit; font-size: 1.1rem; font-weight: 700; padding: 8px 10px; width: 6.5em; max-width: 100%;
    border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.nd-input.wide { flex: 1 1 8em; width: auto; }
.nd-input:focus { outline: none; border-color: var(--blue); }
.nd-input:disabled { background: #f4f4f4; color: var(--muted); }
.nd-fields { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.nd-field { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.nd-field .nd-input { width: 3.7em; text-align: center; padding-left: 4px; padding-right: 4px; }
.nd-check, .nd-btn {
    font: inherit; font-weight: 800; font-size: 0.92rem; padding: 9px 16px; cursor: pointer; touch-action: manipulation;
    border: 2px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue-dark);
}
.nd-check:disabled { opacity: 0.4; cursor: default; }
.nd-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-choice {
    font: inherit; font-weight: 700; font-size: 1rem; padding: 9px 14px; cursor: pointer; touch-action: manipulation;
    border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); max-width: 100%;
}
.nd-choice.picked { border-color: var(--blue); background: #eaf2fb; }
.nd-card.ok .nd-choice.picked { border-color: var(--green); background: #e3f6ea; }
.nd-card.no .nd-choice.picked { border-color: var(--red); background: #fdeaea; }
.nd-choice:disabled { cursor: default; }

.nd-line { width: 100%; height: auto; color: var(--ink); touch-action: manipulation; }
.nd-tick { cursor: pointer; }
.nd-dot { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.nd-card.ok .nd-dot { fill: var(--green); }
.nd-card.no .nd-dot { fill: var(--red); }

.nd-frame { display: grid; gap: 4px; }
.nd-frame.cells-10 { grid-template-columns: repeat(5, 40px); }
/* Two ten frames side by side, not one strip of 20, and never wider than the card
   (2026-09-26: it was 336px of fixed squares in a 315px card on a phone). */
.nd-frame.cells-20 { grid-template-columns: repeat(10, minmax(0, 30px)); max-width: 100%; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 6) { margin-left: 10px; }
.nd-frame.cells-20 .nd-cell { font: 800 0.8rem/1 "Andika", var(--round); color: #fff; }
.nd-frame.cells-100 { grid-template-columns: repeat(10, 24px); }
.nd-cell { width: 100%; aspect-ratio: 1; border: 2px solid var(--ink); background: #fff; padding: 0; cursor: pointer; touch-action: manipulation; border-radius: 3px; }
.nd-cell.filled { background: var(--yellow); }
.nd-count { font-weight: 800; font-size: 1rem; min-width: 2em; text-align: center; color: var(--muted); }

/* Shade the model (Bob: "kids fill in base ten blocks"). Ten strips for
   tenths, a hundred grid for hundredths; a finger dragged across fills a
   run of them. */
.nd-shade { display: grid; gap: 2px; width: 100%; max-width: 300px; touch-action: none; }
.nd-shade.parts-10 { grid-template-columns: repeat(10, 1fr); aspect-ratio: 10 / 7; }
.nd-shade.parts-100 { grid-template-columns: repeat(10, 1fr); aspect-ratio: 1; }
.nd-piece { border: 1.5px solid var(--ink); background: #fff; padding: 0; cursor: pointer; border-radius: 2px; }
.nd-shade.parts-10 .nd-piece { border-width: 2px; }
.nd-piece.on { background: var(--blue); border-color: var(--blue-dark); }
.nd-card.ok .nd-piece.on { background: var(--green); }
.nd-card.no .nd-piece.on { background: var(--red); }
.nd-card.ok .nd-shade { pointer-events: none; }   /* right only: a wrong model stays open to fix (Bob, 2026-09-26: "It won't let me correct") */

.nd-model { width: 100%; max-width: 360px; height: auto; color: var(--ink); }
.nd-model-dots { max-width: 230px; }
.nd-model-decimal { max-width: 210px; }
.nd-model-tally { max-width: 300px; }
.nd-model-array { max-width: 280px; }
.nd-dotfill { fill: var(--blue); }
.nd-flat { fill: #b9d4f2; stroke: var(--ink); stroke-width: 1.2; }
.nd-rod { fill: #f6c445; stroke: var(--ink); stroke-width: 1.2; }
.nd-unit { fill: #2e9e5b; stroke: var(--ink); stroke-width: 0.8; }
.nd-empty { fill: #fff; stroke: var(--ink); stroke-width: 0.5; }

/* Read aloud (Bob, 2026-09-23): the sentence is the button; it lights while
   it is being said, and the speaker says it can be tapped. */
.nd-prompt.speakable { cursor: pointer; border-radius: 8px; margin-left: -6px; margin-right: -6px; padding: 2px 6px; transition: background 0.2s; }
.nd-prompt.speakable:hover { background: #f3f7fc; }
.nd-prompt.speaking { background: #eaf2fb; box-shadow: inset 3px 0 0 var(--blue); }
.nd-speaker { margin-left: 6px; font-size: 0.95em; opacity: 0.75; white-space: nowrap; }
.nd-prompt.speaking .nd-speaker { opacity: 1; }

/* The ten frame an add-to or subtract-from works on (Bob, 2026-09-23): dots,
   not filled squares; a dot crossed out gets a red line through it, a dot
   added is a second colour. */
.nd-tenframe { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 4px; }
.nd-tf-step { font-weight: 700; font-size: 0.92rem; color: var(--blue-dark); }
.nd-tf-grid .nd-cell.filled { background: radial-gradient(circle, var(--blue) 0 55%, #fff 58%); }
.nd-tf-grid .nd-cell.added { background: radial-gradient(circle, #f08a24 0 55%, #fff 58%); }
.nd-tf-grid .nd-cell.struck {
    background:
        linear-gradient(135deg, transparent 0 44%, var(--red) 44% 56%, transparent 56%),
        radial-gradient(circle, rgba(47, 111, 179, 0.45) 0 55%, #fff 58%);
}
.nd-tenframe.done .nd-cell { cursor: default; }
.nd-tf-again { font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--muted); background: none; border: none; padding: 2px 0; text-decoration: underline; cursor: pointer; }
.nd-tenframe.done .nd-tf-again { display: none; }

/* Build it (Bob, 2026-09-23: "9 rods and 9 units ... the kids click on them
   to make the number. And when they click on them they light up"): every
   block starts dim; a lit one takes its colour, the model's own -- flats
   blue, rods yellow, units green -- and glows. Sized for fingers, not to
   scale with each other. */
.nd-build { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.nd-build-row { display: flex; gap: 4px; align-items: flex-end; }
.nd-block {
    padding: 0; cursor: pointer; touch-action: manipulation; border: 2px solid #b8bfcc; border-radius: 3px;
    background-color: #eef0f4; transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.nd-block.flat {
    flex: 1 1 0; max-width: 44px; aspect-ratio: 1;
    background-image: repeating-linear-gradient(90deg, transparent 0 9%, rgba(31, 36, 48, 0.12) 9% 10%), repeating-linear-gradient(0deg, transparent 0 9%, rgba(31, 36, 48, 0.12) 9% 10%);
}
.nd-block.rod { flex: 0 0 22px; height: 110px; background-image: repeating-linear-gradient(0deg, transparent 0 9%, rgba(31, 36, 48, 0.15) 9% 10%); }
.nd-block.unit { flex: 0 0 22px; height: 22px; }
.nd-block.lit { border-color: var(--ink); transform: translateY(-2px); }
.nd-block.flat.lit { background-color: #5b9be0; box-shadow: 0 0 10px rgba(91, 155, 224, 0.8); }
.nd-block.rod.lit { background-color: var(--yellow); box-shadow: 0 0 10px rgba(246, 196, 69, 0.9); }
.nd-block.unit.lit { background-color: var(--green); box-shadow: 0 0 10px rgba(46, 158, 91, 0.8); }
.nd-block:disabled { cursor: default; }
.nd-build-sum { text-align: left; color: var(--ink); }

/* --- done, tools ---------------------------------------------------------------- */
.nd-done { margin-top: 12px; padding: 14px; border-radius: 14px; background: #fff8dc; border: 2px solid var(--yellow); text-align: center; }
.nd-done-text { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; }
.nd-done-row, .nd-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nd-btn.primary { background: var(--blue); color: #fff; }
.nd-tools { margin-top: 18px; }
.nd-foot { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 12px 0 0; }

/* --- print --------------------------------------------------------------------------- */
.nd-print { display: none; }
@media print {
    @page { margin: 14mm; }
    body { background: #fff; color: #000; }
    body.printing .nd-top, body.printing .nd-main { display: none; }
    body.printing .nd-print { display: block; font-family: Georgia, "Times New Roman", serif; }
    .pr-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 6px; flex-wrap: wrap; }
    .pr-brand { font-size: 20pt; font-weight: 700; }
    .pr-meta { font-size: 10pt; }
    .pr-name { margin-left: auto; font-size: 11pt; }
    .pr-number-wrap { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
    .pr-number-label { font-size: 12pt; font-style: italic; }
    .pr-number { font-size: 26pt; font-weight: 700; min-width: 2.2in; border: 2px solid #000; border-radius: 50%; padding: 6px 18px; text-align: center; min-height: 0.6in; }
    .pr-tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
    .pr-task { border: 1px solid #000; border-radius: 6px; padding: 6px 8px; break-inside: avoid; min-height: 0.95in; }
    .pr-title { font-weight: 700; font-size: 10.5pt; }
    .pr-prompt { font-size: 10pt; margin: 2px 0 6px; }
    .pr-options, .pr-line { font-size: 10pt; }
    .pr-answer { border-bottom: 1px solid #000; height: 0.45in; }
    .pr-answer.tall { height: 1.4in; border: 1px solid #000; font-size: 9pt; padding: 3px; }
    .pr-frame { display: grid; gap: 2px; }
    .pr-frame.cells-10 { grid-template-columns: repeat(5, 0.28in); }
    .pr-frame.cells-20 { grid-template-columns: repeat(10, 0.22in); }
    .pr-frame.cells-100 { grid-template-columns: repeat(10, 0.16in); }
    .pr-frame span { display: block; aspect-ratio: 1; border: 1px solid #000; }
    .pr-grid { display: grid; gap: 1px; grid-template-columns: repeat(10, 0.15in); }
    .pr-grid.parts-10 { grid-template-columns: repeat(10, 0.15in); }
    .pr-grid span { display: block; border: 1px solid #000; }
    .pr-grid.parts-10 span { height: 0.5in; }
    .pr-grid.parts-100 span { aspect-ratio: 1; }
}

/* --- Explore the number (explore.js) ----------------------------------------------
   Bob, 2026-09-22: a tool for "how big a number really is" -- because "kids
   really struggle with conceptualizing the value of 3 in the hundreds place
   versus the millions place" -- and one for decimals as "a piece of a
   whole", where 0.2 has to look bigger than 0.198. */
.nd-explore-tabs { display: flex; gap: 6px; margin: 8px 0 10px; flex-wrap: wrap; }
.nd-tab {
    font: inherit; font-weight: 800; font-size: 0.85rem; padding: 8px 12px; cursor: pointer; touch-action: manipulation;
    border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
}
.nd-tab.on { background: var(--blue); border-color: var(--blue-dark); color: #fff; }

/* how big is it really? */
.nd-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nd-pick-lead { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.nd-pick {
    font: inherit; display: grid; justify-items: center; gap: 1px; padding: 5px 8px; cursor: pointer; touch-action: manipulation;
    border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.nd-pick.on { border-color: var(--blue); background: #eaf2fb; }
.nd-pick-digit { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.nd-pick-place { font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.nd-worth { margin: 10px 0 6px; font-size: 1rem; }
.nd-worth-big { color: var(--blue-dark); font-size: 1.25rem; }
.nd-ladder { display: grid; gap: 6px; margin-top: 8px; }
.nd-rung-row { display: grid; grid-template-columns: 11em 1fr; align-items: center; gap: 10px; }
.nd-rung-boxes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.nd-rung { height: 22px; border: 2px solid var(--line); border-radius: 4px; background: #fff; }
.nd-rung.on { background: var(--yellow); border-color: #d9a520; }
.nd-rung.under { background: #dce8f6; border-color: #a8c6e8; }
.nd-rung-label { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 460px) {
    .nd-rung-row { grid-template-columns: 1fr; gap: 3px; }
    .nd-rung { height: 18px; }
}
.nd-ladder-note, .nd-far { font-size: 0.86rem; color: var(--muted); margin: 6px 0 0; line-height: 1.4; }
.nd-far { color: var(--ink); background: #f3f7fc; border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; padding: 8px 10px; margin-top: 10px; }

/* pieces of one whole */
.nd-pieces-bar { display: grid; gap: 8px; }
.nd-cuts .nd-choice { display: grid; gap: 1px; text-align: left; font-size: 0.92rem; }
.nd-cuts .nd-choice small { font-weight: 500; font-size: 0.68rem; color: var(--muted); }
.nd-slide-row { display: flex; align-items: center; gap: 10px; }
.nd-slider { flex: 1; accent-color: var(--blue); height: 26px; }
.nd-pieces-value { font-weight: 900; font-size: 1.3rem; color: var(--blue-dark); min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.nd-pieces-stage { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 10px 0 8px; }
.nd-whole { width: 100%; max-width: 260px; height: auto; }
.nd-whole-bg { fill: #fff; }
.nd-whole-edge { fill: none; stroke: var(--ink); stroke-width: 3; }
.nd-fill-t { fill: #2f6fb3; }
.nd-fill-h { fill: #f6c445; }
.nd-fill-th { fill: #2e9e5b; }
.nd-cut-t { stroke: var(--ink); stroke-width: 1.6; }
.nd-cut-h { stroke: var(--ink); stroke-width: 0.8; opacity: 0.55; }
.nd-cut-th { stroke: var(--ink); stroke-width: 0.35; opacity: 0.28; }
.nd-cat { width: 92px; height: auto; }
.nd-cat-body { fill: #ece5d6; }
.nd-cat-fill { fill: #2f6fb3; opacity: 0.85; }
.nd-cat-edge { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.nd-cat-label { font-size: 8px; font-weight: 700; fill: var(--muted); font-family: inherit; }
.nd-pieces-sum { font-size: 0.98rem; margin-bottom: 10px; }
.nd-pieces-sum .p-t { color: #2f6fb3; }
.nd-pieces-sum .p-h { color: #b98c05; }
.nd-pieces-sum .p-th { color: #2e9e5b; }
.nd-compare { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.nd-compare-one { flex: 1 1 180px; }
.nd-compare-head { font-weight: 900; font-size: 1.2rem; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.nd-compare-note { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.nd-compare-verdict { flex: 1 1 100%; font-size: 0.92rem; background: #fff8dc; border: 2px solid var(--yellow); border-radius: 10px; padding: 9px 11px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .nd-tile.landing, .nd-tile.calling { animation: none; }
}

/* ==========================================================================
   The stylish pass (David, 2026-09-24: "for the game, please make it look
   more stylish"). Written over the rules above rather than in place of them,
   so display mode and print keep what they had: a rounded face, a lavender
   page with a soft glow and a dot grid, a gradient header with a curve, cards
   that float, chunky buttons that press down, glossy flip tiles.
   ========================================================================== */
body {
    font-family: var(--round);
    background:
        radial-gradient(900px 500px at 100% -10%, rgba(255, 111, 174, 0.16), transparent 60%),
        radial-gradient(800px 600px at -10% 110%, rgba(91, 78, 230, 0.14), transparent 60%),
        radial-gradient(circle, rgba(91, 78, 230, 0.10) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
        var(--paper);
    background-attachment: fixed;
}
.nd-top {
    background: linear-gradient(125deg, #4f3fd9 0%, #7a3fe0 55%, #d9459a 100%);
    border-radius: 0 0 28px 28px;
    padding-bottom: 20px;
    box-shadow: 0 10px 30px rgba(79, 63, 217, 0.35);
    overflow: hidden;
}
/* big faint numbers behind the title */
.nd-top::after {
    content: "7 3 + 9 = 1 2 8 \00D7 4 5 \00F7 6";
    position: absolute; left: -10%; right: -10%; bottom: -18px;
    font: 900 4.4rem/1 var(--round); letter-spacing: 0.25em; white-space: nowrap;
    color: rgba(255, 255, 255, 0.07); pointer-events: none;
}
.nd-top h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); font-weight: 900; letter-spacing: 0.01em; text-shadow: 0 3px 0 rgba(30, 20, 110, 0.35); }
.nd-top h1 span { color: var(--yellow); font-style: italic; font-weight: 800; opacity: 1; }
.nd-date { font-weight: 700; opacity: 0.92; }
.nd-back, .nd-music { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }

.nd-main { padding-top: 18px; }
.nd-label { color: var(--blue); letter-spacing: 0.2em; }
.nd-panel { border: none; border-radius: 20px; box-shadow: var(--shadow); padding: 14px 16px; }
.nd-grade {
    border: none; border-radius: 12px; background: #f1eeff; color: var(--blue-dark);
    box-shadow: inset 0 -3px 0 rgba(58, 44, 158, 0.12); transition: transform 0.12s, background 0.15s;
}
.nd-grade:hover { background: #e7e2ff; }
.nd-grade:active { transform: translateY(2px); }
.nd-grade.on { background: linear-gradient(180deg, #ffd766, #ffb81f); color: #4a3200; box-shadow: inset 0 -3px 0 rgba(150, 90, 0, 0.35), 0 4px 12px rgba(255, 184, 31, 0.45); }

/* the number: a card with a gradient rim, glossy tiles */
.nd-hero {
    border: 3px solid transparent; border-radius: 26px; padding: 18px 12px 16px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(125deg, #5b4ee6, #b04ee0, #ff6fae) border-box;
    box-shadow: 0 14px 36px rgba(91, 78, 230, 0.18);
}
.nd-tile {
    border: none; border-radius: 14px;
    background: linear-gradient(180deg, #6a5cf0 0%, #3a2c9e 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 6px 14px rgba(58, 44, 158, 0.35);
}
.nd-tile::after {   /* the split line a flip board has across its middle */
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.25);
}
.nd-tile.sep::after { display: none; }
.nd-tile-face { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.nd-tile-place { color: #d9d3ff; }
.nd-tile.calling { background: linear-gradient(180deg, #ffe07a, #ffb81f); }
.nd-chant { color: var(--blue-dark); font-weight: 900; }
.nd-progress-track { height: 12px; background: #ece8ff; box-shadow: inset 0 1px 2px rgba(58, 44, 158, 0.15); }
.nd-progress-bar { background: linear-gradient(90deg, #1fb57a, #3fd6b0, #5bc8ff); border-radius: 999px; }
.nd-progress { color: var(--blue-dark); }

/* chunky buttons that press down */
.nd-check, .nd-btn {
    border: none; border-radius: 14px; padding: 10px 18px; font-weight: 900;
    background: #fff; color: var(--blue-dark);
    box-shadow: inset 0 0 0 2px #dcd5ff, 0 4px 0 #cfc6ff, 0 8px 16px rgba(58, 44, 158, 0.12);
    transition: transform 0.1s, box-shadow 0.1s;
}
.nd-check:active, .nd-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px #dcd5ff, 0 1px 0 #cfc6ff; }
.nd-check, .nd-btn.primary {
    background: linear-gradient(180deg, #7163f5, #4f3fd9); color: #fff;
    box-shadow: 0 4px 0 #2f2396, 0 8px 18px rgba(79, 63, 217, 0.35);
}
.nd-check:active, .nd-btn.primary:active { box-shadow: 0 1px 0 #2f2396; }
.nd-check:disabled { box-shadow: none; }

/* the task cards */
.nd-tasks { gap: 14px; }
.nd-card {
    border: none; border-radius: 20px; padding: 16px 16px 16px; box-shadow: var(--shadow);
    position: relative; overflow: hidden; transition: box-shadow 0.2s, background 0.2s;
}
.nd-card::before {   /* a colour strip along the top: the card's state */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
    background: linear-gradient(90deg, #5b4ee6, #b04ee0, #ff6fae);
}
.nd-card.ok { background: linear-gradient(180deg, #effcf6, #fff 60%); box-shadow: 0 0 0 2px rgba(31, 181, 122, 0.45), var(--shadow); }
.nd-card.ok::before { background: linear-gradient(90deg, #1fb57a, #5bd6a4); }
.nd-card.no { box-shadow: 0 0 0 2px rgba(239, 91, 107, 0.45), var(--shadow); }
.nd-card.no::before { background: linear-gradient(90deg, #ef5b6b, #ff9a6b); }
.nd-card.pop { animation: ndPopBig 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes ndPopBig { 0% { transform: scale(1); } 35% { transform: scale(1.035) rotate(-0.4deg); } 100% { transform: none; } }
.nd-card-num {
    width: 30px; height: 30px; font-size: 0.9rem;
    background: linear-gradient(135deg, #7163f5, #b04ee0); box-shadow: 0 3px 8px rgba(91, 78, 230, 0.35);
}
.nd-card.ok .nd-card-num { background: linear-gradient(135deg, #1fb57a, #3fd6b0); }
.nd-card.no .nd-card-num { background: linear-gradient(135deg, #ef5b6b, #ff9a6b); }
.nd-card-title { font-size: 1.05rem; font-weight: 900; color: var(--blue-dark); }
.nd-card-mark { font-size: 1.5rem; }
.nd-card.ok .nd-card-mark { animation: ndMark 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes ndMark { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }
.nd-prompt { font-size: 1.06rem; }

.nd-input { border: 2px solid #e1dbfb; border-radius: 12px; background: #faf9ff; transition: border-color 0.15s, box-shadow 0.15s; }
.nd-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(91, 78, 230, 0.18); background: #fff; }
.nd-field { color: var(--blue); letter-spacing: 0.02em; }
.nd-choice { border: 2px solid #e1dbfb; border-radius: 12px; box-shadow: 0 3px 0 #e1dbfb; transition: transform 0.1s, box-shadow 0.1s; }
.nd-choice:active { transform: translateY(2px); box-shadow: 0 1px 0 #e1dbfb; }
.nd-choice.picked { border-color: var(--blue); background: #f0edff; box-shadow: 0 3px 0 var(--blue); }
.nd-tab { border: none; background: #f1eeff; color: var(--blue-dark); }
.nd-tab.on { background: linear-gradient(180deg, #7163f5, #4f3fd9); color: #fff; box-shadow: 0 3px 10px rgba(79, 63, 217, 0.35); }
.nd-done { border: none; border-radius: 22px; background: linear-gradient(135deg, #fff6d6, #ffe7f2); box-shadow: 0 10px 28px rgba(255, 184, 31, 0.25); }
.nd-done-text { color: var(--blue-dark); font-size: 1.15rem; }

/* ==========================================================================
   The start menu (David, 2026-09-24): the title, Bob with his bubble, and
   Click to Enter, over a violet sky with numbers drifting up it. It covers
   the page until Enter, then fades and lifts away.
   ========================================================================== */
body.nd-at-start { overflow: hidden; }
.nd-start {
    position: fixed; inset: 0; z-index: 60; overflow: hidden;
    display: flex; flex-direction: column;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    background: radial-gradient(120% 80% at 50% 0%, #7a4df0 0%, #4b2fc4 45%, #2a1a7a 100%);
    color: #fff; font-family: var(--round);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.nd-start.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.nd-start-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nd-sky-num {
    position: absolute; bottom: -3rem; font-weight: 900; line-height: 1;
    color: hsl(var(--hue) 95% 72%); opacity: 0.35; text-shadow: 0 0 18px hsl(var(--hue) 95% 60% / 0.6);
    animation: ndSkyRise linear infinite;
}
@keyframes ndSkyRise {
    from { transform: translateY(0) rotate(-10deg); }
    to { transform: translateY(-115vh) rotate(14deg); }
}
.nd-start-top { position: relative; display: flex; }
.nd-start-back { color: #fff; }
.nd-start-body {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(18px, 4vh, 34px); text-align: center;
}
.nd-start-title {
    margin: 0; font-weight: 900; line-height: 0.95; letter-spacing: 0.01em;
    font-size: clamp(2.8rem, 13vw, 5.2rem);
    text-shadow: 0 5px 0 rgba(20, 10, 80, 0.45), 0 12px 30px rgba(0, 0, 0, 0.35);
    animation: ndTitleIn 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.nd-st-word { display: inline-block; color: #fff; }
.nd-st-of { display: block; font-size: 0.42em; font-style: italic; color: var(--yellow); margin: 0.12em 0; }
@keyframes ndTitleIn { from { opacity: 0; transform: translateY(-20px) scale(0.9); } to { opacity: 1; transform: none; } }
/* Bob, staying put: his face with the bubble beside it, bobbing gently */
.nd-bob { display: flex; align-items: flex-end; justify-content: center; gap: 6px; max-width: min(620px, 100%); animation: ndBobIn 0.9s 0.25s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.nd-bob-face {
    width: clamp(120px, min(50vw, 27vh), 300px); height: auto; display: block; flex: none;   /* bigger (David, 2026-09-25; was clamp(120px, 34vw, 190px)), held by the height too so Enter stays on screen */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
    transform-origin: 50% 100%; animation: ndBobSway 3.2s ease-in-out infinite;
}
.nd-bob-bubble {
    position: relative; margin-bottom: clamp(40px, 14vw, 90px); background: #fff; color: var(--ink);
    border-radius: 20px; padding: 12px 16px; font-weight: 900; font-size: clamp(0.98rem, 4.2vw, 1.25rem); line-height: 1.3;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), inset 0 -4px 0 #ece8ff; max-width: 250px; text-align: left;
}
.nd-bob-bubble::before {
    content: ""; position: absolute; left: -13px; bottom: 18px;
    border: 9px solid transparent; border-right: 14px solid #fff; border-left: 0;
}
@keyframes ndBobIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ndBobSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-4px); } }
.nd-enter {
    font: 900 clamp(1.2rem, 5.2vw, 1.6rem)/1 var(--round); letter-spacing: 0.02em;
    padding: 18px 40px; border: none; border-radius: 999px; cursor: pointer; touch-action: manipulation;
    color: #4a3200; background: linear-gradient(180deg, #ffe27a, #ffb81f);
    box-shadow: 0 6px 0 #c77f00, 0 14px 30px rgba(255, 184, 31, 0.5);
    animation: ndEnterIn 0.8s 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both, ndEnterPulse 2.2s 1.4s ease-in-out infinite;
}
.nd-enter:active { transform: translateY(4px); box-shadow: 0 2px 0 #c77f00; }
.nd-enter:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes ndEnterIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes ndEnterPulse {
    0%, 100% { box-shadow: 0 6px 0 #c77f00, 0 14px 30px rgba(255, 184, 31, 0.5); }
    50% { box-shadow: 0 6px 0 #c77f00, 0 14px 44px rgba(255, 200, 60, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .nd-sky-num, .nd-bob-face, .nd-enter, .nd-start-title, .nd-bob, .nd-card.pop, .nd-card.ok .nd-card-mark { animation: none; }
}
body.display .nd-start, body.printing .nd-start { display: none; }
@media print { .nd-start { display: none; } }

/* --- Bob's part deux (2026-09-25) ------------------------------------------- */
/* The ? on expanded form and notation, and the example card it opens (his
   picture: a title, a line of what it means, the standard form, and the
   number taken apart in soft coloured tiles). */
.nd-help-btn {
    flex: none; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; touch-action: manipulation;
    font: 900 1rem/1 var(--round); color: #fff; background: linear-gradient(135deg, #ff8a3d, #ff5fa2);
    box-shadow: 0 3px 0 #c2410c, 0 4px 10px rgba(255, 95, 162, 0.35);
}
.nd-help-btn.on { background: linear-gradient(135deg, #7163f5, #4f3fd9); box-shadow: 0 3px 0 #2f2396; }
.nd-help-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.nd-help {
    margin: 2px 0 10px; padding: 12px 14px; border-radius: 14px; background: #fff;
    border: 2px solid #e1dbfb; box-shadow: 0 6px 16px rgba(58, 44, 158, 0.10);
}
.nd-help-title { font-weight: 900; font-size: 1.1rem; color: #d9480f; text-align: center; }
.nd-help-blurb { font-size: 0.86rem; color: var(--muted); text-align: center; margin: 2px 0 10px; }
.nd-help-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.nd-help-label { font-size: 0.78rem; font-weight: 800; color: var(--blue); min-width: 7.5em; }
.nd-help-label2 { color: #d9480f; }
.nd-help-std { font-weight: 900; font-size: 1.15rem; color: var(--blue-dark); letter-spacing: 0.03em; }
.nd-help-parts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.nd-help-tile { padding: 3px 8px; border-radius: 6px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.nd-help-plus { font-weight: 900; color: var(--muted); }

/* Thousand cubes in Build it (3rd grade): a block drawn as a cube. */
/* Since 2026-09-25 a drawn cube, bigger, five to a row (Bob: "make the
   thousand blocks larger or more visually 3D cube"): three faces with the
   10 x 10 grid on each, grey until tapped, pink and glowing when lit. */
.nd-build-row.cubes { display: grid; grid-template-columns: repeat(5, minmax(0, 64px)); gap: 6px; }
.nd-block.cube {
    width: 100%; aspect-ratio: 1; border: none; background: none; border-radius: 0; box-shadow: none;
    transition: transform 0.15s, filter 0.15s;
}
.nd-block.cube svg { display: block; width: 100%; height: 100%; }
.nd-block.cube .f-top { fill: #f4f5f8; }
.nd-block.cube .f-left { fill: #dde1e8; }
.nd-block.cube .f-right { fill: #c6ccd6; }
.nd-block.cube .f-grid { fill: none; stroke: rgba(31, 36, 48, 0.16); stroke-width: 0.6; }
.nd-block.cube .f-edge { fill: none; stroke: #9aa2b1; stroke-width: 2; stroke-linejoin: round; }
.nd-block.cube.lit { background: none; box-shadow: none; filter: drop-shadow(0 0 6px rgba(232, 121, 185, 0.85)); }
.nd-block.cube.lit .f-top { fill: #fbb7da; }
.nd-block.cube.lit .f-left { fill: #e879b9; }
.nd-block.cube.lit .f-right { fill: #c9559a; }
.nd-block.cube.lit .f-grid { stroke: rgba(80, 10, 50, 0.25); }
.nd-block.cube.lit .f-edge { stroke: #7a1f55; }

/* 2nd's six boxes in three pairs, and K's inline number bond. */
.nd-fields.cols { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 16px; }
.nd-fields.inline { flex-wrap: nowrap; align-items: center; gap: 8px; }
.nd-fields.inline .nd-field { flex-direction: row; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 900; color: var(--ink); }

/* K's 1 more / 1 less on unit cubes. */
.nd-ones { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.nd-ones-part { display: flex; flex-direction: column; gap: 4px; }
.nd-ones-label { font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.nd-ones-grid { display: grid; grid-template-columns: repeat(10, 24px); gap: 3px; }
.nd-ones-grid .nd-block.unit { width: 24px; height: 24px; }
.nd-block.unit.nd-ones-extra { border-style: dashed; }
.nd-block.unit.nd-ones-extra.lit { background-color: #ff8a3d; border-style: solid; box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); }
.nd-block.unit.struck { opacity: 0.45; background-image: linear-gradient(135deg, transparent 0 42%, var(--red) 42% 58%, transparent 58%); }

/* 1st's dimes and pennies to group. */
.nd-coins { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.nd-coin-row { display: flex; flex-wrap: wrap; gap: 5px; }
.nd-coin {
    border-radius: 50%; padding: 0; cursor: pointer; touch-action: manipulation; font: 900 0.62rem/1 var(--round);
    color: #7b8190; background: #eef0f4; border: 2px dashed #b8bfcc; opacity: 0.8;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nd-coin.dime { width: 30px; height: 30px; }
.nd-coin.penny { width: 32px; height: 32px; }
.nd-coin.lit { opacity: 1; border-style: solid; transform: translateY(-2px); }
.nd-coin.dime.lit { color: #3a4150; background: radial-gradient(circle at 35% 30%, #ffffff, #c9ced6 55%, #9097a4); border-color: #7d8492; box-shadow: 0 0 8px rgba(160, 170, 190, 0.9); }
.nd-coin.penny.lit { color: #fff3e6; background: radial-gradient(circle at 35% 30%, #f2b27c, #c46a2c 55%, #8d4418); border-color: #7a3a14; box-shadow: 0 0 8px rgba(196, 106, 44, 0.8); }

/* 10 more / 10 less on base-ten blocks (1st grade). */
.nd-tens { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.nd-tens-row { align-items: flex-end; flex-wrap: wrap; }
.nd-tens-units { display: grid; grid-template-columns: repeat(5, 22px); gap: 3px; margin-left: 8px; }
.nd-tens-units .nd-block.unit { display: block; }
.nd-tens-extra { background-color: #eef0f4; border-style: dashed; }
.nd-block.rod.nd-tens-extra.lit { background-color: #ff8a3d; border-style: solid; box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); }
.nd-block.rod.struck {
    opacity: 0.45;
    background-image: linear-gradient(135deg, transparent 0 46%, var(--red) 46% 54%, transparent 54%);
}

/* The hundreds chart to count on with (1st grade). */
.nd-hc { width: 100%; }
.nd-hc-open {
    display: inline-flex; align-items: center; gap: 8px; font: 800 0.88rem/1 var(--round); color: var(--blue-dark);
    padding: 8px 12px; border: none; border-radius: 12px; background: #f1eeff; cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(58, 44, 158, 0.12);
}
.nd-hc-open.on { background: #e2dcff; }
.nd-hc-icon {
    width: 18px; height: 18px; border-radius: 3px;
    background: repeating-linear-gradient(90deg, #7163f5 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, #7163f5 0 2px, #fff 2px 6px);
}
.nd-hc-panel { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.nd-hc-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; max-width: 420px; }
.nd-hc-cell {
    position: relative; aspect-ratio: 1; padding: 0; border: 1px solid #d9d3f5; border-radius: 4px; background: #fff;
    font: 800 clamp(0.62rem, 2.6vw, 0.8rem)/1 var(--round); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.nd-hc-cell.start { background: var(--yellow); border-color: #d9a520; }
.nd-hc-cell.counted { background: #5bd6a4; border-color: var(--green); color: #fff; }
.nd-hc-cell.counted::after {
    content: attr(data-step); position: absolute; top: -2px; right: 1px; font-size: 0.5rem; color: #06402a;
}

/* The numbers warp backwards on the way to Speed Math (2026-09-25). This page
   loads only its own sheet, so the overlay's rules (effects.css) are here too. */
.warp-overlay { position: fixed; inset: 0; z-index: 1000; background: #04040c; opacity: 0; transition: opacity 0.25s ease; }
.warp-overlay.show { opacity: 1; }
.warp-overlay.landed { background: #ffffff; }
.warp-overlay canvas { display: block; width: 100%; height: 100%; }

/* The whole sheet right (2026-09-25): confetti over everything for five
   seconds (main.js celebrate), falling, drifting and spinning, then fading. */
.nd-confetti { position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; transition: opacity 0.6s ease; }
.nd-confetti.fade { opacity: 0; }
.nd-bit { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: ndConfetti linear forwards; }
.nd-bit.round { width: 11px; height: 11px; border-radius: 50%; }
@keyframes ndConfetti {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--drift, 0), 110vh) rotate(var(--spin, 540deg)); opacity: 1; }
}

/* Bob's fourth round (2026-09-25) ------------------------------------------------------ */
/* Tally marks to pick from (K) */
.nd-choice.tally { padding: 6px 10px; }
.nd-choice.tally svg { height: 40px; width: auto; display: block; color: var(--ink); }
/* 5th grade's split square: one hundredth as ten thousandths slivers */
.nd-sliver-cap { font-size: 0.8rem; color: var(--muted); margin: 10px 0 4px; font-weight: 700; }
.nd-slivers { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: min(100%, 260px); height: 56px; padding: 3px; border: 2px solid var(--blue-dark); border-radius: 4px; background: #fff; }
.nd-sliver { border: 1px solid var(--line); background: #fff; padding: 0; border-radius: 1px; cursor: pointer; touch-action: manipulation; }
.nd-sliver.on { background: var(--blue); border-color: var(--blue-dark); }
/* Ink saver: the page in white, the heavy purple header plain (the tiles keep their colour) */
body.plain { background: #fff; }
body.plain .nd-top { background: #fff; color: var(--ink); border-bottom: 2px solid var(--line); box-shadow: none; }
body.plain .nd-top * { color: var(--ink); }
body.plain .nd-panel, body.plain .nd-card { box-shadow: none; }

/* --- Bob's notes, 2026-09-26 ------------------------------------------------ */
/* Kid-friendly numerals, centred in their buttons ("Make the numerals more kid friendly font and better centered"). */
.nd-prompt, .nd-choice, .nd-input, .nd-field span, .nd-count, .nd-order-tile, .nd-slot, .nd-checkbox span, .nd-help-std, .nd-help-tile, .nd-pv-chart td {
    font-family: "Andika", var(--round);
}
.nd-choice { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; }
.nd-blurb.hidden { display: none; }
/* Fractions written the standard way: a numerator over a bar over a denominator. */
.nd-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin: 0 0.12em; font-size: 0.86em; }
.nd-frac .nd-num { padding: 0 0.15em 0.08em; border-bottom: 0.1em solid currentColor; }
.nd-frac .nd-den { padding: 0.08em 0.15em 0; }
/* + between the expanded form boxes. */
.nd-fields.plus { align-items: flex-start; gap: 6px; }
.nd-plus { font: 900 1.3rem/1 var(--round); color: var(--blue-dark); padding-top: 9px; }
/* One try: the right answer shown in green after a wrong pick. */
.nd-choice.right { border-color: var(--green) !important; background: #e3f6ea !important; box-shadow: 0 3px 0 var(--green) !important; }
.nd-one-try { margin-top: 6px; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
/* Find the error. */
.nd-errs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nd-errs .nd-plus { padding-top: 0; }
.nd-noerr { margin-left: 4px; background: #fff7e0; }
/* A mixed number to fill in. */
.nd-fracin { display: flex; align-items: center; gap: 10px; }
.nd-fracin .nd-input { width: 3.6em; text-align: center; font-size: 1.15rem; }
.nd-fracin .nd-input.whole { width: 4.6em; height: 3.2em; font-size: 1.3rem; }
.nd-fracstack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nd-fracbar { width: 4.2em; height: 3px; border-radius: 2px; background: var(--ink); }
/* Put in order. */
.nd-order { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.nd-order-pool, .nd-order-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nd-order-tile, .nd-slot { min-width: 4.6em; min-height: 2.5em; padding: 6px 8px; border-radius: 12px; font-weight: 800; font-size: 1rem; cursor: pointer; touch-action: manipulation; }
.nd-order-tile { border: 2px solid #e1dbfb; background: #fff; box-shadow: 0 3px 0 #e1dbfb; }
.nd-order-tile.used { visibility: hidden; }
.nd-slot { border: 2px dashed #b9b0ef; background: #f7f5ff; color: var(--ink); }
.nd-slot:empty::before { content: attr(data-i); color: #b9b0ef; }
.nd-order-arrow { font: 900 1.2rem/1 var(--round); color: var(--blue-dark); }
.nd-order-ends { display: flex; justify-content: space-between; max-width: 26em; font-size: 0.78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* The place value chart in the ordering question's ? card. */
.nd-pv-chart { border-collapse: collapse; margin-top: 8px; font-size: 1.05rem; }
.nd-pv-chart th, .nd-pv-chart td { border: 1px solid #d9d2fa; padding: 4px 6px; text-align: center; min-width: 1.6em; }
.nd-pv-chart th button { border: none; background: #f1eeff; border-radius: 6px; padding: 3px 5px; font: 800 0.62rem/1.1 var(--round); color: var(--blue-dark); cursor: pointer; max-width: 5.5em; }
.nd-pv-chart .nd-pv-dot { border-left: none; border-right: none; min-width: 0.6em; padding: 4px 1px; font-weight: 900; }
.nd-pv-chart .lit { background: #fff1a8; }
.nd-pv-chart th.lit button { background: #ffd23f; }
/* The divisibility check boxes. */
.nd-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-checkbox { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid #e1dbfb; border-radius: 12px; background: #fff; cursor: pointer; font-weight: 800; font-size: 1.1rem; }
.nd-checkbox input { width: 1.2em; height: 1.2em; accent-color: var(--blue); }
.nd-checkbox.bonus { border-color: #ffd23f; background: #fffbe8; }
.nd-bonus-cap, .nd-bonus-note { margin-top: 6px; font-size: 0.85rem; font-weight: 700; color: #a8790a; }
/* Tracing. */
.nd-trace { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.nd-trace-pad { position: relative; width: 100%; border: 2px solid #e1dbfb; border-radius: 14px; background: #fff; overflow: hidden; }
.nd-trace-pad canvas { display: block; }
.nd-trace-pad .nd-trace-ink { position: absolute; top: 0; left: 0; touch-action: none; cursor: crosshair; }
.nd-trace-pad .nd-tf-again { position: absolute; right: 6px; bottom: 6px; }
/* K's scattered dots, lit as they are counted. */
.nd-scatter { width: 100%; max-width: 360px; touch-action: manipulation; }
.nd-scatter-dot { fill: #d7d2f7; stroke: #8b7fe0; stroke-width: 2; cursor: pointer; transition: fill 0.12s; }
.nd-scatter-dot.marked { fill: var(--blue); stroke: var(--blue-dark); }
/* 5th grade's corner square, cut into ten. */
.nd-piece.split { display: flex; gap: 1px; padding: 1px; background: #fff; border: 2px solid #ff8a3d; cursor: default; }
.nd-piece.split span { flex: 1; background: #fff; border-right: 1px solid #ffc49a; }
.nd-piece.split span:last-child { border-right: none; }
.nd-piece.split span.on { background: #ff8a3d; }
/* The bonus question arrives once the rest is right. */
.nd-card.nd-bonus.hidden { display: none; }
.nd-card.bonus-in { animation: ndBonusIn 0.9s 2.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; box-shadow: 0 0 0 3px #ffd23f, var(--shadow); }
@keyframes ndBonusIn { from { opacity: 0; transform: scale(0.8) translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nd-card.bonus-in { animation: none; } }
/* Printed. */
.pr-options { white-space: pre-line; }
.pr-trace { font: 700 2.4rem/1.3 "Andika", sans-serif; color: transparent; -webkit-text-stroke: 1.5px #555; letter-spacing: 0.1em; }

/* The box after the equation (Bob, 2026-09-26): "8 + 7 = [  ]". Pairs side by side where two fit,
   one under the other where they do not (a 3rd grade "7,209 + 1,000 =" is long). */
.nd-fields.after { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), max-content)); gap: 8px 12px; }
.nd-fields.after .nd-field { flex-direction: row; align-items: center; gap: 5px; font-size: 0.92rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.nd-fields.after .nd-field .nd-input { width: 3.4em; }
.nd-fields.cols.after { grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), max-content)); }
.nd-tens-units .nd-block.unit.struck { opacity: 0.45; background-image: linear-gradient(135deg, transparent 0 42%, var(--red) 42% 58%, transparent 58%); }
.nd-tens-units .nd-block.unit.nd-tens-extra.lit { background-color: #ff8a3d; border-style: solid; box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); }

/* --- Bob's notes, 2026-09-26, late ------------------------------------------ */
.nd-bob.hidden { display: none; }
/* A box answered wrong, light red, until it is changed. */
.nd-input.bad { background: #ffe3e6; border-color: #ef5b6b; }
/* The ? that waits for a try: red and shut, then green and open. */
.nd-help-btn.locked { background: #ef5b6b !important; opacity: 0.85; }
.nd-help-btn.unlocked { background: #1fb57a !important; box-shadow: 0 0 0 3px rgba(31, 181, 122, 0.3); }
.nd-try-first { margin-left: 6px; font-size: 0.72rem; font-weight: 800; color: #c0392b; transition: opacity 0.3s; }
.nd-try-first.gone { opacity: 0; }
/* The divisibility rules shown in the card. */
.nd-rules { margin: 0 0 10px; padding-left: 1.1em; font: 700 0.95rem/1.45 "Andika", var(--round); color: var(--ink); }
/* The order chart: a zero put in an empty place, and a number struck out. */
.nd-pv-chart td.nd-pv-empty { cursor: pointer; background: #fbfaff; }
.nd-pv-chart td.zero { color: #ff6a1a; font-weight: 900; }
.nd-pv-chart .nd-pv-strike { border: none; padding: 2px; min-width: 0; }
.nd-pv-chart .nd-pv-strike button { border: none; border-radius: 6px; background: #f1eeff; color: #8a7fd6; font-weight: 900; cursor: pointer; padding: 3px 6px; }
.nd-pv-chart tr.struck td:not(.nd-pv-strike) { color: #b9b3d6; text-decoration: line-through; text-decoration-thickness: 2px; background: #f4f2fa; }
.nd-pv-chart tr.struck .nd-pv-strike button { background: #8a7fd6; color: #fff; }
/* "Are there 12?" */
.nd-arethere-fix { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-weight: 800; }
.nd-arethere-fix.hidden { display: none; }
.nd-arethere-fix .nd-input { width: 4em; text-align: center; }
/* Two ways to make the number. */
.nd-way { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e1dbfb; }
.nd-way-eq .nd-input { width: 3.2em; text-align: center; font-size: 1.2rem; }
.nd-way-n { font: 900 1.3rem/1 var(--round); color: var(--ink); }
.nd-tf-grid .nd-cell.struck { background: radial-gradient(circle, var(--blue) 0 55%, #fff 58%); position: relative; }
.nd-tf-grid .nd-cell.struck::after { content: ''; position: absolute; inset: 20% 0; background: linear-gradient(135deg, transparent 44%, var(--red) 44% 56%, transparent 56%); }
/* K's compare: 20 units under each number. */
.nd-units-pair { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.nd-units-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nd-units-grid { display: grid; grid-template-columns: repeat(10, 13px); gap: 2px; }
.nd-units-grid .nd-block.unit { width: 13px; height: 13px; padding: 0; border-width: 1.5px; }
/* The place value chart fits the card on a phone (it was 449px in a 347px card with 5th grade's
   seven places): tighter cells, place names that wrap, and a sideways scroll as the last resort. */
.nd-pv-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nd-pv-chart { font-size: 0.98rem; }
.nd-pv-chart th, .nd-pv-chart td { padding: 3px 2px; min-width: 1.35em; }
.nd-pv-chart th button { font-size: 0.5rem; padding: 3px 2px; max-width: 4.6em; white-space: normal; word-break: break-word; line-height: 1.05; }

/* --- David's flare, 2026-09-26 ----------------------------------------------- */
/* A hot streak's banner and stars. */
.nd-streak { position: fixed; left: 50%; top: 18%; z-index: 60; transform: translateX(-50%); padding: 12px 22px; border-radius: 999px;
    font: 900 1.3rem/1 var(--round); color: #fff; background: linear-gradient(90deg, #ff7a3d, #ff3f7f); box-shadow: 0 10px 26px rgba(255, 90, 90, 0.45);
    white-space: nowrap; pointer-events: none; animation: ndStreak 2.2s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.nd-streak.big { background: linear-gradient(90deg, #5b4ee6, #ff3f9f); font-size: 1.45rem; }
@keyframes ndStreak { 0% { opacity: 0; transform: translateX(-50%) scale(0.5); } 15% { opacity: 1; transform: translateX(-50%) scale(1.08); } 25% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
.nd-star { position: absolute; left: 50%; top: 50%; font-size: 1.4rem; animation: ndStar 1.2s ease-out forwards; }
@keyframes ndStar { from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(180deg); opacity: 0; } }
/* The sticker won, in the done card, and the sticker book. */
.nd-won { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 16px; background: #fff7d6; box-shadow: inset 0 0 0 2px #ffd23f; }
.nd-won.pop { animation: ndWon 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes ndWon { from { opacity: 0; transform: scale(0.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
.nd-won-icon { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2)); }
.nd-won-text { font: 800 1rem/1.3 var(--round); color: #6a4a00; }
.nd-book { position: fixed; inset: 0; z-index: 70; background: rgba(20, 12, 50, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nd-book-card { background: #fff; border-radius: 22px; padding: 18px; width: min(520px, 100%); max-height: 86vh; overflow: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); text-align: center; }
.nd-book-title { font: 900 1.4rem/1.2 var(--round); color: var(--blue-dark); }
.nd-book-sub { margin: 4px 0 12px; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.nd-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-bottom: 14px; }
.nd-book-sticker { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: #f7f4ff; box-shadow: inset 0 0 0 2px #e6e0ff; }
.nd-book-icon { font-size: 2.2rem; line-height: 1.1; }
.nd-book-num { font: 900 0.95rem/1.1 "Andika", var(--round); color: var(--ink); }
.nd-book-when { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
/* Moving up a grade. */
.nd-welcome-grade { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 0.5s; }
.nd-welcome-grade.gone { opacity: 0; }
.nd-wg-card { padding: 22px 30px; border-radius: 26px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); animation: ndWg 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.nd-wg-up { font: 900 1rem/1 var(--round); letter-spacing: 0.08em; opacity: 0.9; }
.nd-wg-name { margin-top: 8px; font: 900 clamp(1.6rem, 7vw, 2.6rem)/1.1 var(--round); }
@keyframes ndWg { from { opacity: 0; transform: scale(0.5) translateY(30px); } to { opacity: 1; transform: none; } }
/* Display mode's countdown. */
.nd-countdown { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(20, 12, 60, 0.85); }
.nd-cd-num { font: 900 clamp(8rem, 40vw, 22rem)/1 var(--round); color: #ffd23f; text-shadow: 0 10px 0 rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 210, 63, 0.6); animation: ndCd 0.9s ease-out both; }
@keyframes ndCd { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(0.7); opacity: 0; } }
#numberBoard.waiting { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .nd-streak, .nd-won.pop, .nd-wg-card, .nd-cd-num { animation: none; } }

/* Bob's tenth round (2026-09-26). */
/* The double ten frame: a real gap column between the two frames. The 10px left margin on each
   6th square squeezed that square inside its track (Bob circled it: "Can you fix this in
   kindergarten"), so it is an empty 12px column now and each square is placed in its column. */
.nd-frame.cells-20 { grid-template-columns: repeat(5, minmax(0, 30px)) 12px repeat(5, minmax(0, 30px)); }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 6) { margin-left: 0; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 1) { grid-column: 1; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 2) { grid-column: 2; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 3) { grid-column: 3; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 4) { grid-column: 4; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 5) { grid-column: 5; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 6) { grid-column: 7; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 7) { grid-column: 8; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 8) { grid-column: 9; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 9) { grid-column: 10; }
.nd-frame.cells-20 .nd-cell:nth-child(10n + 10) { grid-column: 11; }
/* The equation-then-box rows ("7,209 + 1,000 = [ ]"): they overlapped on a wide screen, the pairs
   wider than the 150px grid columns they sat in (Bob: "Can you fix this spacing on 3rd grade").
   A wrapping row now, two to a line where two fit, one where they do not, never overlapping. */
.nd-fields.after, .nd-fields.cols.after { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nd-fields.after .nd-field { flex: 1 0 calc(50% - 11px); min-width: max-content; }
/* The divisibility rules card: each number beside its rule, the rules lined up on the left. */
.nd-help-row.rule { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; gap: 8px; margin-top: 7px; text-align: left; }
.nd-help-row.rule .nd-help-label { min-width: 0; font-size: 1rem; font-weight: 900; text-align: right; }
.nd-help-row.rule .nd-help-std { font-size: 0.92rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; color: var(--ink); }
/* The pencil-and-paper icon in the card's head, and what it says. */
.nd-paper-btn {
    flex: none; width: 32px; height: 32px; padding: 2px; margin-left: 6px; border-radius: 9px; cursor: pointer;
    border: 2px solid #e1dbfb; background: #fff; color: var(--blue-dark); touch-action: manipulation;
}
.nd-paper-btn svg { width: 100%; height: 100%; display: block; }
.nd-paper-btn:hover, .nd-paper-btn.speaking { border-color: var(--blue); background: #f4f1ff; }
.nd-paper-note {
    margin: 2px 0 10px; padding: 8px 12px; border-radius: 12px; background: #fff7d6;
    border: 2px solid #ffd23f; font-weight: 800; color: #6a4a00;
}
.nd-paper-note.hidden { display: none; }
.nd-paper-note.pop { animation: ndWon 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.nd-work { display: none; }
@media print { .nd-paper-btn, .nd-paper-note { display: none !important; } }

/* The grade row centred (David, 2026-09-26: "please center this"): it was a grid of nine
   columns, and with 6th-8th hidden the six buttons sat to the left. A centred flex row now,
   each button the same width it had (a ninth of the row), the label over it centred too. */
.nd-grades .nd-label { text-align: center; }
.nd-grade-row { display: flex; justify-content: center; flex-wrap: wrap; }
.nd-grade-row .nd-grade { flex: 0 0 calc((100% - 40px) / 9); min-width: 44px; }
/* "None of these" beside the divisibility numbers (2026-09-26), a little wider for its words. */
.nd-checkbox.none span { white-space: nowrap; }
/* The millions on 4th and 5th's whole-number days (2026-09-26): nine characters, so the place
   names go a little smaller and may break onto two lines rather than be clipped ("THOUSANDS"). */
.nd-board.longest .nd-tile { padding-left: 1px; padding-right: 1px; }
.nd-board.longest .nd-tile-place { font-size: clamp(0.3rem, 1.25vw, 0.46rem); letter-spacing: -0.02em; line-height: 1.05; white-space: normal; overflow-wrap: normal; word-break: keep-all; }
/* The 1 more / 1 less pair (2026-09-27): each question a prompt line with the same room above and below. */
.nd-ones .nd-prompt.nd-ones-q { margin: 6px 0 4px; }
.nd-ones-part + .nd-ones-part { margin-top: 6px; }
/* "You did it!" when a grade's sheet is all right (Bob, 2026-09-27) */
.nd-complete { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(20, 12, 50, 0.55); transition: opacity 0.3s; }
.nd-complete.gone { opacity: 0; }
.nd-complete-card { width: min(420px, 100%); max-height: 90vh; overflow: auto; padding: 22px 20px 18px; border-radius: 26px; text-align: center;
    background: #fff; box-shadow: 0 0 0 6px var(--blue), 0 24px 60px rgba(0, 0, 0, 0.4); animation: ndCompleteIn 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes ndCompleteIn { from { transform: scale(0.4) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.nd-complete-burst { font-size: 3.4rem; line-height: 1; }
.nd-complete-title { margin-top: 6px; font: 900 clamp(2rem, 9vw, 2.8rem)/1.05 var(--round); color: var(--blue-dark); }
.nd-complete-line { margin-top: 8px; font: 800 1.08rem/1.3 var(--round); color: #2b2750; }
.nd-complete-num { display: inline-block; margin-top: 12px; padding: 6px 18px; border-radius: 16px; color: #fff; font: 900 clamp(1.6rem, 8vw, 2.3rem)/1.1 var(--round);
    background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.nd-complete-day { margin-top: 6px; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.nd-complete-sticker { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 14px; border-radius: 14px; background: #fff7d6; box-shadow: inset 0 0 0 2px #ffd23f; }
.nd-complete-icon { font-size: 2rem; line-height: 1; }
.nd-complete-name { font: 800 0.95rem/1.2 var(--round); color: #6a4a00; }
.nd-complete-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .nd-complete-card { animation: none; } }

/* Corn's notes via Bob (2026-09-27). */
/* 3: "the blue boxes are not all the same size in the 5th grade number of the day": each tile was as
   wide as its place name ("HUNDRED THOUSANDS" against "ONES"). Every digit's tile now takes the same
   share of the row, the place name wrapping inside it. */
.nd-tile:not(.sep) { flex: 1 1 0; min-width: 0; max-width: clamp(40px, 14vw, 64px); align-self: stretch; }
.nd-board.long .nd-tile:not(.sep) { flex: 1 1 0; min-width: 0; max-width: 48px; }
body.display .nd-tile:not(.sep) { max-width: 150px; min-width: 0; }
.nd-tile-place { white-space: normal; word-break: keep-all; text-align: center; line-height: 1.05; }
/* 1: each 1 more / 1 less answer box right under its own row of cubes */
.nd-ones-answer { margin-top: 6px; }
/* 2: skip counting starts from the number already in a box, +10 between each */
.nd-field-given .nd-input { background: #eef0ff; color: var(--ink); font-weight: 900; border-style: solid; }
.nd-plus.nd-step { font-size: 0.95rem; color: var(--blue); }
.nd-fields.plus:has(.nd-step) { flex-wrap: nowrap; gap: 4px; }
.nd-fields.plus:has(.nd-step) .nd-field { flex: 1 1 0; min-width: 0; }
.nd-fields.plus:has(.nd-step) .nd-field .nd-input { width: 100%; box-sizing: border-box; min-width: 0; }
.nd-fields.plus:has(.nd-step) .nd-plus.nd-step { flex: none; }