/* ============================================================================
   screen-cell.css — the on-screen question cell (P7.4, screen parity).

   WORKSHEET_DESIGN_STANDARD.md section 15, owner ruling 2026-09-24: the question
   region of every on-screen host — the practice card (#gameView #questionCard),
   the online worksheet (#worksheetView) and the quiz (#quizTakeView) — is the
   black-and-white Andika paper cell of the printed sheet. Game chrome (XP,
   streak, Skip / Hint / Read / Check, correct and wrong feedback) keeps its
   colour and sits OUTSIDE the cell (SC-2, SP-2, SP-30). Dark theme: the cell
   stays paper-white with black ink; the chrome follows the theme.

   Values are the approved screen mock-up's (design/mockups/pages/
   12-screen-and-dialog.mjs): the kit's tokens re-declared in px, the SP 15.2
   stroke map (0.5 / 0.75 pt -> 1 px, 1 pt -> 1.5 px, 1.5 pt -> 2 px, 2.25 pt
   -> 3 px), 12 px cell padding, digit tracks max(0.95 em, 44 px), digit inputs
   at least 48 px tall, a 3 px focus ring at 2 px offset (AX-6).

   ADDITIVE ONLY. Saved quizzes keep old question HTML in IndexedDB, so no
   existing selector is changed or removed: every rule here is scoped to a
   class or id the new hosts add (.mq-scell, .mq-kit, .mq-wscard, .mq-qpaper,
   .mq-qtpaper), and legacy classes are overridden, never deleted.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
.mq-scell {
    /* INK-1: the three paint values */
    --ws-ink: #000; --ws-paper: #fff; --ws-grey: #949494;
    /* SP 15.2 stroke map */
    --ws-hair: 1px; --ws-fine: 1px; --ws-heavy: 2px; --ws-rule: 3px; --ws-cell: 1px; --ws-rowgap: 0px;
    /* single-question card digits: 40 / 48 / 56 px at 375 / 768 / 1440 (SP 15.2) */
    --mq-digit: 40px;
    --mq-text: 20px;
    --ws-digit: var(--mq-digit);
    --ws-text: var(--mq-text);
    --ws-zone: 16px;
    --ws-letter: 14px;
    --ws-heads: 26px;
    --ws-hw: max(48px, calc(var(--mq-digit) * 1.2));   /* SP-10: digit inputs >= 48 px tall */
    --ws-answer: calc(var(--ws-hw) + 14px);
    --ws-regroup: 48px;
    --ws-carry: 40px;
    --ws-tab: 12px;

    /* The app's colour tokens, re-pointed to ink and paper INSIDE the cell only, so a
       legacy visual that paints with var(--accent-*) / var(--bg-card) / var(--text-*)
       draws black on white in light and dark theme alike (SP-2). Same mechanism as the
       .dark remap in variables.css and the --mq-* remap of .mq-mono. */
    --bg-world: #fff; --bg-card: #fff; --bg-card-light: #fff;
    --text-bright: #000; --text-primary: #000; --text-secondary: #000; --text-dim: #000;
    --accent-gold: #000; --accent-orange: #000; --accent-pink: #000; --accent-cyan: #000;
    --accent-green: #000; --accent-purple: #000;
    --text-on-accent: #fff;
    --border-light: #000;
    --shadow-glow: transparent;
    --card-shadow: none;

    background: #fff;
    color: #000;
    font-family: "Andika", sans-serif;
    font-weight: 400;
    font-synthesis: none;                        /* TY-2 */
    font-feature-settings: "cv04" 1;             /* TY-4: the open 4, no other variant */
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media (min-width: 600px) { .mq-scell { --mq-digit: 48px; --mq-text: 22px; --ws-zone: 18px; --ws-heads: 28px; } }
@media (min-width: 1200px) { .mq-scell { --mq-digit: 56px; --mq-text: 24px; --ws-zone: 18px; --ws-heads: 30px; } }
/* Online worksheet grid: 29 px digits at every width (SP 15.2). */
.mq-scell.mq-grid-cell { --mq-digit: 29px; --mq-text: 18px; --ws-zone: 14px; --ws-heads: 22px; --ws-regroup: 44px; --ws-carry: 36px; --ws-hw: 48px; --ws-answer: 58px; }

/* TY-1: every character inside the cell is Andika (SVG text too). The emoji span keeps a
   colour font only so a stray pictograph stays visible; the mono scope greys it (INK-7). */
.mq-scell,
.mq-scell *:not(.mq-emoji):not([data-mq-emoji]):not(.zoom-icon-btn) {
    font-family: "Andika", sans-serif !important;
    font-style: normal !important;
    font-synthesis: none;
}
.mq-scell svg text, .mq-scell svg tspan { font-family: "Andika", sans-serif !important; }
/* AX-3 / TY-5: no all-caps words; TY-4: numerals are never letter-spaced. */
.mq-scell * { text-transform: none !important; letter-spacing: normal !important; }
.mq-scell b, .mq-scell strong, .mq-scell th { font-weight: 700; }

/* INK-2 / AX-9: cells never animate; colour transitions would be read mid-flight by the
   mono pass. Transforms a drag widget sets inline still apply — only the easing goes. */
.mq-scell, .mq-scell * { transition: none !important; animation: none !important; }

/* The emoji of a legacy visual: no hue inside the cell (INK-7 is a content defect; this is
   only the colour net). */
.mq-scell .mq-emoji { filter: grayscale(1) contrast(1.4) !important; }

/* Screen-only captions of a legacy visual ("Column Addition", "Type in boxes ..."). */
.mq-scell [data-mq-screen-only] { display: none !important; }

/* Vocabulary links stay tappable but read as plain words: a dotted rule inside a cell means
   "trace" (LS-1), so it cannot also mean "tap for a definition". */
.mq-scell .mq-vocab, .mq-scell [data-vdef],
.mq-scell .vocab-link, .mq-scell [data-vocab], .mq-scell .vocab-term {
    border-bottom: 0 !important; text-decoration: none !important; color: inherit !important; background: none !important;
}

/* Inline blanks (___ in the text) are line slots: black, not blue (INK-1). */
.mq-scell .answer-blank-inline { border-bottom-color: #000 !important; border-bottom-width: 1px !important; }

/* ---------------------------------------------------------------- the kit drawings
   `.mq-kit` carries `.ws-sheet` so the kit's own rules (css/sheet-kit.css, scoped to
   :is(.ws-page, .ws-sheet)) draw the stack, the fact and the equation exactly as on
   paper; these rules only switch the page box off and set the screen tokens. */
.mq-scell .mq-kit {
    display: block; width: auto; max-width: none; overflow: visible; background: transparent;
    font-size: var(--ws-text); margin: 0 auto;
}
.mq-scell .mq-kit .ws-stack,
.mq-scell .mq-kit .ws-stack.wide {
    --ws-track: max(0.95em, 44px);                  /* SP 15.2: tracks in both looks */
    margin-top: 4px;
    justify-content: center;
}
.mq-scell .mq-kit .ws-stack .rule { height: 10px; margin-top: 4px; }
.mq-scell .mq-kit .ws-stack .headcap { height: 6px; }
.mq-scell .mq-kit .ws-stack .ab { position: relative; }
.mq-scell .mq-kit .ws-fact { --fd: var(--mq-digit); margin: 0 auto; }
.mq-scell .mq-kit .ws-fact .rule { margin-top: 4px; height: 8px; }
.mq-scell .mq-kit .mq-factans { grid-column: 1 / -1; height: auto; display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 2px; }
.mq-scell .mq-kit .ws-eq { flex-wrap: nowrap; align-items: center; justify-content: center; line-height: 1.15; }
.mq-scell .mq-kit .ws-eq .o { font-weight: 700; }
.mq-scell .mq-kit .mq-eqslot { display: inline-flex; align-items: center; }
/* a long equation in a narrow worksheet cell drops its slot to the next line, never clips it */
.mq-scell.mq-grid-cell .mq-kit .ws-eq { flex-wrap: wrap; gap: 0.2em; row-gap: 6px; }

/* US bracket division (VA-60, VA-61): divisor | arc | dividend under a 2 px vinculum;
   the quotient slot sits in the row above, right-aligned over the dividend. */
.mq-scell .mq-ldiv {
    display: inline-grid; grid-template-columns: auto 0.42em auto; grid-template-rows: auto auto;
    font-size: var(--mq-digit); line-height: 1.15; align-items: end;
}
.mq-scell .mq-ldiv-q { grid-column: 3; grid-row: 1; justify-self: stretch; display: flex; justify-content: flex-end; margin-bottom: 6px; min-width: 0; }
.mq-scell .mq-ldiv-dsr { grid-column: 1; grid-row: 2; padding-right: 0.08em; }
.mq-scell .mq-ldiv-brk { grid-column: 2; grid-row: 2; position: relative; align-self: stretch; border-top: 2px solid #000; }
.mq-scell .mq-ldiv-arc { position: absolute; left: 0; top: -2px; width: 100%; height: calc(100% + 2px); overflow: visible; }
.mq-scell .mq-ldiv-dvd { grid-column: 3; grid-row: 2; border-top: 2px solid #000; padding: 0.04em 0.12em 0 0.12em; }

/* ---------------------------------------------------------------- slots (section 6, SP 15.2)
   Blanks are inputs: a line slot has a bottom border, a box slot a full border. Font
   inherited (Andika), square corners, black on white, tabular digits, >= 44 px targets. */
.mq-scell input[type="text"], .mq-scell input[type="number"], .mq-scell input:not([type]),
.mq-scell textarea {
    font-family: "Andika", sans-serif !important;
    color: #000 !important;
    background-color: #fff !important;
    background-image: none !important;
    border-radius: 0 !important;
    border-color: #000 !important;
    box-shadow: none;
    caret-color: #000;
    font-weight: 400;
}
.mq-scell input::placeholder { color: transparent !important; }   /* a slot is empty until the pupil writes */

/* The generic answer slot (practice #answerInput, worksheet ws_input_N, quiz #qtAnswerInput). */
.mq-scell .mq-slot {
    display: inline-block; box-sizing: border-box;
    height: var(--ws-hw); min-height: 48px;
    width: calc(var(--mq-n, 3) * 0.62em + 0.9em); min-width: max(64px, 2.4em); max-width: 100%;
    margin: 0; padding: 0 0.15em;
    font-size: var(--mq-digit) !important; line-height: 1;
    text-align: center;
    border-style: solid !important; border-width: 0 0 1px 0 !important;   /* line: a number (SL-3) */
    outline: none;
}
.mq-scell .mq-slot.mq-slot--box { border-width: 1px !important; }        /* box: open zone / quotient */
.mq-scell .mq-slot.mq-slot--text { font-size: calc(var(--mq-digit) * 0.7) !important; width: min(100%, calc(var(--mq-n, 6) * 0.55em + 1em)); }
.mq-scell .mq-factans .mq-slot { width: 2.16em !important; min-width: 2.16em; font-size: 1em !important; }
/* The quotient box spans the dividend's tracks (VA-61), whatever the quotient's length, so it
   never hints at the answer (SL-2); `width: 0` keeps it out of the grid's sizing. */
.mq-scell .mq-ldiv-q .mq-slot { width: 0 !important; min-width: max(100%, 64px) !important; font-size: 1em !important; flex: none; }
.mq-scell .mq-eqslot .mq-slot { width: calc(var(--mq-n, 3) * 0.62em + 0.9em) !important; font-size: 1em !important; }

/* Stack digit boxes: the whole track (>= 44 px) is the input and the target (SP-10); the box
   that is DRAWN is track - 10 px (a 5 px clear border each side, the 1 px line inset), so a
   focus ring and a feedback outline fit between neighbours (mock-up kit proposal 3 / 9). */
html .mq-scell .mq-kit input.mq-digit {
    display: block; box-sizing: border-box; margin: 0; padding: 0;
    /* !important: the legacy .column-answer-input phone rules shrink boxes to 32 px (!important) */
    width: var(--ws-track) !important; min-width: 44px !important; height: var(--ws-hw) !important;
    transform: none !important;
    border-style: solid !important; border-width: 0 5px !important; border-color: transparent !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 0 0 1px #000 !important;
    font-size: 1em !important; line-height: 1; text-align: center;
    outline: none;
}
html .mq-scell .mq-kit input.mq-carry {
    display: block; box-sizing: border-box; margin: 0 auto; padding: 0;
    width: var(--ws-track) !important; min-width: 44px !important; height: 44px !important;
    transform: none !important;
    border-style: solid !important; border-width: max(0px, calc((44px - var(--ws-carry)) / 2)) 5px !important; border-color: transparent !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 0 0 1px #000 !important;
    font-size: 0.5em !important; line-height: 1; text-align: center;
    outline: none;
}
html .mq-scell .mq-kit input.mq-digit:focus, html .mq-scell .mq-kit input.mq-carry:focus { outline-offset: -3px !important; transform: none !important; }
html .mq-scell .mq-kit input.mq-digit { font-size: 1em !important; }
/* marked digit boxes (SP-30): the drawn line stays, a coloured band sits just inside it */
html .mq-scell.mq-mono .mq-kit input.mq-digit.box-correct,
html .mq-scell.mq-mono .mq-kit input.mq-digit[style*="var(--correct)"] { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #2E7D5B !important; }
html .mq-scell.mq-mono .mq-kit input.mq-digit.box-wrong,
html .mq-scell.mq-mono .mq-kit input.mq-digit[style*="var(--incorrect)"] { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #B73838 !important; }
/* the carry row's cells are 44 px targets even though the drawn box is shorter */
.mq-scell .mq-kit .ws-stack .rg { height: var(--ws-regroup); align-items: center; }

/* AX-6: 3 px focus ring at 2 px offset, drawn outside the ink in a chrome colour. */
.mq-scell input:focus-visible, .mq-scell input:focus,
.mq-scell button:focus-visible, .mq-scell [tabindex]:focus-visible {
    outline: 3px solid #5E3FCC !important; outline-offset: 2px !important;
}

/* SP-30 / P-ON-13: feedback is chrome and keeps its colour — a 2 px coloured outline on the
   slot (never a tint of the paper, SP-33) plus the card badge. The checkers of the three
   hosts paint by inline style or class; both are read here. */
html .mq-scell.mq-mono input.box-correct,
html .mq-scell.mq-mono input[style*="var(--accent-green)"],
html .mq-scell.mq-mono input[style*="var(--correct)"] { box-shadow: 0 0 0 2px #2E7D5B !important; }
html .mq-scell.mq-mono input.box-wrong,
html .mq-scell.mq-mono input[style*="var(--incorrect)"],
html .mq-scell.mq-mono input[style*="var(--accent-red)"],
html .mq-scell.mq-mono input.flash-wrong { box-shadow: 0 0 0 2px #B73838 !important; }
html .mq-scell.mq-mono input.flash-correct { box-shadow: 0 0 0 2px #2E7D5B !important; }
/* the shape carries the meaning, colour only reinforces it (AX-2): a 16 px badge hangs off the
   outside bottom-right corner of a marked digit box */
.mq-scell .mq-kit .ab:has(> input.box-correct)::after,
.mq-scell .mq-kit .ab:has(> input.box-wrong)::after {
    position: absolute; right: 1px; top: calc(var(--ws-hw) - 8px); width: 16px; height: 16px; line-height: 16px;
    border-radius: 50%; color: #fff; font: 700 11px/16px "Nunito", sans-serif !important; text-align: center; z-index: 2;
}
.mq-scell .mq-kit .ab:has(> input.box-correct)::after { content: "\2713"; background: #2E7D5B; }
.mq-scell .mq-kit .ab:has(> input.box-wrong)::after { content: "\2715"; background: #B73838; border-radius: 3px; }

/* Choice options printed in the cell ("words to circle", section 6): tap targets in ink.
   Correct / incorrect states are feedback and keep their colour (the .mq-mono exemption). */
.mq-scell .answer-btn, .mq-scell .ws-mc-option, .mq-scell .qt-mc-option {
    font-family: "Andika", sans-serif !important; font-weight: 400 !important;
    color: #000; background: #fff; border: 1px solid #000 !important; border-radius: 0 !important;
    box-shadow: none !important; transform: none !important; min-height: 48px; min-width: 48px;
}
.mq-scell .answer-btn:hover, .mq-scell .ws-mc-option:hover { outline: 2px solid #000; outline-offset: -3px; }
.mq-scell .answer-btn.correct, .mq-scell .ws-mc-option.correct, .mq-scell .ws-mc-option.correct-answer {
    box-shadow: 0 0 0 3px #2E7D5B !important; border-color: #2E7D5B !important;
}
.mq-scell .answer-btn.incorrect, .mq-scell .answer-btn.wrong-choice, .mq-scell .ws-mc-option.incorrect {
    box-shadow: 0 0 0 3px #B73838 !important; border-color: #B73838 !important;
}

/* Widget controls that live inside a cell (Clear / Submit of a build widget, option tiles):
   ink on paper, square, >= 44 px (SP-10). They are part of the cell, so they carry no hue. */
.mq-scell button:not(.zoom-icon-btn):not(.answer-btn):not(.ws-mc-option):not([data-ws-feedback]) {
    min-height: 44px; min-width: 44px;
    font-family: "Andika", sans-serif !important;
    box-shadow: none !important;     /* corner shape is left alone: a counter stays round (LS-5) */
}
.mq-scell button:disabled { opacity: 1 !important; color: #949494 !important; border-color: #949494 !important; cursor: not-allowed; }
.mq-scell select { min-height: 44px; font-family: "Andika", sans-serif !important; color: #000; background: #fff; border: 1px solid #000; border-radius: 0; }

/* A printed "Check one box." list, tapped on screen: each row is a >= 44 px target; the box is
   the slot (section 6 "check"), the check mark is drawn in it. The typed slot is not shown. */
.mq-scell .mq-tickrow { min-height: 44px; cursor: pointer; padding: 0 6px; margin: 2px 0 !important; }
.mq-scell .mq-tickrow:hover .mq-tickbox { outline: 2px solid #000; outline-offset: 1px; }
.mq-scell .mq-tickrow:focus-visible { outline: 3px solid #5E3FCC !important; outline-offset: 2px !important; }
.mq-scell .mq-tickbox { position: relative; }
.mq-scell .mq-tickbox .mq-tickmark { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
.mq-scell.mq-tick-mode .mq-answerrow { display: none !important; }
#gameView #questionCard.mq-card #questionPaper.mq-tick-mode > #answerInputArea { display: none !important; }

/* The magnifier is chrome: it keeps its colour and becomes a real 44 px target. */
.mq-scell .zoom-icon-btn { width: 44px; height: 44px; font-family: "Nunito", sans-serif; }

/* Legacy visual containers inside a cell lose their card look (rounded, shadowed, tinted). */
.mq-scell .k2-cell, .mq-scell .ws-v2-cell { color: #000; }
/* A K-2 cell stacks its parts (the drawing, then the choices) as on paper, whatever width the
   host gives it; `table` keeps each part shrink-wrapped and centred. */
.mq-scell .k2-cell > div[style*="inline-block"] { display: table !important; margin-left: auto; margin-right: auto; }
.mq-scell .facts-column-visual { color: #000; }

/* ============================================================================
   HOST 1 — the practice card (#gameView #questionCard)
   The four question nodes the renderer writes to by id sit in #questionPaper, a grid
   whose areas put the instruction on top and the bordered cell below it. The cell border
   is the paper's ::before, spanning the rows under the instruction, so the instruction
   reads as the sheet's instruction line (outside the cell) as in the mock-up.
   MAP sessions move #questionCard out of #gameView: there the wrapper is `display:
   contents` and the MAP layout is untouched (MAP is its own host, SCC-S5).
   ========================================================================= */
#questionPaper { display: contents; }
#qcCheckBtn { display: none; }

#gameView #questionCard.mq-card { padding: 20px clamp(12px, 3vw, 28px) 20px; }
#gameView #questionCard.mq-card > .mq-qtop { margin-bottom: 8px; align-items: center !important; min-height: 32px; }
/* the Q number sits in the chrome row beside the skill pill instead of over it */
#gameView #questionCard.mq-card > .mq-qtop > .question-number { position: static; }
#gameView #questionCard.mq-card #questionPaper.mq-qpaper {
    display: grid;
    width: min(100%, 720px);                    /* SP-12: 327 / 640 / 720 px paper */
    margin: 4px auto 0;
    box-sizing: border-box;
    padding: 4px 0 0;
    grid-template-columns: 12px minmax(0, 1fr) 12px;
    grid-template-rows: auto 12px auto auto auto 12px;
    grid-template-areas:
        "instr  instr  instr"
        "ctop   ctop   ctop"
        ".      visual ."
        ".      opts   ."
        ".      answer ."
        "cbot   cbot   cbot";
    text-align: center;
}
/* A wide widget (build, drag, chart) may use more of the card than a single item. */
#gameView #questionCard.mq-card.mq-wide #questionPaper.mq-qpaper { width: min(100%, 980px); }

/* the cell border (CL-1): 1 px I Can border, square corners, paper white in both themes */
#gameView #questionCard.mq-card #questionPaper.mq-qpaper::before {
    content: "";
    grid-row: ctop-start / cbot-end;
    grid-column: 1 / -1;
    border: 1px solid #000;
    background: #fff;
}
#gameView #questionCard.mq-card #questionPaper > #questionText { grid-area: instr !important; }
#gameView #questionCard.mq-card #questionPaper > #visualAid { grid-area: visual !important; }
#gameView #questionCard.mq-card #questionPaper > #answerOptions { grid-area: opts !important; }
#gameView #questionCard.mq-card #questionPaper > #answerInputArea { grid-area: answer !important; }

/* The instruction line: Andika at cell-text size, left-aligned, black on paper (BD-10, AX-3). */
#gameView #questionCard.mq-card #questionPaper > #questionText {
    background: #fff;
    text-align: left !important;
    font-size: var(--mq-text) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    margin: 0 0 8px !important;
    padding: 0 2px;
    align-self: end;
    max-width: 60ch;                              /* AX-3: line length <= 60 characters */
}
#gameView #questionCard.mq-card #questionPaper > #questionText .mq-sr,
.mq-scell .mq-sr, .mq-sr {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* The duplicate of an instruction the visual already prints: kept for screen readers and the
   test signal, not drawn (the owner's "said twice" defect). */
#gameView #questionCard.mq-card #questionPaper > #questionText.mq-dup {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; margin: -1px !important; padding: 0 !important; white-space: nowrap !important;
}

#gameView #questionCard.mq-card #questionPaper > #visualAid {
    display: block;
    max-width: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important;
    background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: #000 !important; font-weight: 400 !important;
    text-align: center;
    min-width: 0;
    overflow-x: auto;                             /* a wide legacy drawing scrolls inside the cell, never the page */
}
#gameView #questionCard.mq-card #questionPaper > #visualAid[style*="display: none"],
#gameView #questionCard.mq-card #questionPaper > #visualAid[style*="display:none"] { display: none !important; }
#gameView #questionCard.mq-card #questionPaper > #visualAid + * { margin-top: 0; }

#gameView #questionCard.mq-card #questionPaper > #answerOptions {
    margin: 12px 0 0 !important;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
#gameView #questionCard.mq-card #questionPaper > #answerOptions .answer-btn {
    font-size: calc(var(--mq-text) * 1.1); padding: 10px 14px; line-height: 1.2;
}
#gameView #questionCard.mq-card #questionPaper > #answerInputArea {
    margin: 12px 0 0;
    gap: 0;
    align-items: center;
    justify-content: center;
}
/* the answer slot of an unrebuilt item: a line of width B(n) under the problem */
#gameView #questionCard.mq-card #questionPaper:not(.mq-slot-moved) #answerInput.mq-slot { width: calc(var(--mq-n, 3) * 0.62em + 0.9em) !important; }
#gameView #questionCard.mq-card #questionPaper:not(.mq-slot-moved) #answerInput.mq-slot.mq-slot--text { width: min(100%, calc(var(--mq-n, 6) * 0.55em + 1em)) !important; }
/* The inline Check of #answerInputArea moves to the chrome bar in this host (SP 15.2:
   "Hint (left) and Check (right) below the cell"). MAP keeps its own inline Check. */
#gameView #questionCard.mq-card #answerInputArea > .mq-inline-check { display: none !important; }
#gameView #questionCard.mq-card #questionPaper.mq-slot-moved > #answerInputArea { display: none !important; }

/* Variants of the cell body. */
/* - a stacked or vertical item is centred with the instruction above it */
#gameView #questionCard.mq-card #questionPaper.mq-kind-stack > #visualAid,
#gameView #questionCard.mq-card #questionPaper.mq-kind-fact > #visualAid,
#gameView #questionCard.mq-card #questionPaper.mq-kind-eq > #visualAid,
#gameView #questionCard.mq-card #questionPaper.mq-kind-division > #visualAid { padding: 6px 0 !important; overflow: visible; }

/* The chrome under the paper: Hint left, Check right, the rest between; >= 44 px targets. */
#gameView #questionCard.mq-card > .mq-qactions {
    display: flex !important; align-items: center; justify-content: flex-start; flex-wrap: wrap;
    gap: 10px; width: min(100%, 720px); margin: 14px auto 0 !important;
}
#gameView #questionCard.mq-card.mq-wide > .mq-qactions { width: min(100%, 980px); }
#gameView #questionCard.mq-card > .mq-qactions > .btn { min-height: 44px; min-width: 44px; font-size: 0.95rem; }
#gameView #questionCard.mq-card > .mq-qactions > #qcCheckBtn {
    margin-left: auto; min-height: 52px; min-width: 160px; font-size: 1.15rem; flex: 0 1 280px;
}
#gameView #questionCard.mq-card > .mq-qactions > #qcCheckBtn.mq-show { display: inline-flex; align-items: center; justify-content: center; }
#gameView #questionCard.mq-card > #feedbackArea { width: min(100%, 720px); margin: 12px auto 0; box-sizing: border-box; }
#gameView #questionCard.mq-card > .next-btn-container .btn { min-height: 48px; }

/* SP-33: the correct / incorrect tint goes on the chrome frame and the banner, never on the
   paper — the paper keeps its own white background, so only the card ring shows the tint. */
#gameView #questionCard.mq-card #questionPaper.mq-qpaper,
#gameView #questionCard.mq-card #questionPaper > #questionText { background: #fff; }

@media (max-width: 480px) {
    #gameView #questionCard.mq-card { padding: 14px 10px 16px; }
    #gameView #questionCard.mq-card > .mq-qactions { gap: 8px; }
    #gameView #questionCard.mq-card > .mq-qactions > #qcCheckBtn { flex: 1 1 100%; margin-left: 0; order: 10; }
}

/* ============================================================================
   HOST 2 — the online worksheet (#worksheetView)
   ========================================================================= */
/* The "Worksheet" heading and all worksheet chrome use the app's loaded UI font
   (Nunito). The edition's Source Serif / Inter / JetBrains fallbacks were never loaded,
   so the heading rendered in Georgia (the owner's circled defect). */
.online-edition {
    --on-font-display: "Nunito", system-ui, sans-serif;
    --on-font-body: "Nunito", system-ui, sans-serif;
    --on-font-num: "Nunito", system-ui, sans-serif;
    font-family: "Nunito", system-ui, sans-serif;
}
.online-edition .game-header > div > span,
.online-edition .game-header h2 { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; }
.online-edition .game-header .btn { min-height: 44px; }
.online-edition .game-header #worksheetSkillPill { font-size: 0.85rem; font-weight: 800; margin-left: 4px; }
.online-edition .game-header #worksheetSkillPill:empty { display: none; }
.online-edition .problems-grid.mq-wsgrid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    padding: 4px 12px 12px;
}

/* One card template for every item: a slim chrome bar, then the paper cell. */
.online-edition .problem-card.mq-wscard {
    display: flex; flex-direction: column; gap: 8px;
    padding: 6px 8px 10px;
    border: 2px solid var(--mq-rule-2, #DDD6EE);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: none;
    overflow: visible;
    min-height: 0;
    font-family: "Nunito", system-ui, sans-serif;
}
.online-edition .problem-card.mq-wscard > div { overflow: visible; }
.online-edition .problem-card.mq-wscard.card-column,
.online-edition .problem-card.mq-wscard.card-division { min-width: 0; padding: 6px 8px 10px; }

.mq-wsbar {
    display: flex; align-items: center; gap: 6px; min-height: 44px;
    font-family: "Nunito", system-ui, sans-serif;
}
.mq-wsbar .mq-wsnum {
    font-weight: 900; font-size: 1rem; color: var(--mq-ink-2, #4F4B6B);
    min-width: 28px; text-align: left; padding-left: 4px;
}
.mq-wsbar .mq-wsbadge { display: none; width: 22px; height: 22px; line-height: 22px; text-align: center; color: #fff; font-weight: 900; font-size: 13px; }
.mq-wsbar .mq-grow { flex: 1 1 auto; }
.mq-wsbar .ws-tts-btn,
.mq-wsbar .hint-btn,
.mq-wsbar .ws-skip-btn,
.mq-wsbar .ws-magnify-btn {
    position: static !important;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 10px;
    border-radius: 12px; box-shadow: none; transform: none;
    font-family: "Nunito", system-ui, sans-serif; font-size: 0.9rem; font-weight: 800; line-height: 1;
    opacity: 1; z-index: auto;
}
.mq-wsbar .ws-tts-btn { background: var(--bg-card-light); border: 2px solid var(--mq-rule-2, #DDD6EE); color: var(--mq-ink-2, #4F4B6B); font-size: 1.05rem; }
.mq-wsbar .hint-btn { background: var(--bg-card-light); border: 2px solid var(--mq-orange, #FF8A3D); color: var(--mq-orange-d, #E5722B); width: auto; font-size: 1rem; }
.mq-wsbar .ws-skip-btn { background: #1e88e5; color: #fff; border: 0; }
.mq-wsbar .ws-magnify-btn { width: 44px; background: var(--bg-card-light); border: 2px solid var(--mq-rule-2, #DDD6EE); color: var(--mq-ink-2, #4F4B6B); opacity: 0; pointer-events: none; }
.problem-card.mq-wscard:hover .mq-wsbar .ws-magnify-btn,
.mq-wsbar .ws-magnify-btn:focus-visible { opacity: 1; pointer-events: auto; }
.mq-wsbar button:focus-visible { outline: 3px solid #5E3FCC; outline-offset: 2px; }

/* The hint popup is chrome; it opens under the bar, over the cell. */
.problem-card.mq-wscard > .hint-popup { top: 54px; bottom: auto; }

/* The paper of a worksheet card: instruction line, then the cell (1 px I Can border). */
.mq-wspaper { background: #fff; color: #000; padding: 6px 8px 8px; }
.dark .mq-wspaper, .dark-theme .mq-wspaper { box-shadow: none; }
.online-edition .problem-card.mq-wscard .mq-wspaper > .question-line.mq-instr,
.qt-question-card .mq-qtpaper > .qt-question-text.mq-instr {
    font-weight: 400 !important; font-size: var(--mq-text) !important; color: #000 !important; margin: 0 !important;
}
.mq-wspaper .mq-instr {
    font-size: var(--mq-text, 18px); line-height: 1.3; text-align: left; padding: 0 2px 6px;
    color: #000; background: #fff;
}
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 10px;
    background: #fff; border: 1px solid #000; border-radius: 0;
    padding: 12px; min-height: 0; min-width: 0; max-width: 100%;
    overflow-x: auto; overflow-y: visible;
    text-align: center;
    cursor: default;
}
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell.zoom-trigger { cursor: zoom-in; }
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell .question-line {
    font-weight: 400 !important; font-size: var(--mq-text) !important; line-height: 1.3; text-align: left; align-self: stretch;
}
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell .mq-answerrow { display: flex; justify-content: center; align-items: flex-end; gap: 8px; width: 100%; }
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell svg { max-width: 100%; height: auto; }
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell input.worksheet-input {
    position: static; z-index: auto; transition: none;
}
/* worksheet slots: the edition's input rule (1.4 px, JetBrains Mono) never reaches the cell */
.online-edition .problem-card.mq-wscard .mq-scell input.mq-slot {
    border-style: solid !important; border-width: 0 0 1px 0 !important; border-radius: 0 !important; padding: 0 0.15em !important;
    font-size: var(--mq-digit) !important; height: var(--ws-hw) !important;
}
.online-edition .problem-card.mq-wscard .mq-scell input.mq-slot.mq-slot--box { border-width: 1px !important; }
.online-edition .problem-card.mq-wscard .mq-scell input.mq-slot.mq-slot--text { font-size: calc(var(--mq-digit) * 0.75) !important; }
.online-edition .problem-card.mq-wscard .mq-scell input.mq-digit { padding: 0 !important; font-size: 1em !important; }
.online-edition .problem-card.mq-wscard .mq-scell input.mq-carry { padding: 0 !important; font-size: 0.5em !important; }
.online-edition .problem-card.mq-wscard .mq-scell input:focus { outline: 3px solid #5E3FCC !important; outline-offset: 2px !important; }

/* SP-33: correct / wrong is a ring on the chrome frame plus a check-mark or cross badge in the
   bar (shape carries the meaning, AX-2). The checkers paint the card by inline style; the ring
   is read from it. The paper stays white. */
.online-edition .problem-card.mq-wscard[style*="var(--correct)"] { box-shadow: 0 0 0 2px var(--correct, #2E7D5B); }
.online-edition .problem-card.mq-wscard[style*="var(--incorrect)"] { box-shadow: 0 0 0 2px var(--incorrect, #B73838); }
.online-edition .problem-card.mq-wscard[style*="var(--correct)"] .mq-wsbadge { display: inline-block; background: #2E7D5B; border-radius: 50%; }
.online-edition .problem-card.mq-wscard[style*="var(--correct)"] .mq-wsbadge::before { content: "\2713"; }
.online-edition .problem-card.mq-wscard[style*="var(--incorrect)"] .mq-wsbadge { display: inline-block; background: #B73838; border-radius: 4px; }
.online-edition .problem-card.mq-wscard[style*="var(--incorrect)"] .mq-wsbadge::before { content: "\2715"; }
.online-edition .problem-card.mq-wscard .mq-wspaper,
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell { background: #fff !important; }

@media (max-width: 480px) {
    .online-edition .problems-grid.mq-wsgrid { grid-template-columns: minmax(0, 1fr); padding: 4px 4px 12px; }
    .online-edition .problem-card.mq-wscard { padding: 4px 6px 8px; }
    .online-edition .problem-card.mq-wscard.card-column,
    .online-edition .problem-card.mq-wscard.card-division,
    .online-edition .problem-card.mq-wscard.card-medium-visual,
    .online-edition .problem-card.mq-wscard.card-tchart,
    .online-edition .problem-card.mq-wscard.card-divisibility,
    .online-edition .problem-card.mq-wscard.card-data-stats,
    .online-edition .problem-card.mq-wscard.card-number-family,
    .online-edition .problem-card.mq-wscard.card-table,
    .online-edition .problem-card.mq-wscard.card-geometry { min-width: 0; }
}

/* ============================================================================
   HOST 3 — the quiz (#quizTakeView)
   ========================================================================= */
.qt-question-card .mq-qtpaper { background: #fff; color: #000; padding: 4px 0 0; margin: 4px auto 0; width: min(100%, 720px); }
.qt-question-card .mq-qtpaper .mq-instr { font-size: var(--mq-text, 22px); line-height: 1.3; text-align: left; padding: 0 2px 8px; max-width: 60ch; }
.qt-question-card .ws-cell.mq-scell {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #000; border-radius: 0; padding: 12px;
    overflow-x: auto; text-align: center;
}
.qt-question-card .ws-cell.mq-scell .qt-visual-aid { margin: 0; max-width: 100%; }
.qt-question-card .ws-cell.mq-scell .qt-question-text { font-size: var(--mq-text); font-weight: 400; color: #000; margin: 0; align-self: stretch; text-align: left; }
.qt-question-card .ws-cell.mq-scell .qt-answer-area { margin: 0; display: flex; justify-content: center; }
.qt-question-card .ws-cell.mq-scell .qt-answer-input.mq-slot {
    max-width: 100%; padding: 0 0.15em; background: #fff; color: #000;
    border-style: solid !important; border-width: 0 0 1px 0 !important; border-radius: 0 !important;
}
.qt-question-card .ws-cell.mq-scell .qt-answer-input.mq-slot.mq-slot--box { border-width: 1px !important; }
.qt-question-card .ws-cell.mq-scell .qt-answer-input.mq-slot:focus { border-color: #000 !important; }
.qt-question-card .qt-q-header .qt-flag-btn { min-height: 44px; min-width: 64px; }
.qt-question-card .qt-feedback { max-width: 720px; margin-left: auto; margin-right: auto; }
.dark .qt-question-card .ws-cell.mq-scell .qt-answer-input { background: #fff; }

/* ---------------------------------------------------------------- P8b: drawn K-2 pictures
   The number bond (RP-60) and the take-away strip size themselves from --mq-bond / --mq-pic
   (18 mm / 10 mm on paper). On screen: a 72 px bond box (64 px on a phone) and 44 px counters
   (RUBRIC C1: objects >= 40 px). An answer blank drawn inside the visual takes the host's input
   (screen-cell.js adoptVisualBlank): the bond's empty box IS the input, square, its own size. */
.mq-scell { --mq-bond: 72px; --mq-pic: 44px; }
@media (max-width: 480px) { .mq-scell { --mq-bond: 64px; } }
.mq-scell .mq-bond { margin: 4px auto; }
.mq-scell .mq-bond input.mq-slot.mq-slot--invisual,
.online-edition .problem-card.mq-wscard .mq-scell .mq-bond input.mq-slot.mq-slot--invisual,
.qt-question-card .ws-cell.mq-scell .mq-bond .qt-answer-input.mq-slot.mq-slot--invisual {
    width: var(--mq-bond) !important; height: var(--mq-bond) !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; border-width: 1px !important; border-radius: 0 !important;
    font-size: calc(var(--mq-bond) * 0.52) !important; font-weight: 700; line-height: 1;
    text-align: center; background: #fff;
}
/* a line blank after "=": the input sits on the equation's baseline */
.mq-scell input.mq-slot.mq-slot--invisual:not(.mq-slot--box) { vertical-align: baseline; margin-left: 0.2em; }

/* P8b: the multiplication-chart window. Cells sized for three digits (--mq-mc: 13 mm on paper;
   52 px here, 48 px on a phone), rows at least 44 px (C1 touch targets). Each empty cell holds
   its own input (screen-cell.js wireCellSlots): the cell is the slot, as on paper. */
.mq-scell { --mq-mc: 52px; }
@media (max-width: 480px) { .mq-scell { --mq-mc: 48px; } }
.mq-scell .mq-multchart td { height: max(44px, calc(var(--mq-mc) * 0.85)) !important; }
.mq-scell [data-mq-cell] > input.mq-cellslot,
.mq-scell .mq-multchart input.mq-cellslot {
    display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 44px;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: #000;
    font-family: "Andika", sans-serif; font-size: 1em; font-weight: 700; line-height: 1;
    text-align: center; caret-color: #000; outline: none;
}
.mq-scell [data-mq-cell] > input.mq-cellslot:focus { outline: 3px solid #5E3FCC; outline-offset: -3px; }
/* ---------------------------------------------------------------- writing-box radius + digit strip
   SL-11 / SL-12 (owner ruling 2026-09-25), the screen twin of css/sheet-kit.css: every writing box
   is slightly rounded, and a row of stack digit inputs is ONE strip - a rounded outline with a 1 px
   divider on every track boundary. Each input is still one digit and one full-track (>= 44 px)
   target; only the drawing changes. The strip is drawn with inset shadows so the transparent
   target border keeps its size, and keyed on `data-ws-seg`, which only new markup carries (saved
   quiz HTML keeps its separate boxes). */
.mq-scell { --mq-slot-r: max(4px, calc(var(--mq-digit) * 0.15)); }
html .mq-scell input.ws-input--box, html .mq-scell input.mq-slot.mq-slot--box,
html .mq-scell .ws-box, html .mq-scell .ws-check { border-radius: var(--mq-slot-r) !important; }
html .mq-scell .mq-kit :is(.ab, .rg)[data-ws-seg] { --mq-segr: 0 0 0 0 transparent; }
html .mq-scell .mq-kit :is(.ab, .rg):is([data-ws-seg="last"], [data-ws-seg="only"]) { --mq-segr: inset -1px 0 0 0 #000; }
html .mq-scell .mq-kit .ab[data-ws-seg] > input.mq-digit,
html .mq-scell .mq-kit .rg[data-ws-seg] > input.mq-carry {
    border-left-width: 0 !important; border-right-width: 0 !important;
    box-shadow: inset 0 1px 0 0 #000, inset 0 -1px 0 0 #000, inset 1px 0 0 0 #000, var(--mq-segr) !important;
    border-radius: 0 !important;
}
html .mq-scell .mq-kit :is(.ab[data-ws-seg="first"] > input.mq-digit, .rg[data-ws-seg="first"] > input.mq-carry) { border-radius: var(--mq-slot-r) 0 0 var(--mq-slot-r) !important; }
html .mq-scell .mq-kit :is(.ab[data-ws-seg="last"] > input.mq-digit, .rg[data-ws-seg="last"] > input.mq-carry) { border-radius: 0 var(--mq-slot-r) var(--mq-slot-r) 0 !important; }
html .mq-scell .mq-kit :is(.ab[data-ws-seg="only"] > input.mq-digit, .rg[data-ws-seg="only"] > input.mq-carry) { border-radius: var(--mq-slot-r) !important; }
/* marked digits in a strip (SP-30): the strip lines stay, the coloured band sits inside them */
html .mq-scell.mq-mono .mq-kit .ab[data-ws-seg] > input.mq-digit:is(.box-correct, [style*="var(--correct)"]) {
    box-shadow: inset 0 1px 0 0 #000, inset 0 -1px 0 0 #000, inset 1px 0 0 0 #000, var(--mq-segr), inset 0 0 0 3px #2E7D5B !important; }
html .mq-scell.mq-mono .mq-kit .ab[data-ws-seg] > input.mq-digit:is(.box-wrong, [style*="var(--incorrect)"]) {
    box-shadow: inset 0 1px 0 0 #000, inset 0 -1px 0 0 #000, inset 1px 0 0 0 #000, var(--mq-segr), inset 0 0 0 3px #B73838 !important; }

/* ============================================================================
   REGRADE 2026-09-25 — the screen hosts against the critic's re-grade
   (design/audit/runs/regrade-2026-09-25). Additive: new classes, or legacy
   classes overridden inside the cell only.
   ========================================================================= */

/* ---- 1. Focus: ink inside the cell, the chrome colour outside it (SP-2, AX-6).
   The purple ring used to sit inside the paper cell, 2 px off the slot, and read as a purple
   answer box. Inside the cell the focused slot now thickens in ink; the chrome ring is drawn
   around the whole cell, outside its border. */
.mq-scell input:focus, .mq-scell input:focus-visible,
.mq-scell select:focus, .mq-scell textarea:focus,
.online-edition .problem-card.mq-wscard .mq-scell input:focus {
    outline: 3px solid #000 !important; outline-offset: 1px !important;
}
.mq-scell button:focus-visible, .mq-scell [tabindex]:focus-visible,
.mq-scell .mq-tickrow:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px !important; }
/* stack digit boxes and cell slots: the box itself thickens (a ring would cross the strip's
   neighbours) */
html .mq-scell .mq-kit input.mq-digit:focus, html .mq-scell .mq-kit input.mq-carry:focus,
html .mq-scell .mq-work-area .mq-work:focus { outline: none !important; }
html .mq-scell .mq-kit input.mq-digit:focus:not([style*="var(--"]):not(.box-correct):not(.box-wrong) { box-shadow: inset 0 0 0 3px #000 !important; }
html .mq-scell .mq-kit .ab[data-ws-seg] > input.mq-digit:focus:not([style*="var(--"]):not(.box-correct):not(.box-wrong),
html .mq-scell .mq-kit .rg[data-ws-seg] > input.mq-carry:focus,
html .mq-scell .mq-work-area .mq-work:focus { box-shadow: inset 0 0 0 3px #000 !important; }
.mq-scell [data-mq-cell] > input.mq-cellslot:focus,
.mq-scell .mq-multchart input.mq-cellslot:focus { outline: 3px solid #000 !important; outline-offset: -4px !important; }
#gameView #questionCard.mq-card #questionPaper.mq-qpaper:focus-within::before { box-shadow: 0 0 0 3px #5E3FCC; }
.online-edition .problem-card.mq-wscard .ws-cell.mq-scell:focus-within,
.qt-question-card .ws-cell.mq-scell:focus-within { box-shadow: 0 0 0 3px #5E3FCC; }
/* an empty, centred digit slot shows no caret: in a still it reads as a divider ("a two-digit
   grid for a one-digit answer"). The ink ring says where typing goes. */
.mq-scell input.mq-digit, .mq-scell input.mq-slot:not(.mq-slot--text),
.mq-scell input.mq-cellslot, .mq-scell input.gf-cell, .mq-scell input.ib-cell,
.mq-scell input.mq-work { caret-color: transparent !important; }

/* ---- 2. Kit stack refinements: the operator track holds no answer box; the regroup strip is one
   strip; place-value heads only when asked. */
.mq-scell .mq-kit .ws-stack .ab.mq-ab-empty { visibility: hidden; }
.mq-scell .mq-kit .ws-stack.mq-multi .gap { height: 2px; }

/* ---- 3. Touch targets >= 44 px (48 px digit inputs) on every host, inside the cell. */
.mq-scell input.ib-cell {
    height: max(48px, 1.25em) !important; min-width: max(56px, 1.8em) !important;
    border: 1px solid #000 !important; border-radius: var(--mq-slot-r, 6px) !important;
    background: #fff !important; color: #000 !important; font-weight: 400 !important;
    vertical-align: middle !important; margin: 2px 6px !important; padding: 0 4px !important;
}
.mq-scell .area-model-input, .mq-scell .area-model-total,
.mq-scell input.ca-answer-input, .mq-scell input.ca-regroup-input,
.mq-scell input.fact-family-input, .mq-scell input.number-family-input,
.mq-scell input.func-table-input { min-height: 48px !important; }
.mq-scell input.ca-answer-input { min-width: 48px !important; }
.mq-scell input.ca-regroup-input { min-width: 44px !important; min-height: 44px !important; }
.mq-scell .colarith-host .ca-cell:has(> input.ca-answer-input),
.mq-scell .colarith-host .ca-cell.ca-regroup { min-width: 48px; height: auto !important; }
.mq-scell .colarith-host .ca-cell { min-width: 48px; }
/* quiz chrome */
#quizTakeView .qt-nav-btn { min-height: 48px; min-width: 64px; }
#quizTakeView .qt-q-dot { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* the practice card's chrome row: Hint / Read / Skip / Calculator are full targets on every width */
#gameView #questionCard.mq-card > .mq-qactions > .btn,
#gameView #questionCard.mq-card > .mq-qactions > button { min-height: 44px !important; min-width: 44px; }

/* ---- 4. The in-cell Check / Submit of a widget moves to the chrome bar (it was clipped to "Che"
   by the cell's width, and inked black). The chrome Check proxies it (question-render.js). */
#gameView #questionCard.mq-card #ibSubmitBtn,
#gameView #questionCard.mq-card #clozeSubmitBtn,
#gameView #questionCard.mq-card .tfb-submit,
#gameView #questionCard.mq-card .b10-submit { display: none !important; }
#gameView #questionCard.mq-card > .mq-qactions > #qcCheckBtn { white-space: nowrap; overflow: visible; }

/* ---- 5. Build mats in the cell: square frames, the two-column chart, ink only. */
.mq-scell .tfb-cell { border-radius: 0 !important; }
.mq-scell .tfb-frame { border-radius: 0 !important; }
.mq-scell .tfb-target, .mq-scell .b10-target { display: none !important; }      /* the instruction states it once */
.mq-scell .b10-mat { border-radius: 0 !important; }
.mq-scell .b10-zone-label { font-size: var(--mq-text, 20px) !important; }
.mq-scell .tfb-toolbar button, .mq-scell .b10-toolbar button, .mq-scell .mq-ring-tools button {
    min-height: 44px; padding: 0 18px !important; border: 1px solid #000 !important; border-radius: 6px !important;
    background: #fff !important; color: #000 !important; font-size: calc(var(--mq-text, 20px) * 0.85) !important;
}
.mq-scell .b10-palette-block, .mq-scell .tfb-palette-dot { min-width: 48px !important; min-height: 48px !important; }

/* ---- 6. One slot per answer: the boxed slots of a screen twin (wireCellSlots). */
.mq-scell .mq-cellbox {
    display: inline-block; box-sizing: border-box; vertical-align: middle;
    width: calc(var(--mq-w, 2) * 0.62em + 0.9em); min-width: 48px; height: max(48px, 1.3em);
    border: 1px solid #000; border-radius: var(--mq-slot-r, 6px); background: #fff;
    margin: 0 0.12em; overflow: hidden;
}
.mq-scell .mq-cellbox > input.mq-cellslot {
    font-size: 1em !important; font-weight: 400 !important; border-radius: var(--mq-slot-r, 6px) !important;
}
.mq-scell .mq-eq {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25em;
    font-size: var(--mq-digit); line-height: 1.15; margin: 6px auto;
}
.mq-scell .mq-eq .o { font-weight: 700; }
.mq-scell .mq-rlabel { font-weight: 700; padding: 0 0.1em; }
.mq-scell .mq-ibline {
    font-size: var(--mq-text); line-height: 1.6; text-align: left; align-self: stretch; margin: 0 0 10px;
}
.mq-scell .mq-ibline .mq-cellbox { font-size: calc(var(--mq-digit) * 0.8); height: max(48px, 1.2em); }

/* cloze twin: the equation, then the two lists in ink */
.mq-scell .mq-cloze { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.mq-scell .mq-bankhead { font-size: var(--mq-text); align-self: stretch; text-align: left; }
.mq-scell .mq-bank {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: stretch;
    border: 1px solid #000; border-radius: var(--mq-slot-r, 6px); padding: 8px 10px;
}
.mq-scell .mq-bankname { font-size: calc(var(--mq-text) * 0.85); font-weight: 700; flex: 0 0 100%; text-align: left; }
.mq-scell .mq-banktile {
    min-width: 56px !important; min-height: 48px !important; padding: 0 12px !important;
    font-size: calc(var(--mq-digit) * 0.7) !important; line-height: 1;
    background: #fff !important; color: #000 !important; border: 1px solid #000 !important; border-radius: var(--mq-slot-r, 6px) !important;
}
.mq-scell .mq-banktile[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #000 !important; }

/* grid-fill twin (and the card's widget): ink tiles, boxed blanks, rows that wrap */
.mq-scell .mq-gridfill { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.mq-scell .mq-gfrow {
    display: grid; gap: 6px; justify-content: center;
    grid-template-columns: repeat(5, minmax(0, calc(var(--mq-digit) * 1.9)));
    font-size: var(--mq-digit); line-height: 1; width: 100%;
}
.mq-scell .mq-gftile {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    height: calc(var(--mq-digit) * 1.4); min-height: 48px;
    border: 1px solid #000; border-radius: var(--mq-slot-r, 6px); background: #fff; color: #000;
}
.mq-scell .mq-gftile.mq-gfempty { border: 0; }
.mq-scell .mq-gftile.mq-gfblank { border: 0; }
.mq-scell .mq-gftile.mq-gfblank .mq-cellbox { width: 100%; height: 100%; margin: 0; }
/* the card's live grid-fill widget */
.mq-scell .gf-label, .mq-scell .gf-question-title { display: none !important; }
.mq-scell .gf-grid {
    display: grid !important; width: 100% !important; gap: 6px !important; justify-content: center !important;
    grid-template-columns: repeat(5, minmax(0, calc(var(--mq-digit) * 1.9))) !important; grid-template-rows: none !important;
}
.mq-scell .gf-tile {
    width: auto !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important;
    height: calc(var(--mq-digit) * 1.4) !important; min-height: 48px;
    font-family: "Andika", sans-serif !important; font-weight: 400 !important; font-size: var(--mq-digit) !important;
    background: #fff !important; color: #000 !important; box-shadow: none !important;
    border: 1px solid #000 !important; border-radius: var(--mq-slot-r, 6px) !important;
}
.mq-scell .gf-tile-empty { border: 0 !important; }
.mq-scell input.gf-cell { font-size: 1em !important; min-width: 44px; min-height: 44px; }
.mq-scell input.gf-cell::placeholder { color: transparent !important; }

/* tap-to-ring grouping: counters are 44 px targets, a full group is ringed */
.mq-scell .mq-ring { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.mq-scell .mq-ring-pool, .mq-scell .mq-ring-rings {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; max-width: 560px;
}
.mq-scell .mq-ring-rings:empty { display: none; }
.mq-scell button.mq-ctr {
    position: relative; width: 44px; height: 44px; min-width: 44px !important; min-height: 44px !important;
    padding: 0 !important; margin: 0; border: 0 !important; background: transparent !important; cursor: pointer;
}
.mq-scell button.mq-ctr::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border-radius: 50%; background: #000;
}
.mq-scell button.mq-ctr[aria-pressed="true"]::after {
    content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 3px solid #000;
}
.mq-scell button.mq-ringgroup {
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0;
    padding: 4px 8px !important; min-height: 52px !important; max-width: 244px;
    border: 2px solid #000 !important; border-radius: 999px !important; background: #fff !important; cursor: pointer;
}
.mq-scell .mq-ringgroup .mq-ctr { pointer-events: none; }
.mq-scell .mq-ansline { font-size: var(--mq-text); display: flex; align-items: center; justify-content: center; gap: 10px; }
.mq-scell .mq-anslabel { font-weight: 700; }
.mq-scell .mq-remeq { margin-top: 4px; }

/* long division: the quotient box and the work rows (VA-62) */
.mq-scell .mq-work-area { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px auto 0; font-size: calc(var(--mq-digit) * 0.7); }
.mq-scell .mq-workrow { display: flex; align-items: center; }
.mq-scell .mq-workrow + .mq-workrest { border-top: 2px solid #000; padding-top: 2px; }
.mq-scell .mq-workop { width: 1em; text-align: center; font-weight: 700; }
html .mq-scell .mq-work-area input.mq-work {
    width: max(44px, 1.05em) !important; height: max(44px, 1.3em) !important; box-sizing: border-box; margin: 0; padding: 0;
    font-size: 1em !important; text-align: center; border: 0 !important; border-radius: 0 !important;
    box-shadow: inset 0 1px 0 0 #000, inset 0 -1px 0 0 #000, inset 1px 0 0 0 #000 !important; background: #fff !important; color: #000 !important;
}
html .mq-scell .mq-work-area input.mq-work:is([data-ws-seg="last"], [data-ws-seg="only"]) { box-shadow: inset 0 0 0 1px #000 !important; }
html .mq-scell .mq-work-area input.mq-work[data-ws-seg="first"] { border-radius: var(--mq-slot-r) 0 0 var(--mq-slot-r) !important; }
html .mq-scell .mq-work-area input.mq-work[data-ws-seg="last"] { border-radius: 0 var(--mq-slot-r) var(--mq-slot-r) 0 !important; }
/* the bracket's tail stays inside the cell */
.mq-scell .mq-ldiv { margin-bottom: 8px; }

/* ---- 7. A scaled legacy drawing (screen-cell.js fitCellDigits) keeps its own layout box. */
.mq-scell [data-mq-fit] { transform-origin: top center; }

/* ---- 8. Andika for maths in the worksheet's hint popup; a closed popup is not on the page. */
.problem-card.mq-wscard > .hint-popup:not(.active) { visibility: hidden; }
.problem-card.mq-wscard > .hint-popup .hint-visual,
.problem-card.mq-wscard > .hint-popup .hint-visual * { font-family: "Andika", sans-serif !important; }
.problem-card.mq-wscard > .hint-popup .hint-close { font-family: "Nunito", system-ui, sans-serif; }

/* ---- 9. The worksheet's number strip and wide drawings take a full row, so their digits can
   reach 29 px (a 300 px card holds ten tiles at 18 px). */
.online-edition .problems-grid.mq-wsgrid > .problem-card.mq-wscard.mq-span-row { grid-column: 1 / -1; }

/* ---- 10. Dark theme: the paper stays white, the ink stays black (SP-2) — for the new pieces. */
.dark .mq-scell .mq-cellbox, .dark .mq-scell .mq-gftile, .dark .mq-scell .mq-bank,
.dark .mq-scell .mq-banktile, .dark .mq-scell button.mq-ringgroup,
.dark-theme .mq-scell .mq-cellbox, .dark-theme .mq-scell .mq-gftile { background: #fff; color: #000; }
.dark .qt-question-card .ws-cell.mq-scell, .dark .qt-question-card .mq-qtpaper,
.dark .online-edition .problem-card.mq-wscard .mq-wspaper,
.dark #gameView #questionCard.mq-card #questionPaper > #questionText { background: #fff !important; color: #000 !important; }
/* an answer slot inside a scaled drawing takes the drawing's own digit size (the scale then
   brings both to the host's size together) */
.mq-scell [data-mq-fit] input.mq-slot.mq-slot--invisual:not(.mq-bond input),
.online-edition .problem-card.mq-wscard .mq-scell [data-mq-fit] input.mq-slot.mq-slot--invisual:not(.mq-bond input),
.qt-question-card .ws-cell.mq-scell [data-mq-fit] .qt-answer-input.mq-slot.mq-slot--invisual:not(.mq-bond input) {
    font-size: 1em !important; height: 1.45em !important; min-height: 0 !important;
    width: calc(var(--mq-n, 2) * 0.62em + 0.9em) !important; min-width: 1.7em !important; vertical-align: middle;
}
#gameView #questionCard.mq-card .colarith-submit { display: none !important; }
.mq-scell .mq-ibline input.ib-cell { font-size: calc(var(--mq-digit) * 0.8) !important; }
/* a build mat's own prompt repeats the instruction line; its palette captions read at cell size */
.mq-scell .b10-prompt, .mq-scell .tfb-prompt { display: none !important; }
.mq-scell .b10-palette-stack > div, .mq-scell .tfb-palette > div { font-size: calc(var(--mq-text, 20px) * 0.7) !important; }
.mq-scell .b10-zone-stack { min-height: 96px !important; }
/* number strip: five tiles a row (two rows for ten), so two- and three-digit numbers fit their
   tiles at the host's digit size on every width */
.mq-scell .mq-gfrow { font-size: calc(var(--mq-digit) * 0.9); }
.mq-scell .gf-tile { font-size: calc(var(--mq-digit) * 0.9) !important; }
/* ring twin: counters in rows of ten (the paper's 5 + 5 rows), the answer row clear of the edge */
.mq-scell .mq-ring-pool { max-width: 484px; }
.mq-scell .mq-ring-pool > .mq-ctr:nth-child(5n):not(:nth-child(10n)) { margin-right: 12px; }
.mq-scell .mq-ring-pool { max-width: 496px; }
.mq-scell .mq-ring-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mq-scell .mq-ring-tip { font-size: calc(var(--mq-text, 20px) * 0.8); }
.mq-scell .mq-ansline { margin: 6px 0 10px; min-height: calc(var(--ws-hw, 58px) + 8px); }
#gameView #questionCard.mq-card #questionPaper.mq-twin > #visualAid { overflow: visible; }
.mq-scell .area-model-container > div:first-child { display: none !important; }   /* repeats the instruction line */
/* the blank of a drawn chart holds the answer input (screen-cell.js adoptSvgBlank) */
.mq-scell .mq-svgslot { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
.mq-scell .mq-svgslot > svg { display: block; }
html .mq-scell .mq-svgslot > input.mq-slot--svg {
    box-sizing: border-box; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
    border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important;
    font-size: min(var(--mq-digit), 100%) !important; line-height: 1; text-align: center;
}

/* ---- K-2 kit screen twins (k2Twin): paper millimetres drawn at --mq-k2 px. Raised with the host's
   digit size (40 / 48 / 56 px on the card: a 28 pt paper digit is 9.9 mm), and to the 29 px grid
   size on the online worksheet. SVGs carry max-width:100%, so a drawing never leaves its cell. */
.mq-scell { --mq-k2: 3.8px; }
@media (min-width: 600px) { .mq-scell { --mq-k2: 4.6px; } }
@media (min-width: 1200px) { .mq-scell { --mq-k2: 5.4px; } }
.mq-scell.mq-grid-cell { --mq-k2: 3.1px; }
.mq-scell [data-mq-k2] { max-width: 100%; }
/* tap-to-build on the kit's model */
.mq-scell td.mq-tfcell { min-width: 44px; min-height: 44px; height: max(44px, calc(var(--mq-k2) * 11)) !important; width: max(44px, calc(var(--mq-k2) * 11)) !important; cursor: pointer; }
.mq-scell td.mq-tfcell:focus-visible { outline: 3px solid #000 !important; outline-offset: -4px !important; }
.mq-scell .mq-b10bar { display: flex; justify-content: center; margin-top: 8px; }
.mq-scell .mq-b10pair { display: flex; justify-content: center; gap: 8px; width: calc(var(--mq-k2, 3.4px) * 40); min-width: 112px; }
.mq-scell button.mq-b10btn {
    min-width: 48px !important; min-height: 48px !important; padding: 0 !important;
    font-size: calc(var(--mq-text, 20px) * 1.3) !important; line-height: 1; font-weight: 700;
    background: #fff !important; color: #000 !important; border: 1px solid #000 !important; border-radius: var(--mq-slot-r, 6px) !important;
}
.mq-scell [data-mq-model="base10"] [data-ws-zone] { min-height: 100px; }
.mq-scell .mq-clozeeq { flex-wrap: nowrap; }
/* a kit ops twin's boxes size themselves: no 44 px floor inside them (it split the quotient box) */
.mq-scell .ws-ops [data-mq-cell] > input.mq-cellslot { min-height: 0; }
/* the kit cloze-bank twin: bank numbers are tap targets on screen; the row may wrap on a phone */
.mq-scell .mq-kitbank > [role="button"] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; border-radius: 6px; }
.mq-scell .mq-kitbank > [aria-pressed="true"] { box-shadow: inset 0 0 0 2px #000; }
@media (max-width: 480px) { .mq-scell .cloze-bank > div { flex-wrap: wrap !important; white-space: normal !important; justify-content: center; } }
/* quiz chrome buttons take the app's UI face (they fell back to the browser's Arial) */
#quizTakeView .qt-flag-btn, #quizTakeView .qt-nav-btn, #quizTakeView .qt-q-dot { font-family: "Nunito", system-ui, sans-serif; }
/* a kit twin's writing box is a full touch target (H6) - except the digits of a quotient strip,
   which must stay over their dividend digits */
.mq-scell [data-mq-cell]:not([data-mq-join=""] [data-mq-cell]) { min-width: 44px; min-height: 44px; box-sizing: border-box; }

/* ============================================================================
   REGRADE 2 — 2026-09-25 (design/audit/runs/regrade2-2026-09-25). Additive.
   ========================================================================= */

/* ---- R2-1. The online worksheet is a real grid (worksheet.js layoutWorksheetGrid): as many
   equal columns as the widest card allows at 29 px digits; the legacy full-width card classes
   no longer span the row; the cards of a row share one height and the paper fills its card. */
.online-edition .problems-grid.mq-wsgrid.mq-wsfit {
    grid-template-columns: repeat(var(--mq-wscols, 3), minmax(0, 1fr));
    align-items: stretch;
}
.online-edition .problems-grid.mq-wsgrid.mq-wsfit > .problem-card.mq-wscard { grid-column: auto; min-width: 0; min-height: 0; height: auto; align-self: stretch; }
.online-edition .problems-grid.mq-wsgrid.mq-wsfit > .problem-card.mq-wscard.mq-span-row { grid-column: 1 / -1; }
.online-edition .problems-grid.mq-wsgrid.mq-wsfit > .problem-card.mq-wscard > .mq-wspaper { flex: 1 1 auto; display: flex; flex-direction: column; }
.online-edition .problems-grid.mq-wsgrid.mq-wsfit > .problem-card.mq-wscard > .mq-wspaper > .ws-cell.mq-scell { flex: 1 1 auto; justify-content: center; }

/* ---- R2-3. Long division (the kit's bracket twin, screen-cell.js wireOpsWork): every digit place
   is a >= 44 px target on every host (0.81 em tracks at 57 px), and the working rows under the
   dividend are one-digit boxes the pupil writes in. A narrow cell scrolls inside itself (H6
   allows it); the page never does. */
.mq-scell .ws-ops-division.mq-opsdiv { font-size: max(var(--mq-digit, 40px), 57px) !important; max-width: none; }
.mq-scell .ws-ops-division.mq-opsdiv [data-mq-cell] > input.mq-cellslot { min-height: 44px; }
html .mq-scell .ws-ops-division input.mq-opswork {
    display: block; box-sizing: border-box; width: 100% !important; height: calc(100% - 8px) !important; min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--mq-slot-r, 6px) !important;
    background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 1px #949494 !important;
    font-family: "Andika", sans-serif !important; font-size: 0.9em !important; font-weight: 400 !important; line-height: 1; text-align: center;
    caret-color: transparent !important; outline: none;
}
html .mq-scell .ws-ops-division input.mq-opswork:focus { box-shadow: inset 0 0 0 3px #000 !important; outline: none !important; }
.mq-scell .ws-ops-division.mq-opsdiv [role="group"] > span { min-width: 0; }
/* a quotient strip that scrolls sideways in a phone cell keeps its bracket whole */
#gameView #questionCard.mq-card #questionPaper.mq-kind-legacy #visualAid:has(.mq-opsdiv) { overflow-x: auto; }

/* ---- R2-14. One border on a focused slot: the ink ring is the slot's own line thickened, never a
   second outline drawn 1 px outside it (it read as a doubled border). The chrome ring stays on
   the whole cell (:focus-within). */
.mq-scell input.mq-slot:focus, .mq-scell input.mq-slot:focus-visible,
.mq-scell [data-mq-cell] > input.mq-cellslot:focus, .mq-scell .mq-multchart input.mq-cellslot:focus,
.online-edition .problem-card.mq-wscard .mq-scell input.mq-slot:focus,
.qt-question-card .ws-cell.mq-scell .qt-answer-input.mq-slot:focus { outline: none !important; }
html .mq-scell input.mq-slot.mq-slot--box:focus:not(.box-correct):not(.box-wrong):not([style*="var(--"]),
html .mq-scell [data-mq-cell] > input.mq-cellslot:focus:not(.box-correct):not(.box-wrong):not([style*="var(--"]) { box-shadow: inset 0 0 0 2px #000 !important; }
html .mq-scell input.mq-slot:not(.mq-slot--box):focus:not(.box-correct):not(.box-wrong):not([style*="var(--"]) { box-shadow: 0 2px 0 0 #000 !important; }

/* ---- R2-15. Screen digits are the paper's digits (TY-4): form controls do not inherit the
   cell's font features, so a typed 4 closed. Every control in the cell takes the kit's set. */
.mq-scell input, .mq-scell textarea, .mq-scell button, .mq-scell select {
    font-feature-settings: "cv04" 1 !important; font-variant-numeric: lining-nums tabular-nums;
}

/* ---- R2-16. The adaptive difficulty chip ("L3 · Addition") is a teacher's number; on the pupil's
   card it read as the sheet's Level and contradicted it ("Level 1" on paper). */
body.student-mode #gameView .adaptive-level-chip { display: none !important; }

/* ---- R2-17. Stack digit tracks are 48 px at least on every width (the drawn strip read 43 px). */
.mq-scell .mq-kit .ws-stack, .mq-scell .mq-kit .ws-stack.wide { --ws-track: max(0.95em, 48px); }
html .mq-scell .mq-kit input.mq-digit, html .mq-scell .mq-kit input.mq-carry { min-width: 48px !important; }

/* ---- R2-11. A "Check one box." box is itself a 44 px target on every host (it was 26-32 px inside
   a 44 px row). */
.mq-scell .mq-tickrow { min-height: 48px; gap: 12px; }
.mq-scell .mq-tickbox { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: none !important; box-sizing: border-box; }

/* ---- R2-2. Counters to ring are drawn as the paper draws them: even rows of seven, no gap after
   every fifth (a 5-gap contradicted "groups of 4"; the pupil makes the groups, the picture does
   not suggest them). The answer frame is the paper's "[ ] groups of N". */
.mq-scell .mq-ring-pool { max-width: calc(7 * 44px + 6 * 4px); }
.mq-scell .mq-ring-pool > .mq-ctr:nth-child(5n):not(:nth-child(10n)) { margin-right: 0; }
.mq-scell .mq-groupsof { font-size: var(--mq-text); gap: 12px; }
.mq-scell .mq-groupsof .mq-anslabel { font-weight: 400; }
.mq-scell .mq-groupsof .mq-ansn { font-size: var(--mq-digit); line-height: 1; }

/* ---- R2-18. The number bond's digits are the host's digit size (56 / 48 / 40 px on the card):
   the bond box is digit / 0.52 (bond.js draws its digits at 0.52 of the box). */
.mq-scell { --mq-bond: max(72px, calc(var(--mq-digit, 40px) / 0.52)); }
@media (max-width: 480px) { .mq-scell { --mq-bond: max(64px, min(calc(var(--mq-digit, 40px) / 0.52), calc((100vw - 76px) / 4.2))); } }
.mq-scell.mq-grid-cell { --mq-bond: 72px; }

/* ---- R2-4. The number line on screen (screen-cell.js wireNumberLines): tick buttons with labels at
   the cell's text size, 44 px wide below 1024 px (the line scrolls inside the cell when it is
   longer than the cell), jump arcs drawn above the line, the equation at the host's digit size. */
.mq-scell { --mq-nl-min: 44px; --mq-nl-lab: var(--mq-text, 20px); }
@media (min-width: 1024px) { .mq-scell { --mq-nl-min: 32px; } }
.mq-scell .ws-ops-number-line[data-mq-nl] { font-size: var(--mq-digit, 40px) !important; width: 100%; max-width: 100%; overflow: visible; padding-bottom: 4px; }
.mq-scell .mq-nl { width: 100%; max-width: 100%; margin: 0 auto 0.25em; font-size: var(--mq-nl-lab); line-height: 1.2; }
.mq-scell .mq-nl-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.mq-scell .mq-nl-track {
    position: relative; display: grid; margin: 0 auto;
    grid-template-columns: repeat(var(--mq-nl-n, 11), minmax(var(--mq-nl-min), 1fr));
    width: max(100%, calc(var(--mq-nl-n, 11) * var(--mq-nl-min))); max-width: calc(var(--mq-nl-n, 11) * 64px);
    padding-top: 2.6em;
}
.mq-scell svg.mq-nl-arcs { position: absolute; left: 0; top: 0; width: 100% !important; max-width: none !important; height: calc(2.6em + 12px) !important; overflow: visible; pointer-events: none; }
.mq-scell .mq-nl-line { position: absolute; left: 0; right: 0; top: calc(2.6em + 12px); height: 0; border-top: 2px solid #000; pointer-events: none; }
.mq-scell .mq-nl-line::after {
    content: ""; position: absolute; right: 0; top: -7px; width: 0; height: 0;
    border-left: 10px solid #000; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.mq-scell button.mq-nl-tick {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    min-width: 0 !important; min-height: 64px !important; margin: 0; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: #000 !important; font-size: 1em !important; font-weight: 400; line-height: 1.2; cursor: pointer;
}
.mq-scell .mq-nl-mark { position: relative; display: block; width: 2px; height: 24px; background: #000; flex: none; }
.mq-scell .mq-nl-start .mq-nl-mark::after, .mq-scell .mq-nl-land .mq-nl-mark::after {
    content: ""; position: absolute; left: 50%; top: 12px; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 50%; box-sizing: border-box;
}
.mq-scell .mq-nl-start .mq-nl-mark::after { background: #000; }
.mq-scell .mq-nl-land .mq-nl-mark::after { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: #fff; border: 3px solid #000; }
.mq-scell .mq-nl-lab { display: block; margin-top: 4px; white-space: nowrap; }
.mq-scell .mq-nl-tick[aria-pressed="true"] .mq-nl-lab { font-weight: 700; }
.mq-scell button.mq-nl-tick:focus-visible { outline: 3px solid #000 !important; outline-offset: -3px !important; }
.mq-scell .mq-nl-tools { display: flex; justify-content: center; margin-top: 6px; }
.mq-scell .mq-nl-tools button {
    min-height: 44px; padding: 0 18px !important; border: 1px solid #000 !important; border-radius: 6px !important;
    background: #fff !important; color: #000 !important; font-size: calc(var(--mq-text, 20px) * 0.85) !important;
}
/* the equation under the line, and its answer box, never clip */
.mq-scell .ws-ops-number-line[data-mq-nl] > div:last-child { overflow: visible; padding-bottom: 6px; }

/* ---- R2-12. How to build: a black-and-white cue under a tap-to-build model. */
.mq-scell .mq-buildcue { font-size: var(--mq-text, 20px); line-height: 1.3; color: #000; text-align: center; margin: 8px auto 0; }

/* ---- R2-13. A word problem's open "work" rectangle is for pencil working; a screen cannot be
   drawn on, so the empty box only competed with the answer box. The answer box stays. */
.mq-scell .k2-wordpic [data-ws-slot="work"][data-ws-graded="0"] { display: none !important; }
.mq-scell .k2-wordpic [data-ws-slot="answer"] { flex: none; }
.mq-scell .mq-nl-tools { gap: 12px; align-items: center; }
.mq-scell .mq-nl-tools button.mq-nl-pan { display: none; min-width: 48px; padding: 0 !important; }
.mq-scell .mq-nl-scrolls .mq-nl-tools button.mq-nl-pan { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .mq-scell.mq-grid-cell { --mq-nl-min: 22px; } }

/* ---- R2-5. The cloze with banks: write boxes, each bank printed under its box for reference (as on
   paper). The row never clips: it is sized to the cell on a phone and may wrap; bank numbers read
   at 0.8 of the digit size (they were 13-18 px). */
.mq-scell .ws-ops-cloze-bank { font-size: min(var(--mq-digit, 40px), calc((100vw - 68px) / 9)) !important; max-width: 100%; }
.mq-scell.mq-grid-cell .ws-ops-cloze-bank, .mq-scell .mq-grid-cell .ws-ops-cloze-bank { font-size: var(--mq-digit, 29px) !important; }
.mq-scell .ws-ops-cloze-bank > div { flex-wrap: wrap; justify-content: center; row-gap: 0.3em; white-space: normal !important; max-width: 100%; }
.mq-scell .ws-ops-cloze-bank > div > span > span:not([data-mq-cell]) { font-size: 0.72em !important; font-weight: 400 !important; gap: 0.35em !important; }

/* ---- R2-6. The worksheet card is a .problem-card, whose legacy rule wraps every inline flex row
   (ui-components.css "Scale inline flex/grid layouts within cards"). Inside a kit drawing that broke
   the drawing itself: an area model's column labels wrapped and its multiplier jumped above the model.
   A kit drawing keeps its own rows; the grid gives the card the width it needs (layoutWorksheetGrid). */
html body .problem-card.mq-wscard.mq-wscard .mq-scell :is(.ws-ops, .k2-twin, .k2-cell) [style*="display:flex"]:not([style*="flex-wrap:wrap"]),
html body .problem-card.mq-wscard.mq-wscard .mq-scell :is(.ws-ops, .k2-twin, .k2-cell) [style*="display:inline-flex"]:not([style*="flex-wrap:wrap"]) { flex-wrap: nowrap !important; }
html body .problem-card.mq-wscard.mq-wscard .mq-scell .ws-ops-cloze-bank > div { flex-wrap: wrap !important; }
.mq-scell .ws-ops-cloze-bank [data-mq-cell] { height: max(1.215em, 50px) !important; min-width: max(1.721em, 56px) !important; }
.mq-scell.mq-grid-cell .ws-ops-cloze-bank > div > span > span:not([data-mq-cell]), .mq-scell .mq-grid-cell .ws-ops-cloze-bank > div > span > span:not([data-mq-cell]) { font-size: 0.86em !important; }

/* ---- R2-7. A fact's operator sits at the left of its own track, clear of the digits ("× 10", never
   "×10"); the tracks of a sheet are one set (screen-cell.js unifyFactTracks). */
.mq-scell .mq-kit .ws-fact > .op { justify-content: flex-start; padding-left: 0.05em; }

/* ---- R2-8/9. The online worksheet draws the K-2 kit twins larger: pictures and objects
   about 30 px, strip numerals 29 px (they were 20-22 px at 3.1 px per mm). */
.mq-scell.mq-grid-cell { --mq-k2: 4.2px; }

/* ---- R2-9. A K-2 kit box adopted by the answer input keeps the paper box's shape (a count's square),
   at least 48 px; a count's objects and its box share a row that wraps on a phone, never clips. */
html body .mq-scell.mq-scell.mq-scell input.mq-slot.mq-slot--invisual.mq-slot--box.mq-bsize {
    width: max(48px, var(--mq-bw)) !important; height: max(48px, var(--mq-bh)) !important; min-width: 48px !important; min-height: 48px !important; max-width: 100%;
    font-size: min(var(--mq-digit, 40px), calc(max(48px, var(--mq-bh)) * 0.78)) !important; padding: 0 !important; line-height: 1;
}
.mq-scell .k2-count > div[style*="display:flex"] { flex-wrap: wrap; row-gap: 12px; max-width: 100%; }
html body .problem-card.mq-wscard.mq-wscard .mq-scell .k2-cell.k2-count > div[style*="display:flex"] { flex-wrap: wrap !important; }

/* ---- R2-10. "q R r" stays on one line on a phone: the equation is sized to the cell. Counters
   in rows of seven fit a phone cell, rows start at the left as on paper. */
.mq-scell .mq-remeq { flex-wrap: nowrap !important; font-size: min(var(--mq-digit, 40px), calc((100vw - 68px) / 8.6)); gap: 0.2em; }
.mq-scell .mq-remeq .mq-cellbox { width: calc(var(--mq-w, 2) * 0.62em + 0.5em); margin: 0 0.06em; }
.mq-scell.mq-grid-cell .mq-remeq, .mq-scell .mq-grid-cell .mq-remeq { font-size: var(--mq-digit, 29px); }
.mq-scell .mq-ring-pool { gap: 2px; width: min(100%, calc(7 * 44px + 6 * 2px)); max-width: calc(7 * 44px + 6 * 2px); justify-content: flex-start; margin: 0 auto; }
.mq-scell .mq-ring-tip { font-size: var(--mq-text, 20px); }
.mq-scell .k2-wordpic > div:last-child { justify-content: center !important; }

/* ---- R3-1. The kit cell's screen twin (screen-cell.js kitCellTwin): the paper's pv cell drawn at
   the host's digit size - the problem sits IN the cell, the slot where the paper pupil writes
   (after "=", after the arrow, in the circle, in the rewrite's boxes). */
.mq-scell .mq-kit.mq-kittwin { font-size: var(--mq-digit); color: #000; text-align: center; max-width: 100%;
    --ws-digit: var(--mq-digit); --ws-text: var(--mq-text); --ws-zone: var(--mq-text); }
.mq-scell .mq-kittwin .pv-cell { display: block; max-width: 100%; margin: 4px auto; }
.mq-scell .mq-kittwin .ws-eq { flex-wrap: wrap; row-gap: 8px; align-items: center; justify-content: center; max-width: 100%; }
.mq-scell .mq-kittwin .pv-numeral { max-width: 100%; }
.mq-scell .mq-kittwin .pv-tracks td { line-height: 1.15; }
/* a slot not taken by an input (a card answering with buttons) still reads as the paper's slot */
.mq-scell .mq-kittwin .mq-kblank { display: inline-block; vertical-align: baseline; }
.mq-scell .mq-kittwin .mq-kblank--line { width: 2.6em; height: 1em; border-bottom: 2px solid #000; }
.mq-scell .mq-kittwin .mq-kblank--box { width: 2em; height: 1.2em; border: 1px solid #000; border-radius: var(--mq-slot-r, 6px); }
.mq-scell .mq-kittwin .mq-kblank--circle { width: 1.25em; height: 1.25em; border: 2px solid #000; border-radius: 50%; vertical-align: middle; }
/* the host input in the slot: a line is 2 px ink on the baseline, a box is closed on four sides */
html body .mq-scell.mq-scell.mq-scell .mq-kittwin input.mq-slot.mq-slot--invisual:not(.mq-slot--box):not(.mq-slot--circle) {
    border-width: 0 0 2px 0 !important; border-color: #000 !important; border-radius: 0 !important;
    height: max(48px, 1.15em) !important; font-size: 1em !important; background: #fff !important; color: #000 !important;
    width: calc(var(--mq-n, 3) * 0.62em + 0.9em) !important; min-width: max(64px, 2.4em) !important; max-width: 100%;
}
html body .mq-scell.mq-scell.mq-scell input.mq-slot.mq-slot--invisual.mq-slot--circle.mq-slot--circle.mq-slot--circle {
    width: max(52px, 1.3em) !important; height: max(52px, 1.3em) !important; min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; border: 2px solid #000 !important; border-radius: 50% !important;
    font-size: calc(var(--mq-digit) * 0.8) !important; font-weight: 700; line-height: 1; text-align: center;
    background: #fff !important; color: #000 !important; vertical-align: middle; margin: 0 0.1em !important; box-sizing: border-box;
}
.mq-scell .mq-kittwin .mq-cellbox { vertical-align: middle; font-size: 1em; height: max(48px, 1.25em); width: max(52px, calc(var(--mq-w, 2) * 0.62em + 0.6em)); min-width: 0; margin: 0; }
.mq-scell .mq-kittwin .pv-rewrite { flex-wrap: nowrap !important; }
.mq-scell .mq-kittwin .mq-cellbox.mq-cellbox--line { border-width: 0 0 2px 0; border-radius: 0; }
.mq-scell .mq-kittwin .mq-cellbox > input { font-size: 1em !important; }
/* the paper's bank of signs: tap one to write it in the circle (black and white, 48 px) */
.mq-scell .mq-signbank { display: flex; justify-content: center; gap: 12px; margin: 12px auto 2px; }
html body .mq-scell .mq-signbank .mq-signtile {
    min-width: 56px; min-height: 52px; padding: 0 12px; margin: 0;
    border: 1px solid #000 !important; border-radius: var(--mq-slot-r, 6px) !important;
    background: #fff !important; color: #000 !important; box-shadow: none !important;
    font-family: "Andika", sans-serif !important; font-size: calc(var(--mq-digit) * 0.7) !important; font-weight: 700; line-height: 1;
    cursor: pointer;
}
@media (max-width: 480px) { .mq-scell .mq-kittwin .ws-eq { gap: 0.18em; } }

/* ---- R3-3. The focus ring belongs on the input, never on the cell's border (the cell drew an
   indigo ring whenever anything inside it had focus). */
html body #gameView #questionCard.mq-card #questionPaper.mq-qpaper:focus-within::before { box-shadow: none !important; }
html body .online-edition .problem-card.mq-wscard .ws-cell.mq-scell:focus-within,
html body .qt-question-card .ws-cell.mq-scell:focus-within { box-shadow: none !important; }

/* ---- R3-3b. A slot box's input never paints over the box's rounded border (clock / h:min / money
   / timeline boxes lost their corners and side edges to the input's square white fill); round
   slots (a number track's circles) stay round. The box draws the border; the input is the target. */
html body .mq-scell [data-mq-cell] > input.mq-cellslot { background: transparent !important; border-radius: inherit !important; }
/* a shaped slot (a number track's circle or hexagon) shows focus in its own shape: the outline
   thickens; a square ring is never drawn over a round or six-sided slot */
html body .mq-scell .k2-shape [data-mq-cell] > input.mq-cellslot:focus { outline: none !important; box-shadow: none !important; }
html body .mq-scell .k2-shape:not(.k2-shape-hex):focus-within > [data-mq-cell] { box-shadow: inset 0 0 0 2px #000; }
html body .mq-scell .k2-shape-hex:focus-within polygon { stroke-width: 6.4 !important; }

/* ---- R3-5. Drag / sort widgets inside the cell are paper: Andika, black and white, no chrome.
   No speaker per tile (Read is in the chrome bar), no mouse-instruction line (the instruction line
   says what to do), bin names as plain bold words (not black pills), tiles as white boxes with an
   ink outline, and the grey Submit hidden - the chrome Check presses it (card) or the card bar's
   Check (worksheet). */
html body .mq-scell .dnd-tts-btn { display: none !important; }
html body .mq-scell .dnd-hint { display: none !important; }
html body .mq-scell .dnd-host,
html body .mq-scell .dnd-host * { font-family: "Andika", sans-serif !important; }
html body .mq-scell .dnd-bin-label,
html body .mq-scell .dnd-bin-label > span {
    background: #fff !important; color: #000 !important; border: 0 !important; box-shadow: none !important;
    font-weight: 700 !important; font-size: var(--mq-text, 20px) !important;
}
html body .mq-scell .dnd-tile {
    background: #fff !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important;
    min-height: 48px !important; min-width: 56px; font-size: calc(var(--mq-digit, 40px) * 0.6) !important; font-weight: 700 !important;
    border-radius: var(--mq-slot-r, 6px) !important;
}
html body .mq-scell .dnd-bin, html body .mq-scell .dnd-slot {
    background: #fff !important; border-color: #000 !important; box-shadow: none !important;
}
html body #questionPaper.mq-scell .dnd-submit,
html body .mq-scell .dnd-host.mq-dnd-proxied .dnd-submit { display: none !important; }
.mq-wsbar .mq-wscheck {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 0;
    background: var(--mq-orange, #FF8A3D); color: #fff; box-shadow: none;
    font-family: "Nunito", system-ui, sans-serif; font-size: 0.9rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.mq-wsbar .mq-wscheck:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
/* the disk mat, the digit chart and the number line on the card: their Submit is the chrome Check
   (question-render.js _checkProxy); the mouse-instruction line goes; Clear is an ink button */
html body #questionPaper.mq-scell :is(.pvb-submit, .pvdd-submit, .nle-submit) { display: none !important; }
html body .mq-scell .nle-instr { display: none !important; }
html body .mq-scell :is(.pvb-clear, .pvdd-clear) {
    min-height: 44px !important; min-width: 64px; padding: 0 14px !important;
    background: #fff !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important;
    border-radius: var(--mq-slot-r, 6px) !important; font-family: "Andika", sans-serif !important;
    font-size: var(--mq-text, 18px) !important; font-weight: 700 !important;
}
html body .mq-scell :is(.nle-host, .pvb-host, .pvdd-host, .pvb-root, .pvdd-root) text,
html body .mq-scell :is(.nle-host, .pvb-host, .pvdd-host, .pvb-root, .pvdd-root) { font-family: "Andika", sans-serif !important; }

/* ---- R3-G. Green as soon as it is right (owner request 2026-09-25; screen-cell.js
   wireLiveCorrect): a digit box, a regroup box or an answer slot whose value is the one it should
   hold. A feedback mark (SP-30), so the one colour the cell allows; the digit stays ink (AA on the
   pale fill). No motion, so nothing to reduce. */
html body .mq-scell input.mq-live-correct,
html body .mq-scell .mq-kit input.mq-digit.mq-live-correct,
html body .mq-scell .mq-kit input.mq-carry.mq-live-correct {
    background: #E3F4EA !important; color: #000 !important;
    border-color: #1B7A43 !important;
    box-shadow: inset 0 0 0 3px #1B7A43 !important;
}
html body .mq-scell [data-mq-cell]:has(> input.mq-live-correct),
html body .mq-scell .mq-cellbox:has(> input.mq-live-correct) { border-color: #1B7A43 !important; background: #E3F4EA !important; }
html body .mq-scell.mq-scell .mq-kit :is(.ab, .rg)[data-ws-seg] > input.mq-live-correct.mq-live-correct {
    background: #E3F4EA !important; box-shadow: inset 0 0 0 3px #1B7A43 !important;
}
/* the place-value chart twin: each column's cell holds one digit box */
.mq-scell .mq-kittwin .pv-chartfill td { padding: 2px !important; }
.mq-scell .mq-kittwin .mq-cellbox.mq-cellbox--chart { width: max(48px, 1.1em); height: max(52px, 1.3em); margin: 0 auto; display: block; }
@media (max-width: 480px) { .mq-scell .mq-kittwin .pv-chartfill td { width: auto !important; } }

/* ---- R3-4b. A number line's tick is at least as wide as its label plus a gap, so labels never run
   together ("10152025..."); a longer line scrolls inside the cell, as before. */
html body .mq-scell .mq-nl-track {
    grid-template-columns: repeat(var(--mq-nl-n, 11), minmax(max(var(--mq-nl-min), calc(var(--mq-nl-chars, 2) * 0.62em + 0.7em)), 1fr)) !important;
    width: max(100%, calc(var(--mq-nl-n, 11) * max(var(--mq-nl-min), calc(var(--mq-nl-chars, 2) * 0.62em + 0.7em)))) !important;
    max-width: max(100%, calc(var(--mq-nl-n, 11) * 64px)) !important;
}
/* the place-value mat's zones stay side by side (H T O is one row, never wrapped) */
html body .problem-card .pvb-zones[data-role="zones"], html body .mq-scell .pvb-zones[data-role="zones"] { flex-wrap: nowrap !important; }

/* O6 AP3: a sign circle between two pictures keeps its circle when the row is tight (it never
   shrinks into an oval; the host shrinks the drawing instead) */
html body .mq-scell input.mq-slot.mq-slot--invisual.mq-slot--circle { flex: none !important; }

/* O6 AP3: "Put the number on the line" (sheet/cells/nl-place.js, screen-cell.js _mountNlPlace).
   Black and white; every tick a 44 px button; the row scrolls when the line is long. */
.mq-scell .mq-nlp { width: 100%; max-width: 100%; }
.mq-scell .mq-nlp-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #000 #fff; padding-bottom: 4px; }
.mq-scell .mq-nlp-track { position: relative; display: grid; grid-template-columns: repeat(var(--mq-nlp-n), minmax(44px, 1fr));
    min-width: calc(var(--mq-nlp-n) * 44px); margin: 0 auto; }
.mq-scell .mq-nlp-axis { position: absolute; left: 0; right: 0; top: 55px; border-top: 3px solid #000; pointer-events: none; }
html body .mq-scell .mq-nlp-tick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    min-width: 44px; min-height: 112px; padding: 0; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: #000 !important; cursor: pointer; font-family: "Andika", sans-serif; border-radius: 6px; }
.mq-scell .mq-nlp-tick:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.mq-scell .mq-nlp-pin { height: 40px; display: flex; align-items: flex-end; justify-content: center; font-weight: 700; font-size: 1.05rem; line-height: 1; padding-bottom: 2px; }
.mq-scell .mq-nlp-mark { width: 2px; height: 16px; margin-top: 9px; background: #000; }
.mq-scell .mq-nlp-major .mq-nlp-mark { width: 3px; height: 26px; margin-top: 4px; }
.mq-scell .mq-nlp-major .mq-nlp-lab { margin-top: 2px; }
.mq-scell .mq-nlp-dot { position: absolute; top: 47px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #000; display: none; }
.mq-scell .mq-nlp-on .mq-nlp-dot { display: block; }
.mq-scell .mq-nlp-lab { margin-top: 6px; font-weight: 700; font-size: 1.05rem; line-height: 1.1; min-height: 1.1em; display: inline-flex; align-items: center; gap: 2px; }
.mq-scell .mq-nlp-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.mq-scell .mq-nlp-bar { display: block; align-self: stretch; min-width: 0.9em; border-top: 2px solid #000; margin: 1px 0; }
.mq-scell .mq-nlp-pin .mq-nlp-frac { font-size: 0.95rem; }
.mq-scell [data-nlp-chip] { cursor: pointer; min-height: 44px; border-radius: 8px; outline-offset: 3px; }
.mq-scell [data-nlp-chip].mq-nlp-sel { outline: 3px solid #000; }
.mq-scell [data-nlp-chip].mq-nlp-used { opacity: 0.5; }
.mq-scell [data-nlp-chip]:focus-visible { outline: 3px dashed #000; }
/* Round on a number line (round_nl_*, 2026-09-25): the dot turns green with its (hidden) slot. */
html body .mq-rlwrap svg circle.mq-rl-dot.mq-rl-dot--ok { fill: #1B7A43 !important; }
html body .mq-rl:focus-visible { outline: 3px solid #1B7A43; outline-offset: 2px; border-radius: 8px; }
html body .mq-scell .mq-rlwrap .mq-cellbox > input { width: 100% !important; height: 100% !important; border: 0 !important; margin: 0 !important; box-shadow: none !important; }

/* ---- R4-1. One answer area in MAP too (owner 2026-09-26): the cell's own boxes are the inputs
   (question-render.js _applyMapSlots); MAP's CHECK stays. */
body.map-immersive #visualAid [data-mq-cell] > input.mq-cellslot {
    display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 40px;
    margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: #000;
    font-family: "Andika", sans-serif; font-size: 1em; font-weight: 700; line-height: 1;
    text-align: center; caret-color: #000; outline: none;
}
body.map-immersive #visualAid [data-mq-cell]:focus-within { box-shadow: inset 0 0 0 3px #000; }
body.map-immersive #visualAid input.mq-slot--invisual.mq-slot--box {
    box-sizing: border-box; min-width: 48px; min-height: 44px; padding: 0 !important;
    border: 1px solid #000 !important; border-radius: 6px !important; background: #fff !important; color: #000 !important;
    font-family: "Andika", sans-serif; font-weight: 700; text-align: center;
}
body.map-immersive #visualAid input.mq-slot--invisual.mq-bsize { width: max(48px, var(--mq-bw)) !important; height: max(44px, var(--mq-bh)) !important; }

/* ---- R4-2. A sentence that holds the one blank sits in the cell at the cell's size, the answer
   input in its blank (owner 2026-09-26: no separate answer area). */
.mq-scell .mq-legline { font-size: calc(var(--mq-digit) * 0.8); line-height: 1.5; text-align: center; font-weight: 700; }
html body .mq-scell :is(.mq-legline, .mq-instr, #questionText) input.mq-slot.mq-slot--invisual {
    font-size: 1em !important; height: max(44px, 1.3em) !important; vertical-align: baseline; margin: 0 0.2em !important;
}
/* a drawn working box of a new-skill drawing (screen-cell.js markV2Blanks): a real input, not graded */
html body .mq-scell input.mq-workbox, html body #visualAid input.mq-workbox {
    box-sizing: border-box; width: 2.6em; min-width: 44px; height: 1.3em; min-height: 44px; margin: 0; padding: 0; vertical-align: baseline;
    border: 0; background: transparent; color: #000; font: inherit; font-weight: 700; text-align: center; outline: none;
}
html body .mq-scell input.mq-workbox:focus { box-shadow: inset 0 0 0 3px #000; }

/* a start-unknown number line: the given point is where the hops land - a hollow ring, never the
   filled start dot (round 4) */
html body .mq-scell .mq-nl-start.mq-nl-given .mq-nl-mark::after { background: #fff !important; border: 3px solid #000; box-sizing: border-box; }

/* ---- WAVE 1 (1.2, 2026-10-02). The ACTIVE answer box is yellow and pulses, so the pupil sees where
   to write. ADDITIVE: R3-3 above (no ring on the cell border) stays; the highlight is on the box
   itself, never the cell border. Screen only: print never loads a focused input or .mq-active-*.
   prefers-reduced-motion: the same yellow, steady, no animation. */
@keyframes mq-active-pulse {
    0%, 100% { background-color: #fff3a0; box-shadow: 0 0 0 3px #f2c200; }
    50%      { background-color: #ffe14d; box-shadow: 0 0 0 6px #f2c20066; }
}
html body #gameView #questionCard #questionPaper input.mq-slot:focus,
html body #gameView #questionCard #questionPaper input.mq-cellslot:focus,
html body #gameView #questionCard #questionPaper [data-mq-cell]:focus-within,
html body .online-edition .problem-card.mq-wscard.mq-active-problem input.mq-slot:focus,
html body .online-edition .problem-card.mq-wscard.mq-active-problem input.mq-cellslot:focus,
html body .online-edition .problem-card.mq-wscard.mq-active-problem [data-mq-cell]:focus-within,
html body .qt-question-card .ws-cell.mq-scell input.mq-slot:focus,
html body .qt-question-card .ws-cell.mq-scell input.mq-cellslot:focus,
html body .qt-question-card .ws-cell.mq-scell [data-mq-cell]:focus-within,
html body .mq-active-box {
    background-color: #fff3a0 !important;
    box-shadow: 0 0 0 3px #f2c200 !important;
    animation: mq-active-pulse 1.3s ease-in-out infinite !important;
}
/* the whole current problem on the online worksheet */
html body .online-edition .problem-card.mq-wscard.mq-active-problem {
    background-color: #fffbe0;
    box-shadow: 0 0 0 4px #f2c200;
    animation: mq-active-card-pulse 1.6s ease-in-out infinite !important;
}
@keyframes mq-active-card-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #f2c200; }
    50%      { box-shadow: 0 0 0 8px #f2c20055; }
}
html body .online-edition .problem-card.mq-wscard.mq-active-problem input:focus,
html body .online-edition .problem-card.mq-wscard.mq-active-problem [data-mq-cell]:focus-within {
    background-color: #fff3a0 !important;
}
@media (prefers-reduced-motion: reduce) {
    html body #gameView #questionCard #questionPaper input.mq-slot:focus,
    html body #gameView #questionCard #questionPaper input.mq-cellslot:focus,
    html body #gameView #questionCard #questionPaper [data-mq-cell]:focus-within,
    html body .online-edition .problem-card.mq-wscard.mq-active-problem input.mq-slot:focus,
    html body .online-edition .problem-card.mq-wscard.mq-active-problem input.mq-cellslot:focus,
    html body .online-edition .problem-card.mq-wscard.mq-active-problem [data-mq-cell]:focus-within,
    html body .qt-question-card .ws-cell.mq-scell input.mq-slot:focus,
    html body .qt-question-card .ws-cell.mq-scell input.mq-cellslot:focus,
    html body .qt-question-card .ws-cell.mq-scell [data-mq-cell]:focus-within,
    html body .mq-active-box,
    html body .online-edition .problem-card.mq-wscard.mq-active-problem { animation: none !important; }
}
@media print {
    html body .mq-active-box, html body .mq-active-problem { animation: none !important; box-shadow: none !important; background-color: transparent !important; }
}

/* ---- WAVE 1 (1.5). The hint box's speaker button: 44 px target. */
html body .hint-speak-btn { min-width: 44px; min-height: 44px; }

/* ---- WAVE 1 (1.6). Student home: four Start buttons (shown for students only). */
.student-start-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.student-start-btn {
    min-height: 64px; padding: 14px 26px; font-size: 1.25rem; font-weight: 900; border-radius: 18px; cursor: pointer;
    background: var(--mq-orange); color: #fff; border: 2px solid var(--mq-orange-d);
    box-shadow: 0 6px 0 0 var(--mq-orange-d); flex: 1 1 220px; max-width: 320px;
}
.student-start-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 0 var(--mq-orange-d); }
@media (max-width: 480px) { .student-start-btn { flex: 1 1 44%; max-width: none; min-height: 56px; padding: 10px 12px; font-size: 1.05rem; } }

/* ---- WAVE 1 / A2 (2026-10-02). Per-box feedback: each answer box turns green when right, red when
   wrong (screen-cell.js wireLiveCorrect / markBoxSubmitted). PRACTICE CARD and ONLINE WORKSHEET
   only; the quiz never wires it (it would reveal answers); print never shows it.
   INK-6 spirit: colour is never the only cue. A right box has a SOLID green edge and a tick; a wrong
   box has a DASHED red edge and a cross. The tick / cross is an 18 px badge on the box's OUTER top-right
   corner (screen-cell.js draws it, so it never sits on the digits). Tokens: AA on white (green 5.6:1,
   red 6.5:1); the digits stay black on the pale fills. No motion, so nothing to reduce.
   ONE look for every answer box: the older per-box paints (.box-correct / .box-wrong, .correct / .wrong,
   the inline green and red of the area-model, family and expanded-form checkers) give way to it. */
:root {
    --mq-box-ok: #1B7A43;  --mq-box-ok-bg: #E3F4EA;
    --mq-box-bad: #B3261E; --mq-box-bad-bg: #FDE7E4;
}
html body .mq-scell.mq-scell.mq-scell input.mq-live-correct {
    background-color: var(--mq-box-ok-bg) !important; border-color: var(--mq-box-ok) !important;
    box-shadow: inset 0 0 0 3px var(--mq-box-ok) !important; color: #000 !important;
}
html body .mq-scell.mq-scell.mq-scell input.mq-live-wrong {
    background-color: var(--mq-box-bad-bg) !important; border-color: var(--mq-box-bad) !important;
    box-shadow: none !important; color: #000 !important;
    /* the second cue besides colour and the cross: a DASHED edge (the right box's edge is solid) */
    border-style: dashed !important; outline: 3px dashed var(--mq-box-bad) !important; outline-offset: -3px !important;
}
/* a column stack's digit and regroup boxes carry their own edge (the kit's) */
html body .mq-scell.mq-scell.mq-scell .mq-kit input.mq-digit.mq-live-wrong,
html body .mq-scell.mq-scell.mq-scell .mq-kit input.mq-carry.mq-live-wrong,
html body .mq-scell.mq-scell.mq-scell .mq-kit :is(.ab, .rg)[data-ws-seg] > input.mq-live-wrong.mq-live-wrong {
    border-style: dashed !important; border-color: var(--mq-box-bad) !important; box-shadow: none !important;
    background-color: var(--mq-box-bad-bg) !important; outline: 3px dashed var(--mq-box-bad) !important; outline-offset: -3px !important;
}
html body .mq-scell.mq-scell.mq-scell .mq-kit :is(.ab, .rg)[data-ws-seg] > input.mq-live-correct.mq-live-correct {
    border-style: solid !important; border-color: var(--mq-box-ok) !important; background-color: var(--mq-box-ok-bg) !important;
    box-shadow: inset 0 0 0 3px var(--mq-box-ok) !important;
}
/* a drawn tile or cell box that carries its edge on the wrapper */
html body .mq-scell.mq-scell.mq-scell [data-mq-cell]:has(> input.mq-live-correct),
html body .mq-scell.mq-scell.mq-scell .mq-cellbox:has(> input.mq-live-correct) { border-color: var(--mq-box-ok) !important; background: var(--mq-box-ok-bg) !important; }
html body .mq-scell.mq-scell.mq-scell [data-mq-cell]:has(> input.mq-live-wrong),
html body .mq-scell.mq-scell.mq-scell .mq-cellbox:has(> input.mq-live-wrong) { border-color: var(--mq-box-bad) !important; background: var(--mq-box-bad-bg) !important; border-style: dashed !important; }
/* a tile (count rows, chart gaps) keeps its own white fill and its input is clear: the fill goes on the input */
html body .mq-scell.mq-scell.mq-scell [data-mq-cell] > input.mq-cellslot.mq-live-correct { background-color: var(--mq-box-ok-bg) !important; box-shadow: none !important; }
html body .mq-scell.mq-scell.mq-scell [data-mq-cell] > input.mq-cellslot.mq-live-wrong { background-color: var(--mq-box-bad-bg) !important; box-shadow: none !important; }
/* coordinate boxes sit in the card's answer area, beside the plane, outside the cell */
html body #questionCard .ci-host input.mq-live-correct, html body #questionCard #answerInputArea input.mq-live-correct {
    background-color: var(--mq-box-ok-bg) !important; border-color: var(--mq-box-ok) !important; color: #000 !important;
}
html body #questionCard .ci-host input.mq-live-wrong, html body #questionCard #answerInputArea input.mq-live-wrong {
    background-color: var(--mq-box-bad-bg) !important; border-color: var(--mq-box-bad) !important; color: #000 !important; border-style: dashed !important;
}
/* one cue, not two: no older round badge on a judged digit box, no clear-x on a wrong ordering box */
html body .mq-scell .mq-kit .ab:has(> input.mq-live-correct)::after,
html body .mq-scell .mq-kit .ab:has(> input.mq-live-wrong)::after { content: none !important; display: none !important; }
html body input.mq-live-wrong + button[onclick*="unifiedOrderBoxClear"] { display: none !important; }
/* the tick / cross badge (screen-cell.js keeps it on the box's outer top-right corner) */
.mq-live-badge {
    position: absolute; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
    background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
    border: 2px solid var(--mq-box-ok); pointer-events: none; margin: 0; padding: 0;
}
.mq-live-badge[data-kind="ok"] {
    border-color: var(--mq-box-ok);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4.2 4.2L16.5 5.5' fill='none' stroke='%231B7A43' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mq-live-badge[data-kind="bad"] {
    border-color: var(--mq-box-bad);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 4.5l11 11M15.5 4.5l-11 11' fill='none' stroke='%23B3261E' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media print { .mq-live-badge { display: none !important; } }

/* Wave 1 lane C: the ten-column chart on a phone keeps rows of ten at SP-10's 34.5 x 44 px or more:
   its writing slots and inputs fill their square and never widen it (the generic 44 px floor on a
   [data-mq-cell] would push each slot into its neighbour), and on a phone the chart takes the card's
   full width (it spans the grid's two 12 px gutters). Additive. */
html body .mq-scell .k2-chart [data-mq-cell] { min-width: 0 !important; min-height: 0 !important; }
html body .mq-scell .k2-chart [data-mq-cell] > input.mq-cellslot { width: 100% !important; min-width: 0 !important; min-height: 0 !important; box-sizing: border-box; }
@media (max-width: 480px) {
    #gameView #questionCard.mq-card #questionPaper > #visualAid:has(.k2-chart) { grid-column: 1 / -1 !important; }
    #gameView #questionCard.mq-card:has(.k2-chart) { padding-left: 6px; padding-right: 6px; }
    #gameView #questionCard.mq-card #questionPaper:has(.k2-chart) { padding-top: 0 !important; padding-bottom: 0 !important; grid-template-rows: auto 0px auto auto auto 0px !important; }
    .mq-scell .k2-chartwindow, .mq-scell .k2-chartwindow .k2-chart { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Wave 1 lane C: an online-worksheet card holding a ten-column number chart takes the whole grid row
   (worksheet.js marks it mq-span-row / data-mq-span, which layoutWorksheetGrid keeps), so its squares
   keep the host's digit size. Additive. */
.online-edition .problems-grid.mq-wsgrid.mq-wsfit > .problem-card.mq-wscard[data-mq-span="1"]:has(.k2-chart) { grid-column: 1 / -1; }
/* The practice card and the quiz are wider than a worksheet card but their squares are no wider: the
   chart's digits stay clear of the square edges ("100" keeps >= 4 px each side). Additive. */
html body #questionCard .mq-scell .k2-chart td, html body .qt-question-card .mq-scell .k2-chart td { font-size: min(calc(var(--mq-k2) * 6.4), 4vw) !important; }

/* Wave 1 lane C (SP table: screen digits 40 px on the practice card, 29 px on the online worksheet, TY-10
   content never shrinks): on a phone the ten-column chart keeps rows of ten at those digit sizes. Its squares
   widen to hold the widest number (digits x 0.58 em + 10 px) and the chart scrolls sideways INSIDE its own
   cell, never the page (as the number line does). Squares stay >= 44 px tall. Additive.
   Round 5 (critic round 4 defect F, SP-12a 2026-10-02): the same sizing holds on EVERY host - the squares
   are sized from the digits (48 px on the card and quiz above a phone, 40 px on a phone, 29 px on the
   online worksheet) and the screen-fit pass never shrinks a ten-column chart. The card / quiz paper widens
   to 960 px for this chart (below) so ten squares of 48 px digits fit at 1280; where they still do not fit
   (a tablet) the chart swipes inside its cell as on a phone. */
.mq-scell .k2-chartwindow:has(> .k2-chart-ten) { overflow-x: auto; scrollbar-width: auto; scrollbar-color: #000 #ddd; padding-bottom: 4px; width: 100%; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.mq-scell .k2-twin:has(.k2-chart-ten), .mq-scell .ws-cell:has(.k2-chart-ten) { min-width: 0; max-width: 100%; }
/* a count-by row swipes inside its own cell: the cell may not grow to the row's width (SP-11a extended 2026-10-02) */
.mq-scell .k2-twin:has([data-mq-swiperow]), .mq-scell .ws-cell:has([data-mq-swiperow]), .mq-scell .k2-twin:has([data-mq-swiperow]) > * { min-width: 0; max-width: 100%; }
.mq-scell [data-mq-swiperow] { width: 100%; }
html body .mq-scell .k2-chart.k2-chart-ten {
    --mq-chfs: 29px; --mq-chw: max(44px, calc(var(--mq-chd, 3) * 0.58 * var(--mq-chfs) + max(10px, min(0.5 * var(--mq-chfs), 14px) * (3 - var(--mq-chd, 3)))));
    width: calc(10 * var(--mq-chw)) !important; max-width: none !important; table-layout: fixed;
}
html body #questionCard .mq-scell .k2-chart.k2-chart-ten, html body .qt-question-card .mq-scell .k2-chart.k2-chart-ten { --mq-chfs: 48px; }
html body #questionCard .mq-scell .k2-chart.k2-chart-ten td, html body .qt-question-card .mq-scell .k2-chart.k2-chart-ten td, html body .mq-scell .k2-chart.k2-chart-ten td { width: var(--mq-chw) !important; font-size: var(--mq-chfs) !important; height: max(56px, calc(var(--mq-chfs) * 1.4)) !important; }
@media (max-width: 480px) {
    .mq-scell .k2-chartwindow:has(> .k2-chart-ten) { overflow-x: scroll; }
    html body #questionCard .mq-scell .k2-chart.k2-chart-ten, html body .qt-question-card .mq-scell .k2-chart.k2-chart-ten { --mq-chfs: 40px; }
}
/* SP-12a (2026-10-02, ten-column charts only): the practice card's and the quiz's paper widen past SP-12's
   720 px to min(96vw, 960 px), and the chart takes the paper's full width (it spans the grid's gutters). */
#gameView #questionCard.mq-card #questionPaper.mq-qpaper:has(.k2-chart-ten) { width: min(100%, 96vw, 960px); }
#gameView #questionCard.mq-card #questionPaper > #visualAid:has(.k2-chart-ten) { grid-column: 1 / -1 !important; }
/* the quiz draws its boxed .ws-cell (12 px pad + border) inside the paper, so its paper is that much wider */
.qt-question-card .mq-qtpaper:has(.k2-chart-ten) { width: min(100%, 96vw, 990px); }

/* Swipe cue of the ten-column chart (owner ruling 2026-10-02): a big arrow and words under the chart,
   pinned to the visible edge of the cell while it scrolls, hidden at the end or when the chart fits.
   Screen only; never over a square. */
.k2-swipe-cue { display: none; }
.mq-scell .k2-chartwindow:not([data-mq-end]) .k2-swipe-cue {
    display: block; position: sticky; left: 0; width: 100%; box-sizing: border-box; text-align: center;
    padding: 6px 8px; margin-top: 4px; font-size: 20px; line-height: 1.2; color: #000; background: #fff;
    border-top: 2px solid #000; font-family: "Andika", sans-serif;
}
/* the same cue under a count-by row that swipes on a phone (SP-11a extended 2026-10-02) */
.mq-scell [data-mq-swiperow]:not([data-mq-end]) .k2-swipe-cue {
    display: block; position: sticky; left: 0; width: 100%; box-sizing: border-box; text-align: center;
    padding: 6px 8px; margin-top: 4px; font-size: 20px; line-height: 1.2; color: #000; background: #fff;
    border-top: 2px solid #000; font-family: "Andika", sans-serif;
}
.mq-scell [data-mq-swiperow][data-mq-end] .k2-swipe-cue { display: none; }
.mq-scell .k2-swipe-cue i { font-style: normal; font-size: 34px; vertical-align: middle; }
.mq-scell .k2-chartwindow[data-mq-end] .k2-swipe-cue { display: none; }
@media print { .k2-swipe-cue { display: none !important; } }
/* count-by rows (critic C2 r5): the row snaps to a column start, so no number is cut at its left edge; scrolled away from the
   start, a "back" cue shows under the row and the line-2/3 in-arrows beside it hide (they would claim a start the row does not show) */
.mq-scell [data-mq-swiperow] { scroll-snap-type: x mandatory; }
.mq-scell [data-mq-swiperow] .k2-countrow-line [data-mq-wrapped] > * { scroll-snap-align: start; }
.k2-swipe-back { display: none; }
.mq-scell [data-mq-swiperow][data-mq-scrolled] .k2-swipe-back {
    display: block; position: sticky; left: 0; width: 100%; box-sizing: border-box; text-align: center;
    padding: 6px 8px; margin-top: 4px; font-size: 20px; line-height: 1.2; color: #000; background: #fff;
    border-top: 2px solid #000; font-family: "Andika", sans-serif;
}
.mq-scell .k2-swipe-back i { font-style: normal; font-size: 34px; vertical-align: middle; }
.mq-scell .k2-countrow-frame:has(> [data-mq-swiperow][data-mq-scrolled]) .k2-steptab-in svg { visibility: hidden; }
@media print { .k2-swipe-back { display: none !important; } }
/* count-by rows on a phone (critic C2 r6): when the row swipes, the step tab sits ONCE above line 1 (the side column goes), so the
   window is the cell's full width; and both cues share ONE strip under the row (back on the left, forward on the right) */
.mq-scell .k2-countrow-frame[data-mq-swipes] { flex-direction: column; }
.mq-scell .k2-countrow-frame[data-mq-swipes] [data-mq-tabfor]:not([data-mq-tabfor="0"]) { display: none !important; }
.mq-scell .k2-countrow-frame[data-mq-swipes] [data-mq-tabfor="0"] { height: auto !important; margin: 0 0 4px 0 !important; }
.mq-scell [data-mq-swiperow] .k2-swipe-cues {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 10px;
    position: sticky; left: 0; width: 100%; box-sizing: border-box; padding: 3px 4px; margin-top: 4px;
    border-top: 2px solid #000; background: #fff; color: #000; font-family: "Andika", sans-serif; font-size: 17px; line-height: 24px;
}
.mq-scell [data-mq-swiperow][data-mq-end]:not([data-mq-scrolled]) .k2-swipe-cues { display: none; }
html body .mq-scell [data-mq-swiperow] .k2-swipe-cues > .k2-swipe-cue,
html body .mq-scell [data-mq-swiperow] .k2-swipe-cues > .k2-swipe-back {
    position: static; width: auto; padding: 0; margin: 0; border: 0; font-size: 17px; line-height: 24px; white-space: nowrap;
}
html body .mq-scell [data-mq-swiperow] .k2-swipe-cues > .k2-swipe-back { margin-right: auto; }
html body .mq-scell [data-mq-swiperow] .k2-swipe-cues i { font-size: 24px; line-height: 20px; }
html body .mq-scell [data-mq-swiperow]:not([data-mq-scrolled]) .k2-swipe-cues > .k2-swipe-back { display: none; }
html body .mq-scell [data-mq-swiperow][data-mq-end] .k2-swipe-cues > .k2-swipe-cue { display: none; }
html body .mq-scell [data-mq-swiperow]:not([data-mq-end]) .k2-swipe-cues > .k2-swipe-cue { display: inline-block; }
html body .mq-scell [data-mq-swiperow][data-mq-scrolled] .k2-swipe-cues > .k2-swipe-back { display: inline-block; }

/* ---- WAVE 1 fix (owner 2026-10-02): the four Start buttons live INSIDE the Choose Mode box, in the
   place of the mode cards, each in its original mode-card colour (ui-components.css .mode-card:nth-child). */
.mode-cards > .student-start-wrap { grid-column: 1 / -1; }
.student-start-wrap #studentStartSkill { text-align: center; margin: 0 0 10px; font-size: 1.15rem; font-weight: 900; }
.mode-cards .student-start-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 0; }
.mode-cards .student-start-btn { max-width: none; min-height: 72px; color: var(--mq-ink, #1a1a1a); border-width: 2px; border-style: solid; }
.mode-cards .student-start-btn[data-mode="practice"] { background: linear-gradient(180deg, #FFFFFF 0%, #B5D8FF 100%); border-color: #5A9DEE; box-shadow: 0 4px 0 0 #5A9DEE; }
.mode-cards .student-start-btn[data-mode="boss"] { background: linear-gradient(180deg, #FFFFFF 0%, var(--mq-op-add) 100%); border-color: var(--mq-op-add-d); box-shadow: 0 4px 0 0 var(--mq-op-add-d); }
.mode-cards .student-start-btn[data-mode="race"] { background: linear-gradient(180deg, #FFFFFF 0%, var(--mq-op-sub) 100%); border-color: var(--mq-op-sub-d); box-shadow: 0 4px 0 0 var(--mq-op-sub-d); }
.mode-cards .student-start-btn[data-mode="worksheet"] { background: linear-gradient(180deg, #FFFFFF 0%, var(--mq-op-div) 100%); border-color: var(--mq-op-div-d); box-shadow: 0 4px 0 0 var(--mq-op-div-d); }
.mode-cards .student-start-btn:active { transform: translateY(3px); box-shadow: none; }
@media (max-width: 480px) { .mode-cards .student-start-btn { min-height: 64px; font-size: 1.05rem; padding: 10px 8px; } }

/* ---- WAVE 1 fix 2 (owner 2026-10-02): the Start buttons take the SHAPE of the penguin card / the
   original mode cards: tall rounded tiles, big icon over the name, one row beside the penguin
   (2 x 2 on a phone). Colours stay the per-mode rules above. */
.choose-mode-row .mode-cards:has(.student-start-wrap) { align-content: stretch; }
.mode-cards > .student-start-wrap { display: flex; align-self: stretch; }
.mode-cards .student-start-buttons { flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.mode-cards .student-start-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    min-height: 160px; height: 100%; padding: 18px 14px 22px; border-radius: var(--mq-r-xl, 22px);
    border-width: 2px; text-align: center; font-size: 1.15rem; line-height: 1.2;
    transition: transform 80ms ease, box-shadow 80ms ease, border-color 0.2s ease, background 0.2s ease;
}
.mode-cards .student-start-btn .mode-icon { font-size: 2.6rem; margin-bottom: 10px; }
.mode-cards .student-start-btn .mode-name { font-weight: 900; font-size: 1.15rem; }
.mode-cards .student-start-btn:hover { transform: translateY(-3px); }
.mode-cards .student-start-btn[data-mode="practice"]:hover { border-color: #3B82CC; box-shadow: 0 7px 0 0 #3B82CC; background: linear-gradient(180deg, #B5D8FF 0%, #7CB6F5 100%); }
.mode-cards .student-start-btn[data-mode="boss"]:hover { border-color: #D86680; box-shadow: 0 7px 0 0 #D86680; background: linear-gradient(180deg, var(--mq-op-add) 0%, var(--mq-op-add-d) 100%); }
.mode-cards .student-start-btn[data-mode="race"]:hover { border-color: #D88A4A; box-shadow: 0 7px 0 0 #D88A4A; background: linear-gradient(180deg, var(--mq-op-sub) 0%, var(--mq-op-sub-d) 100%); }
.mode-cards .student-start-btn[data-mode="worksheet"]:hover { border-color: #4DAA7C; box-shadow: 0 7px 0 0 #4DAA7C; background: linear-gradient(180deg, var(--mq-op-div) 0%, var(--mq-op-div-d) 100%); }
.mode-cards .student-start-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 rgba(0,0,0,0.15); }
@media (max-width: 780px) {
    .mode-cards .student-start-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .mode-cards .student-start-btn { min-height: 140px; height: auto; padding: 16px 10px 18px; }
}

/* ---- WAVE 1 fix 3 (critic 2026-10-02): dark theme keeps dark ink on the pastel tiles and the penguin
   bubble; a visible focus ring; icons line up per row on a phone; the skill line wraps evenly. */
.dark .mode-cards .student-start-btn, .dark-theme .mode-cards .student-start-btn { color: #2B2840; }
.dark #mqHomeMascot .mq-mascot-bubble, .dark-theme #mqHomeMascot .mq-mascot-bubble { background: #fff; color: #2B2840; }
.mode-cards .student-start-btn:focus-visible { outline: 3px solid #5E3FCC; outline-offset: 3px; }
#studentStartSkill { text-wrap: balance; }
@media (max-width: 780px) {
    .mode-cards .student-start-btn { justify-content: flex-start; }
    .mode-cards .student-start-btn .mode-name { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
}

/* ---- WAVE 1 fix 4 (2026-10-02): MAP K-2 / 3-5 / K-5 buttons readable in dark theme (>= 4.5:1).
   Light theme, position and size unchanged; only text and fill change under .dark / .dark-theme. */
.dark .map-launch-btn, .dark-theme .map-launch-btn { background: linear-gradient(180deg, #2A2540 0%, #221E36 100%); }
.dark .map-launch-k2, .dark-theme .map-launch-k2 { color: #5EEAD4; }
.dark .map-launch-35, .dark-theme .map-launch-35 { color: #FDBA74; }
.dark .map-launch-mixed, .dark-theme .map-launch-mixed { color: #C4B5FD; }

/* ---- Start cards: dark-theme focus ring reaches 3:1 against the dark section (critic R2-D1). */
.dark .mode-cards .student-start-btn:focus-visible,
.dark-theme .mode-cards .student-start-btn:focus-visible { outline-color: #B5A5F4; }

/* The place-value disk mat on a phone (2026-10-03): it scales with its cell down to the 8 pt label
   floor (screen-cell.js kitCellTwin), then swipes inside its own window with the SP-11a cue. */
.mq-diskwin { overflow-x: auto; overflow-y: hidden; width: 100%; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: auto; scrollbar-color: #000 #ddd; }
.mq-kittwin[data-mq-kind="disks"], .mq-kittwin[data-mq-kind="disks"] .pv-cell { min-width: 0; max-width: 100%; }
.mq-diskwin:not([data-mq-end]) .k2-swipe-cue {
    display: block; position: sticky; left: 0; width: 100%; box-sizing: border-box; text-align: center;
    padding: 6px 8px; margin-top: 4px; font-size: 20px; line-height: 1.2; color: #000; background: #fff;
    border-top: 2px solid #000; font-family: "Andika", sans-serif;
}
.mq-diskwin .k2-swipe-cue i { font-style: normal; font-size: 34px; vertical-align: middle; }
.mq-diskwin[data-mq-end] .k2-swipe-cue { display: none; }
@media print { .mq-diskwin .k2-swipe-cue { display: none !important; } }
/* count-by rows (critic C2 r6): a box's tile never wraps. On the online worksheet ui-components.css wraps every inline flex
   inside .problem-card (specificity 0,7,0); the worksheet's own nowrap rule matches only while the tile's style attribute reads
   "display:flex", which the active-box highlight rewrites, and the 44 px input then sat 2 px low in its tile. This beats both. */
html body .problem-card [data-mq-swiperow] .k2-tile.k2-tile.k2-tile.k2-tile.k2-tile.k2-tile.k2-tile { flex-wrap: nowrap !important; }
/* count-by rows (critic C2 r7): when both cues show, the back cue says only "Back", so the strip stays one line at 390 */
html body .mq-scell [data-mq-swiperow][data-mq-scrolled]:not([data-mq-end]) .k2-swipe-back .k2-cue-long { display: none; }
html body .mq-scell [data-mq-swiperow][data-mq-scrolled]:not([data-mq-end]) .k2-swipe-cues > .k2-swipe-cue > b:last-child { display: none; }

/* Touch numerals floor (WORKSHEET_DESIGN_STANDARD SF-34, 2026-10-03): a grid cell holding touch
   numerals draws its digits at 40 px, never the 29 px grid size. Additive. */
/* (one rule with the touch-dots floor at the end of this file) */
/* SL-3 (2026-10-03): an inline-blanks input adopted into a kit box (unit_form's "__ thousands") drew its own
   ib-cell border inside the box's border: two boxes. The box is the slot; the input fills it, borderless.
   The per-box live marks stay on the box (.mq-cellbox:has(> input.mq-live-*)). */
html body .mq-scell .mq-cellbox > input.ib-cell { width: 100% !important; height: 100% !important; min-width: 0 !important; border: 0 !important; margin: 0 !important; }
/* ...and the active-box highlight (yellow + ring) moves from that input to its box: on the input it was clipped by the
   box's overflow to a thick top edge. */
html body .mq-scell .mq-cellbox > input.ib-cell { outline: none !important; box-shadow: none !important; animation: none !important; display: block !important; vertical-align: top !important; }
html body .mq-scell .mq-cellbox:has(> input.ib-cell.mq-active-box),
html body .mq-scell .mq-cellbox:has(> input.ib-cell:focus) {
    background-color: #fff3a0 !important; box-shadow: 0 0 0 3px #f2c200 !important; overflow: visible;
    animation: mq-active-pulse 1.3s ease-in-out infinite !important;
}
html body .mq-scell .mq-cellbox:has(> input.ib-cell.mq-active-box) > input.ib-cell,
html body .mq-scell .mq-cellbox:has(> input.ib-cell:focus) > input.ib-cell { background: transparent !important; }
/* ---- Wave 1 / A3 (owner 2026-10-03): the WRONG DIGITS blink red, 3 cycles of 1.2 s, then hold steady red.
   Practice card and online worksheet only; the A2 dashed edge and cross stay (colour is never the only cue).
   Reduced motion: no blink, the steady red only. Additive: older saved HTML never carries these classes. */
@keyframes mqWdBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
html body input.mq-live-wrong.mq-wrong-digit.mq-wrong-digit.mq-wrong-digit {
    color: var(--mq-box-bad) !important; -webkit-text-fill-color: var(--mq-box-bad);
    /* the DIGIT blinks (its fill colour), never the box: the dashed edge holds still (critic r1) */
    animation: mqWdBlinkInk 1.2s ease-in-out 3 !important;   /* beats .mq-scell * { animation: none } */
}
/* a red box the pupil is in shows its text cursor (a digit slot's caret is otherwise hidden) */
html body .mq-scell.mq-scell.mq-scell input.mq-live-wrong.mq-live-wrong:focus,
html body input.mq-live-wrong.mq-live-wrong.mq-live-wrong.mq-live-wrong:focus { caret-color: #000 !important; }
@keyframes mqWdBlinkInk { 0%, 100% { -webkit-text-fill-color: var(--mq-box-bad); } 50% { -webkit-text-fill-color: rgba(179, 38, 30, 0.2); } }
/* a kept wrong entry is selected after a wrong try: no browser blue under the red digit (1.26:1) */
html body input.mq-live-wrong::selection { background: rgba(0, 0, 0, 0.12); color: var(--mq-box-bad); -webkit-text-fill-color: var(--mq-box-bad); }
html body input.mq-live-wrong.mq-wd-mirrored::selection { background: rgba(0, 0, 0, 0.12); color: transparent; -webkit-text-fill-color: transparent; }
html body input.mq-live-wrong.mq-wd-empty.mq-wd-empty.mq-wd-empty { outline-width: 4px !important; }
html body input.mq-live-wrong.mq-wd-mirrored.mq-wd-mirrored.mq-wd-mirrored {
    color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html body .mq-wd-mirror.mq-wd-mirror {
    position: absolute; z-index: 4; display: flex; align-items: center; box-sizing: border-box; margin: 0;
    pointer-events: none; color: #000 !important; line-height: 1; white-space: pre; border: 0; background: none;
}
html body .mq-wd-mirror.mq-wd-mirror .mq-wd { display: inline-block; color: #000 !important; }
html body .mq-wd-mirror.mq-wd-mirror .mq-wd.mq-wd-bad {
    color: var(--mq-box-bad) !important; animation: mqWdBlink 1.2s ease-in-out 3 !important;
    /* colour is never the only cue: a 3 px underline that outlasts the blink and reduced motion */
    text-decoration: underline 3px var(--mq-box-bad) !important; text-underline-offset: 4px; text-decoration-skip-ink: none;
}
html body .mq-wd-mirror.mq-wd-mirror .mq-wd.mq-wd-sep.mq-wd-miss { min-width: 0.3em; }
html body .mq-wd-mirror.mq-wd-mirror .mq-wd.mq-wd-miss {
    min-width: 0.62em; height: 1.05em; margin: 0 1px; box-sizing: border-box;
    border: 2px dashed var(--mq-box-bad); border-radius: 3px; animation: mqWdBlink 1.2s ease-in-out 3 !important;
}
@media (prefers-reduced-motion: reduce) {
    html body input.mq-live-wrong.mq-wrong-digit.mq-wrong-digit.mq-wrong-digit,
    html body .mq-wd-mirror.mq-wd-mirror .mq-wd.mq-wd-bad, html body .mq-wd-mirror.mq-wd-mirror .mq-wd.mq-wd-miss { animation: none !important; }
}
@media print { .mq-wd-mirror { display: none !important; } }

/* ---- 2026-10-04 (owner): EVERY next answer box pulses yellow, and answer boxes carry no "Type …" text.
   js/modules/active-box.js puts .mq-active-box on the next answer input on the practice card, the
   online worksheet's current problem and the quiz, whatever widget drew it.
   Why the earlier pulse never moved: it animated background-color and box-shadow, and !important
   declarations (its own, and the .mq-mono scope's box-shadow/filter: none !important) always beat an
   animation. Here the animation drives two registered custom properties, which nothing pins, and the
   !important fill and glow READ them — so they pulse. ADDITIVE; screen only. */
@property --mq-next-ring { syntax: '<length>'; inherits: false; initial-value: 3px; }
@property --mq-next-fill { syntax: '<color>'; inherits: false; initial-value: #fff3a0; }
@keyframes mq-next-glow {
    0%, 100% { --mq-next-ring: 3px; --mq-next-fill: #fff3a0; }
    50%      { --mq-next-ring: 6px; --mq-next-fill: #ffe14d; }
}
html body :is(#gameView #questionCard #questionPaper, #worksheetView, #quizTakeView, body > .zoom-overlay .zoom-content) .mq-active-box.mq-active-box.mq-active-box {
    background-color: var(--mq-next-fill) !important;
    box-shadow: 0 0 0 3px #f2c200, 0 0 0 var(--mq-next-ring) rgba(242, 194, 0, 0.45) !important;
    animation: mq-next-glow 1.2s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
    html body :is(#gameView #questionCard #questionPaper, #worksheetView, #quizTakeView, body > .zoom-overlay .zoom-content) .mq-active-box.mq-active-box.mq-active-box {
        animation: none !important; --mq-next-ring: 5px; --mq-next-fill: #fff3a0;
    }
}
html body :is(#questionCard, #worksheetView .problem-card, .qt-question-card) :is(input, textarea)::placeholder { color: transparent !important; }

/* critic D4 (2026-10-04): the next-box glow is drawn INSIDE the box, so a neighbouring box or a row
   edge can never cover or clip it; and a box still holding a wrong digit keeps its red (no yellow fill). */
html body :is(#gameView #questionCard #questionPaper, #worksheetView, #quizTakeView, body > .zoom-overlay .zoom-content) .mq-active-box.mq-active-box.mq-active-box {
    box-shadow: inset 0 0 0 3px #f2c200, inset 0 0 0 var(--mq-next-ring) rgba(242, 194, 0, 0.45) !important;
}
html body :is(#gameView #questionCard #questionPaper, #worksheetView, #quizTakeView, body > .zoom-overlay .zoom-content) .mq-active-box.mq-active-box.mq-active-box.mq-live-wrong {
    background-color: var(--mq-box-bad-bg, #fde8e7) !important;
}

/* critic R4-3 (2026-10-04): a box judged wrong or missing keeps its red mark even while it is the next
   box (the caret sits in it): the yellow fill, ring and pulse give way to the A2/A3 marks. */
html body :is(#gameView #questionCard #questionPaper, #worksheetView, #quizTakeView, body > .zoom-overlay .zoom-content) .mq-active-box.mq-active-box.mq-active-box:is(.mq-live-wrong, .mq-wd-empty, .mq-wrong-digit) {
    animation: none !important;
    box-shadow: none !important;
    background-color: var(--mq-box-bad-bg, #FDE7E4) !important;
    border-color: var(--mq-box-bad, #B3261E) !important;
}

/* Touch dots floor (design/SUPPORTS.md S1.6, owner 2026-10-04: "worksheet mode touchpoints might be too small"): a grid
   cell (online worksheet, quiz) whose digits carry touch dots draws them at 40 px, never the 29 px grid
   size, so each dot is big enough to see and touch. Additive. */
.mq-scell.mq-grid-cell:has(.ws-td), .mq-scell .mq-grid-cell:has(.ws-td),
.mq-scell.mq-grid-cell[data-mq-touch-floor], [data-mq-touch-floor] .mq-scell.mq-grid-cell { --mq-digit: 40px; }   /* touch floor: also set from the start when the item's ladder has a touch rung, so no cell grows mid-ladder */

/* Touch numerals are tappable on screen (SUPPORTS S1.8): each number is a target of at least 44 x 44 px,
   centred on it; the running count sits under the cell, outside the B&W cell. Additive. */
.ws-tn.mq-tn-hit { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ws-tn.mq-tn-hit::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.ws-tn.mq-tn-hit:focus-visible { outline: 3px solid var(--mq-focus, #1a73e8); outline-offset: 2px; border-radius: 4px; }
.mq-tn-count { font-family: Andika, sans-serif; font-size: 16px; color: #595959; margin: 6px 0 0; display: flex; gap: 12px; align-items: center; justify-content: center; }
.mq-tn-count .mq-tn-reset { min-height: 44px; padding: 0 14px; font: inherit; border: 1px solid #949494; border-radius: 8px; background: #fff; color: #222; cursor: pointer; }
/* critic r4 (2026-10-09): Start again never wraps; a ladder rung's count shares the ladder message's row on the
   practice card and the quiz (R4-5), so only that one row appears after a wrong answer. Additive. */
.mq-tn-count .mq-tn-reset { white-space: nowrap; flex: none; }
.mq-tn-count .mq-tn-said { min-width: 0; overflow-wrap: anywhere; }
.mq-tn-count.mq-tn-inrow { display: inline-flex; vertical-align: middle; margin: 0 0 0 12px; gap: 10px; font-size: 16px; font-weight: 400; }
.mq-tn-count.mq-tn-inrow .mq-tn-said:empty { display: none; }

/* ---- Steps-box lane (D3): an open hint sits in flow between the bar and the paper, pushing
   the cell down, so it never covers the story it hints about (RUBRIC C1: chrome never covers). */
.problem-card.mq-wscard > .hint-popup.active {
    position: relative; top: auto; bottom: auto; left: auto; right: auto;
    margin: 0 0 8px; box-shadow: none;
}

/* Count rows, Answer spaces: Lines (critic countby-arrows r1 D1, 2026-10-09): the input stays INSIDE its drawn line, never
   widened to a touch width past it, so the next-box yellow and the right/wrong tints can never cover a jump arrow. The line
   itself is wide enough to tap (the screen twin wraps Lines 6 + 6, count-row.js). Additive. */
html body .mq-scell .k2-shape-line { overflow: hidden; }
html body .mq-scell .k2-shape-line > .k2-line-slot[data-mq-cell] { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
html body .mq-scell .k2-shape-line > .k2-line-slot[data-mq-cell] > input.mq-cellslot { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

/* ---- Bracket hug (owner 2026-10-09; critic div-facts-forms R4 nit c, "7)  28", "2)  8"): the
   dividend's column is as wide as its digits, as on paper, so the arc and the vinculum hug them.
   The quotient box no longer sizes that column (`contain: inline-size` keeps it out of the grid's
   track sizing); it spans the dividend's width or its own height (a square, >= 48 px), whichever
   is wider, and sits centred over the bar, overhanging both ends equally when the dividend is one narrow digit.
   Its width still follows the dividend, never the quotient (SL-2). Additive: overrides the 64 px
   floor of `.mq-ldiv-q .mq-slot` above. */
.mq-scell .mq-ldiv > .mq-ldiv-q { contain: inline-size; justify-content: center; }
.mq-scell .mq-ldiv > .mq-ldiv-q .mq-slot { min-width: max(100%, 48px, var(--ws-hw, 48px)) !important; }
/* the remainder bracket (screen-cell.js ringCellHTML, `.mq-rembrk`): its quotient box keeps its own
   width over the dividend's column (that column no longer stretches to the box), never shrinking
   below the touch target (critic ldiv-hug R1 D-1). */
.mq-scell .mq-rembrk .mq-cellbox { flex: none; }