/* ========================================
   Classlings points board (js/classlings-board.js)
   ======================================== */
/* Only for classes with Classlings on: each card shows the pupil's Classling on the colour of their
   points (--cl-sky, edged in --cl-edge) with their name and points, and turns over for a big minus
   and plus. Everything is under #todayScreen #pupilsGrid.classlings-board so it outranks today's card
   and compact-fit rules, and nothing here reaches today's board. */

#todayScreen #pupilsGrid.classlings-board {
    grid-template-columns: repeat(var(--cl-cols, 5), minmax(0, 1fr));
    grid-auto-rows: var(--cl-card-h, 96px);
    gap: 8px;
    align-content: start;
}

/* The board always fits the screen, so a small class that fits at its natural size stays at the top... */
#todayScreen #pupilsGrid.classlings-board.compact-fit-grid {
    align-content: start;
}

/* The board takes all the height the screen leaves it. (Today's board stops at 630px on a screen 1400px
   wide or more, which left the bottom of a 1920 x 1080 board empty under a class of thirty.) */
#todayScreen #pupilsGrid.classlings-board.compact-fit-grid {
    height: 100%;
}

/* ...and cards sized to the screen (js/classlings-board.js: a full class, or a smaller one that had to
   shrink) sit in the middle of it. */
#todayScreen #pupilsGrid.classlings-board.compact-fit-grid.cl-fill {
    align-content: center;
}

/* On a phone the class doesn't fit on one screen, so it scrolls in two columns. */
#todayScreen #pupilsGrid.classlings-board.cl-scroll {
    height: auto;
    align-content: start;
}

.compact-mode #todayScreen:has(#pupilsGrid.classlings-board.cl-scroll) {
    overflow: auto;
}

/* The set-up's last screen (js/classlings-setup.js) shows the class's cards as these, in a grid of its own: it
   takes this rule and the name's, the two that give a card its look. */
:is(#todayScreen #pupilsGrid.classlings-board, #cupSetup .su-board) .cl-card {
    box-sizing: border-box;
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: var(--paper-card);
    border: 2px solid var(--paper-outline);
    border-radius: 12px;
    box-shadow: inset 0 0 0 3px var(--cl-edge, transparent), 2px 2px 0 var(--paper-shadow);
    overflow: visible;
}

#todayScreen #pupilsGrid.classlings-board .cl-card.excluded {
    background: #f5f5f5 !important;
    box-shadow: 2px 2px 0 var(--paper-shadow);
}

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

.cl-turn {
    height: 100%;
}

/* The front: the Classling's square, then the name and points. */
.cl-front {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* A fixed row, so the Classling's canvas is a square as tall as the card whatever its buffer. */
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.cl-front:focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

.cl-face {
    display: block;
    width: auto;
    height: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    contain: size;
    border-right: 2px solid var(--paper-outline);
    border-radius: 10px 0 0 10px;
    background: var(--cl-sky, #fcebb0);
    image-rendering: pixelated;
}

.cl-info {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 6px;
    /* Cards are as tall as the screen allows, and the face is as wide as the card is tall, so on a wide
       row of cards the name and points have a narrow panel: their size follows its width too. */
    container-type: inline-size;
}

/* The first name (js/classlings-board.js), big: as big as the card allows (and no more than a third of a
   narrow panel's width, so the names on a small screen stay much the same size), and smaller only where a
   long name (--cl-text-w, its width in ems) would not fit the panel on one line. A name too long even at
   the smallest size wraps onto a second line rather than being cut short. */
:is(#todayScreen #pupilsGrid.classlings-board, #cupSetup .su-board) .cl-card .pupil-card-name {
    max-width: 100%;
    margin: 0;
    font: 700 clamp(10px, min(calc(var(--cl-card-h, 96px) * 0.26), 36cqw, calc(100cqw / var(--cl-text-w, 5))), 30px) / 1.1 'Fredoka', var(--font-family);
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.cl-points {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 700 clamp(16px, min(calc(var(--cl-card-h, 96px) * 0.3), 38cqw), 34px) / 1 'Fredoka', var(--font-family);
    font-variant-numeric: tabular-nums;
    color: var(--paper-outline);
}

.cl-heart {
    width: 0.72em;
    height: auto;
    color: #ef4444;
}

/* The back: a big minus and plus, each half the card, with the pupil's points in a cutout between
   them that shows the colour of their points, like a hole through to the front. */
.cl-turn:not(.is-back) .cl-back,
.cl-turn.is-back .cl-front {
    display: none;
}

.cl-back {
    --cl-cut: min(calc(var(--cl-card-h, 96px) * 0.66), 80px);
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
    overflow: hidden;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    font: 700 clamp(30px, calc(var(--cl-card-h, 96px) * 0.52), 60px) / 1 'Fredoka', var(--font-family);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    /* Compact mode grows these buttons on hover (app.css); on the card back neither half may grow
       into the other, so only the colour changes. */
    transform: none;
    transition: background-color 0.15s;
}

/* The line between minus and plus belongs to the card, not to either half, so it stays put whichever
   half is pointed at or pressed. It sits above both halves and under the cutout. */
.cl-back::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--paper-outline);
    pointer-events: none;
    z-index: 1;
}

/* Each symbol sits in the middle of what its half shows beside the cutout. */
#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.remove {
    padding-right: calc(var(--cl-cut) / 2);
    background: #ffe2dc;
    color: #b32139;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.add {
    padding-left: calc(var(--cl-cut) / 2);
    background: #dcf4dd;
    color: #15803d;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline > span {
    display: block;
}

/* The minus and plus are drawn (classlings-board.js), with round ends like the look's other plain
   controls, and as big and heavy as the old Fredoka signs: 0.86em across, strokes 3.6 of 24. */
#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline .cl-sign {
    display: block;
    width: 0.86em;
    height: 0.86em;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.6;
    stroke-linecap: round;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.remove:hover:not(:disabled) {
    background: #ffd4cb;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.add:hover:not(:disabled) {
    background: #cbeecd;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.remove:active:not(:disabled) {
    background: #ffc3b6;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.add:active:not(:disabled) {
    background: #b9e6bc;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline:active:not(:disabled) > span {
    transform: translateY(0.05em);
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline:focus-visible {
    outline: 4px solid var(--ctl-ink);
    outline-offset: -6px;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline:disabled {
    cursor: not-allowed;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline:disabled > span {
    opacity: 0.3;
}

.cl-cutout {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--cl-cut);
    height: var(--cl-cut);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    background: var(--cl-sky, #fcebb0);
    border: 3px solid var(--paper-outline);
    border-radius: 50%;
    box-shadow: inset 0 4px 0 rgba(45, 52, 54, 0.16), 0 0 0 4px var(--paper-card);
    color: var(--paper-outline);
    font: 700 clamp(17px, calc(var(--cl-cut) * 0.36), 30px) / 1 'Fredoka', var(--font-family);
    font-variant-numeric: tabular-nums;
    cursor: default;
    z-index: 2;
}

/* The circle and the paper ring round it are a gap between minus and plus, so a point only comes
   from the buttons either side: a tap there lands here and does nothing (the card stays over). The
   ring is a shadow outside the box, so this reaches 7px past the padding: the 3px border and the
   4px ring. */
.cl-cutout::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
}

.cl-cutout .cl-heart {
    width: 0.62em;
}

/* A class that only gives points: the whole back is one big plus, with the pupil's points in their
   cutout at its left, so there's nothing to take a point away with (the teacher's notes of 3 October). */
.cl-back.is-give-only {
    grid-template-columns: 1fr;
}

.cl-back.is-give-only::after {
    display: none;
}

#todayScreen #pupilsGrid.classlings-board .cl-back.is-give-only .hp-btn-inline.add {
    padding-left: calc(var(--cl-cut) + 16px);
}

.cl-back.is-give-only .cl-cutout {
    left: calc(var(--cl-cut) / 2 + 16px);
}

/* The away button belongs to the front: the back is all minus and plus. */
#todayScreen #pupilsGrid.classlings-board .cl-card:has(.cl-turn.is-back) .exclude-btn {
    display: none;
}

/* A point: the card's own +1 or −1 rises and fades in about a second, in the bar's last-point colours
   (lime for plus, red for minus, with ink words) on a paper ring. Face up, it rises from the pupil's
   points; turned over, from the plus or minus that was pressed. It stays inside the card, so a
   neighbour or the board's edge never cuts it off. The card itself stays still; the Classling's hop or
   flinch and the bar's "+1 Kaia" are the rest of the moment. No window, no confetti (hp.js). */
#todayScreen #pupilsGrid.classlings-board .cl-card:is(.hp-added, .hp-removed) {
    animation: none;
}

#todayScreen #pupilsGrid.classlings-board .cl-card:is(.hp-added, .hp-removed)::before {
    display: none;
}

#todayScreen #pupilsGrid.classlings-board .cl-card:is(.hp-added, .hp-removed)::after {
    content: '+1';
    position: absolute;
    top: 52%;
    /* The middle of the name and points, beside the Classling's square (as wide as the card is tall). */
    left: calc(50% + var(--cl-card-h, 96px) / 2);
    z-index: 25;
    min-width: 44px;
    padding: 5px 10px;
    font: 700 18px / 1 'Fredoka', var(--font-family);
    font-variant-numeric: tabular-nums;
    color: var(--cla-ink, #1e1b3a);
    text-align: center;
    background: var(--cla-lime, #7ed957);
    border: 2px solid var(--cla-lime-deep, #3e9a2a);
    border-radius: 14px;
    box-shadow: 0 0 0 3px var(--paper-card, #fffefb);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: cl-point-rise 1s ease-out forwards;
}

#todayScreen #pupilsGrid.classlings-board .cl-card.hp-removed::after {
    content: '\2212 1';
    background: var(--cla-minus, #ffe2dc);
    border-color: var(--cla-minus-deep, #d9604f);
}

/* Turned over: above the middle of the plus or the minus, beside the cutout (.cl-back's --cl-cut). */
#todayScreen #pupilsGrid.classlings-board .cl-card.hp-added:has(.cl-turn.is-back)::after {
    left: calc(75% + min(var(--cl-card-h, 96px) * 0.66, 80px) / 4);
}

#todayScreen #pupilsGrid.classlings-board .cl-card.hp-removed:has(.cl-turn.is-back)::after {
    left: calc(25% - min(var(--cl-card-h, 96px) * 0.66, 80px) / 4);
}

/* With only a plus, above the middle of the plus. */
#todayScreen #pupilsGrid.classlings-board .cl-card.hp-added:has(.cl-turn.is-back .cl-back.is-give-only)::after {
    left: calc(50% + (min(var(--cl-card-h, 96px) * 0.66, 80px) + 16px) / 2);
}

@keyframes cl-point-rise {
    0% {
        top: 62%;
        opacity: 0;
    }

    18% {
        top: 52%;
        opacity: 1;
    }

    70% {
        top: 30%;
        opacity: 1;
    }

    100% {
        top: 22%;
        opacity: 0;
    }
}

/* With less motion asked for, it shows where it starts and fades. */
@media (prefers-reduced-motion: reduce) {
    #todayScreen #pupilsGrid.classlings-board .cl-card:is(.hp-added, .hp-removed)::after {
        animation: cl-point-fade 1s ease-out forwards;
    }
}

@keyframes cl-point-fade {
    0%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ---------------------------------------------------------------- no one matches the search */

/* A card in the middle of the board: the look's pixel magnifier, what was searched for, a hint, and
   Clear search (js/hp.js). */
body.classlings-app #todayScreen #pupilsGrid.classlings-board:has(> .cl-search-none) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    place-content: center;
    min-height: 100%;
}

body.classlings-app .cl-search-none {
    display: grid;
    justify-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: min(440px, 100%);
    margin: 0 auto;
    padding: 28px 24px 24px;
    text-align: center;
    color: var(--cla-ink);
    background: var(--cla-card);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: var(--cla-float);
}

body.classlings-app .cl-search-none-pic {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: 4px;
    background: var(--cla-grape-tint);
    border-radius: var(--cla-r-m);
}

body.classlings-app .cl-search-none-pic svg {
    width: 48px;
    height: 48px;
    color: var(--cla-grape-deep);
}

body.classlings-app .cl-search-none-title {
    margin: 0;
    overflow-wrap: anywhere;
    font: 700 26px / 1.15 var(--cla-display);
}

body.classlings-app .cl-search-none-hint {
    margin: 0 0 8px;
    font: 400 17px / 1.4 var(--cla-ui);
    color: var(--cla-ink-2);
}

body.classlings-app .cl-search-none-clear {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    margin-bottom: 6px;
    padding: 0 22px;
    font: 600 20px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-m);
    box-shadow: 0 6px 0 var(--cla-ink);
    cursor: pointer;
}

body.classlings-app .cl-search-none-clear:hover {
    background: var(--cla-wash);
}

body.classlings-app .cl-search-none-clear:active {
    transform: translateY(6px);
    box-shadow: none;
}

body.classlings-app .cl-search-none-clear:focus-visible {
    outline: var(--ctl-focus);
    outline-offset: var(--ctl-focus-gap);
}

body.classlings-app .cl-search-none-clear svg {
    width: 18px;
    height: 18px;
}