/* Matchday — same hand-written design system as jNMS: light-first, CSS
   variables, zero build step, dark theme as a small override at the bottom. */

/* Self-hosted Inter (variable, roman). The whole system is tuned for Inter —
   headings use negative letter-spacing that assumes it — so bundling it means
   every device gets the intended look, not a system-font approximation.
   font-display: swap paints immediately in the fallback, then swaps in. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* Surfaces */
  --bg: #f5f6f8;          /* app canvas */
  --bg-2: #ffffff;        /* cards, sidebar */
  --bg-3: #f0f1f4;        /* subtle hover / inset */
  --border: #e8eaee;
  --border-2: #dcdfe5;

  /* Text */
  --text: #1a1d23;
  --text-dim: #5a6472;
  --text-faint: #949cab;

  /* Brand accent (violet) */
  --accent: #6c47ff;
  --accent-strong: #5834e6;
  --accent-soft: rgba(108, 71, 255, .10);

  /* Status */
  --up: #16a34a;      --up-bg: #e7f6ec;     --up-text: #0a7a37;
  --down: #e5484d;    --down-bg: #fdecec;   --down-text: #b42318;
  --warn: #dd8a0a;    --warn-bg: #fdf3e2;   --warn-text: #b45309;
  --unknown: #8a93a3; --unknown-bg: #eef0f3; --unknown-text: #566072;

  /* Pitch */
  --pitch-1: #3f9e58;
  --pitch-2: #35914d;
  --pitch-line: rgba(255, 255, 255, .35);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);
  --shadow-lift: 0 4px 16px rgba(16, 24, 40, .10);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); }

/* ---- Layout ------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;                 /* keep the footer (log out/theme) reachable
                                       when the nav is taller than the viewport */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #7c5cff, #6c47ff 55%, #5834e6);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 2px 8px rgba(108, 71, 255, .35);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px;
  color: var(--text-dim); font-weight: 500;
}
.sidebar nav a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }
.sidebar nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); padding: 14px 12px 4px;
}
.sidebar-foot { margin-top: auto; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.theme-toggle {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 11px; cursor: pointer; color: var(--text-dim);
  font-size: 13px; font-weight: 500; font-family: var(--font);
}
.theme-toggle:hover { background: var(--bg-3); color: var(--text); }
.theme-toggle.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; }
.content { flex: 1; padding: 28px 36px; max-width: 1440px; width: 100%; min-width: 0; }

/* Mobile top bar + drawer scrim: hidden on desktop, shown under 820px. */
.mobile-topbar { display: none; }
.nav-scrim { display: none; }
.mobile-brand { color: var(--text); text-decoration: none; }
.mobile-brand:hover { text-decoration: none; }

/* Back-to-top button: appears once you've scrolled down, any screen size. */
/* ---- Feedback ------------------------------------------------------------
   A quiet button on every page. Deliberately not an accent-filled circle like
   .to-top: it should be findable but never compete with the page's own
   actions. A <details>, so open/close needs no JavaScript. */
.fb-item .card-pad { padding-top: 13px; padding-bottom: 13px; }
.fb-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; margin-bottom: 7px; }
.fb-who { font-weight: 650; }
.fb-msg { margin: 0 0 10px; white-space: pre-wrap; line-height: 1.55; }
.fb-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: space-between; }
.fb-src { font-size: 12px; color: var(--text-dim); }
.nav-badge {
  margin-left: auto; min-width: 19px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  text-align: center; line-height: 17px;
}
.fb { position: fixed; right: 16px; bottom: 16px; z-index: 26; }
.fb-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 13px; border-radius: 999px; list-style: none;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border); box-shadow: var(--shadow-lift);
  font-size: 13px; font-weight: 600; opacity: .82; transition: opacity .15s;
}
.fb-btn::-webkit-details-marker { display: none; }
.fb-btn:hover, .fb[open] .fb-btn { opacity: 1; color: var(--text); }
.fb-btn svg { width: 17px; height: 17px; }
.fb-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 14px;
}
.fb-lbl { display: block; font-weight: 650; font-size: 14px; margin-bottom: 3px; }
.fb-hint { color: var(--text-dim); font-size: 12px; margin: 0 0 9px; }
.fb-panel textarea { width: 100%; font: inherit; font-size: 13px; }
.fb-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.fb-page {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-faint); font-size: 11.5px;
}
/* Sits above the feedback button rather than on top of it. */
.to-top {
  position: fixed; right: 16px; bottom: 70px; z-index: 25;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); border: none; color: #fff; cursor: pointer;
  box-shadow: var(--shadow-lift); display: grid; place-items: center;
  opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s;
}
.to-top.show { opacity: 1; transform: translateY(0); }
.to-top[hidden] { display: none; }
.to-top svg { width: 22px; height: 22px; }

/* ---- Header ------------------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.025em; }
.page-head .sub { color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.head-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
/* Match nav: a standalone "Live matchday" launch button sits above a row of
   view-switch tabs; detail-page action buttons (Simulate, Complete, Delete…)
   drop onto their own row below. The tab row is identical on every match page. */
.match-nav { margin: 4px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.match-nav-live { margin: 0 0 12px; }
.match-nav-live .btn-live { font-weight: 650; }
.match-tabs { gap: 9px; }
.match-actions { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.nav-view.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent); font-weight: 600;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text);
  font-size: 13px; font-weight: 550; cursor: pointer; font-family: var(--font);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--bg-3); text-decoration: none; }
.btn[hidden] { display: none !important; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(108, 71, 255, .35); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-danger { color: var(--down-text); border-color: #f1c7c7; }
.btn-danger:hover { background: var(--down-bg); border-color: var(--down); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-dim); }

/* Touch devices only (phones/tablets), so the compact mouse/desktop layout is
   untouched: give tap targets ≥44px, and set form controls to 16px so iOS
   Safari doesn't jerk-zoom the page when a field is focused. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  input[type=text], input[type=number], input[type=date], input[type=time],
  input[type=password], select, textarea { font-size: 16px; }
}
.btn-ghost:hover { background: var(--bg-3); color: var(--text); }

/* ---- Cards & stats ------------------------------------------------------ */
.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px 20px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--border);
}
.card-head h2 { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }

.stat-grid { display: grid; gap: 14px; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .num { font-size: 29px; font-weight: 750; line-height: 1.05; letter-spacing: -.03em; color: var(--text); }
.stat .lbl { color: var(--text-faint); font-size: 11px; margin-top: 7px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.stat.up .num { color: var(--up); }
.stat.down .num { color: var(--down); }
.stat.warning .num { color: var(--warn); }
.stat.total .num { color: var(--accent); }

/* ---- Status pills & dots ------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 650;
  line-height: 1.5; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.pill-up .dot { background: var(--up); }
.pill-down .dot { background: var(--down); }
.pill-warning .dot { background: var(--warn); }
.pill-unknown .dot { background: var(--unknown); }
.pill-up { background: var(--up-bg); color: var(--up-text); }
.pill-down { background: var(--down-bg); color: var(--down-text); }
.pill-warning { background: var(--warn-bg); color: var(--warn-text); }
.pill-unknown { background: var(--unknown-bg); color: var(--unknown-text); }
.result-pill { vertical-align: middle; margin-left: 6px; font-size: 13px; }

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 10px 16px; color: var(--text-faint);
  font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-2);
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-3); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.mono { font-family: var(--mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }

/* ---- Score badges (1-10) ------------------------------------------------ */
.score {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px;
  border-radius: 7px; font-weight: 700; font-size: 12.5px; font-family: var(--mono);
  background: var(--unknown-bg); color: var(--unknown-text);
}
.score-7, .score-8 { background: var(--up-bg); color: var(--up-text); }
.score-9, .score-10 { background: var(--accent-soft); color: var(--accent); }
.score-4, .score-5, .score-6 { background: var(--warn-bg); color: var(--warn-text); }
.score-1, .score-2, .score-3 { background: var(--down-bg); color: var(--down-text); }

/* ---- Utilisation bars --------------------------------------------------- */
.ubar { position: relative; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; min-width: 72px; }
.ubar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.ubar.warn > span { background: var(--warn); }
.ubar.hot > span { background: var(--down); }

/* ---- Attribute panels (player detail) ----------------------------------- */
.attr-columns { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.attr-title { margin: 0 0 12px; font-size: 12px; font-weight: 650; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.attr-row { display: grid; grid-template-columns: 118px 1fr 24px; align-items: center; gap: 12px; padding: 5px 0; }
.attr-label { font-size: 13px; color: var(--text-dim); }
.attr-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Forms -------------------------------------------------------------- */
form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 22px; }
.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; background: var(--bg-2); box-shadow: var(--shadow); }
.fieldset > legend { padding: 0 8px; font-weight: 650; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 550; color: var(--text-dim); }
/* text-dim (not text-faint) so the feature-explaining hints clear WCAG AA;
   bumped to 11.5px for a touch more legibility. text-faint stays for genuinely
   decorative/placeholder use. */
.field .hint, .hint { font-size: 11.5px; color: var(--text-dim); }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea {
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13px; font-family: var(--font); width: 100%;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.check { display: flex; align-items: center; gap: 9px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check label { color: var(--text); }
.form-actions { display: flex; gap: 12px; margin-top: 8px; align-items: center; flex-wrap: wrap; }

/* ---- Rating sliders ------------------------------------------------------ */
.rating-grid { display: grid; gap: 14px 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Basic vs advanced ratings view. Basic shows Overall + the four area sliders
   (.basic-only); advanced shows the individual attributes (.attr-advanced). */
.player-form:not(.show-advanced) .attr-advanced { display: none; }
.player-form.show-advanced .basic-only { display: none; }
.attr-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.attr-controls-lbl { font-weight: 650; font-size: 14px; margin-right: auto; }
.rating label { font-size: 13px; font-weight: 550; color: var(--text-dim); display: block; margin-bottom: 4px; }
.rating-ctl { display: flex; align-items: center; gap: 12px; }
.rating-val {
  min-width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-family: var(--mono); font-size: 13px;
}
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--bg-3); outline: none; padding: 0; border: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--bg-2);
  box-shadow: 0 1px 4px rgba(16, 24, 40, .25);
}
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--bg-2);
  box-shadow: 0 1px 4px rgba(16, 24, 40, .25);
}
input[type=range]:focus { box-shadow: none; }

/* ---- Availability picker ------------------------------------------------- */
.avail-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.avail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  cursor: pointer; background: var(--bg-2); transition: border-color .12s, background .12s;
}
.avail-item:hover { background: var(--bg-3); }
.avail-item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.avail-item input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.avail-name { font-weight: 550; flex: 1; }

/* ---- Match plan: pitch & intervals --------------------------------------- */
.interval-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pitch {
  margin: 14px; border-radius: var(--radius-sm);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background:
    repeating-linear-gradient(180deg, var(--pitch-1) 0 44px, var(--pitch-2) 44px 88px);
  border: 2px solid var(--pitch-line);
  padding: 16px 10px; display: flex; flex-direction: column; gap: 14px; min-height: 220px;
  justify-content: space-between;
}
.pitch-row { display: flex; justify-content: space-evenly; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2); color: var(--text);
  border-radius: 999px; padding: 4px 12px 4px 4px;
  font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  white-space: nowrap;
}
.chip-num {
  display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 0 4px;
}
.chip-gk .chip-num { background: var(--warn); }
.chip-mins {
  font-size: 10.5px; font-weight: 650; color: var(--text-faint);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  background: var(--bg-3); border-radius: 999px; padding: 1px 6px;
}
.bench { padding: 0 16px 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.bench-lbl { color: var(--text-faint); font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ---- Plan editor ---------------------------------------------------------- */
.editor-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.editor-tally .sticky-card { position: sticky; top: 20px; }
.slot-rows { display: flex; flex-direction: column; gap: 10px; }
.slot-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.slot-pos {
  display: grid; place-items: center; height: 34px; border-radius: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
}
.slot-pos-gk { background: var(--warn); }
.slot-pos-def { background: #2e6ff5; }
.slot-pos-mid { background: var(--up); }
.slot-pos-fwd { background: var(--down); }
.slot-selects { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.slot-select.dup { border-color: var(--down); box-shadow: 0 0 0 3px var(--down-bg); }
.tally-table td { padding: 8px 14px; }
.plan-mode { align-items: flex-start; }
.plan-mode input { margin-top: 3px; }
.share-low { color: var(--down-text); }
.scoreline { display: flex; gap: 14px; align-items: flex-end; max-width: 340px; }
.scoreline .field { flex: 1; }
.scoreline-dash { font-size: 22px; font-weight: 700; color: var(--text-faint); padding-bottom: 7px; }
.cell-input { max-width: 90px; padding: 6px 9px !important; }
.cell-input-sm { max-width: 64px; }
/* Second line under a numeric cell — the injury note beneath its minute. */
.cell-input-note { max-width: 110px; margin-top: 4px; font-size: 12px; }
.len-ctl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); }
.len-input { width: 62px; padding: 5px 8px !important; text-align: right; }
@media (max-width: 1100px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-tally .sticky-card { position: static; }
}

/* ---- Live matchday mode --------------------------------------------------- */
.live { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.live-scorebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; gap: 12px;
}
.live-team { text-align: center; min-width: 84px; }
.live-team .lt-name { display: block; font-size: 12.5px; font-weight: 650; color: var(--text-dim); }
.live-team .lt-goals { display: block; font-size: 38px; font-weight: 780; line-height: 1.1; letter-spacing: -.03em; }
.live-mid { text-align: center; }
.live-interval { display: block; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.live-timer { display: block; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.live-timer.timer-over { color: var(--down); }
.live-controls { display: flex; flex-direction: column; gap: 10px; }
.btn-big { justify-content: center; padding: 14px 18px; font-size: 15px; width: 100%; }
.live-msg { font-size: 13.5px; line-height: 1.5; }
.live-changes { background: var(--warn-bg); color: var(--warn-text); border-radius: var(--radius-sm); padding: 10px 13px; font-weight: 600; }
.live-pitch {
  margin: 14px; border-radius: var(--radius-sm);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background: repeating-linear-gradient(180deg, var(--pitch-1) 0 48px, var(--pitch-2) 48px 96px);
  border: 2px solid var(--pitch-line);
  padding: 16px 10px; display: flex; flex-direction: column; gap: 16px; min-height: 240px;
  justify-content: space-between;
}
.lchip { cursor: pointer; user-select: none; font-size: 13.5px; padding: 6px 14px 6px 5px; }
.lchip-empty { opacity: .65; border: 2px dashed rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .25); color: #fff; }
.lchip-empty .chip-num { background: rgba(255, 255, 255, .3); }
.lchip-selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.lchip-bench { box-shadow: none; border: 1px solid var(--border-2); }
/* Sent-off players sit on the bench but are locked out (no click). */
.lchip-out { box-shadow: none; border: 1px solid var(--border-2); opacity: .6; cursor: default; }
.lchip-out-tag { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--down, #e5484d); text-transform: uppercase; letter-spacing: .03em; }
.live-bench { padding: 0 16px 16px; }

/* Penalty shootout console */
.pen-tally { font-weight: 700; font-size: 15px; text-align: center; padding: 8px 0; }
.pen-log { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.pen-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center;
  padding: 5px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--border); font-size: 13px; }
.pen-row.pen-them { background: var(--bg-3); }
.pen-num { color: var(--text-dim); text-align: right; }
.pen-who { font-weight: 600; }
.pen-res { font-weight: 600; }
.pen-scored { color: var(--up, #16a34a); }
.pen-missed { color: var(--down, #e5484d); }
.report-pens { margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.live-bench .bench-lbl { margin-bottom: 8px; }
.live-bench-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.live-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.save-status { font-size: 12px; font-weight: 600; }
.save-status-off { color: var(--warn-text, #92400e); background: var(--warn-bg, #fef3c7); padding: 4px 10px; border-radius: 999px; }
.goal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* display:flex above would override the hidden attribute — restore it */
.goal-overlay[hidden] { display: none !important; }
.goal-box { width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal-player { justify-content: center; padding: 12px; font-size: 14.5px; }
.report-scorers { margin-top: 10px; font-size: 13px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---- Drill library --------------------------------------------------------- */
.drill-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-dim);
  box-shadow: var(--shadow);
}
.chip-filter:hover { color: var(--text); text-decoration: none; background: var(--bg-3); }
.chip-filter.chip-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.drill-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.drill-card { display: block; color: var(--text); overflow: hidden; transition: box-shadow .14s, transform .14s; }
.drill-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.drill-card .drill-svg { border-radius: var(--radius) var(--radius) 0 0; display: block; }
.drill-card-body { padding: 12px 15px 14px; }
.drill-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.drill-name { font-weight: 650; font-size: 14.5px; }
.drill-meta { font-size: 12px; margin-top: 2px; }
.drill-attrs { margin-top: 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.tag-hit { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tag-alt { opacity: .62; }
.drill-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }

/* Diagram SVG */
.drill-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dg-grass { fill: var(--pitch-1); }
.dg-zone { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .55);
  stroke-width: .5; stroke-dasharray: 2 1.4; }
.dg-goal { fill: none; stroke: #fff; stroke-width: 1.6; }
.dg-cone { fill: #ff9f43; stroke: rgba(0, 0, 0, .25); stroke-width: .3; }
.dg-player { fill: var(--accent); stroke: #fff; stroke-width: .7; }
.dg-opp { fill: var(--down); stroke: #fff; stroke-width: .7; }
.dg-keeper { fill: var(--warn); stroke: #fff; stroke-width: .7; }
.dg-ball { fill: #fff; stroke: #1a1d23; stroke-width: .5; }
.dg-ptext { fill: #fff; font-size: 3px; font-weight: 700; text-anchor: middle;
  font-family: var(--font); }
.dg-label { fill: rgba(255, 255, 255, .92); font-size: 3.4px; font-weight: 600;
  text-anchor: middle; font-family: var(--font); }
.dg-pass { stroke: #fff; stroke-width: .8; fill: none; }
.dg-shot { stroke: #fff; stroke-width: 1.5; fill: none; }
.dg-run { stroke: rgba(255, 255, 255, .85); stroke-width: .8; stroke-dasharray: 2.6 1.6; fill: none; }
.dg-dribble { stroke: #ffd166; stroke-width: .9; stroke-dasharray: 1.4 1.4; fill: none; }
.drill-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; margin-top: 10px; align-items: center; }
.drill-legend .lg-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; }
.lg-pass { border-color: var(--text-dim); }
.lg-run { border-color: var(--text-dim); border-top-style: dashed; }
.lg-dribble { border-color: #d9a012; border-top-style: dashed; }
.drill-legend .lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lg-us { background: var(--accent); }
.lg-them { background: var(--down); }
.lg-cone { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #ff9f43; margin-right: 5px; vertical-align: middle; }

/* Drill library — question-led two-column layout */
.drill-library { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.drill-ask { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.drill-ask .field { display: flex; flex-direction: column; gap: 4px; }
.drill-ask select { width: 100%; }
.btn-block { width: 100%; justify-content: center; }
.drill-prompt { text-align: center; padding: 40px 24px; }
.drill-prompt .big { font-size: 40px; }
.drill-results-head { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 13.5px; color: var(--text-dim); }
@media (max-width: 720px) {
  .drill-library { grid-template-columns: 1fr; }
  .drill-ask { position: static; }
}

/* Drill diagram editor */
.dged-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.dged-toolbar .tbtool-group { display: flex; gap: 4px; flex-wrap: wrap; }
.dged-toolbar .tbtool-spacer { flex: 1 1 auto; }
.dged-stage { max-width: 560px; }
.dged-svg { width: 100%; height: auto; aspect-ratio: 100 / 70; cursor: default; touch-action: none; }
.dged-svg.dged-draw { cursor: crosshair; }
.dged-svg [data-otype] { cursor: grab; }

/* Drill inside a session plan */
.activity-drill {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center;
  margin-top: 10px; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); background: var(--bg);
}
.activity-drill:hover { text-decoration: none; border-color: var(--accent); }
.activity-drill-info { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }

/* ---- Tabs ---------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.tab {
  border-bottom: 2px solid transparent;
  padding: 10px 15px; margin-bottom: -1px;
  color: var(--text-dim); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Availability -------------------------------------------------------- */
.row-out td { opacity: .55; }
.row-out td .pill { opacity: 1; }
.status-select { max-width: 150px; }
.status-select.status-sick { border-color: var(--warn); }
.status-select.status-injured, .status-select.status-unavailable { border-color: var(--down); }

/* ---- Match report --------------------------------------------------------- */
.report-layout { display: grid; grid-template-columns: minmax(0, 860px) 300px; gap: 22px; align-items: start; }
@media (max-width: 1040px) { .report-layout { grid-template-columns: 1fr; } }
.report { max-width: 860px; min-width: 0; }
.report-share { position: sticky; top: 20px; }
@media (max-width: 1040px) { .report-share { position: static; } }
.report-text {
  width: 100%; resize: vertical; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-wrap: normal;
  border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 12px;
  background: var(--bg-3); color: var(--text);
}
@media print { .report-layout { display: block; } }
.report-head { padding: 26px 24px 20px; text-align: center; margin-bottom: 18px; }
.report-score { display: flex; align-items: center; justify-content: center; gap: 26px; }
.report-team .rt-name { font-size: 15px; font-weight: 650; color: var(--text-dim); }
.report-team .rt-goals { font-size: 44px; font-weight: 780; letter-spacing: -.03em; line-height: 1.1; }
.report-vs { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.report-meta { color: var(--text-faint); font-size: 12.5px; margin-top: 10px; }
.report-summary { margin: 0; font-size: 14.5px; line-height: 1.65; }
.cheer-report { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cheer-report li { font-size: 14px; line-height: 1.55; padding-left: 20px; position: relative; }
.cheer-report li::before { content: "📣"; position: absolute; left: 0; font-size: 12px; top: 1px; }
.cheer-report-closer { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--text-dim); }
.report-potm { display: flex; align-items: center; gap: 16px; }
.report-potm .potm-star { font-size: 30px; }
.report-potm .potm-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.report-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-bottom: 18px; }
.report-card .rc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.report-card .rc-name { font-weight: 650; font-size: 15px; }
.report-card .rc-meta { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.report-card .rc-comment { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text); font-style: italic; }
.report-card-potm { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), var(--shadow); }
.report-absent .tag { margin: 0 6px 6px 0; }
.report-section-title {
  margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 10px;
}
.report-foot { text-align: center; font-size: 11.5px; margin-top: 8px; }

/* ---- Flash -------------------------------------------------------------- */
.flash-area { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash-area:empty { margin: 0; }
.flash { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid transparent; font-weight: 500; }
.flash-success { background: var(--up-bg); border-color: #bfe6cc; color: var(--up-text); }
.flash-error { background: var(--down-bg); border-color: #f4cdcd; color: var(--down-text); }

/* ---- Misc --------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* ---- Stats tab --------------------------------------------------------------- */
.sbar-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.sbar-name {
  width: 130px; flex-shrink: 0; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.sbar-track {
  flex: 1; height: 16px; background: var(--bg-3); border-radius: 5px; overflow: hidden;
}
.sbar-track > span {
  display: block; height: 100%; background: var(--accent); border-radius: 5px;
  transition: width .25s ease;
}
.sbar-low > span { background: var(--down); }
.sbar-val { min-width: 62px; font-size: 12px; color: var(--text-dim); }
#stat-table th[data-key] { cursor: pointer; user-select: none; }
#stat-table th[data-key]:hover { color: var(--text); }
#stat-table th.th-sorted { color: var(--accent); }

/* ---- Live test clock -------------------------------------------------------- */
.live-speed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-top: 12px; opacity: .85;
}
.live-speed-flag { font-size: 11px; font-weight: 700; color: var(--warn-text); }
.live-cheers { font-size: 11px; font-weight: 650; color: var(--text-faint); }

/* ---- Match timeline -------------------------------------------------------- */
.tl { padding-top: 8px; padding-bottom: 8px; }
.tl-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 13px; }
.tl-row + .tl-row { border-top: 1px dashed var(--border); }
.tl-min { min-width: 34px; text-align: right; color: var(--text-dim); font-size: 12px; }
.tl-ico { width: 22px; text-align: center; }
.tl-what { flex: 1; }
.tl-score { color: var(--text-dim); font-size: 12px; }
.tl-them .tl-what { color: var(--text-dim); }
.tl-quiet { font-size: 12.5px; color: var(--text-dim); }

/* ---- Coach cards & Coach's corner ----------------------------------------- */
.coach-cards { display: grid; gap: 14px; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); }
.ccard-title { font-size: 12px; font-weight: 650; color: var(--text-dim); margin-bottom: 8px; }
.ccard-main { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 650; }
.ccard-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 7px; }
.ccard-row .ccard-lbl { width: 84px; color: var(--text-dim); }
.ccard-row .ubar { flex: 1; }
.form-strip { display: flex; gap: 5px; flex-wrap: wrap; }
.form-strip .pill { text-decoration: none; font-weight: 700; }
.rec-line { font-size: 15.5px; font-weight: 650; letter-spacing: .01em; }
.rec-line strong { font-size: 17px; margin: 0 1px 0 4px; }
.rec-sub { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; color: var(--text-dim); }

/* Dashboard "Customise" disclosure */
.dash-customize { margin: 0 0 18px; }
.dash-customize > summary { list-style: none; cursor: pointer; display: inline-flex; width: auto; }
.dash-customize > summary::-webkit-details-marker { display: none; }
.dash-customize > summary::marker { content: ""; }
.dash-customize[open] > summary { background: var(--bg-3); border-color: var(--accent); }
.dash-customize-panel { margin-top: 12px; }
.dash-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.sparkline { width: 100%; height: 36px; margin-top: 10px; }
.sparkline polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.coach-wrap { max-width: 1040px; }
/* Identity block: a row on mobile (compact avatar beside the name), a centred
   column with a big portrait on desktop. */
.coach-identity { display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.coach-idtext h2 { margin: 0; }
.coach-av-lg { display: none; }
.coach-chat {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; min-height: 280px; max-height: 62vh; overflow-y: auto;
}
/* Larger 3:4 head-and-torso portrait (coach view + selection grid) */
.coach-portrait { position: relative; display: inline-block; aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden; background: var(--accent-soft);
  vertical-align: middle; }
.coach-portrait img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.coach-portrait-fallback { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-weight: 700; color: var(--accent); }
/* Question picker: a tidy dropdown + Ask button instead of a wall of chips */
.coach-ask { padding: 14px 20px; border-top: 1px solid var(--border); }
.coach-ask-label { display: block; font-size: 12px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 7px; }
.coach-ask-row { display: flex; gap: 8px; }
.coach-ask-row .coach-q { flex: 1 1 auto; min-width: 0; }
/* Desktop: portrait + questions on the left, dialogue on the right. */
@media (min-width: 820px) {
  .coach-grid { display: grid; grid-template-columns: 320px 1fr;
    grid-template-areas: "id chat" "ask chat"; align-items: start; }
  .coach-identity { grid-area: id; flex-direction: column; text-align: center;
    gap: 14px; padding: 28px 22px 12px; border-bottom: 0; }
  .coach-chat { grid-area: chat; border-left: 1px solid var(--border);
    min-height: 480px; max-height: 74vh; }
  .coach-ask { grid-area: ask; border-top: 0; padding-top: 4px; }
  .coach-ask-row { flex-direction: column; }
  .coach-av-sm { display: none; }
  .coach-av-lg { display: block; }
  .coach-identity .coach-portrait { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
}
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; }
.bubble p { margin: 0; }
.bubble p + p { margin-top: 7px; }
.bubble-coach { background: var(--bg-3); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble-user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble-thinking { color: var(--text-faint); }
.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.coach-avatar { display: block; border-radius: 50%; flex-shrink: 0; }
.coach-style { display: block; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 1px; }
.coach-row { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; }
.coach-row .coach-avatar, .coach-row .coach-photo { margin-bottom: 2px; }
/* Real-photo coach portrait, with an initials disc behind as graceful fallback */
.coach-photo { position: relative; display: inline-block; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: var(--accent-soft); vertical-align: middle; }
.coach-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coach-photo-fallback { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--accent); }
.avatar-subhead { font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.avatar-subhead:first-child { margin-top: 0; }
.avatar-opt .hint { font-size: 11px; font-weight: 500; line-height: 1.3; }
.avatar-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.avatar-grid-photo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.avatar-opt-photo { padding: 12px 10px 10px; }
.avatar-opt {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 12px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-2); cursor: pointer;
  font-size: 12px; font-weight: 600; text-align: center;
}
.avatar-opt:hover { background: var(--bg-3); }
.avatar-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.avatar-opt input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-random {
  width: 56px; height: 56px; border-radius: 50%; display: grid;
  place-items: center; font-size: 26px; background: var(--bg-3);
}

/* ---- Player avatars -------------------------------------------------------- */
.avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; overflow: hidden; vertical-align: middle; flex-shrink: 0;
  background: var(--bg-3);
}
.avatar-initials { color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.avatar-initials[data-hue="0"] { background: #6c47ff; }
.avatar-initials[data-hue="1"] { background: #2e6ff5; }
.avatar-initials[data-hue="2"] { background: #16a34a; }
.avatar-initials[data-hue="3"] { background: #dd8a0a; }
.avatar-initials[data-hue="4"] { background: #e5484d; }
.avatar-initials[data-hue="5"] { background: #0e9f9f; }
.avatar-initials[data-hue="6"] { background: #b44fc4; }
.avatar-initials[data-hue="7"] { background: #5f7085; }
.avatar-lg { width: 44px; height: 44px; }
.avatar-lg.avatar-initials { font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; }
.avatar-xl.avatar-initials { font-size: 22px; }
.avatar-slot {
  width: 40px; height: 40px; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.avatar-slot.avatar-initials { font-size: 14px; }
.fslot-gk .avatar-slot { border-color: var(--warn); }
.page-head-id { display: flex; align-items: center; gap: 14px; }

/* ---- Avatar creator -------------------------------------------------------
   The picker on the player form and the parent's page for their child. The
   character grid and its live kit colour are further down, under "Avatar
   picker"; the --av-* rules here belong to the retired feature builder, whose
   faces are still drawn for the players who chose one. */
.avatar-drawn { background: none; }
.avatar .av-svg { width: 100%; height: 100%; display: block; }

.avm-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avm-preview { width: 96px; height: 96px; flex-shrink: 0; }
.avm-preview .avatar { width: 96px; height: 96px; }
.avm-preview .avm-initials { font-size: 32px; }
/* Exactly one of the two faces is on show, per the "Show as" choice. */
.avm:has(#av_kind_initials:checked) .avm-face { display: none; }
.avm:has(#av_kind_custom:checked) .avm-initials { display: none; }
.avm-kind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avm-kind-lbl, .avm-group-lbl {
  font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em;
}
.avm-kind .hint { flex-basis: 100%; margin: 0; }
.pill-opt {
  position: relative; padding: 7px 15px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-2); cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.pill-opt:hover { background: var(--bg-3); }
.pill-opt:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}

.avm-group { margin-top: 16px; }
.avm-group-lbl { display: block; margin-bottom: 8px; }
.avm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.avm-opt {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: 68px; padding: 8px 4px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-2); cursor: pointer;
  font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center;
}
.avm-opts-color .avm-opt { width: 62px; }
.avm-opt:hover { background: var(--bg-3); }
.avm-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pill-opt input, .avm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pill-opt:has(input:focus-visible), .avm-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.avm-dot {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.avm-mini { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.avm-mini .av-svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) {
  .avm-opt { width: 60px; }
  .avm-opts-color .avm-opt { width: 54px; }
}
input[type=file] {
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px;
  font-family: var(--font); width: 100%;
}

/* ---- Squad pitch view ------------------------------------------------------ */
.squad-pitch-card { max-width: 560px; }
.fpitch-squad .fslot { text-decoration: none; }
.fpitch-squad .fslot:hover .fslot-name { text-decoration: underline; }
.any-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 4px 0; }
.any-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
}
.any-chip:hover { border-color: var(--accent); text-decoration: none; }
.any-chip .avatar { width: 24px; height: 24px; }
.any-chip .avatar-initials { font-size: 10px; }

/* ---- Formation guide ------------------------------------------------------ */
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
@media (max-width: 560px) { .guide-cols { grid-template-columns: 1fr; } }
.guide-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 6px; }
.guide-sub-pro { color: var(--up-text); }
.guide-sub-con { color: var(--warn-text); }
.guide-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.guide-list li { padding-left: 20px; position: relative; line-height: 1.45; }
.guide-pro li::before { content: "✓"; position: absolute; left: 0; color: var(--up); font-weight: 700; }
.guide-con li::before { content: "!"; position: absolute; left: 2px; color: var(--warn); font-weight: 800; }
.guide-use { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 10px; }

/* ---- Formation picker ---------------------------------------------------- */
.formation-layout { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .formation-layout { grid-template-columns: 1fr; } }
.formation-controls { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.formation-controls .field { margin: 0; }
.fpitch-card { padding: 12px; }
.fpitch {
  position: relative; aspect-ratio: 10 / 13; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #2e7d46 0%, #276b3c 100%);
}
.fpitch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fslot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: none; cursor: pointer; padding: 4px;
  font-family: var(--font);
}
.fslot-disc {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.fslot:hover .fslot-disc { filter: brightness(1.12); }
.fslot-gk .fslot-disc { background: var(--warn); }
.fslot-empty .fslot-disc {
  background: rgba(255, 255, 255, .12); border: 2px dashed rgba(255, 255, 255, .75);
  font-size: 17px; font-weight: 500;
}
.fslot-name {
  font-size: 10.5px; font-weight: 650; color: #fff; max-width: 86px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
.fslot-role { font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.fbench { display: flex; flex-wrap: wrap; gap: 8px; }
.fslot-selected .fslot-disc { outline: 3px solid #fff; outline-offset: 2px; }
.fslot-mins {
  font-size: 9.5px; font-weight: 650; color: #fff; font-family: var(--mono);
  font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .3);
  border-radius: 999px; padding: 0 5px;
}
.fpitch-live { margin: 14px auto; width: min(100% - 28px, 430px); }
.live-formation { width: auto; padding: 6px 10px; font-size: 12.5px; }
.fpitch-mini .fslot { padding: 2px; gap: 0; }
.iv-subs {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 9px 16px 0; font-size: 12px;
}
.iv-subs strong { font-weight: 700; }
.fpitch-mini .fslot-disc { width: 24px; height: 24px; font-size: 10.5px; }
.fpitch-mini .fslot-name { font-size: 9px; max-width: 68px; }

/* ---- Tactics board ------------------------------------------------------ */
.tboard-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(240px, 340px); gap: 18px; align-items: start; }
@media (max-width: 900px) { .tboard-layout { grid-template-columns: 1fr; } }
.tboard-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tbtool-group { display: inline-flex; gap: 6px; }
.tbtool-spacer { flex: 1 1 auto; }
.field-inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.field-inline label { margin: 0; font-size: 12.5px; }
.board-formation { width: auto; min-width: 90px; padding: 5px 8px; font-size: 13px; }
.tboard-pitch-wrap { width: var(--board-w, 460px); max-width: 100%; margin: 0 auto; }
.tboard-pitch { touch-action: none; user-select: none; }
.tb-size { width: 96px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.tboard-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.tboard-arrow-line { stroke: #ffe14d; stroke-width: 0.9; stroke-linecap: round; opacity: .92; }
.tbtoken {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; cursor: grab; touch-action: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4); color: #fff;
}
.tbtoken-home { background: var(--accent); }
.tbtoken-away { background: #10131a; border: 2px solid #ff5d5d; color: #ffd9d9; }
.tbtoken-drag { cursor: grabbing; filter: brightness(1.15); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.tboard-arrowmode { cursor: crosshair; }
.tboard-arrowmode .tbtoken { pointer-events: none; }
.tboard-view { max-width: 100%; }
.tboard-view.tboard-compact { max-width: 360px; }
.tboard-view .tbtoken { cursor: default; pointer-events: none; }
.tboard-view.tboard-compact .tbtoken { width: 26px; height: 26px; font-size: 11px; }
.tboard-note {
  margin: 12px 2px 0; padding: 10px 14px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
}
@media print {
  .tbtoken, .tboard-arrow-line { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Auth --------------------------------------------------------------- */
.auth-wrap { max-width: 400px; margin: 8vh auto 0; }
.auth-wrap.auth-wide { max-width: 560px; }
/* Registration role picker */
.reg-roles { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-2); cursor: pointer; }
.radio-card:hover { background: var(--bg-3); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-card input { margin-top: 3px; }
.radio-card strong { display: block; font-size: 13.5px; }
.radio-card .dim { display: block; font-size: 12px; margin-top: 1px; }
.reg-followup { margin-top: 12px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border); }
.reg-inline { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.radio-line { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.tag-x { border: 0; background: none; cursor: pointer; color: var(--text-dim);
  font-size: 11px; line-height: 1; padding: 0 0 0 4px; }
.tag-x:hover { color: var(--down); }
/* A disabled/greyed-out block (e.g. email reset before SMTP is configured). */
.reset-disabled {
  opacity: .5; pointer-events: none; user-select: none;
  border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 4px;
}
.reset-disabled-tag {
  display: inline-block; margin-bottom: 8px; padding: 2px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); background: var(--bg-3);
  border: 1px solid var(--border); border-radius: 999px;
}
.fieldset-danger { border-color: var(--down); }
.fieldset-danger legend { color: var(--down-text); }

/* ---- Training ----------------------------------------------------------- */
.activity-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.activity-row .field { margin: 0; }
.activity-row .field-mins input { width: 84px; }
.activity-row .field-grow { flex: 1; }
.activity-row .act-remove { padding: 8px 10px; }
.activity-block { padding: 10px 0; }
.activity-block + .activity-block { border-top: 1px solid var(--border); }
.activity-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.activity-targets { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.advice-block { padding: 10px 0; }
.advice-block + .advice-block { border-top: 1px solid var(--border); }
.advice-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.advice-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.section { margin-bottom: 22px; }
.empty { text-align: center; padding: 48px 20px; color: var(--text-dim); }
.empty .big { font-size: 38px; margin-bottom: 10px; opacity: .85; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--border); font-size: 11px; color: var(--text-dim); font-weight: 550; }
.inline-form { display: inline; }

/* Admin row actions: reset-password disclosure sits alongside Delete. */
.row-actions { display: inline-flex; gap: 8px; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; }
.reset-contact { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-top: 4px; font-weight: 400; }
.pw-reset { position: relative; }
.pw-reset > summary { list-style: none; cursor: pointer; }
.pw-reset > summary::-webkit-details-marker { display: none; }
.pw-reset > summary::marker { content: ""; }
.pw-reset[open] > summary { background: var(--bg-3); border-color: var(--accent); }
.pw-reset-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.pw-reset-form input {
  padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; width: 170px;
}
.pw-reset-form input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 820px) {
  /* Sidebar becomes an off-canvas drawer; content gets the full width. */
  .layout { display: block; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 30;
    background: var(--bg-2); border-bottom: 1px solid var(--border);
    padding: 8px 12px;
  }
  .hamburger {
    display: grid; place-items: center; width: 42px; height: 42px;
    background: none; border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); cursor: pointer;
  }
  .hamburger svg { width: 22px; height: 22px; }
  .mobile-brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
  .mobile-brand .brand-mark { width: 28px; height: 28px; }

  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: 250px; height: 100vh; height: 100dvh;   /* dvh: exclude iOS toolbars */
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lift);
  }
  .sidebar.open { transform: translateX(0); }
  .brand-name, .sidebar nav a span, .theme-toggle span { display: inline; }
  .sidebar nav a { padding: 11px 12px; }        /* bigger tap targets */

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(16, 24, 40, .45); border: none;
  }
  .nav-scrim[hidden] { display: none; }
  body.nav-open { overflow: hidden; }            /* lock scroll behind drawer */

  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 18px 14px; }
  .attr-row { grid-template-columns: 104px 1fr 24px; }
  .page-head h1 { font-size: 20px; }

  /* Comfortable thumb targets on the small controls. */
  .btn { padding: 10px 15px; }
  .btn-sm { padding: 8px 12px; }
  .head-actions { gap: 8px; }
  .head-actions .btn, .head-actions form { flex: 1 1 auto; }
  .head-actions .btn { justify-content: center; }
}

/* ---- Print (matchday sheet & report) ------------------------------------- */
@media print {
  .sidebar, .head-actions, .flash-area, .no-print, .tabs { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .card, .stat { box-shadow: none; }
  .interval-grid { grid-template-columns: 1fr 1fr; }
  .report { max-width: none; }
  .report-cards { grid-template-columns: 1fr 1fr; }
  .report-card, .interval-grid .card { break-inside: avoid; }
  .chip, .chip-num, .pill, .score, .ubar > span, .brand-mark,
  .fpitch, .fslot-disc, .fslot-name, .fslot-role, .fslot-mins {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .report-plan .interval-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Dark theme (opt-in via toggle) ------------------------------------- */
:root[data-theme="dark"] {
  --bg: #0d1117; --bg-2: #161b22; --bg-3: #1c2230;
  --border: #262c36; --border-2: #333b47;
  --text: #e6edf3; --text-dim: #9aa4b2; --text-faint: #6e7681;
  --accent: #8b6dff; --accent-strong: #7c5cff; --accent-soft: rgba(139, 109, 255, .16);
  --up: #3fb950; --up-bg: rgba(63,185,80,.15); --up-text: #56d364;
  --down: #f85149; --down-bg: rgba(248,81,73,.15); --down-text: #ff7b72;
  --warn: #d29922; --warn-bg: rgba(210,153,34,.15); --warn-text: #e3b341;
  --unknown: #6e7681; --unknown-bg: rgba(110,118,129,.15); --unknown-text: #9aa4b2;
  --pitch-1: #1d5731; --pitch-2: #194b2b; --pitch-line: rgba(255, 255, 255, .18);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.25);
  --shadow-lift: 0 6px 22px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .btn-danger { border-color: rgba(248,81,73,.4); }
:root[data-theme="dark"] .flash-success { border-color: rgba(63,185,80,.4); }
:root[data-theme="dark"] .flash-error { border-color: rgba(248,81,73,.4); }

/* ---- Parent messages & schedule ------------------------------------------ */
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: 8px; }
.send-actions .btn-block:last-child { margin-bottom: 0; }
.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;
}
.msg-preview .msg-subject { margin-bottom: 10px; font-size: 15px; }
.msg-body {
  margin: 0; white-space: pre-wrap; word-wrap: break-word;
  font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text);
}
.copy-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .18s, transform .18s;
  z-index: 60; pointer-events: none;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fx-icon { display: inline-block; width: 1.4em; text-align: center; }

@media print {
  .sidebar, .head-actions, .send-actions, .card-head, .page-head .sub { display: none !important; }
  .grid-2 { display: block; }
  .msg-preview { border: none; box-shadow: none; }
}

.btn-whatsapp { border-color: #25d366; color: #128c3e; }
.btn-whatsapp:hover { background: #e9faf0; border-color: #25d366; }
:root[data-theme="dark"] .btn-whatsapp { color: #4ee08a; background: rgba(37,211,102,.10); }

/* ---- Live matchday: alerts, pause, cards --------------------------------- */
.live-alert {
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px;
  font-size: 16px; font-weight: 700; text-align: center; color: #fff;
  box-shadow: var(--shadow-lift);
}
.live-alert[hidden] { display: none; }
.live-alert.show { animation: live-alert-pulse .5s ease-in-out 0s 6 alternate; }
.live-alert-warn { background: var(--warn); }
.live-alert-window { background: var(--accent); }
.live-alert-ft { background: var(--down); }
@keyframes live-alert-pulse { from { transform: scale(1); } to { transform: scale(1.03); filter: brightness(1.12); } }
.live-timer.timer-paused { color: var(--warn); }
.live-timer.timer-nag { animation: timer-flash .4s ease-in-out 0s 3 alternate; }
@keyframes timer-flash { to { opacity: .35; } }
.fslot-card { margin-left: 3px; font-size: .8em; }
/* The armband is text, not an emoji, so it needs its own weight to read at
   chip size next to the emoji card markers. */
.fslot-captain, .fslot-vice { font-weight: 800; font-size: .9em; }

/* ---- Session-plan questionnaire: radio/checkbox choice chips ------------- */
.choice-set { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 9px 13px; background: var(--bg-2); transition: border-color .12s, background .12s;
}
.choice input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.choice span { display: flex; flex-direction: column; line-height: 1.25; }
.choice span .dim { font-size: 11.5px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.plan-note {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 10px 14px; border-radius: var(--radius-sm); margin: 0 0 16px;
  font-size: 13px; color: var(--text);
}

/* ---- Phase 2: register-time drill headcount adapter --------------------- */
.headcount-bar {
  border-radius: var(--radius-sm); padding: 9px 13px; font-size: 13px;
  border: 1px solid var(--border-2); background: var(--bg-3);
}
.headcount-ok { border-color: var(--up); background: var(--up-bg); color: var(--up-text); }
.headcount-warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn-text); }
.drill-fit {
  display: flex; gap: 7px; align-items: baseline; margin-top: 8px;
  font-size: 12.5px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--bg-3); color: var(--text-dim);
}
.drill-fit-ico { flex-shrink: 0; }
.drill-fit-short { background: var(--warn-bg); color: var(--warn-text); }
.drill-fit-over { background: var(--accent-soft); color: var(--accent-strong); }
.drill-fit-ok { background: var(--up-bg); color: var(--up-text); }

/* ---- Phase 3: coach stations -------------------------------------------- */
.station-controls { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-end; margin-bottom: 18px; }
.station-controls .field { margin: 0; }
.station-controls > button { margin-left: auto; }
.station-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 22px; }
.station-card { display: flex; flex-direction: column; }
.station-drill { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-3); margin-bottom: 10px; }
.station-drill:hover { border-color: var(--accent); text-decoration: none; }
.station-players { display: flex; flex-wrap: wrap; gap: 6px; }
@media print {
  .station-controls, .station-grid .station-drill .dim { }
  .station-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Opponent context on the match page --------------------------------- */
.opp-context-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.opp-rating {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border-2);
}
.opp-rating-badge { font-weight: 700; }
.opp-rating-much_weaker, .opp-rating-weaker { background: var(--up-bg); border-color: var(--up); color: var(--up-text); }
.opp-rating-even { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-text); }
.opp-rating-stronger, .opp-rating-much_stronger { background: var(--down-bg); border-color: var(--down); color: var(--down-text); }
.opp-h2h { color: var(--text-dim); }
.opp-dev-nudge {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
  font-size: 13px;
}
.opp-dev-nudge .btn { margin-left: auto; }
.opp-scout-link { font-weight: 600; white-space: nowrap; }

/* ---- Scouting panel (match page) + opponents section -------------------- */
.opp-scout { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.opp-scout-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.opp-scout-facts .fact { font-size: 13px; color: var(--text-dim); }
.opp-scout-cols {
  display: grid; grid-template-columns: 180px 1fr; gap: 18px;
  align-items: start; margin-top: 12px;
}
@media (max-width: 640px) { .opp-scout-cols { grid-template-columns: 1fr; } }
.opp-mini-pitch { max-width: 180px; }
.opp-mini-pitch .fslot-role {
  font-size: 9px; font-weight: 700; color: #fff; padding: 2px 5px;
  background: var(--accent); border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.opp-mini-pitch .fslot-gk .fslot-role { background: var(--warn); }
.opp-danger h3 { margin: 0 0 8px; font-size: 13px; }
.danger-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.danger-check li { font-size: 13.5px; line-height: 1.4; }
.danger-check label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.danger-check input { margin-top: 2px; }

/* Opponent scouting form: the danger-players row editor */
.dp-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dp-row { display: grid; grid-template-columns: 1fr 64px 100px 1.6fr 34px; gap: 8px; align-items: center; }
.dp-row.dp-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.dp-del { padding: 6px 9px; }
@media (max-width: 640px) {
  .dp-row { grid-template-columns: 1fr 56px; grid-auto-rows: auto; }
  .dp-row.dp-head { display: none; }
  .dp-row input[name=dp_position], .dp-row input[name=dp_note] { grid-column: 1 / -1; }
  .dp-del { grid-column: 2; }
}

/* Opponent detail page */
.opp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .opp-detail-grid { grid-template-columns: 1fr; } }
.opp-detail-grid .opp-mini-pitch { max-width: 240px; margin: 0 auto; }
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--text-dim); font-size: 13px; }
.kv dd { margin: 0; font-size: 13.5px; }
.opp-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.5; }
.opp-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.opp-swot-text { margin: 0; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 560px) { .opp-swot { grid-template-columns: 1fr; } }
.opp-h2h-line { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.h2h-figures { font-size: 14px; }

/* ---- Pitchside game mode (big-button scoreboard) ------------------------ */
.gm { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.gm-top { display: flex; justify-content: space-between; align-items: center; }
.gm-meta { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.gm-clock { text-align: center; }
.gm-time {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 16vw, 96px); font-weight: 800; line-height: 1;
  letter-spacing: .02em;
}
.gm-half { color: var(--warn-text); font-weight: 700; font-size: 13px; margin-top: 4px; }
.gm-clock-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.gm-ctl { min-width: 120px; min-height: 48px; font-size: 16px; font-weight: 700; }
.gm-ctl-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.gm-ctl.gm-running { background: var(--warn); border-color: var(--warn); color: #fff; }
.gm-score {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: 8px; text-align: center;
}
.gm-team { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gm-team-name {
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
.gm-plus {
  width: 100%; max-width: 220px; aspect-ratio: 1 / 1; border-radius: 24px;
  border: 3px solid var(--accent); background: var(--accent-soft);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: transform .05s ease;
}
.gm-plus:active { transform: scale(.96); }
.gm-num { font-size: clamp(64px, 24vw, 150px); font-weight: 800; line-height: 1; }
.gm-minus {
  min-height: 46px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--bg-3); color: var(--text-dim);
  font-weight: 700; cursor: pointer;
}
.gm-vs { font-size: 40px; font-weight: 800; color: var(--text-faint); align-self: center; }
.gm-tip { text-align: center; margin: 0; }
.gm-finish { margin-top: 4px; }
.gm-finish-btn { width: 100%; min-height: 56px; font-size: 18px; font-weight: 700; }
@media (max-width: 360px) { .gm-team-name { font-size: 12px; } }

/* ---- Parent availability: coach share row + public page ----------------- */
.rsvp-share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rsvp-url {
  flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: 12px;
  padding: 8px 10px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--bg-3); color: var(--text);
}
.rsvp-page { min-height: 100vh; display: grid; place-items: start center;
  padding: 24px 14px 44px; background: var(--bg); }
.rsvp-card { width: 100%; max-width: 480px; padding: 22px 20px; }

/* ---- Coach's share-link controls (on the match page) ------------------- */
.share-link-row { display: flex; gap: 8px; align-items: center; }
.share-url {
  flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12.5px;
  padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--bg-3); color: var(--text);
}

/* ---- Public parent live-match view ------------------------------------- */
.mv-page { min-height: 100vh; display: grid; place-items: start center;
  padding: 20px 12px 40px; background: var(--bg); }
.mv-card { width: 100%; max-width: 560px; padding: 18px 18px 14px; }
.mv-head { text-align: center; }
.mv-status {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim);
  margin-bottom: 8px;
}
.mv-status-live { color: var(--down-text); }
.mv-scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.mv-team-name { font-size: 14px; font-weight: 650; color: var(--text-dim); }
.mv-goals { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.mv-clock {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-3); border-radius: 999px; padding: 4px 12px; min-width: 62px;
}
.mv-sub { margin-top: 8px; font-size: 12.5px; color: var(--text-faint); }
.mv-body { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 560px) { .mv-body { grid-template-columns: 1fr; } }
.mv-pitch { width: 100%; margin: 0 auto; }
.mv-token {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.mv-disc {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.mv-pos { font-size: 8.5px; font-weight: 600; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.mv-feed-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 2px 0 8px; }
.mv-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mv-ev { font-size: 13.5px; padding: 7px 10px; border-radius: 8px; background: var(--bg-3); }
.mv-ev-goal { font-weight: 650; }
.mv-ended { text-align: center; padding: 30px 10px; color: var(--text-dim); }
.mv-ended .big { font-size: 40px; }

/* ---- Parent-led cheers (live view) -------------------------------------- */
.mv-cheer { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.mv-cheer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mv-cheer-count { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mv-cheer-phrases, .mv-cheer-playerbtns {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mv-cheer-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--bg-2); color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: transform .06s ease, border-color .12s ease; }
.mv-cheer-btn:hover { border-color: var(--accent); }
.mv-cheer-btn:active { transform: scale(.94); }
.mv-cheer-ic { font-size: 16px; }
.mv-cheer-player { font-weight: 700; min-width: 42px; justify-content: center; }
.mv-cheer-prompt { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.mv-cheer-toast { margin-top: 10px; text-align: center; font-weight: 600;
  font-size: 13px; color: var(--up-text); background: var(--up-bg);
  border-radius: var(--radius-sm); padding: 7px 10px; }
.mv-cheer-feed { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px; }
.mv-cheer-line { font-size: 13px; color: var(--text-dim); padding: 5px 10px;
  background: var(--bg-3); border-radius: 8px; }
.mv-foot { text-align: center; margin-top: 14px; font-size: 11.5px; }
.rsvp-head { text-align: center; margin-bottom: 14px; }
.rsvp-team { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); }
.rsvp-head h1 { font-size: 22px; margin: 6px 0; }
.rsvp-saved { background: var(--up-bg); color: var(--up-text); border: 1px solid var(--up);
  border-radius: var(--radius-sm); padding: 10px 12px; text-align: center;
  font-weight: 600; margin-bottom: 14px; }
.rsvp-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 12px; }
.rsvp-fixture { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.rsvp-fx-info strong { font-size: 16px; }
.rsvp-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rsvp-status { align-self: flex-start; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; }
.rsvp-status-yes { background: var(--up-bg); color: var(--up-text); }
.rsvp-status-no { background: var(--down-bg); color: var(--down-text); }
.rsvp-status-none { background: var(--unknown-bg); color: var(--unknown-text); }
.rsvp-btns { display: flex; gap: 8px; }
.rsvp-btns form { flex: 1; }
.rsvp-btns .btn { width: 100%; }
.rsvp-foot { text-align: center; font-size: 12px; margin-top: 18px; }

/* ---- Season awards ------------------------------------------------------ */
.awards-sheet {
  border-radius: var(--radius); padding: 26px 22px 28px; color: #fff;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-strong) 72%, #10131a 155%);
  box-shadow: var(--shadow);
}
.awards-title { text-align: center; margin-bottom: 20px; }
.awards-team { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.awards-sub { font-size: 13px; opacity: .85; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
.awards-record {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px;
  padding: 14px 0 20px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.arec { display: flex; flex-direction: column; align-items: center; }
.arec-num { font-size: 24px; font-weight: 800; }
.awards-record .up-text { color: #b6f0c6; }
.awards-record .down-text { color: #ffc4c0; }
.arec-lbl { font-size: 11px; opacity: .82; text-transform: uppercase; letter-spacing: .06em; }
.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.award-card {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm); padding: 16px 14px; text-align: center;
  backdrop-filter: blur(2px);
}
.award-medal { font-size: 34px; line-height: 1; }
.award-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .9; margin: 6px 0 10px; }
.award-winner { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.award-winner a { color: #fff; font-weight: 700; font-size: 16px; }
.award-avatar { width: 52px; height: 52px; font-size: 18px; border: 2px solid rgba(255,255,255,.5); }
.award-value { font-size: 20px; font-weight: 800; margin-top: 10px; }
.award-unit { font-size: 11px; font-weight: 500; opacity: .82; }
.award-sub { font-size: 12px; opacity: .82; margin-top: 2px; }

/* ---- Player development card --------------------------------------------- */
.dev-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dev-headline { font-size: 14px; }
.dev-spark { width: 150px; height: 42px; margin: 0; }
.dev-deltas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0 10px; }
@media (max-width: 560px) { .dev-deltas { grid-template-columns: repeat(3, 1fr); } }
.dev-delta { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; background: var(--bg-3); border-radius: var(--radius-sm); }
.dev-code { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text-dim); }
.dev-move { font-size: 13px; }
.up-text { color: var(--up-text); font-weight: 700; }
.down-text { color: var(--down-text); font-weight: 700; }

/* ---- Milestone badges --------------------------------------------------- */
.badge-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; background: var(--accent-soft);
  border: 1px solid var(--accent); color: var(--text);
  font-size: 12.5px; font-weight: 600;
}
.badge-icon { font-size: 15px; line-height: 1; }

/* ---- Shareable player card ---------------------------------------------- */
.pcard-wrap { display: grid; place-items: center; padding: 8px 0 26px; }
.pcard {
  position: relative; width: 300px; border-radius: 20px; overflow: hidden;
  padding: 22px 20px 18px; color: #fff; font-family: var(--font);
  background: linear-gradient(158deg, var(--accent) 0%, var(--accent-strong) 68%, #10131a 150%);
  box-shadow: var(--shadow-lift);
}
.pcard-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%); }
.pcard > *:not(.pcard-sheen) { position: relative; }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pcard-rating { display: flex; flex-direction: column; line-height: 1; }
.pcard-ovr { font-size: 46px; font-weight: 800; }
.pcard-pos { font-size: 15px; font-weight: 700; letter-spacing: .05em; opacity: .92; margin-top: 3px; }
.pcard-num { font-size: 12px; opacity: .75; margin-top: 5px; font-family: var(--mono); }
.pcard-avatar { width: 92px; height: 92px; font-size: 30px;
  border: 3px solid rgba(255,255,255,.55); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.pcard-name { text-align: center; font-size: 22px; font-weight: 800;
  margin: 8px 0 14px; text-transform: uppercase; letter-spacing: .02em; }
.pcard-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 4px;
  padding: 13px 4px; border-top: 1px solid rgba(255,255,255,.28);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.pcard-stat { display: flex; flex-direction: column; align-items: center; }
.pcard-stat-val { font-size: 22px; font-weight: 800; }
.pcard-stat-code { font-size: 11px; font-weight: 700; opacity: .82; letter-spacing: .06em; }
.pcard-record { display: flex; justify-content: center; gap: 18px; padding: 13px 0 4px;
  font-size: 17px; font-weight: 800; }
.pcard-record em { font-style: normal; font-weight: 500; opacity: .82; font-size: 12px; }
.pcard-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 8px 0 2px; font-size: 21px; }
.pcard-club { text-align: center; font-size: 12px; opacity: .85; margin-top: 10px;
  text-transform: uppercase; letter-spacing: .1em; }

/* ---- Win confetti ------------------------------------------------------- */
.confetti-box { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  opacity: .92; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(106vh) rotate(720deg); opacity: .65; } }

/* ---- Quick-add star rating ---------------------------------------------- */
.star-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-rate input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-rate label {
  font-size: 32px; line-height: 1; color: var(--border-2); cursor: pointer;
  transition: color .08s ease;
}
.star-rate input:checked ~ label,
.star-rate label:hover,
.star-rate label:hover ~ label { color: var(--warn); }
.star-rate input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- App-colour swatch picker (settings) -------------------------------- */
.swatch-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-opt { cursor: pointer; line-height: 0; }
.swatch-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.swatch {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--sw, var(--accent));
  border: 2px solid var(--border-2); color: #fff; font-size: 15px;
}
.swatch-default { background: #6c47ff; }
.swatch-opt input:checked + .swatch { outline: 3px solid var(--accent); outline-offset: 2px; border-color: #fff; }
.swatch-opt input:focus-visible + .swatch { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- Auto-pick formation picker ----------------------------------------- */
.formation-picks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.formation-pick {
  display: grid; grid-template-columns: 20px minmax(120px, auto) 1fr 46px;
  align-items: center; gap: 12px; cursor: pointer;
  padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
}
.formation-pick.no-score { grid-template-columns: 20px 1fr; }
.formation-pick:hover { background: var(--bg-3); }
.formation-pick input { margin: 0; }
.formation-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fp-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.fp-bar { min-width: 60px; }
.fp-pct { text-align: right; }
@media (max-width: 560px) {
  .formation-pick { grid-template-columns: 20px 1fr 44px; }
  .formation-pick .fp-bar { display: none; }
}

/* ======================================================================== *
 *  UI refinements: accessibility, toasts, filtering, responsive tables
 * ======================================================================== */

/* ---- Visible keyboard focus for interactive elements -------------------- */
.btn:focus-visible, a:focus-visible, .tab:focus-visible, summary:focus-visible,
.sidebar nav a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}
.choice:focus-within, .check:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Respect "reduce motion": kill the live-mode pulses etc. ------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Flash messages as auto-dismissing toasts --------------------------- */
.flash-area {
  position: fixed; z-index: 60; top: 14px; right: 14px; left: auto;
  width: min(420px, calc(100vw - 28px)); margin: 0; pointer-events: none;
}
.flash { pointer-events: auto; cursor: pointer; box-shadow: var(--shadow-lift);
  animation: toast-in .22s ease both; }
.flash.toast-out { animation: toast-out .28s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
@media (max-width: 560px) {
  .flash-area { top: auto; bottom: 14px; left: 12px; right: 12px; width: auto; }
}

/* ---- Client-side list filter box ---------------------------------------- */
.table-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.table-filter input[type="search"] { max-width: 280px; }
.table-filter .filter-count { color: var(--text-faint); font-size: 12.5px; }
.filter-empty { padding: 22px 16px; text-align: center; color: var(--text-faint); }

/* ---- Responsive tables: reflow wide tables to stacked rows on phones ----- */
@media (max-width: 560px) {
  .rtable thead { position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .rtable, .rtable tbody { display: block; width: 100%; }
  .rtable tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .rtable tbody tr:last-child { border-bottom: none; }
  .rtable tbody tr:hover { background: transparent; }
  .rtable td { display: flex; justify-content: space-between; align-items: center;
    gap: 14px; padding: 4px 0; border: none; text-align: right; }
  .rtable td::before { content: attr(data-label); font-weight: 600;
    color: var(--text-dim); text-align: left; margin-right: auto; }
  .rtable td:not([data-label])::before, .rtable td[data-label=""]::before { content: none; }
  .rtable td.cell-primary { font-size: 15px; font-weight: 600; padding-bottom: 6px;
    justify-content: flex-start; }
  .rtable td.cell-hide-sm { display: none; }
  .rtable td.cell-action { padding-top: 10px; justify-content: flex-end; }
  .rtable td .ubar { min-width: 90px; }
}

/* ---- Collapsible explainer (autopick) ----------------------------------- */
.fair-guide-rec {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px 14px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--border);
}
.fair-guide-rec > span { font-size: 13.5px; flex: 1 1 220px; }
.explainer > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.explainer > summary::-webkit-details-marker { display: none; }
.explainer > summary .attr-title { margin: 0; }
.explainer > summary::after { content: "▸"; margin-left: auto; color: var(--text-faint); transition: transform .15s; }
.explainer[open] > summary::after { transform: rotate(90deg); }
.explainer-list { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }

/* ---- Getting-started checklist (dashboard) ------------------------------ */
.onboard-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.onboard-list li { display: flex; align-items: flex-start; gap: 12px; }
.onboard-check {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--border-2);
}
.onboard-list li.done .onboard-check { background: var(--up-bg); color: var(--up-text); border-color: var(--up); }
.onboard-list li.done, .onboard-list li.done a { color: var(--text-faint); }

/* Demo-account reset callout (dev-tools sandbox only) */
.reset-demo-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 16px; margin: 0 0 16px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-soft);
}
.reset-demo-box .btn { flex-shrink: 0; }

/* ---- First-run setup wizard --------------------------------------------- */
.wizard { max-width: 620px; margin: 8px auto 0; }
.wizard-wide { max-width: 760px; }
.wizard-card { margin-top: 18px; }
.wizard-intro { margin-bottom: 20px; }
.wizard-intro h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.wizard-sub { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.wizard-actions { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wizard-actions .btn-big { width: auto; }
.wizard-actions-main { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wizard-skip { text-align: center; margin-top: 14px; }
.wiz-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wiz-choices .choice { width: 100%; }

/* Progress rail */
.wiz-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; justify-content: center; }
.wiz-step { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 12.5px; font-weight: 600; }
.wiz-step:not(:last-child)::after { content: ""; width: 26px; height: 2px; background: var(--border-2); margin: 0 4px; border-radius: 2px; }
.wiz-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--border-2);
  font-size: 13px; font-weight: 700;
}
.wiz-step.is-active .wiz-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.wiz-step.is-active { color: var(--text); }
.wiz-step.is-done .wiz-dot { background: var(--up-bg); color: var(--up-text); border-color: var(--up); }
.wiz-step.is-active:not(:last-child)::after,
.wiz-step.is-done:not(:last-child)::after { background: var(--accent); }
@media (max-width: 560px) { .wiz-step-label { display: none; } .wiz-step:not(:last-child)::after { width: 18px; } }

/* Squad grid */
.wiz-squad td { padding: 5px 6px; }
.wiz-squad .cell-input { width: 100%; }

/* Finish screen */
.wizard-done { text-align: center; }
.wizard-done-mark { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.wizard-next { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; text-align: left; }
.wizard-next-card {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center; padding: 16px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-2);
  color: var(--text); transition: border-color .12s, box-shadow .12s, transform .12s;
}
.wizard-next-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.wnc-ico { grid-row: 1 / 3; font-size: 26px; }
.wnc-title { font-weight: 650; font-size: 15px; }
.wnc-sub { font-size: 12.5px; color: var(--text-dim); }

/* ---- Kit shirts & match-day tab ----------------------------------------- */
.kit-shirt { width: 40px; height: 40px; display: inline-block; vertical-align: middle; }
.kit-shirt-lg { width: 96px; height: 96px; }
.md-grid { margin-bottom: 18px; }
.md-details { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; margin: 0; }
.md-details dt { color: var(--text-dim); font-weight: 600; font-size: 12.5px; }
.md-details dd { margin: 0; }
.md-kit { display: flex; align-items: center; gap: 18px; }
.md-kit-text { font-weight: 600; margin-bottom: 4px; }
.md-message { width: 100%; font-family: var(--font); font-size: 13px; line-height: 1.5;
  resize: vertical; background: var(--bg-3); }

/* ---- Kit editor (Team settings) ----------------------------------------- */
.kit-editors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.kit-editor { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-2); }
.kit-editor-head { font-weight: 650; margin-bottom: 10px; }
.kit-preview { text-align: center; }
.kit-desc { text-align: center; color: var(--text-dim); font-size: 13px; margin: 6px 0 14px; }
.kit-editor .field { margin-top: 10px; }

/* ---- Settings tabs: scrollable bar + panels ----------------------------- */
.settings-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settings-tabs .tab { white-space: nowrap; flex: 0 0 auto; }
.settings-panel[hidden] { display: none; }

/* Settings -> Parents: one row per thing a family can see, with the switch(es)
   on the right. On a phone the switches drop under the description rather than
   squeezing the text into a column two words wide. */
.parent-features { display: flex; flex-direction: column; gap: 2px; }
.pf-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.pf-row:last-child { border-bottom: none; }
.pf-text { flex: 1 1 auto; min-width: 0; display: flex;
           flex-direction: column; gap: 4px; }
.pf-text .hint { margin: 0; }
.pf-switch {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 4px; font-size: .78rem; color: var(--muted); text-align: center;
  cursor: pointer; min-width: 74px; padding-top: 2px;
}
.pf-switch input { width: 20px; height: 20px; cursor: pointer; }
.pf-default { opacity: .8; }
@media (max-width: 640px) {
  .pf-row { flex-wrap: wrap; }
  .pf-text { flex: 1 0 100%; }
  .pf-switch { flex-direction: row; align-items: center; gap: 8px;
               min-width: 0; padding: 6px 12px; border: 1px solid var(--border);
               border-radius: 999px; }
}

/* ---- Drill library: filter labels + "your team" age badge --------------- */
.drill-filter-label { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.chip-you { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 6px; margin-left: 5px; }

/* ---- Drill library: warm-up quick filter -------------------------------- */
.chip-warmup.chip-active { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-text); }

/* ---- Fair play: season fairness view (stats + parent panel) ------------- */
.fp-share { display: inline-block; width: 84px; height: 8px; border-radius: 999px;
  background: var(--bg-3); vertical-align: middle; overflow: hidden; margin-right: 8px; }
.fp-share-fill { display: block; height: 100%; background: var(--up); border-radius: 999px; }
.fp-share-fill.fp-low { background: var(--warn); }
.fp-flag { margin-left: 8px; }
.fp-pos { margin: 0 4px 4px 0; border: none; color: #fff; font-weight: 600; }
.fp-pos.fp-gk { background: #dd8a0a; }
.fp-pos.fp-def { background: #2e6ff5; }
.fp-pos.fp-mid { background: #16a34a; }
.fp-pos.fp-fwd { background: #6c47ff; }
.fp-table td { vertical-align: middle; }
/* Parent fair-play panel */
.fp-panel { display: flex; flex-direction: column; gap: 12px; }
.fp-metric { display: flex; align-items: center; gap: 10px; }
.fp-metric-label { min-width: 120px; color: var(--text-dim); font-size: 13px; }
.fp-note { background: var(--up-bg); color: var(--up-text); border-radius: var(--radius-sm);
  padding: 8px 12px; font-weight: 600; font-size: 13px; }

/* ---- Homework: solo drills assigned to players -------------------------- */
/* This week / Past homework toggle. */
.hw-viewtoggle { display: flex; gap: 8px; margin: 14px 0 4px; }

/* Past homework: one card per archived week. */
.hw-pastweek-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Toolbar: auto-propose toggle + assign button. */
.hw-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.hw-toolbar .check { font-weight: 550; }
.hw-toolbar-hint { flex: 1 1 220px; }
.hw-toolbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Two-column rows: the player on the left, their assignments on the right. */
.hw-grid { display: flex; flex-direction: column; gap: 12px; }
.hw-row { display: grid; grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 8px 20px; padding: 14px 16px; align-items: start; }
.hw-player { display: flex; align-items: center; gap: 11px; }
.hw-player-meta { min-width: 0; }
.hw-player-name { font-weight: 650; font-size: 15px; }
.hw-needs { font-size: 12.5px; margin-top: 2px; }
.hw-assign-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* The add-a-drill picker line under any existing assignments. */
.hw-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hw-select { flex: 0 1 260px; }
.hw-note-input { flex: 1 1 200px; }
.hw-suggest-hint { flex-basis: 100%; font-size: 12px; }

/* Shared list of assigned drills (coach homework tab + parent portal). */
.homework-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.homework-item { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 9px 12px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: 10px; }
.homework-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.homework-name { font-weight: 600; }
.homework-note { font-size: 12.5px; }
.homework-done-bar { text-align: center; }

@media (max-width: 640px) {
  .hw-row { grid-template-columns: 1fr; }
}

/* ---- Match audio review ------------------------------------------------- */
.audio-layout { align-items: start; }
.audio-col { min-width: 0; }
.audio-warn {
  background: var(--warn-bg); color: var(--warn-text); border-radius: var(--radius);
  padding: 9px 12px; font-size: 12.5px; margin: 10px 0 0; line-height: 1.5;
}
.audio-paste { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.audio-paste summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.audio-paste .dim { font-size: 12.5px; line-height: 1.55; }
.audio-paste textarea { width: 100%; font-family: inherit; }
.offset-fields { margin: 14px 0; }
.offset-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }

.rec-list { display: flex; flex-direction: column; }
.rec {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.rec:last-child { border-bottom: 0; }
.rec-main { min-width: 0; }
.rec-name { font-weight: 620; font-size: 13.5px; word-break: break-word; }
.rec-meta { font-size: 11.5px; margin-top: 3px; }
.rec-status { margin-top: 7px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rec-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* A job in flight gets a slow pulse so it reads as "working", not "stuck". */
.rec-working .pill-unknown { animation: rec-pulse 1.8s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .45; } }

.obs-list { display: flex; flex-direction: column; }
.obs {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.obs:last-child { border-bottom: 0; }
.obs-done { opacity: .72; }
.obs-when {
  flex-shrink: 0; width: 34px; text-align: right; font-size: 12px;
  font-weight: 700; color: var(--text-faint); padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.obs-main { flex: 1; min-width: 0; }
.obs-head { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.obs-who { font-weight: 650; font-size: 13.5px; }
.obs-note { font-size: 13px; line-height: 1.5; margin-top: 5px; }
.obs-quote {
  font-size: 12px; color: var(--text-dim); font-style: italic; margin-top: 4px;
  border-left: 2px solid var(--border); padding-left: 9px; line-height: 1.5;
}
.obs-actions { flex-shrink: 0; }
.obs-actions .inline-form { display: flex; gap: 6px; }

/* What recent matches said about one child, on their own page. */
.signal-list { display: flex; flex-direction: column; }
.signal-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.signal-row:last-child { border-bottom: 0; }
.signal-kind { flex-shrink: 0; width: 150px; display: flex; flex-wrap: wrap; gap: 5px; }
.signal-main { flex: 1; min-width: 0; }
.signal-note { font-size: 13.5px; line-height: 1.5; }
.signal-meta { font-size: 11.5px; margin-top: 4px; }

@media (max-width: 800px) {
  .signal-row { flex-direction: column; gap: 6px; padding: 12px 14px; }
  .signal-kind { width: auto; }
}

/* Themes pulled out of recent matches — the bridge from Saturday's recording
   to Tuesday's session plan. */
.theme-list { display: flex; flex-direction: column; }
.theme-row { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.theme-row:last-child { border-bottom: 0; }
.theme-head { display: flex; gap: 8px; align-items: center; }
.theme-players { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.theme-player {
  display: flex; flex-direction: column; gap: 1px; font-size: 12.5px;
  background: var(--bg-3); border-radius: var(--radius-sm); padding: 6px 10px;
  color: var(--text); max-width: 300px;
}
.theme-player .dim { font-size: 11.5px; }
.advice-evidence {
  margin: 6px 0 0 2px; padding-left: 9px;
  border-left: 2px solid var(--accent-soft);
}
.evidence-line { font-size: 12.5px; line-height: 1.5; margin-bottom: 3px; }

/* The match story: a few written lines above a merged minute-by-minute list
   (scoresheet + recording + the coach's own notes). Kept visually quieter than
   the scoreline above it — it is context, not the headline. */
.story-headline { font-size: 15px; font-weight: 650; margin: 0 0 8px; }
.story-line { font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; }
.story-source { font-size: 11.5px; margin: 10px 0 0; }
.story-details { padding: 0; }
.story-summary {
  cursor: pointer; list-style: none; padding: 14px 20px;
  display: flex; gap: 10px; align-items: center;
}
.story-summary::-webkit-details-marker { display: none; }
.story-summary .attr-title { margin: 0; }
.story-summary::after { content: "▾"; color: var(--text-faint); margin-left: auto; }
.story-details[open] .story-summary::after { content: "▴"; }
.story-list { border-top: 1px solid var(--border); }
.story-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 20px; border-bottom: 1px solid var(--border);
}
.story-row:last-child { border-bottom: 0; }
.story-when {
  flex-shrink: 0; width: 34px; text-align: right; font-size: 12px;
  font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.story-icon { flex-shrink: 0; width: 18px; text-align: center; }
.story-what { flex: 1; min-width: 0; }
.story-text { font-size: 13px; line-height: 1.5; }
.story-tag { flex-shrink: 0; display: flex; gap: 5px; align-items: center; }
/* The three sources read differently on purpose: what was logged live is the
   record, the recording is detail, an observation is the coach's judgement. */
.story-match .story-text { font-weight: 620; }
.story-audio .story-text { color: var(--text-dim); }
.story-note { background: var(--accent-soft); }
.story-against .story-text { color: var(--down-text); }

/* On a player's card in the report: what they did, and the one thing to
   work on, from this game only. */
.rc-notes { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.rc-note { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.rc-good { color: var(--up-text); }
.rc-work { color: var(--text); }

/* The audio page's own tab bar sits under the match tabs, so it needs air
   above and below to read as a second level rather than a second row of the
   same thing. */
.audio-tabs { margin: 0 0 18px; }

/* "Experimental" marks a feature that is genuinely still finding its feet, so
   a coach knows to check its output rather than trust it. Deliberately the
   warn palette, not the accent: this is a caution, not a new-feature badge. */
.badge-exp {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.nav-exp {
  margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; vertical-align: 1px;
}
.audio-exp {
  background: var(--warn-bg); color: var(--warn-text);
  border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.55;
}

.rec-progress:empty { display: none; }
.rec-progress { font-size: 11.5px; margin-top: 5px; font-variant-numeric: tabular-nums; }

/* The "you can record this" prompt. Shaped like .opp-dev-nudge on purpose —
   the app already has one way of saying "here's something you could do next"
   and a second visual language for it would just read as an advert. Shown on
   the live screen before kick-off and on the complete-match form after, then
   never again once the team has actually used the feature. */
.rec-nudge {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
  font-size: 13px; line-height: 1.5;
}
.rec-nudge-body { flex: 1 1 260px; }
.rec-nudge .btn { margin-left: auto; }
/* The stronger variant: the coach told live mode they were recording, so the
   file exists and this is a reminder rather than a suggestion. */
.rec-nudge-warm { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-text); }
.rec-note:empty { display: none; }
.rec-note { margin: 6px 2px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.offset-measured {
  background: var(--up-bg); color: var(--up-text);
  border-radius: var(--radius-sm); padding: 8px 11px;
  font-size: 12.5px; line-height: 1.5;
}

/* The timeline: what the recording says happened, in order, with the tape
   position on the left as the thing you press to hear it. Rows are dense on
   purpose — a busy game produces a couple of hundred of them and the coach is
   scanning for the goal, not reading an essay. */
.timeline-card { margin-bottom: 18px; }
.tl-list { display: flex; flex-direction: column; }
.tl-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
}
.tl-row:last-child { border-bottom: 0; }
.tl-binned { opacity: .6; }
.tl-when {
  flex-shrink: 0; width: 78px; display: flex; flex-direction: column;
  gap: 2px; align-items: flex-start; padding-top: 1px;
}
.tl-play {
  font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg-2);
  color: var(--text); border-radius: 999px; padding: 3px 9px; line-height: 1.3;
}
.tl-play:hover { border-color: var(--accent); color: var(--accent); }
.tl-playing { border-color: var(--accent); color: var(--accent); }
.tl-clock {
  font-size: 12px; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums; padding: 3px 0;
}
.tl-min { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tl-kind {
  flex-shrink: 0; width: 132px; font-size: 12px; font-weight: 650;
  display: flex; gap: 6px; align-items: baseline; padding-top: 3px;
}
.tl-icon { font-size: 13px; }
.tl-main { flex: 1; min-width: 0; padding-top: 2px; }
.tl-desc { font-size: 13px; line-height: 1.5; }
.tl-actions { flex-shrink: 0; }
.tl-binned-list { border-top: 1px solid var(--border); padding: 10px 20px 4px; }
.tl-binned-list summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }

@media (max-width: 800px) {
  .audio-layout { grid-template-columns: 1fr; }
  .offset-row { grid-template-columns: 1fr 1fr; }
  .obs { padding: 12px 14px; }
  .rec { padding: 12px 14px; flex-wrap: wrap; }
  /* On a phone the type label goes under the time rather than beside it —
     three fixed columns plus a description is one column too many. */
  .tl-row { padding: 10px 14px; flex-wrap: wrap; }
  .tl-kind { width: auto; }
  .tl-main { flex-basis: 100%; }
}

/* =========================================================================
   EDITORIAL RESTYLE — desktop design system
   =========================================================================
   Six patterns carry the whole direction: the hero band, stat pairs, ruled
   sections (instead of cards), data rows, shirt-number chips, and minutes
   bars. Everything below is built from those; per-screen sections follow.
   Tokens live here rather than in the :root at the top of the file so the
   whole direction can be read (or reverted) as one block. Later wins, so
   these override the originals where the names collide — they don't.
   ------------------------------------------------------------------------ */

:root {
  --hero-bg:      #151329;                /* the dark band */
  --hero-glow:    rgba(108, 71, 255, .5); /* radial gradient stop */
  --live-bg:      #0f0d1f;                /* live matchday only, darker */
  --accent-tint:  #c3b3ff;                /* secondary chart series, on-dark accent */
  --pos-def:      #2e6ff5;                /* defence chips */
  --muted-fill:   #c9cdd5;                /* unavailable players, rank numerals */
  --rule-hair:    #eef0f3;                /* row separators, lighter than --border */
  --on-dark-up:   #8de29a;
  --on-dark-warn: #ffd479;
  --on-dark-down: #ffb4b6;
  /* Every numeral in the app lines up. Opt out on the rare bit of prose. */
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] {
  /* The band sits *above* the page background in dark mode, not below it. */
  --hero-bg:      #1c1836;
  --hero-glow:    rgba(139, 109, 255, .42);
  --live-bg:      #0f0d1f;
  --accent-tint:  #b9a6ff;
  --pos-def:      #4d84ff;
  --muted-fill:   #3d4552;
  --rule-hair:    #21262f;
}

/* Flush page column: the hero runs full-bleed to the edges of the main
   column, so pages with a hero drop .content's padding and pad the body. */
.content.flush { padding: 0; }
.page-body { padding: 24px 36px 26px; }

/* ---- 1. The hero band ---------------------------------------------------- */
.hero {
  background: var(--hero-bg); color: #fff;
  padding: 26px 36px 24px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 150% at 90% 15%, var(--hero-glow), transparent 62%);
}
.hero > * { position: relative; }
.hero a { color: inherit; }
/* ...but buttons, pills and the coach badge bring their own colour, and the
   rule above (0,1,1) outscores a bare `.hero-btn-primary` (0,1,0) — which
   painted white text onto the white primary button, visible only on hover.
   Scoping these under .hero makes them 0,2,0 so they win outright. */
.hero .hero-btn { color: #fff; }
.hero .hero-btn-primary { color: var(--hero-bg); }
.hero .hero-pill { color: rgba(255, 255, 255, .8); }
.hero .hero-pill.active { color: var(--hero-bg); }
.hero .coach-badge { color: #fff; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.hero-eyebrow a { color: rgba(255, 255, 255, .55); }
.hero-eyebrow a:hover { color: #fff; text-decoration: none; }
.hero h1, .hero-title {
  margin: 9px 0 0; font-size: 40px; line-height: 1.03;
  font-weight: 780; letter-spacing: -.035em;
}
.hero h1.long, .hero-title.long { font-size: 34px; }
.hero-title .sub, .hero h1 .sub { color: rgba(255, 255, 255, .42); font-weight: 500; }
.hero-meta {
  display: flex; align-items: baseline; gap: 20px; margin-top: 12px;
  flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .62);
}
.hero-meta strong { font-size: 15px; font-weight: 600; color: #fff; font-weight: 620; }
.hero-stats {
  display: flex; gap: 34px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  align-items: flex-end; flex-wrap: wrap;
}
.hero-stats.wide { gap: 40px; }
.hero-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: 9px;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 13px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
}
.hero-btn:hover { background: rgba(255, 255, 255, .18); text-decoration: none; color: #fff; }
.hero-btn-primary {
  background: #fff; border-color: #fff; color: var(--hero-bg); font-weight: 650;
}
.hero-btn-primary:hover { background: rgba(255, 255, 255, .88); color: var(--hero-bg); }

/* Season / view switcher pills inside a hero. */
.hero-pills { display: flex; gap: 6px; }
.hero-pill {
  padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .16);
}
.hero-pill:hover { text-decoration: none; color: #fff; }
.hero-pill.active { background: #fff; color: var(--hero-bg); border-color: #fff; }

/* ---- 2. Stat pairs ------------------------------------------------------- */
.stat-v {
  font-size: 30px; font-weight: 760; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-v .q { font-size: 14px; color: rgba(255, 255, 255, .45); font-weight: 700; }
.stat-l {
  font-size: 10px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 6px;
}
.stat-v.big { font-size: 34px; letter-spacing: -.035em; }
.stat-v.good { color: var(--on-dark-up); }
.stat-v.watch { color: var(--on-dark-warn); }
.stat-v.bad { color: var(--on-dark-down); }
/* Stat pairs on a light background (right rails, ruled sections). */
.on-light .stat-v .q, .stat-pair.on-light .stat-v .q { color: var(--text-faint); }
.on-light .stat-l, .stat-pair.on-light .stat-l { color: var(--text-faint); }
.on-light .stat-v.good { color: var(--up-text); }
.on-light .stat-v.watch { color: var(--warn-text); }
.on-light .stat-v.bad { color: var(--down-text); }

/* ---- 3. Rules, not cards ------------------------------------------------- */
.rule-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 2px solid var(--text); padding-bottom: 7px;
}
.rule-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.rule-hint {
  font-size: 11px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.rule-hint a { font-weight: 650; }
.rule-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.rule-foot {
  border-top: 2px solid var(--text); margin-top: 14px; padding-top: 11px;
  font-size: 13px; color: var(--text-dim);
}
.rule-sect + .rule-sect { margin-top: 26px; }
/* "Why this team" — the plan explained in plain words under the minutes grid.
   Data rows, not cards: it reads as part of the sheet rather than a callout. */
.whylist { list-style: none; margin: 0; padding: 0; }
.whylist li {
  display: flex; align-items: baseline; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; line-height: 1.5; color: var(--text);
}
.whylist li:last-child { border-bottom: 0; padding-bottom: 0; }
.why-icon {
  flex: none; width: 20px; text-align: center;
  font-size: 14px; line-height: 1.5;
}
/* Label-plus-hairline divider (schedule sections). */
.sect-div {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.sect-div::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Text tab bar — tabs as words with counts, not a dropdown. */
.tabbar {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.tabbar-note { margin-left: auto; font-size: 11px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.tabbar a {
  padding: 0 0 9px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-size: 14px; font-weight: 600;
}
.tabbar a:hover { color: var(--text); text-decoration: none; }
.tabbar a.active { color: var(--text); border-bottom-color: var(--text); }
.tabbar .n { font-variant-numeric: tabular-nums; color: var(--text-faint); font-weight: 650; margin-left: 5px; }
.tabbar a.active .n { color: var(--text-dim); }

/* ---- 4. Data rows -------------------------------------------------------- */
.drow-head {
  display: grid; align-items: center; gap: 0 16px; padding: 9px 0 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.drow {
  display: grid; align-items: center; gap: 0 16px; padding: 8px 0;
  border-bottom: 1px solid var(--rule-hair); color: inherit;
}
.drow:last-child { border-bottom: none; }
a.drow:hover { text-decoration: none; background: var(--bg-3); }
.drow-tight { padding: 6px 0; }          /* 14 rows must fit 1000px */
.drow .num, .drow-head .num { text-align: right; font-variant-numeric: tabular-nums; }
.drow .mid, .drow-head .mid { text-align: center; }
/* The one number that matters, once per row. */
.drow .feature {
  font-size: 19px; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* Attention: a wash, not a border or a badge. */
.drow.attn { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.drow.out { opacity: .55; }
.d-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* These are spans as often as divs, so make the two-line stack explicit. */
.d-name-t { display: block; min-width: 0; }
.d-primary {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-secondary {
  display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-secondary.warn { color: var(--warn-text); }
.d-secondary.bad { color: var(--down-text); }
.d-secondary.owed { color: var(--accent); font-weight: 650; }

/* ---- 5. Shirt-number chips ----------------------------------------------- */
/* One chip, used app-wide. The accent default is what the older player pills
   (.chip / .lchip, live mode and the plan editor) have always shown; the new
   screens always add a position modifier, so they never fall back to it. */
.chip-num {
  display: grid; place-items: center;
  min-width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: #fff; background: var(--accent); flex-shrink: 0;
}
.chip-num.sm { min-width: 22px; height: 22px; font-size: 10px; }
/* Modifiers are scoped to the chip itself: `.chip-gk` is also a wrapper class
   on the older pills, and colouring a whole pill orange is not what it means. */
.chip-num.chip-gk  { background: var(--warn); }
.chip-num.chip-def { background: var(--pos-def); }
.chip-num.chip-mid { background: var(--up); }
.chip-num.chip-att { background: var(--down); }
.chip-num.chip-any { background: var(--unknown); }
.chip-num.chip-out { background: var(--muted-fill); }
/* The older pills keep their own compact sizing. */
.chip > .chip-num, .lchip > .chip-num {
  min-width: 22px; height: 22px; font-size: 11px; padding: 0 4px;
}

/* Player pill — the chip wrapped for the pitch and swap UI. */
.ppill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2); color: var(--text); border-radius: 999px;
  padding: 4px 13px 4px 4px; font-size: 12.5px; font-weight: 650;
  border: none; font-family: var(--font); cursor: pointer;
}
.ppill.on-pitch { background: #fff; color: #17181c; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.ppill.sel {
  background: var(--accent); color: #fff;
  outline: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 4px 14px rgba(108, 71, 255, .55);
}
.ppill.empty {
  background: transparent; border: 1px dashed rgba(255, 255, 255, .4);
  color: rgba(255, 255, 255, .6); padding: 6px 14px; box-shadow: none; font-weight: 550;
}

/* ---- 6. Minutes bars and fairness ---------------------------------------- */
.mbar {
  position: relative; height: 10px; border-radius: 5px;
  background: var(--bg-3); overflow: visible;
}
.mbar-fill { height: 100%; border-radius: 5px; background: var(--accent); }
.mbar-low  .mbar-fill { background: var(--down); }
.mbar-mid  .mbar-fill { background: var(--warn); }
.mbar-ok   .mbar-fill { background: var(--accent); }
.mbar-out  .mbar-fill { background: var(--muted-fill); }
.mbar-avg {
  position: absolute; top: -4px; bottom: -4px; width: 1px;
  background: var(--text-faint);
}
.mbar-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-dim);
}
.mbar-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.mbar-legend .sw { width: 16px; height: 8px; border-radius: 4px; display: inline-block; }
.sw-low { background: var(--down); } .sw-mid { background: var(--warn); }
.sw-ok { background: var(--accent); } .sw-out { background: var(--muted-fill); }
.sw-avg { width: 1px; height: 13px; background: var(--text-faint); border-radius: 0; }

/* Interval blocks — the Q1..Qn matrix, read as a matrix. */
.imatrix { display: grid; align-items: center; gap: 0 10px; }
.iblock { height: 22px; border-radius: 5px; background: var(--bg-3); }
.iblock.on { background: var(--accent); }
.iblock.on.part { background: linear-gradient(90deg, var(--accent) 50%, var(--bg-3) 50%); }

/* W/D/L form squares. */
.form-strip { display: flex; gap: 5px; }
.wdl {
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--unknown);
}
.wdl-w { background: var(--up); } .wdl-d { background: var(--unknown); } .wdl-l { background: var(--down); }
.wdl.sm { width: 22px; height: 22px; font-size: 10.5px; border-radius: 5px; }

/* ---- Shared small parts -------------------------------------------------- */
.microlabel {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.act-link { font-size: 12.5px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.dark-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 9px; background: var(--text); color: var(--bg-2);
  font-size: 12.5px; font-weight: 650; border: none; cursor: pointer; font-family: var(--font);
}
.dark-btn:hover { text-decoration: none; opacity: .88; color: var(--bg-2); }
.two-col { display: grid; gap: 34px; align-items: start; }
.two-col > * { min-width: 0; }

/* ---- Screen: Squad ------------------------------------------------------- */
.squad-row { grid-template-columns: 1fr 96px 78px 150px 92px 46px; }
.squad-row .d-name { color: inherit; }
.squad-row .d-name:hover { text-decoration: none; }
.squad-row .d-name:hover .d-primary { color: var(--accent); }
.squad-legend { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--text); }
/* Drop the least load-bearing columns first as the window narrows. */
@media (max-width: 1180px) {
  .squad-row { grid-template-columns: 1fr 96px 78px 150px; }
  .squad-row > :last-child { display: none; }
}
@media (max-width: 980px) {
  .squad-row { grid-template-columns: 1fr 78px 150px; }
  .squad-row > :nth-child(2) { display: none; }
}
@media (max-width: 720px) {
  .squad-row { grid-template-columns: 1fr 64px; }
  .squad-row > :nth-child(4) { display: none; }
}

/* ---- Screen: Schedule ---------------------------------------------------- */
.sched-row { grid-template-columns: 66px 1fr 200px 132px; padding: 11px 0; }
.sched-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.sched-dow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.sched-day {
  font-size: 26px; font-weight: 770; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.sched-day.big { font-size: 34px; color: var(--accent); }
.sched-what { min-width: 0; }
.sched-what .d-primary a { color: inherit; }
.sched-what .d-primary a:hover { color: var(--accent); text-decoration: none; }
.sched-score {
  margin-left: 10px; font-size: 13px; font-weight: 650; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
}
.sched-state { font-size: 13px; color: var(--text-dim); }
.sched-state.warn { color: var(--warn-text); font-weight: 600; }
.sched-act { text-align: right; }
.microlabel.accent { color: var(--accent); }
/* The next fixture is the one row that gets weight. */
.sched-next {
  padding: 18px 0; border-bottom: 1px solid var(--rule-hair);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
}
.sched-next-title {
  font-size: 21px; font-weight: 700; letter-spacing: -.025em; margin-top: 3px;
}
.sched-next-title a { color: inherit; }
.sched-next-title a:hover { color: var(--accent); text-decoration: none; }
.sched-played { opacity: .72; }
@media (max-width: 1040px) {
  .sched-row { grid-template-columns: 60px 1fr 132px; }
  .sched-row .sched-state { display: none; }
}
@media (max-width: 700px) {
  .sched-row { grid-template-columns: 52px 1fr; }
  .sched-row .sched-act { display: none; }
  .sched-day { font-size: 22px; }
}

/* ---- Screen: Stats ------------------------------------------------------- */
.stats-cols { grid-template-columns: 1fr 1fr; gap: 38px; }
@media (max-width: 1000px) { .stats-cols { grid-template-columns: 1fr; } }

/* Goals & assists — a ranked list, not a table. */
.ga-row { grid-template-columns: 26px 1fr 1fr 56px 58px; gap: 0 14px; }
.ga-rank {
  font-size: 20px; font-weight: 780; letter-spacing: -.03em;
  color: var(--muted-fill); font-variant-numeric: tabular-nums;
}
.ga-row .d-name { color: inherit; }
.ga-row .d-name:hover { text-decoration: none; }
.ga-row .d-name:hover .d-primary { color: var(--accent); }
.ga-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg-3); }
.ga-g { background: var(--accent); }
.ga-a { background: var(--accent-tint); }
.ga-count { font-size: 12.5px; color: var(--text-faint); }

/* Results as a zero-baseline goal-difference chart. */
.gd-chart { display: flex; gap: 6px; align-items: stretch; padding: 14px 0 0; }
.gd-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; color: inherit;
}
.gd-col:hover { text-decoration: none; }
.gd-col:hover .gd-lbl { color: var(--accent); }
.gd-up, .gd-dn { height: 52px; width: 100%; display: flex; justify-content: center; }
.gd-up { align-items: flex-end; }
.gd-dn { align-items: flex-start; }
.gd-line { height: 1px; width: 100%; background: var(--border-2); }
.gd-bar { width: 62%; border-radius: 3px; min-height: 3px; }
.gd-w { background: var(--up); }
.gd-l { background: var(--down); }
.gd-d { background: var(--unknown); height: 6px; }
.gd-lbl {
  margin-top: 8px; font-size: 10px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Minutes fairness as a dot distribution — replaces a fourteenth table. */
.dotstrip { position: relative; height: 62px; margin: 26px 0 0; }
.dotstrip-track {
  position: absolute; left: 0; right: 0; top: 28px;
  height: 3px; border-radius: 2px; background: var(--bg-3);
}
.dotstrip-avg {
  position: absolute; top: 6px; bottom: 20px; width: 1px;
  background: var(--text-faint);
}
.dotstrip-avg-l {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.dot {
  position: absolute; top: 22px; width: 15px; height: 15px; border-radius: 50%;
  transform: translateX(-50%); border: 2px solid var(--bg);
}
.dot-low { background: var(--down); }
.dot-mid { background: var(--warn); }
.dot-ok  { background: var(--accent); }
.dotstrip-scale {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 650; color: var(--text-faint);
}

/* Where goals come from. */
.src-row { grid-template-columns: 110px 1fr 44px; gap: 0 14px; }
.src-bar { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.src-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }

.worth-knowing {
  font-size: 15px; font-weight: 500; line-height: 1.55;
  margin: 12px 0 10px; max-width: 46em;
}
.metric-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; }

/* ---- Screen: Dashboard --------------------------------------------------- */
.dash-cols { grid-template-columns: 1fr 320px; gap: 38px; }
.dash-main > .rule-sect:first-of-type { margin-top: 0; }
.dash-rail { position: sticky; top: 24px; }
.dash-rail .rule-sect:first-child { margin-top: 0; }
.job-row { grid-template-columns: 1fr auto; gap: 0 12px; align-items: start; padding: 11px 0; }
.job-t { min-width: 0; }
.job-row .d-primary { white-space: normal; }
.job-urgent { color: var(--down-text); }
.job-row .act-link { padding-top: 1px; }
.job-next-training { padding: 11px 0; }
.job-next-training > a { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.job-focus { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.avail-row { grid-template-columns: 1fr auto; }
.avail-row .d-name { color: inherit; }
.avail-row .d-name:hover { text-decoration: none; }
.avail-row .d-name:hover .d-primary { color: var(--accent); }
.res-row { grid-template-columns: 26px 1fr 84px; gap: 0 14px; }
.res-row .d-name { color: inherit; }
.res-row .d-name:hover { text-decoration: none; }
.res-row .d-primary a { color: inherit; }
.res-row .d-primary a:hover { color: var(--accent); text-decoration: none; }
.fair-row { grid-template-columns: 1fr 62px 130px; gap: 0 16px; }
.fair-row .d-name { color: inherit; }
.fair-row .d-name:hover { text-decoration: none; }
.fair-row .d-name:hover .d-primary { color: var(--accent); }
.perf-row { grid-template-columns: 1fr 100px 52px; gap: 0 16px; }
.perf-row .sparkline { width: 100px; height: 30px; }
.quick-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px; padding: 18px 0 4px;
}
.dash-customize { margin-bottom: 20px; }
/* Below ~1180px the rail drops beneath the main column, as designed. */
@media (max-width: 1180px) {
  .dash-cols { grid-template-columns: 1fr; }
  .dash-rail { position: static; }
}
@media (max-width: 700px) {
  .fair-row { grid-template-columns: 1fr 56px; }
  .fair-row > :last-child { display: none; }
}

/* ---- Screen: Match detail ------------------------------------------------ */
.match-cols { grid-template-columns: 1fr 292px; gap: 34px; }
.match-rail .rule-sect { margin-top: 26px; }
/* The matrix: player, one column per interval, total minutes. Columns are a
   fixed width so it reads as a matrix — never shrink them below 44px. */
.mtx {
  grid-template-columns: 1fr repeat(var(--ivs), 58px) 54px;
  gap: 0 10px;
}
.hero-result { font-weight: 650; color: #fff; }
.hero-result.good { color: var(--on-dark-up); }
.hero-result.bad { color: var(--on-dark-down); }
.avail-pair { display: flex; gap: 34px; padding: 16px 0 4px; }
.avail-pair .stat-v { font-size: 34px; }
.avail-outs { padding: 8px 0 2px; display: flex; flex-direction: column; gap: 3px; }
.form-strip a { display: inline-flex; }
.form-strip a:hover { text-decoration: none; opacity: .82; }
.job-check { grid-template-columns: 22px 1fr; gap: 0 10px; }
.jc-mark {
  width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center;
  border: 1px solid var(--border-2); background: var(--bg-2);
  font-size: 11px; font-weight: 700; color: #fff;
}
.jc-done { background: var(--up); border-color: var(--up); }
.jc-text-done { color: var(--text-faint); font-weight: 500; }
@media (max-width: 1080px) {
  /* Collapse the rail first — the matrix is the priority. */
  .match-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mtx { grid-template-columns: 1fr repeat(var(--ivs), 44px) 48px; }
}

/* ---- Screen: Training ---------------------------------------------------- */
.train-cols { grid-template-columns: 1fr 296px; gap: 34px; }
.train-rail .rule-sect { margin-top: 26px; }
/* The session as a timeline: a monospace clock gutter, then blocks whose
   height is proportional to their duration (flex grows with the minutes). */
.tl {
  display: grid; grid-template-columns: 62px 1fr;
  align-items: stretch; gap: 8px 14px; padding: 16px 0 4px;
}
.tl-time {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  text-align: right; padding-top: 11px; font-variant-numeric: tabular-nums;
}
.tl-end { color: var(--text-dim); font-weight: 600; }
.tl-endline {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
  border-top: 1px solid var(--border); padding-top: 10px;
}
/* Blocks are the one place cards survive. Height is the block's duration —
   the shape of the session reads without a single number being parsed. */
.tl-block {
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid var(--unknown); border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: calc(26px + var(--mins, 10) * 2.6px);
}
.tl-block[open] { min-height: 0; }   /* opened: let the detail decide */
.tl-warmup { border-left-color: var(--unknown); }
.tl-coach  { border-left-color: var(--accent); }
.tl-break  { border-left-color: var(--warn); }
/* The closing match-play block inverts, tying the session back to matchday. */
.tl-game {
  background: var(--hero-bg); border-color: var(--hero-bg);
  border-left-color: var(--accent-tint); color: #fff;
}
.tl-game .tl-kind, .tl-game .tl-drill, .tl-game .tl-min { color: rgba(255, 255, 255, .6); }
.tl-game .slot-body .dim { color: rgba(255, 255, 255, .7); }
.tl-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 10px; padding: 11px 14px; flex: 1;
}
.tl-summary::-webkit-details-marker { display: none; }
.tl-block[open] .tl-summary { border-bottom: 1px solid var(--border); flex: none; }
.tl-game[open] .tl-summary { border-bottom-color: rgba(255, 255, 255, .16); }
.tl-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tl-t strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.tl-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.tl-drill {
  font-size: 12.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tl-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: 9px; }
.tl-min {
  font-size: 12px; font-weight: 650; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.slot-chev { color: var(--text-faint); font-size: 12px; transition: transform .15s; }
.tl-block[open] .slot-chev { transform: rotate(180deg); }
.slot-body { padding: 12px 14px; }
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-transform: inherit; letter-spacing: inherit;
}
/* Attendance as initials. */
.initials { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 0 4px; }
.initial {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-3); color: var(--text-faint);
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
}
.initial.in { background: var(--up); color: #fff; }
.kit-row { grid-template-columns: 1fr 52px; }
@media (max-width: 1080px) { .train-cols { grid-template-columns: 1fr; } }

/* ---- Screen: Formation picker -------------------------------------------- */
/* A working screen one level down: a light header strip, not a hero band. */
.work-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 20px 36px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.work-eyebrow { color: var(--text-faint); }
.work-eyebrow a { color: var(--text-faint); }
.work-eyebrow a:hover { color: var(--text); text-decoration: none; }
.work-title {
  margin: 8px 0 0; font-size: 23px; font-weight: 730; letter-spacing: -.025em;
}
.work-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* Three tracks: the decisions on the left, the pitch, the bench on the right.
   The left rail is wide enough to read the shape guide in, and the pitch is
   capped on its own stage rather than by the track — it used to take a full
   1fr and tower a thousand pixels over both rails. */
.fpick {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 320px);
  gap: 30px; align-items: start;
}
.fpick > * { min-width: 0; }

/* Shape options: a real mini pitch each, so you pick by looking. */
.shape-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.shape-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent;
  font-family: var(--font); text-align: left; color: var(--text);
}
.shape-opt:hover { background: var(--bg-3); }
.shape-opt.active { background: var(--accent-soft); border-color: rgba(108, 71, 255, .28); }
.mini-pitch {
  position: relative; width: 38px; height: 50px; flex: none;
  background: #e6ebe6; border-radius: 4px;
}
:root[data-theme="dark"] .mini-pitch { background: #2a3140; }
.mini-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--unknown); transform: translate(-50%, -50%);
}
.shape-opt.active .mini-dot { background: var(--accent); }
.shape-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shape-t strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.shape-sub { font-size: 11px; color: var(--text-faint); }

/* Interval pills carry their own length, so the readout that used to sit
   under the pitch ("This interval — 15 min") isn't needed anywhere else. */
.interval-tabs { display: flex; gap: 6px; margin-top: 12px; }
.iv-pill {
  flex: 1; padding: 9px 0 8px; border-radius: 9px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-3); border: 1px solid transparent; color: var(--text-dim);
  font-family: var(--font); font-variant-numeric: tabular-nums;
}
.iv-q { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.iv-min { font-size: 10px; font-weight: 600; opacity: .75; }
.iv-pill:hover { color: var(--text); }
.iv-pill.active { background: var(--hero-bg); border-color: var(--hero-bg); color: #fff; }
/* Each interval keeps its own shape, so the pill has to say which one. */
.iv-shape { font-size: 10px; font-weight: 700; opacity: .6; letter-spacing: .02em; }

/* Interval count, stepped from the rail: the coach decides how many blocks
   they're planning in without leaving the screen they're planning on. */
.iv-count { display: inline-flex; align-items: center; gap: 8px; }
.iv-count .iv-n {
  min-width: 12px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.iv-step {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font); font-size: 14px; line-height: 1;
}
.iv-step:hover:not(:disabled) { color: var(--text); border-color: var(--text-faint); }
.iv-step:disabled { opacity: .35; cursor: default; }

/* A button that reads as a link — for the secondary moves beside a label. */
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
}
.linkbtn:hover { text-decoration: underline; }

.fpick-tools {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  margin-top: 14px;
}
/* The second tool is the destructive one — give it room of its own. */
.fpick-tools .btn + .hint { margin-bottom: 5px; }

/* The pitch sits on the dark ground with the same violet glow as the heroes. */
.fair-read { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; }
.fair-line { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.fair-delta {
  font-size: 26px; font-weight: 760; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fair-delta.good { color: var(--up-text); }
.fair-delta.watch { color: var(--warn-text); }
.fair-delta.bad { color: var(--down-text); }
.fair-note { font-size: 13px; color: var(--text-dim); }
.pitch-stage {
  background: var(--hero-bg); border-radius: 14px; padding: 16px;
  position: relative; overflow: hidden;
  /* Reading size, centred in whatever the middle column turns out to be. */
  width: min(100%, 452px); margin: 0 auto;
}
.pitch-stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 150% at 90% 15%, var(--hero-glow), transparent 62%);
}
.pitch-stage > * { position: relative; }
/* Bands sized for a ~400px pitch — at the old width four of them filled the
   whole thing and it read as a striped panel rather than a pitch. */
.fpick .fpitch {
  background: repeating-linear-gradient(180deg,
              var(--pitch-1) 0 32px, var(--pitch-2) 32px 64px);
  border: 2px solid rgba(255, 255, 255, .35); border-radius: 14px;
}
.fpick .fslot { gap: 3px; }
.ppill-n { white-space: nowrap; }
.fpick .fslot-role {
  font-size: 9px; font-weight: 650; color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.fpick .fslot-empty .ppill { box-shadow: none; }
.fpick .fslot:hover .ppill { filter: brightness(.94); }
.fpick .fslot:hover .ppill.empty { filter: none; border-color: #fff; color: #fff; }
.fpick-bench .rule-sect { margin-top: 22px; }
/* Captain/vice stack down the bench rail — it is too narrow to sit them side by side. */
.armband-fields { display: grid; gap: 12px; margin-top: 12px; }
.bench-row { grid-template-columns: 1fr 56px; }
.coach-note { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin: 12px 0 0; }

/* The shape guide reads down the rail, one point per line — split into two
   columns at this width it wrapped after every second word. */
.formation-guide { margin-top: 20px; padding: 15px 17px; }
.fpick .guide-cols { grid-template-columns: 1fr; gap: 14px; }
.formation-guide .attr-title { margin-bottom: 10px; }

@media (max-width: 1280px) {
  /* Collapse the left rail into a horizontal shape strip above the pitch —
     the rail can't hold both the shapes and the guide at this width. */
  .fpick { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .fpick-shapes { grid-column: 1 / -1; }
  .shape-list { flex-direction: row; flex-wrap: wrap; }
  .shape-opt { width: auto; }
  .interval-tabs { max-width: 340px; }
  /* Full width again, so the guide has room for its two columns. */
  .fpick .guide-cols { grid-template-columns: 1fr 1fr; gap: 8px 26px; }
}
@media (max-width: 900px) {
  .fpick { grid-template-columns: minmax(0, 1fr); }
  .fpick .guide-cols { grid-template-columns: 1fr; }
}

/* ---- Screen: Coach's corner ---------------------------------------------- */
.coach-cols { grid-template-columns: 1fr 300px; gap: 38px; }
.qpills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
/* The answer, typeset — a lead that carries the recommendation, then support. */
.ans-lead {
  font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.35;
  margin: 0 0 16px; max-width: 660px;
}
.ans-body {
  font-size: 15px; line-height: 1.6; color: var(--text-dim);
  margin: 0 0 12px; max-width: 660px;
}
.ans-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.fu-row { grid-template-columns: 1fr auto; color: inherit; }
.fu-row:hover { text-decoration: none; background: var(--bg-3); }
.fu-row:hover .d-primary { color: var(--accent); }
.fu-current .d-primary { color: var(--accent); font-weight: 700; }
.rcpt-row { grid-template-columns: 1fr 72px; }
.rcpt-row .d-primary { white-space: normal; font-weight: 500; }
.fair-ba { display: flex; align-items: baseline; gap: 12px; padding: 14px 0 0; }
.fair-before {
  font-size: 20px; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.fair-arrow { color: var(--text-faint); }
.fair-after {
  font-size: 34px; font-weight: 770; letter-spacing: -.035em;
  color: var(--up-text); font-variant-numeric: tabular-nums;
}
/* The input affordance at the foot of the rail. */
.ask-box {
  display: flex; align-items: center; gap: 11px; margin-top: 26px;
  padding: 12px 14px; border: 1px dashed var(--border-2); border-radius: 12px;
  color: var(--text-faint); font-size: 13px;
}
.ask-text { min-width: 0; }
@media (max-width: 1080px) { .coach-cols { grid-template-columns: 1fr; } }

/* ---- Screen: Live matchday ----------------------------------------------- */
/* The one screen with no sidebar: full-bleed, dark, and sized for a phone
   held in one hand at arm's length, in sunlight. */
.content.live-page {
  padding: 0; max-width: none; background: var(--live-bg); color: #fff;
  min-height: 100vh;
}
body.live-mode { background: var(--live-bg); }
body.live-mode .sidebar,
body.live-mode .mobile-topbar,
body.live-mode .fb,
body.live-mode .to-top { display: none !important; }
.live-page .live {
  max-width: 900px; margin: 0 auto; padding: 14px 18px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.live-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 4px;
}
.live-fixture {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Top bar: leave on the left, the whistle on the right. The whistle is the
   one that ends the match, so it is the one that is tinted like a decision. */
.live-topbar .live-fixture { flex: 1 1 auto; min-width: 0; text-align: center; }
.live-exit, .live-leave {
  flex: none; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 13px; font-weight: 650; font-family: var(--font);
}
.live-exit {
  background: rgba(220, 78, 78, .22); border-color: rgba(233, 106, 106, .55);
}
.live-exit:hover { background: rgba(220, 78, 78, .36); text-decoration: none; color: #fff; }
.live-leave:hover { background: rgba(255, 255, 255, .18); text-decoration: none; color: #fff; }
.live-leave { font-weight: 550; color: rgba(255, 255, 255, .78); }

/* The clock-speed levers are for testing rotations, not for matchday — one
   mis-tap at 30× and the plan is nonsense. Folded away behind a tap. */
.live-tools > summary {
  cursor: pointer; font-size: 12px; color: rgba(255, 255, 255, .45);
  padding: 6px 2px; list-style: none;
}
.live-tools > summary::-webkit-details-marker { display: none; }
.live-tools > summary::before { content: "▸ "; }
.live-tools[open] > summary::before { content: "▾ "; }
.live-page .live-scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0 2px; background: none; border: none; box-shadow: none;
}
.live-page .live-team { min-width: 96px; }
.live-page .lt-name {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.live-page .lt-goals {
  font-size: 88px; font-weight: 790; letter-spacing: -.05em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.live-page .live-interval { color: rgba(255, 255, 255, .55); }
.live-page .live-timer {
  font-size: 62px; font-weight: 780; letter-spacing: -.04em; line-height: 1.05;
  color: #fff;
}
.live-page .live-timer.timer-over { color: var(--on-dark-down); }
.live-page .live-timer.timer-paused { color: var(--on-dark-warn); }

/* Interval progress: equal segments, the current one part-filled. */
.ivbar { display: flex; gap: 2px; margin: 6px 0 2px; }
.ivseg {
  flex: 1; height: 14px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .12);
}
.ivfill {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 3px; transition: width .5s linear;
}
.ivseg.current .ivfill { background: linear-gradient(90deg, var(--accent), var(--accent-tint)); }

/* Panels on the dark ground. */
.live-page .live-phase, .live-page .live-panel, .live-page .card {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; box-shadow: none; color: #fff;
}
.live-page .card-head { border-bottom-color: rgba(255, 255, 255, .12); }
.live-page .card-head h2 { color: #fff; }
.live-page .hint, .live-page .dim { color: rgba(255, 255, 255, .55); }
.live-page .bench-lbl { color: rgba(255, 255, 255, .5); }
.live-page .live-msg { color: rgba(255, 255, 255, .82); }
.live-page .btn {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22);
  color: #fff; min-height: 44px; box-shadow: none;
}
.live-page .btn:hover { background: rgba(255, 255, 255, .18); }
.live-page .btn-primary { background: var(--accent); border-color: var(--accent); }
.live-page .btn-primary:hover { background: var(--accent-strong); }
.live-page .btn-ghost { background: transparent; border-color: transparent; }
/* Every button on this screen is a touch target, and the event buttons are
   full-width so they can't be mis-tapped. */
.live-page .btn-big { padding: 15px 18px; font-size: 15px; min-height: 52px; }
.live-page .live-actions .btn { flex: 1 1 auto; justify-content: center; }
.live-page .live-formation {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22);
  color: #fff; min-height: 40px;
}
.live-page .live-formation option { color: var(--text); }
.live-page .lchip-bench, .live-page .lchip-out {
  border-color: rgba(255, 255, 255, .22);
}
.live-page .goal-box { background: var(--live-bg); }

/* ---- Match faces --------------------------------------------------------
   Three arrangements of one screen, chosen in Settings → Team → Match face.
   Every face carries every control — what changes is how much of the phone
   each part is allowed to take. Nothing here adds or removes a button, so a
   coach who switches face mid-match loses nothing. */

/* Compact: the pitch first, then every action as a tile in a two-across grid,
   so a whole matchday fits on one phone screen with no scrolling. Smaller
   targets are the price. */
.face-compact > * { order: 8; }
.face-compact > .live-topbar { order: 1; }
.face-compact > .live-scorebar { order: 2; }
.face-compact > .ivbar { order: 3; }
.face-compact > .live-alert { order: 4; }
.face-compact > #pitch-panel { order: 5; }
.face-compact > #phase-panel { order: 6; }
.face-compact > .live-actions { order: 7; }
.face-compact { gap: 10px; }
.live-page .face-compact .lt-goals { font-size: 44px; }
.live-page .face-compact .live-timer { font-size: 34px; }
.face-compact .ivbar { height: 8px; margin: 2px 0; }
.face-compact .ivseg { height: 8px; }
.face-compact .fpitch-live { width: min(100% - 28px, 260px); margin: 10px auto; }
.face-compact .live-bench { padding: 0 12px 12px; }
.face-compact .live-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.live-page .face-compact .btn-big {
  min-height: 50px; font-size: 12.5px; padding: 8px 6px; text-align: center;
}
/* Anything that isn't a button — the subs counter, the paused message — reads
   across the full width rather than pretending to be a tile. */
.face-compact .live-controls > .live-msg { grid-column: 1 / -1; }
.face-compact .card-pad { padding: 12px; }

/* Scoreboard: the numbers blown up to read from across a pitch, with the same
   tiles underneath. For a phone propped on a kitbag. */
.face-board > * { order: 8; }
.face-board > .live-topbar { order: 1; }
.face-board > .live-scorebar { order: 2; }
.face-board > .ivbar { order: 3; }
.face-board > .live-alert { order: 4; }
.face-board > #phase-panel { order: 5; }
.face-board > #pitch-panel { order: 6; }
.live-page .face-board .lt-goals { font-size: 108px; }
.live-page .face-board .live-timer { font-size: 84px; }
.live-page .face-board .lt-name { font-size: 13px; }
.live-page .face-board .live-interval { font-size: 15px; color: rgba(255, 255, 255, .75); }
.face-board .ivbar { height: 18px; }
.face-board .ivseg { height: 18px; }
.face-board .live-controls {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.live-page .face-board .btn-big {
  min-height: 46px; font-size: 12px; padding: 7px 5px; text-align: center;
}
.face-board .live-controls > .live-msg { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .live-page .face-board .lt-goals { font-size: 84px; }
  .live-page .face-board .live-timer { font-size: 62px; }
  .face-compact .live-controls, .face-board .live-controls {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  /* The fixture line is the one thing on this bar that repeats what the
     scoreboard right below it already says — drop it before the buttons. */
  .live-topbar .live-fixture { display: none; }
}
@media (max-width: 900px) {
  .live-page .live-scorebar { flex-wrap: wrap; justify-content: center; text-align: center; }
  .live-page .live-mid { order: -1; width: 100%; }
  .live-page .lt-goals { font-size: 72px; }
  .live-page .live-timer { font-size: 54px; }
  .live-page .live-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---- Editorial restyle: responsive + print ------------------------------- */
@media (max-width: 820px) {
  .hero { padding: 20px 16px 18px; }
  .hero h1, .hero-title { font-size: 30px; }
  .hero h1.long, .hero-title.long { font-size: 26px; }
  .hero-stats { gap: 22px; margin-top: 16px; padding-top: 14px; }
  .stat-v { font-size: 24px; }
  .stat-v.big { font-size: 26px; }
  .hero-actions { margin-left: 0; width: 100%; }
  .page-body { padding: 18px 14px 22px; }
  .work-head { padding: 16px 14px 14px; }
  .two-col { gap: 24px; }
}
.tabbar { margin-bottom: 20px; }
.rule-sect { margin-top: 30px; }

@media print {
  /* Heroes print as plain headings — no ink-heavy dark bands. */
  .hero, .pitch-stage { background: #fff !important; color: #000 !important; }
  .hero::before, .pitch-stage::before { display: none !important; }
  .hero h1, .hero-title, .hero .stat-v { color: #000 !important; }
  .hero-eyebrow, .hero-meta, .stat-l { color: #444 !important; }
  .hero-actions, .hero-pills, .qpills, .tabbar, .work-actions,
  .ask-box, .ivbar { display: none !important; }
  .hero { border-bottom: 2px solid #000; padding: 0 0 12px; }
  .page-body { padding: 0; }
  .content.flush { padding: 0; }
}
.squad-filter { margin: 0 0 14px; }
/* Rails are narrow: let the explanatory second line wrap rather than clip. */
.job-row .d-secondary, .rcpt-row .d-secondary,
.avail-outs .d-secondary, .sched-next .d-secondary { white-space: normal; }

/* ---- Phone navigation: bottom tab bar ------------------------------------ */
/* Under 820px the sidebar drawer is replaced by a fixed bottom bar, so the
   four things a coach opens mid-week are one thumb-reach away and everything
   else is one tap behind More. Desktop is untouched. Colours are the existing
   palette — this is a navigation change, not a restyle. */
.bottom-tabs { display: none; }

@media (max-width: 820px) {
  .bottom-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    /* Sit above the iOS home indicator / Android gesture bar. */
    padding: 7px 6px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  @supports (backdrop-filter: blur(12px)) {
    .bottom-tabs { backdrop-filter: blur(12px); }
  }
  .tabbar-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 2px; min-height: 44px;          /* thumb target */
    color: var(--text-faint); font-weight: 600;
  }
  .tabbar-item:hover { text-decoration: none; }
  .tabbar-item.active { color: var(--accent); }
  .tabbar-item svg { width: 23px; height: 23px; flex: none; }
  .tabbar-label {
    font-size: 10px; line-height: 1.2; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Nothing hides behind the bar — including the flush editorial pages and
     the back-to-top button. */
  body.has-tabs .content { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabs .content.flush .page-body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabs .fb { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabs .to-top { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }

  /* An unread reply from the coach, on the family bar's Coach tab. A dot, not
     a count: the number is on the tab strip already and would not survive
     being shrunk to fit down here. */
  .tabbar-item { position: relative; }
  .tabbar-dot {
    position: absolute; top: 4px; left: 50%; margin-left: 5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg-2);
  }

  /* One nav, not two — the bar replaces the drawer wherever it appears. An
     admin console is a desk job and still gets the drawer. */
  body.has-tabs .mobile-topbar,
  body.has-tabs .hamburger,
  body.has-tabs .nav-scrim { display: none !important; }
  body.has-tabs .sidebar { display: none; }
}

/* Live matchday keeps the whole screen — you can't navigate away by accident. */
body.live-mode .bottom-tabs { display: none !important; }
body.live-mode .content { padding-bottom: 0; }

/* ---- Phone navigation: the More page ------------------------------------- */
.more-group { margin-bottom: 20px; }
.more-title {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint); padding: 0 2px 8px;
}
.more-list {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.more-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; min-height: 50px;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.more-row:last-child { border-bottom: none; }
.more-row:hover { background: var(--bg-3); text-decoration: none; }
.more-icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--accent-soft); display: grid; place-items: center; font-size: 14px;
}
.more-label { flex: 1; font-size: 14.5px; font-weight: 550; min-width: 0; }
.more-hint {
  font-size: 12px; color: var(--text-faint); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.more-chev { color: var(--border-2); font-size: 18px; flex: none; }
.more-switch { padding: 12px 15px; }
.more-switch select { width: 100%; }
.more-logout { margin-top: 6px; }
/* The More page is a phone affordance; on desktop the sidebar already has it. */
@media (min-width: 821px) { .more-hint { display: none; } }

/* ---- Coach's corner: who is answering ------------------------------------ */
/* The coach's face sits top right of the hero band. Not a chat avatar — an
   attribution, so you know whose voice the answer is in. */
.coach-hero { padding-right: 200px; }
.coach-badge {
  position: absolute; top: 22px; right: 30px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 150px; text-align: center; color: #fff;
}
.coach-badge:hover { text-decoration: none; }
.coach-badge:hover .coach-badge-name { color: var(--accent-tint); }
.coach-badge-face { display: block; }
.coach-badge .coach-portrait, .coach-badge .coach-photo, .coach-badge .coach-avatar {
  border: 2px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  border-radius: 50%; overflow: hidden;
}
.coach-badge-t { display: block; }
.coach-badge-name {
  display: block; font-size: 13px; font-weight: 650; letter-spacing: -.01em;
}
.coach-badge-style {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 3px;
}
@media (max-width: 900px) {
  /* On a phone the face moves inline above the question. */
  .coach-hero { padding-right: 16px; }
  .coach-badge {
    position: static; flex-direction: row; width: auto; gap: 11px;
    text-align: left; margin-bottom: 14px;
  }
  .coach-badge-face { width: 44px; }
  .coach-badge .coach-portrait, .coach-badge .coach-photo { width: 44px !important; height: 44px; }
}

/* ---- Screen: Training list ----------------------------------------------- */
.sess-row { grid-template-columns: 1fr 110px 1.4fr 68px; }
.sess-row .d-primary { color: inherit; display: block; }
.sess-row a.d-primary:hover { color: var(--accent); text-decoration: none; }
.sess-focus { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.att-row { grid-template-columns: 1fr 70px 72px 150px; }
.att-row .d-name { color: inherit; }
.att-row .d-name:hover { text-decoration: none; }
.att-row .d-name:hover .d-primary { color: var(--accent); }
@media (max-width: 820px) {
  .sess-row { grid-template-columns: 1fr 68px; }
  .sess-row > :nth-child(2), .sess-row > :nth-child(3) { display: none; }
  .att-row { grid-template-columns: 1fr 72px; }
  .att-row > :nth-child(2), .att-row > :nth-child(4) { display: none; }
}

/* ---- Screen: Parent messages --------------------------------------------- */
.msg-row { grid-template-columns: 1fr 130px 110px 78px; }
.msg-row .d-primary { color: inherit; display: block; }
.msg-row a.d-primary:hover { color: var(--accent); text-decoration: none; }
.msg-kind { min-width: 0; }
@media (max-width: 820px) {
  .msg-row { grid-template-columns: 1fr 78px; }
  .msg-row > :nth-child(2), .msg-row > :nth-child(3) { display: none; }
}

/* ---- Screen: Matches list ------------------------------------------------ */
.fx-row { grid-template-columns: 118px 1fr 150px 200px 62px; }
.fx-row .d-primary { color: inherit; display: block; }
.fx-row a.d-primary:hover { color: var(--accent); text-decoration: none; }
.fx-venue { color: var(--text-faint); font-weight: 500; }
.fx-result { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-score { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.demo-fixture { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1080px) {
  .fx-row { grid-template-columns: 110px 1fr 150px 62px; }
  .fx-row > :nth-child(4) { display: none; }
}
@media (max-width: 780px) {
  .fx-row { grid-template-columns: 1fr 120px; }
  .fx-row > :first-child, .fx-row > :last-child { display: none; }
}

/* ---- Screen: Opponents list ---------------------------------------------- */
.opp-row { grid-template-columns: 1fr 140px 52px 82px 140px 66px 66px 46px; }
.opp-row .d-primary { color: inherit; display: block; }
.opp-row a.d-primary:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 1180px) {
  .opp-row { grid-template-columns: 1fr 52px 82px 140px 66px; }
  .opp-row > :nth-child(2), .opp-row > :nth-child(7) { display: none; }
}
@media (max-width: 780px) {
  .opp-row { grid-template-columns: 1fr 82px; }
  .opp-row > :nth-child(3), .opp-row > :nth-child(5), .opp-row > :nth-child(6) { display: none; }
}

/* ---- Player detail hero -------------------------------------------------- */
.player-hero .hero-meta { color: rgba(255, 255, 255, .62); }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---- Team badge ---------------------------------------------------------- */
.logo-field { display: flex; align-items: flex-start; gap: 14px; }
.logo-controls { min-width: 0; flex: 1; }
.logo-preview {
  width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--border);
  display: grid; place-items: center;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-empty { font-size: 24px; font-weight: 750; color: var(--text-faint); }
/* In the hero band: sits left of the eyebrow/title stack. */
.hero-badge {
  width: 52px; height: 52px; flex: none; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  display: grid; place-items: center;
}
.hero-badge img { width: 100%; height: 100%; object-fit: contain; }
.hero-id { display: flex; align-items: flex-start; gap: 16px; }
.hero-id > .hero-id-t { min-width: 0; flex: 1; }
@media (max-width: 820px) {
  .hero-badge { width: 40px; height: 40px; border-radius: 10px; }
  .hero-id { gap: 12px; }
}
/* The badge floats top-right of the band; heroes that carry one reserve room
   so a long title never runs under it. */
.hero-badge-abs { position: absolute; top: 22px; right: 30px; z-index: 1; }
.hero:has(.hero-badge-abs) { padding-right: 100px; }
@media (max-width: 820px) {
  .hero-badge-abs { top: 16px; right: 14px; }
  .hero:has(.hero-badge-abs) { padding-right: 66px; }
}

/* ---- Minutes matrix: coloured by the job, not just on/off ---------------- */
/* A block is filled when the player is on the pitch and tinted by the position
   they held that interval — a keeper's spell reads at a glance, and a swap
   mid-game shows as the colour changing partway across the row. */
.iblock.pos-gk  { background: var(--warn); }
.iblock.pos-def { background: var(--accent); }
.iblock.pos-mid { background: var(--accent); }
.iblock.pos-fwd { background: var(--accent); }
.mtx-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-dim); padding: 12px 0 0;
}
.mtx-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.mtx-legend .sw { width: 16px; height: 10px; border-radius: 5px; display: inline-block; }
.sw-gk { background: var(--warn); }
.sw-out-field { background: var(--accent); }
.sw-off { background: var(--bg-3); border: 1px solid var(--border); }
.mtx-keepers { margin-left: auto; color: var(--warn-text); font-weight: 600; }

/* ---- Where they've played ------------------------------------------------ */
.posrow { grid-template-columns: 1fr 1.4fr 54px 62px; }
.pos-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.posbar { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.posbar > span { display: block; height: 100%; border-radius: 5px; }
/* One position palette, shared with the shirt chips and the minutes matrix. */
.pos-gk  { background: var(--warn); }
.pos-def { background: var(--pos-def); }
.pos-mid { background: var(--up); }
.pos-fwd { background: var(--down); }
.poshist { grid-template-columns: 1fr 1.5fr 62px; }
.poshist .d-primary { color: inherit; display: block; }
.poshist a.d-primary:hover { color: var(--accent); text-decoration: none; }
.posspell { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.spell {
  font-size: 11px; font-weight: 650; color: #fff; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap;
}
@media (max-width: 780px) {
  .posrow { grid-template-columns: 1fr 54px 62px; }
  .posrow > :nth-child(2) { display: none; }
  .poshist { grid-template-columns: 1fr 62px; }
  .poshist > :nth-child(2) { display: none; }
}

/* ---- Screen: Club console ------------------------------------------------ */
/* Most clubs signing up run a single team, so /club is their front door. It
   opens with four readings of the club in one ruled strip — boxed rather than
   bare stat pairs because this is the first thing they see — then the squad
   list, then the two housekeeping columns. */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); box-shadow: var(--shadow); overflow: hidden;
}
.kpi { padding: 15px 20px 17px; border-left: 1px solid var(--border); color: inherit; }
.kpi:first-child { border-left: none; }
a.kpi:hover { background: var(--bg-3); text-decoration: none; }
.kpi-l {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.kpi-v {
  margin-top: 11px; font-size: 30px; font-weight: 760; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* A word, not a number — "All clear" shouldn't shout like a scoreline. */
.kpi-v.word { font-size: 21px; font-weight: 720; letter-spacing: -.02em; }
.kpi-v.good { color: var(--up-text); }
.kpi-v.bad { color: var(--down-text); }
/* Amber, not red: a fee waiting to be confirmed is a job, not a problem. */
.kpi-v.warn { color: var(--warn-text); }
.kpi-note { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
@media (max-width: 940px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(3) { border-left: none; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 540px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi { border-left: none; }
  .kpi + .kpi { border-top: 1px solid var(--border); }
}

/* Hero foot: the season line on the left, the four consoles on the right. */
.club-hero-foot { align-items: center; }
.club-hero-foot .hero-meta { margin-top: 0; }

/* Teams: name, age group, players, then whoever runs it. The manager cell
   carries both the current names and the assign form, so rows top-align. */
.club-team-row { grid-template-columns: 1fr 108px 68px minmax(230px, 1.15fr); align-items: start; padding: 12px 0; }
.club-team-row .d-name { color: inherit; }
.club-team-row .d-name:hover { text-decoration: none; }
.club-team-row .d-name:hover .d-primary { color: var(--accent); }
.club-open {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: inherit;
  text-align: left;
}
.club-open:hover { color: var(--accent); }
.club-managers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.club-assign { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; width: 100%; }
.club-assign input { max-width: 190px; }
@media (max-width: 1080px) {
  .club-team-row { grid-template-columns: 1fr 68px minmax(200px, 1fr); }
  .club-team-row > :nth-child(2) { display: none; }
}
@media (max-width: 760px) {
  /* Stacked rows carry their own labels, so the column header stops earning
     its keep — the players count goes with it. */
  .club-team-row { grid-template-columns: 1fr; gap: 8px; }
  .drow-head.club-team-row { display: none; }
  .club-team-row > :nth-child(3) { display: none; }
  .club-managers, .club-assign { justify-content: flex-start; }
}

/* The add-team panel and the two housekeeping columns below the squad list. */
.club-add { display: grid; grid-template-columns: 1fr 200px auto; gap: 14px; align-items: end; margin-top: 16px; }
.club-cols { grid-template-columns: 1fr 336px; gap: 34px; }
.club-detail { grid-template-columns: 1fr auto; }
.club-detail .num { color: var(--text-dim); font-size: 13px; }
@media (max-width: 1040px) { .club-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .club-add { grid-template-columns: 1fr; } }

/* ---- Error pages --------------------------------------------------------
   Standalone (see templates/errors/error.html): no sidebar, no tab bar, just
   a centred card that says what happened and how to get out of it. */
.error-page { background: var(--bg); }
.error-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.error-wrap .card { max-width: 480px; width: 100%; }
.error-code {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.error-wrap h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.error-wrap .dim { margin: 0; line-height: 1.55; }
.error-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* ---- Account: your data / close account ---------------------------------
   Used by auth/account.html. The danger card borrows the red border the
   settings danger fieldset already uses, so "this one is different" reads the
   same way in both places. */
.split-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.split-row > div { min-width: 0; flex: 1 1 320px; }
.card-danger { border-color: #f1c7c7; }
.card-danger .card-head h2 { color: var(--down-text); }
.warn-panel {
  background: var(--warn-bg); border: 1px solid #f0dcb4;
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px;
  line-height: 1.5; color: var(--warn-text);
}
.warn-panel strong { color: inherit; }
.warn-list { margin: 0 0 10px; padding-left: 18px; }
.warn-list li { margin: 2px 0; }
:root[data-theme="dark"] .card-danger { border-color: rgba(248, 81, 73, .4); }
:root[data-theme="dark"] .warn-panel { border-color: rgba(221, 138, 10, .4); }

/* ---- Long-form text (privacy notice) ------------------------------------
   The app is almost entirely tables, chips and rows; this is the one place
   with paragraphs to read, so it gets a measure and some air. */
.prose { max-width: 68ch; }
.prose h2 {
  margin: 28px 0 8px; font-size: 17px; letter-spacing: -.02em;
}
.prose h2:first-of-type { margin-top: 8px; }
.prose p { margin: 0 0 12px; line-height: 1.62; font-size: 14.5px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin: 5px 0; line-height: 1.55; font-size: 14.5px; }
.prose .card p { font-size: 14.5px; }
.nowrap { white-space: nowrap; }

/* ---- Recycle bin --------------------------------------------------------- */
.bin-row { grid-template-columns: minmax(0, 1fr) 120px 100px auto; }
@media (max-width: 720px) {
  .bin-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bin-row > span:nth-child(2), .bin-row > span:nth-child(3) { display: none; }
}
/* Undo, offered inline in the flash message right after a delete. The form is
   there for the CSRF token; it should read as a link, not a second button. */
.flash-undo { display: inline; margin-left: 8px; }
.linkish {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline; font-weight: 700;
}
.linkish:hover { text-decoration: none; }

/* ---- Fees ----------------------------------------------------------------
   Club side: a band of four figures, then one card per team whose header is
   also the open/close control for the charge form. Family side further down. */
.stat-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px;
}
.stat-figure {
  display: block; font-size: 28px; font-weight: 750; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-figure.bad { color: var(--down-text); }
.stat-figure.warn { color: var(--warn-text); }

.fee-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
}
.fee-tile { padding: 18px 22px; border-left: 1px solid var(--border); }
.fee-tile:first-child { border-left: none; }
@media (max-width: 760px) {
  .fee-band { grid-template-columns: 1fr 1fr; }
  .fee-tile:nth-child(3) { border-left: none; }
  .fee-tile:nth-child(n+3) { border-top: 1px solid var(--border); }
}

.fee-team { margin-bottom: 18px; }
.fee-team-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  list-style: none;                 /* Firefox marker */
}
.fee-team-head::-webkit-details-marker { display: none; }
.fee-team-head h2 { margin: 0; }
.fee-team-meta {
  flex: 1 1 auto; font-size: 12.5px; color: var(--text-faint); min-width: 0;
}
.charge-toggle { flex: 0 0 auto; }
.charge-box .when-open,
.charge-box[open] .when-closed { display: none; }
.charge-box[open] .when-open { display: inline; }
/* Open, the button reads as "get me out of here" rather than a call to action. */
.charge-box[open] .charge-toggle {
  background: var(--bg-2); border-color: var(--border-2);
  color: var(--text); box-shadow: none;
}

.charge-panel {
  background: var(--bg-3); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 16px 22px 18px;
}
.charge-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.charge-title { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
/* CSS-only tab switch — the radios are the state, the labels are the buttons. */
.seg-r { position: absolute; opacity: 0; width: 0; height: 0; }
.seg {
  display: inline-flex; background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 2px; gap: 2px;
}
.seg-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--text-dim); cursor: pointer; user-select: none;
}
.seg-btn:hover { color: var(--text); }
.r-squad:checked ~ .charge-panel-head .b-squad,
.r-one:checked ~ .charge-panel-head .b-one {
  background: var(--accent); color: #fff;
}
.charge-form { display: none; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.r-squad:checked ~ .form-squad,
.r-one:checked ~ .form-one { display: flex; }
.charge-form .field { flex: 1 1 220px; margin: 0; }
.charge-form .field-sm { flex: 0 1 170px; }
.charge-form .field-go { flex: 0 0 auto; }
.charge-form label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 5px;
}
.charge-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }

.fees-table th.num, .fees-table td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.fees-table th.act, .fees-table td.act { text-align: right; white-space: nowrap; }
.fees-table td .d-primary { font-weight: 550; }
.fees-table .fee-none td { color: var(--text-faint); }
/* The rows the page exists for: a parent says they've paid, nobody has checked. */
.fees-table .fee-attn { background: linear-gradient(90deg, var(--warn-bg), transparent 75%); }
.pill-owing {
  background: transparent; border: 1px solid var(--border-2);
  color: var(--text-dim);
}
/* Confirming receipt is the one affirmative action on this page, so it is the
   one green button in the app — green reads as "money's in". */
.btn-ok { color: var(--up-text); border-color: #bfe6cc; background: var(--up-bg); }
.btn-ok:hover { background: #d7efdf; border-color: var(--up); }
.fee-foot {
  border-top: 1px solid var(--border); font-size: 12.5px;
  color: var(--text-faint); line-height: 1.5;
}
:root[data-theme="dark"] .btn-ok { border-color: rgba(22, 163, 74, .45); }

.fee-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--rule-hair);
}
.fee-card:last-child { border-bottom: none; }
.fee-card.is-settled { opacity: .72; }
.fee-card-t { flex: 1 1 200px; min-width: 0; }
.fee-card-amount {
  font-size: 19px; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fee-card-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fee-pay-form { display: flex; gap: 8px; flex-wrap: wrap; }
.fee-pay-form input[type="text"] { width: 190px; }
@media (max-width: 560px) {
  .fee-card-action, .fee-pay-form { width: 100%; }
  .fee-pay-form input[type="text"] { flex: 1 1 auto; width: auto; }
}

/* ---- Pitch allocation ----------------------------------------------------
   The grid answers two questions at once: read across for "where can this team
   go", down for "who can I put here". Colour carries the verdict, so the five
   levels get five distinct treatments rather than a red/green pair. */
.alloc-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.alloc-help { margin: 0; font-size: 13px; flex: 1 1 280px; }
.seg-btn.on { background: var(--accent); color: #fff; }
a.seg-btn:hover { text-decoration: none; }

.alloc-grid { width: 100%; border-collapse: collapse; }
.alloc-grid th, .alloc-grid td {
  padding: 9px 10px; border-bottom: 1px solid var(--rule-hair);
  text-align: left; vertical-align: middle;
}
.alloc-grid thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.alloc-grid thead th .d-primary { font-size: 12.5px; color: var(--text); }
.alloc-team { min-width: 150px; font-weight: 600; }
.alloc-cell { white-space: nowrap; }

/* One dot + one word per cell — a grid of sentences is unreadable at 8 pitches. */
.lvl-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--unknown); flex: 0 0 auto;
}
.lvl-name { font-size: 12px; font-weight: 600; }
.lvl-flag { color: var(--accent); font-weight: 800; }
.lvl-prohibited .lvl-dot { background: var(--down); }
.lvl-prohibited .lvl-name { color: var(--down-text); }
.lvl-unsuitable .lvl-dot { background: var(--warn); }
.lvl-unsuitable .lvl-name { color: var(--warn-text); }
.lvl-acceptable .lvl-dot { background: var(--unknown); }
.lvl-acceptable .lvl-name { color: var(--text-dim); }
.lvl-preferred .lvl-dot { background: var(--up); }
.lvl-preferred .lvl-name { color: var(--up-text); }
.lvl-first_choice .lvl-dot { background: var(--accent); }
.lvl-first_choice .lvl-name { color: var(--accent); font-weight: 700; }
.alloc-cell.lvl-prohibited { background: rgba(229, 72, 77, .06); }
.alloc-cell.lvl-unsuitable { background: rgba(221, 138, 10, .06); }

.cell-box > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  list-style: none; padding: 2px 0;
}
.cell-box > summary::-webkit-details-marker { display: none; }
.cell-box[open] > summary { outline: 2px solid var(--accent-soft); border-radius: 6px; }
.cell-pop {
  position: absolute; z-index: 30; margin-top: 6px; width: 280px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow-lift); white-space: normal;
}
.cell-why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.cell-pop label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin: 8px 0 4px;
}
.cell-pop select, .cell-pop input[type="text"] { width: 100%; }
.cell-pop .btn { margin-top: 10px; }

.alloc-key { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 0; }
.key-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
}

/* ---- Venues & pitch detail ---------------------------------------------- */
.venue-card { margin-bottom: 18px; }
.venue-head { cursor: pointer; list-style: none; }
.venue-head::-webkit-details-marker { display: none; }
.venue-head h2 { margin: 0; }
.venue-meta { flex: 1 1 auto; font-size: 12.5px; color: var(--text-faint); }
.pitch-row { border-top: 1px solid var(--rule-hair); }
.pitch-row.is-retired { opacity: .6; }
.pitch-summary {
  display: flex; align-items: center; gap: 12px; padding: 11px 20px;
  cursor: pointer; list-style: none;
}
.pitch-summary::-webkit-details-marker { display: none; }
.pitch-summary:hover { background: var(--bg-3); }
.pitch-summary .d-name-t { flex: 1 1 auto; min-width: 0; }
.pitch-edit { padding: 4px 20px 18px; background: var(--bg-3); }
.pf-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pf-grid .field { margin: 0; }
.pf-grid label, .venue-form label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 4px;
}
.pf-checks { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.check-sm { font-size: 12.5px; }
.pf-derived { font-size: 12.5px; }

.opt-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--rule-hair);
}
.opt-row:last-child { border-bottom: none; }

/* ---- Availability & bookings --------------------------------------------- */
.avail-block { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.avail-h {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
}
.avail-h + .avail-h, .avail-form + .avail-h { margin-top: 18px; }
.avail-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.avail-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 5px 10px; font-size: 12.5px;
}
.avail-chip.is-open { border-color: #bfe6cc; background: var(--up-bg); color: var(--up-text); }
.avail-chip form { display: inline; }
.avail-chip .linkish { text-decoration: none; color: var(--text-faint); font-weight: 700; }
.avail-chip .linkish:hover { color: var(--down-text); }
.avail-none { font-size: 12.5px; margin: 0 0 10px; }
.avail-form { display: flex; }

/* A flagged booking gets a wash plus a second line saying what's wrong — the
   badge alone would make people hover every row to find out. */
.bk-hard > td { background: rgba(229, 72, 77, .07); }
.bk-soft > td { background: rgba(221, 138, 10, .06); }
.bk-dead > td { opacity: .5; }
.bk-why td { padding-top: 0; font-size: 12.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.f-badge {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.f-badge.f-hard { background: var(--down-bg); color: var(--down-text); }
.f-badge.f-soft { background: var(--warn-bg); color: var(--warn-text); }
.bk-findings { margin: 0 0 12px; padding-left: 16px; font-size: 12.5px; line-height: 1.45; }
.bk-findings .f-hard { color: var(--down-text); }
.bk-findings .f-soft { color: var(--warn-text); }
.bk-actions > summary { list-style: none; cursor: pointer; }
.bk-actions > summary::-webkit-details-marker { display: none; }
.bk-row-actions { display: flex; gap: 8px; margin-top: 12px; }

.status-requested { background: var(--unknown-bg); color: var(--unknown-text); }
.status-provisional { background: var(--warn-bg); color: var(--warn-text); }
.status-confirmed { background: var(--up-bg); color: var(--up-text); }
.status-completed { background: var(--bg-3); color: var(--text-dim); }
.status-cancelled, .status-rejected { background: var(--down-bg); color: var(--down-text); }

/* ---- Proposed week ------------------------------------------------------- */
.fees-table th.tick, .fees-table td.tick { width: 34px; text-align: center; }
.plan-day td {
  background: var(--bg-3); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
  padding: 7px 10px;
}
.plan-why { display: inline; margin-left: 6px; }

/* ---- Parent ↔ manager messages ------------------------------------------
   One thread is the parent's note with the manager's reply nested under it,
   so the indent carries the relationship without any extra chrome. */
.msg-thread {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.msg-thread:last-child { border-bottom: 0; padding-bottom: 0; }
.msg-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.msg-body { margin: 0; white-space: pre-wrap; }
.msg-reply {
  margin-top: 12px; padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg-3); border-radius: 0 8px 8px 0;
}
/* An unread message or a reply the parent hasn't opened yet. */
.msg-fresh { box-shadow: inset 3px 0 0 var(--up); }

/* ---- League table -------------------------------------------------------
   Our own row is the one the eye should land on first, so it gets the accent
   rail rather than a heavier weight — the table stays readable at a glance on
   a phone held one-handed at the side of a pitch. */
.row-us td { background: var(--bg-3); }
.row-us td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.league-table td, .league-table th { white-space: nowrap; }
.form-cell { display: flex; gap: 3px; }
.form-dot {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.form-w { background: var(--up-text, #1a7f37); }
.form-d { background: var(--text-faint); }
.form-l { background: var(--down-text, #b42318); }
/* Checkbox lists that need to wrap — linking fixtures to a competition. */
.check-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---- Drill card ---------------------------------------------------------
   A drill as a coaching sheet: the meta strip, the pitch played through, the
   coaching points, and the same sequence as numbered stills. Built to print —
   a coach at a wet training pitch has a bit of paper, not a phone. */
.dcard { background: var(--bg-2); border: 1px solid var(--border);
         border-radius: var(--radius); overflow: hidden; }

.dcard-meta {
  display: grid; gap: 1px; background: var(--border);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--border);
}
.dcard-tile {
  background: var(--bg-2); padding: 12px 14px;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
  align-content: start;
}
.dcard-tile-i { grid-row: span 2; font-size: 20px; align-self: center; }
.dcard-tile-l {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.dcard-tile strong { font-size: 14px; line-height: 1.3; }

.dcard-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}

.dcard-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; }
.dcard-stage { padding: 16px; border-right: 1px solid var(--border); }
.dcard-points { padding: 16px; }
@media (max-width: 860px) {
  .dcard-body { grid-template-columns: 1fr; }
  .dcard-stage { border-right: 0; border-bottom: 1px solid var(--border); }
}

.dcard-stage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.dcard-stage-head .dcard-eyebrow { margin-bottom: 0; }
.dcard-controls { display: flex; gap: 6px; align-items: center; }
/* Controls are useless without the script, so they only appear once it runs. */
.dcard-controls { visibility: hidden; }
.anim-ready .dcard-controls { visibility: visible; }

.dcard-caption {
  margin: 10px 0 0; min-height: 1.4em; font-weight: 600;
}
.dcard-setup { margin: 10px 0 0; color: var(--text-dim); }

/* Arrow states while the drill plays: what's happening now is bright, what
   has happened is faded, what's still to come is barely there. */
.dg-arrow { transition: opacity .18s linear; }
.dg-now { opacity: 1; }
.dg-past { opacity: .38; }
.dg-ahead { opacity: .16; }
.anim-ready .dg-actor, .anim-ready .dg-ball { transition: none; }

.dcard-checks { list-style: none; margin: 0; padding: 0; }
.dcard-checks li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.dcard-checks li:last-child { border-bottom: 0; }
.dcard-tick {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--up); color: #fff;
  font-size: 12px; font-weight: 800; margin-top: 1px;
}
.dcard-works { margin-top: 16px; }

/* ---- the numbered step strip ---- */
.dcard-strip { padding: 16px; border-top: 1px solid var(--border); }
.dcard-steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.dcard-step-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0; overflow: hidden;
  font: inherit; color: inherit; position: relative;
}
.dcard-step-btn:hover { border-color: var(--accent); }
.dcard-step-btn.active { border-color: var(--accent);
                         box-shadow: 0 0 0 2px var(--accent) inset; }
.dcard-step-n {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800;
}
.dcard-step-btn .drill-svg { border-radius: 0; }
.dcard-step-label { display: block; padding: 8px 10px; font-size: 13px; }

.dcard-footer {
  margin-top: 18px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--bg-3); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

@media print {
  /* On paper the animation is meaningless — the strip IS the animation. */
  .dcard-controls, .dcard-caption { display: none; }
  .dcard-steps { grid-template-columns: repeat(5, 1fr); }
  .dcard-step-btn { break-inside: avoid; }
  .dcard-body { grid-template-columns: 1.2fr 1fr; }
}

/* ---- Guide slides -------------------------------------------------------
   "How the app works" (onboard/guide.html). The page is readable with no
   JavaScript at all — every slide is in the DOM — so the controls that only
   JS can honour stay hidden until the script adds .is-interactive. */
.guide-head { text-align: center; margin-bottom: 18px; }
.guide-head h1 { margin: 0 0 6px; }
.guide-count { display: none; margin: 10px 0 0; font-size: .85rem;
               color: var(--muted); letter-spacing: .04em; }
.guide.is-interactive .guide-count { display: block; }

.guide-rail { display: none; gap: 8px; justify-content: center;
              list-style: none; margin: 0 0 18px; padding: 0; }
.guide.is-interactive .guide-rail { display: flex; flex-wrap: wrap; }
.guide-pip-btn { width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
                 border: 1px solid var(--border); background: var(--bg-2);
                 display: grid; place-items: center; padding: 0;
                 color: var(--text-dim);
                 opacity: .5; transition: opacity .15s, transform .15s; }
.guide-pip-btn .gicon { width: 18px; height: 18px; }
.guide-pip.is-active .guide-pip-btn { color: var(--accent); }
.guide-pip-btn:hover { opacity: .8; }
.guide-pip.is-active .guide-pip-btn { opacity: 1; transform: scale(1.12);
                                      border-color: var(--accent);
                                      box-shadow: 0 0 0 3px var(--accent-soft); }

.guide-slide { max-width: 840px; margin: 0 auto 16px; }
.guide-slide-head { display: flex; gap: 14px; align-items: flex-start;
                    margin-bottom: 18px; }
.guide-slide h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.guide-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
             display: grid; place-items: center; color: var(--accent);
             background: var(--accent-soft); }
.guide-ico .gicon { width: 24px; height: 24px; }
.guide-lead { margin: 0; color: var(--text-dim); max-width: 56ch; }

/* ---- The numbered step cards --------------------------------------------
   Two up, because a slide is three or four ideas and a single column of them
   scrolls past the fold. A `is-wide` step, or the pull quote, takes the row. */
.guide-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
               margin: 0 0 18px; padding: 0; list-style: none; }
.guide-step { position: relative; padding: 16px 16px 14px;
              border: 1px solid var(--border); border-radius: 14px;
              background: var(--bg-3); display: flex; flex-direction: column; }
.guide-step.is-wide { grid-column: 1 / -1; }
.guide-step-n { display: inline-grid; place-items: center; width: 26px;
                height: 26px; border-radius: 50%; background: var(--accent);
                color: #fff; font-size: .74rem; font-weight: 700;
                letter-spacing: .01em; margin-bottom: 10px; }
.guide-step h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.3; }
.guide-step p { margin: 0; font-size: .9rem; color: var(--text-dim);
                line-height: 1.5; }

/* The one line worth remembering, set apart from the instructions. */
.guide-pull { display: grid; place-items: center;
              padding: 18px; border-radius: 14px; color: #fff;
              background: linear-gradient(135deg, var(--accent), #4a2fd0); }
.guide-pull p { margin: 0; font-size: 1.12rem; font-weight: 600;
                line-height: 1.35; text-align: center; text-wrap: balance; }
.guide-pull.is-wide { grid-column: 1 / -1; }

/* ---- The small pictures inside a step ----------------------------------- */
.gart { margin-top: 12px; }
.gart > :first-child { margin-top: 0; }
.gcap { margin: 8px 0 0 !important; font-size: .78rem !important;
        color: var(--text-faint) !important; }
.gsvg { display: block; width: 100%; max-width: 220px; margin: 0 auto; }
.gshirt { width: 26px; height: 26px; }

.gfield { display: flex; align-items: center; justify-content: space-between;
          gap: 10px; padding: 7px 11px; margin-top: 6px; border-radius: 9px;
          background: var(--bg-2); border: 1px solid var(--border-2);
          font-size: .84rem; }
.gfield span { color: var(--text-faint); }
.gfield b { font-weight: 600; }
.gfield-dim b { color: var(--text-faint); font-weight: 400; font-style: italic; }

.gtoggle { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
           border-radius: 9px; background: var(--bg-2);
           border: 1px solid var(--border-2); font-size: .84rem; }
.gtoggle em { margin-left: auto; font-style: normal; color: var(--text-faint); }
.gtog { width: 30px; height: 17px; border-radius: 999px; flex: 0 0 auto;
        background: var(--border-2); position: relative; }
.gtog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px;
               height: 13px; border-radius: 50%; background: #fff; }
.gtog.is-on { background: var(--accent); }
.gtog.is-on::after { left: 15px; }

.gticks { list-style: none; margin: 8px 0 0; padding: 0; font-size: .84rem; }
.gticks li { padding-left: 20px; position: relative; margin-bottom: 4px; }
.gticks li::before { content: "✓"; position: absolute; left: 2px;
                     color: var(--up); font-weight: 700; }

.gbars { display: flex; flex-direction: column; gap: 6px; }
.gbar { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.gbar span { flex: 0 0 52px; color: var(--text-dim); }
.gbar i { height: 9px; border-radius: 999px; background: var(--accent);
          min-width: 4px; }
.gbars-sm .gbar i { background: linear-gradient(90deg, var(--accent), #8f74ff); }
.gbar b { font-weight: 600; color: var(--text-faint); font-size: .74rem; }

.gfloor { position: relative; padding: 16px 0 6px; }
.gfloor-bar { display: flex; align-items: flex-end; gap: 8px; height: 78px; }
.gfloor-bar i { flex: 1; border-radius: 5px 5px 0 0;
                background: linear-gradient(180deg, #8f74ff, var(--accent)); }
.gfloor-line { position: absolute; left: 0; right: 0; bottom: 44px;
               border-top: 2px dashed var(--down); }
.gfloor-line span { position: absolute; right: 0; top: -15px; font-size: .68rem;
                    font-weight: 700; color: var(--down-text);
                    background: var(--bg-3); padding: 0 4px; }

.gchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { padding: 4px 10px; border-radius: 999px; font-size: .78rem;
         background: var(--bg-2); border: 1px solid var(--border-2); }
.gchip.is-yes { background: var(--up-bg); border-color: transparent;
                color: var(--up-text); font-weight: 600; }
.gchip.is-no { background: var(--down-bg); border-color: transparent;
               color: var(--down-text); font-weight: 600; }

.gsheet { border: 1px solid var(--border-2); border-radius: 10px;
          overflow: hidden; background: var(--bg-2); }
.grow { display: flex; gap: 10px; padding: 6px 11px; font-size: .8rem;
        border-bottom: 1px solid var(--border); }
.grow:last-child { border-bottom: 0; }
.grow span { flex: 0 0 34px; color: var(--text-faint); font-weight: 600; }
.grow b { font-weight: 500; }

.gcost { display: flex; flex-direction: column; gap: 5px; }
.gcost-row { padding: 6px 11px; border-radius: 8px; font-size: .8rem;
             background: var(--bg-2); border: 1px solid var(--border-2); }
.gcost-row.is-warn { background: var(--warn-bg); border-color: transparent;
                     color: var(--warn-text); }
.gcost-row.is-ok { background: var(--up-bg); border-color: transparent;
                   color: var(--up-text); }

.gtimeline { display: flex; gap: 3px; border-radius: 8px; overflow: hidden; }
.gtimeline span { padding: 9px 4px; text-align: center; font-size: .7rem;
                  font-weight: 700; color: #fff; white-space: nowrap; }

.gintervals { display: flex; gap: 6px; }
.gintervals span { flex: 1; display: grid; place-items: center; height: 34px;
                   border-radius: 8px; font-size: .82rem; font-weight: 700;
                   background: var(--bg-2); border: 1px solid var(--border-2);
                   color: var(--text-faint); }
.gintervals .is-done { background: var(--accent-soft); color: var(--accent);
                       border-color: transparent; }
.gintervals .is-now { background: var(--accent); color: #fff;
                      border-color: transparent; }

.gphone { border: 1px solid var(--border-2); border-radius: 12px;
          overflow: hidden; background: var(--bg-2); }
.gphone-top { display: flex; align-items: baseline; gap: 8px; padding: 8px 11px;
              background: #12182b; color: #fff; }
.gphone-top b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.gphone-top span { font-size: .72rem; opacity: .7; }
.gphone-call { padding: 10px 11px; }
.gphone-call > b { font-size: .78rem; color: var(--warn-text); }
.gswap { display: flex; gap: 6px; margin-top: 7px; }
.gswap span { flex: 1; padding: 5px 8px; border-radius: 7px; font-size: .78rem;
              font-weight: 600; text-align: center; }
.gswap .is-off { background: var(--down-bg); color: var(--down-text); }
.gswap .is-on { background: var(--up-bg); color: var(--up-text); }

@media (max-width: 720px) {
  .guide-steps { grid-template-columns: 1fr; }
  .guide-step, .guide-pull { grid-column: 1 / -1 !important; }
  .guide-slide-head { gap: 10px; }
  /* Stacked, the solid pull quote lands right on top of the solid CTA and the
     two fight. Tint it instead, so the button is the only filled purple. */
  .guide-pull { background: var(--accent-soft); color: var(--accent);
                padding: 14px; }
}

.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guide-actions .btn-primary { flex: 1 1 260px; justify-content: center;
                              padding: 13px 22px; font-size: 1rem;
                              border-radius: 12px; }

/* Next/Back are pure navigation, so they go with the rail. */
.guide-nav { display: none; gap: 8px; justify-content: space-between;
             margin-top: 18px; padding-top: 14px;
             border-top: 1px solid var(--border); }
.guide.is-interactive .guide-nav { display: flex; }

.guide-skip { text-align: center; margin-top: 6px; }

@media (max-width: 640px) {
  .guide-pip-btn { width: 32px; height: 32px; }
  .guide-pip-btn .gicon { width: 15px; height: 15px; }
  .guide-actions .btn { width: 100%; }
}

/* ---- Avatar picker: the character grid ----------------------------------
   The cast is drawn inline by services/avatar_faces.py. The selected radio is
   hidden and the ring is drawn on the tile, so picking works with no JS — and
   so does the kit, because every tile paints its shirt with --avm-kit and the
   rules below set that from the checked kit radio. Tick "Red" and a hundred
   and thirty-six shirts turn red without a line of JavaScript. */
.avm-chars { display: grid; gap: 8px; margin-top: 4px;
             grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.avm-char { position: relative; cursor: pointer; }
.avm-char input { position: absolute; opacity: 0; width: 0; height: 0; }
.avm-char-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
                border: 2px solid transparent; transition: transform .12s; }
/* The kit each tile wears. One pair per colour in avatars.SHIRT_COLORS: the
   shirt and the shaded tone the sleeve seams use. */
.avm-chars { --avm-kit: #1f5fbf; --avm-kit-dark: #18498f; }
.avm:has([data-kit="1"]:checked) .avm-chars { --avm-kit: #d7263d; --avm-kit-dark: #a71e30; }
.avm:has([data-kit="2"]:checked) .avm-chars { --avm-kit: #1f5fbf; --avm-kit-dark: #18498f; }
.avm:has([data-kit="3"]:checked) .avm-chars { --avm-kit: #3aa6dd; --avm-kit-dark: #2d81ac; }
.avm:has([data-kit="4"]:checked) .avm-chars { --avm-kit: #1e9e58; --avm-kit-dark: #177b44; }
.avm:has([data-kit="5"]:checked) .avm-chars { --avm-kit: #e8b527; --avm-kit-dark: #b58d1e; }
.avm:has([data-kit="6"]:checked) .avm-chars { --avm-kit: #e87724; --avm-kit-dark: #b55d1c; }
.avm:has([data-kit="7"]:checked) .avm-chars { --avm-kit: #7a4bbd; --avm-kit-dark: #5f3a93; }
.avm:has([data-kit="8"]:checked) .avm-chars { --avm-kit: #7d1f35; --avm-kit-dark: #611829; }
.avm:has([data-kit="9"]:checked) .avm-chars { --avm-kit: #25282d; --avm-kit-dark: #1c1f23; }
.avm:has([data-kit="10"]:checked) .avm-chars { --avm-kit: #f2f4f8; --avm-kit-dark: #bcbec1; }
.avm-char:hover .avm-char-img { transform: scale(1.06); }
.avm-char input:checked + .avm-char-img { border-color: var(--accent);
                box-shadow: 0 0 0 3px var(--accent-soft); }
.avm-char input:focus-visible + .avm-char-img { outline: 2px solid var(--accent);
                outline-offset: 2px; }

/* The filter bar above the grid. Ships hidden (app.js reveals it) so a coach
   with JS off never meets a control that does nothing. */
.avm-filters { margin: 8px 0 12px; padding: 10px 12px 4px;
               border: 1px solid var(--border); border-radius: 10px;
               background: var(--bg-3); }
.avm-filters-head { display: flex; align-items: center; gap: 10px;
                    flex-wrap: wrap; margin-bottom: 8px; }
.avm-filters-lbl { font-weight: 600; font-size: .82rem;
                   letter-spacing: .02em; text-transform: uppercase;
                   color: var(--text-dim); }
.avm-count { font-size: .82rem; color: var(--text-dim);
             font-variant-numeric: tabular-nums; }
.avm-filters-head .btn { margin-left: auto; }
.avm-facet { display: flex; gap: 10px; align-items: baseline;
             flex-wrap: wrap; margin-bottom: 8px; }
.avm-facet-lbl { flex: 0 0 92px; font-size: .82rem;
                 color: var(--text-dim); }
.avm-facet-opts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 200px; }
.avm-chip { cursor: pointer; }
.avm-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.avm-chip span { display: inline-block; padding: 3px 10px; font-size: .84rem;
                 border: 1px solid var(--border); border-radius: 999px;
                 background: var(--bg-2); transition: background .12s; }
.avm-chip:hover span { background: var(--bg); }
.avm-chip input:checked + span { border-color: var(--accent);
                 background: var(--accent-soft); color: var(--accent);
                 font-weight: 600; }
.avm-chip input:focus-visible + span { outline: 2px solid var(--accent);
                 outline-offset: 2px; }
.avm-filters-note { margin: 2px 0 6px; }
.avm-empty { margin: 10px 2px; font-size: .88rem;
             color: var(--text-dim); }

/* The face already chosen, when the current filters would have hidden it. It
   stays on screen — dimmed, so it reads as "your pick", not "a match". */
.avm-char.is-offlist { opacity: .55; }
.avm-char[hidden] { display: none; }

/* The player's existing face when it came from the retired builder. */
.avm-legacy { display: flex; gap: 12px; align-items: center; margin: 12px 0;
              padding: 10px; border: 1px solid var(--border);
              border-radius: 10px; background: var(--surface-2, #f6f8fa); }

@media (max-width: 640px) {
  .avm-chars { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  /* The facet label goes above its chips rather than stealing 92px of a
     phone's width. */
  .avm-facet-lbl { flex: 0 0 100%; }
  .avm-facet { gap: 4px; }
}

/* ---- Drill: the 3D view -------------------------------------------------
   Hidden until the coach asks for it, and never printed — the printed page
   gets the flat diagram and the step-by-step strip, which is the whole drill.
   The canvas is sized by drillanim3d.js to keep a 16:9 box. */
.dcard-3d { margin-top: 4px; }
.dcard-3d-canvas { width: 100%; display: block; border-radius: 10px;
                   background: #1e2a24; touch-action: none; cursor: grab; }
.dcard-3d-canvas:active { cursor: grabbing; }
.dcard-3d .dcard-caption { margin: 8px 0; }

@media print { .dcard-3d { display: none !important; } }