/* ============================================================================
   Athletizer — shared design system
   ----------------------------------------------------------------------------
   Every page used to carry its own full <style> block, which is exactly why
   they drifted: packages.html set Inter, index.html set Plus Jakarta Sans, and
   the same "section heading" was four different sizes across four files. This
   file holds the tokens and the primitives so a new page inherits the system
   instead of re-inventing it.

   The identity is unchanged — black, green, Bebas display type. What is new is
   that the SCALE is a scale: type steps come from one ratio and spacing from
   one 8px rhythm, so nothing is a hand-picked pixel value any more.
   ========================================================================= */

:root {
  /* ── brand ──────────────────────────────────────────────────────────── */
  --green:        #16A34A;   /* 3.14:1 on --bg — the only green safe for a mark
                                on the LIGHT surface. Measured, not guessed. */
  --green-bright: #22C55E;   /* 2.17:1 on --bg — FAILS on light; dark only,
                                where it is 8.57:1. Never use it for a bar or
                                icon on a light section. */
  --green-pale:   #F0FDF4;
  --green-mid:    #DCFCE7;
  --green-border: #BBF7D0;

  /* ── surfaces & ink ─────────────────────────────────────────────────── */
  --white:  #FFFFFF;
  --bg:     #F8FAF8;
  --dark:   #030F06;
  --dark2:  #052E16;
  --text:   #111813;         /* 17.2:1 on --bg */
  --muted:  #52716B;         /*  5.1:1 on --bg — safe for axis + label text */
  --border: #E2F0E8;
  --shadow: rgba(22,163,74,0.10);

  /* ── type ───────────────────────────────────────────────────────────── */
  --font:    'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --display: 'Bebas Neue', 'Plus Jakarta Sans', sans-serif;

  /* One ratio (~1.25 minor third), fluid between a 360px and a 1400px
     viewport. Nothing below is a hand-tuned number. */
  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
  --t-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --t-1:  clamp(1.10rem, 1.03rem + 0.32vw, 1.32rem);
  --t-2:  clamp(1.35rem, 1.20rem + 0.65vw, 1.80rem);
  --t-3:  clamp(1.70rem, 1.38rem + 1.40vw, 2.60rem);
  --t-4:  clamp(2.20rem, 1.55rem + 2.90vw, 4.00rem);
  --t-5:  clamp(2.90rem, 1.60rem + 5.60vw, 6.40rem);

  /* ── spacing — one 8px rhythm ───────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section: clamp(64px, 8vw, 128px);   /* vertical rhythm between sections */
  --gutter:  clamp(20px, 4vw, 40px);    /* page side padding */
  --wrap: 1200px;

  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 28px; --r-full: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: var(--t-0); line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── layout primitives ────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--dark { background: var(--dark); color: var(--white); }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* The old pages butted a light section straight against a dark one, which read
   as two websites stacked. A hairline of the incoming surface softens the cut
   without adding a decorative divider. */
.section--dark + .section { border-top: 1px solid var(--border); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t--1); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  background: var(--green-pale); border: 1px solid var(--green-border);
}
.section--dark .eyebrow { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.28); color: var(--green-bright); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); }
.lede { font-size: var(--t-1); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.section--dark .lede { color: rgba(255,255,255,.66); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--t-0); text-decoration: none; cursor: pointer;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-full); border: 1px solid transparent;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: #15903F; }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.section--dark .btn--ghost { border-color: rgba(255,255,255,.22); color: var(--white); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-3) var(--gutter);
  background: rgba(3,15,6,.82); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08); color: var(--white);
}
.nav-logo { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.nav-logo img { width: 26px; height: 26px; }
.nav-logo span { font-family: var(--display); font-size: var(--t-1); letter-spacing: .06em; }
.nav-links { display: flex; gap: var(--s-5); }
.nav-links a { font-size: var(--t--1); font-weight: 600; text-decoration: none; color: rgba(255,255,255,.72); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--green-bright); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { background: var(--dark); color: rgba(255,255,255,.55); padding-block: var(--s-8) var(--s-6); }
.foot-grid { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.foot a { font-size: var(--t--1); font-weight: 600; text-decoration: none; color: rgba(255,255,255,.55); transition: color .2s; }
.foot a:hover { color: var(--green-bright); }
.foot p { font-size: var(--t--1); }

/* ── stat tiles ───────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-5); }
.stat { padding: var(--s-5) 0; }
.stat-num { font-family: var(--display); font-size: var(--t-4); line-height: 1; color: var(--green); }
.section--dark .stat-num { color: var(--green-bright); }
.stat-label { margin-top: var(--s-2); font-size: var(--t--1); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.section--dark .stat-label { color: rgba(255,255,255,.5); }
.stat-note { margin-top: var(--s-1); font-size: var(--t--1); color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.section--dark .stat-note { color: rgba(255,255,255,.42); }

/* ============================================================================
   Charts
   ----------------------------------------------------------------------------
   Both charts on this site are SINGLE-SERIES magnitude, so there is no
   categorical palette and no legend: one hue, and the heading says what is
   plotted. The hue is --green (#16A34A), which measures 3.14:1 on --bg. The
   brighter --green-bright is 2.17:1 there and would fail as a mark on light —
   it is used only on dark surfaces, where it reaches 8.57:1.

   Text never wears the data colour: values and labels use --text and --muted
   (17.2:1 and 5.1:1). The bar beside them carries the identity.
   ========================================================================= */

.chart { --bar: var(--green); --track: #E8F0EA; }
.chart-head { margin-bottom: var(--s-6); }
.chart-title { font-size: var(--t-1); font-weight: 800; letter-spacing: -.01em; }
.chart-sub { margin-top: var(--s-1); font-size: var(--t--1); color: var(--muted); }

/* ── columns (weekday) ────────────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2); align-items: end; height: 232px; position: relative; }
/* Baseline only. A mid gridline was drawn here and removed: it carried no tick
   label, so it silently implied a scale value (half of 27 = 13.5, not a clean
   number), and every column is already directly labelled with its count. An
   unlabelled gridline is decoration wearing the costume of a scale. */
.cols::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); pointer-events: none; }
.col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; cursor: default; }
.col-bar {
  width: 100%; max-width: 24px;                 /* cap the mark; the band's leftover is air */
  background: var(--bar);
  border-radius: var(--r-1) var(--r-1) 0 0;     /* rounded data-end, square at the baseline */
  transition: background .2s var(--ease);
  position: relative; z-index: 1;
}
.col:hover .col-bar { background: #128040; }
.col-val { font-size: var(--t--1); font-weight: 800; color: var(--text); margin-bottom: var(--s-1); }
.col-key { margin-top: var(--s-3); font-size: var(--t--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ── horizontal bars (postcodes) ──────────────────────────────────────── */
.bars { display: flex; flex-direction: column; gap: var(--s-2); }
.bar-row { display: grid; grid-template-columns: 62px 1fr 44px; align-items: center; gap: var(--s-4); }
.bar-key { font-size: var(--t--1); font-weight: 800; letter-spacing: .06em; color: var(--text); }
.bar-track { height: 20px; background: var(--track); border-radius: var(--r-1); overflow: hidden; }
.bar-fill { height: 100%; background: var(--bar); border-radius: var(--r-1); transition: background .2s var(--ease); }
.bar-row:hover .bar-fill { background: #128040; }
.bar-val { font-size: var(--t--1); font-weight: 800; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ── tooltip ──────────────────────────────────────────────────────────── */
.chart [data-tip] { position: relative; }
.chart [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--dark); color: var(--white); font-size: var(--t--1); font-weight: 600;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1); white-space: nowrap; z-index: 20;
  pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* ── table view (accessibility — nothing is gated behind hover) ───────── */
.chart-table { margin-top: var(--s-5); }
.chart-table summary { font-size: var(--t--1); font-weight: 700; color: var(--muted); cursor: pointer; }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font-size: var(--t--1); }
.chart-table th, .chart-table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); }
.chart-table th { font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.chart-table td:last-child, .chart-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }