@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #10151c;
  --muted: #5b6472;
  --line: #e3e7ee;
  --accent: #2158c4;
  --accent-ink: #123a8a;
  --good: #178a53;
  --bad: #c62f22;
  --bg-card: #f4f6fa;

  /* Supplementary tokens - additive only, nothing above this line changed
     its name, so every var(--x) already used inline across the HTML pages
     keeps working unchanged. */
  --bg: #eef1f6;
  --surface: #ffffff;
  --accent-soft: #e8f0ff;
  --good-soft: #e5f6ec;
  --bad-soft: #fbeae8;
  --accent-glow: rgba(33, 88, 196, 0.22);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 21, 28, 0.06), 0 1px 1px rgba(16, 21, 28, 0.04);
  --shadow-md: 0 6px 20px rgba(16, 21, 28, 0.08), 0 2px 6px rgba(16, 21, 28, 0.04);
  --shadow-lg: 0 16px 40px rgba(16, 21, 28, 0.14), 0 4px 12px rgba(16, 21, 28, 0.06);
}

* { box-sizing: border-box; }

::selection { background: var(--accent-glow); color: var(--ink); }

body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  padding: 0 20px 40px;
  max-width: 1000px;
  margin-inline: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 4px; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 24px 0 10px; }
h3 { font-weight: 700; }
p.sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

/* ---- Top bar: brand mark + nav + logout, all rendered by app.js's nav()
   into #nav-slot on every page, so this styles the whole app from one file. ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  margin: 0 -20px 28px; padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em; flex-shrink: 0;
}
.brand svg { flex-shrink: 0; }
.navlinks { display: flex; gap: 2px; flex-wrap: wrap; font-size: 13px; flex: 1; }
/* These links had no rule of their own at all - they rendered as default
   browser blue with zero padding, 2px apart, and `.active` was styled only
   under .m-scope so the signed-in bar had no current-page indicator. */
.navlinks a {
  color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap;
  padding: 7px 11px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.navlinks a:hover { background: var(--bg-card); color: var(--ink); }
.navlinks a.active { background: var(--accent-soft); color: var(--accent-ink); }

/* App-header spacing, scoped so the marketing header keeps its own layout
   (there .navlinks must stay flex:1 to push Log in / Start free right).
   The link row was flex:1 here too, stretching to 522px around 254px of
   content - a 268px hole between the links and the actions, with the links
   bunched against the brand. Sizing the row to its content and letting
   .nav-new's margin-left:auto do the pushing collects that space in one
   place. The remaining margins group the bar: brand | places ... action |
   help + account. */
.topbar-app { gap: 6px; }
.topbar-app .brand { margin-right: 10px; }
.topbar-app .navlinks { flex: 0 1 auto; }
.topbar-app .nav-help { margin-left: 10px; }
.logout-link {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600;
  flex-shrink: 0; padding: 7px 10px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.logout-link:hover { background: var(--bad-soft); color: var(--bad); }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--ink); }
input, select, textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
input[type="checkbox"] { width: auto; accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg-card); color: var(--muted); cursor: not-allowed; }
textarea { resize: vertical; min-height: 80px; }

button {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 12px;
  box-shadow: var(--shadow-sm); transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
button:hover { background: var(--accent-ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
button:disabled { background: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; opacity: 0.7; }
button.secondary {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none;
}
button.secondary:hover { background: var(--bg-card); border-color: var(--muted); box-shadow: none; transform: none; }
button.small { padding: 6px 12px; font-size: 12px; margin: 2px; border-radius: 999px; }

.card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
  background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s;
}

.highlight-box {
  border: 1px solid #c9e9d6; border-radius: var(--radius-md); padding: 14px; margin-top: 16px;
  background: linear-gradient(180deg, var(--good-soft), var(--surface));
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat {
  background: var(--bg-card); border-radius: var(--radius-md); padding: 16px 12px; text-align: center;
  border: 1px solid var(--line);
}
.stat .num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.stat .label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 500; }

.bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; }
.bar-row .name { width: 130px; flex-shrink: 0; color: var(--ink); }
.bar-track { flex: 1; background: var(--bg-card); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-ink)); height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.bar-row .val { width: 50px; text-align: right; color: var(--muted); font-weight: 600; }

/* "Save % by game/practice" labels now carry an opponent/focus name
   alongside the date (so two same-day games aren't indistinguishable),
   which runs longer than every other bar chart's short labels - widened
   just within #trend rather than on .bar-row .name generally. */
#trend .bar-row .name { width: 210px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--line); }
td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: var(--bg-card); }

.tag-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.tag-save { background: var(--good-soft); color: var(--good); }
.tag-goal { background: var(--bad-soft); color: var(--bad); }
.tag-miss, .tag-whistle, .tag-post { background: var(--bg-card); color: var(--muted); }

.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.clip-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s;
}
.clip-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.clip-card video { width: 100%; border-radius: var(--radius-sm); background: #000; display: block; }
.clip-card .meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.clip-number {
  position: absolute; top: 16px; left: 16px; z-index: 2; pointer-events: none;
  background: rgba(12, 44, 83, 0.75); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}

.rink-wrap { max-width: 440px; }
.rink-wrap svg { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: crosshair; background: #eef4fb; box-shadow: var(--shadow-sm); }

.advice-list { padding-left: 18px; }
.advice-list li { margin-bottom: 8px; }

/* ---- Recurring patterns callout (season.html, practices.html) - this is
   genuinely one of the most actionable sections (a specific, repeated
   weakness across several recent games/practices, not a one-off), so it
   gets a distinct treatment instead of blending in as a plain bullet list
   identical to every other card. ---- */
.pattern-card { border-left: 4px solid var(--accent); background: var(--accent-soft); }
.pattern-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-ink); margin: 0 0 8px;
}
.pattern-list { list-style: none; padding-left: 0; margin: 0; }
.pattern-list li {
  position: relative; padding: 10px 14px 10px 38px; margin-bottom: 8px;
  background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5;
}
.pattern-list li:last-child { margin-bottom: 0; }
.pattern-list li::before {
  content: "!"; position: absolute; left: 12px; top: 10px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
}
.pattern-list li.muted { padding-left: 14px; background: transparent; border: none; }
.pattern-list li.muted::before { content: none; }

/* Labels the auto-generated tips as coming from the app itself - once real
   feedback (attributed to a real email) sits right next to these, an
   unlabeled bullet list reads as an anonymous, unsourced opinion. */
.advice-source { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }

/* Feedback left by whoever a view-only report link was shared with - kept
   visually distinct from the auto-generated advice above/below it (a quoted
   note from a person, not a computed tip), and always shown first since a
   coach/parent's read on a play is the point of asking for it. */
.feedback-list { margin-bottom: 10px; }
.feedback-item {
  background: var(--accent-soft); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 6px;
  border-left: 3px solid var(--accent);
}
.feedback-name { font-size: 11px; font-weight: 700; color: var(--accent-ink); }
.feedback-comment { font-size: 13px; color: var(--ink); margin-top: 2px; white-space: pre-wrap; }

.feedback-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.feedback-form input, .feedback-form textarea {
  margin-top: 4px; margin-bottom: 6px; font-size: 13px;
}
.feedback-form textarea { resize: vertical; min-height: 50px; font-family: inherit; }
.feedback-sent { font-size: 13px; color: var(--good); font-weight: 600; margin-top: 10px; }

.muted { color: var(--muted); }
.error { color: var(--bad); font-size: 13px; margin-top: 8px; font-weight: 600; }
.flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.checklist-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.checklist-item .title { font-weight: 600; font-size: 14px; }
.checklist-item .why { font-size: 13px; color: var(--muted); margin-top: 2px; }
.checklist-item.done .title { text-decoration: line-through; color: var(--muted); }

.progress-track { background: var(--bg-card); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, var(--good), #22b06b); height: 100%; transition: width 0.2s; }

.toast {
  position: fixed; top: 16px; left: 50%; z-index: 100;
  transform: translate(-50%, -140%); opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  padding: 12px 20px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); text-align: center;
}
.toast-in { transform: translate(-50%, 0); opacity: 1; }
.toast-error { background: var(--bad); color: #fff; }
.toast-good { background: var(--good); color: #fff; }

/* A slim edge tab rather than a big pill - the original FAB sat squarely
   over form controls on small screens and competed with the workflow for
   attention on every single page. */
.feedback-fab {
  position: fixed; bottom: 90px; right: 0; z-index: 50;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 9px 10px; border-radius: 10px 0 0 10px; font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow-md); transition: background 0.15s, padding 0.15s;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.feedback-fab:hover { background: var(--accent-ink); padding-right: 14px; }

/* =====================================================================
   Guided tagging flow (new-game.html / new-practice.html)
   ===================================================================== */

.step-tracker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.step-pill {
  font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--bg-card);
  padding: 6px 14px; border-radius: 999px;
}
.step-pill.step-current { background: var(--accent); color: #fff; }
.step-pill.step-done { background: var(--good-soft); color: var(--good); }
.step-arrow { color: var(--muted); font-size: 13px; }

/* ---- Segmented source control + dropzone (Page 1) ---- */
.segmented { display: inline-flex; background: var(--bg-card); border-radius: 999px; padding: 3px; gap: 2px; }
.segmented button {
  margin: 0; padding: 8px 16px; font-size: 13px; border-radius: 999px; box-shadow: none;
  background: transparent; color: var(--muted); font-weight: 600;
}
.segmented button:hover { transform: none; box-shadow: none; background: rgba(0,0,0,0.04); }
.segmented button.segmented-active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-sm); }

.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius-md); padding: 28px 16px;
  text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px;
}
.dropzone:hover, .dropzone.dropzone-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-prompt { color: var(--muted); font-size: 14px; }
.dropzone-prompt strong { color: var(--accent-ink); }
/* .has-file switches the dropzone from centered/row (empty state) to a
   column stack of one .file-summary-row per chosen file - one file renders
   as a column of one, so this covers both the single- and multi-file case
   with the same markup. */
.dropzone.has-file { border-style: solid; cursor: default; text-align: left; flex-direction: column; align-items: stretch; }
.file-summary-row { display: flex; align-items: center; gap: 14px; width: 100%; }
.file-summary-row + .file-summary-row { margin-top: 10px; }
.file-summary-icon { font-size: 28px; flex-shrink: 0; }
.file-summary-info { flex: 1; min-width: 0; }
.file-summary-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-summary-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.file-summary-actions { display: flex; gap: 6px; flex-shrink: 0; }
.file-summary-actions button { margin-top: 0; }

/* ---- Slim header shown only during active tagging (step 2) ---- */
.tagging-topbar { justify-content: space-between; }
.tagging-goalie-label { font-weight: 600; font-size: 13.5px; color: var(--muted); flex: 1; }
.tagging-topbar-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tagging-exit-btn { text-decoration: none; margin: 0; }
.tagging-help-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.tagging-help-link:hover { color: var(--accent-ink); }

/* ---- Split-screen layout ---- */
.tag-layout { display: grid; grid-template-columns: 62% 1fr; gap: 20px; align-items: flex-start; }
.tag-video-col { position: sticky; top: 78px; }
.tag-panel-col { min-width: 0; }

.tag-step {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px;
  background: var(--surface);
}
.tag-step[hidden] { display: none; }
.tag-step-title { font-size: 14.5px; font-weight: 700; margin: 0 0 10px; }
.tag-step-hint { font-size: 12.5px; color: var(--muted); margin: -6px 0 10px; }

.outcome-btn {
  flex: 1; min-width: 90px; padding: 16px 10px; font-size: 16px; font-weight: 800; border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: none;
}
.outcome-btn:hover { transform: none; box-shadow: none; }
.outcome-btn.outcome-save.selected { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.outcome-btn.outcome-goal.selected { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.outcome-btn.outcome-miss.selected { background: var(--bg-card); border-color: var(--muted); color: var(--ink); }

.secondary-outcome-toggle { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; text-decoration: underline; }
.secondary-outcome-row { gap: 8px; margin-top: 8px; }
.secondary-outcome-row button.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.outcome-toggle {
  padding: 10px 16px; font-size: 13.5px; font-weight: 700; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: none; margin: 4px 8px 4px 0;
}
.outcome-toggle:hover { transform: none; box-shadow: none; }
.outcome-toggle.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.chip {
  padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 999px;
  background: var(--bg-card); color: var(--muted); border: 1px solid var(--line); box-shadow: none; margin: 3px;
}
.chip:hover { transform: none; box-shadow: none; background: var(--accent-soft); }
.chip.chip-on { background: var(--accent); color: #fff; border-color: var(--accent); }

.net-diagram { width: 100%; max-width: 320px; cursor: pointer; }
.net-diagram-frame { fill: #0c2c53; opacity: 0.04; }
.net-zone rect { fill: var(--bg-card); stroke: var(--line); stroke-width: 1.5; transition: fill 0.15s, stroke 0.15s; }
.net-zone text { font-size: 11px; font-weight: 700; fill: var(--muted); pointer-events: none; }
.net-zone:hover rect { fill: var(--accent-soft); stroke: var(--accent); }
.net-zone.net-zone-selected rect { fill: var(--accent); stroke: var(--accent-ink); }
.net-zone.net-zone-selected text { fill: #fff; }

.period-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0;
  padding: 10px 12px; background: var(--bg-card); border-radius: var(--radius-md);
}
.period-bar-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.period-btn { margin: 0; padding: 7px 14px; font-size: 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.period-btn:hover { transform: none; box-shadow: none; }
.period-btn.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Timeline candidate markers, under the video controls ---- */
.timeline-track { position: relative; height: 18px; background: var(--bg-card); border-radius: 999px; margin: 10px 0 4px; }
.timeline-marker {
  position: absolute; top: 2px; width: 4px; height: 14px; border-radius: 2px;
  background: var(--accent); cursor: pointer; transform: translateX(-2px);
}
.timeline-marker:hover { background: var(--accent-ink); }
.timeline-marker.timeline-marker-dismissed { background: var(--line); }
.timeline-marker.timeline-marker-active { background: var(--bad); width: 5px; top: 0; height: 18px; }
.candidate-nav { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.candidate-nav-status { font-size: 12.5px; }
.candidate-mark-row { display: flex; gap: 8px; margin-top: 6px; }

/* ---- Sticky "Save and continue" action bar at the bottom of the panel column ---- */
.tag-sticky-bar {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px 4px 4px; margin-top: 4px; box-shadow: 0 -6px 16px rgba(16,21,28,0.06);
}
.tag-sticky-bar button { width: 100%; margin-top: 0; padding: 14px; font-size: 15px; }
.tag-sticky-bar .flex { margin-top: 8px; }

/* ---- Resume playback button, floats over the paused video ---- */
.resume-overlay-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: 14px 28px; font-size: 15px; z-index: 5;
}

/* ---- Shots/reps-logged drawer ---- */
.drawer { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.drawer-empty { padding: 16px; margin: 0; text-align: center; }
.drawer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.drawer-row:last-child { border-bottom: none; }
.drawer-row-main { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.drawer-row-time { font-weight: 700; font-size: 13px; }
.drawer-row-period { font-size: 12px; }
.drawer-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.drawer-row-actions button { margin: 0; }

.highlights-toggle { font-size: 13px; color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; display: inline-block; margin-top: 14px; }

/* ---- Core-only section gate (season.html, free tier) ----
   The blurred layer underneath is a generic skeleton, not the real numbers -
   the server withholds those entirely for a free account, so peeling the blur
   off in devtools reveals placeholder shapes rather than the actual season
   report. The blur is the visual treatment; it isn't the access control. ---- */
.gated { position: relative; }
.gated-content {
  filter: blur(6px); opacity: 0.55; pointer-events: none; user-select: none;
}
.gated-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px; gap: 10px;
}
.gated-overlay button {
  margin: 0; max-width: 420px; padding: 12px 20px; font-size: 14px; line-height: 1.4;
  white-space: normal;
}
.gated-lock {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft); padding: 4px 12px; border-radius: 999px;
}

/* Skeleton shapes shown (blurred) behind the gate - deliberately generic so
   nothing here can be mistaken for the goalie's real numbers. */
.skeleton-bar { height: 12px; border-radius: 999px; background: var(--bg-card); margin: 14px 0; }
.skeleton-stat { background: var(--bg-card); border-radius: var(--radius-md); height: 76px; border: 1px solid var(--line); }

/* =====================================================================
   Coach marketplace (hidden until launch)
   ===================================================================== */

.mk-hero {
  background: linear-gradient(135deg, var(--accent-ink), var(--accent));
  color: #fff; border-radius: var(--radius-lg); padding: 28px; margin-bottom: 18px;
}
.mk-hero h1 { margin: 0 0 8px; font-size: 24px; color: #fff; }
.mk-hero p { margin: 0; opacity: 0.92; font-size: 15px; max-width: 640px; }
.mk-pledge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: rgba(255, 255, 255, 0.16); padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
}

.mk-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.mk-option {
  border: 2px solid var(--line); border-radius: var(--radius-md); padding: 20px;
  background: var(--surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.mk-option:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.mk-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.mk-option h3 { margin: 0 0 4px; font-size: 16px; }
.mk-option .mk-price { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0; }
.mk-option .mk-why { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mk-option-unavailable { opacity: 0.55; cursor: not-allowed; }

.coach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.coach-card {
  border: 2px solid var(--line); border-radius: var(--radius-md); padding: 16px;
  background: var(--surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.coach-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.coach-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.coach-name { font-weight: 800; font-size: 15.5px; }
.coach-headline { font-size: 13px; color: var(--muted); margin-top: 2px; }
.coach-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.coach-chip {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-card); color: var(--muted);
}
.coach-chip.good { background: var(--good-soft); color: var(--good); }
.coach-chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.coach-rate { font-size: 20px; font-weight: 800; margin-top: 12px; }

/* Countdown against the 24h pledge - the single most important thing on
   both the parent's and the coach's screen. */
.mk-countdown { font-variant-numeric: tabular-nums; font-weight: 800; }
.mk-countdown.ok { color: var(--good); }
.mk-countdown.soon { color: #8a5a00; }
.mk-countdown.late { color: var(--bad); }

.mk-request {
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 10px; background: var(--surface);
}
.mk-request.delivered { border-left-color: var(--good); }
.mk-request.late { border-left-color: var(--bad); }
.mk-request-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.review-block { margin-bottom: 18px; }
.review-block h3 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.review-list { padding-left: 20px; margin: 0; }
.review-list li { margin-bottom: 6px; line-height: 1.5; }
.rating-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13.5px; }
.rating-row .rating-name { width: 160px; flex-shrink: 0; }
.rating-dots { display: flex; gap: 4px; }
.rating-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--line); }
.rating-dot.on { background: var(--accent); border-color: var(--accent); }

.mk-hidden-banner {
  background: #2b2118; color: #ffd9a0; border-radius: var(--radius-md);
  padding: 10px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}

@media (max-width: 720px) {
  .mk-options { grid-template-columns: 1fr; }
  .rating-row .rating-name { width: 120px; }
}

/* ---- Optional final-score entry (game submission + report) ---- */
.score-entry {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px; margin: 12px 0;
}
.score-entry-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.score-inputs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score-inputs label { margin: 0; font-size: 13px; font-weight: 600; }
/* Wide enough for two digits, narrow enough that it reads as a scoreboard
   rather than a form field. */
.score-inputs input { width: 68px; text-align: center; font-size: 20px; font-weight: 800; padding: 8px; }
.score-dash { font-size: 20px; font-weight: 800; color: var(--muted); }
.score-result { margin-top: 8px; font-weight: 800; font-size: 15px; min-height: 20px; }
.score-result-win { color: var(--good); }
.score-result-loss { color: var(--bad); }
.score-result-tie { color: var(--muted); }

/* W/L/T badge, used in the games table and on the report header. */
.result-badge {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.result-win { background: var(--good-soft); color: var(--good); }
.result-loss { background: var(--bad-soft); color: var(--bad); }
.result-tie { background: var(--bg-card); color: var(--muted); }
.score-line { font-size: 15px; font-weight: 700; }

/* ---- Finish confirmation ---- */
.finish-confirm {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-top: 14px;
  background: var(--accent-soft);
}
.finish-confirm p { margin: 0 0 12px; font-size: 14px; font-weight: 600; }

@media (max-width: 900px) {
  .tag-layout { grid-template-columns: 1fr; }
  .tag-video-col { position: sticky; top: 0; z-index: 15; background: var(--bg); padding-bottom: 8px; margin: 0 -20px; padding-inline: 20px; }
}
@media (max-width: 640px) {
  .tag-video-col { margin-inline: -14px; padding-inline: 14px; }
  .outcome-btn { min-width: 76px; font-size: 14px; padding: 14px 6px; }
  .tag-step-hint, .file-summary-meta, .candidate-nav-status { font-size: 13px; }
}

@keyframes field-flash {
  0%, 100% { box-shadow: 0 0 0 3px var(--bad-soft); border-color: var(--bad); }
  50% { box-shadow: 0 0 0 5px var(--bad-soft); border-color: var(--bad); }
}
.field-flagged { animation: field-flash 0.4s ease 2; }

/* ---- Marketing landing page (signed-out home) - its own palette/type
   scoped under #marketing, so the shared design tokens/fonts used by the
   rest of the signed-in app (--ink, --accent, Inter, .topbar, etc.) are
   completely unaffected by this page's distinct visual identity. ---- */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap");

.m-scope {
  --m-ink: #12181f;
  --m-muted: #5b6b7a;
  --m-accent: #2f6fed;
  --m-accent-soft: rgba(47, 111, 237, 0.1);
  --m-teal: #0ea5a0;
  --m-red: #e0574a;
  --m-line: rgba(0, 0, 0, 0.08);
}
#marketing { color: var(--m-ink); }
#marketing h1, #marketing h2, #marketing .m-num, #marketing .m-step-badge {
  font-family: "Sora", sans-serif; font-weight: 800; letter-spacing: -0.02em;
}

/* The shared marketing header/footer (app.js's marketingHeader/
   marketingFooter) render into #nav-slot, a sibling of #marketing rather
   than a child - so the --m-* tokens live on .m-scope, a wrapper both
   index.html and login.html put around nav-slot + page content + footer,
   instead of on #marketing alone. Keeps the header's nav links and "Start
   free" button the same blue as the hero/feature cards below them. */
.m-scope .navlinks a:hover { background: var(--m-accent-soft); color: var(--m-ink); }
.m-scope .navlinks a.active { background: var(--m-accent-soft); color: var(--m-accent); }
.m-scope .brand { color: var(--m-ink); }
.m-btn-primary.m-btn-nav { padding: 9px 18px; font-size: 14px; border-radius: 999px; margin-left: 4px; }

.m-pill {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--m-accent); background: var(--m-accent-soft); padding: 6px 14px; border-radius: 20px; margin-bottom: 18px;
}

.m-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding: 24px 0 48px; text-align: left; }
.m-hero h1 { font-size: 38px; line-height: 1.12; margin: 0 0 18px; }
.m-hero-sub { font-size: 17px; line-height: 1.6; color: var(--m-muted); margin: 0 0 28px; max-width: 460px; }
.m-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.m-btn-primary {
  display: inline-block; padding: 15px 26px; background: var(--m-accent); color: #fff; border: none; border-radius: 10px;
  font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 20px rgba(47, 111, 237, 0.28); text-decoration: none;
}
.m-btn-secondary {
  display: inline-block; padding: 13.5px 24px; background: transparent; color: var(--m-accent);
  border: 1.5px solid var(--m-accent); border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none;
}
.m-btn-secondary:hover { background: var(--m-accent-soft); }
.m-hero-note { font-size: 13px; color: var(--m-muted); }

.m-hero-card { background: #fff; border: 1px solid var(--m-line); border-radius: 16px; padding: 24px; box-shadow: 0 20px 50px rgba(18, 24, 31, 0.08); }
.m-hero-card-label { font-size: 12px; font-weight: 600; color: var(--m-muted); margin-bottom: 16px; }
.m-ring-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-bottom: 20px; }
.m-ring { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.m-ring-inner { width: 68px; height: 68px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.m-ring-num { font-size: 19px; }
.m-ring-label { font-size: 9px; color: var(--m-muted); }
.m-stat-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-stat-grid2 .m-num { font-size: 20px; }
.m-stat-grid2 .m-label { font-size: 11px; color: var(--m-muted); }
.m-cliplist { border-top: 1px solid var(--m-line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.m-clip-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.m-clip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.m-clip-time { margin-left: auto; color: var(--m-muted); }

.m-features { background: #fff; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); margin: 0 -20px; padding: 56px 20px; }
.m-features-inner { max-width: 1000px; margin: 0 auto; }
.m-section-heading { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.m-section-heading h2 { font-size: 28px; margin: 0 0 8px; }
.m-section-heading p { color: var(--m-muted); font-size: 15px; margin: 0; }
.m-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.m-feature-card { border: 1px solid var(--m-line); border-radius: 14px; padding: 22px; transition: transform 0.2s ease; }
.m-feature-card:hover { transform: translateY(-3px); }
.m-feature-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--m-accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex: none; }
.m-feature-icon.square { border-radius: 8px; }
.m-feature-card h3 { font-size: 15px; margin: 0 0 6px; }
.m-feature-card p { font-size: 13px; color: var(--m-muted); margin: 0; line-height: 1.5; }
.m-feature-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.m-feature-banner .m-feature-icon { margin-bottom: 0; }
.m-feature-banner p { font-size: 14px; }

.m-steps { padding: 56px 0; text-align: center; }
.m-steps h2 { font-size: 26px; margin: 0 0 32px; }
.m-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.m-step-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--m-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; margin: 0 auto 12px; }
.m-step-grid h3 { font-size: 15px; margin: 0 0 6px; }
.m-step-grid p { font-size: 13px; color: var(--m-muted); max-width: 240px; margin: 0 auto; line-height: 1.5; }

.m-cta-dark { background: #12181f; color: #fff; border-radius: 20px; padding: 48px 32px; text-align: center; margin: 8px 0 48px; }
.m-cta-dark h2 { font-size: 26px; margin: 0 0 14px; }
.m-cta-dark p { font-size: 15px; color: #b7c0cb; max-width: 520px; margin: 0 auto 26px; line-height: 1.6; }

.m-signup-heading { text-align: center; margin: 8px 0 32px; }
.m-signup-heading h2 { font-size: 26px; margin: 0 0 10px; }
.m-signup-heading p { color: var(--m-muted); font-size: 15px; margin: 0; }

.m-signup-card { max-width: 440px; margin: 0 auto 48px; border-radius: 16px; padding: 36px; box-shadow: 0 20px 50px rgba(18, 24, 31, 0.06); }

/* Lets a header nav click (or a direct /#pricing-style link) land the
   section below the sticky topbar instead of half-hidden underneath it. */
html { scroll-behavior: smooth; }
#features, #how-it-works, #pricing, #signup { scroll-margin-top: 84px; }
/* Generic - covers every .card-based jump-link target (season.html's and the
   shared report pages' in-page table of contents) without needing to
   enumerate every section id by hand. Harmless on any .card that never ends
   up as a scroll target. */
.card { scroll-margin-top: 84px; }

/* ---- In-page "table of contents" jump-link row (season.html,
   shared-report.html, shared-season.html) - these are long single-scroll
   pages with 10+ sections and no other way to get around them. Deliberately
   NOT sticky: stacking it under the already-sticky .topbar would need a
   fragile hardcoded top-offset, whereas a plain row right under the title
   is simple and still gets you there in one click. ---- */
.toc-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 20px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.toc-bar a {
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 12.5px;
  padding: 5px 12px; border-radius: 999px; background: var(--bg-card); transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.toc-bar a:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- Pricing ---- */
.m-pricing-eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; font-weight: 700;
  color: var(--m-accent); margin: 0 0 10px;
}
.m-pricing-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
.m-pricing-card {
  flex: 1 1 280px; background: #fff; border: 1px solid var(--m-line); border-radius: 16px; padding: 32px;
}
.m-pricing-card.core { background: #12181f; color: #fff; border-color: transparent; }
.m-pricing-card h3 { font-size: 19px; margin: 0 0 4px; }
.m-pricing-price { font-size: 28px; margin: 0 0 20px; }
.m-pricing-price .per { font-size: 14px; font-weight: 600; opacity: 0.7; }
.m-pricing-check { font-size: 14.5px; margin: 0 0 10px; color: var(--m-muted); display: flex; gap: 8px; }
.m-pricing-card.core .m-pricing-check { color: rgba(255, 255, 255, 0.9); }
.m-pricing-check span { color: var(--m-teal); flex-shrink: 0; }

/* ---- Shared marketing footer ---- */
.m-footer {
  border-top: 1px solid var(--m-line); background: #eef1f4; margin: 40px -20px 0; padding: 28px 20px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: var(--m-muted);
}
.m-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.m-footer-links a { color: var(--m-muted); text-decoration: none; }
.m-footer-links a:hover { color: var(--m-ink); text-decoration: underline; }

/* ---- Login page (shares the marketing header/footer) ---- */
.m-page { display: flex; flex-direction: column; min-height: 100vh; }
.m-login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.m-login-card { width: 100%; max-width: 380px; margin: 0; border-radius: 16px; padding: 40px 32px; text-align: center; }
.m-login-card h1 { margin: 0 0 6px; }
.m-login-card .sub { margin: 0 0 24px; }
.m-login-card label { text-align: left; }
.m-login-card button { margin-top: 6px; width: 100%; }
.m-login-links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13.5px; }

@media (max-width: 720px) {
  .m-hero { grid-template-columns: 1fr; text-align: center; padding: 16px 0 36px; }
  .m-hero h1 { font-size: 30px; }
  .m-hero-cta { justify-content: center; }
  .m-hero-sub { margin-inline: auto; }
  .m-feature-grid, .m-step-grid { grid-template-columns: 1fr; }
  .m-features { margin: 0 -14px; padding: 40px 14px; }
}

@media (max-width: 640px) {
  body { padding: 0 14px 32px; }
  .topbar { margin: 0 -14px 20px; padding: 12px 14px; gap: 10px; }
  /* Full-bleed negative margins have to track the body padding above, or the
     bar hangs 6px past the viewport on each side and the page scrolls sideways. */
  .m-footer { margin: 40px -14px 0; padding: 28px 14px; }
  .brand span { display: none; }
  .logout-link { padding: 7px 8px; flex-shrink: 0; }
  h1 { font-size: 22px; }

}

/* ---- Mobile menu ----
   Replaces a horizontally-scrolling link row. That row hid the scrollbar and
   relied on a small fade at the right edge as its only affordance, so with ten
   destinations most of the app was unreachable-looking on a phone. Everything
   is now behind one labelled button, with each destination's description shown
   inline rather than buried behind the desktop "i" popovers. ---- */
.nav-toggle { display: none; }
.nav-panel, .nav-scrim { display: none; }

@media (max-width: 860px) {
  /* The link row goes away on both headers: the app's is replaced by the Menu
     panel, and the marketing one is five section anchors that wrapped to three
     rows (87px of sticky header) duplicating content the visitor is about to
     scroll through anyway. Only .logout-link is scoped - in the app header it
     moves into the panel, but on marketing pages it's the "Log in" link and
     there is no panel to move it to. */
  .navlinks { display: none; }
  .topbar-app > .logout-link { display: none; }

  /* iOS Safari zooms the whole page when a focused input is under 16px, so a
     parent tapping the signup form gets thrown into a zoomed viewport they
     have to pinch back out of. 16px is the threshold, not a design choice. */
  input, select, textarea { font-size: 16px; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 0 auto; padding: 9px 14px; min-height: 44px; /* comfortable thumb target */
    background: var(--bg-card); color: var(--ink); border: 1px solid var(--line);
    border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: none;
  }
  .nav-toggle:hover { background: var(--bg-card); transform: none; box-shadow: none; }
  .nav-toggle.open { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

  .nav-toggle-bars { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; }
  .nav-toggle-bars span {
    display: block; height: 2px; width: 100%; border-radius: 2px; background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  /* Bars fold into an X so the button clearly reads as "this closes it now". */
  .nav-toggle.open .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle.open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Tapping anywhere off the panel closes it - and stops taps landing on the
     page underneath while the menu is up. */
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 18; background: rgba(16, 21, 28, 0.35); }

  .nav-panel {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 19;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 100%); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
  }
  .nav-panel[hidden], .nav-scrim[hidden] { display: none; }

  .nav-panel-group {
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); padding: 14px 18px 6px;
  }
  .nav-panel-item {
    display: block; padding: 11px 18px; text-decoration: none; color: var(--ink);
    border-left: 3px solid transparent;
  }
  .nav-panel-item:active { background: var(--bg-card); }
  .nav-panel-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
  .nav-panel-item.active .nav-panel-label { color: var(--accent-ink); }
  .nav-panel-label { display: block; font-size: 15.5px; font-weight: 700; }
  /* The description that desktop hides behind a tiny "i" - there's room for it
     here, and it answers "which one do I want?" without a second tap. */
  .nav-panel-tip { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
  .nav-panel-footer { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; }
}

/* ---- Signed-in home dashboard (index.html) ----
   Surfaces season/recent-game/highlight data that previously only existed one
   click deeper on season.html and highlights.html. */
.home-card-link { float: right; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.home-card-link:hover { text-decoration: underline; }

.stat .num-blue { color: var(--accent); }
.stat .num-green { color: var(--good); }
.stat .num-red { color: var(--bad); }

/* Shared row shell for "most recent game" and each goalie in the roster. */
.home-row, .home-goalie-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px;
}
.home-row-title { font-weight: 700; font-size: 15px; }
.home-goalie-row { background: var(--surface); cursor: pointer; margin-bottom: 10px; }
.home-goalie-row:last-child { margin-bottom: 0; }
.home-goalie-row:hover { border-color: var(--accent); }
.home-goalie-row.is-active { border-color: var(--accent); background: var(--accent-soft); }
.home-goalie-name { font-weight: 700; font-size: 15px; }

.home-metric-row { display: flex; gap: 20px; align-items: center; }
.home-metric { text-align: center; }
.home-metric .v { font-weight: 700; font-size: 16px; }
.home-metric .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.btn-link { text-decoration: none; }

.home-snapshot-grid { grid-template-columns: repeat(4, 1fr); }
.home-clip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home-clip { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.home-clip video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #0d1117; }
.home-clip-meta { padding: 8px 10px; }
.home-clip-zone { font-size: 12.5px; font-weight: 600; }
.home-clip-meta a { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }

.home-insight { display: flex; gap: 12px; align-items: flex-start; background: var(--bad-soft); border-radius: var(--radius-md); padding: 14px 16px; }
.home-insight-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--bad); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.home-insight b { font-size: 14px; }
.home-insight p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.home-insight p a { color: var(--accent); font-weight: 600; text-decoration: none; }

.home-add-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 640px) {
  .home-snapshot-grid, .home-clip-grid { grid-template-columns: repeat(2, 1fr); }
  .home-row, .home-goalie-row { align-items: flex-start; }
  .home-metric-row { gap: 16px; }
}

/* ---- Desktop nav: actions split from places ----
   The link row is destinations only; starting a game or practice is a button,
   and the filming guide is a quiet help link. Hidden under 860px, where the
   Menu panel already lists everything. */
.nav-new { position: relative; margin-left: auto; }
.nav-new-btn {
  padding: 8px 14px; font-size: 13.5px; font-weight: 700; border-radius: 999px;
  white-space: nowrap; margin: 0;
}
.nav-new-caret { font-size: 10px; opacity: 0.8; margin-left: 2px; }
.nav-new-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(16, 21, 28, 0.14); padding: 6px; overflow: hidden;
}
.nav-new-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; }
.nav-new-menu a:hover { background: var(--accent-soft); }
.nav-new-menu a.active { background: var(--accent-soft); }
.nav-new-label { display: block; font-weight: 700; font-size: 14px; color: var(--ink); }
.nav-new-tip { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

.nav-help {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600;
  white-space: nowrap; padding: 7px 4px;
}
.nav-help:hover, .nav-help.active { color: var(--accent); }

@media (max-width: 860px) {
  .nav-new, .nav-help { display: none; }
}

/* ---- Mobile pass: tables, tap targets, legibility ---- */

/* No table in the app had a scroll container, so the 7-column Games table on
   season.html rendered 425px wide in a 375px viewport and pushed the whole
   page sideways - taking Save %, the report link, the sticky header and the
   feedback button off-screen with it. Tables keep their natural width and
   scroll inside this instead of dragging the page. */
.table-scroll, .admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Edge shadows that appear only while there is more table to reach. The
     background-attachment:local/scroll pairing does this in pure CSS, so it
     needs no JS and stays correct through re-renders and rotation. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 21, 28, 0.13), rgba(16, 21, 28, 0)) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 21, 28, 0.13), rgba(16, 21, 28, 0)) right center / 13px 100% no-repeat scroll;
}
/* Safety net for any table added later without a wrapper. */
.card > div:has(> table:only-child) { overflow-x: auto; }

@media (max-width: 860px) {
  /* Apple asks for 44px, Google for 48dp. button.small computed to 27px and is
     used 55 times - including the video scrub controls, which a parent taps
     dozens of times per game while hunting the exact frame of a shot. Applied
     only at small widths so desktop density is unchanged. */
  button.small,
  .navlinks a,
  .topbar .logout-link,
  .nav-help {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The brand mark was a 22x22 target. */
  .topbar .brand { min-height: 44px; }

  /* The base button computes to 39px and inputs to 41px - which included
     "Create account" and every field above it, i.e. the entire signup form. */
  button, .m-btn-primary, .m-btn-secondary {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
  /* A 13px consent checkbox is the hardest thing on the signup form to hit. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; }

  /* 9-11px is below comfortable reading size on a phone. */
  .m-ring-label, .m-stat-grid2 .m-label, .home-metric .l,
  .advice-source, .feedback-name, .pattern-eyebrow { font-size: 12px; }
}

/* ---- Yearly plan ----
   The saving is the whole reason this option exists, so it's stated three
   ways: the flag ($30 off), the per-month equivalent ($12.50, comparable to
   the monthly card beside it), and the struck-through $180 it replaces. */
.m-pricing-annual { position: relative; border: 2px solid var(--m-accent) !important; }
.m-pricing-flag {
  position: absolute; top: -13px; left: 24px;
  background: var(--m-accent); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: 0.02em; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.m-pricing-annual-equiv { font-size: 14px; margin: 2px 0 14px; color: rgba(255, 255, 255, 0.92); }
.m-pricing-annual-equiv strong { color: #fff; }
.m-pricing-strike {
  font-size: 13px; margin: 16px 0 0; color: rgba(255, 255, 255, 0.55); text-decoration: line-through;
}

/* ---- Upgrade dialog (shared by season / report / home gates) ---- */
.upgrade-scrim { position: fixed; inset: 0; background: rgba(16, 21, 28, 0.55); z-index: 40; }
.upgrade-dialog {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 24px 22px 18px;
}
.upgrade-dialog h2 { margin: 0 0 4px; font-size: 20px; }
.upgrade-dialog .sub { margin: 0 0 18px; }
.upgrade-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; margin: 0;
  background: transparent; color: var(--muted); font-size: 24px; font-weight: 400;
  box-shadow: none; border-radius: 999px;
}
.upgrade-close:hover { background: var(--bg-card); color: var(--ink); transform: none; box-shadow: none; }

.plan-option {
  display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 16px 18px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  border-radius: var(--radius-md); box-shadow: none; position: relative;
}
.plan-option:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); transform: none; box-shadow: none; }
.plan-option:disabled { opacity: 0.55; cursor: not-allowed; background: var(--bg-card); }
.plan-annual { border-color: var(--accent); margin-top: 8px; }
.plan-badge {
  position: absolute; top: -11px; left: 14px;
  background: var(--good); color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.plan-price { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.plan-per { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan-equiv { display: block; font-size: 13px; font-weight: 600; color: var(--accent-ink); margin-top: 3px; }
.plan-monthly .plan-equiv { color: var(--muted); font-weight: 500; }
.plan-compare { display: block; font-size: 12.5px; color: var(--muted); text-decoration: line-through; margin-top: 4px; }
.upgrade-note { font-size: 12px; color: var(--muted); margin: 14px 0 0; text-align: center; }