/**
 * 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;
}
* { 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%, rgba(20,133,95,0.10), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 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, rgba(255,255,255,0.014) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.010) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #15191c, #0F1214);
    border-bottom: 1px solid var(--c-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(--c-green-hi) 20%, var(--c-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: linear-gradient(180deg, #1c2124, #101315);
    border: 1px solid var(--c-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(--c-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(--c-green-hi); }
.logo-plate .wordmark span { display: block; font-size: 0.55vw; letter-spacing: 0.14em; color: var(--c-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(--c-hairline);
}
.eyebrow {
    font: 600 0.62vw/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--c-ink-dim); margin-bottom: 0.3vw;
}
.session-title { font: 600 1.5vw/1.1 var(--f-display); color: var(--c-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(--c-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(--c-ink);
    padding: 0.5vw 0.75vw 0.5vw 0.6vw;
    background: linear-gradient(180deg, #1d2225, #15191b);
    border: 1px solid var(--c-hairline);
    border-left: 3px solid var(--switch-color, var(--c-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(--c-ink-faint);
    background: linear-gradient(180deg, #101314, #0c0e0f);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    border-left-color: var(--c-hairline);
}
.switch--all { --switch-color: var(--c-gold); }
.switch--all::before {
    content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--c-gold); margin-right: 0.4vw; vertical-align: middle;
    box-shadow: 0 0 6px var(--c-gold);
}
.switch--lapchart {
    --switch-color: var(--c-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(--c-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(--c-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(--c-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(--c-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; }

/* 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: linear-gradient(180deg, #191D20, #14171A);
    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: #14171A;
    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); }
.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);
}

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