/* 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; }

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;
}

.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-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); }

/* ---- 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%; }
}