/* ===== TENTHS — main.css ===== */

:root {
  --bg: #0a0a08;
  --surface: #14120f;      /* warm-tinted surface */
  --surface2: #1e1c18;     /* warm-tinted elevated surface */
  --border: #2a2a26;
  --accent: #ff2020;       /* red — primary brand & actions (brighter) */
  --accent2: #ff4a1a;      /* red-orange — destructive (brighter) */
  --amber: #f5a623;        /* secondary accent — emphasis & data highlights */
  --amber-soft: rgba(245,166,35,0.08); /* amber tint for highlighted rows */
  --gold: #f5c542;          /* the coach's quoted words (.say) */
  --text: #f0efe8;
  --muted: #8a8a7e;        /* softened for AA contrast on dark bg */
  --card-hover: #1e1e1c;
  /* semantic */
  --success: #3ecf6e;
  --warning: #f5a623;
  --danger: #ff2020;
  /* Activity — drivers on track now, and laps logged in the last 24 hours.
     Its own entry rather than a reuse of --success: nothing about a driver
     being out on track succeeded or passed, and the two would then have to
     move together the next time either is retuned. Blue also sits furthest
     from the amber it is read beside in the lap counter, where the point of
     the second hue is that the two columns are not one comparison. */
  --live: #4da3ff;
  /* semantic entity accents */
  --track-accent: #90ee90;   /* track — light green */
  --car-accent: #87cefa;     /* car — light blue */
  --driver-accent: #b59dd6;  /* driver — purple */
  /* Simulator ink — one hue per sim, for names set on the dark page rather
     than inside a table (.sim-pill keeps its own, darker, tuned values).
     Same hues as the pills. Where a sim has a brand colour it is the one
     sampled from its logo: AC EVO is Kunos' red (#e52220). Assetto Corsa is
     pure red (#ff0000) and Automobilista 2 purple, by choice rather than
     from their logos (AMS2's is silver), so each stands apart. */
  --sim-ink-iracing: #7ba1ff;
  --sim-ink-ams2:    #b98cff;
  --sim-ink-acc:     #ff6b6b;
  --sim-ink-acevo:   #e52220;
  --sim-ink-ac:      #ff0000;
  --sim-ink-rf2:     #5cb3ee;
  --sim-ink-lmu:     #e0c020;
  --accent-shadow: -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9), -1px 1px 0 rgba(255,255,255,0.9), 1px 1px 0 rgba(255,255,255,0.9);
  /* Body / data font — clean sans-serif (replaces the old monospace look) */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Monospace for tabular data — modern mono, not Courier */
  --font-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* No monospace/courier and no italics anywhere on the site */
code, pre, kbd, samp, tt { font-family: var(--font-body); }
em, i, cite, address, var, dfn { font-style: normal; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;          /* behind content — hidden under opaque cards & tables */
  opacity: 0.4;
}

/* ── Full-page photo backgrounds — a racing shot behind a dark scrim.
   Each page's <body> picks its image via a pg-bg--* class. ── */
body.pg-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(10,10,8,0.93), rgba(10,10,8,0.93)),
    var(--pg-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.pg-bg--copa-1 { --pg-bg-img: url('/img/copa-1.webp'); }
.pg-bg--copa-2 { --pg-bg-img: url('/img/copa-2.webp'); }
.pg-bg--copa-3 { --pg-bg-img: url('/img/copa-3.webp'); }
.pg-bg--f1-1   { --pg-bg-img: url('/img/f1-1.webp'); }
.pg-bg--f1-2   { --pg-bg-img: url('/img/f1-2.webp'); }
.pg-bg--f1-3   { --pg-bg-img: url('/img/f1-3.webp'); }
.pg-bg--f1-4   { --pg-bg-img: url('/img/f1-4.webp'); }
.pg-bg--tr-1   { --pg-bg-img: url('/img/tr-1.webp'); }
/* iOS ignores background-attachment: fixed — fall back to scroll there */
@media (max-width: 768px) {
  body.pg-bg { background-attachment: scroll; }
}

a { color: inherit; text-decoration: none; }

/* In-page anchor jumps (hero buttons → homepage sections) scroll smoothly
   and stop clear of the sticky nav. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
[id] { scroll-margin-top: 90px; }

/* ===== NAV ===== */
nav {
  position: sticky;
  top: 0;
  background: rgba(10,10,8,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

/* The wordmark is artwork now, not type. Height drives it and the width comes
   from the intrinsic aspect, so the one asset serves the nav, the footer and
   the taller login card by changing a single number. The img carries its own
   width/height so the row does not reflow while it loads. */
.logo {
  display: inline-block;
  line-height: 0;
}

.logo img {
  height: 26px;
  width: auto;
  display: block;
}



nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
}

nav ul a {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.2s;
}

nav ul a:hover { color: var(--text); }

nav ul a.nav-active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

.nav-cart {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.2s;
}

.nav-cart:hover { border-color: var(--text); color: var(--text); }

.cart-achievement {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== HERO ===== */
.hero {
  padding: 120px 48px 80px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
/* Decorative racing-car silhouette */
.hero::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: 24px;
  width: 520px;
  height: 200px;
  background: url('/img/race-car.svg') no-repeat right bottom;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 760px) { .hero::after { display: none; } }

.hero-bg-text {
  position: absolute;
  top: 20px; right: -40px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 280px;
  color: rgba(232,255,60,0.04);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.hero-tag {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 3px;
  padding: 6px 14px;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.9;
  letter-spacing: 2px;
  max-width: 900px;
  margin-bottom: 40px;
}

.hero h1 em {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 48px;
}

.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* Hero buttons carry a small stroke icon; scoped here so btn-primary/btn-ghost
   elsewhere keep their plain inline-block layout. */
.hero-actions .btn-primary,
.hero-actions .btn-ghost { display: inline-flex; align-items: center; gap: 9px; }
.btn-ico { width: 15px; height: 15px; flex: none; }

.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.stat-item { display: flex; flex-direction: column; gap: 6px; }

.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  padding: 13px 31px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.btn-primary:hover { background: var(--text); color: var(--bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 13px 32px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.btn-ghost-sm {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.btn-ghost-sm:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.btn-buy {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  padding: 9px 19px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-buy:hover { background: var(--text); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.btn-remove {
  background: transparent;
  border: 1px solid #3a2020;
  color: var(--accent2);
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.btn-remove:hover { background: var(--accent2); color: white; }

.btn-danger-sm {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger-sm:hover { background: var(--accent2); color: white; }

/* ===== BULK LAP DELETE ===== */
.lap-bulk-bar {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 0;
}
/* The table and the actions row share ONE horizontal scroller, so a wide
   table and the buttons scroll together (no second scrollbar). The actions
   row stretches to the table's full width, keeping the delete button pinned
   to the far right — under the last column, revealed as you scroll right. */
.lap-table-scroll {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}
.lap-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  margin-top: 16px;
}
.lap-actions-row .lap-pagination { margin-top: 0; flex: 0 0 auto; }
.lap-actions-row .lap-bulk-bar { margin: 0 0 0 auto; flex: 0 0 auto; }
.lap-bulk-delete {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.lap-bulk-delete:hover:not(:disabled) { background: var(--accent2); color: white; }
.lap-bulk-delete:disabled { opacity: 0.4; cursor: not-allowed; }
.lap-select, .lap-select-all { cursor: pointer; accent-color: var(--accent2); }
.lap-select-cell { text-align: center; width: 32px; }

/* ===== SECTION LABEL ===== */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}

.section-label::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--accent);
}

/* ===== FEATURED ===== */
.featured-section {
  padding: 80px 48px;
  border-top: 1px solid var(--border);
  max-width: 1400px;
  margin: 0 auto;
}

.featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.featured-visual {
  background: linear-gradient(135deg, #111110 0%, #1a1a00 50%, #0a0a08 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  position: relative;
  overflow: hidden;
  gap: 20px;
}

.featured-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,255,60,0.12) 0%, transparent 70%);
}

.car-icon {
  font-size: 120px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 40px rgba(232,255,60,0.3));
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.featured-info {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.featured-info h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 4px;
}

.car-name {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-size: 18px;
  color: var(--car-accent);
  margin-bottom: 28px;
}

.featured-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 32px;
}

.params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.param-item { display: flex; flex-direction: column; gap: 4px; }

.param-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.param-val { font-size: 14px; color: var(--text); font-weight: 500; }

.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ===== SETUPS GRID ===== */
.setups-section {
  padding: 80px 48px;
  border-top: 1px solid var(--border);
  max-width: 1400px;
  margin: 0 auto;
}

.setups-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 20px;
}

.setups-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 2px;
  line-height: 1;
}

.filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.filter-tab {
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.filter-tab.active, .filter-tab:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.setups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.setup-card {
  background: var(--surface);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
}

.setup-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.setup-card:hover { background: var(--card-hover); }
.setup-card:hover::after { width: 100%; }

.setup-category {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}

.setup-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  line-height: 1;
}

.setup-car {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ===== BAR CHARTS ===== */
.setup-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }

.bar-row { display: flex; align-items: center; gap: 12px; }

.bar-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  width: 60px;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 3px;
  background: var(--border);
}

.bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.8s ease;
}

.bar-fill.red { background: var(--accent2); }

.bar-val {
  font-size: 10px;
  color: var(--muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ===== SETUP CARD FOOTER ===== */
.setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.setup-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--accent);
  letter-spacing: 1px;
  line-height: 1;
}

.setup-price.large { font-size: 52px; }

.price-vat {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.card-actions { display: flex; gap: 8px; align-items: center; }

/* ===== ACHIEVEMENTS ===== */
.setup-achievement {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.bestseller { background: var(--accent2); color: white; }
.new-achievement { background: var(--accent); color: var(--bg); }
.featured-achievement { background: var(--surface); border: 1px solid var(--amber); color: var(--amber); }

/* ===== AI SECTION ===== */
.ai-section {
  padding: 60px 48px;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(rgba(20,18,15,0.93), rgba(20,18,15,0.93)),
    url('/img/copa-1.webp') center / cover no-repeat fixed;
  position: relative;
}

.ai-section::before {
  content: 'AI';
  position: absolute;
  right: -40px; top: -60px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 400px;
  color: rgba(232,255,60,0.03);
  pointer-events: none;
  z-index: 0;
}

.ai-inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ai-inner h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 16px;
}

.ai-inner h2 span {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  color: var(--accent);
}

.ai-inner > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 0;
}

/* Two-column advisor layout */
.advisor-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  align-items: start;
}

.advisor-left {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Grid items default to min-width:auto, so a wide child (the generated
     advice's damper table) would force the 1fr column past the viewport —
     and mobile hides body overflow-x, leaving the excess clipped and
     unreachable. Let the column shrink; wide children scroll themselves. */
  min-width: 0;
}

.advisor-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 16px;
}

.advisor-title span {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  color: var(--accent);
}

.advisor-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 32px;
}

/* AMS2 telemetry client download card */
.telemetry-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.telemetry-card-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.telemetry-card-body { flex: 1; min-width: 0; }
.telemetry-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.telemetry-card-tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
}
.telemetry-card-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px;
}
.telemetry-dl-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.telemetry-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 8px;
  padding: 12px 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.telemetry-dl-btn:hover {
  background: var(--text);
  color: var(--bg);
  transform: translateY(-2px);
}
/* Main download (.exe) — filled accent so it can't be missed */
.telemetry-dl-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255,32,32,0.35);
}
.telemetry-dl-btn--primary:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.telemetry-dl-note {
  font-size: 10px;
  opacity: 0.7;
}
@media (max-width: 560px) {
  .telemetry-dl-btn { flex: 1; justify-content: center; }
}

/* SmartScreen heads-up. The headline is always visible — a warning you have
   to click to open isn't a warning — with the "why" folded behind a summary
   so it stays a note rather than an obstacle next to the download button. */
.dl-smartscreen {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  background: var(--surface);
}
.dl-smartscreen strong { color: var(--text); }
.dl-smartscreen-lead { margin: 0; }
.dl-smartscreen-lead::before {
  content: "\26A0";     /* ⚠ */
  color: var(--amber);
  margin-right: 7px;
}
.dl-smartscreen > details { margin-top: 8px; }
.dl-smartscreen > details > summary {
  cursor: pointer;
  color: var(--amber);
  font-weight: 600;
  list-style: none;
}
.dl-smartscreen > details > summary::-webkit-details-marker { display: none; }
.dl-smartscreen > details > summary::after {
  content: " \25BE";    /* ▾ */
}
.dl-smartscreen > details[open] > summary::after { content: " \25B4"; }
.dl-smartscreen-body { padding-top: 8px; }
.dl-smartscreen-body p { margin: 0 0 8px; }
.dl-smartscreen-body p:last-child { margin-bottom: 0; }
.dl-smartscreen-body strong { color: var(--text); }

.advisor-right {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* see .advisor-left — same grid-item blowout applies */
}

.ai-form { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 1024px) {
  .advisor-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .advisor-left { position: static; }
}


.ai-input, .ai-select, .ai-textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.ai-input:focus, .ai-select:focus, .ai-textarea:focus {
  border-color: var(--accent);
}

.ai-select option { background: var(--bg); }

/* Dropdowns use monospace */
.ai-select,
.ai-select option,
.full-select { font-family: var(--font-mono); }

.ai-textarea {
  resize: vertical;
  min-height: 100px;
  grid-column: 1 / -1;
}

.ai-submit {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  padding: 15px 35px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
  margin-top: 8px;
}

.ai-submit:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }
/* Disabled is the advisor's submit before a sim, car and track are chosen.
   It has to read as not-yet rather than broken, and it must not lift on
   hover — a button that animates under the pointer is saying press me. */
.ai-submit:disabled,
.ai-submit[disabled] { opacity: .45; cursor: not-allowed; }
.ai-submit:disabled:hover,
.ai-submit[disabled]:hover { background: inherit; color: inherit; transform: none; }

/* ===== AUTH FORMS ===== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-field:last-of-type {
  margin-bottom: 0;
}

.form-field input {
  box-sizing: border-box;
}

.full-input {
  width: 100%;
}

.form-error {
  font-size: 11px;
  color: var(--accent2);
  margin-top: 4px;
}

.form-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-style: normal;
}

.auth-switch {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
}

.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-switch a:hover {
  color: var(--text);
  text-decoration: underline;
}

.auth-forgot {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  transition: color 0.2s;
}

.auth-forgot:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Email verification page */
.verify-email-display {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 14px 16px;
  border-radius: 2px;
  margin: 0;
  letter-spacing: 1px;
}

.verify-code-input {
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  font-weight: bold;
  font-family: var(--font-body);
}

.verify-code-input::placeholder {
  color: var(--border);
}

.resend-form {
  margin-top: 12px;
}

.resend-button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  padding: 0;
  transition: color 0.2s;
}

.resend-button:hover {
  color: var(--text);
  text-decoration: underline;
}

.login-success {
  background: rgba(52,168,83,0.1);
  border: 1px solid #22c55e;
  color: #22c55e;
  padding: 12px 16px;
  font-size: 12px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 2px;
  line-height: 1.6;
}

.login-success a {
  color: #22c55e;
}

/* Advisor form vertical layout */
.ai-form { display: flex; flex-direction: column; gap: 6px; }

.form-row-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

.full-select { width: 100%; }

/* Session type toggle */
.session-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.session-btn {
  flex: 1;
  cursor: pointer;
}

/* Visually hidden but still focusable — display:none would remove the radios
   from keyboard and screen-reader access entirely */
.session-btn input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.session-btn input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.session-btn span {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  transition: all 0.2s;
  cursor: pointer;
}

.session-btn input[type="radio"]:checked + span {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
  font-weight: 500;
}

.session-btn span:hover {
  border-color: var(--muted);
  color: var(--text);
}

/* AI Response */
.ai-response {
  margin-top: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 28px;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-response-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-response-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}

.ai-response-meta {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}

.meta-sep { margin: 0 6px; color: var(--border); }
/* Car light blue, track light green, the sim in its own ink — the same
   colours every lap table and leaderboard gives them. */
.ai-response-meta .ai-meta-car   { color: var(--car-accent); }
.ai-response-meta .ai-meta-track { color: var(--track-accent); }

.ai-response-text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
  white-space: pre-wrap;
}

/* ===== FOOTER ===== */
footer {
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 48px;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-inner p {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

.footer-ai { color: var(--accent) !important; }
.footer-feedback { color: var(--muted); text-decoration: underline; }
.footer-feedback:hover { color: var(--text); }

/* ===== DETAIL PAGE ===== */
.detail-section {
  padding: 60px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.detail-breadcrumb {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 40px;
}

.detail-breadcrumb a { color: var(--muted); }
.detail-breadcrumb a:hover { color: var(--text); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
}

.detail-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
  padding: 40px;
  position: relative;
}

.car-icon-large {
  font-size: 160px;
  filter: drop-shadow(0 0 60px rgba(232,255,60,0.25));
  animation: float 4s ease-in-out infinite;
}

.detail-category {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
}

.detail-achievements { display: flex; gap: 8px; }

.detail-info h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 8px;
}

.detail-car {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-size: 20px;
  color: var(--car-accent);
  margin-bottom: 24px;
}

.detail-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 32px;
}

.detail-bars { margin-bottom: 32px; }

.detail-params {
  margin-bottom: 40px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.detail-buy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== CART ===== */
.cart-section {
  padding: 60px 48px;
  max-width: 1000px;
  margin: 0 auto;
}

.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  letter-spacing: 2px;
  margin-bottom: 48px;
  line-height: 1;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.cart-items { display: flex; flex-direction: column; gap: 1px; background: var(--border); }

.cart-item {
  background: var(--surface);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cart-item-info { flex: 1; }

.cart-item-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.cart-item-car {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  color: var(--muted);
  font-size: 13px;
}

.cart-item-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--accent);
}

.cart-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.total-row {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--accent);
  letter-spacing: 2px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.cart-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ===== SUCCESS ===== */
.success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: 48px;
  gap: 24px;
}

.success-icon { font-size: 80px; }

.success-section h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  letter-spacing: 3px;
  color: var(--accent);
}

.success-section p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}

/* ===== ADMIN ===== */
.admin-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.admin-sidebar {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 24px;
}
.admin-sidebar-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.admin-nav-btn {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.admin-nav-btn:hover { background: var(--surface); color: var(--text); }
.admin-nav-btn--active { background: var(--surface); color: var(--text); }
.admin-content { flex: 1; min-width: 0; }
.admin-count {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  align-self: flex-end;
  padding-bottom: 4px;
}
.admin-section {
  padding: 60px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

/* The community charts on /admin/stats and their period buttons
   (stats-charts.js): two side by side where the admin column is wide enough,
   one below that, never narrower than the screen. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 20px;
  margin-top: 28px;
}
/* .lb-card sets padding 0 further down; the pair outranks it. */
.lb-card.stats-card { padding: 16px 16px 10px; overflow: visible; }
.stats-chart { margin: 0; }
.stats-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.stats-chart-title { font-size: 12px; color: var(--muted); }
.stats-chart-periods { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.stats-chart-periods button {
  background: transparent; color: var(--muted); border: 0; border-left: 1px solid var(--border);
  padding: 3px 9px; font: 11px var(--font-body); cursor: pointer;
}
.stats-chart-periods button:first-child { border-left: 0; }
.stats-chart-periods button:hover { color: var(--text); background: var(--surface2); }
.stats-chart-periods button[aria-pressed="true"] { color: var(--bg); background: var(--amber); }
.stats-chart[aria-busy="true"] .stats-chart-plot { opacity: 0.5; }
.stats-chart-plot { width: 100%; }
.stats-chart-plot svg { display: block; }
.stats-chart-grid { stroke: var(--border); stroke-width: 1; }
.stats-chart-day { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.stats-chart-axis { fill: var(--muted); font-size: 10px; font-family: var(--font-body); }
.stats-chart-bar { fill: var(--amber); opacity: 0.18; }
.stats-chart-area { fill: var(--amber); opacity: 0.10; }
.stats-chart-line { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; }
.stats-chart-dot { fill: var(--amber); }
.stats-chart-cursor { stroke: var(--muted); stroke-width: 1; }
.stats-chart-tip { fill: var(--text); font-size: 11px; font-family: var(--font-body); }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.alert-success {
  background: rgba(232,255,60,0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

/* Used by the admin pages' error flashes and form errors; unstyled until Oct 2026. */
.alert-error {
  background: rgba(255,32,32,0.08);
  border: 1px solid var(--danger);
  color: var(--text);
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

/* A wide admin table scrolls sideways instead of squeezing its columns to
   nothing. The body clips horizontal overflow, so without this a fixed-layout
   table on a phone gives its percentage-width columns no width at all — which
   is how /admin/tracks lost venue, layout and normalized name on mobile while
   the rem-width columns either side of them stayed put. Column widths inside
   such a table must therefore be absolute, with a min-width on the table
   itself; a percentage is a share of a width that no longer exists.
   The bulk-action row sits inside the same scroller so it stays aligned with
   the table it acts on, as .lap-table-scroll does. */
.admin-table-scroll {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* /admin/users is two dozen columns wide and as long as the user list, so a
   scroller of its own put its only horizontal scrollbar under the last row.
   There the page itself scrolls sideways instead: the body lets the table
   overflow, and the browser's own scrollbar — always at the foot of the
   window — moves it, as does shift+wheel or a trackpad swipe anywhere.
   Specific enough to beat mobile.css's body:has(.admin-layout) auto: with
   html and body both non-visible, the body becomes a scroller of its own and
   the window never moves. */
html body.admin-page-wide { overflow-x: visible; }
.admin-page-wide .admin-table-scroll { overflow-x: visible; }
.admin-page-wide .admin-table { width: auto; min-width: 100%; }

.admin-table th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--accent);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table tr:hover td { background: var(--surface); }

/* ===== ADMIN DRILL-DOWN TABLE (day → user → endpoint) ===== */
.admin-tree .tree-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
}

.admin-tree .tree-toggle:hover:not(:disabled) { color: var(--accent); }
.admin-tree .tree-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.admin-tree .tree-toggle:disabled { cursor: default; }
.admin-tree .tree-toggle:disabled .tree-caret { visibility: hidden; }

.admin-tree .tree-caret {
  display: inline-block;
  width: 10px;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.admin-tree .tree-toggle[aria-expanded="true"] .tree-caret { transform: rotate(90deg); }

/* Nesting depth — the caret column already eats ~18px per level. */
.admin-tree .tree-cell--user { padding-left: 40px; }
.admin-tree .tree-cell--endpoint { padding-left: 82px; color: var(--muted); }

.admin-tree .tree-cell--na { color: var(--muted); opacity: 0.5; }
.admin-tree .tree-cell--fail { color: #ff8f8f; }
.admin-tree .tree-cell--valid { color: #4ade80; }
.admin-tree .tree-cell--invalid { color: #ef4444; }

.admin-tree .tree-row--user td { background: rgba(255, 255, 255, 0.015); }
.admin-tree .tree-row--endpoint td { background: rgba(255, 255, 255, 0.03); font-size: 11px; }

.tag {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.tag-new { border-color: var(--accent); color: var(--accent); }

.admin-actions { display: flex; gap: 8px; align-items: center; }
.admin-credits-input {
  width: 52px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
}
.admin-credits-input:focus { outline: none; border-color: var(--accent); }

/* ===== ADMIN FORM ===== */
.admin-form { max-width: 900px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-group.full-width { grid-column: 1 / -1; }

.form-group label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.checkboxes { flex-direction: row; align-items: center; gap: 20px; }

.checkboxes label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-actions { display: flex; gap: 16px; align-items: center; }

.field-error {
  font-size: 11px;
  color: var(--accent2);
  display: block;
  margin-top: 4px;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  grid-column: 1 / -1;
  background: var(--surface);
  padding: 60px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .setups-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-card { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-inner { padding: 16px 20px; }
  nav ul { display: none; }
  .hero, .setups-section, .ai-section, .featured-section,
  .detail-section, .cart-section, .admin-section { padding: 60px 20px; }
  .setups-grid { grid-template-columns: 1fr; }
  .ai-inputs { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; padding: 32px 20px; }
  .hero-stats { gap: 24px; }
  .admin-table { font-size: 11px; }
  /* Stack the admin nav above the content. Beside it, its 160px plus the 40px
     gap is over half a phone's width — spent before the table it sits next to
     has any. Laid out as a row of chips it costs two lines instead. */
  .admin-layout { flex-direction: column; gap: 20px; }
  .admin-sidebar {
    width: 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .admin-sidebar-label { width: 100%; padding: 0 0 8px; margin-bottom: 0; }
  .admin-nav-btn { border: 1px solid var(--border); padding: 6px 10px; }
}

/* ===== NAV USER (Google avatar) ===== */
.nav-right { display: flex; align-items: center; gap: 12px; }

/* ===== NAV LAP COUNTER (community, all visitors) ===== */
.nav-laps { position: relative; }

.nav-laps-toggle {
  /* position + isolation so the 30-day strip can sit at z-index -1 behind
     the numbers without dropping behind the navbar itself; overflow so a
     full-height bar stops at the border radius. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.nav-laps-toggle:hover:not(:disabled) { border-color: var(--accent); }
.nav-laps-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.nav-laps-toggle:disabled { cursor: default; opacity: 0.6; }

.nav-laps-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
}

.nav-laps-today { color: var(--amber); font-variant-numeric: tabular-nums; }
.nav-laps-sep { color: var(--muted); }
.nav-laps-total { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Laps per day, last 30 days ─────────────────────────────────────────── */
/* A line with one vertex per UTC day in a viewBox 30 units wide by 100 tall,
   stretched to the box with preserveAspectRatio="none" — so the x spacing
   follows the box and the y is the 0–100 level LapCountService computed,
   straight from the data. The stretch would also thicken the stroke unevenly,
   which is what vector-effect="non-scaling-stroke" on the polylines is for:
   it keeps the line at the px width set here whatever the box's shape.
   Amber is what has piled up (the site's rule for the total); the last
   segment, today still being driven, takes the live blue instead so a line
   that dips at the end doesn't read as a slump. */
.nav-laps-line {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.nav-laps-line--today { stroke: var(--live); }

/* Always a background: absolutely filling whichever positioned, isolated box
   it sits in (the button, the panel body, the mobile drawer's block), behind
   the text at z-index -1, faint, and out of the way of the pointer so it
   never steals a click or a row hover. No fill under the line — a filled
   area behind text is a second surface, and the text has to stay on the
   panel's. */
.nav-laps-spark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  opacity: 0.3;
  pointer-events: none;
}

.nav-laps-toggle:hover:not(:disabled) .nav-laps-spark { opacity: 0.45; }

/* The panel body: the drivers-now line, the header and the per-sim rows,
   with the month's line spanning behind all of them. The box is what the
   spark fills, so it is the positioned, isolated one — not the panel, whose
   footnote stays clear of it. */
.nav-laps-panel-body {
  position: relative;
  isolation: isolate;
}

/* Fainter than on the button: the panel's line runs behind three lines of
   text and a header, and it has to stay under all of them. */
.nav-laps-spark--panel { opacity: 0.25; }

.nav-laps-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 260px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.nav-laps-panel-head,
.nav-laps-row,
.mobile-nav-laps .nav-laps-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 6px 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.nav-laps-panel-head {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* Heat shading — two 0-100 numbers set per row by LapCountService, each
   ranking the sims against the busiest one in its own column.

   --laps-heat is the all-time total: it drives the edge bar, a tint that
   fades out across the row, and the total itself warming from muted towards
   amber, all off the one number so they can't disagree.

   --laps-heat-24h is the last 24 hours, and it gets its own hue rather than
   a second amber: blue is what the live dot above the list already means,
   and two amber ramps side by side on different scales would read as one
   comparison. Amber is what has piled up, blue is what is happening.

   Rows without either variable (any other .nav-laps-row on the page) fall
   back to 0 and look exactly as they did before any of this. */
.nav-laps-row {
  --laps-heat: 0;
  --laps-heat-24h: 0;
  --heat: calc(var(--laps-heat) / 100);
  align-items: center;
  background-image: linear-gradient(
    90deg,
    rgba(245, 166, 35, calc(0.11 * var(--heat))) 0%,
    rgba(245, 166, 35, 0) 78%);
  /* The edge bar carries the ranking on its own — the tint alone is too faint
     to compare across rows once the list is more than three sims long. Drawn
     as an inset shadow rather than a positioned pseudo-element because the row
     is a grid: an absolutely positioned child of a grid container hangs off
     the padding edge, which would inset the bar by the row's own 14px.
     Floored at 0.18, not scaled from zero — the quietest sim is still a sim,
     and a bar that fades to nothing reads as a rendering fault, not as
     "fewest". */
  box-shadow: inset 2px 0 0 rgba(245, 166, 35, calc(0.18 + 0.82 * var(--heat)));
  transition: background-color 0.15s;
}

/* background-color, so hover layers over the heat gradient instead of
   replacing it — the shading has to survive the pointer passing across it.
   Translucent rather than var(--surface), which is opaque and would punch a
   row-shaped hole in the 30-day line running behind the rows. */
.nav-laps-row:hover { background-color: rgba(240, 239, 232, 0.05); }

.nav-laps-sim { color: var(--text); }

/* Each number carries the heat computed from it, on its own colour ramp. The
   plain var(--muted) first is the fallback for a browser without color-mix,
   which then gets the panel exactly as it read before the shading existed. */
.nav-laps-row-24h {
  color: var(--muted);
  color: color-mix(in srgb, var(--live) calc(var(--laps-heat-24h) * 1%), var(--muted));
  /* A sim nobody has driven today is a zero, and a zero should not be the one
     number on the row asking to be read. */
  opacity: calc(0.65 + 0.35 * min(1, var(--laps-heat-24h)));
}

.nav-laps-row-total {
  color: var(--muted);
  color: color-mix(in srgb, var(--amber) calc(var(--laps-heat) * 1%), var(--muted));
}

/* ── Drivers on track right now ─────────────────────────────────────────── */
.nav-laps-live {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 14px 9px;
  font-size: 12px;
}

.nav-laps-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
  opacity: 0.5;
}

.nav-laps-toggle .nav-laps-dot { width: 6px; height: 6px; align-self: center; }

.nav-laps-dot--live {
  background: var(--live);
  opacity: 1;
  animation: navLapsPulse 2.4s ease-out infinite;
}

.nav-laps-live-count {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nav-laps-live .nav-laps-dot--live + .nav-laps-live-count { color: var(--live); }

.nav-laps-live-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Expanding ring rather than a fading dot: it reads as a heartbeat at a
   glance and costs nothing to composite. */
@keyframes navLapsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(77, 163, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-laps-dot--live { animation: none; }
}

.nav-laps-panel-foot {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding: 8px 14px 0;
  font-size: 10px;
  color: var(--muted);
}

.nav-laps-panel-foot > div + div { margin-top: 3px; }

.mobile-nav-laps .nav-laps-panel-foot { padding-bottom: 4px; }

.mobile-nav-laps {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.mobile-nav-laps-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 14px 8px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-nav-laps-head strong { color: var(--amber); font-weight: 600; }

.nav-user { 
  display: flex; 
  align-items: center; 
  gap: 12px;
  padding-right: 8px;
  border-right: 1px solid var(--border);
}

.nav-avatar-link { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-avatar-link:hover {
  opacity: 0.8;
}

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
  transition: all 0.2s;
}

.nav-avatar-link:hover .nav-avatar {
  border-color: var(--accent2);
  box-shadow: 0 0 8px rgba(232, 255, 60, 0.3);
}

.nav-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.nav-badge-count {
  position: absolute;
  bottom: -3px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a08;
  border: 2px solid var(--bg, #0a0a08);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
}

.nav-avatar-flag {
  position: absolute;
  bottom: -3px;
  left: -5px;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--bg, #0a0a08);
  object-fit: cover;
}

.nav-username {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-avatar-link:hover .nav-username {
  color: var(--accent);
}

.nav-logout-form { 
  display: inline;
  margin: 0;
}

.nav-signin {
  background: var(--accent);
  color: var(--bg);
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.2s;
  font-weight: 500;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  display: inline-block;
  text-decoration: none;
}

.nav-signin:hover {
  background: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 255, 60, 0.2);
}

/* ===== LANGUAGE SWITCHER ===== */
/* One dropdown: a button showing the current flag and code, and a panel of
   flag + language name. Flags are images, never flag emoji — see the comment
   on the fragment in layout.html. Desktop version sits in nav-right; mobile
   version sits under the mobile drawer's nav links and opens downward. */
.nav-lang, .mobile-nav-lang {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
}
.mobile-nav-lang { margin: 4px 0 8px; }

.nav-lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim, rgba(240, 239, 232, 0.6));
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.nav-lang-toggle:hover,
.nav-lang-toggle[aria-expanded="true"] {
  color: var(--text);
  background: rgba(240, 239, 232, 0.08);
  border-color: var(--border);
}
.nav-lang-caret {
  width: 8px;
  height: 5px;
  transition: transform 0.2s;
}
.nav-lang-toggle[aria-expanded="true"] .nav-lang-caret { transform: rotate(180deg); }

/* Matches the home page's language pills (.hero-flags): same size, same hairline
   edge, and the same habit of holding more than one flag — English carries US
   and GB, because the voices come in both. */
.nav-lang-flags {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.nav-lang-flags img {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.nav-lang-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 195px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
/* In the drawer there is no nav bar to hang off, and plenty of room below. */
.nav-lang-panel--below { right: auto; left: 0; }

.nav-lang-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--text-dim, rgba(240, 239, 232, 0.6));
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0;
  transition: all 0.2s;
}
.nav-lang-link:hover { color: var(--text); background: rgba(240, 239, 232, 0.08); }
.nav-lang-link.nav-lang-active { color: var(--accent); font-weight: 700; }
/* A tick on the one you are already reading, so the panel says which is
   current without relying on the accent colour alone. */
.nav-lang-link.nav-lang-active::after {
  content: "\2713";
  margin-left: auto;
  font-size: 12px;
}

/* ===== NAV ICONS =====
   One small line icon in front of every menu item, taken from the sprite at
   the top of the nav fragment. They inherit the item's colour, so an active
   or hovered item's icon lights with its text. */
.nav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-ico { width: 15px; height: 15px; flex: none; }
nav ul a { display: inline-flex; align-items: center; gap: 7px; }
nav ul a .nav-ico, .nav-drop-toggle .nav-ico { width: 14px; height: 14px; opacity: 0.85; }
.nav-drop-link .nav-ico { opacity: 0.7; }
.nav-drop-link:hover .nav-ico, .nav-drop-link.nav-active .nav-ico { opacity: 1; }
.mobile-nav-lbl { display: inline-flex; align-items: center; gap: 10px; }
.mobile-nav-link .nav-ico { width: 17px; height: 17px; opacity: 0.8; }
.mobile-nav-sub .nav-ico { width: 15px; height: 15px; }
/* The same icons ahead of the profile page's section headings. */
.section-ico { width: 18px; height: 18px; flex: none; color: var(--accent); }
.profile-section-title:has(> .section-ico) { display: flex; align-items: center; gap: 10px; }

/* ===== NAV DROPDOWNS ===== */
/* Improve, My Racing and the avatar's account menu. Same panel as the language
   switcher; the rows are plain links, so they reset the uppercase, spaced-out
   styling the bar's own links get from `nav ul a`. */
.nav-drop { position: relative; }
/* Buttons and links sit on one line: centre the row, and give each item the
   same box so a toggle and a plain link share a baseline. */
nav ul { align-items: center; }
nav ul > li { display: flex; align-items: center; }

.nav-drop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-drop-toggle:hover,
.nav-drop-toggle[aria-expanded="true"] { color: var(--text); }
.nav-drop-toggle.nav-active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}
.nav-drop-toggle[aria-expanded="true"] .nav-lang-caret,
.nav-avatar-link[aria-expanded="true"] .nav-lang-caret { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  z-index: 60;
  min-width: 210px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.nav-drop-panel--right { left: auto; right: 0; top: calc(100% + 10px); }

nav ul a.nav-drop-link,
.nav-drop-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  color: var(--text-dim, rgba(240, 239, 232, 0.6));
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
nav ul a.nav-drop-link:hover,
.nav-drop-link:hover { color: var(--text); background: rgba(240, 239, 232, 0.08); }
nav ul a.nav-drop-link.nav-active {
  color: var(--accent);
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 9px;
}
.nav-drop-link--sep { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 11px; }
nav ul a.nav-drop-link--sep { border-top: 1px solid var(--border); }
.nav-drop-signout:hover { color: var(--accent2); }

.nav-drop-head {
  padding: 6px 16px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The avatar is the account menu's toggle now, so it is a button. */
button.nav-avatar-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
}

/* Get the Client — the one link in the bar drawn as a button. */
nav ul a.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
}
nav ul a.nav-cta:hover { background: var(--accent); color: var(--bg); }
nav ul a.nav-cta.nav-active { border-bottom: 1px solid var(--accent); padding-bottom: 7px; }

/* Your Laps and Personal Bests are full-width tables with no room for the
   sidebar, so they carry the same nav as a row of tabs above the content. */
.profile-nav-strip { margin: 0 0 24px; }
.profile-nav-strip .profile-card { display: none; }
.profile-nav-strip .profile-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-nav-strip .profile-nav-btn { width: auto; padding: 8px 14px; }
.profile-nav-strip .profile-nav > form { display: none; }

/* ===== LOGIN PAGE ===== */
.login-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  position: relative;
  overflow: hidden;
}

.login-bg-text {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 320px;
  color: rgba(232,255,60,0.03);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 48px 44px;
  position: relative;
  z-index: 1;
}

.login-brand {
  text-align: center;
  margin-bottom: 36px;
}

.login-brand .logo img { height: 34px; margin: 0 auto; }

.login-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 12px;
  letter-spacing: 0.3px;
}

.login-error {
  background: rgba(255,75,31,0.1);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  padding: 12px 16px;
  font-size: 12px;
  margin-bottom: 20px;
  text-align: center;
}

/* ── Device pairing (/link) ───────────────────────────────────────────────
   The code is the one thing on this page the driver must actually compare
   against another screen, so it gets the size and the monospace. */
.link-lead {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 20px;
  text-align: center;
}
.link-lead strong { color: var(--text); }

.link-code-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  margin-bottom: 18px;
  text-align: center;
}
.link-code-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.link-code {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--amber);
  word-break: break-all;
}
.link-code-device {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}

.link-note {
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 20px;
  text-align: center;
}

/* The success/expired states end in a link styled as the primary button. */
.link-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
}

@media (max-width: 460px) {
  .link-code { font-size: 22px; letter-spacing: 2px; }
}

/* Google button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 15px 24px;
  background: white;
  color: #3c4043;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  margin-bottom: 20px;
}

.btn-google:hover {
  background: #f8f8f8;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.google-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Steam button */
.btn-steam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 15px 24px;
  background: #171a21;
  color: #c7d5e0;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  margin-bottom: 20px;
}

.btn-steam:hover {
  background: #1b2838;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.steam-icon { width: 20px; height: 20px; flex-shrink: 0; fill: #66c0f4; }

.login-terms {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
  letter-spacing: 0.3px;
  margin-bottom: 28px;
}

.login-terms a { color: var(--accent); }
.login-terms a:hover { text-decoration: underline; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-divider span {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.login-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-perks li {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}

.perk-icon { font-size: 16px; flex-shrink: 0; }

/* ===== PROFILE PAGE ===== */
.profile-section {
  padding: 60px 48px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Full-width variant for table-heavy pages (no sidebar) */
.profile-section--wide {
  max-width: 1600px;
}

.lb-section {
  padding: 60px 48px;
  max-width: 1700px;
  margin: 0 auto;
  position: relative;
}
/* Decorative racing-car silhouette in the header area */
.lb-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.lb-track-image {
  height: 120px;
  width: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.lb-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* leaderboard header starts right at the top of the section */
.lb-section--tight { padding-top: 28px; }
/* filter pills + track/car search nested between the title and stats — wide and slim */
.lb-header-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
}
.lb-sim-pills--header { margin-bottom: 0; }
.lb-filters--header { margin-bottom: 0; }
/* telemetry client card, now at the bottom of the page — full width, roomy */
.lb-footer-card {
  margin: 28px 0 0;
  align-items: center;
}
.telemetry-card-token {
  margin-left: auto;
  padding-left: 18px;
  border-left: 1px solid var(--border);
  flex: 0 0 auto;
  max-width: 380px;
}
.telemetry-card-token .home-token-label { margin-bottom: 8px; }
.telemetry-card-token .api-token-box { margin-bottom: 0; padding: 8px 12px; }
.telemetry-card-token .home-token-auth { margin-top: 0; }

.lb-header-stats {
  display: flex;
  gap: 32px;
  padding-bottom: 6px;
}

.lb-header-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.lb-header-stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--text);
  line-height: 1;
}

.lb-header-stat-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.profile-sidebar {
  width: 220px;
  flex-shrink: 0;
}

.profile-main {
  flex: 1;
  min-width: 0;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 20px;
  margin-bottom: 12px;
  text-align: center;
}

.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  object-fit: cover;
  flex-shrink: 0;
}

.profile-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.profile-avatar-flag {
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 24px;
  height: 17px;
  border-radius: 2px;
  border: 2px solid var(--bg, #0a0a08);
  object-fit: cover;
}

.profile-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 4px;
}

.profile-email {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  word-break: break-all;
}

.profile-achievement {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  display: inline-block;
  padding: 3px 10px;
}

.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
}

.profile-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

.profile-nav-btn:hover {
  border-color: var(--muted);
  color: var(--text);
}

.profile-nav-btn--active {
  border-color: var(--text);
  color: var(--text);
}

.profile-nav-btn--danger {
  border-color: var(--accent2);
  color: var(--accent2);
}

.profile-nav-btn--danger:hover {
  background: var(--accent2);
  color: white;
}

/* The one red card on the page: deleting the account. Bordered and headed in
   the accent rather than tinted all over — a card that is uncomfortable to
   read is one people click through to get past, which is the opposite of what
   a danger zone is for. */
.profile-edit-card--danger {
  border-color: var(--accent2);
}

.profile-edit-card--danger .profile-section-title {
  color: var(--accent2);
}

.danger-zone-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 10px;
}

.danger-zone-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px;
}

.danger-zone-list {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}

.profile-edit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px;
  margin-bottom: 32px;
}

.profile-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  margin: 0 0 24px;
  color: var(--text);
}

.profile-form { display: flex; flex-direction: column; gap: 0; }

/* Driving Patterns — cross-corner habits the AI coach recorded; fixed ones
   stay listed, crossed out, as a record of progress. */
.pattern-class {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin: 18px 0 4px;
}
.pattern-class:first-of-type { margin-top: 0; }
.pattern-list { list-style: none; margin: 0 0 8px; padding: 0; }
.pattern-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.pattern-item:last-child { border-bottom: none; }
.pattern-label { color: var(--text); }
.pattern-date  { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pattern-item--fixed .pattern-label {
  text-decoration: line-through;
  opacity: 0.55;
}
.pattern-item--fixed .pattern-date { color: #3ecf6e; }

.profile-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ===== LAP RECORD TABLES ===== */
.lap-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}
/* Force every cell element (pills, dates, names, buttons) to monospace */
.lap-table th,
.lap-table td,
.lap-table a,
.lap-table span,
.lap-table .sim-pill,
.lap-table .lb-advisor-btn { font-family: var(--font-mono); }
.lap-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.lap-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.lap-table tr:last-child td { border-bottom: none; }
.lap-table tr:hover td { background: var(--surface2); }
.lap-table .lap-time { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.5px; }
.lap-table .lap-invalid { color: var(--muted); }
.lap-table .lap-valid-tag   { color: #3a9e6e; font-size: 11px; margin-left: 5px; cursor: default; }
.lap-table .lap-invalid-tag { color: #c96a3a; font-size: 11px; margin-left: 5px; cursor: default; }
.lap-table .lap-car { color: var(--car-accent); }
.lap-table .lap-track { color: var(--track-accent); font-size: 11px; }
/* Rank/position cells reuse .lap-track for sizing but are not track names — keep them neutral. */
.lap-table .lap-track.lb-rank { color: var(--muted); }
/* Podium — top 3 rows of a ranked leaderboard table get a medal accent, the
   timing-tower convention for "this position matters." Position-based
   (nth-child), so it survives client-side re-sorting in leaderboard.js. */
.lap-table.sortable tbody tr:nth-child(1) td.lb-rank { color: var(--amber); font-size: 13px; font-weight: 700; box-shadow: inset 3px 0 0 var(--amber); }
.lap-table.sortable tbody tr:nth-child(2) td.lb-rank { color: #c9c9c0;      font-size: 13px; font-weight: 700; box-shadow: inset 3px 0 0 #c9c9c0; }
.lap-table.sortable tbody tr:nth-child(3) td.lb-rank { color: #c17a4a;      font-size: 13px; font-weight: 700; box-shadow: inset 3px 0 0 #c17a4a; }
/* …except on a table that lists a history rather than a ranking (.lb-unranked,
   e.g. one driver's own laps newest-first). There the first row is simply the
   most recent lap, and a medal on it is an award for nothing — what's worth
   marking on such a table is the best time itself, wherever it falls. */
.lap-table.lb-unranked tbody tr:nth-child(-n+3) td.lb-rank {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  box-shadow: none;
}
/* "Your Laps" recent table: give the Track column a wide, fixed footprint so
   names sit on one line in the common case; the max caps the very longest,
   which wrap to a second line. min-width is what actually reserves the width —
   max-width alone only caps and lets the column collapse narrow. */
#recentLapsTable .laps-track-col { min-width: 260px; max-width: 360px; }
#recentLapsTable .laps-track-label {
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
}

#recentLapsTable .lap-actions-cell { white-space: nowrap; }

/* Desktop: keep the whole table inside the card instead of scrolling sideways.
   With every optional column on (3 sectors, compound, speed, fuel, 2 temps,
   rain) this is ~19 columns, so the width has to come from somewhere — take it
   from cell padding, the roomy Track column and the per-row action buttons
   rather than from the data. .lap-table-scroll stays as the safety net for the
   rare row that still doesn't fit. */
@media (min-width: 721px) {
  #recentLapsTable th,
  #recentLapsTable td { padding-left: 7px; padding-right: 7px; }
  #recentLapsTable .laps-track-col { min-width: 150px; max-width: 210px; }
  #recentLapsTable .lap-car {
    max-width: 150px;
    white-space: normal;
    overflow-wrap: break-word;
  }
  /* Action buttons wrap into a compact block instead of one long nowrap row */
  #recentLapsTable .lap-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 150px;
  }
}
.lap-table .lap-sector { color: var(--muted); font-size: 11px; }
/* Fastest of a lap's own three sectors — a self-relative "purple sector" cue */
.lap-table .lap-sector--fastest { color: var(--amber); font-weight: 600; }
/* Sized like .lb-date: the cell carries "yyyy-MM-dd HH:mm" once main.js has
   restated it in the reader's timezone, and without a width it wraps. */
.lap-table .lap-date { color: #c9c9c0; font-size: 11px; min-width: 100px; white-space: nowrap; }

/* Pace-trend sparkline, drawn client-side from the Recent Laps table */
.lap-trend {
  display: inline-block;
  width: 150px;
  height: 28px;
  vertical-align: middle;
  margin-left: 16px;
}
.lap-trend-svg { width: 100%; height: 100%; overflow: visible; }
.lap-trend-line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.lap-trend-dot { fill: var(--success); }
/* Recent-laps pagination row */
.lap-pagination { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.lap-pagination .lap-page-info {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
}
/* Filter selects reuse the leaderboard filter input styling */
select.lb-filter-input option { background: var(--bg); }
.lap-table .lap-achievement {
  display: inline-block;
  padding: 2px 7px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted);
}
.lap-table .lap-achievement--valid { border-color: var(--accent); color: var(--accent); }
.api-token-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 12px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.api-token-value {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accent);
  word-break: break-all;
}
.api-token-value--empty { color: var(--muted); font-style: normal; }
.token-copy-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.token-copy-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.token-copy-btn--copied { border-color: var(--text); color: var(--text); }
.lap-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
}

/* ===== LEADERBOARD ===== */
.lb-sim-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lb-sim-pills .sim-pill {
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
  font-size: 11px;
  padding: 4px 12px;
}
.lb-sim-pills .sim-pill:hover { opacity: 1 !important; }
.lb-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.lb-filter-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-radius: 4px;
  outline: none;
  width: 200px;
  transition: border-color 0.2s;
}
.lb-filter-input:focus { border-color: var(--accent); }
.lb-filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.lb-filter-btn:hover { border-color: var(--text); color: var(--text); }
/* Caption for a lone filter control that has no "All …" option to name it —
   the rows-per-page select on /admin/laps. Same mono caption as .lap-page-info
   sitting opposite it in the pager. */
.lb-filter-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lb-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.lb-filter-check:hover { border-color: var(--text); }
.lb-filter-check input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.lb-filter-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
}
.lb-filter-clear {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: underline;
  padding: 8px 4px;
  /* Also used on a <button> (the client-side Personal Bests filter), which
     needs the browser's default chrome stripped to match the links. */
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.lb-filter-clear:hover { color: var(--text); }
.lb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  /* Wide tables scroll horizontally inside the card instead of overflowing the
     page (which the body's overflow-x:hidden would otherwise clip). */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.lb-driver-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lb-driver-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface2);
}
/* A checkbox row inside a profile form field — several under one label. */
.profile-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.profile-check input { accent-color: var(--accent); cursor: pointer; margin: 0; flex-shrink: 0; }

/* Public avatar decorations — the opt-in flag and achievement count. Same
   idea as .nav-avatar-flag / .nav-badge-count, scaled down: a leaderboard
   avatar is 24px against the nav's 32px, so the nav's sizes would swamp it. */
.lb-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.lb-avatar-count {
  position: absolute;
  bottom: -2px;
  right: -4px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a08;
  border: 1px solid var(--bg, #0a0a08);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
}
.lb-avatar-flag {
  position: absolute;
  bottom: -2px;
  left: -4px;
  width: 13px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid var(--bg, #0a0a08);
  object-fit: cover;
}
.lb-driver {
  color: var(--driver-accent);
  font-size: 12px;
}
.lb-date {
  color: var(--muted);
  font-size: 11px;
  min-width: 100px;
  white-space: nowrap;
}
#lb-table .lap-car { min-width: 160px; }
.lb-track-cell {
  color: var(--track-accent);
  font-size: 11px;
  user-select: none;
  min-width: 280px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}
#lb-table .lap-track {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 320px;
  line-height: 1.3;
}
#lb-table .lap-time {
  white-space: nowrap;
  min-width: 90px;
}
/* Numeric count columns (Cars / Drivers) */
.lb-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Compare button — leaderboard best vs. the viewer's own personal best */
.lb-compare-cell { text-align: center; white-space: nowrap; }
.lb-compare-btn {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
}
a.lb-compare-btn:hover { box-shadow: 0 0 0 1px currentColor; }
.lb-compare-btn--win  { color: var(--success); border-color: var(--success); }
.lb-compare-btn--lose { color: var(--amber);   border-color: var(--amber); }

/* Gap-to-leader column — only shown on tables where every row is the same
   physical lap (drivers at a car+track, cars at a track, a driver's own laps),
   so the delta is a real interval, not an apples-to-oranges comparison.
   Reads in the timing-tower yellow on every table that shows it.

   Qualified with `.lap-table td` on purpose: `.lap-table td` sets its own
   colour, and a bare `.lb-gap` is the weaker selector, so the cell would
   render in the default text colour however late the rule appears. */
.lap-table td.lb-gap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber);
}
.lap-table td.lb-gap--leader {
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 10px;
}
/* Clickable navigation rows */
.lb-track-row, .lb-car-row { cursor: pointer; }
.lb-track-row:hover, .lb-car-row:hover { background: var(--card-hover); }
.lb-track-name { color: var(--track-accent); text-decoration: none; }
.lb-track-row:hover .lb-track-name, .lb-track-name:hover { color: #b4f7b4; }
/* Best lap time — bold white so the key metric stands out */
.lap-table .lap-time.lap-time--best { color: #ffffff; font-weight: 700; text-shadow: none; }
/* Session-conditions versus table on the analysis page: your value | attribute | ref value */
.ana-cond-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.ana-cond-table th {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.ana-cond-table th.ana-cond-you { text-align: right; color: var(--accent); width: 42%; }
.ana-cond-table th.ana-cond-ref { text-align: left;  color: #4aa3ff;      width: 42%; }
.ana-cond-table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ana-cond-table tr:last-child td { border-bottom: none; }
.ana-cond-table tr:hover td { background: var(--surface2); }
.ana-cond-attr {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ana-cond-val { color: var(--text); }
.ana-cond-val--user { text-align: right; }
.ana-cond-val--ref  { text-align: left; }
/* Values that differ between the two laps — flagged amber on both sides */
.ana-cond-val--diff { color: #f5a623; font-weight: 700; }

/* Car-setup widget on the analysis page: tyre pressures on a top-down car,
   then the electronics and the brake-bias gauge. You in the accent, the
   reference in blue, a difference worth noticing in the conditions amber. */
.ana-setup { margin-top: 16px; padding: 14px 16px; }
/* The cars across the top, the settings table under them. */
.ana-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 10px;
}
/* Centred in the card: the cars, and the table and bias gauge under them. */
.ana-setup-side { max-width: 560px; width: 100%; margin: 0 auto; }
.ana-setup-grid--one {
  grid-template-columns: minmax(0, 300px) minmax(0, 560px);
  justify-content: center;
  gap: 40px;
}
.ana-setup-cars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 32px;
  max-width: 300px;
  margin: 0 auto;
}
.ana-setup-cars--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 680px;
}
.ana-setup-carname {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ana-setup-carname--user { color: var(--accent); }
.ana-setup-carname--ref  { color: #4aa3ff; }
.ana-setup-sub {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ana-setup-car {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 64px;
  row-gap: 44px;
  max-width: 300px;
  margin: 0 auto;
  font-family: var(--font-mono);
}
.ana-setup-body {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 46px;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 22px 22px 14px 14px;
  background: var(--surface2);
}
.ana-setup-tyre {
  position: relative;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
  line-height: 1.35;
}
.ana-setup-corner {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ana-setup-val { font-family: var(--font-mono); font-size: 13px; }
.ana-setup-val--user { color: var(--accent); }
.ana-setup-val--ref  { color: #4aa3ff; }
.ana-setup-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.ana-setup--notable .ana-setup-delta { color: #f5a623; font-weight: 700; }
.ana-setup-tyre--flag { border-color: #f5a623; }
/* The temperature sits under the pressure, set off by a hairline. */
.ana-setup-press + .ana-setup-temp {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ana-setup-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.ana-setup-table th {
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.ana-setup-th--user { color: var(--accent); }
.ana-setup-th--ref  { color: #4aa3ff; }
.ana-setup-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
.ana-setup-table tr:last-child td { border-bottom: none; }
.ana-setup-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ana-setup-bias { margin-top: 16px; }
.ana-setup-bias-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ana-setup-bias-head .ana-setup-label { margin-right: auto; }
.ana-setup-gauge {
  position: relative;
  height: 8px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface2), var(--border));
}
.ana-setup-mark {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  transform: translateX(-50%);
}
.ana-setup-mark--user { background: var(--accent); }
.ana-setup-mark--ref  { background: #4aa3ff; }
.ana-setup-gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* The telemetry page's card: the same car, sized to its content. The charts
   are what that page is for, so the setup takes a corner of it, not a row. */
.tele-setup .ana-setup { width: fit-content; max-width: 100%; margin-top: 12px; padding: 10px 14px; }
.tele-setup .ana-setup-grid { margin-top: 6px; }
.tele-setup .ana-setup-grid--one { grid-template-columns: 210px minmax(0, 250px); gap: 28px; }
.tele-setup .ana-setup-cars,
.tele-setup .ana-setup-car { max-width: 210px; }
.tele-setup .ana-setup-car { column-gap: 30px; row-gap: 10px; }
.tele-setup .ana-setup-body { width: 22px; border-radius: 10px 10px 7px 7px; }
.tele-setup .ana-setup-sub { margin-bottom: 6px; font-size: 9px; }
.tele-setup .ana-setup-tyre { padding: 4px 6px; line-height: 1.25; }
.tele-setup .ana-setup-corner { font-size: 9px; }
.tele-setup .ana-setup-val { font-size: 12px; }
.tele-setup .ana-setup-press + .ana-setup-temp { margin-top: 3px; padding-top: 3px; }
.tele-setup .ana-setup-table { font-size: 12px; }
.tele-setup .ana-setup-table td { padding: 4px 8px; }
.tele-setup .ana-setup-bias { margin-top: 10px; }
.tele-setup .ana-setup-gauge { margin-top: 8px; height: 6px; }

/* Phones keep both columns — the two cars, or the one car and its table —
   side by side, so each car gets half the width: a slim body, tight gaps. */
@media (max-width: 760px) {
  .ana-setup { padding: 12px 10px; }
  .ana-setup-grid--one { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ana-setup-cars--two { gap: 16px 12px; }
  .ana-setup-car { column-gap: 14px; row-gap: 14px; }
  .ana-setup-body { width: 8px; border-radius: 4px; }
  .ana-setup-tyre { padding: 5px 2px; }
  .ana-setup-val { font-size: 12px; }
  .ana-setup-delta { font-size: 10px; }
  .ana-setup-corner, .ana-setup-carname { letter-spacing: 1px; }
  .ana-setup-table { font-size: 12px; }
  .ana-setup-table th, .ana-setup-table td { padding: 5px 4px; }
  .tele-setup .ana-setup { width: auto; }
  .tele-setup .ana-setup-grid--one { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tele-setup .ana-setup-car { column-gap: 14px; }
  .tele-setup .ana-setup-body { width: 8px; border-radius: 4px; }
}

/* Best lap in the Recent Laps table */
.lap-table tr.lap-best-row td { background: rgba(62, 207, 110, 0.08); }
.lap-table tr.lap-best-row td:first-child { box-shadow: inset 3px 0 0 #3ecf6e; }
.lap-table tr.lap-best-row:hover td { background: rgba(62, 207, 110, 0.14); }
.lap-table tr.lap-best-row .lap-time { color: #ffffff; font-weight: 700; }
/* Sortable column headers */
.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable:hover { color: var(--text); }
.th-sortable.sort-asc::after  { content: " \25B2"; font-size: 8px; color: var(--accent); }
.th-sortable.sort-desc::after { content: " \25BC"; font-size: 8px; color: var(--accent); }
/* Breadcrumb on drill-down pages */
.lb-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 18px; letter-spacing: 0.5px; }
.lb-breadcrumb a { color: var(--muted); text-decoration: none; }
.lb-breadcrumb a:hover { color: var(--accent); }
.lb-breadcrumb .sep { margin: 0 8px; opacity: 0.6; }
.lb-breadcrumb .current { color: var(--text); }
/* Car / track accent spans — breadcrumbs, page headers, subtitles */
.bc-car   { color: var(--car-accent); }
.bc-track { color: var(--track-accent); }
.lb-breadcrumb a:hover .bc-car,
.lb-breadcrumb a:hover .bc-track { color: var(--accent); }
.lb-expand-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.2s;
  vertical-align: middle;
}
.lb-expand-icon--open { transform: rotate(180deg); color: var(--accent); }
.lb-detail-row td,
.lb-cars-row td,
.lb-drivers-row td { padding: 0 !important; border-bottom: 1px solid var(--border); }
.lb-detail-cell {
  padding: 0 !important;
  background: var(--surface2);
}
.lb-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.lb-detail-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
}
.lb-detail-count {
  font-size: 11px;
  color: var(--muted);
}
.lb-detail-table {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--surface2);
}
.lb-detail-table th,
.lb-detail-table td { background: transparent; }
.lb-detail-gold td { background: var(--amber-soft) !important; }
.lb-detail-gold .lap-time { color: var(--amber); font-weight: 600; }
.lb-advisor-btn {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.lb-advisor-btn:hover {
  background: var(--text);
  color: var(--bg);
}

/* ===== PAGE ACTION BUTTONS (telemetry / analysis headers) =====
   .lb-advisor-btn above is a table-row control — 10px type, 4px padding —
   and it was doing duty as the toolbar on the lap pages too, where every
   action came out the same weight: the one thing you came to do looked
   exactly like "Share this lap" and like a back link. These are the same
   family at page scale, with one filled variant so a row of actions has a
   subject.

   Uppercase and letter-spaced to match .ai-submit, which is the site's
   existing button language; the size sits between that CTA and the table
   control, because a header toolbar is neither. */
.lap-action {
  display: inline-block;
  padding: 8px 13px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.lap-action:hover {
  color: var(--text);
  border-color: var(--text);
}

/* The action the page exists for. Filled, so it reads first in a row that is
   otherwise all outlines — the rest recede rather than competing. */
.lap-action--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.lap-action--primary:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
  transform: translateY(-1px);
}

/* The actions cluster to the right of the header, tight to each other. Their
   own gap, because .lb-header-stats spaces stat columns at 32px and that is
   far too loose for a button group — at that spacing three buttons read as
   three unrelated things rather than one set of choices. */
.lap-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* Same placement for the analysis toolbar, which is a row of its own. */
.ana-ref-switch { justify-content: flex-end; }

@media (max-width: 640px) {
  /* Not full width. The header stacks into a left-aligned column at this size
     and the lap-context chips sit directly below, so the actions belong in
     that band beside "Top speed" rather than as three stacked bars pushing it
     down the page. Chip radius and gap, and pinned to a chip's height (8px
     padding + a 9px label + a 14px value + borders, ~48px) rather than sized
     by its own padding, so the two rows line up whatever the text does. The
     height also clears the 44px touch target a padding-sized button missed. */
  .lap-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 6px;
  }
  .lap-actions { justify-content: flex-start; gap: 10px; margin-left: 0; }
  .ana-ref-switch { justify-content: flex-start; gap: 10px; }

  /* Close the gap the header leaves, so the actions and the chips are one
     band rather than two things that happen to be near each other. */
  .lb-header-row:has(.lap-actions) { margin-bottom: 10px; }
  .tele-chips { margin-top: 0; }
}
.sim-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid currentColor;
}
.sim-pill--active { opacity: 1; box-shadow: 0 0 0 2px currentColor; }
/* On the telemetry and analysis pages' car / track line under the heading. */
.lap-head-sim { margin-left: 8px; vertical-align: 1px; }
/* The sim build beside that pill: a small card, as tall as the pill. */
.lap-head-version {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  vertical-align: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: normal;
  color: var(--text);
}
/* The session beside it: a word, not a number, so the page's own face. */
.lap-head-session { font-family: inherit; }
.sim-pill--dim    { opacity: 0.55; }
.sim-pill--dim:hover { opacity: 0.85; }
.sim-pill--ams2   { color: #9b50ee; background: rgba(123,47,190,0.12); }
.sim-pill--acevo  { color: #e52220; background: rgba(229,34,32,0.10); }
.sim-pill--acc    { color: #ff5555; background: rgba(255,26,26,0.10); }
.sim-pill--ac     { color: #ff0000; background: rgba(255,0,0,0.10); }
.sim-pill--rf2    { color: #3399dd; background: rgba(0,128,192,0.10); }
.sim-pill--iracing { color: #4f7fe6; background: rgba(58,111,224,0.14); }
.sim-pill--lmu    { color: #c8a800; background: rgba(200,168,0,0.10); }

/* Sim names written into prose — the client card's "Supports iRacing, …"
   line — coloured the same way the hero chips are, so a simulator reads as
   the same thing wherever the page names it. Colour only: these sit inside
   a sentence, where a pill's padding and background would break the line. */
.sim-ink--iracing { color: var(--sim-ink-iracing); }
.sim-ink--ams2    { color: var(--sim-ink-ams2); }
.sim-ink--acc     { color: var(--sim-ink-acc); }
.sim-ink--acevo   { color: var(--sim-ink-acevo); }
.sim-ink--ac      { color: var(--sim-ink-ac); }
.sim-ink--rf2     { color: var(--sim-ink-rf2); }
.sim-ink--lmu     { color: var(--sim-ink-lmu); }

.lap-source-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid currentColor;
  color: var(--muted);
  background: rgba(128,128,128,0.10);
  opacity: 0.7;
}
.lap-source-pill--import {
  color: #e8ff3c;
  background: rgba(232,255,60,0.10);
  opacity: 1;
}
/* ── Toggle switch (Include Wikipedia) ───────────────────────────────────── */
.lb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.lb-toggle input { display: none; }
.lb-toggle-track {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--surface2);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.lb-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 0.15s, background 0.15s;
}
.lb-toggle input:checked + .lb-toggle-track {
  background: rgba(149,117,205,0.25);
  border-color: #b59dd6;
}
.lb-toggle input:checked + .lb-toggle-track .lb-toggle-knob {
  left: 18px;
  background: #b59dd6;
}
.lb-toggle-label {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  transition: color 0.15s;
}
.lb-toggle input:checked ~ .lb-toggle-label { color: var(--text); }
.lb-toggle:hover .lb-toggle-label { color: var(--text); }

/* ── Source tags ─────────────────────────────────────────────────────────── */
.src-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-weight: 500;
}
.src-tag--telemetry { color: #3a9e6e; background: rgba(40,160,100,0.12); }
.src-tag--community { color: #5b8def; background: rgba(91,141,239,0.12); }
.src-tag--wikipedia { color: #b59dd6; background: rgba(149,117,205,0.12); }

/* Racing-class tag shown beside car names on leaderboards ("GT3", "Formula Vee") */
.lb-class-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: var(--muted);
  vertical-align: 1px;
}
.page-title .lb-class-tag {
  font-size: 13px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ── View tabs (Telemetry | Community) ──────────────────────────────────── */
.lb-view-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.lb-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.lb-view-tab:hover { color: var(--text); }
.lb-view-tab--active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.lb-loading {
  display: block;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}

.btn-danger {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover { background: var(--accent2); color: white; }


/* ===== MAKE FILTER PILLS ===== */
.make-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}

.make-pill {
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  user-select: none;
}

.make-pill:hover { border-color: var(--muted); color: var(--text); }
.make-pill.selected { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 500; }

/* ===== MAKE PILL BRAND COLOURS ===== */
.make-pill {
  position: relative;
  overflow: hidden;
}
.make-pill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand, var(--border));
  transition: width 0.15s;
}
.make-pill:hover { border-color: var(--brand, var(--muted)); color: var(--text); }
.make-pill:hover::before { width: 4px; }
.make-pill.selected {
  background: var(--brand, var(--accent));
  color: #fff;
  border-color: var(--brand, var(--accent));
}
.make-pill.selected::before { width: 0; }
.make-pill.make-all { --brand: var(--accent); }
.make-pill.make-all.selected { background: var(--accent); color: var(--bg); }

/* ===== SIMULATOR STYLED TILES ===== */
.sim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}
.sim-tile {
  position: relative;
  cursor: pointer;
  aspect-ratio: 16/9;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px 9px;
  border: 1px solid transparent;
  background: var(--sim-bg, #1a1a18);
}
.sim-tile::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: var(--sim-accent, rgba(255,255,255,0.04));
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
  transition: width 0.2s;
  opacity: 0.25;
}
.sim-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.sim-tile:hover::before { width: 55%; opacity: 0.35; }
.sim-tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 20px rgba(232,255,60,0.15);
}
.sim-tile.selected::before { width: 55%; opacity: 0.35; }
.sim-dot {
  position: absolute;
  top: 7px; left: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sim-accent, #555);
  z-index: 2;
}
.sim-year {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  line-height: 1;
  margin-bottom: 3px;
  position: relative;
  z-index: 1;
}
.sim-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  position: relative;
  z-index: 1;
}
.sim-sub {
  font-family: var(--font-body);
  font-size: 7px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  line-height: 1;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.sim-tile.selected .sim-name { color: var(--accent); }
.sim-tile.selected .sim-year { color: rgba(232,255,60,0.6); }
.sim-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  z-index: 2;
}
.sim-tile.selected .sim-check { display: flex; }

/* ===== CUSTOM CAR PICKER ===== */
.car-picker { position: relative; width: 100%; }
.car-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
  user-select: none;
}
.car-picker-trigger:hover, .car-picker-trigger.open { border-color: var(--text); color: var(--text); }
.car-picker-trigger.has-value { color: var(--text); }
.car-picker-arrow { font-size: 10px; color: var(--muted); transition: transform 0.2s; }
.car-picker-trigger.open .car-picker-arrow { transform: rotate(180deg); }
.car-picker-dropdown {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-top: none;
  z-index: 50;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.car-picker-search {
  background: var(--bg);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 14px;
  outline: none;
  flex-shrink: 0;
}
.car-picker-search::placeholder { color: var(--muted); }
.car-picker-list { overflow-y: auto; flex: 1; }
.car-picker-list::-webkit-scrollbar { width: 4px; }
.car-picker-list::-webkit-scrollbar-track { background: var(--surface); }
.car-picker-list::-webkit-scrollbar-thumb { background: var(--border); }
.car-group-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 4px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  position: sticky;
  top: 0;
}
.car-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}
.car-option:hover { background: var(--card-hover); }
.car-option.selected { background: rgba(232,255,60,0.08); border-left-color: var(--accent); color: var(--accent); }
.car-option-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.track-option-flag {
  width: 21px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

/* Country flag next to a track name in tables / headings */
.track-flag {
  width: 21px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: -2px;
  margin-right: 7px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.track-flag--lg {
  width: 33px;
  height: 22px;
  vertical-align: -2px;
  margin-right: 12px;
}
.track-option-name { min-width: 0; }
.track-option-len {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.car-option.selected .track-option-len { color: var(--accent); opacity: 0.75; }
.car-picker-empty { padding: 20px 14px; font-size: 11px; color: var(--muted); text-align: center; }

/* ===== ADVISOR PAGE HERO ===== */
.advisor-page-hero {
  padding: 80px 48px 60px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.advisor-page-hero .hero-bg-text {
  position: absolute;
  top: 0; right: -40px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 200px;
  color: rgba(232,255,60,0.04);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.advisor-page-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8vw, 110px);
  line-height: 0.9;
  letter-spacing: 2px;
  max-width: 800px;
  margin-bottom: 24px;
}

.advisor-page-hero h1 em {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  color: var(--accent);
}

.advisor-page-hero .hero-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  max-width: 520px;
}

@media (max-width: 720px) {
  .advisor-page-hero { padding: 60px 20px 40px; }
}

/* ===== AI RESPONSE RENDERED MARKDOWN ===== */
/* The render is 960x640 with 16-18 px corner labels. Pinned to 160 px tall
   it showed at a quarter size and the corner names were unreadable on a
   phone, so it takes the column's width instead (capped on desktop), and a
   tap opens the full-size image to zoom into. */
.advice-track-map-link { display: block; margin: 16px auto; max-width: 720px; }
.advice-track-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
}
.ai-response-text h1,
.ai-response-text h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: var(--accent);
  margin: 16px 0 2px;
  line-height: 1;
  font-weight: 400;
}
.ai-response-text h1 { font-size: 22px; }
.ai-response-text h2 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.ai-response-text h3 { font-size: 12px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin: 12px 0 2px; }
.ai-response-text h2:first-child,
.ai-response-text h1:first-child { margin-top: 0; }
.ai-response-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-response-text ul li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  padding-left: 16px;
  position: relative;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.ai-response-text ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 11px;
}
.ai-response-text strong { color: var(--text); font-weight: 600; }
.ai-response-text em { font-family: 'Instrument Serif', serif; font-style: normal; color: var(--muted); }
.ai-response-text code {
  font-family: var(--font-body);
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  color: var(--accent);
}

/* Damper table */
.ai-response-text .damper-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 10px;
  font-family: var(--font-body);
  font-size: 11px;
}
.ai-response-text .damper-table thead tr {
  border-bottom: 1px solid var(--border);
}
.ai-response-text .damper-table th {
  text-align: right;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: 0 8px 5px;
}
.ai-response-text .damper-table th:first-child {
  text-align: left;
}
.ai-response-text .damper-table td {
  text-align: right;
  color: var(--text);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.ai-response-text .damper-table tbody tr:last-child td {
  border-bottom: none;
}
.ai-response-text .damper-table td.damper-wheel {
  text-align: left;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1px;
}

/* ===== TRACK TRACE ===== */
.track-trace-container {
  border: 1px solid var(--border);
  background: var(--bg);
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}
.track-trace-inner {
  flex: 1;
  padding: 10px 12px 6px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.track-trace-svg {
  width: 100%;
  height: auto;
  max-height: 130px;
  max-width: 100%;
  display: block;
  overflow: visible;
}
/* Telemetry-rendered track picture (same render as the leaderboard header) */
.track-trace-img {
  height: 130px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.track-trace-flag {
  height: 10px;
  width: auto;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 1px;
}
.track-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.track-trace-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-top: 4px;
  width: 100%;
}
/* ===== SIM TILE WIP STATE ===== */
.sim-tile.sim-wip {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.sim-tile.sim-wip:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.sim-tile.sim-wip::before { opacity: 0.1; }
.sim-wip-achievement {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-body);
  font-size: 7px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 1px 5px;
  background: rgba(0,0,0,0.6);
  z-index: 3;
}

/* ===== AI PROGRESS INDICATOR ===== */
.ai-progress {
  margin-top: 10px;
}
.ai-progress-bar {
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.ai-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--accent);
  transition: width 0.4s ease;
}
.ai-progress-bar.high-mark::after {
  background: #ff9900;
}
.ai-progress-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  text-align: center;
}

/* ===== AI PROGRESS MODAL OVERLAY ===== */
.progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 8, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: progressFadeIn 0.2s ease;
}

@keyframes progressFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.progress-modal {
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: 40px 48px;
  max-width: 440px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.progress-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  /* Plain text, not brand red: the modal is already framed in --accent and the
     bar below it moves in --accent, so a red heading between them left the red
     doing three jobs at once and none of them clearly. */
  color: var(--text);
  margin-bottom: 10px;
}

.progress-modal-sim {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 4px;
}

.progress-modal-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 28px;
  min-height: 16px;
}

.progress-modal .ai-progress-bar {
  margin-bottom: 14px;
}

/* ===== SUPPORT / FEEDBACK PAGE ===== */
.support-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.support-intro {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 560px;
}
.support-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px;
  max-width: 560px;
}
.ai-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-body);
}

/* ===== CONTENT PAGES (NEWS / FAQ) ===== */
.content-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.content-intro {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 8px 0 36px;
}
.content-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.content-link:hover {
  border-bottom-color: var(--accent);
}

/* /client — the overlay block-width diagrams. Drawn to the client's real
   pixel sizes, all three on one scale so the widths compare by eye. A phone
   shrinks them to fit rather than scrolling them — the 800 px one cut off at
   the edge would show the opposite of what it is there to show — and lifts
   the labels so they survive the shrink. */
.ovl-figure { margin: 18px 0 22px; }
.ovl-fig { display: block; width: 100%; height: auto; }
.ovl-budget { fill: var(--accent); fill-opacity: 0.06; }
.ovl-edge { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; }
.ovl-edge-lbl { fill: var(--accent); font-family: var(--font-body); font-size: 14px; letter-spacing: 0.5px; }
.ovl-w { fill: var(--surface2); stroke: var(--border); stroke-width: 1.5; }
.ovl-lbl { fill: var(--muted); font-family: var(--font-body); font-size: 13px; }
.ovl-ink { fill: none; stroke: var(--text); stroke-opacity: 0.7; stroke-width: 2.5; stroke-linejoin: round; }
.ovl-base { stroke: var(--muted); stroke-opacity: 0.5; stroke-dasharray: 3 4; }
.ovl-num { fill: var(--text); font-family: var(--font-body); font-size: 44px; font-weight: 700; }
.ovl-cell { fill: none; stroke: var(--text); stroke-opacity: 0.45; stroke-width: 2; }
.ovl-dot { fill: var(--accent); }
.ovl-cap { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 8px; }
.ovl-cap strong { color: var(--text); }
@media (max-width: 600px) {
  .ovl-lbl { font-size: 22px; }
  .ovl-edge-lbl { font-size: 26px; }
}

/* ===== Structured content blocks (/coaching, /client) =====
   The long-form pages read as lists, cards and pictures rather than walls of
   text: a bold lead-in carries each point, so a skim of the bold alone says
   what the page says. */
.feat-list { list-style: none; margin: 4px 0 16px; padding: 0; }
.feat-list li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.feat-list li::before {
  content: "";
  position: absolute; left: 2px; top: 16px;
  width: 8px; height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
}
/* :not([class]) so a sim name keeps its own ink (sim-ink--*) in a list. */
.feat-list strong:not([class]), .callout strong, .info-card strong,
.qs-steps strong, .rank-list strong, .check-list strong { color: var(--text); }
.content-intro--tight { margin-bottom: 8px; }
/* The coach's own words — anything in double quotes inside a
   [data-gold-quotes] block — in gold. The quotes are part of the translated
   text (“…” in English, Spanish and Portuguese, „…“ in German), so a small
   script in the footer fragment wraps them in .say rather than every bundle
   carrying the markup. Bold stays white. */
.say { color: var(--gold); }
/* The home page keeps its bold white. */
.home-feature-body p strong:not([class]),
.home-telemetry-desc strong:not([class]),
.client-guide-steps strong { color: var(--text); }
.client-guide-steps a.step-dl strong { color: var(--accent); }
/* Language chips with flags, like the home page's "speaks" pills. */
.lang-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; margin-left: 4px; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(240, 239, 232, 0.20);
  background: rgba(240, 239, 232, 0.05);
  color: var(--text); font-size: 13px; line-height: 1.5;
}
.lang-chips-row { margin: 4px 0 12px; }
.lang-chips-row .lang-chips { margin-left: 0; }
/* Quick start's step 1 is the download link itself. */
a.step-dl { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--accent); }
a.step-dl strong { color: var(--accent); }
a.step-dl:hover strong { text-decoration: underline; }
.qs-steps a.step-dl { justify-self: start; }  /* a grid cell: underline the text, not the cell */
.feat-list--tight { margin: 0; }
.feat-list--tight li { padding-top: 4px; padding-bottom: 4px; }

.callout {
  margin: 12px 0 18px;
  padding: 14px 18px;
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 10px 0 18px;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.info-card dt:not([class]), .info-card-t { color: var(--text); }
.info-card dt, .info-card-t {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 6px;
}
.info-card dd, .info-card p { margin: 0; }

/* One corner, start to finish: four stops on a line. */
.call-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 18px;
  padding: 0;
  position: relative;
}
.call-flow::before {
  content: "";
  position: absolute; left: 6px; right: 6px; top: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--border), var(--accent), var(--border));
}
.call-flow-step { position: relative; padding-top: 22px; }
.call-flow-dot {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
}
.call-flow-stage {
  display: block;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.call-flow-quote { display: block; color: var(--text); font-size: 14px; line-height: 1.45; font-style: italic; }

/* Diagrams drawn in SVG, themed from the palette. */
.art-fig { max-width: 640px; }
.art-panel { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.art-kerb { fill: none; stroke: var(--border); stroke-width: 44; stroke-linecap: round; opacity: 0.55; }
.art-best { fill: none; stroke: var(--muted); stroke-width: 3; stroke-dasharray: 8 6; stroke-linecap: round; }
.art-you  { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.art-apex { fill: var(--muted); }
.art-sep  { stroke: var(--border); stroke-width: 1.5; }
.art-trace-brake { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.art-trace-thr   { fill: none; stroke: var(--success); stroke-width: 3; stroke-linejoin: round; }
.art-lbl { fill: var(--muted); font-family: var(--font-body); font-size: 14px; }
.art-lbl--small { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.art-track { fill: none; stroke: var(--surface2); stroke-width: 30; stroke-linejoin: round; }
.art-line  { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linejoin: round; opacity: 0.8; }
.art-danger { fill: none; stroke: var(--danger); stroke-width: 16; stroke-linecap: round; opacity: 0.6; }
.art-turn { fill: var(--muted); font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.art-turn--danger { fill: var(--danger); font-size: 17px; }
.art-dot { fill: var(--text); }

/* Phone screenshots of the analysis page, side by side. */
.shot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 16px;
}
.shot-row img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: 12px;
}

/* Quick start: numbered steps, each with its icon. */
.qs-steps { list-style: none; counter-reset: qs; margin: 10px 0 16px; padding: 0; display: grid; gap: 10px; }
.qs-steps li {
  counter-increment: qs;
  display: grid;
  grid-template-columns: 28px 26px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.qs-steps li::before {
  content: counter(qs);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.qs-ico { width: 24px; height: 24px; color: var(--text); margin-top: 2px; }

/* The client's Coaching light, learning → advising. */
.lamp-flow { display: flex; align-items: flex-start; gap: 14px; margin: 6px 0 18px; }
.lamp-step { flex: 1; }
.lamp-step p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.lamp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
}
.lamp-dot { width: 10px; height: 10px; border-radius: 50%; }
.lamp--amber .lamp-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.lamp--green .lamp-dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.lamp-arrow { width: 22px; height: 22px; color: var(--muted); flex: none; margin-top: 6px; }

/* An order of preference: first that exists wins. */
.rank-list { list-style: none; counter-reset: rk; margin: 6px 0 14px; padding: 0; }
.rank-list li {
  counter-increment: rk;
  position: relative;
  padding: 8px 0 8px 40px;
  color: var(--muted); font-size: 15px; line-height: 1.55;
  border-bottom: 1px solid var(--border);
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list li::before {
  content: counter(rk);
  position: absolute; left: 0; top: 8px;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--accent); color: var(--accent);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding: 5px 0 5px 22px; }
.check-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 5px;
  color: var(--success); font-weight: 700;
}
.check-list--eye li::before { content: "\25C9"; color: var(--amber); }

@media (max-width: 640px) {
  .call-flow { grid-template-columns: 1fr; gap: 14px; }
  .call-flow::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--border), var(--accent), var(--border)); }
  .call-flow-step { padding: 0 0 0 26px; }
  .shot-row { gap: 6px; }
  .shot-row img { border-radius: 8px; }
  .lamp-flow { flex-direction: column; }
  .lamp-arrow { transform: rotate(90deg); margin: 0 0 0 20px; }
  .qs-steps li { grid-template-columns: 26px 1fr; }
  .qs-ico { display: none; }
  .card-grid--2 { grid-template-columns: 1fr; }
  /* The diagrams shrink to about half on a phone; their labels are lifted so
     they still read. */
  .art-lbl { font-size: 24px; }
  .art-lbl--small { font-size: 20px; }
  .art-turn { font-size: 24px; }
  .art-turn--danger { font-size: 26px; }
}

/* Long-form content pages (/coaching, /client) */
.content-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--text);
  margin: 40px 0 10px;
}
.content-p,
.content-steps,
.content-dl {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.content-steps { padding-left: 22px; }
.content-steps li { margin-bottom: 6px; }
.content-h3 {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 6px;
}
.content-dl dt { color: var(--text); font-weight: 600; margin-top: 12px; }
.content-dl dd { margin: 2px 0 0; }
.content-radio { margin: 8px 0 12px; }
/* Click-to-play video (main.js swaps the link for the player on press) */
.content-video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  margin: 0 0 32px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: #000;
  text-decoration: none; color: #f0efe8;
}
.content-video-thumb,
.content-video iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.content-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(204, 32, 32, 0.92); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s;
}
.content-video:hover .content-video-play { transform: translate(-50%, -50%) scale(1.08); }
.content-video-play svg { width: 28px; height: 28px; color: #fff; margin-left: 3px; }
.content-video-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 28px 16px 14px; font-size: 14px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(to top, rgba(10, 10, 8, 0.92), rgba(10, 10, 8, 0));
}
.content-video-live {
  padding: 3px 9px; border-radius: 4px; background: #cc2020;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.content-cta { margin-top: 48px; }
.home-client-more { display: inline-block; margin-top: 14px; font-size: 14px; }

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq-item[open] > summary::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.faq-answer p { margin: 0; }

/* News / release notes */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news-item {
  padding: 24px;
}
.news-date {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.news-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--text);
  margin: 0 0 10px;
}
.news-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* Client release notes — one card per published release, fragments as a list */
.release-notes-items {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* A bullet per kind of change: + new feature, ↑ improvement, ✓ bug fix.
   Colour and shape both differ, so neither alone carries the meaning; the
   kind is also spelled out for screen readers (.rn-sr). */
.release-notes-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}
.release-notes-legend li { padding-left: 18px; }
.release-notes-legend li::before { left: 0; }
/* One long word in some languages ("VERSIONSHINWEISE") at page-title size
   runs off a phone screen; let it hyphenate or break instead. */
.release-notes-title { hyphens: auto; overflow-wrap: anywhere; }
.release-notes-items li.rn-new,
.release-notes-items li.rn-improved,
.release-notes-items li.rn-fix,
.release-notes-legend li { list-style: none; position: relative; }
.rn-new::before,
.rn-improved::before,
.rn-fix::before {
  position: absolute;
  left: -18px;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.rn-new::before      { content: "+"; color: var(--success); }
.rn-improved::before { content: "\2191"; color: var(--live); }
.rn-fix::before      { content: "\2713"; color: var(--amber); }
/* A widget picture under its line (client/render_widget_shots.py), drawn
   by the client's own code; it is the overlay's look, so no frame of its own. */
.rn-shot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0 12px;
  border-radius: 4px;
}
.rn-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Home bands after the leaderboard: events, lap times, personal bests,
   news, release notes, FAQ — same lanes as the features above them */
.home-feature--events {
  background:
    linear-gradient(90deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/f1-3.webp') center / cover no-repeat;
}
.home-feature--laps {
  background:
    linear-gradient(270deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/copa-1.webp') center / cover no-repeat;
}
.home-feature--pbs {
  background:
    linear-gradient(90deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/f1-1.webp') center / cover no-repeat;
}
.home-feature--news {
  background:
    linear-gradient(270deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/f1-4.webp') center / cover no-repeat;
}
.home-feature--releases {
  background:
    linear-gradient(90deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/tr-1.webp') center / cover no-repeat;
}
.home-feature--faq {
  background:
    linear-gradient(270deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/f1-2.webp') center / cover no-repeat;
}
/* status pill on the events mock, as the events pages colour them */
.mock-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.mock-pill--open { color: var(--success); border-color: var(--success); }
.mock-pill--live { color: var(--live); border-color: var(--live); }
/* stacked cards for the news, release-notes and FAQ mocks */
.mock-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.mock-card:first-child { border-color: var(--accent); }
.mock-card-meta {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.mock-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text);
}
.mock-card-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.mock-card-list li { list-style: none; position: relative; }
.mock-card--q {
  font-size: 13px;
  color: var(--text);
}
.mock-card--q::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 700;
}

/* ===== SAVED SETUPS (MY GARAGE) ===== */
.saved-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  border: 1px dashed var(--border);
  background: var(--surface);
}
.saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.saved-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.saved-card:hover { border-color: var(--text); }
.saved-card-link {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
}
.saved-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.saved-card-sim {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.saved-card-session {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
}
.saved-card-car {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.saved-card-track {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}
.saved-card-lap {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 8px;
}
.saved-card-date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--muted);
}
.saved-card-delete-form {
  position: absolute;
  top: 12px; right: 12px;
  margin: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.saved-card:hover .saved-card-delete-form { opacity: 1; }
.saved-card-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
}
.saved-card-delete:hover { border-color: var(--accent2); color: var(--accent2); }
.saved-detail-date {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin-top: 20px;
}
.back-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.back-link:hover { color: var(--text); }

/* ===== ADVISOR BUTTON ROW (Generate + Add to Cart) ===== */
.ai-button-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ai-button-row .ai-submit {
  align-self: auto;
  margin-top: 0;
  flex: 1;
  min-width: 180px;
}
.ai-cart-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ai-cart-btn:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-2px);
}
.ai-cart-price {
  font-weight: 700;
  font-size: 13px;
}

/* ===== LAP TIME BOX ===== */
/* A grid that wraps rather than one flex row: with the Best Lap box there
   are four columns, and on a phone the fourth ran off the screen. The 1px
   gaps over the border colour are the separators, so they stay right
   whichever way the boxes wrap. */
.lap-time-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid var(--border);
  background: var(--border);
}
.lap-time-col {
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
}
.lap-time-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.lap-time-value {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.lap-time-value--dim { color: var(--muted); font-size: 18px; }
.lap-time-sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
}

/* ===== PAYWALL / LOCKED RESULT ===== */
.ai-response-body { position: relative; }
.ai-response-body.locked .ai-response-text,
.ai-response-body.locked .lap-time-box {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  max-height: 360px;
  overflow: hidden;
}
.paywall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(10,10,8,0.4) 0%, rgba(10,10,8,0.85) 60%);
}
.paywall-inner {
  text-align: center;
  padding: 32px;
  max-width: 360px;
}
.paywall-icon { font-size: 32px; margin-bottom: 8px; }
.paywall-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 8px;
}
.paywall-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 18px;
}
.paywall-text strong { color: var(--accent); }
.free-hint {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
}

/* ===== AI CREDIT BANK ===== */
.credit-hint {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-top: 10px;
}
.credit-hint strong { color: var(--accent); }

.credit-empty {
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.5);
  color: #ff8f8f;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}
.credit-empty strong { color: #ffb3b3; }

/* Balance readout on the profile page */
.credit-bank-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.credit-bank-balance {
  font-family: var(--font-display, var(--font-body));
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.credit-bank-unit {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.credit-bank-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  line-height: 1.7;
}

/* Admin sizing tiles — the numbers the signup grant is set from */
.credit-sizing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.credit-stat {
  border: 1px solid var(--border);
  padding: 16px 18px;
}
.credit-stat-value {
  font-family: var(--font-display, var(--font-body));
  font-size: 26px;
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 6px;
}
.credit-stat-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== PROFILE MOBILE ===== */
@media (max-width: 720px) {
  .profile-section {
    padding: 40px 16px;
  }

  .profile-layout {
    flex-direction: column;
    gap: 16px;
  }

  .profile-sidebar {
    width: 100%;
  }

  .profile-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .profile-nav-btn {
    flex: 1 1 auto;
    min-width: 120px;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    font-size: 10px;
  }

  .profile-card {
    flex-direction: row;
    text-align: left;
    padding: 20px 16px;
    gap: 16px;
  }

  .profile-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .profile-edit-card {
    padding: 20px 16px;
  }

  .profile-section-title {
    font-size: 14px;
  }

  .lb-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .lb-header-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .lb-header-stat { align-items: flex-start; }

  .lap-trend { display: none; }

  /* Lap table: hide less critical columns on small screens (keep up to col 6 = Record Holder) */
  .lap-table th:nth-child(n+7),
  .lap-table td:nth-child(n+7) {
    display: none;
  }

  /* Segment (sector) times: hide by class rather than relying solely on
     column position, so they stay hidden even on tables (like the drivers
     table) that opt back into full-width horizontal scrolling instead of
     column-hiding. */
  .lap-table th.lap-sector,
  .lap-table td.lap-sector {
    display: none;
  }

  .lap-table {
    font-size: 11px;
  }

  .lb-section {
    padding: 40px 16px;
  }

  .lb-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .lb-header-stats {
    gap: 20px;
  }

  .lb-header-stat {
    align-items: flex-start;
  }
}

/* Red text is shown without an outline. */

/* ===== LAP TELEMETRY VIEWER ===== */
.tele-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 24px;
}
.tele-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 88px;
}
.tele-chip-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.tele-chip-val {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
}
.tele-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tele-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 8px;
}
.tele-panel-title {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
/* Series names inside a panel title, tinted to match their chart line. */
.tele-key--thr  { color: #3ecf6e; }
.tele-key--brk  { color: var(--accent); }
.tele-key--lat  { color: #4aa3ff; }
.tele-key--long { color: var(--accent); }
.tele-canvas {
  width: 100%;
  height: 180px;
  display: block;
  cursor: crosshair;
}
.tele-canvas--map { height: 280px; }

/* Split layout (raw telemetry viewer): map on the left, the smaller charts
   stacked in a column on the right, both sized to a shared height so the
   map and every chart are visible together without scrolling. */
.tele-grid--split {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: min(460px, 55vh);
  min-height: 340px;
}
.tele-panel--map {
  flex: 1.15 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tele-panel--map .tele-canvas--map {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
.tele-panel-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tele-row {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}
.tele-row .tele-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.tele-row .tele-canvas {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}

@media (max-width: 760px) {
  .tele-grid { grid-template-columns: 1fr; }
  .tele-grid--split {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .tele-panel--map { flex: none; }
  .tele-panel--map .tele-canvas--map { flex: none; height: 240px; }
  .tele-row { grid-template-columns: 1fr; flex: none; }
  .tele-row .tele-canvas { flex: none; height: 160px; }
}

/* ===== HOME LANDING PAGE ===== */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  padding: 96px 48px 72px;
  max-width: 1400px;
  margin: 0 auto;
}
.home-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: 1px;
  margin: 20px 0 24px;
}
.home-hero h1 em { color: var(--accent); }
.home-hero-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 32px;
}
.home-hero-art svg { width: 100%; height: auto; display: block; }
.ha-asphalt {
  fill: none;
  stroke: #1c1a16;
  stroke-width: 26;
  stroke-linejoin: round;
}
.ha-sector {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}
.ha-kerb path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}
.ha-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
}
.ha-streak {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.ha-readout-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 2px;
  fill: var(--muted);
}
.ha-readout-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  fill: var(--text);
}
.ha-readout-delta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  fill: var(--track-accent);
}

/* red/white apex-kerb section divider */
.kerb-divider {
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 18px,
    var(--text) 18px 36px
  );
  opacity: 0.6;
}

/* destination lanes — full-bleed bands like .home-telemetry */
.home-feature {
  border-top: 1px solid var(--border);
}
.home-feature-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.home-feature--reverse .home-feature-art  { order: 2; }
.home-feature--reverse .home-feature-body { order: 1; }
/* each home lane gets its own racing shot behind a dark scrim */
.home-band--hero {
  background:
    linear-gradient(rgba(10,10,8,0.92) 0%, rgba(10,10,8,0.84) 100%),
    url('/img/f1-4.webp') center / cover no-repeat;
}
.home-feature--leaderboard {
  background:
    linear-gradient(270deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/copa-2.webp') center / cover no-repeat;
}
.home-feature--advisor {
  background:
    linear-gradient(90deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/tr-1.webp') center / cover no-repeat;
}
.home-feature-body h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: 1px;
  margin: 12px 0 16px;
}
.home-feature-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.home-feature-cta {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.home-feature-inner:hover .home-feature-cta { text-decoration: underline; }
.home-feature-art svg { width: 100%; height: auto; display: block; }

/* mock timing tower */
.timing-mock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.timing-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.timing-row--leader { border-color: var(--accent); }
.timing-pos {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--accent);
  width: 32px;
}
.timing-driver { flex: 1; font-size: 13px; color: var(--text); }
.timing-sectors { display: flex; gap: 4px; }
.timing-sectors i {
  display: block;
  width: 18px; height: 6px;
  border-radius: 2px;
}
.timing-time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

/* setup schematic */
.sc-body    { fill: var(--accent); }
.sc-tyre    { fill: var(--text); }
.sc-wing    { fill: var(--text); opacity: 0.85; }
.sc-cockpit { fill: var(--bg); }
.sc-callout line   { stroke: var(--muted); stroke-width: 1; }
.sc-callout circle { fill: var(--amber); }
.sc-callout text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  fill: var(--amber);
}

/* how-to-unlock steps on the AI feature bands */
.feature-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 20px;
}
.feature-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  font-size: 12px;
  color: var(--muted);
}
.feature-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

/* AI coaching band — team-radio mockup with real coach callouts */
.home-feature--coach {
  background:
    linear-gradient(90deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/f1-2.webp') center / cover no-repeat;
}
.radio-mock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
}
.radio-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.radio-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.radio-msg {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 7px 12px;
}
/* stagger the bubbles for a collage feel */
.radio-msg:nth-of-type(odd)  { margin-right: 28px; }
.radio-msg:nth-of-type(even) { margin-left: 28px; }
.radio-msg--best { border-left-color: var(--success); }
.radio-msg-meta {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2px;
}
.radio-msg p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

/* Live overlay mock: per-corner speed/line + brake/throttle pedal traces,
   drawn against your best pass of that corner the moment you clear it
   (see the in-race overlay documented in client/HOW_TO_RUN.txt). */
.overlay-mock {
  margin-top: 14px;
  max-width: 300px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.overlay-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 6px;
}
.overlay-mock-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.overlay-mock-delta--gain { color: var(--success); }
.overlay-mock-delta--loss { color: var(--accent); }
.overlay-mock-speed {
  width: 100%;
  height: 34px;
  display: block;
}
.overlay-mock-ref { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: 0.6; }
.overlay-mock-you { fill: none; stroke: var(--success); stroke-width: 1.5; }
.overlay-mock-pedals {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.overlay-mock-pedal {
  display: flex;
  align-items: center;
  gap: 8px;
}
.overlay-mock-pedal-label {
  flex: 0 0 auto;
  width: 46px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.overlay-mock-pedal svg { flex: 1 1 auto; width: 100%; height: 14px; display: block; }
.overlay-mock-pedal-ref { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: 0.6; }
.overlay-mock-pedal--brake .overlay-mock-pedal-you { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.overlay-mock-pedal--throttle .overlay-mock-pedal-you { fill: none; stroke: var(--success); stroke-width: 1.5; }

/* AI track analysis band — screenshot-style mock of /laps/{id}/analysis */
.home-feature--analysis {
  background:
    linear-gradient(270deg,
      rgba(10,10,8,0.72) 0%,
      rgba(10,10,8,0.88) 55%,
      rgba(10,10,8,0.96) 100%),
    url('/img/copa-3.webp') center / cover no-repeat;
}
/* three phone screenshots of the analysis page, fanned like a hand of cards */
.ana-collage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.ana-collage-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 10 / 16;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #000;
  box-shadow: 0 18px 48px rgba(0,0,0,0.65);
}
.ana-collage-frame img {
  position: absolute;
  left: 0;
  top: 0;               /* the files come without the phone's status and nav bars */
  width: 100%;
  height: auto;
}
.ana-collage-frame--left {
  flex: 0 0 33%;
  transform: rotate(-5deg) translateY(8%);
  margin-right: -5%;
  z-index: 1;
}
.ana-collage-frame--center {
  flex: 0 0 40%;
  z-index: 3;
}
.ana-collage-frame--right {
  flex: 0 0 33%;
  transform: rotate(5deg) translateY(8%);
  margin-left: -5%;
  z-index: 2;
}

/* telemetry client band — historic AMS2 grid behind a dark scrim */
.home-telemetry {
  border-top: 1px solid var(--border);
  background:
    linear-gradient(90deg,
      rgba(10,10,8,0.96) 0%,
      rgba(10,10,8,0.88) 45%,
      rgba(10,10,8,0.72) 100%),
    url('/img/historical-ams2.webp') center / cover no-repeat;
}
.home-telemetry-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px 48px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px;
  align-items: start;
}
.home-telemetry-info h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: 1px;
  margin: 12px 0 16px;
}
.home-telemetry-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 24px;
}
.home-token-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}
.home-token-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.home-token-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 12px;
}
.home-token-hint code { color: var(--accent); }
.home-token-link { color: var(--text); text-decoration: underline; }
.home-token-auth {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.home-token-btn { display: inline-block; }
form .home-token-btn { margin-top: 16px; }

/* responsive */
@media (max-width: 960px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: 64px 24px 48px;
    gap: 32px;
  }
  .home-feature-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 24px;
  }
  .home-feature--reverse .home-feature-art  { order: 1; }
  .home-feature--reverse .home-feature-body { order: 2; }
  .home-telemetry-inner {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 32px;
  }
  /* coach band fits one phone screen: phrases, text and steps together */
  .home-feature--coach .home-feature-inner {
    padding: 32px 20px;
    gap: 18px;
  }
  .home-feature--coach .home-feature-body h2 { font-size: 30px; }
  .home-feature--coach .home-feature-body p {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .radio-msg:nth-of-type(odd)  { margin-right: 14px; }
  .radio-msg:nth-of-type(even) { margin-left: 14px; }
}

/* ==================== SETUP GUIDES (public SEO pages) ==================== */
.guides-intro {
  max-width: 720px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 32px;
}
.guides-intro a { color: var(--accent); text-decoration: none; }
.guides-intro a:hover { text-decoration: underline; }

.guides-sim {
  margin: 36px 0 0;
}
.guides-sim-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--text);
  margin: 0 0 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.guides-sim-title::-webkit-details-marker { display: none; }
.guides-sim-title::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.guides-sim[open] > .guides-sim-title::after {
  transform: rotate(45deg);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.guide-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.guide-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-2px);
}
.guide-card-car {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--car-accent);
}
.guide-card-track {
  font-size: 13px;
  color: var(--track-accent);
  margin-top: 2px;
}
.guide-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.guide-card-cta { color: var(--accent); }

.guide-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

/* A variant is drawn in the advisor's result box (.ai-response); this only
   spaces one variant from the next. */
.guide-variant {
  margin: 0 0 20px;
}
.guide-variant-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--amber);
  margin-bottom: 14px;
}

.guide-cta {
  padding: 26px;
  margin: 28px 0;
  border-left: 3px solid var(--accent);
}
.guide-cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--text);
}
.guide-cta-text {
  max-width: 640px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0 18px;
}
.guide-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.guide-cta-btn { display: inline-block; text-decoration: none; }
.guide-cta-secondary { color: var(--accent); font-size: 13px; text-decoration: none; }
.guide-cta-secondary:hover { text-decoration: underline; }

/* ==================== LAP SHARE PAGE ==================== */
.lap-share-hero { padding: 28px; }

.lap-share-time-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.lap-share-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 10vw, 96px);
  line-height: 1;
  color: var(--text);
}
.lap-share-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.lap-share-driver { color: var(--amber); font-weight: 600; }
a.lap-share-driver-link { text-decoration: none; }
a.lap-share-driver-link:hover { text-decoration: underline; }

.lap-share-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.lap-share-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 84px;
}
.lap-share-stat .stat-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.lap-share-stat .stat-value {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text);
  margin-top: 2px;
}

.lap-share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.share-btn {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  transition: border-color 0.15s, background 0.15s;
}
.share-btn:hover { border-color: var(--accent); background: var(--card-hover); }

/* ==================== AI TRACK ANALYSIS ==================== */
.ana-versus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.ana-driver-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}
.ana-driver-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.05;
}
.ana-driver-time--user { color: var(--accent); }
.ana-driver-time--ref  { color: #4aa3ff; }
.ana-driver--right { text-align: right; }
.ana-driver-name { font-size: 13px; color: var(--text); }
.ana-driver-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ana-driver--right .ana-driver-foot { justify-content: flex-end; flex-direction: row-reverse; }
.ana-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface2);
  border: 2px solid var(--border);
}
.ana-avatar--user { border-color: var(--accent); }
.ana-avatar--ref  { border-color: #4aa3ff; }
.ana-avatar--ai {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-color: #4aa3ff;
}

.ana-gap { text-align: center; }
.ana-gap-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
}
.ana-gap--losing  { color: var(--amber); }
.ana-gap--winning { color: var(--success); }
.ana-gap-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.ana-ai-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid #4aa3ff;
  border-radius: 999px;
  color: #4aa3ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
a.ana-src-badge { text-decoration: none; margin-left: 6px; }
a.ana-src-badge:hover { background: rgba(74, 163, 255, 0.12); }
.ana-ai-disclaimer a { color: var(--amber); }

/* Narrow screens: the two laps become side-by-side columns and the gap
   moves into a shared full-width centered row underneath both. */
@media (max-width: 640px) {
  .ana-versus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "user ref"
      "gap  gap";
    align-items: start;
    column-gap: 14px;
    padding: 20px 18px;
  }
  .ana-versus .ana-driver { grid-area: user; }
  .ana-versus .ana-driver--right { grid-area: ref; }
  .ana-gap {
    grid-area: gap;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
}

.ana-coach {
  padding: 20px 24px;
  margin-top: 16px;
  border-left: 3px solid var(--amber);
}

.ana-hotspots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ana-hotspot { padding: 16px 18px; cursor: zoom-in; transition: border-color 0.15s, box-shadow 0.15s; }
/* The card is a div wearing role="button" — it needs a visible tab stop */
.ana-hotspot:focus-visible,
.ana-zoom-chip:focus-visible,
.ana-zoom-reset:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* Hotspot selected by clicking its segment on a chart or the map */
.ana-hotspot--active {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}
.ai-response-text .coach-note--active {
  background: rgba(245, 166, 35, 0.12);
  border-left: 3px solid var(--amber);
  padding: 2px 8px;
  border-radius: 3px;
}
.ana-hotspot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ana-hotspot-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--bg);
  font-weight: 700;
  font-size: 13px;
}
.ana-hotspot-loss {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--amber);
}
.ana-hotspot-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-top: 8px;
}
.ana-hotspot-range {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.ana-hotspot-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ana-hotspot-stats td {
  padding: 4px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.ana-hotspot-stats td.ana-val--user { color: var(--accent); text-align: right; font-family: var(--font-mono); }
.ana-hotspot-stats td.ana-val--ref  { color: #4aa3ff;      text-align: right; font-family: var(--font-mono); }

.ana-legend {
  display: flex;
  gap: 20px;
  margin: 6px 0 12px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.ana-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.ana-swatch {
  display: inline-block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
}
.ana-swatch--user { background: var(--accent); }
.ana-swatch--ref  { background: #4aa3ff; }

/* Chart zoom bar — hotspot shortcuts and the current distance window.
   Built by lap-analysis.js, so it only appears when the charts are live. */
.ana-zoombar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
}
.ana-zoom-hint { flex: 1 1 auto; min-width: 0; }
.ana-zoom-label {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 10px;
}
.ana-zoom-chip {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: zoom-in;
  transition: background 0.15s, color 0.15s;
}
.ana-zoom-chip:hover,
.ana-zoom-chip--active {
  background: var(--amber);
  color: var(--bg);
}
.ana-zoom-range {
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
}
.ana-zoom-reset {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  visibility: hidden;
  transition: background 0.15s, color 0.15s;
}
.ana-zoombar--zoomed .ana-zoom-reset { visibility: visible; }
.ana-zoom-reset:hover { background: var(--text); color: var(--bg); }

.ana-grid .tele-panel--wide { grid-column: 1 / -1; }

/* Split layout (track analysis): the racing-line map sits beside the
   comparison charts — one shared height, so hovering the map is inside the
   same listener container as the charts (restores map interactivity) and
   the whole comparison block is visible together without scrolling. */
.ana-grid--split {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: min(460px, 55vh);
  min-height: 360px;
}
.ana-grid--split .tele-panel--map {
  flex: 1.05 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ana-grid--split .tele-panel--map .tele-canvas--map {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
.ana-charts-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ana-charts-col .tele-panel--delta {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ana-charts-col .tele-panel--delta .tele-canvas {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
.ana-charts-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-height: 0;
}
.ana-charts-row .tele-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 8px 10px 6px;
}
.ana-charts-row .tele-canvas {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
.ana-charts-row--pair {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .ana-grid--split {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .ana-grid--split .tele-panel--map { flex: none; }
  .ana-grid--split .tele-panel--map .tele-canvas--map { flex: none; height: 260px; }
  .ana-charts-col .tele-panel--delta { flex: none; }
  .ana-charts-col .tele-panel--delta .tele-canvas { flex: none; height: 120px; }
  .ana-charts-row { grid-template-columns: 1fr 1fr; }
  .ana-charts-row .tele-canvas { flex: none; height: 150px; }
}
@media (max-width: 560px) {
  .ana-charts-row { grid-template-columns: 1fr; }
}

/* AI estimated reference */
.ana-ai-achievement {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.ana-ref-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ana-ai-disclaimer {
  font-size: 11px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.5;
}

/* Banner shown when the analysed lap already holds the car/track record, so
   the reference had to be the AI-estimated ideal (or the runner-up lap). */
.ana-record-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--amber);
  font-size: 12px;
  line-height: 1.6;
}
.ana-record-badge {
  padding: 3px 10px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.ana-record-runnerup { color: var(--muted); }

/* ── Achievements / trophy cabinet (profile page) ─────────────────────────── */
.achievement-count {
  float: right;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--muted);
}
.achievement-intro {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.6;
}

/* ── Career stats (Trophy Cabinet) ── */
.career-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.career-stat {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.career-stat-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.career-stat-figure {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.career-stat-all {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--muted);
}
.career-stat-all span {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  color: var(--text);
}
.achievement-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.achievement-toolbar .form-row-label { margin: 0; }
.achievement-toolbar select {
  padding: 8px 12px;
  font-size: 11px;
}
.achievement-group-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.achievement-item {
  text-align: center;
  cursor: help;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  box-sizing: border-box;
}
.achievement-icon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 6px;
  transition: transform .15s ease;
}
.achievement-item:hover .achievement-icon { transform: scale(1.12); }
.achievement-name {
  font-size: 10px;
  letter-spacing: .5px;
  line-height: 1.3;
  color: var(--text);
}
.achievement-desc {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 6px;
}
.achievement-date {
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
}
.achievement-item--locked .achievement-icon {
  filter: grayscale(1) brightness(.8);
  opacity: .32;
}
.achievement-item--locked .achievement-name { color: var(--muted); }

/* ===== KEYBOARD FOCUS ===== */
.sim-tile:focus-visible,
.make-pill:focus-visible,
.car-option:focus-visible,
.car-picker-trigger:focus-visible,
.sim-pill:focus-visible,
.lb-view-tab:focus-visible,
nav ul a:focus-visible,
.mobile-nav-link:focus-visible,
.nav-signin:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.ai-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== ERROR PAGE (replaces the Spring "Whitelabel" page) ===== */
.error-section {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.error-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  padding: 48px 44px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.error-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.error-code {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 96px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}

.error-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 12px;
}

.error-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 32px;
}

.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .error-card { padding: 36px 24px; }
  .error-code { font-size: 72px; }
}

/* ===== LEADERBOARD RECENT-LAPS FEED ===== */
/* Rides in .lb-header-row beside the filters, taking the width the stats give
   up by dropping to their own line (see the :has rules below). */
.lb-feed {
  flex: 1 1 320px;
  min-width: 0;
  align-self: center;
}

/* The stats row wraps below the feed, so the feed gets the full remaining
   width of the header line. The title stacks its words for the same reason —
   min-content is the width of its longest word, so it breaks at the space
   whatever the string. */
.lb-header-row:has(.lb-feed) { flex-wrap: wrap; }
.lb-header-row:has(.lb-feed) .page-title { width: min-content; }
.lb-feed ~ .lb-header-stats { flex-basis: 100%; }

/* One row, always: the cards share whatever width the header line leaves and
   narrow as more arrive, rather than wrapping and growing the header. */
.lb-feed-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.lb-feed-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.lb-feed-card:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.lb-feed-driver {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.lb-feed-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface2);
}

.lb-feed-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-feed-sim { flex-shrink: 0; }

.lb-feed-track,
.lb-feed-car {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Track light green, car light blue — the site-wide pairing every lap table uses. */
.lb-feed-track { color: var(--track-accent); }
.lb-feed-car   { color: var(--car-accent); }

.lb-feed-track > span,
.lb-feed-car > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow cards must clip their text rather than reflow it — the row is fixed. */
.lb-feed-stats {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.lb-feed-time {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.lb-feed-laps {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}

.lb-feed-ago {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The header row stacks at 720px (see .lb-header-row above), so the feed
   stops competing for width and simply spans it. */
@media (max-width: 720px) {
  .lb-feed { flex-basis: auto; width: 100%; align-self: stretch; }
}

@media (max-width: 640px) {
  .lb-feed-card { max-width: none; }
}

/* ===== INCIDENTS =====
   The driver's incident history for one car at one track — spins and
   off-tracks, plus the oversteer and understeer that describe the balance —
   shown on the lap telemetry and analysis pages.

   Plain text on purpose: no cards, no stat tiles. Both pages are already dense
   with charts and a map, and boxing every paragraph of a read like this made it
   harder to scan, not easier. Reuses the .pattern-* list from the Driving
   Patterns page so the same kind of record reads the same way wherever it
   appears. */
.inc-head {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--text);
  margin: 22px 0 6px;
}
.inc-line {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 10px;
  max-width: 78ch;
}
.inc-line--lead   { margin: -8px 0 4px; }
.inc-line--tight  { margin: 2px 0 6px; }
.inc-line--strong { color: var(--text); font-size: 14px; }
.inc-line--foot   { margin-top: 18px; }

.inc-bullets {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}
.inc-bullets li { margin-bottom: 6px; }
.inc-bullets li:last-child { margin-bottom: 0; }

.inc-turn-list { list-style: none; margin: 6px 0 0; padding: 0; }
.inc-turn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.inc-turn:last-child { border-bottom: none; }
.inc-turn-name { color: var(--text); flex: 1 1 180px; }
.inc-turn-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.inc-turn-last {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  margin-left: auto;
}
.inc-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
/* Lap-ending kinds carry the alarm colours — the same red and amber the track
   map marks those corners with, so the list and the map agree. The handling
   kinds are the car's balance rather than a mistake that cost a lap, so they
   read cooler. */
.inc-tag--spin       { color: var(--danger);        border-color: rgba(255, 32, 32, 0.45); }
.inc-tag--off_track  { color: var(--warning);       border-color: rgba(245, 166, 35, 0.45); }
.inc-tag--oversteer  { color: var(--driver-accent); border-color: rgba(181, 157, 214, 0.45); }
.inc-tag--understeer { color: var(--car-accent);    border-color: rgba(135, 206, 250, 0.45); }

/* The car class a pattern was learned in, beside its label — two patterns
   worded identically can belong to different machinery. */
.pattern-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  white-space: nowrap;
}
.pattern-item--fixed .pattern-tag { opacity: 0.55; }

/* ===== RECENT LAP CARDS (fragments/recent-laps.html) =====
   "Your recent lap" / "Your best recent lap" — one pair per session on
   /my-sessions. Two equal cards, stacked on phones. */
.recent-laps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
/* The setup advisor's one card: the lap its advice started from. */
.advisor-best-lap { margin-top: 20px; }
.recent-lap-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 18px;
  min-width: 0;
  transition: border-color 0.2s ease;
}
/* Whole-card link (fragments/recent-laps.html): an empty anchor stretched over
   the card. The buttons, and the spans whose tooltip matters, are lifted above
   it so they keep their own clicks and hovers. */
.recent-lap-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.recent-lap-card:has(.recent-lap-cover:hover) { border-color: var(--accent); }
.recent-lap-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.recent-lap-actions a,
.recent-lap-rank,
.recent-lap-card [data-time-format] {
  position: relative;
  z-index: 2;
}
.recent-lap-card--empty { opacity: 0.75; }
.recent-lap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.recent-lap-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.recent-lap-time {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--text);
}
.recent-lap-card:has(.recent-lap-cover:hover) .recent-lap-time { color: var(--accent); }
.recent-lap-invalid {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  vertical-align: middle;
}
.recent-lap-rank {
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent);
  vertical-align: middle;
  white-space: nowrap;
}
/* Track light green, car light blue: the site-wide --track-accent /
   --car-accent pairing the lap tables and leaderboards use. */
.recent-lap-meta {
  font-size: 14px;
  color: var(--track-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-lap-meta .track-flag { vertical-align: -2px; margin-right: 4px; }
.recent-lap-car {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  margin-top: 2px;
}
.recent-lap-car-name {
  color: var(--car-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.recent-lap-car .lb-class-tag { flex-shrink: 0; margin-left: 0; }
/* Lap details on the left; sim pill and weather down the right beside them —
   a short column, not rows of their own. min-width: 0 lets the long names
   ellipsize instead of pushing the column out of the card. */
.recent-lap-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.recent-lap-main { flex: 1 1 auto; min-width: 0; }
.recent-lap-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
/* In the column the session card lines up under the pill, not beside it. */
.recent-lap-side .lap-head-version { margin-left: 0; }
.recent-lap-weather {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.recent-lap-when {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.recent-lap-sep { margin: 0 4px; color: var(--muted); }
.recent-lap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.recent-lap-none {
  color: var(--muted);
  font-size: 14px;
  margin: 10px 0 0;
}
/* Two columns on desktop and on a phone held sideways; stacked only on a
   narrow screen held upright. */
@media (max-width: 640px) and (orientation: portrait) {
  .recent-laps { grid-template-columns: 1fr; }
}

/* ===== MY SESSIONS (my-sessions.html) =====
   One pair of recent-lap cards per session, newest first, five to a page. */
.my-sessions-intro {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
}
.my-session + .my-session {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
/* Month-and-year separator: a rule with the month on it, in the kicker's
   accent, so it reads as a divider rather than another card's title. */
.my-sessions-month + .my-sessions-month { margin-top: 12px; }
.my-sessions-month-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--accent);
}
.my-sessions-month-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Public driver profile (/drivers/{id}) ── */
.dp-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}
.dp-avatar { width: 96px; height: 96px; }
.dp-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  color: var(--text);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: 1px;
}
.dp-ident { min-width: 0; }
.dp-name { margin-bottom: 2px; overflow-wrap: anywhere; }
.dp-since { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.dp-sims { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dp-stats { margin: 0 0 14px; }
.dp-favs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.dp-fav {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  background: var(--surface);
  min-width: 0;
}
.dp-fav-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dp-fav-value .track-flag { margin-right: 0; flex-shrink: 0; }
.dp-fav-laps { margin-top: 6px; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.dp-muted { color: var(--muted); }
.dp-card { padding: 18px 20px; margin-bottom: 18px; }
.dp-empty { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.dp-glyphs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dp-glyph { width: 44px; height: 44px; transition: transform .15s ease; }
.dp-glyph:hover { transform: scale(1.15); }
.dp-records {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.dp-record {
  border: 1px solid var(--border);
  border-left: 3px solid #d4af37;
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.dp-record-time { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dp-record-lap { margin-top: 0; text-decoration: none; }
.dp-record-lap:hover { color: var(--accent); }
.dp-record-margin { font-size: 11px; color: var(--muted); }
.dp-record-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}
.dp-record-foot a { color: var(--muted); }
.dp-record-foot a:hover { color: var(--text); }
a.lb-driver-link { text-decoration: none; }
a.lb-driver-link:hover { text-decoration: underline; }
.dp-visibility { margin-top: 10px; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
a.ana-driver-link { color: inherit; text-decoration: none; }
a.ana-driver-link:hover { text-decoration: underline; }
/* The owner's view of their own visibility setting on /drivers/{id}. */
.dp-visibility-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--muted);
}
.dp-visibility-badge {
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 600;
}
.dp-visibility-badge--public     { color: var(--track-accent); }
.dp-visibility-badge--registered { color: var(--amber); }
.dp-visibility-badge--hidden     { color: var(--muted); }
.dp-visibility-status a { color: var(--accent); }

/* ── Events (/events/{category}, /events/{category}/{id}) ─────────────── */
.events-intro, .events-rules { color: var(--muted); max-width: 820px; margin: 0 0 24px; line-height: 1.6; }
.events-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.events-tab {
  padding: 8px 16px; border: 1px solid var(--border); color: var(--muted);
  text-decoration: none; font-size: 13px; letter-spacing: 0.5px;
}
.events-tab:hover { color: var(--text); background: var(--card-hover); }
.events-tab--on { color: var(--text); border-color: var(--accent); }
.events-tab--now { color: var(--success); }
.events-tab--now.events-tab--on { color: var(--text); border-color: var(--success); }
/* The series filter under the tabs, which then keep a smaller gap. */
.events-tabs:has(+ .events-series-filter) { margin-bottom: 14px; }
.events-series-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 32px; }
.events-series-filter-label {
  color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-right: 4px;
}
.events-series-chip {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
  text-decoration: none; font-size: 12px;
}
.events-series-chip:hover { color: var(--text); background: var(--card-hover); }
.events-series-chip--on { color: var(--text); border-color: var(--accent); }
.events-series { margin: 0 0 48px; }
/* The category page's three sections, each opened by a ruled separator. */
.events-section { margin: 0 0 48px; }
.events-section-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 0 0 8px; font-size: 20px;
  border-bottom: 1px solid var(--border);
}
.events-section-head--open { border-bottom-color: var(--success); }
.events-section-hint { color: var(--muted); font-size: 12px; font-weight: normal; letter-spacing: 0.5px; }
.events-series-cell { color: var(--muted); font-size: 12px; }
.events-entrants { text-align: center; }
/* Phones: the lap tables' rule hides every column from the 7th, which took
   Status (with Register / Withdraw) and Participants off the events table.
   Keep those, and drop category, series and round instead. */
@media (max-width: 720px) {
  .lap-table.events-table th:nth-child(n+7),
  .lap-table.events-table td:nth-child(n+7) { display: table-cell; }
  .lap-table.events-table .events-col-minor { display: none; }
}
.events-series-cell .events-season { margin-left: 4px; }
.events-sources { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.events-sources ul { margin: 0; padding-left: 18px; line-height: 1.8; word-break: break-all; }
.events-sources a { color: var(--muted); }
.events-series-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 20px; }
.events-season { color: var(--amber); }
.events-source { color: var(--muted); font-size: 12px; margin: 0 0 14px; word-break: break-all; }
.events-source a { color: var(--muted); }
.events-link { color: var(--text); font-weight: 600; text-decoration: none; }
.events-link:hover { color: var(--accent); }
.events-layout { color: var(--muted); }
.events-location { color: var(--muted); font-size: 12px; }
.events-dates { white-space: nowrap; }
.events-row--past { opacity: 0.55; }
.events-row[data-href]:hover td { background: var(--card-hover); }
.events-row[data-href]:hover .events-link { color: var(--accent); }
/* Register / Withdraw beside a row's state chip: the page-scale buttons at
   table size, the cell kept on one line where it fits. */
.events-status-cell { white-space: nowrap; }
.events-row-form { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
/* Two classes, so it outranks the phone rule that gives .lap-action a 48px
   minimum height: right for a page's button, a fat bar inside a table row.
   Sized to the state chip beside it (2px 8px, one line of 11px), so the two
   read as a pair rather than the button towering over the chip. */
.lap-action.events-row-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 0; padding: 2px 8px; font-size: 10px; line-height: 1.4;
  letter-spacing: 0.5px; border-radius: 3px; cursor: pointer;
}
.events-mine {
  display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 11px;
  color: var(--success); border: 1px solid var(--success);
}
.events-state { display: inline-block; padding: 2px 8px; font-size: 11px; border: 1px solid currentColor; white-space: nowrap; }
.events-state--upcoming  { color: var(--live); }
.events-state--open      { color: var(--amber); }
.events-state--live      { color: var(--success); }
.events-state--ended     { color: var(--text); }
.events-state--finished  { color: var(--muted); }
.events-state--cancelled { color: var(--danger); }
.events-kicker { color: var(--amber); margin: 0 0 6px; font-size: 13px; letter-spacing: 0.5px; }
.events-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 24px; }
.events-facts > div { display: flex; flex-direction: column; gap: 4px; }
.events-fact-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.events-actions { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.events-actions form { display: flex; align-items: center; gap: 12px; margin: 0; }
/* The page's buttons are <button>s on .lap-action: the table-row .lb-advisor-btn
   sets no background, so a phone's default button face showed through, white
   under white text. */
.events-actions .lap-action { cursor: pointer; }
/* The facts are flex columns, which stretch a child across the column: the
   status chip took the whole width on a phone. */
.events-facts .events-state { align-self: flex-start; }
.events-closed, .events-nolap { color: var(--muted); }
.events-cars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 32px 0 24px; }
.events-cars-head { font-size: 14px; margin: 0 0 8px; }
.events-cars ul { margin: 0; padding-left: 18px; color: var(--text); line-height: 1.7; }
.events-classes { color: var(--muted); font-size: 13px; }
.events-refresh-changes { margin: 8px 0 0; padding-left: 18px; font-size: 12px; letter-spacing: 0; }
@media (max-width: 700px) {
  .events-tabs { gap: 6px; }
  .events-tab { padding: 6px 10px; font-size: 12px; }
}

/* ── Admin: events (/admin/events) ───────────────────────────────────── */
.admin-events-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.admin-events-filter .ai-select { width: auto; min-width: 180px; }
.admin-events-group { margin: 0 0 28px; }
.admin-events-group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }
.admin-events-lock { margin-left: 6px; padding: 0 6px; font-size: 10px; color: var(--amber); border: 1px solid var(--amber); }
.admin-events-hint { color: var(--muted); font-size: 11px; }
.admin-events-layout-other { margin-top: 6px; }
.admin-events-deleted { margin-left: 6px; padding: 0 6px; font-size: 10px; color: var(--danger); border: 1px solid var(--danger); }
.admin-events-row--deleted td { opacity: 0.5; }
.admin-events-row--deleted td:first-child, .admin-events-row--deleted td:last-child { opacity: 1; }