/* Palette taken from the race itself: the red-and-white Millennium kit, with the
   Ghana flag's gold and green kept for accents only, never for large fills.

   The page follows the reader's system theme. The dark variant is tuned rather
   than merely inverted: surfaces stay warm rather than neutral grey so the
   photography still feels like it belongs, and the race red keeps its strength
   instead of drifting to salmon, which is what made the first attempt look
   washed out. */
:root {
  color-scheme: light dark;
  --race-red: #d3202a;
  --race-red-dark: #a3161e;
  --gh-gold: #f4b400;
  --gh-green: #0f8a3f;
  --gh-black: #101010;

  --bg: #f6f4f1;
  --surface: #ffffff;
  --surface-2: #f0ecE8;
  --surface-2: #f1ede9;
  --border: #e2dcd5;
  --text: #17150f;
  --muted: #6d6659;
  --accent: var(--race-red);
  --accent-soft: #fdeceb;
  --on-accent: #ffffff;
  --good: #0f8a3f;
  --warn: #b45309;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(23,21,15,.05), 0 6px 22px rgba(23,21,15,.06);
  --shadow-lg: 0 10px 40px rgba(23,21,15,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Warm near-blacks, not neutral greys - the photographs are warm and a cold
       grey chrome around them looks like a different product. */
    --bg: #15110f;
    --surface: #1e1917;
    --surface-2: #292220;
    --border: #3a312d;
    --text: #f6f2ed;
    --muted: #a89e92;

    /* Held close to the kit red. The earlier dark theme lightened this to a
       salmon, which is the single thing that made the page feel flat. */
    --accent: #e8333d;
    --accent-soft: #331616;
    --on-accent: #ffffff;

    --good: #46d17f;
    --warn: #f0b429;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.34);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.55);
  }
  .error { background: #3a1615; color: #fca5a5; }
  .store-btn { background: #f6f2ed; color: #15110f; border-color: rgba(0,0,0,.14); }
  .store-btn:hover { background: #fff; }
  .hero { background-color: #1a0d0b; }
  .photo-strip img { opacity: .94; }
  .badge.phase-pending { background: var(--gh-gold); color: #2a1f00; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.wrap-wide { max-width: 1200px; }

/* The flag stripe is the one place the full Ghana palette appears. */
header.site {
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: relative; box-shadow: 0 1px 3px rgba(23,21,15,.05);
}
header.site::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
    var(--race-red) 0 25%, var(--gh-gold) 25% 50%,
    var(--gh-green) 50% 75%, var(--gh-black) 75% 100%);
}
header.site .inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
header.site .brand {
  font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: var(--text);
  font-size: 17px; display: flex; align-items: center; gap: 9px;
}
header.site .brand .mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--race-red); color: #fff; display: grid; place-items: center;
  font-size: 14px; box-shadow: 0 2px 6px rgba(211,32,42,.35);
}
header.site .place { color: var(--muted); font-size: 13px; }
header.site nav { margin-left: auto; display: flex; gap: 8px; }
header.site nav a {
  text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 8px;
  color: var(--text); border: 1px solid transparent;
}
header.site nav a:hover { background: var(--surface-2); }
header.site nav a.primary {
  background: var(--accent); color: var(--on-accent); font-weight: 650;
  box-shadow: 0 2px 8px rgba(211,32,42,.3);
}
header.site nav a.primary:hover { background: var(--race-red-dark); }

h1 {
  font-size: clamp(30px, 6vw, 44px); line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 10px; font-weight: 800;
}
h2 {
  font-size: 22px; letter-spacing: -.02em; margin: 36px 0 12px; font-weight: 750;
  display: flex; align-items: center; gap: 10px;
}
h2::after {
  content: ''; flex: 1; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
h3 { font-size: 16px; margin: 0 0 8px; }
p.lead { font-size: 18px; color: var(--muted); margin: 0 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.card.tight { padding: 14px 16px; }

label { display: block; font-weight: 550; font-size: 14px; margin: 16px 0 6px; }
input[type=text], input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { min-height: 90px; font-family: var(--mono); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; font: inherit; font-weight: 650; font-size: 15px;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px;
  cursor: pointer; text-decoration: none; transition: transform .08s ease, filter .15s ease;
  box-shadow: 0 2px 10px rgba(211,32,42,.25);
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: transparent; color: #dc2626; border: 1px solid #dc2626; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 14px; cursor: pointer; text-decoration: none;
  color: var(--text); font-weight: 550;
}
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice label {
  margin: 0; padding: 14px; border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; background: var(--surface); text-align: center;
}
.choice label.on { border-color: var(--accent); background: var(--accent-soft); }
.choice input { position: absolute; opacity: 0; }
.choice .big { font-size: 20px; font-weight: 650; display: block; }

.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14px; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

.avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--surface-2); display: grid; place-items: center;
  font-weight: 650; color: #fff; font-size: 18px;
}
.avatar.lg { width: 88px; height: 88px; font-size: 28px; }

.note {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 12px 14px; border-radius: 0 8px 8px 0; font-size: 14px; margin: 16px 0;
}
.error { border-left-color: #dc2626; background: #fee2e2; color: #7f1d1d; }

.ok { border-left-color: var(--good); background: rgba(21,128,61,.09); }

code, .mono { font-family: var(--mono); font-size: 13px; }
.copyfield { display: flex; gap: 8px; margin: 6px 0; }
.copyfield input {
  font-family: var(--mono); font-size: 13px; background: var(--surface-2);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- live map */
.map-shell { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 54px); }
#map { width: 100%; height: 100%; }
.panel { border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; }
.panel-head { padding: 14px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.status-line { font-size: 13px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.dot-live.off { background: var(--muted); }

.entry {
  display: flex; gap: 12px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.entry:hover { background: var(--surface-2); }
.entry.sel { background: var(--accent-soft); }
.entry .rank {
  width: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: 15px; text-align: center; flex: none;
}
.entry.top1 .rank { color: var(--gh-gold); }
.entry.top2 .rank { color: #9aa0a6; }
.entry.top3 .rank { color: #b87333; }
.entry .who { flex: 1; min-width: 0; }
.entry .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .sub { font-size: 12.5px; color: var(--muted); }
.entry .rt { text-align: right; font-variant-numeric: tabular-nums; }
.entry .gap { font-weight: 600; font-size: 14px; }
.entry.is-stale { opacity: .55; }
.badge {
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted); letter-spacing: .03em;
}
.progress { height: 3px; background: var(--surface-2); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.progress > i { display: block; height: 100%; }

.marker { display: grid; place-items: center; cursor: pointer; }
.marker .pin {
  width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px;
}
.marker img { width: 100%; height: 100%; object-fit: cover; }
.marker.stale .pin { opacity: .45; }
.marker .tag {
  margin-top: 2px; font-size: 10.5px; font-weight: 650; padding: 1px 5px;
  border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; white-space: nowrap;
}
.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------- search */
.search-wrap { position: relative; margin-top: 10px; }
.search-wrap input {
  width: 100%; padding: 8px 30px 8px 32px; font-size: 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.search-wrap .icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; pointer-events: none;
}
.search-wrap .clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 6px;
}

/* ---------------------------------------------------------------------- SOS */
.sos-banner {
  background: #b91c1c; color: #fff; padding: 12px 16px; font-size: 14px;
  border-bottom: 1px solid #7f1d1d;
}
.sos-banner h4 {
  margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.sos-banner .who {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 5px 0; cursor: pointer; border-top: 1px solid rgba(255,255,255,.22);
}
.sos-banner .who:first-of-type { border-top: 0; }
.sos-banner .who strong { font-weight: 650; }
.sos-banner .when { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
.sos-banner .note { font-size: 12px; opacity: .8; margin-top: 6px; line-height: 1.4; }

.entry.is-sos { background: rgba(185,28,28,.12); box-shadow: inset 3px 0 0 #b91c1c; }
.entry.is-sos .gap { color: #b91c1c; font-weight: 750; }
.entry.is-sos.is-stale { opacity: 1; }

.marker.sos .pin { border-color: #b91c1c; border-width: 3px; }
.marker.sos::before {
  content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #b91c1c; animation: sos-pulse 1.4s ease-out infinite;
  pointer-events: none;
}
.marker.sos .tag { background: #b91c1c; }
.marker { position: relative; }
@keyframes sos-pulse {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .marker.sos::before { animation: none; opacity: .5; }
}

.sos-strip {
  background: #b91c1c; color: #fff; padding: 10px 16px; font-size: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sos-strip .btn { padding: 5px 12px; font-size: 13px; background: #fff; color: #b91c1c; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.stat { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.stat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat .v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }

@media (max-width: 860px) {
  .map-shell { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; height: calc(100dvh - 54px); }
  .panel { border-right: 0; border-top: 1px solid var(--border); order: 2; }
  #map { order: 1; }
  .choice { grid-template-columns: 1fr; }
}


/* ===================================================================== hero */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: #2a1512 url('/static/img/hero-field.jpg') center 42% / cover no-repeat;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(56,12,10,.30) 0%, rgba(48,10,9,.60) 58%,
                            rgba(40,8,7,.82) 100%),
    linear-gradient(90deg, rgba(211,32,42,.28) 0%, rgba(211,32,42,0) 62%);
}
.hero .hero-inner {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
  padding: 68px 16px 40px;
}
.hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  background: var(--race-red); color: #fff; padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.hero .kicker .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: hero-pulse 1.8s ease-in-out infinite;
}
@keyframes hero-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .hero .kicker .pulse { animation: none; } }
.hero p.lead { color: rgba(255,255,255,.9); margin-bottom: 24px; max-width: 36em; }
.hero .btn.secondary {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px);
}
.hero .btn.secondary:hover { background: rgba(255,255,255,.24); }

/* Signup counts sitting on the hero's lower edge. */
.hero-stats {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
  padding: 0 16px 26px; display: flex; gap: 26px; flex-wrap: wrap;
}
.hero-stats .n {
  font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.hero-stats .l {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.75); margin-top: 5px;
}

/* ================================================================= step cards */
.steps { display: grid; gap: 14px; }
.step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px 18px 60px; position: relative; box-shadow: var(--shadow);
}
.step .n {
  position: absolute; left: 18px; top: 18px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.step h3 { margin: 2px 0 6px; }

/* ================================================================== photos */
/* Eight tiles: four columns on a wide screen, two on a phone - both divide
   evenly. A three-column step in between would leave a ragged last row, which
   is the thing that made the earlier six-tile layout look unfinished. */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 4px;
}
.gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 11px;
  display: block; box-shadow: var(--shadow); transition: transform .18s ease;
}
.gallery img:hover { transform: translateY(-2px) scale(1.012); }
@media (prefers-reduced-motion: reduce) { .gallery img:hover { transform: none; } }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }

.page-banner {
  height: 150px; border-radius: 12px; margin: 0 0 22px; position: relative;
  overflow: hidden; box-shadow: var(--shadow);
  background: #2a1512 url('/static/img/join-banner.jpg') center 38% / cover no-repeat;
}
.page-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30,10,8,.74) 0%, rgba(30,10,8,.24) 62%,
                                     rgba(30,10,8,.05) 100%);
}
.page-banner .cap {
  position: absolute; z-index: 1; left: 20px; bottom: 16px; color: #fff;
  font-weight: 750; font-size: 19px; letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
@media (max-width: 560px) { .page-banner { height: 120px; } .page-banner .cap { font-size: 17px; } }

/* ============================================================ store buttons */
.store-row { display: flex; gap: 10px; flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--gh-black); color: #fff; padding: 8px 16px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
}
.store-btn:hover { background: #2a2a2a; }
.store-btn .store-ico { font-size: 20px; line-height: 1; }
.store-btn small {
  display: block; font-size: 10px; opacity: .8; letter-spacing: .03em;
  text-transform: uppercase;
}
.store-btn strong { display: block; font-size: 14.5px; font-weight: 650; margin-top: 1px; }
/* ================================================================ race phase */
.badge.phase-live {
  background: var(--race-red); color: #fff;
}
.badge.phase-pending { background: var(--gh-gold); color: #3a2c00; }
.badge.phase-finished { background: var(--gh-green); color: #fff; }

.phase-note {
  padding: 10px 16px; font-size: 13px; text-align: center;
  background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted);
}
.entry.is-done .gap { color: var(--gh-green); }


.map-fallback {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 32px; text-align: center;
  background: var(--surface-2); color: var(--muted); font-size: 14px;
}
.map-fallback strong { color: var(--text); font-size: 15px; }
.map-fallback span { max-width: 30em; }


/* ================================================================== exports */
.export-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px; margin-top: 14px;
}
.export-item {
  display: block; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 11px; background: var(--surface); text-decoration: none;
  color: var(--text); position: relative; transition: border-color .15s ease;
}
.export-item:hover { border-color: var(--accent); }
.export-item strong { display: block; font-size: 15px; margin-bottom: 4px; }
.export-item span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.export-item em {
  position: absolute; top: 13px; right: 14px; font-style: normal; font-size: 10.5px;
  font-weight: 750; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-2); color: var(--muted);
}
.export-item.danger { border-color: rgba(185,28,28,.4); }
.export-item.danger em { background: #b91c1c; color: #fff; }


/* ============================================================ setup guide */
.guide {
  display: block; margin: 16px 0 4px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow);
  position: relative; background: var(--surface-2); text-decoration: none;
}
.guide img { display: block; width: 100%; height: auto; }
.guide .zoom {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(16,16,16,.82); color: #fff; font-size: 12px; font-weight: 650;
  padding: 5px 11px; border-radius: 999px; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.guide:hover .zoom { background: var(--race-red); }
.guide-cap {
  font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5;
}