/* ========================================================================================================
   Login cards (Home's Menu → Login cards): the class's codes, New code, Make missing codes and Print cards (the
   teacher, 10 October). Pupils' screens (screens.html) shares this sheet: screen locks, apps and each pupil's login.
   In the Classlings look (the teacher, 9 October: decision A).
   The reviewed mix design's tokens (design-directions/directions/mix/theme.css, as Home has them in
   shared/css/classlings-home.css), the shared controls (shared/css/classlings-controls.css: every button
   here is a .cla-btn, .cla-square or .cla-field), and the Cup's Settings and Points history for the page's
   shape: pale-edged panels, History's tinted totals, the Cup's on/off switch, and a bar along the bottom
   with Home and the page's title in Classlings' lettering.
   Fredoka for headings, buttons and labels; Atkinson Hyperlegible for reading (decision E).
   Printed, the page is only the cards: ink on white, eight to an A4 sheet, with dashed lines to cut along.
   ======================================================================================================== */

body.cla-cards {
    --page: #ffffff;
    --ink: #1e1b3a;
    --ink-2: #4a4766;
    --wash: #f3f2f9;
    --wash-2: #e4e1f1;
    --sky: #3aa0ff;       --sky-deep: #1b6fcf;       --sky-tint: #e1efff;
    --grape: #a07cff;     --grape-deep: #6a45dc;     --grape-tint: #eee8ff;
    --lime: #7ed957;      --lime-deep: #3e9a2a;      --lime-tint: #e5f8da;
    --tangerine: #ff8a3d; --tangerine-deep: #cf5a12; --tangerine-tint: #ffeddf;
    --gold: #f7c230;      --gold-deep: #c98a12;      --gold-tint: #fff3c4;
    --scrim: rgba(30, 27, 58, 0.45);
    --float: 0 8px 0 rgba(30, 27, 58, 0.13);
    --display: 'Fredoka', 'Atkinson Hyperlegible', system-ui, sans-serif;
    --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --gutter: 32px;
    --r-s: 14px;
    --r-m: 20px;
    --r-l: 28px;
    --edge: 3px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    background: var(--page);
    font: 400 18px / 1.4 var(--body);
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

/* The page's base rules weigh nothing (:where), so every rule below wins over them. */
:where(body.cla-cards) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(body.cla-cards) :where(h1, h2, h3, p) { margin: 0; }
:where(body.cla-cards) :where(button, input, select, textarea) { color: inherit; }
:where(body.cla-cards) :focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
:where(body.cla-cards) :where(svg) { display: block; flex: none; image-rendering: pixelated; }
:where(body.cla-cards) :where([data-icon]) { display: inline-flex; flex: none; align-items: center; justify-content: center; }
body.cla-cards .hidden { display: none !important; }

.lc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

/* Home, then the page's title in the lettering with the class beside it, and Print cards, the page's
   gold main action, at the end. It comes first for keyboards and sits under the page. */
.lc-bar {
    order: 2;
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 4px var(--gutter) 16px;
}

.lc-home svg {
    width: 32px;
    height: 32px;
}

.lc-name {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: var(--ctl-square);
    margin: 0 0 var(--ctl-lift);
    overflow: hidden;
}

/* The lettering at 2 screen pixels per art pixel (40 px tall), as Settings' title; the bottom 4 art pixels
   are room for tails, handed back so the capitals sit in the middle of the bar. */
.lc-title {
    --title-scale: 2;
    flex: none;
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}

.lc-title svg {
    width: calc(var(--title-scale) * var(--w) * 1px);
    height: calc(var(--title-scale) * var(--h) * 1px);
}

/* The class: a drop-down beside the title (most teachers have one class, so it stays small). */
.lc-name .lc-class-pick {
    flex: 0 1 240px;
    min-width: 120px;
}

.lc-bar .cla-btn {
    flex: none;
}

/* ------------------------------------------------------------------ the page */

.lc-main {
    order: 1;
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    gap: 24px;
    min-height: 0;
    padding: 24px var(--gutter) 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lc-panel {
    min-width: 0;
    padding: 20px 24px 24px;
    background: var(--page);
    border: var(--edge) solid var(--wash-2);
    border-radius: var(--r-l);
}

.lc-panel h2 {
    font: 700 28px / 1.15 var(--display);
}

.is-loading-access .lc-codes,
.is-loading-access .lc-screens-page {
    display: none;
}

/* Getting ready: still, with the key, as nothing but the Classlings moves on its own. */
.access-loading-panel {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lc-loading-icon svg {
    width: 48px;
    height: 30px;
}

.access-loading-panel p {
    margin-top: 4px;
    color: var(--ink-2);
}

/* A message about what just happened floats over the top of the page, so nothing moves under the pointer.
   One that something worked goes by itself (app.js); one that something didn't stays. */
.lc-float {
    position: fixed;
    top: 12px;
    right: var(--gutter);
    left: var(--gutter);
    z-index: 30;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.status-message {
    max-width: 720px;
    padding: 10px 18px;
    font: 600 20px / 1.25 var(--display);
    color: var(--ink);
    background: var(--wash);
    border: 2px solid var(--wash-2);
    border-radius: var(--r-s);
    box-shadow: var(--float);
    pointer-events: auto;
}

.status-message.success {
    background: var(--lime-tint);
    border-color: var(--lime-deep);
}

.status-message.error {
    background: var(--tangerine-tint);
    border-color: var(--tangerine-deep);
}

/* ------------------------------------------------------------------ the class drop-down */

.lc-class-pick {
    min-width: 0;
}

/* The drop-down: a text box with the kit's little arrow (8 x 8 art, at 2 screen pixels per art pixel). */
.lc-class-pick select {
    width: 100%;
    appearance: none;
    padding-right: 44px;
    text-overflow: ellipsis;
    cursor: pointer;
    background: var(--ctl-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%231e1b3a' d='M0 2h2v1h-2zM6 2h2v1h-2zM1 3h2v1h-2zM5 3h2v1h-2zM2 4h4v1h-4zM3 5h2v1h-2z'/%3E%3C/svg%3E") right 14px center / 16px 16px no-repeat;
}

/* ------------------------------------------------------------------ class controls */

.control-band {
    display: grid;
    align-content: start;
    gap: 20px;
}

.lc-screens {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 16px;
}

.lock-message-field,
.field-label {
    font: 600 20px / 1.2 var(--display);
    color: var(--ink);
}

.lc-screens textarea {
    min-height: 76px;
    resize: vertical;
}

.dashboard-app-access {
    display: grid;
    gap: 8px;
}

.toggle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 12px;
}

/* Each app with On and Off (the shared .cla-onoff: the teacher, 11 October, option A). */
.app-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 4px 16px;
    background: var(--page);
    border: 2px solid var(--wash-2);
    border-radius: var(--r-m);
    cursor: pointer;
}

.app-name {
    display: grid;
    min-width: 0;
}

.app-name strong {
    font: 600 20px / 1.2 var(--display);
}

.app-name small {
    font: 400 15px / 1.2 var(--body);
    color: var(--ink-2);
}

.app-toggle:has(input:disabled) {
    color: var(--ink-2);
    cursor: default;
    opacity: 0.6;
}

/* ------------------------------------------------------------------ Login cards: the codes */

.lc-codes {
    display: grid;
    gap: 16px;
}

.lc-summary {
    font: 600 24px / 1.2 var(--display);
}

/* Someone hasn't got a code yet: a gold note with the button that makes them. */
.lc-missing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 12px 10px 20px;
    font: 600 20px / 1.25 var(--display);
    background: var(--gold-tint);
    border: var(--edge) solid var(--gold-deep);
    border-radius: var(--r-m);
}

.lc-missing .cla-btn {
    margin-bottom: var(--ctl-small-lift);
}

/* Two columns of pupils (three on a wide board): name, code in boxes, New code. */
.pupil-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 1fr));
    gap: 10px 16px;
}

.pupil-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 20px;
    min-height: 72px;
    padding: 8px 12px 4px 20px;
    background: var(--wash);
    border-radius: var(--r-m);
}

.pupil-name {
    padding-bottom: 4px;
    font: 600 22px / 1.2 var(--display);
    overflow-wrap: anywhere;
}

/* The code as pupils type it and as the card prints it: eight boxes in two fours. */
.code-boxes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 4px;
}

.code-box {
    display: grid;
    place-items: center;
    width: 28px;
    height: 40px;
    font: 700 24px / 1 var(--body);
    background: var(--page);
    border: 2px solid var(--ink);
    border-bottom-width: 4px;
    border-radius: 6px;
}

.code-dash {
    width: 10px;
    height: 3px;
    margin: 0 2px;
    background: var(--ink);
}

.code-none {
    padding-bottom: 4px;
    font: 600 18px / 1.2 var(--display);
    color: var(--ink-2);
}

.pupil-row .cla-btn {
    margin-bottom: var(--ctl-small-lift);
}

/* ------------------------------------------------------------------ Pupils' screens */

.lc-screens-page {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.lc-lock-state {
    font: 600 20px / 1.3 var(--display);
}

.lc-lock-state.is-locked {
    padding: 10px 16px;
    background: var(--gold-tint);
    border: var(--edge) solid var(--gold-deep);
    border-radius: var(--r-m);
}

.lc-logins {
    display: grid;
    gap: 12px;
}

.lc-logins-about {
    color: var(--ink-2);
}

/* One row a pupil: name, when they last logged in, when they were last on, Log out and Turn off. The headings sit
   once over the times; on a phone each time carries its own. */
.lc-logins .pupil-table {
    grid-template-columns: minmax(0, 1fr);
}

.lc-logins-head,
.lc-logins .pupil-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) 278px;
    column-gap: 16px;
}

.lc-logins-head {
    display: grid;
    margin-bottom: -4px;
    padding: 0 12px 0 20px;
    font: 600 16px / 1.2 var(--display);
    color: var(--ink-2);
}

.login-time {
    padding-bottom: 4px;
    font: 400 18px / 1.25 var(--body);
    font-variant-numeric: tabular-nums;
}

/* On now: a word on a green tint, so it never rests on the colour alone. */
.on-now {
    display: inline-block;
    padding: 2px 10px;
    font: 600 17px / 1.3 var(--display);
    background: var(--lime-tint);
    border: 2px solid var(--lime-deep);
    border-radius: 10px;
}

.pupil-who {
    display: grid;
    min-width: 0;
    padding-bottom: 4px;
}

.pupil-meta {
    font: 400 16px / 1.3 var(--body);
    color: var(--ink-2);
}

.pupil-meta.is-disabled {
    color: var(--danger-deep, #b8341a);
}

.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0 8px;
}

.print-cards {
    display: none;
}

/* ------------------------------------------------------------------ "are you sure?" */

.lc-ask {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    padding: 24px 28px 22px;
    color: var(--ink);
}

.lc-ask::backdrop {
    background: var(--scrim);
}

.lc-ask h2 {
    font: 700 28px / 1.15 var(--display);
}

.lc-ask p {
    margin: 8px 0 24px;
    color: var(--ink-2);
}

/* ------------------------------------------------------------------ narrower windows */

/* Pupils' screens in one column: the class's screens, then each pupil. */
@media (max-width: 999px) {
    .lc-screens-page {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A phone: the title and the class have a row of their own over Home and the buttons; each pupil's code goes
   under their name. */
@media (max-width: 639px) {
    body.cla-cards {
        --gutter: 16px;
    }

    .lc-bar {
        flex-wrap: wrap;
        row-gap: 12px;
        justify-content: space-between;
    }

    .lc-name {
        order: -1;
        flex: 1 1 100%;
        height: auto;
        margin: 0;
    }

    .lc-home svg {
        width: 24px;
        height: 24px;
    }

    .lc-bar .cla-btn {
        flex: 1 1 0;
        padding: 0 12px;
    }

    .lc-bar .cla-btn.is-big {
        --l: var(--ctl-lift);
        min-height: var(--ctl-h);
        font: var(--ctl-font);
        border-radius: var(--ctl-r);
    }

    .lc-main {
        gap: 16px;
        padding-top: 16px;
    }

    .lc-panel {
        padding: 16px 16px 20px;
    }

    .lc-panel h2,
    .lc-ask h2 {
        font-size: 24px;
    }

    .lc-summary {
        font-size: 20px;
    }

    .lc-screens textarea {
        min-height: 104px;
    }

    .pupil-row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 12px 4px 16px;
    }

    .pupil-row .code-boxes,
    .pupil-row .code-none {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .lc-logins-head {
        display: none;
    }

    .lc-logins .pupil-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lc-logins .pupil-who {
        grid-column: 1 / -1;
    }

    .login-time::before {
        content: attr(data-label);
        display: block;
        font: 600 15px / 1.2 var(--display);
        color: var(--ink-2);
    }

    .lc-logins .pupil-row .row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .lc-ask {
        padding: 20px 20px 18px;
    }

    .lc-ask .cla-ask-actions {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .lc-ask .cla-ask-actions .cla-btn {
        flex: 1 1 auto;
        padding: 0 14px;
    }
}

/* ------------------------------------------------------------------ printed: the cards */

/* Eight cards to an A4 sheet, two across and four down, edge to edge, so one cut along a dashed line
   parts two cards. Ink on white only: no fills, nothing that needs "background graphics" to print. Each
   card has the pupil's name and class, the Classlings lettering, the code in boxes grouped in fours as
   the pupils' login page shows it, and where to type it. */
@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {
    body.cla-cards {
        display: block;
        height: auto;
        overflow: visible;
        background: #ffffff;
    }

    .lc-bar,
    .lc-float,
    .lc-codes,
    .access-loading-panel,
    .lc-ask {
        display: none !important;
    }

    .lc-main {
        display: block;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    .print-cards {
        display: block;
    }

    .print-code-page {
        display: grid;
        grid-template-columns: repeat(2, 95mm);
        grid-auto-rows: 69mm;
        width: 190mm;
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-code-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .print-code-card {
        display: flex;
        flex-direction: column;
        height: 69mm;
        min-width: 0;
        padding: 6mm 7mm 5.5mm;
        overflow: hidden;
        color: #1e1b3a;
        border-right: 0.3mm dashed #4a4766;
        border-bottom: 0.3mm dashed #4a4766;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-code-card:nth-child(odd) {
        border-left: 0.3mm dashed #4a4766;
    }

    .print-code-card:nth-child(-n + 2) {
        border-top: 0.3mm dashed #4a4766;
    }

    .pc-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 4mm;
    }

    .pc-who {
        min-width: 0;
    }

    .pc-who h3 {
        display: -webkit-box;
        overflow: hidden;
        font: 600 18pt / 1.15 var(--display);
        overflow-wrap: anywhere;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pc-who p {
        margin-top: 0.5mm;
        font: 400 10pt / 1.2 var(--body);
        color: #4a4766;
    }

    .pc-mark svg {
        width: 22.5mm;
        height: 6mm;
    }

    .print-code-card .pc-label {
        margin: auto 0 1.5mm;
        font: 600 11pt / 1.2 var(--display);
    }

    .pc-code {
        display: flex;
        align-items: center;
        gap: 1.2mm;
        margin-bottom: 3mm;
    }

    .pc-box {
        display: grid;
        place-items: center;
        width: 8mm;
        height: 12mm;
        font: 700 20pt / 1 var(--body);
        border: 0.5mm solid #1e1b3a;
        border-bottom-width: 1mm;
    }

    .pc-dash {
        width: 3mm;
        height: 0;
        margin: 0 0.6mm;
        border-top: 0.6mm solid #1e1b3a;
    }

    .print-code-card .pc-where {
        margin-top: auto;
        font: 400 10.5pt / 1.3 var(--body);
    }

    .pc-where b {
        font-weight: 700;
    }
}