/* ══════════════════════════════════════════════════════════════════════
   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
   ══════════════════════════════════════════════════════════════════════ */


/* ══ 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: var(--font-display); 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);
  --accent-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: var(--font-body);
  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;
}

/* Coach Overview — the desktop landing page selected in the navigation
   comparison. Mobile retains a clean single-column version of the same data. */
.coach-overview { max-width: 1320px; margin: 0 auto; padding: clamp(28px,4vw,58px); }
.coach-overview__head { margin-bottom: 28px; }
.coach-overview__eyebrow { color: var(--accent-warm); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.coach-overview__head h1 { margin: 8px 0 5px; color: var(--text); font: 500 clamp(30px,4vw,52px)/1.06 var(--font-display); letter-spacing: -.035em; }
.coach-overview__head p { margin: 0; color: var(--text-3); font-size: var(--fs-base); }
.coach-overview__stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.coach-overview__stats button { min-height: 126px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); }
.coach-overview__stats button:hover { transform: translateY(-2px); border-color: var(--accent-warm); }
.coach-overview__stats span,.coach-overview__stats small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.coach-overview__stats strong { display: block; margin: 8px 0 6px; color: var(--text); font-size: clamp(24px,3vw,36px); line-height: 1; }
.coach-overview__grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.7fr); gap: var(--space-4); }
.coach-overview__panel { overflow: hidden; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.coach-overview__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; margin-bottom: 8px; }
.coach-overview__panel-head h2 { margin: 0; font-size: var(--fs-md); }
.coach-overview__panel-head button { border: 0; background: none; color: var(--accent-warm); font: 600 var(--fs-xs)/1 var(--font-body); cursor: pointer; }
.coach-overview__schedule-row,.coach-overview__action { width: 100%; display: grid; align-items: center; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.coach-overview__schedule-row { grid-template-columns: 46px 1fr auto; gap: 13px; min-height: 72px; padding: 10px 0; }
.coach-overview__date { color: var(--text-3); font-size: 10px; text-align: center; }
.coach-overview__date strong { display: block; color: var(--text); font-size: 22px; line-height: 1; }
.coach-overview__schedule-row > span:nth-child(2) strong,.coach-overview__action strong { display: block; font-size: var(--fs-sm); }
.coach-overview__schedule-row small,.coach-overview__action small { display: block; margin-top: 4px; color: var(--text-3); font-size: var(--fs-xs); }
.coach-overview__schedule-row em { padding: 5px 8px; border-radius: 999px; background: var(--amber-tint); color: var(--accent-warm); font-size: 10px; font-style: normal; font-weight: var(--fw-bold); }
.coach-overview__action { grid-template-columns: 36px 1fr auto; gap: 11px; min-height: 68px; padding: 10px 0; }
.coach-overview__action > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-warm); font-weight: var(--fw-bold); }
.coach-overview__action b { color: var(--text-3); }
.coach-overview__empty { padding: 28px 0; color: var(--text-3); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 900px) {
  .coach-overview { padding: var(--space-4); }
  .coach-overview__stats,.coach-overview__grid { grid-template-columns: 1fr; }
  .coach-overview__stats button { min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .coach-overview__stats button { transition: none; } }

/* Fixtures schedule refresh — compact controls and a quiet agenda replace
   the old BroncoHub filter-button matrix and repeated tournament cards. */
.fixture-toolbar { display: flex; align-items: end; gap: var(--space-3); margin-bottom: var(--space-5); padding: 14px 0 18px; border-bottom: 1px solid var(--border); }
.fixtures-intro { min-height: 230px; display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); padding: clamp(34px,5vw,70px); color: #f7f2e9; background: var(--ink,#111a20); }
.fixtures-intro__eyebrow { margin-bottom: 10px; color: var(--accent-warm); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; }
.fixtures-intro h1 { margin: 0; color: #f7f2e9; font: 500 clamp(36px,5vw,64px)/.98 var(--font-display); letter-spacing: -.045em; }
.fixtures-intro p { max-width: 560px; margin: 13px 0 0; color: rgba(247,242,233,.66); font-size: var(--fs-base); }
.fixtures-intro__aside { flex: none; display: grid; justify-items: end; gap: 14px; padding-bottom: 2px; }
.fixtures-intro__aside > span { color: rgba(247,242,233,.64); font-size: var(--fs-xs); }
.fixtures-intro__aside > span strong { color: #f7f2e9; font-size: var(--fs-lg); }
.fixtures-intro__aside button { min-height: 42px; padding: 0 14px; border: 1px solid rgba(247,242,233,.34); border-radius: var(--r); background: transparent; color: #f7f2e9; font: 600 var(--fs-xs)/1 var(--font-body); cursor: pointer; }
.fixtures-intro__aside button:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.fixture-toolbar label { min-width: 190px; display: grid; gap: 7px; }
.fixture-toolbar label > span { color: var(--text-3); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.fixture-toolbar select { width: 100%; min-height: 44px; appearance: auto; padding: 0 36px 0 13px; border: 0; border-bottom: 2px solid var(--border-2); border-radius: 0; background: transparent; color: var(--text); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.fixture-toolbar select:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 2px; border-bottom-color: var(--accent-warm); }
.training-agenda { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.training-agenda__item { min-height: 178px; position: relative; overflow: hidden; display: grid; grid-template-columns: 82px minmax(0,1fr); grid-template-rows: 1fr auto; align-items: center; gap: 0 var(--space-4); padding: 20px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); box-shadow: 0 7px 22px color-mix(in srgb,var(--text) 5%,transparent); }
.training-agenda__item::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-warm); }
.training-agenda__date { grid-row: 1/3; align-self: stretch; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; align-items: end; column-gap: 8px; padding-right: var(--space-4); border-right: 1px solid var(--border); color: var(--text-3); text-transform: uppercase; }
.training-agenda__date strong { grid-row: 1/3; align-self: center; color: var(--text); font: 500 42px/1 var(--font-display); letter-spacing: -.04em; }
.training-agenda__date span { align-self: end; color: var(--accent-warm); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .12em; }
.training-agenda__date small { align-self: start; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .08em; }
.training-agenda__body { align-self: center; }
.training-agenda__location { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; color: var(--accent-warm); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; }
.training-agenda__location > span { width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.training-agenda__kicker { margin-bottom: 7px; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.training-agenda__kicker span { margin: 0 4px; color: var(--border-2); }
.training-agenda__body h3 { margin: 0; color: var(--text); font: 500 clamp(20px,2.2vw,29px)/1.12 var(--font-display); letter-spacing: -.025em; }
.training-agenda__calendar { grid-column: 2; justify-self: start; min-height: 38px; display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r); background: transparent; color: var(--text-2); font: 600 var(--fs-xs)/1 var(--font-body); cursor: pointer; }
.training-agenda__calendar:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.training-agenda__calendar > span { font-size: 18px; font-weight: 400; }
@media (max-width: 700px) {
  .fixtures-intro { min-height: 0; align-items: start; flex-direction: column; padding: 30px var(--space-4); }
  .fixtures-intro__aside { justify-items: start; }
  .fixture-toolbar { align-items: stretch; }
  .fixture-toolbar label { flex: 1; min-width: 0; }
  .training-agenda { grid-template-columns: 1fr; }
  .training-agenda__item { grid-template-columns: 66px 1fr; column-gap: var(--space-3); padding: 16px; }
  .training-agenda__date { padding-right: var(--space-3); }
  .training-agenda__date strong { font-size: 34px; }
  .training-agenda__calendar { grid-column: 2; justify-self: start; }
}
@media (min-width: 701px) and (max-width: 1100px) { .training-agenda { grid-template-columns: 1fr; } }


/* ══ 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: var(--font-display);   /* display stack carries the ja fallback */
  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;
}
/* Photo variant — when the role-onboard form uploaded a face we swap
   the initials background for the image. Keeps the same circular
   geometry so the sidebar layout stays stable. */
.sb-fam-av--photo {
  background-color: var(--bg-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1.5px solid var(--accent);
}
.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: var(--font-display);
  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: var(--font-display);
  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: var(--font-body);
  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: var(--font-body);      /* broadcast label, not display type */
  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 — set on <body> from shell.js (club photo or a neutral
     default). Fallback is a neutral gradient (never a club-specific photo). */
  background: var(--page-hero, linear-gradient(135deg, #1B4332 0%, #D4A017 100%)) 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%); }
}

/* Club-specific hero artwork must be supplied by tenant-aware markup. */
/* .hero-horse removed 30 Aug — the element was display:none and every module
   still emitted the markup. Rule kept out of the sheet along with it. */

.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: var(--font-display);
  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;
}
/* When the push-nudge banner is present it sits between hero + stats-band.
   The cards' -48px lift would otherwise climb over the banner — drop the
   lift to 0 so the banner sits in clear air above the cards. The class
   is toggled by kh-push-nudge.js when it mounts/unmounts. */
body.bh-pn-active .stats-band { margin-top: 16px; }
.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: var(--font-display);
  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: var(--font-display);
  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: var(--font-body);
  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: var(--font-display);
  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: var(--font-display);
  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: var(--font-display);
  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: var(--font-display);
  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(--accent-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: var(--font-display); 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: var(--font-display); font-weight: 700; font-size: 30px; line-height: 0.95; letter-spacing: -0.025em; color: var(--text); }
.fix-date .month { font-family: var(--font-body); 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: var(--font-display);
  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: var(--font-display); 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, filter 0.05s;
  /* Suppress iOS Safari's default grey tap-flash since we provide our
     own :active visual below. */
  -webkit-tap-highlight-color: transparent;
  /* Stop the browser from interpreting a quick tap as a double-tap
     zoom — that's a 300ms delay before the click registers, which is
     what makes users think the button didn't respond. */
  touch-action: manipulation;
  user-select: none;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: var(--text);
  box-shadow: 0 6px 18px rgba(27,27,25,0.08);
}
/* Instant press feedback — fires the moment the finger / mouse goes
   down, BEFORE the click handler runs. This is the missing piece that
   made users double-tap thinking nothing happened. The 50ms transition
   for filter+transform makes the press feel snappy. */
.btn:active {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.92);
  box-shadow: 0 1px 2px rgba(27,27,25,0.18) inset;
  transition: transform 0.05s, filter 0.05s, box-shadow 0.05s;
}
.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: var(--font-display);
  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: var(--font-display);
  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: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.drawer-hero .jersey {
  font-family: var(--font-display);
  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: var(--font-display);
  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: var(--font-display); 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. */
.kh-state-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin-bottom: 14px;
}
.kh-state-banner {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  display: flex; align-items: center; gap: 8px;
}
.kh-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) {
  .kh-state-row,
  .kh-state-aux {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .kh-seg { min-width: 70px; padding: 6px 8px; font-size: 10px; }
  .kh-seg-group { flex-wrap: wrap; }
}
.kh-state-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kh-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);
}
.kh-seg-group {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: rgba(27,27,25,0.04);
  border-radius: 8px;
  padding: 3px;
}
.kh-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;
}
.kh-seg:hover {
  color: var(--text);
  background: rgba(196,81,32,0.08);
}
.kh-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. */
.kh-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;
}
.kh-pending-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(196,81,32,0.24);
}
.kh-pending-icon {
  font-size: 28px; line-height: 1;
  flex-shrink: 0;
}
.kh-pending-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.kh-pending-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
}
.kh-pending-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.kh-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;
}
.kh-pending-row-info { flex: 1; min-width: 0; }
.kh-pending-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.kh-pending-row-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.kh-pending-row-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .kh-pending-row {
    flex-direction: column;
    align-items: stretch;
  }
  .kh-pending-row-actions {
    width: 100%;
  }
  .kh-pending-row-actions .btn {
    flex: 1 1 50%;
  }
}

/* ── Filter tabs (admin tournament list) ───────────────────────────── */
.kh-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.kh-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;
}
.kh-tab:hover {
  color: var(--text);
  background: rgba(196,81,32,0.08);
}
.kh-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);
}
.kh-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;
}
.kh-tab.active .kh-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: var(--font-display);
  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: var(--font-display);
  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 {
  display: block;          /* <label> defaults to inline; force block so border + padding lay out correctly whether the dropzone is rendered as a <div> or a <label for=""> */
  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; }

/* ───────────────────────────────────────────────────────────────────
   Visually-hidden — the canonical WCAG / a11y "off-screen but fully
   interactive" pattern. Used for hiding <input type="file"> behind
   a styled <label> button without any of the foot-guns that come
   with display:none / opacity:0 / pointer-events:none:
     - display:none   → Safari refuses to surface the picker
     - opacity:0      → some browsers treat the element as non-interactive
     - pointer-events:none → blocks click chain to the input
   The pattern below moves the input 1px off-screen and clips it; the
   browser still treats it as a fully interactive input that participates
   in label-click semantics. Has worked reliably in every browser since
   ~2010.
   ─────────────────────────────────────────────────────────────────── */
.kh-vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Big "Choose photo" button — used in the rebuilt photo upload modal.
   It IS the <label> that wraps the hidden file input; clicking it
   triggers the native file picker via HTML semantics.
   Uses --accent-warm (Bronco orange) so it reads as a strong CTA
   that draws the eye even before the user touches it. */
.kh-photo-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--accent-warm);
  color: #fff;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 4px 14px var(--accent-glow);
  letter-spacing: 0.01em;
  border: 0;
}
.kh-photo-pick-btn:hover {
  background: var(--accent-warm-2);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.kh-photo-pick-btn:active {
  transform: scale(0.97);
}

/* Invoice / Receipt print header — only renders during window.print()
   on the drawer detail. Gives the printed sheet a proper letterhead +
   document type so it reads as an official invoice or receipt the
   parent can keep for reimbursement / tax. Hidden in the browser. */
.kh-inv-printhead { display: none; }

@media print {
  /* Hide everything that isn't the drawer body — sidebar, hero, page
     chrome, the overlay backdrop. Print just the receipt content,
     full bleed, no shadows. */
  body * { visibility: hidden; }
  .drawer, .drawer * { visibility: visible; }
  .drawer {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    background: white !important;
  }
  .drawer-overlay { background: white !important; }
  .drawer-head { display: none !important; }
  .drawer-body { padding: 16px 24px !important; overflow: visible !important; }

  /* Print letterhead — visible only on paper */
  .kh-inv-printhead {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid #1B1612;
  }
  .kh-inv-printhead-club { display: flex; gap: 12px; align-items: center; }
  .kh-inv-printhead-doc { text-align: right; }

  /* Don't waste ink on action buttons or the BroncoHub UI chrome */
  .btn, button, .action-row, .kh-inv-print-actions { display: none !important; }
  .hint { display: none !important; }

  /* Sane print typography */
  body { background: white !important; color: black !important; font-size: 12pt; }
  .dr-section { break-inside: avoid; margin-bottom: 14px; }
  .dr-section-h { color: #555 !important; font-size: 10pt !important; letter-spacing: 0.10em; }
  .kv { display: flex; justify-content: space-between; padding: 4px 0; }
  .pill { background: transparent !important; border: 1px solid #999 !important; color: #333 !important; }
}

/* Dashboard announcement preview — clamps body to a couple lines so a
   long club update never pushes the kids photos off-screen. The full
   rich content (images, lists, etc) lives on /#/announcements via
   the Read more button. */
.kh-ann-preview .feed-item-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kh-ann-read-more {
  margin-top: 8px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--accent-warm);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.kh-ann-read-more:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .kh-ann-preview .feed-item-text { -webkit-line-clamp: 3; }
  .kh-ann-preview .feed-item-name { font-size: 14px; }
}

/* Announcement rich-text rendering — shared by admin list, parent
   Announcements page, and the family dashboard rail. Inline images
   stretch to container width with rounded corners; lists keep their
   bullets; links inherit the bronco accent. */
.kh-ann-rendered img      { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
.kh-ann-rendered a        { color: var(--accent-warm); text-decoration: underline; }
.kh-ann-rendered ul,
.kh-ann-rendered ol       { padding-left: 1.4em; margin: 0.4em 0; }
.kh-ann-rendered p        { margin: 0 0 0.6em; }
.kh-ann-rendered p:last-child { margin-bottom: 0; }
.kh-ann-rendered strong   { font-weight: 700; }
.kh-ann-rendered blockquote { margin: 0.6em 0; padding-left: 0.9em; border-left: 3px solid var(--accent); color: var(--text-2); }

/* Click-guard busy spinner — paired with app-shell's global
   click-guard. Subtle pulse so the user sees the button is doing
   something even before the API response lands. */
.kh-guard-spin {
  display: inline-block;
  font-size: 0.95em;
  animation: kh-guard-spin 1.4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes kh-guard-spin {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* 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 ═══════════════════════════════════════════ */
.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. */
.kh-past-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 2px 18px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kh-past-divider::before,
.kh-past-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--border-2), transparent);
}

/* Styled confirm dialog (KH.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. */
.kh-confirm-layer { position: fixed; inset: 0; z-index: 300; }
.kh-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;
}
.kh-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;
}
.kh-confirm-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 10px;
}
.kh-confirm-msg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 22px;
}
.kh-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: var(--font-display);
  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; }

/* Single Platinum sponsor — stacked, shown in full colour (not greyscale). */
.sponsor-strip.platinum { flex-direction: column; gap: 14px; }
.sponsor-strip.platinum .platinum-logo {
  height: 92px;
  max-width: 260px;
  filter: none;
  opacity: 1;
}
.sponsor-strip.platinum .platinum-logo:hover { filter: none; }
.sponsor-strip .platinum-caption {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: -4px;
}

/* Parent health & availability section. */
.ph-injrow{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px dashed var(--border);}
.ph-injrow:last-child{border-bottom:none;}
.ph-injrow .ph-ico{font-size:18px;line-height:1;flex-shrink:0;}
.ph-injrow .ph-mid{flex:1;min-width:0;}
.ph-injrow .ph-title{font-weight:700;font-size:14px;color:var(--text);text-transform:capitalize;}
.ph-injrow .ph-sub{font-size:12px;color:var(--text-3);font-weight:500;margin-top:2px;line-height:1.4;}
.ph-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:99px;flex-shrink:0;}
.ph-status.active{background:var(--red-tint);color:var(--red);border:1px solid var(--border);}
.ph-status.recovering{background:var(--amber-tint);color:var(--amber);border:1px solid var(--border);}
.ph-status.cleared{background:var(--green-tint);color:var(--green);border:1px solid var(--border);}
.ph-medrow{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px dashed var(--border);}
.ph-medrow:last-child{border-bottom:none;}
.ph-medrow .ph-cond{font-weight:700;font-size:13.5px;color:var(--text);}
.ph-medrow .ph-det{font-size:12px;color:var(--text-3);margin-top:2px;line-height:1.4;}
.ph-consent{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;background:var(--amber-tint);border:1px solid var(--border);border-radius:10px;margin:12px 0;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-2);line-height:1.45;}
.ph-consent input{margin-top:2px;flex-shrink:0;width:17px;height:17px;accent-color:var(--accent);}
.ph-medset{display:flex;flex-direction:column;gap:12px;}
.ph-medcard{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px;position:relative;}
.ph-medcard .ph-rm{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text-3);cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;}
.ph-medcard .ph-rm:hover{color:var(--red);border-color:var(--red);}
.card-injured-tag{position:absolute;top:48px;left:16px;z-index:2;background:var(--red);color:var(--surface);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;box-shadow:var(--shadow-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: var(--font-display);
  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: var(--font-display);
  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; }
}

/* ══ Mobile polish — affordances, scroll hints, tap targets ═════════
   These rules clean up three classes of mobile UX bugs we shipped early
   in the v2 rebuild:
   1. Stat cards on the family dashboard had a hover lift + shadow
      that signalled "tap me" but had no onclick. Now every card on the
      dashboard IS tappable (jumps to roster / invoices / notifications)
      and the lift is honest. The `.stat-card.static` modifier opts a
      card OUT of the lift if a future page renders a display-only stat.
   2. Tables were wrapped in overflow-x:auto but offered no visual hint
      that swiping right reveals more columns. The shadow-on-scroll
      technique below fades an edge on whichever side has content
      hidden — pure CSS, no JS, works on every existing table wrapper
      because it targets the `style="overflow-x..."` attribute.
   3. .btn.sm and .feed-item were sub-44px on mobile, below Apple/Google
      tap-target guidelines. Bumped to comfortable thumb targets.
   ══════════════════════════════════════════════════════════════════ */

/* Tappable stat-cards keep their lift; static ones opt out. */
.stat-card[onclick],
.stat-card[role="button"] {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(196, 81, 32, 0.12);
}
.stat-card[onclick]:active,
.stat-card[role="button"]:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(27,27,25,0.06);
}
.stat-card[onclick]:focus-visible,
.stat-card[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stat-card.static,
.stat-card.static:hover {
  transform: none;
  cursor: default;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px rgba(27,27,25,0.04);
}

/* Section pulse — when stat-card.jumpTo() lands on a section, this
   gives a brief warm flash so the user knows where they ended up
   (otherwise smooth-scroll on iOS can feel anchorless). */
@keyframes kh-pulse-flash {
  0%   { background: rgba(196, 81, 32, 0.00); }
  20%  { background: rgba(196, 81, 32, 0.14); }
  100% { background: rgba(196, 81, 32, 0.00); }
}
.kh-pulse {
  animation: kh-pulse-flash 1.2s ease-out;
  border-radius: var(--r-2);
}

/* Table scroll-shadow — pure CSS, no JS. The fade on the right edge
   means "there's more, swipe →". Disappears when scrolled to the end.
   Mirror on the left when scrolled past the start.

   Technique: two background layers per side.
   - Outer (cover): solid page-colour, background-attachment: local → it
     scrolls WITH the content. When scrolled away from an edge it slides
     out of view.
   - Inner (shadow): radial fade, background-attachment: scroll → fixed
     to the scroll container. Always visible.
   Net effect: at rest, the cover hides the shadow on the un-scrollable
   side; once you scroll, the cover moves and the shadow shows.

   Targets every existing wrapper via the inline-style attribute so we
   don't have to edit 14 module files. Excludes .pre (audit metadata)
   because the selector requires div. */
div[style*="overflow-x:auto"],
div[style*="overflow-x: auto"],
.ta-table-wrap {
  background:
    /* left cover */
    linear-gradient(to right, var(--bg) 30%, transparent) 0 0 / 24px 100% no-repeat local,
    /* right cover */
    linear-gradient(to left,  var(--bg) 30%, transparent) 100% 0 / 24px 100% no-repeat local,
    /* left shadow */
    linear-gradient(to right, rgba(27,27,25,0.10), transparent) 0 0 / 14px 100% no-repeat scroll,
    /* right shadow */
    linear-gradient(to left,  rgba(27,27,25,0.10), transparent) 100% 0 / 14px 100% no-repeat scroll,
    var(--bg);
}

/* Tap targets — bump to 44px-ish on mobile so thumbs reliably hit. */
@media (max-width: 700px) {
  .btn.sm {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .btn {
    min-height: 44px;
  }
  .feed-item {
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .feed-item-av {
    flex-shrink: 0;
  }
  /* The drawer "X" was 32×32 — borderline. Bump to 44 for thumbs. */
  .drawer-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
  }
  /* On phones the stat-grid's 2-col layout makes each card narrow; bump
     the tap region by adding a bit more vertical padding. */
  .stat-card {
    padding: 18px 16px 16px;
    min-height: 132px;
  }
  .stat-value {
    font-size: 30px;
  }
  /* Tables — slightly larger cell padding so rows are taller and easier
     to read on a phone. */
  div[style*="overflow-x:auto"] table td,
  div[style*="overflow-x: auto"] table td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ══ 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); }

/* ════════════════════════════════════════════════════════════════════
   INVOICE / RECEIPT DOCUMENT — "Jersey Stripe" (Claude design dirB)
   Used by the family-side invoice drawer and the print/PDF output.
   Self-contained: scoped under .kh-doc-b, has its own font imports,
   doesn't bleed into the surrounding v2 page.
   Tokens + layout sourced verbatim from the design handoff.
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Saira+Semi+Condensed:wght@600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

.kh-doc-b {
  /* The document takes its two branded colours from the club, via the same
     pipeline as every other surface: --ink (primary) and --action (accent)
     are published on <html>/<body> by applyClubBranding(). Nothing here is
     club-specific, so a second club needs no code change.

     The fallbacks are PLATFORM neutrals, not another club's palette — they
     apply only when the document is rendered outside the app shell (an
     isolated print/PDF window, where the inline custom props are absent).

     --doc-ink and --doc-ok stay fixed: body text on white paper, and the
     semantic paid/ok green. Neither is a brand colour. */
  --doc-accent:    var(--action, #2F4858);
  --doc-accent-dk: color-mix(in srgb, var(--doc-accent) 74%, #000);
  --doc-header:    var(--ink, #111A20);
  --doc-on-header: var(--on-ink, #fff);
  --doc-ink:       #14161C;
  --doc-ok:     #1E8A4C;
  --hair:             #ECECEF;
  --muted:            #7C7F8C;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  color: var(--doc-ink);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(20, 22, 28, 0.10);
  overflow: hidden;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
.kh-doc-b *, .kh-doc-b *::before, .kh-doc-b *::after { box-sizing: border-box; }
.kh-doc-b img { display: block; }

/* ── Header band — black, jersey-orange chevron right ── */
.kh-doc-b .b-band {
  position: relative;
  overflow: hidden;
  background: var(--doc-header);
  color: var(--doc-on-header);
  padding: 30px 44px 30px;
}
.kh-doc-b .b-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.05) 46px 50px);
}
.kh-doc-b .b-chev {
  position: absolute; top: 0; right: -60px; bottom: 0; width: 280px; z-index: 0;
  background: repeating-linear-gradient(115deg, var(--doc-accent) 0 26px, var(--doc-accent-dk) 26px 52px);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 8% 100%);
  opacity: .95;
}
.kh-doc-b .b-bandrow {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.kh-doc-b .b-brand { display: flex; align-items: center; gap: 16px; }
.kh-doc-b .b-logo {
  width: 60px; height: 60px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 6px;
}
.kh-doc-b .b-club {
  font-family: 'Anton', sans-serif;
  font-size: 30px; letter-spacing: .5px; line-height: .92;
  text-transform: uppercase; margin: 0; color: #fff;
}
.kh-doc-b .b-loc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; opacity: .85; margin: 6px 0 0;
}
.kh-doc-b .b-doctype {
  font-family: 'Anton', sans-serif;
  font-size: 34px; letter-spacing: 1px; line-height: .9;
  text-transform: uppercase; text-align: right;
}
.kh-doc-b .b-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 1px;
  opacity: .9; text-align: right; margin-top: 8px;
}

/* ── Body ── */
.kh-doc-b .b-body { padding: 34px 44px 16px; color: var(--doc-ink); }
.kh-doc-b .b-cols {
  display: grid; grid-template-columns: 1fr 1.15fr 0.72fr;
  gap: 28px; margin-bottom: 28px;
}
.kh-doc-b .b-block .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
.kh-doc-b .b-block .nm {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 700; font-size: 19px; line-height: 1.12;
}
.kh-doc-b .b-block .ln { font-size: 13.5px; color: #4A4D58; margin-top: 5px; }
.kh-doc-b .b-block .ln.reg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .5px;
  color: var(--muted); margin-top: 6px;
}
.kh-doc-b .b-block.r { text-align: right; }
.kh-doc-b .b-block .meta { display: flex; gap: 7px; justify-content: flex-end; font-size: 13.5px; }
.kh-doc-b .b-block .meta .mk { color: var(--muted); }
.kh-doc-b .b-block .meta .mv {
  font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
}

/* Status chip */
.kh-doc-b .b-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff;
}
.kh-doc-b .b-chip.paid { background: var(--doc-ok); }
.kh-doc-b .b-chip.due  { background: var(--doc-accent); }

/* Line items table */
.kh-doc-b .b-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.kh-doc-b .b-table thead th {
  background: var(--doc-ink); color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 11px 14px; text-align: right;
}
.kh-doc-b .b-table thead th.item   { text-align: left; border-radius: 4px 0 0 4px; }
.kh-doc-b .b-table thead th:last-child { border-radius: 0 4px 4px 0; }
.kh-doc-b .b-table tbody td {
  padding: 13px 14px; text-align: right;
  font-weight: 600; border-bottom: 1px solid var(--hair);
}
.kh-doc-b .b-table tbody td.item { text-align: left; }
.kh-doc-b .b-table tbody tr:nth-child(even) { background: #FAFAFB; }
.kh-doc-b .b-table .isub {
  display: block; font-weight: 400; font-size: 12.5px;
  color: var(--muted); margin-top: 2px;
}
.kh-doc-b .b-table td.qty,
.kh-doc-b .b-table td.unit {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500; color: #4A4D58;
}

/* Totals */
.kh-doc-b .b-totwrap { display: flex; justify-content: flex-end; margin-top: 22px; }
.kh-doc-b .b-tot { width: 300px; }
.kh-doc-b .b-tot .tr { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; }
.kh-doc-b .b-tot .tr .tk { color: var(--muted); }
.kh-doc-b .b-tot .tr .tv { font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.kh-doc-b .b-tot .grand {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--doc-ink); color: #fff;
  padding: 12px 16px; border-radius: 5px; margin-top: 8px;
}
.kh-doc-b .b-tot .grand .tk {
  font-family: 'Anton', sans-serif;
  font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
}
.kh-doc-b .b-tot .grand .tv {
  font-family: 'Anton', sans-serif;
  font-size: 24px; letter-spacing: .5px;
}
.kh-doc-b .b-tot .grand.due { background: var(--doc-accent); }
.kh-doc-b .b-tot .settled {
  display: flex; justify-content: space-between;
  padding: 9px 0 0; font-size: 14.5px;
  color: var(--doc-ok); font-weight: 700;
}

/* Footer + tag strip */
.kh-doc-b .b-foot {
  margin-top: 26px; border-top: 1px solid var(--hair);
  padding-top: 18px; display: flex; gap: 30px;
}
.kh-doc-b .b-foot .fb { flex: 1; }
.kh-doc-b .b-foot .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
.kh-doc-b .b-foot .fb p { margin: 0; font-size: 13.5px; color: #3A3D48; }
.kh-doc-b .b-foot .fb .mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.kh-doc-b .b-tagstrip {
  background: var(--doc-ink); color: #fff;
  text-align: center; padding: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase;
}

/* Mobile — keep the document readable on a phone without losing the
   design language. Headings shrink, columns stack, totals stay right. */
@media (max-width: 600px) {
  .kh-doc-b { border-radius: 0; box-shadow: none; }
  .kh-doc-b .b-band   { padding: 22px 20px; }
  .kh-doc-b .b-body   { padding: 22px 20px 12px; }
  .kh-doc-b .b-club   { font-size: 22px; }
  .kh-doc-b .b-doctype{ font-size: 26px; }
  .kh-doc-b .b-cols   { grid-template-columns: 1fr; gap: 18px; }
  .kh-doc-b .b-block.r{ text-align: left; }
  .kh-doc-b .b-block .meta { justify-content: flex-start; }
  .kh-doc-b .b-tot    { width: 100%; }
  .kh-doc-b .b-foot   { flex-direction: column; gap: 18px; }
  .kh-doc-b .b-table thead th,
  .kh-doc-b .b-table tbody td { padding: 10px 8px; font-size: 13px; }
  .kh-doc-b .b-tagstrip { font-size: 9px; letter-spacing: 1.5px; padding: 10px 12px; word-spacing: 6px; }
}

/* Admin → Financials hub: child finance modules mount their own `.content`
   wrapper into the tab body. Neutralise its max-width/padding so it doesn't
   double up on the hub's own page padding. Survives child re-renders (CSS
   selector, not inline style). */
#kh-afin-body > .content { padding: 0; max-width: none; margin: 0; }

/* Sidebar build-version footer (#kh-version) */
.sb-version { font-size: 13px; font-weight: 700; color: var(--text-3); padding: 10px 16px 6px; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }

/* FAQ accordion (#/faq) — native <details> styled as a help-centre list */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item > summary {
  cursor: pointer; list-style: none;
  padding: 15px 18px; font-weight: 600; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--bg-2); }
.faq-item > summary .faq-ico { color: var(--text-4); font-size: 18px; line-height: 1; transition: transform .15s ease; flex-shrink: 0; }
.faq-item[open] > summary .faq-ico { transform: rotate(45deg); }
.faq-answer { padding: 0 18px 16px; color: var(--text-2); line-height: 1.65; font-size: 14px; }
.faq-answer code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }

/* Print — full bleed, no shadow, A4 size */
@media print {
  @page { size: A4; margin: 14mm; }
  .kh-doc-b { box-shadow: none !important; border-radius: 0 !important; max-width: 100% !important; }
}

/* ── Rendered Markdown (KH.renderMarkdown) — used by Past Event Reports ── */
.kh-md { color: var(--text-2); line-height: 1.65; font-size: 14px; }
.kh-md h2, .kh-md h3, .kh-md h4 { color: var(--text); margin: 18px 0 8px; line-height: 1.3; }
.kh-md h2 { font-size: 20px; } .kh-md h3 { font-size: 17px; } .kh-md h4 { font-size: 15px; }
.kh-md h2:first-child, .kh-md h3:first-child { margin-top: 0; }
.kh-md p { margin: 0 0 12px; }
.kh-md ul, .kh-md ol { margin: 0 0 12px; padding-left: 22px; }
.kh-md li { margin: 3px 0; }
.kh-md a { color: var(--accent-warm); text-decoration: underline; }
.kh-md strong { color: var(--text); font-weight: 700; }
.kh-md hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.kh-md blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--accent-warm); background: var(--bg-2); color: var(--text-2); border-radius: 0 6px 6px 0; }
.kh-md code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }
.kh-md table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13px; }
.kh-md table caption { caption-side: top; text-align: left; font-weight: 700; color: var(--text); padding-bottom: 6px; }
.kh-md th, .kh-md td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.kh-md thead th { background: var(--bg-2); color: var(--text); font-weight: 700; }
.kh-md tbody tr:nth-child(even) { background: var(--bg-2); }
.kh-md table { display: block; overflow-x: auto; }   /* horizontal scroll on narrow screens */

/* ── Event-report photo gallery ── */
.kh-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.kh-photo-cell { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.kh-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-photo-del { position: absolute; top: 4px; right: 4px; border: none; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.kh-photo-del:hover { background: var(--red); }
/* Short-comment composer */
.kh-comment-box { width: 100%; padding: 8px 10px; font-family: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); resize: vertical; }
.kh-comment-count { font-size: 11px; color: var(--text-3); text-align: right; margin-top: 2px; }
.kh-comment-count.over { color: var(--red); font-weight: 700; }

/* Most-recent-trophy badge overlaid on a player photo card */
.card-trophy {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(18,18,18,.72); color: #ffd86b;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(2px);
  max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Provider support sessions are explicitly visible and read-only. */
.kh-support-banner {
  position: sticky;
  top: 0;
  z-index: 10000;
  padding: 10px 18px;
  background: #7c2d12;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ══════════════════════════════════════════════════════════════════
   AIZOME LOGIN + PATTERN PRIMITIVES  (Clubhouse Broadcast reskin)
   Colors flow from the branding pipeline (--green = club primary,
   --accent-warm = club accent). Nothing club-specific lives here.
   ══════════════════════════════════════════════════════════════════ */

/* The seigaiha tile itself, written ONCE. Every surface that needs the
   wave mask (login field, dashboard hero edge, hero fallback field) reads
   these two custom properties instead of re-inlining the data-URI — the
   -webkit-/standard mask pair alone used to duplicate it per component. */
:root {
  --seigaiha-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect x='0' y='0' width='72' height='18'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Crect x='0' y='18' width='72' height='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='36' cy='18' r='34'/%3E%3Ccircle cx='36' cy='18' r='25'/%3E%3Ccircle cx='36' cy='18' r='16'/%3E%3Ccircle cx='36' cy='18' r='7'/%3E%3C/g%3E%3Cg clip-path='url(%23b)' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='0' cy='36' r='34'/%3E%3Ccircle cx='0' cy='36' r='25'/%3E%3Ccircle cx='0' cy='36' r='16'/%3E%3Ccircle cx='0' cy='36' r='7'/%3E%3Ccircle cx='72' cy='36' r='34'/%3E%3Ccircle cx='72' cy='36' r='25'/%3E%3Ccircle cx='72' cy='36' r='16'/%3E%3Ccircle cx='72' cy='36' r='7'/%3E%3C/g%3E%3C/svg%3E");
  --seigaiha-tile-size: 72px 36px;
}

/* Seigaiha wave field — CSS alpha mask tinted by the club primary.
   Shown only when the shell adds body.pattern-seigaiha (driven by the
   club's theme_pattern setting; default none). */
.seigaiha-field {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 44vh; pointer-events: none;
  background: linear-gradient(to top, var(--green) 0%, var(--green) 40%, transparent 100%);
  opacity: 0;
  -webkit-mask-image: var(--seigaiha-tile);
          mask-image: var(--seigaiha-tile);
  -webkit-mask-size: var(--seigaiha-tile-size);
          mask-size: var(--seigaiha-tile-size);
}
body.pattern-seigaiha .seigaiha-field { opacity: var(--pattern-opacity); }

/* Kamon frame — rotated-square hairline holding an unrotated emblem. */
.kamon-frame {
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.kamon-frame::before {
  content: '';
  position: absolute; inset: 6px;
  transform: rotate(45deg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface);
}
.kamon-frame::after {
  content: '';
  position: absolute; inset: 12px;
  transform: rotate(45deg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.kamon-frame > * { position: relative; z-index: 1; }
.kamon-emblem {
  width: 56px; height: 56px; object-fit: contain; display: block;
}
.kamon-initial {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 24px; font-weight: var(--fw-semibold); color: var(--text);
}
/* Size modifier — the SAME component at crest-in-a-header scale (used by
   the dashboard hero band). Only the box shrinks; no second component. */
.kamon-frame--sm {
  width: var(--space-8); height: var(--space-8);
  margin: 0;
  flex-shrink: 0;
}
.kamon-frame--sm::before { inset: var(--space-1); border-radius: var(--r); }
.kamon-frame--sm::after  { inset: var(--space-3); border-radius: var(--r); }
.kamon-frame--sm .kamon-emblem,
.kamon-frame--sm .kamon-initial {
  width: var(--space-6); height: var(--space-6);
  font-size: var(--fs-md);
}

/* ── Login scene ─────────────────────────────────────────────────── */
.login-scene {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--bg) 58%, var(--bg-2) 100%);
  overflow: hidden;
}
.login-card {
  position: relative; z-index: 2;
  width: min(400px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-lg);
  animation: fadeUp var(--dur-slow) var(--ease-out) both;
}
.login-club-name {
  margin-top: var(--space-3);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--text);
}
.login-kicker {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-5);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.login-kicker::before, .login-kicker::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-field { margin-bottom: var(--space-4); }
.login-field label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.login-field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;               /* prevents iOS zoom */
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-2);
  border-radius: 0;
  padding: 10px 2px;
  transition: border-color var(--dur-fast) var(--ease-default);
}
.login-field input::placeholder { color: var(--text-4); }
.login-field input:focus {
  outline: none;
  border-bottom-color: var(--accent-warm);
}
.login-submit {
  width: 100%;
  margin-top: var(--space-5);
  padding: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--surface-2);
  background: var(--accent);
  border: none; border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-default), transform var(--dur-fast) var(--ease-out);
}
.login-submit:hover { background: var(--accent-2); }
.login-submit:active { transform: translateY(1px); }
.login-submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.login-submit[disabled] { opacity: 0.6; cursor: default; }
.login-tagline {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.login-err {
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-2);
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
  .login-submit { transition: none; }
}

/* Compensate for the fixed right club-strip (hidden below 481px). */
@media (min-width: 481px) {
  .login-scene { padding-right: calc(var(--space-4) + 42px); }
}

/* ══════════════════════════════════════════════════════════════════
   CLUBHOUSE SHELL  (Clubhouse Broadcast × aizome on washi)
   ──────────────────────────────────────────────────────────────────
   Chrome-only refinement of the logged-in app so the shell reads like
   the aizome login above it: display type on the brand, body-font
   broadcast labels on section headings, hairline rules instead of
   fills, and a calm active state (paper lift + accent rail) in place
   of the solid charcoal pill.

   Rules observed:
   - Every colour/size/duration is a token. Club identity arrives at
     runtime as --green / --accent-warm / --accent-glow via
     KH.applyBranding — nothing club-specific is written here.
   - Typography, spacing and borders only. No widths, no positioning,
     no display types, no breakpoints — admin screens share this shell
     and must not move.
   ══════════════════════════════════════════════════════════════════ */

/* ── Sidebar shell ───────────────────────────────────────────────── */
/* Scrollbar drops the hardcoded Bronco orange for a neutral hairline
   thumb — the club accent is reserved for the active nav rail. */
.sb { scrollbar-color: var(--border-2) transparent; }
.sb::-webkit-scrollbar-thumb { background: var(--border-2); }
.sb::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: padding-box; }

/* ── Header block (the top bar on mobile) ────────────────────────── */
.sb-head { padding: var(--space-4) var(--space-4) var(--space-3); }
/* Was a hardcoded orange wash. A neutral paper sheen instead: the head
   lifts half a stop off the sidebar without tinting the club colour. */
.sb-head::after {
  background: linear-gradient(135deg, var(--surface-2) 0%, transparent 70%);
  opacity: 0.7;
}

.sb-brand { gap: var(--space-3); margin-bottom: var(--space-4); }
.sb-brand-mark { border-radius: var(--r); box-shadow: var(--shadow-sm); }
/* Brand = display type: uppercase, tight leading, no negative tracking
   (ja glyphs never take --ls-tight). */
.sb-brand-text .top {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
}
.sb-brand-text .sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  margin-top: var(--space-1);
}

/* Identity card */
.sb-fam { gap: var(--space-3); padding: var(--space-3); border-radius: var(--r); }
.sb-fam-name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
}
/* Role reads as a broadcast tag, not a warm pill — the accent stays on
   the nav rail. Same box metrics, quieter surface. */
.sb-fam-role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: var(--r);
}

/* View picker — segmented control, hairline instead of glow */
.sb-view-picker { border-radius: var(--r); padding: var(--space-2) var(--space-2); }
.sb-view-picker__label { letter-spacing: var(--ls-wide); margin-bottom: var(--space-2); }
.sb-view-picker__pills { background: var(--bg-2); border-radius: var(--r); gap: var(--space-1); }
.sb-view-pill {
  font-family: var(--font-body);
  border-radius: var(--r);
  transition: background-color var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default),
              box-shadow var(--dur-fast) var(--ease-default);
}
.sb-view-pill:hover { background: var(--surface); color: var(--text); }
.sb-view-pill.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ── Navigation ──────────────────────────────────────────────────── */
.sb-body { padding: var(--space-3) var(--space-2); }
.sb-section + .sb-section { margin-top: var(--space-3); }

/* Section heading = small broadcast label sitting under a hairline
   rule; the rule is what separates one nav group from the next. */
.sb-section-h {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-3);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--border);
  border-radius: 0;
  transition: background-color var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default);
}
/* First group needs no rule — the header's own border already closes
   the space. Kept as a transparent line so nothing shifts. */
.sb-section:first-child .sb-section-h { border-top-color: transparent; }
.sb-section-h:hover { background: var(--surface); color: var(--text-2); }
.sb-section-h .chev {
  opacity: 0.5;
  transition: transform var(--dur-fast) var(--ease-default);
}
.sb-section .sb-items { transition: max-height var(--dur-normal) var(--ease-out); }

.sb-item {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r);
  transition: background-color var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default),
              box-shadow var(--dur-fast) var(--ease-default);
}
.sb-item:hover { background: var(--surface); color: var(--text); }
/* Active = a sheet of lighter paper held by a hairline, with a 2px
   club-accent rail on the leading edge. Drawn as inset shadows so the
   row keeps exactly the geometry it had when inactive. */
.sb-item.active {
  color: var(--text);
  background: var(--surface-2);
  font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--accent-warm), inset 0 0 0 1px var(--border);
}
.sb-item.active::before { content: none; }
.sb-item .badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); }
/* The pill no longer sits on charcoal, so it keeps its normal colours
   when the row is active. */
.sb-item.active .badge { background: var(--accent-warm); color: var(--bg); }

/* ── Sidebar foot ────────────────────────────────────────────────── */
.sb-foot { padding: var(--space-3) var(--space-2); gap: var(--space-1); }
.sb-foot-row {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r);
  transition: background-color var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default);
}
.sb-foot-row:hover { background: var(--surface); color: var(--text); }
.sb-version {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--text-4);
  padding: var(--space-2) var(--space-3) var(--space-1);
}

/* ── Mobile nav burger (shell chrome at ≤900px) ──────────────────── */
.sb-burger {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.sb-burger span {
  transition: transform var(--dur-normal) var(--ease-default),
              opacity var(--dur-normal) var(--ease-default);
}

/* ── Page header band ────────────────────────────────────────────── */
/* Section heads become broadcast title rows: display type, closed by a
   hairline. Padding + margin are split so the total space below the
   title stays where it was (was 18px; now 8 + 1 + 8). */
.section-head {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  gap: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  gap: var(--space-3);
}
.section-title .count {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}
.section-link {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  transition: opacity var(--dur-fast) var(--ease-default);  /* keeps the existing hover fade */
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sb-view-pill,
  .sb-section-h,
  .sb-section-h .chev,
  .sb-section .sb-items,
  .sb-item,
  .sb-foot-row,
  .sb-burger span,
  .section-link { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   BROADCAST BLOCKS  (Clubhouse Broadcast × aizome on washi)
   ──────────────────────────────────────────────────────────────────
   Two reusable primitives plus the parent-dashboard hero that is their
   first consumer:

     .bcast-date   — broadcast date plate: large day-of-month in display
                     type over stacked month + weekday abbreviations.
     .bcast-chip   — status chip on the platform's status TINT tokens.
     .chero        — the dashboard hero band (photo + indigo scrim +
                     seigaiha edge), with an indigo fallback band.

   Rules observed:
   - Every colour, size, duration is a token (or token arithmetic). The
     only literals are 1px hairlines and 0 offsets.
   - Club identity arrives at runtime as --green (club primary) and
     --accent-warm (club accent) via KH.applyBranding. Nothing
     club-specific is written here.
   - --ls-wide is LATIN-ONLY. .bcast-date--ja returns tracking and case
     folding to normal; Japanese glyphs never take letter-spacing.
   ══════════════════════════════════════════════════════════════════ */

/* ── Broadcast date plate ─────────────────────────────────────────── */
.bcast-date {
  --bcast-ink:    var(--text);
  --bcast-accent: var(--accent-warm);
  --bcast-muted:  var(--text-3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: var(--space-8);
  padding: var(--space-3) var(--space-2);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  text-align: center;
  position: relative; z-index: 1;
}
.bcast-date .d {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  font-variant-numeric: tabular-nums;
  color: var(--bcast-ink);
}
.bcast-date .m,
.bcast-date .w {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-top: var(--space-1);
}
.bcast-date .m { font-weight: var(--fw-bold);     color: var(--bcast-accent); }
.bcast-date .w { font-weight: var(--fw-semibold); color: var(--bcast-muted); }

/* ja: Intl already supplies 8月 / 金 — no tracking, no case folding.
   (--ls-wide on Japanese glyphs is a typographic error, not a style.) */
.bcast-date--ja .m,
.bcast-date--ja .w {
  letter-spacing: var(--ls-normal);
  text-transform: none;
}

/* On the hero scrim the plate loses its paper fill and keeps a hairline. */
.bcast-date--onscrim {
  --bcast-ink:    var(--chero-ink);
  --bcast-accent: var(--chero-ink);
  --bcast-muted:  var(--chero-ink);
  background: transparent;
  border-color: var(--chero-ink);
}

/* ── Broadcast status chip ────────────────────────────────────────── */
/* Tone modifiers map 1:1 onto the platform's status tint tokens. Callers
   pick the tone from their own existing status branch — this class never
   holds a status list of its own. */
.bcast-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--text-2);
}
.bcast-chip--green { background: var(--green-tint); color: var(--green); }
.bcast-chip--amber { background: var(--amber-tint); color: var(--amber); }
.bcast-chip--red   { background: var(--red-tint);   color: var(--red); }
.bcast-chip--blue  { background: var(--blue-tint);  color: var(--blue); }
/* Accent tone reuses --accent-glow, the club accent's alpha composite the
   branding pipeline already publishes. Text stays on the ink ramp. */
.bcast-chip--accent { background: var(--accent-glow); color: var(--text); }
/* On the hero scrim: hairline outline in paper, no tint. */
.bcast-chip--onscrim {
  background: transparent;
  color: var(--chero-ink);
  border-color: var(--chero-ink);
}
.bcast-chip .pulse {
  width: var(--space-1); height: var(--space-1);
  border-radius: var(--r-full);
  background: currentColor;
  animation: pulse 2.4s ease-in-out infinite;
}

/* ja labels never take latin tracking or case folding either. */
.bcast-chip--ja { letter-spacing: var(--ls-normal); text-transform: none; }

/* ── Clubhouse hero band (parent dashboard) ───────────────────────── */
/* Height is reserved up front (min-height, not aspect-ratio on a possibly
   absent image) so the band never shifts while the photo loads or when
   the photo fails and the flat indigo fallback takes over. */
.chero {
  /* Paper ink for everything sitting on the indigo scrim. The dark
     palette inverts the surface ramp, so the paper value moves to
     --text there. */
  --chero-ink:    var(--surface-2);
  --chero-h:      calc(var(--space-9) * 2 + var(--space-2));       /* 200px */
  --chero-gutter: calc(var(--space-6) + var(--space-1));           /*  36px */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--chero-h);
  display: flex; align-items: flex-end;
  padding: var(--space-5) var(--chero-gutter);
  background: var(--green);
}
[data-theme="dark"] .chero { --chero-ink: var(--text); }

.chero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

/* Indigo scrim: solid across the lower band (where all the type sits) and
   washing in from the leading edge. One element, one opacity — no colour
   literals, only the club primary. */
.chero-scrim {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top,   var(--green) 0%, var(--green) 42%, transparent 96%),
    linear-gradient(to right, var(--green) 0%, transparent 68%);
  opacity: 0.94;
}
/* No photo (or the photo errored): the band IS the indigo. */
.chero--flat .chero-scrim { background: var(--green); opacity: 1; }

/* Full-band wave field — fallback only, and only for clubs whose
   theme_pattern is seigaiha. Held at 6%, the brief's ceiling for pattern
   behind text (the login field runs at 5%). */
.chero-field {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--chero-ink);
  opacity: 0;
  -webkit-mask-image: var(--seigaiha-tile);
          mask-image: var(--seigaiha-tile);
  -webkit-mask-size: var(--seigaiha-tile-size);
          mask-size: var(--seigaiha-tile-size);
}
body.pattern-seigaiha .chero--flat .chero-field {
  opacity: calc(var(--pattern-opacity) * 1.2);
}

/* Thin wave edge along the band's bottom border. Decorative, below the
   type, so it can carry more presence than a field behind text. */
.chero-wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--space-5);
  z-index: -1;
  pointer-events: none;
  background: var(--chero-ink);
  opacity: 0;
  -webkit-mask-image: var(--seigaiha-tile);
          mask-image: var(--seigaiha-tile);
  -webkit-mask-size: var(--seigaiha-tile-size);
          mask-size: var(--seigaiha-tile-size);
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}
body.pattern-seigaiha .chero-wave { opacity: calc(var(--pattern-opacity) * 3); }

.chero-inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--max-page);
  display: flex; align-items: flex-end;
  gap: var(--space-4);
}
.chero-text { flex: 1; min-width: 0; }
.chero-aside {
  display: flex; align-items: center; gap: var(--space-3);
  flex-shrink: 0;
}
.chero-greet {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--chero-ink);
  opacity: 0.85;
}
/* The parent's own club photo, kept from the previous hero title row. */
.chero-ava {
  width: var(--space-5); height: var(--space-5);
  flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--chero-ink);
  background: var(--bg-2) center / cover no-repeat;
}
.chero-club {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--chero-ink);
}

/* Body block below the band: the dashboard content the old .hero carried
   (summary line, membership, banners, CTA), on plain paper. Bottom
   padding matches the old hero's so .stats-band's negative lift still
   lands where it did. */
.chero-body {
  padding: var(--space-5) calc(var(--space-6) + var(--space-1)) var(--space-9);
}
.chero-body-inner {
  max-width: var(--max-page);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: flex-end;
}

@media (max-width: 900px) {
  .chero {
    --chero-h:      calc(var(--space-9) + var(--space-7) + var(--space-2));  /* 152px */
    --chero-gutter: calc(var(--space-4) + var(--space-1));                   /*  20px */
  }
  .chero-club { font-size: var(--fs-xl); }
  .chero-body { padding: var(--space-4) calc(var(--space-4) + var(--space-1)) calc(var(--space-7) + var(--space-5)); }
}
@media (max-width: 600px) {
  /* The date plate stacks under the greeting rather than shrinking below
     legible ja glyph size. */
  .chero-inner { flex-wrap: wrap; gap: var(--space-3); }
  .chero-body-inner { grid-template-columns: 1fr; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bcast-chip .pulse { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE TAB BAR  (.design/hayato-reskin/MOBILE-NAV.md)
   ≤900px: bottom tabs replace the sidebar entirely — in EVERY view
   (owner, 4 Sep — the coach/admin drawer exception is retired; the
   More sheet carries the rest of the nav and the view switcher).
   The [class*="kh-view-"] gate matches any signed-in view class and
   nothing on the login screen, which has no view class at all.
   Aizome treatment: paper bar, hairline top, club-accent rail on the
   active slot. All colors are tokens.
   ══════════════════════════════════════════════════════════════════ */
#kh-tabbar, #kh-tabsheet { display: none; }

@media (max-width: 900px) {
  body[class*="kh-view-"] .sb,
  body[class*="kh-view-"] .sb-burger { display: none !important; }
  body[class*="kh-view-"] .main {
    margin-left: 0 !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  body[class*="kh-view-"] { overscroll-behavior-y: none; }

  body[class*="kh-view-"] #kh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: stretch;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    padding: 6px max(6px, env(safe-area-inset-left))
             calc(6px + env(safe-area-inset-bottom))
             max(6px, env(safe-area-inset-right));
    box-shadow: var(--shadow-md);
  }
  .tabbar-item {
    flex: 1; min-width: 0; min-height: 48px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    padding: 4px 2px;
    background: none; border: none; cursor: pointer;
    color: var(--text-3); text-decoration: none;
    font-family: var(--font-body); font-size: 10px;
    font-weight: var(--fw-semibold); line-height: 1.2;
    letter-spacing: 0;                    /* ja labels — never tracked */
    border-radius: var(--r);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-fast) var(--ease-default);
  }
  .tabbar-item svg { width: 22px; height: 22px; flex: none; }
  .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar-item:active { color: var(--text-2); }
  .tabbar-item.active { color: var(--text); }
  .tabbar-item.active::before {
    content: ''; position: absolute; top: -7px; left: 26%; right: 26%;
    height: 2px; border-radius: 2px; background: var(--accent-warm);
  }

  body[class*="kh-view-"] #kh-tabsheet { display: block; position: fixed; inset: 0; z-index: 950; }
  .tabsheet-backdrop { position: absolute; inset: 0; background: rgba(27,27,25,0.4); }
  .tabsheet-panel {
    position: absolute; left: 0; right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom));
    max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface-2);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: var(--r-3) var(--r-3) 0 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    box-shadow: var(--shadow-lg);
    animation: tabsheetUp var(--dur-normal) var(--ease-out) both;
  }
  .tabsheet-grip {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border-2); margin: 6px auto 10px;
  }
  .tabsheet-sec {
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--text-3);
    padding: var(--space-3) var(--space-1) var(--space-1);
    border-top: 1px solid var(--border); margin-top: var(--space-2);
  }
  .tabsheet-sec:first-child { border-top: none; margin-top: 0; }
  .tabsheet-row {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; min-height: 48px;
    padding: 10px var(--space-2);
    background: none; border: none; cursor: pointer;
    color: var(--text); text-decoration: none;
    font-family: var(--font-body); font-size: var(--fs-base);
    border-radius: var(--r);
    -webkit-tap-highlight-color: transparent;
  }
  .tabsheet-row:active { background: var(--surface); }
  .tabsheet-row svg { width: 20px; height: 20px; color: var(--text-3); flex: none; }
  .tabsheet-signout { color: var(--red); }
  .tabsheet-signout svg { color: var(--red); }
  @keyframes tabsheetUp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .tabsheet-panel { animation: none; }
    .tabbar-item { transition: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE PARENT DASHBOARD  (≤900px · body.kh-view-parent)
   ──────────────────────────────────────────────────────────────────
   The hero band (.chero) was built mobile-first; everything under it
   (.chero-body + .stats-band) was still desktop markup and read as a
   shrunken desktop page on a 390px phone. This section is the mobile
   pass over that body.

   Defects addressed (owner review, iPhone 390px, ja locale):
     1. Stat tiles clipped their own caption — a fixed min-height on a
        card with overflow:hidden, whose ja trend line wraps to two or
        three lines ("{year}年 有効 · タップして表示").
     2. The dashboard CTA floated context-less beside the banner column.
     3. Banners were desktop walls: 22px paddings, actions hugging the
        right edge of a wrapped flex row.
     4. Desktop gutters (20–36px) wasted width on a phone.

   Rules observed:
   - Every colour, size and spacing value is a token. The only literals
     are the 44px tap floor (a platform constant, not a design value)
     and 0.
   - EVERY rule lives inside the media query and is scoped to
     body.kh-view-parent. >900px and non-parent views are untouched —
     that is what keeps desktop pixel-identical.
   - `!important` appears ONLY on properties family.js writes inline on
     the banner divs (padding / font-size / gap / margin / align-items).
     Inline styles cannot be beaten by specificity, and rewriting them
     in the module would change the desktop rendering.
   - No transition:all; nothing here animates, so there is nothing for
     prefers-reduced-motion to switch off.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── Body rhythm ──────────────────────────────────────────────────
     One gutter for the whole dashboard: the banner column and the stat
     tiles now sit on the same left edge instead of 20px vs 20px-with-a
     -different-origin. Vertical padding stays as the broadcast section
     set it, because .stats-band's negative lift is measured against
     .chero-body's bottom padding. */
  body.kh-view-parent .chero-body {
    padding-left:  var(--space-4);
    padding-right: var(--space-4);
  }
  /* Single column: the CTA stops floating beside the banners and lands
     under them, where a thumb is. */
  body.kh-view-parent .chero-body-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
  }
  body.kh-view-parent .hero-sub {
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
  }

  /* Primary actions are thumb targets, not inline links. */
  body.kh-view-parent .hero-cta { gap: var(--space-2); }
  body.kh-view-parent .hero-cta .btn {
    flex: 1 0 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* ── Membership row (status pill + optional pay button) ───────────
     The pill keeps its line; the action takes its own full-width line
     beneath it. .fq-membership is the not-active variant only — the
     "checking…" and "active" variants are a bare pill and need no
     mobile treatment. */
  body.kh-view-parent .fq-membership {
    margin-top: var(--space-3) !important;
    gap: var(--space-2) !important;
  }
  body.kh-view-parent .fq-membership > .btn {
    flex: 1 0 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* ── Banners (consent, squad removal, match check-in, quiz) ───────
     Compact treatment: tighter padding off the --space scale, body copy
     at --fs-sm, and the action(s) on their own full-width line under
     the copy instead of wrapping to the right of it. Copy is untouched
     — this is layout only. */
  body.kh-view-parent .fq-banner {
    margin-top: var(--space-4) !important;
    padding: var(--space-3) var(--space-4) !important;
    gap: var(--space-2) !important;
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-normal) !important;
    align-items: flex-start !important;
  }
  /* The copy span carries a desktop min-width floor (200px) that fights
     a 390px screen once the gutters and the icon are taken out. */
  body.kh-view-parent .fq-banner > span { min-width: 0 !important; }
  /* A single action, or the wrapper holding a pair of them, breaks to a
     full-width line of its own. */
  body.kh-view-parent .fq-banner > .btn,
  body.kh-view-parent .fq-banner > div { flex: 1 0 100%; }
  /* A pair of actions then splits that line evenly. */
  body.kh-view-parent .fq-banner > div > .btn { flex: 1 1 auto; }
  body.kh-view-parent .fq-banner > .btn,
  body.kh-view-parent .fq-banner > div > .btn {
    justify-content: center;
    min-height: 44px;
  }

  /* ── Stat tiles ───────────────────────────────────────────────────
     Two across with a real row gap, and — the actual fix for the
     clipped captions — the tile is sized by its own content: min-height
     is a floor, never a ceiling, height is auto, the caption is allowed
     to wrap, and nothing can exceed the box on either axis, so the
     card's overflow:hidden never has anything to cut. */
  body.kh-view-parent .stats-band {
    margin-left:  var(--space-4);
    margin-right: var(--space-4);
  }
  body.kh-view-parent .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  body.kh-view-parent .stat-card {
    display: flex;
    flex-direction: column;
    /* stretch, not flex-start: the loading skeleton inside a stat card
       sets only a height, so a flex-start cross axis would collapse it
       to zero width. */
    align-items: stretch;
    min-width: 0;
    height: auto;
    min-height: calc(var(--space-9) + var(--space-5));   /* 120px floor, well past the 44px tap minimum */
    padding: var(--space-4);
    overflow-wrap: anywhere;
  }
  body.kh-view-parent .stat-icon {
    margin-bottom: var(--space-2);
    flex: none;
  }
  body.kh-view-parent .stat-label {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--space-1);
    max-width: 100%;
  }
  /* --ls-wide is latin-only (DESIGN_BRIEF): ja labels lose the tracking. */
  html[lang="ja"] body.kh-view-parent .stat-label {
    letter-spacing: var(--ls-normal);
  }
  /* Numbers on the broadcast display scale — same discipline as
     .bcast-date .d (display face, tight leading, no tracking, tabular
     figures), one step down so "RM 1,250.00" still fits a half-width
     tile. */
  body.kh-view-parent .stat-value {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-normal);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-1);
    max-width: 100%;
  }
  body.kh-view-parent .stat-value .unit { font-size: var(--fs-md); }
  /* The caption was an inline-flex single line; make it a wrapping
     block so long ja captions stack inside the tile instead of running
     past its edge. --fs-xs is the brief's legibility floor for ja. */
  body.kh-view-parent .stat-trend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
  }
}

/* ══════════════════════════════════════════════════════════════════
   PLAYER JOURNEY  (.design/hayato-reskin/PLAYER-JOURNEY.md)
   ──────────────────────────────────────────────────────────────────
   One child's story as a vertical timeline: a hairline spine with the
   broadcast date plates threaded onto it, month headers as broadcast
   labels, and compact event rows carrying a type icon.

   Rules observed (same as §BROADCAST BLOCKS above):
   - Every colour, size, radius and duration is a token or token
     arithmetic. The only literals are 1px hairlines and 0 offsets.
   - Nothing club-specific: club identity arrives at runtime as
     --green / --accent-warm / --accent-glow via KH.applyBranding.
   - --ls-wide is LATIN-ONLY. The --ja modifiers return tracking and
     case folding to normal; Japanese glyphs never take letter-spacing.
   - A timeline is already mobile-shaped, so desktop is the same screen
     centred at --max-content — no dual render.
   ══════════════════════════════════════════════════════════════════ */

/* ── Page bar + keepsake cover ──────────────────────────────────────
   Application chrome stays functional and familiar; the cover below it
   carries the emotional voice. Mobile is normal-flow so it never consumes
   precious screen height. Desktop makes only the slim bar sticky. */
.jrn-bar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--hero-gutter);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
}
.jrn-bar__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
}
.jrn-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.jrn-player-switch {
  min-width: 0;
  min-height: var(--tap-min);
  max-width: 100%;
  padding: 0 var(--space-7) 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: 600 var(--fs-sm)/1 var(--font-body);
}
.jrn-player-switch:focus-visible,
.jrn-bar .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.jrn-bar .btn { min-height: var(--tap-min); }
.jrn-bar .btn:disabled { cursor: not-allowed; opacity: 0.46; }
.jrn-memory-add { margin-left: 0; }
.jrn-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.jrn-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-5);
  margin: var(--space-4) var(--hero-gutter) 0;
  padding: var(--space-6) var(--space-5);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius: var(--r-2);
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(92deg, transparent 0 3px,
      color-mix(in srgb, var(--paper) 2%, transparent) 3px 4px),
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 16%, transparent), transparent 46%);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--paper) 3%, transparent),
    var(--shadow-md);
  color: var(--paper);
}
.jrn-cover::after {
  content: '';
  position: absolute;
  inset: var(--space-3);
  z-index: -1;
  border: 1px dashed color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius: var(--r);
  pointer-events: none;
}
.jrn-cover__portrait {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 5px solid var(--paper);
  border-radius: 50%;
  background: var(--stone);
  color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 42%, transparent),
    0 8px 28px rgba(0, 0, 0, 0.18);
}
.jrn-cover__photo {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: inherit;
}
.jrn-cover__initial {
  font: 600 var(--fs-3xl)/1 var(--font-display);
}
.jrn-cover__copy { min-width: 0; align-self: center; }
.jrn-cover__kicker,
.jrn-cover__group {
  font: 600 var(--fs-xs)/var(--lh-tight) var(--font-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #9DC1D3;
}
.jrn-cover__title {
  margin: var(--space-2) 0 0;
  font-family: 'Lora', var(--font-jp), Georgia, serif;
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--paper);
  text-wrap: balance;
}
.jrn-cover__group {
  display: inline-block;
  margin-top: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, #9DC1D3 60%, transparent);
}
.jrn-cover__opening {
  max-width: 48ch;
  margin: var(--space-4) 0 0;
  font-family: 'Lora', var(--font-jp), Georgia, serif;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.jrn-cover__marks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jrn-cover__marks i { position: absolute; display: block; opacity: 0.34; }
.jrn-cover__marks i:nth-child(1) {
  width: 34px; height: 34px; right: 11%; top: 22%;
  border: 1px solid #9DC1D3; transform: rotate(19deg);
}
.jrn-cover__marks i:nth-child(2) {
  width: 90px; height: 46px; right: 4%; bottom: 13%;
  border: 1px dashed var(--paper); border-radius: 50%; transform: rotate(-12deg);
}
.jrn-cover__marks i:nth-child(3) {
  width: 9px; height: 9px; left: 8%; top: 16%;
  border: 2px solid #9DC1D3; transform: rotate(45deg);
}
.jrn-cover--older .jrn-cover__marks i:nth-child(1) { border-radius: 50%; }
html[lang="ja"] .jrn-cover__title,
html[lang="ja"] .jrn-cover__opening { letter-spacing: normal; line-height: 1.4; }
html[lang="ja"] .jrn-cover__kicker,
.jrn-sub--ja { letter-spacing: var(--ls-normal); text-transform: none; }

@media (min-width: 700px) {
  .jrn-cover {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    padding: var(--space-7);
  }
  .jrn-cover__portrait { width: 136px; height: 136px; }
  .jrn-cover__title { font-size: clamp(44px, 5vw, 72px); }
}

@media (min-width: 901px) {
  .jrn-bar {
    position: sticky;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .jrn-bar__actions { justify-content: flex-end; }
  .jrn-player-switch { min-width: 190px; }
  .jrn-memory-add { margin-left: var(--space-2); }
  .jrn-cover { margin-top: var(--space-5); }
}

/* ── Timeline column ──────────────────────────────────────────────── */
.jrn-wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.jrn-line {
  /* Plate column + the gap to the body. Every offset below is derived
     from these two, so the spine and the plates can never drift apart. */
  --jrn-plate: var(--space-8);
  --jrn-gap:   var(--space-4);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 calc(var(--jrn-plate) + var(--jrn-gap));
}
/* The spine — one hairline, running the full height of the column. */
.jrn-line::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--jrn-plate) / 2);
  width: 1px;
  background: linear-gradient(to bottom, rgba(74,88,135,.2), rgba(74,88,135,.62), rgba(74,88,135,.18));
}

/* ── Month header = broadcast label with a kamon node on the spine ── */
.jrn-month {
  position: relative;
  margin-top: var(--space-6);
  padding: var(--space-2) 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-warm);
}
.jrn-month--ja { letter-spacing: var(--ls-normal); text-transform: none; }
.jrn-line > .jrn-month:first-child { margin-top: 0; }
.jrn-month::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc((var(--jrn-plate) + var(--jrn-gap)) * -1 + var(--jrn-plate) / 2 - var(--space-1));
  width: var(--space-2); height: var(--space-2);
  margin-top: calc(var(--space-1) * -1);
  transform: rotate(45deg);
  border: 1px solid var(--border-2);
  background: var(--bg);
}

/* ── Event row ────────────────────────────────────────────────────── */
.jrn-ev {
  position: relative;
  min-height: var(--space-9);
  margin: var(--space-3) 0;
  padding: var(--space-5);
  border: 1px solid rgba(38,49,88,.11);
  border-radius: 18px 6px 18px 6px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,245,239,.9));
  box-shadow: 0 12px 32px rgba(27,35,68,.07);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease;
}
.jrn-ev.is-visible { opacity: 1; transform: none; }
.jrn-ev:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.jrn-ev--young { border-radius: 22px 8px 20px 10px; }
.jrn-ev--older { border-left: 3px solid rgba(55,72,128,.38); }
.jrn-ev--welcome,
.jrn-ev--interlude {
  background: linear-gradient(135deg, rgba(236,239,250,.96), rgba(255,251,241,.96));
  border-style: dashed;
}
.jrn-ev--learning { background: linear-gradient(135deg, #faf7ef, #f3f0e8); }
.jrn-ev--achievement {
  background: radial-gradient(circle at 92% 14%, rgba(203,164,74,.16), transparent 22%), #fffdf6;
  border-color: rgba(164,124,35,.26);
}
.jrn-ev--achievement.is-visible { box-shadow: 0 14px 36px rgba(110,82,25,.11); }
.jrn-ev--family_memory {
  background: linear-gradient(145deg, #fffaf0, #f8f1e5);
  border-color: rgba(137,105,58,.24);
}

/* The date plate IS the node: it sits on the spine, and its own paper
   fill masks the hairline behind it. */
.jrn-plate {
  position: absolute;
  top: var(--space-4);
  left: calc((var(--jrn-plate) + var(--jrn-gap)) * -1);
  width: var(--jrn-plate);
}
.jrn-plate .bcast-date { min-width: 0; width: 100%; }
/* Undated events (achievements hold no date in the schema) get a "now"
   plate rather than an invented day — the same box, label only. */
.jrn-plate-now {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.jrn-ev-body { min-width: 0; }
.jrn-source {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-warm);
}
.jrn-ev-head {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text);
}
.jrn-icon { flex: none; color: var(--text-3); }
.jrn-ev-title {
  margin: 0;
  font-family: "Lora", var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
}
.jrn-ev-lines {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.jrn-ev--coach_message .jrn-ev-lines,
.jrn-ev--welcome .jrn-ev-lines,
.jrn-ev--interlude .jrn-ev-lines {
  font-family: "Lora", var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.jrn-ev--coach_message .jrn-ev-lines span:first-child { font-style: italic; }
.jrn-ev-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.jrn-memory-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.jrn-memory-photos--1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.jrn-memory-photos img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px 4px 12px 4px;
  background: var(--surface-2);
  transition: transform .45s ease;
}
.jrn-ev.is-visible .jrn-memory-photos img { transform: scale(1.002); }
.jrn-memory-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.jrn-memory-actions .btn { min-height: var(--tap-min); }

.jrn-modal-backdrop {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  padding: var(--space-4); background: rgba(18,25,50,.58); backdrop-filter: blur(5px);
}
.jrn-modal {
  width: min(620px, 100%); max-height: calc(100vh - var(--space-6)); overflow: auto;
  padding: var(--space-5); border-radius: 22px; background: #fffdf8;
  box-shadow: 0 28px 80px rgba(16,23,48,.3);
}
.jrn-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.jrn-modal-head h2 { margin: 0; font-family: "Lora", var(--font-display); font-size: var(--fs-xl); }
.jrn-memory-quota { margin: var(--space-3) 0 var(--space-4); color: var(--text-2); }
.jrn-modal form { display: grid; gap: var(--space-4); }
.jrn-modal label { display: grid; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--text); }
.jrn-modal input,
.jrn-modal textarea { width: 100%; min-height: var(--tap-min); padding: 11px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: #fff; color: var(--text); font: inherit; }
.jrn-modal textarea { min-height: 140px; resize: vertical; line-height: var(--lh-relaxed); }
.jrn-modal input:focus-visible,
.jrn-modal textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent); outline-offset: 1px; }
.jrn-memory-existing { display: grid; gap: var(--space-2); }
.jrn-memory-existing label { display: flex; align-items: center; font-weight: var(--fw-normal); }
.jrn-memory-existing input { width: 22px; min-height: 22px; }
.jrn-form-error { min-height: 1.4em; margin: 0; color: var(--danger); }
.jrn-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.sq-feed__item--muted { opacity: .68; border-left: 3px solid var(--text-3); }
.sq-memory-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.sq-memory-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }

/* ── Empty / notice state ─────────────────────────────────────────── */
/* Warm and forward-looking, per the contract — the story hasn't failed,
   it hasn't started. */
.jrn-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
}
.jrn-empty-title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color: var(--text);
}
.jrn-empty-body {
  max-width: var(--max-content);
  margin: var(--space-3) auto 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-3);
}

/* ── Load more ────────────────────────────────────────────────────── */
.jrn-more {
  display: flex; justify-content: center;
  margin-top: var(--space-5);
}

/* ── Narrow phones ────────────────────────────────────────────────── */
/* The plate never shrinks below legible ja glyph size (brief); the day
   numeral steps down one notch and the column follows it. */
@media (max-width: 380px) {
  .jrn-line { --jrn-plate: var(--space-7); --jrn-gap: var(--space-3); }
  .jrn-plate .bcast-date { padding-left: var(--space-1); padding-right: var(--space-1); }
  .jrn-plate .bcast-date .d { font-size: var(--fs-2xl); }
}

@media (max-width: 640px) {
  .jrn-wrap { padding-left: var(--space-3); padding-right: var(--space-3); }
  .jrn-line { --jrn-plate: 58px; --jrn-gap: var(--space-3); }
  .jrn-ev { padding: var(--space-4); }
  .jrn-source { letter-spacing: .08em; }
  .jrn-memory-photos { grid-template-columns: minmax(0, 1fr); }
  .jrn-modal-backdrop { align-items: end; padding: 0; }
  .jrn-modal { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; padding: var(--space-4); }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jrn-ev { opacity: 1; transform: none; transition: none; }
}

/* Journey entry chip on player cards (wired at merge; module = journey.js) */
.card-journey {
  cursor: pointer;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  font: inherit; font-size: inherit;
  color: inherit;
  padding: 2px 10px;
  min-height: 28px;
  -webkit-tap-highlight-color: transparent;
}
.card-journey:active { background: var(--surface); }

/* ══════════════════════════════════════════════════════════════════
   FINANCIALS MOBILE
   Dual-rendered invoice cards and compact monthly statement. The
   configured offline-payment card is shared by mobile and desktop.
   ══════════════════════════════════════════════════════════════════ */

.finmob-pay-wrap { padding-bottom: 0; }
.finmob-pay {
  max-width: var(--max-page);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
}
.finmob-pay-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
html[lang="ja"] .finmob-pay-title { letter-spacing: var(--ls-normal); text-transform: none; }
.finmob-pay-bank { margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.finmob-pay-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.finmob-pay-account code {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.finmob-pay-account .btn { min-height: 44px; }
.finmob-pay-holder { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }

@media (max-width: 900px) {
  body.kh-view-parent .finmob-list {
    display: flex;
    flex-direction: column;
  }
  body.kh-view-parent .finmob-invoice {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  body.kh-view-parent .finmob-invoice:last-child { border-bottom: 0; }
  body.kh-view-parent .finmob-invoice:active { background: var(--bg-2); }
  body.kh-view-parent .finmob-invoice-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    flex: 1;
  }
  body.kh-view-parent .finmob-number {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-3);
  }
  body.kh-view-parent .finmob-amount {
    grid-row: span 2;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  body.kh-view-parent .finmob-date { font-size: var(--fs-sm); color: var(--text-2); }
  body.kh-view-parent .finmob-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    color: var(--text-3);
  }
  body.kh-view-parent .finmob-note {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--text-3);
  }
  body.kh-view-parent .finmob-empty { padding: var(--space-6) var(--space-4); }
  body.kh-view-parent .finmob-yearbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  body.kh-view-parent .finmob-yearbar > span {
    margin-right: var(--space-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-3);
  }
  body.kh-view-parent .finmob-statement {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-2);
  }
  body.kh-view-parent .finmob-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-2);
  }
  body.kh-view-parent .finmob-summary span { min-width: 0; }
  body.kh-view-parent .finmob-summary small,
  body.kh-view-parent .finmob-month small {
    display: block;
    font-size: var(--fs-xs);
    line-height: var(--lh-tight);
    color: var(--text-3);
  }
  body.kh-view-parent .finmob-summary strong {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  body.kh-view-parent .finmob-month {
    min-height: 44px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
  }
  body.kh-view-parent .finmob-month:last-child { border-bottom: 0; }
  body.kh-view-parent .finmob-month-name {
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-2);
  }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE HOME FEED (.design/hayato-reskin/PLAYER-JOURNEY.md)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .home-feed {
    margin: var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    overflow: hidden;
  }
  .feed-row {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    color: var(--text); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .feed-row + .feed-row { border-top: 1px solid var(--hair); }
  .feed-row:active { background: var(--surface); }
  .feed-row .bcast-date { flex: none; }
  .feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .feed-kicker {
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--text-3);
  }
  html[lang="ja"] .feed-kicker { letter-spacing: 0; }
  .feed-title {
    font-size: var(--fs-base); font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .feed-chev { flex: none; color: var(--text-4); font-size: var(--fs-lg); }
  .feed-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-4); }
  .feed-dot--info { background: var(--blue); }
  .feed-money.is-due  .feed-dot { background: var(--red); }
  .feed-money.is-due  .feed-title { color: var(--red); }
  .feed-money.is-paid .feed-dot { background: var(--green-tint); border: 1px solid var(--green); }
}

/* RSVP block at the foot of every training card. */
.training-agenda__rsvp { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.rsvp-q { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.rsvp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rsvp-name { font-weight: 600; font-size: 14px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsvp-btns { display: inline-flex; gap: 4px; flex-shrink: 0; }
.rsvp-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: 600 12px/1 var(--font-body); cursor: pointer; }
.rsvp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rsvp-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.plan-chip__booked { color: var(--text-3); }
.plan-chip__warn { color: var(--accent); font-weight: 600; }
/* Plan allowance strip above the training agenda: one chip per child. */
.plan-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.plan-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-size: 13px; color: var(--text); }
.plan-chip__ava { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink, #171E38); color: var(--paper, #F1EEE7); font: 600 12px/1 var(--font-body); }
.plan-chip__name { font-weight: 600; }
.plan-chip__text { color: var(--text-2); }
.plan-chip--full .plan-chip__text, .plan-chip--over .plan-chip__text { color: var(--accent); font-weight: 600; }
.plan-chip--muted .plan-chip__text { color: var(--text-3); }
.rsvp-remind { align-self: flex-start; margin-top: 2px; padding: 6px 0; border: 0; background: transparent; color: var(--text-2); font: 500 12px/1 var(--font-body); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.rsvp-remind.on { color: var(--text); }
.rsvp-notice { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); font-size: 14px; color: var(--text); }
.rsvp-notice .btn { margin-left: auto; white-space: nowrap; }
.tr-going { margin-left: 6px; }
/* Players page (coach/admin): phone-first toolbar, cards under 700px */
.ap-toolbar { display: flex; gap: 8px; align-items: stretch; margin: 4px 0 12px; }
.ap-search { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text-3); }
.ap-search svg { width: 18px; height: 18px; flex: none; }
.ap-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.ap-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ap-search:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(31,125,156,.18)); }
.ap-filter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ap-filter-btn svg { width: 18px; height: 18px; }
.ap-filter-btn.on { border-color: var(--ink); color: var(--ink); }
.ap-filter-btn b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--on-ink, #fff); font-size: 11px; line-height: 18px; text-align: center; }
.ap-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -4px; padding: 2px 4px 6px; }
.ap-scroll::-webkit-scrollbar { display: none; }
.ap-scroll .dl-tag { flex: none; min-height: 40px; }
.ap-active-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ap-active { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink, #fff); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ap-active span { opacity: .75; }
.ap-results-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-sheet-facet { padding: 10px 0 4px; border-top: 1px solid var(--border); }
.ap-sheet-facet:first-child { border-top: 0; padding-top: 0; }
.ap-sheet-facet .dl-tag-label { display: block; margin-bottom: 8px; }
.ap-sheet-facet .dl-tag { min-height: 40px; }
.ap-sheet-foot { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 14px 0 4px; margin-top: 8px; background: var(--surface); }
.ap-sheet-foot .btn.primary { flex: 1; }
.ap-list { display: none; }
.ap-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.ap-card:active { background: var(--surface-2); }
.ap-card--off .ap-card__name { color: var(--text-3); }
.ap-card__av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--on-ink, #fff); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ap-card__av--photo { background-size: cover; background-position: center; }
.ap-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-card__name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card__name em { font-style: normal; font-weight: 500; color: var(--blue, #1F7D9C); font-size: 13px; }
.ap-card__meta { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ap-card__att { font-family: var(--font-display); font-weight: 700; font-size: 14px; min-height: 16px; }
@media (max-width: 700px) {
  .ap-list { display: block; }
  .ap-table { display: none; }
  .ap-filter-btn span { display: none; }
  .ap-filter-btn { padding: 0 12px; }
  .ap-results-head .btn.sm { flex: 1; }
}
/* Phone brand bar — the sidebar head's crest + name, shown only when the
   sidebar is hidden (signed-in views ≤900px). */
.kh-brandbar { display: none; }
@media (max-width: 900px) {
  body[class*="kh-view-"] .kh-brandbar {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: max(10px, calc(env(safe-area-inset-top, 0px) + 8px)) 16px 10px;
    background: var(--ink, #111a20); color: #f7f2e9; border: 0; text-align: left;
    font: inherit; cursor: pointer;
  }
  .kh-brandbar__crest { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
  .kh-brandbar__crest--initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink, #111a20); }
  .kh-brandbar__name { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* This month, per child — the hero's information block (replaces the kid strip) */
.kid-sess { display: grid; gap: 6px; margin-top: 18px; }
.kid-sess__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px 8px 6px; margin: 0 -6px; border-radius: var(--r-2); color: var(--paper, #f7f2e9); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.kid-sess__row:active, .kid-sess__row:hover { background: color-mix(in srgb, var(--paper, #f7f2e9) 8%, transparent); }
.kid-sess__row:focus-visible { outline: 2px solid var(--paper, #f7f2e9); outline-offset: 2px; }
.kid-sess__ava { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper, #f7f2e9); color: var(--ink); font-weight: 700; font-size: 17px; background-size: cover; background-position: center; }
.kid-sess__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kid-sess__name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.kid-sess__name i { font-style: normal; font-weight: 500; font-size: 12px; opacity: .72; margin-left: 6px; }
.kid-sess__line { font-size: 13px; line-height: 1.35; opacity: .86; }
.kid-sess__line .is-over { color: var(--accent-warm, #e5243a); font-weight: 700; }
.kid-sess__meter { display: flex; gap: 4px; margin-top: 3px; }
.kid-sess__meter i { display: block; width: 18px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--paper, #f7f2e9) 18%, transparent); }
.kid-sess__meter i.is-att { background: var(--paper, #f7f2e9); }
.kid-sess__meter i.is-booked { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper, #f7f2e9) 70%, transparent); }
.kid-sess__meter i.is-over { background: var(--accent-warm, #e5243a); }
.kid-sess__bar { display: block; height: 6px; border-radius: 3px; margin-top: 4px; background: color-mix(in srgb, var(--paper, #f7f2e9) 18%, transparent); overflow: hidden; }
.kid-sess__bar i { display: block; height: 100%; background: var(--paper, #f7f2e9); }
.kid-sess__chev { flex: none; font-size: 22px; line-height: 1; opacity: .5; }
@media (min-width: 701px) {
  .kid-sess { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 18px; }
  .kid-sess__row { border: 1px solid color-mix(in srgb, var(--paper, #f7f2e9) 14%, transparent); margin: 0; padding: 10px 12px; }
}
/* Tap targets on the home body */
.up-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.cf-like { min-width: 44px; justify-content: center; }
.up-empty p { margin: 0 0 4px; font-size: 14px; color: var(--text-2); }
/* Quiet notice on paper — the hero already carries the one red button */
.dl-notices .fq-banner.fq-banner--quiet, .fq-banner--quiet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 13px 16px; background: var(--paper, var(--surface)); border: 1px solid var(--border); border-left: 3px solid var(--ink); border-radius: var(--r-2); font-size: 13.5px; line-height: 1.5; color: var(--text); }
.fq-banner--quiet .fq-banner__txt { flex: 1; min-width: 200px; }
.dl-notices .fq-banner.fq-banner--quiet { background: var(--paper, #f7f2e9) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--ink) !important; color: var(--text) !important; }
.fq-banner--quiet .section-link { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-weight: 700; }
/* Weather atmosphere — a wash per sky on every hero (.hero: stone,
   .dl-day: ink). Woven in, never a picture: gradients at low opacity,
   hairline streaks for rain, a warm corner glow for sun. */
.dl-day { transition: background-image .8s ease; }
.hero-wx { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: color-mix(in srgb, var(--hero-ink, var(--text)) 80%, transparent); }
.hero-wx__glyph { font-size: 16px; line-height: 1; }
.hero-wx__txt b { font-weight: 700; color: var(--hero-ink, var(--text)); }
.hero-wx__say { font-style: italic; opacity: .85; }
.hero-wx__bit + .hero-wx__bit::before { content: ' · '; font-style: normal; opacity: .7; }
/* A phone gets the phrase; the rain chance yields to it (it is on the Schedule). */
@media (max-width: 420px) { .hero-wx__txt.has-say .hero-wx__rain { display: none; } }
/* On the ink home band the line reads in paper, temperature included. */
.dl-day .hero-wx__txt, .dl-day .hero-wx__txt b { color: var(--paper, #f7f2e9); }
body.kh-wx-fog   .hero { background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(190,196,206,.25)); }
body.kh-wx-rain  .hero { background-image: repeating-linear-gradient(115deg, rgba(58,80,118,.10) 0 1px, transparent 1px 9px), linear-gradient(180deg, rgba(70,96,134,.24), transparent 75%); }
body.kh-wx-snow  .hero { background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%), radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.8), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.5), transparent); }
body.kh-wx-clear .dl-day { background-image: radial-gradient(110% 80% at 100% 0%, rgba(255,196,110,.22), transparent 55%); }
body.kh-wx-cloud .dl-day { background-image: linear-gradient(180deg, rgba(150,165,190,.16), transparent 70%); }
body.kh-wx-fog   .dl-day { background-image: linear-gradient(180deg, rgba(220,224,232,.22), transparent 80%); }
body.kh-wx-rain  .dl-day { background-image: repeating-linear-gradient(115deg, rgba(160,190,230,.14) 0 1px, transparent 1px 9px), linear-gradient(180deg, rgba(80,120,170,.22), transparent 75%); }
body.kh-wx-storm .dl-day { background-image: repeating-linear-gradient(112deg, rgba(200,210,240,.12) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(10,14,40,.45), rgba(10,14,40,.1)); }
body.kh-wx-snow  .dl-day { background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%), radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.8), transparent 60%); }
body.kh-wx-night .dl-day { background-image: radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.5px 1.5px at 60% 15%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.5px 1.5px at 85% 45%, rgba(255,255,255,.5), transparent 60%), linear-gradient(180deg, rgba(0,0,20,.35), transparent); }
@media (prefers-reduced-motion: reduce) { .dl-day { transition: none; } }
/* Home hero: club crest in the chapter-number spot */
.dl-crest { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.18); flex: none; }
.cf-ava--crest { object-fit: cover; padding: 0; background: #fff; }
/* Route tab strip: the other pages of the active sidebar group */
.kh-route-tabs { margin-left: var(--side-w); padding: 10px 28px 0; background: var(--bg); }
.kh-route-tabs .kh-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.kh-route-tabs .kh-tab { white-space: nowrap; }
@media (max-width: 900px) { .kh-route-tabs { margin-left: 0; padding: 8px 12px 0; } }
.tr-pat-grid { display: grid; gap: 8px; max-width: 760px; }
.tr-pat-edit { display: grid; grid-template-columns: 110px 28px minmax(150px, 1fr) minmax(150px, 1fr); gap: 8px; align-items: center; }
.tr-pat-edit strong { font-size: 13px; }
.tr-pat-edit input[type="text"] { padding: 9px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text); font: inherit; min-width: 0; }
@media (max-width: 640px) { .tr-pat-edit { grid-template-columns: 90px 28px 1fr; } .tr-pat-edit input[type="text"]:last-child { grid-column: 3; } }
.tr-note .tr-main > span { display: block; }
.tr-note-feed { margin-left: 4px; font-size: 10px; }
.tr-note-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tr-note-body { white-space: pre-wrap; margin-top: 6px; color: var(--text); line-height: 1.55; }
.tr-note-photos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tr-note-photo { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-2); border: 1px solid var(--border); }
.tr-extra { margin-left: 6px; background: var(--accent-warm, #C45120); color: #fff; font-size: 10px; }
.tr-going--none { color: var(--text-3); background: transparent; border: 1px dashed var(--border); }
.tr-going-list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.tr-going-name { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
/* PDPA marker on registration / add-player fields */
.reg-pdpa { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-3); vertical-align: middle; margin-left: 4px; text-transform: uppercase; }
.reg-pdpa-note { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 4px 0 14px; }
/* Add a player: plan picker + the plan comparison sheet */
.ap-plan-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.ap-plan-row .kh-input { flex: 1; margin-bottom: 0; }
.ap-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ap-plan-card { border: 1px solid var(--border); border-radius: var(--r-2); padding: 14px; background: var(--surface-2); }
.ap-plan-name { font-weight: 700; font-size: 15px; color: var(--text); }
.ap-plan-price { font: 500 22px/1.1 var(--font-display); color: var(--text); margin: 6px 0 8px; }
.ap-plan-price span { display: block; font: 400 11px/1.4 var(--font-body, inherit); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }
.ap-plan-line { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.toast.warning { background: var(--accent-warm, #C45120); color: #fff; }
/* Best Players of the session — Mark Attendance */
/* Schedule: enrol / withdraw affordances on the tournament card */
.fix-enrol-btn, .fix-withdraw { cursor: pointer; background: transparent; border: 0; font: inherit; min-height: 32px; padding: 0 6px; }
.fix-enrol-btn { color: var(--accent); font-weight: 700; }
.fix-withdraw { color: var(--text-3); font-size: 11px; text-decoration: underline; }
.fix-places { margin-top: 6px; color: var(--text-3); font-size: 12px; }
/* Command Center — one glance (owner, 12 Sep). Paper cards on a hairline,
   Today as the dominant card, everything else a quiet list. */
.cc2 { padding-top: 14px; }
.cc2-grid { display: grid; gap: 14px; }
.cc2-col { display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) {
  .cc2-grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .cc2-col--wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
.cc2-card { padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); min-width: 0; }
.cc2-card[hidden] { display: none; }
.cc2-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.cc2-skel { height: 56px; border-radius: var(--r-2); background: linear-gradient(90deg, var(--surface-2), var(--bg-2, var(--surface-2)), var(--surface-2)); background-size: 200% 100%; animation: cc2-shimmer 1.2s linear infinite; }
@keyframes cc2-shimmer { to { background-position: -200% 0; } }
.cc2-empty, .cc2-muted { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.cc2-err { font-size: 13px; color: var(--red); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Today: the one card that gets the ink treatment */
.cc2-card--today { background: var(--ink); color: var(--paper, #f7f2e9); border-color: var(--ink); }
.cc2-card--today .cc2-eyebrow { color: color-mix(in srgb, var(--paper, #f7f2e9) 70%, transparent); }
.cc2-today__when { font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: .8; }
.cc2-today__title { margin: 4px 0 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 5vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.cc2-today__stats { display: flex; gap: 22px; margin-bottom: 12px; }
.cc2-stat { display: flex; flex-direction: column; }
.cc2-stat b { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 600; }
.cc2-stat span { font-size: 12px; opacity: .8; margin-top: 4px; }
.cc2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cc2-chip { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--paper, #f7f2e9) 14%, transparent); border: 1px solid color-mix(in srgb, var(--paper, #f7f2e9) 22%, transparent); }
.cc2-chip--more { opacity: .7; }
.cc2-card--today .cc2-muted { color: color-mix(in srgb, var(--paper, #f7f2e9) 70%, transparent); margin-bottom: 14px; }
.cc2-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cc2-card--today .btn.ghost { color: var(--paper, #f7f2e9); border-color: color-mix(in srgb, var(--paper, #f7f2e9) 40%, transparent); }
/* Rows: a date plate, a title line, a right-hand figure */
.cc2-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.cc2-row:first-child { border-top: 0; }
.cc2-plate { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 5px; align-items: end; color: var(--text-3); text-transform: uppercase; font-size: 9px; letter-spacing: .06em; line-height: 1; }
.cc2-plate b { grid-row: 1 / 3; align-self: center; font: 500 22px/1 var(--font-display); color: var(--text); letter-spacing: -.03em; }
.cc2-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc2-row__t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc2-row__s { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc2-row__r { font-size: 13px; color: var(--text-2); white-space: nowrap; text-align: right; }
.cc2-row__r b { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.cc2-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
.cc2-foot b { font-family: var(--font-display); font-size: 20px; color: var(--text); }
/* The queues: one card each, the hot ones first */
.cc2-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--hero-ink, var(--text)); }
.cc2-summary b { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 600; }
.cc2-summary__ok { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--hero-ink, var(--text)) 10%, transparent); color: var(--ok, #2E7D4F); font-weight: 700; align-self: center; }
.cc2-queues { display: grid; gap: 10px; }
.cc2-q { padding: 0; overflow: hidden; }
.cc2-q__head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cc2-q__n { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; background: var(--surface-2); color: var(--text-3); }
.cc2-q.is-hot .cc2-q__n { background: var(--accent-warm, #e5243a); color: #fff; }
.cc2-q__l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc2-q__l b { font-size: 15px; font-weight: 700; }
.cc2-q__l span { font-size: 12px; color: var(--text-3); }
.cc2-q.is-zero .cc2-q__l b { color: var(--text-2); font-weight: 600; }
.cc2-q__items { border-top: 1px solid var(--border); padding: 4px 16px 10px 70px; display: grid; }
.cc2-q__item { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; min-height: 36px; padding: 6px 0; border-top: 1px solid var(--border); color: var(--text-2); text-decoration: none; font-size: 13px; }
.cc2-q__item:first-child { border-top: 0; }
.cc2-q__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc2-q__item i { font-style: normal; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cc2-q__more { display: inline-block; padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cc2-skel--sm { height: 36px; margin: 8px 0; }
@media (min-width: 900px) { .cc2-col--full { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cc2-q__items { padding-left: 16px; } }
/* Needs you */
.cc2-queue { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cc2-queue:first-child { border-top: 0; }
.cc2-queue__n { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-warm, #e5243a); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.cc2-queue__l { flex: 1; font-weight: 600; font-size: 14px; }
.cc2-arrow { color: var(--text-3); }
.cc2-clear { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.cc2-clear__mark { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ok, #2E7D4F); font-weight: 700; }
/* Squad */
.cc2-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cc2-big b { font-family: var(--font-display); font-size: 34px; line-height: 1; font-weight: 600; }
.cc2-big span { font-size: 13px; color: var(--text-3); }
.cc2-bands { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cc2-band { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text-2); }
.cc2-band b { color: var(--text); }
.cc2-gap { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
.cc2-gap b { font-family: var(--font-display); font-size: 18px; min-width: 28px; }
.cc2-gap span:nth-child(2) { flex: 1; }
/* Activity */
.cc2-act { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.cc2-act:first-child { border-top: 0; }
.cc2-act__t { color: var(--text-2); min-width: 0; }
.cc2-act__t b { color: var(--text); font-weight: 600; }
.cc2-act__t i { font-style: normal; color: var(--text-3); }
.cc2-act__w { color: var(--text-3); white-space: nowrap; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .cc2-skel { animation: none; } }
/* Mark attendance — phone-first (owner, 12 Sep). Ink on paper: present
   is an ink tile with paper type, excused a dashed hairline, unmarked paper. */
.att-page { padding-top: 14px; }
.att-bar { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.att-date { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); color: var(--text-2); }
.att-date svg { width: 18px; height: 18px; flex: none; }
.att-date input { border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; width: 132px; }
.att-sess { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.att-sess__day { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.att-sess__what { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-sess__what--none { font-weight: 500; color: var(--text-3); white-space: normal; }
.att-sync { grid-column: 1 / -1; justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); padding: 2px 0; }
.att-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 12px; padding: 0 4px; }
.att-cats::-webkit-scrollbar { display: none; }
.att-cats .dl-seg__btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.att-cat--off { opacity: .55; }
.att-cat__n { font-size: 11px; font-weight: 600; opacity: .7; }
.att-head { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); margin-bottom: 10px; }
.att-head__txt { flex: 1; min-width: 0; }
.att-head__n { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.att-head__n b { font-weight: 700; }
.att-head__exc { font-family: var(--font-body); font-size: 13px; color: var(--text-3); }
.att-head__bar { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.att-head__bar i { display: block; height: 100%; background: var(--ink); transition: width .3s ease; }
.att-head .btn.sm { flex: none; min-height: 40px; }
.att-search { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.att-search__field { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text-3); }
.att-search__field svg { width: 18px; height: 18px; flex: none; }
.att-search__field input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.att-search__field:focus-within { border-color: var(--accent); }
.att-search .dl-tag { flex: none; min-height: 44px; }
.att-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .att-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.att-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 112px; padding: 14px 10px 30px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.att-tile:active { transform: scale(.98); }
.att-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.att-tile__ava { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--on-ink, #fff); font-family: var(--font-display); font-weight: 700; font-size: 16px; background-size: cover; background-position: center; }
.att-tile__tag { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tile__name { font-size: 11px; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tile__state { position: absolute; top: 8px; right: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.att-tile__exc { position: absolute; left: 8px; bottom: 8px; min-width: 44px; min-height: 22px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--surface); line-height: 16px; }
.att-tile.is-present { background: var(--ink); border-color: var(--ink); color: var(--on-ink, #fff); }
.att-tile.is-present .att-tile__ava { background: var(--on-ink, #fff); color: var(--ink); }
.att-tile.is-present .att-tile__name { color: color-mix(in srgb, var(--on-ink, #fff) 70%, transparent); }
.att-tile.is-present .att-tile__state { color: var(--on-ink, #fff); font-size: 16px; }
.att-tile.is-present .att-tile__exc { border-color: color-mix(in srgb, var(--on-ink, #fff) 30%, transparent); background: transparent; color: color-mix(in srgb, var(--on-ink, #fff) 75%, transparent); }
.att-tile.is-excused { border: 1.5px dashed var(--text-3); background: var(--surface-2); }
.att-tile.is-excused .att-tile__state { color: var(--text-2); }
.att-tile.is-excused .att-tile__exc { background: var(--ink); color: var(--on-ink, #fff); border-color: var(--ink); }
.att-hint { margin: 12px 0 0; font-size: 12px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .att-tile, .att-head__bar i { transition: none; } }
.att-best { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.att-best__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.att-best__title { font: 600 17px/1.3 var(--font-display); color: var(--text); }
.att-best__sub { font-size: 13px; color: var(--text-3); }
.att-best__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.att-best__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 12px; border-radius: var(--r-full); background: #FFE082; color: #5D3A17; font-weight: 600; font-size: 14px; }
.att-best__chip--empty { background: transparent; border: 1px dashed var(--border-2); color: var(--text-3); font-weight: 500; padding: 0 12px; }
.att-best__star { color: #E65100; }
.att-best__x { border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 50%; }
.att-best__x:hover, .att-best__x:focus-visible { background: rgba(0,0,0,0.08); outline: none; }
.att-best__add { display: flex; gap: 8px; align-items: center; }
.att-best__add select { flex: 1; min-height: 40px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: inherit; }
.att-best__hint { font-size: 13px; color: var(--text-3); }
.sq-card__best { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: var(--r-full); background: #FFE082; color: #5D3A17; font: 600 11px/1.4 var(--font-body); }
.fix-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.fix-facts span::before { content: '·'; margin-right: 6px; color: var(--text-3); }
.fix-facts span:first-child::before { content: none; margin: 0; }
.att-best__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
/* Club library */
.lib-scope .lib-shelf { margin-top: var(--space-5, 24px); }
.lib-shelf__count { font-size: 12px; color: var(--text-3); margin-left: 8px; font-variant-numeric: tabular-nums; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.lib-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); overflow: hidden; }
.lib-card__media { display: block; aspect-ratio: 16 / 9; background: var(--paper-2, #E9E8E1); }
.lib-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-card__thumb--doc { display: grid; place-items: center; font-size: 34px; color: var(--text-3); }
.lib-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.lib-card__title { font-weight: 600; color: var(--text); text-decoration: none; }
.lib-card__title:hover, .lib-card__title:focus-visible { color: var(--accent); }
.lib-card__desc { margin: 0; font-size: 13px; color: var(--text-2); }
.lib-card__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: var(--text-3); align-items: center; }
.lib-card__band { padding: 1px 7px; border-radius: var(--r-full); border: 1px solid var(--border-2); color: var(--text-2); }
.lib-card__band--all { border-style: dashed; }
.lib-card__tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.lib-card__remove { align-self: flex-start; margin-top: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--text-3); font: 500 12px/1 var(--font-body); text-decoration: underline dotted; cursor: pointer; }
.lib-card__remove:hover { color: var(--accent); }
.lib-add { margin-bottom: var(--space-3); }
.lib-add--open { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.lib-add__row { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-add__row .field { flex: 1 1 200px; }
.lib-add__grow { flex: 2 1 260px; }
.lib-add .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.lib-add .field input, .lib-add .field select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: inherit; }
.lib-add__bands { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-2); align-items: center; }
.lib-add__actions { display: flex; gap: 8px; }
/* Rugby quiz — coach side */
.qz-list { display: grid; gap: 10px; margin-top: var(--space-3); }
.qz-q { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.qz-q--off { opacity: 0.6; }
.qz-q__head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.qz-q__retire { margin-left: auto; border: 0; background: transparent; color: var(--text-3); font: 500 12px/1 var(--font-body); text-decoration: underline dotted; cursor: pointer; }
.qz-q__text { margin-top: 6px; font-weight: 600; color: var(--text); }
.qz-q__opts { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; font-size: 14px; color: var(--text-2); }
.qz-opt--right { color: var(--ok, #2E7D4F); font-weight: 600; }
.qz-q__explain { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.qz-add { margin-bottom: var(--space-3); }
.qz-add--open { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.qz-add .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.qz-add .field input, .qz-add .field select, .qz-add__opt input[type=text], .qz-add__opt input:not([type=radio]) { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: inherit; }
.qz-add__hint { font-size: 12px; color: var(--text-3); }
.qz-add__opts { display: grid; gap: 6px; }
.qz-add__opt { display: flex; align-items: center; gap: 10px; }
.qz-add__opt input:not([type=radio]) { flex: 1; }
.qz-send { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); margin-top: var(--space-3); }
.qz-send .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.qz-send .field input, .qz-send .field select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: inherit; }
.qz-send__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.qz-picklist { display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.qz-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-1, 6px); background: var(--surface); font-size: 14px; cursor: pointer; }
.qz-pick.on { border-color: var(--accent); }
.qz-pick__text { flex: 1; }
.qz-pick__band { font-size: 11px; color: var(--text-3); }
.qz-results { display: grid; gap: 10px; margin-top: var(--space-3); }
.qz-res { border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); overflow: hidden; }
.qz-res--closed { opacity: 0.75; }
.qz-res__head { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.qz-res__title { font-weight: 600; }
.qz-res__meta { grid-column: 1; font-size: 12px; color: var(--text-3); }
.qz-res__stat { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.qz-res__body { padding: 0 14px 12px; border-top: 1px solid var(--border); }
.qz-res__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.qz-res__pct { color: var(--text-3); margin-left: 6px; }
.qz-res__pending { color: var(--text-3); font-size: 13px; }
/* Rugby quiz — family home card + play screen */
.dl-quiz { padding: 12px var(--gutter, 24px); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.dl-quiz__inner { max-width: var(--content-max, 1080px); margin: 0 auto; display: grid; gap: 8px; }
.dl-quiz__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.qz-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); color: var(--text); text-decoration: none; }
.qz-card__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; flex-shrink: 0; }
.qz-card--done .qz-card__ico { background: var(--ok, #2E7D4F); }
.qz-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qz-card__title { font-weight: 600; }
.qz-card__meta { font-size: 12px; color: var(--text-3); }
.qz-card__cta { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.qz-play { display: grid; gap: 14px; }
.qz-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.qz-item--right { border-color: var(--ok, #2E7D4F); }
.qz-item--wrong { border-color: var(--accent); }
.qz-item__no { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.qz-item__text { margin: 4px 0 10px; font: 600 17px/1.35 var(--font-body); color: var(--text); }
.qz-item__img { max-width: 100%; border-radius: var(--r-1, 6px); margin-bottom: 10px; }
.qz-item__opts { display: grid; gap: 6px; }
.qz-ans { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: 500 15px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.qz-ans.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.qz-ans--right { border-color: var(--ok, #2E7D4F); background: var(--ok-soft, #DDEFE3); }
.qz-ans--wrong { border-color: var(--accent); background: var(--accent-soft, #F6E1DE); }
.qz-ans:disabled { cursor: default; }
.qz-ans__key { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2, #E9E8E1); color: var(--text-2); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.qz-item__explain { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.qz-submit { display: flex; justify-content: center; padding: 6px 0 24px; }
.qz-score { text-align: center; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.qz-score__big { font: 600 44px/1 var(--font-display); color: var(--text); }
.qz-score__big span { font-size: 22px; color: var(--text-3); }
.qz-score__txt { margin-top: 6px; color: var(--text-2); }
/* Calendar subscription box under the fixtures intro */
.fix-sub { margin: 0 0 var(--space-3); padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); font-size: 14px; color: var(--text); }
.fix-sub--err { color: var(--accent); }
.fix-sub__title { font-weight: 600; margin-bottom: 4px; }
.fix-sub__hint { margin: 0 0 10px; font-size: 13px; color: var(--text-2); max-width: 68ch; }
.fix-sub__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fix-sub__url { flex: 1 1 260px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: 13px/1 var(--mono, ui-monospace, monospace); }
.fix-sub__rotate { margin-top: 8px; border: 0; background: transparent; color: var(--text-3); font: 500 12px/1 var(--font-body); text-decoration: underline dotted; cursor: pointer; }
/* Score grid */
.grid__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: var(--space-3); }
.grid__wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
table.grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; }
table.grid th, table.grid td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
table.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
table.grid th.grid__name { position: sticky; left: 0; z-index: 3; text-align: left; background: var(--surface-2); min-width: 130px; }
table.grid thead th.grid__name { z-index: 4; }
.grid__nm { display: block; font-weight: 600; color: var(--text); }
.grid__band { display: block; font-size: 11px; color: var(--text-3); }
.grid__cell { width: 58px; min-height: 38px; padding: 6px 4px; text-align: center; border: 1px solid var(--border-2); border-radius: var(--r-1, 6px); background: var(--surface); color: var(--text); font: 600 15px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.grid__cell::placeholder { color: var(--text-3); opacity: 0.55; font-weight: 400; }
.grid__cell:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.grid__cell--dirty { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.grid__cell--bad { border-color: var(--crit, #B3261E); background: var(--crit-soft, #F6DAD7); }
tr.grid__row--dirty th.grid__name { box-shadow: inset 3px 0 0 var(--accent); }
.grid__foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--space-3); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); }
.grid__stat { font-size: 13px; color: var(--text-2); }
@media (max-width: 640px) { table.grid th.grid__name { min-width: 96px; } .grid__cell { width: 48px; } }
/* Share links (feed posts, Journey achievements) */
.kh-share { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kh-share__btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--r-full); background: var(--surface); color: var(--text); font: 600 12px/1 var(--font-body); text-decoration: none; cursor: pointer; }
.kh-share__btn:hover, .kh-share__btn:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.cf-share-slot:empty { display: none; }
.cf-share-slot { padding: 0 14px 12px; }
.jrn-share { margin-top: 6px; border: 0; background: transparent; color: var(--text-3); font: 500 12px/1 var(--font-body); text-decoration: underline dotted; cursor: pointer; padding: 4px 0; }
.jrn-share:hover { color: var(--accent); }
/* Attendance trends */
table.att-tr td small { display: block; font-size: 10px; color: var(--text-3); }
table.att-tr td { min-width: 64px; }
.att-tr__na { color: var(--text-3); }
.att-tr__list { display: grid; gap: 6px; }
.att-tr__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); font-size: 14px; }
.att-tr__band { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.att-tr__series { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Upcoming schedule rail (family home) */
.up-rail { align-self: start; }
.up-rail .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.up-all { font-size: 13px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.up-all:hover, .up-all:focus-visible { text-decoration: underline; }
.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.up-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); border-left-width: 3px; }
.up-item--training { border-left-color: var(--accent-warm, var(--accent)); }
.up-item--friendly { border-left-color: var(--blue, #1F7D9C); }
.up-item--tournament { border-left-color: var(--accent); }
.up-item--event { border-left-color: var(--ok, #2E7D4F); }
.up-date { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; align-items: end; column-gap: 6px; color: var(--text-3); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; line-height: 1; }
.up-date b { grid-row: 1 / 3; align-self: center; font: 500 26px/1 var(--font-display); color: var(--text); letter-spacing: -0.03em; }
.up-body { display: flex; flex-direction: column; min-width: 0; }
.up-kind { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.up-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content > .up-rail { margin-top: var(--space-5, 24px); }
.up-hint { margin: -6px 0 10px; font-size: 12px; color: var(--text-3); }
.up-who { font-size: 12px; color: var(--text-2); font-weight: 600; }
.up-bell { font-size: 11px; }
.up-empty { display: grid; gap: 10px; justify-items: start; }
.sq-gc-best { margin-top: 8px; font: 600 13px/1.3 var(--font-body); color: #FFD54F; letter-spacing: 0.02em; }