/* ========================================
   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;
}

#todayScreen #pupilsGrid.classlings-board.compact-fit-grid {
    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;
}

#todayScreen #pupilsGrid.classlings-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,
.cl-look:focus-visible,
#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline:focus-visible {
    outline: 3px solid #4d9de0;
    outline-offset: 2px;
}

.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;
}

/* Names wrap onto a second line rather than being cut short. */
#todayScreen #pupilsGrid.classlings-board .cl-card .pupil-card-name {
    max-width: 100%;
    margin: 0;
    font: 600 clamp(12px, calc(var(--cl-card-h, 96px) * 0.15), 17px) / 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(18px, calc(var(--cl-card-h, 96px) * 0.3), 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: the first name and points, then a big minus and plus. */
.cl-turn:not(.is-back) .cl-back,
.cl-turn.is-back .cl-front {
    display: none;
}

.cl-back {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 3px;
    padding: 3px 7px 7px;
    position: relative;
}

.cl-back-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    font: 600 clamp(12px, calc(var(--cl-card-h, 96px) * 0.15), 16px) / 1.15 'Fredoka', var(--font-family);
}

.cl-back-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-back .cl-points {
    font-size: inherit;
}

.cl-look {
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--paper-outline);
    font: 700 14px / 1 var(--font-family);
    letter-spacing: 1px;
    cursor: pointer;
}

.cl-back-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    min-height: 0;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    font: 700 clamp(22px, calc(var(--cl-card-h, 96px) * 0.4), 44px) / 1 'Fredoka', var(--font-family);
    border: 2px solid var(--paper-outline);
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--paper-outline);
    cursor: pointer;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.remove {
    background: #ffe2dc;
    color: #b32139;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline.add {
    background: #dcf4dd;
    color: #15803d;
}

#todayScreen #pupilsGrid.classlings-board .cl-back .hp-btn-inline:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--paper-outline);
}

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