/* The platform's palette, not one race's kit.

   It used to be the red-and-white Millennium Marathon strip, which was right
   when this app served exactly one event and wrong the moment a second club
   could sign up: every organizer's page came out wearing somebody else's
   colours. So the chrome is now the platform's own - Ghana's flag green as the
   working colour, its gold for the things worth celebrating, and warm near-
   blacks and papers that let the photography carry the page.

   Three rules this palette has to keep, each of which broke a previous attempt:

   - The accent is a LINK colour (`a { color: var(--accent) }`), so it has to
     clear 4.5:1 on white. That is why gold is not the accent, however much it
     wants to be - #E9A200 on white is about 2:1 and unreadable. Gold is used as
     a fill with dark text on it, or on a photograph, where it is superb.
   - Red means "look now", not "hello". It is the live pulse and the SOS banner
     and nothing else. When red was also the brand, an alarm looked like
     furniture.
   - Dark is tuned, not inverted. Surfaces stay warm; a cold grey chrome around
     these photographs looks like a different product.
*/
:root {
  color-scheme: light dark;
  /* The flag itself, for the stripe under the header and for accents. */
  --gh-red: #c1121f;
  --gh-gold: #e9a200;
  --gh-green: #0b6b45;
  --gh-black: #101010;

  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f2eee7;
  --border: #e4ded4;
  --text: #17140f;
  --muted: #6b6356;
  --accent: var(--gh-green);
  --accent-dark: #075637;
  --accent-soft: #e7f2ec;
  --on-accent: #ffffff;
  --gold: var(--gh-gold);
  --on-gold: #201600;
  /* Attention, not brand. */
  --live: #c2410c;
  --good: #0b6b45;
  --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;

    /* Lifted far enough off the dark surface to stay a readable link colour;
       the deep green that works on paper goes almost black here. */
    --accent: #35a878;
    --accent-dark: #2a8b62;
    --accent-soft: #0f2b21;
    --on-accent: #08160f;
    --gold: #f2b32c;
    --on-gold: #201600;
    --live: #f2703c;

    --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: #0a1712; }
  .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(--gh-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(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-size: 14px; box-shadow: 0 2px 6px rgba(11,107,69,.32);
}
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(11,107,69,.28);
}
header.site nav a.primary:hover { background: var(--accent-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 { 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 */
/* The hero is a film of people running in Ghana, with the poster frame behind
   it as the background image. The poster is what a visitor sees first, what
   they see if the video never loads, and what they see instead of it when they
   have asked for less motion or are on a metered connection - so it is set
   here rather than only on the <video>, and the page is complete without the
   film ever arriving. */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: #0a1712 url('/static/img/hero-poster.jpg') center 42% / cover no-repeat;
}
.hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Fades up once it is actually playing, so a slow first frame does not flash
     a black rectangle over the poster. */
  opacity: 0; transition: opacity .9s ease;
  border: 0;
}
.hero-film.playing { opacity: 1; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  /* Dark enough at the foot for white text over a bright sky, light enough at
     the top that the picture is still the point. The green wash ties the film
     to the chrome without tinting faces. */
  background:
    linear-gradient(180deg, rgba(8,20,15,.28) 0%, rgba(7,18,14,.62) 55%,
                            rgba(6,15,11,.86) 100%),
    linear-gradient(90deg, rgba(11,107,69,.34) 0%, rgba(11,107,69,0) 64%);
}
.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(--gold); color: var(--on-gold); padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
}
.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(--live); color: #fff;
}
.badge.phase-pending { background: var(--gh-gold); color: #3a2c00; }
.badge.phase-finished { background: var(--gh-green); color: #fff; }

.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(--accent); }
.guide-cap {
  font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5;
}


/* ---- accounts: sign-in, and the organizer's list of organizations ---- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.auth-card { max-width: 430px; margin: 7vh auto; }
.auth-card h1 { font-size: 26px; }
.auth-card label { margin-top: 14px; }
.or-rule {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: var(--muted); font-size: 13px;
}
.or-rule::before, .or-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.choice { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* ---------------------------------------------------------- public surface
   The platform's own pages: the front door, an organization's page, an event,
   a calendar, search results. They share one card shape so a club's page and
   the home page do not look like two products. */

.live-strip {
  background: linear-gradient(180deg, color-mix(in srgb, var(--live) 9%, transparent), transparent);
  border-bottom: 1px solid var(--border);
  padding: 16px 0 20px;
}
.live-strip .kicker { color: var(--live); font-weight: 650; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; display: inline-flex;
  align-items: center; gap: 7px; margin-bottom: 10px; }
.live-strip .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  animation: hero-pulse 1.8s ease-in-out infinite;
}
.live-card { display: block; text-decoration: none; color: inherit;
  border-left: 3px solid var(--live); }
.live-card strong { display: block; margin: 2px 0; }

.hero-search { display: flex; gap: 8px; max-width: 34em; margin-bottom: 8px; }
.hero-search input {
  flex: 1; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14);
  color: #fff; font-size: 15px;
}
.hero-search input::placeholder { color: rgba(255,255,255,.7); }
.hero-search.light input {
  border-color: var(--border); background: var(--surface); color: var(--text);
}
.hero-search.light input::placeholder { color: var(--muted); }

.event-card, .org-card, .race-card { display: block; text-decoration: none; color: inherit; }
.event-card:hover, .org-card:hover, .live-card:hover { border-color: var(--accent); }
.event-card .when {
  font-size: 12.5px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.event-card strong, .org-card strong, .race-card strong { display: block; font-size: 17px; }

/* An organization's own header. Falls back to a flat band rather than a broken
   image box when no hero has been uploaded - most clubs will not upload one. */
.org-hero {
  background-size: cover; background-position: center;
  color: #fff; padding: 56px 0 40px;
}
.org-hero.plain { background: var(--gh-black); }
.org-hero h1 { color: #fff; margin: 6px 0; }
.org-hero .lead { color: rgba(255,255,255,.9); margin: 0 0 16px; }
.org-hero .crumb { color: rgba(255,255,255,.8); text-decoration: none; }
.org-hero .crumb:hover { text-decoration: underline; }
.org-logo { border-radius: 12px; background: #fff; object-fit: contain; padding: 4px; }

table.cal { width: 100%; border-collapse: collapse; margin-top: 18px; }
table.cal td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.cal td.when { width: 58px; text-align: center; }
table.cal td.when .d { font-size: 22px; font-weight: 700; line-height: 1; }
table.cal tr.is-cancelled { opacity: .5; }
table.cal tr.is-cancelled strong { text-decoration: line-through; }
table.cal a { color: inherit; text-decoration: none; }
table.cal a:hover strong { color: var(--accent); }

.badge.warn { background: var(--warn); color: #fff; }

/* Image manager on the organizer's screen. */
.media-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.media-tile { position: relative; margin: 0; border-radius: 10px; overflow: hidden;
              border: 1px solid var(--border); }
.media-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.media-tile .acts { position: absolute; inset: auto 0 0 0; display: flex; gap: 4px;
  padding: 5px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.media-tile .acts button {
  flex: 1; font-size: 11px; padding: 4px 2px; border-radius: 6px; cursor: pointer;
  border: 0; background: rgba(255,255,255,.9); color: #111;
}
.quota-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.quota-bar > i { display: block; height: 100%; background: var(--accent); }

/* A button that reads as a link: for small in-place edits inside a list, where a
   real button would outweigh the line it sits on. */
.linkish {
  background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 12.5px; text-decoration: underline;
}

/* The add-a-race form on the organizer screen. Replaces a chain of window.prompt
   dialogs, which browsers suppress after a couple in a row - and a suppressed
   prompt returns null, so the button silently did nothing. */
.race-form {
  margin-top: 14px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
}
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row label { flex: 1 1 200px; display: block; font-size: 13px; font-weight: 600; }
.field-row input, .field-row select {
  width: 100%; margin-top: 5px; padding: 9px 10px; font: inherit;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.race-form .btn-row { margin-top: 12px; }


.race-setup { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.race-setup h4 { margin: 18px 0 4px; font-size: 13px; text-transform: uppercase;
                 letter-spacing: .05em; color: var(--muted); }
.race-setup .field-row { margin-top: 8px; }
.warn-text { color: var(--warn); }
.file-btn { cursor: pointer; display: inline-flex; align-items: center; }

/* Shown to a club's own people when they are looking at something the public
   cannot see yet. Without it, "not published" and "broken" are the same
   experience from the organizer's side. */
.preview-bar {
  background: var(--warn); color: #fff; padding: 10px 16px; font-size: 14px;
  text-align: center;
}
.preview-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }

/* Visibility, shown the same way for an organization and for each event. A
   control that is always present, rather than a button that exists only in the
   state it changes - which left nothing at all to click once published. */
.vis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.vis-label { font-weight: 600; font-size: 14px; }
.vis-picker { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.vis-picker button {
  border: 0; background: var(--surface); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 5px 13px;
}
.vis-picker button + button { border-left: 1px solid var(--border); }
.vis-picker button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.vis-picker button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.vis-picker button:disabled { cursor: default; opacity: .6; }
.vis-note { flex: 1 1 200px; }

/* ---------------------------------------------------- the organizer screen
   Four things an organizer does - describe the club, give it a look, run
   events, set up the repeating ones - one section each, in that order of how
   often they are touched. */

.manage section { scroll-margin-top: 70px; padding-top: 8px; }
.manage-head { display: flex; justify-content: space-between; align-items: flex-end;
               gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.manage-head h1 { margin: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin: 28px 0 6px; }
.sec-head h2 { margin: 0; }

.subnav {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap;
  margin: 18px 0 4px; padding: 8px 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.subnav a {
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
}
.subnav a:hover { background: var(--surface-2); color: var(--text); }
.subnav a.on { background: var(--accent); color: var(--on-accent); }

.panel-form { margin-top: 12px; }
.manage textarea {
  width: 100%; margin-top: 5px; padding: 10px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); resize: vertical;
}

.event-block { margin-top: 14px; }
.event-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.event-top h3 { margin: 0 0 2px; font-size: 17px; }
.pill-state {
  font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.pill-state.on { background: rgba(21,128,61,.12); color: var(--good); }
.pill-state.off { background: rgba(180,83,9,.12); color: var(--warn); }

.races-head { margin: 16px 0 6px; font-size: 12.5px; text-transform: uppercase;
              letter-spacing: .06em; color: var(--muted); }
.race-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border);
}
.race-facts strong { margin-right: 8px; }
.race-links { display: flex; align-items: center; gap: 12px; }
.race-links a { text-decoration: none; }
.race-links a:hover { text-decoration: underline; }

.day-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.day { position: relative; cursor: pointer; }
.day input { position: absolute; opacity: 0; }
.day span {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.day input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

.img-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px;
               border: 1px solid var(--border); margin: 8px 0; display: block; }
.img-preview.logo { width: 96px; height: 96px; object-fit: contain; background: #fff; padding: 6px; }
.img-empty {
  display: grid; place-items: center; height: 110px; margin: 8px 0;
  border: 1px dashed var(--border); border-radius: 10px;
  color: var(--muted); font-size: 13px;
}

/* ------------------------------------------- the public organization page */

.org-hero.tall { padding: 84px 0 64px; }
.org-hero .org-id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.org-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px;
            font-size: 14px; color: rgba(255,255,255,.88); }
.org-meta a { color: #fff; }

.about { max-width: 46em; white-space: pre-line; }

.carousel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin-top: 8px;
}
.carousel img {
  flex: 0 0 auto; width: min(78vw, 420px); aspect-ratio: 3/2; object-fit: cover;
  border-radius: var(--radius); scroll-snap-align: start; border: 1px solid var(--border);
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.event-line {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
}
.event-line:hover { background: var(--surface-2); }
.event-line .when {
  width: 62px; flex: none; text-align: center; line-height: 1.1;
}
.event-line .when .d { font-size: 22px; font-weight: 700; }
.event-line .body { flex: 1; min-width: 0; }
.event-line .body strong { display: block; font-size: 16px; }
.event-line .go { color: var(--accent); font-weight: 600; font-size: 13.5px; white-space: nowrap; }

/* The manage header's status row, which was crowding the title. */
.manage .vis { margin: 14px 0 6px; padding: 10px 14px;
               background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius); }
.manage .event-block .vis { margin: 10px 0; padding: 8px 12px; background: var(--surface-2); }
.manage .btn-row .btn { flex: 0 0 auto; }
/* ---------------------------------------------------------------- lap splits
   A lapped race is read one row at a time, so the numbers are what carry the
   eye: a monospaced column of times lines up and can be compared at a glance,
   which a proportional font defeats. */
table.splits { width: 100%; border-collapse: collapse; font-size: 15px; }
table.splits th {
  text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 0 10px 6px 0;
  border-bottom: 1px solid var(--border);
}
table.splits td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 14px;
}
table.splits tr:last-child td { border-bottom: 0; }
table.splits td:first-child { font-weight: 700; font-family: var(--font); white-space: nowrap; }
table.splits td.muted { color: var(--muted); }
.tagline {
  margin-left: 8px; font-family: var(--font); font-size: 11px; font-weight: 650;
  padding: 1px 7px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .03em;
}
/* A solid chip, not a tint: the newest row is already tinted with the same
   colour, and a tinted chip on a tinted row disappears. */
.tagline.fastest { background: var(--accent); color: var(--on-accent); }
.tagline.slowest { background: var(--surface-2); color: var(--muted);
                   border: 1px solid var(--border); }

/* The lap that just landed. A spectator refreshing mid-race is looking for one
   thing - how fast was that lap - so it gets the emphasis rather than sitting
   as the last identical row in a list. */
table.splits tr.latest td { background: var(--accent-soft); }
table.splits tr.latest td:first-child { font-weight: 800; color: var(--accent); }

/* A line under the hero buttons, because the two buttons above it are aimed at
   two different people and the quiet one costs an account. Saying so here is
   cheaper than a runner finding out on a sign-up form. */
.hero-note {
  margin: 14px 0 0; font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.75); max-width: 34em;
}


/* ============================================================== the scene strip
   A band of race photography between the listings and the footer. It is the
   only place on the platform's own page that says what this is for without
   using a single word, and it is the reason a club's page has something to sit
   inside rather than a blank grey shell.

   It scrolls on its own, slowly, and stops dead for anyone who has asked their
   system for less motion - see the media query at the foot of this file. */
.scene {
  position: relative; overflow: hidden;
  padding: 34px 0 40px; background: var(--surface-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.scene-head { max-width: 1120px; margin: 0 auto 18px; padding: 0 16px; }
.scene-head h2 { margin: 0 0 4px; }
.scene-head p { margin: 0; color: var(--muted); max-width: 46em; }
.scene-track {
  display: flex; gap: 12px; width: max-content;
  animation: scene-slide 64s linear infinite;
}
.scene:hover .scene-track { animation-play-state: paused; }
.scene-track img {
  width: 210px; height: 280px; object-fit: cover; border-radius: 12px;
  flex: none; background: var(--border);
  box-shadow: 0 2px 10px rgba(23,20,15,.10);
}
/* The track holds the same photographs twice, so translating by exactly half
   its width lands on an identical frame and the loop has no seam. */
@keyframes scene-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* The fades belong to the rail, not the section: spanning the whole section
   they washed out the heading sitting above it. */
.scene-rail { position: relative; overflow: hidden; }
.scene-fade {
  position: absolute; top: 0; bottom: 0; width: 90px; pointer-events: none; z-index: 1;
}
.scene-fade.l { left: 0;  background: linear-gradient(90deg, var(--surface-2), transparent); }
.scene-fade.r { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }

/* ================================================================ moments band
   The second film, beside a line about what the platform is actually for. */
.band {
  max-width: 940px; margin: 48px auto; padding: 0 16px;
  display: grid; gap: 34px; grid-template-columns: 1fr auto; align-items: center;
}
.band h2 { margin: 0 0 10px; }
.band p { color: var(--muted); margin: 0 0 10px; max-width: 34em; }
/* Portrait, and about the size of a phone, because that is what every one of
   these was filmed on and what a runner will be holding. */
.band-film {
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: #0a1712 center / cover no-repeat;
  aspect-ratio: 9 / 16; width: 272px; justify-self: center;
  border: 5px solid var(--text);
}
.band-film video, .band-film img {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.band-film video { opacity: 0; transition: opacity .9s ease; position: absolute; inset: 0; }
.band-film video.playing { opacity: 1; }
@media (max-width: 760px) {
  /* The portrait film is the right shape for this window already, so let it
     fill rather than crop to the landscape framing. */
  .hero { background-position: center 45%; }
  .hero-film { object-position: center 45%; }
  /* And a lighter scrim over it. The desktop gradient is set for a bright
     coastal sky; over a shaded avenue it buries the runner entirely, which is
     an odd thing for a picture of somebody running to do. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(8,20,15,.12) 0%, rgba(7,18,14,.44) 52%,
                              rgba(6,15,11,.78) 100%);
  }
  .band { grid-template-columns: 1fr; gap: 22px; }
  .band-film { width: min(240px, 70vw); }
  .scene-track img { width: 150px; height: 200px; }
}

/* Motion is decoration here, all of it. Anybody who has asked for less gets the
   photographs standing still and the films as their poster frames. */
@media (prefers-reduced-motion: reduce) {
  .scene-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .hero-film, .band-film video { display: none; }
}

/* static/img/hero-field.jpg is no longer referenced by anything. It is still in
   the tree because the machine this deploys from cannot currently delete files
   in the repository; remove it whenever that is sorted. */

/* ------------------------------------------------------------- the badge
   On a free event's pages, and nowhere else. Quiet enough not to spoil
   somebody's race page, present enough to be the reason they pay. */
.rt-badge {
  padding: 14px 16px 22px; text-align: center;
}
.rt-badge a {
  display: inline-block; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px;
  background: var(--surface);
}
.rt-badge a:hover { color: var(--text); border-color: var(--muted); }

/* ===================================================================== pricing
   One page for clubs and for organizers, because they buy the same two things.
   Three tiers across the top, the package sizes underneath, and the rules in
   plain sight rather than in a terms page nobody opens. */
.pricing { padding: 28px 0 56px; }
.pricing-head { max-width: 680px; margin-bottom: 26px; }
.pricing-head h1 { margin: 6px 0 10px; font-size: 34px; line-height: 1.12; }

.tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { display: flex; flex-direction: column; position: relative; }
.tier h2 { margin: 0 0 6px; font-size: 18px; }
.tier .amount { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.tier .amount .per { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier.featured { border-color: var(--gh-green); box-shadow: 0 0 0 1px var(--gh-green) inset; }
.tier-flag {
  position: absolute; top: -10px; right: 14px; background: var(--gh-green); color: #fff;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px;
}
.ticks { list-style: none; margin: 14px 0 18px; padding: 0; }
.ticks li { position: relative; padding-left: 22px; margin: 7px 0; font-size: 14px; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; color: var(--gh-green); font-weight: 700;
}
.ticks li.no { color: var(--muted); }
.ticks li.no::before { content: "·"; color: var(--muted); }

.section-head { margin: 38px 0 6px; font-size: 22px; }
.table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; }
.price-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 1px solid var(--border); padding: 8px 12px 8px 0;
}
.price-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--border); }
.price-table .member-price { color: var(--gh-green); font-weight: 700; }

.rules { margin-top: 10px; }
.rules h3 { margin: 0 0 4px; font-size: 15px; }
.pricing-cta { margin-top: 28px; }

@media (max-width: 860px) {
  .tier-row { grid-template-columns: 1fr; }
  .pricing-head h1 { font-size: 27px; }
  .hide-sm { display: none; }
}

/* ---------------------------------------------------- capacity and the plan
   The strip on each event says how full it is and whether tracking can be
   switched on. Red only when it is actually full, because an organizer
   glancing at this on race morning should see one thing. */
.cap-strip {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.cap-strip.is-full { border-color: #dc2626; }
.cap-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-actions select {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.plan-card .btn-row { margin-top: 12px; }

/* ===================================================================== console
   The platform's own screen: approvals, plans, payments. Dense on purpose -
   this is a working surface for one person, not a page to be impressed by. */
.console { padding: 22px 0 60px; }
.console-head { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.console-head h1 { margin: 4px 0 0; font-size: 26px; }

.stat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.stat-row-4 { grid-template-columns: repeat(4, 1fr); }
.stat { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 12px 14px; }
.stat .n { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.stat .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat.hot { border-color: var(--gh-gold); background: #fffaf0; }

.approve-card .reason { width: 100%; margin: 8px 0; font: inherit; font-size: 13px;
                        padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; }

.console-table { width: 100%; border-collapse: collapse; margin: 10px 0 24px; font-size: 14px; }
.console-table th { text-align: left; font-size: 11.5px; text-transform: uppercase;
                    letter-spacing: .04em; color: var(--muted); padding: 8px 10px 8px 0;
                    border-bottom: 1px solid var(--border); white-space: nowrap; }
.console-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border);
                    vertical-align: top; }
.console-table .member { color: var(--gh-green); }
.plan-cell { white-space: nowrap; }
.plan-cell select { font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 7px;
                    border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.btn.small { padding: 4px 10px; font-size: 12.5px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.log { list-style: none; margin: 10px 0; padding: 0; font-size: 13.5px; }
.log li { padding: 7px 0; border-bottom: 1px solid var(--border); }

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- made by
   One line under everything, on every page. Quiet: it is a signature, not a
   banner, and it must never compete with a club's own branding above it. */
.made-by { padding: 18px 16px 26px; text-align: center; }
.made-by a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--muted); font-size: 12.5px; letter-spacing: .01em;
}
.made-by img { border-radius: 5px; display: block; opacity: .9; }
.made-by strong { color: var(--text); font-weight: 600; }
.made-by a:hover { color: var(--text); }
/* The badge sits directly above it on a free event's pages, so the pair needs
   to read as one footer rather than two stacked afterthoughts. */
.rt-badge + .made-by { padding-top: 0; }

/* --------------------------------------------------------- a club's colours
   `--gh-green`, `--gh-gold` and `--live` are overridden per page by a style
   block in the head (see app/branding.py). Everything below is what a club
   gets for free by those three variables already being used everywhere.
   `--brand-ink` is the text colour that can actually be read on their green,
   computed rather than chosen, because a club that picks a pale primary would
   otherwise ship white-on-white buttons to their own runners. */
.btn { color: var(--brand-ink, #fff); }
.brand-dark {
  --surface: #14171a;
  --surface-2: #1b1f23;
  --text: #f2f4f3;
  --muted: #9aa5a0;
  --border: #2a3136;
  background: #0e1114;
}
.brand-dark .card, .brand-dark header.site { background: var(--surface); }
.brand-dark .made-by strong { color: var(--text); }

/* ------------------------------------------------------- the plan, visibly
   Paying used to change a number in the database and nothing on any screen,
   so an organizer who had just paid could not tell whether it had worked. */
.plan-state {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 16px 0 10px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.plan-state h2 { margin: 4px 0 8px; font-size: 24px; }
.plan-state.is-member { border-color: var(--gh-green);
                        box-shadow: 0 0 0 1px var(--gh-green) inset; }
.plan-card.is-member { border-color: var(--gh-green); }
.mono { font-family: var(--mono); font-size: 12px; }
input[type="color"] {
  width: 64px; height: 36px; padding: 2px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface);
}