.lb-shell {
  min-height: 100vh;
  padding: var(--f1-space-5) var(--f1-space-6) var(--f1-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-4);
}

/* Flag/incident toast notifications use the shared .toast-f1 /
   .toast-f1-container components from design-system.css — nothing
   page-specific to add here. */

/* ── Header ── */
.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--f1-space-4) var(--f1-space-6);
  gap: var(--f1-space-6);
}

.lb-header-left {
  display: flex;
  align-items: center;
  gap: var(--f1-space-3);
  min-width: 0;
}

.lb-brand-logo {
  width: 42px;
  height: 42px;
  border-radius: var(--f1-radius-full);
}

.lb-wordmark {
  font-weight: var(--f1-weight-black);
  font-size: var(--f1-text-lg);
  letter-spacing: 0.06em;
}

.lb-title {
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
  letter-spacing: 0.25em;
  margin-top: 2px;
}

.lb-header-center {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.lb-select {
  background: var(--f1-surface);
  border: 1px solid var(--f1-border);
  border-radius: var(--f1-radius-sm);
  color: var(--f1-text);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.03em;
  padding: var(--f1-space-2) var(--f1-space-4);
  font-size: var(--f1-text-md);
  cursor: pointer;
  /* Same custom-arrow treatment as .input-f1 (design-system.css) — see
     that rule's comment for why the color is a literal hex, not a token. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--f1-space-4) + 22px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--f1-space-3) center;
  background-size: 14px;
}

.lb-select option {
  background: #151515;
  color: var(--f1-text);
}

.lb-select--sm {
  padding: var(--f1-space-2) var(--f1-space-3);
  /* Shorthand above would otherwise wipe out .lb-select's extra
     padding-right that makes room for the custom arrow — restore it. */
  padding-right: calc(var(--f1-space-3) + 22px);
  font-size: var(--f1-text-sm);
  margin-bottom: var(--f1-space-1);
}

.lb-select:focus {
  outline: none;
  border-color: var(--f1-red);
  box-shadow: 0 0 0 3px var(--f1-red-glow);
}

.lb-session-name {
  font-weight: var(--f1-weight-bold);
  font-size: var(--f1-text-lg);
  letter-spacing: 0.02em;
}

.lb-session-meta {
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
  margin-top: var(--f1-space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--f1-space-2);
}

.lb-dot {
  opacity: 0.4;
}

.lb-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--f1-space-2);
  min-width: 0;
}

/* Two real buttons stacked in the header-right column (leaderboard, records,
   my-races) — was a pair of plain colored-text links, replaced by real
   .btn-f1 buttons for consistency with the rest of the app's controls. */
.lb-header-btn {
  width: auto;
}

.lb-operator-btn {
  margin-left: auto;
}

/* Which rig + who's on it, right above the rig picker that changes it —
   makes the "Kiosk Rig (default)" ambiguity (it can resolve to any rig,
   see leaderboard/consumers.py's _default_rig_id) visible at a glance
   instead of requiring a click into the dropdown to check. */
.lb-rig-label {
  font-size: var(--f1-text-sm);
  font-weight: var(--f1-weight-bold);
  color: var(--f1-text);
  margin-bottom: var(--f1-space-1);
  white-space: nowrap;
}

/* Small inline medal shown next to the position number in the main
   table for rows 1-3. */
.lb-trophy {
  font-size: var(--f1-text-sm);
  margin-right: var(--f1-space-1);
  vertical-align: -1px;
}

/* ── Staff-only operator control bar (leaderboard.html's lb-operator-bar,
   request.user.is_staff only) — quick-access toggles + links so an
   operator watching this page doesn't have to tab over to Live Control
   for the two settings that live here. ── */
.lb-operator-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--f1-space-4);
  padding: var(--f1-space-2) var(--f1-space-5);
}

.lb-operator-bar-label {
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-black);
  letter-spacing: 0.16em;
  color: var(--f1-text-dim);
}

.lb-operator-link {
  font-size: var(--f1-text-sm);
  font-weight: var(--f1-weight-bold);
  color: var(--f1-text-dim);
  text-decoration: none;
  margin-left: auto;
}

.lb-operator-link:hover {
  color: var(--f1-text);
}

.lb-operator-link ~ .lb-operator-link {
  margin-left: 0;
}

/* ── All-time track-record rows, injected directly into the main table
   (leaderboard.js's buildRecordRowsHtml) — not a separate section. A rank
   is skipped here when that driver is already one of the currently-racing
   rows (they get that rank's medal on their own live row instead — see
   computeDisplayRanks/rowHtml), so anyone else racing this track still
   sees whose time they're chasing right in the table they're already
   looking at. */
/* Background/box-shadow come from the same rank-specific .lb-row-p1/p2/p3
   classes the live podium rows use (gold/silver/bronze — see below), added
   alongside this one in buildRecordRowsHtml so a rank-2/3 record doesn't
   get the rank-1 gold tint by default. No other styling of its own — a
   record row otherwise reads like a normal row, not visually "different"
   in a way that reads as broken/placeholder text. */
.lb-row-record .lb-status-badge {
  background: rgba(255, 200, 40, 0.16);
  color: var(--f1-yellow);
}

/* ── Layout ── */
.lb-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--f1-space-4);
  align-items: start;
}

.lb-main--single {
  grid-template-columns: 1fr;
}

@media (max-width: 1100px) {
  .lb-main {
    grid-template-columns: 1fr;
  }
}

/* Header was a single non-wrapping flex row (logo/wordmark, session name,
   sim toggle + rig picker) with no shrink handling on any of its three
   children — on a phone-width viewport this forced the whole page wider
   than the screen instead of reflowing, which is what made the wordmark
   read as cut off and pushed the sim toggle buttons off the right edge
   entirely (confirmed live on a real phone). Stack the three sections
   instead of letting them fight for one row below tablet width. */
@media (max-width: 768px) {
  .lb-shell {
    padding: var(--f1-space-4) var(--f1-space-3) var(--f1-space-6);
  }
  .lb-header {
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--f1-space-3) var(--f1-space-4);
    gap: var(--f1-space-3);
  }
  .lb-header-left,
  .lb-header-center,
  .lb-header-right {
    flex: 1 1 100%;
    min-width: 0;
  }
  .lb-header-left {
    justify-content: center;
  }
  .lb-header-right {
    align-items: center;
  }
  .lb-sim-toggle {
    margin-right: 0;
  }
}

/* ── Table ── */
.lb-table-wrap {
  overflow-x: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--f1-space-2);
}

.lb-table {
  width: 100%;
  /* table-layout:fixed + width:100% meant this never actually triggered
     the wrapper's overflow-x:auto on a narrow screen — with 13+ columns
     it just crammed all of them into whatever width was available
     instead, collapsing headers to single letters (confirmed live on a
     phone). min-width gives it a floor it won't shrink below, so a
     viewport narrower than that scrolls horizontally instead. */
  min-width: 900px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--f1-text-sm);
}

.lb-table thead th {
  text-align: left;
  font-size: var(--f1-text-xs);
  letter-spacing: 0.08em;
  color: var(--f1-text-dim);
  padding: var(--f1-space-2) var(--f1-space-1);
  border-bottom: 2px solid var(--f1-border);
  position: sticky;
  top: 0;
  z-index: var(--f1-z-raised);
  background: rgba(10, 10, 13, 0.85);
  backdrop-filter: blur(6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-table tbody tr {
  border-bottom: 1px solid var(--f1-border);
  transition: background-color 0.4s ease;
}

.lb-table tbody tr:hover {
  background: var(--f1-surface);
}

.lb-table td {
  padding: var(--f1-space-2) var(--f1-space-1);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Explicit, not just relying on the browser default — the tyre badge
     (an inline-flex circle) was rendering with visible gaps on both sides
     that read as centered against the flush-left TYRE header above it. */
  text-align: left;
}

/* Fixed proportional column widths so the whole table fits the viewport
   without horizontal scroll instead of growing to content width. */
.c-rig { width: 7%; }
.c-pos { width: 4%; overflow: visible; text-overflow: clip; }
.c-team { width: 9%; }
.c-num { width: 4%; }
.c-driver { width: 14%; }
.c-tyre { width: 7%; }
.c-lap { width: 4%; }
.c-time { width: 8%; }
.c-sector { width: 6%; }
.c-status { width: 9%; }

/* Rig tag — only present at all when the default "Kiosk Rig" view is
   showing multiple rigs merged into one table (see leaderboard.js's
   renderMultiLeaderboard); an explicitly-picked single rig never renders
   this column, header included (kept hidden via the th/td simply not
   being emitted, not CSS, so colspans on empty-state rows stay correct
   either way). */
.lb-rig-tag {
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.04em;
  color: var(--f1-text-dim);
}

/* AC table's CAR column — a generic car glyph (icons.svg#icon-car) next
   to the model name, since there's no real per-car photo/logo asset
   pipeline here (unlike F1's team logos, which come from a maintained
   slug->asset mapping). */
.lb-car-cell {
  display: flex;
  align-items: center;
  gap: var(--f1-space-2);
}
.lb-car-cell .icon-f1 {
  flex-shrink: 0;
  color: var(--f1-text-dim);
}
.lb-car-badge {
  height: 22px;
  width: auto;
  max-width: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.lb-row-customer {
  background: linear-gradient(90deg, rgba(225, 6, 0, 0.16), transparent 70%);
  box-shadow: inset 3px 0 0 var(--f1-red);
}

/* Top-3 rows get a subtle gold/silver/bronze tint so the podium stands
   out even while scanning the full table, not just in the podium strip
   above it. Customer-row styling (red accent) still wins if both apply. */
.lb-row-podium {
  font-weight: var(--f1-weight-semibold);
}

.lb-row-p1:not(.lb-row-customer),
.lb-fastest-p1 {
  background: linear-gradient(90deg, rgba(255, 200, 40, 0.14), transparent 85%);
  box-shadow: inset 3px 0 0 rgba(255, 200, 40, 0.65);
}

.lb-row-p2:not(.lb-row-customer),
.lb-fastest-p2 {
  background: linear-gradient(90deg, rgba(200, 210, 220, 0.1), transparent 85%);
  box-shadow: inset 3px 0 0 rgba(200, 210, 220, 0.55);
}

.lb-row-p3:not(.lb-row-customer),
.lb-fastest-p3 {
  background: linear-gradient(90deg, rgba(205, 140, 90, 0.12), transparent 85%);
  box-shadow: inset 3px 0 0 rgba(205, 140, 90, 0.6);
}

.lb-row-flash {
  animation: row-flash 0.9s ease;
}

@keyframes row-flash {
  0% { background-color: rgba(225, 6, 0, 0.35); }
  100% { background-color: transparent; }
}

.lb-pos {
  font-family: var(--f1-mono);
  font-weight: var(--f1-weight-bold);
  font-size: var(--f1-text-base);
}

.lb-team-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--f1-space-2);
  padding: var(--f1-space-1) var(--f1-space-2);
  border-radius: var(--f1-radius-xs);
  font-size: var(--f1-text-sm);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.05em;
}

.lb-team-logo {
  /* Fixed on both axes, not just height — each team's SVG has a different
     native aspect ratio (some wide like McLaren's speedmark, some
     near-square like Haas' emblem), so a height-only constraint let wide
     logos render much bigger than narrow ones. object-fit: contain only
     normalizes size when the box itself is fixed on both dimensions.
     Height kept close to the table's row text size (--f1-text-md, 14px)
     instead of an oversized icon-style logo. display:block (not inline)
     so it doesn't inherit an image's default baseline gap under it — but
     no auto side-margins, so it sits flush-left under the TEAM header
     (left-aligned, like every other column) instead of centering, which
     also kept it out of line with .lb-team-badge below (the text-fallback
     for teams with no logo file), which was already flush-left. */
  display: block;
  width: 22px;
  height: 15px;
  object-fit: contain;
}

.lb-driver-name {
  font-weight: var(--f1-weight-semibold);
}


.lb-time {
  font-family: var(--f1-mono);
  font-variant-numeric: tabular-nums;
}

.lb-time--purple {
  color: var(--f1-purple);
}

.lb-time.is-invalid {
  color: var(--f1-yellow);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 212, 0, 0.6);
}

.lb-flag-icon {
  color: var(--f1-yellow);
  font-size: var(--f1-text-sm);
  margin-left: var(--f1-space-1);
}

.lb-incident-badge {
  display: inline-block;
  min-width: 1.1rem;
  text-align: center;
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-black);
  background: rgba(255, 212, 0, 0.18);
  color: var(--f1-yellow);
  border-radius: var(--f1-radius-xs);
  padding: 0 var(--f1-space-1);
  margin-left: var(--f1-space-1);
  vertical-align: middle;
}

.lb-time.is-best {
  color: var(--f1-purple);
}

/* Sector time coloring — matches real F1 timing screens: purple = fastest
   of the whole session, green = this driver's own personal best (but not
   the overall fastest), yellow = a normal split. */
.lb-time.is-sector-purple {
  color: var(--f1-purple);
}

.lb-time.is-sector-green {
  color: var(--f1-green);
}

.lb-time.is-sector-yellow {
  color: var(--f1-yellow);
}

.lb-gap {
  font-family: var(--f1-mono);
  color: var(--f1-text-dim);
}

/* Tyre-compound badge — see .tyre-badge in design-system.css; nothing
   page-specific to add here. */

.lb-status-badge {
  font-size: var(--f1-text-xs);
  letter-spacing: 0.06em;
  padding: var(--f1-space-1) var(--f1-space-2);
  border-radius: var(--f1-radius-xs);
  background: var(--f1-surface);
  color: var(--f1-text-dim);
}

.lb-status-badge.pit {
  color: var(--f1-yellow);
  background: rgba(255, 212, 0, 0.12);
}

.lb-status-badge.finished {
  color: var(--f1-green);
  background: rgba(0, 230, 118, 0.12);
}

.lb-empty-row td {
  text-align: center;
  color: var(--f1-text-dim);
  padding: var(--f1-space-8) var(--f1-space-4);
}

.lb-drs {
  color: var(--f1-green);
  font-weight: var(--f1-weight-bold);
  font-size: var(--f1-text-sm);
  margin-left: var(--f1-space-1);
}

/* ── Side panels ── */
.lb-side {
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-4);
}

.lb-panel {
  padding: var(--f1-space-4) var(--f1-space-5);
}

.lb-panel-title {
  font-size: var(--f1-text-sm);
  letter-spacing: 0.16em;
  color: var(--f1-text-dim);
  margin: 0 0 var(--f1-space-3);
  display: flex;
  align-items: baseline;
  gap: var(--f1-space-2);
}

.lb-panel-sub {
  color: var(--f1-text);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--f1-text-md);
}

/* Chart.js with maintainAspectRatio:false needs a container whose height
   is fixed independently of the canvas — otherwise canvas-fits-container
   and container-fits-canvas fight each other and the chart grows on every
   redraw. This box is the fix: canvas is absolutely positioned to fill it. */
.lb-chart-box {
  position: relative;
  height: 160px;
  width: 100%;
}

.lb-chart-box canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── Live Speed Race — JS-inserted sibling of .lb-main (see
   leaderboard.js's ensureRaceChartSetup), not part of the grid, so it
   just needs to be full-width block below everything else. ── */
.lb-queue-list,
.lb-lap-history,
.lb-final-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-2);
  max-height: 220px;
  overflow-y: auto;
}

.lb-queue-list li,
.lb-lap-history li,
.lb-final-results li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--f1-space-2);
  font-size: var(--f1-text-md);
  padding: var(--f1-space-2) var(--f1-space-3);
  border-radius: var(--f1-radius-xs);
  background: var(--f1-surface);
}

.lb-lap-history li.is-best {
  color: var(--f1-purple);
  background: rgba(176, 38, 255, 0.1);
}

.lb-queue-empty {
  color: var(--f1-text-dim);
  justify-content: center !important;
}

/* ── Penalties card (post-session, F1 + Assetto Corsa) ── Deliberately
   narrow — position + driver + penalty only, not a second copy of the
   main table's own final classification (which already reflects the
   game's official post-penalty standings via its own d.pos). */
.lb-final-pos {
  flex-shrink: 0;
  width: 1.8em;
  font-weight: var(--f1-weight-bold);
  color: var(--f1-text-dim);
}

.lb-final-driver {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-final-driver.is-customer {
  color: var(--f1-red);
  font-weight: var(--f1-weight-bold);
}

.lb-final-penalty {
  flex-shrink: 0;
  font-weight: var(--f1-weight-bold);
  color: var(--f1-yellow);
}

.lb-final-flags {
  flex-shrink: 0;
  font-weight: var(--f1-weight-bold);
  color: var(--f1-text-dim);
  margin-left: var(--f1-space-2);
}

.lb-final-penalty + .lb-final-flags {
  margin-left: var(--f1-space-3);
}

/* ── Sponsor/partner marquee — between header and main content ── */
.lb-sponsor-strip {
  padding: var(--f1-space-2) 0 var(--f1-space-3);
  overflow: hidden;
}

.lb-sponsor-label {
  text-align: center;
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.18em;
  color: var(--f1-text-dim);
  margin-bottom: var(--f1-space-2);
}

.lb-sponsor-track {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lb-sponsor-track-inner {
  display: flex;
  align-items: center;
  gap: var(--f1-space-12);
  width: max-content;
  /* The logo list is rendered twice in the DOM (see leaderboard.html) so
     translating exactly -50% loops seamlessly — the second copy lines up
     pixel-perfectly where the first one started. */
  animation: lb-sponsor-scroll 28s linear infinite;
}

.lb-sponsor-logo {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.75;
  flex-shrink: 0;
}

@keyframes lb-sponsor-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lb-sponsor-track-inner {
    animation: none;
  }
}

/* ── Track Records panel (DB-backed, auto-follows the live track) ──
   Same compact medal-list treatment as the queue/lap-history side panels —
   no manual controls, this just renders whatever loadTopRecords() fetched. */
.lb-fastest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-2);
}

.lb-fastest-list li {
  display: flex;
  align-items: center;
  gap: var(--f1-space-2);
  font-size: var(--f1-text-md);
  padding: var(--f1-space-2) var(--f1-space-3);
  border-radius: var(--f1-radius-xs);
  background: var(--f1-surface);
}

.lb-fastest-pos {
  width: 1.6rem;
  flex-shrink: 0;
  text-align: center;
  font-weight: var(--f1-weight-bold);
  color: var(--f1-text-dim);
}

.lb-fastest-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-fastest-podium .lb-fastest-pos {
  font-size: var(--f1-text-base);
}

/* Records page sim toggle (F1 25 / Assetto Corsa) */
.lb-sim-toggle {
  display: inline-flex;
  gap: 2px;
  margin-right: var(--f1-space-3);
  border: 1px solid var(--f1-border);
  border-radius: var(--f1-radius-sm);
  overflow: hidden;
}
.lb-sim-btn {
  background: var(--f1-surface);
  border: none;
  color: var(--f1-text-dim);
  font-family: inherit;
  font-size: var(--f1-text-sm);
  font-weight: var(--f1-weight-bold);
  padding: var(--f1-space-2) var(--f1-space-3);
  cursor: pointer;
  min-height: 40px;
}
.lb-sim-btn:hover { color: var(--f1-text); }
.lb-sim-btn.is-active { background: var(--f1-red); color: #fff; }

/* ── telemetry analysis action, last cell of every driver row ── */

.c-analyse {
  width: 44px;
  text-align: center;
}

/* A visible (if faint) header icon, not just the sr-only label below it —
   without this, an empty row cell (no active paid booking on that car; see
   telemetryCell's own comment) left the ENTIRE column looking blank end to
   end, reading as "this feature doesn't exist" rather than "nothing to
   show for this row right now". */
.lb-analyse-head-icon {
  color: var(--f1-text-faint);
  vertical-align: middle;
}

/* An icon button, not a linked driver name: the name is data you read, and
   linking it means every glance at the board offers to navigate away from
   it. Faint until hover so a wall-mounted board stays calm. */
.lb-analyse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--f1-radius-sm);
  color: var(--f1-text-faint);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.lb-analyse-btn:hover {
  color: var(--f1-blue);
  background: var(--f1-surface-strong);
}

.lb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Track Records: filter card on the left, board on the right ── */
.lb-records {
  flex: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--f1-space-4);
  align-items: start;
}

.lb-records-side {
  position: sticky;
  top: var(--f1-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-5);
  padding: var(--f1-space-5);
}

.lb-side-field {
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-2);
}

.lb-side-label {
  font-size: var(--f1-text-xs, 0.72rem);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f1-text-dim);
}

.lb-side-hint {
  margin: 0;
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
}

.lb-select--block {
  width: 100%;
  text-align: left;
}

.lb-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lb-sim-toggle--block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-right: 0;
}

.lb-board,
.lb-records-board {
  padding: var(--f1-space-4) var(--f1-space-2) var(--f1-space-2);
  min-width: 0;
}

.lb-board-head {
  padding: var(--f1-space-1) var(--f1-space-4) var(--f1-space-3);
}

.lb-board-title {
  font-size: var(--f1-text-xl, 1.5rem);
  font-weight: var(--f1-weight-black);
  letter-spacing: 0.02em;
}

.lb-board-meta {
  margin-top: 2px;
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
}

.lb-board .lb-table-wrap {
  padding: 0;
}

.lb-board-foot {
  margin: var(--f1-space-3) var(--f1-space-4) var(--f1-space-2);
  font-size: var(--f1-text-sm);
  color: var(--f1-text-faint);
}

@media (max-width: 1100px) {
  .lb-records {
    grid-template-columns: minmax(0, 1fr);
  }
  .lb-records-side {
    position: static;
  }
}

/* The table scrolls sideways on a phone; keep its one-line status message
   pinned to the visible left edge instead of centred off-screen. */
.lb-board .lb-empty-row td {
  text-align: left;
  position: sticky;
  left: 0;
}

/* Left-hand board list: Global / Centers / Events sections of links. */
.lb-side-section {
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-1);
}

.lb-side-section .lb-side-label {
  padding: 0 var(--f1-space-3) var(--f1-space-1);
}

.lb-side-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--f1-space-2) var(--f1-space-3);
  border-radius: var(--f1-radius-sm);
  color: var(--f1-text);
  text-decoration: none;
  transition: background 0.15s ease;
}

.lb-side-link:hover {
  background: var(--f1-surface);
}

.lb-side-link.is-active {
  background: var(--f1-surface-strong);
}

.lb-side-link-name {
  font-weight: var(--f1-weight-bold);
  font-size: var(--f1-text-md, 0.95rem);
  line-height: 1.3;
}

.lb-side-link-sub {
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
}

.lb-side-section .lb-side-hint {
  padding: 0 var(--f1-space-3);
}

/* Board header: title on the left, game + track on the right. */
.lb-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--f1-space-3);
}

.lb-board-controls {
  display: flex;
  align-items: center;
  gap: var(--f1-space-2);
  flex-wrap: wrap;
}

.lb-board-controls .lb-sim-toggle {
  margin-right: 0;
}

.lb-board-controls .lb-select {
  min-width: 200px;
}

.c-date,
.lb-record-date {
  white-space: nowrap;
  color: var(--f1-text-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .lb-board-controls,
  .lb-board-controls .lb-select {
    width: 100%;
  }
}

.lb-side-divider {
  border: 0;
  border-top: 1px solid var(--f1-border);
  margin: 0;
}

/* The shared .c-* widths are sized for the live board's 13 columns; on the
   records table's 9 they summed to about half the width, so DATE absorbed
   the rest and every value bunched up on the left. Give the records table
   its own full-width split and centre the values under their headings
   (driver names stay left-aligned so they read as a list). */
.lb-records-board .lb-table {
  min-width: 760px;
}
.lb-board .lb-table th,
.lb-board .lb-table td {
  text-align: center;
}
.lb-board .lb-table .c-driver,
.lb-board .lb-table .lb-driver-name {
  text-align: left;
}
.lb-records-board .c-pos { width: 7%; }
.lb-records-board .c-driver { width: 20%; }
.lb-records-board .c-team { width: 9%; }
.lb-records-board .c-time { width: 13%; }
.lb-records-board .c-sector { width: 11%; }
.lb-records-board .c-date { width: 12%; }
.lb-records-board .c-analyse { width: 6%; }
/* .lb-team-logo is display:block and flush-left by design on the live
   board; on the centred records table it has to centre too. */
.lb-board .lb-team-logo {
  margin-left: auto;
  margin-right: auto;
}

/* Records table: AC car badge / unknown-car icon, centred like the F1 logos. */
.lb-board .lb-car-badge {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
}
.lb-car-unknown {
  display: inline-flex;
  color: var(--f1-text-faint);
  vertical-align: middle;
}

/* Board-list section names (Global / Centers / Events) in brand red. */
.lb-side-section > .lb-side-label {
  color: var(--f1-red);
}

/* Same height for every record row, with or without a telemetry icon (the
   30px icon button used to be what set the row height). */
.lb-board .lb-table tbody td {
  height: 46px;
}

/* Board header podium: top 3 on the right of the track title — medal
   emoji, driver, lap time; each card outlined in its medal colour. */
.lb-board .lb-board-head {
  align-items: center;
  padding: var(--f1-space-2) var(--f1-space-4) var(--f1-space-5);
}
.lb-board-podium {
  display: flex;
  gap: var(--f1-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.lb-podium-item {
  display: flex;
  align-items: center;
  gap: var(--f1-space-3);
  padding: var(--f1-space-3) var(--f1-space-4);
  border-radius: var(--f1-radius-sm);
  min-width: 180px;
}
.lb-podium-medal {
  flex-shrink: 0;
  font-size: 1.75rem;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.lb-podium-p1 { border: 1.5px solid #f5c542; background: rgba(245, 197, 66, 0.08); }
.lb-podium-p2 { border: 1.5px solid #c7ccd4; background: rgba(199, 204, 212, 0.07); }
.lb-podium-p3 { border: 1.5px solid #cd7f32; background: rgba(205, 127, 50, 0.08); }
.lb-podium-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lb-podium-name {
  font-weight: var(--f1-weight-bold);
  font-size: var(--f1-text-md, 0.95rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.lb-podium-time {
  font-family: var(--f1-mono);
  font-size: var(--f1-text-sm);
  line-height: 1.2;
  color: var(--f1-text-dim);
}
/* Phone: one full-width card per place, so names aren't cut off. */
@media (max-width: 768px) {
  .lb-board-podium { width: 100%; flex-direction: column; gap: var(--f1-space-2); }
  .lb-podium-item { min-width: 0; padding: var(--f1-space-2) var(--f1-space-3); }
  .lb-podium-name { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Shared board shell + responsive tables (every leaderboard: live board,
   records, multiplayer event, championship, my-races, Bookings copies).
   Column priority is declared on the <th> (lb-p2 / lb-p3) and copied onto
   each row's cells by lb-board.js, which also builds the phone sub-line
   (.lb-sub) and the tap-to-expand detail row (.lb-detail).
   ═══════════════════════════════════════════════════════════════════ */

.lb-board-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--f1-space-2);
  margin-bottom: var(--f1-space-1);
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-black);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f1-red);
}

.lb-board-title--lg {
  font-size: var(--f1-text-2xl);
  line-height: 1.1;
}

/* Event artwork behind the board heading, faded into the panel. */
.lb-board .lb-board-head--hero {
  margin: calc(-1 * var(--f1-space-4)) calc(-1 * var(--f1-space-2)) var(--f1-space-2);
  padding: var(--f1-space-10) var(--f1-space-6) var(--f1-space-6);
  border-radius: var(--f1-radius-panel) var(--f1-radius-panel) 0 0;
  background:
    linear-gradient(90deg, var(--f1-bg) 0%, var(--f1-overlay) 55%, transparent 100%),
    linear-gradient(0deg, var(--f1-bg) 0%, transparent 60%),
    var(--hero) center / cover no-repeat;
}

.lb-board-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--f1-space-3);
  padding: 0 var(--f1-space-4) var(--f1-space-3);
}

.lb-board-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f1-space-2);
}

/* Weeks, sessions and laps reuse the sim toggle segmented look; links work too. */
a.lb-sim-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.lb-sim-toggle--scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.lb-sim-toggle--scroll::-webkit-scrollbar {
  display: none;
}
.lb-sim-btn .lb-live-dot {
  margin-left: var(--f1-space-2);
}

/* Small pulsing dot: on-track rows, live tabs. */
.lb-live-dot {
  display: inline-block;
  flex-shrink: 0;
  width: var(--f1-space-2);
  height: var(--f1-space-2);
  border-radius: var(--f1-radius-full);
  background: var(--f1-green);
  animation: lb-live-pulse 1.6s ease-out infinite;
}
@keyframes lb-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.55); }
  100% { box-shadow: 0 0 0 var(--f1-space-2) rgba(0, 230, 118, 0); }
}

.lb-live {
  display: inline-flex;
  align-items: center;
  gap: var(--f1-space-2);
  color: var(--f1-green);
  font-family: var(--f1-mono);
  font-variant-numeric: tabular-nums;
}

.lb-est {
  color: var(--f1-text-dim);
  font-style: italic;
}

.lb-pts {
  font-weight: var(--f1-weight-black);
  font-size: var(--f1-text-md);
}

.lb-board .lb-car-cell {
  justify-content: center;
}
.lb-car-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--f1-text-dim);
}

/* Multiplayer event board column split (up to 12 columns). */
.lb-board--mp .c-pos { width: 6%; }
.lb-board--mp .c-driver { width: 17%; }
.lb-board--mp .c-team { width: 16%; }
.lb-board--mp .c-time { width: 10%; }
.lb-board--mp .c-sector { width: 8%; }
.lb-board--mp .c-lap { width: 5%; }
.lb-board--mp .c-date { width: 9%; }
.lb-board--mp .c-analyse { width: 5%; }
.lb-board--mp .lb-table { min-width: 860px; }

/* Championship: standings + side cards. */
.lb-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--f1-space-4);
  align-items: start;
}
.lb-board-side {
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-4);
}
.lb-card-pad {
  padding: var(--f1-space-4) var(--f1-space-5);
}
.lb-card-title {
  margin: 0 0 var(--f1-space-3);
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-black);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f1-text-dim);
}
.lb-weeks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--f1-space-3);
  padding: 0 var(--f1-space-2) var(--f1-space-2);
}
.lb-week {
  padding: var(--f1-space-3) var(--f1-space-1) var(--f1-space-1);
  border: 1px solid var(--f1-border);
  border-radius: var(--f1-radius-md);
}
.lb-week .lb-card-title {
  padding: 0 var(--f1-space-3);
}
.lb-board .lb-week .lb-table {
  min-width: 0;
  table-layout: auto;
}
.lb-board .lb-week .lb-table tbody td {
  height: auto;
}
.lb-points-scale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f1-space-2);
}
.lb-points-scale span {
  padding: var(--f1-space-1) var(--f1-space-2);
  border-radius: var(--f1-radius-xs);
  background: var(--f1-surface);
  font-size: var(--f1-text-sm);
  font-variant-numeric: tabular-nums;
}
.lb-note {
  margin: var(--f1-space-3) 0 0;
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
}
.lb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f1-space-2);
  margin-top: var(--f1-space-3);
}

/* ── responsive table pieces (built by lb-board.js) ── */
.lb-chev,
.lb-sub,
.lb-best-gap {
  display: none;
}

.lb-table tr.lb-detail td,
.lb-board .lb-table tbody tr.lb-detail td {
  padding: 0;
  height: auto;
  background: var(--f1-surface);
  white-space: normal;
}
.lb-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.lb-detail.is-open .lb-detail-wrap {
  grid-template-rows: 1fr;
}
.lb-detail.is-instant .lb-detail-wrap {
  transition: none;
}
.lb-detail-grid {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--f1-space-16) * 1.4), 1fr));
  gap: var(--f1-space-3) var(--f1-space-4);
}
.lb-detail.is-open .lb-detail-grid {
  padding: var(--f1-space-3) var(--f1-space-4) var(--f1-space-4);
}
.lb-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-1);
  min-width: 0;
  text-align: left;
}
.lb-detail-label {
  font-size: var(--f1-text-xs);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f1-text-dim);
}
.lb-detail-value {
  font-size: var(--f1-text-md);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-detail-value.lb-car-cell {
  justify-content: flex-start;
}
.lb-detail-item--action {
  grid-column: 1 / -1;
}
.lb-detail-item--action .lb-detail-label {
  display: none;
}
.lb-detail-item--action .lb-analyse-btn {
  width: 100%;
  height: 44px;
  gap: var(--f1-space-2);
  border: 1px solid var(--f1-border);
  color: var(--f1-text);
  font-size: var(--f1-text-sm);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.06em;
}
.lb-detail-item--action .lb-analyse-btn::after {
  content: "OPEN TELEMETRY";
}

@media (prefers-reduced-motion: reduce) {
  .lb-detail-wrap { transition: none; }
  .lb-live-dot { animation: none; }
}

@media (max-width: 1100px) {
  .lb-table,
  .lb-records-board .lb-table,
  .lb-board--mp .lb-table {
    min-width: 0;
  }
  .lb-table .lb-p3 {
    display: none;
  }
  .lb-table .lb-chev {
    display: table-cell;
    width: var(--f1-space-8);
    padding: 0;
  }
  .lb-table tr.lb-xrow {
    cursor: pointer;
  }
  .lb-table tr.lb-xrow:focus-visible {
    outline: 2px solid var(--f1-red);
    outline-offset: -2px;
  }
  .lb-table td.lb-chev::before {
    content: "";
    display: block;
    width: var(--f1-space-2);
    height: var(--f1-space-2);
    margin: 0 auto;
    border-right: 2px solid var(--f1-text-dim);
    border-bottom: 2px solid var(--f1-text-dim);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .lb-table tr[aria-expanded="true"] td.lb-chev::before {
    transform: translateY(25%) rotate(-135deg);
  }
  .lb-board-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .lb-table {
    table-layout: auto;
  }
  .lb-table th,
  .lb-table td {
    width: auto;
  }
  .lb-table .lb-p2 {
    display: none;
  }
  .lb-table .c-pos,
  .lb-table td.lb-pos {
    width: 1%;
    padding-left: var(--f1-space-3);
    padding-right: var(--f1-space-2);
  }
  .lb-table .lb-cell-driver {
    width: 100%;
    max-width: 0;
    text-align: left;
  }
  .lb-table th[data-role="driver"] {
    text-align: left;
  }
  .lb-table tbody tr.lb-xrow td,
  .lb-board .lb-table tbody tr.lb-xrow td {
    height: 56px;
  }
  .lb-sub {
    display: flex;
    align-items: center;
    gap: var(--f1-space-2);
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--f1-text-sm);
    font-weight: var(--f1-weight-regular);
    color: var(--f1-text-dim);
  }
  .lb-sub .lb-car-badge,
  .lb-sub .lb-team-logo {
    height: var(--f1-space-4);
    width: auto;
    margin: 0;
  }
  .lb-sub .lb-car-cell,
  .lb-sub .lb-car-name {
    display: inline-flex;
    min-width: 0;
  }
  .lb-sub-sep {
    opacity: 0.5;
  }
  .lb-best-gap {
    display: block;
    margin-top: 2px;
    font-size: var(--f1-text-xs);
    color: var(--f1-text-dim);
  }
  .lb-board,
  .lb-records-board {
    padding: var(--f1-space-3) 0 var(--f1-space-1);
  }
  .lb-board .lb-board-head {
    flex-direction: column;
    align-items: stretch;
    padding: var(--f1-space-2) var(--f1-space-4) var(--f1-space-4);
  }
  .lb-board .lb-board-head--hero {
    margin: calc(-1 * var(--f1-space-3)) 0 var(--f1-space-2);
    padding: var(--f1-space-12) var(--f1-space-4) var(--f1-space-4);
    background:
      linear-gradient(0deg, var(--f1-bg) 10%, var(--f1-overlay) 60%, transparent 100%),
      var(--hero) center / cover no-repeat;
  }
  .lb-board-title--lg {
    font-size: var(--f1-text-xl);
  }
  .lb-board-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .lb-board .lb-table-wrap {
    padding: 0;
  }
  .lb-weeks {
    grid-template-columns: minmax(0, 1fr);
  }
}

h1.lb-board-title {
  margin: 0;
}

/* Board header actions (season standings, back links). Plain link styling so
   it works on the Bookings site too, which has no .btn-f1. */
.lb-board-link {
  display: inline-flex;
  align-items: center;
  gap: var(--f1-space-2);
  min-height: 40px;
  padding: 0 var(--f1-space-4);
  border: 1px solid var(--f1-border);
  border-radius: var(--f1-radius-sm);
  background: var(--f1-surface);
  color: var(--f1-text);
  font-size: var(--f1-text-sm);
  font-weight: var(--f1-weight-bold);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lb-board-link:hover {
  background: var(--f1-surface-strong);
  border-color: var(--f1-border-solid-bright);
}

.lb-board-bar > .lb-sim-toggle {
  align-self: flex-start;
}

/* Phone: the event artwork is a banner above the heading, not behind it, so
   artwork text (track logos etc.) never collides with the title. */
@media (max-width: 768px) {
  .lb-board .lb-board-head--hero {
    padding-top: 50vw;
    background:
      linear-gradient(0deg, var(--f1-panel-solid) 0%, var(--f1-panel-solid) 40%, transparent 72%),
      var(--hero) center top / 100% auto no-repeat;
  }
}

/* Championship standings: 6 columns. */
.lb-board--champ .lb-table { min-width: 640px; }
.lb-board--champ .c-pos { width: 8%; }
.lb-board--champ .c-driver { width: 36%; }
.lb-board--champ .c-lap { width: 14%; }
.lb-board--champ .c-time { width: 16%; }

/* Desktop hero: tall enough to actually show the event artwork, with the
   heading and podium sitting on a short fade at the bottom. */
.lb-board .lb-board-head--hero {
  min-height: 380px;
  align-items: flex-end;
  padding-top: var(--f1-space-16);
  background:
    linear-gradient(0deg, var(--f1-bg) 0%, var(--f1-overlay) 28%, transparent 60%),
    linear-gradient(90deg, var(--f1-overlay) 0%, transparent 45%),
    var(--hero) center 40% / cover no-repeat;
}
@media (max-width: 768px) {
  .lb-board .lb-board-head--hero {
    min-height: 0;
    padding-top: 50vw;
    background:
      linear-gradient(0deg, var(--f1-panel-solid) 0%, var(--f1-panel-solid) 40%, transparent 72%),
      var(--hero) center top / 100% auto no-repeat;
  }
}

/* Event artwork: the full poster, uncropped, beside the heading; a blurred
   copy of it fills the banner behind. */
.lb-board .lb-board-head--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--f1-space-8);
  min-height: 0;
  padding: var(--f1-space-8) var(--f1-space-6);
  background: var(--f1-bg);
}
.lb-board .lb-board-head--hero::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--f1-space-12));
  z-index: -1;
  background: var(--hero) center / cover no-repeat;
  filter: blur(32px) brightness(0.45) saturate(1.2);
}
.lb-board-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--f1-space-6);
  min-width: 0;
}
.lb-board-hero-art {
  display: block;
  height: 360px;
  width: auto;
  border-radius: var(--f1-radius-md);
  box-shadow: var(--f1-shadow-lg);
}
@media (max-width: 768px) {
  .lb-board .lb-board-head--hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--f1-space-5);
    padding: var(--f1-space-4);
    background: var(--f1-bg);
  }
  .lb-board-hero-art {
    order: -1;
    width: 100%;
    height: auto;
  }
}

.lb-board-head--hero .lb-board-eyebrow {
  color: var(--f1-text);
}