/* ========================================
   The points menu and the reasons screen (js/pointsMenu.js, js/reasonsEditor.js)
   For classes with Classlings on, body.classlings-app: the reviewed design (design-directions,
   directions/mix/cup.html and points-setup.html). The menu stands over the board for one pupil: their
   Classling, name and points, Points and Classling tabs, and Close; on Points, the class's reasons as
   big buttons, each with its pixel icon, its name and its points on its own colour. Every rule here is
   scoped to body.classlings-app, like the rest of the look.
   ======================================== */

body.classlings-app {
    /* The reasons' colours, each with its deep edge and its pale fill (the design's theme). */
    --pm-lime: #7ed957;      --pm-lime-deep: #3e9a2a;      --pm-lime-tint: #e5f8da;
    --pm-red: #f0532f;       --pm-red-deep: #b8341a;       --pm-red-tint: #ffe3dc;
    --pm-teal: #2ec4b6;      --pm-teal-deep: #12867b;      --pm-teal-tint: #d8f5f1;
    --pm-sky: #3aa0ff;       --pm-sky-deep: #1b6fcf;       --pm-sky-tint: #e1efff;
    --pm-peri: #8fa8ff;      --pm-peri-deep: #4d63d6;      --pm-peri-tint: #e9edff;
    --pm-pink: #ff5fa2;      --pm-pink-deep: #cf3177;      --pm-pink-tint: #ffe5f0;
    --pm-orange: #ff8a3d;    --pm-orange-deep: #cf5a12;    --pm-orange-tint: #ffeddf;
    --pm-heart: #ef4444;
    --pm-scrim: rgba(30, 27, 58, 0.45);
    --pm-r-xl: 44px;
    --pm-body: var(--cla-ui);
}

/* A reason's colour (the teacher picks one per reason). */
body.classlings-app .rc-lime { --rc: var(--pm-lime); --rc-deep: var(--pm-lime-deep); --rc-tint: var(--pm-lime-tint); }
body.classlings-app .rc-red { --rc: var(--pm-red); --rc-deep: var(--pm-red-deep); --rc-tint: var(--pm-red-tint); }
body.classlings-app .rc-teal { --rc: var(--pm-teal); --rc-deep: var(--pm-teal-deep); --rc-tint: var(--pm-teal-tint); }
body.classlings-app .rc-sky { --rc: var(--pm-sky); --rc-deep: var(--pm-sky-deep); --rc-tint: var(--pm-sky-tint); }
body.classlings-app .rc-peri { --rc: var(--pm-peri); --rc-deep: var(--pm-peri-deep); --rc-tint: var(--pm-peri-tint); }
body.classlings-app .rc-pink { --rc: var(--pm-pink); --rc-deep: var(--pm-pink-deep); --rc-tint: var(--pm-pink-tint); }
body.classlings-app .rc-orange { --rc: var(--pm-orange); --rc-deep: var(--pm-orange-deep); --rc-tint: var(--pm-orange-tint); }

/* The look's icons, in the colour of the words beside them (claIcons.js and the kit's barIconSVG). */
body.classlings-app .cla-ic {
    display: inline-block;
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

/* The kit's pixel icons in this look's buttons (barIconSVG with 'cla-ic is-px'), in the colour of the
   words too. They are always 24px, so the 12 x 12 art is two screen pixels to one and the 8-wide art
   three, and every pixel stays square whatever size a button gives its line icons (hence !important).
   A square's Back (is-square) is as big as the bar's Back: 32px on the board, 24px on smaller screens. */
body.classlings-app svg.cla-ic.is-px {
    width: 24px !important;
    height: 24px !important;
}

/* The cross (Close) is 8 x 7 art: 24 x 21, three screen pixels to one. The chevrons (next, down) are
   8 x 8 art at 16px, two to one, as light as the arrow beside Tables. */
body.classlings-app svg.cla-ic.is-px.is-8x7 {
    height: 21px !important;
}

body.classlings-app svg.cla-ic.is-px:is(.is-next, .is-down) {
    width: 16px !important;
    height: 16px !important;
}

body.classlings-app svg.cla-ic.is-px.is-square {
    width: var(--cla-square-icon, 32px) !important;
    height: var(--cla-square-icon, 32px) !important;
}

/* The tick is 12 art pixels wide, so it is 24px beside a button's word or on a colour, and 12px (one
   screen pixel to one) where it sits in a small badge or in a line of small words (is-tiny). */
body.classlings-app svg.cla-ic.is-px.is-tiny {
    width: 12px !important;
    height: 12px !important;
}

/* The padlock ("in use, or locked": one picture for both, the teacher's answer of 5 October) is 8 x 10
   art, so it is 24 x 30, three screen pixels to one, in the Locked strip. */
body.classlings-app svg.cla-ic.is-px.is-padlock {
    width: 24px !important;
    height: 30px !important;
}

/* ---------------------------------------------------------------- holding a card down */

/* A card is pressed in a little while it's held, so the menu doesn't come as a surprise. Nothing on
   it can be selected or called up by a long press on a phone. */
body.classlings-app #pupilsGrid .cl-card .cl-turn {
    transition: transform 140ms ease-out;
}

body.classlings-app #pupilsGrid .cl-card.is-holding .cl-turn {
    transform: scale(0.97);
    transition: transform 450ms ease-out;
}

body.classlings-app #pupilsGrid .cl-front {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---------------------------------------------------------------- sitting out the Showdown */

/* A pupil sitting out: a greyed card with its solid edge, and its Classling asleep (closed eyes and a
   pixel Zzz, drawn by classlings-board.js). That's enough: no tag, and no points showing (the teacher's
   notes of 3 October). The card's label still says it to screen readers. */
body.classlings-app #todayScreen #pupilsGrid.classlings-board .cl-card.excluded {
    opacity: 1;
    border-style: solid;
}

/* Today's "EXCLUDED" stamp is gone too. */
body.classlings-app #pupilsGrid .cl-card.excluded::after {
    content: none;
}

body.classlings-app #todayScreen #pupilsGrid.classlings-board .cl-card.excluded .cl-face {
    filter: grayscale(90%);
}

body.classlings-app #pupilsGrid .cl-card.excluded .cl-info {
    color: var(--cla-ink-2);
}

body.classlings-app #pupilsGrid .cl-card.excluded .cl-heart {
    color: #9aa5a9;
}

/* In the menu: the way back in comes first, and the reasons are greyed. */
body.classlings-app .pm-out {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 18px;
    color: var(--cla-ink);
    background: var(--cla-wash);
    border: 2px solid var(--cla-ink-2);
    border-radius: var(--cla-r-m);
}

body.classlings-app .pm-out p {
    flex: 1;
    display: grid;
    gap: 2px;
    margin: 0;
    font: 400 18px / 1.3 var(--pm-body);
    color: var(--cla-ink-2);
}

body.classlings-app .pm-out p b {
    font: 600 22px / 1.2 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app .pm-out .pm-back-in {
    margin-bottom: var(--cla-lift);
}

body.classlings-app .pm-zzz {
    display: block;
    flex: none;
    width: 22px;
    height: 30px;
    color: var(--cla-ink-2);
}

body.classlings-app .pm-sit-out .pm-zzz {
    width: 14px;
    height: 19px;
    color: var(--cla-ink);
}

/* The shortcuts panel's rows for the points menu. */
body.classlings-app .keyboard-help-row.cla-only {
    display: grid;
}

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

body.classlings-app .pm {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: var(--pm-scrim);
}

body.classlings-app .pm[hidden] {
    display: none;
}

/* The board's size of panel (1302 x 640 on a 1366 x 768 board), centred on a bigger screen. */
body.classlings-app .pm-panel {
    position: absolute;
    left: max(var(--cla-gutter), calc((100vw - 1302px) / 2));
    right: max(var(--cla-gutter), calc((100vw - 1302px) / 2));
    top: max(64px, calc((100dvh - 640px) / 2));
    bottom: max(64px, calc((100dvh - 640px) / 2));
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 16px 32px 24px;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--pm-r-xl);
    box-shadow: var(--cla-float);
}

body.classlings-app .pm-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: var(--cla-edge) solid var(--cla-wash-2);
}

body.classlings-app .pm-face {
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 72px;
    height: 72px;
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-s);
    image-rendering: pixelated;
}

body.classlings-app .pm-who {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.classlings-app .pm-who h2 {
    margin: 0;
    overflow: hidden;
    font: 700 36px / 1.05 var(--cla-display);
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .pm-who p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .pm-heart {
    width: 18px;
    height: auto;
    color: var(--pm-heart);
}

/* Points | Classling: one shape, and the open tab is purple, as the bar's switch is. */
body.classlings-app .pm-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    padding: 4px;
    background: var(--cla-wash);
    border-radius: calc(var(--cla-r-m) + 4px);
}

body.classlings-app .pm-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 24px;
    font: 600 20px / 1 var(--cla-display);
    color: var(--cla-ink);
    white-space: nowrap;
    background: transparent;
    border: var(--cla-edge) solid transparent;
    border-radius: var(--cla-r-m);
    cursor: pointer;
}

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

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

body.classlings-app .pm-tab .cla-ic {
    width: 24px;
    height: 24px;
}

/* Close, and the other plain buttons: the standard's ordinary button (shared/css/classlings-controls.css), a
   white cap on an ink base that sinks when pressed. Close wears the kit's cross beside its word. */
body.classlings-app :is(.pm-close, .pm-btn) {
    appearance: none;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ctl-h);
    margin: 0 0 var(--cla-lift);
    padding: var(--ctl-pad);
    font: var(--ctl-font);
    color: var(--cla-ink);
    white-space: nowrap;
    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 :is(.pm-close, .pm-btn):active {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: 70ms;
    transition-timing-function: ease-out;
}

/* The main action: gold with ink words. */
body.classlings-app .pm-btn.is-go {
    background: var(--cla-gold);
    border-color: var(--cla-gold-deep);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-gold-deep);
}

/* Something that wipes (Leave without saving): danger red, with its deep red edge and base. */
body.classlings-app .pm-btn.is-danger {
    background: var(--ctl-danger);
    border-color: var(--ctl-danger-deep);
    box-shadow: 0 var(--cla-lift) 0 var(--ctl-danger-deep);
}

body.classlings-app .pm-btn:disabled {
    color: var(--cla-ink-2);
    opacity: 0.55;
    cursor: default;
    transform: none;
}

body.classlings-app .pm-pane {
    min-height: 0;
    padding-top: 16px;
}

body.classlings-app .pm-pane[hidden] {
    display: none;
}

/* ---------------------------------------------------------------- the reasons */

body.classlings-app .pm-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Many reasons scroll inside the panel; the foot stays put. */
body.classlings-app .pm-lists {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    margin: 0 -8px;
    padding: 0 8px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.classlings-app .pm-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .pm-group span {
    font: 400 18px / 1.2 var(--pm-body);
    color: var(--cla-ink-2);
}

body.classlings-app .pm-reasons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 8px;
}

body.classlings-app .pm-empty {
    margin: 0 0 8px;
    font: 400 18px / 1.4 var(--pm-body);
    color: var(--cla-ink-2);
}

/* A reason to tap: its icon, its name, and its points on its colour. It sinks onto its base when
   pressed, then springs back. */
body.classlings-app .pm-reason {
    appearance: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    margin: 0 0 var(--ctl-lift);
    padding: 8px 12px 8px 8px;
    font: 600 22px / 1.1 var(--cla-display);
    color: var(--cla-ink);
    text-align: left;
    background: var(--rc-tint);
    border: var(--cla-edge) solid var(--rc-deep);
    border-radius: var(--cla-r-m);
    box-shadow: 0 var(--ctl-lift) 0 var(--rc-deep);
    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 .pm-reason:active {
    transform: translateY(var(--ctl-lift));
    box-shadow: 0 0 0 var(--rc-deep);
    transition-duration: 70ms;
}

body.classlings-app .pm-reason:disabled {
    cursor: default;
    opacity: 0.45;
    transform: none;
    box-shadow: 0 var(--ctl-lift) 0 var(--rc-deep);
}

body.classlings-app .pm-reason-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The pixel icon: 16 art pixels at 3 screen pixels each. */
body.classlings-app .ri {
    display: block;
    flex: none;
    width: 48px;
    height: 48px;
}

body.classlings-app .pm-reason .pts {
    min-width: 52px;
    box-sizing: border-box;
    padding: 6px 10px;
    font: 700 22px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--rc);
    border: 2px solid var(--rc-deep);
    border-radius: var(--cla-r-s);
}

body.classlings-app .pm-foot {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: auto 0 0;
    font: 400 18px / 1.2 var(--pm-body);
    color: var(--cla-ink-2);
}

/* Edit reasons, Sit out the Showdown and All badges: the standard's quiet button (48 px, a pale edge, no
   lift). */
body.classlings-app :is(.pm-edit, .pm-sit-out) {
    appearance: none;
    display: inline-flex;
    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 :is(.pm-edit, .pm-sit-out):active {
    background: var(--cla-wash);
}

body.classlings-app :is(.pm-edit, .pm-sit-out):hover {
    background: var(--cla-wash);
}

body.classlings-app .pm-edit .cla-ic {
    width: 22px;
    height: 22px;
}

body.classlings-app .pm :is(button, [tabindex]):focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

/* ---------------------------------------------------------------- the Classling */

/* The stage with Undo and Save under it, and beside it the slots and the open slot's choices. The
   choices' column has a fixed height, so the stage, Undo and Save never move. */
body.classlings-app .pm-look {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "stage slots" "stage choices" "save choices";
    gap: 16px 32px;
}

/* Pixel Quest's world in a box: sky, still clouds, and grass the Classling stands on. */
body.classlings-app .pm-stage {
    position: relative;
    grid-area: stage;
    height: 290px;
    overflow: hidden;
    background:
        var(--cla-art-cloud) left 20px top 24px / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) right 24px top 92px / calc(var(--cla-px) * 20) calc(var(--cla-px) * 5) no-repeat,
        var(--cla-world);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
}

body.classlings-app .pm-stage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(56px + var(--cla-px) * 3);
    background:
        var(--cla-art-tufts) left 0 top 0 / calc(var(--cla-px) * 16) calc(var(--cla-px) * 3) repeat-x,
        var(--cla-art-edge) left 0 bottom calc(var(--cla-px) * 3) / 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% calc(var(--cla-px) * 3) no-repeat,
        linear-gradient(var(--cla-grass), var(--cla-grass)) left 0 bottom 0 / 100% 56px no-repeat;
    pointer-events: none;
}

body.classlings-app .pm-stage-who {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(56px - var(--cla-px));
    z-index: 1;
    display: block;
    width: 100%;
    height: 200px;
    image-rendering: pixelated;
}

/* The paddle, trail, name tag and backdrop show in their display window, as on their own page. */
body.classlings-app .pm-stage-show {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

body.classlings-app .pm-stage canvas[hidden] {
    display: none;
}

body.classlings-app .pm-save {
    grid-area: save;
    align-self: start;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
}

/* Undo and Save (the Classling tab): the same ordinary buttons as Close, a little tighter inside. */
body.classlings-app .pm-btn.is-big {
    padding: 0 16px;
}

/* A long first name wraps rather than spilling out of Save. */
body.classlings-app .pm-save .pm-btn {
    min-width: 0;
    white-space: normal;
    text-align: center;
}

body.classlings-app .pm-look-status {
    grid-column: 1 / -1;
    min-height: 1.4em;
    margin: 0;
    font: 400 16px / 1.35 var(--pm-body);
    color: var(--cla-ink-2);
}

/* The seven slots: a picture of what's on and its name; the open one is purple, with a tick. */
body.classlings-app .pm-slots {
    grid-area: slots;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

body.classlings-app .pm-slot {
    appearance: none;
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 8px 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;
}

body.classlings-app .pm-slot.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 .pm-pic {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background: var(--cla-wash);
    border-radius: var(--cla-r-s);
}

body.classlings-app .pm-slot.is-on .pm-pic {
    background: var(--cla-page);
}

body.classlings-app .pm-pic canvas {
    display: block;
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
}

body.classlings-app .pm-slot-name {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .pm-swatch {
    display: block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    background: var(--sw);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: 8px;
}

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

/* The open slot's choices: Unlocked in a grid that scrolls inside the column, Locked in one strip. */
body.classlings-app .pm-choices {
    grid-area: choices;
    min-height: 0;
    contain: size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

body.classlings-app .pm-set {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
}

body.classlings-app .pm-set h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .pm-n {
    min-width: 34px;
    box-sizing: border-box;
    padding: 2px 8px;
    font: 700 18px / 1.2 var(--cla-display);
    text-align: center;
    background: var(--cla-wash);
    border-radius: var(--cla-r-s);
}

body.classlings-app .pm-hint {
    font: 400 16px / 1.3 var(--pm-body);
    color: var(--cla-ink-2);
}

body.classlings-app .pm-scroll {
    position: relative;
    min-height: 0;
}

body.classlings-app .pm-grid {
    box-sizing: border-box;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 96px;
    align-content: start;
    gap: 8px;
    padding: 12px 8px 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A half-shown row and a fade say there are more. */
body.classlings-app .pm-scroll.is-more::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--cla-page));
    pointer-events: none;
}

/* A thing to pick: the pupils' pick tile (shared/css/classlings-pupil.css .pick), sized to fit: a white
   card with a pale edge and the big corners, chosen in the Cup's purple with a chunky edge and its tick. */
body.classlings-app .pm-pick {
    appearance: none;
    position: relative;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 2px;
    min-width: 0;
    height: 96px;
    padding: 4px;
    font: 600 16px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2);
    border-radius: var(--ctl-panel-r);
    cursor: pointer;
    transition: transform 460ms cubic-bezier(0.28, 1.9, 0.5, 1);
}

body.classlings-app button.pm-pick:active {
    transform: scale(0.94);
    transition-duration: 70ms;
}

body.classlings-app .pm-pick.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 .pm-pick canvas {
    display: block;
    width: 64px;
    height: 60px;
    image-rendering: pixelated;
}

/* Trails: wide strips, two columns each, so the trail has room to run across (pointsMenuLook.js). */
body.classlings-app .pm-choices.is-trail .pm-pick {
    grid-column: span 2;
}

body.classlings-app .pm-choices.is-trail .pm-pick canvas {
    width: calc(100% - 12px);
    max-width: 240px;
    /* A soft path for the trail to run along, so the white parts of sparkles and stars show. */
    background: var(--cla-wash);
    border-radius: 8px;
}

body.classlings-app .pm-pick .pm-swatch {
    width: 52px;
    height: 52px;
    margin: 4px 0;
}

body.classlings-app .pm-pick > span:last-child {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .pm-on {
    position: absolute;
    top: -10px;
    right: -8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px 3px 5px;
    font: 600 16px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--pm-lime);
    border: 2px solid var(--pm-lime-deep);
    border-radius: var(--cla-r-s);
}

/* "Make it yours", under the Paddle slot's tiles when the Pong paddle (or the paintbrush) is on: four
   decoration tiles, then the paddle's colour and its second colour as scrolling strips of squares. */
body.classlings-app .pm-set.has-make {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

body.classlings-app .pm-make {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "title title" "decor colours";
    align-items: center;
    gap: 4px 16px;
    min-width: 0;
    padding: 8px 12px;
    background: var(--cla-wash);
    border-radius: var(--cla-r-m);
}

body.classlings-app .pm-make.is-brush {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "colours";
}

body.classlings-app .pm-make h4 {
    grid-area: title;
    margin: 0;
    font: 600 18px / 1.2 var(--cla-display);
}

body.classlings-app .pm-mk-decor {
    grid-area: decor;
    display: flex;
    gap: 8px;
}

body.classlings-app .pm-deco {
    appearance: none;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 96px;
    padding: 4px 2px;
    font: 600 14px / 1.2 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;
}

body.classlings-app .pm-deco.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 .pm-deco canvas {
    display: block;
    width: 72px;
    height: 36px;
    image-rendering: pixelated;
}

body.classlings-app .pm-deco > span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* "Make it yours" side by side (the four tiles, then the colours) needs about 700px. In a narrower column (a
   phone, a tablet, a small window) it stacks instead: the title, the tiles wrapping (two to a row on a
   phone, so "Two colours" stays whole), then the colours, so nothing runs off the side and every colour
   can be reached. The column's own width decides, not the screen's. */
body.classlings-app .pm-choices {
    container-type: inline-size;
}

@container (max-width: 700px) {
    body.classlings-app .pm-make {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "decor" "colours";
    }

    body.classlings-app .pm-mk-decor {
        flex-wrap: wrap;
    }
}

@container (max-width: 400px) {
    body.classlings-app .pm-mk-decor .pm-deco {
        flex: 1 1 calc(50% - 4px);
        width: auto;
    }
}

body.classlings-app .pm-mk-colours {
    grid-area: colours;
    display: grid;
    gap: 6px;
    min-width: 0;
}

body.classlings-app .pm-mk-line {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

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

body.classlings-app .pm-mk-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 4px;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body.classlings-app .pm-mk-sw,
body.classlings-app .pm-mk-auto {
    appearance: none;
    box-sizing: border-box;
    flex: none;
    height: 30px;
    padding: 0;
    cursor: pointer;
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: 7px;
}

body.classlings-app .pm-mk-sw {
    width: 30px;
    background: var(--sw);
}

body.classlings-app .pm-mk-auto {
    padding: 0 10px;
    font: 600 14px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    white-space: nowrap;
}

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

body.classlings-app .pm-mk-auto.is-on {
    background: var(--cla-grape-tint);
}

/* A colour's button: its name, then the colour on now. Tapping it opens every colour in the grid. */
body.classlings-app .pm-mk-open {
    appearance: none;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 10px 4px 0;
    color: var(--cla-ink);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--cla-r-s);
    cursor: pointer;
}

body.classlings-app .pm-mk-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    min-width: 0;
    padding: 3px 12px 3px 4px;
    font: 600 15px / 1.2 var(--cla-display);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: 999px;
}

body.classlings-app .pm-mk-now::after {
    content: '\203A';
    font-size: 20px;
    line-height: 1;
}

body.classlings-app .pm-mk-open.is-on .pm-mk-now {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .pm-mk-dot {
    flex: none;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    background: var(--sw);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: 6px;
}

/* Auto: no colour chosen, so a diagonal split hints "picked for you". */
body.classlings-app .pm-mk-dot.is-auto,
body.classlings-app .pm-pick .pm-swatch.is-auto {
    background: linear-gradient(135deg, var(--cla-page) 50%, var(--cla-wash-2) 50%);
}

/* The Decoration button is for short screens only; elsewhere the four decorations show as tiles. */
body.classlings-app .pm-mk-open.is-decor {
    display: none;
}

/* Choosing a colour: its grid has the column; "Make it yours" and Locked wait until it's done. */
body.classlings-app .pm-set.is-picking > :is(.pm-make, .pm-locked) {
    display: none;
}

body.classlings-app .pm-mk-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 10px;
    font: 600 15px / 1.2 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-s);
    cursor: pointer;
}

body.classlings-app .pm-mk-back .cla-ic {
    width: 18px;
    height: 18px;
}

body.classlings-app .pm-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    box-sizing: border-box;
    padding: 6px 16px;
    background: var(--cla-wash);
    border: 2px dashed var(--cla-wash-2);
    border-radius: var(--cla-r-m);
}

body.classlings-app .pm-locked > .cla-ic {
    flex: none;
}

body.classlings-app .pm-locked p {
    display: grid;
    margin: 0;
    font: 400 16px / 1.25 var(--pm-body);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

body.classlings-app .pm-locked p b {
    font: 600 20px / 1.2 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app .pm-sil {
    display: flex;
    gap: 4px;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
}

body.classlings-app .pm-sil canvas {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    opacity: 0.25;
    image-rendering: pixelated;
}

/* "Next: Chrome at level 32" stays on one line; in a narrow window the words beside it wrap instead,
   and if there's still no room it drops to a line of its own (the teacher's note, 5 Oct). */
body.classlings-app .pm-next {
    flex: none;
    margin-left: auto;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
    text-align: right;
    white-space: nowrap;
}

body.classlings-app .pm-locked:has(.pm-next) {
    flex-wrap: wrap;
}

/* With the Classlings still to find: the words may wrap, the silhouettes take whatever room is left
   (none, in a narrow window), and "+26" always stays inside the strip. */
body.classlings-app .pm-locked:has(.pm-sil) p {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
}

body.classlings-app .pm-locked .pm-sil {
    flex: 1 1 0;
    justify-content: flex-end;
}

body.classlings-app .pm-locked .pm-more {
    flex: none;
    margin-left: auto;
}

body.classlings-app .pm-locked:has(.pm-next) p {
    flex: 1 1 12em;
    min-width: 0;
    white-space: normal;
}

body.classlings-app .pm-more {
    flex: none;
    font: 700 18px / 1 var(--cla-display);
    color: var(--cla-ink-2);
}

/* ---------------------------------------------------------------- the reasons screen */

/* A page of its own over the board (or Settings): the strip on top, the two lists, and the dock. */
body.classlings-app .rs {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: var(--cla-ink);
    background: var(--cla-page);
}

body.classlings-app .rs[hidden] {
    display: none;
}

body.classlings-app .rs-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: 8px var(--cla-gutter) 0;
}

/* The class's name in Classlings' lettering at scale 3, as on its Cup page. */
body.classlings-app .rs-title {
    --title-scale: 3;
    flex: none;
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}

body.classlings-app .rs-title svg {
    display: block;
    width: calc(var(--title-scale) * var(--w) * 1px);
    height: calc(var(--title-scale) * var(--h) * 1px);
    /* Accents above capitals make the art 24 rows, not 20: lift just those rows into the space above, so
       an accented name's capitals sit level with "Reasons for points". */
    margin-top: calc((20 - var(--h)) * var(--title-scale) * 1px);
}

body.classlings-app .rs-title svg .title-edge {
    fill: #2d3436;
}

body.classlings-app .rs-title svg .title-fill {
    fill: #ffffff;
}

/* A name the lettering cannot draw (or one too long for it) is plain words: they share the strip with the steps and the logo (they
   may shrink and wrap, never run off the side or under them). js/setupScreen.js fitWords takes their size down until no word is wider
   than the room, and at the smallest a word that is still too long breaks (is-broken). */
body.classlings-app .rs-title.is-text {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font: 700 36px / 1.1 var(--cla-display);
    line-height: 1.1;
    white-space: normal;
}

body.classlings-app .rs-title.is-text.is-broken {
    overflow-wrap: anywhere;
}

body.classlings-app .rs-steps {
    margin: 0;
    font: 600 20px / 1.2 var(--cla-display);
    white-space: nowrap;
}

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

/* The reasons screen, drawn calmer (17 October 2026: onboarding/designs/src/9-reasons.html). The body holds the question, the
   two lists on white panels, and the card that changes one reason, which stands in the place of the other list so nothing in
   the lists moves (js/reasonsEditor.js). It never scrolls itself: where the lists are more than the room they scroll inside
   their own panel (js/setupScreen.js puts the panel's edge on then). */
body.classlings-app .rs {
    --rs-pad: 12px;
    --rs-tile: 54px;
    --rs-gap: 8px;
}

body.classlings-app .rs-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 14px var(--cla-gutter) var(--rs-pad);
    overflow: hidden;
}

/* The question, like every other step's: "What will you give points for?" with a line to say what to do. The row is as tall
   as Undo, so the lists do not move when it comes. */
body.classlings-app .rs-q {
    flex: none;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    min-height: 52px;
}

body.classlings-app .rs-question {
    margin: 0;
    font: 700 clamp(28px, 6.2vh, 48px) / 1.1 var(--cla-display);
}

body.classlings-app .rs-tip {
    margin: 0;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
}

/* On Quick add the line is two sentences (how a reason is given, and how to change one). Where the row has no room for both on one
   line they go one over the other beside the question (and the first folds, evenly, where it must), rather than the whole line
   dropping under the question or pushing Undo's place onto a row of its own. */
body.classlings-app .rs-tip.is-two {
    flex: 1 1 0;
    min-width: 14em; /* narrower than this beside the question, it takes a line of its own under it */
    max-width: max-content;
    /* Two or three short lines stand beside the question's middle, so they never make the row taller than the question. */
    align-self: center;
}

body.classlings-app .rs-tip.is-two .rs-tip-part {
    display: inline-block;
    text-wrap: balance;
}

/* Undo at the end of the row (once something has changed), and in Settings "Start with an empty list" beside it. */
body.classlings-app .rs-qend {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 12px;
    margin-left: auto;
}

body.classlings-app .rs-qend > [hidden] {
    display: none;
}

/* Undo keeps its place in the row while it is not there (out of sight, and out of Tab), so the row is as tall as it will be when
   Undo comes, on a phone or a tablet as much as on a laptop, and nothing under it moves. */
body.classlings-app .rs-qend > .rs-undo[hidden] {
    display: inline-flex;
    visibility: hidden;
}

body.classlings-app .rs-undo .cla-ic {
    width: 22px;
    height: 22px;
}

body.classlings-app .rs-empty {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    cursor: pointer;
}

body.classlings-app .rs-empty:disabled {
    color: var(--cla-ink-2);
    text-decoration: none;
    cursor: default;
}

body.classlings-app .rs-problem {
    flex: none;
    margin: 0;
    padding: 8px 16px;
    font: 600 18px / 1.3 var(--cla-display);
    background: var(--pm-red-tint);
    border: 2px solid var(--pm-red-deep);
    border-radius: var(--cla-r-s);
}

body.classlings-app .rs-problem[hidden] {
    display: none;
}

/* The two lists, each on a white panel: Well done and Needs work side by side (one over the other below 1000 px). */
body.classlings-app .rs-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

body.classlings-app .rs-set {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 16px 16px;
    background: var(--cla-page);
    border: 3px solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
}

body.classlings-app .rs-set-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

body.classlings-app .rs-set-head h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font: 700 24px / 1.1 var(--cla-display);
}

body.classlings-app .rs-set-head h3 small {
    font: 400 16px / 1.2 var(--pm-body);
    color: var(--cla-ink-2);
}

body.classlings-app .rs-add {
    margin: 0 0 var(--l, 4px) auto;
}

body.classlings-app .rs-add[hidden] {
    display: none;
}

body.classlings-app .rs-add .cla-ic {
    width: 20px;
    height: 20px;
}

/* A reason: one button, its icon, its name and its points on its colour, as the points menu shows it (it sinks onto its base
   when pressed). Tapping it opens the card that changes it. */
body.classlings-app .rs-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rs-gap) 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.classlings-app .rs-tiles[hidden] {
    display: none;
}

body.classlings-app .rs-tile {
    appearance: none;
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--rs-tile);
    margin: 0 0 4px;
    padding: 6px 8px 6px 9px;
    font: 600 19px / 1.1 var(--cla-display);
    color: var(--cla-ink);
    text-align: left;
    background: var(--rc-tint);
    border: 2px solid var(--rc-deep);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--rc-deep);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .rs-tile:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--rc-deep);
    transition-duration: var(--ctl-press);
}

body.classlings-app .rs-tile.is-open {
    box-shadow: 0 4px 0 var(--rc-deep), 0 0 0 4px var(--cla-grape);
}

body.classlings-app .rs-ti .ri,
body.classlings-app .rs-card-pic .ri,
body.classlings-app .rs-icons .ri {
    display: block;
    width: 100%;
    height: 100%;
}

body.classlings-app .rs-ti {
    width: 32px;
    height: 32px;
}

body.classlings-app .rs-tn {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.classlings-app .rs-tn.is-blank {
    color: var(--cla-ink-2);
    font-weight: 400;
}

body.classlings-app .rs-tp {
    min-width: 44px;
    box-sizing: border-box;
    padding: 5px 8px;
    font: 700 18px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--rc);
    border: 2px solid var(--rc-deep);
    border-radius: 10px;
}

/* Only give points: at the foot of Needs work, which it hides. While it is on, Needs work is one line that says so. */
body.classlings-app .rs-only {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 2px dashed var(--cla-wash-2);
}

body.classlings-app .rs-only-what {
    display: grid;
    gap: 2px;
    font: 600 19px / 1.15 var(--cla-display);
}

body.classlings-app .rs-only-what small {
    font: 400 16px / 1.2 var(--pm-body);
    color: var(--cla-ink-2);
}

body.classlings-app .rs-only .cla-onoff {
    margin-left: auto;
}

body.classlings-app .rs-hidden-note {
    margin: 0;
    font: 400 17px / 1.4 var(--pm-body);
    color: var(--cla-ink-2);
}

body.classlings-app .rs-hidden-note[hidden] {
    display: none;
}

body.classlings-app .rs-lists:has(.is-hidden) {
    align-items: start;
}

body.classlings-app .rs-set.is-hidden .rs-only {
    margin-top: 0;
}

body.classlings-app .rs-set.is-hidden h3 {
    color: var(--cla-ink-2);
}

/* Changing one reason: everything about it in one card, over the other list's place, so nothing moves under it and the reason
   being changed stays in view. Its notch points at the reason. On a narrow window it is a sheet along the foot. */
body.classlings-app .rs-card {
    position: absolute;
    z-index: 6;
    box-sizing: border-box;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: 3px solid var(--cla-ink);
    border-radius: 24px;
    box-shadow: 0 6px 0 var(--cla-ink);
}

body.classlings-app .rs-card[hidden] {
    display: none;
}

body.classlings-app .rs-card:focus {
    outline: none;
}

body.classlings-app .rs-card::before {
    content: '';
    position: absolute;
    top: var(--notch, 50%);
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--cla-page);
    border: 3px solid var(--cla-ink);
    transform: rotate(45deg);
}

body.classlings-app .rs-card.from-left::before {
    left: -12px;
    border-top: 0;
    border-right: 0;
}

body.classlings-app .rs-card.from-right::before {
    right: -12px;
    border-bottom: 0;
    border-left: 0;
}

/* On a narrow window it floats by its reason (fixed), its notch pointing up at it from the top edge, or down from the bottom. */
body.classlings-app .rs-card.is-float {
    position: fixed;
}

body.classlings-app .rs-card.is-float::before {
    left: var(--notch, 50%);
    margin: 0 0 0 -9px;
}

body.classlings-app .rs-card.is-below::before {
    top: -12px;
    border-bottom: 0;
    border-right: 0;
}

body.classlings-app .rs-card.is-above::before {
    top: auto;
    bottom: -12px;
    border-top: 0;
    border-left: 0;
}

body.classlings-app .rs-card.is-over::before {
    display: none;
}

body.classlings-app .rs-card-in {
    --rs-card-foot: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 12px;
    box-sizing: border-box;
    min-height: 100%;
    padding: 14px 16px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.classlings-app .rs-card-top {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

body.classlings-app .rs-card-pic {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    padding: 8px;
    background: var(--rc-tint);
    border: 2px solid var(--rc-deep);
    border-radius: 14px;
}

/* The name: the standard's text box (48 px, a pale edge that turns ink when focused). */
body.classlings-app .rs-name {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    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 .rs-name:focus {
    border-color: var(--cla-ink);
    outline: none;
}

/* (A text box's focus is its edge turning ink, the standard's: not the ring that buttons have as well.) */
body.classlings-app .rs .rs-name:focus-visible {
    outline: none;
}

body.classlings-app .rs-remove .cla-ic,
body.classlings-app .rs-done .cla-ic {
    width: 22px;
    height: 22px;
}

body.classlings-app .rs-card-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* A label and what it is for stay together when the row has to wrap. */
body.classlings-app .rs-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.classlings-app .rs-field.is-colour {
    margin-left: auto;
}

body.classlings-app .rs-label {
    flex: none;
    min-width: 50px;
    font: 600 17px / 1.1 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .rs-field.is-colour .rs-label {
    min-width: 0;
}

body.classlings-app .rs-card-row.is-icons {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}

body.classlings-app .rs-card-row.is-icons .rs-label {
    padding-top: 12px;
}

body.classlings-app .rs-card-row.is-icons .rs-icons {
    flex: 1 1 0;
    min-width: 0;
}

/* Its points: the standard's plus and minus (48 px squares on a 4 px base, the kit's pixel signs) either side of the number. */
body.classlings-app .rs-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.classlings-app .rs-stepper button {
    appearance: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--ctl-small-h);
    height: var(--ctl-small-h);
    margin: 0 0 var(--ctl-small-lift);
    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 .rs-stepper button: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 .rs-stepper button:disabled {
    cursor: default;
    opacity: 0.45;
}

body.classlings-app .rs-stepper output {
    box-sizing: border-box;
    min-width: 52px;
    padding: 8px 10px;
    font: 700 20px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--rc);
    border: 2px solid var(--rc-deep);
    border-radius: 10px;
}

body.classlings-app .rs-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.classlings-app .rs-swatches button {
    appearance: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 6px;
    color: var(--cla-ink);
    background: var(--rc);
    border: 2px solid var(--rc-deep);
    border-radius: 10px;
    cursor: pointer;
}

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

body.classlings-app .rs-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body.classlings-app .rs-icons button {
    appearance: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 6px;
    background: var(--cla-wash);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}

body.classlings-app .rs-icons button.is-on {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
    box-shadow: inset 0 0 0 2px var(--cla-grape-deep);
}

/* Done is at the card's foot, and stays there when the card has more than the room and scrolls inside itself (the card's bottom
   edge is its own padding, so it is Done's box that holds it). */
body.classlings-app .rs-card-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: var(--rs-card-foot);
    background: var(--cla-page);
}

/* A laptop's page is short: the reasons are a little tighter so the starter set and a card both fit (the drawing's). */
@media (max-height: 560px) and (min-width: 600px) {
    body.classlings-app .rs {
        --rs-tile: 48px;
        --rs-gap: 6px;
    }

    body.classlings-app .rs-body {
        gap: 10px;
        padding-top: 12px;
    }

    body.classlings-app .rs-set {
        gap: 8px;
        padding-block: 10px 12px;
    }
}

/* A window under 1340 px wide: the card is about 560 px wide inside, so its parts are a little tighter than the drawing's and the
   points and the colour stay on one row (and the twelve icons on one). From 1340 px the drawing's own sizes fit. */
@media (max-width: 1339px) and (min-width: 1000px) {
    body.classlings-app .rs-card-in {
        --rs-card-foot: 14px;
        gap: 10px;
        padding: 12px 14px 0;
    }

    body.classlings-app .rs-label {
        min-width: 46px;
    }

    body.classlings-app .rs-field {
        gap: 8px;
    }

    body.classlings-app .rs-card-row {
        column-gap: 12px;
    }

    body.classlings-app .rs-stepper {
        gap: 4px;
    }

    body.classlings-app .rs-stepper output {
        min-width: 48px;
        padding: 8px 6px;
    }

    body.classlings-app .rs-swatches {
        gap: 5px;
    }

    body.classlings-app .rs-swatches button {
        width: 34px;
        height: 34px;
        padding: 5px;
    }

    body.classlings-app .rs-icons button {
        width: 37px;
        height: 37px;
        padding: 5px;
    }
}

/* A big screen: everything a size up, so the lists fill it as the points menu's do. */
@media (min-width: 1600px) and (min-height: 900px) {
    /* The standard's 48 px small buttons (Undo, Add a reason, Remove, Done, plus and minus) are 60 px here, as the Tables menu's are,
       so they can be read from the back of the room. */
    body.classlings-app .rs {
        --rs-tile: 92px;
        --rs-gap: 14px;
        --ctl-small-h: 60px;
        --ctl-small-font: 600 22px / 1.1 var(--ctl-display);
    }

    body.classlings-app .rs-body {
        gap: 22px;
        padding-top: 26px;
    }

    body.classlings-app .rs-tip {
        font-size: 24px;
    }

    body.classlings-app .rs-q {
        min-height: 64px;
    }

    body.classlings-app .rs-lists {
        gap: 28px;
    }

    body.classlings-app .rs-set {
        gap: 18px;
        padding: 20px 24px 24px;
        border-radius: 34px;
    }

    body.classlings-app .rs-set-head {
        min-height: 56px;
    }

    body.classlings-app .rs-set-head h3 {
        font-size: 34px;
    }

    body.classlings-app .rs-set-head h3 small {
        font-size: 21px;
    }

    body.classlings-app .rs-tiles {
        gap: var(--rs-gap) 18px;
    }

    body.classlings-app .rs-tile {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 16px;
        padding: 8px 14px 8px 16px;
        font-size: 29px;
        border-width: 3px;
        border-radius: 20px;
        box-shadow: 0 6px 0 var(--rc-deep);
        margin-bottom: 6px;
    }

    body.classlings-app .rs-tile.is-open {
        box-shadow: 0 6px 0 var(--rc-deep), 0 0 0 5px var(--cla-grape);
    }

    body.classlings-app .rs-ti {
        width: 48px;
        height: 48px;
    }

    body.classlings-app .rs-tp {
        min-width: 64px;
        padding: 8px 12px;
        font-size: 27px;
        border-radius: 12px;
    }

    body.classlings-app .rs-only {
        padding-top: 16px;
    }

    body.classlings-app .rs-only-what {
        font-size: 25px;
    }

    body.classlings-app .rs-only-what small {
        font-size: 20px;
    }

    body.classlings-app .rs-hidden-note {
        font-size: 22px;
    }

    body.classlings-app .rs-card {
        border-radius: 30px;
    }

    body.classlings-app .rs-card-in {
        --rs-card-foot: 24px;
        gap: 18px;
        padding: 22px 26px 0;
    }

    body.classlings-app .rs-card-top {
        grid-template-columns: 72px minmax(0, 1fr) auto;
    }

    body.classlings-app .rs-card-pic {
        width: 72px;
        height: 72px;
        padding: 12px;
    }

    body.classlings-app .rs-name {
        height: 64px;
        font-size: 27px;
    }

    body.classlings-app .rs-label {
        min-width: 84px;
        font-size: 22px;
    }

    body.classlings-app .rs-stepper output {
        min-width: 72px;
        font-size: 27px;
    }

    body.classlings-app .rs-swatches button {
        width: 52px;
        height: 52px;
        padding: 9px;
    }

    body.classlings-app .rs-icons {
        gap: 6px;
    }

    body.classlings-app .rs-icons button {
        width: 52px;
        height: 52px;
        padding: 8px;
    }
}

/* One column (a window under 1000 px wide): the lists one over the other, each with its reasons two to a row, scrolling in
   their panel; the card is a sheet along the foot. */
@media (max-width: 999px) {
    body.classlings-app .rs-lists {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

/* The smallest phones: Remove is its bin alone (its words are still said to a screen reader). */
@media (max-width: 359px) {
    body.classlings-app .rs-remove-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.classlings-app .rs-remove {
        gap: 0;
        padding: 0 12px;
    }
}

@media (max-width: 559px) {
    body.classlings-app .rs-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.classlings-app .rs {
        --rs-tile: 52px;
        --rs-gap: 6px;
    }

    body.classlings-app .rs-question {
        font-size: 26px;
    }

    /* The tip gives way to Undo, so they share a line where they can (the tip then runs onto a second line). */
    body.classlings-app .rs-tip,
    body.classlings-app .rs-tip.is-two {
        flex: 1 1 120px;
        min-width: 0;
        max-width: none;
        font-size: 16px;
    }

    body.classlings-app .rs-tip.is-two .rs-tip-part {
        display: inline;
    }

    body.classlings-app .rs-q {
        min-height: 0;
    }

    /* In Settings Undo and "Start with an empty list" stand side by side where they fit and one over the other where they do not. */
    body.classlings-app .rs-qend {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0 8px;
    }

    body.classlings-app .rs-empty {
        padding: 0 4px;
    }

    /* The white panel the lists scroll in is as drawn on a phone: an edge of 2 px and 8 px inside it, no more. */
    body.classlings-app .rs .rs-panel[data-scroll] {
        padding: 0;
    }

    body.classlings-app .rs .rs-panel[data-scroll] > .rs-scroll {
        padding: 8px;
    }

    body.classlings-app .rs-set {
        padding: 10px 12px 12px;
    }

    body.classlings-app .rs-set-head h3 {
        flex-direction: column;
        gap: 0;
        font-size: 21px;
    }

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

    body.classlings-app .rs-card-in {
        --rs-card-foot: 14px;
        padding: 12px 12px 0;
    }

    body.classlings-app .rs-card-top {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 8px;
    }

    body.classlings-app .rs-card-pic {
        width: 44px;
        height: 44px;
        padding: 6px;
    }

    body.classlings-app .rs-field.is-colour {
        margin-left: 0;
    }

    body.classlings-app .rs-swatches button {
        width: 32px;
        height: 32px;
        padding: 4px;
    }

    body.classlings-app .rs-swatches {
        gap: 4px;
    }

    body.classlings-app .rs-label {
        min-width: 48px;
    }

    body.classlings-app .rs-icons button {
        width: 36px;
        height: 36px;
        padding: 5px;
    }
}

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

body.classlings-app .rs-back {
    appearance: none;
    flex: 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 .rs-back .cla-ic {
    width: 28px;
    height: 28px;
}

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

/* Between them: in the set-up the note about Settings and Do this later; after Back with changes, the question whether to leave
   (Undo is at the end of the question's row, not here). */
body.classlings-app .rs-mid {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin-bottom: 14px;
}

body.classlings-app .rs-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.classlings-app .rs-ask[hidden] {
    display: none;
}

body.classlings-app .rs-ask-text {
    font: 600 20px / 1.2 var(--cla-display);
    color: var(--cla-ink);
}

/* Use these reasons: the standard's big gold button (72 px, 7 px base), beside the 78 px Back. */
body.classlings-app .pm-btn.is-go.rs-use {
    min-height: var(--ctl-big-h);
    margin-bottom: var(--ctl-big-lift);
    padding: 0 32px;
    font: var(--ctl-big-font);
    border-radius: var(--ctl-big-r);
    box-shadow: 0 var(--ctl-big-lift) 0 var(--cla-gold-deep);
}

body.classlings-app .pm-btn.is-go.rs-use:active {
    transform: translateY(var(--ctl-big-lift));
    box-shadow: 0 0 0 var(--cla-gold-deep);
}

body.classlings-app .rs :is(button, input):focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

body.classlings-app .pm-set-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---------------------------------------------------------------- shorter screens */

/* A laptop's or a small window's height: the reasons are smaller so more fit before the list scrolls
   (the teacher's note, 5 Oct: on a laptop Needs work was out of sight below Well done). */
@media (max-height: 820px) {
    body.classlings-app .pm-lists .pm-group {
        font-size: 22px;
    }

    body.classlings-app .pm-lists .pm-group span {
        font-size: 16px;
    }

    body.classlings-app .pm-set-reasons {
        gap: 8px;
    }

    body.classlings-app .pm-lists .pm-reasons {
        gap: 8px 12px;
        margin-bottom: 4px;
    }

    body.classlings-app .pm-lists .pm-reason {
        gap: 8px;
        min-height: var(--ctl-h);
        padding: 4px 10px 4px 6px;
        font-size: 18px;
    }

    body.classlings-app .pm-lists .pm-reason .ri {
        width: 32px;
        height: 32px;
    }

    body.classlings-app .pm-lists .pm-reason .pts {
        min-width: 44px;
        padding: 4px 8px;
        font-size: 18px;
    }
}

/* Short and wide (a laptop): Well done and Needs work side by side, two reasons across each. */
@media (max-height: 820px) and (min-width: 1000px) {
    body.classlings-app .pm-lists {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 12px 24px;
    }

    body.classlings-app .pm-lists .pm-set-reasons .pm-reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Only giving points: the one set has the whole width. */
    body.classlings-app .pm-lists > .pm-set-reasons:only-child {
        grid-column: 1 / -1;
    }

    body.classlings-app .pm-lists > .pm-set-reasons:only-child .pm-reasons.pm-reasons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The shortest laptop window (a 1366 x 768 screen with a browser's bars leaves 540px): the menu keeps 32px above
   and below it instead of 64px, so the third row of reasons is whole (it was cut in half) and the Classling
   tab has room for a whole row of choices with their names. A narrow window keeps its own 16px margins. */
@media (max-height: 560px) and (min-width: 861px) {
    body.classlings-app .pm-panel {
        top: 32px;
        bottom: 32px;
    }
}

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

@media (max-width: 1149px) {
    body.classlings-app .pm-reasons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.classlings-app .pm-look {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 16px 24px;
    }

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

    body.classlings-app .pm-pic {
        width: 48px;
        height: 48px;
    }

    body.classlings-app .pm-pic canvas {
        width: 44px;
        height: 44px;
    }

    body.classlings-app .pm-slot {
        font-size: 14px;
    }

    body.classlings-app .pm-reason {
        min-height: 72px;
        font-size: 20px;
    }

    body.classlings-app .pm-tab {
        padding: 0 16px;
    }
}

@media (max-width: 860px) {
    body.classlings-app .pm-panel {
        left: 16px;
        right: 16px;
        top: 16px;
        bottom: 16px;
        padding: 12px 16px 16px;
        border-radius: var(--cla-r-l);
    }

    body.classlings-app .pm-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    body.classlings-app .pm-who {
        flex: 1 1 0;
    }

    body.classlings-app .pm-tabs {
        order: 1;
        flex: 1 1 100%;
        margin: 0;
    }

    body.classlings-app .pm-tab {
        flex: 1;
        justify-content: center;
    }

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

    /* The look in one column that scrolls: the stage and its buttons, the slots, then the choices. */
    body.classlings-app .pm-look {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "stage" "save" "slots" "choices";
        overflow-y: auto;
    }

    body.classlings-app .pm-stage {
        height: 220px;
    }

    body.classlings-app .pm-stage-who {
        height: 150px;
    }

    /* The open slot's tick sticks out 8px at the right, so the grid leaves that much room (it was 5px
       wider than the pane on a phone, which shifted the pane sideways). */
    body.classlings-app .pm-slots {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-right: 8px;
    }

    body.classlings-app .pm-choices {
        height: 380px;
    }

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

    body.classlings-app .pm-sil {
        display: none;
    }
}

@media (max-width: 560px) {
    body.classlings-app :is(.rs-strip, .rs-body, .rs-dock) {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.classlings-app .rs-logo {
        display: none;
    }

    /* On a phone the dock is two rows: Undo and Undo all, then Back and the gold button, which is the
       standard's ordinary size here so its words stay on one line. */
    body.classlings-app .rs-dock {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    body.classlings-app .rs-mid {
        order: -1;
        flex: 1 1 100%;
        margin-bottom: 0;
    }

    body.classlings-app .pm-btn.is-go.rs-use {
        min-height: var(--ctl-h);
        margin-bottom: calc(var(--cla-lift) + (var(--cla-square) - var(--ctl-h)) / 2);
        padding: 0 20px;
        font: var(--ctl-font);
        border-radius: var(--ctl-r);
        box-shadow: 0 var(--cla-lift) 0 var(--cla-gold-deep);
    }

    body.classlings-app .pm-btn.is-go.rs-use:active {
        transform: translateY(var(--cla-lift));
    }

    /* On a phone nothing may run off the right: the class's name at scale 2, the page's name beside
       it on as many lines as it needs, and the gold button giving way (its words may wrap) before the
       screen does. */
    body.classlings-app .rs-strip {
        gap: 12px;
    }

    body.classlings-app .rs-title {
        --title-scale: 2;
    }

    body.classlings-app .rs-steps {
        min-width: 0;
        white-space: normal;
        font-size: 18px;
    }

    body.classlings-app .rs-use {
        flex: 0 1 auto;
        min-width: 0;
    }

    body.classlings-app .pm-face {
        width: 56px;
        height: 56px;
    }

    body.classlings-app .pm-who h2 {
        font-size: 26px;
    }

    body.classlings-app .pm-close {
        gap: 6px;
        padding: 0 12px;
    }

    body.classlings-app .pm-reasons {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    body.classlings-app .pm-reason {
        min-height: 68px;
        font-size: 20px;
    }

    body.classlings-app .pm-foot {
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.classlings-app #pupilsGrid .cl-card.is-holding .cl-turn,
    body.classlings-app #pupilsGrid .cl-card .cl-turn {
        transition: none;
    }

    body.classlings-app :is(.pm-reason, .pm-close, .pm-btn, .pm-pick) {
        transition: none;
    }
}

/* ---------------------------------------------------------------- the Classling tab on shorter screens */

/* A laptop's or a small window's height (the teacher's note, 5 Oct: Undo and Save spilled out of the
   bottom of the panel, and a small window scrolled to reach the choices). The stage shrinks to the room
   there is, and the buttons, slots and choices are smaller. */
@media (max-height: 820px) and (min-width: 561px) {
    body.classlings-app .pm-look .pm-stage {
        height: clamp(150px, calc(100dvh - 400px), 290px);
    }

    body.classlings-app .pm-look .pm-slot {
        gap: 2px;
        padding: 4px 2px;
        font-size: 14px;
    }

    body.classlings-app .pm-look .pm-pic {
        width: 44px;
        height: 44px;
    }

    body.classlings-app .pm-look .pm-pic canvas {
        width: 40px;
        height: 40px;
    }

    body.classlings-app .pm-look .pm-grid {
        grid-auto-rows: 80px;
    }

    body.classlings-app .pm-look .pm-pick {
        height: 80px;
        font-size: 14px;
    }

    body.classlings-app .pm-look .pm-pick canvas {
        height: 50px;
    }

    /* "Make it yours" on a short screen: smaller tiles and squares, one line of title less. */
    body.classlings-app .pm-look .pm-make {
        padding: 4px 8px;
        gap: 2px 12px;
    }

    body.classlings-app .pm-look .pm-make h4 {
        font-size: 16px;
    }

    body.classlings-app .pm-look .pm-deco {
        width: 88px;
        font-size: 13px;
    }

    body.classlings-app .pm-look .pm-deco canvas {
        width: 64px;
        height: 28px;
    }

    body.classlings-app .pm-look .pm-mk-line {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    body.classlings-app .pm-look .pm-mk-label {
        font-size: 14px;
    }

    body.classlings-app .pm-look .pm-mk-sw,
    body.classlings-app .pm-look .pm-mk-auto {
        height: 26px;
    }

    body.classlings-app .pm-look .pm-mk-sw {
        width: 26px;
    }

    /* The colours' squares shrink with the tiles, so their names still show under them. */
    body.classlings-app .pm-look .pm-pick .pm-swatch {
        width: 40px;
        height: 40px;
        margin: 4px 0 2px;
    }
}

/* A small, short window: no more one long column to scroll. The stage and its buttons on the left,
   the slots (two rows) and the choices beside them. */
@media (max-height: 820px) and (min-width: 561px) and (max-width: 860px) {
    body.classlings-app .pm-look {
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas: "stage slots" "save choices";
        gap: 12px 16px;
        overflow: visible;
    }

    body.classlings-app .pm-look .pm-stage {
        height: 170px;
    }

    body.classlings-app .pm-look .pm-save {
        grid-template-columns: minmax(0, 1fr);
    }

    body.classlings-app .pm-look .pm-choices {
        height: auto;
    }

    body.classlings-app .pm-look .pm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.classlings-app .pm-look .pm-make {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "decor" "colours";
    }

    body.classlings-app .pm-look .pm-mk-decor {
        flex-wrap: wrap;
    }
}

/* The look in one column that scrolls as a whole (a phone, or a tablet standing up): a paddle's choices with
   "Make it yours" stacked under them are taller than the fixed 380px has room for, and the paddles were
   squeezed to a sliver. Here the column is one stack that takes the height it needs. */
@media (max-width: 560px), (max-width: 860px) and (min-height: 821px) {
    body.classlings-app .pm-look .pm-choices:has(.pm-set.has-make) {
        contain: none;
        height: auto;
        min-height: max-content;
    }

    body.classlings-app .pm-look .pm-choices:has(.pm-set.has-make) .pm-set {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    body.classlings-app .pm-look .pm-choices:has(.pm-set.has-make) .pm-scroll {
        min-height: auto;
    }

    body.classlings-app .pm-look .pm-choices:has(.pm-set.has-make) .pm-grid {
        height: auto;
        overflow-y: visible;
    }
}

/* A short screen with "Make it yours" showing: the Locked strip steps aside so the paddles have room. */
@media (max-height: 820px) {
    body.classlings-app .pm-look .pm-set.has-make > .pm-locked {
        display: none;
    }
}

/* A short screen: "Make it yours" is one line of three buttons (decoration, paddle colour, second
   colour), each opening its choices in the grid, so the paddles keep their room. */
@media (max-height: 820px) {
    body.classlings-app .pm-look .pm-make {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        padding: 6px 10px;
    }

    body.classlings-app .pm-look .pm-make h4 {
        font-size: 15px;
    }

    body.classlings-app .pm-look .pm-mk-decor {
        display: none;
    }

    body.classlings-app .pm-look .pm-mk-colours {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    body.classlings-app .pm-look .pm-mk-open.is-decor {
        display: grid;
    }

    body.classlings-app .pm-look .pm-mk-open {
        grid-template-columns: auto auto;
        padding: 0;
    }

    body.classlings-app .pm-look .pm-mk-label {
        font-size: 14px;
    }
}

/* A phone, or a window as narrow (the teacher, 6 Oct): the three tabs share the width, each with its
   picture over its word, so Badges isn't cut off at the edge; the reasons are a size smaller; and the
   whole of Points scrolls as one, Edit reasons and Sit out the Showdown after the reasons, so a list
   never stops at a heading with nothing under it. */
@media (max-width: 560px) {
    body.classlings-app .pm-tabs {
        display: grid;
        flex: 1 1 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        box-sizing: border-box;
        min-width: 0;
        margin-left: 0;
    }

    body.classlings-app .pm-tab {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 56px;
        padding: 0 2px;
        font-size: 16px;
    }

    body.classlings-app .pm-tab .cla-ic {
        width: 20px;
        height: 20px;
    }

    body.classlings-app .pm-points {
        margin: 0 -8px;
        padding: 16px 8px 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.classlings-app .pm-points .pm-lists {
        flex: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    body.classlings-app .pm-lists .pm-group {
        font-size: 24px;
    }

    body.classlings-app .pm-lists .pm-group span {
        font-size: 16px;
    }

    body.classlings-app .pm-lists .pm-reason {
        gap: 10px;
        min-height: 56px;
        padding: 4px 10px 4px 8px;
        font-size: 19px;
    }

    body.classlings-app .pm-lists .pm-reason .ri {
        width: 36px;
        height: 36px;
    }

    body.classlings-app .pm-lists .pm-reason .pts {
        min-width: 46px;
        padding: 5px 8px;
        font-size: 19px;
    }

    body.classlings-app .pm-points .pm-foot {
        margin-top: 4px;
    }

    /* A heading's note goes under it when the two don't fit side by side ("No badges yet."). */
    body.classlings-app .pm-panel .pm-group {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

/* Colours (the Colour slot, and a paddle's colours): just the squares, no tile round them and no words
   under them, as many across as fit, so every colour shows at once on a laptop. The one on has a purple
   ring and its tick, and is named in the heading; each says its name when pointed at (pointsMenuLook.js). */
body.classlings-app .pm-look .pm-grid.is-colours {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    grid-auto-rows: 42px;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 0;
}

body.classlings-app .pm-look .pm-grid.is-colours .pm-pick {
    place-content: center;
    height: 42px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

body.classlings-app .pm-look .pm-grid.is-colours .pm-pick .pm-swatch {
    width: 36px;
    height: 36px;
    margin: 0;
}

body.classlings-app .pm-look .pm-grid.is-colours .pm-pick:hover .pm-swatch {
    transform: scale(1.1);
}

body.classlings-app .pm-look .pm-grid.is-colours .pm-pick.is-on {
    background: transparent;
    border-color: var(--cla-grape-deep);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cla-grape-deep);
}

body.classlings-app .pm-look .pm-grid.is-colours .pm-pick > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Just the tick, in a small lime circle. */
body.classlings-app .pm-look .pm-grid.is-colours .pm-on {
    top: -7px;
    right: -7px;
    gap: 0;
    padding: 1px;
    font-size: 0;
    border-radius: 50%;
}

body.classlings-app .pm-on-now b {
    font-weight: 700;
    color: var(--cla-ink);
}

/* Long names wrap onto a second line instead of being cut off with "…" (the teacher, 7 Oct): a row of
   choices grows a little when one of its names needs two lines, and a word is never split. Colours
   keep their one-line squares (their names are in the heading and on hover). */
body.classlings-app .pm-look .pm-grid:not(.is-colours) {
    grid-auto-rows: minmax(96px, auto);
}

body.classlings-app .pm-look .pm-grid:not(.is-colours) .pm-pick {
    height: auto;
    min-height: 96px;
}

body.classlings-app .pm-look .pm-grid:not(.is-colours) .pm-pick > span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
    line-height: 1.1;
    text-align: center;
}

@media (max-height: 820px) and (min-width: 561px) {
    body.classlings-app .pm-look .pm-grid:not(.is-colours) {
        grid-auto-rows: minmax(80px, auto);
    }

    body.classlings-app .pm-look .pm-grid:not(.is-colours) .pm-pick {
        min-height: 80px;
    }
}

/* On a phone the tiles are narrow: a little wider (at least 88 px each) and their names a size smaller,
   so one long word ("Constellation") still fits whole. Trails keep their wide strips. */
@media (max-width: 560px) {
    body.classlings-app .pm-look .pm-choices:not(.is-trail) .pm-grid:not(.is-colours) {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }

    body.classlings-app .pm-look .pm-grid:not(.is-colours) .pm-pick > span:last-child {
        font-size: 13px;
    }
}