/* Dawn design system — web mirror of apps/mobile/src/constants/theme.ts */

:root {
  color-scheme: dark;
  --text: #eef2f8;
  --text-secondary: #8792a6;
  --background: #0a0e1a;
  --background-element: #121826;
  --background-selected: #1b2333;
  --line: #232c3d;
  --accent: #ff9e3d;
  --accent-hot: #ff6b35;
  --cold: #5b8def;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --badge-muted: #8792a6;
  --on-accent: #1a1005;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --race-hyrox: var(--accent);
  --race-spartan: var(--cold);
  --race-tm: var(--good);
  --race-runthrough: #b57bfa;
  --race-deka: #1fb6a6;
  --race-metrix: #ff3d8a;
  --race-tryka: #9d85ff;
  --race-athx: #b8890a;
  --race-turf: #3aa655;
  --accent-text: #ff9e3d;
  --cold-text: #5b8def;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --text: #0b111c;
    --text-secondary: #5a6779;
    --background: #f5f7fa;
    --background-element: #ffffff;
    --background-selected: #edf1f6;
    --line: #dce3ec;
    --accent: #e8801f;
    --race-hyrox: #a9550d;
    --race-spartan: #2b4fae;
    --race-tm: #0a7a54;
    --race-runthrough: #7a2fd8;
    --race-deka: #0d6e64;
    --race-metrix: #c41465;
    --race-tryka: #5a3fd6;
    --race-athx: #8a6700;
    --race-turf: #25703a;
    --accent-hot: #e2551c;
    --accent-text: #9a4d0b;
    --cold-text: #2b4fae;
    --cold: #3f6fd8;
    /* Badge text sits on a 14% wash of its own colour; in light mode the raw
       hue cannot reach 4.5:1 on that wash, so these are the darkened pairs
       from the mobile theme's badge* tokens (WCAG 1.4.3). */
    --good: #046c4a;
    --warn: #7a5106;
    --bad: #a32626;
    --badge-muted: #525e6e;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--background-element);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

body {
  font-family: var(--sans);
  background: var(--background);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Header */
header {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Badges */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.badge.cold {
  color: var(--cold-text);
  background: color-mix(in srgb, var(--cold) 14%, transparent);
}

/* Hero */
.hero {
  padding: 88px 0 64px;
  text-align: center;
}

.hero .mark {
  margin-bottom: 28px;
}

h1 {
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
}

h1 em {
  font-style: normal;
  color: var(--accent-text);
}

.lede {
  font-size: 19px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 32px;
}

/* Sections */
section {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

h2 {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

h3 {
  font-size: 16px;
  font-weight: 650;
  margin-bottom: 6px;
}

section ul {
  padding-left: 22px;
  margin: 12px 0 4px;
}

section li {
  margin-bottom: 8px;
  font-size: 15px;
}

p.muted,
li.muted {
  color: var(--text-secondary);
}

/* Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.card {
  background: var(--background-element);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.card .glyph {
  font-size: 22px;
  margin-bottom: 10px;
  display: block;
}

/* Person-count marker beside a division name (#56) */
.team-size {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 6px;
  color: var(--text-secondary);
  vertical-align: middle;
}

.card p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 48px;
  font-size: 14px;
  color: var(--text-secondary);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}

footer nav {
  display: flex;
  gap: 20px;
}

/* Full-width third row: the copyright and nav sit either end of the flex row,
   so the disclaimer has to break the line rather than squeeze between them.
   No max-width — it runs the full width of the footer's wrap like the rows
   above it, rather than stopping short of them at 68ch. */
footer .footer-disclaimer {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}

footer a,
.content a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

footer a:hover,
.content a:hover {
  border-bottom-color: var(--accent);
}

/* Legal pages */
.content {
  padding: 48px 0 72px;
}

.content h1 {
  font-size: 34px;
  text-align: left;
  margin: 8px 0 4px;
}

.content .updated {
  margin-bottom: 36px;
}

.content h2 {
  font-size: 20px;
  margin: 36px 0 10px;
}

.content p,
.content li {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 12px;
}

.content ul {
  padding-left: 22px;
  margin-bottom: 16px;
}

.content strong {
  color: var(--text);
  font-weight: 650;
}

.notice {
  background: var(--background-element);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 24px 0;
}

.notice p {
  margin: 0;
}

/* Races scroll — scrollbar styled so it stays visible for mouse users
   (macOS overlay scrollbars hide it and a vertical wheel can't scroll
   horizontally, leaving no way in). The ::-webkit-scrollbar rules force a
   persistent scrollbar in Chrome/Safari/Edge, but only while the standard
   scrollbar-width/color properties are UNSET on the element — those go in a
   Firefox-only fallback below or Chrome would ignore the pseudo styling. */
.races-scroll,
.shots-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-left: -24px;
  margin-right: -24px;
}

/* overflow-y has to stay hidden: overflow-x:auto makes a `visible` overflow-y
   compute as `auto`, which puts a second scrollbar down the side. So anything
   that paints outside the content box gets clipped, and the vertical padding is
   what makes room for it. Both scrollers had padding-top:0 and were cutting off
   the thing they were meant to show (11 Aug 2026) — the badge's hover lift and
   its focus ring at the top, and the screenshot's 0 24px 48px shadow at both
   ends. Only the vertical axis: Chrome drops a scroll container's padding-right
   from its scrollable overflow, so at maximum scroll the last badge still ends
   flush and its focus ring is clipped on that side. That is older than this
   change and wants a spacer on the scrolled content, not more padding here. */
.races-scroll {
  margin-top: 16px;
  padding: 8px 24px 20px;
}

/* Barely anything was clipped here, contrary to first appearances: a
   0 24px 48px shadow reaches 48px below the image and 0px above it, because the
   24px offset cancels the 24px the blur spreads upward. The old padding already
   cleared the bottom (50px of caption and padding against 48px of shadow), so
   the only casualty was the img's 1px outline along the top. 2px fixes that;
   the extra 4px at the bottom is margin for the measurement being that tight.
   margin-top drops to 22 so the 24px gap above the row is unchanged. */
.shots-scroll {
  margin-top: 22px;
  padding: 2px 24px 24px;
}

.races-scroll::-webkit-scrollbar,
.shots-scroll::-webkit-scrollbar {
  height: 12px;
}

.races-scroll::-webkit-scrollbar-track,
.shots-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.races-scroll::-webkit-scrollbar-thumb,
.shots-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  border-radius: 6px;
}

.races-scroll::-webkit-scrollbar-thumb:hover,
.shots-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

@supports not selector(::-webkit-scrollbar) {
  .races-scroll,
  .shots-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-secondary) 70%, transparent) transparent;
  }
}

.races-container {
  display: flex;
  gap: 14px;
  width: fit-content;
  min-width: 100%;
}

/* Grow to share the full width of the row rather than sitting at a fixed 160px
   and overflowing a wide stage — nine badges came to 1552px inside a 1188px
   scroller, so the last one was always cut in half. flex-shrink stays 0, so
   once the row needs more than 1048px (9 × 104 + 8 × 14) it scrolls as before.
   The basis only applies where the old fixed width was the problem; below the
   tablet breakpoint it goes back to 160px, or the longer names wrap to two
   lines on a phone that was scrolling anyway. */
.race-badge {
  flex: 1 0 104px;
  padding: 24px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

.race-badge:hover {
  border-color: var(--accent);
}

/* On a phone the row scrolls whatever the basis is, so the narrow basis buys
   nothing and costs a wrapped second line on Tough Mudder, ATHX Games and Turf
   Games. Keep the original width where it was never the problem. */
@media (max-width: 767px) {
  .race-badge {
    flex-basis: 160px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .race-badge {
    transition:
      border-color 0.2s ease,
      transform 0.2s ease;
  }

  .race-badge:hover {
    transform: translateY(-2px);
  }
}

.race-name {
  font-weight: 650;
  font-size: 16px;
  display: block;
}

.race-type {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Race color variants */
.race-badge.hyrox {
  background: linear-gradient(135deg, rgba(255, 158, 61, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

.race-badge.hyrox .race-name {
  color: var(--race-hyrox);
}

.race-badge.spartan {
  background: linear-gradient(135deg, rgba(91, 141, 239, 0.1) 0%, rgba(91, 141, 239, 0.05) 100%);
  border-color: color-mix(in srgb, var(--cold) 30%, var(--line));
}

.race-badge.spartan .race-name {
  color: var(--race-spartan);
}

.race-badge.tough-mudder {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
  border-color: color-mix(in srgb, var(--good) 30%, var(--line));
}

.race-badge.tough-mudder .race-name {
  color: var(--race-tm);
}

.race-badge.runthrough {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
  border-color: color-mix(in srgb, #a855f7 30%, var(--line));
}

.race-badge.runthrough .race-name {
  color: var(--race-runthrough);
}

.race-badge.deka {
  background: linear-gradient(135deg, rgba(31, 182, 166, 0.1) 0%, rgba(31, 182, 166, 0.05) 100%);
  border-color: color-mix(in srgb, #1fb6a6 30%, var(--line));
}

.race-badge.deka .race-name {
  color: var(--race-deka);
}

.race-badge.metrix {
  background: linear-gradient(135deg, rgba(255, 61, 138, 0.1) 0%, rgba(255, 61, 138, 0.05) 100%);
  border-color: color-mix(in srgb, #ff3d8a 30%, var(--line));
}

.race-badge.metrix .race-name {
  color: var(--race-metrix);
}

.race-badge.tryka {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.1) 0%, rgba(124, 92, 255, 0.05) 100%);
  border-color: color-mix(in srgb, #7c5cff 30%, var(--line));
}

.race-badge.tryka .race-name {
  color: var(--race-tryka);
}

.race-badge.athx {
  background: linear-gradient(135deg, rgba(242, 183, 5, 0.1) 0%, rgba(242, 183, 5, 0.05) 100%);
  border-color: color-mix(in srgb, #f2b705 30%, var(--line));
}

.race-badge.athx .race-name {
  color: var(--race-athx);
}

.race-badge.turf-games {
  background: linear-gradient(135deg, rgba(58, 166, 85, 0.1) 0%, rgba(58, 166, 85, 0.05) 100%);
  border-color: color-mix(in srgb, #3aa655 30%, var(--line));
}

.race-badge.turf-games .race-name {
  color: var(--race-turf);
}

/* App screenshots */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
  border: 6px solid var(--background-element);
  outline: 1px solid var(--line);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.25);
}

.shots-container {
  display: flex;
  gap: 18px;
  width: fit-content;
  min-width: 100%;
}

.shot {
  flex-shrink: 0;
  width: 220px;
  margin: 0;
}

.shot img {
  border-radius: 26px;
  border-width: 5px;
}

.shot figcaption {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 12px;
}

/* Series guide pages */
.series-hero {
  padding: 64px 0 40px;
}

.series-hero h1 {
  font-size: clamp(34px, 6vw, 46px);
  margin: 8px 0 12px;
}

.series-hero .lede {
  margin: 0 0 20px;
  max-width: none;
}

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

.cta {
  color: var(--accent-text);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid currentcolor;
}

.disclaimer {
  margin-top: 24px;
  font-size: 13px;
}