/* Maths layouts. Shared fonts, world, art and style B bar live in shared/css. */

/* The numbers in the sums are the board's (model-board.css): Figtree, whose zero is plain. Atkinson Hyperlegible slashes
   its zero so it isn't taken for an O, which on a Chromebook's screen read as a dark Ø on the cards (23 October). This
   face has the digits and + = × only, so words in the same place keep their own font; the minus stays Atkinson's, as
   Figtree's is short enough to pass for a hyphen. It is bold (the only weight here), so it goes on what is bold: the
   cards, the grid, the sums and their answers, the keypad's digits and the level and progress labels. Sentences in
   plain type keep Atkinson. */
@font-face {
    font-family: 'Maths Numbers';
    src: url('../../shared/fonts/figtree/figtree-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+002B, U+003D, U+00D7;
}
.maths-app :is(.drag-token, .drag-token-ghost, .maths-guide-ghost, .grid-square-value, .column-sum, .solve-input, .level-pill,
    .level-progress-pill, .level-button, .setup-success-copy, .completion-progress-label, .workspace-feedback .feedback, .maths-guide-caption) {
    font-family: 'Maths Numbers', var(--body, 'Atkinson Hyperlegible', system-ui, sans-serif);
}

body.maths-app {
    --maths-reading: var(--body);
    padding-bottom: 0;
    --ground: 48px;
    --mp-ink: var(--ink);
    --mp-muted: var(--ink-2);
    --mp-primary: var(--grape-deep);
    --mp-primary-hover: var(--grape-deep);
    --mp-paper-outline: var(--ink);
    --mp-paper-shadow: transparent;
    --mp-paper-bg: var(--page);
    --mp-paper-warm: var(--wash);
    --mp-accent-yellow: var(--gold-tint);
    --mp-font-display: var(--display);
    --mp-cutout-shadow: none;
    /* The mock's clouds for the pupils' pages; the teacher's pages and phones set their own below. */
    --cloud-a: left 700px top 56px;
    --cloud-b: left 980px top 104px;
    font-family: var(--body);
    letter-spacing: 0;
}
.maths-app[data-maths-view="teacher-dashboard"],
.maths-app[data-maths-view="pupil-progress"] { --ground: 124px; }
@media (min-width: 801px) {
    body.maths-app:is([data-maths-view="teacher-dashboard"], [data-maths-view="pupil-progress"]) { --cloud-a: left 912px top 14px; --cloud-b: left 780px top 60px; }
}
.maths-app.cla-pupil[data-world="sky"] { padding-bottom: 0; }
#app { min-height: 100dvh; }
.maths-app :is(button, a, summary, select, [tabindex]):focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
/* Nothing eases on a Maths page: a control sinks onto its lift the moment it is pressed and is back the moment it is let go
   (the standard springs it back; here the sums, the measured grid and the checks stay still while they are read). */
.maths-app *, .maths-app *::before, .maths-app *::after { transition: none !important; }
.maths-app :is(h2, h3, h4) { font-family: var(--display); }
.topic-addition { --topic: var(--lime); --topic-tint: var(--lime-tint); --topic-edge: var(--lime-deep); }
.topic-subtraction { --topic: var(--cla-aqua); --topic-tint: var(--cla-aqua-tint); --topic-edge: var(--cla-aqua-deep); }
.topic-short-multiplication { --topic: var(--sky); --topic-tint: var(--sky-tint); --topic-edge: var(--sky-deep); }
.topic-long-multiplication { --topic: var(--cla-periwinkle); --topic-tint: var(--cla-periwinkle-tint); --topic-edge: var(--cla-periwinkle-deep); }
.medal-art, .topic-badge { image-rendering: pixelated; }
.maths-app .app-header { width: auto; max-width: none; margin: 0; padding: 16px 32px 0; border: 0; background: transparent; box-shadow: none; }
.app-header .header-primary { align-items: center; }
.app-header .header-left { display: flex; gap: 24px; align-items: center; }
.maths-logo { width: 154px; height: 60px; object-fit: contain; flex: none; }
.app-header .header-title { display: flex; gap: 22px; align-items: center; margin: 0; }
.app-header h1.maths-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0; line-height: 1; }
.maths-title .title-art { display: block; width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); max-width: none; }
.header-class-name { color: var(--ink-2); font: 600 28px/1 var(--display); white-space: nowrap; }
.maths-app[data-world="sky"] .header-class-name { color: var(--ink); }
/* The board's header is the mock's 72 px: the title keeps its place and overhangs the space below. */
.app-header.is-hub.is-teacher { margin-bottom: -4px; }
.app-header.is-teacher :is(.header-primary, .header-left) { width: 100%; }
.app-header.is-teacher .header-left { justify-content: space-between; }
.app-header.is-teacher .maths-logo { order: 2; }
.app-header.is-teacher .header-controls { display: none; }
.app-header.is-hub:not(.is-teacher) .header-primary { position: relative; display: block; }
.app-header.is-hub:not(.is-teacher) .header-left { display: block; }
.app-header.is-hub:not(.is-teacher) .header-controls { display: flex; position: absolute; right: 0; top: 4px; }
.app-header.is-hub:not(.is-teacher) .maths-title .title-art { width: calc(var(--w) * 4px); height: calc(var(--h) * 4px); }
.app-header :is(.header-controls, .header-actions) { width: auto; }
.app-header.is-hub:not(.is-teacher) .header-actions { display: flex; }
/* Home and Topics are ordinary buttons (controls.css). */
.app-header .home-link { width: auto; }
.maths-board { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 32px; padding: 24px 32px 140px; }
.maths-board h2 { font: 700 28px/1.1 var(--display); }
/* The board's tiles, as in the mock: the method's name at 28 px, "Model it" at 20 px, and its example sum. */
.model-topic-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; }
/* Each tile is its own container: beside its sum the name needs its longest word's width (176 px at 28 px, 138 px at
   22 px), and where the tile is narrower the sum drops to the name's second row beside "Model it" (see below). */
.model-topic { container-type: inline-size; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 196px; margin-bottom: 8px; padding: 24px; text-align: left; color: var(--ink); background: var(--topic); border: 3px solid var(--topic-edge); border-radius: 44px; box-shadow: 0 8px 0 var(--topic-edge); --ring-lift: 8px; }
.method-copy { display: grid; gap: 8px; }
.model-topic strong { display: block; font: 700 28px/1.1 var(--display); }
.method-copy > span { display: flex; align-items: center; gap: 6px; font: 600 20px/1.2 var(--display); }
.method-copy svg { width: 12px; height: 12px; }
.topic-operation { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 8px; border-radius: 7px; background: var(--topic); font: 700 26px/1 var(--display); vertical-align: middle; }
.model-topic:disabled, .pupil-topic:disabled { opacity: 1; color: var(--ink-2); background: var(--topic-tint); border-style: dashed; box-shadow: none; --ring-lift: 0px; cursor: default; }
.method-example { display: grid; flex: none; padding: 12px 12px 8px; border-radius: 20px; background: var(--page); font: 700 36px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.method-number { display: grid; grid-template-columns: repeat(4, 30px); justify-items: center; }
.method-answer { height: 3px; margin: 2px 0; background: var(--ink); border-radius: 3px; }
.model-topic:disabled .method-example { color: var(--ink-2); }
/* A tile too narrow for its name beside its sum (a 28 px name needs 332 px inside the tile, a 22 px name 292 px)
   puts the name on the first row and "Model it" with a smaller sum on the second, so no name is ever cut and the
   tile is no taller than before (165 px at 800 px wide and under, down to 247 px inside the tile). */
@media (min-width: 1151px) {
    @container (max-width: 331px) {
        .method-copy { display: contents; }
        .model-topic strong { grid-column: 1 / -1; }
        .method-example { padding: 10px 10px 6px; font-size: 30px; }
        .method-number { grid-template-columns: repeat(4, 25px); }
    }
}
@media (max-width: 1150px) {
    @container (max-width: 291px) {
        .method-copy { display: contents; }
        .model-topic strong { grid-column: 1 / -1; }
        .method-example { padding: 10px 10px 6px; font-size: 30px; }
        .method-number { grid-template-columns: repeat(4, 25px); }
    }
}
/* Narrower still (under 247 px: "Coming soon" plus a sum no longer fit side by side), the sum has a row of its own. */
@container (max-width: 246px) {
    .method-example { grid-column: 1 / -1; justify-self: start; }
}
/* "Class 11 this week", as in the mock: Ribbit peeks over the panel's top edge, then the counts, each
   method's medals so far, and a note on what those are. */
.class-week-side { position: relative; display: grid; padding-top: 60px; }
.class-week-guide { position: absolute; z-index: 1; left: 34px; top: 6px; width: 80px; height: 80px; }
.class-week { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 44px; background: var(--lime-tint); }
.class-week h2 { font: 700 28px/1.1 var(--display); }
.class-week > p { font: 600 20px/1.2 var(--display); }
.week-big { display: flex; align-items: baseline; gap: 12px; }
.week-big strong { font: 700 48px/1 var(--display); }
.week-topics { display: grid; gap: 8px; padding-top: 8px; border-top: 3px solid var(--lime-deep); }
.week-topics li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 20px/1.2 var(--display); }
.week-topics li > span { display: flex; align-items: center; min-width: 0; }
.week-topics .topic-operation { flex: none; width: 28px; height: 28px; margin-right: 7px; border: 2px solid var(--topic-edge); border-radius: 8px; font-size: 20px; }
.week-topics strong { font-variant-numeric: tabular-nums; }
.week-name.is-short { display: none; }
.week-topics .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.class-week > .week-note { font: 400 16px/1.3 var(--body); color: var(--ink-2); }
.maths-dock { position: fixed; z-index: 20; bottom: var(--cla-soil); left: var(--cla-gutter); right: var(--cla-gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; pointer-events: none; }
.maths-dock > * { pointer-events: auto; }
:is(.maths-toolbar, .medals-methods) button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--cla-tap); padding: 0 16px; border: 3px solid transparent; border-radius: 20px; background: transparent; color: var(--ink); box-shadow: none; font: 600 20px/1 var(--display); }
.maths-toolbar button[aria-current], .medals-methods button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime-deep); }
/* The two views share one pale track, as in the mock, and a short rule sets "Hide from the class" apart. */
.maths-seg { display: flex; gap: 4px; padding: 4px; background: var(--wash); border-radius: 24px; }
.maths-seg button { min-height: max(44px, calc(var(--cla-tap) - 8px)); }
.maths-gap { width: 3px; align-self: stretch; margin: 8px 4px; background: var(--wash-2); border-radius: 3px; }
.maths-toolbar svg { width: 24px; height: 24px; flex: none; }
.maths-state { display: grid; place-content: center; justify-items: center; gap: 20px; min-height: 45vh; padding: 32px; text-align: center; }
.maths-state h2 { font: 600 28px/1.2 var(--display); }
.maths-state canvas { width: 80px; height: 80px; }
/* The teacher's "Reset a pupil's method": a button in the bar beside "Hide from the class" (never on the register the
   class sees), opening a small sheet: the pupil and the method, then "are you sure?", then how it went. */
.reset-sheet { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow: auto; overscroll-behavior: contain; color: var(--ink); background: var(--page); border: 3px solid var(--ink); border-radius: 28px; font-family: var(--body); }
.reset-sheet::backdrop { background: rgba(30, 27, 58, 0.42); }
.reset-sheet[open] { display: grid; align-content: start; gap: 16px; }
.reset-sheet h2 { font: 700 28px/1.15 var(--display); overflow-wrap: anywhere; }
.reset-lead, .reset-body { font: 400 20px/1.4 var(--body); }
.reset-fields { display: grid; gap: 12px; }
.reset-fields label { display: grid; gap: 6px; font: 600 18px/1.2 var(--display); }
/* The line about the pupil keeps its two lines of room, so the buttons below never jump as it changes. */
.reset-fact { min-height: 2.6em; font: 600 20px/1.3 var(--display); color: var(--ink-2); }
.reset-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Class medals: the mock's calm register. Every pupil in register order, never ranked, in three columns
   on a wide board: their Classling, name, a small sign if they might need a hand, and a strip of five
   medals at twice their art size, the least that tells bronze, silver and gold apart. It shows one method
   at a time, chosen above it with a row of the bar's tabs (the teacher, 25 October 2026), so that four
   methods never make the medals smaller. */
.medals-register-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-bottom: 8px; }
.medals-register-top h2 { font: 700 28px/1.1 var(--display); }
.medals-register-top > p { font: 600 20px/1.2 var(--display); }
.medals-hand-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 12px 2px 4px; color: var(--ink); background: var(--tangerine-tint); border: 2px solid var(--tangerine-deep); border-radius: 14px; white-space: nowrap; }
.help-sign { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--ink); background: var(--tangerine-tint); border: 2px solid var(--tangerine-deep); border-radius: 50%; }
.help-sign svg { width: 12px; height: 16px; }
.medals-hand-tag .help-sign { border: 0; background: none; }
.medals-class-choice { margin-left: auto; font: 600 18px var(--display); }
.medals-class-choice select { padding: 8px; border: 2px solid var(--ink); border-radius: 10px; font: inherit; }
.medals-methods { margin-left: auto; }
.medals-class-choice + .medals-methods { margin-left: 0; }
/* The register fills the screen between the header and the bar, and scrolls inside its plate if it
   must, so nothing slides under the bar at any size. */
body[data-maths-view="pupil-progress"] #app { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
.class-medals { --strip: 144px; --strip-gap: 4px; display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 12px 32px calc(var(--cla-dock) + 12px); }
.medals-plate { flex: 0 1 auto; min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; background: var(--page); border: 3px solid var(--wash-2); border-radius: 28px; }
.medals-register { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: 24px; }
.medals-register > ol { display: contents; }
.medals-head, .medals-pupil { display: grid; grid-template-columns: 30px minmax(0, 1fr) var(--strip); align-items: center; gap: 8px; }
.medals-head:nth-child(1) { grid-column: 1; grid-row: 1; }
.medals-head:nth-child(2) { grid-column: 2; grid-row: 1; }
.medals-head:nth-child(3) { grid-column: 3; grid-row: 1; }
.medals-head { padding: 0 8px 8px; color: var(--ink-2); font: 600 16px/1.1 var(--display); }
.medals-head > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.medals-head .topic-operation { flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--topic-edge); border-radius: 8px; color: var(--ink); font-size: 16px; }
.medals-pupil { height: 32px; padding: 0 8px; border-radius: 14px; font: 600 16px/1 var(--display); }
.medals-pupil:nth-child(odd) { background: var(--wash); }
.medals-pupil canvas { width: 30px; height: 30px; image-rendering: pixelated; }
/* A name is whole, or a size or two down (12 px at the least), or the first name and the surname's initial
   ("Harvey A"): presentation.js decides, and the sign after it always shows. The ellipsis is only a safety net
   for a single word wider than the column at 12 px. */
.medals-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.medals-name-text { position: relative; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.medals-name-text.is-short .name-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.register-medals { display: flex; gap: var(--strip-gap); }
.register-medals .topic-badge { width: 24px; height: 26px; flex: none; border: 0; border-radius: 0; background: none; opacity: 1; filter: none; }
.register-medals .medal-art { display: block; width: 24px; height: 26px; }
/* The method's sign before each strip shows only where the heading row can't (phones). */
.register-sign { display: none; }
/* Below the mock's 1366, the strips close up so that names still fit. */
@media (max-width: 1365px) { .class-medals { --strip: 128px; --strip-gap: 2px; } }
@media (max-width: 1099px) {
    .class-medals { --strip: 144px; --strip-gap: 4px; }
    .medals-register { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .medals-head:not(:first-child) { display: none; }
}
/* Phones: the name on one line and the strips under it, each after its method's sign. */
@media (max-width: 700px) {
    .medals-head { display: none !important; }
    .medals-pupil { grid-template-columns: 30px minmax(0, 1fr); height: auto; padding: 4px 8px 8px; row-gap: 6px; }
    .medals-pupil .register-medals { grid-column: 1 / -1; align-items: center; }
    .register-sign { display: inline-grid; width: 22px; height: 22px; margin-right: 6px; border: 2px solid var(--topic-edge); border-radius: 8px; font-size: 16px; }
}
.maths-pupil-hub { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 32px; padding: 12px 32px 88px; max-width: 1440px; margin: 0 auto; }
.pupil-topic-list { display: grid; align-content: start; gap: 16px; }
.pupil-topic { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px 18px; min-height: 112px; padding: 20px; text-align: left; color: var(--ink); background: var(--topic-tint); border: 2px solid var(--topic-edge); border-radius: 24px; box-shadow: none; }
.pupil-topic.is-selected { margin-bottom: 6px; background: var(--topic); box-shadow: 0 6px 0 var(--topic-edge); --ring-lift: 6px; --ring-edge: 2px; }
.pupil-topic:disabled { min-height: 86px; }
.topic-check { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; }
.topic-check svg { width: 24px; height: 24px; }
.is-selected .topic-check { background: var(--page); }
.pupil-topic-copy strong { display: block; font: 600 27px/1.1 var(--display); }
.pupil-topic-copy > span { display: block; margin-top: 9px; font: 400 18px/1.4 var(--body); }
.pupil-topic .topic-operation { border: 2px solid var(--topic-edge); }
.pupil-medals { display: flex; gap: 7px; }
.pupil-medals .medal-art { width: 36px; height: 39px; flex: 0 0 36px; }
.pupil-medals.is-loading { opacity: .55; }
.next-medal-side { padding-top: 66px; }
.next-medal-panel { position: relative; display: grid; justify-items: center; align-content: start; gap: 18px; padding: 34px 24px 25px; border: 2px solid transparent; border-radius: 40px; background: var(--lime-tint); text-align: center; }
.next-medal-guide { position: absolute; top: -76px; right: 30px; width: 80px; height: 80px; }
.next-medal-panel .next-medal-bubble { position: absolute; z-index: 1; right: 120px; top: -64px; width: max-content; max-width: 270px; font-size: 20px; }
.next-medal-panel h2 { font: 600 24px/1.2 var(--display); }
.next-medal-picture .medal-art { display: block; width: 120px; height: 130px; }
.next-medal-copy { font: 600 30px/1.2 var(--display); }
.next-medal-copy > span { display: block; padding-top: 6px; color: var(--ink-2); font: 400 20px/1.5 var(--body); }
.next-medal-panel .medal-sparkle { left: 80px; top: 100px; }
.next-medal-panel .medal-twinkle { right: 76px; top: 175px; }
.start-practice { margin-top: 8px; }
.practice-option-sync { font-size: 17px; color: var(--ink-2); }
.maths-app .maths-tree { right: 32px; bottom: calc(var(--ground) - 4px); }
.maths-app[data-world="sky"] :is(.next-medal-panel, .class-week) { background: var(--page); border-color: var(--line-soft); }
.maths-app[data-world="sky"] .class-week { box-shadow: inset 0 0 0 3px var(--line-soft); }
.maths-app:not([data-world="sky"]) .maths-tree { display: none; }
/* The existing method grid keeps its engine and measured cells; only its presentation changes. */
/* The practice header's chips and buttons are the standard's 48 px (Topics 56), up from 42 to 44, so it is 6 px not 10 px from the
   top and bottom edges: the work below keeps the room it had (the header is the same height as before where its controls wrap). */
.maths-app .app-header.is-practice { padding: 6px 24px; }
.app-header.is-practice .header-title { margin: 0; }
.app-header.is-practice .maths-title .title-art { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
.app-header.is-practice .setup-panel { margin: 0; }
.app-header.is-practice .topic-operation { width: 36px; height: 36px; border: 2px solid var(--topic-edge); }
.primary-action.is-ready-action::after { display: none; }
.maths-app :is(.grid-panel, .tool-panel, .guide-panel, .phone-landscape-card) { box-shadow: none; border-color: var(--line-soft); border-radius: 20px; }
/* Change and Guide wear the topic's colours, not the Cup's purple: small standard buttons (controls.css). */
.maths-app .level-button .level-status { color: var(--ink-2); }
.maths-app .level-pill { color: var(--ink); background: var(--topic-tint, var(--lime-tint)); }
.maths-app .level-pill-label { display: inline; }
.maths-app .level-pill::before, .maths-app .level-pill::after { content: none; }
.maths-app .maths-sync-notice { position: static; width: auto; max-width: none; margin: 10px 0 0; }
/* The medal moment's card names the medal and what's next, so the line under the work doesn't say it again,
   and the progress label's words (half under the card on a phone) give way; the full bar stays. */
.maths-app .workspace.has-badge-award .workspace-feedback { display: none; }
.maths-app .workspace.has-badge-award .completion-progress-label { visibility: hidden; }
.maths-step-tick svg { width: 24px; height: 24px; }
.maths-guide-note { --mp-paper-warm: var(--page); }
/* The card's "Level 4 guide" label is 14 px at least (app.css drew it at 10 to 11 px). */
.maths-app .maths-guide-note .maths-guide-heading > span { font-size: 14px; }
.maths-guide-note .maths-guide-copy { color: var(--ink-2); }
.maths-app .phone-landscape-card { background: var(--page); }
.phone-landscape-card canvas { width: 80px; height: 80px; margin: 0 auto 20px; }
.maths-app .phone-landscape-card h2 { font: 600 28px/1.2 var(--display); }
.maths-app .badge-award-celebration, .maths-app .badge-award-celebration.is-topic-mastered { width: min(480px,calc(100% - 24px)); padding: 24px; gap: 18px; border: 3px solid var(--ink); border-radius: 24px; background: var(--page); box-shadow: none; }
.award-classling { display: flex; align-items: center; gap: 20px; width: 100%; }
.award-classling canvas { width: 80px; height: 80px; flex: none; }
/* The shared bubble is laid over its Classling (position: absolute); here it sits beside Ribbit, its tail
   pointing at him, and wraps on narrow phones. */
.award-classling .bubble { position: relative; min-width: 0; white-space: normal; text-align: left; font: 500 22px/1.2 var(--display); }
.award-classling .bubble strong { display: block; }
.award-classling .bubble span { display: block; margin-top: 10px; font: 400 18px/1.3 var(--body); }
.maths-app .badge-award-icon { width: 96px; height: 104px; background: none; border-radius: 0; filter: none; }
.badge-award-icon .medal-art { display: block; width: 96px; height: 104px; }
.maths-app .badge-award-mini { width: 36px; height: 39px; opacity: 1; transform: none; border-radius: 0; filter: none; background-size: 36px 39px; }
@keyframes maths-classling-hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: no-preference) { .award-classling canvas { animation: maths-classling-hop 600ms ease-in-out 1; } }
@media (max-width: 1315px) { body.maths-app { --cla-square-icon: 24px; } }
@media (max-width: 1150px) {
    .maths-board { grid-template-columns: minmax(0,1fr) 245px; gap: 24px; }
    .model-topic { padding: 16px; gap: 10px; border-radius: 28px; }
    .model-topic strong { font-size: 22px; }
    .class-week { padding: 20px; border-radius: 32px; }
    .class-week h2 { font-size: 24px; }
    .week-big strong { font-size: 40px; }
    /* The narrow panel keeps the short names, which fit at 20 px. */
    .week-name { display: none; }
    .week-name.is-short { display: inline; }
    .maths-pupil-hub { grid-template-columns: minmax(0,1fr) 330px; gap: 24px; }
    .pupil-topic { grid-template-columns: 34px minmax(0,1fr); padding: 16px; }
    .pupil-topic-copy strong { font-size: 24px; }
    .pupil-medals { grid-column: 2; }
    .pupil-medals .medal-art { width: 24px; height: 26px; flex-basis: 24px; }
    .next-medal-panel .next-medal-bubble { font-size: 17px; right: 105px; max-width: 220px; }
    .next-medal-panel .medal-sparkle { left: 38px; }
    .next-medal-panel .medal-twinkle { right: 35px; }
    .maths-toolbar button { padding: 8px 12px; font-size: 18px; }
}
@media (max-width: 800px) {
    body.maths-app { --cla-gutter: 16px; --cloud-a: left 420px top 124px; --cloud-b: left 570px top 200px; }
    .maths-app .app-header { padding: 8px 20px 0; }
    .header-class-name { font-size: 20px; }
    .app-header.is-teacher .header-title { display: block; }
    .maths-title .title-art { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
    .app-header.is-hub:not(.is-teacher) .maths-title .title-art { width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); }
    .maths-board { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 125px; }
    .model-topic { min-height: 165px; }
    .class-week { grid-template-columns: 1fr 1fr; }
    .class-week h2, .week-topics, .class-week > .week-note { grid-column: 1/-1; }
    .week-name { display: inline; }
    .week-name.is-short { display: none; }
    .maths-dock { gap: 10px; }
    .maths-toolbar { gap: 4px; }
    .maths-toolbar button { padding: 8px 10px; font-size: 16px; }
    .medals-hide span { max-width: 94px; }
    .medals-reset span { max-width: 130px; }
    .class-medals { padding-top: 14px; padding-inline: 20px; }
    .maths-pupil-hub { grid-template-columns: 1fr; gap: 24px; padding: 8px 20px 100px; }
    .next-medal-side { order: -1; padding-top: 50px; }
    .next-medal-panel { grid-template-columns: 72px minmax(0,1fr); justify-items: start; align-items: center; gap: 10px 16px; padding: 20px; border-radius: 28px; text-align: left; }
    .next-medal-panel h2 { grid-column: 1/-1; }
    .next-medal-picture .medal-art { width: 72px; height: 78px; }
    .next-medal-guide { top: -66px; right: 20px; width: 80px; height: 80px; }
    .next-medal-copy { font-size: 27px; }
    .next-medal-copy > span { font-size: 18px; }
    .next-medal-panel .practice-option-sync, .start-practice { grid-column: 1/-1; }
    .start-practice { margin-top: 0; }
    .next-medal-panel .next-medal-bubble { display: none; }
    .next-medal-panel .medal-sparkle { top: 36px; left: auto; right: 24px; }
    .next-medal-panel .medal-twinkle { right: 10px; top: 116px; }
    .pupil-topic { min-height: 106px; gap: 10px 12px; }
    .pupil-topic-copy strong { font-size: 23px; }
    .pupil-topic-copy > span { margin-top: 5px; font-size: 16px; }
    .topic-check { width: 34px; height: 34px; }
    .pupil-topic .topic-operation { width: 30px; height: 30px; font-size: 21px; }
    .maths-app .app-header.is-practice { padding: 8px 10px; }
}
/* From 521 to 900 px wide the practice header has two rows too, so the title never sits under the controls:
   the title and Topics over Level, the medals count, Change and Guide. (At 520 and under they share the grid below.) */
@media (min-width: 521px) and (max-width: 900px) {
    .app-header.is-practice:not(.is-model-board) .header-primary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title topics" "setup setup"; align-items: center; gap: 8px 12px; }
    .app-header.is-practice:not(.is-model-board) .header-left { grid-area: title; }
    .app-header.is-practice:not(.is-model-board) .header-controls { display: contents; }
    .app-header.is-practice:not(.is-model-board) .header-controls > .setup-panel { grid-area: setup; }
    .app-header.is-practice:not(.is-model-board) .header-actions { grid-area: topics; }
    /* app.css stacks the setup at 560 px and under; here it stays one row. */
    .app-header.is-practice:not(.is-model-board) :is(.setup-toolbar, .setup-context) { flex-direction: row; align-items: center; }
    .app-header.is-practice:not(.is-model-board) .level-toggle { justify-content: center; width: auto; }
}
@media (max-width: 520px) {
    body.maths-app { --cloud-a: left 216px top 144px; --cloud-b: left -400px top 0; --cla-r-l: 18px; }
    .app-header.is-hub:not(.is-teacher) .header-primary { display: block; }
    .app-header.is-teacher .maths-logo { width: 77px; height: 30px; }
    .app-header.is-practice .maths-title .title-art { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); }
    .app-header.is-practice .topic-operation { width: 28px; height: 28px; font-size: 22px; }
    /* Change and Guide get a cell each (they shared one, so Guide covered Change), 44 px tall. */
    .app-header.is-practice:not(.is-model-board) .header-primary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "title title level" "change guide topics"; }
    .app-header.is-practice .level-toggle[data-action="replay-walkthrough"] { grid-area: guide; }
    .model-topic-grid { grid-template-columns: 1fr; }
    .class-week { grid-template-columns: 1fr; }
    .maths-dock { gap: 6px; }
    .maths-toolbar { flex-wrap: wrap; justify-content: center; padding: 4px; margin-bottom: 6px; }
    .maths-gap { display: none; }
    .maths-toolbar button { min-height: var(--cla-tap); padding: 5px 8px; font-size: 14px; }
    /* The two views take the bar's first row; "Hide from the class" and "Reset a pupil's method" share the second, each in two lines if it must. */
    .maths-toolbar .maths-seg { flex: 1 0 100%; }
    .maths-seg button { flex: 1 1 0; }
    /* The choice of method above Class medals goes into two rows of two, so every method's name fits. */
    .medals-methods { display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 100%; margin-left: 0; }
    .maths-toolbar :is(.medals-hide, .medals-reset) { flex: 1 1 0; min-width: 0; min-height: var(--cla-tap); padding: 4px 6px; gap: 6px; line-height: 1.1; text-align: left; }
    .maths-toolbar :is(.medals-hide, .medals-reset) svg { width: 20px; height: 20px; }
    :is(.medals-hide, .medals-reset) span { max-width: none; }
    /* The bar wraps onto two rows here, so the register stops higher. */
    .class-medals { padding-bottom: calc(var(--cla-dock) + 68px); }
    .maths-app .level-pill-label { display: inline; }
    .maths-app .level-pill::after { display: none; }
    .award-classling canvas { width: 60px; height: 60px; }
    .award-classling .bubble { font-size: 18px; }
}
@media (max-width: 375px) {
    .app-header.is-hub:not(.is-teacher) .maths-title .title-art { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
}
@media (max-width: 700px) and (orientation: portrait) {
    #app[data-phone-layout="upright"] .maths-practice:not(.maths-practice-hub) .work-area { display: grid; }
    #app[data-phone-layout="upright"] .phone-landscape-lock { display: none; }
    #app[data-phone-layout="upright"] .workspace { display: flex; flex-direction: column; height: auto; min-height: 0; }
    #app[data-phone-layout="upright"] .grid-panel { padding: 8px; min-height: 0; height: auto; width: 100%; align-content: start; grid-template-rows: auto; --mp-setup-grid-bottom-gap: 8px; }
    #app[data-phone-layout="upright"] .tool-panel { width: 100%; padding: 12px; }
    #app[data-phone-layout="upright"] .maths-practice { width: calc(100% - 12px); padding-top: 4px; }
    #app[data-phone-layout="upright"] .workspace.has-docked-keypad .solving-keypad { position: static; }
    #app[data-phone-layout="upright"] .badge-award-celebration { padding: 16px; }
    /* Setting out: the line of tiles wraps onto a second row instead of running off the screen, so the
       tiles stay 44 px and nothing pushes the grid, the hint or Check setup past the edge. */
    #app[data-phone-layout="upright"] .workspace.is-setup .drag-equation,
    #app[data-phone-layout="upright"] .workspace.is-setup .drag-equation.is-long-equation {
        --equation-gap: 8px; --equation-inner-gap: 4px; --drag-token-size: 44px; --drag-token-font-size: 1.5rem;
        flex-wrap: wrap; row-gap: 8px; transform: none;
    }
}
/* The school laptop's short windows (a browser leaves 1366 × 540 or 600 of a 1366 × 768 screen): the board and
   the pupils' page are drawn closer so nothing is below the edge or under the bar, and nothing scrolls.
   The board's tiles are about 130 px tall; the pupils' title is drawn at 3 times, the topic rows and the medal
   panel are shorter, and Start practice is 64 px. The sky's ground still shows behind. */
@media (min-width: 801px) and (max-height: 720px) {
    .maths-board { padding: 12px 32px 100px; }
    .model-topic-grid { margin-top: 12px; }
    .model-topic { min-height: 0; padding: 18px 16px; }
    .method-example { padding: 10px 10px 6px; font-size: 30px; }
    .method-number { grid-template-columns: repeat(4, 25px); }
    .class-week-side { padding-top: 24px; }
    .class-week-guide { top: -30px; }
    .class-week { gap: 8px; padding: 24px 24px 16px; }
    .class-week h2 { font-size: 26px; }
    .week-big strong { font-size: 36px; }
    .week-topics { gap: 6px; padding-top: 6px; }
    /* app.css gives every header an auto first column between 561 and 720 px tall, which pulled Home in beside the title. */
    .app-header.is-hub { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
    .app-header.is-hub:not(.is-teacher) .maths-title .title-art { width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); }
    .app-header.is-hub:not(.is-teacher) .header-controls { top: 0; }
    .maths-pupil-hub { padding: 8px 32px 20px; }
    .pupil-topic-list { gap: 8px; }
    .pupil-topic, .pupil-topic:disabled { min-height: 0; padding: 10px 16px; gap: 8px 16px; }
    .pupil-topic.is-selected { margin-bottom: 4px; }
    .pupil-topic-copy strong { font-size: 24px; }
    .pupil-topic-copy > span { margin-top: 3px; font-size: 16px; }
    /* The sky's tree stands behind the panel here, not on its corner. */
    .next-medal-side { position: relative; z-index: 1; padding-top: 16px; }
    .next-medal-panel { gap: 8px; padding: 16px 24px; }
    .next-medal-panel h2 { font-size: 22px; }
    .next-medal-picture .medal-art { width: 96px; height: 104px; }
    .next-medal-copy { font-size: 24px; }
    .next-medal-copy > span { padding-top: 2px; font-size: 18px; line-height: 1.3; }
    .next-medal-panel .medal-sparkle { top: 70px; }
    .next-medal-panel .medal-twinkle { top: 130px; }
    .start-practice { margin-top: 4px; }
}

/* Phones held sideways: the practice header is one row, 52 px tall (it was two rows and 100 px, and the
   title ran under the Level pill), so the sum keeps the height. */
@media (max-height: 500px) and (orientation: landscape) {
    .maths-app .app-header.is-practice:not(.is-model-board) { padding: 4px 16px; }
    .app-header.is-practice:not(.is-model-board) .header-primary { flex-wrap: nowrap; gap: 12px; }
    .app-header.is-practice:not(.is-model-board) .maths-title .title-art { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); }
    .app-header.is-practice:not(.is-model-board) .topic-operation { width: 28px; height: 28px; font-size: 22px; }
    .app-header.is-practice .setup-context { flex-wrap: nowrap; }
    .app-header.is-practice :is(.level-pill, .level-progress-pill) { min-height: 44px; }
}
@media (max-height: 500px) and (max-width: 700px) and (orientation: landscape) {
    .app-header.is-practice .level-progress-pill { display: none; }
}
@media (max-height: 500px) and (min-width: 600px) {
    .maths-app .app-header { padding-top: 4px; }
    .app-header.is-hub:not(.is-teacher) .header-left { display: flex; }
    .app-header.is-hub:not(.is-teacher) .maths-title .title-art { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
    .maths-pupil-hub { grid-template-columns: minmax(0,1fr) 300px; padding-top: 8px; gap: 20px; }
    .pupil-topic-list { gap: 8px; }
    .pupil-topic { min-height: 66px; padding: 8px 12px; }
    .pupil-topic:disabled { min-height: 56px; }
    .pupil-topic-copy strong { font-size: 20px; }
    .pupil-topic-copy > span { font-size: 14px; margin: 3px 0 0; }
    .pupil-medals { display: none; }
    .next-medal-side { order: 0; padding-top: 0; }
    .maths-app .next-medal-guide, .next-medal-panel .sparkle, .next-medal-panel .next-medal-bubble { display: none; }
    .next-medal-panel { grid-template-columns: 72px minmax(0,1fr); justify-items: start; align-items: center; text-align: left; padding: 14px; gap: 8px; }
    .next-medal-panel h2, .next-medal-panel .start-practice { grid-column: 1/-1; }
    .next-medal-picture .medal-art { width: 72px; height: 78px; }
    .next-medal-panel h2 { font-size: 22px; }
    .next-medal-copy { font-size: 22px; }
    .next-medal-copy > span { font-size: 16px; }
    .maths-app .app-header.is-practice { padding-top: 4px; padding-bottom: 4px; }
}

/* Header badges keep their own centring instead of the generic h1 span rule, and an ink sign. */
.app-header h1 .topic-operation { display: inline-grid; place-items: center; color: var(--ink); }
/* Fredoka’s sign ink sits below its line-box centre. */
.app-header.is-practice:not(.is-model-board) h1 .topic-operation { padding-bottom: 6px; grid-template-rows: minmax(0, 1fr); }
/* The two preparation choices carry equal emphasis; gold remains the next action. */
.preparation-answer--yes { --preparation-fill: var(--cla-aqua); --preparation-edge: var(--cla-aqua-deep); }
.preparation-answer--no { --preparation-fill: var(--cla-periwinkle); --preparation-edge: var(--cla-periwinkle-deep); }
.maths-app .preparation-answer {
    min-height: 44px;
    border: 2px solid var(--preparation-edge);
    border-radius: var(--mp-radius-sm);
    background: var(--preparation-fill);
    color: var(--ink);
    box-shadow: 0 4px 0 var(--preparation-edge);
}
.maths-app .preparation-answer:hover:not(:disabled) { background: var(--preparation-fill); box-shadow: 0 4px 0 var(--preparation-edge); }

/* The Guide's outlines, hand and moving number wear the topic's colour, not purple, which is the Cup's (the
   teacher, 7 Oct). They're drawn on the body, outside the practice header that carries the topic, so the
   topic is read from the header. */
body.maths-app:has(.app-header.is-practice.topic-addition) { --guide-ink: var(--lime-deep); }
body.maths-app:has(.app-header.is-practice.topic-subtraction) { --guide-ink: var(--cla-aqua-deep); }
body.maths-app:has(.app-header.is-practice.topic-short-multiplication) { --guide-ink: var(--sky-deep); }
body.maths-app:has(.app-header.is-practice.topic-long-multiplication) { --guide-ink: var(--cla-periwinkle-deep); }
body.maths-app :is(.maths-guide-source, .maths-guide-target, .maths-guide-note, .maths-guide-contact, .maths-guide-ghost, .maths-guide-hand) {
    --mp-primary: var(--guide-ink, var(--ink));
}

/* A Chromebook zoomed to 125% (its 1366 x 768 screen then shows a page of about 1093 x 508): the practice screen keeps its
   two columns and fits, as on a school laptop's 540 (23 October). Below about 515 px the grid's 44 px squares no longer
   fitted between the sum line with the answer cards' strip and the line under the work, so the number pad dropped below
   the page, and the medal screen's Continue went off its foot. Nothing is made smaller: the header keeps 2 px above it
   (its Topics button keeps the 6 px below for its base), the room kept for the line under the work is the Check button's
   (64 px, not 72), and on the medal screen the answer cards' strip, empty by then, gives way. */
@media (min-width: 901px) and (max-height: 530px) and (orientation: landscape) {
    .maths-app .app-header.is-practice { padding-top: 2px; }
    .maths-app .maths-practice { margin-top: 2px; }
    .workspace.is-solving .workspace-footer { min-height: 4rem; }
    .workspace.has-badge-award .result-tray { display: none; }
}