/* Formula Live — design tokens + components, ported from the Nocturne
   design system used in the source mockup, plus this site's layout &
   responsive rules. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;

  --color-accent-100: #f5f4ff;
  --color-accent-300: #d2cefd;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-section: #262a60;
  --color-section-glow: #353b80;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);

  --header-h: 56px;
  --ticker-h: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute and `.post`/`.toast` (etc.) display rules have
   equal selector specificity, so without this the later author rule would
   win the cascade and hidden elements would still render. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  background:
    radial-gradient(1200px 720px at 84% -180px, color-mix(in srgb, var(--color-accent-900) 70%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-300);
}

img {
  display: block;
  max-width: 100%;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.shell--wide {
  max-width: 1440px;
}

.lighten {
  mix-blend-mode: lighten;
  background-color: transparent;
}

/* Rules fade to transparent at both ends instead of stopping cleanly. */
.hr {
  height: 1px;
  border: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px),
    transparent
  );
}

.text-muted {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.text-faint {
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

@keyframes f1pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes f1slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes f1toast {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: f1pulse 1.8s ease-in-out infinite;
  flex: none;
}

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  touch-action: manipulation;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: 6px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

.input {
  min-height: 34px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.card {
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 6px;
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* Multiple topic chips on one article (news) — plain .tag elements
   side by side with no wrapper just crowd together with no gap. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }

.avatar-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-neutral-700);
  display: inline-block;
  flex: none;
}

/* — segmented control — */
.seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.seg-opt + .seg-opt {
  border-left: 1px solid var(--color-divider);
}
.seg-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.seg-opt:has(input:checked) {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.seg-opt:not(:has(input:checked)):hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.seg-opt:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-feature-settings: "tnum" 1;
}
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2);
  white-space: nowrap;
}
.table td {
  padding: var(--space-2);
  white-space: nowrap;
}
.table thead tr,
.table tbody tr {
  background: linear-gradient(to right, transparent, var(--color-divider) 24px, var(--color-divider) calc(100% - 24px), transparent)
    no-repeat bottom / 100% 1px;
}

/* — header / nav — */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.site-header__row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  color: var(--color-text);
  flex: none;
}
.brand__logo {
  /* 132px matches the brand guide's own "site header" reference size —
     comfortably clears its documented 120px minimum lockup width. */
  display: block;
  width: 132px;
  height: auto;
}

/* — series bar — a strip above the main header, not part of its sticky
   stack: it scrolls away with the page, and .site-header (sticky, top: 0)
   takes over the top edge once you scroll past it. Built to grow past two
   series without a redesign — .series-bar__nav scrolls horizontally
   instead of wrapping once there are more options than fit. */
.series-bar {
  background: color-mix(in srgb, var(--color-section) 55%, var(--color-bg));
  border-bottom: 1px solid var(--color-divider);
}
.series-bar__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 7px;
}
.series-bar__label {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.series-bar__nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.series-bar__nav::-webkit-scrollbar {
  display: none;
}
/* Real buttons, not pills — same bordered-rectangle language as .btn
   (see styles.css's button block), just sized for this denser strip. */
.series-bar__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.series-bar__link--active {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: var(--color-accent);
}
.series-bar__link:not(.series-bar__link--active):hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 13.5px;
}
.nav-link {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--color-text);
}

.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-input {
  width: 180px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
[data-nav-open="true"] .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[data-nav-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
[data-nav-open="true"] .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* — live ticker — */
.live-ticker {
  position: sticky;
  top: var(--header-h);
  z-index: 29;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-accent-900) 62%, color-mix(in srgb, var(--color-bg) 86%, transparent));
}
.live-ticker__row {
  /* Horizontal inset comes from the shared .shell class on this element —
     only the vertical padding is specific to the ticker. Redeclaring the
     horizontal value here risked drifting from .shell's over time. */
  padding-block: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  font-feature-settings: "tnum" 1;
  min-height: var(--ticker-h);
}
.live-ticker__status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
}
.live-ticker__round {
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.live-ticker__leaders {
  display: flex;
  gap: 16px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  flex-wrap: wrap;
}
.ticker__driver { color: var(--color-text); }
.live-ticker__end {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12.5px;
}

/* — hero — */
.hero {
  padding-block: 28px 24px;
  border-bottom: 1px solid var(--color-divider);
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__live-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero__updated {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-feature-settings: "tnum" 1;
}
.hero__title {
  font-size: clamp(28px, 5.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 14px 0 0;
  max-width: 40ch;
}
.hero__lede {
  font-size: clamp(14.5px, 2.4vw, 16.5px);
  line-height: 1.62;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin: 16px 0 0;
  max-width: 68ch;
}
.hero__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* — feed layout — */
.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-block: 24px 56px;
  align-items: start;
}

.feed__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  z-index: 10;
  padding: 10px 0;
  background: linear-gradient(var(--color-bg) 70%, transparent);
}
.feed__load-new { animation: f1slide 0.3s ease; }
.feed__view-toggle {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.feed__back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 12px;
}
.feed__back-top svg { flex: none; }

.feed__posts {
  display: flex;
  flex-direction: column;
}
.feed__footer-note {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 22px 0 0;
}

.post {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-divider);
  /* Keeps anchor/scrollIntoView targets clear of the sticky header + ticker
     + feed controls bar instead of landing hidden underneath them. */
  scroll-margin-top: calc(var(--header-h) + var(--ticker-h) + 60px);
}
.post--breaking {
  animation: f1slide 0.35s ease;
}
.post[data-full-view-only="true"][data-view-hidden] {
  display: none;
}
.post__time { font-feature-settings: "tnum" 1; }
.post__clock {
  margin: 0;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.post--breaking .post__clock { color: var(--color-accent); }
.post__kicker {
  margin: 6px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.post__title {
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}
.post .tag + .post__title { margin-top: 12px; }
.post__body {
  font-size: 15px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  margin: 10px 0 0;
}
.post__quote {
  margin: 12px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--color-accent-700);
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.post__table { margin-top: 16px; }
.post__photo { margin: 16px 0 0; mix-blend-mode: lighten; }
.post__photo figcaption {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin-top: 8px;
}
.photo-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 6%, transparent) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--color-section) 0%, var(--color-section-glow) 55%, var(--color-accent-900) 100%);
  border: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-neutral-100) 70%, transparent);
}
.photo-placeholder__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent-500) 30%, transparent), transparent 62%);
  pointer-events: none;
}
.photo-placeholder__badge {
  position: relative;
  width: clamp(26px, 14%, 84px);
  height: auto;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, #000 40%, transparent));
}
.photo-placeholder__kind {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
  color: color-mix(in srgb, var(--color-neutral-100) 75%, transparent);
}
.post__author {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 12px 0 0;
}

/* — sidebar — */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h) + 8px);
}
.sidebar__eyebrow {
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sidebar__session .sidebar__eyebrow { margin-bottom: 0; }
.sidebar__clock-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  font-feature-settings: "tnum" 1;
}
.sidebar__clock { font-family: var(--font-heading); font-size: 28px; }
.sidebar__clock-label { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.sidebar__progress {
  height: 3px;
  background: var(--color-neutral-800);
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
}
.sidebar__progress-bar {
  width: 0%;
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 1s linear;
}
.sidebar__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-feature-settings: "tnum" 1;
}
.sidebar__stats > div { display: flex; justify-content: space-between; }
.sidebar__stats span:last-child { color: var(--color-text); }

.key-moments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  font-feature-settings: "tnum" 1;
}
.key-moment {
  display: flex;
  gap: 12px;
  color: var(--color-text);
  padding: 4px 0;
}
.key-moment__time {
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  min-width: 38px;
  flex: none;
}
.sidebar__full-timing {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
}
.timing__pos { color: var(--color-accent); }
.timing__gap { color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* — toast — */
.toast {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 40;
  width: min(340px, calc(100vw - 32px));
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  padding: 16px 18px;
  animation: f1toast 0.4s ease;
}
.toast__head { display: flex; align-items: center; gap: 8px; }
.toast__label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.toast__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
}
.toast__body { font-size: 14.5px; line-height: 1.45; margin: 10px 0 0; }
.toast__actions { display: flex; gap: 8px; margin-top: 14px; }

/* — footer — */
.site-footer {
  border-top: 1px solid var(--color-divider);
}
.site-footer__row {
  padding: 26px clamp(20px, 4vw, 56px);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.site-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }

/* — stub pages — */
.stub-page {
  padding-block: 56px 80px;
  max-width: 62ch;
}
.stub-page__eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
}
.stub-page__title {
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: 14px;
}
.stub-page__lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin-bottom: 24px;
}
.stub-page code {
  font-family: ui-monospace, monospace;
  font-size: 0.92em;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Shared page components (Home, Standings, Calendar, Teams, Tech, Live Timing) ── */

.page-intro {
  padding-block: 38px 26px;
}
.page-intro__title {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.page-intro__lede {
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  margin: 14px 0 0;
  max-width: 56ch;
}
.page-intro__controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section-head__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.012em;
  margin: 0;
}

/* — bar meters (constructor points, title race) — */
.meter-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meter-row__label {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.meter {
  height: 3px;
  background: var(--color-neutral-800);
  border-radius: 2px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: 2px;
}

/* — stat cards / stat grids (Standings, Calendar, Team detail) — */
.stat-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  padding-bottom: 32px;
}
.stat-card--accent {
  border: 1px solid var(--color-accent-700);
}
.stat-card__label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat-card__value {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-feature-settings: "tnum" 1;
}
.stat-card__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  font-feature-settings: "tnum" 1;
}
.stat-grid--bordered {
  border-top: 1px solid var(--color-divider);
  padding-top: 24px;
  padding-bottom: 38px;
}
.stat-grid__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
}
.stat-grid__label {
  margin: 6px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  font-feature-settings: "tnum" 1;
  margin-top: 12px;
}
.kv-row {
  display: flex;
  justify-content: space-between;
}

.link-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.4;
}
.link-stack__item {
  color: var(--color-text);
}
.link-stack__item:hover {
  color: var(--color-accent-300);
}

/* — homepage — */
.news-lead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-block: 40px 44px;
}
.news-lead__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.news-lead__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
.news-lead__title a {
  color: var(--color-text);
}
.news-lead__title a:hover {
  color: var(--color-accent-300);
}
.news-lead__body {
  font-size: 16.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  max-width: 60ch;
  margin: 18px 0 0;
}
.news-lead__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.news-lead__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid var(--color-divider);
  padding-left: clamp(20px, 2.5vw, 36px);
}
.latest-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.latest-item__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0;
}
.latest-item__meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  margin: 8px 0 0;
  font-feature-settings: "tnum" 1;
}

.standings-preview {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-block: 44px;
  align-items: start;
}

.next-round-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  font-feature-settings: "tnum" 1;
}
.next-round-card {
  padding: 16px;
}
.next-round-card--live {
  border: 1px solid var(--color-accent-700);
}
.next-round-card__label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.next-round-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  margin: 10px 0 0;
}
.next-round-card__place {
  margin: 6px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.next-round-card__note {
  margin: 12px 0 0;
  font-size: 13px;
}

.tech-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-block: 44px;
}
.tech-feature--no-image { grid-template-columns: minmax(0, 1fr); }
.tech-feature--no-image .tech-feature__body { max-width: none; }
.tech-feature__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.tech-feature__title a {
  color: var(--color-text);
}
.tech-feature__title a:hover {
  color: var(--color-accent-300);
}
.tech-feature__body {
  font-size: 15.5px;
  line-height: 1.62;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 16px 0 0;
  max-width: 48ch;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.article-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.article-card__body {
  padding: 16px 18px 20px;
}
.article-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  margin: 12px 0 0;
}
.article-card__lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 10px 0 0;
}
.article-card__byline {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 14px 0 0;
}

.team-pill-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
/* set --team-color inline from data.color, same wash as .team-card--tinted */
.team-pill {
  padding: 10px 20px;
  border-radius: 999px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--team-color, var(--color-accent)) 26%, var(--color-surface)),
    var(--color-surface) 75%
  );
  border: 1px solid color-mix(in srgb, var(--team-color, var(--color-accent)) 28%, transparent);
}
.team-pill:hover {
  border-color: color-mix(in srgb, var(--team-color, var(--color-accent)) 55%, transparent);
  color: var(--color-text);
}

/* — standings page — */
.standings-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-bottom: 48px;
  align-items: start;
}
/* Drivers/Constructors tabs — pure CSS, no JS: the two radios in the .seg
   control and the two .tab-panels both live under .standings-tabs, so
   :has() can toggle panel visibility off the checked radio without either
   needing to be a sibling of the other. */
.tab-panel {
  display: none;
}
.standings-tabs:has(#st-view-drivers:checked) .tab-panel--drivers {
  display: block;
}
.standings-tabs:has(#st-view-constructors:checked) .tab-panel--constructors {
  display: block;
}
/* Live timing Tower/Sectors/Gaps/Tyres tabs — same pure-CSS pattern,
   scoped to <main> like the calendar filters below since the .seg
   control and the .tab-panels aren't a shared closer-scoped wrapper here. */
main:has(#view-tower:checked) .tab-panel--tower {
  display: block;
}
main:has(#view-sectors:checked) .tab-panel--sectors {
  display: block;
}
main:has(#view-gaps:checked) .tab-panel--gaps {
  display: block;
}
main:has(#view-tyres:checked) .tab-panel--tyres {
  display: block;
}
main:has(#view-race-control:checked) .tab-panel--race-control {
  display: block;
}
/* Race control's tab is mobile-only — desktop already shows it in the
   sidebar alongside the table, so the 5th option here would be redundant
   there. Restored to visible under the mobile breakpoint below, where the
   sidebar copy is hidden instead (see .sidebar__race-control). */
.seg-opt--mobile-only {
  display: none;
}

/* — calendar page — */
/* Round filters — pure CSS, no JS: the 4 radios and the .round-row table
   rows both live under <main>, so :has() can hide non-matching rows off
   the checked radio without needing a shared, closer-scoped wrapper. */
main:has(#cal-filter-upcoming:checked) .round-row[data-status="completed"] {
  display: none;
}
main:has(#cal-filter-completed:checked) .round-row:not([data-status="completed"]) {
  display: none;
}
main:has(#cal-filter-sprints:checked) .round-row:not([data-sprint="true"]) {
  display: none;
}
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-bottom: 20px;
  align-items: start;
}
.next-round-feature {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-accent-700);
}
.next-round-feature__body {
  padding: 20px 22px 24px;
}
.next-round-feature__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.016em;
  margin: 12px 0 0;
}
.next-round-feature__meta {
  margin: 8px 0 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.session-times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 20px;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
}
.session-time {
  border-top: 1px solid var(--color-divider);
  padding-top: 10px;
}
.session-time--live {
  border-top-color: var(--color-accent);
}
.session-time__label {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.session-time--live .session-time__label {
  color: var(--color-accent);
}
.session-time__value {
  margin-top: 4px;
}

/* — race weekend page — */
.race-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.race-session-card {
  display: block;
  padding: 18px;
  color: var(--color-text);
}
.race-session-card--ongoing {
  border-color: var(--color-accent-700);
}
.race-session-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
}
.race-session-card__time {
  margin: 6px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-feature-settings: "tnum" 1;
}

/* — race weekend podium — */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 3vw, 20px);
  max-width: 520px;
  margin: 0 auto;
}
.podium__step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.podium__driver {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(12.5px, 3.4vw, 15px);
  line-height: 1.2;
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.podium__team {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: 2px 0 10px;
}
.podium__block {
  width: 100%;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: color-mix(in srgb, var(--podium-color, var(--color-accent)) 78%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--podium-color, var(--color-accent)) 85%, transparent);
  border-bottom: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
}
.podium__block--1 { height: 120px; }
.podium__block--2 { height: 90px; }
.podium__block--3 { height: 70px; }
.podium__position {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 3px color-mix(in srgb, #000 45%, transparent);
}
.classification-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* — teams pages — */
.team-grid {
  padding-bottom: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.team-card {
  display: block;
  padding: 20px;
  color: var(--color-text);
}
.team-card--leader {
  border: 1px solid var(--color-accent-700);
}
/* Constructor cards only (set --team-color inline from data.color) — a
   subtler version of .constructor-hero's wash, mixed into --color-surface
   since cards sit on that, not the page background. */
.team-card--tinted {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--team-color, var(--color-accent)) 22%, var(--color-surface)),
    var(--color-surface) 70%
  );
  border: 1px solid color-mix(in srgb, var(--team-color, var(--color-accent)) 24%, transparent);
}
.team-card--tinted.team-card--leader {
  border: 1px solid var(--color-accent-700);
}
.team-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.team-card__points {
  font-family: var(--font-heading);
  font-size: 24px;
  font-feature-settings: "tnum" 1;
}
.team-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 12px 0 0;
}
.team-card__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.team-card__drivers {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  font-feature-settings: "tnum" 1;
}

/* Track outline SVG — /tracks cards (see render/track-map.ts). currentColor
   so it tints with whatever wraps it; sized to sit above the card text. */
.track-map {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
  color: var(--color-accent);
}

/* — live blog hub — */
.live-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.live-blog-card {
  display: block;
  padding: 18px;
  color: var(--color-text);
}
.live-blog-card--live { border: 1px solid var(--color-accent-700); }
.live-blog-card--ended { opacity: 0.72; }
.live-blog-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.live-blog-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
}

.breadcrumb {
  padding-top: 22px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  display: flex;
  gap: 8px;
}
.team-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: 22px 40px;
}
/* Full-bleed team-colored wash behind a constructor's hero — set
   --team-color inline from the constructor's own data.color; falls back
   to the site accent if it's ever unset. */
.constructor-hero {
  margin-top: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--team-color, var(--color-accent)) 30%, var(--color-bg)),
    color-mix(in srgb, var(--team-color, var(--color-accent)) 6%, var(--color-bg)) 55%,
    var(--color-bg) 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--team-color, var(--color-accent)) 35%, transparent);
}
.team-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.024em;
  margin: 14px 0 0;
}
.team-hero__tagline {
  font-size: 16.5px;
  line-height: 1.62;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin: 16px 0 0;
  max-width: 50ch;
}
.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-bottom: 48px;
  align-items: start;
}
.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 20px);
}
.driver-card {
  display: block;
  padding: 0;
  overflow: hidden;
  color: var(--color-text);
}
.driver-card__body {
  padding: 16px 18px 20px;
}
.driver-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  margin: 10px 0 0;
}
.driver-card__meta {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-feature-settings: "tnum" 1;
}
/* Reserve/young drivers on a constructor page — same card, smaller box:
   narrower grid columns and tighter body padding/type scale. */
.driver-grid--compact {
  /* Fixed max (not 1fr) so a lone card doesn't stretch to fill the row —
     "smaller box" should hold even when there's only one reserve driver. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 180px));
  gap: clamp(12px, 1.5vw, 16px);
}
.driver-card--compact .driver-card__body {
  padding: 12px 14px 14px;
}
.driver-card--compact .driver-card__name {
  font-size: 16px;
  margin-top: 6px;
}

/* — tech page — */
.tech-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  padding-block: 36px 48px;
  align-items: start;
}
.tech-article-list {
  display: flex;
  flex-direction: column;
}
.tech-article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-divider);
}
.tech-article--no-image { grid-template-columns: minmax(0, 1fr); }
.tech-article__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  margin: 10px 0 0;
}
.tech-article__title a {
  color: var(--color-text);
}
.tech-article__title a:hover {
  color: var(--color-accent-300);
}
.tech-article__body {
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: 8px 0 0;
  max-width: 62ch;
}
.tech-article__byline {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 10px 0 0;
}

/* — live timing page — */
.live-timing-head {
  padding: 30px 0 18px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
/* Tower/Sectors/Gaps/Tyres — sticks just below the header + live-ticker
   bar while scrolling the table, same stacking pattern .feed__controls
   uses on the live blog page (top offset, gradient fade so table rows
   don't show through underneath it while pinned). Applies at every
   width — the mobile-only full-width/equal-split rule lives separately
   in the @media (max-width: 720px) block below. */
.timing-view-tabs {
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  z-index: 10;
  background: linear-gradient(var(--color-bg) 70%, transparent);
  padding-block: 10px;
}
.live-timing-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: clamp(20px, 2.5vw, 36px);
  padding-bottom: 44px;
  align-items: start;
}
.timing-table {
  font-size: 13.5px;
}
.timing-sector--best {
  color: var(--color-accent-300);
}
.ticker__pill {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}
.track-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.track-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent-500);
}
.session-best-sectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
}
.session-best-sectors > div {
  border-top: 1px solid var(--color-divider);
  padding-top: 8px;
}
.session-best-sectors__value {
  margin-top: 4px;
  color: var(--color-accent-300);
}
.race-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}
.race-control-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .feed-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    position: static;
    order: 2;
  }
  .feed {
    order: 1;
  }

  .news-lead,
  .standings-preview,
  .standings-layout,
  .calendar-layout,
  .team-layout,
  .tech-layout,
  .live-timing-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-lead__aside {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-divider);
    padding-top: 20px;
  }
  .standings-layout .sidebar,
  .team-layout .sidebar,
  .live-timing-layout .sidebar {
    position: static;
  }

  .tech-feature,
  .team-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .tech-feature figure,
  .team-hero figure {
    order: 2;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 52px;
  }

  .series-bar__label {
    display: none;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-divider);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  [data-nav-open="true"] .site-nav {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-link {
    padding: 12px 4px;
    font-size: 15px;
    border-bottom: 1px solid var(--color-divider);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .site-header__actions .search-input,
  .site-header__actions .sign-in-btn {
    display: none;
  }
  .nav-toggle { display: flex; }

  /* One scrollable line instead of wrapping — the P1/P2/P3 snippet is
     dropped (redundant with the sidebar's "Top of the timing screen"
     table), and everything else scrolls horizontally rather than
     stacking into multiple bars. */
  .live-ticker__row {
    font-size: 12px;
    gap: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .live-ticker__row::-webkit-scrollbar {
    display: none;
  }
  .live-ticker__row > * {
    flex: none;
    white-space: nowrap;
  }
  .live-ticker__leaders {
    display: none;
  }
  .live-ticker__end {
    margin-left: 0;
    padding-right: 4px;
  }

  /* Tower/Sectors/Gaps/Tyres — inline-sized-to-content (.seg's default) is
     fine on desktop but leaves an oddly narrow control on a phone; stretch
     it full-width with each option sharing the space evenly instead. */
  .timing-view-tabs {
    display: flex;
    width: 100%;
  }
  .timing-view-tabs .seg-opt {
    flex: 1;
    justify-content: center;
  }
  .seg-opt--mobile-only {
    display: inline-flex;
  }

  /* The sidebar's race-control block stacks below the timing sheet at
     this width — hidden here since the "Race control" tab (above) is
     the way to reach it on mobile instead. Desktop is untouched: this
     rule only exists inside the mobile breakpoint. */
  .sidebar__race-control {
    display: none;
  }

  .post {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .post__time {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .feed__controls {
    flex-direction: column;
    align-items: stretch;
    top: var(--header-h);
  }
  .feed__view-toggle {
    margin-left: 0;
    width: 100%;
  }
  .feed__view-toggle .btn {
    flex: 1;
  }

  .toast {
    left: 12px;
    right: 12px;
    width: auto;
  }

  /* Touch targets: the design's 30-34px buttons read fine on desktop
     pointers but fall under the ~44px comfortable tap-target size. */
  .btn {
    min-height: 44px;
  }
  .toast__close {
    width: 44px;
    height: 44px;
  }
}