/* ==========================================================================
   SVHS BOYS BASKETBALL — "HARDWOOD" DESIGN SYSTEM
   theme.css · v1.0.0 · single stylesheet, no frameworks, no external fonts
   --------------------------------------------------------------------------
   Consumed by:  index.html (registration), admin/dashboard.html,
                 admin/roster-print.html, admin/login.html, give.html
   Spec:         build/_specs/DESIGN-SYSTEM.md  (read it before adding classes)

   RULES FOR OTHER AGENTS
   1. Every class name that existed in `index (6).html`, `admin-dashboard.html`
      and `player-roster-print.html` still exists here and still means the same
      thing. You can port markup verbatim; it will simply look right.
   2. Do not hardcode colours, sizes, shadows or easings in page HTML.
      Every value you need is a custom property below.
   3. The Avery 8160 label block between the @label-sheet markers is
      DIMENSIONALLY FROZEN. Copy it byte-for-byte into the label popup.
      Do not "tidy" the inches.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Type families -------------------------------------------------- */
  /* Display = condensed uppercase grotesk. Jersey / scoreboard voice.      */
  --font-display: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow",
                  "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  /* Numerals = monospaced. Scoreboards and stat sheets are monospaced.     */
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
              "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Body = platform UI face. Deliberately NOT Inter.                       */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;

  /* ---- Type scale (fluid, mobile-first) ------------------------------- */
  --fs-3xs: 0.6875rem;  /* 11 */
  --fs-2xs: 0.75rem;    /* 12 */
  --fs-xs:  0.8125rem;  /* 13 */
  --fs-sm:  0.875rem;   /* 14 */
  --fs-base:1rem;       /* 16 — never smaller on a form control (iOS zoom) */
  --fs-lg:  1.125rem;   /* 18 */
  --fs-xl:  clamp(1.1875rem, 1.05rem + 0.7vw, 1.3125rem);   /* 19 → 21 */
  --fs-2xl: clamp(1.375rem, 1.15rem + 1.2vw, 1.625rem);     /* 22 → 26 */
  --fs-3xl: clamp(1.625rem, 1.25rem + 1.9vw, 2.0625rem);    /* 26 → 33 */
  --fs-4xl: clamp(2rem,     1.4rem + 3vw,    2.625rem);     /* 32 → 42 */
  --fs-5xl: clamp(2.5rem,   1.6rem + 4.5vw,  3.5rem);       /* 40 → 56 */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tr-display: -0.02em;   /* condensed caps want negative tracking        */
  --tr-caps:     0.09em;   /* micro-caps labels want positive tracking     */
  --tr-num:     -0.01em;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --sp-0: 0;
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-8: 2rem;      /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Sizing ---------------------------------------------------------- */
  --tap: 44px;            /* minimum touch target                          */
  --control-h: 48px;      /* inputs, selects, buttons on mobile            */
  --control-h-sm: 38px;
  --wrap-max: 60rem;      /* 960px — matches current form                  */
  --wrap-wide: 87.5rem;   /* 1400px — matches current dashboard            */
  --border-w: 1.5px;

  /* ---- Motion ---------------------------------------------------------- */
  --mo-instant: 90ms;
  --mo-fast:   140ms;
  --mo-base:   200ms;
  --mo-slow:   320ms;
  --mo-lift:   480ms;

  /* Ball physics: weight going down, follow-through coming up.            */
  --ease-court:   cubic-bezier(0.2, 0.8, 0.3, 1);    /* standard decel    */
  --ease-swish:   cubic-bezier(0.16, 1, 0.3, 1);     /* long settle       */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1); /* catch / overshoot */
  --ease-dribble: cubic-bezier(0.7, 0, 0.3, 1);      /* fast down, fast up*/
  --ease-in-hard: cubic-bezier(0.6, 0, 1, 1);        /* exits             */

  /* ================= LIGHT THEME (default) ============================== */

  /* Surfaces — warm maple, lit from above */
  --c-paper:      #F6F4F0;
  --c-surface:    #FFFFFF;
  --c-surface-2:  #F1EEE9;
  --c-surface-3:  #E9E5DE;
  --c-hairline:   #E2DCD3;   /* decorative rule, 1.36:1 — never load-bearing */
  --c-border:     #848C9C;   /* control border, 3.38:1 on surface           */
  --c-border-strong: #5F6778;/* 5.68:1                                      */

  /* Ink */
  --c-ink:    #12151C;       /* 18.26:1 on surface                          */
  --c-ink-2:  #454C5A;       /*  8.63:1                                     */
  --c-ink-3:  #5F6778;       /*  5.68:1 — hints, meta                       */
  --c-ink-on-fill: #FFFFFF;

  /* Brand — school orange #FF6B35 kept verbatim, but scoped to dark slabs
     where it is accessible (6.04:1 on navy). Light surfaces use the deep
     derivative so small text still passes AA. */
  --c-primary:        #E2571B;  /* graphic accent, 3.74:1 — non-text / large */
  --c-primary-deep:   #B23C0C;  /* fills with white text, 5.92:1             */
  --c-primary-ink:    #B23C0C;  /* orange text on light, 5.92:1              */
  --c-primary-bright: #FF6B35;  /* the school orange, on navy only           */
  --c-primary-tint:   #FDEDE4;
  --c-primary-tint-2: #FAD9C6;

  /* Court navy — scoreboards, totals, footer */
  --c-navy:   #141B2E;
  --c-navy-2: #1E2740;
  --c-navy-3: #2A3550;

  /* Semantic */
  --c-sky:        #0A6E9E;  --c-sky-bright: #0EA5E9;  --c-sky-tint:   #DDEEFB;
  --c-green:      #10633C;  --c-green-tint: #E4F3E7;
  --c-red:        #B3211C;  --c-red-tint:   #FDECEA;
  --c-amber:      #8A5A00;  --c-amber-fill: #F2B23C;  --c-amber-tint: #FDEBD2;
  --c-plum:       #6B2D8C;  --c-plum-tint:  #EFE3F6;
  --c-slate:      #4E5561;  --c-slate-tint: #E9E7E3;

  /* Ink to place ON a saturated semantic fill */
  --c-on-danger:  #FFFFFF;   /* 6.66:1 on --c-red   */
  --c-on-success: #FFFFFF;   /* 7.31:1 on --c-green */
  --c-on-warn:    #12151C;   /* 9.75:1 on --c-amber-fill */

  /* Focus */
  --c-focus: #0A6E9E;
  --focus-ring: 3px solid var(--c-focus);
  --focus-offset: 2px;

  /* Field states */
  --field-bg: var(--c-surface);
  --field-bg-disabled: #EFEBE5;
  --field-ink-disabled: #5F6778;
  --field-border: var(--c-border);
  --field-border-hover: var(--c-border-strong);

  /* Atmosphere */
  --grain-ink: rgba(18, 21, 28, 0.035);   /* hardwood plank lines          */
  --grain-gap: 7px;
  --paint-line: rgba(226, 87, 27, 0.16);  /* court paint                   */
  --mesh-ink: rgba(18, 21, 28, 0.05);     /* net                           */
  --arena-light: rgba(255, 255, 255, 0.9);
  --scrim: rgba(10, 13, 19, 0.72);

  /* Elevation — two-part, navy-tinted, single light source from top */
  --e-0: none;
  --e-1: 0 1px 2px rgba(18,21,28,.06),
         0 1px 1px rgba(18,21,28,.04);
  --e-2: 0 2px 4px -1px rgba(18,21,28,.08),
         0 6px 12px -4px rgba(18,21,28,.09);
  --e-3: 0 4px 8px -2px rgba(18,21,28,.10),
         0 14px 28px -10px rgba(18,21,28,.14);
  --e-4: 0 8px 16px -4px rgba(18,21,28,.12),
         0 28px 56px -20px rgba(18,21,28,.20);
  --e-lip: inset 0 1px 0 rgba(255,255,255,.55);      /* top highlight     */
  --e-inset: inset 0 2px 4px rgba(18,21,28,.07);
  --e-glow: 0 0 0 4px rgba(226,87,27,.16);
}

/* ================= DARK THEME ========================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper:      #0A0D13;
    --c-surface:    #141922;
    --c-surface-2:  #1C222E;
    --c-surface-3:  #242B3A;
    --c-hairline:   #2A3240;
    --c-border:     #697488;
    --c-border-strong: #8B94A6;

    --c-ink:    #EEF1F6;
    --c-ink-2:  #B9C1D0;
    --c-ink-3:  #8B94A6;
    --c-ink-on-fill: #1A0B03;

    --c-primary:        #FF7A3D;
    --c-primary-deep:   #FF7A3D;
    --c-primary-ink:    #FF7A3D;
    --c-primary-bright: #FF8A52;
    --c-primary-tint:   #2C1409;
    --c-primary-tint-2: #3E1D0C;

    --c-navy:   #10141F;
    --c-navy-2: #19202F;
    --c-navy-3: #232C40;

    --c-sky:        #56C2F5;  --c-sky-bright: #7CCBF5;  --c-sky-tint:   #0E2A3D;
    --c-green:      #5FE0A5;  --c-green-tint: #12301F;
    --c-red:        #FF7B72;  --c-red-tint:   #3A100D;
    --c-amber:      #FFC24B;  --c-amber-fill: #FFC24B;  --c-amber-tint: #35240C;
    --c-plum:       #D9A7F0;  --c-plum-tint:  #2A1636;
    --c-slate:      #A6AEBF;  --c-slate-tint: #232935;

    --c-on-danger:  #2A0705;   /* 7.36:1 on --c-red   */
    --c-on-success: #04231A;   /* 10.07:1 on --c-green */
    --c-on-warn:    #241701;   /* 10.91:1 on --c-amber-fill */

    --c-focus: #FFB08A;

    --field-bg: #10151D;
    --field-bg-disabled: #1A202A;
    --field-ink-disabled: #8B94A6;

    --grain-ink: rgba(255,255,255,.035);
    --paint-line: rgba(255,122,61,.20);
    --mesh-ink: rgba(255,255,255,.055);
    --arena-light: rgba(120,150,200,.10);
    --scrim: rgba(4, 6, 10, 0.78);

    --e-1: 0 1px 2px rgba(0,0,0,.5);
    --e-2: 0 2px 4px -1px rgba(0,0,0,.45),
           0 8px 16px -6px rgba(0,0,0,.55);
    --e-3: 0 4px 10px -3px rgba(0,0,0,.5),
           0 18px 34px -12px rgba(0,0,0,.65);
    --e-4: 0 10px 20px -6px rgba(0,0,0,.55),
           0 34px 64px -24px rgba(0,0,0,.75);
    --e-lip: inset 0 1px 0 rgba(255,255,255,.07);
    --e-inset: inset 0 2px 5px rgba(0,0,0,.45);
    --e-glow: 0 0 0 4px rgba(255,122,61,.22);
  }
}

/* Explicit override wins in both directions (theme toggle stamps data-theme) */
:root[data-theme="dark"] {
  --c-paper:      #0A0D13;
  --c-surface:    #141922;
  --c-surface-2:  #1C222E;
  --c-surface-3:  #242B3A;
  --c-hairline:   #2A3240;
  --c-border:     #697488;
  --c-border-strong: #8B94A6;
  --c-ink:    #EEF1F6;
  --c-ink-2:  #B9C1D0;
  --c-ink-3:  #8B94A6;
  --c-ink-on-fill: #1A0B03;
  --c-primary:        #FF7A3D;
  --c-primary-deep:   #FF7A3D;
  --c-primary-ink:    #FF7A3D;
  --c-primary-bright: #FF8A52;
  --c-primary-tint:   #2C1409;
  --c-primary-tint-2: #3E1D0C;
  --c-navy:   #10141F;
  --c-navy-2: #19202F;
  --c-navy-3: #232C40;
  --c-sky:        #56C2F5;  --c-sky-bright: #7CCBF5;  --c-sky-tint:   #0E2A3D;
  --c-green:      #5FE0A5;  --c-green-tint: #12301F;
  --c-red:        #FF7B72;  --c-red-tint:   #3A100D;
  --c-amber:      #FFC24B;  --c-amber-fill: #FFC24B;  --c-amber-tint: #35240C;
  --c-plum:       #D9A7F0;  --c-plum-tint:  #2A1636;
  --c-slate:      #A6AEBF;  --c-slate-tint: #232935;
  --c-on-danger:  #2A0705;
  --c-on-success: #04231A;
  --c-on-warn:    #241701;
  --c-focus: #FFB08A;
  --field-bg: #10151D;
  --field-bg-disabled: #1A202A;
  --field-ink-disabled: #8B94A6;
  --grain-ink: rgba(255,255,255,.035);
  --paint-line: rgba(255,122,61,.20);
  --mesh-ink: rgba(255,255,255,.055);
  --arena-light: rgba(120,150,200,.10);
  --scrim: rgba(4, 6, 10, 0.78);
  --e-1: 0 1px 2px rgba(0,0,0,.5);
  --e-2: 0 2px 4px -1px rgba(0,0,0,.45), 0 8px 16px -6px rgba(0,0,0,.55);
  --e-3: 0 4px 10px -3px rgba(0,0,0,.5), 0 18px 34px -12px rgba(0,0,0,.65);
  --e-4: 0 10px 20px -6px rgba(0,0,0,.55), 0 34px 64px -24px rgba(0,0,0,.75);
  --e-lip: inset 0 1px 0 rgba(255,255,255,.07);
  --e-inset: inset 0 2px 5px rgba(0,0,0,.45);
  --e-glow: 0 0 0 4px rgba(255,122,61,.22);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* clears the sticky scorebar on anchor jumps */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background-color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--c-sky); text-underline-offset: 0.18em; }
a:hover { color: var(--c-primary-ink); }
ul, ol { list-style-position: outside; }
hr { border: none; height: 1px; background: var(--c-hairline); }
::selection { background: var(--c-primary-tint-2); color: var(--c-ink); }

/* Focus — a single visible convention everywhere. Never remove. */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}
/* Fallback for browsers without :focus-visible support on custom controls */
.js-focus-ring:focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }


/* ==========================================================================
   3. ATMOSPHERE — hardwood, court paint, net mesh, jersey ghost
   These are decorative layers. They must never carry information.
   ========================================================================== */

/* Hardwood: plank rhythm + arena spotlight. Put on <body> or .court. */
.court,
body.court {
  background-color: var(--c-paper);
  background-image:
    radial-gradient(120% 70% at 50% -10%, var(--arena-light) 0%, transparent 62%),
    repeating-linear-gradient(
      92deg,
      var(--grain-ink) 0 1px,
      transparent 1px var(--grain-gap)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.014) 0 1px,
      transparent 1px 84px
    );
  background-attachment: fixed, fixed, scroll;
}
/* Fixed attachment is expensive to repaint on touch devices — drop it there. */
@media (max-width: 48rem), (hover: none) {
  .court, body.court { background-attachment: scroll, scroll, scroll; }
}

/* Dark-court variant for admin shells that want the arena-at-night feel */
.court--night {
  background-color: var(--c-navy);
  color: #EEF1F6;
}

/* Painted court lines — an arc + lane, drawn with borders, not images. */
.paint-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.paint-lines::before {   /* the three-point arc */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -58%;
  width: 132%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 2px solid var(--paint-line);
  border-radius: 50%;
}
.paint-lines::after {    /* the lane / key */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 46%;
  height: 62%;
  transform: translateX(-50%);
  border: 2px solid var(--paint-line);
  border-bottom: none;
}

/* Net mesh — diamond weave. Use at low alpha behind slabs and footers. */
.net-mesh {
  position: relative;
}
.net-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,  var(--mesh-ink) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-60deg, var(--mesh-ink) 0 1px, transparent 1px 13px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
          mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

/* Jersey ghost numeral — outlined giant numeral behind a heading. */
.jersey-ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.22em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 26vw, 15rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  opacity: 0.09;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
}

/* Painted rules — a section divider that reads like a baseline. */
.rule { height: 1px; background: var(--c-hairline); border: 0; }
.rule--paint {
  height: 3px;
  border: 0;
  background: linear-gradient(90deg,
    var(--c-primary) 0 3.5rem,
    var(--c-hairline) 3.5rem 100%);
  border-radius: var(--r-pill);
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* Sentence-case body headings where shouting would be wrong */
.h-plain {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

p { text-wrap: pretty; }

/* Micro-caps label — the stat-sheet voice */
.u-caps,
.stat-tile__label,
.info-label,
.scorebar__label,
.filter-row__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--c-ink-3);
}

/* Scoreboard numerals */
.u-mono, .u-tnum, .num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.u-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tr-display); }
.u-nowrap { white-space: nowrap; }

.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-sr-only-focusable:focus,
.u-sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  margin: 0; overflow: visible;
  white-space: normal;
}

.hidden, .u-hidden { display: none !important; }

/* The `hidden` ATTRIBUTE, not only the class.
   `[hidden]{display:none}` exists solely in the user-agent stylesheet, and ANY
   author declaration beats a UA declaration regardless of specificity — so
   `<button class="btn" hidden>` stayed visible, because `.btn` sets
   `display:inline-flex` here. verify.js drives the entire sign-in page through
   `btn.hidden`, so all three of its failure states rendered a live "Sign me in"
   button that could only fail. Declared once, for every component. */
[hidden] { display: none !important; }
.u-stack > * + * { margin-top: var(--sp-4); }
.u-stack-sm > * + * { margin-top: var(--sp-2); }
.u-stack-lg > * + * { margin-top: var(--sp-8); }


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-16);
  position: relative;
  z-index: 1;
}
.container {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-12);
  position: relative;
}
@media (min-width: 48rem) {
  .wrap { padding: var(--sp-8) var(--sp-6) var(--sp-16); }
  .container { padding: var(--sp-6) var(--sp-6) var(--sp-16); }
}

/* The primary elevated sheet (registration form lives in one) */
.card,
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e-3), var(--e-lip);
  position: relative;
}
.card {
  padding: var(--sp-6) var(--sp-5);
  margin-top: -2.5rem;      /* lifts over the hero, as today */
  z-index: 10;
}
@media (min-width: 48rem) {
  .card { padding: var(--sp-12) var(--sp-10); }
}
.panel { padding: var(--sp-5); }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
}
.panel__title { font-size: var(--fs-lg); }
.panel--flush { padding: 0; overflow: hidden; }
.panel--sticky {
  position: sticky;
  top: var(--sp-2);
  z-index: 40;
}

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A page state inside the card (#step1, #success). Toggled with .hidden. */
.form-step { display: block; position: relative; }
.form-step.hidden { display: none !important; }

/* Section rhythm inside the form */
.section-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-5);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,
      var(--c-primary) 0 4rem, var(--c-hairline) 4rem 100%) 1;
}
.section-header h2 { margin-bottom: var(--sp-2); }
.section-desc {
  font-size: var(--fs-base);
  color: var(--c-ink-2);
  max-width: 60ch;
}
.section-note {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-sky-tint);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-sky);
}

.form-section {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-hairline);
  scroll-margin-top: 6rem;
}
.form-section:last-of-type { border-bottom: none; margin-bottom: var(--sp-8); }

.form-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  font-size: var(--fs-xl);
  border-bottom: 2px solid var(--c-surface-2);
  position: relative;
}
.form-section-title::after {   /* short orange paint stroke under the title */
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 2.75rem; height: 2px;
  background: var(--c-primary);
}
/* Section index chip — replaces emoji-as-icon while keeping .icon working */
.form-section-title .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem; height: 2rem;
  border-radius: var(--r-sm);
  background: var(--c-primary-tint);
  color: var(--c-primary-ink);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--e-lip);
  flex: 0 0 auto;
}
.form-section.is-complete .form-section-title .icon {
  background: var(--c-green-tint);
  color: var(--c-green);
}


/* ==========================================================================
   6. HERO — layered depth, parallax-ready, duotone photograph
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 15rem;
  max-height: 20rem;
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-3) 100%);
  color: #FFFFFF;
}
@media (min-width: 48rem) { .hero { min-height: 19rem; max-height: 25rem; } }

.hero img,
.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;      /* overscan so parallax never reveals an edge */
  width: 100%;
  height: 116%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.55;
  filter: grayscale(0.55) contrast(1.08) brightness(0.85);
  will-change: transform;
  transform: translate3d(0, var(--parallax, 0px), 0);
}
/* Duotone wash + bottom scrim, so the photo composites instead of sitting */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--scrim) 0%, rgba(10,13,19,.15) 55%, transparent 100%),
    linear-gradient(115deg, rgba(20,27,46,.85) 0%, rgba(226,87,27,.30) 100%);
}
.hero .paint-lines { z-index: -1; opacity: .8; }

.hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  z-index: 1;
}
@media (min-width: 48rem) {
  .hero-overlay { padding: var(--sp-8) var(--sp-10) var(--sp-10); }
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: var(--fs-5xl);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  max-width: 18ch;
}
.hero-subtitle {
  margin-top: var(--sp-3);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--c-primary-bright);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero-subtitle::before {   /* lit indicator, like a scoreboard LED */
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-primary-bright);
  box-shadow: 0 0 10px 1px var(--c-primary-bright);
  flex: 0 0 auto;
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--c-surface);
  --btn-ink: var(--c-ink);
  --btn-bd: var(--c-border);
  --btn-sh: var(--e-1);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  min-width: 8rem;
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  border: var(--border-w) solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--btn-sh);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition:
    transform var(--mo-fast) var(--ease-dribble),
    box-shadow var(--mo-base) var(--ease-court),
    background-color var(--mo-fast) linear,
    border-color var(--mo-fast) linear;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: var(--e-1); transition-duration: var(--mo-instant); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: var(--e-0);
}

.btn-primary, .btn--primary {
  --btn-bg: var(--c-primary-deep);
  --btn-ink: var(--c-ink-on-fill);
  --btn-bd: transparent;
  --btn-sh: var(--e-2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.06));
}
.btn-primary:hover, .btn--primary:hover { box-shadow: var(--e-3), var(--e-glow); }

.btn-secondary, .btn--secondary {
  --btn-bg: var(--c-surface);
  --btn-ink: var(--c-ink);
  --btn-bd: var(--c-border);
}
.btn-secondary:hover, .btn--secondary:hover { --btn-bd: var(--c-ink); }

.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-sh: none; --btn-ink: var(--c-ink-2); }
.btn--ghost:hover { --btn-bg: var(--c-surface-2); --btn-ink: var(--c-ink); box-shadow: none; }

.btn--danger  { --btn-bg: var(--c-red);   --btn-ink: var(--c-on-danger);  --btn-bd: transparent; }
.btn--success { --btn-bg: var(--c-green); --btn-ink: var(--c-on-success); --btn-bd: transparent; }
.btn--quiet { --btn-bg: var(--c-surface-2); --btn-bd: transparent; --btn-sh: none; }

.btn--sm { min-height: var(--control-h-sm); min-width: 0; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; font-size: var(--fs-lg); padding: 0 var(--sp-8); }
.btn--block { width: 100%; }
.btn--icon { min-width: var(--tap); width: var(--tap); padding: 0; }

.btn-arrow {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1;
  transition: transform var(--mo-base) var(--ease-swish);
}
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-secondary:hover .btn-arrow { transform: translateX(-3px); }

/* Loading state: a bouncing dot, not a spinner — reads as a dribble */
.btn.is-loading { pointer-events: none; color: transparent; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--c-ink-on-fill);
  animation: dribble 620ms var(--ease-dribble) infinite;
}
@keyframes dribble {
  0%, 100% { transform: translateY(-7px) scaleY(1); }
  55%      { transform: translateY(6px) scaleY(.82); }
  62%      { transform: translateY(6px) scaleY(1.06); }
}

@media (max-width: 39.99rem) { .btn { width: 100%; } .btn--icon, .btn--sm { width: auto; } }


/* ==========================================================================
   8. FORM CONTROLS
   ========================================================================== */

.field { position: relative; }
.field + .field { margin-top: var(--sp-5); }
.grid .field + .field { margin-top: 0; }

label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.required, .field-req {
  color: var(--c-red);
  font-weight: 700;
  margin-left: 2px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea,
.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);      /* 16px minimum — stops iOS zoom-on-focus */
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--field-bg);
  border: var(--border-w) solid var(--field-border);
  border-radius: var(--r-md);
  box-shadow: var(--e-inset);
  transition:
    border-color var(--mo-fast) linear,
    box-shadow var(--mo-fast) var(--ease-court),
    background-color var(--mo-fast) linear;
}
textarea, .textarea { min-height: 6.5rem; resize: vertical; line-height: var(--lh-base); }

input:hover, select:hover, textarea:hover { border-color: var(--field-border-hover); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--c-primary);
  box-shadow: var(--e-inset), var(--e-glow);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

input::placeholder, textarea::placeholder { color: var(--c-ink-3); opacity: 1; }

/* Native select: custom chevron drawn in CSS, no image request */
select, .select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-10);
  background-image:
    linear-gradient(45deg,  transparent 50%, currentColor 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(-45deg, transparent 50%, currentColor 50% calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-position:
    right calc(var(--sp-4) + 6px) center,
    right var(--sp-4) center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:disabled, input:disabled, textarea:disabled,
.is-disabled {
  background-color: var(--field-bg-disabled);
  color: var(--field-ink-disabled);
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--c-hairline);
}
/* Coach mode uses exactly this state — never inline styles */
.field.is-coach-locked label { color: var(--c-ink-3); }

input[type="date"] { min-height: var(--control-h); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.field-hint {
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  margin-top: var(--sp-2);
  line-height: var(--lh-snug);
}

/* Inline validation */
.field-error {
  display: none;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-red);
  line-height: var(--lh-snug);
}
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-surface);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}
.field.is-invalid .field-error { display: flex; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea,
[aria-invalid="true"] {
  border-color: var(--c-red);
  background: var(--c-red-tint);
}
.field.is-valid input,
.field.is-valid select {
  border-color: var(--c-green);
}

/* Checkboxes & radios — native, tinted, accessible */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  background: var(--field-bg);
  box-shadow: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color var(--mo-fast) linear,
              border-color var(--mo-fast) linear,
              transform var(--mo-fast) var(--ease-bounce);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: "";
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--c-ink-on-fill);
  border-bottom: 2.5px solid var(--c-ink-on-fill);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--mo-base) var(--ease-bounce);
  margin-top: -2px;
}
input[type="radio"]::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-ink-on-fill);
  transform: scale(0);
  transition: transform var(--mo-base) var(--ease-bounce);
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--c-primary-deep);
  border-color: var(--c-primary-deep);
}
input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: .75; }
input[type="checkbox"]:disabled:checked {
  background: var(--c-ink-3);
  border-color: var(--c-ink-3);
}

/* Choice card — the volunteer checkboxes. Whole row is the target. */
.check-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-hairline);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-ink);
  margin-bottom: 0;
  box-shadow: var(--e-1);
  transition: border-color var(--mo-fast) linear,
              background-color var(--mo-fast) linear,
              transform var(--mo-fast) var(--ease-dribble),
              box-shadow var(--mo-fast) var(--ease-court);
}
.check-card:hover { border-color: var(--c-border); transform: translateY(-1px); box-shadow: var(--e-2); }
.check-card:active { transform: translateY(0); }
.check-card:has(input:checked),
.check-card.is-checked {
  border-color: var(--c-primary);
  background: var(--c-primary-tint);
  box-shadow: var(--e-2);
}
.check-card:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.check-group { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }

fieldset { border: none; }
legend {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
  padding: 0;
}


/* ==========================================================================
   9. INFO / TERMS / ALERTS
   ========================================================================== */

.info-box {
  background: var(--c-primary-tint);
  border: 1px solid var(--c-primary);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  box-shadow: var(--e-lip);
}
.info-box-item { padding: var(--sp-2) 0; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-ink-2); }
.info-box-item:not(:last-child) { border-bottom: 1px dashed color-mix(in srgb, var(--c-primary) 32%, transparent); }
.info-box strong { color: var(--c-primary-ink); font-weight: 700; }

.terms-box {
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
}
.terms-box p { font-weight: 700; margin-bottom: var(--sp-3); }
.terms-box ul { padding-left: var(--sp-6); }
.terms-box li { margin: var(--sp-1) 0; font-size: var(--fs-sm); color: var(--c-ink-2); }

.alert {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  border-left-width: 4px;
}
.alert strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-base); font-weight: 700; }
.alert-error, .alert--error {
  background: var(--c-red-tint);
  border-color: var(--c-red);
  color: var(--c-red);
}
.alert-error p, .alert--error p { color: var(--c-ink-2); }
.alert--warn { background: var(--c-amber-tint); border-color: var(--c-amber); color: var(--c-amber); }
.alert--info { background: var(--c-sky-tint); border-color: var(--c-sky); color: var(--c-sky); }
.alert--ok   { background: var(--c-green-tint); border-color: var(--c-green); color: var(--c-green); }
.alert ul { margin: var(--sp-2) 0 0 var(--sp-5); }
.alert a { color: inherit; font-weight: 700; }

/* Dashboard fetch-failure block (`<div id="error" class="error">`).
   Scoped away from `.toast.error`, which also carries the `error` class. */
.error:not(.toast) {
  background: var(--c-red-tint);
  border: 1px solid var(--c-red);
  border-left-width: 4px;
  color: var(--c-red);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  margin: var(--sp-5) 0;
  font-weight: 600;
}


/* ==========================================================================
   10. PRICING ROWS + TOTAL SLAB
   ========================================================================== */

.pricing-box {
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--e-2), var(--e-lip);
}

.pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 60px;
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  transition: background-color var(--mo-fast) linear;
}
.pricing-row + .pricing-row { border-top: 1px solid var(--c-hairline); }
.pricing-row:hover { background: var(--c-surface-2); }
.pricing-row:has(input:checked) { background: var(--c-primary-tint); }
.pricing-row:has(input:checked)::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-primary);
}
.pricing-row:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: -3px; }

.pricing-row-required {
  background: var(--c-surface-2);
  border-bottom: 2px solid var(--c-primary);
}
.pricing-row-required:hover { background: var(--c-surface-2); }

.pricing-label { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.pricing-label label {
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--lh-snug);
}
.pricing-label input[type="checkbox"]:disabled + label { cursor: not-allowed; }
.meal-count {
  display: block;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: var(--fs-2xs);
  color: var(--c-ink-3);
  letter-spacing: 0;
  text-transform: none;
}
.pricing-amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c-ink);
  white-space: nowrap;
}
.pricing-divider { height: 1px; background: var(--c-hairline); }

/* The total is a scoreboard slab, not a table row */
.pricing-total, .slab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background:
    radial-gradient(120% 140% at 12% -20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
}
.pricing-total:hover { background:
    radial-gradient(120% 140% at 12% -20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-2) 100%); }
.pricing-total::after {   /* net weave, very quiet */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
}
.pricing-label-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.78);
  position: relative; z-index: 1;
}
.pricing-amount-total {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--c-primary-bright);
  text-shadow: 0 0 22px rgba(255,107,53,.35);
  position: relative; z-index: 1;
}
/* Value change pulse — fired by adding .is-bumped for ~400ms */
.pricing-amount-total.is-bumped { animation: bump var(--mo-slow) var(--ease-bounce); }
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@media (max-width: 39.99rem) {
  .pricing-row { flex-direction: row; align-items: flex-start; }
  .pricing-amount { align-self: center; }
  .pricing-total { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}


/* ==========================================================================
   11. PROGRESS RAIL · SCOREBAR · MOBILE PAY BAR
   ========================================================================== */

/* Sticky top bar: progress + live total. Always visible while filling in. */
.scorebar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--c-navy) 94%, transparent);
  color: #FFFFFF;
  box-shadow: var(--e-3);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
}
.scorebar__label { color: rgba(255,255,255,.7); }
.scorebar__total {
  margin-left: auto;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-primary-bright);
}

/* Segmented progress — reads like a possession bar */
.progress-rail {
  display: flex;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 4rem;
  max-width: 22rem;
  list-style: none;
}
.progress-rail__seg {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.18);
  transition: background-color var(--mo-base) var(--ease-court),
              transform var(--mo-base) var(--ease-bounce);
  transform-origin: left center;
}
.progress-rail__seg.is-done { background: var(--c-primary-bright); }
.progress-rail__seg.is-current {
  background: rgba(255,255,255,.55);
  transform: scaleY(1.7);
}

/* Mobile checkout bar — total + CTA within thumb reach */
.mobile-paybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-hairline);
  box-shadow: 0 -8px 24px -12px rgba(18,21,28,.35);
}
.mobile-paybar .btn { flex: 1 1 auto; min-width: 0; }
.mobile-paybar__total {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-lg);
  white-space: nowrap;
}
@media (min-width: 48rem) { .mobile-paybar { display: none; } }
body.has-paybar { padding-bottom: 5.5rem; }
@media (min-width: 48rem) { body.has-paybar { padding-bottom: 0; } }

/* Draft-restored notice */
.draft-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-sky-tint);
  border: 1px solid var(--c-sky);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.draft-note strong { color: var(--c-sky); }
.draft-note .btn { margin-left: auto; }


/* ==========================================================================
   12. STAT TILES
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.stat-card, .stat-tile {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 10% -30%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(165deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
  color: #FFFFFF;
  box-shadow: var(--e-2), inset 0 1px 0 rgba(255,255,255,.09);
  text-align: left;
  transition: transform var(--mo-base) var(--ease-bounce),
              box-shadow var(--mo-base) var(--ease-court);
}
.stat-card:hover, .stat-tile:hover { transform: translateY(-3px); box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.12); }
.stat-card::after, .stat-tile::after {
  content: "";
  position: absolute; left: var(--sp-5); bottom: var(--sp-3);
  width: 1.75rem; height: 2px;
  background: var(--c-primary-bright);
  border-radius: var(--r-pill);
}
.stat-card h3, .stat-tile__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: rgba(255,255,255,.66);
  margin-bottom: var(--sp-2);
}
.stat-card .number, .stat-tile__num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  -webkit-text-fill-color: currentColor;   /* undoes old gradient-text hack */
  background: none;
  margin-bottom: var(--sp-4);
}
.stat-tile__meta {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,.6);
  font-family: var(--font-num);
}
.stat-tile--accent .stat-tile__num,
.stat-card--accent .number { color: var(--c-primary-bright); }
.stat-tile--quiet, .stat-card--quiet {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-hairline);
  box-shadow: var(--e-1);
}
.stat-tile--quiet .stat-tile__label { color: var(--c-ink-3); }
.stat-tile--quiet .stat-tile__num { color: var(--c-ink); }


/* ==========================================================================
   13. TABS + SEGMENTED CONTROL
   ========================================================================== */

.tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  padding: var(--sp-1);
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  position: relative;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--r-pill); }

.tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-ink-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color var(--mo-fast) linear,
              background-color var(--mo-fast) linear,
              transform var(--mo-fast) var(--ease-dribble);
}
.tab:hover { background: var(--c-surface); color: var(--c-ink); }
.tab:active { transform: translateY(1px); }
.tab.active, .tab[aria-selected="true"] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--e-2), var(--e-lip);
}
.tab.active::after, .tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--sp-5); right: var(--sp-5); bottom: 5px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  transform-origin: left center;
  animation: paint var(--mo-base) var(--ease-swish);
}
@keyframes paint { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tab__count {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  color: var(--c-ink-2);
}
.tab.active .tab__count { background: var(--c-primary-tint); color: var(--c-primary-ink); }

/* Segmented control — used for the NEW team filter */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-pill);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.seg__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mo-fast) linear,
              color var(--mo-fast) linear,
              box-shadow var(--mo-fast) var(--ease-court);
}
.seg__btn:hover { color: var(--c-ink); background: var(--c-surface); }
.seg__btn.is-active, .seg__btn[aria-pressed="true"] {
  background: var(--c-navy);
  color: #FFFFFF;
  box-shadow: var(--e-1);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-hairline);
}


/* ==========================================================================
   14. FILTER PANEL · TOGGLE SWITCHES · FILTER TAGS
   Geometry deliberately unchanged (60×34) so it feels identical.
   ========================================================================== */

.filter-section {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  box-shadow: var(--e-2), var(--e-lip);
}
.filter-section h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.filter-section > label { margin-right: var(--sp-4); }

.toggle-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-3);
}

.switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 68px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  transition: border-color var(--mo-base) linear,
              background-color var(--mo-base) linear,
              box-shadow var(--mo-base) var(--ease-court),
              transform var(--mo-fast) var(--ease-dribble);
}
.switch-container:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.switch-container.active {
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
  box-shadow: var(--e-2);
}
.switch-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.switch-label strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-base);
  color: var(--c-ink);
}
.switch-label small { font-size: var(--fs-2xs); color: var(--c-ink-3); }

.toggle-switch { position: relative; width: 60px; height: 34px; flex: 0 0 auto; }
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  border: none;
}
.toggle-switch .slider, .slider {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  box-shadow: var(--e-inset);
  cursor: pointer;
  transition: background-color var(--mo-base) var(--ease-court);
}
.slider::before {
  content: "";
  position: absolute;
  left: 4px; bottom: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 1px 3px rgba(18,21,28,.3);
  transition: transform var(--mo-base) var(--ease-bounce);
}
input:checked + .slider {
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
}
input:checked + .slider::before { transform: translateX(26px); }
.toggle-switch input:focus-visible + .slider {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.filter-info {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-sm);
}
.filter-info p { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-2); }
.active-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

.filter-tag, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--c-slate-tint);
  color: var(--c-slate);
}
/* Hue identity preserved from the current dashboard — admins read by colour */
.filter-tag-home,     .chip--home     { background: var(--c-green-tint); color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 30%, transparent); }
.filter-tag-away,     .chip--away     { background: var(--c-amber-tint); color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); }
.filter-tag-fw-home,  .chip--fw-home  { background: var(--c-sky-tint);   color: var(--c-sky);   border-color: color-mix(in srgb, var(--c-sky) 30%, transparent); }
.filter-tag-fw-away,  .chip--fw-away  { background: var(--c-plum-tint);  color: var(--c-plum);  border-color: color-mix(in srgb, var(--c-plum) 30%, transparent); }
.filter-tag-team,     .chip--team     { background: var(--c-navy); color: #FFFFFF; }
.chip--none  { background: var(--c-slate-tint); color: var(--c-slate); }
.chip--paid  { background: var(--c-green-tint); color: var(--c-green); }
.chip--unpaid{ background: var(--c-red-tint);   color: var(--c-red); border-color: var(--c-red); }
.chip--info  { background: var(--c-sky-tint);   color: var(--c-sky); }
.chip--warn  { background: var(--c-amber-tint); color: var(--c-amber); }
.chip--solid { background: var(--c-navy); color: #FFFFFF; border-color: transparent; }


/* ==========================================================================
   15. MEAL ORDER LISTS · PLAYER ITEMS · BADGES
   ========================================================================== */

.meal-orders {
  display: none;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--e-2), var(--e-lip);
}
.meal-orders.active { display: block; animation: sheetIn var(--mo-slow) var(--ease-swish); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.meal-item { margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-hairline); }
.meal-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.meal-name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  font-size: var(--fs-xl);
  color: var(--c-ink);
}
/* NOTE: `.meal-count` is shared with the registration form's "(8 meals × $12)".
   Inside `.meal-name` it is the order-count pill. */
.meal-name .meal-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--c-navy);
  color: #FFFFFF;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0;
}

.player-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
  transition: background-color var(--mo-fast) linear, transform var(--mo-fast) var(--ease-dribble);
}
.player-item:hover { background: var(--c-surface-3); transform: translateX(2px); }
.player-name { font-weight: 600; color: var(--c-ink); flex: 1; min-width: 0; }
/* Unpaid: colour + a ring + a text marker, so it is never colour-alone */
.player-name.unpaid {
  padding: 5px 9px;
  border: 2px solid var(--c-red);
  border-radius: var(--r-xs);
  background: var(--c-red-tint);
  color: var(--c-red);
  font-weight: 700;
}
.player-name.unpaid::after {
  content: " · UNPAID";
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-caps);
}

.meal-badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; flex: 0 0 auto; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-home    { background: var(--c-green-tint); color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 28%, transparent); }
.badge-away    { background: var(--c-amber-tint); color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 28%, transparent); }
.badge-fw-home { background: var(--c-sky-tint);   color: var(--c-sky);   border-color: color-mix(in srgb, var(--c-sky) 28%, transparent); }
.badge-fw-away { background: var(--c-plum-tint);  color: var(--c-plum);  border-color: color-mix(in srgb, var(--c-plum) 28%, transparent); }
.badge-none    { background: var(--c-slate-tint); color: var(--c-slate); border-color: color-mix(in srgb, var(--c-slate) 28%, transparent); }


/* ==========================================================================
   16. DOWNLOAD / ACTION BUTTON GROUP
   ========================================================================== */

.download-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--c-hairline);
}
.download-section h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.download-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--e-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  cursor: pointer;
  transition: transform var(--mo-fast) var(--ease-dribble),
              box-shadow var(--mo-base) var(--ease-court),
              border-color var(--mo-fast) linear;
}
.download-btn:hover { transform: translateY(-2px); box-shadow: var(--e-2); border-color: var(--c-ink); }
.download-btn:active { transform: translateY(1px); }
/* Type is carried by a left colour keyline, not a full saturated fill */
.download-btn.txt { border-left: 4px solid var(--c-sky); }
.download-btn.csv { border-left: 4px solid var(--c-green); }
.download-btn.labels { border-left: 4px solid var(--c-primary); }
.download-btn.roster { border-left: 4px solid var(--c-plum); }
.download-btn--primary {
  background: var(--c-primary-deep);
  color: var(--c-ink-on-fill);
  border-color: transparent;
}
.download-info { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-3); }


/* ==========================================================================
   17. TABLES · P&L CARDS · BREAKDOWNS · LEDGER FORM
   ========================================================================== */

.ledger-section { margin-top: var(--sp-5); }

.ledger-table-container, .ledger-form-container, .pl-summary {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  box-shadow: var(--e-2), var(--e-lip);
}
.ledger-table-container h2, .ledger-form-container h2, .pl-summary h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
}

.pl-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pl-header h2 { margin: 0; }

.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.pl-card {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-top: 4px solid var(--c-border);
  box-shadow: var(--e-1), var(--e-lip);
}
.pl-card h3 {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-caps);
  color: var(--c-ink-3);
  margin-bottom: var(--sp-2);
}
.pl-card .amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.pl-card.income       { border-top-color: var(--c-green); background: var(--c-green-tint); }
.pl-card.income .amount { color: var(--c-green); }
.pl-card.expense      { border-top-color: var(--c-red); background: var(--c-red-tint); }
.pl-card.expense .amount { color: var(--c-red); }
.pl-card.net-positive { border-top-color: var(--c-green); background: var(--c-navy); }
.pl-card.net-positive h3 { color: rgba(255,255,255,.66); }
.pl-card.net-positive .amount { color: #7EE2A8; }
.pl-card.net-negative { border-top-color: var(--c-red); background: var(--c-navy); }
.pl-card.net-negative h3 { color: rgba(255,255,255,.66); }
.pl-card.net-negative .amount { color: #FF9B93; }

.pl-breakdown { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 48rem) { .pl-breakdown { grid-template-columns: 1fr 1fr; } }
.breakdown-section {
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.breakdown-section h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.breakdown-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-hairline);
}
.breakdown-item:last-child { border-bottom: none; }
.breakdown-item .category { color: var(--c-ink-2); font-size: var(--fs-sm); min-width: 0; }
.breakdown-item .amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.form-group { display: flex; flex-direction: column; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { margin-bottom: var(--sp-2); }

/* Stat-sheet table */
.sheet__scroll, .ledger-table-container > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger-table, .sheet {
  width: 100%;
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.ledger-table th, .sheet th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--c-navy);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  white-space: nowrap;
}
.ledger-table th:first-child, .sheet th:first-child { border-top-left-radius: var(--r-sm); }
.ledger-table th:last-child,  .sheet th:last-child  { border-top-right-radius: var(--r-sm); }
.ledger-table td, .sheet td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: middle;
  color: var(--c-ink-2);
}
.ledger-table tbody tr:hover, .sheet tbody tr:hover { background: var(--c-surface-2); }
.ledger-table .type-deposit { color: var(--c-green); font-weight: 700; }
.ledger-table .type-expense { color: var(--c-red); font-weight: 700; }
.ledger-table .amount-positive, .pos {
  color: var(--c-green); font-weight: 700;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.ledger-table .amount-negative, .neg {
  color: var(--c-red); font-weight: 700;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.ledger-table .balance, .sheet .num, td.num, th.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-ink);
  text-align: right;
}
.action-buttons { display: flex; gap: var(--sp-2); }
.btn-edit, .btn-delete, .btn-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: var(--border-w) solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--mo-fast) var(--ease-dribble), box-shadow var(--mo-base) var(--ease-court);
}
.btn-edit   { background: var(--c-amber-tint); color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 40%, transparent); }
.btn-delete { background: var(--c-red-tint);   color: var(--c-red);   border-color: color-mix(in srgb, var(--c-red) 40%, transparent); }
.btn-print  { background: var(--c-navy); color: #FFFFFF; min-height: var(--tap); padding: 0 var(--sp-5); font-size: var(--fs-sm); }
.btn-edit:hover, .btn-delete:hover, .btn-print:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.btn-back   { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border); }


/* ==========================================================================
   18. MODAL / DIALOG
   ========================================================================== */

.modal, dialog.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}
.modal.is-open, dialog.modal[open] { display: flex; }
.modal__backdrop, dialog.modal::backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade var(--mo-base) var(--ease-court);
}
.modal__panel {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  max-height: min(85dvh, 44rem);
  overflow: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4), var(--e-lip);
  animation: modalIn var(--mo-slow) var(--ease-bounce);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
}
.modal__head h2, .modal__head h3 { font-size: var(--fs-xl); }
.modal__body { padding: var(--sp-5); color: var(--c-ink-2); }
.modal__body dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; }
.modal__body dt { font-family: var(--font-display); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--c-ink-3); }
.modal__body dd { font-weight: 600; color: var(--c-ink); }
.modal__foot {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--c-hairline);
}
.modal--danger .modal__head { border-bottom-color: var(--c-red); }
body.modal-open { overflow: hidden; }


/* ==========================================================================
   19. TOASTS
   ========================================================================== */

.toast-stack {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  left: auto;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  position: fixed;           /* current markup appends straight to <body>  */
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-left: 5px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--e-4);
  pointer-events: auto;
  animation: slideIn var(--mo-slow) var(--ease-bounce);
}
.toast-stack .toast { position: relative; top: auto; right: auto; }
.toast.success { border-left-color: var(--c-green); }
.toast.error   { border-left-color: var(--c-red); }
.toast-icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  background: var(--c-surface-2);
  color: var(--c-ink-2);
}
.toast.success .toast-icon { background: var(--c-green-tint); color: var(--c-green); }
.toast.error   .toast-icon { background: var(--c-red-tint);   color: var(--c-red); }
.toast-message { flex: 1; font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }
.toast-close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-content: center;
  border-radius: var(--r-xs);
  font-size: 18px;
  line-height: 1;
  color: var(--c-ink-3);
  cursor: pointer;
}
.toast-close:hover { background: var(--c-surface-2); color: var(--c-ink); }
.toast:hover, .toast:focus-within { box-shadow: var(--e-4), var(--e-glow); }
@keyframes slideIn {
  from { transform: translateX(110%); opacity: 0; }
  70%  { transform: translateX(-2%); }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(110%); opacity: 0; } }
.toast.hiding { animation: slideOut var(--mo-base) var(--ease-in-hard) forwards; }


/* ==========================================================================
   20. EMPTY STATES · LOADING · SKELETON
   ========================================================================== */

.empty-state, .empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  color: var(--c-ink-3);
  position: relative;
}
/* Replaces the 4em emoji with a drawn hoop-and-net mark */
.empty-state-icon, .empty__mark {
  width: 72px; height: 72px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  border: 3px solid var(--c-border);
  position: relative;
  font-size: 0;                /* neutralises any legacy emoji glyph      */
  color: transparent;
  opacity: .85;
}
.empty-state-icon::after, .empty__mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 62%;
  width: 44px; height: 30px;
  transform: translateX(-50%);
  background-image:
    repeating-linear-gradient(62deg,  var(--c-border) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-62deg, var(--c-border) 0 1.5px, transparent 1.5px 9px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}
.empty__title { font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-2); }
.empty-state p, .empty__body { font-size: var(--fs-sm); max-width: 38ch; margin-inline: auto; }
.empty__body + .btn { margin-top: var(--sp-5); }

.loading {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  font-size: var(--fs-base);
  color: var(--c-ink-3);
}
.spinner {
  width: 40px; height: 40px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  border: 3px solid var(--c-hairline);
  border-top-color: var(--c-primary);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    var(--c-surface-2) 0%, var(--c-surface-3) 40%, var(--c-surface-2) 80%);
  background-size: 250% 100%;
  animation: shimmer 1.4s linear infinite;
  color: transparent !important;
  min-height: 1em;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }


/* ==========================================================================
   21. SUCCESS / CARD PAYMENT HANDOFF
   ========================================================================== */

.success-box {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
  position: relative;
  overflow: hidden;
}
.success-icon {
  width: 76px; height: 76px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  display: grid; place-content: center;
  background: var(--c-green-tint);
  color: var(--c-green);
  border: 3px solid var(--c-green);
  font-size: 34px;
  line-height: 1;
  animation: successPop var(--mo-lift) var(--ease-bounce);
}
@keyframes successPop {
  0%   { transform: scale(0) translateY(-24px); opacity: 0; }
  60%  { transform: scale(1.08) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}
/* CANCELLED RETURN. `?stripe=cancel` reuses .success-box, so without this the
   "No payment was taken" panel painted a GREEN success circle with the bounce
   animation and only the glyph changed — the strongest visual signal on the
   screen contradicting the words, and readable as "you paid". Amber, static. */
.success-box.is-cancelled .success-icon {
  background: var(--c-amber-tint);
  color: var(--c-amber);
  border-color: var(--c-amber);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .success-icon { animation: none; }
}

.success-box h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.success-box > p { font-size: var(--fs-lg); color: var(--c-ink-2); margin-bottom: var(--sp-6); max-width: 46ch; margin-inline: auto; }
.success-note {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  margin-top: var(--sp-6);
  max-width: 52ch;
  margin-inline: auto;
}

.confirmation-details, .review-box, .success-details {
  text-align: left;
  background: var(--c-surface-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.confirmation-details p, .review-box > div { padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.confirmation-details p + p, .review-box > div + div { border-top: 1px dashed var(--c-hairline); }
.confirmation-details strong, .review-box strong {
  display: inline-block;
  min-width: 10rem;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--c-ink-3);
}
.review-box .hr { height: 1px; background: var(--c-hairline); margin: var(--sp-4) 0; border: none; }

/* The card-fee line and the optional "cover the fee" row.
   The fee line is a SYSTEM line, not a choice: it is muted and italic so it
   cannot be misread as another option the family selected. The cover row IS a
   choice and stays in ordinary body colour. */
.pricing-row-fee .pricing-label,
.pricing-row-fee .pricing-amount {
  color: var(--c-ink-2);
  font-style: italic;
}
.pricing-row-cover { align-items: flex-start; }
.pricing-row-cover .pricing-label { display: flex; gap: var(--sp-2); align-items: flex-start; }
.coverbox { margin-top: 0.2em; flex: none; }

/* Confirmation code — the family's own reference for contacting us.
   It is deliberately NEVER sent to the payment provider and is never needed
   at checkout: a card payment carries a row reference the server wrote into
   the Checkout Session and matches itself. Do not reintroduce any UI that
   asks a payer to copy this anywhere. */
.conf-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-5) auto;
  padding: var(--sp-4) var(--sp-5);
  max-width: 26rem;
  border-radius: var(--r-md);
  background: var(--c-navy);
  color: #FFFFFF;
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.1);
}
.conf-code__value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-2xl);
  letter-spacing: 0.06em;
  color: var(--c-primary-bright);
}
.conf-code__copy { color: #FFFFFF; border-color: rgba(255,255,255,.4); background: transparent; }

/* Single-path checkout. There is no payment-method chooser. */
.checkout {
  margin: var(--sp-6) auto 0;
  max-width: 30rem;
  text-align: left;
}
.checkout__amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--c-ink);
  text-align: center;
  margin-bottom: var(--sp-4);
}
.checkout__steps { list-style: none; counter-reset: step; margin: var(--sp-5) 0; }
.checkout__steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.checkout__steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--c-primary-tint);
  color: var(--c-primary-ink);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 700;
}


/* ==========================================================================
   22. HEADERS & FOOTER (admin shell + site)
   ========================================================================== */

.header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 8% -30%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(150deg, var(--c-navy) 0%, var(--c-navy-3) 100%);
  color: #FFFFFF;
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.09);
}
.header h1 { font-size: var(--fs-3xl); color: #FFFFFF; margin-bottom: var(--sp-2); position: relative; z-index: 1; }
.header p {
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: rgba(255,255,255,.7);
  position: relative; z-index: 1;
}
.header__actions { position: relative; z-index: 1; display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

.footer {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  margin-top: var(--sp-10);
  background: var(--c-navy);
  color: rgba(255,255,255,.78);
}
.footer::before {   /* net weave */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%);
          mask-image: linear-gradient(to bottom, transparent, #000 70%);
}
.footer p { position: relative; font-size: var(--fs-sm); }
.footer a { color: rgba(255,255,255,.8); }
.footer a:hover { color: var(--c-primary-bright); }
/* Discreet admin gear in the footer */
.footer__gear {
  position: relative;
  display: inline-grid;
  place-content: center;
  width: var(--tap); height: var(--tap);
  margin-top: var(--sp-3);
  border-radius: 50%;
  color: rgba(255,255,255,.42);
  transition: color var(--mo-base) linear, transform var(--mo-slow) var(--ease-swish);
}
.footer__gear:hover { color: var(--c-primary-bright); transform: rotate(60deg); }


/* ==========================================================================
   23. ROSTER PRINT PAGE (screen presentation; print geometry is in §26)
   ========================================================================== */

.no-print {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--e-2);
  text-align: center;
}
.no-print h1 { margin-bottom: var(--sp-2); }
.no-print p { color: var(--c-ink-2); margin-bottom: var(--sp-4); }
.no-print .btn-print, .no-print .btn-back { margin: 0 var(--sp-1); }

.player-page {
  background: #FFFFFF;
  color: #12151C;
  width: 8.5in;
  max-width: 100%;
  min-height: 11in;
  margin: 0 auto var(--sp-5);
  padding: 0.75in;
  box-shadow: var(--e-3);
  page-break-after: always;
  break-after: page;
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}
.player-page:last-child { page-break-after: auto; break-after: auto; }

.unpaid-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 120px;
  font-weight: bold;
  color: rgba(220, 53, 69, 0.25);
  pointer-events: none;
  z-index: 999;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.player-page .page-header { border-bottom: 3px solid #333; padding-bottom: 15px; margin-bottom: 25px; }
.player-page .page-header h1 { font-size: 28px; color: #1e40af; margin-bottom: 5px; }
.player-page .page-header .subtitle { font-size: 14px; color: #666; }
.player-name-section { background: #f8f9fa; border: 2px solid #333; padding: 20px; margin-bottom: 25px; text-align: center; }
.player-name-section h2 { font-size: 32px; color: #333; margin-bottom: 5px; }
.player-name-section .team { font-size: 18px; color: #666; font-weight: 600; }
.info-section { margin-bottom: 25px; }
.info-section h3 { font-size: 18px; color: #333; border-bottom: 2px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 15px; font-weight: 700; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; }
.info-item { display: flex; flex-direction: column; }
.info-item.full-width { grid-column: 1 / -1; }
.player-page .info-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; font-weight: 600; font-family: Arial, Helvetica, sans-serif; }
.info-value { font-size: 16px; color: #333; font-weight: 500; padding: 8px 12px; background: #f8f9fa; border-left: 3px solid #1e40af; }
.meal-prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.meal-item-box { border: 1px solid #ddd; padding: 12px; background: #fafafa; }
.meal-item-box .restaurant { font-size: 12px; color: #666; font-weight: 600; margin-bottom: 5px; }
.meal-item-box .meal-choice { font-size: 14px; color: #333; font-weight: 500; }
.meal-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.plan-checkbox { display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8f9fa; border: 1px solid #ddd; }
.checkbox-box { width: 20px; height: 20px; border: 2px solid #333; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; }
.checkbox-box.checked { background: #333; color: #fff; }
.plan-label { font-size: 14px; color: #333; font-weight: 500; }
.player-page .payment-section { background: #fffbf0; border: 2px solid #ffc107; padding: 15px; margin-top: 20px; }
.player-page .payment-section h3 { color: #856404; border-bottom-color: #ffc107; }
.payment-amount { font-size: 24px; font-weight: bold; color: #1e40af; text-align: center; padding: 10px; background: #fff; border: 1px solid #ddd; margin: 10px 0; }
.payment-status { text-align: center; font-size: 14px; color: #666; margin-top: 5px; }
.comments-box { border: 1px solid #ddd; padding: 12px; background: #fafafa; min-height: 80px; font-size: 14px; color: #333; line-height: 1.6; }
.comments-box.empty { color: #999; font-style: italic; }


/* ==========================================================================
   24. AVERY 8160 LABEL SHEET — DIMENSIONALLY FROZEN
   3 cols × 10 rows · 2.625in × 1in · 0.125in horizontal gap · 0 vertical gap
   The label popup is a separate document written with document.write().
   COPY THE BLOCK BETWEEN THE MARKERS VERBATIM into that document's <style>.
   Do not change a single measurement. Verified against the shipping build.
   ========================================================================== */

/* @label-sheet:start */
.label-container {
  display: grid;
  grid-template-columns: repeat(3, 2.625in);
  gap: 0 0.125in;
  page-break-after: always;
}
.label {
  width: 2.625in;
  height: 1in;
  padding: 0.08in 0.15in;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  page-break-inside: avoid;
  border: 1px dashed #ccc;          /* on-screen guides only */
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
  overflow: hidden;
}
.label-name { font-size: 14pt; font-weight: bold; line-height: 1.1; margin-bottom: 1px; color: #000; }
.label-team { font-size: 12pt; font-weight: bold; line-height: 1.1; margin-bottom: 2px; color: #333; }
.label-meal { font-size: 8pt; line-height: 1.1; color: #555; max-height: 0.25in; overflow: hidden; }
/* Optional 4th line. NOT the default. Requires a physical test print before
   use, because it reduces the team line AND the meal line to fit four lines
   inside the same 1in height.

   The meal cap MUST drop from 0.25in to 0.15in here. It was missing from this
   file while labels.js's inline fallback had it, and this linked sheet is the
   only one that applies under `style-src 'self'` — so with the allergy line
   switched on, name(14pt) + team(10pt) + meal(0.25in) + note(0.16in) could
   exceed 1in and bleed onto the next row of Avery 8160 stock: precisely the
   failure the frozen geometry exists to prevent. */
.label--note .label-team { font-size: 10pt; margin-bottom: 1px; }
.label--note .label-meal { max-height: 0.15in; overflow: hidden; }
.label-note {
  font-size: 8pt;
  font-weight: bold;
  line-height: 1.05;
  text-transform: uppercase;
  color: #000;
  max-height: 0.16in;
  overflow: hidden;
}
@media print {
  .label-sheet-page { page-break-after: always; }
  .label { border: none; }
}
/* @label-sheet:end */

/* The label popup document MUST also declare, verbatim:
       @page { size: letter; margin: 0.5in 0.19in; }
       * { margin:0; padding:0; box-sizing:border-box; }
       body { font-family: Arial, Helvetica, sans-serif; margin:0; padding:0; }
   It cannot inherit them from here — the popup is a separate document, and a
   linked stylesheet may not have loaded before print() fires. Inline it. */
.label-doc { margin: 0; padding: 0; }


/* ==========================================================================
   25. REDUCED MOTION · HIGH CONTRAST · FORCED COLORS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep a short opacity fade so state changes are still perceivable */
  .toast, .modal__panel, .meal-orders.active, .success-icon {
    animation: fade 120ms linear !important;
  }
  .btn:hover, .stat-card:hover, .stat-tile:hover,
  .switch-container:hover, .download-btn:hover, .player-item:hover {
    transform: none !important;
  }
  .hero img, .hero__media { transform: none !important; }
  .btn.is-loading::after { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --c-ink-3: var(--c-ink-2);
    --c-hairline: var(--c-border);
    --border-w: 2px;
    --field-border: var(--c-ink-2);
  }
  .badge, .chip, .filter-tag { border-width: 1.5px; }
  .field-hint { color: var(--c-ink-2); }
}

@media (forced-colors: active) {
  .btn, .tab, .download-btn, .seg__btn, .check-card,
  .stat-card, .stat-tile, .card, .panel, .toast, .modal__panel {
    border: 1px solid ButtonBorder;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  .tab.active, .seg__btn.is-active, .btn-primary {
    background: Highlight;
    color: HighlightText;
  }
  .slider { border: 1px solid ButtonBorder; }
  input:checked + .slider { background: Highlight; }
  .paint-lines, .net-mesh::before, .jersey-ghost, .footer::before,
  .pricing-total::after { display: none !important; }
  :focus-visible { outline: 3px solid Highlight; }
}


/* ==========================================================================
   26. PRINT
   ========================================================================== */

@media print {
  @page { size: letter; margin: 0.5in; }

  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
  }
  body.court, .court { background-image: none !important; }

  /* Never print chrome */
  .hero, .footer, .no-print, .tabs, .filter-section, .form-actions,
  .btn, .download-section, .toast, .toast-stack, .modal, .scorebar,
  .mobile-paybar, .draft-note, .paint-lines, .jersey-ghost, .seg,
  .action-buttons, .ledger-form-container, .header__actions {
    display: none !important;
  }

  .card, .panel, .meal-orders, .ledger-table-container, .pl-summary,
  .filter-section, .stat-card, .stat-tile, .player-item {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    margin-top: 0;
  }
  .stat-card h3, .stat-tile__label, .header p { color: #333 !important; }
  .stat-card .number, .stat-tile__num { color: #000 !important; }
  .header, .pricing-total, .conf-code, .ledger-table th, .sheet th {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #333 !important;
  }
  .pricing-amount-total { color: #000 !important; text-shadow: none !important; }

  a[href]::after { content: ""; }   /* no URL noise on a meal order sheet   */
  .badge, .chip, .filter-tag { border: 1px solid #666 !important; color: #000 !important; background: #FFF !important; }
  .player-name.unpaid { border: 2px solid #000 !important; background: #FFF !important; color: #000 !important; }

  .meal-item, .player-page, .pl-card, .breakdown-section { break-inside: avoid; page-break-inside: avoid; }
  .meal-orders { display: block !important; }   /* print the visible tab     */
  .meal-orders:not(.active) { display: none !important; }

  /* Roster: exactly one player per page, compacted to fit (tuned values —
     do not change without a physical test print) */
  .player-page {
    box-shadow: none;
    margin: 0;
    width: 100%;
    min-height: auto;
    padding: 0.4in 0.5in;
    page-break-after: always;
    page-break-inside: avoid;
    border: none !important;
  }
  .player-page:last-child { page-break-after: auto; }
  .player-page .page-header { padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid #333; }
  .player-page .page-header h1 { font-size: 18px; margin-bottom: 2px; }
  .player-page .page-header .subtitle { font-size: 10px; }
  .player-name-section { padding: 10px; margin-bottom: 12px; }
  .player-name-section h2 { font-size: 22px; margin-bottom: 2px; }
  .player-name-section .team { font-size: 13px; }
  .info-section { margin-bottom: 10px; }
  .info-section h3 { font-size: 13px; padding-bottom: 3px; margin-bottom: 6px; border-bottom: 1px solid #e0e0e0; }
  .info-grid { gap: 6px 15px; }
  .player-page .info-label { font-size: 8px; margin-bottom: 1px; letter-spacing: .2px; }
  .info-value { font-size: 11px; padding: 4px 6px; border-left: 2px solid #1e40af; }
  .meal-prefs { gap: 6px; margin-top: 6px; }
  .meal-item-box { padding: 5px 6px; }
  .meal-item-box .restaurant { font-size: 8px; margin-bottom: 2px; }
  .meal-item-box .meal-choice { font-size: 10px; }
  .meal-plans { gap: 5px; margin-top: 6px; }
  .plan-checkbox { padding: 5px; gap: 5px; }
  .checkbox-box { width: 14px; height: 14px; font-size: 10px; border: 1px solid #333; }
  .plan-label { font-size: 10px; }
  .player-page .payment-section { padding: 8px; margin-top: 10px; }
  .player-page .payment-section h3 { font-size: 13px; margin-bottom: 4px; }
  .payment-amount { font-size: 16px; padding: 5px; margin: 5px 0; }
  .payment-status { font-size: 10px; margin-top: 3px; }
  .comments-box { padding: 5px 6px; min-height: 30px; font-size: 10px; line-height: 1.3; }
  .unpaid-watermark { font-size: 100px; color: rgba(220, 53, 69, 0.2); }

}


/* ==========================================================================
   26b. P&L PRINT REPORT WINDOW
   --------------------------------------------------------------------------
   ledger.js printPL() opens a NEW WINDOW, writes this markup into it and links
   this stylesheet. These rules used to live inside `@media print`, so the
   window the admin was left looking at — after dismissing OR cancelling the
   print dialog — was unformatted running text with no cards and no borders,
   which reads as a broken feature rather than a print-only sheet. It also made
   a print-preview sanity check impossible without going through the OS dialog.

   They are scoped by class, those classes appear nowhere else in the build, and
   the classes only ever exist in that pop-up — so screen and paper can share
   one definition. Genuinely print-only overrides stay in §26.
   ========================================================================== */

/* P&L report */
.print-window { font-family: Arial, Helvetica, sans-serif; }
.print-header { text-align: center; margin-bottom: 30px; border-bottom: 3px solid #333; padding-bottom: 20px; }
.print-header h1 { margin: 0 0 10px 0; color: #333; }
.print-header .date { color: #666; font-size: 14px; }
.print-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.print-total-card { border: 2px solid #333; padding: 20px; text-align: center; border-radius: 8px; }
.print-total-card h3 { margin: 0 0 10px 0; font-size: 16px; color: #666; }
.print-total-card .amount { font-size: 28px; font-weight: bold; margin: 0; }
.print-total-card.income .amount, .print-total-card.net-positive .amount { color: #1a7a43; }
.print-total-card.expense .amount, .print-total-card.net-negative .amount { color: #b3211c; }
.print-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.print-breakdown-section { border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
.print-breakdown-section h3 { margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #333; }
.print-breakdown-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
.print-breakdown-item:last-child { border-bottom: none; }
.print-breakdown-item .category { font-weight: 500; }
.print-breakdown-item .amount { font-weight: 600; }



/* ==========================================================================
   SEASON PICKER + QUICK EDIT
   --------------------------------------------------------------------------
   Two additions that share one idea: the thing you want to change should be
   reachable from the number it changes.
   ========================================================================== */

.season-picker {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, .1));
}

.season-picker__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.season-picker__select {
  min-width: 13rem;
  max-width: 100%;
}

/* A past season is stated, not implied. Every count, export and label sheet on
   the page is historical while this is showing, and printing last year's meal
   labels by accident is the failure this exists to prevent. */
.season-picker__flag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

/* ---- the pencil on a stat tile ------------------------------------------ */

.stat-card { position: relative; }

.stat-card__edit {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .5rem;
  /* Quiet until wanted. The tile's job is the number; the pencil is a way in,
     not a thing to look at. It comes fully forward on hover and on focus. */
  opacity: .55;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.stat-card:hover .stat-card__edit,
.stat-card__edit:hover,
.stat-card__edit:focus-visible {
  opacity: 1;
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.stat-card__edit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Touch has no hover, so the affordance must be visible from the start. */
@media (hover: none) {
  .stat-card__edit { opacity: .9; }
}

/* ---- the quick-edit panels ---------------------------------------------- */

.qe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
}

.qe-grid .field--wide { grid-column: 1 / -1; }

.qe-rule {
  border: 0;
  border-top: 1px solid var(--line, rgba(15, 23, 42, .12));
  margin: 1.25rem 0 1rem;
}

.qe-subhead {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
}

.qe-rows { display: flex; flex-direction: column; gap: .5rem; }

.qe-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.qe-row .input { flex: 1 1 14rem; min-width: 0; }

.qe-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

/* ---- pricing ------------------------------------------------------------ */

.qe-prices { display: flex; flex-direction: column; gap: 1rem; }

.qe-price {
  padding: .85rem 1rem;
  border: 1px solid var(--line, rgba(15, 23, 42, .12));
  border-radius: .65rem;
  background: rgba(15, 23, 42, .02);
}

.qe-price__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.qe-price__head h4 { margin: 0; font-size: .95rem; font-weight: 700; }

.qe-price__eq {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

/* The computed total, large on purpose: games x price is where a typo hides,
   and the total is the number a parent actually pays. */
.qe-total {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand, #b23c0c);
}

.qe-diff {
  margin: .5rem 0 .75rem;
  padding-left: 1.1rem;
  line-height: 1.9;
}

.qe-diff s { color: var(--muted, #64748b); }
.qe-diff strong { color: var(--brand, #b23c0c); }

@media (max-width: 640px) {
  .qe-grid { grid-template-columns: 1fr; }
  .season-picker__select { min-width: 0; width: 100%; }
}

/* ---- the pencil beside a team chip --------------------------------------
   A team's game count IS its meal price, so the edit lives next to the team,
   not buried in Settings. The pair keeps the chip and its pencil together so
   the filter row still wraps as one unit on a phone. */

.seg__pair {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
}

.seg__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  padding: 0;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #64748b);
  background: transparent;
  border: 1px solid var(--line, rgba(15, 23, 42, .14));
  border-radius: .45rem;
  opacity: .6;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}

.seg__pair:hover .seg__edit,
.seg__edit:hover,
.seg__edit:focus-visible {
  opacity: 1;
  color: var(--brand, #b23c0c);
  background: rgba(178, 60, 12, .08);
}

.seg__edit:focus-visible {
  outline: 2px solid var(--brand, #b23c0c);
  outline-offset: 1px;
}

@media (hover: none) { .seg__edit { opacity: .9; } }