/* Maths' controls, on the one standard (shared/css/classlings-controls.css; the teacher, 9 October 2026: "buttons
   that dont look right if all placed next to each other"). Loaded after app.css, classlings.css and
   model-board.css, so it has the last word on how a control looks: its height, corners, edge, lift, font and
   colours are the standard's (var(--ctl-...)), and pressing sinks it by its lift. (The standard springs it back
   over 460 ms; nothing eases on a Maths page, so here it is back the moment it is let go: see classlings.css.)

   Kinds here (the standard's names):
   - ordinary (white): Home, Topics, Close, Keep it, Cancel. 56 px, corners 20, 3 px ink edge, 6 px lift.
   - gold (the main action): Check setup, Check, Next question, Start level, Done, Start again...
   - danger: "Start again" in the reset question (it wipes a pupil's progress).
   - big (gold): Start practice (72 px, corners 28, 7 px lift). The model board's Next step is the same, in
     model-board.css.
   - small: Change and Guide (in the topic's own colour, chosen by the teacher), Replay, Yes and No (in their
     own two colours), the kind-of-sum button, Clear and Undo in setup, and the gold Check beside the answer box
     (as tall as the box). 48 px, corners 14, 4 px lift.
   - tiles: the number tiles and the keypad. White, 3 px ink edge, corners 14, 4 px lift; their size is the
     board's (it follows the grid's squares), only the look is the standard's.
   - what the Guide points at: its own edge and lift turn the Guide's colour (tiles and keys take a wash of it
     too), never a ring outside it.
   - bar squares (Home, Back): 78 px, 64 on phones (the end of this file).
   - text boxes and drop-downs: 48 px, 3 px pale edge that turns ink when focused, corners 14.
   - the reset sheet and its question: a box with corners 28, a 3 px ink edge and a 6 px ink lift.
   - Close: an ordinary button with the pixel cross in a sheet (.reset-close); the cross in a box's corner
     (.cla-x) on the Guide.

   Every rule starts with body.maths-app.cla-pupil, which is heavier than the old media-query rules in
   app.css that shrink buttons for short screens, so the standard holds at every size. */

/* The small boxes (tiles, the guide, answer boxes) have the standard's small corners: 14, not 10. */
body.maths-app { --mp-radius-sm: var(--ctl-small-r); }

/* ---- the toy button: a flat cap on a base of its own deeper colour ---- */
body.maths-app.cla-pupil :is(
    .home-link, .secondary-action, .primary-action, .badge-award-action, .start-practice,
    .reset-keep, .reset-close, .reset-confirm, .level-toggle, .maths-guide-demo, .maths-guide-next, .preparation-answer,
    .access-gate-action, .access-gate-dashboard-link, .access-gate-pupil-link
) {
    --c: var(--ctl-page); --c-deep: var(--ctl-ink); --c-line: var(--ctl-ink); --l: var(--ctl-lift);
    --ring-lift: var(--l); /* what takes a press reaches over its lift (classlings-controls.css) */
    appearance: none; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--ctl-h); padding: var(--ctl-pad);
    font: var(--ctl-font); letter-spacing: 0.01em; text-align: center; text-decoration: none; white-space: nowrap;
    color: var(--ctl-ink); background: var(--c);
    border: var(--ctl-edge) solid var(--c-line); border-radius: var(--ctl-r);
    box-shadow: 0 var(--l) 0 var(--c-deep);
    transform: none;
    -webkit-tap-highlight-color: transparent;
}
/* The Guide's "Show me how" goes when there is nothing to show; a hidden control stays hidden. */
body.maths-app.cla-pupil :is(.maths-guide-demo:disabled, .home-link[hidden], .primary-action[hidden], .secondary-action[hidden]) { display: none; }

/* Gold: the main action. Gold fill, dark-gold edge and lift, ink words. It stays the same colour under the
   pointer (the standard has no hover colour). */
body.maths-app.cla-pupil :is(.primary-action, .badge-award-action, .start-practice, .maths-guide-next),
body.maths-app.cla-pupil :is(.primary-action, .badge-award-action, .start-practice, .maths-guide-next):hover:not(:disabled) {
    --c: var(--ctl-gold); --c-deep: var(--ctl-gold-deep); --c-line: var(--ctl-gold-deep);
    color: var(--ctl-ink); background: var(--ctl-gold);
}
/* Danger: it wipes something (a pupil's medals and practice in one method). */
body.maths-app.cla-pupil .reset-confirm[data-reset-action="confirm"] {
    --c: var(--ctl-danger); --c-deep: var(--ctl-danger-deep); --c-line: var(--ctl-danger-deep);
    background: var(--ctl-danger);
}
/* White ones keep their white under the pointer too. */
body.maths-app.cla-pupil :is(.home-link, .secondary-action, .reset-keep, .reset-close, .maths-guide-demo):hover:not(:disabled) {
    background: var(--ctl-page);
}

/* Big: Start practice, one big gold button on the pupils' page. */
body.maths-app.cla-pupil .start-practice {
    --l: var(--ctl-big-lift);
    width: 100%; min-height: var(--ctl-big-h); padding: 0 32px;
    font: var(--ctl-big-font); border-radius: var(--ctl-big-r);
}
body.maths-app.cla-pupil .start-practice[aria-busy="true"] { transform: translateY(var(--l)); box-shadow: 0 0 0 var(--c-deep); opacity: 1; }

/* Small: 48 px, corners 14, 4 px lift, 18 px words. */
body.maths-app.cla-pupil :is(
    .level-toggle, .maths-guide-demo, .maths-guide-next, .preparation-answer, .edit-actions .secondary-action,
    .access-gate-dashboard-link, .access-gate-pupil-link, .solve-inline-check
) {
    --l: var(--ctl-small-lift);
    min-height: var(--ctl-small-h); font: var(--ctl-small-font); border-radius: var(--ctl-small-r);
}
body.maths-app.cla-pupil :is(
    .maths-guide-demo, .maths-guide-next, .preparation-answer, .edit-actions .secondary-action,
    .access-gate-dashboard-link, .access-gate-pupil-link, .solve-inline-check
) { padding: 0 16px; }
/* Change and Guide keep the topic's colour (the teacher chose it, 7 October): its tint, its deeper edge and lift. */
body.maths-app.cla-pupil .level-toggle,
body.maths-app.cla-pupil .level-toggle:hover:not(:disabled) {
    --c: var(--topic-tint, var(--ctl-page)); --c-deep: var(--topic-edge, var(--ctl-ink)); --c-line: var(--topic-edge, var(--ctl-ink));
    margin-left: 0; padding: 0 12px; color: var(--ctl-ink); background: var(--topic-tint, var(--ctl-page));
}
/* Yes and No keep their two colours (aqua and periwinkle, equal weight; app: classlings.css). */
body.maths-app.cla-pupil .preparation-answer,
body.maths-app.cla-pupil .preparation-answer:hover:not(:disabled) {
    --c: var(--preparation-fill); --c-deep: var(--preparation-edge); --c-line: var(--preparation-edge);
    background: var(--preparation-fill);
}

/* The Level and medals chips beside Change and Guide are as tall as they are, so the row is even; 6 px each side of the words
   (not 11) so that the practice header still fits beside the title down to 920 px wide. */
body.maths-app.cla-pupil :is(.level-pill, .level-progress-pill) { min-height: var(--ctl-small-h); padding-inline: 6px; }

/* ---- pressing: everything with a lift sinks onto it ---- */
body.maths-app.cla-pupil :is(
    .home-link, .secondary-action, .primary-action, .badge-award-action, .start-practice,
    .reset-keep, .reset-close, .reset-confirm, .level-toggle, .maths-guide-demo, .maths-guide-next, .preparation-answer,
    .access-gate-action, .access-gate-dashboard-link, .access-gate-pupil-link
):active:not(:disabled) {
    transform: translateY(var(--l)); box-shadow: 0 0 0 var(--c-deep);
}
body.maths-app.cla-pupil :is(
    .home-link, .secondary-action, .primary-action, .badge-award-action, .start-practice,
    .reset-keep, .reset-close, .reset-confirm, .level-toggle, .maths-guide-demo, .maths-guide-next, .preparation-answer,
    .access-gate-action, .access-gate-dashboard-link, .access-gate-pupil-link
):disabled { cursor: default; opacity: 0.55; transform: none; box-shadow: 0 var(--l) 0 var(--c-deep); }

/* The pixel icons in a button are 24 px. */
body.maths-app.cla-pupil :is(.home-link, .reset-close) svg { flex: none; width: 24px; height: 24px; }

/* ---- the number tiles and the keypad ---- */
body.maths-app.cla-pupil :is(.drag-token, .keypad button) {
    --c: var(--ctl-page); --c-deep: var(--ctl-ink); --c-line: var(--ctl-ink); --l: var(--ctl-small-lift);
    box-sizing: border-box;
    border: var(--ctl-edge) solid var(--c-line); border-radius: var(--ctl-small-r);
    box-shadow: 0 var(--l) 0 var(--c-deep);
}
body.maths-app.cla-pupil .keypad button { --ring-lift: var(--l); font-family: 'Maths Numbers', var(--ctl-display); font-weight: 600; }
body.maths-app.cla-pupil :is(.drag-token, .keypad button):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(var(--l)); box-shadow: 0 0 0 var(--c-deep);
}
/* The answer, carry and exchange tiles keep their coloured ring, over the same lift. */
body.maths-app.cla-pupil .result-tray .drag-token:is(.is-answer-token, .is-final-carry-token) { box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.24), 0 var(--l) 0 var(--c-deep); }
body.maths-app.cla-pupil .result-tray .drag-token.is-carry-token { box-shadow: inset 0 0 0 2px rgba(161, 98, 7, 0.3), 0 var(--l) 0 var(--c-deep); }
body.maths-app.cla-pupil .result-tray .drag-token:is(.is-exchange-source-token, .is-exchange-through-token, .is-exchange-active-token) { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.26), 0 var(--l) 0 var(--c-deep); }
/* A tile already placed is flat and pale; a ghost being dragged floats on a longer base. */
body.maths-app.cla-pupil .drag-token.is-used { box-shadow: none; }
body.maths-app.cla-pupil .drag-token-ghost { border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-small-r); box-shadow: var(--ctl-float); }

/* ---- what the Guide points at ----
   Its own edge and lift turn the Guide's colour (the topic's: classlings.css sets --mp-primary on it), so the pointer is
   the control's own shape. It was a 3 px ring 4 px outside (app.css), which missed the lift under a tile and looked too
   big for it (the teacher, 24 October 2026: "it doesnt fit the box, does it? its too big"). Tiles and keys also take a
   wash of the colour; Yes and No keep their own two colours, and gold stays gold. The squares of the grid keep their
   ring inside the square (app.css). */
body.maths-app.cla-pupil .maths-guide-source:not(.grid-square) { outline: none !important; }
body.maths-app.cla-pupil :is(.drag-token, .keypad button, .preparation-answer, .primary-action, .secondary-action).maths-guide-source {
    --c-line: var(--mp-primary) !important; --c-deep: var(--mp-primary) !important;
}
body.maths-app.cla-pupil :is(.drag-token, .keypad button).maths-guide-source { background: color-mix(in srgb, var(--mp-primary) 12%, var(--ctl-page)); }
body.maths-app.cla-pupil .solve-input.maths-guide-source { border-color: var(--mp-primary); }

/* ---- text boxes and drop-downs: 48 px, a 3 px pale edge that turns ink, corners 14 ---- */
body.maths-app.cla-pupil .reset-fields select,
body.maths-app.cla-pupil .medals-class-choice select,
body.maths-app.cla-pupil .solve-input {
    box-sizing: border-box; min-width: 0; min-height: var(--ctl-field-h); padding: 8px 12px;
    color: var(--ctl-ink); background: var(--ctl-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2); border-radius: var(--ctl-field-r);
    box-shadow: none;
}
body.maths-app.cla-pupil .reset-fields select,
body.maths-app.cla-pupil .medals-class-choice select { width: 100%; font: 400 18px/1.4 'Atkinson Hyperlegible', system-ui, sans-serif; }
body.maths-app.cla-pupil .medals-class-choice select { width: auto; }
body.maths-app.cla-pupil .reset-fields select:is(:focus, :focus-visible),
body.maths-app.cla-pupil .medals-class-choice select:is(:focus, :focus-visible),
body.maths-app.cla-pupil .solve-input:is(:focus, :focus-visible) { border-color: var(--ctl-ink); outline: none; }
body.maths-app.cla-pupil .solve-input:disabled { color: var(--mp-green); background: var(--mp-accent-green); border-color: var(--ctl-wash-2); }

/* ---- the reset sheet and its question ---- */
body.maths-app.cla-pupil .reset-sheet { border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-panel-r); box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink); }
body.maths-app.cla-pupil .reset-actions { gap: 16px; }
/* In the "are you sure?" question the answers sit on the right, "Keep it" before the action (the standard's .cla-ask-actions). */
body.maths-app.cla-pupil .reset-actions:has(.reset-keep) { justify-content: flex-end; }

/* ---- the Guide: a small box with the cross in its corner ---- */
body.maths-app.cla-pupil .maths-guide-note { border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-r); }
body.maths-app.cla-pupil .maths-guide-note.is-subtle { border-color: var(--ctl-wash-2); }
body.maths-app.cla-pupil .maths-guide-note .maths-guide-heading .cla-x {
    box-sizing: border-box; display: grid; place-items: center; flex: none; width: var(--ctl-x); height: var(--ctl-x); min-width: 0; min-height: 0; margin: -6px -6px -4px 0; padding: 0;
    color: var(--ctl-ink); background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-x-r); box-shadow: none; cursor: pointer;
}
body.maths-app.cla-pupil .maths-guide-note .maths-guide-heading .cla-x svg { width: 24px; height: 21px; }
body.maths-app.cla-pupil .maths-guide-note.is-compact .maths-guide-heading .cla-x { position: absolute; top: -18px; right: -10px; margin: 0; }
/* In the card along the bottom, a long label goes onto two lines beside the words instead of running under the cross. */
body.maths-app.cla-pupil .maths-guide-note.is-compact :is(.maths-guide-demo, .maths-guide-next) { max-width: 148px; white-space: normal; line-height: 1.05; }

/* ---- big tiles press down by their own lift ---- */
body.maths-app.cla-pupil .model-topic:active:not(:disabled) { transform: translateY(8px); box-shadow: 0 0 0 var(--topic-edge); }
body.maths-app.cla-pupil .pupil-topic.is-selected:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 var(--topic-edge); }

/* ---- the bar: tools are flat, 56 px, like the Cup's; squares are 78 px, 64 on phones ---- */
body.maths-app.cla-pupil :is(.maths-toolbar, .medals-methods) button:active:not(:disabled) { transform: scale(0.93); }
/* The choice of method above Class medals is a row of the bar's tabs: it shrinks the same way, with the same frame while
   it's held (shared/css/classlings-controls.css), so a press just inside its edge still counts. */
body.maths-app.cla-pupil .medals-methods button:active::before { content: ''; position: absolute; z-index: -1; inset: calc(-4% - 4px); border-radius: inherit; }
body.maths-app.cla-pupil .maths-seg button { min-height: var(--ctl-tab-h); }