/* ==========================================================================
 * app.css — the GWTTKB design system. One source of truth for every page.
 *
 * WHY THIS EXISTS
 * There was no shared stylesheet. Zero pages linked one. All 39 hand-built
 * pages carried their own :root, and 34 defined the SAME token names with
 * DIFFERENT values:
 *
 *     --bg      4 different blacks   (#050709, #050709, #050709, #050709)
 *     --green   3 greens             --red     4 reds
 *     --s2      4 surfaces           --purple  3 purples
 *     --amber   3 ambers             --mono    4 font stacks
 *     --t1/--t2/--t3  every text colour different page to page
 *
 * Nothing was broken — each page was individually fine — but the background
 * black shifted as you navigated and the brand green was not one green. That
 * is the mechanism behind "looks vibe coded": the eye reads the seams even
 * when it cannot name them.
 *
 * VALUES ARE DERIVED, NOT INVENTED
 * Every number below is the most-used value already in the codebase, so
 * adopting this moves the fewest possible pixels. --bg is #050709 because 16
 * pages already say so; the type scale starts at 11px because 11px is the
 * single most common size on the site (322 uses). This is a codification of
 * what the site already mostly does, not a redesign.
 *
 * HOW TO ADOPT
 * Link this BEFORE the page's own <style>, so a page that still defines its
 * own :root keeps winning until its block is deleted. Nothing breaks on day
 * one; each page is corrected by removing local overrides, not by rewriting it.
 *
 *     <link rel="stylesheet" href="/app.css">
 * ========================================================================== */

:root {
  /* ── SURFACES ─────────────────────────────────────────────────────────── */
  --bg:        #050709;   /* page background — the most-used of four blacks */
  --s1:        #0a0f16;   /* raised: cards, panels */
  --s2:        #0d1219;   /* raised further: rows, inputs */
  --s3:        #131a24;   /* tracks, bars, wells */

  /* ── TEXT ─────────────────────────────────────────────────────────────── */
  --txt1:      #e6f0f8;   /* primary */
  --txt2:      #8ba3ba;   /* secondary */
  --txt3:      #4a6076;   /* tertiary / labels */
  --t1: var(--txt1); --t2: var(--txt2); --t3: var(--txt3);   /* legacy aliases */

  /* ── BRAND + SEMANTIC ─────────────────────────────────────────────────── */
  --teal:      #00d4ff;   /* primary accent, links, redraft */
  --green:     #00e676;   /* positive, go, value */
  --red:       #ff3d57;   /* negative, risk, loss */
  --amber:     #ffb700;   /* caution, The Open */
  --purple:    #a78bfa;   /* secondary accent */
  --orange:    #ff8c00;   /* warning between amber and red */

  /* ── BORDERS ──────────────────────────────────────────────────────────── */
  --border:    rgba(255,255,255,.07);
  --border2:   rgba(0,212,255,.16);
  --bdr: var(--border); --bdr2: var(--border2);              /* legacy aliases */

  /* ── TYPE ─────────────────────────────────────────────────────────────── */
  --display:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:      'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale. 47 distinct sizes existed; these seven cover 95% of real use.
     Named by role so a page asks for "label" rather than picking a number. */
  --fs-micro:  9px;    /* dense mono labels, table sublines */
  --fs-label:  11px;   /* the single most-used size on the site */
  --fs-sm:     13px;   /* secondary body, captions */
  --fs-body:   15px;   /* default reading size on mobile */
  --fs-lg:     18px;   /* card titles */
  --fs-xl:     24px;   /* section headings */
  --fs-hero:   34px;   /* page titles */

  /* ── SPACING ──────────────────────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur:  .18s;
}

/* Respecting reduced motion is a correctness requirement, not a nicety:
   vestibular disorders make large transitions genuinely unpleasant. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── BASE ──────────────────────────────────────────────────────────────────
   Deliberately minimal. This file sets tokens and a handful of primitives; it
   does NOT restyle existing components, because a shared sheet that silently
   changes 39 pages is how you break five of them without noticing. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.gw {
  margin: 0;
  background: var(--bg);
  color: var(--txt1);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Phones with notches: content must not sit under the home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
}

.gw h1, .gw h2, .gw h3 { font-family: var(--display); font-weight: 800; letter-spacing: .4px; line-height: 1.1; margin: 0 0 var(--sp-3); }
.gw h1 { font-size: var(--fs-hero); }
.gw h2 { font-size: var(--fs-xl); }
.gw h3 { font-size: var(--fs-lg); }
.gw a { color: var(--teal); text-decoration: none; }
.gw a:hover { text-decoration: underline; }

/* Every interactive target clears 44px, Apple's minimum. Several existing
   buttons sit at 30-34px, which is the difference between tapping a filter
   once and tapping it three times. */
.gw button, .gw select, .gw input, .gw [role="button"] { font-family: inherit; font-size: inherit; min-height: 44px; }
.gw :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── PRIMITIVES — opt in by class, nothing is imposed ──────────────────── */
.gw-wrap  { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-4); }
.gw-card  { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); }
.gw-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt3); }
.gw-mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Horizontal scrollers (the sub-nav, filter rows) need a visible edge or the
   off-screen items may as well not exist — the redraft nav has 15 entries and
   item 12 is unreachable if nothing signals there is more. */
.gw-scroll { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.gw-scroll::-webkit-scrollbar { display: none; }
.gw-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.gw-scroll-fade { position: relative; }
.gw-scroll-fade::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg)); }

@media (max-width: 420px) {
  :root { --fs-hero: 27px; --fs-xl: 21px; --fs-lg: 16px; }
  .gw-wrap { padding: 0 var(--sp-3); }
}