/* Classlings controls: one size and look for each kind of button, on every Classlings page (the teacher,
   9 October: "check for visual inconsistencies ... buttons that dont look right if all placed next to each
   other"). From the reviewed design's toy button (design-directions/directions/mix/theme.css). Each page's own
   CSS uses these sizes (var(--ctl-...)); new screens can use the classes as they are.

   Kinds:
   - ordinary: 56 px, corners 20, 3 px edge, 6 px lift, Fredoka 600 20 px. White with an ink edge and lift.
   - gold (the main action): gold, with a dark-gold edge and lift, ink words. Danger (it wipes something):
     pale red with a deep red edge and lift. In an "are you sure?" box: "Not now" on the left, the action
     on the right.
   - big: 72 px, corners 28, 7 px lift, 28 px words. Huge: 88 px, 8 px lift (the pupils' login only).
   - small: 48 px, corners 14, 4 px lift, 18 px words.
     Inside a message or notice (Undo in the message pill, Try again in the saving notice) a small button is
     40 px tall, so the message stays one small row.
   - quiet (small extras): 48 px, corners 20, 3 px pale edge, no lift.
   - bar squares (Home, Menu, Back): 78 px, corners 28, 6 px lift (64 px on phones); Home's own bar is 84 px.
     While its menu is open, Menu is an ink square with the pixel cross and "Close".
   - a cross-only close square in a box's corner: 44 px, corners 14, 3 px edge. In sheets and panels, Close
     is an ordinary button: the pixel cross and the word.
   - menu rows: 56 px, corners 20, 20 px words, in a panel with corners 28.
   - tabs: 48 px in a pale track (56 px only where a mock-up draws it).
   - plus and minus: 48 px squares, corners 14, 4 px lift, pixel + and -.
   - text boxes: 48 px, corners 14, 3 px pale edge that turns ink when focused.
   - on and off: On and Off as two toy buttons in a pale track, the chosen one standing up, On in gold (.cla-onoff).
   - pressing: everything with a lift sinks onto it and springs back.
   - focus: a 4 px ink ring, 4 px away.
   - icons: the pixel kit's, never line icons or emoji. */
:root {
    --ctl-ink: #1e1b3a;
    --ctl-ink-2: #4a4766;
    --ctl-page: #ffffff;
    --ctl-wash: #f3f2f9;
    --ctl-wash-2: #e4e1f1;
    --ctl-gold: #f7c230;
    --ctl-gold-deep: #c98a12;
    --ctl-danger: #ffe3dc;
    --ctl-danger-deep: #b8341a;
    --ctl-display: 'Fredoka', 'Atkinson Hyperlegible', system-ui, sans-serif;

    --ctl-edge: 3px;
    --ctl-h: 56px;        --ctl-r: 20px;   --ctl-lift: 6px;   --ctl-font: 600 20px/1.1 var(--ctl-display); --ctl-pad: 0 24px;
    --ctl-big-h: 72px;    --ctl-big-r: 28px;   --ctl-big-lift: 7px;   --ctl-big-font: 600 28px/1.1 var(--ctl-display);
    --ctl-huge-h: 88px;   --ctl-huge-lift: 8px;  --ctl-huge-font: 700 36px/1.1 var(--ctl-display);
    --ctl-small-h: 48px;  --ctl-small-r: 14px; --ctl-small-lift: 4px; --ctl-small-font: 600 18px/1.1 var(--ctl-display);
    --ctl-square: 78px;   --ctl-square-phone: 64px; --ctl-square-r: 28px; --ctl-square-font: 600 18px/1 var(--ctl-display);
    --ctl-x: 44px;        --ctl-x-r: 14px;
    --ctl-row-h: 56px;    --ctl-panel-r: 28px;
    --ctl-tab-h: 48px;
    --ctl-field-h: 48px;  --ctl-field-r: 14px;
    --ctl-focus: 4px solid var(--ctl-ink); --ctl-focus-gap: 4px;
    --ctl-press: 70ms;    --ctl-settle: 460ms; --ctl-spring: cubic-bezier(0.28, 1.9, 0.5, 1);
    --ctl-float: 0 8px 0 rgba(30, 27, 58, 0.13);
}

/* The toy button: a flat cap on a base of its own deeper colour. Press: it sinks onto the base, then springs back. */
.cla-btn {
    --c: var(--ctl-page); --c-deep: var(--ctl-ink); --c-line: var(--ctl-ink); --l: var(--ctl-lift); --ring-lift: var(--l);
    appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--ctl-h); margin: 0 0 var(--l); padding: var(--ctl-pad);
    font: var(--ctl-font); letter-spacing: 0.01em; color: var(--ctl-ink); text-decoration: none; white-space: nowrap;
    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); cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
    -webkit-tap-highlight-color: transparent;
}
.cla-btn:active { transform: translateY(var(--l)); box-shadow: 0 0 0 var(--c-deep); transition-duration: var(--ctl-press); transition-timing-function: ease-out; }
.cla-btn.is-gold { --c: var(--ctl-gold); --c-deep: var(--ctl-gold-deep); --c-line: var(--ctl-gold-deep); }
.cla-btn.is-danger { --c: var(--ctl-danger); --c-deep: var(--ctl-danger-deep); --c-line: var(--ctl-danger-deep); }
.cla-btn.is-big { --l: var(--ctl-big-lift); min-height: var(--ctl-big-h); padding: 0 32px; font: var(--ctl-big-font); border-radius: var(--ctl-big-r); }
.cla-btn.is-huge { --l: var(--ctl-huge-lift); min-height: var(--ctl-huge-h); padding: 0 48px; font: var(--ctl-huge-font); border-radius: var(--ctl-big-r); }
.cla-btn.is-small { --l: var(--ctl-small-lift); min-height: var(--ctl-small-h); padding: 0 16px; font: var(--ctl-small-font); border-radius: var(--ctl-small-r); }
.cla-btn.is-quiet { --l: 0px; --c-line: var(--ctl-wash-2); min-height: var(--ctl-small-h); padding: 0 16px; font: var(--ctl-small-font); margin-bottom: 0; }
.cla-btn.is-quiet:active { transform: none; background: var(--ctl-wash); }
.cla-btn.is-wide { width: 100%; }
.cla-btn:disabled, .cla-btn[aria-disabled="true"] { cursor: default; opacity: 0.55; transform: none; }

/* Home, Menu and Back at the ends of the bottom bar. */
.cla-square {
    appearance: none; display: inline-grid; place-items: center; align-content: center; gap: 2px;
    width: var(--ctl-square); height: var(--ctl-square); margin: 0 0 var(--ctl-lift); padding: 0;
    font: var(--ctl-square-font); color: var(--ctl-ink); text-decoration: none;
    background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-square-r);
    box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink); cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
.cla-square:active { transform: translateY(var(--ctl-lift)); box-shadow: 0 0 0 var(--ctl-ink); transition-duration: var(--ctl-press); }
.cla-square { --ring-lift: var(--ctl-lift); }

/* Focus: the 4 px ink ring, 4 px away, goes round a lifted control's face and its lift together, its corners
   following the control's own. (The browser's own outline went round the face alone, so on a lifted button it cut
   across the lift: the teacher, 10 October, "it doesnt sit correctly on the buttons".) The ring is drawn as the
   outline of a frame the size of face and lift (::after); `translate: 0 0` makes the control that frame's containing
   block without moving it, wherever the control is placed. Each kind of lifted control is listed here and says how
   deep its lift is (--ring-lift) next to its own lift, and how thick its edge (--ring-edge) if it isn't the
   standard's. Pressed, the face sinks onto its lift and the ring stays where it was. */
.cla-btn:focus-visible, .cla-square:focus-visible, .cla-pupil .btn:focus-visible,
body.cla-home a.home-tile:focus-visible, body.cla-home .home-login:focus-visible, body.cla-home .home-square:focus-visible, body.cla-home .home-gold:focus-visible,
#battleArena.classlings .battle-control-btn:focus-visible, #winnerCelebration.classlings .btn:focus-visible, #winnerCelebration.classlings #undoMatchBtn:focus-visible,
.ts-dock .battle-control-btn:focus-visible, .ts-give:focus-visible, .ts-done:focus-visible { outline: none !important; translate: 0 0; }
.cla-btn:focus-visible::after, .cla-square:focus-visible::after, .cla-pupil .btn:focus-visible::after,
body.cla-home a.home-tile:focus-visible::after, body.cla-home .home-login:focus-visible::after, body.cla-home .home-square:focus-visible::after, body.cla-home .home-gold:focus-visible::after,
#battleArena.classlings .battle-control-btn:focus-visible::after, #winnerCelebration.classlings .btn:focus-visible::after, #winnerCelebration.classlings #undoMatchBtn:focus-visible::after,
.ts-dock .battle-control-btn:focus-visible::after, .ts-give:focus-visible::after, .ts-done:focus-visible::after {
    --ring-out: calc(-1 * var(--ring-edge, var(--ctl-edge)));
    content: ''; position: absolute; pointer-events: none; border-radius: inherit;
    inset: var(--ring-out) var(--ring-out) calc(var(--ring-out) - var(--ring-lift, 0px));
    outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap);
}
@media (prefers-reduced-motion: no-preference) {
    .cla-btn:focus-visible:active::after, .cla-square:focus-visible:active::after, .cla-pupil .btn:focus-visible:active::after,
    body.cla-home a.home-tile:focus-visible:active::after, body.cla-home .home-login:focus-visible:active::after, body.cla-home .home-square:focus-visible:active::after, body.cla-home .home-gold:focus-visible:active::after,
    #battleArena.classlings .battle-control-btn:focus-visible:active::after, #winnerCelebration.classlings .btn:focus-visible:active::after, #winnerCelebration.classlings #undoMatchBtn:focus-visible:active::after,
    .ts-dock .battle-control-btn:focus-visible:active::after, .ts-give:focus-visible:active::after, .ts-done:focus-visible:active::after {
        inset: calc(var(--ring-out) - var(--ring-lift, 0px)) var(--ring-out) var(--ring-out);
    }
}
/* After a click or tap, no rings at all (html.cla-pointer from shared/js/focusRings.js: the teacher, 10 October, "im
   really not a fan of the black borders around buttons that are highlighted sometimes"). They come back with Tab or
   the arrows. Text boxes keep theirs: it shows where the typing goes. */
html.cla-pointer :focus-visible:not(input, textarea, select, [contenteditable]),
html.cla-pointer :focus-visible:not(input, textarea, select, [contenteditable])::after { outline: none !important; }
.cla-square.is-on, .cla-square[aria-expanded="true"] { background: var(--ctl-ink); color: var(--ctl-page); }
@media (max-width: 599px) { .cla-square { width: var(--ctl-square-phone); height: var(--ctl-square-phone); border-radius: var(--ctl-r); } }

/* The cross in a box's corner. */
.cla-x {
    appearance: none; display: grid; place-items: center; width: var(--ctl-x); height: var(--ctl-x); padding: 0;
    color: var(--ctl-ink); background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-x-r); cursor: pointer;
}

/* A pop-out menu and its rows. */
.cla-menu { display: grid; gap: 2px; padding: 8px; background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-panel-r); box-shadow: var(--ctl-float); }
.cla-menu-item {
    appearance: none; display: flex; align-items: center; gap: 12px; min-height: var(--ctl-row-h); padding: 0 16px;
    font: var(--ctl-font); color: var(--ctl-ink); text-align: left; text-decoration: none; background: transparent; border: 0; border-radius: var(--ctl-r); cursor: pointer;
}
.cla-menu-item:hover, .cla-menu-item:focus-visible { background: var(--ctl-wash); }

/* On and off (the teacher, 11 October: option A, in place of the old site's switch): On and Off as two toy buttons
   in a pale track, the chosen one standing up on its lift, On in gold, Off in white; a tap on the one already chosen
   does nothing. Both words sit on one line and the track has room under them for the lift, so it's 56 px tall like
   the other controls (the teacher, 11 October: "looks a bit off?"). Two ways to use it:
   - over a page's own tick box: <span class="cla-onoff"><input type="checkbox">
     <span class="cla-onoff-on" aria-hidden="true">On</span><span class="cla-onoff-off" aria-hidden="true">Off</span>
     </span>. The box stays what the page reads and what the keyboard and screen readers use (hidden, but there);
     On and Off are drawn from it, and shared/js/onOff.js turns a tap on one into setting the box.
   - as two buttons a page draws and handles itself, each with aria-pressed. */
.cla-onoff {
    position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; gap: 4px;
    padding: 4px 4px calc(4px + var(--ctl-small-lift)); background: var(--ctl-wash); border-radius: calc(var(--ctl-small-r) + 4px);
}
.cla-onoff > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.cla-onoff-on, .cla-onoff-off {
    appearance: none; display: grid; place-items: center; min-width: 64px; min-height: 44px; margin: 0; padding: 0 12px;
    font: 600 18px/1 var(--ctl-display); color: var(--ctl-ink-2); background: transparent;
    border: var(--ctl-edge) solid transparent; border-radius: var(--ctl-small-r); cursor: pointer; user-select: none;
}
.cla-onoff > input:not(:checked) ~ .cla-onoff-off, .cla-onoff-off[aria-pressed="true"] {
    color: var(--ctl-ink); background: var(--ctl-page); border-color: var(--ctl-ink); box-shadow: 0 var(--ctl-small-lift) 0 var(--ctl-ink);
}
.cla-onoff > input:checked ~ .cla-onoff-on, .cla-onoff-on[aria-pressed="true"] {
    color: var(--ctl-ink); background: var(--ctl-gold); border-color: var(--ctl-gold-deep); box-shadow: 0 var(--ctl-small-lift) 0 var(--ctl-gold-deep);
}
.cla-onoff:has(> input:disabled), .cla-onoff:has(> button:disabled) { opacity: 0.55; }
.cla-onoff:has(> input:disabled) > span, .cla-onoff > button:disabled { cursor: default; }
.cla-onoff > button:focus-visible { outline: var(--ctl-focus); outline-offset: 2px; }
.cla-onoff:has(> input:focus-visible) { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
html.cla-pointer .cla-onoff:has(> input:focus-visible) { outline: none; }

/* Tabs in a pale track. */
.cla-tabs { display: flex; gap: 4px; padding: 4px; background: var(--ctl-wash); border-radius: calc(var(--ctl-r) + 4px); }
.cla-tabs > * { min-height: var(--ctl-tab-h); }

/* Plus and minus. */
.cla-step {
    appearance: none; display: grid; place-items: center; width: var(--ctl-small-h); height: var(--ctl-small-h); margin: 0 0 var(--ctl-small-lift); padding: 0;
    color: var(--ctl-ink); background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-small-r);
    box-shadow: 0 var(--ctl-small-lift) 0 var(--ctl-ink); cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
.cla-step:active { transform: translateY(var(--ctl-small-lift)); box-shadow: 0 0 0 var(--ctl-ink); transition-duration: var(--ctl-press); }

/* Text boxes and drop-downs. */
.cla-field {
    width: 100%; min-width: 0; min-height: var(--ctl-field-h); padding: 8px 12px;
    font: 400 18px/1.4 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--ctl-ink);
    background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-wash-2); border-radius: var(--ctl-field-r);
}
.cla-field:focus { border-color: var(--ctl-ink); outline: none; }

/* An "are you sure?" box. */
.cla-ask { background: var(--ctl-page); border: var(--ctl-edge) solid var(--ctl-ink); border-radius: var(--ctl-panel-r); box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink); }
.cla-ask-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }

@media (prefers-reduced-motion: reduce) {
    .cla-btn, .cla-square, .cla-step { transition: none; }
}