/* ========================================
   Set up <class> (js/classlings-setup.js, js/setupModel.js, and the reasons screen as step 4)
   ======================================== */
/* For classes with Classlings on, body.classlings-app: the reviewed set-up screens (design-directions,
   directions/mix/points-setup.html: steps 3 and 4, "Right"; steps 1, 2 and 5 and the last screen follow
   them). A page of its own over the board, built as the reasons screen is (the same strip, body and dock),
   so every step stands where the one before it did: "Set up Class 11" in Classlings' lettering with the
   step in squares, one question with big choices, Back at the bottom left, the note about Settings and
   "Do this later" in the middle, and the gold Next at the bottom right. It takes the class's own board:
   plain white, or the sky and grass, changing the moment the teacher chooses. Every step fits the school
   laptop's page (1366 x 540 and 600) with nothing to scroll; only the Classlings move.
   Every rule here is scoped to body.classlings-app, like the rest of the look. */

body.classlings-app {
    --su-gap: 16px;
    --su-card-r: var(--cla-r-xl, 44px);
}

/* ---------------------------------------------------------------- the page and its worlds */

body.classlings-app .rs.su {
    z-index: 1190;
    isolation: isolate;
}

/* The sky and grass behind the set-up and the reasons screen in it: the board's own, with its tufts, clouds and
   the soil the bar stands on. (The reasons screen is plain white everywhere else.) */
body.classlings-app.cla-sky :is(.rs.su, .rs.is-setup) {
    background:
        var(--cla-art-cloud) left 52% top 14px / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) left 74% top 54px / 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(--su-ground, 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(--su-ground, var(--cla-ground)) no-repeat,
        var(--cla-world);
}

body.classlings-app .rs.su > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------- the strip: title, step, logo */

/* The step in squares: done, now and still to come (the drawing's dots), then "Step 3 of 5: Points". */
body.classlings-app .rs-steps {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

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

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

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

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

/* A class name too long for the lettering is plain words (classlings-points.css .rs-title.is-text): the sparkles beside the last
   screen's title give way. */
body.classlings-app .rs-title.is-text svg.su-spark {
    display: none;
}

@media (max-width: 560px) {
    body.classlings-app :is(.rs.su, .rs.is-setup) .rs-title.is-text {
        font-size: 26px;
    }
}

/* ---------------------------------------------------------------- the question and its choices */

body.classlings-app .su-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 8px;
    overflow: hidden;
}

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

body.classlings-app .su-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* "This is for all your classes." under the starting points and the reset, which are the teacher's own: a pale
   pill, so it reads on the white and on the sky. */
body.classlings-app .su-forall {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin: 0;
    padding: 4px 16px 4px 10px;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: 2px solid var(--cla-wash-2);
    border-radius: 999px;
}

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

body.classlings-app .su-hint[hidden],
body.classlings-app .su-problem[hidden] {
    display: none;
}

body.classlings-app .su-problem {
    margin: 0;
    padding: 10px 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);
}

/* Big choices: a picture, a name and a plain line each. The chosen one is lilac with a "Chosen" tab. */
body.classlings-app .su-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--su-gap);
    margin-top: 14px;
}

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

/* With three choices side by side (a start of your own, or the reset) each picture has room for one point card. */
body.classlings-app .su-cards.is-3 .su-pic .su-mini:not(.is-main, .is-back) {
    display: none;
}

body.classlings-app .su-card {
    appearance: none;
    position: relative;
    display: grid;
    grid-template-rows: var(--su-pic, 180px) auto auto;
    gap: 8px;
    margin: 0;
    padding: 20px 24px 20px;
    color: var(--cla-ink);
    text-align: left;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--su-card-r);
    cursor: pointer;
}

body.classlings-app .su-card:hover:not(.is-on) {
    border-color: var(--cla-grape);
}

body.classlings-app .su-card.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 .su-card > b {
    font: 700 clamp(24px, 4.6vh, 36px) / 1.1 var(--cla-display);
}

body.classlings-app .su-cline {
    max-width: 30em;
    font: 400 18px / 1.4 var(--cla-ui);
}

body.classlings-app .su-on {
    position: absolute;
    top: -14px;
    right: 24px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 8px;
    font: 600 16px / 1 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 .su-card.is-on .su-on {
    display: inline-flex;
}

body.classlings-app .su-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    background: var(--cla-wash);
    border-radius: var(--cla-r-l);
}

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

/* Step 1's picture: the board in little, with the class's own Classlings standing on it. */
body.classlings-app .su-world {
    position: relative;
    align-self: stretch;
    width: 100%;
    overflow: hidden;
    background: var(--cla-page);
}

body.classlings-app .su-world.is-white::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
    background: var(--cla-wash);
    border-top: 2px solid var(--cla-wash-2);
}

body.classlings-app .su-world.is-sky {
    --cla-px: 3px;
    background:
        var(--cla-art-cloud) left 18% top 8% / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) left 70% top 22% / calc(var(--cla-px) * 20) calc(var(--cla-px) * 5) no-repeat,
        var(--cla-art-tufts) left 0 bottom 20% / 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% 20% no-repeat,
        var(--cla-world);
}

body.classlings-app .su-stage {
    display: block;
    image-rendering: pixelated;
}

body.classlings-app .su-world .su-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* A little point card (Classling, name and points on the colour of its points), as on the board. */
body.classlings-app .su-mini {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    flex: none;
    width: 140px;
    height: 60px;
    overflow: hidden;
    background: var(--cla-paper);
    border: 2px solid var(--cla-ink);
    border-radius: 12px;
    box-shadow: inset 0 0 0 3px var(--card-edge, transparent), 2px 2px 0 var(--cla-wash-2);
}

body.classlings-app .su-mini canvas {
    width: 56px;
    height: 56px;
    border-right: 2px solid var(--cla-ink);
    image-rendering: pixelated;
}

body.classlings-app .su-who {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1px;
    min-width: 0;
    font: 600 15px / 1.1 var(--cla-display);
}

body.classlings-app .su-nm {
    max-width: 100%;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.classlings-app .su-who b {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 700 26px / 1 var(--cla-display);
}

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

/* The back of a card: minus and plus with the points in a cutout between (Quick add's picture). */
body.classlings-app .su-mini.is-back {
    position: relative;
    grid-template-columns: 1fr 1fr;
    width: 100px;
}

body.classlings-app .su-mini.is-back > span:not(.su-cut) {
    display: grid;
    place-items: center;
    font: 700 36px / 1 var(--cla-display);
}

body.classlings-app .su-mini.is-back > span .cla-ic {
    width: 0.8em;
    height: 0.8em;
}

body.classlings-app .su-minus {
    padding-right: 14px;
    color: var(--cla-card-minus-ink);
    background: var(--cla-minus);
    border-right: 2px solid var(--cla-ink);
}

body.classlings-app .su-plus {
    padding-left: 14px;
    color: var(--cla-card-plus-ink);
    background: var(--cla-card-plus);
}

body.classlings-app .su-cut {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    font: 700 14px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-lime-tint);
    border: 2px solid var(--cla-ink);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--cla-paper);
}

body.classlings-app .su-arrow {
    flex: none;
    width: 26px;
    height: 26px;
}

/* Detailed add's picture: three of the class's own reasons, as the points menu shows them. */
body.classlings-app .su-menu {
    display: grid;
    gap: 6px;
    width: min(300px, 100%);
}

body.classlings-app .su-reason {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 2px 6px 2px 4px;
    font: 600 16px / 1.1 var(--cla-display);
    background: var(--rc-tint);
    border: 2px solid var(--rc-deep);
    border-radius: var(--cla-r-s);
    box-shadow: 0 3px 0 var(--rc-deep);
}

body.classlings-app .su-reason svg {
    width: 32px;
    height: 32px;
}

body.classlings-app .su-reason > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .su-reason b {
    min-width: 36px;
    padding: 3px 6px;
    font: 700 16px / 1 var(--cla-display);
    text-align: center;
    background: var(--rc);
    border: 2px solid var(--rc-deep);
    border-radius: var(--cla-r-s);
}

/* Step 5's pictures: a week of school days with a sunrise on each day points go back, or the button itself. */
body.classlings-app .su-week {
    display: flex;
    gap: 8px;
    max-width: 100%;
}

/* A day is 52 px wide where the picture has room, and shrinks with it where it has not (it was cut off at the sides from 680 to
   1000 px wide). */
body.classlings-app .su-day {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    flex: 0 1 52px;
    min-width: 0;
    height: 68px;
    font: 700 18px / 1 var(--cla-display);
    color: var(--cla-ink-2);
    background: var(--cla-page);
    border: 2px solid var(--cla-wash-2);
    border-radius: var(--cla-r-s);
}

body.classlings-app .su-day.is-marked {
    color: var(--cla-ink);
    background: var(--cla-gold-tint);
    border-color: var(--cla-gold-deep);
}

body.classlings-app .su-hand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    font: 600 18px / 1.1 var(--cla-display);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-s);
    box-shadow: 0 4px 0 var(--cla-ink);
}

/* Step 6's time of day: the day's and the week's card have Settings' own time button (a clock and the time on a white button with
   its base: classlings-settings.css cla-set-btn is-small, 48 px high) in their picture, under the days, so it reads as a button the
   teacher can press; the line says it in plain words. The picture has room to spare, so the card and the step are no taller than
   they were. A button can't hold a button, so the card is a plain box with its radio laid over it, empty, and the time button
   stands above the radio (z-index), as a tab stop on the chosen card only. */
body.classlings-app .su-radio {
    appearance: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
}

body.classlings-app .su-card .su-on {
    pointer-events: none;
}

/* The days over the button, in the middle of the picture; its ring and base are drawn outside the box (so nothing clips them). */
body.classlings-app .su-pic.has-time {
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}

body.classlings-app .su-art {
    display: flex;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0 12px;
}

/* The days' own width is 52 px each (292 in all) where the picture has it; the week is as wide as the picture allows up to that, and the
   days share it. (A flex row's own width counts its days' contents, not their 52 px, so it is said here.) */
body.classlings-app .su-art .su-week {
    flex: 0 1 292px;
    width: 100%;
    min-width: 0;
}

body.classlings-app .su-time {
    position: relative;
    z-index: 1;
}

/* The clock (Settings' own classes, classlings-settings.css) floats over the page, placed by js/classlings-setup.js placeClock. */
body.classlings-app .su-card .su-clock {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 5;
    max-width: calc(100vw - 16px);
    cursor: default;
}

/* Step 2's panels, "How points work": three cards read left to right with the kit's arrow between them, each a picture, a
   title and one line, in the choices' style but not a button: nothing is chosen here. Nothing in a picture moves but the
   Classlings (the +1, the -1, the hearts, the numbers, the sunrise and the arrows are simply there). --hk is how big the
   pictures' own parts (the point cards, the +1, the side list's cards) are: they grow with the window, so a picture
   always has room for what it holds. On a phone the panels stack, with the arrow pointing down. */
body.classlings-app .su-how {
    --hk: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
}

body.classlings-app .su-card.is-fact {
    --su-pic: clamp(104px, calc(100vh - 390px), 180px);
    align-content: start;
    padding: 16px 16px 18px;
    cursor: default;
}

body.classlings-app .su-card.is-fact:hover {
    border-color: var(--cla-wash-2);
}

body.classlings-app .su-then {
    display: grid;
    align-self: center;
    place-items: center;
}

/* Panel 1: a point card one above the start, with the +1 that made it so. */
body.classlings-app .su-how .su-mini.is-how {
    width: calc(var(--hk) * 140px);
    height: calc(var(--hk) * 60px);
    grid-template-columns: calc(var(--hk) * 56px) minmax(0, 1fr);
}

body.classlings-app .su-how .su-mini.is-how canvas {
    width: calc(var(--hk) * 56px);
    height: calc(var(--hk) * 56px);
}

body.classlings-app .su-how .su-who {
    font-size: calc(var(--hk) * 15px);
}

body.classlings-app .su-how .su-who b {
    font-size: calc(var(--hk) * 26px);
}

body.classlings-app .su-how .su-heart {
    width: calc(var(--hk) * 17px);
}

body.classlings-app .su-gain {
    display: grid;
    flex: none;
    place-items: center;
    min-width: calc(var(--hk) * 56px);
    height: calc(var(--hk) * 56px);
    padding: 0 calc(var(--hk) * 10px);
    font: 700 calc(var(--hk) * 34px) / 1 var(--cla-display);
    color: var(--cla-card-plus-ink);
    background: var(--cla-card-plus);
    border: 2px solid var(--cla-ink);
    border-radius: var(--cla-r-s);
}

/* Panel 2: the Showdown's court with two Classlings on it, and the side list's cards at its corners: a pupil's name and
   hearts, the second one's knocked (as the Showdown tints a card that has been hit) with its red -1 under it. */
body.classlings-app .su-court {
    position: relative;
    align-self: stretch;
    width: 100%;
    overflow: hidden;
}

body.classlings-app .su-court .su-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

body.classlings-app .su-rail {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 1;
    display: grid;
    justify-items: center;
    min-width: calc(var(--hk) * 54px);
    max-width: 40%;
    padding: 2px 8px 3px;
    font: 600 calc(var(--hk) * 14px) / 1.1 var(--cla-display);
    background: var(--cla-page);
    border: 2px solid var(--cla-ink);
    border-radius: 12px;
}

body.classlings-app .su-rail.is-hit {
    right: 10px;
    left: auto;
    background: var(--cla-minus);
}

body.classlings-app .su-rail b {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 700 calc(var(--hk) * 22px) / 1 var(--cla-display);
}

body.classlings-app .su-rail .su-heart {
    width: calc(var(--hk) * 15px);
}

body.classlings-app .su-loss {
    position: absolute;
    top: calc(var(--hk) * 62px);
    right: 14px;
    z-index: 1;
    font: 700 calc(var(--hk) * 32px) / 1 var(--cla-display);
    color: var(--pm-red-deep);
}

/* Panel 3: the sunrise (the reset's own icon) over three point cards all back on the start. */
body.classlings-app .su-card.is-fact[data-su-fact="fresh"] .su-pic {
    flex-direction: column;
    gap: 8px;
}

/* The sunrise is the kit's 12 x 12 art at a whole number of screen pixels to one (the icons are 24px everywhere else, and
   beg to differ with !important), so its pixels stay square. */
body.classlings-app .su-sun svg.cla-ic.is-px {
    width: 36px !important;
    height: 36px !important;
}

body.classlings-app .su-trio {
    display: flex;
    gap: 6px;
}

body.classlings-app .su-trio .su-mini.is-how {
    width: calc(var(--hk) * 80px);
    height: calc(var(--hk) * 48px);
    grid-template-columns: calc(var(--hk) * 44px) minmax(0, 1fr);
}

body.classlings-app .su-trio .su-mini.is-how canvas {
    width: calc(var(--hk) * 44px);
    height: calc(var(--hk) * 44px);
}

body.classlings-app .su-trio .su-mini.is-how .su-nm {
    display: none;
}

body.classlings-app .su-trio .su-who b {
    gap: 2px;
    font-size: calc(var(--hk) * 19px);
}

body.classlings-app .su-trio .su-heart {
    width: calc(var(--hk) * 12px);
}

/* A window 1240 px wide or more: each card has room for bigger parts. */
@media (min-width: 1240px) {
    body.classlings-app .su-how {
        --hk: 1.25;
        gap: var(--su-gap);
    }

    /* As tall as the page leaves room for on a laptop's page (540 to 640), then growing with it, as the choices' pictures do. */
    body.classlings-app .su-card.is-fact {
        --su-pic: clamp(104px, min(calc(100vh - 366px), max(180px, calc(180px + (100vh - 640px) * 0.5))), 300px);
        padding: 20px 24px 20px;
    }

    body.classlings-app .su-sun svg.cla-ic.is-px {
        width: 48px !important;
        height: 48px !important;
    }

    body.classlings-app .su-trio {
        gap: 8px;
    }
}

/* A big screen: the pictures are as big as the choices' on the other steps. */
@media (min-width: 1600px) and (min-height: 900px) {
    body.classlings-app .su-how {
        --hk: 1.75;
    }

    body.classlings-app .su-sun svg.cla-ic.is-px {
        width: 72px !important;
        height: 72px !important;
    }

    body.classlings-app .su-trio {
        gap: 12px;
    }
}

/* ---------------------------------------------------------------- the dock: Back, note and later, Next */

/* Back at the left and the gold Next at the right (the reasons screen's own dock), with the note about
   Settings and "Do this later" between them. */
body.classlings-app .rs.is-setup .rs-mid,
body.classlings-app .rs.su .rs-mid {
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

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

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

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

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

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

/* On the sky, the words straight on it stay ink. */
body.classlings-app.cla-sky .rs-note {
    color: var(--cla-ink);
}

body.classlings-app .su-dock .su-next {
    flex: none;
}

body.classlings-app .su-dock .su-next .cla-ic {
    width: 24px;
    height: 24px;
}

body.classlings-app .su-dock .su-back {
    flex: none;
}

body.classlings-app .su-dock .su-back .cla-ic {
    width: 28px;
    height: 28px;
}

/* ---------------------------------------------------------------- the last screen */

/* "Class 11 is ready!": the class's own cards, every pupil's, in the world the teacher chose, under the title and its
   two sparkles, with Back, the note about Settings and the gold "Open the Classling Cup" along the grass. The cards
   are the board's own (js/classlings-setup.js makes them with the board's code, and they take its card rules,
   classlings-board.css) in a grid of their own that holds the whole class at once: a picture, not controls, so only
   the Classlings in them move. */
body.classlings-app {
    --su-spark: 3px;
    --su-spark-small: 2px;
}

body.classlings-app .su-board {
    display: grid;
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: repeat(var(--cl-cols, 5), minmax(0, 1fr));
    grid-auto-rows: var(--cl-card-h, 96px);
    gap: 12px;
    align-content: center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

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

/* One short line under the title when some pupils have not picked a Classling yet (each is their mystery box). */
body.classlings-app .su-pick {
    flex: none;
    margin: 0 0 6px;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink);
}

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

/* Today's card carries a transition (app.css .pupil-card); in this picture only the Classlings move. */
body.classlings-app .su-board .cl-card {
    transition: none;
}

body.classlings-app .rs.su[data-view="finale"] :is(.rs-steps, .su-h, .su-panel) {
    display: none;
}

body.classlings-app .rs.su[data-view="finale"] .su-body {
    gap: 0;
    padding: 10px var(--cla-gutter) 8px;
}

/* The two sparkles beside the title: the kit's pixel star, a whole number of screen pixels to an art pixel. They
   never move. */
body.classlings-app .rs.su[data-view="finale"] .rs-title {
    position: relative;
}

body.classlings-app svg.su-spark {
    position: absolute;
    left: calc(100% + 14px);
    top: -6px;
    width: calc(var(--su-spark) * 7);
    height: calc(var(--su-spark) * 7);
    pointer-events: none;
}

body.classlings-app svg.su-spark.is-small {
    left: calc(100% + 52px);
    top: 26px;
    width: calc(var(--su-spark-small) * 7);
    height: calc(var(--su-spark-small) * 7);
}

/* The note stands beside Back, as the drawing has it (the other steps keep theirs in the middle). */
body.classlings-app .rs.su[data-view="finale"] .rs-mid {
    align-items: flex-start;
}

body.classlings-app .rs.su[data-view="finale"] .rs-sub {
    justify-content: flex-start;
}

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

@media (min-width: 1600px) and (min-height: 900px) {
    body.classlings-app {
        --su-spark: 5px;
        --su-spark-small: 3px;
    }

    body.classlings-app svg.su-spark {
        left: calc(100% + 18px);
        top: -8px;
    }

    body.classlings-app svg.su-spark.is-small {
        left: calc(100% + 66px);
        top: 34px;
    }
}

/* ---------------------------------------------------------------- the reasons screen, as step 4 */

body.classlings-app .rs.is-setup .rs-steps {
    margin: 0;
}

/* The room is the body's (classlings-points.css): it ends above the grass and the foot, and nothing in it slides under them. What
   it holds (the question and the two lists) fits without scrolling wherever it can and otherwise scrolls inside a panel (below). */

/* ---------------------------------------------------------------- shorter screens: a laptop's page */

/* The choices' pictures are as tall as the page leaves room for, so every step fits a 540 px page with nothing to
   scroll: the drawing's 180 px from there up to a 800 px page, and taller on a big screen, to 300 px. */
body.classlings-app {
    --su-pic: clamp(96px, min(100vh - 360px, max(180px, 180px + (100vh - 800px) * 0.6)), 300px);
}

@media (max-height: 700px) {
    body.classlings-app {
        --su-card-r: var(--cla-r-l, 28px);
    }

    body.classlings-app .su-body {
        gap: 8px;
        padding-top: 14px;
    }

    body.classlings-app .su-card {
        gap: 4px;
        padding: 14px 20px 16px;
    }

    body.classlings-app .su-cards {
        margin-top: 12px;
    }

    body.classlings-app .su-cline {
        font-size: 17px;
        line-height: 1.3;
    }
}

/* A laptop window as short as 540 or 600px (a 1366 x 768 screen with a browser's bars): the strip and the dock
   shrink as the tables' room's do (the logo to its smaller size, Back to the standard's 64 px square, the gold
   button to its ordinary size) and the page takes the room that frees; at 600px or less the title is drawn at twice
   the pixel size, as on a phone. */
@media (max-height: 720px) and (min-width: 901px) {
    body.classlings-app :is(.rs.su, .rs.is-setup) .rs-logo {
        width: 77px;
        height: 30px;
    }

    body.classlings-app :is(.rs.su .su-back, .rs.is-setup .rs-back) {
        width: var(--ctl-square-phone);
        height: var(--ctl-square-phone);
        border-radius: var(--ctl-r);
    }

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

    body.classlings-app .rs.su .su-next:active:not(:disabled),
    body.classlings-app .rs.is-setup .pm-btn.is-go.rs-use:active:not(:disabled) {
        transform: translateY(var(--cla-lift));
        box-shadow: 0 0 0 var(--cla-gold-deep);
    }

    body.classlings-app :is(.rs.su, .rs.is-setup) .rs-mid {
        margin-bottom: 10px;
    }

    body.classlings-app :is(.rs.su, .rs.is-setup) .rs-dock {
        padding-bottom: 12px;
    }

    body.classlings-app .rs.su .su-back .cla-ic,
    body.classlings-app .rs.is-setup .rs-back .cla-ic {
        width: 24px;
        height: 24px;
    }
}

/* ---------------------------------------------------------------- keeping to the room above the foot */

/* Every screen of the set-up keeps what it shows above its foot (js/setupScreen.js): the dock is the foot, and the
   grass stands behind it as tall as it is and a little more (--su-ground, set from the dock's height), with its tufts
   (three art pixels) above that. The screen's own room ends above the tufts' jagged edge, so a list, a card or a
   picture is never drawn over the grass, the note or the buttons, and nothing slides under them. */
body.classlings-app :is(.rs.su, .rs.is-setup) {
    grid-template-rows: auto minmax(0, 1fr) minmax(calc(var(--su-ground, 100px) + var(--cla-px) * 3), auto);
}

body.classlings-app :is(.rs.su, .rs.is-setup) .rs-dock {
    align-self: end;
}

/* A part of a screen with more than the room scrolls inside a clear white panel: rounded corners, a 2 px edge, a soft
   shadow on the inside edge while there is more below, and at the top once it has scrolled. With room enough there is
   no panel at all (js/setupScreen.js puts the edge on, data-scroll, only where it scrolls). */
body.classlings-app :is(.rs .rs-panel, .rs.su .su-panel) {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

body.classlings-app :is(.rs .rs-scroll, .rs.su .su-pane) {
    flex: 1 1 auto;
    min-height: 0;
}

body.classlings-app :is(.rs-panel, .su-panel)[data-scroll] {
    overflow: hidden;
    padding: 6px;
    background: var(--cla-page);
    border: 2px solid var(--cla-ink);
    border-radius: var(--cla-r-l);
}

body.classlings-app :is(.rs-panel, .su-panel)[data-scroll] > :is(.rs-scroll, .su-pane) {
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for what is drawn just outside a control (its focus ring, an open reason's edge) inside the clip. */
    padding: 6px 8px;
}

body.classlings-app :is(.rs-panel, .su-panel)[data-scroll]::before,
body.classlings-app :is(.rs-panel, .su-panel)[data-scroll]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 22px;
    pointer-events: none;
    opacity: 0;
}

body.classlings-app :is(.rs-panel, .su-panel)[data-scroll]::before {
    top: 0;
    background: linear-gradient(rgba(30, 27, 58, 0.24), rgba(30, 27, 58, 0));
}

body.classlings-app :is(.rs-panel, .su-panel)[data-scroll]::after {
    bottom: 0;
    background: linear-gradient(rgba(30, 27, 58, 0), rgba(30, 27, 58, 0.24));
}

body.classlings-app :is(.rs-panel, .su-panel)[data-above]::before,
body.classlings-app :is(.rs-panel, .su-panel)[data-below]::after {
    opacity: 1;
}

/* Between the buttons, on a wide enough page: the note and "Do this later" in one row (so the foot is no taller than Back). */
@media (min-width: 1240px), (max-height: 720px) and (min-width: 1140px) {
    body.classlings-app .rs.is-setup .rs-mid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 20px;
    }
}

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

/* The strip wraps: on a narrow page the step goes under the title, never off the side. */
@media (max-width: 900px) {
    body.classlings-app :is(.rs.su, .rs.is-setup) .rs-strip {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    body.classlings-app :is(.rs.su, .rs.is-setup) .rs-steps {
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal;
    }

    /* The reasons screen's foot has more in it than the others': Undo, the note and "Do this later" take a row of their
       own above the buttons (as on a phone), not the room between them, where they would pile up in lines. */
    body.classlings-app .rs.is-setup .rs-dock {
        flex-wrap: wrap;
        row-gap: 8px;
    }

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

/* How points work, in a window under 1000 px wide: three cards of about 250 px, so what is in their pictures is smaller. */
@media (max-width: 999px) {
    body.classlings-app .su-how {
        --hk: 0.85;
    }
}

@media (max-width: 860px) {
    body.classlings-app .su-cards,
    body.classlings-app .su-cards.is-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* How points work: the three panels stack, each with its picture over its words (with the full-size parts again), and the
       arrow between them points down. */
    body.classlings-app .su-how {
        --hk: 1;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    body.classlings-app .su-card.is-fact {
        --su-pic: 112px;
    }

    body.classlings-app .su-then {
        transform: rotate(90deg);
    }

    body.classlings-app .su-card {
        --su-pic: 88px;
    }

    /* Three choices (the reset) are each a picture beside its words, so all three fit. */
    body.classlings-app .su-cards.is-3 .su-card {
        grid-template-columns: 132px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 14px;
    }

    body.classlings-app .su-cards.is-3 .su-pic {
        grid-row: 1 / span 2;
        height: 88px;
    }

    /* The reset's picture is 132 x 88 here: its days are small (all five whole) and the time button under them is the touch size,
       44 px, so both are inside it and the card is no taller than it was. */
    body.classlings-app .su-pic.has-time {
        gap: 5px;
    }

    body.classlings-app .su-week {
        gap: 4px;
    }

    body.classlings-app .su-day {
        height: 26px;
        font-size: 12px;
    }

    body.classlings-app .su-day .cla-ic {
        display: none;
    }

    body.classlings-app .su-pic .su-time.is-small {
        min-height: 44px;
        padding: 0 12px;
        gap: 6px;
    }

    /* The pictures keep what says it: one point card (not the three around it), two reasons (not three). */
    body.classlings-app .su-pic .su-mini:not(.is-main, .is-back) {
        display: none;
    }

    body.classlings-app .su-menu .su-reason:nth-child(3) {
        display: none;
    }
}

@media (max-width: 560px) {
    body.classlings-app .rs.su .rs-steps,
    body.classlings-app .rs.is-setup .rs-steps {
        flex-basis: 100%;
    }

    body.classlings-app .su-h {
        font-size: 28px;
    }

    body.classlings-app .su-card {
        --su-pic: 84px;
        padding: 12px 14px 14px;
    }

    body.classlings-app .su-card.is-fact {
        --su-pic: 100px;
        padding: 12px 14px 14px;
    }

    body.classlings-app .su-card > b {
        font-size: 24px;
    }

    body.classlings-app .su-cline {
        font-size: 16px;
    }

    body.classlings-app .su-on {
        right: 14px;
    }

    body.classlings-app .su-hand {
        min-height: 40px;
        padding: 0 10px;
        font-size: 15px;
        white-space: nowrap;
    }

    body.classlings-app .su-hand .cla-ic {
        display: none;
    }
}

/* On a narrow page the gold button is the standard's ordinary size (as on the short laptop page), so the note beside it
   has room to wrap in two lines rather than three. */
@media (max-width: 900px) {
    body.classlings-app .rs.su[data-view="finale"] .su-next {
        --l: var(--cla-lift);
        min-height: var(--ctl-h);
        margin-bottom: calc(var(--cla-lift) + (var(--cla-square) - var(--ctl-h)) / 2);
        padding: var(--ctl-pad);
        font: var(--ctl-font);
        border-radius: var(--ctl-r);
        box-shadow: 0 var(--cla-lift) 0 var(--cla-gold-deep);
    }

    body.classlings-app .rs.su[data-view="finale"] .su-next:active:not(:disabled) {
        transform: translateY(var(--cla-lift));
        box-shadow: 0 0 0 var(--cla-gold-deep);
    }
}

/* On a phone the last screen has the cards and, below, Back and the gold button in one row (the drawing leaves out the
   logo, the sparkles and the note): the button takes the room Back leaves, its words wrapping rather than running off
   the side. */
@media (max-width: 599px) {
    body.classlings-app .rs.su[data-view="finale"] .rs-mid,
    body.classlings-app .rs.su[data-view="finale"] svg.su-spark {
        display: none;
    }

    body.classlings-app .rs.su[data-view="finale"] .su-body {
        padding-top: 6px;
    }

    body.classlings-app .su-pick {
        margin-bottom: 4px;
        font-size: 16px;
    }

    body.classlings-app .su-board {
        gap: 6px;
    }

    body.classlings-app .rs.su[data-view="finale"] .su-next {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 16px;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }

    body.classlings-app .rs.su[data-view="finale"] .su-next .cla-ic {
        display: none;
    }
}