/**
 * Livescoring - premium instrument-panel stylesheet.
 *
 * Design tokens, header/switch/clock/flag system, and table styling
 * ported directly from the approved HTML mockup (design iteration
 * carried over turn-by-turn in chat). Class colors (.class-*,
 * .switch-class-*) are injected per-page from livescoring.json's
 * DisplayClasses (see index.php) since they're real data; everything
 * else here (status colors, traffic heat, sector darkness) is this
 * design's own curated palette - see DESIGN_NOTES_STATUS_INDICATORS.md
 * for the reasoning.
 */

:root {
    /* ---- design tokens ---- */
    --c-bg:        #0A0D0F;
    --c-panel:     #14181B;
    --c-panel-hi:  #1B2023;
    --c-hairline:  #262B2F;
    --c-ink:       #E8E6DF;
    --c-ink-dim:   #8A9199;
    --c-ink-faint: #565C61;
    --c-green:     #14855F;
    --c-green-hi:  #1CB37E;
    --c-gold:      #C9A227;
    --c-gold-hi:   #E5C158;
    --c-purple:    #A855F7;
    --c-purple-hi: #C084FC;

    --c-outlap:    #D9A441;
    --c-outone:    #4E9BD9;
    --c-retired:   #6B7076;
    --c-inpits:    #D9527A;
    --c-stopped:   #C0392B;
    --c-overtime:  #D9A441;
    --c-overdue:   #C0392B;
    --c-best:      var(--c-purple);

    --f-display: "Space Grotesk", "Arial Narrow", sans-serif;
    --f-mono:    "IBM Plex Mono", "Courier New", monospace;
    --f-sans:    "IBM Plex Sans", Arial, sans-serif;

    --header-h: 5.4vw;
    --flag-line-color: var(--c-green);
    --run-clock-color: var(--c-green);
    --fs: 1.05vw;

    /* Header-fixed tokens: the instrument-panel header stays this exact
       dark carbon look in BOTH light and dark mode - only the page body
       (table, background) switches with the theme. These are NEVER
       overridden by [data-theme="light"], on purpose. */
    --header-surface:  linear-gradient(180deg, #15191c, #0F1214);
    --header-hatch-1:  rgba(255,255,255,0.014);
    --header-hatch-2:  rgba(255,255,255,0.010);
    --header-plate:    linear-gradient(180deg, #1c2124, #101315);
    --header-switch:   linear-gradient(180deg, #1d2225, #15191b);
    --header-switch-off: linear-gradient(180deg, #101314, #0c0e0f);
    --header-ink:       #E8E6DF;
    --header-ink-dim:   #8A9199;
    --header-ink-faint: #565C61;
    --header-hairline:  #262B2F;
    --header-green:     #14855F;
    --header-green-hi:  #1CB37E;
    --header-gold:      #C9A227;
    --header-gold-hi:   #E5C158;

    /* Page-body surfaces: DO switch with the theme (see [data-theme="light"] below). */
    --surface-table:      linear-gradient(180deg, #191D20, #14171A);
    --surface-sticky-head: #14171A;
    --body-hatch:         rgba(255,255,255,0.012);
    --body-glow:          rgba(20,133,95,0.10);
}

[data-theme="light"] {
    --c-bg:        #F0EEE6;
    --c-panel:     #FFFFFF;
    --c-panel-hi:  #FAFAF8;
    --c-hairline:  #D8D4C9;
    --c-ink:       #1D2023;
    --c-ink-dim:   #6B7078;
    --c-ink-faint: #9BA0A6;
    --c-green:     #0F6B4C;
    --c-green-hi:  #0C8F63;
    --c-gold:      #A6811E;
    --c-gold-hi:   #8C6A15;
    --c-purple:    #7C3AED;
    --c-purple-hi: #6D28D9;

    --c-outlap:    #B8791A;
    --c-outone:    #2E6DA4;
    --c-retired:   #7A7F85;
    --c-inpits:    #B23A5C;
    --c-stopped:   #A5301F;
    --c-overtime:  #B8791A;
    --c-overdue:   #A5301F;

    --surface-table:      linear-gradient(180deg, #FDFCF9, #F6F4EE);
    --surface-sticky-head: #FDFCF9;
    --body-hatch:         rgba(0,0,0,0.018);
    --body-glow:          rgba(15,107,76,0.06);
}
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--f-sans);
    font-size: var(--fs);
    -webkit-font-smoothing: antialiased;
}
body {
    background-image:
        radial-gradient(ellipse 120% 60% at 50% -10%, var(--body-glow), transparent 60%),
        repeating-linear-gradient(0deg, var(--body-hatch) 0px, var(--body-hatch) 1px, transparent 1px, transparent 3px);
}
img { max-width: 100%; }
::selection { background: var(--c-green); color: #fff; }

/* ---------------- Instrument header ---------------- */
.app-header {
    position: sticky; top: 0; left: 0; right: 0;
    z-index: 5;
    min-height: var(--header-h);
    display: flex; align-items: stretch; flex-wrap: wrap;
    gap: 1px;
    padding: 0.6vw 0.6vw;
    background:
        repeating-linear-gradient(45deg, var(--header-hatch-1) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, var(--header-hatch-2) 0 2px, transparent 2px 6px),
        var(--header-surface);
    border-bottom: 1px solid var(--header-hairline);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    cursor: pointer;
}
.app-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--header-green-hi) 20%, var(--header-gold) 55%, transparent 90%);
    opacity: 0.55;
}
.panel { position: relative; }

.app-header__logo { display: flex; align-items: center; padding: 0 0.9vw; }
.logo-plate {
    display: flex; align-items: center; gap: 0.6vw;
    padding: 0.3vw 0.7vw 0.3vw 0.4vw;
    background: var(--header-plate);
    border: 1px solid var(--header-hairline);
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.logo-plate img { height: 2.5vw; width: auto; display: block; }
.logo-plate .divider { width: 1px; align-self: stretch; background: var(--header-hairline); }
.logo-plate .wordmark { font-family: var(--f-mono); line-height: 1.15; }
.logo-plate .wordmark b { display: block; font-size: 0.62vw; font-weight: 600; letter-spacing: 0.18em; color: var(--header-green-hi); }
.logo-plate .wordmark span { display: block; font-size: 0.55vw; letter-spacing: 0.14em; color: var(--header-ink-dim); }

.app-header__session {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.4vw 1vw; min-width: 15%;
    border-left: 1px solid var(--header-hairline);
}
.eyebrow {
    font: 600 0.62vw/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--header-ink-dim); margin-bottom: 0.3vw;
}
.session-title { font: 600 1.5vw/1.1 var(--f-display); color: var(--header-ink); }
.session-subtitle { font: 500 0.95vw/1.3 var(--f-sans); color: var(--flag-line-color); margin-top: 0.15vw; transition: color 0.3s ease; }

.app-header__classes {
    flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4vw;
    padding: 0.5vw 1vw;
    border-left: 1px solid var(--header-hairline);
}

/* ---- switches (replaces bootstrap-style buttons) ---- */
.switch {
    appearance: none; border: none; cursor: pointer;
    font: 600 0.72vw/1 var(--f-sans); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--header-ink);
    padding: 0.5vw 0.75vw 0.5vw 0.6vw;
    background: var(--header-switch);
    border: 1px solid var(--header-hairline);
    border-left: 3px solid var(--switch-color, var(--header-green));
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    position: relative;
}
.switch:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 10px rgba(0,0,0,0.4); }
.switch:active { transform: translateY(0); }
.switch.is-off {
    color: var(--header-ink-faint);
    background: var(--header-switch-off);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    border-left-color: var(--header-hairline);
}
.switch--all { --switch-color: var(--header-gold); }
.switch--all::before {
    content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--header-gold); margin-right: 0.4vw; vertical-align: middle;
    box-shadow: 0 0 6px var(--header-gold);
}
.switch--lapchart {
    --switch-color: var(--header-gold);
    display: inline-flex; align-items: center; gap: 0.35vw;
}
.switch--lapchart svg { width: 0.85vw; height: 0.85vw; opacity: 0.85; }

.app-header__clock {
    display: flex; align-items: center; gap: 0.9vw;
    padding: 0.4vw 1vw;
    border-left: 1px solid var(--header-hairline);
    font-family: var(--f-mono);
}
.clock-block { text-align: right; }
.clock-label { font: 500 0.58vw/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--header-ink-dim); margin-bottom: 0.2vw; }
.clock-value {
    font: 600 1.45vw/1 var(--f-mono); letter-spacing: 0.03em;
    color: var(--run-clock-color, var(--flag-line-color));
    text-shadow: 0 0 12px color-mix(in srgb, var(--run-clock-color, var(--flag-line-color)) 55%, transparent),
                 0 0 2px color-mix(in srgb, var(--run-clock-color, var(--flag-line-color)) 90%, transparent);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.clock-value.rem { color: var(--header-gold-hi); text-shadow: 0 0 12px rgba(229,193,88,0.5), 0 0 2px rgba(229,193,88,0.9); }

.app-header__flag {
    display: flex; align-items: center; gap: 0.5vw;
    padding: 0.4vw 1vw;
    border-left: 1px solid var(--header-hairline);
    min-width: 8%;
}
.flag-light {
    width: 0.85vw; height: 0.85vw; border-radius: 50%;
    background: var(--flag-color, #555);
    box-shadow: 0 0 6px var(--flag-color, #555), inset 0 0 3px rgba(0,0,0,0.4);
    animation: pulse-glow 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 4px var(--flag-color, #555), 0 0 7px var(--flag-color, #555), inset 0 0 3px rgba(0,0,0,0.4);
        opacity: 0.9;
    }
    50% {
        box-shadow: 0 0 9px var(--flag-color, #555), 0 0 16px var(--flag-color, #555), inset 0 0 3px rgba(0,0,0,0.4);
        opacity: 1;
    }
}
.flag-text { font: 600 0.85vw/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--header-ink); }

/* theme toggle - lives in the header, so it stays header-styled too */
.theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 2.4vw; height: 2.4vw;
    margin: auto 0.6vw;
    border: 1px solid var(--header-hairline);
    border-radius: 50%;
    background: var(--header-switch);
    color: var(--header-ink-dim);
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
    transition: transform 0.15s ease, filter 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { filter: brightness(1.15); transform: translateY(-1px); color: var(--header-gold-hi); }
.theme-toggle svg { width: 1.15vw; height: 1.15vw; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* header power-on sweep */
@keyframes sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.app-header { animation: sweep 0.6s cubic-bezier(.2,.7,.3,1) both; }

/* ---------------- Data table ---------------- */
.scoring-main {
    margin-top: 0.9vw; overflow-x: auto; padding: 0.6vw;
    background: var(--surface-table);
    border: 1px solid var(--c-hairline);
    border-radius: 3px;
    margin-left: 0.9vw; margin-right: 0.9vw;
}
.scoring-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); }

.scoring-table td { padding: 0.35vw 0.5vw; height: 1.9vw; font-size: 0.92vw; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scoring-table td.R { text-align: right; } .scoring-table td.C { text-align: center; } .scoring-table td.L { text-align: left; font-family: var(--f-sans); }

.row-head td {
    font: 600 0.68vw/1 var(--f-sans); letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--c-ink-dim);
    padding-top: 0.7vw; padding-bottom: 0.6vw;
    border-bottom: 1px solid var(--flag-line-color);
    background: var(--surface-sticky-head);
    position: sticky; top: 0; z-index: 2;
}
.cell-sortable { cursor: pointer; position: relative; }
.cell-sortable:hover { color: var(--c-green-hi); }
.cell-sortable:hover::after { content: "▾"; margin-left: 0.3vw; font-size: 0.6vw; opacity: 0.8; }
.cell-head, .cell-inpit { color: var(--c-ink-faint); }

.row-data { border-bottom: 1px solid var(--c-hairline); transition: background 0.15s ease; }
.row-data:hover { background: rgba(255,255,255,0.025); }
.row-data td:first-child { border-left: 3px solid transparent; }

/* status = a quiet edge stripe + faint tint, not a loud fill */
.row-data.status-outlap  td:first-child { border-left-color: var(--c-outlap); }
.row-data.status-outlap  { background: color-mix(in srgb, var(--c-outlap) 8%, transparent); }
.row-data.status-outone  td:first-child { border-left-color: var(--c-outone); }
.row-data.status-outone  { background: color-mix(in srgb, var(--c-outone) 8%, transparent); }
.row-data.status-retired td:first-child { border-left-color: var(--c-retired); }
.row-data.status-retired { background: color-mix(in srgb, var(--c-retired) 10%, transparent); color: var(--c-ink-faint); }
.row-data.status-chex    { background: rgba(255,255,255,0.03); }
.row-data.status-inpits  td:first-child { border-left-color: var(--c-inpits); }
.row-data.status-inpits  { background: color-mix(in srgb, var(--c-inpits) 9%, transparent); }
.row-data.status-stopped td:first-child { border-left-color: var(--c-stopped); }
.row-data.status-stopped { background: color-mix(in srgb, var(--c-stopped) 12%, transparent); }

.row-data.row-pinned {
    background: color-mix(in srgb, var(--c-gold) 14%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 45%, transparent);
}
.row-data.row-pinned td:first-child { border-left-color: var(--c-gold) !important; }

.cell-best {
    color: var(--c-purple-hi); font-weight: 600;
    text-shadow: 0 0 8px rgba(168,85,247,0.45);
}
.cell-overtime { color: var(--c-outlap); font-weight: 600; }
.cell-overdue  { color: var(--c-stopped); font-weight: 700; }
.cell-outlap   { color: var(--c-outlap); }
.cell-inpits   { color: var(--c-inpits); }

.tf-pill, .sector-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4vw; height: 1.4vw; border-radius: 3px;
    font: 600 0.7vw var(--f-mono);
}
.tf-pill { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.tf-pill.tf-retired { background: var(--c-retired) !important; }
.tf-pill.tf-pit      { background: var(--c-inpits) !important; }
.tf-pill.tf-default  { background: #C2185B !important; } /* magenta: N/S cars - traffic factor is meaningless here, not "off the chart" */
.sector-badge { background: #D9D9D9; color: #14171A; border: 1px solid #D9D9D9; margin-left: 0.2vw; }
.sector-badge.sector-1 { background: #D9D9D9; color: #14171A; border-color: #D9D9D9; }
.sector-badge.sector-2 { background: #8A8F94; color: #0C0E10; border-color: #8A8F94; }
.sector-badge.sector-3 { background: #16181A; color: #E8E6DF; border-color: rgba(255,255,255,0.3); }
[data-theme="light"] .sector-badge,
[data-theme="light"] .sector-badge.sector-1 { border-color: #B7B2A4; }
[data-theme="light"] .sector-badge.sector-3 { border-color: rgba(0,0,0,0.3); }
.sector-best { color: var(--c-purple-hi); background: color-mix(in srgb, var(--c-purple) 22%, transparent) !important; }

/* class badge: solid fill using the feed's own Back/Fore pair - this is the
   real "black GTP badge" look. A subtle border keeps it visible even for
   near-black class colors like GTP against any row shade. */
td.C small {
    display: inline-block; font: 600 0.68vw var(--f-sans); letter-spacing: 0.04em;
    padding: 0.2vw 0.6vw; border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.14);
}
[data-theme="light"] td.C small { border-color: rgba(0,0,0,0.14); }

.row-totals td { padding-top: 0.6vw; border-top: 1px solid var(--c-hairline); color: var(--c-ink-dim); font-size: 0.8vw; }

/* ---------------- Ticker + legend ---------------- */
.last-items {
    margin: 1vw 0.9vw; padding: 0.6vw 0.9vw;
    background: var(--c-panel); border: 1px solid var(--c-hairline); border-left: 3px solid var(--c-green);
    border-radius: 2px;
    font: 400 0.82vw/1.7 var(--f-sans); color: var(--c-ink-dim);
}
.last-items b { color: var(--c-gold-hi); font-weight: 600; }

.legend {
    display: flex; flex-wrap: wrap; gap: 0.5vw;
    padding: 0 0.9vw 1.2vw;
}
.legend__item {
    display: flex; align-items: center; gap: 0.4vw;
    padding: 0.3vw 0.7vw;
    background: var(--c-panel); border: 1px solid var(--c-hairline); border-radius: 2px;
    font: 500 0.72vw var(--f-sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-ink-dim);
}
.legend__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--c-ink-faint)); flex-shrink: 0; }
.legend__item.cell-best::before     { background: var(--c-purple); }
.legend__item.status-inpits::before { background: var(--c-inpits); }
.legend__item.status-outlap::before { background: var(--c-outlap); }
.legend__item.status-outone::before { background: var(--c-outone); }
.legend__item.status-retired::before{ background: var(--c-retired); }
.legend__item.cell-overdue::before  { background: var(--c-overdue); }
.legend__item--dark { border-color: var(--c-hairline); }

/* ---------------- Stint history modal ---------------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10;
}
.modal.is-open { display: block; }
.modal-content {
    background: var(--c-panel);
    border: 1px solid var(--c-hairline);
    color: var(--c-ink);
    margin: 4% auto;
    padding: 1.2vw;
    border-radius: 4px;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    color: var(--c-ink-dim);
    cursor: pointer;
}
.modal-close:hover { color: var(--c-ink); }

/* ==================================================================
   MOBILE LAYOUT
   Rendered server-side (see index_2026.php's $isMobile branch and
   indexJson26.php's MobileCardRenderer) rather than a responsive CSS
   reflow of the desktop markup - the information hierarchy genuinely
   differs (session name shrunk, clock made much more prominent, class
   filters as a scrollable chip row, a two-tier card per car instead of
   a table row), not just font sizes. Shares element IDs with the
   desktop layout wherever the underlying behavior is identical
   (SessionRun/SessionRem/SessionFlag/flagLight/themeToggle/
   ClassButtons/reloadTrigger) so app.js needs no separate mobile code
   path for any of that - only the entry-list paint step branches.
   ================================================================== */

.m-header {
    position: sticky; top: 0; z-index: 10;
    background: var(--header-surface);
    border-bottom: 1px solid var(--header-hairline);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    padding: 10px 12px 12px;
    cursor: pointer;
}
.m-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.m-header .wordmark { font-family: var(--f-mono); }
.m-header .wordmark b {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--header-green-hi);
    text-transform: uppercase;
}
.m-theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--header-hairline);
    border-radius: 50%;
    background: var(--header-plate);
    color: var(--header-ink-dim);
    cursor: pointer;
    flex-shrink: 0;
}
.m-theme-toggle svg { width: 18px; height: 18px; }
.m-theme-toggle .icon-moon { display: none; }
[data-theme="light"] .m-theme-toggle .icon-sun { display: none; }
[data-theme="light"] .m-theme-toggle .icon-moon { display: block; }

.m-row2 {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
    font: 500 12px/1.3 var(--f-sans);
    color: var(--header-ink-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-flag-light {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--flag-color, #555);
    box-shadow: 0 0 6px var(--flag-color, #555);
    animation: pulse-glow 2.4s ease-in-out infinite;
}
.m-flag-text {
    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--header-ink);
    flex-shrink: 0;
}
.m-session-mini { overflow: hidden; text-overflow: ellipsis; }

.m-clock-row { display: flex; gap: 8px; margin-bottom: 12px; }
.m-clock-block {
    flex: 1;
    background: var(--header-plate);
    border: 1px solid var(--header-hairline);
    border-radius: 4px;
    padding: 6px 10px 8px;
}
.m-clock-label {
    font: 600 9px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--header-ink-dim); margin-bottom: 3px;
}
.m-clock-value {
    font: 600 22px/1 var(--f-mono); letter-spacing: 0.02em;
    color: var(--run-clock-color, var(--flag-line-color));
    text-shadow: 0 0 10px color-mix(in srgb, var(--run-clock-color, var(--flag-line-color)) 50%, transparent);
    font-variant-numeric: tabular-nums;
}
.m-clock-value.rem { color: var(--header-gold-hi); text-shadow: 0 0 10px rgba(229,193,88,0.45); }

.m-class-row {
    display: flex; gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.m-class-row::-webkit-scrollbar { display: none; }

/* Class filter buttons: SAME .switch markup as desktop (see
   renderClassButtons() in index_2026.php) - this just restyles them
   into touch-friendly chips within the mobile header row. app.js's
   existing #ClassButtons click handler works unchanged since the
   data-toggle-class/data-toggle-all attributes are identical. */
body.is-mobile .switch {
    flex-shrink: 0;
    font-size: 12px;
    padding: 9px 14px;
    min-height: 40px;
    display: flex; align-items: center;
    white-space: nowrap;
}
body.is-mobile .switch--lapchart { display: none; } /* lap chart link isn't part of the mobile column set (yet) */

/* ---- entry list (replaces the desktop <table>) ---- */
.entry-list {
    margin: 10px 8px 0;
    background: var(--surface-table);
    border: 1px solid var(--c-hairline);
    border-radius: 4px;
    overflow: hidden;
}
.m-list-head {
    padding: 7px 10px;
    font: 600 9.5px/1 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-ink-dim);
    background: var(--surface-sticky-head);
    position: sticky; top: 0; z-index: 2;
}

.entry-card {
    padding: 8px 10px 7px;
    border-bottom: 1px solid var(--c-hairline);
    transition: background 0.15s ease;
}
.entry-card.status-inpits  { box-shadow: inset 3px 0 0 var(--c-inpits); }
.entry-card.status-outlap  { box-shadow: inset 3px 0 0 var(--c-outlap); }
.entry-card.status-outone  { box-shadow: inset 3px 0 0 var(--c-outone); }
.entry-card.status-retired { box-shadow: inset 3px 0 0 var(--c-retired); opacity: 0.55; }
.entry-card.status-stopped { box-shadow: inset 3px 0 0 var(--c-stopped); }
.entry-card.status-chex    { box-shadow: inset 3px 0 0 var(--c-ink-faint); }

.entry-primary {
    display: flex; align-items: baseline; gap: 7px;
    font-family: var(--f-mono);
}
.entry-cp { font: 700 15px/1 var(--f-mono); min-width: 1.3em; text-align: right; flex-shrink: 0; }
.entry-car { font: 600 13px/1 var(--f-mono); color: var(--c-ink-dim); flex-shrink: 0; }
.entry-cl small {
    display: inline-block; font: 600 10px var(--f-sans); letter-spacing: 0.02em;
    padding: 2px 5px; border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.14);
    flex-shrink: 0;
}
[data-theme="light"] .entry-cl small { border-color: rgba(0,0,0,0.14); }
.entry-driver {
    font: 500 13.5px/1.2 var(--f-sans);
    color: var(--c-ink);
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry-best {
    font: 700 15px/1 var(--f-mono);
    color: var(--c-ink);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.entry-secondary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
    margin-top: 3px; padding-left: 1.9em;
    font: 500 10.5px/1.4 var(--f-sans);
    color: var(--c-ink-faint);
    font-variant-numeric: tabular-nums;
}
.entry-secondary b { font-weight: 600; color: var(--c-ink-dim); }
.entry-gap { margin-left: auto; color: var(--c-ink); font-weight: 600; flex-shrink: 0; }
.entry-gap b { color: var(--c-gold-hi); font-weight: 700; }
.entry-fastest { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-legend {
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    margin: 10px 12px 16px;
    font: 500 10.5px var(--f-sans); color: var(--c-ink-dim);
}
.m-legend__item { display: flex; align-items: center; gap: 4px; }
.m-legend__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }