/* ========================================
   Tables, in the Classlings look
   ======================================== */
/* The reviewed design's Tables (design-directions/directions/mix/tables.html, and the menu in
   cup.html): the menu that opens upwards from Tables in the bar (js/tablesMenu.js), the room for
   setting up and managing tables (js/tablesRoom.js), and the table badge on each card
   (js/classlings-board.js). Every rule is for the look only (body.classlings-app); other classes keep
   today's screens.

   A table's colours come in as --tab, --tab-deep, --tab-tint and --tab-ink (js/tableLook.js). */

body.classlings-app {
    --tl-floor: #f4ead6;
    --tl-floor-edge: #dcc8a2;
    --tl-seat: 72px;
    --tl-body: var(--cla-ui);
}

/* ---------------------------------------------------------------- a table's badge */

/* Its emblem (or number) on white, edged in the table's deeper colour; a swatch when it has neither. */
body.classlings-app .tl-badge {
    box-sizing: border-box;
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: 2px solid var(--tab-deep);
    border-radius: var(--cla-r-s);
}

body.classlings-app .tl-badge svg {
    display: block;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

body.classlings-app .tl-badge b {
    font: 700 20px / 1 var(--cla-display);
}

body.classlings-app .tl-badge.is-swatch {
    background: var(--tab);
}

/* ---------------------------------------------------------------- the menu */

/* Opens upwards from Tables in the bar, at the page's gutter, with a tail pointing at Tables
   (tables-workflow.js places it). No scrim: the cards stay in view. */
body.classlings-app .tables-dropdown-menu.tm {
    /* Its design's width in px: room for three tables to a line, each just wide enough for a name like
       Butterflies beside its points, so no row has a gap down its middle (the teacher, 15 October).
       tables-workflow.js reads it. */
    --tm-design: 1080;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Its design's width, unless its edge would cut one of the board's cards (tables-workflow.js). */
    width: var(--tm-width, min(calc(var(--tm-design) * 1px), calc(100vw - var(--cla-gutter) * 2)));
    max-width: none;
    /* No taller than the room above the bar (tables-workflow.js): the rows scroll inside it. */
    max-height: var(--tables-dropdown-max-height, 80vh);
    padding: 12px 24px 16px;
    overflow: visible;
    border-radius: 44px;
}

body.classlings-app .tables-dropdown-menu.tm.is-empty {
    --tm-design: 720;
    padding: 24px 32px;
}

body.classlings-app .tables-dropdown-menu.tm.opens-up::after {
    content: '';
    position: absolute;
    left: clamp(36px, calc(var(--tm-tail, 50%) - 11px), calc(100% - 58px));
    bottom: -14px;
    width: 22px;
    height: 22px;
    background: var(--cla-page);
    border-right: var(--cla-edge) solid var(--cla-ink);
    border-bottom: var(--cla-edge) solid var(--cla-ink);
    transform: rotate(45deg);
}

body.classlings-app .tm .tm-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    color: var(--cla-ink);
}

/* The title line: Tables, what to do, Change tables and Seats and tables, then the Table showdown. What
   to do takes what room is left (two short lines on the school laptop); a narrower window drops it, then
   puts the two buttons on a line of their own (the media queries below). */
body.classlings-app .tm .tm-head {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
}

body.classlings-app .tm .tm-head h2 {
    margin: 0;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .tm .tm-head p {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font: 400 18px / 1.3 var(--tl-body);
    color: var(--cla-ink-2);
}

/* Change tables and Seats and tables, side by side at the header's right. */
body.classlings-app .tm .tm-tools {
    display: flex;
    flex: none;
    gap: 12px;
    margin-left: auto;
}

/* The standard's quiet buttons (48 px, a pale edge, no lift). */
body.classlings-app .tm .tm-setup {
    appearance: none;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: var(--ctl-small-h);
    padding: 0 16px;
    font: var(--ctl-small-font);
    color: var(--cla-ink);
    white-space: nowrap;
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2);
    border-radius: var(--ctl-r);
    cursor: pointer;
}

body.classlings-app .tm .tm-setup:is(:hover, :active) {
    background: var(--cla-wash);
}

/* A slim row for each table, three to a line (two lines for six tables, four for twelve). When they don't
   all fit above the bar, the rows scroll and Change tables, Seats and tables and the Table showdown stay
   in view. The 8px of room round them (taken back by the margin) keeps a chosen row's ring whole on every
   side, and a row scrolled into view brings its ring with it. */
body.classlings-app .tm .tm-rows {
    display: grid;
    flex: 0 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    min-height: 0;
    margin: -8px;
    padding: 8px;
    overflow-y: auto;
    list-style: none;
    scroll-padding-block: 8px;
}

body.classlings-app .tm .tm-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto var(--ctl-small-h) var(--ctl-small-h);
    align-items: center;
    gap: 12px;
    padding: 4px 8px 0;
    color: var(--cla-ink);
    background: var(--tab-tint);
    border: var(--cla-edge) solid var(--tab-deep);
    border-radius: var(--cla-r-m);
    cursor: default;
}

/* A class that only gives points: just the plus, and the name has the minus's room. */
body.classlings-app .tm .tm-row.is-give-only {
    grid-template-columns: auto minmax(0, 1fr) auto var(--ctl-small-h);
}

body.classlings-app .tm .tm-row:hover {
    background: var(--tab-tint);
}

/* The table chosen with the keyboard (Space+T, Space+arrows) or by a tap: an ink ring round the row,
   and no thin line inside it from today's menu. */
body.classlings-app .tm .tm-row.keyboard-table-selected {
    outline: 4px solid var(--cla-ink);
    outline-offset: 2px;
    box-shadow: none;
}

body.classlings-app .tm .tm-row .tl-badge {
    margin-bottom: 4px;
}

body.classlings-app .tm .tm-name {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin-bottom: 4px;
    font: 600 24px / 1.05 var(--cla-display);
}

/* A long name goes onto a second line: it's never cut off with "…". */
body.classlings-app .tm .tm-name-text {
    overflow-wrap: anywhere;
    text-wrap: balance;
}

body.classlings-app .tm .tm-name small {
    font: 600 14px / 1 var(--cla-display);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

body.classlings-app .tm .tm-pts {
    display: grid;
    justify-items: end;
    gap: 2px;
    margin-bottom: 4px;
    font: 600 14px / 1 var(--cla-display);
}

body.classlings-app .tm .tm-pts b {
    font: 700 36px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
}

/* Minus and plus: the standard's plus and minus (48 px white squares on a 4 px ink base that sinks when
   pressed), with the kit's pixel signs (claIcons.js). */
body.classlings-app .tm .tm-row .table-item-btn {
    appearance: none;
    display: grid;
    place-items: center;
    width: var(--ctl-small-h);
    height: var(--ctl-small-h);
    min-width: 0;
    margin: 0 0 calc(var(--ctl-small-lift) + 4px);
    padding: 0;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--cla-ink);
    border-radius: var(--ctl-small-r);
    box-shadow: 0 var(--ctl-small-lift) 0 var(--cla-ink);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .tm .tm-row .table-item-btn:active:not(:disabled) {
    transform: translateY(var(--ctl-small-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: var(--ctl-press);
}

body.classlings-app .tm .tm-row .table-item-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

body.classlings-app .tm .tm-row .table-item-btn:focus-visible,
body.classlings-app .tm :is(.tm-setup, .tm-showdown, .tm-go, .tm-remove, .tm-add, .tm-undo):focus-visible {
    outline: 4px solid var(--cla-ink);
    outline-offset: var(--ctl-focus-gap);
}

body.classlings-app .tm .tm-foot {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Change tables: each row has its badge, its name and Remove (no points, so nothing here gives or takes
   one), "Add a table" is a dashed tile after the last row, and Done comes back to the menu. */
body.classlings-app .tm .tm-row.is-changing {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Remove: the standard's quiet button, as Change tables and Seats and tables are in the menu. */
body.classlings-app .tm .tm-remove {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--ctl-small-h);
    margin: 0 0 4px;
    padding: 0 16px;
    font: var(--ctl-small-font);
    color: var(--cla-ink);
    white-space: nowrap;
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2);
    border-radius: var(--ctl-r);
    cursor: pointer;
}

body.classlings-app .tm .tm-remove:is(:hover, :active):not(:disabled) {
    background: var(--cla-wash);
}

body.classlings-app .tm .tm-remove:disabled {
    opacity: 0.45;
    cursor: default;
}

body.classlings-app .tm .tm-add-row {
    display: grid;
    min-width: 0;
}

body.classlings-app .tm .tm-add {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 68px;
    padding: 0 16px;
    font: 600 20px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: transparent;
    border: var(--cla-edge) dashed var(--cla-ink-2);
    border-radius: var(--cla-r-m);
    cursor: pointer;
}

body.classlings-app .tm .tm-add:hover {
    background: var(--cla-wash);
}

body.classlings-app .tm .tm-add .cla-ic {
    width: 24px;
    height: 24px;
}

/* Done: the standard's ordinary gold button, at the foot's right. */
body.classlings-app .tm .tm-foot .tm-done {
    min-height: var(--ctl-h);
    margin: 0 0 var(--ctl-lift) auto;
    padding: var(--ctl-pad);
    font: var(--ctl-font);
    border-radius: var(--ctl-r);
    box-shadow: 0 var(--ctl-lift) 0 var(--cla-gold-deep);
}

body.classlings-app .tm .tm-foot .tm-done:active {
    transform: translateY(var(--ctl-lift));
    box-shadow: 0 0 0 var(--cla-gold-deep);
}

body.classlings-app .tm .tm-head .tm-count {
    margin-right: 8px;
    font-weight: 600;
}

/* Where there's no room above the menu for the message that says a table has gone (a phone, or the school
   laptop), the same Undo is a pill in the menu's foot, left of Done: the foot is already as tall as Done, so
   the menu keeps its size and nothing moves (the teacher, 13 October). */
body.classlings-app .tm .tm-notice {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 4px 4px 4px 16px;
    font: 600 18px / 1.2 var(--cla-display);
    color: #fff;
    background: var(--cla-ink);
    border-radius: 999px;
}

/* A long table name wraps; it's never cut off with "…" (the teacher's notes of 3 October). */
body.classlings-app .tm .tm-notice > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Its Undo: the same small button as the message pill's (shared/css/classlings.css). */
body.classlings-app .tm .tm-undo {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ctl-small-h);
    margin: 0 0 var(--ctl-small-lift);
    padding: 0 16px;
    font: var(--ctl-small-font);
    color: var(--cla-ink);
    white-space: nowrap;
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--cla-ink);
    border-radius: var(--ctl-small-r);
    box-shadow: 0 var(--ctl-small-lift) 0 var(--cla-ink);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .tm .tm-undo:active {
    transform: translateY(var(--ctl-small-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: var(--ctl-press);
}

/* "Table showdown": the bar's gold sign, with an owl and a fox at its ends, at the end of the title line. */
body.classlings-app .tm .tm-showdown {
    appearance: none;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 12px;
    height: 56px;
    margin: var(--cla-px) var(--cla-px) calc(var(--cla-px) + var(--cla-lift)) 0;
    padding: 0 12px;
    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);
    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 .tm .tm-showdown: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 .tm .tm-showdown > svg {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    image-rendering: pixelated;
}

body.classlings-app .tm .tm-sign-word {
    --title-scale: 2;
    display: block;
    margin-top: var(--cla-px);
    line-height: 0;
}

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

body.classlings-app .tm .tm-word {
    font: 700 24px / 1 var(--cla-display);
}

/* No tables yet: three empty tables, and one thing to do. */
body.classlings-app .tm .tm-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

body.classlings-app .tm .tm-room {
    display: block;
    width: 216px;
    height: 144px;
}

body.classlings-app .tm .tm-empty h2 {
    margin: 0;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .tm .tm-empty p {
    margin: 8px 0 16px;
    font: 400 18px / 1.45 var(--tl-body);
}

/* The gold main action: the standard's big gold button (72 px, 7 px base, 28 px words). */
body.classlings-app .tm .tm-go,
body.classlings-app .tl-go {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--ctl-big-h);
    margin: 0 0 var(--ctl-big-lift);
    padding: 0 32px;
    font: var(--ctl-big-font);
    color: var(--cla-ink);
    white-space: nowrap;
    background: var(--cla-gold);
    border: var(--ctl-edge) solid var(--cla-gold-deep);
    border-radius: var(--ctl-big-r);
    box-shadow: 0 var(--ctl-big-lift) 0 var(--cla-gold-deep);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .tm .tm-go:active,
body.classlings-app .tl-go:active:not(:disabled) {
    transform: translateY(var(--ctl-big-lift));
    box-shadow: 0 0 0 var(--cla-gold-deep);
    transition-duration: var(--ctl-press);
}

/* A window too narrow for three to a line (a row needs about 315px, so a name like Butterflies stays whole): two,
   and the title line has no room left for what to do (the rows show it). */
@media (max-width: 1099px) {
    body.classlings-app .tm .tm-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.classlings-app .tm .tm-head p {
        display: none;
    }
}

/* Narrower still: the Table showdown stays beside Tables, and Change tables and Seats and tables go under them. */
@media (max-width: 999px) {
    body.classlings-app .tm .tm-tools {
        order: 2;
        width: 100%;
        margin-left: 0;
    }

    body.classlings-app .tm .tm-head .tm-showdown {
        margin-left: auto;
    }
}

/* A narrow window: one table to a line. */
@media (max-width: 760px) {
    body.classlings-app .tm .tm-rows {
        grid-template-columns: minmax(0, 1fr);
    }

    body.classlings-app .tm .tm-tools {
        flex-wrap: wrap;
    }

    body.classlings-app .tm .tm-empty {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    body.classlings-app .tm .tm-showdown > svg {
        display: none;
    }
}

/* Anything smaller than a board (a laptop, a small window): slimmer rows, so three fit to a line and more
   tables show before the list scrolls (the teacher's note, 5 Oct: on a scrunched window the tables were huge). */
@media (max-height: 820px), (max-width: 1599px) {
    body.classlings-app .tm .tm-row {
        grid-template-columns: auto minmax(0, 1fr) auto var(--ctl-small-h) var(--ctl-small-h);
        gap: 8px;
        padding: 2px 6px 0;
    }

    body.classlings-app .tm .tm-row.is-give-only {
        grid-template-columns: auto minmax(0, 1fr) auto var(--ctl-small-h);
    }

    body.classlings-app .tm .tm-row .table-item-btn {
        margin-bottom: calc(var(--ctl-small-lift) + 2px);
    }

    body.classlings-app .tm .tm-row .tl-badge {
        transform: scale(0.8);
        transform-origin: left center;
    }

    body.classlings-app .tm .tm-name {
        font-size: 19px;
    }

    body.classlings-app .tm .tm-name small {
        font-size: 13px;
    }

    body.classlings-app .tm .tm-pts {
        font-size: 12px;
    }

    body.classlings-app .tm .tm-pts b {
        font-size: 26px;
    }
}

/* A medium window: two tables to a line again, now the rows are smaller. Under 680 px a half-width row
   is too narrow for a name like "Octopuses" beside its points, so it stays one to a line. */
@media (max-width: 760px) and (min-width: 680px) {
    body.classlings-app .tm .tm-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }

    body.classlings-app .tm .tm-pts {
        font-size: 0;
    }

    /* Names stay whole words (Hedgehogs, not Hedgeho-gs) in the narrower half-width rows. */
    body.classlings-app .tm .tm-name {
        font-size: 16px;
    }

    body.classlings-app .tm .tm-name-text {
        overflow-wrap: break-word;
    }
}

/* A phone: smaller buttons, and just the number of points, so each table's name has room. */
@media (max-width: 480px) {
    body.classlings-app .tables-dropdown-menu.tm {
        padding: 12px 12px 16px;
    }

    body.classlings-app .tm .tm-row {
        grid-template-columns: auto minmax(0, 1fr) auto var(--ctl-small-h) var(--ctl-small-h);
        gap: 8px;
        padding: 4px 6px 0;
    }

    body.classlings-app .tm .tm-row.is-give-only {
        grid-template-columns: auto minmax(0, 1fr) auto var(--ctl-small-h);
    }

    body.classlings-app .tm .tm-name {
        font-size: 20px;
    }

    body.classlings-app .tm .tm-pts {
        font-size: 0;
    }

    body.classlings-app .tm .tm-pts b {
        font-size: 28px;
    }
}

/* A board (1920 × 1080): everything bigger, as the pupils' cards are, so the tables can be read from the
   back of the room (the teacher, 15 October: on the board the menu stayed laptop-sized). The standard's
   48 px plus, minus and quiet buttons are 60 px here, in this menu only. */
@media (min-width: 1600px) and (min-height: 900px) {
    body.classlings-app .tables-dropdown-menu.tm {
        --tm-design: 1500;
        --ctl-small-h: 60px;
        --ctl-small-font: 600 22px / 1.1 var(--ctl-display);
        padding: 16px 32px 20px;
    }

    body.classlings-app .tables-dropdown-menu.tm.is-empty {
        --tm-design: 900;
    }

    body.classlings-app .tm .tm-head h2 {
        font-size: 36px;
    }

    body.classlings-app .tm .tm-head p {
        font-size: 22px;
    }

    body.classlings-app .tm .tm-rows {
        gap: 12px 20px;
    }

    body.classlings-app .tm .tm-row {
        gap: 14px;
        padding: 6px 12px 0;
    }

    body.classlings-app .tm .tm-row .tl-badge {
        width: 56px;
        height: 56px;
    }

    body.classlings-app .tm .tm-row .tl-badge svg {
        width: 40px;
        height: 40px;
    }

    body.classlings-app .tm .tm-name {
        font-size: 30px;
    }

    body.classlings-app .tm .tm-name small {
        font-size: 17px;
    }

    body.classlings-app .tm .tm-pts {
        font-size: 16px;
    }

    body.classlings-app .tm .tm-pts b {
        font-size: 46px;
    }

    body.classlings-app .tm .tm-showdown {
        height: 68px;
    }

    body.classlings-app .tm .tm-showdown > svg {
        width: 40px;
        height: 40px;
    }
}

/* ---------------------------------------------------------------- the room: the pop-up it lives in */

/* The table pop-up is a whole screen in this look, standing on the class's world. Today's workspace
   inside it is for other classes. */
body.classlings-app #tableManagementModal {
    padding: 0;
    background: var(--cla-page);
    backdrop-filter: none;
    animation: none;
}

body.classlings-app.cla-sky #tableManagementModal {
    background:
        var(--cla-art-cloud) left 60% top 14px / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) left 76% top 46px / calc(var(--cla-px) * 20) calc(var(--cla-px) * 5) no-repeat,
        var(--cla-art-edge) left 0 bottom var(--cla-soil) / calc(var(--cla-px) * 16) calc(var(--cla-px) * 2) repeat-x,
        linear-gradient(var(--cla-soil-colour), var(--cla-soil-colour)) left 0 bottom 0 / 100% var(--cla-soil) no-repeat,
        var(--cla-art-tufts) left 0 bottom var(--cla-ground) / calc(var(--cla-px) * 16) calc(var(--cla-px) * 3) repeat-x,
        linear-gradient(var(--cla-grass), var(--cla-grass)) left 0 bottom 0 / 100% var(--cla-ground) no-repeat,
        var(--cla-world);
}

body.classlings-app #tableManagementModal > .modal {
    display: none;
}

body.classlings-app .tl-room.cla-only {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-self: stretch;
    flex: 1;
    min-width: 0;
    height: 100%;
    color: var(--cla-ink);
    outline: none;
}

body.classlings-app .tl-room :is(h2, h3, h4, p) {
    margin: 0;
}

/* The strip: the screen's title in Classlings' lettering, where it is in the steps, and the logo. */
body.classlings-app .tl-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: 8px var(--cla-gutter) 0;
}

body.classlings-app .tl-title {
    --title-scale: 3;
    flex: none;
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}

body.classlings-app .tl-title svg {
    display: block;
    width: calc(var(--title-scale) * var(--w) * 1px);
    height: calc(var(--title-scale) * var(--h) * 1px);
}

body.classlings-app :is(.tl-steps, .tl-class) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font: 600 20px / 1.2 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .tl-class {
    font-size: 28px;
    color: var(--cla-ink-2);
}

body.classlings-app .tl-dots {
    display: flex;
    gap: 6px;
}

body.classlings-app .tl-dots i {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background: var(--cla-wash-2);
    border: 2px solid var(--cla-ink-2);
    border-radius: 4px;
}

body.classlings-app .tl-dots i.done {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .tl-dots i.now {
    background: var(--cla-grape);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .tl-logo {
    display: block;
    flex: none;
    width: 154px;
    height: 60px;
    margin-left: auto;
    image-rendering: pixelated;
}

body.classlings-app .tl-body {
    min-height: 0;
    padding: 12px var(--cla-gutter) 28px;
    overflow: auto;
    overscroll-behavior: contain;
}

/* The dock: Back at the left, the gold Next, Finish or Done at the right. */
body.classlings-app .tl-dock {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--cla-gutter) var(--cla-soil);
}

body.classlings-app .tl-square {
    appearance: none;
    display: inline-grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    box-sizing: border-box;
    width: var(--cla-square);
    height: var(--cla-square);
    margin: 0 0 var(--cla-lift);
    padding: 0;
    font: var(--ctl-square-font);
    color: var(--cla-ink);
    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;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .tl-square:active:not(:disabled) {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: var(--ctl-press);
}

body.classlings-app .tl-room :is(.tl-square, .tl-go, .tl-btn):disabled {
    opacity: 0.6;
    cursor: default;
}

body.classlings-app .tl-room :is(button, input):focus-visible {
    outline: 4px solid var(--cla-ink);
    outline-offset: var(--ctl-focus-gap);
}

/* ---------------------------------------------------------------- step 1: how many tables? */

body.classlings-app .tl-count {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 16px;
    min-height: 100%;
    padding-bottom: 32px;
    text-align: center;
}

body.classlings-app .tl-q {
    font: 700 48px / 1.1 var(--cla-display);
}

/* 2 to 12, in two tidy lines (2 to 7, then 8 to 12), or more on a phone. */
body.classlings-app .tl-nums {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: calc(6 * 96px + 5 * 16px);
    margin: 16px 0 8px;
}

body.classlings-app .tl-num {
    appearance: none;
    width: 96px;
    height: 96px;
    margin: 0 0 6px;
    padding: 0;
    font: 700 48px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: 0 6px 0 var(--cla-ink);
    cursor: pointer;
}

body.classlings-app .tl-num:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 var(--cla-ink);
}

body.classlings-app .tl-num.is-on {
    background: var(--cla-grape);
    border-color: var(--cla-grape-deep);
    box-shadow: 0 6px 0 var(--cla-grape-deep);
}

body.classlings-app .tl-each {
    font: 600 24px / 1.25 var(--cla-display);
}

body.classlings-app .tl-each span {
    display: block;
    font: 400 18px / 1.4 var(--tl-body);
    color: var(--cla-ink-2);
}

/* ---------------------------------------------------------------- step 2: what shall we call them? */

body.classlings-app .tl-names {
    display: grid;
    align-content: start;
    gap: 16px;
}

/* Seven ways, four to a line: each shows its first five tables and its first two names. */
body.classlings-app .tl-ways {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.classlings-app .tl-way {
    appearance: none;
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 10px 16px 10px;
    color: var(--cla-ink);
    text-align: left;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
    cursor: pointer;
}

body.classlings-app .tl-way.is-on {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-grape-deep);
}

body.classlings-app .tl-way-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.classlings-app .tl-way-top b {
    min-width: 0;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .tl-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--cla-page);
    border-radius: 50%;
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-ink);
}

body.classlings-app .tl-mark .cla-ic {
    display: none;
}

body.classlings-app .tl-way.is-on .tl-mark {
    background: var(--cla-grape);
}

body.classlings-app .tl-way.is-on .tl-mark .cla-ic {
    display: block;
}

body.classlings-app .tl-minis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.classlings-app .tl-eg {
    font: 400 15px / 1.2 var(--tl-body);
    color: var(--cla-ink-2);
}

body.classlings-app .tl-way.is-on .tl-eg {
    color: var(--cla-ink);
}

/* Below them, the names the chosen way gives this many tables: one line up to eight, then two. */
body.classlings-app .tl-chosen {
    display: grid;
    gap: 8px;
}

body.classlings-app .tl-chosen-q {
    font: 700 20px / 1.2 var(--cla-display);
}

body.classlings-app .tl-chips {
    display: grid;
    grid-template-columns: repeat(var(--chips, 8), minmax(0, 200px));
    gap: 8px;
    min-width: 0;
}

body.classlings-app .tl-chip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 56px;
    padding: 0 4px 0 6px;
    font: 600 18px / 1.1 var(--cla-display);
    white-space: nowrap;
    background: var(--tab-tint);
    border: 2px solid var(--tab-deep);
    border-radius: var(--cla-r-m);
}

/* Two lines of names (nine or more tables) are a little slimmer, so setting up still fits a board. */
body.classlings-app .tl-chips.is-two-lines .tl-chip {
    height: 48px;
}

body.classlings-app .tl-chips.is-two-lines .tl-chip .tl-badge {
    width: 36px;
    height: 36px;
}

/* The example's name is always whole: smaller if it must be, then on two lines (tablesRoom.js fitText). */
body.classlings-app .tl-chip > span:last-child {
    min-width: 0;
    line-height: 1.05;
}

body.classlings-app .tl-chip .tl-badge {
    width: 40px;
    height: 40px;
}

body.classlings-app .tl-later {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 20px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .tl-later .cla-ic {
    width: 24px;
    height: 24px;
}

/* ---------------------------------------------------------------- step 4: table points (the first time a teacher sets up tables) */

/* Two questions that are the teacher's own, side by side (one under the other on a narrow window): whether the pupils at a
   table get a point when it does, and when table points go back to 0. Each answer is one of the same tiles step 2 has. */
body.classlings-app .tl-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 20px 40px;
    max-width: 1120px;
    margin: 0 auto;
}

body.classlings-app .tl-ask {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

body.classlings-app .tl-points .tl-q-two {
    font-size: 34px;
}

body.classlings-app .tl-opts {
    display: grid;
    gap: 10px;
}

body.classlings-app .tl-opt {
    align-content: center;
    min-height: 64px;
}

body.classlings-app .tl-opt .tl-way-top b {
    font-size: 26px;
}

/* "Every day at" and the clock button (Settings' own: timeControl.js). */
body.classlings-app .tl-at {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font: 600 22px / 1.2 var(--cla-display);
}

body.classlings-app .tl-points-note {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 18px;
}

/* "This is for all your classes." as the set-up has it: a pale pill. */
body.classlings-app .tl-forall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 4px 10px;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: 2px solid var(--cla-wash-2);
    border-radius: 999px;
}

@media (max-width: 900px) {
    body.classlings-app .tl-points {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    body.classlings-app .tl-points .tl-q-two {
        font-size: 28px;
    }

    /* One column: the answers fill the width, so the little clock opens from the line's left edge, not from the button's right
       (which would leave part of it off the screen). */
    body.classlings-app .tl-at {
        position: relative;
    }

    body.classlings-app .tl-at .cla-set-time {
        position: static;
    }

    body.classlings-app .tl-at .cla-set-pop {
        left: 0;
        right: auto;
        bottom: calc(100% + 8px);
    }
}

/* A short laptop page (540 to 600 high): the questions and their answers close up, so both are on the screen above the bar. */
@media (max-height: 720px) and (min-width: 901px) {
    body.classlings-app .tl-points {
        gap: 10px 32px;
    }

    body.classlings-app .tl-ask {
        gap: 8px;
    }

    body.classlings-app .tl-points .tl-q-two {
        font-size: 28px;
    }

    body.classlings-app .tl-opts {
        gap: 8px;
    }

    body.classlings-app .tl-opt {
        min-height: 52px;
        padding-block: 6px;
    }

    body.classlings-app .tl-opt .tl-way-top b {
        font-size: 22px;
    }

    body.classlings-app .tl-opt .tl-mark {
        width: 28px;
        height: 28px;
    }

    body.classlings-app .tl-at {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    body.classlings-app .tl-points .tl-q-two {
        font-size: 24px;
    }

    body.classlings-app .tl-opt {
        min-height: 56px;
    }

    body.classlings-app .tl-opt .tl-way-top b {
        font-size: 21px;
    }

    /* The little clock is as wide as the line it opens over, with slimmer buttons, so it is whole on a phone. */
    body.classlings-app .tl-at .cla-set-pop {
        right: 0;
        padding: 10px 12px 12px;
    }

    body.classlings-app .tl-at .cla-set-stepper {
        grid-template-columns: 40px 48px 40px;
        gap: 2px;
    }

    body.classlings-app .tl-at .cla-set-stepper button {
        width: 40px;
        height: 40px;
    }
}

/* ---------------------------------------------------------------- step 3, and managing: the room */

body.classlings-app .tl-seating {
    display: grid;
    grid-template-columns: minmax(0, 840px) minmax(320px, 1fr);
    gap: 24px;
    height: 100%;
    min-height: 500px;
}

/* The classroom from above: the board on the top wall, each table an island with its seats. */
body.classlings-app .tl-floor {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    overflow: auto;
    background: var(--tl-floor);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
}

body.classlings-app .tl-board {
    position: absolute;
    left: calc(50% - 150px);
    top: -3px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 300px;
    height: 36px;
    font: 600 18px / 1 var(--cla-display);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: 0 0 var(--cla-r-s) var(--cla-r-s);
}

/* The tables in lines, as tablesRoom.js lays them out for the floor (tableLook.js roomLayout): every
   table in a line is as wide and as tall as the others, and a line short of tables is centred (each
   table takes two of the grid's half-places). The sizes come from there, as custom properties. */
body.classlings-app .tl-isles {
    display: grid;
    grid-template-columns: repeat(var(--tl-cols, 6), var(--tl-half, 112px));
    grid-auto-rows: auto;
    align-content: center;
    justify-content: center;
    gap: var(--tl-row-gap, 10px) var(--tl-gap, 40px);
    box-sizing: border-box;
    min-height: 100%;
    padding: var(--tl-pad-top, 44px) 12px var(--tl-pad-bottom, 6px);
}

body.classlings-app .tl-isle {
    grid-column: span 2;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: var(--tl-gap-in, 8px);
    min-width: 0;
}

/* A table's seats: one line a side, spread evenly across it, unless a side has more than fit (then as
   few lines as fit, each centred). Every table in a line keeps room for the same number of lines. */
body.classlings-app .tl-seats {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    min-width: 0;
    min-height: calc(var(--rows, 1) * var(--tl-seat-h, 78px));
    padding: 0 8px;
}

body.classlings-app .tl-seats.is-above {
    --rows: var(--top-rows, 1);
}

body.classlings-app .tl-seats.is-below {
    --rows: var(--bottom-rows, 1);
    align-content: flex-start;
}

/* A line of tables that all sit in one line above their desks has nothing below them. */
body.classlings-app .tl-isle.is-above-only {
    grid-template-rows: auto auto;
}

body.classlings-app .tl-isle.is-above-only .tl-seats.is-below {
    display: none;
}

body.classlings-app .tl-seat {
    appearance: none;
    box-sizing: border-box;
    display: grid;
    flex: 0 0 var(--w, calc(100% / var(--per, 2)));
    justify-items: center;
    align-content: end;
    min-width: 0;
    height: var(--tl-seat-h, 78px);
    padding: 0 2px;
    font: 600 var(--tl-name, 16px) / 1.1 var(--cla-display);
    color: var(--cla-ink);
    background: none;
    border: 0;
    border-radius: var(--cla-r-m);
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Pupils sit facing their table: the row above has its names on the outside, and so does the row below. */
body.classlings-app .tl-seats.is-above .tl-seat > span {
    order: -1;
}

body.classlings-app .tl-seats.is-below .tl-seat {
    align-content: start;
}

/* A name is always whole: smaller if it must be (tablesRoom.js fitText), and never cut off with "…". */
body.classlings-app .tl-seat > span {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

body.classlings-app :is(.tl-seat > span, .tl-pupil > span:last-child, .tl-desk-name b, .tl-chip > span:last-child).is-two {
    white-space: normal;
    text-wrap: balance;
}

body.classlings-app :is(.tl-seat > span, .tl-pupil > span:last-child, .tl-desk-name b, .tl-chip > span:last-child).is-broken {
    white-space: normal;
    overflow-wrap: anywhere;
}

body.classlings-app .tl-who {
    display: block;
    width: 64px;
    height: 56px;
    image-rendering: pixelated;
    pointer-events: none;
}

body.classlings-app .tl-seat .tl-who {
    width: min(var(--tl-who-w, 64px), 100%);
    height: var(--tl-who-h, 56px);
}

body.classlings-app .tl-seat.is-on,
body.classlings-app .tl-seat:hover {
    background: var(--cla-grape-tint);
}

body.classlings-app .tl-seat.is-on {
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-grape-deep);
}

body.classlings-app .tl-seat.is-empty {
    cursor: default;
    background: none;
}

body.classlings-app .tl-seat.is-empty::before {
    content: '';
    align-self: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin-top: 12px;
    border: 3px dashed var(--tl-floor-edge);
    border-radius: var(--cla-r-s);
}

body.classlings-app .tl-seats.is-below .tl-seat.is-empty::before {
    margin: 6px 0 0;
}

body.classlings-app .tl-seat.is-lifted,
body.classlings-app .tl-pupil.is-lifted {
    opacity: 0.35;
}

/* The table itself: its badge, name and how many sit there, and its points, in its colour. */
body.classlings-app .tl-desk {
    appearance: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: var(--tl-desk-h, 64px);
    margin: 0 0 var(--tl-lift, 5px);
    padding: 0 10px 0 8px;
    color: var(--tab-ink);
    text-align: left;
    background: var(--tab);
    border: var(--cla-edge) solid var(--tab-deep);
    border-radius: var(--cla-r-m);
    box-shadow: 0 var(--tl-lift, 5px) 0 var(--tab-deep);
    cursor: pointer;
    transition: transform 160ms ease-out;
}

body.classlings-app .tl-desk-name {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

body.classlings-app .tl-desk-name b {
    min-width: 0;
    font: 700 20px / 1.1 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .tl-desk-name b.is-two {
    line-height: 1.05;
}

body.classlings-app .tl-desk-name small {
    font: 600 16px / 1.1 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .tl-desk-pts {
    display: grid;
    flex: none;
    justify-items: end;
    margin-left: auto;
    font: 600 14px / 1 var(--cla-display);
}

body.classlings-app .tl-desk-pts b {
    font: 700 36px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
}

/* A narrow table shows its points under its name, in place of how many sit there, with a smaller badge. */
body.classlings-app .tl-desk-sum,
body.classlings-app .tl-floor.is-narrow .tl-desk-pts,
body.classlings-app .tl-floor.is-narrow .tl-desk.has-points .tl-desk-count {
    display: none;
}

body.classlings-app .tl-floor.is-narrow .tl-desk-sum {
    display: inline;
}

body.classlings-app .tl-floor.is-narrow .tl-desk {
    gap: 8px;
    padding-right: 8px;
}

body.classlings-app .tl-floor.is-narrow .tl-desk .tl-badge {
    width: 36px;
    height: 36px;
}

body.classlings-app .tl-floor.is-narrow .tl-desk .tl-badge svg {
    width: 32px;
    height: 32px;
}

/* The smaller room: smaller Classlings, names, desks and board, so every table fits on the floor. */
body.classlings-app .tl-floor.is-compact .tl-board {
    height: 30px;
    font-size: 16px;
}

body.classlings-app .tl-floor.is-compact .tl-seat.is-empty::before {
    width: 32px;
    height: 32px;
    margin-top: 4px;
    border-width: 2px;
}

body.classlings-app .tl-floor.is-compact .tl-seats.is-below .tl-seat.is-empty::before {
    margin: 2px 0 0;
}

body.classlings-app .tl-floor.is-compact .tl-desk {
    gap: 6px;
    padding: 0 8px 0 6px;
    border-radius: var(--cla-r-s);
}

body.classlings-app .tl-floor.is-compact .tl-desk .tl-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

body.classlings-app .tl-floor.is-compact .tl-desk .tl-badge b {
    font-size: 18px;
}

body.classlings-app .tl-floor.is-compact .tl-desk-name {
    gap: 0;
}

body.classlings-app .tl-floor.is-compact .tl-desk-name b {
    font-size: 16px;
}

body.classlings-app .tl-floor.is-compact .tl-desk-name small {
    font-size: 12px;
}

body.classlings-app .tl-floor.is-compact .tl-desk-pts {
    font-size: 11px;
}

body.classlings-app .tl-floor.is-compact .tl-desk-pts b {
    font-size: 24px;
}

/* While a pupil is picked up, every table is a place to put them. */
body.classlings-app .tl-floor.is-picking .tl-desk {
    outline: var(--cla-edge) dashed var(--cla-grape-deep);
    outline-offset: 3px;
}

body.classlings-app .tl-isle.is-over .tl-desk {
    outline-style: solid;
    transform: translateY(-3px);
}

/* The table being changed (its editor is open) wears a ring, as in the design. */
body.classlings-app .tl-isle.is-editing .tl-desk {
    outline: var(--cla-edge) solid var(--cla-grape-deep);
    outline-offset: 3px;
}

/* Dragging a pupil: their Classling follows the finger. */
body.classlings-app .tl-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background: var(--cla-grape-tint);
    border: var(--cla-edge) solid var(--cla-grape-deep);
    border-radius: var(--cla-r-m);
    box-shadow: var(--cla-float);
    pointer-events: none;
}

/* ---------------------------------------------------------------- the tray beside the room */

body.classlings-app .tl-tray {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    padding: 16px 24px;
    overflow-y: auto;
    background: var(--cla-wash);
    border-radius: var(--cla-r-l);
}

body.classlings-app.cla-sky .tl-tray {
    background: var(--cla-page);
    border: 2px solid rgba(30, 27, 58, 0.3);
}

body.classlings-app .tl-tray h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .tl-tray .tl-still {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 22px / 1.1 var(--cla-display);
}

body.classlings-app .tl-n {
    box-sizing: border-box;
    min-width: 40px;
    padding: 2px 10px;
    font: 700 20px / 1.2 var(--cla-display);
    text-align: center;
    background: var(--cla-page);
    border: 2px solid var(--cla-wash-2);
    border-radius: var(--cla-r-s);
}

body.classlings-app .tl-tip,
body.classlings-app .tl-small,
body.classlings-app .tl-moving p {
    font: 400 16px / 1.4 var(--tl-body);
    color: var(--cla-ink-2);
}

body.classlings-app .tl-small {
    margin-top: -4px;
}

body.classlings-app .tl-grid {
    display: grid;
    flex: 0 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-height: 106px;
    margin: -10px -10px 0 -4px;
    padding: 10px 10px 4px 4px;
    overflow-y: auto;
}

body.classlings-app .tl-pupil {
    appearance: none;
    position: relative;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    height: 96px;
    padding: 0 2px;
    font: 600 16px / 1.1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-m);
    cursor: pointer;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

body.classlings-app .tl-pupil .tl-who {
    width: 72px;
    height: 60px;
}

body.classlings-app .tl-pupil > span:last-child {
    min-width: 0;
    max-width: 100%;
    line-height: 1.05;
    white-space: nowrap;
}

body.classlings-app .tl-pupil.is-on {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-grape-deep);
}

body.classlings-app .tl-tick {
    position: absolute;
    top: -10px;
    right: -8px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--cla-grape);
    border: 2px solid var(--cla-grape-deep);
    border-radius: 50%;
}

body.classlings-app .tl-now {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font: 600 20px / 1.2 var(--cla-display);
    background: var(--cla-grape-tint);
    border: 2px solid var(--cla-grape-deep);
    border-radius: var(--cla-r-m);
}

body.classlings-app .tl-now .cla-ic {
    width: 20px;
    height: 20px;
}

body.classlings-app .tl-tray hr {
    flex: none;
    width: 100%;
    height: var(--cla-edge);
    margin: 4px 0;
    background: var(--cla-wash-2);
    border: 0;
    border-radius: var(--cla-edge);
}

body.classlings-app .tl-part {
    display: grid;
    gap: 12px;
}

body.classlings-app .tl-moving {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.classlings-app .tl-moving .tl-who {
    box-sizing: border-box;
    flex: none;
    width: 72px;
    height: 64px;
    background: var(--cla-grape-tint);
    border: 2px solid var(--cla-grape-deep);
    border-radius: var(--cla-r-m);
}

body.classlings-app .tl-ok {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .tl-ok .cla-ic {
    box-sizing: content-box;
    padding: 6px;
    color: var(--cla-ink);
    background: var(--cla-lime);
    border-radius: 50%;
}

/* The tray's buttons: a white cap on an ink base that sinks when pressed, as wide as the tray. */
body.classlings-app .tl-btn {
    appearance: none;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
    min-height: 56px;
    margin: 0 0 var(--cla-lift);
    padding: 0 24px;
    font: 600 20px / 1.1 var(--cla-display);
    color: var(--cla-ink);
    text-align: left;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-m);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
    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 .tl-tray .tl-btn {
    width: 100%;
}

body.classlings-app .tl-btn:active:not(:disabled) {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: 70ms;
}

body.classlings-app .tl-btn .cla-ic {
    flex: none;
    width: 24px;
    height: 24px;
}

/* Something that wipes (setting every table's points to 0): danger red, on its deep red edge and base. */
body.classlings-app .tl-btn.is-danger {
    color: var(--cla-ink);
    background: var(--ctl-danger);
    border-color: var(--ctl-danger-deep);
    box-shadow: 0 var(--cla-lift) 0 var(--ctl-danger-deep);
}

body.classlings-app .tl-btn.is-danger:active:not(:disabled) {
    box-shadow: 0 0 0 var(--ctl-danger-deep);
}

body.classlings-app .tl-tray .tl-share {
    margin-top: auto;
}

/* "Set every table's points to 0?": Keep them on the left, the danger answer on the right (side by side
   when the tray has room). */
body.classlings-app .tl-confirm {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

body.classlings-app .tl-confirm p {
    flex: 1 1 100%;
    font: 600 18px / 1.3 var(--cla-display);
}

body.classlings-app .tl-tray .tl-confirm .tl-btn {
    flex: 1 1 auto;
    width: auto;
    justify-content: center;
}

/* ---------------------------------------------------------------- changing a table */

/* Its name, its emblem (no emblem, then its theme's twelve) and its colour: 24, in four lines of six,
   each with its name. Wide windows put the name and emblem on the left and the colours beside them. */
body.classlings-app .tl-edit {
    position: absolute;
    left: 16px;
    top: 44px;
    z-index: 5;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    width: min(780px, calc(100% - 32px));
    max-height: calc(100% - 52px);
    padding: 16px 24px 20px;
    overflow-y: auto;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: var(--cla-float);
    outline: none;
}

body.classlings-app .tl-edit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.classlings-app .tl-edit h3 {
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .tl-edit-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

body.classlings-app :is(.tl-edit-who, .tl-edit-look) {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

body.classlings-app .tl-label {
    font: 600 18px / 1.2 var(--cla-display);
}

/* The table's name: the standard's text box (48 px, a pale edge that turns ink when focused). */
body.classlings-app .tl-input {
    box-sizing: border-box;
    width: 100%;
    height: var(--ctl-field-h);
    padding: 0 12px;
    font: 400 18px / 1.4 var(--cla-ui);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2);
    border-radius: var(--ctl-field-r);
}

body.classlings-app .tl-input:focus {
    border-color: var(--cla-ink);
    outline: none;
}

/* The emblems, five to a line: "No picture" first (the table's number, or just its colour, with the words
   beside it, over three of the five places) and then the twelve of its theme. */
body.classlings-app .tl-emblems {
    display: grid;
    grid-template-columns: repeat(5, 44px);
    gap: 5px;
}

body.classlings-app .tl-emblems button {
    appearance: none;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-s);
    cursor: pointer;
}

body.classlings-app .tl-emblems button.is-on {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .tl-emblems svg {
    display: block;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

body.classlings-app .tl-emblems .tl-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* The colours: a swatch in the table's own colour and edge, with its name under it. */
body.classlings-app .tl-swatches {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 8px;
}

body.classlings-app .tl-sw {
    appearance: none;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 0;
    color: var(--cla-ink);
    background: none;
    border: 0;
    cursor: pointer;
}

body.classlings-app .tl-sw-chip {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: min(100%, 56px);
    height: 40px;
    color: var(--tab-ink);
    background: var(--tab);
    border: var(--cla-edge) solid var(--tab-deep);
    border-radius: var(--cla-r-s);
}

body.classlings-app .tl-sw.is-on .tl-sw-chip {
    box-shadow: 0 0 0 3px var(--cla-page), 0 0 0 6px var(--cla-grape-deep);
}

body.classlings-app .tl-sw-name {
    max-width: 100%;
    font: 600 13px / 1.1 var(--cla-display);
    text-align: center;
    text-wrap: balance;
}

body.classlings-app .tl-sw.is-on .tl-sw-name {
    font-weight: 700;
}

/* ---------------------------------------------------------------- smaller windows */

/* The tray narrows, then goes under the room. (The room's tables lay themselves out for the floor they
   have: tablesRoom.js.) */
@media (max-width: 1240px) {
    body.classlings-app .tl-seating {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    body.classlings-app .tl-tray {
        padding: 16px;
    }

}

/* Step 2's tiles go three to a line, then two, then one; the editor puts its colours under its name. */
@media (max-width: 1180px) {
    body.classlings-app .tl-ways {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1240px) {
    body.classlings-app .tl-edit-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.classlings-app .tl-emblems {
        grid-template-columns: repeat(auto-fill, 44px);
    }
}

/* The strip keeps its title and where you are; the logo goes before they'd crowd it. */
@media (max-width: 820px) {
    body.classlings-app .tl-logo {
        display: none;
    }
}

@media (max-width: 900px) {
    body.classlings-app .tl-seating {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    body.classlings-app .tl-floor {
        min-height: 520px;
    }

    body.classlings-app .tl-q {
        font-size: 34px;
    }

    body.classlings-app .tl-ways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.classlings-app .tl-nums {
        max-width: calc(6 * 72px + 5 * 16px);
    }

    body.classlings-app .tl-num {
        width: 72px;
        height: 72px;
        font-size: 36px;
    }
}

/* A laptop window as short as 540 or 600px (a 1366 x 768 screen with a browser's bars): the room shares the
   height with its strip and its buttons, so they shrink (the logo to its smaller size, Back and Done to the
   bar's 56px) and the floor takes the room that frees, with no minimum height of its own. Every table and every
   seat is then on the screen at once, and nothing scrolls. (A window under 900px wide has its own rules.) */
@media (max-height: 720px) and (min-width: 901px) {
    body.classlings-app .tl-seating {
        min-height: 0;
    }

    body.classlings-app .tl-logo {
        width: 77px;
        height: 30px;
    }

    body.classlings-app .tl-body {
        padding-bottom: 12px;
    }

    /* The standard's smaller square (64 px) and its ordinary-sized gold button. */
    body.classlings-app .tl-square {
        width: var(--ctl-square-phone);
        height: var(--ctl-square-phone);
        border-radius: var(--ctl-r);
    }

    body.classlings-app .tl-dock .tl-go {
        min-height: var(--ctl-h);
        margin-bottom: calc(var(--cla-lift) + (var(--ctl-square-phone) - var(--ctl-h)) / 2);
        padding: var(--ctl-pad);
        font: var(--ctl-font);
        border-radius: var(--ctl-r);
        box-shadow: 0 var(--cla-lift) 0 var(--cla-gold-deep);
    }

    body.classlings-app .tl-dock .tl-go:active:not(:disabled) {
        transform: translateY(var(--cla-lift));
    }
}

/* Naming the tables ("How shall we name your tables?") on the same short page: the heading and the seven ways close up
   (their example words are for screen readers only; the pictures show them) so that "Your 6 tables" under them is
   in view above the bar, not hidden below it (walk-through of 14 October). */
@media (max-height: 720px) and (min-width: 901px) {
    body.classlings-app .tl-names {
        gap: 8px;
    }

    body.classlings-app .tl-names .tl-q {
        font-size: 32px;
    }

    body.classlings-app .tl-names .tl-way {
        gap: 6px;
        padding: 8px 14px;
    }

    body.classlings-app .tl-names .tl-way-top b {
        font-size: 22px;
    }

    body.classlings-app .tl-names .tl-mark {
        width: 28px;
        height: 28px;
    }

    body.classlings-app .tl-names .tl-minis .tl-badge {
        width: 36px;
        height: 36px;
    }

    body.classlings-app .tl-names .tl-minis .tl-badge svg {
        width: 26px;
        height: 26px;
    }

    body.classlings-app .tl-names .tl-eg {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    body.classlings-app .tl-names .tl-chip {
        height: 48px;
    }
}

/* ...and at 600px or less the title is drawn at twice the pixel size, as on a phone, and the tray beside the room
   closes up, so its three buttons are all in view. */
@media (max-height: 600px) and (min-width: 901px) {
    body.classlings-app .tl-title {
        --title-scale: 2;
    }

    body.classlings-app .tl-tray {
        gap: 8px;
        padding: 10px 24px;
    }

    body.classlings-app .tl-tray h3 {
        font-size: 24px;
    }
}

/* "Seats and tables" is a long title: on a phone it is drawn at twice the pixel size, not three times, so
   it fits even a narrow one whole. The gold button is the standard's ordinary size there, beside the 64 px
   Back, as in the reasons screen and a new badge's page. */
@media (max-width: 480px) {
    body.classlings-app .tl-title {
        --title-scale: 2;
    }

    body.classlings-app .tl-dock .tl-go {
        min-height: var(--ctl-h);
        margin-bottom: calc(var(--cla-lift) + (var(--cla-square) - var(--ctl-h)) / 2);
        padding: var(--ctl-pad);
        font: var(--ctl-font);
        border-radius: var(--ctl-r);
        box-shadow: 0 var(--cla-lift) 0 var(--cla-gold-deep);
    }

    body.classlings-app .tl-dock .tl-go:active:not(:disabled) {
        transform: translateY(var(--cla-lift));
    }
}

@media (max-width: 600px) {
    /* The colours three to a line, so each name is whole; step 2's tiles one to a line, its names two. */
    body.classlings-app .tl-swatches {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.classlings-app .tl-ways {
        grid-template-columns: minmax(0, 1fr);
    }

    body.classlings-app .tl-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.classlings-app .tl-edit {
        padding: 12px 16px 16px;
    }

    body.classlings-app :is(.tl-steps, .tl-class) {
        display: none;
    }
}

/* A table's editor: the five sets of emblems as tabs over its pictures, the set showing in purple. */
/* The standard's tabs: 48 px in a pale track, the open set in the Cup's purple. */
body.classlings-app .tl-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 6px;
    padding: 4px;
    background: var(--cla-wash);
    border-radius: calc(var(--ctl-r) + 4px);
}

body.classlings-app .tl-theme {
    appearance: none;
    min-height: var(--ctl-tab-h);
    padding: 0 12px;
    font: 600 18px / 1 var(--cla-display);
    color: var(--cla-ink);
    white-space: nowrap;
    background: transparent;
    border: var(--ctl-edge) solid transparent;
    border-radius: var(--ctl-r);
    cursor: pointer;
}

body.classlings-app .tl-theme:hover {
    background: var(--cla-page);
}

body.classlings-app .tl-theme.is-on {
    background: var(--cla-grape);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .tl-theme:focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

/* The editor in one column (6 Oct): the name, then the tabs, then that set's pictures or the colours. */
body.classlings-app .tl-edit-body.is-one {
    grid-template-columns: minmax(0, 1fr);
}

body.classlings-app .tl-edit-body.is-one .tl-input {
    max-width: 360px;
}

body.classlings-app .tl-edit-body.is-one .tl-themes {
    max-width: 100%;
}

body.classlings-app .tl-edit-body.is-one .tl-emblems {
    grid-template-columns: repeat(auto-fill, 44px);
}

body.classlings-app .tl-edit-body.is-one .tl-swatches {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 6px 4px;
}