/* ========================================
   Badges (js/badgesSheet.js, js/pointsMenuBadges.js, js/badges.js)
   For classes with Classlings on, body.classlings-app: the reviewed design (design-directions,
   directions/mix/achievements.html). A sheet over the board, built like the points menu: the class's
   badges on shelves, giving one by tapping Classling tiles, Recently given, the Pupils grid and one
   pupil's shelf; a page of its own for making or editing a badge, like the reasons screen; the Badges
   tab in the points menu; the badge a Classling holds up on its card; and the badge in the bar's last
   point. Every rule here is scoped to body.classlings-app, like the rest of the look.
   ======================================== */

body.classlings-app {
    /* The badges' colours: each with its deep edge and its pale fill (the design's theme). */
    --bc-gold: #f7c230;      --bc-gold-deep: #c98a12;      --bc-gold-tint: #fff3c4;
    --bc-tangerine: #ff8a3d; --bc-tangerine-deep: #cf5a12; --bc-tangerine-tint: #ffeddf;
    --bc-vermilion: #f0532f; --bc-vermilion-deep: #b8341a; --bc-vermilion-tint: #ffe3dc;
    --bc-bubblegum: #ff5fa2; --bc-bubblegum-deep: #cf3177; --bc-bubblegum-tint: #ffe5f0;
    --bc-grape: #a07cff;     --bc-grape-deep: #6a45dc;     --bc-grape-tint: #eee8ff;
    --bc-peri: #8fa8ff;      --bc-peri-deep: #4d63d6;      --bc-peri-tint: #e9edff;
    --bc-sky: #3aa0ff;       --bc-sky-deep: #1b6fcf;       --bc-sky-tint: #e1efff;
    --bc-teal: #2ec4b6;      --bc-teal-deep: #12867b;      --bc-teal-tint: #d8f5f1;
    --bc-lime: #7ed957;      --bc-lime-deep: #3e9a2a;      --bc-lime-tint: #e5f8da;
    /* Sizes on these screens: everything you press is at least --bd-hit tall (the standard's ordinary
       button, shared/css/classlings-controls.css). */
    --bd-hit: var(--ctl-h);
    --bd-kid-h: 72px;
    --bd-face: 56px;
    --bd-body: var(--cla-ui);
    --bd-spring: cubic-bezier(0.28, 1.9, 0.5, 1);
}

/* A badge's colour (the teacher picks one per badge). */
body.classlings-app .bc-gold { --bc: var(--bc-gold); --bc-deep: var(--bc-gold-deep); --bc-tint: var(--bc-gold-tint); }
body.classlings-app .bc-tangerine { --bc: var(--bc-tangerine); --bc-deep: var(--bc-tangerine-deep); --bc-tint: var(--bc-tangerine-tint); }
body.classlings-app .bc-vermilion { --bc: var(--bc-vermilion); --bc-deep: var(--bc-vermilion-deep); --bc-tint: var(--bc-vermilion-tint); }
body.classlings-app .bc-bubblegum { --bc: var(--bc-bubblegum); --bc-deep: var(--bc-bubblegum-deep); --bc-tint: var(--bc-bubblegum-tint); }
body.classlings-app .bc-grape { --bc: var(--bc-grape); --bc-deep: var(--bc-grape-deep); --bc-tint: var(--bc-grape-tint); }
body.classlings-app .bc-peri { --bc: var(--bc-peri); --bc-deep: var(--bc-peri-deep); --bc-tint: var(--bc-peri-tint); }
body.classlings-app .bc-sky { --bc: var(--bc-sky); --bc-deep: var(--bc-sky-deep); --bc-tint: var(--bc-sky-tint); }
body.classlings-app .bc-teal { --bc: var(--bc-teal); --bc-deep: var(--bc-teal-deep); --bc-tint: var(--bc-teal-tint); }
body.classlings-app .bc-lime { --bc: var(--bc-lime); --bc-deep: var(--bc-lime-deep); --bc-tint: var(--bc-lime-tint); }

/* ---------------------------------------------------------------- a badge's picture */

/* One design in one colour, at a whole number of screen pixels per art pixel (--bs: 1 is 20 px). */
body.classlings-app .bdg {
    display: block;
    flex: none;
    width: calc(var(--bs, 4) * 20px);
    height: calc(var(--bs, 4) * 20px);
}

body.classlings-app .bdg.bs1 { --bs: 1; }
body.classlings-app .bdg.bs2 { --bs: 2; }
body.classlings-app .bdg.bs3 { --bs: 3; }
body.classlings-app .bdg.bs4 { --bs: 4; }
body.classlings-app .bdg.bs5 { --bs: 5; }

/* ---------------------------------------------------------------- Menu: Badges first, with its picture */

body.classlings-app #achievementsBtn {
    order: -1;
}

body.classlings-app #achievementsBtn > svg:not(.cla-menu-badge),
body.classlings-app #achievementsBtn .ach-word {
    display: none;
}

/* The kit's rosette (shared/js/classlings/brand/barIcons.js): 12 x 12 at 24px, like the Menu's other icons. */
body.classlings-app #achievementsBtn .cla-menu-badge {
    display: block;
    width: 24px;
    height: 24px;
}

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

/* The leaderboard's Achievements tab is Badges too (leaderboard.js counts the class's badges there). */
body.classlings-app .leaderboard-tabs .tab-btn .ach-word {
    display: none;
}

body.classlings-app .leaderboard-tabs .tab-btn > span.cla-only {
    display: inline;
}

/* ---------------------------------------------------------------- the moment on the card */

/* After Give: the Classling holds the badge on the face (classlings-board.js paints it), and "+1
   level" sits on the card's top corner in the badge's colour. */
body.classlings-app #pupilsGrid .cl-card {
    position: relative;
}

body.classlings-app #pupilsGrid .cl-card .cl-up {
    position: absolute;
    top: -14px;
    right: 10px;
    z-index: 3;
    padding: 3px 10px 4px;
    font: 700 18px / 1.1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--bc-tint, var(--cla-gold-tint));
    border: 2px solid var(--bc-deep, var(--cla-gold-deep));
    border-radius: var(--cla-r-s);
    white-space: nowrap;
    pointer-events: none;
}

/* ---------------------------------------------------------------- the bar: the last badge given */

body.classlings-app .cla-last.is-badge {
    gap: 6px;
}

/* The badge's picture at 2 screen pixels to an art pixel (40px), whole: the strip is as tall as the
   picture, which is shorter than the bar's buttons, so nothing is cut and the bar keeps its height. */
body.classlings-app .cla-last-badge {
    display: inline-flex;
    flex: none;
}

body.classlings-app .cla-last-badge svg {
    display: block;
    width: 40px;
    height: 40px;
}

/* ---------------------------------------------------------------- the sheet over the board */

body.classlings-app .bd {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(30, 27, 58, 0.45);
}

body.classlings-app .bd[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 .bd-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) auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 32px;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: 44px;
    box-shadow: var(--cla-float);
}

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

/* "Badges" in Classlings' lettering at scale 3, as the Cup's title is. */
body.classlings-app .bd-title {
    --title-scale: 3;
    flex: none;
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}

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

body.classlings-app .bd-title .is-text {
    display: block;
    margin: 0 0 calc(var(--title-scale) * 4px);
    font: 700 36px / 1.1 var(--cla-display);
}

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

body.classlings-app .bd-lead {
    min-width: 0;
    margin: 0;
    font: 600 20px / 1.25 var(--cla-display);
    color: var(--cla-ink-2);
}

/* It never scrolls sideways: when there's more than fits, it scrolls up and down inside the panel, and
   the foot stays in view. The sides reach 8px into the panel's padding, so the content stays where it
   was while the ticks on tiles' corners and the focus rings have room inside the edge. */
body.classlings-app .bd-body {
    position: relative;
    min-height: 0;
    margin: 0 -8px;
    padding: 12px 12px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.classlings-app .bd-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding-top: 12px;
    border-top: var(--cla-edge) solid var(--cla-wash-2);
}

body.classlings-app .bd-foot > .is-go {
    margin-left: auto;
}

/* The buttons: a white cap on an ink base that sinks when pressed; the main one gold. */
body.classlings-app .bd-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(--ctl-r);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
    cursor: pointer;
    transition: transform 460ms var(--bd-spring), box-shadow 460ms var(--bd-spring);
}

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

body.classlings-app .bd-btn.is-go {
    background: var(--cla-gold);
    border-color: var(--cla-gold-deep);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-gold-deep);
}

body.classlings-app .bd-btn.is-go:active:not(:disabled) {
    box-shadow: 0 0 0 var(--cla-gold-deep);
}

/* The sheet's gold buttons (Add badges, New badge, Give) are the same ordinary size as Close beside them
   (the identity check of 8 October: one size on the sheet). */

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

/* Close sits at the far right of every header, whatever else the header holds. */
body.classlings-app .bd-head > .bd-close {
    margin-left: auto;
}

/* Badges | Recently given | Pupils: one shape, the open one purple. */
body.classlings-app .bd-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--cla-wash);
    border-radius: calc(var(--cla-r-m) + 4px);
}

body.classlings-app .bd-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ctl-tab-h);
    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 .bd-tab:hover {
    background: var(--cla-page);
}

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

/* A quiet button: Take back, Put away, Undo in a row. The standard's quiet button (48 px, a pale edge,
   no lift). */
body.classlings-app .bd-quiet {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ctl-small-h);
    padding: 0 16px;
    font: var(--ctl-small-font);
    color: var(--cla-ink);
    text-decoration: none;
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2);
    border-radius: var(--ctl-r);
    cursor: pointer;
    white-space: nowrap;
}

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

/* How often a pupil can have it: a quiet word chip (the badge is the colourful thing). */
body.classlings-app .bd-lim {
    padding: 2px 9px 3px;
    font: 600 16px / 1.25 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-wash);
    border: 2px solid var(--cla-wash-2);
    border-radius: var(--cla-r-s);
    white-space: nowrap;
}

/* The tick on anything chosen. */
body.classlings-app .bd-tick {
    position: absolute;
    top: -11px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--cla-ink);
    background: var(--cla-grape);
    border: 2px solid var(--cla-grape-deep);
    border-radius: 50%;
}

body.classlings-app .bd-new,
body.classlings-app .pm-new {
    padding: 2px 8px 3px;
    font: 700 16px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-grape);
    border: 2px solid var(--cla-grape-deep);
    border-radius: var(--cla-r-s);
}

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

/* ---------------------------------------------------------------- the wall */

/* The cabinet's body: the grid of tiles, in the middle of the sheet when there are few. */
body.classlings-app .bd-wall {
    display: grid;
    align-content: safe center;
    gap: 16px;
    min-height: 100%;
}

/* ---------------------------------------------------------------- the tidy grid */

/* The class's badges as small tiles, a picture beside a name, and nothing about limits. The tiles shrink
   as badges are added so that 6, 20 and 40 all fit the sheet with no scroll bar on a 1366 x 768 board:
   large (up to 9, 3 across, an 80 px picture), medium (up to 25, 4 or 5 across, 60 px) and small (40
   px, 6 across). Names are 20 px, and 16 px on the small tiles. A sheet for a few badges is shorter,
   and one for more than 36 is taller (below). */
body.classlings-app .bd-tiles {
    --cols: 4;
    --tile: 74px;
    --gap: 8px;
    --name: 20px;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: var(--tile);
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.classlings-app .bd-tiles.is-large {
    --cols: 3;
    --tile: 120px;
    --gap: 16px;
}

body.classlings-app .bd-tiles.is-medium.has-five {
    --cols: 5;
}

body.classlings-app .bd-tiles.is-small {
    --cols: 6;
    --tile: 60px;
    --gap: 6px;
    --name: 16px;
}

body.classlings-app .bd-tiles > li {
    display: block;
    min-width: 0;
}

body.classlings-app .bd-tile {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 4px 12px 4px 10px;
    color: var(--cla-ink);
    font: inherit;
    text-align: left;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-m);
    cursor: pointer;
    transition: transform 460ms var(--bd-spring);
}

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

body.classlings-app .bd-tile:active {
    transform: scale(0.97);
    transition-duration: 70ms;
}

body.classlings-app .bd-tile .bdg {
    flex: none;
}

body.classlings-app .bd-tiles.is-small .bd-tile {
    gap: 8px;
    padding: 2px 8px 2px 6px;
}

/* A long name goes onto two lines, never cut short. */
body.classlings-app .bd-tile-name {
    min-width: 0;
    font: 600 var(--name) / 1.15 var(--cla-display);
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
}

/* A sheet for a few badges is shorter (it's as tall as its rows), one for more than 36 taller, and one
   pupil's own page taller too, so each fits on a 1366 x 768 board. The same sheet on a phone is as ever. */
@media (min-width: 861px) {
    body.classlings-app .bd-panel.is-short {
        top: max(64px, calc((100dvh - 495px) / 2));
        bottom: max(64px, calc((100dvh - 495px) / 2));
    }

    body.classlings-app .bd-panel.is-tall {
        top: max(64px, calc((100dvh - 690px) / 2));
        bottom: 8px;
        max-height: 690px;
    }
}

/* ---------------------------------------------------------------- giving one */

/* The badge at the top: its picture, name and what it's for, then how often and how many have it. */
body.classlings-app .bd-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.classlings-app .bd-id > div {
    min-width: 0;
}

body.classlings-app .bd-id p {
    margin: 0;
    overflow: hidden;
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .bd-head-lim {
    display: grid;
    justify-items: end;
    gap: 2px;
    margin: 0 0 0 auto;
    font: 400 18px / 1.2 var(--bd-body);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

body.classlings-app .bd-head-lim .bd-lim {
    font-size: 18px;
}

/* The class as Classling tiles in the same places as their cards (register order, six across). A row
   grows when a tile's words need a second line (on a phone), rather than cut them short. */
body.classlings-app .bd-kids {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--bd-kid-h), auto);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.classlings-app .bd-kids > li {
    display: block;
    min-width: 0;
    height: 100%;
}

body.classlings-app .bd-kid {
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 4px 6px 4px 5px;
    color: var(--cla-ink);
    font: inherit;
    text-align: left;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-m);
    cursor: pointer;
}

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

body.classlings-app .bd-kid canvas {
    display: block;
    flex: none;
    width: var(--bd-face);
    height: var(--bd-face);
    background: var(--cla-wash);
    border-radius: var(--cla-r-s);
    image-rendering: pixelated;
}

body.classlings-app .bd-kid .bd-tx {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    min-width: 0;
}

/* A pupil's name is never cut short with "…" and never split inside a word (the teacher, 7 Oct): it wraps at
   a space or a hyphen ("Nevaeh-" and "Jane"), and a single word still too wide for the tile steps down in
   size (badgesSheet.js, fitKidNames). The row grows a line for it. */
body.classlings-app .bd-kid .bd-nm {
    font: 600 20px / 1.15 var(--cla-display);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

/* "Has 1 of 3", "No badges yet": onto a second line when the tile is narrow, never cut. */
body.classlings-app .bd-kid .bd-st {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    font: 400 15px / 1.15 var(--bd-body);
    color: var(--cla-ink-2);
}

body.classlings-app .bd-kid .bd-st .cla-ic {
    flex: none;
    width: 17px;
    height: 17px;
}

body.classlings-app .bd-kid .bd-mini {
    display: flex;
    gap: 2px;
}

body.classlings-app .bd-kid.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 .bd-kid.is-on canvas {
    background: var(--cla-page);
}

/* At the limit: greyed, and the sign says why. */
body.classlings-app .bd-kid.is-full {
    background: var(--cla-wash);
    border-color: var(--cla-wash);
    cursor: default;
}

body.classlings-app .bd-kid.is-full canvas {
    background: var(--cla-wash-2);
    filter: grayscale(1);
    opacity: 0.45;
}

body.classlings-app .bd-kid.is-full .bd-nm {
    color: var(--cla-ink-2);
}

body.classlings-app .bd-kid.is-full .bd-st {
    font-weight: 700;
    color: var(--cla-ink);
}

/* Tapped at their limit: outlined, while the footer says why. */
body.classlings-app .bd-kid.is-tapped {
    outline: 4px solid var(--cla-ink);
    outline-offset: 1px;
}

/* The footer's line about a pupil at their limit, in place of the table chips: a calm line that covers
   nobody. */
body.classlings-app .bd-note {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--bd-hit);
    margin: 0;
    padding: 8px 20px;
    font: 400 20px / 1.3 var(--bd-body);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-m);
}

body.classlings-app .bd-note b {
    margin-right: 0.35em;
    font-weight: 700;
}

/* Everyone, and each table: chips at the foot. */
body.classlings-app .bd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

body.classlings-app .bd-chip {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--bd-hit);
    padding: 0 12px 0 10px;
    font: 600 20px / 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;
    white-space: nowrap;
}

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

body.classlings-app .bd-chip[aria-disabled="true"] {
    color: var(--cla-ink-2);
    cursor: default;
    opacity: 0.6;
}

body.classlings-app .bd-chip .cla-ic {
    width: 26px;
    height: 26px;
}

/* A table's chip carries its emblem, number or colour, drawn as the Tables menu draws it, smaller. */
body.classlings-app .bd-chip .tl-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

body.classlings-app .bd-chip .tl-badge svg {
    width: 24px;
    height: 24px;
}

body.classlings-app .bd-chip .tl-badge b {
    font-size: 16px;
}

body.classlings-app .bd-chip.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 .bd-give .bdg {
    margin: -8px 0;
}

/* ---------------------------------------------------------------- recently given */

body.classlings-app .bd-recent {
    padding-top: 4px;
}

body.classlings-app .bd-day {
    margin: 4px 0 8px;
    font: 700 20px / 1.2 var(--cla-display);
}

body.classlings-app .bd-day + .bd-rows {
    margin-bottom: 12px;
}

body.classlings-app .bd-rows {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One row each time Give was pressed: the badge, the pupils' Classlings, who, when, and Take back. */
body.classlings-app .bd-row {
    display: grid;
    grid-template-columns: 40px 196px 272px minmax(0, 1fr) 72px auto;
    align-items: center;
    gap: 16px;
    min-height: 74px;
    padding: 4px 4px 4px 12px;
    border-radius: var(--cla-r-m);
}

body.classlings-app .bd-row:nth-child(odd) {
    background: var(--cla-wash);
}

body.classlings-app .bd-row-name {
    overflow: hidden;
    font: 700 24px / 1.1 var(--cla-display);
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .bd-faces {
    display: flex;
    align-items: center;
    gap: 4px;
}

body.classlings-app .bd-faces canvas {
    display: block;
    width: 40px;
    height: 40px;
    background: var(--cla-page);
    border-radius: 8px;
    image-rendering: pixelated;
}

body.classlings-app .bd-row:nth-child(even) .bd-faces canvas {
    background: var(--cla-wash);
}

body.classlings-app .bd-more {
    font: 600 16px / 1 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .bd-who {
    overflow: hidden;
    font: 400 18px / 1.3 var(--bd-body);
    text-overflow: ellipsis;
}

body.classlings-app .bd-row time {
    font: 600 20px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
}

body.classlings-app .bd-row.is-taken {
    grid-template-columns: 40px 196px 272px minmax(0, 1fr) 72px auto auto;
}

body.classlings-app .bd-row.is-taken > :is(.bdg, .bd-row-name, .bd-faces, .bd-who, time) {
    opacity: 0.45;
}

body.classlings-app .bd-taken {
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

/* Put away: each badge with how many have it, when it was put away, and Bring back. */
body.classlings-app .bd-row.is-away {
    grid-template-columns: 40px 196px minmax(0, 1fr) auto auto;
}

body.classlings-app .bd-row.is-away .bd-when {
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

body.classlings-app .bd-none {
    max-width: 40em;
    margin: 8px 0;
    font: 400 20px / 1.4 var(--bd-body);
    color: var(--cla-ink-2);
}

/* ---------------------------------------------------------------- one pupil's own page */

/* Their Classling on the grass and their level at the left; at the right how many badges they have had this
   school year, and the year term by term (Autumn, Spring and Summer), each badge with its date. The sheet
   is taller for it, so six badges in a term fit with no scroll bar; with more, the term scrolls inside. */
body.classlings-app .bd-prof {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    height: 100%;
}

body.classlings-app .bd-prof-side {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 0;
}

/* The stage: the sky, the grass and the soil, their Classling standing on the grass. */
body.classlings-app .bd-stage {
    --ground: 56px;
    position: relative;
    box-sizing: border-box;
    min-height: 240px;
    height: 100%;
    overflow: hidden;
    background:
        var(--cla-art-cloud) left 18px top 22px / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) right 18px top 84px / calc(var(--cla-px) * 20) calc(var(--cla-px) * 5) no-repeat,
        var(--cla-art-edge) left 0 bottom 16px / 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% 16px no-repeat,
        var(--cla-art-tufts) left 0 bottom var(--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(--ground) no-repeat,
        var(--cla-world);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
}

body.classlings-app .bd-stage-who {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--ground) - var(--cla-px));
    width: 100%;
    height: 280px;
    image-rendering: pixelated;
}

/* Their level in a scalloped badge (ink edge, white middle), their points, and the way to the next box. */
body.classlings-app .bd-lvl {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.classlings-app .bd-cookie {
    --cookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2.0L52.5 2.5L54.9 3.9L57 5.8L59 7.7L60.9 9.4L62.9 10.4L65.1 10.8L67.6 10.5L70.3 10.1L73.2 9.8L75.9 10.1L78.2 11.2L79.9 13.0L81 15.5L81.7 18.3L82.1 21.1L82.7 23.6L83.7 25.5L85.2 27.1L87.4 28.4L89.9 29.7L92.4 31.1L94.4 33.0L95.7 35.2L96 37.7L95.4 40.4L94.2 43.0L93 45.5L92 47.8L91.6 50.0L92 52.2L93 54.5L94.2 57.0L95.4 59.6L96 62.3L95.7 64.8L94.4 67.0L92.4 68.9L89.9 70.3L87.4 71.6L85.2 72.9L83.7 74.5L82.7 76.4L82.1 78.9L81.7 81.7L81 84.5L79.9 87.0L78.2 88.8L75.9 89.9L73.2 90.2L70.3 89.9L67.6 89.5L65.1 89.2L62.9 89.6L60.9 90.6L59 92.3L57 94.2L54.9 96.1L52.5 97.5L50 98.0L47.5 97.5L45.1 96.1L43 94.2L41 92.3L39.1 90.6L37.1 89.6L34.9 89.2L32.4 89.5L29.7 89.9L26.8 90.2L24.1 89.9L21.8 88.8L20.1 87.0L19 84.5L18.3 81.7L17.9 78.9L17.3 76.4L16.3 74.5L14.8 72.9L12.6 71.6L10.1 70.3L7.6 68.9L5.6 67.0L4.3 64.8L4 62.3L4.6 59.6L5.8 57.0L7 54.5L8 52.2L8.4 50.0L8 47.8L7 45.5L5.8 43.0L4.6 40.4L4 37.7L4.3 35.2L5.6 33.0L7.6 31.1L10.1 29.7L12.6 28.4L14.8 27.1L16.3 25.5L17.3 23.6L17.9 21.1L18.3 18.3L19 15.5L20.1 13.0L21.8 11.2L24.1 10.1L26.8 9.8L29.7 10.1L32.4 10.5L34.9 10.8L37.1 10.4L39.1 9.4L41 7.7L43 5.8L45.1 3.9L47.5 2.5Z'/%3E%3C/svg%3E");
    display: grid;
    flex: none;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0;
    background: var(--cla-ink);
    -webkit-mask: var(--cookie) center / 100% 100% no-repeat;
    mask: var(--cookie) center / 100% 100% no-repeat;
}

body.classlings-app .bd-cookie::before {
    content: '';
    grid-area: 1 / 1;
    width: calc(100% - 9px);
    height: calc(100% - 9px);
    background: var(--cla-page);
    -webkit-mask: var(--cookie) center / 100% 100% no-repeat;
    mask: var(--cookie) center / 100% 100% no-repeat;
}

body.classlings-app .bd-cookie > span {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    line-height: 1;
}

body.classlings-app .bd-cookie small {
    font: 600 16px / 1 var(--cla-display);
}

body.classlings-app .bd-cookie b {
    font: 700 36px / 1 var(--cla-display);
}

body.classlings-app .bd-lv-words {
    display: grid;
    gap: 2px;
    margin: 0;
    font: 600 20px / 1.2 var(--cla-display);
    text-wrap: balance;
}

body.classlings-app .bd-lv-words span {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.classlings-app .bd-lv-words .bm-heart {
    width: 18px;
}

body.classlings-app .bd-prof-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

body.classlings-app .bd-sum {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .bd-sum b {
    font: 700 48px / 1 var(--cla-display);
}

body.classlings-app .bd-sum span {
    margin-left: 8px;
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
}

/* The three terms, this one in white and twice as wide, and the others pale. */
body.classlings-app .bd-terms {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    min-height: 0;
}

body.classlings-app .bd-terms[data-now="spring"] {
    grid-template-columns: 1fr 2fr 1fr;
}

body.classlings-app .bd-terms[data-now="summer"] {
    grid-template-columns: 1fr 1fr 2fr;
}

body.classlings-app .bd-term {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px;
    background: var(--cla-wash);
    border-radius: var(--cla-r-l);
}

body.classlings-app .bd-term.is-now {
    background: var(--cla-page);
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-wash-2);
}

body.classlings-app .bd-term header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    min-height: 48px;
}

body.classlings-app .bd-term h3 {
    margin: 0;
    font: 700 24px / 1.1 var(--cla-display);
}

body.classlings-app .bd-now {
    padding: 2px 10px 3px;
    font: 700 16px / 1.2 var(--cla-display);
    background: var(--cla-page);
    border: 2px solid var(--cla-wash-2);
    border-radius: var(--cla-r-s);
}

body.classlings-app .bd-when {
    flex-basis: 100%;
    font: 400 18px / 1.2 var(--bd-body);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

body.classlings-app .bd-term-list {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.classlings-app .bd-term-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    min-height: 50px;
}

body.classlings-app .bd-term-list .bdg {
    grid-row: 1 / 3;
}

body.classlings-app .bd-tn {
    align-self: end;
    font: 600 20px / 1.15 var(--cla-display);
}

body.classlings-app .bd-td {
    display: flex;
    align-items: center;
    align-self: start;
    gap: 8px;
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
    white-space: nowrap;
}

body.classlings-app .bd-later {
    align-self: center;
    justify-self: center;
    margin: 0;
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
}

/* ---------------------------------------------------------------- no badges yet */

/* Twelve ideas, six across and two rows, none ticked until tapped. At 1366 x 768 and 1280 x 800 they
   fit with no scroll bar. */
body.classlings-app .bd-empty {
    display: grid;
    align-content: safe center;
    gap: 12px;
    min-height: 100%;
}

body.classlings-app .bd-ask {
    margin: 0;
    font: 700 28px / 1.2 var(--cla-display);
}

body.classlings-app .bd-ask span {
    display: block;
    margin-top: 2px;
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
}

body.classlings-app .bd-starters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

/* An idea: its picture, its name and how often it starts out; ticked and purple once it's tapped. */
body.classlings-app .bd-starter {
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 8px 10px;
    color: var(--cla-ink);
    font: inherit;
    text-align: center;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
    cursor: pointer;
}

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

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

body.classlings-app .bd-starter b {
    margin-top: 2px;
    font: 700 20px / 1.15 var(--cla-display);
    text-wrap: balance;
}

body.classlings-app .bd-starter .bd-lim {
    margin-top: auto;
}

/* ---------------------------------------------------------------- making a badge: a page of its own */

body.classlings-app .bm {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: var(--cla-ink);
    background: var(--cla-page);
}

/* On the sky and grass, the page stands in the same world. */
body.classlings-app.cla-sky .bm {
    background:
        var(--cla-art-cloud) left 47.5% top 14px / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) left 68% 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 .bm[hidden] {
    display: none;
}

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

/* "New badge" in Classlings' lettering at scale 3, as the Cup's title is. */
body.classlings-app .bm-title {
    --title-scale: 3;
    flex: none;
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}

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

body.classlings-app .bm-title .is-text {
    display: block;
    margin: 0 0 calc(var(--title-scale) * 4px);
    font: 700 36px / 1.1 var(--cla-display);
}

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

body.classlings-app .bm-body {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 0;
    padding: 8px var(--cla-gutter) 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.classlings-app .bm-body :is(fieldset) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.classlings-app .bm-body :is(legend) {
    padding: 0;
}

body.classlings-app .bm-lbl {
    display: block;
    margin-bottom: 4px;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .bm-lbl small {
    margin-left: 8px;
    font: 400 16px / 1.2 var(--bd-body);
    color: var(--cla-ink-2);
}

/* The top row: the badge itself, its name, what it's for, and the badge on a pupil's card. */
body.classlings-app .bm-top {
    display: grid;
    grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.6fr) auto;
    align-items: end;
    gap: 24px;
}

body.classlings-app .bm-big {
    display: block;
    margin-bottom: -4px;
}

body.classlings-app .bm-field {
    display: block;
    min-width: 0;
}

/* The badge's name: the standard's text box (48 px, a pale edge that turns ink when focused). */
body.classlings-app .bm-box {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    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 .bm-box input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    outline: none;
}

body.classlings-app .bm-box input::placeholder {
    color: var(--cla-ink-2);
    opacity: 0.6;
}

body.classlings-app .bm-box b {
    flex: none;
    padding-right: 0.3em;
    font-weight: 600;
    color: var(--cla-ink-2);
}

body.classlings-app .bm-box:focus-within {
    border-color: var(--cla-ink);
}

/* The badge on a pupil's card, as the class will see it after Give (a small copy of the point card). */
body.classlings-app .bm-on-card {
    display: grid;
    justify-items: start;
}

body.classlings-app .bm-oc-label {
    margin-bottom: 4px;
    font: 600 20px / 1.2 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .bm-minicard {
    position: relative;
    display: grid;
    grid-template-columns: 98px 110px;
    height: 102px;
    background: #fffefb;
    border: 2px solid #2d3436;
    border-radius: 12px;
    box-shadow: 2px 2px 0 var(--cla-wash-2);
}

body.classlings-app .bm-mc-face {
    position: relative;
    border-right: 2px solid #2d3436;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

body.classlings-app .bm-mc-face canvas {
    display: block;
    width: 96px;
    height: 98px;
    image-rendering: pixelated;
}

body.classlings-app .bm-mc-info {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    font: 600 17px / 1.1 var(--cla-display);
}

body.classlings-app .bm-mc-info b {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 700 28px / 1 var(--cla-display);
}

body.classlings-app .bm-heart {
    width: 22px;
    height: auto;
    color: #ef4444;
}

body.classlings-app .bm-up {
    position: absolute;
    top: -14px;
    right: -12px;
    padding: 2px 8px 3px;
    font: 700 16px / 1.1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--bc-tint, var(--cla-gold-tint));
    border: 2px solid var(--bc-deep, var(--cla-gold-deep));
    border-radius: var(--cla-r-s);
    white-space: nowrap;
}

body.classlings-app .bm-problem {
    margin: 0;
    padding: 8px 14px;
    font: 600 18px / 1.3 var(--cla-display);
    color: var(--cla-ink);
    background: var(--ctl-danger);
    border: 2px solid var(--ctl-danger-deep);
    border-radius: var(--cla-r-s);
}

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

/* The picture library: 62 pictures in four groups. A group's tab shows its pictures, each with its
   name, drawn in the colour chosen below, so the teacher sees the real thing. */
body.classlings-app .bm-pics-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

body.classlings-app .bm-pics-head .bm-lbl {
    margin: 0;
}

body.classlings-app .bm-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--cla-wash);
    border-radius: calc(var(--cla-r-m) + 4px);
}

body.classlings-app .bm-tool {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--ctl-tab-h);
    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 .bm-tool:hover {
    background: var(--cla-page);
}

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

body.classlings-app .bm-tool b {
    margin-left: 6px;
    font: 600 16px / 1 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .bm-tool.is-on b {
    color: var(--cla-ink);
}

body.classlings-app .bm-hint {
    margin: 0 0 0 auto;
    font: 400 16px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
}

/* Thirteen a row and two rows, so every group (up to 19) shows at once; the space is kept for two
   rows, so nothing jumps when the tabs change. */
body.classlings-app .bm-pic-set {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    grid-auto-rows: 96px;
    align-content: start;
    gap: 8px;
    min-height: 200px;
}

body.classlings-app .bm-pic-set[hidden] {
    display: none;
}

body.classlings-app .bm-pic {
    appearance: none;
    position: relative;
    display: grid;
    grid-template-rows: 60px auto;
    justify-items: center;
    align-content: start;
    box-sizing: border-box;
    min-width: 0;
    height: 96px;
    padding: 2px 0 0;
    color: var(--cla-ink);
    font: 600 15px / 1.05 var(--cla-display);
    text-align: center;
    background: var(--cla-wash);
    border: 2px solid transparent;
    border-radius: var(--cla-r-s);
    cursor: pointer;
}

body.classlings-app .bm-pic:hover {
    background: var(--cla-wash-2);
}

body.classlings-app .bm-pic .bdg {
    align-self: center;
}

body.classlings-app .bm-pic span {
    overflow-wrap: normal;
}

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

body.classlings-app .bm-pic .bd-tick {
    top: -12px;
    right: -10px;
}

body.classlings-app .bm-row3 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px 24px;
}

/* Room under Colour and How often for the tick that sits on a chosen option's corner. */
body.classlings-app .bm-row3 .bm-lbl {
    margin-bottom: 12px;
}

body.classlings-app .bm-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.classlings-app .bm-swatches button {
    appearance: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--bd-hit);
    height: var(--bd-hit);
    padding: 0;
    color: var(--cla-ink);
    background: var(--bc);
    border: var(--cla-edge) solid var(--bc-deep);
    border-radius: var(--cla-r-s);
    cursor: pointer;
}

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

/* How often: "Up to 3 times", "Once a term" and "Any time", one line each. The chosen one in purple with a tick. */
body.classlings-app .bm-limits {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

body.classlings-app .bm-opt {
    appearance: none;
    position: relative;
    display: grid;
    align-content: center;
    min-height: var(--bd-hit);
    padding: 0 18px;
    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-m);
    cursor: pointer;
    white-space: nowrap;
}

body.classlings-app .bm-opt b {
    font: 600 20px / 1.15 var(--cla-display);
}

/* The tick sits on the corner, clear of the words. */
body.classlings-app .bm-opt > .bd-tick {
    top: -15px;
    right: -13px;
}

body.classlings-app .bm-opt.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);
}

/* Under the choices while "Up to N times" is chosen: its − and + (they change the number), and what it counts. */
body.classlings-app .bm-times {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 12px;
}

body.classlings-app .bm-times small {
    font: 400 16px / 1.25 var(--bd-body);
    color: var(--cla-ink-2);
}

body.classlings-app .bm-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* The standard's plus and minus: 48 px squares on a 4 px ink base, with the kit's pixel signs. */
body.classlings-app .bm-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 .bm-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 .bm-stepper button:disabled {
    opacity: 0.45;
    cursor: default;
}

body.classlings-app .bm-stepper output {
    min-width: 34px;
    font: 700 26px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The dock: Back at the left, a note or Put away, and the gold Add or Save at the right. */
body.classlings-app .bm-dock {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 var(--cla-gutter) var(--cla-soil);
}

body.classlings-app .bm-back {
    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 .bm-back:active {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: var(--ctl-press);
}

body.classlings-app .bm-note {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 30em;
    margin: 0 0 var(--cla-lift);
    font: 400 18px / 1.35 var(--bd-body);
    color: var(--cla-ink-2);
}

body.classlings-app .bm-cookie {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    font: 700 16px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--bc-sky-tint);
    border: 2px solid var(--bc-sky-deep);
    border-radius: 50%;
}

body.classlings-app .bm-put-away {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 var(--cla-lift);
}

body.classlings-app .bm-put-away p {
    margin: 0;
    font: 400 18px / 1.3 var(--bd-body);
    color: var(--cla-ink-2);
}

/* In the sky, text that sits straight on the sky or the grass is ink, so it keeps its contrast. */
body.classlings-app.cla-sky .bm :is(.bm-hint, .bm-lbl small, .bm-note, .bm-put-away p, .bm-tool b, .bm-times small) {
    color: var(--cla-ink);
}

/* Add or Save: the standard's big gold button, beside the 78 px Back. */
body.classlings-app .bd-btn.is-go.bm-go {
    min-height: var(--ctl-big-h);
    margin: 0 0 var(--ctl-big-lift) auto;
    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 .bd-btn.is-go.bm-go:active:not(:disabled) {
    transform: translateY(var(--ctl-big-lift));
    box-shadow: 0 0 0 var(--cla-gold-deep);
}

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

body.classlings-app .bm-box input:focus-visible {
    outline: none;
}

/* ---------------------------------------------------------------- the points menu's Badges tab */

body.classlings-app .pm-tab .pm-tab-badge {
    width: 40px;
    height: 40px;
    margin: -6px 0;
}

/* The heading, with All badges at its right, then the class's badges as the cabinet's tiles: four across
   for 20 and six for 40, the menu taller for more than 36. With more than fits (or on a narrower screen)
   the tab scrolls inside the menu. */
body.classlings-app .pm-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* No badges yet: a few badges, the line and Set up badges together in the middle of the tab, not the
   button alone at the bottom of an empty page (the teacher's note, 5 Oct). */
body.classlings-app .pm-badges .pm-bd-none {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 24px;
    text-align: center;
}

body.classlings-app .pm-bd-none-pics {
    display: flex;
    gap: 12px;
}

body.classlings-app .pm-bd-none-pics .bdg {
    width: 64px;
    height: 64px;
}

body.classlings-app .pm-bd-none .pm-empty {
    max-width: 34em;
    margin: 0;
}

body.classlings-app .pm-badges .pm-foot {
    flex: none;
    margin-top: auto;
}

body.classlings-app .pm-badges > .pm-group,
body.classlings-app .pm-badges > .pm-empty,
body.classlings-app .pm-badges > .pm-row,
body.classlings-app .pm-badges > .bd-tiles {
    flex: none;
}

body.classlings-app .pm-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

body.classlings-app .pm-row .pm-edit {
    flex: none;
    margin-left: auto;
}

/* What a tap on a badge at the limit says, by the heading: a calm pill that covers nothing. */
body.classlings-app .pm-note {
    display: inline-block;
    padding: 4px 16px 5px;
    font: 400 18px / 1.25 var(--bd-body);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: 2px solid var(--cla-ink);
    border-radius: 999px;
}

body.classlings-app .pm-note b {
    font-weight: 700;
}

/* A badge's name, and under it (when it can't be given again) why: "Has it", "Has it 3 times", "Has it this term". */
body.classlings-app .bd-tile-words {
    display: grid;
    gap: 1px;
    min-width: 0;
}

body.classlings-app .bd-tile-st {
    font: 700 16px / 1.15 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app .bd-tiles.is-small .bd-tile-st {
    font-size: 14px;
}

/* At the limit: grey, and it can't be given. A tap on it is outlined while the heading says why. */
body.classlings-app .bd-tile.is-full {
    background: var(--cla-wash);
    border-color: var(--cla-wash);
    cursor: default;
}

body.classlings-app .bd-tile.is-full:active {
    transform: none;
}

body.classlings-app .bd-tile.is-full .bdg {
    filter: grayscale(1);
    opacity: 0.5;
}

body.classlings-app .bd-tile.is-full .bd-tile-name {
    color: var(--cla-ink-2);
}

body.classlings-app .bd-tile.is-tapped {
    outline: 4px solid var(--cla-ink);
    outline-offset: 1px;
}

/* A menu for more than 36 badges is taller, so six across and seven rows fit (one pupil's page too). */
@media (min-width: 861px) {
    body.classlings-app .pm-panel.is-tall {
        top: max(64px, calc((100dvh - 690px) / 2));
        bottom: 8px;
        max-height: 690px;
    }
}

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

@media (max-width: 1235px) {
    body.classlings-app .bd-kids,
    body.classlings-app .bd-starters {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body.classlings-app .bm-pic-set {
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }

    body.classlings-app .bm-top {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto;
        gap: 16px;
    }

    body.classlings-app .bd-row {
        grid-template-columns: 40px 170px 180px minmax(0, 1fr) 64px auto;
    }

    body.classlings-app .bd-row.is-taken {
        grid-template-columns: 40px 170px 180px minmax(0, 1fr) 64px auto auto;
    }

    body.classlings-app .bd-faces canvas:nth-child(n + 5) {
        display: none;
    }
}

@media (max-width: 1100px) {
    body.classlings-app .bd-kids,
    body.classlings-app .bd-starters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.classlings-app .bd-tiles.is-medium.has-five {
        --cols: 4;
    }

    body.classlings-app .bd-tiles.is-small {
        --cols: 5;
    }

    body.classlings-app .bm-pic-set {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        min-height: 0;
    }

    body.classlings-app .bm-pics-head {
        flex-wrap: wrap;
    }

    body.classlings-app .bm-hint {
        flex: 1 1 100%;
        margin-left: 0;
    }

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

    body.classlings-app .bm-on-card {
        grid-column: 2 / -1;
    }

    body.classlings-app .bd-prof {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 20px;
    }

    body.classlings-app .bd-row {
        grid-template-columns: 40px 150px minmax(0, 1fr) 64px auto;
    }

    body.classlings-app .bd-row.is-taken {
        grid-template-columns: 40px 150px minmax(0, 1fr) 64px auto auto;
    }

    body.classlings-app .bd-row .bd-faces {
        display: none;
    }

    body.classlings-app .bd-row.is-away {
        grid-template-columns: 40px 150px minmax(0, 1fr) auto auto;
    }
}

@media (max-width: 860px) {
    body.classlings-app .bd-tiles.is-large {
        --cols: 2;
    }

    body.classlings-app .bd-tiles.is-medium,
    body.classlings-app .bd-tiles.is-medium.has-five {
        --cols: 3;
    }

    body.classlings-app .bd-tiles.is-small {
        --cols: 4;
    }

    body.classlings-app .bd-panel {
        left: 16px;
        right: 16px;
        top: 24px;
        bottom: 24px;
        padding: 8px 16px;
        border-radius: 32px;
    }

    body.classlings-app .bd-head {
        flex-wrap: wrap;
        gap: 8px 12px;
        min-height: 0;
    }

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

    body.classlings-app .bd-head h2:not(.bd-title) {
        font-size: 28px;
    }

    body.classlings-app .bd-head-lim {
        margin-left: 0;
    }

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

    body.classlings-app .bd-tab,
    body.classlings-app .bd-btn,
    body.classlings-app .bd-chip {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.classlings-app .bd-prof {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        height: auto;
    }

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

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

    body.classlings-app .bd-terms,
    body.classlings-app .bd-terms[data-now] {
        grid-template-columns: minmax(0, 1fr);
    }

    body.classlings-app .bd-term-list {
        overflow-y: visible;
    }

    body.classlings-app .bd-row {
        grid-template-columns: 40px minmax(0, 1fr) 64px auto;
        gap: 10px;
        padding-left: 8px;
    }

    body.classlings-app .bd-row.is-taken {
        grid-template-columns: 40px minmax(0, 1fr) 64px auto auto;
    }

    body.classlings-app .bd-row .bd-who {
        grid-column: 2 / -1;
        grid-row: 2;
        font-size: 16px;
    }

    body.classlings-app .bd-row.is-away {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    body.classlings-app .bd-row.is-away .bd-when {
        grid-column: 2 / -1;
        grid-row: 2;
        font-size: 16px;
    }

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

    body.classlings-app .bm-top {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    body.classlings-app .bm-on-card {
        grid-column: 1 / -1;
    }

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

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

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

    body.classlings-app .bm-dock {
        flex-wrap: wrap;
    }

    body.classlings-app .bm-note {
        order: 3;
        flex: 1 1 100%;
    }

    body.classlings-app .pm-tab .pm-tab-badge {
        width: 20px;
        height: 20px;
        margin: 0;
    }
}

@media (max-width: 700px) {
    body.classlings-app .bd-tiles.is-medium,
    body.classlings-app .bd-tiles.is-medium.has-five {
        --cols: 2;
    }

    body.classlings-app .bd-tiles.is-small {
        --cols: 3;
    }
}

@media (max-width: 560px) {
    body.classlings-app .bd-panel {
        left: 8px;
        right: 8px;
        top: 12px;
        bottom: 12px;
        padding: 8px 12px;
        border-radius: 24px;
    }

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

    /* On a phone each badge is a row, its picture 40 px. */
    body.classlings-app .bd-tiles,
    body.classlings-app .bd-tiles.is-large,
    body.classlings-app .bd-tiles.is-medium,
    body.classlings-app .bd-tiles.is-medium.has-five,
    body.classlings-app .bd-tiles.is-small {
        --cols: 1;
        --tile: 64px;
        --gap: 8px;
        --name: 20px;
    }

    body.classlings-app .bd-tiles .bd-tile .bdg {
        --bs: 2;
    }

    body.classlings-app .bd-note {
        flex-basis: 100%;
        font-size: 18px;
    }

    body.classlings-app .bd-kids {
        gap: 8px;
    }

    body.classlings-app .bd-kid {
        padding: 4px 6px 4px 4px;
    }

    body.classlings-app .bd-kid .bd-nm {
        font-size: 18px;
    }

    body.classlings-app .bd-seg {
        width: 100%;
        box-sizing: border-box;
    }

    body.classlings-app .bd-tab {
        flex: 1;
        justify-content: center;
        padding: 0 6px;
        font-size: 16px;
    }

    body.classlings-app .bd-btn {
        padding: 0 16px;
    }

    body.classlings-app .bd-foot > .is-go {
        margin-left: 0;
        flex: 1 1 100%;
    }

    body.classlings-app .bd-lead {
        flex: 1 1 100%;
        font-size: 18px;
    }

    body.classlings-app .bd-chip {
        min-height: 48px;
        font-size: 18px;
    }

    body.classlings-app .bd-sum b {
        font-size: 36px;
    }

    body.classlings-app .bd-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 0;
        padding: 8px 4px 8px 8px;
    }

    body.classlings-app .bd-row.is-taken {
        grid-template-columns: 40px minmax(0, 1fr) auto auto;
    }

    body.classlings-app .bd-row time {
        display: none;
    }

    body.classlings-app .bm-strip {
        gap: 12px;
    }

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

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

    body.classlings-app .bm-big {
        justify-self: center;
    }

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

    body.classlings-app .bm-seg {
        flex-wrap: wrap;
    }

    body.classlings-app .bm-tool {
        padding: 0 12px;
        font-size: 17px;
    }

    body.classlings-app .bm-swatches button {
        width: 48px;
        height: 48px;
    }

    body.classlings-app .bm-opt {
        min-height: 56px;
        padding: 0 12px;
        font-size: 18px;
    }

    /* On a phone the gold button is the standard's ordinary size, beside the 64 px Back. */
    body.classlings-app .bd-btn.is-go.bm-go {
        flex: 1 1 0;
        min-height: var(--ctl-h);
        margin: 0 0 calc(var(--cla-lift) + (var(--cla-square) - var(--ctl-h)) / 2) 0;
        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 .bd-btn.is-go.bm-go:active:not(:disabled) {
        transform: translateY(var(--cla-lift));
    }

    body.classlings-app .bm-note,
    body.classlings-app .bm-put-away {
        flex: 1 1 100%;
        order: 3;
    }

    /* On a phone the strip is the picture alone, at 1 screen pixel to an art pixel (20px). */
    body.classlings-app .cla-last-badge svg {
        width: 20px;
        height: 20px;
    }
}

/* The smallest phones have no room beside Undo: the badge's picture goes, as a point's +1 does
   (classlings-app.css), rather than show cut off. Undo's label still says what it takes back. */
@media (max-width: 365px) {
    body.classlings-app .cla-last-badge {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.classlings-app :is(.bd-btn, .bd-tile) {
        transition: none;
    }
}