:root {
  --bg: #090a0c;
  --panel: #111318;
  --panel-2: #181b21;
  --ink: #f5f3ee;
  --muted: #b7b1a8;
  --subtle: #827c74;
  --line: rgba(245, 243, 238, 0.14);
  --red: #e10600;
  --red-dark: #a90400;
  --gold: #d8b45f;
  --green: #35c977;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Libre Franklin", Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}

body.has-modal {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  transform: translateY(-150%);
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--bg);
  padding: 0.65rem 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.series-nav {
  position: relative;
  z-index: 6;
  border-bottom: 1px solid var(--line);
  background: #0d0f13;
}

.series-nav__inner {
  width: min(1440px, 100%);
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

.series-nav__brand {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: lowercase;
}

.series-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.series-nav__link:hover,
.series-nav__link[aria-current="page"] {
  color: var(--ink);
}

.series-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--red);
}

.hero {
  position: relative;
  /* align-items: start anchors content under its top padding so any leftover
     min-height extends below the content (toward the table), not above it
     as a void between the ticker and the masthead. Clamp tightened so the
     panel never towers over the content on tall desktop windows. */
  min-height: clamp(360px, 42vh, 560px);
  display: grid;
  align-items: start;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(9, 10, 12, 0.94), rgba(9, 10, 12, 0.74) 48%, rgba(9, 10, 12, 0.9)),
    radial-gradient(circle at 78% 30%, rgba(225, 6, 0, 0.3), transparent 36%),
    linear-gradient(135deg, #14171c 0%, #08090b 58%, #1b0b0a 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -8vw 8vh 45vw;
  height: 18vh;
  border-top: 2px solid rgba(245, 243, 238, 0.7);
  border-bottom: 2px solid rgba(225, 6, 0, 0.82);
  transform: skewY(-9deg);
  opacity: 0.78;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245, 243, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 243, 238, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 78%);
}

.hero__content {
  position: relative;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0 4rem;
}

/* Narrow screens: let the headline wrap and the content set the hero's
   height. The base clamp(360px, 42vh, 560px) is already small enough that
   no mobile min-height override is needed. */
@media (max-width: 900px) {
  .hero__content {
    padding: 2.75rem 0 2.5rem;
  }
}

.brand {
  margin: 0 0 1.5rem;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 6.4rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.85;
  text-transform: lowercase;
}

.series-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  border: 1px solid var(--red);
  border-radius: 999px;
  color: var(--ink);
  padding: 0.18em 0.62em;
  font-family: var(--font-sans);
  font-size: 0.22em;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.hero h1 {
  max-width: 980px;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.tagline {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 2.2rem 0 0;
}

.hero-stats div {
  min-width: 168px;
  border: 1px solid var(--line);
  background: rgba(17, 19, 24, 0.72);
  padding: 1rem 1.1rem;
}

.hero-stats dt {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
}

.hero-stats dd {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

main {
  width: min(1440px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.4rem 0 4rem;
}

.controls,
.table-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.controls {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -1rem;
  padding: 1rem;
  background: rgba(9, 10, 12, 0.92);
  backdrop-filter: blur(16px);
}

.search-wrap {
  display: grid;
  gap: 0.45rem;
  width: min(520px, 100%);
  min-width: 0;
}

label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

input[type="search"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0f1115;
  color: var(--ink);
  padding: 0.85rem 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  font-weight: 800;
}

.chip.is-active {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

/* MotoGP theme: --red is #ff7a00, where white text only reaches 2.61:1.
   Dark ink (#090a0c) on the orange fill clears 7.5:1. F1 keeps white on
   #e10600 (4.97:1, AA pass). */
[data-series="motogp"] .chip.is-active {
  color: var(--bg);
}

.table-shell {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.table-head {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--line);
}

.table-head h2 {
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
}

#result-count {
  margin-bottom: 0;
  color: var(--muted);
}

/* No overflow on desktop: an overflow container would become the sticky
   scrollport and pin the header INSIDE the table instead of below the
   controls bar. Horizontal scrolling only exists at widths where the
   table can actually overflow (see media query below). */
.table-scroll {
  overflow: visible;
}

@media (max-width: 1180px) and (min-width: 641px) {
  .table-scroll {
    overflow-x: auto;
  }

  .table-scroll th {
    position: static;
  }
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 0.72rem 0.78rem;
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: var(--controls-h, 82px);
  z-index: 2;
  background: #151820;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

th button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 0.5rem;
  font-weight: 900;
  text-transform: inherit;
  letter-spacing: inherit;
}

th button span {
  min-width: 0.7rem;
  color: var(--red);
}

tbody tr {
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

tbody tr:hover,
tbody tr:focus-visible {
  background: #1d2028;
}

td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.track-cell {
  display: grid;
  grid-template-columns: 58px minmax(170px, 1fr);
  align-items: center;
  gap: 0.85rem;
}

/* Real button wrapping the circuit name (atlas + season views). Resets
   browser button chrome so the name reads exactly like the old bold text,
   while giving it a >= 44px hit target that spans the cell. The global
   :focus-visible gold outline still applies (not reset here). */
.track-link {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  min-height: 44px;
}

.track-cell strong {
  display: block;
  line-height: 1.2;
}

.track-cell span {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.outline-thumb {
  width: 52px;
  aspect-ratio: 1;
  color: var(--red);
}

.outline-empty {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--subtle);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.badge--current {
  border-color: rgba(53, 201, 119, 0.45);
  color: var(--green);
}

.badge--historical {
  color: var(--muted);
}

.badge--future {
  border-color: rgba(216, 180, 95, 0.5);
  color: var(--gold);
}

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem
           max(1rem, env(safe-area-inset-bottom));
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.modal__panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: 92vh;                       /* legacy browsers */
  max-height: min(92svh, 980px);          /* iOS 15.4+, modern Chrome/Firefox */
  overflow: auto;
  border: 1px solid var(--line);
  background: #101216;
  box-shadow: var(--shadow);
}

.modal__close {
  position: sticky;
  top: 0.75rem;
  left: calc(100% - 3.5rem);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #1a1d24;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

#detail-content {
  padding: 0 1.4rem 1.6rem;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
  align-items: center;
  gap: 1.5rem;
  padding: 0.2rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
}

.detail-hero p {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.detail-hero h2 {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-badges > span:not(.badge) {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 0.2rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.outline-large {
  width: 100%;
  max-height: 300px;
  color: var(--red);
}

.outline-detail {
  position: relative;
  min-width: 0;
}

.outline-detail .outline-large {
  display: block;
}

.corner-marker circle {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 5;
}

.corner-marker text {
  fill: white;
  font: 900 24px/1 var(--font-sans);
  text-anchor: middle;
  pointer-events: none;
}

.outline-detail.corners-hidden .corner-marker {
  display: none;
}

.outline-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #1a1d24;
  color: var(--ink);
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  font-weight: 900;
}

.outline-toggle[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

[data-series="motogp"] .outline-toggle[aria-pressed="true"] {
  color: var(--bg);
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 1rem;
  margin-top: 1rem;
}

.satellite {
  margin: 0;
}

.satellite__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #07080a;
}

.satellite img,
.image-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: #07080a;
}

.satellite__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.satellite__overlay polyline {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.satellite__area {
  fill: none;
  stroke: white;
  stroke-width: 1;
  stroke-dasharray: 6 5;
  opacity: 0.9;
}

.satellite__area-label {
  fill: white;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.8);
  stroke-width: 4;
  font: 800 14px/1 var(--font-sans);
}

.satellite__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.satellite__toolbar button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #1a1d24;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.satellite__toolbar button:hover {
  border-color: rgba(245, 243, 238, 0.34);
  background: #222631;
}

.image-fallback {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--subtle);
}

figcaption,
.fine {
  margin-top: 0.5rem;
  color: var(--subtle);
  font-size: 0.86rem;
}

.detail-stats {
  display: grid;
  gap: 1px;
  margin: 0;
}

.detail-stat {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0.9rem;
}

.detail-stat dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-stat dd {
  margin: 0.2rem 0 0;
  font-weight: 800;
}

.detail-stat span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-weight: 500;
}

.record-photo {
  margin: 0.75rem 0 0;
}

.record-photo img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.record-photo figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.record-photo a,
.disabled-action {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

.disabled-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.85rem;
  border: 1px solid rgba(216, 180, 95, 0.44);
  border-radius: 3px;
  color: var(--gold);
  padding: 0.6rem 0.85rem;
  font-weight: 900;
  text-decoration: none;
}

.disabled-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.78;
}

.corner-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.corner-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #151820;
  color: var(--ink);
  padding: 0.35rem 0.65rem;
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.corner-data h4 {
  margin: 1rem 0 0.4rem;
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.straight-list strong {
  color: var(--ink);
}

.straight-list span {
  display: block;
  margin-top: 0.2rem;
}

.detail-section {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.detail-section h3 {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-section p,
.detail-section li {
  color: var(--muted);
}

.detail-section ul {
  margin: 0;
  padding-left: 1.1rem;
}

.sources {
  columns: 2 280px;
}

.sources a {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

@media (max-width: 760px) {
  .hero {
    /* content-sized; a vh minimum leaves a void above the masthead */
    min-height: 0;
  }

  .controls {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .table-scroll {
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  table {
    min-width: 0;
  }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  tbody {
    display: grid;
    gap: 0.8rem;
    padding: 0.8rem;
  }

  tbody tr {
    border: 1px solid var(--line);
    background: #12151b;
    padding: 0.25rem 0;
  }

  td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 0;
    padding: 0.45rem 0.75rem;
    white-space: normal;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  td:first-child {
    grid-template-columns: 1fr;
    padding-top: 0.75rem;
  }

  td:first-child::before {
    display: none;
  }

  .track-cell {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .detail-hero,
  .media-grid {
    grid-template-columns: 1fr;
  }

  .outline-large {
    max-height: 220px;
  }

  .outline-toggle {
    position: static;
    margin-top: 0.6rem;
  }

  .corner-chip {
    border-radius: 6px;
  }
}

@media (max-width: 430px) {
  main,
  .hero__content {
    width: min(100% - 1rem, 1440px);
  }

  /* Zero the negative margin that bleeds the controls past the narrower
     <=430px main gutters, which caused 8px of horizontal overflow. The
     internal 1rem padding still gives the bar its breathing room. */
  .controls {
    margin-inline: 0;
  }

  #detail-content {
    padding-inline: 0.85rem;
  }

  .modal {
    padding: max(0.4rem, env(safe-area-inset-top)) 0.4rem
             max(0.4rem, env(safe-area-inset-bottom));
  }
}

[data-series="motogp"] {
  --red: #ff7a00;
  --red-dark: #c45e00;
  --gold: #00c2b8;
}

[data-series="motogp"] .hero {
  background:
    linear-gradient(90deg, rgba(9, 10, 12, 0.94), rgba(9, 10, 12, 0.74) 48%, rgba(9, 10, 12, 0.9)),
    radial-gradient(circle at 78% 30%, rgba(255, 122, 0, 0.32), transparent 36%),
    linear-gradient(135deg, #14171c 0%, #08090b 58%, #201207 100%);
}

[data-series="motogp"] .hero::before {
  border-bottom-color: rgba(255, 122, 0, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

.version-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  padding: 0.18em 0.65em;
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #9a9a9a);
  border: 1px solid var(--line, #3a3a3a);
  border-radius: 999px;
  background: transparent;
}

.world-inset {
  display: block;
  width: 100%;
  max-width: 280px;
  margin-top: 1rem;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line);
  background: #07080a;
}

.world-inset__land {
  fill: #2a2e36;
  stroke: none;
}

.world-inset__pulse {
  fill: var(--accent, var(--red));
  opacity: 0.22;
}

.world-inset__dot {
  fill: var(--accent, var(--red));
}

@media (max-width: 640px) {
  .world-inset {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-inset__pulse,
  .world-inset__dot {
    animation: none !important;
  }
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.view-toggle {
  border-radius: 4px;
  border-color: var(--gold);
  color: var(--gold);
}

.view-toggle.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}

.season-year-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.season-year-wrap[hidden],
.chips[hidden] {
  display: none;
}

.season-year-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#season-year {
  min-width: 6rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0f1115;
  color: var(--ink);
  padding: 0.5rem 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

#season-year:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

th button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Season min-width scoped to >=641px so it can't force horizontal overflow
   at 320px (400% zoom). Overridden to 0 at <=640px where cards mode lives. */
@media (min-width: 641px) {
  table.is-season {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  table.is-season {
    min-width: 0;
  }
}

.gp-cell strong {
  display: block;
  line-height: 1.2;
}

.gp-cell .gp-date {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .view-switch {
    width: 100%;
  }

  #season-year {
    flex: 1 1 auto;
  }
}

/* ─────────────────────────  race ticker  ─────────────────────────
   Swipeable race-weekend strip above the hero. position: relative so it
   never offsets the sticky controls/table-header stack. #ticker-text is
   the carousel viewport; each .ticker__panel is exactly one viewport
   wide so a swipe moves exactly one panel. */

.ticker {
  position: relative;
  z-index: 4;
  background: var(--panel);
  border-bottom: 1px solid var(--red);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.ticker[hidden] {
  display: none;
}

.ticker__inner {
  position: relative;
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  min-height: 44px;
}

.ticker__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.6);
}

.ticker.is-live .ticker__dot {
  animation: ticker-pulse 1.4s ease-out infinite;
}

@keyframes ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(225, 6, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0); }
}

/* Carousel region: viewport on top, controls (prev · dots · updated ·
   next) below. Grid keeps the layout compact so the strip stays
   <= 140px tall on phones while the controls keep 44px hit targets. */
.ticker__panels {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.4rem;
  row-gap: 0.25rem;
}

.ticker__viewport {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ticker__viewport:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.ticker__viewport::-webkit-scrollbar {
  display: none;
}

/* Each panel is exactly one viewport wide (flex-basis 100% of the
   content box), so a swipe scrolls exactly one panel. Text wraps
   normally: no nowrap, no clipping, no ellipsis. */
.ticker__panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ticker__caption {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticker__fact {
  color: var(--ink);
  font-weight: 700;
}

.ticker__line {
  display: block;
}

.ticker__fact-list {
  color: var(--ink);
}

.ticker__when,
.ticker__time {
  color: var(--ink);
}

.ticker__sep {
  color: var(--subtle);
  margin: 0 0.3rem;
}

.ticker__count {
  color: var(--ink);
}

.ticker__sub,
.ticker__muted {
  color: var(--muted);
}

.ticker__link,
.ticker__live-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

/* Prev/Next controls — 44x44 hit targets, sit on the sides of the dots
   row. Disabled at the ends (see ticker.js). */
#ticker-prev {
  grid-column: 1;
  grid-row: 2;
}

#ticker-next {
  grid-column: 4;
  grid-row: 2;
}

.ticker__nav {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.ticker__nav:hover {
  border-color: rgba(245, 243, 238, 0.3);
}

.ticker__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ticker__nav:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Dots: one per panel. Narrow visually (8px) but a 44px tall hit area
   via min-height so they stay tappable; >= 24px wide for the same.
   Tight gap so four dots still fit beside the prev/next arrows at 320px. */
.ticker__dots {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 44px;
}

.ticker__dots button {
  min-width: 24px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ticker__dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color 160ms ease;
}

.ticker__dots button[aria-current="true"]::before {
  background: var(--red);
}

.ticker__dots button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.ticker__updated {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  color: var(--subtle);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The freshness stamp crowds the controls row on phones (prev · dots ·
   next already fill it), so it is hidden <= 767px. Its textContent stays
   in the DOM, so the panels contract still reads "Updated hh:mm"; it
   just isn't painted where it would force horizontal overflow. */
@media (max-width: 767px) {
  .ticker__updated {
    display: none;
  }
}

.ticker__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ticker__close:hover {
  color: var(--ink);
}

.ticker__close:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* On wide screens let the panels breathe a little more; they are still
   one-per-viewport in the scroller, so swipe behavior is unchanged. */
@media (min-width: 768px) {
  .ticker__panel {
    padding: 0.4rem 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker.is-live .ticker__dot {
    animation: none !important;
  }

  .ticker__dots button::before {
    transition: none;
  }
}