/* ═══════════════════════════════════════════════════════════════════════════
   ACTUAL FOOTY · SHARED DESIGN SYSTEM  (af-system.css)
   ───────────────────────────────────────────────────────────────────────────
   The public platform grew as 11+ hand-authored pages, each inlining its own
   <style> and re-declaring the same brand four different ways — so every mobile
   fix had to be copy-pasted per file. This is the ONE source of truth: a fluid
   type scale, spacing / radius / breakpoint / tap-target / motion scales, and a
   small set of primitives, so any surface can be built or migrated to a single,
   consistent, phone-first system.

   HOW IT'S WIRED (build_site.py): baked to /af-system.css and <link>-ed EARLY in
   every page's <head> — before each page's own inline <style>. That ordering is
   deliberate and load-bearing: a page's inline rules still WIN, so shipping this
   file regresses nothing. It ADDS a namespaced system (everything is `--af-*` /
   `.af-*`, colliding with no existing token or class) that new + migrated code
   opts into.

   ADOPTION: reach for `--af-text-*` / `--af-space-*` / `.af-btn` / `.af-field`
   instead of fresh px values. Migrate a page by deleting its bespoke tokens and
   pointing at these. Do it surface-by-surface; never a big-bang.

   BREAKPOINTS (CSS vars can't be used in @media, so they live here as the
   canonical set — use these three, don't invent new ones):
       phone   ≤ 560px      tablet  ≤ 760px      desktop ≥ 1024px
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type · one fluid, mobile-first modular scale (clamp: min @360px → max
     @~1280px). Nothing else defines these, so they're safe to use anywhere and
     they scale with the viewport AND the user's text-size setting. ── */
  --af-text-xs:    clamp(11px, 10.4px + 0.18vw, 12px);
  --af-text-sm:    clamp(12px, 11.2px + 0.35vw, 14px);
  --af-text-base:  clamp(15px, 14.3px + 0.35vw, 16px);   /* body · ≥16px kills iOS input zoom */
  --af-text-lg:    clamp(17px, 15.6px + 0.7vw, 19px);
  --af-text-xl:    clamp(20px, 17.2px + 1.3vw, 24px);
  --af-text-2xl:   clamp(24px, 19.6px + 2.1vw, 32px);
  --af-text-3xl:   clamp(29px, 22.5px + 3.1vw, 44px);
  --af-text-4xl:   clamp(37px, 26px + 5.4vw, 64px);
  --af-text-display: clamp(46px, 28px + 9vw, 112px);      /* hero wordmark */

  --af-leading-tight: 1.05;
  --af-leading-snug:  1.3;
  --af-leading-body:  1.55;
  --af-tracking-caps: 0.14em;   /* the platform's uppercase eyebrows / labels */

  /* ── Type families (the font files themselves are baked to /fonts by
     build_site.py; these just name the stacks per THE FONT LAW). ── */
  --af-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* headlines · names · numbers */
  --af-font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;  /* copy */

  /* ── Spacing · 8pt-based rhythm ── */
  --af-space-1: 4px;   --af-space-2: 8px;   --af-space-3: 12px;  --af-space-4: 16px;
  --af-space-5: 24px;  --af-space-6: 32px;  --af-space-7: 48px;  --af-space-8: 64px;  --af-space-9: 96px;

  /* ── Radius ── */
  --af-radius-sm: 8px;  --af-radius-md: 12px;  --af-radius-lg: 16px;  --af-radius-xl: 22px;  --af-radius-pill: 999px;

  /* ── Touch · WCAG 2.5.5 / Apple HIG minimum. Every tappable primitive honours it. ── */
  --af-tap: 44px;

  /* ── Elevation ── */
  --af-shadow-1: 0 1px 3px rgba(0,0,0,.28);
  --af-shadow-2: 0 8px 24px rgba(0,0,0,.34);
  --af-shadow-3: 0 20px 56px rgba(0,0,0,.46);

  /* ── Motion · one easing + duration set; honour reduced-motion below. ── */
  --af-ease: cubic-bezier(.4, 0, .2, 1);
  --af-dur-fast: .12s;  --af-dur: .18s;  --af-dur-slow: .3s;

  /* ── Z-index · names the existing /app stacking landscape so new overlays
     slot in deliberately instead of racing to 99999. ── */
  --af-z-nav: 40;  --af-z-drawer: 50;  --af-z-sheet: 99;  --af-z-modal: 200;  --af-z-toast: 300;

  /* ── Colour · documents the values already in public use (this file does NOT
     rebrand — brand changes are founder-gated). Two cyans exist in the estate:
     the public site's #23C7F6 (canonical here) and the dark-cockpit brand-bible
     #00E5FF (--af-cyan-cockpit); reconciling them is a separate, signed-off
     follow-up. New public-surface work should use --af-cyan. ── */
  --af-cyan: #23C7F6;
  --af-cyan-cockpit: #00E5FF;
  --af-lime: #C6FF00;
  --af-magenta: #F16C52;          /* AFLW accent — official coral (var name kept for compat) */
  --af-ink: #0A0D12;              /* master ink / darkest surface */
  --af-ink-2: #161B23;
  --af-paper: #EFEBDD;            /* warm reading surface (marketing) */
  --af-white: #FFFFFF;
  --af-grey: #8FA3B8;
  --af-line: rgba(255,255,255,.10);
  --af-line-2: rgba(255,255,255,.16);

  /* Safe-area passthroughs for notch/home-indicator insets. */
  --af-safe-top: env(safe-area-inset-top, 0px);
  --af-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ══════════════════════════ PRIMITIVES ══════════════════════════
   All `.af-*` — collide with nothing existing. Opt in per element. */

/* Constrained, phone-first content column. */
.af-container { width: 100%; max-width: 1040px; margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px); }

/* Button · 44px tap floor, display font, keyboard-visible focus ring. */
.af-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--af-space-2);
  min-height: var(--af-tap); padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--af-radius-md);
  font-family: var(--af-font-display); font-weight: 800; font-size: var(--af-text-sm);
  line-height: 1; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--af-dur) var(--af-ease), box-shadow var(--af-dur) var(--af-ease),
              border-color var(--af-dur) var(--af-ease), color var(--af-dur) var(--af-ease),
              background var(--af-dur) var(--af-ease);
}
.af-btn:active { transform: translateY(1px) scale(.99); }
.af-btn--primary { background: var(--af-cyan); color: #04121a; box-shadow: 0 10px 30px rgba(35,199,246,.30); }
.af-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(35,199,246,.42); }
.af-btn--ghost { background: rgba(255,255,255,.03); border-color: var(--af-line-2); color: var(--af-paper); }
.af-btn--ghost:hover { border-color: var(--af-cyan); color: var(--af-cyan); }
.af-btn--block { width: 100%; }

/* Form field · 44px, ≥16px text so iOS never zooms the viewport on focus. */
.af-field { display: flex; flex-direction: column; gap: var(--af-space-2); }
.af-label { font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-xs);
  letter-spacing: var(--af-tracking-caps); text-transform: uppercase; color: var(--af-grey); }
.af-input {
  width: 100%; min-height: var(--af-tap); padding: 12px 14px;
  font-family: var(--af-font-body); font-size: 16px; line-height: 1.3; color: var(--af-white);
  background: rgba(255,255,255,.04); border: 1px solid var(--af-line-2);
  border-radius: var(--af-radius-sm); -webkit-appearance: none; appearance: none;
  transition: border-color var(--af-dur) var(--af-ease), box-shadow var(--af-dur) var(--af-ease);
}
.af-input::placeholder { color: rgba(255,255,255,.38); }
.af-input:focus { outline: none; border-color: var(--af-cyan);
  box-shadow: 0 0 0 3px rgba(35,199,246,.22); }

/* Keyboard-only focus ring utility (mouse clicks stay clean). */
.af-focus:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(35,199,246,.5); border-radius: var(--af-radius-sm); }

/* Safe-area helpers for fixed edges (bottom bars, headers). */
.af-safe-bottom { padding-bottom: var(--af-safe-bottom); }
.af-safe-top { padding-top: var(--af-safe-top); }

/* Accessible-hidden (label text for icon-only controls). */
.af-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Respect the user's motion preference — scoped to the system's own animations. */
@media (prefers-reduced-motion: reduce) {
  .af-btn, .af-input { transition: none; }
  .af-btn:active, .af-btn--primary:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DRAFT ROOM  ·  one family across /draft-board and /mock-draft
   ───────────────────────────────────────────────────────────────────────────
   The two rooms were built a week apart and drifted: sixteen distinct font
   sizes on the board, none of them shared with the Mock Draft, and no club
   identity on either. The founder's read was "very basic and plain — seems
   cheap", and it was right: cheapness on screen is almost never colour, it is
   the absence of HIERARCHY. When rank one and rank forty are set at the same
   size, the eye is told nothing matters.

   So this is the Draft Room's scale, derived from the AF Card Standard's ten
   ROLES rather than copied from its sizes — the card's scale is drawn for a
   1080x1350 poster and its eyebrow would land at 8px on a phone. What transfers
   is the rule set: display caps tracked IN, eyebrows tracked OUT, sub-unit
   leading on headlines, tabular figures wherever digits stack, flat fill only.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Ten roles. Nothing in the Draft Room is set between these steps. */
  --afd-hero:      clamp(30px, 22px + 3.4vw, 38px);
  --afd-section:   20px;
  --afd-eyebrow:   11px;
  --afd-name-lead: 17px;    /* a supporter's top five */
  --afd-name:      14.5px;  /* the rest of the board, and the pool */
  --afd-figure:    19px;
  --afd-rank:      15px;
  --afd-meta:      11.5px;
  --afd-chip:      10px;
  --afd-caption:   12.5px;

  /* The rules that make display type read expensive. Large caps at default
     tracking are the single clearest tell of an unconsidered surface. */
  --afd-track-hero:  -.04em;
  --afd-track-sec:   -.025em;
  --afd-track-name:  -.015em;
  --afd-track-out:   .22em;   /* eyebrows only */
  --afd-lead-hero:   .92;

  /* Card render widths. Big where the board makes its point, a list below it. */
  --afd-card-hero: 96px;
  --afd-card-mid:  64px;
  --afd-card-list: 44px;

  /* Club livery. Set per surface from data/card-palettes.json, which derives
     ground and accent by rule (darkest registered colour; most saturated colour
     clearing 3:1 against it) so an unreadable pairing cannot ship. Defaults are
     AF's own — cyan is OURS, the wordmark and the shield, never a club accent. */
  --afd-club-ground: #0B1B2A;
  --afd-club-accent: #23C7F6;
}

/* Type roles ─────────────────────────────────────────────────────────────── */
.afd-hero{font-family:var(--af-font-display); font-weight:900; text-transform:uppercase;
  font-size:var(--afd-hero); letter-spacing:var(--afd-track-hero); line-height:var(--afd-lead-hero)}
.afd-hero em{font-style:normal; color:var(--afd-club-accent)}
.afd-section{font-family:var(--af-font-display); font-weight:900; font-size:var(--afd-section);
  letter-spacing:var(--afd-track-sec); line-height:1.10}
.afd-eyebrow{font-family:var(--af-font-display); font-weight:800; font-size:var(--afd-eyebrow);
  letter-spacing:var(--afd-track-out); text-transform:uppercase}
.afd-figure,.afd-rank{font-family:var(--af-font-display); font-weight:900;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1}
.afd-figure{font-size:var(--afd-figure)} .afd-rank{font-size:var(--afd-rank)}
.afd-meta{font-size:var(--afd-meta); font-weight:700; line-height:1.40}
.afd-chip{font-family:var(--af-font-display); font-weight:800; font-size:var(--afd-chip);
  letter-spacing:.06em; text-transform:uppercase}
.afd-caption{font-size:var(--afd-caption); line-height:1.60}

/* The crest, always in the Card Standard's glossy disc — a dark crest dropped
   straight onto a dark ground disappears. */
.afd-disc{width:38px; height:38px; border-radius:50%; background:#F4EFE6; flex:0 0 auto;
  display:grid; place-items:center;
  box-shadow:0 0 0 .5px rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.55)}
.afd-disc img{width:76%; height:76%; object-fit:contain}
.afd-disc.sm{width:26px; height:26px} .afd-disc.lg{width:52px; height:52px}

/* A tier band is structure, not a label: the club accent, the count, and a rule
   that carries the eye across. */
.afd-band{display:flex; align-items:baseline; gap:10px; margin:20px 2px 2px}
.afd-band .t{font-family:var(--af-font-display); font-weight:900; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--afd-club-accent)}
.afd-band .c{font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.55}
.afd-band .ln{flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--afd-club-accent) 45%,transparent),transparent)}

/* The receipt ground: two layers and only two. The raking light, the polished
   sweep, the glint and the metal hairlines were removed from the standard on
   purpose — they read as effects rather than as quality. */
.afd-receipt{position:relative; overflow:hidden; border-radius:var(--af-radius-lg);
  padding:26px 24px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10);
  background:
    radial-gradient(130% 92% at 50% 46%,transparent 44%,rgba(0,0,0,.58) 100%),
    linear-gradient(168deg,var(--afd-club-ground) 0%,#0A1119 56%,#06090E 100%)}
