/* ============================================================
   Raceway Weather — stylesheet
   The fourth sibling of gpweather, cupweather and cfbweather: the
   "timing-screen" look. Near-black surfaces, hairlines instead of
   shadows, 2 px corners (50% only for dots), one orange accent for
   chrome only (buttons, active chips, hero rule, hover links), never
   for weather data. Flags are the language: a coloured square and the
   word, always together. Mobile first; body 16 px, nothing under 13.

   Contents
     1  tokens (dark default, light on html[data-theme="light"])
     2  reset, base, utilities
     3  buttons, inputs, chips, badges, forms
     4  brand, top bar, search strip, announce, banner
     5  page, sections, heroes, rules, crumbs, empty
     6  flags
     7  stat strip
     8  map (usmap) and the rough-weather list
     9  cards: track card, category tag, weather block, filters
    10  track page: now, layout figure, pit box, hourly, day tiles,
        facts, nearby, share
    11  tables (and phone stacking)
    12  index and category pages, home explainer
    13  prose and static pages
    14  sheets, search, toast, consent
    15  footer
    16  motion, print
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  --c-bg: #0a0a0c; --c-surface: #101114; --c-card: #15161a; --c-card-alt: #1c1d22;
  --c-border: rgba(255,255,255,.09); --c-border-strong: rgba(255,255,255,.18);
  --c-text: #f3f3f1; --c-text-dim: #a3a7ad; --c-text-faint: #71757c;
  --c-accent: #ff6a13; --c-accent-ink: #ff7a2a; --c-on-accent: #0a0a0c;
  --accent-rgb: 255 106 19; --ink-rgb: 243 243 241; --bg-rgb: 10 10 12;
  /* Semantic colours: a fill form and an ink (text) form each. Dark theme: the same. */
  --c-green: #39d98a; --c-yellow: #f5c518; --c-red: #e5484d; --c-flag-none: #6b7686;
  --c-rain: #4ea1ff; --c-wind: #5ad1c8; --c-cold: #86ccff; --c-heat: #ef4b4b; --c-storm: #c084fc;
  --c-green-ink: #39d98a; --c-yellow-ink: #f5c518; --c-red-ink: #e5484d;
  --c-rain-ink: #4ea1ff; --c-wind-ink: #5ad1c8; --c-cold-ink: #86ccff; --c-heat-ink: #ef4b4b; --c-storm-ink: #c084fc;
  /* Track categories: subtle tints for the category tags and tiles (not weather, so free to colour). */
  --cat-oval: #9fb3c8; --cat-short-oval: #c8b89f; --cat-road: #9fc8b4; --cat-street: #b8a9d9; --cat-dirt: #d9a06b; --cat-drag: #c89fa5;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem;
  --r: 2px;
  --shadow-pop: 0 12px 40px rgba(0,0,0,.55);
  --ease: cubic-bezier(.4,0,.2,1); --dur: .18s; --t-press: 90ms; --t-fresh: 1200ms;
  --section: 40px; --section-tall: 56px; --gutter: 16px; --page-w: 1392px; --topbar-h: 52px;
  color-scheme: dark;
}
html[data-theme="light"] {
  --c-bg: #f4f2ee; --c-surface: #faf9f6; --c-card: #ffffff; --c-card-alt: #efede8;
  --c-border: rgba(22,24,27,.1); --c-border-strong: rgba(22,24,27,.2);
  --c-text: #16181b; --c-text-dim: #5c636d; --c-text-faint: #8a9099;
  --c-accent: #ff6a13; --c-accent-ink: #b4400a; --c-on-accent: #16181b;
  --accent-rgb: 180 64 10; --ink-rgb: 22 24 27; --bg-rgb: 244 242 238;
  /* Fills keep dark text; as text the colours darken to read on paper. */
  --c-green-ink: #15803d; --c-yellow-ink: #8a6a00; --c-red-ink: #b91c1c;
  --c-rain-ink: #1d6fb8; --c-wind-ink: #0f8f82; --c-cold-ink: #1f7fb5; --c-heat-ink: #c2410c; --c-storm-ink: #7c3aed;
  --cat-oval: #3b5a7a; --cat-short-oval: #7a5f3b; --cat-road: #2f6b4f; --cat-street: #5d4a8a; --cat-dirt: #8a4f1f; --cat-drag: #8a3b4a;
  --shadow-pop: 0 12px 40px rgba(22,24,27,.18);
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --section: 56px; --section-tall: 80px; } }

/* ---------- 2. reset, base, utilities ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-16)/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: rgba(var(--ink-rgb) / .3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--c-accent-ink); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
dl, dd, figure { margin: 0; }
small { font-size: var(--fs-13); }
code { font: 500 .9em var(--font-mono); padding: 1px 5px; background: var(--c-card-alt); border-radius: var(--r); }
abbr[title] { text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; border-radius: var(--r); }
::selection { background: rgba(var(--accent-rgb) / .3); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Filtered out (public/app.js applyFilters and hide()): event rows, track cards, map dots, list items. */
.is-out { display: none !important; }
.dim { color: var(--c-text-dim); }
.small { font-size: var(--fs-13); }
.display { font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { display: block; font: 500 var(--fs-13)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); }
.glyph { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; flex: none; }
html[data-unit="f"] .u[data-u="c"], html[data-unit="c"] .u[data-u="f"] { display: none; }
.is-rain { color: var(--c-rain-ink); }
.is-wind { color: var(--c-wind-ink); }
.is-heat { color: var(--c-heat-ink); }
.is-storm { color: var(--c-storm-ink); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20000; background: var(--c-accent); color: var(--c-on-accent); padding: 10px 14px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- 3. buttons, inputs, chips, badges, forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r); border: 1px solid var(--c-border-strong); background: var(--c-card-alt); color: var(--c-text);
  font-weight: 600; font-size: var(--fs-15); line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--t-press) var(--ease);
}
.btn:hover { border-color: rgba(var(--ink-rgb) / .35); color: var(--c-text); }
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { filter: brightness(1.06); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--ghost { background: transparent; }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-14); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .glyph { font-size: 1.1em; }

.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--c-border-strong);
  background: var(--c-surface); color: var(--c-text); font-size: 16px;
}
.input::placeholder { color: var(--c-text-faint); }
.input:focus { outline: none; border-color: var(--c-accent-ink); box-shadow: 0 0 0 3px rgba(var(--accent-rgb) / .18); }
textarea.input { resize: vertical; min-height: 96px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a7ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="light"] select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c636d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.input[aria-invalid="true"] { border-color: var(--c-red); }
.input[aria-invalid="true"]:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-red) 20%, transparent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text-dim);
  font-size: var(--fs-14); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:hover { color: var(--c-text); border-color: rgba(var(--ink-rgb) / .35); }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.chip small { font: 500 var(--fs-13)/1 var(--font-mono); color: inherit; opacity: .75; }
.chip--sm { min-height: 32px; padding: 0 10px; font-size: var(--fs-13); }

.badge {
  display: inline-flex; align-items: center; vertical-align: middle; padding: 1px 7px; margin-left: 6px; border-radius: var(--r);
  font: 500 var(--fs-13)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--c-border-strong); color: var(--c-text-dim);
}
.badge--warn { color: var(--c-yellow-ink); border-color: currentColor; }

.form { display: grid; gap: 10px; }
.form__label { font-weight: 600; font-size: var(--fs-14); }
.form__label:not(:first-child) { margin-top: 6px; }
.form__help { font-size: var(--fs-13); color: var(--c-text-dim); }
.form__status { font-size: var(--fs-14); min-height: 1.2em; color: var(--c-text-dim); }
.form__status.is-ok { color: var(--c-green-ink); }
.form__status.is-error { color: var(--c-red-ink); }
.form .btn { justify-self: start; }
.form__error { font-size: var(--fs-13); color: var(--c-red-ink); margin: 0; }
.req { color: var(--c-accent-ink); font-weight: 700; }
/* The submit-a-track form (render/submit.js): a two-column grid of fields from 640 px, wide fields spanning both. */
.submit__form { gap: 18px; }
.form__grid { display: grid; gap: 14px; }
.form__field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.form__field .form__label { margin-top: 0; }
.form__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.form__actions .form__status { margin: 0; min-height: 0; flex: 1 1 200px; }
.form__actions .form__status:empty { display: none; }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .form__field--wide { grid-column: 1 / -1; } }

/* ---------- 4. brand, top bar, search strip, announce, banner ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--c-text); line-height: 1; }
/* The mark: four small squares, checkered 2x2 and leaning like the italic wordmark. Reading order: white,
   outlined, white, orange; the third and fourth swap columns so the pattern is a checkerboard. */
.brand__mark { display: grid; grid-template-columns: 7px 7px; grid-template-rows: 7px 7px; gap: 1px; transform: skewX(-12deg); flex: none; }
.brand__mark i { display: block; background: var(--c-text); }
.brand__mark i:nth-child(2) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text); }
.brand__mark i:nth-child(3) { grid-column: 2; grid-row: 2; }
.brand__mark i:nth-child(4) { grid-column: 1; grid-row: 2; background: var(--c-accent); }
.brand__name { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-display); text-transform: uppercase; white-space: nowrap; }
.brand__a { font-style: italic; font-weight: 800; font-size: 1.35rem; letter-spacing: .005em; color: var(--c-text); }
.brand__b { font-weight: 700; font-size: 1.25rem; letter-spacing: .05em; color: var(--c-accent-ink); }

.top-bar {
  position: sticky; top: 0; z-index: 1000; height: var(--topbar-h); display: flex; align-items: center; gap: 16px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: rgba(var(--bg-rgb) / .86); border-bottom: 1px solid var(--c-border);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.top-bar__links { display: none; gap: 2px; margin-left: 8px; }
.top-bar__links a { padding: 8px 10px; border-radius: var(--r); text-decoration: none; color: var(--c-text-dim); font-weight: 500; font-size: var(--fs-15); white-space: nowrap; }
.top-bar__links a:hover { color: var(--c-accent-ink); }
.top-bar__controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: var(--r);
  border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text-dim); font-size: 18px;
}
.search-trigger:hover { color: var(--c-text); border-color: rgba(var(--ink-rgb) / .35); }
.search-trigger__text { font-size: var(--fs-14); font-weight: 500; }
.search-trigger kbd { font: 500 var(--fs-13)/1 var(--font-mono); padding: 3px 6px; border: 1px solid var(--c-border-strong); border-radius: var(--r); color: var(--c-text-faint); }
.unit-toggle {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 10px; border-radius: var(--r);
  border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text); font: 500 var(--fs-14)/1 var(--font-mono);
}
.unit-toggle:hover { border-color: rgba(var(--ink-rgb) / .35); color: var(--c-accent-ink); }
/* "Submit a track": the one accent button in the chrome. Easy to find from 480 px up; on the narrowest phones the
   bar has no room for it and the search strip, footer and callouts carry the link instead. */
.top-bar__cta { min-height: 40px; }
@media (max-width: 479px) { .top-bar__cta { display: none; } }
@media (max-width: 899px) { .search-trigger { width: 40px; padding: 0; justify-content: center; } .search-trigger__text, .search-trigger kbd { display: none; } }
@media (min-width: 900px) { .search-trigger { min-width: 240px; background: var(--c-card); } .search-trigger kbd { margin-left: auto; } }
@media (min-width: 760px) { .top-bar__links { display: flex; } }

/* Phones: a full-width search bar under the header, so finding a track is the first thing on the page. */
.search-strip { display: none; padding: 10px var(--gutter); background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.search-strip__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--c-border-strong); border-radius: var(--r); background: var(--c-card); color: var(--c-text-dim); font-size: var(--fs-15); text-align: left; cursor: pointer; }
.search-strip__btn .glyph { width: 18px; height: 18px; color: var(--c-accent-ink); }
@media (max-width: 759px) { .search-strip { display: block; } }

.announce { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px var(--gutter); background: var(--c-surface); border-bottom: 1px solid var(--c-border); font-size: var(--fs-14); }
.announce__tag { font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent); padding: 4px 6px; border-radius: var(--r); }
.announce__text { flex: 1 1 200px; }
.announce__link { color: var(--c-accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.announce__close { margin-left: auto; background: transparent; border: 0; color: var(--c-text-dim); font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: var(--r); }
.announce__close:hover { color: var(--c-text); background: rgba(var(--ink-rgb) / .06); }
.banner { background: color-mix(in srgb, var(--c-yellow) 12%, transparent); color: var(--c-yellow-ink); border-bottom: 1px solid color-mix(in srgb, var(--c-yellow) 35%, transparent); padding: 10px var(--gutter); text-align: center; font-size: var(--fs-14); }
.banner a { color: inherit; }
/* A banner inside a section (e.g. submissions offline) is a boxed notice above the content. */
.section > .banner { border: 1px solid color-mix(in srgb, var(--c-yellow) 35%, transparent); border-radius: var(--r); text-align: left; padding: 12px 14px; margin-bottom: 20px; }

/* ---------- 5. page, sections, heroes, rules, crumbs, empty ---------- */
.page { width: 100%; }
.section, .band { width: 100%; max-width: var(--page-w); margin: 0 auto; padding: var(--section) var(--gutter) 0; min-width: 0; }
.section:last-child, .band:last-child { padding-bottom: var(--section); }
.section > *, .band > * { min-width: 0; max-width: 100%; }
.section--share { padding-top: 28px; }
.band h1 { font: 700 var(--fs-28)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 12px; }
.band p { margin-bottom: 12px; }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); }
.section-head__text { display: grid; gap: 4px; min-width: 0; }
.section-head h2, .section-head h3 { font: 700 1.5rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.section-head__action { font-size: var(--fs-14); font-weight: 600; color: var(--c-text-dim); text-decoration: none; white-space: nowrap; padding-bottom: 2px; }
.section-head__action:hover { color: var(--c-accent-ink); }

.hero { padding: 18px var(--gutter) 30px; border-bottom: 1px solid var(--c-border); }
.hero__inner { max-width: var(--page-w); margin: 0 auto; border-top: 2px solid var(--c-accent); padding-top: 22px; }
.hero__inner .eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.hero__title { font: italic 800 clamp(2rem, 6.6vw, 3.7rem)/.96 var(--font-display); text-transform: uppercase; letter-spacing: .004em; max-width: 24ch; margin-top: 4px; overflow-wrap: anywhere; }
.hero__standfirst { margin-top: 14px; max-width: 64ch; color: var(--c-text-dim); font-size: var(--fs-16); }
.hero__standfirst .dim { color: var(--c-text-faint); }
.hero__meta { margin-top: 10px; font: 500 var(--fs-13)/1.5 var(--font-mono); color: var(--c-text-dim); max-width: 70ch; }
.hero__meta + .hero__standfirst { margin-top: 10px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero__inner .stat-strip { margin-top: 24px; }
.hero__inner .empty { margin-top: 24px; }
.hero__inner > p { margin-top: 14px; }
.hero__inner > p .btn { margin: 4px 6px 0 0; }
@media (min-width: 760px) { .hero { padding-top: 24px; padding-bottom: 36px; } .hero__standfirst { font-size: var(--fs-18); } }
/* Track hero: the words left, the layout figure right; on phones the figure comes first, small. */
.hero__inner--split { display: grid; gap: 20px; align-items: start; }
.hero__inner--split .layout { order: -1; max-width: 220px; }
.hero__inner--split .hero__text { min-width: 0; }
@media (min-width: 900px) {
  .hero__inner--split { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 48px; }
  .hero__inner--split .layout { order: 0; max-width: none; justify-self: end; }
}

/* The one motif: a short checkered strip under the eyebrow. */
.rule-checkered { border: 0; height: 4px; max-width: 120px; margin: 10px 0; background: repeating-conic-gradient(var(--c-text) 0 25%, transparent 0 50%) 0 0 / 8px 8px; opacity: .35; }

.crumbs { max-width: var(--page-w); margin: 0 auto; padding: 12px var(--gutter) 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-13); color: var(--c-text-dim); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--c-text-faint); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-accent-ink); }
.crumbs [aria-current] { color: var(--c-text); }
.crumbs + .hero { padding-top: 12px; }

/* Submit-your-raceway callout (render/submit.js): text beside the button from 760 px, stacked on phones. */
.callout { display: grid; gap: 16px; margin-top: 28px; padding: 18px 20px; background: var(--c-card); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--r); }
.section > .callout:first-child { margin-top: 0; }
.callout__text { display: grid; gap: 6px; min-width: 0; }
.callout__title { font: 700 1.4rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.callout__text p { font-size: var(--fs-15); color: var(--c-text-dim); max-width: 62ch; }
.callout > .btn { justify-self: start; }
.callout .btn .glyph { font-size: 1.1em; }
@media (min-width: 760px) { .callout { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px 24px; } }
.callout--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 16px; padding: 10px 14px; font-size: var(--fs-14); color: var(--c-text-dim); }
.callout--compact .glyph { color: var(--c-accent-ink); font-size: 1.1em; margin-right: 2px; }
.callout--compact a { color: var(--c-text); font-weight: 600; }
.callout--compact a:hover { color: var(--c-accent-ink); }

.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 16px; border: 1px dashed var(--c-border-strong); border-radius: var(--r); }
.empty__icon { font-size: 32px; color: var(--c-text-faint); }
.empty__title { font: 700 var(--fs-22)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.empty__text { max-width: 46ch; }

/* ---------- 6. flags ---------- */
/* The flag classes set two variables; everything that shows a flag colour reads them: the badge square, the dot,
   the score chip, the 2 px top edge of cards and tiles. The word is always there, the colour never stands alone. */
.flag--green { --flag-c: var(--c-green); --flag-ink: var(--c-green-ink); }
.flag--yellow { --flag-c: var(--c-yellow); --flag-ink: var(--c-yellow-ink); }
.flag--red { --flag-c: var(--c-red); --flag-ink: var(--c-red-ink); }
.flag--none { --flag-c: var(--c-flag-none); --flag-ink: var(--c-text-dim); }
.flag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-14); font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--c-text); }
.flag i { width: 10px; height: 10px; flex: none; border-radius: 1px; background: var(--flag-c, var(--c-flag-none)); }
.flag small { font-size: var(--fs-13); font-weight: 500; color: var(--c-text-dim); }
.flag small::before { content: '·'; margin-right: 6px; color: var(--c-text-faint); }
.flag.flag--none { color: var(--c-text-dim); font-weight: 500; }
.mini-flag { display: inline-flex; align-items: center; gap: 5px; font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-dim); white-space: nowrap; }
.mini-flag i { width: 8px; height: 8px; border-radius: 1px; background: var(--flag-c, var(--c-flag-none)); }
.flag-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.reasons { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.reason { font: 500 var(--fs-13)/1.3 var(--font-mono); padding: 2px 6px; border: 1px solid var(--c-border); border-radius: var(--r); color: var(--c-text-dim); white-space: nowrap; }
/* Cards and tiles carry the flag class too: a 2 px edge along the top in the flag colour, nothing louder. */
.track-card::before, .day-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--flag-c, transparent); }

/* ---------- 7. stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r); position: relative; }
.stat { display: grid; gap: 2px; align-content: start; padding: 12px 14px 10px; background: var(--c-card); color: inherit; text-decoration: none; min-width: 0; box-shadow: inset 0 2px 0 var(--tone, transparent); }
a.stat:hover { background: var(--c-card-alt); }
a.stat:hover .stat__label { color: var(--c-accent-ink); }
.stat__label { font-size: var(--fs-13); }
.stat__value { font-size: 2rem; line-height: 1; margin-top: 2px; color: var(--tone-ink, var(--c-text)); white-space: nowrap; }
.stat__value small { font-size: .5em; font-style: normal; font-weight: 700; margin-left: 1px; color: var(--c-text-dim); }
.stat__sub { font-size: var(--fs-13); color: var(--c-text-dim); line-height: 1.35; }
.stat--green { --tone: var(--c-green); --tone-ink: var(--c-green-ink); }
.stat--yellow { --tone: var(--c-yellow); --tone-ink: var(--c-yellow-ink); }
.stat--red { --tone: var(--c-red); --tone-ink: var(--c-red-ink); }
.stat--heat { --tone: var(--c-heat); --tone-ink: var(--c-heat-ink); }
.stat--wind { --tone: var(--c-wind); --tone-ink: var(--c-wind-ink); }
.stat--rain { --tone: var(--c-rain); --tone-ink: var(--c-rain-ink); }
.stat--cold { --tone: var(--c-cold); --tone-ink: var(--c-cold-ink); }
/* Phones: two columns; an odd last stat takes the whole row instead of leaving a hole. */
@media (max-width: 639px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 419px) { .stat { padding: 10px 12px 8px; } .stat__value { font-size: 1.75rem; } }

/* ---------- 8. map and the rough-weather list ---------- */
/* Unlike cfbweather the map shows at every width: it is how the site is navigated. */
.usmap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.usmap-head .section-head { margin-bottom: 0; flex: 1 1 260px; }
.usmap__ctls { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 10px; }
.usmap__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.usmap__ctl-label { font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); margin-right: 4px; }
.usmap-wrap { display: grid; gap: 24px; }
.usmap-main { min-width: 0; }
.usmap { position: relative; max-width: 900px; }
.usmap__states, .usmap__dots { display: block; width: 100%; height: auto; }
.usmap__dots { position: absolute; inset: 0; overflow: visible; }
.usmap__dot { outline: none; }
.usmap__dot circle { fill: var(--flag-c, var(--c-flag-none)); stroke: rgba(var(--bg-rgb) / .9); stroke-width: 1.5; transition: r .12s var(--ease); cursor: pointer; }
.usmap__dot.flag--none circle { opacity: .75; }
.usmap__dot:hover circle, .usmap__dot:focus circle { r: 9; }
.usmap__dot:focus-visible circle { stroke: var(--c-accent-ink); stroke-width: 2.5; }

/* "Color by": the dot carries each ramp colour as an inline variable (public/app.js keeps them for the chosen day). */
.usmap-section[data-color="rain"] .usmap__dot circle { fill: var(--dot-rain, var(--c-flag-none)); }
.usmap-section[data-color="wind"] .usmap__dot circle { fill: var(--dot-wind, var(--c-flag-none)); }
.usmap-section[data-color="temp"] .usmap__dot circle { fill: var(--dot-temp, var(--c-flag-none)); }
.usmap-section[data-color="track"] .usmap__dot circle { fill: var(--dot-track, var(--c-flag-none)); }
.usmap-section[data-color="da"] .usmap__dot circle { fill: var(--dot-da, var(--c-flag-none)); }
.usmap-section:not([data-color="flag"]) [data-legend="flag"],
.usmap-section:not([data-color="rain"]) [data-legend="rain"],
.usmap-section:not([data-color="wind"]) [data-legend="wind"],
.usmap-section:not([data-color="temp"]) [data-legend="temp"],
.usmap-section:not([data-color="track"]) [data-legend="track"],
.usmap-section:not([data-color="da"]) [data-legend="da"] { display: none; }
/* Phones: bigger dots (the map is a third of the size) with a translucent halo that also widens the tap area. */
@media (max-width: 639px) {
  .usmap__dot circle { r: 8; stroke-width: 5; stroke: rgba(var(--bg-rgb) / .5); }
  .usmap__dot[data-group="major-oval"] circle { r: 10.5; }
  .usmap__dot:hover circle, .usmap__dot:focus circle { r: 12; }
}
/* The card beside a dot (public/app.js positions it; on phones it is a fixed panel at the bottom instead). */
.usmap__tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; width: 296px; max-width: calc(100vw - 24px); background: var(--c-card); border: 1px solid var(--c-border-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 12px 14px; font-size: var(--fs-14); }
.usmap__tip.is-below { transform: translate(-50%, 14px); }
.usmap__tip.is-fixed { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: 480px; margin: 0 auto; transform: none; pointer-events: auto; z-index: 950; }
/* Card internals (public/app.js card()): head with icon, name, place and the weather now; the day and its flag;
   five numbers in a small grid; the reasons; the link. */
.usmap-card { display: grid; gap: 8px; }
.usmap-card__head { display: flex; align-items: flex-start; gap: 10px; }
.usmap-card__icon { width: 32px; height: 32px; flex: none; margin-top: 2px; }
.usmap-card__title { display: grid; gap: 2px; min-width: 0; }
.usmap-card__name { display: block; font: 700 1.2rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.usmap-card__sub, .usmap-card__place { font-size: var(--fs-13); color: var(--c-text-dim); }
.usmap-card__now { font-size: var(--fs-14); margin-top: 2px; }
.usmap-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.usmap-card__day { font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); }
.usmap-card__meta .flag { font-size: var(--fs-14); }
.usmap-card__stats, .usmap-card__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.usmap-card__stat { display: grid; gap: 2px; min-width: 0; }
.usmap-card__stat small { font: 500 var(--fs-13)/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--c-text-faint); }
.usmap-card__stat > span, .usmap-card__stat b { font: italic 800 1.15rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usmap-card__reasons { font-size: var(--fs-13); color: var(--c-text-dim); }
.usmap-card__none { color: var(--c-text-dim); }
.usmap-card__go { font-size: var(--fs-13); font-weight: 600; color: var(--c-accent-ink); text-decoration: none; }
.usmap__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--fs-13); color: var(--c-text-dim); }
.usmap__legend b { font-weight: 600; color: var(--c-text); margin-right: 4px; }
.usmap__key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.usmap__key i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-text-dim); flex: none; }
.usmap__key--big i { width: 14px; height: 14px; background: var(--c-text-faint); }
.usmap__hint { margin-top: 10px; font-size: var(--fs-13); max-width: 72ch; }
/* Roughest weather this weekend: under the map; beside it on wide screens. */
.wxlist { min-width: 0; }
.wxlist .eyebrow { margin: 0 0 8px; }
.wxlist__note { margin: -2px 0 10px; font-size: var(--fs-13); line-height: 1.45; }
.wxlist__note a { color: inherit; }
.wxlist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wxlist__items li:nth-child(n+7) { display: none; }
.wxlist__items.is-js li { display: none; }
.wxlist__items.is-js li.is-in { display: block; }
.wxlist__items a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); text-decoration: none; color: var(--c-text); }
.wxlist__items a:hover { border-color: var(--c-border-strong); }
.wxlist__items a:hover b { color: var(--c-accent-ink); }
.wxlist__score { flex: none; min-width: 54px; height: 32px; display: inline-flex; align-items: baseline; justify-content: center; padding: 7px 6px 0; border-radius: var(--r); white-space: nowrap; font: 700 var(--fs-14)/1 var(--font-mono); color: #0a0a0c; background: var(--flag-c, var(--c-flag-none)); }
.wxlist__score small { font-size: 10px; font-weight: 600; opacity: .7; margin-left: 1px; }
.wxlist__game { min-width: 0; display: grid; gap: 1px; }
.wxlist__game b { font-size: var(--fs-15); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wxlist__game small { font-size: var(--fs-13); color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wxlist__empty { font-size: var(--fs-14); }
@media (min-width: 1200px) {
  .usmap-wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
  .wxlist__items { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 9. cards ---------- */
.cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.track-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 14px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); min-width: 0; }
.track-card:hover { border-color: var(--c-border-strong); }
.track-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.track-card__name { flex: 1 0 100%; font: 700 1.25rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; text-decoration: none; }
.track-card__name:hover { color: var(--c-accent-ink); }
.track-card__place { font-size: var(--fs-14); }
.track-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border); }
.track-card__foot > .flag, .track-card__foot > .flag-wrap { flex: 1 1 100%; }
.track-card__wk { display: inline-flex; gap: 10px; }
.track-card__more { margin-left: auto; font-size: var(--fs-14); font-weight: 600; color: var(--c-text-dim); text-decoration: none; white-space: nowrap; min-height: 28px; display: inline-flex; align-items: center; }
.track-card__more:hover { color: var(--c-accent-ink); }
.track-card--nowx .track-card__name { color: var(--c-text-dim); }

.cat-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: var(--r); font: 500 var(--fs-13)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--cat, var(--c-text-dim)); border: 1px solid color-mix(in srgb, var(--cat, var(--c-text-dim)) 45%, transparent); background: color-mix(in srgb, var(--cat, var(--c-text-dim)) 9%, transparent); }
.cat-tag:hover { border-color: var(--cat, var(--c-text-dim)); }
.cat-tag .glyph { font-size: 1.1em; }
.cat-tag--oval { --cat: var(--cat-oval); }
.cat-tag--short-oval { --cat: var(--cat-short-oval); }
.cat-tag--road { --cat: var(--cat-road); }
.cat-tag--street { --cat: var(--cat-street); }
.cat-tag--dirt { --cat: var(--cat-dirt); }
.cat-tag--drag { --cat: var(--cat-drag); }

.track-group { margin-top: 28px; }
.track-group:first-of-type { margin-top: 20px; }
.track-group__title { font: 700 1.25rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.track-group__title small { font: 500 var(--fs-13)/1 var(--font-mono); }

/* The weather block in a card: icon, temperature and sky on the first row; rain, wind and track temp on the second. */
.wx { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.wx__icon { width: 40px; height: 40px; }
.wx__temp { font-size: 2rem; line-height: 1; white-space: nowrap; }
.wx__desc { font-size: var(--fs-15); color: var(--c-text-dim); min-width: 0; }
.wx__pop, .wx__wind, .wx__tt { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--fs-13)/1.3 var(--font-mono); color: var(--c-text-dim); white-space: nowrap; }
.wx__pop .glyph, .wx__wind .glyph { color: var(--c-text-faint); font-size: 1.05em; }
.wx__pop.is-rain, .wx__pop.is-rain .glyph { color: var(--c-rain-ink); }
.wx__wind.is-wind, .wx__wind.is-wind .glyph { color: var(--c-wind-ink); }
.wx__tt { font-variant-numeric: tabular-nums; }
.wx--none { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--c-text-dim); }
.wx--none .glyph { font-size: 20px; color: var(--c-text-faint); }

.filters { margin: 0 0 8px; }
.filters__row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; position: relative; }
.filters__row::-webkit-scrollbar { display: none; }
.filters__count { font-size: var(--fs-13); min-height: 1.3em; margin-top: 4px; }

/* ---------- 10. track page ---------- */
/* Right now: the headline card under the hero. */
.now { width: calc(100% - 2 * var(--gutter)); max-width: var(--page-w); margin: 24px auto 0; padding: 16px 18px 14px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); display: grid; gap: 16px; }
.now__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.now__head .eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.now__main { display: flex; align-items: center; gap: 16px; }
.now__icon { width: 72px; height: 72px; flex: none; }
.now__temp { display: grid; gap: 2px; min-width: 0; }
.now__t { font-size: 3.5rem; line-height: .95; white-space: nowrap; }
.now__desc { font-size: var(--fs-18); font-weight: 500; }
.now__feels { font-size: var(--fs-14); }
.bigstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r); }
.bigstat { display: grid; gap: 4px; align-content: start; padding: 12px 14px 10px; background: var(--c-card); min-width: 0; }
.bigstat dt { font: 500 var(--fs-13)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); }
.bigstat dd { display: grid; gap: 2px; }
.sv { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv small { font-size: .46em; font-style: normal; font-weight: 700; letter-spacing: .01em; margin-left: 2px; color: var(--c-text-dim); }
.bigstat.is-heat .sv { color: var(--c-heat-ink); }
.bigstat.is-rain .sv { color: var(--c-rain-ink); }
.bigstat.is-wind .sv { color: var(--c-wind-ink); }
.bigstat__sub { display: block; font: 500 var(--fs-13)/1.3 var(--font-mono); color: var(--c-text-dim); }
.now__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-14); color: var(--c-text-dim); }
.now__facts li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.now__facts .glyph { color: var(--c-text-faint); font-size: 1.1em; }
.now__facts .is-storm, .now__facts .is-storm .glyph { color: var(--c-storm-ink); font-weight: 600; }
.now__updated { font-size: var(--fs-13); }
@media (min-width: 640px) { .bigstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .now { padding: 18px 20px 16px; } }
@media (min-width: 1024px) { .now__t { font-size: 4rem; } .sv { font-size: 2.5rem; } }

/* The layout figure: the track north-up with the wind arrow on it. */
.layout { display: grid; gap: 8px; min-width: 0; }
.layout__box { position: relative; width: 240px; max-width: 100%; aspect-ratio: 1; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); color: var(--c-text); }
.layout__path { width: 100%; height: 100%; color: var(--c-text); }
.layout__wind { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; color: var(--c-accent-ink); }
.layout__n { position: absolute; top: 8px; left: 10px; font: 600 var(--fs-13)/1 var(--font-mono); color: var(--c-text-faint); }
.layout__fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 96px; color: var(--c-text-faint); opacity: .55; }
.layout--none .layout__box { border-style: dashed; background: transparent; }
.layout__cap { display: grid; gap: 4px; font: 500 var(--fs-13)/1.45 var(--font-mono); color: var(--c-text-dim); max-width: 300px; }
.layout__strip { font: 400 var(--fs-14)/1.45 var(--font-body); color: var(--c-text); }
.layout__strip b { font-weight: 600; }
.layout__cap small { color: var(--c-text-faint); }

/* Pit box: the racer numbers as a hairline grid of tiles. */
.pit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r); }
.pit { display: grid; gap: 4px; align-content: start; padding: 14px 16px 12px; background: var(--c-card); min-width: 0; }
.pit__value { display: block; margin-top: 2px; }
.pit__value .sv { font-size: 2rem; }
.pit__note { font-size: var(--fs-13); line-height: 1.4; }
.pitbox__note { margin-top: 14px; font-size: var(--fs-14); max-width: 76ch; }
@media (min-width: 640px) { .pit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Wide: three across for the six standard tiles; four across when a dirt track adds its two. */
@media (min-width: 1024px) { .pit-grid:has(> .pit:nth-child(8)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pit__value .sv { font-size: 2.25rem; } }

/* Hour by hour: a legend column pinned on the left, the hours scroll beside it. The two share one row template
   so the labels sit on their rows. */
.hourly { --hr: 34px 36px 28px 30px 32px 22px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; }
.hourly__legend, .hourly__col { display: grid; grid-template-rows: var(--hr); row-gap: 4px; padding: 10px 0; }
.hourly__legend { padding-left: 10px; padding-right: 8px; border-right: 1px solid var(--c-border); background: var(--c-card); z-index: 1; }
.hourly__legend span { align-self: center; font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); }
.hourly__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hourly__col { position: relative; padding-left: 6px; padding-right: 6px; text-align: center; justify-items: center; border-right: 1px solid var(--c-border); scroll-snap-align: start; min-width: 0; }
.hourly__col:last-child { border-right: 0; }
.hourly__col.is-now { box-shadow: inset 0 2px 0 var(--c-accent); }
.hourly__col.is-yellow { background: color-mix(in srgb, var(--c-yellow) 7%, transparent); }
.hourly__col.is-red { background: color-mix(in srgb, var(--c-red) 9%, transparent); }
.hourly__hour { display: grid; align-self: start; gap: 2px; font: 500 var(--fs-13)/1.15 var(--font-mono); color: var(--c-text-dim); white-space: nowrap; }
.hourly__tag { font: 600 var(--fs-13)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); }
.hourly__icon { align-self: center; }
.hourly__img { width: 32px; height: 32px; }
.hourly__temp { align-self: center; font-size: 1.4rem; line-height: 1; white-space: nowrap; }
.hourly__pop { align-self: center; display: grid; gap: 4px; width: 100%; font: 500 var(--fs-13)/1 var(--font-mono); color: var(--c-text-dim); }
.hourly__bar { display: block; height: 4px; width: 100%; background: var(--c-border); position: relative; border-radius: 1px; overflow: hidden; }
.hourly__bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: var(--c-rain); }
.hourly__pop.is-rain { color: var(--c-rain-ink); }
.hourly__wind { align-self: center; display: grid; gap: 1px; font: 500 var(--fs-13)/1.15 var(--font-mono); color: var(--c-text-dim); white-space: nowrap; }
.hourly__wind small { font-size: var(--fs-13); color: var(--c-text-faint); }
.hourly__wind.is-wind { color: var(--c-wind-ink); }
.hourly__tt { align-self: center; font: 500 var(--fs-13)/1 var(--font-mono); color: var(--c-text-dim); white-space: nowrap; }
#hourly .small { margin-top: 10px; }

/* The week as tiles: a swipe row on phones, one bordered row from 760 px. */
.day-tiles { list-style: none; margin: 0 0 16px; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; position: relative; scroll-snap-type: x proximity; scrollbar-width: thin; }
.day-tile { position: relative; flex: 0 0 150px; display: grid; gap: 4px; align-content: start; justify-items: start; padding: 12px 12px 10px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); scroll-snap-align: start; min-width: 0; }
.day-tile__dow { font: 700 1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.day-tile__date { font: 500 var(--fs-13)/1.1 var(--font-mono); }
.day-tile__icon { width: 36px; height: 36px; margin: 6px 0 2px; }
.day-tile__temps { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.day-tile__temps .display { font-size: 1.4rem; line-height: 1; }
.day-tile__temps .display.dim { font-size: 1.1rem; }
.day-tile__pop { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--fs-13)/1.3 var(--font-mono); color: var(--c-text-dim); }
.day-tile__pop .glyph { color: var(--c-text-faint); }
.day-tile__pop.is-rain, .day-tile__pop.is-rain .glyph { color: var(--c-rain-ink); }
.day-tile__flag { margin-top: 4px; }
.day-tile__flag .flag { font-size: var(--fs-13); }
.day-tile__note { font: 500 var(--fs-13)/1 var(--font-mono); }
.day-tile.is-weekend { background: var(--c-card-alt); }
.day-tile.is-partial { border-style: dashed; }
.day-tiles--compact .day-tile { flex-basis: 128px; padding: 10px; }
@media (min-width: 760px) {
  .day-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; overflow: visible; padding-bottom: 0; }
  .day-tile { border-left-width: 0; border-radius: 0; }
  .day-tile:first-child { border-left-width: 1px; border-radius: var(--r) 0 0 var(--r); }
  .day-tile:last-child { border-radius: 0 var(--r) var(--r) 0; }
  .day-tile.is-partial { border-left-width: 1px; margin-left: -1px; }
}
#days .small { margin-top: 10px; }

/* Facts: a two-column definition grid. */
.facts { display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r); max-width: 760px; }
.facts > div { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 4px 14px; padding: 10px 14px; background: var(--c-card); }
.facts dt { font: 500 var(--fs-13)/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); padding-top: 2px; }
.facts dd { font-size: var(--fs-15); overflow-wrap: anywhere; }

/* Nearby tracks: rows with the weather on the right. */
.nearby { list-style: none; margin: 0; padding: 0; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); max-width: 760px; }
.nearby li + li { border-top: 1px solid var(--c-border); }
.nearby a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; text-decoration: none; min-height: 56px; }
.nearby a:hover { background: var(--c-card-alt); }
.nearby a:hover .nearby__name { color: var(--c-accent-ink); }
.nearby__name { grid-column: 1; font-weight: 600; font-size: var(--fs-15); }
.nearby__meta { grid-column: 1; font-size: var(--fs-13); }
.nearby__wx { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.nearby__icon { width: 22px; height: 22px; }
.nearby__wx .display { font-size: 1.25rem; line-height: 1; }
.nearby__wx .flag { font-size: var(--fs-13); }
@media (max-width: 419px) { .nearby__wx .flag { display: none; } }

.share { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 11. tables ---------- */
.table-wrap { position: relative; overflow-x: auto; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); }
.table { font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.table th { text-align: left; font: 500 var(--fs-13)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); padding: 10px 12px; border-bottom: 1px solid var(--c-border); white-space: nowrap; background: var(--c-card); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table tbody th { font: 600 var(--fs-15)/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--c-text); white-space: normal; vertical-align: middle; }
.table tbody th small { display: block; font-weight: 400; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr:hover > * { background: rgba(var(--ink-rgb) / .025); }
.table a { text-decoration: none; }
.table a:hover { color: var(--c-accent-ink); }
.table .num { text-align: right; white-space: nowrap; }
.table .num .display { font-size: 1.15rem; line-height: 1; }
.table td small { display: block; }
.table td .flag { font-size: var(--fs-13); }
.td-icon { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 2px; }
.table tbody tr[class*="flag--"] th { box-shadow: inset 2px 0 0 var(--flag-c); }
.daytable td:first-of-type { min-width: 150px; }
/* Numeric columns: header aligned with its numbers. */
.tracks-table th:nth-child(3), .tracks-table th:nth-child(4), .daytable th:nth-child(n+4) { text-align: right; }
/* Phones: wide tables become labelled cards (lib/html.js stackTables adds data-l to each cell). */
@media (max-width: 639px) {
  .table-wrap:has(> .table--stack) { overflow: visible; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr { display: block; }
  .table--stack tr { padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack tbody tr:hover > * { background: transparent; }
  .table--stack tbody th { display: block; padding: 0 0 8px; border: 0; font: 700 1.15rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; box-shadow: none !important; }
  .table--stack tbody th small { display: inline; margin-left: 6px; font: 500 var(--fs-13)/1 var(--font-mono); text-transform: none; letter-spacing: 0; }
  /* The label sits in the left 40%; the cell's content (any mix of text and inline elements) wraps in the rest. */
  .table--stack td, .table--stack td.num { display: block; position: relative; padding: 4px 0 4px 44%; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .table--stack td::before { content: attr(data-l); position: absolute; left: 0; top: 4px; width: 42%; text-align: left; font: 500 var(--fs-13)/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); }
  .table--stack td[data-l=""]::before { content: none; }
  .table--stack td:empty { display: none; }
  .table--stack td small { display: inline; margin-left: 6px; }
  .table--stack td .flag { white-space: normal; }
  .table--stack tr[class*="flag--"] { box-shadow: inset 2px 0 0 var(--flag-c); }
  .daytable td:first-of-type { min-width: 0; }
}

/* ---------- 12. index, category pages, home explainer ---------- */
.search__field { position: relative; }
.search__field .glyph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--c-text-dim); pointer-events: none; }
.search__field .input { padding-left: 40px; }
.find { margin-top: 20px; max-width: 520px; }
.find .input { min-height: 48px; font-size: 17px; }
.find__empty { margin-top: 20px; }
.cat-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.cat-nav__item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "g b" "g s"; column-gap: 10px; align-items: center; min-height: 60px; padding: 10px 14px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); text-decoration: none; color: var(--c-text); }
.cat-nav__item:hover { border-color: var(--c-border-strong); }
.cat-nav__item:hover b { color: var(--c-accent-ink); }
.cat-nav__item .glyph { grid-area: g; font-size: 24px; color: var(--c-text-dim); }
.cat-nav__item b { grid-area: b; font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.cat-nav__item small { grid-area: s; font: 500 var(--fs-13)/1.2 var(--font-mono); color: var(--c-text-dim); }
.cat-nav--compact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cat-nav--compact .cat-nav__item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; }
.cat-nav--compact .cat-nav__item .glyph { font-size: 18px; }
.cat-nav--compact .cat-nav__item b { font-size: 1rem; }
@media (min-width: 640px) { .cat-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.state-block { margin-top: 28px; }
.state-block:first-child { margin-top: 0; }
.state-block__title { display: flex; align-items: baseline; gap: 8px; font: 700 1.4rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.state-block__title small { font: 500 var(--fs-13)/1 var(--font-mono); }
.tracks-table tbody th { min-width: 160px; }

.explain__grid { display: grid; gap: 12px; }
.explain__item { display: grid; gap: 10px; align-content: start; padding: 16px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); }
.explain__item .flag { font-size: var(--fs-16); }
.explain__item p { font-size: var(--fs-15); color: var(--c-text-dim); }
.explain__note { margin-top: 16px; font-size: var(--fs-14); max-width: 72ch; }
.explain__note a { color: inherit; }
@media (min-width: 760px) { .explain__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 12b. race weekends (render/event.js) ---------- */
.hero--event .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hero--event .hero__meta .badge { margin-left: 0; }
.series-tag { display: inline-flex; align-items: center; vertical-align: middle; padding: 1px 6px; border: 1px solid var(--c-border-strong); border-radius: var(--r); font: 500 var(--fs-13)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); white-space: nowrap; }
.badge--live { background: var(--c-green); border-color: var(--c-green); color: #0a0a0c; }
.verdict { display: flex; align-items: baseline; gap: 10px; margin: -4px 0 16px; font-size: var(--fs-18); font-weight: 600; line-height: 1.35; }
.verdict i { width: 12px; height: 12px; flex: none; border-radius: 1px; background: var(--flag-c, var(--c-flag-none)); transform: translateY(1px); }
.center { text-align: center; }
.section > .center { margin-top: 16px; }
/* The calendar rows: when, what, the flag; a flag class on the row gives a 3 px left edge. */
.event-list { list-style: none; margin: 0; padding: 0; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); }
.event-row + .event-row { border-top: 1px solid var(--c-border); }
.event-row > a { display: grid; gap: 6px 16px; padding: 12px 14px; text-decoration: none; color: inherit; box-shadow: inset 3px 0 0 var(--flag-c, transparent); }
.event-row > a:hover { background: var(--c-card-alt); }
.event-row > a:hover .event-row__what b { color: var(--c-accent-ink); }
.event-row__when { display: grid; gap: 2px; font: 500 var(--fs-14)/1.3 var(--font-mono); white-space: nowrap; }
.event-row__when b { font-weight: 700; color: var(--c-text); }
.event-row__when small { font-size: var(--fs-13); }
.event-row__what { display: grid; gap: 4px; min-width: 0; }
.event-row__what b { font-size: var(--fs-16); font-weight: 600; line-height: 1.3; }
.event-row__what small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-13); color: var(--c-text-dim); }
.event-row__flag { display: flex; align-items: center; }
.event-row__flag .flag { font-size: var(--fs-13); }
@media (min-width: 640px) {
  .event-row > a { grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; }
  .event-row__flag { justify-content: flex-end; text-align: right; }
}
.events-month { margin-top: 28px; }
.events-month:first-child { margin-top: 0; }
.events-month__title { font: 700 1.25rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
/* Home: the weekends on track now, a swipe row on phones and a row of four from 900 px. */
.weekend__cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; position: relative; scroll-snap-type: x proximity; scrollbar-width: thin; }
.weekend-card { position: relative; flex: 0 0 250px; display: grid; gap: 4px; align-content: start; padding: 14px 16px 12px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); text-decoration: none; color: inherit; scroll-snap-align: start; min-width: 0; }
.weekend-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--flag-c, transparent); }
.weekend-card:hover { border-color: var(--c-border-strong); }
.weekend-card:hover .weekend-card__name { color: var(--c-accent-ink); }
.weekend-card__name { font: 700 1.2rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin-top: 2px; }
.weekend-card__track { font-size: var(--fs-14); }
.weekend-card__wx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.weekend-card__icon { width: 28px; height: 28px; }
.weekend-card__wx .display { font-size: 1.35rem; line-height: 1; }
.weekend-card__wx .flag { font-size: var(--fs-13); }
@media (min-width: 900px) { .weekend__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } .weekend-card { flex: none; } }
/* Track hero: the next weekend here. */
.next-event { display: grid; gap: 4px; justify-items: start; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); max-width: 560px; }
.next-event[class*="flag--"] { padding-left: 14px; box-shadow: inset 3px 0 0 var(--flag-c); }
.next-event__name { font: 700 1.3rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; text-decoration: none; }
.next-event__name:hover { color: var(--c-accent-ink); }
.next-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-13); color: var(--c-text-dim); }
.next-event__flag { margin-top: 4px; }
.next-event + .hero__actions { margin-top: 16px; }

/* ---------- 13. prose and static pages ---------- */
/* The reading column stays left, in line with the hero, at 68ch; the section keeps the page width. */
.prose { display: grid; gap: 14px; font-size: var(--fs-16); }
.prose > * { max-width: 68ch; }
.prose h2 { font: 700 1.4rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-border); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--fs-18); margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose li .flag { margin-right: 4px; }
.prose a { text-decoration-color: rgba(var(--ink-rgb) / .35); }
.prose a:hover { color: var(--c-accent-ink); }
.prose .btn { text-decoration: none; }
.defs { display: grid; }
.defs > div { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--c-border); }
.defs > div:last-child { border-bottom: 1px solid var(--c-border); }
.defs dt { font: 700 1.05rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.defs dd { color: var(--c-text-dim); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plain a { font-weight: 600; }

/* ---------- 14. sheets, search, toast, consent ---------- */
.sheet { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.sheet__panel {
  width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r) var(--r) 0 0; box-shadow: var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom);
  animation: sheet-up var(--dur) var(--ease);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.sheet__head h2 { font: 700 var(--fs-22)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.sheet__close { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--c-border-strong); background: transparent; font-size: 22px; line-height: 1; color: var(--c-text-dim); }
.sheet__close:hover { color: var(--c-text); border-color: rgba(var(--ink-rgb) / .35); }
.sheet__body { padding: 16px 18px 22px; display: grid; gap: 14px; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { max-width: 520px; border-radius: var(--r); }
}
.sheet--search { align-items: flex-start; }
.sheet--search .sheet__panel { border-radius: 0 0 var(--r) var(--r); border-top: 0; max-height: 88vh; max-height: 88dvh; animation: none; }
@media (min-width: 640px) { .sheet--search { padding-top: 9vh; } .sheet--search .sheet__panel { max-width: 620px; border-radius: var(--r); border-top: 1px solid var(--c-border-strong); } }
.search { gap: 10px; }
.search__input { min-height: 48px; font-size: 17px; }
.search__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.search__results li > a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; background: var(--c-card); border: 1px solid transparent; border-radius: var(--r); text-decoration: none; color: var(--c-text); }
.search__results li > a:hover, .search__results li.is-active > a, .search__results li > a.is-active, .search__results li[aria-selected="true"] > a { border-color: var(--c-accent-ink); }
.search__results li > a > .glyph, .search__results li > a > img { width: 22px; height: 22px; flex: none; color: var(--c-text-dim); }
.search__results li > a > .cat-tag { flex: none; }
.search__text, .search__results .sr__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; text-align: left; }
.search__results .sr__icon { width: 22px; height: 22px; flex: none; color: var(--c-text-dim); }
.search__results .sr__icon--none { display: block; }
.search__results .sr__icon.glyph { color: var(--c-accent-ink); }
.sr__name { display: block; font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr__sub { display: block; font-size: var(--fs-13); color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__results .sr__temp { flex: none; margin-left: auto; font-size: 1.2rem; }
.search__results .sr__temp + .flag { margin-left: 0; }
.search__results .search__label:not(:first-child) { margin-top: 8px; }
.search__name, .search__results li > a b { display: block; font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__place, .search__results li > a small { display: block; font-size: var(--fs-13); color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__results li > a > .flag, .search__results li > a > .mini-flag { margin-left: auto; flex: none; }
.search__results li > a > .flag { font-size: var(--fs-13); }
.search__label { font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); padding: 6px 2px 2px; }
.search__hint { font-size: var(--fs-13); }
.search__submit { font-size: var(--fs-13); padding-top: 6px; border-top: 1px solid var(--c-border); }
.search__submit a { color: inherit; font-weight: 600; }
.search__submit a:hover { color: var(--c-accent-ink); }
.search__empty { font-size: var(--fs-14); color: var(--c-text-dim); padding: 8px 2px; }
@media (max-width: 419px) { .search__results li > a > .flag { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10000;
  background: var(--c-text); color: var(--c-bg); padding: 10px 16px; border-radius: var(--r); font-weight: 600; font-size: var(--fs-14);
  box-shadow: var(--shadow-pop); max-width: calc(100vw - 32px); animation: sheet-up var(--dur) var(--ease);
}
.consent {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10001; display: grid; gap: 10px;
  background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-pop); font-size: var(--fs-14);
}
.consent__actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (min-width: 640px) { .consent { left: auto; right: 20px; bottom: 20px; max-width: 420px; } }

/* ---------- 15. footer ---------- */
.footer { border-top: 1px solid var(--c-border); background: var(--c-surface); margin-top: var(--section-tall); padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.footer__inner { max-width: var(--page-w); margin: 0 auto; display: grid; gap: 22px; }
.footer__tag { margin-top: 10px; color: var(--c-text-dim); font-size: var(--fs-14); max-width: 52ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 2px 16px; align-content: start; }
.footer__links a { color: var(--c-text-dim); text-decoration: none; font-size: var(--fs-14); min-height: 32px; display: inline-flex; align-items: center; }
.footer__links a:hover { color: var(--c-accent-ink); }
.footer__prefs { display: flex; flex-wrap: wrap; gap: 10px; align-items: start; }
.footer__copy { color: var(--c-text-faint); font-size: var(--fs-13); max-width: 90ch; }
.theme-control { display: inline-flex; border: 1px solid var(--c-border-strong); border-radius: var(--r); overflow: hidden; }
.theme-control button { min-height: 40px; padding: 0 14px; background: transparent; border: 0; color: var(--c-text-dim); font-size: var(--fs-14); font-weight: 600; }
.theme-control button + button { border-left: 1px solid var(--c-border-strong); }
.theme-control button:hover { color: var(--c-text); }
.theme-control button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); }
.theme-control button:focus-visible { outline-offset: -3px; }
.unit-control button { font: 500 var(--fs-14)/1 var(--font-mono); }
@media (min-width: 900px) { .footer__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto; align-items: start; } .footer__copy { grid-column: 1 / -1; } }

/* ---------- 16. motion, print ---------- */
@keyframes fresh { from { background-color: rgba(var(--accent-rgb) / .28); } to { background-color: transparent; } }
.is-fresh { animation: fresh var(--t-fresh) var(--ease) both; border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .top-bar, .search-strip, .announce, .footer, .filters, .sheet, .toast, .consent, .share, .section--share, .usmap__ctls, .usmap__tip, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .track-card, .now, .table-wrap, .pit-grid, .day-tiles, .hourly { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  .hourly__row { overflow: visible; }
}

/* ---- phone: the search strip also carries the Submit link (the header's button hides under 480 px) ---- */
@media (max-width: 759px) { .search-strip { display: flex; gap: 8px; align-items: stretch; } .search-strip .search-strip__btn { flex: 1 1 auto; min-width: 0; } }
.search-strip__submit { flex: none; display: inline-flex; align-items: center; padding: 0 12px; min-height: 44px; border: 1px solid var(--c-accent); border-radius: var(--r-sm, 2px); color: var(--c-accent-ink); font: 600 13px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.search-strip__submit:hover { background: rgba(var(--accent-rgb) / .12); }
@media (min-width: 480px) { .search-strip__submit { display: none; } }

/* ============================================================
   17. Raceway Weather Pro (lib/render/pro.js, routes/membership.js, public/app.js)
   The /pro page, the Pro sheet, the teasers and the Pro sections of a
   track page, in the existing tokens. html.is-pro (set by the server
   for members) hides every teaser and pitch.
   ============================================================ */
html.is-pro .pro-only-hide { display: none !important; }

/* Header: the links row never pushes the controls off-screen. Below 1360 px the four category links hide ("All
   tracks" covers them); the search trigger shrinks before the Submit button does. */
.top-bar__links { min-width: 0; overflow: hidden; white-space: nowrap; }
.top-bar__controls { flex: 0 1 auto; min-width: 0; }
.top-bar__cta { flex: none; }
.top-bar__links .top-bar__pro { color: var(--c-accent-ink); font-weight: 600; }
@media (max-width: 1359px) { .top-bar__cat { display: none; } }
/* Search is a wide field, not a small button: up to 440 px, and the first thing to give way when the bar is short of
   room (the controls shrink eight times faster than the links). */
@media (min-width: 900px) {
  .top-bar__controls { flex: 1 8 auto; justify-content: flex-end; }
  .search-trigger { flex: 0 1 440px; min-width: 180px; padding: 0 12px; gap: 10px; }
  .search-trigger__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: var(--fs-15); font-weight: 400; }
}

/* Shared bits the Pro page and sheet use. */
.h-sm { font: 700 1.3rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin: 2px 0 6px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.form__row { display: flex; flex-wrap: wrap; gap: 8px; }
.form__row .input { flex: 1 1 220px; min-width: 0; }
.form__row .btn { flex: none; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: var(--fs-15); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--c-accent); }
.pro-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 6px; border-radius: var(--r); background: var(--c-accent); color: var(--c-on-accent); font: 600 var(--fs-13)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pro-badge--soon { background: transparent; color: var(--c-text-dim); border: 1px solid var(--c-border-strong); }

/* /pro */
.hero--pro .hero__title { max-width: 20ch; }
.pro-page .section { max-width: 920px; }
.pro-status { padding: 12px 14px; border: 1px solid var(--c-border-strong); border-left: 3px solid var(--c-accent); border-radius: var(--r); background: var(--c-card); font-size: var(--fs-15); }
.pro-status--ok { border-left-color: var(--c-green); }
.pro-status--bad { border-left-color: var(--c-red); }
.pro-card { padding: 18px 20px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); display: grid; gap: 8px; align-content: start; }
.pro-card + .pro-card { margin-top: 14px; }
.pro-card--invite { border-left: 3px solid var(--c-accent); }
.pro-card p.dim { font-size: var(--fs-15); }
.pro-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pro-feature { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; padding: 14px 16px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); }
.pro-feature .glyph { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--c-accent-ink); margin-top: 2px; }
.pro-feature strong { font: 700 1.15rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pro-feature .dim { font-size: var(--fs-15); }
@media (min-width: 760px) { .pro-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-plans { display: grid; gap: 10px; }
.plan { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "radio label price" "radio note price"; column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--c-card); border: 1px solid var(--c-border-strong); border-radius: var(--r); cursor: pointer; }
.plan:hover { border-color: rgba(var(--ink-rgb) / .35); }
.plan:has(input:checked) { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.plan input { grid-area: radio; width: 20px; height: 20px; margin: 0; accent-color: var(--c-accent); }
.plan__label { grid-area: label; font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.plan__price { grid-area: price; font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.plan__note { grid-area: note; font-size: var(--fs-13); }
.pro-plans > .btn { justify-self: start; min-width: 260px; }
.pro-trial-note { margin: 0; }
.pro-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pro-results li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--c-card-alt); border-radius: var(--r); font-size: var(--fs-15); }
.pro-results li span { flex: 1 1 auto; min-width: 0; }
.pro-results li small { color: var(--c-text-dim); margin-left: 6px; }
.pro-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pro-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r); font-size: var(--fs-14); font-weight: 500; }
.pro-chip a { text-decoration: none; }
.pro-chip button { width: 28px; height: 28px; border: 0; border-radius: var(--r); background: transparent; color: var(--c-text-dim); font-size: 18px; line-height: 1; cursor: pointer; }
.pro-chip button:hover { color: var(--c-red-ink); background: rgba(var(--ink-rgb) / .06); }
.pro-chips:empty::after { content: "No tracks yet. Add one above."; color: var(--c-text-dim); font-size: var(--fs-14); }
.pro-faq { display: grid; gap: 6px; }
.pro-faq__item { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); padding: 0 16px; }
.pro-faq__item summary { padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pro-faq__item summary::-webkit-details-marker { display: none; }
.pro-faq__item summary::after { content: "+"; color: var(--c-accent-ink); font: 700 1.2rem/1 var(--font-display); flex: none; }
.pro-faq__item[open] summary::after { content: "\2212"; }
.pro-faq__item p { padding: 0 0 14px; color: var(--c-text-dim); font-size: var(--fs-15); max-width: 70ch; }
.pro-verify { max-width: 560px; }
.pro-verify .form { margin-top: 8px; }

/* The Pro sheet (shell) */
.sheet--pro .sheet__panel { max-width: 560px; }
.pro-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.pro-sheet__list li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); }
.pro-sheet__list .glyph { width: 18px; height: 18px; color: var(--c-accent-ink); flex: none; }
.pro-plans--compact .plan { padding: 10px 12px; }
.pro-plans--compact .plan__price { font-size: 1.3rem; }
.pro-plans--compact > .btn { justify-self: stretch; }
.pro-sheet__foot { font-size: var(--fs-13); }
.pro-sheet__foot a { color: inherit; }

/* Teasers on track pages */
.pro-teaser { display: grid; gap: 6px; margin-top: 14px; padding: 18px 20px; background: var(--c-card); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--r); }
.pro-teaser__title { display: flex; align-items: center; gap: 8px; font: 700 1.3rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pro-teaser__title .glyph { width: 22px; height: 22px; color: var(--c-accent-ink); }
.pro-teaser__text { font-size: var(--fs-15); max-width: 70ch; }
.pro-also { font-size: var(--fs-13); max-width: 70ch; }
.pro-teaser__more { font-size: var(--fs-14); font-weight: 600; color: var(--c-text-dim); text-decoration: none; }
.pro-teaser__more:hover { color: var(--c-accent-ink); }

/* Pit box, all week */
.pitbox-week__free { margin: -4px 0 10px; }
.pitbox-days { display: grid; gap: 8px; }
.pitbox-day { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); }
.pitbox-day.is-today { border-color: var(--c-border-strong); }
.pitbox-day > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.pitbox-day > summary::-webkit-details-marker { display: none; }
.pitbox-day > summary::before { content: "\25B8"; color: var(--c-text-faint); font-size: 14px; }
.pitbox-day[open] > summary::before { content: "\25BE"; }
.pitbox-day__date { font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pitbox-day__meta { font: 500 var(--fs-13)/1.4 var(--font-mono); }
.pitbox-day__n { margin-left: auto; font: 500 var(--fs-13)/1 var(--font-mono); }
.pitbox-day .table-wrap { border: 0; border-top: 1px solid var(--c-border); border-radius: 0; }
.pitbox-table th, .pitbox-table td { padding: 7px 10px; font-size: var(--fs-13); }
.pitbox-table tbody th { font: 600 var(--fs-14)/1.3 var(--font-mono); white-space: nowrap; }
.pitbox-table th:not(:first-child) { text-align: right; }
.pitbox-table .is-rain { color: var(--c-rain-ink); }
.pitbox-table .is-wind { color: var(--c-wind-ink); }

/* Model agreement and the nowcast */
.pro-tools__sub { font: 700 1.3rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin: 24px 0 12px; }
.pro-tools__none { max-width: 70ch; font-size: var(--fs-15); }
.models-table td { vertical-align: top; }
.models__pop, .models__gust { display: inline-flex; align-items: center; gap: 3px; font: 500 var(--fs-14)/1.3 var(--font-mono); white-space: nowrap; }
.models__pop .glyph, .models__gust .glyph { width: 14px; height: 14px; color: var(--c-text-faint); }
.models__pop.is-rain, .models__pop.is-rain .glyph { color: var(--c-rain-ink); }
.models__gust.is-wind, .models__gust.is-wind .glyph { color: var(--c-wind-ink); }
.models__verdict td { background: var(--c-card-alt); }
.models__verdict small { display: block; margin-top: 4px; }
.flag--none { --flag-c: var(--c-flag-none); --flag-ink: var(--c-text-dim); }
.nowcast { padding: 14px 16px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r); display: grid; gap: 12px; }
.nowcast__text { font-size: var(--fs-16); font-weight: 500; }
.nowcast__bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 84px; align-items: end; padding-bottom: 18px; position: relative; }
.nowcast__bar { position: relative; display: block; height: 100%; background: linear-gradient(to top, var(--c-border-strong) 0, var(--c-border-strong) 2px, transparent 2px); }
.nowcast__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(2px, var(--v, 0%)); background: var(--c-text-faint); border-radius: 1px 1px 0 0; }
.nowcast__bar.is-rain::after { background: var(--c-rain); }
.nowcast__bar i { position: absolute; left: 0; bottom: -18px; font: 500 var(--fs-13)/1 var(--font-mono); color: var(--c-text-dim); white-space: nowrap; }
.nowcast__bar i time { font-style: normal; }
@media (max-width: 479px) { .nowcast__bar:nth-child(8n+5) i { display: none; } }

/* ---- track photos (Wikimedia Commons; the credit is part of the license) ---- */
.usmap-card__photo { margin: -12px -14px 2px; }
.usmap-card__photo img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: var(--r) var(--r) 0 0; }
.usmap-card__credit { padding: 4px 14px 0; font: 500 11px/1.3 var(--font-mono); color: var(--c-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__media { display: grid; gap: 10px; order: -1; min-width: 0; max-width: 100%; }
.hero__media > * { min-width: 0; max-width: 100%; }
.hero__inner--split .hero__media .layout { order: 0; }
.hero__photo { margin: 0; min-width: 0; }
.hero__photo img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-card); }
.photo-credit { margin: 4px 0 0; font: 500 11px/1.35 var(--font-mono); color: var(--c-text-faint); }
.photo-credit a { color: inherit; }
@media (min-width: 900px) { .hero__inner--split .hero__media { order: 0; width: 300px; justify-self: end; } .hero__inner--split .hero__media .layout { justify-self: stretch; } .hero__inner--split .hero__media .layout__box { width: 100%; } }
/* ---- notices and ink ---- */
.banner--note { background: color-mix(in srgb, var(--c-red) 10%, transparent); color: var(--c-red-ink); border-color: color-mix(in srgb, var(--c-red) 35%, transparent); }
.is-cold { color: var(--c-cold-ink); }
.lede { font-size: var(--fs-18); line-height: 1.5; max-width: 70ch; margin: 0 0 14px; }

/* ---- your tracks: the star and the row at the top of the home page ---- */
.fav { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r); background: transparent; color: var(--c-text-faint); cursor: pointer; flex: none; }
.fav:hover { color: var(--c-accent-ink); }
.fav .glyph { width: 22px; height: 22px; }
.fav[aria-pressed="true"] { color: var(--c-accent); }
.fav[aria-pressed="true"] .glyph--star path { fill: currentColor; }
.btn.fav--label { display: inline-flex; width: auto; gap: 8px; color: var(--c-text); }
.btn.fav--label .glyph { width: 18px; height: 18px; }
.btn.fav--label[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent-ink); }
.track-card__head { position: relative; padding-right: 34px; }
.track-card__head > .fav { position: absolute; top: -9px; right: -10px; }
.yours { padding-top: 20px; }
.yours__recent { margin: 12px 0 0; font-size: var(--fs-15); }
.yours__recent a { color: var(--c-text); font-weight: 600; }
.yours__hint { margin: 10px 0 0; }
.yours__hint .glyph { width: 15px; height: 15px; vertical-align: -2px; }
.yours__slot { min-height: 200px; border: 1px dashed var(--c-border); border-radius: var(--r); }
.track-grid__more { margin: 18px 0 0; color: var(--c-text-dim); }
.search__quick { margin: 4px 0 6px; font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); }

/* ---------- Official partner: YesDesk call sheet (lib/render/partner.js). Their palette, the same in both themes,
   as on gpweather and cupweather. Full-bleed band; the content lines up with the sections. ---------- */
.partner-band {
  --pb-paper: #f6f5f2; --pb-sheet: #fff; --pb-line: #e3e1db; --pb-line-strong: #c9c6be;
  --pb-ink: #17191c; --pb-ink-3: #4a5057; --pb-yes: #0c4f3c; --pb-yes-hover: #093d2e;
  --pb-live: #c0521c; --pb-ok: #0e6b4c; --pb-ok-tint: #e6f0eb;
  margin-top: var(--section);
  background: var(--pb-paper); color: var(--pb-ink); font-family: var(--font-body);
  border-top: 2px solid var(--pb-yes); border-bottom: 1px solid var(--pb-line);
}
.partner-band__inner {
  max-width: var(--page-w); margin: 0 auto; padding: 20px var(--gutter);
  display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 1.7fr) auto; gap: 20px 36px; align-items: center;
}
.partner-band__brand { min-width: 0; }
.partner-band__eyebrow { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pb-ink-3); }
.partner-band__wordmark { display: inline-block; margin-top: 4px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--pb-ink); text-decoration: none; }
.partner-band__wordmark:hover { color: var(--pb-ink); text-decoration: none; }
.partner-band__wordmark b { font-weight: 600; color: var(--pb-yes); }
.partner-band__headline { margin: 8px 0 0; font-size: var(--fs-18); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--pb-ink); max-width: 22ch; }

.call-sheet { min-width: 0; padding: 10px 14px 12px; background: var(--pb-sheet); border: 1px solid var(--pb-line); border-radius: var(--r); }
.call-sheet__head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pb-line); font-size: var(--fs-13); color: var(--pb-ink-3); }
.call-sheet__live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-live); white-space: nowrap; }
.call-sheet__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--pb-live); }
.call-sheet__meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-sheet__play { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; border: 1px solid var(--pb-line-strong); border-radius: var(--r); background: var(--pb-sheet); color: var(--pb-ink); font: inherit; font-size: var(--fs-13); font-weight: 600; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.call-sheet__play:hover { border-color: var(--pb-ink-3); }
.call-sheet__play:focus-visible, .partner-band a:focus-visible { outline: 2px solid var(--pb-yes); outline-offset: 2px; }
.call-sheet__icon { display: inline-flex; }
.call-sheet__icon .glyph { width: 16px; height: 16px; }
.call-sheet__icon--pause, .call-sheet--playing .call-sheet__icon--play { display: none; }
.call-sheet--playing .call-sheet__icon--pause { display: inline-flex; }
.call-sheet__wave { display: none; align-items: flex-end; gap: 2px; height: 14px; margin-left: 6px; }
.call-sheet__wave i { width: 3px; height: 4px; border-radius: 1px; background: var(--pb-yes); animation: pb-wave 1s ease-in-out infinite; }
.call-sheet__wave i:nth-child(2) { animation-delay: .15s; }
.call-sheet__wave i:nth-child(3) { animation-delay: .3s; }
.call-sheet__wave i:nth-child(4) { animation-delay: .45s; }
.call-sheet__wave i:nth-child(5) { animation-delay: .6s; }
.call-sheet--playing .call-sheet__wave { display: inline-flex; }
@keyframes pb-wave { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.call-sheet__lines { list-style: none; margin: 0; padding: 0; max-height: 92px; overflow: hidden; scroll-behavior: smooth; }
.call-sheet__lines li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: var(--fs-14); line-height: 1.4; color: var(--pb-ink); border-bottom: 1px solid var(--pb-line); }
.call-sheet__lines li:last-child { border-bottom: none; }
.call-sheet__lines li b { font-weight: 600; color: var(--pb-ink-3); }
.call-sheet__lines li[data-who="yesdesk"] b { color: var(--pb-yes); }
.call-sheet--typing .call-sheet__lines li { display: none; }
.call-sheet--typing .call-sheet__lines li.is-in { display: grid; animation: pb-in .35s var(--ease) both; }
@keyframes pb-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.call-sheet__outcome { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 5px 10px; border-radius: var(--r); background: var(--pb-ok-tint); color: var(--pb-ok); font-size: var(--fs-13); font-weight: 600; }
.call-sheet__outcome .glyph { width: 16px; height: 16px; }
.call-sheet--typing .call-sheet__outcome { visibility: hidden; }
.call-sheet--typing.is-done .call-sheet__outcome { visibility: visible; animation: pb-in .35s var(--ease) both; }

.partner-band__actions { display: grid; gap: 10px; justify-items: start; }
.partner-band__cta { display: inline-grid; padding: 9px 16px; border-radius: var(--r); background: var(--pb-yes); color: #fff; font-size: var(--fs-14); font-weight: 600; line-height: 1.3; text-decoration: none; }
.partner-band__cta span { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .85; }
.partner-band__cta:hover { background: var(--pb-yes-hover); color: #fff; text-decoration: none; }
.partner-band__link { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 1px; border-bottom: 2px solid var(--pb-yes); font-size: var(--fs-14); font-weight: 600; color: var(--pb-ink); text-decoration: none; }
.partner-band__link:hover { color: var(--pb-yes); text-decoration: none; }

@media (max-width: 1023px) {
  .partner-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .partner-band__actions { grid-column: 1 / -1; grid-auto-flow: column; align-items: center; justify-content: start; gap: 20px; }
}
@media (max-width: 639px) {
  .partner-band__inner { grid-template-columns: 1fr; gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .partner-band__headline { max-width: none; }
  .call-sheet__lines { max-height: 104px; }
  .call-sheet__lines li { grid-template-columns: 54px minmax(0, 1fr); }
  .call-sheet__meta { display: none; }
  .call-sheet__head { justify-content: space-between; }
  .partner-band__actions { grid-auto-flow: row; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .call-sheet__wave i { animation: none; height: 9px; }
  .call-sheet--typing .call-sheet__lines li.is-in, .call-sheet--typing.is-done .call-sheet__outcome { animation: none; }
}

/* ---------- Track page on wide screens: no dead space (lib/render/track.js) ---------- */
/* The next race is its own grid item, under the text. */
.hero__next { min-width: 0; }
.hero__next .next-event { margin-top: 0; }
@media (min-width: 900px) {
  .hero__inner--split { grid-template-rows: auto 1fr; }
  .hero__inner--split .hero__media { grid-column: 2; grid-row: 1 / span 2; }
  .hero__inner--split .hero__next { grid-column: 1; }
}
@media (min-width: 1024px) {
  /* With a photo: photo and layout side by side, the same height (16:10 at 1.6 parts beside a square at 1). */
  .hero__inner--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .hero__inner--split .hero__media--pair { width: auto; justify-self: stretch; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px 14px; align-items: start; }
}

/* Facts and nearby tracks: one row of two columns on wide screens. */
.track-about { display: grid; gap: var(--section) 32px; align-items: start; }
.track-about__col { min-width: 0; }
.track-about .facts, .track-about .nearby { max-width: none; }
@media (min-width: 1024px) {
  .track-about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .track-about--solo { grid-template-columns: minmax(0, 1fr); }
  .track-about--solo .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The one Pro panel on a track page: four tiles and one call to action. */
.pro-panel { margin-top: 18px; padding: 20px; background: var(--c-card); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--r); }
.pro-panel__head { display: grid; gap: 4px; }
.pro-panel__title { font: 700 1.45rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pro-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin-top: 16px; background: var(--c-border); border: 1px solid var(--c-border); }
.pro-panel__item { display: grid; align-content: start; gap: 6px; padding: 14px 16px; background: var(--c-card); }
.pro-panel__item > .glyph { width: 22px; height: 22px; color: var(--c-accent-ink); }
.pro-panel__name { font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pro-panel__text { font-size: var(--fs-14); color: var(--c-text-dim); }
.pro-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.pro-panel__also { font-size: var(--fs-13); }
@media (min-width: 1024px) { .pro-panel__also { margin-left: auto; } }

/* ---------- Submit your raceway (lib/render/submit.js): the form in numbered steps beside how it works ---------- */
.submit__layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .submit__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; } }
.submit__form { padding: 22px 20px 24px; background: var(--c-card); border: 1px solid var(--c-border); border-top: 3px solid var(--c-accent); border-radius: var(--r); gap: 0; }
@media (min-width: 760px) { .submit__form { padding: 28px 30px 30px; } }
.submit__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.submit__step + .submit__step { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--c-border); }
.submit__legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 16px; font: 700 1.35rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.submit__legend .req { font-family: var(--font-body); font-size: var(--fs-16); }
/* The step number as a door number: italic display figure on an orange plate. */
.submit__num { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--c-accent); color: var(--c-on-accent); font: italic 800 1.25rem/1 var(--font-display); border-radius: var(--r); transform: skewX(-8deg); }
.submit__note { font: 500 var(--fs-13)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); }

/* Track type: picture tiles over real radio buttons (keyboard and no-JS work as a radio group). */
.type-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .type-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.type-pick > .form__error { grid-column: 1 / -1; }
.type-pick__opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.type-pick__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.type-pick__tile { display: grid; gap: 4px; align-content: start; height: 100%; padding: 12px 12px 11px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.type-pick__tile .glyph { width: 26px; height: 26px; color: var(--c-text-dim); }
.type-pick__name { font: 700 1.05rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.type-pick__hint { font-size: var(--fs-13); line-height: 1.35; color: var(--c-text-dim); }
.type-pick__opt:hover .type-pick__tile { border-color: var(--c-text-faint); }
.type-pick__input:checked + .type-pick__tile { border-color: var(--c-accent); background: rgba(var(--accent-rgb) / .1); box-shadow: inset 0 0 0 1px var(--c-accent); }
.type-pick__input:checked + .type-pick__tile .glyph { color: var(--c-accent-ink); }
.type-pick__input:focus-visible + .type-pick__tile { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.type-pick__input[aria-invalid="true"] + .type-pick__tile, .type-pick:has(.form__error) .type-pick__tile { border-color: var(--c-red); }

.submit__actions { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-border); }
.submit__go { min-height: 48px; padding: 0 26px; font-size: var(--fs-16); }
@media (max-width: 639px) { .submit__go { width: 100%; justify-content: center; } }

/* The sidebar: how it works, what is on the map, search first. Sticks beside the form on wide screens. */
.submit-side { display: grid; gap: 22px; min-width: 0; }
@media (min-width: 1024px) { .submit-side { position: sticky; top: calc(var(--topbar-h) + 20px); } }
.submit-side__block { display: grid; gap: 12px; }
.submit-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.submit-steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; }
.submit-steps li::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; font: italic 800 1.9rem/1 var(--font-display); color: var(--c-accent-ink); }
.submit-steps b { font: 700 1.1rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.submit-steps span { font-size: var(--fs-14); color: var(--c-text-dim); }
.submit-count { display: flex; align-items: baseline; gap: 8px; font: 600 var(--fs-14)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-dim); }
.submit-count__n { font: italic 800 3rem/.9 var(--font-display); letter-spacing: 0; color: var(--c-text); }
.submit-count__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r); }
.submit-count__cats a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--c-card); color: var(--c-text); text-decoration: none; font-size: var(--fs-14); }
.submit-count__cats a:hover { background: var(--c-card-alt); color: var(--c-accent-ink); }
.submit-count__cats .glyph { width: 18px; height: 18px; color: var(--c-text-dim); }
.submit-count__cats b { font: 600 var(--fs-14)/1 var(--font-mono); }
.submit-side__search { font-size: var(--fs-14); color: var(--c-text-dim); }
.submit-side__link { padding: 0; border: 0; background: none; color: var(--c-accent-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.submit-side__fine { font-size: var(--fs-13); }

/* Phones: each map control group is one row that scrolls sideways, so the chips don't push the map down. */
@media (max-width: 639px) {
  .usmap__ctls { display: grid; gap: 8px; min-width: 0; }
  .usmap__ctl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .usmap__ctl::-webkit-scrollbar { display: none; }
  .usmap__ctl > * { flex: none; }
  .usmap__ctl-label { min-width: 64px; }
}

/* Phones and tablets: the photo and the layout side by side too, so the track name comes up sooner. The 300 px
   side column is too narrow for two, so it stacks there (900–1023 px). */
.hero__media--pair { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px 10px; align-items: start; }
.hero__media--pair .layout__box { width: 100%; }
.hero__media--pair .layout__cap { font-size: 11px; }
@media (min-width: 900px) and (max-width: 1023px) { .hero__inner--split .hero__media--pair { grid-template-columns: minmax(0, 1fr); } }
/* A fieldset draws its top border through the middle of its legend; floating the legend puts the rule above it. */
.submit__legend { float: left; width: 100%; }
.submit__legend + * { clear: both; }
@media (min-width: 900px) and (max-width: 1099px) { .search-trigger kbd { display: none; } }
/* Fewer than four race weekends left in the season: the cards widen instead of leaving empty slots. */
@media (min-width: 900px) {
  .weekend__cards[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .weekend__cards[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekend__cards[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Track photos from readers (lib/render/track.js photoFigure, render/submit.js photoPage) ---------- */
/* No photo yet: a tile in the photo's 16:10 spot that asks for one. */
.photo-ask { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 14px; background: var(--c-card); border: 1px dashed var(--c-border-strong); border-radius: var(--r); color: var(--c-text); text-decoration: none; text-align: center; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.photo-ask:hover { border-color: var(--c-accent); background: rgba(var(--accent-rgb) / .06); }
.photo-ask__in { display: grid; justify-items: center; gap: 6px; max-width: 30ch; }
.photo-ask__in .glyph { width: 30px; height: 30px; color: var(--c-accent-ink); }
.photo-ask__in b { font: 700 1.15rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.photo-ask__in span { font-size: var(--fs-13); color: var(--c-text-dim); }
@media (max-width: 899px) { .photo-ask__in span { display: none; } .photo-ask__in b { font-size: 1rem; } }
.photo-credit .photo-better { color: var(--c-accent-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.photo-credit .photo-better:hover { text-decoration: underline; }

/* The form: the photo picker is a big dashed target; once a photo is ready, its preview takes the place. */
.photo-drop { position: relative; }
.photo-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photo-drop__label { display: grid; justify-items: center; gap: 6px; padding: 30px 20px; text-align: center; background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.photo-drop__label:hover { border-color: var(--c-accent); }
.photo-drop__input:focus-visible + .photo-drop__label { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.photo-drop__input[aria-invalid="true"] + .photo-drop__label { border-color: var(--c-red); }
.photo-drop__label .glyph { width: 34px; height: 34px; color: var(--c-accent-ink); }
.photo-drop__label b { font: 700 1.25rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.photo-drop__label small { max-width: 46ch; font-size: var(--fs-13); color: var(--c-text-dim); }
.photo-drop:has(.photo-drop__preview:not([hidden])) .photo-drop__label { display: none; }
.photo-drop__preview { margin: 0; display: grid; gap: 6px; }
.photo-drop__preview img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-card); }
.photo-drop__preview figcaption { font-size: var(--fs-13); color: var(--c-text-dim); }
.photo-drop__again { color: var(--c-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.checks { display: grid; gap: 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-15); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--c-accent); }
.photo-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.photo-tips li { position: relative; padding-left: 18px; font-size: var(--fs-14); color: var(--c-text-dim); }
.photo-tips li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--c-accent); transform: skewX(-12deg); }
.photo-now { margin: 0; display: grid; gap: 4px; }
.photo-now img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--c-border); border-radius: var(--r); }
.photo-now figcaption { font: 500 11px/1.35 var(--font-mono); color: var(--c-text-faint); }
.photo-first { font-size: var(--fs-15); }

/* ---------- The map on touch screens (public/app.js initUsmap): tap reach, "Which track?" ---------- */
.usmap__tip.is-touch { pointer-events: auto; }
.usmap__dot.is-picked circle { stroke: var(--c-text); stroke-width: 3; paint-order: stroke; }
.usmap-card__head .usmap-card__add { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--c-border-strong); border-radius: var(--r); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-dim); text-decoration: none; white-space: nowrap; }
.usmap-card__add .glyph { width: 15px; height: 15px; }
.usmap-card__add:hover { color: var(--c-accent-ink); border-color: var(--c-accent); }
.usmap-pick { display: grid; gap: 8px; }
.usmap-pick__head { font: 500 var(--fs-13)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); }
.usmap-pick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 50vh; overflow-y: auto; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r); }
.usmap-pick__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; background: var(--c-card); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.usmap-pick__btn:hover, .usmap-pick__btn:focus-visible { background: var(--c-card-alt); }
.usmap-pick__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c-flag-none); }
.usmap-pick__txt { display: grid; gap: 1px; min-width: 0; }
.usmap-pick__txt b { font: 700 1.05rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usmap-pick__txt small { font-size: var(--fs-13); color: var(--c-text-dim); }
.usmap-pick__back { justify-self: start; margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r); background: transparent; color: var(--c-text-dim); font: 500 var(--fs-13)/1 var(--font-body); cursor: pointer; }
.usmap-pick__back:hover { color: var(--c-accent-ink); border-color: var(--c-accent); }