/*
 * Race Leaderboard Website Module (static CSS)
 *
 * IMPORTANT:
 * - This file is served as a module static asset and is referenced by `~/Module.css`.
 * - Keep all rules scoped under `.scm-mod-RaceLeaderboard`.
 * - The actual leaderboard component styling is in RaceLeaderboardDisplay.razor.css
 */

/* ???????????????????????????????????????????????????????????????????????????
   RACE LEADERBOARD MODULE - WEBSITE DISPLAY
   ???????????????????????????????????????????????????????????????????????????
   
   A responsive F1-style race leaderboard display for website pages.
    Respects page layout (unlike PublicDisplays which are fullscreen).
    Theme-adaptive — uses --scm-* bridges with light fallbacks.
   
   ??????????????????????????????????????????????????????????????????????????? */

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 1: DESIGN TOKENS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard {
    /* ?????????????????????????????????????????????????????????????????????????
       Color System - Theme-adaptive with red accent (F1 style)
       ????????????????????????????????????????????????????????????????????????? */

    /* The tint and shade of the accent are in oklab: oklch interpolates hue around the wheel, so on a chromatic dark
       ground (#1a1a2e) the tint drifted toward the ground's violet. Mixes of two neutrals stay in oklch. */

    /* Primary accent (racing red) */
    --lb-primary: var(--scm-accent, #e10600);
    --lb-primary-hover: color-mix(in oklab, var(--lb-primary) 85%, black 15%);
    --lb-primary-soft: color-mix(in oklab, var(--lb-primary) 12%, var(--lb-bg) 88%);

    /* Surface colors */
    --lb-bg: var(--scm-surface, #ffffff);
    --lb-surface: color-mix(in oklch, var(--lb-bg) 96%, var(--lb-text) 4%);
    --lb-bg-elevated: color-mix(in oklch, var(--lb-bg) 97%, black 3%);
    --lb-bg-muted: color-mix(in oklch, var(--lb-bg) 96%, var(--lb-text) 4%);

    /* Overlay / subtle backgrounds for sections */
    --lb-overlay: rgba(0, 0, 0, 0.03);
    --lb-hover: rgba(0, 0, 0, 0.04);
    --lb-subtle: rgba(0, 0, 0, 0.06);

    /* Text colors */
    --lb-text: var(--scm-surface-contrast, #0f172a);
    --lb-text-muted: color-mix(in oklch, var(--lb-text) 55%, var(--lb-bg) 45%);

    /* Border colors */
    --lb-border: var(--scm-border, #e2e8f0);

    /* Semantic colors */
    --lb-leader-bg: rgba(255, 215, 0, 0.12);
    --lb-session-best: #a855f7;
    --lb-personal-best: #16a34a;
    --lb-pos-gain: #16a34a;
    --lb-pos-lost: #ef4444;

    /* Podium / medal colors */
    --lb-gold: #ffd700;
    --lb-gold-end: #ffec8b;
    --lb-silver: #c0c0c0;
    --lb-silver-end: #e8e8e8;
    --lb-bronze: #cd7f32;
    --lb-bronze-end: #daa06d;
    --lb-medal-text: #000;

    /* Flag indicator colors */
    --lb-flag-yellow: #fbbf24;
    --lb-flag-yellow-text: #000;
    --lb-flag-red: #dc2626;
    --lb-flag-safety: #f97316;
    --lb-flag-text: #fff;

    /* ?????????????????????????????????????????????????????????????????????????
       Typography
       ????????????????????????????????????????????????????????????????????????? */

    --lb-font: inherit;
    --lb-font-mono: 'Roboto Mono', 'Consolas', monospace;

    /* Scaling factor - adjusts for different screen sizes.
       Must stay a unitless number: every gap/padding uses calc(Npx * var(--lb-scale)),
       so a typed/invalid value (e.g. mixing a number with vw) collapses all spacing to 0.
       Size variants (.scm-mod-compact/.scm-mod-large) override this below. */
    --lb-scale: 1;

    /* ?????????????????????????????????????????????????????????????????????????
       Shadows
       ????????????????????????????????????????????????????????????????????????? */

    --lb-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* The space the board takes, kept before it draws (wave 11).
   The board draws once the page's live connection is up: it is not prerendered, so until then its
   module's row is empty and everything under it (the footer) sat 400px higher, then jumped down
   (layout shift 0.20 on a desktop, 0.33 on a slow phone). This sheet is linked only on a page that
   holds the board, so an empty module row here is the board waiting: it keeps the board's least
   height. A row that stays empty (a module with nothing to show) gives the space back after 8s. */
section[id^="module-"] > .container > .row:empty {
    min-height: 400px;
    animation: scm-lb-wait 0s linear 8s forwards;
}

@keyframes scm-lb-wait {
    to { min-height: 0; }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 2: MODULE WRAPPER
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard {
    /* Never re-export --scm-* from the --lb-* tokens here (--scm-accent: var(--lb-primary)). This is the same
       element that reads --lb-primary: var(--scm-accent, ...), so the pair is a cycle: CSS makes both invalid at
       computed-value time instead of taking the fallback. On the Auto look that left the accent at the child's
       literal fallback and unset every derived tier (soft, hover, surface, muted). The bridge's --scm-* already
       reach child components by inheritance, and a custom theme writes them inline on this element. */

    /* Container sizing - fills parent, minimum height for usability */
    width: 100%;
    min-height: 400px;
    
    /* Visual styling */
    font-family: var(--lb-font);
    background: var(--lb-bg);
    color: var(--lb-text);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--lb-shadow);
    
    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 3: LOADING STATE
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .scm-mod-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    min-height: 300px;
}

.scm-mod-RaceLeaderboard .scm-mod-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--lb-border);
    border-top-color: var(--lb-primary);
    border-radius: 50%;
    animation: lb-spin 1s linear infinite;
}

@keyframes lb-spin {
    to { transform: rotate(360deg); }
}

.scm-mod-RaceLeaderboard .scm-mod-loading p {
    margin: 0;
    color: var(--lb-text-muted);
    font-size: 0.9rem;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 4: RACE LEADERBOARD DISPLAY COMPONENT
   ??????????????????????????????????????????????????????????????????????????? */

/* Ensure the RaceLeaderboardDisplay component fills the container */
.scm-mod-RaceLeaderboard .race-leaderboard {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: inherit;

    /* Pass through CSS variables. Two entries here used to read var() of THEMSELVES
       (--lb-surface: var(--lb-surface)), which is a cycle: CSS makes a self-referencing
       custom property invalid at computed-value time rather than falling back, so those
       two tiers were unset on this element and every rule using them silently dropped.
       Removed rather than re-pointed -- the root block above already defines them and
       they inherit. */
    --lb-bg: var(--scm-surface, #ffffff);
    --lb-text: var(--scm-surface-contrast, #0f172a);
    --lb-primary: var(--scm-accent, #e10600);
    --lb-border: var(--scm-border, #e2e8f0);
}

/* ???????????????????????????????????????????????????????????????????????????
   Header
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(16px * var(--lb-scale, 1)) calc(20px * var(--lb-scale, 1));
    background: var(--lb-surface);
    border-bottom: 2px solid var(--lb-primary);
    flex-shrink: 0;
}

.scm-mod-RaceLeaderboard .session-info {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--lb-scale, 1));
}

.scm-mod-RaceLeaderboard .session-name {
    font-size: clamp(1.2rem, calc(1.5rem * var(--lb-scale, 1)), 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-mod-RaceLeaderboard .lap-counter,
.scm-mod-RaceLeaderboard .time-remaining {
    font-size: clamp(1rem, calc(1.25rem * var(--lb-scale, 1)), 2rem);
    font-weight: 600;
    padding: calc(4px * var(--lb-scale, 1)) calc(12px * var(--lb-scale, 1));
    background: var(--lb-subtle);
    border-radius: 4px;
}

.scm-mod-RaceLeaderboard .session-status {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--lb-scale, 1));
}

.scm-mod-RaceLeaderboard .track-name {
    font-size: clamp(0.75rem, calc(0.9rem * var(--lb-scale, 1)), 1.3rem);
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ???????????????????????????????????????????????????????????????????????????
   Flag Indicators
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .flag-indicator {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--lb-scale, 1));
    padding: calc(6px * var(--lb-scale, 1)) calc(12px * var(--lb-scale, 1));
    border-radius: 4px;
    font-weight: 600;
    font-size: clamp(0.75rem, calc(0.9rem * var(--lb-scale, 1)), 1.3rem);
    text-transform: uppercase;
    animation: lb-flag-pulse 1s ease-in-out infinite;
}

.scm-mod-RaceLeaderboard .flag-indicator.flag-yellow { background: var(--lb-flag-yellow); color: var(--lb-flag-yellow-text); }
.scm-mod-RaceLeaderboard .flag-indicator.flag-red { background: var(--lb-flag-red); color: var(--lb-flag-text); }
.scm-mod-RaceLeaderboard .flag-indicator.flag-safety,
.scm-mod-RaceLeaderboard .flag-indicator.flag-vsc { background: var(--lb-flag-safety); color: var(--lb-flag-text); }

@keyframes lb-flag-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ???????????????????????????????????????????????????????????????????????????
   Column Headers
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .leaderboard-columns {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(80px, 100px) minmax(80px, 100px) minmax(80px, 100px) minmax(50px, 60px);
    padding: calc(10px * var(--lb-scale, 1)) calc(20px * var(--lb-scale, 1));
    background: var(--lb-overlay);
    font-size: clamp(0.65rem, calc(0.75rem * var(--lb-scale, 1)), 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lb-text-muted);
    border-bottom: 1px solid var(--lb-border);
    flex-shrink: 0;
}

.scm-mod-RaceLeaderboard .leaderboard-columns > div {
    padding: 0 calc(4px * var(--lb-scale, 1));
}

.scm-mod-RaceLeaderboard .col-pos { text-align: center; }
.scm-mod-RaceLeaderboard .col-gap,
.scm-mod-RaceLeaderboard .col-time,
.scm-mod-RaceLeaderboard .col-pits { text-align: right; }

/* ???????????????????????????????????????????????????????????????????????????
   Entries Container
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .leaderboard-entries {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.scm-mod-RaceLeaderboard .leaderboard-entries::-webkit-scrollbar {
    width: 4px;
}

.scm-mod-RaceLeaderboard .leaderboard-entries::-webkit-scrollbar-track {
    background: transparent;
}

.scm-mod-RaceLeaderboard .leaderboard-entries::-webkit-scrollbar-thumb {
    background: var(--lb-border);
    border-radius: 2px;
}

/* ???????????????????????????????????????????????????????????????????????????
   Leaderboard Row
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .leaderboard-row {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(80px, 100px) minmax(80px, 100px) minmax(80px, 100px) minmax(50px, 60px);
    padding: calc(12px * var(--lb-scale, 1)) calc(20px * var(--lb-scale, 1));
    border-bottom: 1px solid var(--lb-border);
    transition: background 0.3s ease;
    align-items: center;
}

.scm-mod-RaceLeaderboard .leaderboard-row:hover {
    background: var(--lb-hover);
}

.scm-mod-RaceLeaderboard .leaderboard-row.leader {
    background: var(--lb-leader-bg);
    border-left: 3px solid var(--lb-gold);
}

.scm-mod-RaceLeaderboard .leaderboard-row.podium {
    border-left: 3px solid transparent;
}

.scm-mod-RaceLeaderboard .leaderboard-row.podium:nth-child(2) {
    border-left-color: var(--lb-silver);
}

.scm-mod-RaceLeaderboard .leaderboard-row.podium:nth-child(3) {
    border-left-color: var(--lb-bronze);
}

.scm-mod-RaceLeaderboard .leaderboard-row.in-pits {
    opacity: 0.7;
}

.scm-mod-RaceLeaderboard .leaderboard-row.out {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ???????????????????????????????????????????????????????????????????????????
   Position Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .col-pos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--lb-scale, 1));
}

.scm-mod-RaceLeaderboard .position-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, calc(32px * var(--lb-scale, 1)), 48px);
    height: clamp(28px, calc(32px * var(--lb-scale, 1)), 48px);
    font-size: clamp(0.9rem, calc(1.1rem * var(--lb-scale, 1)), 1.6rem);
    font-weight: 700;
    border-radius: 4px;
    background: var(--lb-subtle);
}

.scm-mod-RaceLeaderboard .position-number.p1 {
    background: linear-gradient(135deg, var(--lb-gold), var(--lb-gold-end));
    color: var(--lb-medal-text);
}

.scm-mod-RaceLeaderboard .position-number.p2 {
    background: linear-gradient(135deg, var(--lb-silver), var(--lb-silver-end));
    color: var(--lb-medal-text);
}

.scm-mod-RaceLeaderboard .position-number.p3 {
    background: linear-gradient(135deg, var(--lb-bronze), var(--lb-bronze-end));
    color: var(--lb-medal-text);
}

.scm-mod-RaceLeaderboard .position-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: clamp(0.6rem, calc(0.7rem * var(--lb-scale, 1)), 1rem);
    font-weight: 600;
}

.scm-mod-RaceLeaderboard .position-change.gained { color: var(--lb-pos-gain); }
.scm-mod-RaceLeaderboard .position-change.lost { color: var(--lb-pos-lost); }

/* ???????????????????????????????????????????????????????????????????????????
   Driver Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .col-driver {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--lb-scale, 1));
    padding: 0 calc(8px * var(--lb-scale, 1));
    overflow: hidden;
}

.scm-mod-RaceLeaderboard .car-number {
    font-size: clamp(0.7rem, calc(0.8rem * var(--lb-scale, 1)), 1.1rem);
    font-weight: 600;
    padding: calc(2px * var(--lb-scale, 1)) calc(6px * var(--lb-scale, 1));
    background: var(--lb-subtle);
    border-radius: 3px;
    min-width: clamp(28px, calc(32px * var(--lb-scale, 1)), 48px);
    text-align: center;
}

.scm-mod-RaceLeaderboard .driver-name {
    font-weight: 600;
    font-size: clamp(0.85rem, calc(1rem * var(--lb-scale, 1)), 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scm-mod-RaceLeaderboard .team-name {
    font-size: clamp(0.65rem, calc(0.75rem * var(--lb-scale, 1)), 1rem);
    color: var(--lb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ???????????????????????????????????????????????????????????????????????????
   Timing Columns
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .col-gap,
.scm-mod-RaceLeaderboard .col-time {
    text-align: right;
    padding: 0 calc(8px * var(--lb-scale, 1));
    font-family: var(--lb-font-mono);
    font-size: clamp(0.8rem, calc(0.95rem * var(--lb-scale, 1)), 1.4rem);
}

.scm-mod-RaceLeaderboard .col-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(4px * var(--lb-scale, 1));
}

.scm-mod-RaceLeaderboard .col-time.session-best {
    color: var(--lb-session-best);
    font-weight: 700;
}

.scm-mod-RaceLeaderboard .col-time.personal-best {
    color: var(--lb-personal-best);
    font-weight: 600;
}

.scm-mod-RaceLeaderboard .session-best-indicator { color: var(--lb-session-best); }
.scm-mod-RaceLeaderboard .personal-best-indicator { color: var(--lb-personal-best); }

/* ???????????????????????????????????????????????????????????????????????????
   No Entries State
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .no-entries {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(80px * var(--lb-scale, 1)) calc(20px * var(--lb-scale, 1));
    color: var(--lb-text-muted);
    gap: calc(20px * var(--lb-scale, 1));
    flex: 1;
    min-height: 300px;
}

.scm-mod-RaceLeaderboard .no-entries i {
    font-size: clamp(2rem, calc(3rem * var(--lb-scale, 1)), 5rem);
    opacity: 0.5;
}

.scm-mod-RaceLeaderboard .awaiting-text {
    font-size: clamp(1.2rem, calc(1.5rem * var(--lb-scale, 1)), 2.5rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--lb-text-muted);
}

/* ???????????????????????????????????????????????????????????????????????????
   Footer
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .leaderboard-footer {
    padding: calc(8px * var(--lb-scale, 1)) calc(20px * var(--lb-scale, 1));
    background: var(--lb-overlay);
    text-align: right;
    flex-shrink: 0;
}

.scm-mod-RaceLeaderboard .update-time {
    font-size: clamp(0.65rem, calc(0.75rem * var(--lb-scale, 1)), 1rem);
    color: var(--lb-text-muted);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 5: SIZE VARIANTS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard.scm-mod-compact {
    min-height: 250px;
    --lb-scale: 0.85;
}

.scm-mod-RaceLeaderboard.scm-mod-large {
    min-height: 600px;
    --lb-scale: 1.1;
}

.scm-mod-RaceLeaderboard.scm-mod-fullheight {
    min-height: 80vh;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 6: RESPONSIVE ADJUSTMENTS
   ??????????????????????????????????????????????????????????????????????????? */

@media (max-width: 768px) {
    .scm-mod-RaceLeaderboard {
        /* The board's empty state is this tall on a phone too: a shorter box grew when it showed (wave 11). */
        min-height: 400px;
        border-radius: 0;
    }
    
    .scm-mod-RaceLeaderboard .leaderboard-columns,
    .scm-mod-RaceLeaderboard .leaderboard-row {
        grid-template-columns: 60px 1fr 80px 80px;
    }
    
    .scm-mod-RaceLeaderboard .col-pits,
    .scm-mod-RaceLeaderboard .leaderboard-columns > .col-pits {
        display: none;
    }
    
    .scm-mod-RaceLeaderboard .team-name {
        display: none;
    }
}

@media (max-width: 480px) {
    .scm-mod-RaceLeaderboard .leaderboard-columns,
    .scm-mod-RaceLeaderboard .leaderboard-row {
        grid-template-columns: 50px 1fr 70px;
    }
    
    .scm-mod-RaceLeaderboard .col-time.best-time,
    .scm-mod-RaceLeaderboard .leaderboard-columns > div:nth-child(5) {
        display: none;
    }
    
    .scm-mod-RaceLeaderboard .leaderboard-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .scm-mod-RaceLeaderboard .session-info {
        flex-direction: column;
        gap: 4px;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 7: ACCESSIBILITY
   ??????????????????????????????????????????????????????????????????????????? */

@media (prefers-reduced-motion: reduce) {
    .scm-mod-RaceLeaderboard *,
    .scm-mod-RaceLeaderboard *::before,
    .scm-mod-RaceLeaderboard *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 8: EMPTY STATE
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .scm-mod-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted);
}

.scm-mod-RaceLeaderboard .scm-mod-empty-icon {
    margin-bottom: 1.5rem;
    color: var(--lb-primary);
    opacity: 0.7;
}

.scm-mod-RaceLeaderboard .scm-mod-empty-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--lb-text);
}

.scm-mod-RaceLeaderboard .scm-mod-empty-message {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.scm-mod-RaceLeaderboard .scm-mod-empty-cta {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--lb-primary);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 9: MULTI-LEADERBOARD LAYOUT (AUTO MODE)
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-RaceLeaderboard .scm-mod-leaderboard-item {
    margin-bottom: 1.5rem;
}

.scm-mod-RaceLeaderboard .scm-mod-leaderboard-item:last-child {
    margin-bottom: 0;
}

/* ?????????????????????????????????????????????????????????????????????????
   SECTION 10: SPACING & CHIP POLISH (website-embedded layout)

   The shared <RaceLeaderboardDisplay/> renders bare inline <span>s for the
   header chips (session-type, game-phase, series, round) and for the
   in-row badges (#car-number, team-name, driver-status). Without explicit
   spacing rules from the host module those collapse together into runs
   like "SESSION MAY 27 15:20RaceGreenLAP 1" and "#01Sim1LoginAston Martin".
   These rules give the embedded layout the same breathing room and chip
   treatment that the public-display variant gets via its scoped CSS.
   ????????????????????????????????????????????????????????????????????????? */

/* Header rows — space chips/labels apart and let them wrap cleanly */
.scm-mod-RaceLeaderboard .leaderboard-header {
    column-gap: 1rem;
    row-gap: 0.5rem;
    flex-wrap: wrap;
}

.scm-mod-RaceLeaderboard .session-info,
.scm-mod-RaceLeaderboard .session-status,
.scm-mod-RaceLeaderboard .series-row {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.scm-mod-RaceLeaderboard .series-row {
    flex: 1 0 100%;
    margin-bottom: 0.25rem;
}

/* Chip vocabulary — session/phase/series/round all share the pill look */
.scm-mod-RaceLeaderboard .session-type-chip,
.scm-mod-RaceLeaderboard .game-phase-chip,
.scm-mod-RaceLeaderboard .kd-series-chip,
.scm-mod-RaceLeaderboard .kd-round-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--lb-primary) 35%, transparent);
    background: color-mix(in srgb, var(--lb-primary) 14%, transparent);
    color: var(--lb-text);
}

.scm-mod-RaceLeaderboard .kd-series-chip {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.45);
    color: color-mix(in srgb, #b45309 70%, var(--lb-text) 30%);
}

.scm-mod-RaceLeaderboard .kd-round-chip {
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(168, 85, 247, 0.45);
    color: color-mix(in srgb, #6d28d9 70%, var(--lb-text) 30%);
}

/* In-row driver cell — separate car number, name, team, and status */
.scm-mod-RaceLeaderboard .col-driver {
    gap: 0.6rem;
}

.scm-mod-RaceLeaderboard .car-number {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--lb-text) 8%, transparent);
    color: var(--lb-text);
    min-width: 2.25rem;
    text-align: center;
}

.scm-mod-RaceLeaderboard .driver-name {
    font-weight: 600;
}

.scm-mod-RaceLeaderboard .team-name {
    font-size: 0.78rem;
    color: var(--lb-text-muted);
    font-weight: 500;
    padding-left: 0.15rem;
}

.scm-mod-RaceLeaderboard .driver-status {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Position-change badge (the "?2" arrow next to the position number) */
.scm-mod-RaceLeaderboard .position-change {
    margin-left: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.scm-mod-RaceLeaderboard .position-change.gained { color: var(--lb-pos-gain); }
.scm-mod-RaceLeaderboard .position-change.lost { color: var(--lb-pos-lost); }