/* ============================================================================
   Sideline — the bespoke layer.

   Loaded AFTER _shared/styles.css + data.css (Identity A: warm paper, Fraunces
   + Inter). Per PORTFOLIO-MASTER-STRATEGY §3b, per-site signature work lives
   here and never in _shared. Because this site ships the shared stylesheets
   too, netbar / footer ring / publisher / house ad are all styled — the failure
   mode that left WhiteLights' privacy page and PeakForm banner unstyled cannot
   happen here.

   Voice: the local sports desk. Warm, plain, specific. Where GymFinder India is
   a municipal data bureau, Sideline is the Saturday morning club noticeboard —
   the two must never read as the same product.
   ========================================================================== */

:root{
  --sl-green:#0B6E4F;        /* pounamu */
  --sl-green-d:#075640;
  --sl-ink:#17211D;
  --sl-line:#DCD6C9;         /* warmer than the base hairline */
  --sl-chalk:#F4EFE4;
  /* one hue per activity family — used by the dot map, the sport chips and the
     micro-icons, so a colour always means the same thing across the site */
  --f-gyms:#0B6E4F; --f-yoga:#7A4E86; --f-martial:#B03A2E; --f-rugby:#1F4E79;
  --f-cricket:#2E6B34; --f-football:#0F6E86; --f-netball:#C2571A;
  --f-running:#8A6A16; --f-other:#5B6169;
}
[data-theme=dark]{
  --sl-line:#2E3833; --sl-chalk:#1A211E; --sl-ink:#E6E9E6;
  --f-gyms:#3FBF92; --f-yoga:#B98FC7; --f-martial:#E8776A; --f-rugby:#6FA8DC;
  --f-cricket:#71B877; --f-football:#5AB4CC; --f-netball:#E39355;
  --f-running:#CFAE52; --f-other:#9AA2A8;
}

/* ------------------------------------------------------- signature: the rule
   A ledger rule with a single square tick. Sideline's answer to the calibration
   mark — deliberately blunter and warmer than WhiteLights' vernier. */
.sl-rule{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.sl-rule::before{content:"";width:9px;height:9px;background:var(--sl-green);flex:0 0 9px}
.sl-rule::after{content:"";flex:1;height:1px;background:var(--sl-line)}

/* ---------------------------------------------------------- the set piece
   "New Zealand, drawn by its clubs." Every club plotted from its real
   coordinates — no map tiles, no basemap, no external image. The country's
   shape emerges from the data itself, which is the whole argument: this is
   what the directory contains, drawn. */
.dotmap{position:relative;background:var(--sl-chalk);border:1px solid var(--sl-line);
  border-radius:14px;padding:18px}
.dotmap svg{display:block;width:100%;height:auto}
.dotmap circle{transition:r .12s ease}
@media (prefers-reduced-motion:reduce){.dotmap circle{transition:none}}
.dm-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;
  font-size:.75rem;letter-spacing:.02em}
.dm-legend button{display:inline-flex;align-items:center;gap:6px;background:none;
  border:1px solid var(--sl-line);border-radius:999px;padding:5px 11px;cursor:pointer;
  color:inherit;font:inherit;font-size:.75rem;line-height:1}
.dm-legend button[aria-pressed=false]{opacity:.42}
.dm-legend i{width:9px;height:9px;border-radius:50%;display:block}
.dm-count{font-variant-numeric:tabular-nums;opacity:.7}
.dm-note{margin:10px 0 0;font-size:.8125rem;opacity:.75}

/* ------------------------------------------------------------ sport chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--sl-line);
  border-radius:999px;padding:6px 13px;text-decoration:none;font-size:.875rem;
  background:var(--sl-chalk)}
.chip:hover{border-color:var(--sl-green);color:var(--sl-green)}
.chip svg{width:15px;height:15px;flex:0 0 15px}
.chip b{font-weight:600}
.chip .n{font-variant-numeric:tabular-nums;opacity:.6;font-size:.8125rem}

/* --------------------------------------------------------- the club card
   Signature layout move: the noticeboard card. A hairline ledger row with the
   sport mark in the gutter, not a boxed tile — closer to a club listing pinned
   to a wall than to a SaaS card grid. */
.board{display:grid;gap:0;border-top:1px solid var(--sl-line)}
.club{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:start;
  padding:15px 4px;border-bottom:1px solid var(--sl-line);text-decoration:none}
.club:hover{background:var(--sl-chalk)}
.club-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:var(--sl-chalk);border:1px solid var(--sl-line)}
.club-mark svg{width:17px;height:17px}
.club-name{font-weight:600;margin:0 0 3px;line-height:1.25}
.club-meta{margin:0;font-size:.8125rem;opacity:.72;line-height:1.45}
.club-right{text-align:right;font-size:.75rem;opacity:.6;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.club-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.club-tags span{font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--sl-line);border-radius:4px;padding:2px 6px;opacity:.8}

/* --------------------------------------------------------- confident space
   AAA checklist item 5: one full-width breathing moment per page. */
.breathe{padding:64px 0;text-align:center}
.breathe p{max-width:34ch;margin:0 auto;font-family:Fraunces,Georgia,serif;
  font-size:1.5rem;line-height:1.35}
@media (max-width:600px){.breathe{padding:40px 0}.breathe p{font-size:1.25rem}}

/* -------------------------------------------------------------- club page */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--sl-line);border:1px solid var(--sl-line);border-radius:12px;overflow:hidden}
.facts div{background:var(--bg,#FBF9F5);padding:14px 16px}
[data-theme=dark] .facts div{background:#141A17}
.facts dt{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:0 0 4px}
.facts dd{margin:0;font-weight:600}
.facts dd a{word-break:break-word}

/* the distance ring — how far the next options are, drawn */
.ring-fig{background:var(--sl-chalk);border:1px solid var(--sl-line);border-radius:14px;padding:16px}
.ring-fig svg{display:block;width:100%;height:auto;max-width:420px;margin:0 auto}
.ring-fig .rr{fill:none;stroke:var(--sl-line)}
.ring-fig .rl{font-size:9px;fill:currentColor;opacity:.55;font-variant-numeric:tabular-nums}
.ring-fig .rp{stroke:none}
.ring-fig .rc{fill:var(--sl-green)}

/* --------------------------------------------------------- the Tua embed
   A real interview, not a decoration — so it gets a proper figure treatment
   with a caption, and lazy-loads rather than costing every boxing visitor a
   YouTube player they did not ask for. */
.tua{border:1px solid var(--sl-line);border-radius:14px;overflow:hidden;background:var(--sl-chalk)}
.tua-frame{position:relative;aspect-ratio:16/9;background:#000}
.tua-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tua-cap{padding:14px 16px;font-size:.875rem;line-height:1.5}
.tua-cap b{display:block;font-weight:600;margin-bottom:3px}

/* --------------------------------------------------------------- A-to-Z */
.az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.az a{display:grid;place-items:center;min-width:31px;height:31px;border:1px solid var(--sl-line);
  border-radius:7px;text-decoration:none;font-size:.8125rem;font-variant-numeric:tabular-nums}
.az a:hover{border-color:var(--sl-green);color:var(--sl-green)}
.az a[aria-disabled=true]{opacity:.3;pointer-events:none}

/* ------------------------------------------------------------ stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;
  border-top:1px solid var(--sl-line);border-bottom:1px solid var(--sl-line);padding:20px 0}
.stats .v{font-family:Fraunces,Georgia,serif;font-size:2rem;line-height:1;
  font-variant-numeric:tabular-nums;margin:0 0 4px}
.stats .k{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:0}

/* --------------------------------------------------------- search/filter */
.finder{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0 0 16px}
.finder input,.finder select{border:1px solid var(--sl-line);border-radius:10px;
  padding:11px 13px;font:inherit;background:var(--bg,#FBF9F5);color:inherit;width:100%}
.finder input:focus,.finder select:focus{outline:2px solid var(--sl-green);outline-offset:1px;border-color:var(--sl-green)}
@media (max-width:600px){.finder{grid-template-columns:1fr}}
#fx-empty{padding:22px 4px;opacity:.7}

/* the shared house ad already has styling from datasite.css; this only warms
   it to Sideline's palette so it reads as part of the page, not a pasted unit */
.pf-cinema{border-radius:14px}

@media print{.dotmap,.dm-legend,.finder,.tua{display:none}}