/* ========================================
   The Classlings leaderboard (js/classlings-leaderboard.js, js/leaderboard.js, js/undoMatchAsk.js)
   The design the teacher chose (design-directions/directions/mix/leaders.html): Pixel Quest's podium of
   pixel blocks with the top three's Classlings on it, a panel with the whole class (it was a Top 10 until
   the teacher's note of 18 October) with Sort by at its foot, and the tables as bars, in the mix's rounded
   white panels. Results, Points, Badges and History are tabs in a pale track at the top with Showing beside
   them; History lists each Showdown with Places and Undo, and Undo asks in the Cup's own question box. Controls use the shared standard (shared/css/classlings-controls.css):
   tabs 48 px in a pale track, ordinary 56 px buttons, 48 px drop-downs with corners 14. Headings, labels
   and numbers are Fredoka; reading words are Atkinson Hyperlegible (the teacher's decision E, 9 October).
   Moved here from classlings-app.css (its leaderboard section) on 9 October. Every rule is for
   body.classlings-app: classes without Classlings keep app.css's leaderboard.
   ======================================== */

body.classlings-app {
    --lb-read: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
    --lb-silver: #b8c2cc; --lb-silver-deep: #8a96a1; --lb-silver-light: #eef2f5;
    --lb-bronze: #cd7f32; --lb-bronze-deep: #9c5a20; --lb-bronze-light: #f0b27a;
    --lb-tab-h: var(--ctl-tab-h, 48px);
    --lb-field-h: var(--ctl-field-h, 48px);
    --lb-field-r: var(--ctl-field-r, 14px);
    --lb-gap: 24px;
    /* The Top 10's rows and their Classlings; shorter screens make them smaller (the end of this file). */
    --lb-row-h: 48px;
    --lb-face: 44px;
}

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

/* The leaderboard fills the room above the bar and never scrolls as a page on a board or a laptop: the
   panels hold their own lists. Phones stack it and scroll (the end of this file). */
body.classlings-app #leaderboardScreen:not(.hidden) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px var(--cla-gutter) 24px;
    overflow: hidden;
}

body.classlings-app #leaderboardScreen :is(.leaderboard-content, .match-history-content):not(.hidden) {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}

body.classlings-app .lb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Results | Badges | History, and Showing */

body.classlings-app .leaderboard-toolbar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    width: auto;
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Tabs in a pale track (the standard's tabs); what's chosen wears the Cup's purple, as in the bar. */
body.classlings-app :is(.leaderboard-tabs, .lb-seg) {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--cla-wash);
    border: 0;
    border-radius: calc(var(--ctl-r, 20px) + 4px);
    box-shadow: none;
    overflow: visible;
}

body.classlings-app :is(.leaderboard-tabs .tab-btn, .lb-seg button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--lb-tab-h);
    margin: 0;
    padding: 0 20px;
    font: 600 20px / 1 var(--cla-display);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--cla-ink);
    white-space: nowrap;
    background: transparent;
    border: var(--cla-edge) solid transparent;
    border-radius: var(--ctl-r, 20px);
    box-shadow: none;
    cursor: pointer;
    transition: transform 460ms cubic-bezier(0.28, 1.9, 0.5, 1);
}

body.classlings-app .leaderboard-tabs .tab-btn svg {
    display: none;
}

/* app.css makes the tabs' words smaller on phones; here they stay the standard's 20 px. */
body.classlings-app .leaderboard-tabs .tab-btn span {
    font: inherit;
}

body.classlings-app :is(.leaderboard-tabs .tab-btn, .lb-seg button):hover {
    background: var(--cla-page);
}

body.classlings-app :is(.leaderboard-tabs .tab-btn, .lb-seg button):active {
    transform: scale(0.95);
    transition-duration: 70ms;
}

body.classlings-app :is(.leaderboard-tabs .tab-btn.active, .lb-seg button[aria-pressed="true"]) {
    color: var(--cla-ink);
    background: var(--cla-grape);
    border-color: var(--cla-grape-deep);
    box-shadow: none;
}

body.classlings-app :is(.leaderboard-tabs .tab-btn, .lb-seg button):focus-visible {
    outline: var(--ctl-focus, 4px solid var(--cla-ink));
    outline-offset: var(--ctl-focus-gap, 4px);
}

body.classlings-app .period-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.classlings-app .period-selector label {
    display: block;
    font: 600 18px / 1 var(--cla-display);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--cla-ink);
}

/* Showing: the standard drop-down, with the bar's little pixel arrow. */
body.classlings-app .period-selector select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 168px;
    min-height: var(--lb-field-h);
    padding: 0 48px 0 14px;
    font: 400 18px / 1.4 var(--lb-read);
    color: var(--cla-ink);
    background: var(--cla-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8' 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 16px center / 16px 16px no-repeat;
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--lb-field-r);
    box-shadow: none;
    cursor: pointer;
}

body.classlings-app .period-selector select:hover {
    border-color: var(--cla-ink-2);
}

body.classlings-app .period-selector select:focus {
    border-color: var(--cla-ink);
    outline: none;
}

body.classlings-app .period-selector select:focus-visible {
    outline: var(--ctl-focus, 4px solid var(--cla-ink));
    outline-offset: var(--ctl-focus-gap, 4px);
}

/* ---------------------------------------------------------------- Results and Badges */

/* The podium, the Top 10 and the tables side by side, as tall as the room above the bar. */
body.classlings-app .lb {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(340px, 1fr) minmax(0, 1.5fr) minmax(260px, 0.75fr);
    column-gap: var(--lb-gap);
    min-height: 0;
    color: var(--cla-ink);
}

body.classlings-app .lb.no-tables {
    grid-template-columns: minmax(340px, 1fr) minmax(0, 2.25fr);
}

/* Rounded white plates with the design's headings. */
body.classlings-app .lb-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px 16px;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
}

body.classlings-app .lb-panel h2 {
    margin: 0;
    padding: 8px 4px 12px;
    font: 700 28px / 1 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app .lb-word {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The podium: second, first, third; name cards over the Classlings, who stand on pixel blocks (gold,
   silver and bronze, Pixel Quest's stepped ink outline). It grows and shrinks with the room it has. */
body.classlings-app .lb-podium {
    container-type: size;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 var(--cla-px) var(--cla-px);
    list-style: none;
}

body.classlings-app .lb-step {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

body.classlings-app .lb-step.is-first { order: 2; --block: 36cqh; --face: var(--cla-gold); --hi: var(--cla-gold-light); --side: var(--cla-gold-deep); }
body.classlings-app .lb-step.is-second { order: 1; --block: 26cqh; --face: var(--lb-silver); --hi: var(--lb-silver-light); --side: var(--lb-silver-deep); }
body.classlings-app .lb-step.is-third { order: 3; --block: 18cqh; --face: var(--lb-bronze); --hi: var(--lb-bronze-light); --side: var(--lb-bronze-deep); }

body.classlings-app .lb-who {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: min(112px, calc(100% - 8px));
    max-width: calc(100% - 8px);
    margin: 0;
    padding: 8px 12px;
    color: var(--cla-ink);
    text-align: center;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-m);
    box-shadow: none;
    cursor: pointer;
}

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

body.classlings-app .lb-who b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 28px / 1 var(--cla-display);
}

body.classlings-app .lb-who span {
    font: 600 18px / 1 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .lb-stand {
    display: block;
    width: 100%;
    height: min(25cqh, 31cqw);
    margin-top: 4px;
}

body.classlings-app .lb-block {
    display: grid;
    place-items: start center;
    width: 100%;
    height: var(--block);
    padding-top: 12px;
    background: var(--face);
    box-shadow: inset 0 var(--cla-px) 0 var(--hi), inset 0 calc(var(--cla-px) * -3) 0 var(--side), var(--cla-ring);
}

body.classlings-app .lb-block b {
    font: 700 clamp(32px, 10cqh, 64px) / 1 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app :is(.lb-who, .lb-row):focus-visible {
    outline: var(--ctl-focus, 4px solid var(--cla-ink));
    outline-offset: 2px;
}

/* The class: places 4 to the last, one line each and scrolling inside the panel, with Sort by at the foot (within
   reach). A pupil with nothing to rank by yet has no place and is a little quieter. */
body.classlings-app .lb-head {
    flex: none;
}

body.classlings-app :is(.lb-cols, .lb-row) {
    display: grid;
    grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 76px 52px 64px 52px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

body.classlings-app .lb.is-badges :is(.lb-cols, .lb-row) {
    grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 56px 56px 72px;
}

body.classlings-app .lb-cols {
    min-height: 26px;
    font: 600 16px / 1 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-cols span {
    text-align: center;
}

body.classlings-app .lb-cols .lb-col-name {
    text-align: left;
}

body.classlings-app .lb-rows {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

body.classlings-app .lb-row {
    width: 100%;
    height: var(--lb-row-h);
    margin: 0;
    font: 600 20px / 1 var(--cla-display);
    color: var(--cla-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--cla-r-s);
    box-shadow: none;
    cursor: pointer;
}

body.classlings-app .lb-rows > li:nth-child(odd) .lb-row {
    background: var(--cla-wash);
}

body.classlings-app .lb-rows .lb-row:hover {
    background: var(--cla-grape-tint);
}

body.classlings-app .lb-rank {
    font: 700 28px / 1 var(--cla-display);
    text-align: center;
}

body.classlings-app .lb-face {
    display: block;
    width: var(--lb-face);
    height: var(--lb-face);
}

body.classlings-app .lb-name {
    display: grid;
    min-width: 0;
    font: 600 24px / 1.1 var(--cla-display);
}

body.classlings-app .lb-sub {
    display: none;
    font: 400 16px / 1.3 var(--lb-read);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-n {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.classlings-app .lb-big {
    font: 700 28px / 1 var(--cla-display);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.classlings-app .lb-stars {
    display: flex;
    justify-content: center;
    gap: 2px;
}

body.classlings-app .lb-star {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
}

body.classlings-app :is(.lb-stars.s0 .lb-star, .lb-stars.s1 .lb-star:nth-child(n + 2), .lb-stars.s2 .lb-star:nth-child(3)) {
    filter: grayscale(1) opacity(0.3);
}

body.classlings-app .lb-few {
    margin: 8px 8px 0;
    font: 400 18px / 1.45 var(--lb-read);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-sort {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 12px 4px 0;
}

body.classlings-app .lb-sort > span {
    font: 600 18px / 1 var(--cla-display);
}

/* The tables, as bars, most points first. The top table's bar is gold, and it says Top. */
body.classlings-app .lb-tables ol {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    gap: 12px;
    min-height: 0;
    margin: 0;
    padding: 0 4px;
    overflow-y: auto;
    list-style: none;
}

body.classlings-app .lb-tables li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

body.classlings-app .lb-tname {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font: 600 24px / 1.1 var(--cla-display);
}

body.classlings-app .lb-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    font: 600 14px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-gold-tint);
    border: 2px solid var(--cla-gold-deep);
    border-radius: var(--cla-r-s);
}

body.classlings-app .lb-pts {
    font: 700 28px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
}

body.classlings-app .lb-track {
    grid-column: 1 / -1;
    height: 16px;
    overflow: hidden;
    background: var(--cla-wash);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-s);
}

body.classlings-app .lb-track i {
    display: block;
    width: calc(var(--share, 0) * 100%);
    height: 100%;
    background: var(--cla-grape);
    border-right: var(--cla-edge) solid var(--cla-ink);
}

body.classlings-app .lb-tables li.is-none .lb-track i {
    display: none;
}

body.classlings-app .lb-tables li.is-top .lb-track i {
    background: var(--cla-gold);
}

/* The Points tab: Today, This week and the period shown (a bigger number: the one the class is ranked by), and a quiet note
   at the foot instead of Sort by. */
body.classlings-app .lb.is-points :is(.lb-cols, .lb-row, .lb-head) {
    grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 60px 64px 92px;
}

body.classlings-app .lb.is-points.is-two :is(.lb-cols, .lb-row, .lb-head) {
    grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 60px 92px;
}

body.classlings-app .lb-note {
    flex: none;
    margin: auto 0 0;
    padding: 12px 4px 0;
    font: 400 16px / 1.3 var(--lb-read);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-row.is-unplaced :is(.lb-n, .lb-big, .lb-stars) {
    color: var(--cla-ink-2);
}

body.classlings-app .lb-row.is-unplaced .lb-stars {
    opacity: 0.6;
}

/* The Points tab waits for the ledger without a picture, and says so quietly if it can't be reached. */
body.classlings-app .lb-empty.is-waiting h2 {
    font: 600 22px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-empty .lb-retry {
    margin-top: 12px;
}

/* Up to twelve tables: smaller lines, so they still fit. */
body.classlings-app .lb-tables.is-many ol {
    gap: 6px;
}

body.classlings-app .lb-tables.is-many :is(.lb-tname, .lb-pts) {
    font-size: 20px;
}

body.classlings-app .lb-tables.is-many .lb-track {
    height: 12px;
}

/* ---------------------------------------------------------------- History */

body.classlings-app .lb-hist {
    flex: 1;
    padding: 12px;
}

body.classlings-app .lb-matches {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

body.classlings-app .lb-match {
    background: var(--cla-wash);
    border-radius: var(--cla-r-m);
}

body.classlings-app .lb-match-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 8px 12px 2px 16px;
}

body.classlings-app .lb-cupic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
}

body.classlings-app .lb-cup {
    display: block;
    width: 24px;
    height: 24px;
}

body.classlings-app :is(.lb-match-who, .lb-match-when) {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0 0 var(--ctl-lift, 6px);
}

body.classlings-app .lb-match-who b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 24px / 1.1 var(--cla-display);
}

body.classlings-app :is(.lb-match-who span, .lb-match-when span) {
    font: 400 16px / 1.3 var(--lb-read);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-match-when {
    text-align: right;
}

body.classlings-app .lb-match-when b {
    font: 600 20px / 1.1 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .lb-match-acts {
    display: flex;
    gap: 12px;
}

/* Places and Undo: the standard's ordinary buttons (shared/css/classlings-controls.css .cla-btn), with
   app.css's old small square arrow and pink Undo taken away. */
body.classlings-app .lb-match-acts .cla-btn {
    width: auto;
    height: auto;
    margin: 0 0 var(--ctl-lift, 6px);
    padding: 0 20px;
    font: var(--ctl-font, 600 20px / 1.1 'Fredoka', system-ui, sans-serif);
    color: var(--cla-ink);
}

body.classlings-app .lb-match-acts .cla-btn:hover {
    background: var(--cla-wash);
    transform: none;
    box-shadow: 0 var(--ctl-lift, 6px) 0 var(--cla-ink);
}

body.classlings-app .lb-match-acts .cla-btn:active {
    transform: translateY(var(--ctl-lift, 6px));
    box-shadow: 0 0 0 var(--cla-ink);
}

body.classlings-app .lb-ic {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
}

body.classlings-app .lb-ic.is-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.15s;
}

body.classlings-app .match-expand-btn[aria-expanded="true"] .lb-ic.is-arrow {
    transform: rotate(180deg);
}

/* Everyone's places, in columns. */
body.classlings-app .lb-places {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 16px;
    margin: 0;
    padding: 8px 16px 16px 72px;
    list-style: none;
    background: none;
    border: 0;
}

body.classlings-app .lb-places li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    font: 600 18px / 1.2 var(--cla-display);
    border: 0;
}

body.classlings-app .lb-prank {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    font: 700 16px / 1 var(--cla-display);
    background: var(--cla-page);
    border: 2px solid var(--cla-wash-2);
    border-radius: 10px;
}

body.classlings-app .lb-prank.is-first { background: var(--cla-gold); border-color: var(--cla-gold-deep); }
body.classlings-app .lb-prank.is-second { background: var(--lb-silver-light); border-color: var(--lb-silver-deep); }
body.classlings-app .lb-prank.is-third { background: var(--lb-bronze-light); border-color: var(--lb-bronze-deep); }

/* ---------------------------------------------------------------- nothing yet */

/* A Classling and kind words, in the plate the leaderboard would fill. */
body.classlings-app .lb-empty {
    display: grid;
    flex: 1;
    place-content: center;
    justify-items: center;
    gap: 8px;
    min-height: 0;
    padding: 24px;
    color: var(--cla-ink);
    text-align: center;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
}

body.classlings-app .lb-empty canvas {
    display: block;
    width: 128px;
    height: 128px;
}

body.classlings-app .lb-empty h2 {
    margin: 4px 0 0;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .lb-empty p {
    max-width: 34em;
    margin: 0;
    font: 400 18px / 1.45 var(--lb-read);
    color: var(--cla-ink-2);
}

/* ---------------------------------------------------------------- Undo this Showdown? */

/* The Cup's question box (the teacher's decision B): corners 28, a 3 px ink edge and a 6 px ink lift;
   "Not now" on the left, white; the action on the right in danger red. */
body.classlings-app #confirmUndoMatchModal .lb-ask {
    display: grid;
    gap: 8px;
    width: min(440px, calc(100vw - 32px));
    max-width: min(440px, calc(100vw - 32px));
    max-height: none;
    padding: 24px;
    overflow: visible;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--ctl-panel-r, 28px);
    box-shadow: 0 var(--ctl-lift, 6px) 0 var(--cla-ink);
}

body.classlings-app #confirmUndoMatchModal .lb-ask:focus {
    outline: none;
}

body.classlings-app .lb-ask-head {
    display: grid;
    justify-items: start;
    gap: 12px;
}

body.classlings-app .lb-ask-pic {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--ctl-danger-deep, #b8341a);
    background: var(--ctl-danger, #ffe3dc);
    border: 2px solid var(--ctl-danger-deep, #b8341a);
    border-radius: 50%;
}

body.classlings-app .lb-ask h2 {
    margin: 0;
    font: 600 28px / 1.15 var(--cla-display);
    color: var(--cla-ink);
}

body.classlings-app .lb-ask p {
    margin: 0;
    font: 400 18px / 1.45 var(--lb-read);
    color: var(--cla-ink-2);
}

body.classlings-app .lb-ask-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

body.classlings-app .lb-ask-actions .cla-btn {
    flex: 1 1 auto;
}

body.classlings-app .lb-ask-actions .cla-btn:not(.is-danger):hover {
    background: var(--cla-wash);
}

/* ---------------------------------------------------------------- shorter screens: the school laptop */

/* About 1366 x 540 to 600 of page: the Top 10's heading shares its line with the column names, and its
   rows and Classlings are smaller, so all seven places and Sort by fit with nothing cut off. */
@media (max-height: 700px) and (min-width: 901px) {
    body.classlings-app {
        --lb-row-h: 36px;
        --lb-face: 32px;
    }

    body.classlings-app #leaderboardScreen:not(.hidden) {
        padding-top: 12px;
        padding-bottom: 16px;
    }

    body.classlings-app .leaderboard-toolbar {
        margin-bottom: 12px;
    }

    body.classlings-app .lb-panel {
        padding: 8px 12px 12px;
    }

    body.classlings-app .lb-head {
        display: grid;
        grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 76px 52px 64px 52px;
        align-items: center;
        gap: 8px;
        padding: 0 8px;
        min-height: 40px;
    }

    body.classlings-app .lb.is-badges .lb-head {
        grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 56px 56px 72px;
    }

    body.classlings-app .lb.is-points .lb-head {
        grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 60px 64px 92px;
    }

    body.classlings-app .lb.is-points.is-two .lb-head {
        grid-template-columns: 34px var(--lb-face) minmax(0, 1fr) 60px 92px;
    }

    body.classlings-app .lb-head h2 {
        grid-column: 1 / 4;
        padding: 0;
        font-size: 24px;
    }

    body.classlings-app .lb-head .lb-cols {
        display: contents;
    }

    body.classlings-app .lb-head .lb-cols > :nth-child(-n + 3) {
        display: none;
    }

    body.classlings-app .lb-tables h2 {
        padding: 6px 4px 8px;
        font-size: 24px;
    }

    body.classlings-app :is(.lb-rank, .lb-big, .lb-pts) {
        font-size: 24px;
    }

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

    body.classlings-app .lb-row {
        font-size: 18px;
    }

    body.classlings-app .lb-sort {
        padding-top: 8px;
    }

    body.classlings-app .lb-tname {
        font-size: 20px;
    }

    body.classlings-app .lb-tables ol {
        gap: 6px;
    }

    body.classlings-app .lb-tables li {
        gap: 4px 8px;
    }

    body.classlings-app .lb-track {
        height: 12px;
    }

    body.classlings-app .lb-who b {
        font-size: 24px;
    }

    body.classlings-app .lb-who span {
        font-size: 16px;
    }

    body.classlings-app .lb-empty canvas {
        width: 96px;
        height: 96px;
    }
}

/* The shortest laptop pages (about 540 px): a little less room round everything, and smaller rows. */
@media (max-height: 620px) and (min-width: 901px) {
    body.classlings-app {
        --lb-row-h: 32px;
        --lb-face: 28px;
    }

    body.classlings-app #leaderboardScreen:not(.hidden) {
        padding-top: 8px;
        padding-bottom: 12px;
    }

    body.classlings-app .leaderboard-toolbar {
        margin-bottom: 8px;
    }

    body.classlings-app .lb-panel {
        padding: 6px 12px 10px;
    }

    body.classlings-app .lb-head {
        min-height: 32px;
    }

    body.classlings-app :is(.lb-head h2, .lb-tables h2) {
        font-size: 22px;
    }

    body.classlings-app .lb-tables h2 {
        padding: 4px 4px 6px;
    }

    body.classlings-app .lb-row {
        font-size: 17px;
    }

    body.classlings-app .lb-name {
        font-size: 18px;
    }

    body.classlings-app :is(.lb-rank, .lb-big, .lb-pts) {
        font-size: 22px;
    }

    body.classlings-app .lb-sort {
        padding-top: 6px;
    }
}

/* ---------------------------------------------------------------- big screens */

/* 1920 x 1080 and up: the Top 10's rows and Classlings grow into the room. */
@media (min-height: 900px) and (min-width: 1500px) {
    body.classlings-app {
        --lb-row-h: 72px;
        --lb-face: 60px;
    }

    body.classlings-app .lb-row {
        font-size: 22px;
    }

    body.classlings-app .lb-name {
        font-size: 28px;
    }

    body.classlings-app :is(.lb-rank, .lb-big) {
        font-size: 32px;
    }
}

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

/* Smaller boards and laptops (up to 1300 px wide): the side columns give a little, and each Top 10 row
   puts its podiums and level under the name, so names stay whole. */
@media (max-width: 1300px) and (min-width: 901px) {
    body.classlings-app {
        --lb-gap: 16px;
    }

    body.classlings-app .lb {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.6fr) minmax(220px, 0.7fr);
    }

    body.classlings-app .lb.no-tables {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 2.3fr);
    }

    body.classlings-app :is(.lb-cols, .lb-row, .lb-head) {
        column-gap: 6px;
        grid-template-columns: 30px var(--lb-face) minmax(0, 1fr) 64px 52px;
    }

    body.classlings-app .lb.is-badges :is(.lb-cols, .lb-row, .lb-head) {
        grid-template-columns: 30px var(--lb-face) minmax(0, 1fr) 64px;
    }

    body.classlings-app .lb.is-points :is(.lb-cols, .lb-row, .lb-head),
    body.classlings-app .lb.is-points.is-two :is(.lb-cols, .lb-row, .lb-head) {
        grid-template-columns: 30px var(--lb-face) minmax(0, 1fr) 92px;
    }

    body.classlings-app .lb.is-points .lb-cols > span:last-child {
        display: block;
    }

    body.classlings-app :is(.lb-row .lb-n, .lb-cols > span:nth-child(4), .lb-cols > span:nth-child(5)) {
        display: none;
    }

    body.classlings-app .lb.is-badges .lb-cols > span:nth-child(6) {
        display: block;
    }

    body.classlings-app .lb-sub {
        display: block;
    }

    body.classlings-app .lb-row {
        height: auto;
        min-height: var(--lb-row-h);
    }

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

    body.classlings-app .lb-who {
        min-width: 0;
        padding: 6px 8px;
    }

    body.classlings-app .lb-who b {
        font-size: 22px;
    }

    body.classlings-app .lb-who span {
        font-size: 15px;
    }
}

/* Tablets standing up and phones: one column that scrolls, the podium first. Each row shows its place,
   Classling, name (with podiums and level under it) and the number it's sorted by. */
@media (max-width: 900px) {
    body.classlings-app #leaderboardScreen:not(.hidden) {
        padding: 12px 16px 24px;
        overflow-y: auto;
    }

    body.classlings-app #leaderboardScreen :is(.leaderboard-content, .match-history-content):not(.hidden) {
        flex: none;
    }

    body.classlings-app .lb {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: 16px;
    }

    body.classlings-app .lb-podium {
        flex: none;
        height: 340px;
    }

    body.classlings-app .lb-stand {
        height: min(28cqh, 31cqw);
    }

    body.classlings-app .lb-panel,
    body.classlings-app .lb-empty {
        flex: none;
    }

    body.classlings-app .lb-empty {
        min-height: 320px;
    }

    body.classlings-app :is(.lb-rows, .lb-matches, .lb-tables ol) {
        overflow: visible;
    }

    body.classlings-app .lb-tables li + li {
        margin-top: 4px;
    }

    body.classlings-app :is(.lb-cols, .lb-row, .lb.is-badges .lb-cols, .lb.is-badges .lb-row) {
        grid-template-columns: 30px var(--lb-face) minmax(0, 1fr) 52px;
    }

    body.classlings-app .lb.is-points :is(.lb-cols, .lb-row, .lb-head),
    body.classlings-app .lb.is-points.is-two :is(.lb-cols, .lb-row, .lb-head) {
        grid-template-columns: 30px var(--lb-face) minmax(0, 1fr) 84px;
    }

    body.classlings-app .lb-row {
        height: auto;
        min-height: 56px;
        padding-block: 6px;
    }

    body.classlings-app :is(.lb-row .lb-n, .lb-row .lb-stars, .lb-cols > span:nth-child(n + 4):not(:last-child)) {
        display: none;
    }

    body.classlings-app .lb-sub {
        display: block;
    }

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

    body.classlings-app .lb-sort {
        margin-top: 12px;
    }

    body.classlings-app .lb-match-head {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 4px 12px;
        padding: 8px 12px 2px;
    }

    body.classlings-app .lb-match-acts {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    body.classlings-app .lb-match-acts .cla-btn {
        flex: 1 1 auto;
    }

    body.classlings-app .lb-places {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        padding: 4px 12px 16px;
    }
}

@media (max-width: 480px) {
    body.classlings-app .leaderboard-toolbar {
        gap: 12px;
    }

    body.classlings-app .leaderboard-tabs {
        display: flex;
        width: 100%;
    }

    body.classlings-app .leaderboard-tabs .tab-btn {
        flex: 1 1 0;
        padding: 0 8px;
    }

    body.classlings-app .period-selector {
        width: 100%;
    }

    body.classlings-app .period-selector select {
        flex: 1;
    }

    body.classlings-app .lb-seg {
        display: flex;
        width: 100%;
    }

    body.classlings-app .lb-seg button {
        flex: 1 1 0;
        padding: 0 8px;
    }

    body.classlings-app .lb-who b {
        font-size: 22px;
    }

    body.classlings-app .lb-who span {
        font-size: 15px;
    }

    body.classlings-app .lb-who {
        padding: 6px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.classlings-app :is(.leaderboard-tabs .tab-btn, .lb-seg button, .lb-ic.is-arrow) {
        transition: none;
    }
}