/* ══════════════════════════════════════════════════════════════════════
   BroncoHub v2 · Design system
   ──────────────────────────────────────────────────────────────────────
   Single canonical stylesheet for the muted-Bronco Arena look. Built
   first as a preview at /family-redesign/arena-bronco-muted-preview.html,
   then promoted here to drive the parallel indexv2.html rebuild.

   Organisation:
     1. RESET            — universal box-sizing, font-family, defaults
     2. TOKENS           — palette + radii + sidebar width (CSS vars)
     3. SHELL            — body, paper grain, layout grid (.shell .sb .main)
     4. SIDEBAR          — .sb-* (header, brand mark, nav, footer, stamp)
     5. HERO             — section.hero with photo + warm wash
     6. STATS            — top-banded stat cards (.stat-card, .stat-icon)
     7. SECTIONS         — section-title, count badge, link, bronco rail
     8. PLAYER CARDS     — dark trading-card panels (.card .card-*)
     9. RAIL FEEDS       — coach mentions / club updates / invoices feeds
    10. FIXTURES         — tournament cards (.fix .fix-*)
    11. BUTTONS          — .btn .btn.primary .btn.ghost .btn.sm
    12. UTILS            — preview badge, animations, responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ══ 0. CLUB IDENTITY FONT ═══════════════════════════════════════════
   Self-host Decaydence so the right-edge jersey strip + hero stadium
   tag render with the real club typeface. Files live in /public/fonts/. */
@font-face {
  font-family: 'Decaydence';
  src: url('/fonts/Decaydence.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Decaydence Straight';
  src: url('/fonts/Decaydence-Straight.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ══ 1. RESET ════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

button { font: inherit; cursor: pointer; background: transparent; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }

.font-antonio { font-family: 'Antonio', sans-serif; letter-spacing: -0.02em; }
.tabular { font-variant-numeric: tabular-nums; }


/* ══ 2. TOKENS ═══════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces (warm cream paper) ─────────────────────────────── */
  --bg:        #EFE9DF;   /* page background — warm off-white */
  --bg-2:      #E5DFD3;   /* slightly deeper recess */
  --surface:   #F5F0E7;   /* card surface */
  --surface-2: #FBF8F2;   /* highest elevation (modals etc.) */
  --side-bg:   #E8E2D6;   /* sidebar — same paper, half a stop warmer */

  /* ── Lines & dividers (warm charcoal, very low alpha) ─────────── */
  --border:    rgba(27,27,25,0.10);
  --border-2:  rgba(27,27,25,0.20);

  /* ── Text (charcoal mono ramp on cream) ───────────────────────── */
  --text:      #1B1B19;   /* near-black — primary text & icons */
  --text-2:    #46443F;   /* body copy / soft text */
  --text-3:    #807C73;   /* muted / labels */
  --text-4:    #B0AB9F;   /* faint / placeholders */

  /* ── Accents ─────────────────────────────────────────────────────
     Primary action stays charcoal (gives the palette its quiet
     authority). The warm accent is the Elmina Bronco club orange,
     toned down from #E05A00 → #C45120 so it sits inside the muted
     palette without screaming. Used sparingly for live pulses, the
     @mention dot, the hero name underline, the heritage stamp, and
     section rails — carries the club identity without dominating. */
  --accent:        #1B1B19;            /* primary action = charcoal */
  --accent-2:      #46443F;            /* hover */
  --accent-warm:   #C45120;            /* Bronco orange, muted */
  --accent-warm-2: #E07642;            /* lifted Bronco orange (hover) */
  --accent-glow:   rgba(196,81,32,0.26);
  --bronco-deep:   #7A2E10;            /* deep oxblood for headers/stamps */

  /* ── Status colours (muted versions, never neon) ──────────────── */
  --green:     #4A7A4E;
  --red:       #A24438;
  --amber:     #B07F26;
  --blue:      #4A6B82;

  /* ── Status tints (soft washes for badge backgrounds) ─────────── */
  --green-tint: rgba(74,122,78,0.12);
  --red-tint:   rgba(162,68,56,0.12);
  --amber-tint: rgba(176,127,38,0.14);
  --blue-tint:  rgba(74,107,130,0.12);

  --r:   8px;
  --r-2: 12px;
  --r-3: 20px;

  --side-w: 260px;
}


/* ══ 3. SHELL ════════════════════════════════════════════════════════ */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Subtle paper grain so the cream surface doesn't feel flat. SVG noise
   filter inlined as data-URI — no extra request, ~0.5KB.
   The warm radial at the top is the Bronco accent showing through. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(196,81,32,0.10) 0%, transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.11  0 0 0 0 0.10  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.shell {
  display: block;            /* sidebar is fixed; main flows under it via margin */
  min-height: 100vh;
}


/* ══ 4. SIDEBAR ══════════════════════════════════════════════════════ */
.sb {
  /* Truly fixed — the chrome should NEVER scroll with the page. position:sticky
     was unreliable inside the grid (some browsers detached it when the
     transform on .club-strip created a new containing block). Pinning with
     position:fixed is bulletproof. The inner scroll is always-visible so
     users on short viewports immediately see they can scroll the nav. */
  position: fixed; top: 0; left: 0;
  width: var(--side-w);
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--side-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;             /* whole sidebar scrolls as one column */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-warm) transparent;   /* warm bronze thumb */
  box-shadow: inset -1px 0 0 rgba(27,27,25,0.04);
  z-index: 50;
}
.sb::-webkit-scrollbar { width: 8px; }
.sb::-webkit-scrollbar-track { background: transparent; }
.sb::-webkit-scrollbar-thumb {
  background: rgba(196,81,32,0.45);    /* visible Bronco-orange thumb */
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.sb::-webkit-scrollbar-thumb:hover { background: var(--accent-warm); background-clip: padding-box; }

.sb-head {
  position: relative;
  padding: 18px 16px 14px;            /* trimmed vertical padding so 4-tier
                                         view picker (Parent/Coach/Admin/SA)
                                         + identity card + heritage stamp
                                         all fit above the nav comfortably */
  border-bottom: 1px solid var(--border);
  isolation: isolate;
  flex-shrink: 0;                     /* never let the head get squashed
                                         when the nav grows tall */
}
.sb-head::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,81,32,0.12), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.sb-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.sb-brand-mark {
  width: 44px; height: 44px;
  border-radius: 9px;
  background: var(--accent);
  display: grid; place-items: center;
  padding: 4px;
  color: var(--bg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 14px rgba(27,27,25,0.18);
  flex-shrink: 0;
  overflow: hidden;
}
.sb-brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(1.05) saturate(1.1);
}
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; }
.sb-brand-text .top {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.1;
  text-transform: uppercase;
}
.sb-brand-text .sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
}

/* Family / user identity card */
.sb-fam {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sb-fam-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  color: var(--bg);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sb-fam-id { flex: 1; min-width: 0; }
.sb-fam-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-fam-role {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(196,81,32,0.14);
  color: var(--accent-warm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── RBAC view picker ─────────────────────────────────────────────────
   Sits between the identity card and the heritage stamp. Only renders
   for users with 2+ capability tiers. Pills act like a segmented
   control — single-select, persisted in localStorage, switches the
   sidebar contents AND the landing route. */
.sb-view-picker {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sb-view-picker__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sb-view-picker__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(27,27,25,0.06);
  border-radius: 8px;
  padding: 3px;
}
.sb-view-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}
.sb-view-pill:hover {
  color: var(--text);
  background: rgba(196,81,32,0.08);
}
.sb-view-pill.active {
  background: var(--side-bg);
  color: var(--accent-warm);
  box-shadow: 0 1px 2px rgba(27,27,25,0.10), inset 0 0 0 1px rgba(196,81,32,0.22);
}

/* Heritage stamp — circular wax-seal with rotated dashed ring + center
   monogram. CSS-only, no external SVG. */
.sb-stamp {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px dashed rgba(196,81,32,0.30);
  border-bottom: 1px dashed rgba(196,81,32,0.30);
}
.sb-stamp-mark {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-warm);
  display: grid; place-items: center;
  position: relative;
  background: rgba(196,81,32,0.06);
}
.sb-stamp-mark::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(196,81,32,0.40);
}
.sb-stamp-mark span {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent-warm);
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sb-stamp-text {
  font-family: 'Antonio', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--text-2);
  text-transform: uppercase;
  line-height: 1.3;
}
.sb-stamp-text .sub {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 2px;
}

/* Nav body — compact mode tightened from 18px section gap → 10px, and
   item padding from 10/12 → 7/10 so 12-15 items fit cleanly without
   scrolling on a 14-inch laptop (768px viewport height). */
.sb-body {
  flex: 1;
  padding: 14px 10px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.sb-section { display: flex; flex-direction: column; gap: 1px; }
.sb-section + .sb-section { margin-top: 10px; }

/* Section header doubles as a click target — clicking toggles the
   collapse on the section below it. The chevron flips via CSS when
   .collapsed is set on the parent section. */
.sb-section-h {
  font-family: 'Antonio', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 6px 10px 5px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: background-color 0.12s, color 0.12s;
}
.sb-section-h:hover { background: rgba(27,27,25,0.04); color: var(--text-2); }
.sb-section-h .chev {
  width: 12px; height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.55;
  transition: transform 0.18s;
}
.sb-section.collapsed .chev { transform: rotate(-45deg); margin-top: 1px; }
.sb-section .sb-items {
  display: flex; flex-direction: column;
  gap: 1px;
  overflow: hidden;
  max-height: 800px;
  transition: max-height 0.22s ease-out;
}
.sb-section.collapsed .sb-items { max-height: 0; }

.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-2);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: background-color 0.12s, color 0.12s;
  position: relative;
  text-align: left;
  line-height: 1.3;
}
.sb-item:hover {
  background: rgba(27,27,25,0.05);
  color: var(--text);
}
/* Active = solid charcoal pill. Cream text inside. The only place the
   warm Bronco accent appears on nav is a tiny rail on the left edge. */
.sb-item.active {
  color: var(--bg);
  background: var(--accent);
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 2px;
  background: var(--accent-warm);
  margin-left: -12px;
}
.sb-item .ico {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: currentColor;
}
.sb-item .label { flex: 1; min-width: 0; }
.sb-item .badge {
  flex-shrink: 0;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent-warm);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.sb-item.active .badge { background: var(--bg); color: var(--accent); }
.sb-item .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
}

.sb-foot {
  padding: 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
  gap: 8px;
}
.sb-foot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.12s, color 0.12s;
  width: 100%;
  text-align: left;
}
.sb-foot-row:hover { background: rgba(27,27,25,0.05); color: var(--text); }
.sb-foot-row .ico { width: 16px; height: 16px; }


/* ══ 5. HERO ═════════════════════════════════════════════════════════ */
.main {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-left: var(--side-w);   /* compensate for fixed sidebar */
}

.hero {
  position: relative;
  padding: 56px 36px 96px;
  isolation: isolate;
  overflow: hidden;
  min-height: 380px;
  display: flex; align-items: flex-end;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  /* Per-route hero image — set on body[data-route] from shell.js. Falls
     back to a generic Bronco huddle so the page never looks empty. */
  background: var(--page-hero, url('/img/v2/bronco-huddle.jpg')) center 35% / cover no-repeat;
  filter: brightness(1.05) saturate(0.85) contrast(0.95);
  z-index: -2;
  animation: heroDrift 28s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(239,233,223,0.96) 0%,
      rgba(239,233,223,0.85) 35%,
      rgba(239,233,223,0.45) 70%,
      rgba(239,233,223,0.10) 100%),
    linear-gradient(to top,
      rgba(239,233,223,0.90) 0%,
      rgba(239,233,223,0.30) 35%,
      transparent 70%),
    linear-gradient(225deg, rgba(196,81,32,0.18), transparent 50%);
  z-index: -1;
}
@keyframes heroDrift {
  from { transform: scale(1.05) translate(-1%, 0); }
  to   { transform: scale(1.12) translate(1.5%, -1.5%); }
}

/* Faint galloping-horse SVG watermark on the hero's right side.
   Whispers brand identity without competing with the headline. */
.hero-horse {
  position: absolute;
  right: -40px; bottom: -30px;
  width: 360px; height: 360px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.10;
  color: var(--bronco-deep);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path d='M30 130 Q50 110 70 115 L80 100 Q90 85 100 90 L110 80 Q125 70 135 78 Q150 80 158 95 Q165 100 162 115 L155 120 Q150 130 152 138 L160 150 L155 158 L148 152 L142 158 L137 152 L130 156 L132 162 L125 165 L120 158 L115 155 Q110 152 105 155 L102 165 L95 168 L92 158 L88 155 Q82 155 78 150 L70 145 Q60 145 55 150 L50 158 L45 155 L48 145 L42 140 L35 142 L32 135 Z M155 95 Q160 90 158 85 L155 88 Z M105 78 Q102 70 105 65 L108 72 Z' fill='currentColor'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path d='M30 130 Q50 110 70 115 L80 100 Q90 85 100 90 L110 80 Q125 70 135 78 Q150 80 158 95 Q165 100 162 115 L155 120 Q150 130 152 138 L160 150 L155 158 L148 152 L142 158 L137 152 L130 156 L132 162 L125 165 L120 158 L115 155 Q110 152 105 155 L102 165 L95 168 L92 158 L88 155 Q82 155 78 150 L70 145 Q60 145 55 150 L50 158 L45 155 L48 145 L42 140 L35 142 L32 135 Z M155 95 Q160 90 158 85 L155 88 Z M105 78 Q102 70 105 65 L108 72 Z' fill='currentColor'/></svg>") no-repeat center / contain;
}

.hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: flex-end;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 18px;
  animation: fadeUp 0.6s 0.1s both;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--accent-warm); }
.hero-eyebrow .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-warm);
  margin-left: 6px;
  box-shadow: 0 0 0 4px rgba(196,81,32,0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.hero-title {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 18px;
  animation: fadeUp 0.6s 0.15s both;
}
.hero-title em {
  font-style: normal;
  color: var(--accent-warm);
  background-image: linear-gradient(to top, var(--accent-warm) 0, var(--accent-warm) 5%, transparent 5%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}
.hero-sub {
  font-size: 17px;
  color: var(--text-2);
  font-weight: 500;
  max-width: 480px;
  animation: fadeUp 0.6s 0.2s both;
}
.hero-sub strong { color: var(--text); font-weight: 700; }
.hero-cta {
  display: flex; gap: 10px;
  animation: fadeUp 0.6s 0.25s both;
  flex-wrap: wrap;
}


/* ══ 6. STATS ════════════════════════════════════════════════════════ */
.stats-band {
  position: relative;
  margin: -48px 36px 0;
  z-index: 5;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1200px;
}
.stat-card {
  position: relative;
  padding: 22px 22px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  animation: fadeUp 0.5s both;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px rgba(27,27,25,0.04);
}
.stat-card:nth-child(1) { animation-delay: 0.3s; }
.stat-card:nth-child(2) { animation-delay: 0.35s; }
.stat-card:nth-child(3) { animation-delay: 0.4s; }
.stat-card:nth-child(4) { animation-delay: 0.45s; }
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 28px rgba(27,27,25,0.08);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.85;
}
.stat-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: grid; place-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
.stat-icon.orange { background: rgba(196,81,32,0.16); color: var(--accent-warm); }
.stat-icon.green  { background: var(--green-tint);    color: var(--green); }
.stat-icon.red    { background: var(--red-tint);      color: var(--red); }
.stat-icon.blue   { background: var(--blue-tint);     color: var(--blue); }
.stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.stat-value {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  color: var(--text);
}
.stat-value .unit { font-size: 18px; color: var(--text-3); font-weight: 500; margin-left: 2px; }
.stat-value.red { color: var(--red); }
.stat-value.green { color: var(--green); }
.stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  color: var(--text-3);
}
.stat-trend .arrow.up { color: var(--green); }
.stat-trend .arrow.down { color: var(--red); }


/* ══ 7. SECTIONS ═════════════════════════════════════════════════════ */
.content {
  max-width: 1200px;
  padding: 40px 36px 80px;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
}
@media (max-width: 1100px) { .row { grid-template-columns: 1fr; } }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.section-title {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 12px;
  line-height: 1;
  color: var(--text);
}
/* 4px bronco-orange tick on the left edge — gives the page a rhythm
   of small accent marks as you scroll past each section. */
.section-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 22px;
  background: var(--accent-warm);
  margin-right: 4px;
  border-radius: 1px;
}
.section-title .count {
  display: inline-flex; align-items: center;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  text-transform: uppercase;
}
.section-link {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text);
  padding-bottom: 1px;
  transition: opacity 0.15s;
}
.section-link:hover { opacity: 0.6; }


/* ══ 8. PLAYER CARDS (trading-card panels) ═══════════════════════════
   The ONE deliberate dark surface in muted mode. Player photos need
   contrast and the dark cards against the cream page is a feature,
   not a bug — think framed art prints on a cream wall. */
.roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .roster { grid-template-columns: 1fr; } }

.card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  background: #1E1B17;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s;
  animation: fadeUp 0.5s both;
  box-shadow: 0 12px 28px rgba(27,27,25,0.10);
}
.card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 22px 44px rgba(27,27,25,0.22), 0 0 0 2px var(--accent-warm);
}
.card-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 20%;
  z-index: 0;
}
.card-photo.placeholder {
  background:
    radial-gradient(circle at 30% 20%, rgba(196,81,32,0.40), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(74,107,130,0.20), transparent 55%),
    linear-gradient(135deg, #2A241D, #15110D);
  display: grid; place-items: center;
}
.card-photo.placeholder::after {
  content: attr(data-initials);
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 160px;
  letter-spacing: -0.05em;
  color: rgba(239,233,223,0.08);
  line-height: 1;
}
.card-jersey {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 2;
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 0.9;
  color: rgba(239,233,223,0.92);
  letter-spacing: -0.04em;
  text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.card-jersey .hash { font-size: 18px; color: rgba(239,233,223,0.35); vertical-align: top; margin-right: -3px; }
.card-band {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: rgba(20,17,13,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(239,233,223,0.20);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(239,233,223,0.95);
}
.card-band .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-warm-2); box-shadow: 0 0 6px var(--accent-warm); }
.card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 70px 22px 22px;
  background: linear-gradient(to top, rgba(20,17,13,0.96) 0%, rgba(20,17,13,0.70) 50%, transparent 100%);
}
.card-name {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #F5F0E7;
  margin-bottom: 4px;
}
.card-position {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-warm-2);
  margin-bottom: 14px;
}
.card-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.card-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: rgba(20,17,13,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(239,233,223,0.14);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #F5F0E7;
  font-variant-numeric: tabular-nums;
}
.card-stat .dot { width: 6px; height: 6px; border-radius: 50%; }
.card-stat .dot.green { background: #6BBE7A; }
.card-stat .dot.red   { background: #D87164; }
.card-stat .dot.amber { background: #DBA64A; }
.card-stat .lbl { color: rgba(239,233,223,0.55); font-weight: 500; }


/* ══ 9. RAIL FEEDS ═══════════════════════════════════════════════════ */
.rail { display: flex; flex-direction: column; gap: 20px; }

.feed {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 14px rgba(27,27,25,0.04);
}
.feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.feed-title {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Antonio', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.feed-badge {
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.feed-action {
  font-size: 12px; font-weight: 700;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feed-action:hover { background: rgba(27,27,25,0.06); }
.feed-list { display: flex; flex-direction: column; }
.feed-item {
  display: flex; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: rgba(27,27,25,0.025); }
.feed-item-av {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  color: var(--bg);
  letter-spacing: 0.02em;
}
.feed-item-av.coach1 { background: linear-gradient(135deg, #4F4884, #2A2548); }
.feed-item-av.coach2 { background: linear-gradient(135deg, #4A7A4E, #2A4D34); }
.feed-item-av.club   { background: linear-gradient(135deg, var(--accent-warm), var(--bronco-deep)); }
.feed-item-av.neutral{ background: var(--bg-2); color: var(--text); border: 1px solid var(--border-2); }
.feed-item-av.paid   { background: var(--green-tint); color: var(--green); border: 1px solid rgba(74,122,78,0.35); }
.feed-item-body { flex: 1; min-width: 0; }
.feed-item-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.feed-item-name { font-size: 14px; font-weight: 700; color: var(--text); }
.feed-item-name .verb { color: var(--text-3); font-weight: 500; }
.feed-item-time { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.feed-item-amount { font-family: 'Antonio',sans-serif; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.feed-item-amount.red { color: var(--red); }
.feed-item-amount.green { color: var(--green); }
.feed-item-text { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.feed-item-text .tag { color: var(--accent-warm); font-weight: 700; }
.feed-item.unread .feed-item-name::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-warm);
  margin-right: 8px;
  vertical-align: middle;
}


/* ══ 10. FIXTURES ════════════════════════════════════════════════════ */
.fixtures { margin-top: 36px; }
.fix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}
.fix {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 14px rgba(27,27,25,0.04);
}
.fix:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 26px rgba(27,27,25,0.08);
}
.fix::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 180px; height: 200%;
  background: linear-gradient(135deg, transparent, var(--accent-glow), transparent);
  opacity: 0.5;
  transform: skewX(-15deg);
  pointer-events: none;
}
.fix-date {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 64px;
  padding: 12px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  text-align: center;
  position: relative; z-index: 1;
}
.fix-date .day { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 30px; line-height: 0.95; letter-spacing: -0.025em; color: var(--text); }
.fix-date .month { font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent-warm); margin-top: 4px; }
.fix-date .dow { font-size: 12px; color: var(--text-3); margin-top: 4px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fix-body { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.fix-tag-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.fix-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.fix-status.registered { background: var(--green-tint); color: var(--green); border: 1px solid rgba(74,122,78,0.30); }
.fix-status.open       { background: var(--blue-tint);  color: var(--blue);  border: 1px solid rgba(74,107,130,0.30); }
.fix-status.closing    { background: var(--amber-tint); color: var(--amber); border: 1px solid rgba(176,127,38,0.30); }
.fix-status .pulse { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 2.4s ease-in-out infinite; }
.fix-countdown { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.fix-name {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 6px;
}
.fix-meta { font-size: 13px; color: var(--text-3); margin-bottom: 12px; font-weight: 500; }
.fix-meta .sep { color: var(--text-4); margin: 0 4px; }
.fix-kids { display: flex; align-items: center; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.fix-kid {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.fix-kid-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--bg);
  letter-spacing: 0.02em;
}
.fix-kid-av.alt { background: var(--accent-warm); }
.fix-kid .grp { font-size: 11px; color: var(--accent-warm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fix-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.fix-fee { font-size: 13px; font-weight: 500; color: var(--text-3); }
.fix-fee .amt { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: -0.015em; margin-right: 2px; }
.fix-enrol {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  transition: transform 0.15s, background-color 0.15s;
}
.fix-enrol:hover { transform: translateY(-1px); background: var(--accent-2); border-color: var(--accent-2); }
.fix-enrol[disabled] { opacity: 0.5; cursor: not-allowed; }
.fix-enrolled {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--green-tint);
  border: 1px solid rgba(74,122,78,0.35);
  color: var(--green);
}


/* ══ 11. BUTTONS ═════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background-color 0.15s;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: var(--text);
  box-shadow: 0 6px 18px rgba(27,27,25,0.08);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(27,27,25,0.18);
}
.btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 8px 22px rgba(27,27,25,0.24);
}
.btn.ghost {
  background: rgba(255,255,255,0.50);
  border-color: var(--border-2);
  backdrop-filter: blur(8px);
}
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 6px; }
/* Destructive action — used on the confirm dialog's OK button when
   opts.danger is set, and available to any module that needs a red CTA. */
.btn.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(162,68,56,0.28);
}
.btn.danger:hover {
  background: #8c3a30;
  border-color: #8c3a30;
  box-shadow: 0 8px 22px rgba(162,68,56,0.34);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }


/* ══ 12. UTILS ═══════════════════════════════════════════════════════ */
.preview-tag {
  position: fixed; top: 14px; right: 14px; z-index: 9999;
  padding: 7px 13px;
  background: var(--accent);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--bg);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(27,27,25,0.18);
}

/* Empty state / loading shimmer */
.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--surface) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r);
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══ 13. OVERLAYS (drawer + modal + toast) ═══════════════════════════ */

/* Shared backdrop for both drawer and modal. Soft cream-tinted dim so
   the page underneath still reads as paper, not glass. */
.ov-back {
  position: fixed; inset: 0;
  background: rgba(27,27,25,0.42);
  backdrop-filter: blur(2px);
  z-index: 100;
  opacity: 0;
  animation: ovBackIn 0.18s ease-out forwards;
}
@keyframes ovBackIn { to { opacity: 1; } }

/* Right-side drawer — slides in from the right. Used for player detail,
   invoice detail. Max width keeps it readable on huge screens. */
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(560px, 92vw);
  background: var(--bg);
  z-index: 101;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 48px rgba(27,27,25,0.18);
  transform: translateX(100%);
  animation: drawerIn 0.28s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes drawerIn { to { transform: translateX(0); } }

.drawer-head {
  flex-shrink: 0;
  /* On iOS PWA the drawer goes top:0 with viewport-fit=cover, so part of
     the head sat under the notch / Dynamic Island. safe-area-inset-top
     pushes it down on devices that need it; falls back to the base 18px
     on everything else. Sticky so the X always stays in reach even when
     the body scrolls. */
  padding: max(18px, calc(env(safe-area-inset-top, 0px) + 14px)) 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  position: sticky; top: 0; z-index: 2;
}
.drawer-head .title {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.1;
  flex: 1; min-width: 0;
}
.drawer-head .sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-warm);
  text-transform: uppercase;
  margin-top: 4px;
}
.drawer-close {
  flex-shrink: 0;
  /* 44x44 minimum tap target (Apple HIG); 22px glyph for visibility. */
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.drawer-close:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.drawer-close:active { transform: scale(0.92); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.drawer-body::-webkit-scrollbar { width: 6px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* Hero image inside drawer (player photo / receipt preview) */
.drawer-hero {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: -22px -24px 22px;
  background: #1E1B17 center / cover no-repeat;
  overflow: hidden;
}
.drawer-hero .ph {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
}
.drawer-hero .placeholder {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: 'Antonio',sans-serif;
  font-weight: 700;
  font-size: 120px;
  color: rgba(239,233,223,0.10);
  background: radial-gradient(circle at 30% 20%, rgba(196,81,32,0.30), transparent 55%), linear-gradient(135deg, #2A241D, #15110D);
}
.drawer-hero .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,13,0.85) 0%, rgba(20,17,13,0.30) 50%, transparent 100%);
}
.drawer-hero .badge-row {
  position: absolute;
  bottom: 14px; left: 18px; right: 18px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  color: rgba(239,233,223,0.95);
}
.drawer-hero .name {
  font-family: 'Antonio',sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.drawer-hero .jersey {
  font-family: 'Antonio',sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.drawer-hero .jersey .hash { font-size: 16px; opacity: 0.5; margin-right: -2px; vertical-align: top; }

/* Definition rows used in drawer bodies */
.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-3); font-weight: 500; }
.kv .v { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.dr-section {
  margin-top: 22px;
}
.dr-section-h {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.dr-section-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Ratings grid — small stat tile per dimension */
.rat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.rat-tile {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: left;
}
.rat-tile .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; }
.rat-tile .val { font-family: 'Antonio',sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: var(--text); margin-top: 4px; }
.rat-tile .val.dim { color: var(--text-4); }

/* Note (training-note) rows */
.note-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.note-row:last-child { border-bottom: none; }
.note-row .meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.note-row .meta .ctx { color: var(--accent-warm); }
.note-row .body { font-size: 14px; color: var(--text); line-height: 1.5; }
.note-row .body .mention { color: var(--accent-warm); font-weight: 700; }

/* Sub-pill — small status chip used inside drawers */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.pill.green { background: var(--green-tint); color: var(--green); }
.pill.red   { background: var(--red-tint);   color: var(--red); }
.pill.amber { background: var(--amber-tint); color: var(--amber); }
.pill.blue  { background: var(--blue-tint);  color: var(--blue); }
.pill.warm  { background: rgba(196,81,32,0.14); color: var(--accent-warm); }
.pill.gray  { background: var(--bg-2); color: var(--text-3); }

/* ── Tournament state panel ────────────────────────────────────────────
   Used inside the admin tournament drawer. Single primary state line at
   the top + two segmented rows (Application + State) + optional enrolment
   sub-row. Designed to look like one calm panel, not three stacked toggles. */
.bv2-state-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin-bottom: 14px;
}
.bv2-state-banner {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  display: flex; align-items: center; gap: 8px;
}
.bv2-state-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* On narrow screens the 96px label + 4 segmented buttons overflow.
   Stack the label above the group and let pills shrink to fit. */
@media (max-width: 600px) {
  .bv2-state-row,
  .bv2-state-aux {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .bv2-seg { min-width: 70px; padding: 6px 8px; font-size: 10px; }
  .bv2-seg-group { flex-wrap: wrap; }
}
.bv2-state-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bv2-state-aux {
  display: grid;
  grid-template-columns: 96px auto auto;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.bv2-seg-group {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: rgba(27,27,25,0.04);
  border-radius: 8px;
  padding: 3px;
}
.bv2-seg {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.bv2-seg:hover {
  color: var(--text);
  background: rgba(196,81,32,0.08);
}
.bv2-seg.active {
  background: var(--bg);
  color: var(--accent-warm);
  box-shadow: 0 1px 2px rgba(27,27,25,0.10), inset 0 0 0 1px rgba(196,81,32,0.22);
}

/* ── Pending confirmation callout (family overview) ─────────────────
   Highlighted card shown when coach has selected the family's kid(s)
   and parents need to confirm/decline. Visually loud (warm orange-tint)
   so it's hard to miss but stays inside the muted bronco palette. */
.bv2-pending-callout {
  background: linear-gradient(135deg, rgba(196,81,32,0.10), rgba(196,81,32,0.04) 70%);
  border: 1px solid rgba(196,81,32,0.32);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.bv2-pending-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(196,81,32,0.24);
}
.bv2-pending-icon {
  font-size: 28px; line-height: 1;
  flex-shrink: 0;
}
.bv2-pending-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.bv2-pending-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
}
.bv2-pending-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.bv2-pending-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bv2-pending-row-info { flex: 1; min-width: 0; }
.bv2-pending-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.bv2-pending-row-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.bv2-pending-row-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .bv2-pending-row {
    flex-direction: column;
    align-items: stretch;
  }
  .bv2-pending-row-actions {
    width: 100%;
  }
  .bv2-pending-row-actions .btn {
    flex: 1 1 50%;
  }
}

/* ── Filter tabs (admin tournament list) ───────────────────────────── */
.bv2-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.bv2-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.bv2-tab:hover {
  color: var(--text);
  background: rgba(196,81,32,0.08);
}
.bv2-tab.active {
  background: var(--bg);
  color: var(--accent-warm);
  box-shadow: 0 1px 2px rgba(27,27,25,0.10), inset 0 0 0 1px rgba(196,81,32,0.22);
}
.bv2-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  background: var(--bg-2);
  color: var(--text-3);
  border-radius: 999px;
}
.bv2-tab.active .bv2-tab-count {
  background: rgba(196,81,32,0.18);
  color: var(--accent-warm);
}

/* Centered modal (for forms — edit player, upload receipt, plan change) */
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(520px, 92vw);
  max-height: min(88vh, 720px);
  background: var(--bg);
  border-radius: var(--r-2);
  z-index: 101;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(27,27,25,0.30);
  opacity: 0;
  animation: modalIn 0.18s ease-out forwards;
}
@keyframes modalIn { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.modal-head {
  /* Modals don't go top:0 like drawers, so safe-area-inset isn't critical
     here — but on tiny iPhones in landscape the modal can fill the screen.
     Sticky head so the X stays reachable while the body scrolls. */
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r-2) var(--r-2) 0 0;
  position: sticky; top: 0; z-index: 2;
}
.modal-head .title {
  font-family: 'Antonio',sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--text);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.modal-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: 0 0 var(--r-2) var(--r-2);
}

/* Form fields — used inside modals and drawers */
.field {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field > label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field > input,
.field > select,
.field > textarea {
  width: 100%;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field > input:focus,
.field > select:focus,
.field > textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27,27,25,0.10);
}
.field > textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.field > .hint { font-size: 12px; color: var(--text-3); }
.field.error > input,
.field.error > select,
.field.error > textarea { border-color: var(--red); }
.field.error > .hint { color: var(--red); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Plan radio cards — used in plan change modal. Each card is a big
   radio button. */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.plan-card {
  padding: 14px 14px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
  position: relative;
  text-align: left;
}
.plan-card:hover { border-color: var(--text-3); transform: translateY(-1px); }
.plan-card.selected {
  border-color: var(--accent);
  background: rgba(27,27,25,0.05);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.plan-card .pname {
  font-family: 'Antonio',sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.plan-card .pdesc { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.plan-card .pcurrent {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--accent-warm);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(196,81,32,0.12);
}

/* Photo upload drop zone */
.dropzone {
  border: 2px dashed var(--border-2);
  border-radius: var(--r);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  background: var(--surface-2);
}
.dropzone:hover, .dropzone.hover {
  border-color: var(--accent);
  background: rgba(27,27,25,0.04);
}
.dropzone-icon { font-size: 28px; opacity: 0.5; margin-bottom: 8px; }
.dropzone-label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.dropzone-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.dropzone-preview {
  margin-top: 14px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  max-height: 320px;
  display: grid; place-items: center;
}
.dropzone-preview img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }

/* Toast (non-blocking notification at bottom of screen) */
.toast {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 9999;
  box-shadow: 0 12px 32px rgba(27,27,25,0.25);
  opacity: 0;
  animation: toastIn 0.18s ease-out forwards, toastOut 0.3s 2.6s ease-in forwards;
  pointer-events: none;
  display: flex; align-items: center; gap: 8px;
}
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }
@keyframes toastIn  { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(20px); } }

/* ══ Training Assessments (Bronco Run) ═══════════════════════════════ */
.ta-session-picker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 4px;
}
.ta-pick-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-3);
}
.ta-select {
  padding: 8px 12px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.ta-legend {
  font-size: 12px; color: var(--text-3); line-height: 1.7;
  margin: 6px 2px 14px;
}
.ta-legend strong { color: var(--accent-warm); }

.ta-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2); }
.ta-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 13px; }
.ta-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface); color: var(--text-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  padding: 9px 8px; border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.ta-table th.ta-l, .ta-table td.ta-l { text-align: left; }
.ta-table th.ta-c, .ta-table td.ta-c { text-align: center; }
.ta-table th.ta-accent { color: var(--accent-warm); }
.ta-table th .ta-sub { display: block; font-size: 10px; font-weight: 600; color: var(--text-3); }
.ta-table tbody tr { border-bottom: 1px solid var(--border); }
.ta-table tbody tr.ta-top { background: rgba(196,81,32,0.045); }
.ta-table td { padding: 8px 8px; vertical-align: middle; }
.ta-table td.muted, .ta-table .muted { color: var(--text-3); }
.ta-table td.ta-run { font-size: 11px; }
.ta-rank { font-size: 15px; min-width: 34px; }
.ta-tag { font-weight: 800; font-size: 13px; color: var(--accent-warm); }
.ta-full { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.ta-c.ta-pass { background: var(--green-tint); }
.ta-c.ta-fail { background: var(--red-tint); }
.ta-val { font-size: 13px; font-weight: 800; }
.ta-c.ta-pass .ta-val, .ta-c.ta-pass .ta-bh { color: var(--green); }
.ta-c.ta-fail .ta-val, .ta-c.ta-fail .ta-bh { color: var(--red); }
.ta-diff { display: block; font-size: 9px; font-weight: 700; opacity: 0.85; margin-top: 1px; }
.ta-c.ta-pass .ta-diff { color: var(--green); }
.ta-c.ta-fail .ta-diff { color: var(--red); }
.ta-bh { font-weight: 800; font-size: 12px; }

.ta-notes { margin-top: 20px; }
.ta-textarea {
  width: 100%; min-height: 84px; resize: vertical; margin-top: 6px;
  padding: 12px 14px; font-family: inherit; font-size: 13px; line-height: 1.6;
  border: 1px solid var(--border-2); border-radius: var(--r-2);
  background: var(--bg); color: var(--text);
}

/* Entry mode */
.ta-entry-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ta-entry-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ta-entry-table th { text-align: center; }
.ta-in {
  padding: 6px 8px; font-family: inherit; font-size: 12px;
  border: 1px solid var(--border-2); border-radius: 6px;
  background: var(--bg); color: var(--text); text-align: center;
}

/* Past / upcoming split divider in the tournaments admin list. A centred
   label on a hairline rule — separates expired events from active ones
   without a heavy section break. */
.bv2-past-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 2px 18px;
  color: var(--text-3);
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bv2-past-divider::before,
.bv2-past-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--border-2), transparent);
}

/* Styled confirm dialog (BV2.confirm). Lives in its own layer at a higher
   z-index than drawers (101) so it stacks ABOVE an open drawer/modal
   instead of replacing it. Centred card, cream-dim backdrop to match the
   paper aesthetic. */
.bv2-confirm-layer { position: fixed; inset: 0; z-index: 300; }
.bv2-confirm-back {
  position: fixed; inset: 0;
  background: rgba(27,27,25,0.50);
  backdrop-filter: blur(2px);
  opacity: 0;
  animation: ovBackIn 0.16s ease-out forwards;
}
.bv2-confirm-box {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(420px, 92vw);
  background: var(--bg);
  border-radius: var(--r-2);
  padding: 24px 24px 20px;
  box-shadow: 0 32px 80px rgba(27,27,25,0.34);
  opacity: 0;
  animation: modalIn 0.16s ease-out forwards;
}
.bv2-confirm-title {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 10px;
}
.bv2-confirm-msg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 22px;
}
.bv2-confirm-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap;
}

/* Action row — common layout for "primary button + secondary text" */
.action-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

/* Drawer responsive — collapse to full-width on narrow screens */
@media (max-width: 600px) {
  .drawer { width: 100vw; }
}


/* ══ SPONSOR STRIP ═══════════════════════════════════════════════════
   Greyscale logo lineup. Used on the family Overview to give it club
   "official site" feel without distracting from content. */
.sponsor-strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: 22px 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  margin-top: 28px;
}
.sponsor-strip .label {
  font-family: 'Antonio', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}
.sponsor-strip img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.6);
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}
.sponsor-strip img:hover { filter: grayscale(0); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   CLUB IDENTITY — right-edge jersey strip + hero stadium tag
   ──────────────────────────────────────────────────────────────────
   The strip is rendered once in indexv2.html (fixed position, every page
   gets it). The hero tag is rendered inside every `.hero` element so it
   sits on top of the page's photo.
   --merch-black + --merch-cream are local tokens — only used by these
   two elements, so they live here next to where they're consumed.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --merch-black: #0A0A0A;
  --merch-cream: #F5F0E7;
}

/* ━━━ RIGHT EDGE JERSEY STRIP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.club-strip {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 42px;
  min-height: 380px;
  z-index: 50;
  background-color: var(--merch-black);
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0 10px,
      rgba(196, 81, 32, 0.14) 10px 11px,
      transparent 11px 20px);
  clip-path: polygon(0 0, 100% 16px, 100% calc(100% - 16px), 0 100%);
  border-left: 3px solid var(--accent-warm);
  box-shadow: -4px 0 16px rgba(0,0,0,0.24);
  padding: 44px 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.club-strip__text {
  writing-mode: vertical-rl;
  font-family: 'Decaydence', 'Antonio', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--merch-cream);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(196, 81, 32, 0.45);
  white-space: nowrap;
  line-height: 1;
}
.club-strip__text .sep {
  display: inline-block;
  color: var(--accent-warm);
  margin: 0 3px;
  font-size: 22px;
  vertical-align: middle;
}
.club-strip::before,
.club-strip::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--accent-warm);
}
.club-strip::before { top: 24px; clip-path: polygon(0 0, 100% 0, 50% 100%); }    /* ▼ */
.club-strip::after  { bottom: 24px; clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* ▲ */

/* ━━━ HERO STADIUM TAG ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.club-tag {
  position: absolute;
  bottom: 72px;                       /* lifted from 28 → 72 so the stat cards
                                         (which overlap into the hero by ~48px
                                         via .stats-band's negative margin)
                                         no longer cover it */
  left: 36px;
  z-index: 3;
  display: inline-flex;
  align-items: stretch;
  font-family: 'Decaydence', 'Antonio', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,0.32));
  line-height: 1;
  pointer-events: none;
}
.club-tag__ember {
  background: var(--accent-warm);
  color: var(--merch-black);
  padding: 7px 18px 7px 12px;         /* shrunk from 10/24/10/16 */
  font-size: 14px;                    /* shrunk from 18 */
  letter-spacing: 0.04em;
  display: flex; align-items: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.club-tag__body {
  background: var(--merch-black);
  color: var(--merch-cream);
  padding: 7px 18px 7px 22px;         /* shrunk from 10/22/10/28 */
  margin-left: -13px;
  font-size: 14px;                    /* shrunk from 18 */
  letter-spacing: 0.04em;
  display: flex; align-items: center;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.club-tag__body strong { color: var(--accent-warm); font-weight: 900; }

/* ━━━ MOBILE NAV BURGER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Hidden on desktop — the full sidebar nav is always visible there.
   Shown only at ≤900px where the nav collapses into a drawer. */
.sb-burger {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.sb-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
/* Burger morphs into an ✕ when the drawer is open */
.sb.sb--open .sb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb.sb--open .sb-burger span:nth-child(2) { opacity: 0; }
.sb.sb--open .sb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .shell { display: block; }
  .sb {
    position: relative;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* Push the head content + burger down past the iOS notch / Dynamic
     Island. viewport-fit=cover puts the sidebar's top edge at y=0, so
     without this the burger sits half-under the status bar and the tap
     area is shrunk to whatever's left below the notch. */
  .sb-head {
    position: relative;
    padding-right: 70px;  /* room for the burger */
    padding-top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px));
  }
  .sb-burger {
    display: flex;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px));
  }
  /* Sidebar foot (Legacy / Sign out) hides on mobile — sign out lives in
     My Account → Quick links instead, freeing the bottom of the
     drawer for what users actually came here for. */
  .sb-foot { display: none; }
  /* Nav links collapse by default; the burger reveals them as a drawer. */
  .sb-body { display: none; }
  .sb.sb--open .sb-body {
    display: block;
    border-top: 1px solid var(--border);
    max-height: 70vh;
    overflow-y: auto;
    animation: drawerDown 0.24s ease both;
  }
  .main { margin-left: 0; }      /* no fixed sidebar on mobile, no offset needed */
  .hero { padding: 40px 20px 70px; min-height: 320px; }
  .stats-band { margin: -42px 20px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 28px 20px 60px; }

  /* Club identity shrinks on tablets */
  .club-strip { width: 34px; min-height: 320px; }
  .club-strip__text { font-size: 15px; }
  .club-strip__text .sep { font-size: 18px; }
  .club-tag { bottom: 16px; left: 16px; }
  .club-tag__ember, .club-tag__body { font-size: 15px; padding: 8px 18px; }
}
@keyframes drawerDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) {
  /* Player detail hero: the fixed 300px trading card + text side-by-side
     squeezes the text to nothing on a phone. Stack them: card on top
     (smaller, centred), name/actions below. */
  .hero-inner--player {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .hero-inner--player > .card {
    max-width: 240px !important;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  /* The auto-injected stadium tag sat at the bottom of the hero where it
     overlapped the stat band / page content. On phones, pin it to the TOP
     of the hero and shrink it so it never blocks the cards below. */
  .club-tag {
    top: 12px;
    bottom: auto;
    left: 12px;
  }
  .club-tag__ember, .club-tag__body { font-size: 11px; padding: 5px 11px; }

  /* Payment review cards: receipt + details side-by-side overflow the
     viewport (long OCR ref strings), pushing the Approve button off-screen
     with no way to scroll to it. Stack them vertically on phones. */
  .apay-card__row { flex-direction: column !important; }
  .apay-card__row > a,
  .apay-card__row > div:first-child { align-self: flex-start; }
}
@media (max-width: 480px) {
  /* Strip would dominate too much on phones; hero tag stays */
  .club-strip { display: none; }
}

/* ══ GamePlan tactical board ═════════════════════════════════════════ */
.gp-pitch-wrap { display: flex; justify-content: center; }
.gp-pitch {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 100 / 88;
  background: linear-gradient(180deg, #0a3a18 0%, #0d4a1f 50%, #0a3a18 100%);
  border: 2px solid rgba(255,255,255,0.12); border-radius: 14px; overflow: hidden;
  touch-action: none; user-select: none;
}
.gp-pitch-line { position: absolute; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.16); }
.gp-pitch-mid { top: 50%; } .gp-pitch-22a { top: 22%; } .gp-pitch-22b { top: 78%; }
.gp-chip {
  position: absolute; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; user-select: none; z-index: 5;
  box-shadow: 0 3px 9px rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.75);
}
.gp-chip.dragging { cursor: grabbing; opacity: 0.92; box-shadow: 0 8px 20px rgba(0,0,0,0.55); }
.gp-chip-num  { font-size: 9px; font-weight: 800; line-height: 1; opacity: 0.85; }
.gp-chip-name { font-size: 9px; font-weight: 700; line-height: 1.05; max-width: 46px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-chip-badge { position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; border-radius: 50%; font-size: 9px; font-weight: 800; display: grid; place-items: center; border: 1.5px solid #fff; }
.gp-chip-badge.cap { background: var(--accent-warm); color: #fff; }
.gp-chip-badge.vc  { background: #2563eb; color: #fff; }
.gp-slot-empty {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px dashed rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 800;
  display: grid; place-items: center; cursor: pointer; z-index: 4;
}
.gp-slot-empty:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.7); }
.gp-slot-num { position: absolute; bottom: -1px; font-size: 8px; opacity: 0.7; }
.gp-chip-menu {
  position: absolute; transform: translate(-50%, -135%); z-index: 40;
  display: flex; gap: 3px; padding: 4px; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27,27,25,0.32);
}
.gp-sel-hint { margin-top: 10px; font-size: 13px; color: var(--text-2); text-align: center; }
.gp-squad { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-sq-chip {
  padding: 7px 13px; border-radius: 20px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.gp-sq-chip:hover { border-color: var(--text); }
.gp-sq-chip.sel { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.gp-sq-chip.placed { opacity: 0.5; }

/* GamePlan drawing overlay + toolbar */
.gp-draw-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; touch-action: none; }
.gp-pitch.drawing { cursor: crosshair; }
.gp-pitch.drawing .gp-chip, .gp-pitch.drawing .gp-slot-empty { pointer-events: none; }
.gp-draw-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.gp-draw-grp { display: flex; gap: 3px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.gp-tool { padding: 5px 9px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text); }
.gp-tool.on { background: var(--accent); color: var(--bg); }
.gp-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-2); cursor: pointer; padding: 0; }
.gp-color.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.gp-size { padding: 4px 9px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text); }
.gp-size.on { background: var(--accent); color: var(--bg); }