@import url("../../../shared/css/classlings.css?v=20261009-controls-2");

/* ========================================
   The Classlings look for the Classling Cup (js/classlings-app.js)
   For classes with Classlings on, body.classlings-app: the reviewed design (design-directions/MIX.md,
   directions/mix/cup.html). The point cards, filling the screen from the top (no strip: a notice floats
   over them only when something's wrong); and every control in a floating bar along the bottom: Home
   with the class's name in Classlings' own lettering beside it, the toolbar (Points | Leaderboard, Tables, Search, the last point and Undo), Menu, and the gold
   Showdown sign at the end. Home, Menu and the toolbar are rounded rectangles with the same corners;
   the sign keeps its pixel corners. Each class stands on plain white or on the sky and grass
   (body.cla-sky). Purple marks what's chosen and gold is for the main actions.
   Every rule here is scoped to body.classlings-app, so classes without Classlings keep today's look.
   ======================================== */

/* The parts only this look has. */
.cla-only {
    display: none;
}

body.classlings-app {
    /* Sizes: the bar's controls are 56 px tall in an 8 px padded, 3 px edged bar, 78 px in all; Home
       and Menu are 78 px squares with the bar's corners. Things you press sit on a 6 px base. Narrower
       windows change these, step by step (the end of this file). The numbers are the controls
       standard's (shared/css/classlings-controls.css), so each kind of control matches every other
       Classlings page. */
    --cla-gutter: 32px;
    --cla-tap: var(--ctl-h);
    --cla-pad: 8px;
    --cla-edge: var(--ctl-edge);
    --cla-bar: calc(var(--cla-tap) + var(--cla-pad) * 2 + var(--cla-edge) * 2);
    --cla-lift: var(--ctl-lift);
    --cla-gap: 16px;
    /* Inside the toolbar: the space between tools, the extra room either side of a dividing line, the
       padding round Points | Leaderboard, and the size of the words. */
    --cla-tool-gap: 8px;
    --cla-sep: 12px;
    --cla-switch-pad: 4px;
    --cla-word: 20px;
    /* Home, Choose and Menu: their size, and their words and pictures. */
    --cla-square: var(--cla-bar);
    --cla-square-word: 18px;
    --cla-square-icon: 32px;
    /* Their corners: 28 px on the 78 px square, 20 px on the 64 px one (narrower windows and phones). */
    --cla-square-r: var(--ctl-square-r);

    /* What the bar shows, and how it's laid out: narrower windows hide words and take two rows (the
       end of this file). Each is a display value, or the layout's own. */
    --cla-view-word: inline;
    --cla-view-icon: none;
    --cla-tables-word: inline;
    --cla-tables-icon: none;
    --cla-undo-word: inline;
    --cla-choose-word: block;
    --cla-last-who: inline;
    --cla-last-n: inline-grid;
    --cla-sign-who: block;
    --cla-sign-pad: var(--cla-px);
    --cla-wrap: nowrap;
    --cla-rows-gap: 0px;
    --cla-ends: flex;
    --cla-bar-justify: space-between;
    --cla-tools-order: 0;
    --cla-tools-flex: 0 1 auto;
    --cla-tools-margin: 0 auto var(--cla-lift);
    --cla-tools-justify: flex-start;
    --cla-menu-order: 1;
    --cla-sign-order: 2;
    /* The class's name: beside Home, taking the room left (flex-basis 0); or, on a phone and when that
       room is under 96 px, a row of its own above the toolbar (body.cla-name-row), which makes the
       bar's dock that much taller. */
    --cla-name-flex: 1 1 0;
    --cla-name-order: 0;
    --cla-name-height: var(--cla-square);
    --cla-name-margin: 0 0 var(--cla-lift);
    --cla-name-extra: 0px;
    --cla-r-l: var(--ctl-panel-r);
    --cla-r-m: var(--ctl-r);
    --cla-r-s: var(--ctl-small-r);
    --cla-float: 0 8px 0 rgba(30, 27, 58, 0.13);
    /* The bar stands this far above the bottom edge: on the soil band in the sky world. */
    --cla-soil: 16px;
    /* From the bottom edge to the top of the bar: where pop-ups and messages stop. */
    --cla-dock: calc(var(--cla-soil) + var(--cla-lift) + var(--cla-bar) + var(--cla-name-extra));
    /* The Showdown sign: Pixel Quest's gold face on a 4 px pixel grid, with a stepped ink outline. */
    --cla-px: 4px;
    --cla-sign-h: 56px;
    --cla-ring: 0 calc(var(--cla-px) * -1) 0 var(--cla-ink), 0 var(--cla-px) 0 var(--cla-ink),
        calc(var(--cla-px) * -1) 0 0 var(--cla-ink), var(--cla-px) 0 0 var(--cla-ink);


    /* Reading text everywhere in this look is Atkinson Hyperlegible (--cla-ui, shared/css/classlings.css),
       app.css's own rules included. */
    --font-family: var(--cla-ui);

    background: var(--cla-page);
}

/* ---------------------------------------------------------------- the sky and grass */

/* A flat sky with two still pixel clouds, and grass with tufts and a soil band along the foot, which
   the bar stands on. Nothing else moves; text straight on the sky stays ink (8.8 to 1). */

/* ---------------------------------------------------------------- the page's shape */

/* The screen on top and the bar under it (the header comes first in the page, so keyboards reach the
   bar before the cards). */
body.classlings-app #app > .screen {
    order: 1;
}

body.classlings-app #app > .app-header {
    order: 2;
}

/* A showdown fills the screen: no bar and no notices. */
body.classlings-app #app.battle-fullscreen > .cla-float {
    display: none;
}

/* ---------------------------------------------------------------- the class's name, in the bar */

/* There's no strip along the top, so the cards get all the height. The class's name sits in the bar
   beside Home, in Classlings' lettering at scale 2 (40 px tall), and is the page's heading. It takes
   whatever room the bar has left between Home and the toolbar (it grows from nothing, so it can never
   push a button away), and is plain words with an ellipsis when the lettering won't fit. */
body.classlings-app .cla-name {
    --cla-name-h: 40px;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: var(--cla-square);
    margin: 0 0 var(--cla-lift);
    padding: 0;
    overflow: hidden;
}

/* The lettering: 20 art pixels tall, the bottom 4 are room for tails, handed back so the capitals sit
   in the middle of the bar. Accents above capitals make it 24; those rows are lifted into the space
   above (the svg's margin-top), so an accented name sits exactly where a plain one does. */
body.classlings-app .cla-title {
    --title-scale: 2;
    flex: none;
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}

body.classlings-app .cla-title svg {
    display: block;
    width: calc(var(--title-scale) * var(--w) * 1px);
    height: calc(var(--title-scale) * var(--h) * 1px);
    /* Lift only the added accent rows into the space above the title, so the capitals, the bar's
       height and its buttons stay where they are for an accented name. */
    margin-top: calc((20 - var(--h)) * var(--title-scale) * 1px);
}

/* A name with characters the lettering hasn't got, or too long to letter: plain words, cut with an
   ellipsis rather than pushing anything. */
body.classlings-app .cla-title.is-text {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font: 600 26px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    text-overflow: ellipsis;
}

/* In the bar, the name is one flex item: it grows from nothing into whatever room is left, so the
   buttons never move for it (the variables are set at the top, and below for a row of its own). */
body.classlings-app .app-header > .cla-name {
    flex: var(--cla-name-flex);
    order: var(--cla-name-order);
    height: var(--cla-name-height);
    margin: var(--cla-name-margin);
}

/* A row of its own above the toolbar, left-aligned, when the bar has no room beside Home to give it:
   on a phone (the bar is two rows there already) and, in windows a little wider, whenever the room
   beside Home would be under 96 px (classlings-app.js). The bar's dock grows by the row. */
body.classlings-app.cla-name-row {
    --cla-wrap: wrap;
    --cla-rows-gap: 12px;
    --cla-name-flex: 1 1 100%;
    --cla-name-order: -3;
    --cla-name-height: 36px;
    --cla-name-margin: 0;
    --cla-name-extra: calc(36px + var(--cla-rows-gap));
}

@media (max-width: 640px) {
    body.classlings-app {
        --cla-name-flex: 1 1 100%;
        --cla-name-order: -3;
        --cla-name-height: 36px;
        --cla-name-margin: 0;
        --cla-name-extra: calc(36px + var(--cla-rows-gap));
    }
}

/* On every screen with the bar but Settings, Points history and the Points record (which show their own title there),
   there's no class name at all: the Menu shows the class (and switches it), so the
   cards keep the room (the teacher's call, 5 Oct). It stays the page's heading for screen readers, and
   it never takes a row of its own. Other pages (Settings, Points history, Points record) keep their title. */
body.classlings-app:not(:has(#settingsScreen:not(.hidden))):not(:has(#historyScreen:not(.hidden))):not(:has(#recordScreen:not(.hidden))) {
    --cla-name-extra: 0px;
}

body.classlings-app:not(:has(#settingsScreen:not(.hidden))):not(:has(#historyScreen:not(.hidden))):not(:has(#recordScreen:not(.hidden))) .app-header > .cla-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The notices float over the top of the screen: one quiet line, only while something is wrong. */
body.classlings-app .cla-float {
    position: fixed;
    top: 8px;
    right: var(--cla-gutter);
    left: var(--cla-gutter);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

body.classlings-app .cla-float > * {
    pointer-events: auto;
}

body.classlings-app .cla-float:not(:has(.cla-notice)) {
    pointer-events: none;
}

/* The notice itself (a flat notice when something's wrong, with a gold Try again) is the one the Cup
   shares with the Break Tracker, in shared/css/classlings.css. Floating over the board it may take the
   whole width but no more, goes when there's nothing to say, and has the bar's shadow. */
body.classlings-app .cla-notices {
    max-width: 100%;
}

body.classlings-app .cla-notices:empty {
    display: none;
}

body.classlings-app .cla-notice {
    box-shadow: var(--cla-float);
}

/* The old Live sign: the floating notice says what matters now. */
body.classlings-app .app-header .live-state {
    display: none !important;
}

/* ---------------------------------------------------------------- the board */

/* The cards as they are, across the full width, a little apart. */
body.classlings-app #todayScreen #pupilsGrid.classlings-board {
    gap: 12px;
    padding: 12px var(--cla-gutter);
}

body.classlings-app #todayScreen {
    padding-top: 12px;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------- the bar along the bottom */

body.classlings-app .app-header,
body.classlings-app .compact-mode .app-header {
    position: relative;
    display: flex;
    flex-wrap: var(--cla-wrap);
    align-items: flex-end;
    justify-content: var(--cla-bar-justify);
    gap: var(--cla-rows-gap) var(--cla-gap);
    min-height: 0;
    margin: 0;
    padding: 4px var(--cla-gutter) var(--cla-soil);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.classlings-app .app-header .header-brand {
    display: none !important;
}

/* Home, Menu and Back: rounded squares at the bar's height, with the bar's corners, on an ink base. */
body.classlings-app .app-header .cla-home,
body.classlings-app .app-header .icon-btn.more-menu-btn,
body.classlings-app .app-header .clc-open,
body.classlings-app .app-header .back-btn {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    align-content: center;
    gap: 2px;
    width: var(--cla-square);
    min-width: 0;
    height: var(--cla-square);
    margin: 0 0 var(--cla-lift);
    padding: 0;
    font: 600 var(--cla-square-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    text-decoration: none;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-square-r);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
    cursor: pointer;
    transform: none;
    transition: transform 460ms cubic-bezier(0.28, 1.9, 0.5, 1), box-shadow 460ms cubic-bezier(0.28, 1.9, 0.5, 1);
}

/* "Choose" (60 px of words) fits the square with room either side, so it's the same square as Home and Menu
   (the identity re-check of 9 October: it was 94 px wide). Wider only if a screen's font ever needs it. */
body.classlings-app .app-header .clc-open {
    width: auto;
    min-width: var(--cla-square);
    padding: 0;
}

body.classlings-app .app-header :is(.cla-home, .icon-btn.more-menu-btn, .clc-open, .back-btn):hover {
    background: var(--cla-wash);
    transform: none;
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
}

body.classlings-app .app-header :is(.cla-home, .icon-btn.more-menu-btn, .clc-open, .back-btn):active {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: 70ms;
}

body.classlings-app .app-header :is(.cla-home, .icon-btn.more-menu-btn, .clc-open, .back-btn) svg {
    width: var(--cla-square-icon);
    height: var(--cla-square-icon);
}

body.classlings-app .app-header .icon-btn.more-menu-btn > :not(.cla-only) {
    display: none;
}

body.classlings-app .app-header .icon-btn.more-menu-btn > .cla-only {
    display: block;
}

/* Menu is ink while its menu is open, with the kit's cross and "Close" (as Home's Menu is). */
body.classlings-app .app-header .icon-btn.more-menu-btn > :is(.cla-menu-close, .cla-menu-close-word) {
    display: none;
}

body.classlings-app .more-menu-wrapper:has(.more-menu-dropdown:not(.hidden)) .icon-btn.more-menu-btn {
    color: var(--cla-page);
    background: var(--cla-ink);
}

body.classlings-app .more-menu-wrapper:has(.more-menu-dropdown:not(.hidden)) .icon-btn.more-menu-btn > :is(.cla-menu-icon, .cla-menu-word) {
    display: none;
}

body.classlings-app .more-menu-wrapper:has(.more-menu-dropdown:not(.hidden)) .icon-btn.more-menu-btn > :is(.cla-menu-close, .cla-menu-close-word) {
    display: block;
}

/* The toolbar: one white bar, its tools in a row. When room is short only the last point's name gives
   way (it folds to "+1"), never the tools. */
body.classlings-app .app-header .header-left {
    position: relative;
    display: flex;
    flex: var(--cla-tools-flex);
    flex-wrap: nowrap;
    align-items: center;
    justify-content: var(--cla-tools-justify);
    gap: var(--cla-tool-gap);
    min-width: 0;
    order: var(--cla-tools-order);
    margin: var(--cla-tools-margin);
    padding: var(--cla-pad);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: var(--cla-float);
}

/* On a screen with nothing else in it (Settings), the toolbar is just Back. */
body.classlings-app .app-header .header-left:not(:has(> :is(.back-btn, .class-switcher-wrapper, .header-view-switch, #tableChipsContainer, .cla-last-point):not([hidden]):not([style*="display: none"]))) {
    display: none;
}

/* A tool: words and an icon on nothing, a quiet wash on hover. */
body.classlings-app .app-header :is(.tables-dropdown-btn, .pupil-header-search, .cla-undo) {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: var(--cla-tap);
    height: var(--cla-tap);
    margin: 0;
    padding: 0 12px;
    font: 600 var(--cla-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    background: transparent;
    border: var(--cla-edge) solid transparent;
    border-radius: var(--cla-r-m);
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

body.classlings-app .app-header :is(.tables-dropdown-btn, .pupil-header-search, .cla-undo):hover:not(:disabled) {
    background: var(--cla-wash);
    box-shadow: none;
    transform: none;
}

body.classlings-app .app-header :is(.tables-dropdown-btn, .cla-undo):active:not(:disabled) {
    transform: scale(0.93);
}

body.classlings-app .app-header :is(.tables-dropdown-btn, .pupil-header-search, .cla-undo) > svg {
    flex: none;
    width: 24px;
    height: 24px;
}

/* Back (on Settings) is a square too, at the right-hand end where Menu usually is. The page shows it
   with display: flex, so its icon and word stack as a column. The toolbar holding it has no box of
   its own then. */
body.classlings-app .app-header .back-btn {
    flex-direction: column;
    justify-content: center;
}

body.classlings-app .app-header .back-btn svg {
    stroke-width: 2.8;
}

body.classlings-app .app-header .back-btn > .cla-only {
    display: block;
}

/* The look's pixel icons (shared/js/classlings/brand/barIcons.js) sit beside the line icons kept for
   classes without Classlings: here the pixel one shows and the line one doesn't. The squares' icons
   are 32px, or 24px on narrower screens, so their 8-wide art stays at whole pixels; the tools and
   the Menu's items are 24px for their 12 x 12 art. */
body.classlings-app .app-header .back-btn > svg:not(.cla-only),
body.classlings-app .header-view-switch .header-nav-btn > svg:not(.cla-only),
body.classlings-app :is(#undoBtn, #hpHistoryBtn, #pointSoundsToggle, #settingsBtn) > svg:not(.cla-only) {
    display: none;
}

body.classlings-app .more-menu-item > svg.cla-only {
    display: block;
}

/* Point sounds: the speaker with its wave while they're on, with a cross while they're muted. */
body.classlings-app #pointSoundsToggle[aria-pressed="true"] > svg.cla-sound-on,
body.classlings-app #pointSoundsToggle:not([aria-pressed="true"]) > svg.cla-sound-off {
    display: none;
}

body.classlings-app .app-header .header-left:has(> .back-btn:not([style*="display: none"])) {
    margin: 0 0 0 auto;
    order: 0;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* Points | Leaderboard: one switch, with the open view in the Cup's purple. */
body.classlings-app .header-view-switch {
    display: flex;
    flex: none;
    align-items: stretch;
    gap: 4px;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--cla-switch-pad);
    background: var(--cla-wash);
    border: 0;
    border-radius: calc(var(--cla-r-m) + var(--cla-switch-pad));
    box-shadow: none;
    overflow: visible;
}

body.classlings-app .header-view-switch::before {
    display: none;
}

/* (Today's rules size these two by id, so these do too.) */
body.classlings-app .header-view-switch :is(#navTodayBtn, #navLeaderboardBtn) {
    flex: none;
    width: auto;
    min-width: 0;
    height: calc(var(--cla-tap) - var(--cla-switch-pad) * 2);
    margin: 0;
    padding: 0 12px;
    font: 600 var(--cla-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    background: transparent;
    border: var(--cla-edge) solid transparent;
    border-radius: var(--cla-r-m);
    box-shadow: none;
    transform: none;
}

body.classlings-app .header-view-switch :is(#navTodayBtn, #navLeaderboardBtn):hover {
    background: var(--cla-page);
    box-shadow: none;
    transform: none;
}

body.classlings-app .header-view-switch :is(#navTodayBtn, #navLeaderboardBtn).active {
    background: var(--cla-grape);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .header-view-switch .header-nav-btn svg {
    display: var(--cla-view-icon);
    width: 24px;
    height: 24px;
}

body.classlings-app .header-view-switch :is(#navTodayBtn, #navLeaderboardBtn) span {
    display: var(--cla-view-word) !important;
    max-width: none;
}

/* The class has no chip in this look (its name is the title): Switch class in the menu opens its
   list, above the bar at the right. */
body.classlings-app .app-header #headerClassInfo {
    display: none !important;
}

body.classlings-app .app-header .class-switcher-wrapper {
    position: fixed;
    right: var(--cla-gutter);
    bottom: calc(var(--cla-dock) + 16px);
    width: 0;
    height: 0;
}

body.classlings-app .class-switcher-menu {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--cla-dock) - 48px);
    overflow-y: auto;
}

/* Tables and Search sit together; Tables opens its menu upwards (tables-workflow.js). */
body.classlings-app #tableChipsContainer.table-chips-container {
    flex: none;
    gap: 8px;
}

body.classlings-app .app-header .tables-dropdown-btn > svg:first-child {
    display: var(--cla-tables-icon);
}

body.classlings-app .app-header .tables-dropdown-label {
    display: var(--cla-tables-word) !important;
    max-width: none;
}

body.classlings-app .app-header .tables-dropdown-btn {
    gap: 4px;
}

body.classlings-app .app-header .tables-dropdown-btn .dropdown-arrow {
    display: var(--cla-tables-word) !important;
    width: 16px;
    height: 16px;
    max-width: none;
    stroke-width: 2.8;
    transform: rotate(180deg);
}

body.classlings-app .app-header .tables-dropdown-btn.open {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .app-header .tables-dropdown-btn.open .dropdown-arrow {
    transform: none;
}

/* A short line between the groups of tools, as in the reviewed bar. */
body.classlings-app .app-header :is(.pupil-header-search, .cla-last-point) {
    position: relative;
    margin-left: var(--cla-sep);
}

body.classlings-app .app-header :is(.pupil-header-search, .cla-last-point)::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: calc((var(--cla-tool-gap) + var(--cla-sep) + var(--cla-edge)) / -2);
    width: var(--cla-edge);
    background: var(--cla-wash-2);
    border-radius: var(--cla-edge);
}

body.classlings-app .app-header .pupil-header-search {
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
    cursor: text;
}

body.classlings-app .app-header .pupil-header-search > svg {
    color: var(--cla-ink);
    stroke-width: 2.8;
}

body.classlings-app .app-header .pupil-header-search:not(.has-query) .pupil-header-search-clear {
    display: none;
}

/* Clearing the search: the standard's cross square (44 px, corners 14, a 3 px ink edge) with the Menu's
   pixel cross (8 x 7 art at 24 x 21), not a typed one. */
body.classlings-app .app-header .pupil-header-search.has-query .pupil-header-search-clear {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--ctl-x);
    min-width: var(--ctl-x);
    height: var(--ctl-x);
    margin: 0;
    padding: 0;
    font-size: 0;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--cla-ink);
    border-radius: var(--ctl-x-r);
    box-shadow: none;
    opacity: 1;
}

body.classlings-app .app-header .pupil-header-search-clear:hover {
    background: var(--cla-wash);
}

body.classlings-app .app-header .pupil-header-search-clear svg {
    width: 24px;
    height: 21px;
}

body.classlings-app .app-header .pupil-header-search input {
    width: 72px;
    min-width: 0;
    max-width: none;
    font: 600 var(--cla-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    background: transparent;
    border: 0;
    outline: 0;
    opacity: 1;
    pointer-events: auto;
}

body.classlings-app .app-header .pupil-header-search input::placeholder {
    color: var(--cla-ink);
    opacity: 1;
}

body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query) {
    background: var(--cla-wash);
}

body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query) input {
    width: 120px;
}

body.classlings-app .app-header .pupil-header-search:focus-within {
    border-color: var(--cla-grape-deep);
}

/* The last point and its Undo. The point is a sign as well as a colour: plus green, minus red. */
body.classlings-app .app-header .cla-last-point {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

body.classlings-app .app-header .cla-last-point[hidden] {
    display: none;
}

body.classlings-app .cla-last {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: calc(var(--cla-tap) + 12px);
    max-width: 210px;
    margin: 0;
    padding: 0 4px 0 12px;
    overflow: hidden;
    font: 600 var(--cla-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    white-space: nowrap;
}

body.classlings-app .cla-last.is-empty {
    display: none;
}

body.classlings-app .cla-last-who {
    display: var(--cla-last-who);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.classlings-app .cla-last-n {
    display: var(--cla-last-n);
    flex: none;
    place-items: center;
    min-width: 44px;
    height: 34px;
    padding: 0 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--cla-lime);
    border: 2px solid var(--cla-lime-deep);
    border-radius: var(--cla-r-s);
}

body.classlings-app .cla-last-n.is-minus {
    background: var(--cla-minus);
    border-color: var(--cla-minus-deep);
}

body.classlings-app .app-header .cla-undo > span {
    display: var(--cla-undo-word);
}

body.classlings-app .app-header .cla-undo:disabled {
    color: var(--cla-ink-2);
    opacity: 0.45;
    cursor: default;
}

/* Menu, then the Showdown sign at the end. In two rows, Choose, the sign and Menu each take their own
   place on the second row, in the order the keyboard reaches them. */
body.classlings-app .app-header .header-actions {
    display: var(--cla-ends);
    flex: none;
    align-items: flex-end;
    gap: var(--cla-gap);
    margin: 0;
}

/* With nothing in it (on Settings), the group takes no room, so Back lines up with the gutter. */
body.classlings-app .app-header .header-actions:not(:has(> :not([hidden], [style*="display: none"]))) {
    display: none;
}

body.classlings-app .app-header .more-menu-wrapper {
    order: var(--cla-menu-order);
}

body.classlings-app .app-header .start-battle-btn {
    order: var(--cla-sign-order);
}

/* Choose Classlings, before Menu, until everyone has picked a favourite (classlings-chooser.js);
   then it's in the menu. Its count is a gold badge on the corner. */
body.classlings-app .app-header .clc-open[hidden],
body.classlings-app .app-header .clc-open .clc-open-label {
    display: none;
}

body.classlings-app .app-header .clc-open > .cla-only {
    display: block;
}

body.classlings-app .app-header .clc-open > span.cla-only {
    display: var(--cla-choose-word);
}

body.classlings-app .app-header .clc-open .clc-count {
    position: absolute;
    top: -12px;
    right: calc(var(--cla-gap) / -2 - 2px);
    min-width: 32px;
    padding: 4px 8px;
    font: 700 16px / 1 var(--cla-display);
    color: var(--cla-ink);
    text-align: center;
    background: var(--cla-gold);
    border: 2px solid var(--cla-ink);
    border-radius: var(--cla-r-s);
}

body.classlings-app .app-header .clc-open .clc-count[hidden] {
    display: none;
}

/* Showdown: Pixel Quest's gold sign, kept small so it sits calmly at the end of the bar. Square corners
   stepped in pixels, an ink outline, a hard shadow as deep as the squares' base, and a Classling at
   each end. Its face is centred on the bar's middle line. */
body.classlings-app .app-header .start-battle-btn {
    flex: none;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: var(--cla-sign-h);
    margin: var(--cla-px) var(--cla-px) calc(var(--cla-lift) + (var(--cla-square) - var(--cla-sign-h)) / 2);
    padding: 0 var(--cla-sign-pad);
    color: var(--cla-ink);
    background: var(--cla-gold);
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 0 var(--cla-px) 0 var(--cla-gold-light),
        inset 0 calc(var(--cla-px) * -2) 0 var(--cla-gold-deep),
        var(--cla-ring),
        0 calc(var(--cla-px) + var(--cla-lift)) 0 var(--cla-ink);
    transform: none;
    cursor: pointer;
    transition: transform 460ms cubic-bezier(0.28, 1.9, 0.5, 1), box-shadow 460ms cubic-bezier(0.28, 1.9, 0.5, 1);
}

body.classlings-app .app-header .start-battle-btn:hover {
    background: var(--cla-gold);
    transform: none;
    box-shadow:
        inset 0 var(--cla-px) 0 var(--cla-gold-light),
        inset 0 calc(var(--cla-px) * -2) 0 var(--cla-gold-deep),
        var(--cla-ring),
        0 calc(var(--cla-px) + var(--cla-lift)) 0 var(--cla-ink);
}

body.classlings-app .app-header .start-battle-btn:active {
    transform: translateY(var(--cla-lift));
    box-shadow:
        inset 0 var(--cla-px) 0 var(--cla-gold-light),
        inset 0 calc(var(--cla-px) * -2) 0 var(--cla-gold-deep),
        var(--cla-ring),
        0 var(--cla-px) 0 var(--cla-ink);
    transition-duration: 70ms;
}

body.classlings-app .app-header .start-battle-btn > :not(.cla-only) {
    display: none;
}

/* The two Classlings stand on the sign's darker foot; the word, in the logo's dress at scale 2, sits
   in the middle of the gold above it. */
body.classlings-app .app-header .start-battle-btn .cla-sign-who {
    display: var(--cla-sign-who);
    flex: none;
    align-self: flex-end;
    width: 32px;
    height: 40px;
    margin-bottom: 6px;
    image-rendering: pixelated;
}

body.classlings-app .app-header .start-battle-btn .cla-sign-word {
    --title-scale: 2;
    display: block;
    max-width: none;
    margin-top: var(--cla-px);
    overflow: visible;
    line-height: 0;
}

body.classlings-app .app-header .start-battle-btn .cla-sign-word svg {
    display: block;
    width: calc(var(--title-scale) * var(--w) * 1px);
    height: calc(var(--title-scale) * var(--h) * 1px);
}

/* Focus: a thick ink ring, clear on white, sky and gold alike. */
body.classlings-app .app-header :is(a, button):focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

body.classlings-app .app-header .start-battle-btn:focus-visible {
    outline-offset: calc(var(--cla-px) + 4px);
}

/* ---------------------------------------------------------------- menus, opening upwards from the bar */

body.classlings-app :is(.class-switcher-menu, .tables-dropdown-menu, .more-menu-dropdown) {
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: var(--cla-float);
    padding: 8px;
}

/* Wide enough for its longest row on one line: "Reset everyone's points..." with "to 15" beside it. */
body.classlings-app .more-menu-dropdown {
    top: auto;
    bottom: calc(100% + 16px);
    right: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--cla-dock) - 32px);
    overflow-y: auto;
    display: grid;
    gap: 2px;
}

body.classlings-app .more-menu-dropdown.hidden {
    display: none;
}

body.classlings-app :is(.class-switcher-option, .table-dropdown-item, .more-menu-item) {
    font-family: var(--cla-display);
    font-weight: 600;
    border-radius: var(--cla-r-m);
}

/* A row: the standard's menu row (56 px, 20 px words). */
body.classlings-app .more-menu-item,
body.classlings-app .more-menu-item.sync-menu-item {
    min-height: var(--ctl-row-h);
    height: auto;
    gap: 12px;
    padding: 0 16px;
    font: var(--ctl-font);
    color: var(--cla-ink);
}

body.classlings-app .more-menu-item.cla-only {
    display: flex;
}

body.classlings-app .more-menu-item svg {
    width: 24px;
    height: 24px;
}

body.classlings-app .cla-menu-note,
body.classlings-app .sync-menu-item .sync-text {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    font: 400 16px / 1.2 var(--cla-ui);
    color: var(--cla-ink-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.classlings-app :is(.class-switcher-option, .table-dropdown-item, .more-menu-item):hover,
body.classlings-app .more-menu-item.sync-menu-item:hover,
body.classlings-app .more-menu-item.sync-menu-item:focus-visible,
body.classlings-app .class-switcher-option:focus-visible {
    background: var(--cla-wash);
}

body.classlings-app .more-menu-item:disabled:hover {
    background: transparent;
}

body.classlings-app .more-menu-divider {
    height: var(--cla-edge);
    margin: 4px 12px;
    background: var(--cla-wash-2);
    border-radius: var(--cla-edge);
}

/* Sync isn't in this look's menu: the strip's notice says when something's wrong, with Try again. The
   sync code and its details stay (app.js) for classes without Classlings, and for Settings later. */
body.classlings-app #syncIndicator,
body.classlings-app #syncStatusPopover {
    display: none !important;
}

/* Reset All is "Reset everyone's points..." here, with a sunrise, in ink, and what they go back to on the
   right ("to 15", app.js): it sends everyone back to their starting points, and the day's points stay in
   the history. */
body.classlings-app #resetAllBtn {
    color: var(--cla-ink);
}

body.classlings-app #resetAllBtn > :not(.cla-only) {
    display: none;
}

body.classlings-app #resetAllBtn > svg.cla-only {
    display: block;
}

body.classlings-app #resetAllBtn > span.cla-only {
    display: inline;
}

/* Player cards aren't part of Classlings: they stay with ClassSlate's files for classes without it, and
   this menu has no way in (nor its line, which would double the one before it). */
body.classlings-app #playerCardsBtn,
body.classlings-app #playerCardsBtn + .more-menu-divider {
    display: none;
}

/* Today's More dot: the strip's notice says when something's wrong. */
body.classlings-app .more-sync-dot {
    display: none;
}

body.classlings-app .class-switcher-option {
    min-height: var(--ctl-row-h);
    padding: 8px 12px;
}

body.classlings-app .class-switcher-name {
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .class-switcher-count {
    font: 400 15px / 1.2 var(--cla-ui);
    color: var(--cla-ink-2);
}

body.classlings-app .class-switcher-option[aria-selected="true"] {
    color: var(--cla-ink);
    background: var(--cla-grape-tint);
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-grape-deep);
}

/* The chosen class's tick is the kit's pixel tick (app.js), like the look's other ticks. */
body.classlings-app .class-switcher-check {
    display: grid;
    place-items: center;
}

/* ---------------------------------------------------------------- the list of classes, before one is open */

/* When the teacher hasn't opened a class on this computer before: the strip asks "Pick a class" in the
   lettering, and the classes are rounded rows on a white panel, as in the Menu's Switch class, each
   with its pupils. One tap opens a class. Home (to make or change classes) is the gold button. */
body.classlings-app.cla-picking #classScreen .screen-content {
    padding: 24px var(--cla-gutter) calc(var(--cla-dock) + 24px);
}

body.classlings-app.cla-picking .class-selection-container {
    width: min(560px, 100%);
    max-width: none;
    margin: 0 auto;
}

body.classlings-app.cla-picking .class-selection-container > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Its heading: "Pick a class" in the lettering (the bar isn't showing yet), over the list. */
body.classlings-app.cla-picking .cla-pick-title {
    display: block;
    max-width: 100%;
    margin: 0 0 16px;
    overflow: hidden;
    line-height: 0;
}

body.classlings-app.cla-picking .cla-pick-title svg {
    display: block;
    width: calc(3px * var(--w));
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
}

body.classlings-app.cla-picking #savedClasses {
    display: grid;
    gap: 4px;
    margin: 0 0 24px;
    padding: 8px;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
}

body.classlings-app.cla-picking .cla-pick-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 8px 16px;
    font: inherit;
    color: var(--cla-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--cla-r-m);
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

body.classlings-app.cla-picking .cla-pick-row:hover {
    background: var(--cla-wash);
    box-shadow: none;
    transform: none;
}

body.classlings-app.cla-picking .cla-pick-row:focus-visible {
    background: var(--cla-wash);
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

body.classlings-app.cla-picking .cla-pick-row:active {
    background: var(--cla-grape-tint);
}

body.classlings-app.cla-picking .cla-pick-name {
    flex: 1;
    min-width: 0;
    font: 600 22px / 1.2 var(--cla-display);
    overflow-wrap: anywhere;
}

body.classlings-app.cla-picking .cla-pick-count {
    flex: none;
    font: 400 16px / 1.2 var(--cla-ui);
    color: var(--cla-ink-2);
}

body.classlings-app.cla-picking .cla-pick-empty {
    display: grid;
    gap: 4px;
    padding: 24px 16px;
    text-align: center;
    font: 400 18px / 1.4 var(--cla-ui);
    color: var(--cla-ink-2);
}

body.classlings-app.cla-picking .cla-pick-empty p {
    margin: 0;
}

body.classlings-app.cla-picking .cla-pick-empty-title {
    font: 600 24px / 1.2 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app.cla-picking .class-actions {
    display: flex;
    justify-content: center;
}

/* Manage Classes only said that classes are made on Home: Home is the button. */
body.classlings-app.cla-picking #manageClassesBtn {
    display: none;
}

body.classlings-app.cla-picking #goToDashboardBtn {
    gap: 12px;
    min-height: 56px;
    margin: 0 0 var(--cla-lift);
    padding: 0 28px;
    font: 600 20px / 1 var(--cla-display);
    color: var(--cla-ink);
    text-decoration: none;
    background: var(--cla-gold);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-m);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
    transform: none;
}

body.classlings-app.cla-picking #goToDashboardBtn:hover {
    background: var(--cla-gold-light);
}

body.classlings-app.cla-picking #goToDashboardBtn:active {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
}

body.classlings-app.cla-picking #goToDashboardBtn:focus-visible {
    outline: 4px solid var(--cla-ink);
    outline-offset: 4px;
}

body.classlings-app.cla-picking #goToDashboardBtn > :is(svg:not(.cla-only), .cla-hide-in-look) {
    display: none;
}

body.classlings-app.cla-picking #goToDashboardBtn > .cla-only {
    display: block;
}

/* The bar's pixel house, 8 art pixels at 24 px. */
body.classlings-app.cla-picking #goToDashboardBtn > svg.cla-only {
    width: 24px;
    height: 24px;
}

/* Nothing in the bar works without a class: no bar, and no Home square (Home is the gold button). */
body.classlings-app.cla-picking #app > .app-header {
    display: none;
}

/* ---------------------------------------------------------------- messages, kept clear of the bar */

body.classlings-app .toast-container {
    bottom: calc(var(--cla-dock) + 20px);
}

/* A table's point says so in the same ink pill, with no box and no confetti. While the Tables menu is
   open the pill stands just above the menu, never over it (utils.js showTablePointMessage places it);
   with the menu shut it's an ordinary message. A pupil's point has no message in this look: the card
   shows it (classlings-board.css). */
body.classlings-app .cla-table-message {
    position: fixed;
    z-index: 1010;
    max-width: calc(100vw - var(--cla-gutter) * 2);
    pointer-events: none;
}

/* Hidden means gone, with a button or without: .has-action's display: flex below must not bring back an empty
   ink dot when the message is hidden (seen at the school laptop's size, 13 October). */
body.classlings-app .cla-table-message[hidden],
body.classlings-app .cla-table-message.has-action[hidden] {
    display: none;
}

/* A message with a button (Undo, for a table that has just been removed) is the one that can be pressed:
   the same small ink pill, with the button at its end. */
body.classlings-app .cla-table-message.has-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 6px;
    pointer-events: auto;
}

body.classlings-app .cla-table-message-btn {
    appearance: none;
    flex: none;
    min-height: 32px;
    padding: 0 14px;
    font: 600 15px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

body.classlings-app .cla-table-message-btn:focus-visible {
    outline: 4px solid var(--cla-gold);
    outline-offset: var(--ctl-focus-gap);
}

body.classlings-app .clc-tip {
    z-index: 1100;
}

/* ---------------------------------------------------------------- pop-ups */

body.classlings-app .modal-overlay {
    background: rgba(30, 27, 58, 0.55);
}

/* Any other pop-up in this look: the standard's panel (corners 28, a 3 px ink edge on a 6 px ink base). */
body.classlings-app .modal {
    background: var(--cla-card);
    border: var(--ctl-edge) solid var(--cla-ink);
    border-radius: var(--ctl-panel-r);
    box-shadow: 0 var(--ctl-lift) 0 var(--cla-ink);
}

body.classlings-app .modal-header {
    background: var(--cla-card);
    border-bottom: 2px solid var(--cla-wash-2);
}

body.classlings-app .modal-header h2 {
    font: 600 21px / 1.2 var(--cla-display);
}

/* Its cross: the standard's cross square in the box's corner, with the kit's pixel cross (not a typed ×). */
body.classlings-app .modal-close {
    display: grid;
    place-items: center;
    width: var(--ctl-x);
    min-width: var(--ctl-x);
    height: var(--ctl-x);
    padding: 0;
    font-size: 0;
    color: transparent;
    background: var(--cla-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%231e1b3a' d='M0 0h2v1h-2zM6 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h2v1h-2zM5 5h2v1h-2zM0 6h2v1h-2zM6 6h2v1h-2z'/%3E%3C/svg%3E") center / 24px 21px no-repeat;
    border: var(--ctl-edge) solid var(--cla-ink);
    border-radius: var(--ctl-x-r);
    box-shadow: none;
}

body.classlings-app .modal-close:hover {
    background-color: var(--cla-wash);
    transform: none;
}

body.classlings-app .modal-footer {
    border-top: 2px solid var(--cla-wash-2);
}

/* Their buttons: the standard's ordinary button (56 px, corners 20, a 3 px edge on a 6 px base), gold for
   the main action and danger red for one that wipes something. */
body.classlings-app .action-btn {
    --c-deep: var(--cla-ink);
    min-height: var(--ctl-h);
    margin-bottom: var(--ctl-lift);
    padding: var(--ctl-pad);
    font: var(--ctl-font);
    border: var(--ctl-edge) solid var(--c-deep);
    border-radius: var(--ctl-r);
    box-shadow: 0 var(--ctl-lift) 0 var(--c-deep);
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .action-btn:hover {
    transform: none;
    box-shadow: 0 var(--ctl-lift) 0 var(--c-deep);
}

body.classlings-app .action-btn:active {
    transform: translateY(var(--ctl-lift));
    box-shadow: 0 0 0 var(--c-deep);
    transition-duration: var(--ctl-press);
}

body.classlings-app .action-btn.primary {
    --c-deep: var(--cla-gold-deep);
    color: var(--cla-ink);
    background: var(--cla-gold);
}

body.classlings-app .action-btn.primary:hover {
    background: var(--cla-gold-light);
}

body.classlings-app :is(.action-btn.secondary, .action-btn.tertiary) {
    color: var(--cla-ink);
    background: var(--cla-page);
}

body.classlings-app :is(.action-btn.secondary, .action-btn.tertiary):hover {
    background: var(--cla-wash);
}

body.classlings-app .action-btn.danger {
    --c-deep: var(--ctl-danger-deep);
    color: var(--cla-ink);
    background: var(--ctl-danger);
}

body.classlings-app .action-btn:focus-visible,
body.classlings-app .modal-close:focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

/* Back to the start, and starting a Showdown, ask first in the look's own dialog: a rounded white
   panel on an ink edge and base, a picture (the sunrise, or Kit facing Cub), a Fredoka title, plain
   words, and Not now beside the gold answer. */
body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .modal {
    max-width: min(440px, calc(100vw - 32px));
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .modal-header {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 24px 24px 0;
    background: none;
    border: 0;
}

/* The Menu item's pixel sunrise: 12 art pixels at 24px inside the circle, so every pixel is whole. */
body.classlings-app #confirmResetModal .cla-new-day {
    display: block;
    width: 48px;
    height: 48px;
    padding: 10px;
    color: var(--cla-ink);
    background: var(--cla-gold-tint);
    border: 2px solid var(--cla-gold-deep);
    border-radius: 50%;
}

/* The Showdown sign's pair, standing still, on the sign's gold. The question itself takes the focus
   (Enter starts it), and its edge already shows where it is. */
body.classlings-app #confirmShowdownModal .cla-showdown-pair {
    display: block;
    width: 104px;
    height: 56px;
    background: var(--cla-gold-tint);
    border: 2px solid var(--cla-gold-deep);
    border-radius: var(--cla-r-m);
}

body.classlings-app #confirmShowdownModal .modal:focus {
    outline: none;
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .modal-header h2 {
    font: 600 28px / 1.15 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .modal-body {
    padding: 8px 24px 0;
}

/* (A class's or a pupil's name in the words, as in "<name>'s tables all go back to 0 points.", breaks rather than run out of the box.) */
body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .modal-body p {
    margin: 0;
    font: 400 18px / 1.45 var(--cla-ui);
    color: var(--cla-ink-2);
    overflow-wrap: anywhere;
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px;
    background: none;
    border: 0;
}

/* The answers: the standard's ordinary buttons (shared/css/classlings-controls.css), "Not now" white on the
   left and the action on the right: gold, or danger red when it wipes something (Back to the start sends
   everyone back to their starting points). */
body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn {
    --c: var(--cla-page);
    --c-deep: var(--cla-ink);
    flex: 1 1 auto;
    min-height: var(--ctl-h);
    margin: 0 0 var(--ctl-lift);
    padding: 0 20px;
    font: var(--ctl-font);
    color: var(--cla-ink);
    white-space: nowrap;
    background: var(--c);
    border: var(--ctl-edge) solid var(--c-deep);
    border-radius: var(--ctl-r);
    box-shadow: 0 var(--ctl-lift) 0 var(--c-deep);
    transform: none;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn.secondary:hover {
    background: var(--cla-wash);
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn.primary {
    --c: var(--ctl-gold);
    --c-deep: var(--ctl-gold-deep);
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn.primary:hover {
    background: var(--cla-gold-light);
}

body.classlings-app #confirmResetModal #confirmReset,
body.classlings-app #confirmResetModal #confirmReset:hover,
body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn.danger,
body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn.danger:hover {
    --c: var(--ctl-danger);
    --c-deep: var(--ctl-danger-deep);
    background: var(--c);
}

body.classlings-app :is(#confirmResetModal, #confirmShowdownModal, #cupAskModal) .action-btn:active {
    transform: translateY(var(--ctl-lift));
    box-shadow: 0 0 0 var(--c-deep);
    transition-duration: var(--ctl-press);
    transition-timing-function: ease-out;
}

/* ---------------------------------------------------------------- narrower screens */

/* While Choose Classlings is in the bar (until everyone has picked a favourite), Search folds to its
   icon to make room, and opens over the toolbar while you type. */
body.classlings-app .app-header:has(.clc-open:not([hidden])) .pupil-header-search:not(.is-expanded, .has-query) input {
    display: none;
}

body.classlings-app .app-header:has(.clc-open:not([hidden])) .pupil-header-search:is(.is-expanded, .has-query) {
    position: absolute;
    inset: var(--cla-pad);
    z-index: 2;
    justify-content: flex-start;
    margin: 0;
    background: var(--cla-page);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .app-header:has(.clc-open:not([hidden])) .pupil-header-search:is(.is-expanded, .has-query)::before {
    display: none;
}

body.classlings-app .app-header:has(.clc-open:not([hidden])) .pupil-header-search:is(.is-expanded, .has-query) input {
    flex: 1;
    width: 0;
}

/* ---------------------------------------------------------------- the bar at every width */

/* The bar stays one row for as long as it fits, giving up room a step at a time as the window
   narrows. Each step starts where the one before stops fitting with Choose Classlings in the bar and
   a last point ("+1 Remy B.") beside Undo:
     1. less room round and between things;
     2. smaller squares and words (never under 48 px to press);
     3. the Showdown sign without its two Classlings;
     4. Search, Undo and Choose as their pictures;
     5. Tables as its picture, and tighter still;
     6. the last point without its name (just its +1);
     7. Points and Leaderboard as their pictures, the last to lose their words.
   Then it takes two rows (further down). A longer name than usual folds to fit; Undo always says what
   it takes back to screen readers (its label). */
@media (max-width: 1347px) {
    body.classlings-app {
        --cla-gutter: 24px;
        --cla-gap: 12px;
    }
}

@media (max-width: 1315px) {
    body.classlings-app {
        --cla-tap: 48px;
        --cla-pad: 5px;
        --cla-switch-pad: 2px;
        --cla-word: 18px;
        --cla-square-icon: 24px;
        /* The squares are 64 px from here (the bar's height), with the standard's 20 px corners. */
        --cla-square-r: var(--ctl-r);
    }
}

@media (max-width: 1235px) {
    body.classlings-app {
        --cla-sign-who: none;
        --cla-sign-pad: calc(var(--cla-px) * 2);
    }
}

@media (max-width: 1171px) {
    body.classlings-app {
        --cla-undo-word: none;
        --cla-choose-word: none;
    }

    /* Search is its picture, and opens over the toolbar while you type. */
    body.classlings-app .app-header .pupil-header-search:not(.is-expanded, .has-query) input {
        display: none;
    }

    body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query) {
        position: absolute;
        inset: var(--cla-pad);
        z-index: 2;
        justify-content: flex-start;
        margin: 0;
        background: var(--cla-page);
        border-color: var(--cla-grape-deep);
    }

    body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query)::before {
        display: none;
    }

    body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query) input {
        display: block;
        flex: 1;
        width: 0;
    }
}

/* Open over the toolbar while you type, Search is the toolbar: it covers it edge to edge with one clean
   border (purple while you type), no second ring inside it and no outline round it. */
body.classlings-app .app-header:has(.clc-open:not([hidden])) .pupil-header-search:is(.is-expanded, .has-query) {
    inset: calc(-1 * var(--cla-edge));
    height: auto;
    padding: 0 calc(var(--cla-pad) + var(--cla-edge) + 12px);
    border-color: var(--cla-ink);
    border-radius: var(--cla-r-l);
}

body.classlings-app .app-header:has(.clc-open:not([hidden])) .pupil-header-search:is(.is-expanded, .has-query):focus-within {
    border-color: var(--cla-grape-deep);
}

@media (max-width: 1171px) {
    body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query) {
        inset: calc(-1 * var(--cla-edge));
        height: auto;
        padding: 0 calc(var(--cla-pad) + var(--cla-edge) + 12px);
        border-color: var(--cla-ink);
        border-radius: var(--cla-r-l);
    }

    body.classlings-app .app-header .pupil-header-search:is(.is-expanded, .has-query):focus-within {
        border-color: var(--cla-grape-deep);
    }
}

@media (max-width: 1098px) {
    body.classlings-app {
        --cla-gutter: 16px;
        --cla-gap: 8px;
        --cla-tool-gap: 6px;
        --cla-sep: 8px;
        --cla-tables-word: none;
        --cla-tables-icon: block;
    }
}

@media (max-width: 1004px) {
    body.classlings-app {
        --cla-last-who: none;
    }
}

@media (max-width: 933px) {
    body.classlings-app {
        --cla-view-word: none;
        --cla-view-icon: block;
    }
}

/* Two rows, once one won't fit: the toolbar across a row of its own, and Home, Choose, the Showdown
   sign and Menu spread along the row below in the order the keyboard reaches them, with the words
   and the last point's name back. Choose Classlings, while it's in the bar, makes this start sooner.
   (The two blocks set the same things: keep them in step.) */
@media (max-width: 825px) {
    body.classlings-app:where(:has(#chooseClasslingsBtn:not([hidden]))) {
        --cla-wrap: wrap;
        --cla-rows-gap: 12px;
        --cla-ends: contents;
        --cla-bar-justify: space-between;
        --cla-tools-order: -1;
        --cla-tools-flex: 1 1 100%;
        --cla-tools-margin: 0 0 var(--cla-lift);
        --cla-tools-justify: center;
        --cla-menu-order: 0;
        --cla-sign-order: 0;
        --cla-view-word: inline;
        --cla-view-icon: none;
        --cla-tables-word: inline;
        --cla-tables-icon: none;
        --cla-undo-word: inline;
        --cla-choose-word: block;
        --cla-last-who: inline;
        --cla-sign-who: block;
        --cla-sign-pad: var(--cla-px);
        --cla-dock: calc(var(--cla-soil) + (var(--cla-lift) + var(--cla-bar)) * 2 + var(--cla-rows-gap) + var(--cla-name-extra));
        --cla-ground: calc(var(--cla-dock) + 24px);
    }
}

@media (max-width: 753px) {
    body.classlings-app {
        --cla-wrap: wrap;
        --cla-rows-gap: 12px;
        --cla-ends: contents;
        --cla-bar-justify: space-between;
        --cla-tools-order: -1;
        --cla-tools-flex: 1 1 100%;
        --cla-tools-margin: 0 0 var(--cla-lift);
        --cla-tools-justify: center;
        --cla-menu-order: 0;
        --cla-sign-order: 0;
        --cla-view-word: inline;
        --cla-view-icon: none;
        --cla-tables-word: inline;
        --cla-tables-icon: none;
        --cla-undo-word: inline;
        --cla-choose-word: block;
        --cla-last-who: inline;
        --cla-sign-who: block;
        --cla-sign-pad: var(--cla-px);
        --cla-dock: calc(var(--cla-soil) + (var(--cla-lift) + var(--cla-bar)) * 2 + var(--cla-rows-gap) + var(--cla-name-extra));
        --cla-ground: calc(var(--cla-dock) + 24px);
    }
}

/* Old rules for narrow screens fold the header's groups away and shrink its buttons to icons, some
   with !important; this look keeps its bar. */
@media (max-width: 760px) {
    body.classlings-app .app-header .header-left {
        display: flex !important;
    }

    body.classlings-app .app-header .header-actions {
        display: var(--cla-ends) !important;
    }

    body.classlings-app #tableChipsContainer.table-chips-container {
        display: flex !important;
    }

    body.classlings-app #tableChipsContainer.table-chips-container[style*="display: none"] {
        display: none !important;
    }

    body.classlings-app .app-header .start-battle-btn .cla-sign-word {
        display: block !important;
    }

    /* Choose Classlings stays in the bar (the old look moves it into More here). */
    body.classlings-app .app-header .clc-open:not([hidden]) {
        display: inline-grid !important;
    }

    body.classlings-app .clc-menu-item:not([data-everyone-chosen]) {
        display: none !important;
    }
}

/* Two rows with less room give up the same things in the same order: first the last point's name,
   then the words for Tables and Undo, and last the words for Points and Leaderboard (and Choose's). */
@media (max-width: 704px) {
    body.classlings-app {
        --cla-last-who: none;
    }
}

@media (max-width: 633px) {
    body.classlings-app {
        --cla-tables-word: none;
        --cla-tables-icon: block;
        --cla-undo-word: none;
    }
}

@media (max-width: 533px) {
    body.classlings-app {
        --cla-view-word: none;
        --cla-view-icon: block;
        --cla-choose-word: none;
    }
}

/* A phone: the class scrolls in two columns, the toolbar's tools are 48 px squares, and the second
   row is a little smaller, with the sign to match. */
@media (max-width: 497px) {
    body.classlings-app {
        --cla-gutter: 12px;
        --cla-gap: 6px;
        --cla-tool-gap: 4px;
        --cla-sep: 4px;
        --cla-pad: 4px;
        --cla-square: var(--ctl-square-phone);
        --cla-square-r: var(--ctl-r);
        --cla-square-icon: 24px;
        --cla-sign-h: 48px;
        --cla-sign-who: none;
        --cla-sign-pad: var(--cla-px);
        --cla-dock: calc(var(--cla-soil) + var(--cla-lift) + var(--cla-bar) + var(--cla-rows-gap) + var(--cla-px) + var(--cla-sign-h) + var(--cla-lift) + (var(--cla-square) - var(--cla-sign-h)) / 2 + var(--cla-name-extra));
    }

    body.classlings-app #todayScreen #pupilsGrid.classlings-board {
        gap: 8px;
    }

    body.classlings-app .header-view-switch {
        gap: 2px;
    }

    body.classlings-app .header-view-switch :is(#navTodayBtn, #navLeaderboardBtn),
    body.classlings-app .app-header :is(.tables-dropdown-btn, .pupil-header-search, .cla-undo) {
        padding: 0 calc((var(--cla-tap) - 24px - var(--cla-edge) * 2) / 2);
    }

    body.classlings-app .cla-last {
        min-width: 0;
        padding: 0 0 0 4px;
    }

    /* Menu's list spans the screen above the bar. */
    body.classlings-app .more-menu-dropdown {
        position: fixed;
        left: var(--cla-gutter);
        right: var(--cla-gutter);
        bottom: calc(var(--cla-dock) + 12px);
        width: auto;
    }
}

/* The smallest phones: the +1 goes (Undo's label still says it). */
@media (max-width: 365px) {
    body.classlings-app {
        --cla-last-n: none;
    }
}

/* Phones: Choose Classlings moves into Menu, which carries its count instead, so Home, the Showdown sign
   and Menu keep the standard's 64 px squares on one row. */
@media (max-width: 409px) {
    body.classlings-app .app-header .clc-open:not([hidden]) {
        display: none !important;
    }

    body.classlings-app .clc-menu-item:not([data-everyone-chosen]):not([hidden]) {
        display: flex !important;
    }

    body.classlings-app .app-header .more-menu-btn[data-clc-left]::after {
        content: attr(data-clc-left) / "";
        position: absolute;
        top: -10px;
        right: -8px;
        min-width: 28px;
        padding: 3px 6px;
        font: 700 14px / 1 var(--cla-display);
        color: var(--cla-ink);
        text-align: center;
        background: var(--cla-gold);
        border: 2px solid var(--cla-ink);
        border-radius: var(--cla-r-s);
    }
}

/* The Menu on a laptop's height: two columns of the same 56 px rows, so all of them show at once (the
   teacher's note, 5 Oct) and every row keeps the standard's size. Each row has its place, so the columns
   line up (the teacher, 15 October: each column's own line took a whole row, at different heights, and left
   gaps): Badges, the class and Pause on the left and sounds and Settings on the right, then one line across
   the menu, then Undo and History on the left and Reset everyone's points on the right. */
@media (max-height: 680px) and (min-width: 760px) {
    body.classlings-app .more-menu-dropdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        column-gap: 8px;
        width: min(744px, calc(100vw - 32px));
    }

    body.classlings-app .more-menu-dropdown > #achievementsBtn { grid-area: 1 / 1; }
    body.classlings-app .more-menu-dropdown > #switchClassMenuItem { grid-area: 2 / 1; }
    body.classlings-app .more-menu-dropdown > #pauseClasslingsMenuItem { grid-area: 3 / 1; }
    body.classlings-app .more-menu-dropdown > #pointSoundsToggle { grid-area: 1 / 2; }
    body.classlings-app .more-menu-dropdown > #settingsBtn { grid-area: 2 / 2; }
    body.classlings-app .more-menu-dropdown > #syncStatusPopover + .more-menu-divider { grid-area: 4 / 1 / 5 / 3; }
    body.classlings-app .more-menu-dropdown > #undoBtn { grid-area: 5 / 1; }
    body.classlings-app .more-menu-dropdown > #hpHistoryBtn { grid-area: 6 / 1; }
    body.classlings-app .more-menu-dropdown > #resetAllBtn { grid-area: 5 / 2; }

    body.classlings-app .more-menu-dropdown > :is(#achievementsBtn, #settingsBtn) + .more-menu-divider {
        display: none;
    }
}