/* ════════════════════════════════════════════════════════════════════
   SimRecap · "Grandstand" design system (Direction A)
   Shared tokens, chrome and primitives. Loaded by every page.
   Light-first editorial: warm paper, hairline rules, Archivo display,
   Inter body/data, one rosso accent.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Grandstand core tokens (light) ── */
  --paper:     #f7f5f0;
  --surface:   #fefdfb;
  --ink:       #1b1812;
  --sub:       #6e6759;
  --faint:     #7e776a;
  --hero-sub:  #9a9a9a; /* on-dark hero subtext: neutral grey, constant in both themes */
  --line:      #e4dfd3;
  --line-soft: #ede9df;
  --red:       #c22d20;
  --red-dark:  #9c2318;
  --green:     #1e7a3c;
  --pit-bg:    #efe7cf;
  --pit-text:  #7a5f12;

  /* ── Class identity colors (data, not decoration) ── */
  --gtp:  #b87900;
  --lmp2: #2768d4;
  --gt3:  #d42757;
  --lmp3:  #16a34a;
  --cup:   #7c3aed;
  --sport: #c2410c;
  --tcr:   #0d9488;
  --m2:    #be185d;
  --fastest-lap: #a012c9; /* kept by decision: purple = fastest, motorsport convention */

  /* Derived tints (backgrounds on paper) */
  --gtp-light:  color-mix(in srgb, var(--gtp) 13%, var(--paper));
  --gtp-mid:    color-mix(in srgb, var(--gtp) 30%, var(--paper));
  --lmp2-light: color-mix(in srgb, var(--lmp2) 11%, var(--paper));
  --lmp2-mid:   color-mix(in srgb, var(--lmp2) 28%, var(--paper));
  --gt3-light:  color-mix(in srgb, var(--gt3) 11%, var(--paper));
  --gt3-mid:    color-mix(in srgb, var(--gt3) 28%, var(--paper));
  --lmp3-light: color-mix(in srgb, var(--lmp3) 11%, var(--paper));
  --cup-light:  color-mix(in srgb, var(--cup) 11%, var(--paper));
  --sport-light:color-mix(in srgb, var(--sport) 11%, var(--paper));
  --tcr-light:  color-mix(in srgb, var(--tcr) 11%, var(--paper));
  --m2-light:   color-mix(in srgb, var(--m2) 11%, var(--paper));
  --gold:       #b87900;
  --gold-light: var(--gtp-light);

  /* ── Type ── */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Legacy variable bridge ──
     Pre-Grandstand pages and JS-generated inline styles reference these.
     They resolve to Grandstand tokens so old selectors recolor correctly. */
  --white:         var(--surface);
  --off-white:     var(--paper);
  --border:        var(--line);
  --border-strong: var(--ink);
  --text:          var(--ink);
  --text-2:        var(--sub);
  --text-3:        var(--faint);
  --sans:          var(--font-body);
  --mono:          var(--font-body);
  --radius: 4px;
  --shadow: none;
  --shadow-md: none;
}

[data-theme="dark"] {
  /* Neutral dark grey inversion */
  --paper:     #26262b;
  --surface:   #313136;
  --ink:       #e9e9ee;
  --sub:       #a2a2aa;
  --faint:     #8e8e97;
  --line:      #3a3a40;
  --line-soft: #36363b;
  --red:       #e04a36;
  --red-dark:  #c2382a;
  --green:     #4caf77;
  --pit-bg:    #2e2810;
  --pit-text:  #cdb462;

  --gtp:  #d9a013;
  --lmp2: #5c92e8;
  --gt3:  #ef6292;
  --lmp3:  #4ade80;
  --cup:   #c084fc;
  --sport: #fb923c;
  --tcr:   #2dd4bf;
  --m2:    #f472b6;
  --fastest-lap: #e879f9;
  --gold: #d9a013;
}

/* ════════ Base ════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* Content container — the responsive ladder:
   <720 compact (18px) · 720–1199 (32px) · ≥1200 (56px) · cap 1360 */
.page, .gs-wide {
  width: 100%; max-width: 1360px;
  margin: 0 auto; padding-left: 18px; padding-right: 18px;
}
@media (min-width: 720px)  { .page, .gs-wide { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1200px) { .page, .gs-wide { padding-left: 56px; padding-right: 56px; } }

/* ════════ Type primitives ════════ */
.gs-display {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.04; color: var(--ink);
}
.gs-overline {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.gs-num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em; }

/* Section head: overline + trailing hairline (+ optional right meta) */
.gs-section-head { display: flex; align-items: center; gap: 16px; }
.gs-section-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.gs-section-head .gs-section-meta { order: 3; font-size: 12px; color: var(--faint); white-space: nowrap; }

/* ════════ Top bar ════════ */
.gs-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.brand .wm {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1;
}
.brand .wm span { color: var(--red); }
.brand .wm-slash {
  width: 8px; height: 8px; background: var(--red);
  transform: skewX(-12deg); display: inline-block;
}
.gs-nav { display: flex; align-items: center; gap: 28px; }
.gs-nav a {
  font-size: 13.5px; font-weight: 500; color: var(--sub); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color .12s;
}
.gs-nav a:hover { color: var(--ink); }
.gs-nav a.active { font-weight: 700; color: var(--ink); border-bottom-color: var(--red); }
.dark-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--sub);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s;
}
.dark-toggle:hover { border-color: var(--faint); }
@media (max-width: 719.9px) {
  .gs-nav { gap: 18px; }
  .gs-nav a { font-size: 13px; }
}

/* ════════ Footer ════════ */
footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 20px 18px;
  font-size: 12.5px; color: var(--faint);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
@media (min-width: 720px)  { footer { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1200px) { footer { padding-left: 56px; padding-right: 56px; } }
footer strong { color: var(--sub); font-weight: 700; }
footer a { color: var(--red); text-decoration: none; }
footer a:hover { color: var(--red-dark); }

/* ════════ Buttons ════════ */
.gs-btn {
  display: inline-block; background: var(--red); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  padding: 10px 20px; border-radius: 4px; border: none;
  text-decoration: none; cursor: pointer; transition: background .12s;
}
.gs-btn:hover { background: var(--red-dark); }
.gs-btn-outline {
  display: inline-block; background: none; color: var(--ink);
  border: 1px solid var(--ink); font-weight: 700; font-size: 13.5px;
  padding: 9px 20px; border-radius: 4px; text-decoration: none; cursor: pointer;
}

/* ════════ Class chips — colored text labels, data not decoration ════════ */
.cls-pill {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0; border-radius: 0;
  background: none !important;
  display: inline-block; line-height: 1.3; min-width: 0; text-align: left;
}
.cls-gtp, .cls-p919      { color: var(--gtp); }
.cls-lmp2, .cls-hpd      { color: var(--lmp2); }
.cls-gt3, .cls-gte, .cls-gt3pro { color: var(--gt3); }
.cls-lmp3  { color: var(--lmp3); }
.cls-cup   { color: var(--cup); }
.cls-sport { color: var(--sport); }
.cls-tcr   { color: var(--tcr); }
.cls-m2    { color: var(--m2); }

/* ════════ Car number plate ════════ */
.no-plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 21px; padding: 0 5px;
  color: #fff; font-weight: 800; font-size: 12px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

/* ════════ Search (shared component) ════════ */
.search-wrap { position: relative; }
.search-box {
  width: 100%; padding: 14px 16px 14px 44px;
  font-size: 15px; font-family: var(--font-body);
  background: var(--surface); border: none; border-radius: 0;
  color: var(--ink); outline: none;
  box-shadow: 7px 7px 0 var(--red); /* signature move — once per page */
  transition: box-shadow .12s;
}
.search-box:focus { box-shadow: 7px 7px 0 var(--red-dark); }
.search-box::placeholder { color: var(--faint); }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(27,24,18,0.16);
  z-index: 200; overflow: hidden; display: none;
}
.search-results.open { display: block; }
.search-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); padding: 10px 14px 6px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.search-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-soft); transition: background .1s; cursor: pointer;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover, .search-item.active { background: var(--surface); }
.search-item-icon { display: none; }
.search-item-main { flex: 1; min-width: 0; }
.search-item-name { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item-sub  { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.search-item-meta { font-size: 11.5px; color: var(--faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.search-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--faint); }
.search-show-more {
  padding: 9px 14px; font-size: 12.5px; color: var(--red); cursor: pointer;
  border-top: 1px solid var(--line); font-weight: 700; transition: background .1s;
}
.search-show-more:hover { background: var(--surface); }

/* ════════ Stat strip — hairline columns, no boxes ════════
   (driver profile career stats; same pattern reused by race.html car panel) */
.stat-row {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border-top: 1px solid var(--line);
}
.stat-card {
  border-left: 1px solid var(--line-soft);
  padding: 14px 16px 12px 16px;
  display: flex; flex-direction: column; align-items: flex-start;
  background: none; border-radius: 0; box-shadow: none;
}
.stat-card:first-child { border-left: none; padding-left: 0; }
.stat-lbl {
  order: 1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
  line-height: 1.2; margin: 0 0 6px;
}
.stat-val {
  order: 2;
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-icon { display: none; }
.stat-rate { order: 3; font-size: 11.5px; color: var(--sub); line-height: 1.35; margin-top: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-rate .soft-bad { color: var(--red); }
@media (max-width: 1023.9px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .stat-card { padding: 12px 14px 10px; }
  .stat-card:nth-child(4n+1) { border-left: none; padding-left: 0; }
  .stat-card:nth-child(n+5) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 719.9px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(4n+1) { border-left: 1px solid var(--line-soft); padding-left: 14px; }
  .stat-card:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .stat-card:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .stat-val { font-size: 21px; }
}

/* ════════ Utility ════════ */
.loading, .error { text-align: center; padding: 80px 32px; color: var(--faint); font-size: 14px; }
::selection { background: color-mix(in srgb, var(--red) 22%, transparent); }