/* Relentless Timing — shared styles for /live pages.
   Design tokens are LOCKED to match relentlesstiming.com (see CLAUDE.md).
   Do not introduce new colors/fonts here without updating the marketing
   site to match — this must always look like the same product. */

:root {
  --bg:      #0a0a0c;
  --bg2:     #111116;
  --bg3:     #18181f;
  --card:    #1c1c24;
  --border:  #2a2a38;
  --accent:  #e8420a;
  --accent2: #ff5c2b;
  --accent3: #ff7c50;
  --text:    #f0f0f5;
  --muted:   #8888a0;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

/* `hidden` must win over the display:flex/grid blocks below (scripts
   toggle .countdown / .event-clock / .event-tabs with it). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body { line-height: 1.5; }

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

img { max-width: 100%; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Nav ---- */

.nav {
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.9);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent2);
  flex: none;
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 0.9rem;
  color: var(--muted);
  flex-wrap: wrap;
}

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

/* ---- Breadcrumb ---- */

.crumb {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 18px 0 0;
}

.crumb a:hover { color: var(--accent3); }

.crumb .sep { margin: 0 6px; color: var(--border); }

/* ---- Buttons ---- */

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 4px 20px rgba(232, 66, 10, 0.35);
}

.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover { border-color: var(--accent3); color: var(--accent3); }

.btn-secondary[disabled], .btn-secondary.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ---- Hero ---- */

.hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 15% 0%, rgba(232, 66, 10, 0.10), transparent 45%),
    var(--bg);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent3);
  margin: 0 0 14px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Race identity row — logo slot (reserved, empty until the race director
   provides one) sits left of the name. See race-page template for the
   commented-out <img> markup. */
.race-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
}

.race-logo {
  height: 56px;
  width: auto;
  max-width: 120px;
  border-radius: 8px;
  flex: none;
}

/* Client art drawn for white paper (dark ink would vanish on our bg):
   sit it on a white tile, larger so the detail reads. */
.race-logo.logo-tile {
  height: 104px;
  max-width: none;
  background: #fff;
  padding: 6px;
  border-radius: 12px;
}
@media (max-width: 560px) {
  .race-logo.logo-tile { height: 76px; padding: 4px; border-radius: 10px; }
}

.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

/* Larger variant of .chip for the hero — same color modifiers
   (upcoming / live / finished) as the hub's race-card chips, so the
   vocabulary matches everywhere. countdown.js flips upcoming -> live
   automatically when the countdown target passes; flip to "finished"
   by hand once a race wraps (no live backend for that yet). */
.chip.lg {
  font-size: 0.78rem;
  padding: 6px 14px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0 0 28px;
}

.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

/* Quiet one-line instruction (e.g. "bookmark this page, results show up
   automatically") — always visible, unlike a disabled button's hover-only
   title tooltip, which nobody sees on mobile. Keep it to one sentence. */
.hero-note {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0 0 8px;
}

/* ---- Countdown ---- */

.countdown {
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 30px;
  transition: border-color 0.15s;
}

/* When the countdown itself doubles as the way to a race's page (the
   company hub's "next race" card), make that obvious instead of also
   printing a separate "Next Up: X" button above it — one clear CTA,
   not two saying the same thing. */
.countdown.is-linked:hover { border-color: var(--accent3); }

.countdown-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.countdown-cta {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent3);
}

/* countdown.js after data-end: plain, no pulse — it's over. */
.countdown-done {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  grid-column: 1 / -1;
}

.countdown-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  flex-basis: 100%;
}

/* Grid, not flex-wrap — 4 equal columns that always fit the row width
   they're given, so "Sec" never gets bumped to its own line on a
   narrow phone the way a flex row with a fixed min-width per unit
   could. flex-basis: 100% makes this take its own full row within the
   parent .countdown (same trick as .countdown-label above it). */
.countdown-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  flex: 1 1 100%;
}

.countdown-unit {
  text-align: center;
  min-width: 0;
}

.countdown-unit .n {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.countdown-unit .u {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.countdown-target {
  color: var(--muted);
  font-size: 0.86rem;
}

/* mockup-live: pulsing "LIVE" state, reused when a countdown hits zero
   or to flag the results preview as not-real-data-yet. */
.mockup-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent3);
  text-transform: uppercase;
}

.mockup-live .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(232, 66, 10, 0.6);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 66, 10, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 66, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 66, 10, 0); }
}

/* ---- Sections ---- */

section.block { padding: 52px 0; border-bottom: 1px solid var(--border); }
section.block:last-of-type { border-bottom: none; }

.block h2 {
  font-size: 1.5rem;
  margin: 0 0 8px;
  font-weight: 700;
}

.block .lede {
  color: var(--muted);
  margin: 0 0 30px;
  max-width: 640px;
}

/* ---- Schedule table ---- */

.sched-table, .mockup-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.sched-table th, .mockup-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 12px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}

.sched-table td, .mockup-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.sched-table tr:last-child td, .mockup-table tr:last-child td { border-bottom: none; }

.sched-table .tbd { color: var(--muted); font-style: italic; }

.mockup-table .place { font-family: var(--mono); color: var(--accent3); font-weight: 700; width: 44px; }
.mockup-table .bib { font-family: var(--mono); color: var(--muted); }
.mockup-table .checkpoint { color: var(--muted); }
.mockup-table .elapsed { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.mockup-race-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 2px;
}

.preview-frame {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(232, 66, 10, 0.04), transparent 40%);
}

.preview-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 16px;
}

/* ---- Course / feature grid ---- */

.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}

.stat .n {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent3);
}

.stat .l { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }

.detail-list { color: var(--muted); font-size: 0.95rem; padding-left: 0; list-style: none; margin: 0; }
.detail-list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.detail-list li:last-child { border-bottom: none; }
.detail-list strong { color: var(--text); font-weight: 600; }

/* ---- Race cards (company hub) ---- */

.race-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}

.race-card.is-linked:hover { border-color: var(--accent3); }

.chip {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.chip.upcoming { color: var(--accent3); border-color: rgba(255, 124, 80, 0.4); }
.chip.live { color: var(--accent); border-color: rgba(232, 66, 10, 0.5); background: rgba(232, 66, 10, 0.08); }
.chip.finished { color: #7fd39a; border-color: rgba(127, 211, 154, 0.3); }
.chip.tba { color: var(--muted); }

.card-title-row { display: flex; align-items: center; gap: 10px; }
.card-logo { height: 28px; width: auto; max-width: 60px; border-radius: 5px; flex: none; }

.race-card h3 { margin: 0; font-size: 1.15rem; }
.race-card .meta { color: var(--muted); font-size: 0.86rem; }
.race-card .cta { margin-top: 6px; font-family: var(--mono); font-size: 0.82rem; color: var(--accent3); }

/* ---- Live results (live-results.js) ----
   Hidden until the first snapshot arrives from the timing laptop. The
   table reuses .mockup-table / .place / .bib / .elapsed from the
   marketing site's results mockup so it reads as the same product. */

.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 18px;
}

.results-head h2 { margin: 0; }

.live-state { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.live-state.is-stale { color: var(--accent3); }

.event-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.event-tab {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.event-tab:hover { color: var(--text); border-color: var(--accent3); }
.event-tab.is-active { color: var(--text); border-color: var(--accent); background: rgba(232, 66, 10, 0.08); }
.event-tab .sub { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.event-tab .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }

.event-clock {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
}

.event-clock .big {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.event-clock .lbl { color: var(--muted); font-size: 0.82rem; }
.event-clock .remain { font-family: var(--mono); color: var(--accent3); font-variant-numeric: tabular-nums; }

.results-search {
  width: 100%;
  max-width: 340px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  padding: 9px 12px;
  margin-bottom: 14px;
}

.results-search:focus { outline: none; border-color: var(--accent3); }

/* Search + All/Men/Women on one row; wraps under the search on phones. */
.results-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.results-tools .results-search { margin-bottom: 0; flex: 1 1 220px; }
.sex-filter {
  display: inline-flex;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.sex-filter button {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.sex-filter button:hover { color: var(--text); }
.sex-filter button.is-active { color: var(--text); background: rgba(232, 66, 10, 0.16); box-shadow: inset 0 0 0 1px var(--accent); }

.table-scroll { overflow-x: auto; border-radius: 12px; }

.results-table td.num, .results-table th.num { text-align: right; }
.results-table .name { font-weight: 600; }
/* Hometown under the name — a second line, not a column, so the table
   keeps its width (and it survives on phones). */
.results-table .name .home {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 1px;
}
.results-table .name .home:empty { display: none; }
.results-table .bib-sm { display: none; font-family: var(--mono); }
.results-table .sub-sm {
  display: none;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  margin-top: 1px;
}
.results-table .sub-sm.end { font-weight: 700; color: var(--text); }
.results-table .sub-sm.end.finished { color: #7fd39a; }
.results-table .div { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.results-table .status { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.results-table .status.finished { color: #7fd39a; }
.results-table tr.is-dnf td { opacity: 0.5; }
.results-table tr.not-started td { opacity: 0.55; }
.results-table .adj { color: var(--accent3); }
.results-table .empty { color: var(--muted); text-align: center; padding: 26px; }

/* Tap a runner to expand — the table itself stays exactly as clean. */
.results-table tr.runner { cursor: pointer; }
.results-table tr.runner:hover td { background: var(--bg3); }
.results-table tr.runner:focus { outline: none; }
.results-table tr.runner:focus-visible td { background: var(--bg3); }
.results-table tr.runner.is-open td { background: var(--bg3); border-bottom-color: transparent; }

.results-table tr.detail td {
  background: var(--bg3);
  padding: 4px 16px 18px;
}

.detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
}

.detail-stats span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}

.lap-list {
  max-height: 260px;
  overflow-y: auto;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.lap-list table { width: 100%; border-collapse: collapse; }

.lap-list th {
  position: sticky;
  top: 0;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--card);
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}

.lap-list td {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}

.lap-list tr:last-child td { border-bottom: none; }
.lap-list .num { text-align: right; }
.lap-list .tod { color: var(--muted); }
.lap-list tr.fastest td { color: var(--accent3); }
.lap-list tr.aid td { color: var(--muted); font-size: 0.85em; padding-top: 2px; padding-bottom: 2px; }
.lap-list tr.aid .num { text-align: left; padding-left: 1.5em; }

/* Course map (course-map.js) — plain SVG line, no tiles. */
.course-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.course-box summary {
  cursor: pointer;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 0.95rem;
}
.course-box summary .sub { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--muted); margin-left: 6px; }
.course-box[open] summary { border-bottom: 1px solid var(--border); }
.course-body { padding: 14px 18px 16px; }
.course-body .course-svg { display: block; width: 100%; max-width: 560px; margin: 0 auto; }
.course-profile { display: block; width: 100%; height: 70px; margin-top: 14px; }
.course-profile-lbl {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 4px;
}
.course-credit { color: var(--muted); font-size: 0.78rem; margin: 12px 0 0; }
.course-credit a { color: var(--accent3); }

.course-line { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.course-start { fill: var(--text); }
.course-aid { fill: var(--bg); stroke: var(--text); stroke-width: 5; }
.course-lbl { fill: var(--text); font-family: var(--sans); font-size: 30px; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 8px; }
.course-n { fill: var(--muted); font-family: var(--mono); font-size: 26px; }
.course-elev { fill: rgba(232, 66, 10, 0.18); }
.course-elev-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.course-tick { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* Runner's expanded row: lap list + last-seen map side by side. */
.detail-body { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.detail-body .lap-list { flex: 1 1 340px; }
.course-mini {
  flex: 0 1 300px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.course-mini .course-svg { display: block; width: 100%; }
.course-mini .course-line { stroke: var(--muted); stroke-width: 6; }
.course-mini .course-lbl { font-size: 34px; }
.course-you { fill: var(--accent); stroke: var(--text); stroke-width: 5; }
.course-you-ring { fill: none; stroke: var(--accent); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: course-ping 1.8s ease-out infinite; }
@keyframes course-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.course-mini-lbl { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text); margin-top: 6px; }
.course-mini-lbl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: reduce) { .course-you-ring { animation: none; } }

@media (max-width: 640px) {
  .results-table .hide-sm { display: none; }
  .results-table .bib-sm { display: inline; }
  .results-table .sub-sm { display: block; }
  /* Three lines tall on a phone — pinned, it would cover the event tabs. */
  .nav { position: static; }
  .results-table th, .results-table td { padding: 10px 10px; }
}

/* ---- Footer ---- */

footer {
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 0.85rem;
}

footer a:hover { color: var(--accent3); }

footer .foot-links { display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }

.foot-credit a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); }
.foot-credit a:hover { color: var(--accent3); }

/* ---- Small de-emphasized nav badge ----
   nav-logo (top-left, the big text) is ALWAYS "Relentless Timing" —
   this is Ray's site/domain, and naming a client there instead reads
   as Relentless Timing impersonating or being affiliated with that
   client, which is exactly what we're avoiding. This badge is the
   small counterpart on the right that names whichever race company
   this particular page is for. Plain <span>, never a link — a link
   here would itself read as "we're connected to their site," the
   same thing the whole badge exists to avoid. */

.nav-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 20px;
  margin-left: 4px;
}

.nav-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent2);
  flex: none;
}

@media (max-width: 760px) {
  .nav-badge { border-left: none; padding-left: 0; margin-left: 0; }
}

@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .countdown-meta { margin-left: 0; align-items: flex-start; flex-basis: 100%; }
}

/* ---- Share card (share.js) ----
   Computer: "Follow on your phone" QR in the hero's top-right corner.
   Phone: just a Share / Copy link row under the hero buttons — a QR on
   the phone you'd scan it with is no use. */

.hero .wrap.has-share { position: relative; }

.share-card { margin: 4px 0 0; }
.share-label, .share-qr, .share-hint { display: none; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn { cursor: pointer; font-family: var(--sans); padding: 9px 16px; font-size: 0.88rem; }
.share-actions .share-copy-secondary { display: none; }
.share-done { min-height: 1.2em; margin-top: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--accent3); }

@media (min-width: 900px) {
  .hero .wrap.has-share > :not(.share-card) { margin-right: 236px; }
  .share-card {
    position: absolute;
    top: 0;
    right: 24px;
    width: 200px;
    margin: 0;
    padding: 16px 16px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 14px;
    text-align: center;
  }
  .share-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .share-qr {
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    width: 148px;
    margin: 0 auto;
  }
  .share-qr svg { display: block; width: 100%; height: auto; }
  .share-hint { display: block; font-size: 0.78rem; color: var(--muted); margin: 8px 0 10px; }
  .share-actions { justify-content: center; }
  /* Computers: QR + Copy link; the OS share sheet is a phone thing. */
  .share-actions [data-share] { display: none; }
  .share-actions .share-copy-secondary { display: inline-flex; }
  .share-btn { padding: 7px 14px; font-size: 0.82rem; }
  .share-done { margin-top: 4px; }
}

/* ---- Race schedule (assets/schedule.js) ------------------------------
   Upcoming / Past tabs over the booked-race list; used on the homepage,
   /live/ and each company hub. */
.sched-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.sched-tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  color: var(--muted); font: inherit; font-weight: 600; font-size: 0.98rem;
  padding: 10px 14px; cursor: pointer;
}
.sched-tabs button span { font-family: var(--mono); font-size: 0.8rem; margin-left: 4px; opacity: 0.7; }
.sched-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.sched-tabs button:hover { color: var(--text); }

.sched-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sched-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s;
}
.sched-card:hover { border-color: var(--accent3); }
.sched-card.live { border-color: rgba(232, 66, 10, 0.6); box-shadow: 0 0 0 1px rgba(232, 66, 10, 0.25), 0 8px 30px rgba(232, 66, 10, 0.12); }
.sched-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sched-date { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.sched-card h3 { margin: 4px 0 0; font-size: 1.15rem; }
.sched-card h3 a { color: inherit; text-decoration: none; }
.sched-card h3 a:hover { color: var(--accent3); }
.sched-card .meta { color: var(--muted); font-size: 0.86rem; }
.sched-dist { font-family: var(--mono); font-size: 0.78rem; color: var(--accent3); }
.sched-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.btn-primary.sm, .btn-secondary.sm { padding: 7px 12px; font-size: 0.82rem; border-radius: 7px; box-shadow: none; text-decoration: none; }
.sched-empty { color: var(--muted); }