:root {
  --font-body: "Satoshi", "Segoe UI", sans-serif;
  --text-xs: clamp(.75rem, .72rem + .12vw, .82rem);
  --text-sm: clamp(.875rem, .84rem + .15vw, .96rem);
  --text-base: clamp(1rem, .97rem + .15vw, 1.08rem);
  --text-lg: clamp(1.125rem, 1.06rem + .3vw, 1.35rem);
  --text-xl: clamp(1.5rem, 1.36rem + .6vw, 2rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: .35rem;
  --radius-md: .55rem;
  --radius-lg: .8rem;
  --bg: #f3f3f1;
  --surface: #ffffff;
  --surface-2: #e9e9e6;
  --surface-3: #deded9;
  --text: #171717;
  --muted: #696965;
  --faint: #969691;
  --border: #cecec8;
  --nav: #111111;
  --nav-text: #f6f6f3;
  --accent: #d9192e;
  --accent-hover: #ad1425;
  --accent-soft: #f7dfe2;
  --action: #242423;
  --action-hover: #3b3b39;
  --action-text: #ffffff;
  --positive: #24633d;
  --positive-soft: #e1efe5;
  --warning: #8a5a00;
  --warning-soft: #f5ead2;
  --danger: #b42335;
  --danger-soft: #f8e1e4;
  --sponsor: #f4c900;
  --brand-orange: #f5a524;
}

[data-theme="dark"] {
  --bg: #151515;
  --surface: #1d1d1c;
  --surface-2: #282827;
  --surface-3: #343432;
  --text: #f0f0ec;
  --muted: #aaa9a3;
  --faint: #7b7a76;
  --border: #3d3d3a;
  --nav: #090909;
  --nav-text: #f8f8f4;
  --accent: #f33a4f;
  --accent-hover: #ff6474;
  --accent-soft: #4a2429;
  --action: #e8e8e3;
  --action-hover: #ffffff;
  --action-text: #171717;
  --positive: #8dd5a6;
  --positive-soft: #203b29;
  --warning: #f0c774;
  --warning-soft: #43351f;
  --danger: #ff8895;
  --danger-soft: #4a2429;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; font-size: var(--text-base); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.15; }
h1 { font-size: var(--text-xl); letter-spacing: -.03em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
p { color: var(--muted); line-height: 1.45; }
small, .hint { color: var(--muted); font-size: var(--text-xs); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip-link { position: fixed; left: var(--space-4); top: -4rem; z-index: 100; background: var(--surface); color: var(--text); padding: var(--space-3); }
.skip-link:focus { top: var(--space-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.auth-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--bg);
}
.auth-card {
  width: min(100%, 460px);
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.auth-brand { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: var(--space-5); }
.auth-brand img { width: 76px; height: 82px; object-fit: contain; }
.auth-brand div { display: grid; gap: var(--space-1); }
.auth-card form { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.auth-card label, .form-dialog label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.field-help { color: var(--muted); font-size: var(--text-xs); font-weight: 500; line-height: 1.45; }
.auth-link-action { width: 100%; min-height: 44px; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth-divider span { white-space: nowrap; }
.auth-status { min-height: 2.9em; margin-top: var(--space-4); font-size: var(--text-sm); }
.auth-status.error { color: var(--accent); }
.auth-status.success { color: var(--positive); }
.auth-sponsor { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.auth-sponsor span { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.auth-sponsor img { width: 112px; height: auto; aspect-ratio: 250 / 104; object-fit: contain; }
body:not(.authenticated) .prototype-bar,
body:not(.authenticated) .app-shell,
body:not(.authenticated) .mobile-nav { display: none; }
body.authenticated .auth-screen { display: none; }

.prototype-bar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.prototype-bar > div, .prototype-actions { display: flex; align-items: center; gap: var(--space-3); }
.prototype-brand > div { display: grid; gap: 1px; }
.mobile-club-mark, .mobile-sponsor-mark { display: none; }
.prototype-bar span { color: var(--muted); }
.prototype-bar strong { font-weight: 700; }
.prototype-actions button { min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 0 var(--space-3); }
.settings-trigger, .safeguarding-trigger, .coach-assist-trigger { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.settings-trigger svg, .safeguarding-trigger svg, .coach-assist-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.safeguarding-trigger { color: var(--brand-orange) !important; }
.coach-assist-trigger { border-color: var(--border) !important; background: transparent !important; color: var(--brand-orange) !important; }
.connection-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: 99px; color: var(--positive) !important; font-size: var(--text-xs); font-weight: 700; }
.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.connection-pill.error { color: var(--accent) !important; }
.microphone-onboarding {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  color: var(--text);
  background: var(--warning-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border));
}
.microphone-onboarding[hidden] { display: none; }
.microphone-onboarding > div { max-width: 720px; display: grid; gap: 2px; }
.microphone-onboarding p { color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.microphone-onboarding[data-state="denied"] { background: var(--accent-soft); border-bottom-color: var(--accent); }
.microphone-onboarding button { min-height: 44px; flex: 0 0 auto; }

.app-shell { display: grid; grid-template-columns: 248px 1fr; height: calc(100dvh - 52px); }
.sidebar { background: var(--nav); color: var(--nav-text); display: flex; flex-direction: column; padding: var(--space-5); overflow-y: auto; }
.club-lockup { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-6); border-bottom: 1px solid #3b3b3b; }
.club-lockup img { width: 50px; height: 54px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); }
.club-lockup div { display: grid; gap: 2px; }
.club-lockup span { color: #b5b5b1; font-size: var(--text-xs); }
.primary-nav { display: grid; gap: var(--space-1); margin-top: var(--space-4); }
.nav-item { min-height: 48px; display: grid; grid-template-columns: 30px 1fr; align-items: center; text-align: left; gap: var(--space-2); color: #c9c9c5; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.nav-item span { color: #73736f; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.nav-item:hover, .nav-item.active { color: #fff; background: #292929; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.sponsor { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-bottom: 1px solid #3b3b3b; }
.sponsor-logo-frame { width: 112px; min-height: 42px; display: grid; place-items: center; padding: var(--space-2); background: rgb(255 255 255 / .92); border-radius: var(--radius-sm); }
.sponsor-logo-frame img { width: 96px; height: 40px; object-fit: contain; margin: auto; opacity: .82; }
.sponsor-edit-button { min-height: 44px; border: 1px solid #484848; border-radius: var(--radius-sm); background: transparent; color: #c9c9c5; font-size: var(--text-xs); font-weight: 700; }
.mobile-sponsor-button { display: none; min-height: 0; }
.mobile-sponsor-edit { display: none; }
.mobile-sponsor-empty { min-width: 56px; min-height: 36px; display: inline-grid; place-items: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-xs); }

.invite-share-panel { display: grid; gap: var(--space-4); text-align: center; padding-top: var(--space-2); }
.invite-share-icon { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #168a45; font-size: 1.5rem; font-weight: 700; }
.invite-expiry { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.invite-share-actions { display: grid; gap: var(--space-3); }
.invite-share-actions > * { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.whatsapp-share-action { background: #168a45; border-color: #168a45; color: #fff; }
.whatsapp-share-action:hover { background: #10733a; border-color: #10733a; }
.invite-security-note { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.join-page { min-height: 100dvh; background: var(--surface); }
.join-shell { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
.join-card { width: min(100%, 480px); }
.join-card form { display: grid; gap: var(--space-3); }
.join-card form[hidden] { display: none; }
.join-card small { color: var(--muted); }
.join-loading { min-height: 48px; display: grid; place-items: center; color: var(--muted); }
.join-error { display: grid; gap: var(--space-4); }
.join-error[hidden] { display: none; }
.join-error .secondary-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

main { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-8); }
.screen { display: none; max-width: 1220px; margin: 0 auto; }
.screen.active { display: block; animation: reveal .2s ease-out; }
@keyframes reveal { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.page-header > div { display: grid; gap: var(--space-2); }
.page-header-actions { display: flex !important; grid-auto-flow: column; align-items: center; gap: var(--space-2) !important; }
.fixture-actions { min-width: min(100%, 520px); }
.fixture-picker { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.fixture-picker select { min-width: 260px; color: var(--brand-orange); font-weight: 700; }
.fixtures-page-heading { margin-bottom: var(--space-5); }
.fixture-selection { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.fixture-selection .fixture-picker { width: min(100%, 560px); }
.fixture-selection .fixture-picker select { width: 100%; }
.selected-fixture-card { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.selected-fixture-card h2 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); line-height: 1.2; }
.selected-fixture-card h2 > span { min-width: 0; }
.selected-fixture-card p { color: var(--muted); font-size: var(--text-sm); }
.fixture-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.eyebrow { color: var(--brand-orange); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.primary-action, .panel button, .pitch-toolbar button { min-height: 44px; border-radius: var(--radius-sm); padding: 0 var(--space-4); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: var(--text-sm); }
.primary-action { background: var(--action); color: var(--action-text); border-color: var(--action); }
.primary-action:hover { background: var(--action-hover); border-color: var(--action-hover); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.panel-heading > div { display: grid; gap: var(--space-1); }
.status { display: inline-flex; align-items: center; width: fit-content; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.status.warning { background: var(--warning-soft); color: var(--warning); }
.status.positive { background: var(--positive-soft); color: var(--positive); }
.status.danger { background: var(--danger-soft); color: var(--danger); }
.progress-status { background: var(--positive-soft); color: var(--positive); }
.progress { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin: var(--space-3) 0 var(--space-5); }
.progress span { height: 100%; display: block; background: var(--accent); }

.status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--border); margin-bottom: var(--space-6); }
.status-strip article { background: var(--surface); padding: var(--space-5); display: grid; gap: var(--space-2); }
.status-strip article > span, .status-strip small { color: var(--muted); font-size: var(--text-xs); }
.status-strip strong { font-size: var(--text-lg); }
.club-crest { flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; padding: 3px; border: 1px solid var(--border); border-radius: 50%; background: #fff; }
.club-crest > * { grid-area: 1 / 1; }
.club-crest img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.club-crest-small { width: 38px; height: 38px; }
.club-crest-medium { width: 46px; height: 46px; }
.club-crest-tiny { width: 30px; height: 30px; }
.club-crest-fallback { display: grid; place-items: center; color: var(--muted); background: var(--surface-2); font-size: var(--text-xs); font-style: normal; font-weight: 800; }
.fixture-identity { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.fixture-identity > strong { min-width: 0; font-size: var(--text-lg); line-height: 1.15; }
.fixture-crest-pair { display: grid; grid-template-columns: 38px auto 38px; align-items: center; gap: var(--space-1); }
.fixture-crest-pair i { color: var(--muted); font-size: var(--text-xs); font-style: normal; font-weight: 800; }
.fixture-heading { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.fixture-heading h2 { min-width: 0; }
.fixture-page-header h1 { display: flex; align-items: center; gap: var(--space-3); }
#selection-meta { display: flex; align-items: center; gap: var(--space-2); }
#selection-meta > span { min-width: 0; }
.dashboard-action-centre { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
.dashboard-section-heading > div { display: grid; gap: var(--space-1); }
.dashboard-section-heading p { max-width: 42ch; color: var(--muted); font-size: var(--text-sm); text-align: right; }
.dashboard-action-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-4); }
.dashboard-sections { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.dashboard-group { display: grid; gap: var(--space-3); }
.dashboard-group-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dashboard-group-heading { display: grid; gap: 2px; min-width: 0; }
.dashboard-group-title { color: var(--text); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard-group-hint { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.dashboard-group-head::after { content: "−"; color: var(--muted); font-size: var(--text-lg); font-weight: 500; }
.dashboard-group.is-collapsed .dashboard-group-head { border-bottom-color: transparent; }
.dashboard-group.is-collapsed .dashboard-group-head::after { content: "+"; }
.dashboard-group-body { display: grid; gap: var(--space-3); }
.dashboard-group-body[hidden] { display: none; }
.dashboard-disclosure { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.dashboard-disclosure > summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.dashboard-disclosure > summary::-webkit-details-marker { display: none; }
.dashboard-disclosure > summary > span:first-child { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dashboard-disclosure > summary strong { font-size: var(--text-base); }
.dashboard-disclosure > summary small { color: var(--muted); font-size: var(--text-xs); }
.dashboard-disclosure > summary::after { content: "+"; color: var(--muted); font-size: var(--text-xl); font-weight: 500; }
.dashboard-disclosure[open] > summary::after { content: "−"; }
.dashboard-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.dashboard-summary-state { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.dashboard-action-count, .dashboard-complete-mark { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1; }
.dashboard-summary-state.red { color: var(--danger); }
.dashboard-summary-state.red .dashboard-action-count { color: #fff; border-color: var(--danger); background: var(--danger); }
.dashboard-summary-state.amber { color: var(--warning); }
.dashboard-summary-state.amber .dashboard-action-count { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.dashboard-summary-state.green { color: var(--positive); }
.dashboard-summary-state.neutral { color: var(--muted); font-weight: 600; }
.dashboard-disclosure-body { padding: var(--space-4); }
.dashboard-disclosure-body > .panel { border: 0; padding: 0; box-shadow: none; }
.dashboard-disclosure-body > .status-strip { margin-bottom: var(--space-4); }
.dashboard-disclosure-body > .dashboard-action-centre { margin-top: 0; }
.wide-panel { grid-column: 1 / -1; }
.progress-row { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.next-action > button { width: 100%; }
.compact-list { list-style: none; display: grid; }
.compact-list li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.compact-list li:first-child { border-top: 0; }
.compact-list div { display: grid; gap: 2px; }
.dashboard-development-list small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.35; }
.dashboard-development-list button { min-width: 64px; }
.status-strip article.rag-red { box-shadow: inset 3px 0 0 var(--danger); }
.status-strip article.rag-amber { box-shadow: inset 3px 0 0 var(--warning); }
.status-strip article.rag-green { box-shadow: inset 3px 0 0 var(--positive); }
.dashboard-kpi-detail { margin-bottom: var(--space-3); font-size: var(--text-sm); }
.dashboard-training-action { margin-top: var(--space-4); }
.progress.danger span { background: var(--danger); }
.progress.warning span { background: var(--warning); }
.progress.positive span { background: var(--positive); }
.dashboard-view-all { width: 100%; margin-top: var(--space-3); }
.match-review-card { border-top: 4px solid var(--warning); }
.match-review-card:has(.status.danger) { border-top-color: var(--danger); }
.match-review-card:has(.status.positive) { border-top-color: var(--positive); }
.match-review-card p { margin: var(--space-3) 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.match-review-card p strong { color: var(--text); }
.review-attribution { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.review-attribution::before { width: 6px; height: 6px; flex: 0 0 6px; content: ""; border-radius: 50%; background: var(--positive); }
.match-review-card .review-attribution { margin: calc(var(--space-2) * -1) 0 var(--space-4); }
.dashboard-review-action { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); border: 1px solid var(--action); border-radius: var(--radius-sm); background: var(--action); color: var(--action-text); font-weight: 800; }
.dashboard-review-action.secondary { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.dashboard-review-action span { font-size: var(--text-lg); }
.league-panel { overflow: hidden; padding-bottom: var(--space-3); }
.league-heading { padding: var(--space-5) var(--space-5) 0; }
.league-table-scroll { margin-top: var(--space-4); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.league-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.league-table th, .league-table td { height: 44px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.league-table thead th { height: 36px; color: var(--muted); background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.league-table th:nth-child(2) { width: 100%; text-align: left; }
.league-table tbody th { text-align: left; font-weight: 700; }
.league-table tbody tr:last-child > * { border-bottom: 0; }
.league-table .is-dundrum > * { background: color-mix(in srgb, var(--brand-orange) 14%, var(--surface)); }
.league-table .is-dundrum th { box-shadow: inset 3px 0 0 var(--brand-orange); color: var(--text); }
.league-position { color: var(--muted); }
.league-goal-difference, .league-points { font-weight: 800; }
.league-source { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5) 0; color: var(--muted); font-size: var(--text-xs); }
.league-source a { color: var(--text); font-weight: 800; text-underline-offset: 3px; }
.results-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.results-record { color: var(--muted); font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.results-form { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.results-form-label { color: var(--muted); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.results-form-pills { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.results-form-pill { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 800; }
.results-form-pill.is-win { background: var(--positive); color: var(--surface); }
.results-form-pill.is-draw { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.results-form-pill.is-loss { background: var(--danger); color: var(--surface); }
.results-list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.result-row { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.result-row.is-win { box-shadow: inset 3px 0 0 var(--positive); }
.result-row.is-draw { box-shadow: inset 3px 0 0 var(--border); }
.result-row.is-loss { box-shadow: inset 3px 0 0 var(--danger); }
.result-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.result-row-info { display: grid; gap: 2px; min-width: 0; }
.result-row-info strong { font-size: var(--text-sm); }
.result-row-info small { color: var(--muted); font-size: var(--text-xs); }
.result-score { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--border); }
.result-score.is-win { background: var(--positive); color: var(--surface); box-shadow: none; }
.result-score.is-loss { background: var(--danger); color: var(--surface); box-shadow: none; }
.result-scorers { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; color: var(--text); font-size: var(--text-xs); line-height: 1.5; }
.result-scorers-label { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.result-scorers-missing { color: var(--warning); font-weight: 700; }
.result-row-flag { margin: 0; color: var(--warning); font-size: var(--text-xs); line-height: 1.5; }
.result-review-link { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: 800; text-align: left; }
.result-review-link.is-missing { border-color: var(--warning); color: var(--warning); }
.result-review-link[disabled] { border-color: var(--border); color: var(--muted); font-weight: 700; }
.result-review-chevron { font-size: var(--text-base); }
.results-scorers { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.results-scorers h3 { margin: 0; font-size: var(--text-base); }
.results-scorer-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; counter-reset: scorer; }
.results-scorer-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); }
.results-scorer-list li::before { counter-increment: scorer; content: counter(scorer) "."; color: var(--muted); font-size: var(--text-xs); font-weight: 800; }
.results-scorer-list li > span { flex: 1 1 auto; min-width: 0; }
.results-scorer-list li > strong { font-variant-numeric: tabular-nums; }
.results-note { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.cup-panel .empty-state { margin-top: var(--space-3); }
.cup-run + .cup-run { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.cup-run .panel-heading { padding: 0; }
.cup-run h3 { margin: 0; font-size: var(--text-base); }
.cup-run-detail { margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.cup-tie-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cup-tie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.cup-tie.is-out { box-shadow: inset 3px 0 0 var(--warning); }
.cup-tie-info { display: grid; gap: 2px; min-width: 0; }
.cup-tie-info strong { font-size: var(--text-sm); }
.cup-tie-info small { color: var(--muted); font-size: var(--text-xs); }
.cup-tie-list .cup-tie-result { gap: var(--space-2); }
.cup-tie-result .cup-tie-stage select { width: 100%; }
.cup-tie-stage select { min-height: 44px; min-width: 140px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 700; }
.cup-progress-note { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; font-size: var(--text-sm); font-weight: 700; }
.player-avatar { position: relative; flex: 0 0 auto; overflow: hidden; }
.player-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; }
.player-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.session-line { display: grid; grid-template-columns: 70px 1fr 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }

.development-summary { display: grid; gap: var(--space-4); }
.squad-overview-disclosure { margin-bottom: 0; }
.summary-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
.summary-heading > div { display: grid; gap: var(--space-1); }
.summary-heading p { max-width: 58ch; font-size: var(--text-xs); text-align: right; }
.individual-player-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0 0 var(--space-5);
  padding-top: var(--space-2);
}
.individual-player-heading > div:first-child { display: grid; gap: var(--space-1); }
.individual-player-heading p { color: var(--muted); font-size: var(--text-sm); }
.individual-player-actions { display: flex; align-items: center; gap: var(--space-2); }
.individual-player-actions select { min-width: 180px; }
.roster-options { margin-top: var(--space-5); border-top: 1px solid var(--border); color: var(--muted); }
.roster-options summary { min-height: 44px; display: flex; align-items: center; width: fit-content; cursor: pointer; font-weight: 700; color: var(--muted); }
.roster-options > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0 var(--space-4); }
.roster-options p { max-width: 48rem; font-size: var(--text-sm); }
.roster-options #add-player { flex: 0 0 auto; background: transparent; color: var(--muted); }
.development-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.development-metric { min-width: 0; min-height: 108px; display: grid; align-content: space-between; gap: var(--space-1); padding: var(--space-4); text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.development-metric:hover { border-color: var(--text); }
.development-metric[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.development-metric.attention { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 28%, var(--border)); }
.development-metric.attention strong { color: var(--warning); }
.development-metric:disabled { cursor: wait; opacity: .72; }
.development-metric strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--brand-orange); }
.development-metric span { align-self: end; font-size: var(--text-sm); font-weight: 700; }
.development-metric small { line-height: 1.3; }
.player-filter-results { padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.filter-results-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.filter-results-heading > div { display: grid; gap: var(--space-1); }
.filter-results-heading button, .position-action { min-height: 44px; padding-inline: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: 700; }
.filter-description { margin-top: var(--space-2); font-size: var(--text-xs); }
.filtered-player-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.filtered-player { min-width: 0; min-height: 56px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-2); text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.filtered-player > span:last-child { min-width: 0; display: grid; gap: 1px; }
.filtered-player strong { overflow: hidden; text-overflow: ellipsis; }
.filter-empty { grid-column: 1 / -1; display: grid; gap: var(--space-1); padding-block: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.filter-empty strong { color: var(--text); }
.player-development-sections { display: grid; gap: var(--space-3); }
.player-disclosure { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.player-disclosure > summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; }
.player-disclosure > summary::-webkit-details-marker { display: none; }
.player-disclosure > summary > span { min-width: 0; display: grid; gap: 2px; }
.player-disclosure > summary strong { font-size: var(--text-base); }
.player-disclosure > summary small { color: var(--muted); font-size: var(--text-xs); }
.player-disclosure > summary::after { content: "+"; color: var(--muted); font-size: var(--text-xl); }
.player-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.player-disclosure[open] > summary::after { content: "−"; }
.player-disclosure-body { padding: var(--space-4); }
.player-disclosure-body > .panel { margin: 0; border: 0; padding: 0; box-shadow: none; }
.player-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items: start; }
.identity-card { text-align: center; }
.large-avatar { width: 100px; height: 100px; display: grid; place-items: center; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-xl); font-weight: 700; }
.identity-card p { margin-top: var(--space-2); font-size: var(--text-sm); }
.player-meta { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.roster-state { display: inline-flex; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 700; text-transform: capitalize; }
.roster-state.active { color: var(--positive); background: var(--positive-soft); }
.roster-state.left { color: var(--accent); background: var(--accent-soft); }
.player-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-3); }
.player-empty p { font-size: var(--text-sm); }
.identity-card dl { margin-top: var(--space-6); text-align: left; }
.identity-card dl div { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.identity-card dt { color: var(--muted); font-size: var(--text-xs); }
.identity-card dd { font-size: var(--text-sm); font-weight: 700; }
.position-action { width: 100%; margin-top: var(--space-4); }
.goal-prerequisite { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); color: var(--warning); background: var(--warning-soft); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; }
.goal-prerequisite > div { display: grid; gap: var(--space-1); }
.goal-prerequisite span { font-weight: 500; }
.goal-prerequisite button { min-height: 44px; flex: 0 0 auto; }
.goal-group { margin-top: var(--space-4); }
.goal-group-heading, .completed-goals summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding-block: var(--space-2); }
.goal-group-heading h3, .completed-goals summary span:first-child { font-size: var(--text-sm); font-weight: 700; }
.goal-group-heading > span, .completed-goals summary span:last-child { min-width: 28px; padding: 3px var(--space-2); text-align: center; color: var(--muted); background: var(--surface-2); border-radius: 99px; font-size: var(--text-xs); font-weight: 700; }
.completed-goals { margin-top: var(--space-3); border-top: 1px solid var(--border); }
.completed-goals summary { cursor: pointer; list-style-position: inside; }
.completed-goals .goal-card { opacity: .88; }
.goal-card { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.goal-card h3 { margin: var(--space-2) 0; }
.goal-card p { font-size: var(--text-sm); }
.goal-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.goal-meta button { min-height: 44px; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.metric-row div { padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); display: grid; gap: var(--space-1); }
.metric-row strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.metric-row span { color: var(--muted); font-size: var(--text-xs); }
.timeline { display: grid; margin-top: var(--space-5); }
.timeline > div { position: relative; display: grid; gap: 2px; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-left: 1px solid var(--border); }
.timeline-dot { position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.timeline button { width: fit-content; margin-top: var(--space-2); }
.timeline-positions-toggle { margin-top: var(--space-2); }
.timeline-positions-toggle > summary { cursor: pointer; list-style: none; font-size: var(--text-xs); font-weight: 700; color: var(--accent); width: fit-content; }
.timeline-positions-toggle > summary::-webkit-details-marker { display: none; }
.timeline-positions-body { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); }
.timeline-positions-total { margin: 0 0 2px; font-weight: 700; color: var(--text); }
.timeline-positions-list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.timeline-positions-list li { background: var(--surface-2); border-radius: 99px; padding: 2px var(--space-2); }

.availability-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.availability-summary > div { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.availability-summary strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.availability-summary span { color: var(--muted); font-size: var(--text-sm); }
.availability-row { display: grid; grid-template-columns: 40px minmax(110px, .8fr) 1fr 130px; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.availability-row > span:nth-child(3) { color: var(--muted); font-size: var(--text-sm); }
.availability-row .status-button { width: 100%; }
.availability-row select.status-button { min-height: 44px; border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 0 var(--space-3); font: inherit; font-weight: 700; cursor: pointer; }
.availability-row select.status-button:disabled { cursor: not-allowed; opacity: .65; }
.availability-row.has-parent-note { row-gap: var(--space-2); }
.parent-note-tag { grid-column: 2 / -1; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-orange) 12%, transparent); border-left: 3px solid var(--brand-orange); color: var(--text); font-size: var(--text-sm); }
.parent-note-icon { color: var(--brand-orange); font-weight: 800; font-size: var(--text-lg); line-height: 1; }
.status-button.available { color: var(--positive); background: var(--positive-soft); }
.status-button.unavailable { color: var(--accent); background: var(--accent-soft); }
.status-button.awaiting { color: var(--warning); background: var(--warning-soft); }
.muted-row { opacity: .7; }

.selection-layout { display: grid; grid-template-columns: 250px minmax(360px, 1fr) 240px; gap: var(--space-4); align-items: start; }
.selection-layout--pitch-first { grid-template-columns: minmax(360px, 1fr) 240px; }
.guest-players { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.guest-players > .secondary-action { min-height: 44px; }
.guest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.guest-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: var(--space-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.guest-list li strong { font-weight: 600; }
.guest-list li .secondary-action { min-height: 44px; padding-inline: var(--space-3); }
.player-chips { display: grid; gap: var(--space-2); }
.player-chip { min-height: 50px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; text-align: left; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: var(--space-2); }
.player-chip > span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.player-chip small { grid-column: 2; }
.player-chip.selected { border-color: var(--accent); background: var(--accent-soft); }
.pitch-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.pitch-toolbar { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.pitch-toolbar label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.pitch-toolbar select { min-width: 132px; color: var(--text); font-weight: 800; }
.pitch-toolbar span { color: var(--muted); font-size: var(--text-xs); }
.formation-status { min-height: 32px; padding: 0 var(--space-4) var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.pitch-role-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: 0 var(--space-4) var(--space-3); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.pitch-role-key span { display: inline-flex; align-items: center; gap: var(--space-1); }
.captain-key,
.role-key-code {
  min-width: 22px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
}
.captain-key {
  min-width: 18px;
  padding: 0;
  border-color: #d2a62f;
  background: #f0c348;
  color: #211b0c;
}
.pitch {
  position: relative;
  isolation: isolate;
  min-height: 610px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  padding: var(--space-6) var(--space-4);
  overflow: hidden;
  background: #101a16;
  border-top: 1px solid var(--border);
}
.pitch::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(1, 17, 10, .34), transparent 42%, rgba(0, 9, 5, .06)),
    repeating-linear-gradient(90deg, #1c6842 0 12.5%, #22764a 12.5% 25%);
  box-shadow: inset 0 -24px 42px rgba(0, 0, 0, .18);
}
[data-theme="dark"] .pitch { background: #0b120f; }
[data-theme="dark"] .pitch::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .36), transparent 45%, rgba(0, 0, 0, .14)),
    repeating-linear-gradient(90deg, #15482f 0 12.5%, #1a5637 12.5% 25%);
}
.pitch-markings {
  position: absolute;
  z-index: -1;
  inset: var(--space-2);
  width: calc(100% - (2 * var(--space-2)));
  height: calc(100% - (2 * var(--space-2)));
  pointer-events: none;
  fill: none;
  stroke: rgba(238, 250, 240, .55);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pitch-slot {
  position: relative;
  z-index: 1;
  width: 104px;
  min-height: 86px;
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  border: 1px dashed rgba(242, 249, 244, .72);
  border-radius: var(--radius-sm);
  background: rgba(247, 251, 248, .86);
  color: var(--text);
  text-align: left;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}
.pitch-slot > strong {
  grid-column: 1 / -1;
  align-self: end;
  width: 100%;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pitch-slot-top {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.pitch-slot-number,
.pitch-slot-position {
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
}
.pitch-slot-number { color: #f4f5f4; font-variant-numeric: tabular-nums; }
.pitch-slot-position { color: var(--muted); letter-spacing: .04em; }
.pitch-slot-add {
  grid-row: 1 / -1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1;
}
.pitch-slot:not(.filled) {
  grid-template-columns: 28px 1fr;
  grid-template-rows: 1fr;
  justify-items: start;
}
.pitch-slot:not(.filled) > strong {
  grid-column: 2;
  align-self: center;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: .04em;
}
.pitch-slot.filled {
  border: 0;
  clip-path: polygon(8% 0, 92% 0, 100% 13%, 96% 88%, 50% 100%, 4% 88%, 0 13%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 36%),
    linear-gradient(180deg, #202723, #111613);
  color: #fff;
  box-shadow: 0 9px 20px rgba(4, 18, 10, .38), inset 0 1px rgba(255, 255, 255, .09);
  transform: scale(var(--pitch-depth-scale, 1));
  transform-origin: center;
}
.pitch-slot.filled.goalkeeper { background: linear-gradient(145deg, rgba(255, 255, 255, .09), transparent 36%), linear-gradient(180deg, #17354a, #0e202c); }
.pitch-slot.filled .pitch-slot-position { color: #92c8aa; }
.pitch-slot.filled.goalkeeper .pitch-slot-position { color: #8fc7eb; }
.pitch-slot.filled:hover,
.pitch-slot.filled:focus-visible { background: linear-gradient(180deg, #2a342e, #17201a); transform: scale(var(--pitch-depth-scale, 1)) translateY(-2px); }
.pitch-slot.filled.goalkeeper:hover,
.pitch-slot.filled.goalkeeper:focus-visible { background: linear-gradient(180deg, #214962, #102b3b); }
/* A picked-out starter waiting to be swapped. Ringed rather than recoloured so the
   card stays readable against the pitch. */
/* Selected tile on Play: amber glow (var(--brand-orange)) matches active bottom-nav for consistency. */
.pitch-slot.filled.selected { box-shadow: 0 0 0 4px var(--brand-orange), 0 0 0 10px rgba(245,165,36,.45), 0 12px 26px rgba(4, 18, 10, .5); transform: scale(calc(var(--pitch-depth-scale, 1) * 1.05)) translateY(-2px); z-index: 3; }
.pitch-slot.filled.has-duty { box-shadow: 0 10px 24px rgba(4, 18, 10, .46), inset 0 0 0 1px rgba(235, 198, 75, .5); }
.pitch-slot.filled.has-duty.selected { box-shadow: 0 0 0 3px var(--brand-orange), 0 0 0 6px rgba(245,165,36,.28), 0 12px 26px rgba(4, 18, 10, .5), inset 0 0 0 1px rgba(235, 198, 75, .5); }
.pitch-slot.filled.has-duty > strong { padding-bottom: 24px; }
.pitch-slot-duties {
  position: absolute;
  left: 10px;
  bottom: 9px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.pitch-slot-duties[hidden] { display: none; }
.set-piece-badge {
  min-width: 22px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .9);
  box-shadow: none;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
}
.set-piece-badge.captain {
  min-width: 18px;
  border-color: #d2a62f;
  background: #f0c348;
  color: #211b0c;
}
.pitch-slot-alert {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 195, 72, .65);
  border-radius: var(--radius-full);
  background: rgba(240, 195, 72, .14);
  color: #f4cf66;
  box-shadow: none;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.pitch-slot:has(.pitch-slot-alert) .pitch-slot-top { padding-right: 18px; }
[data-theme="dark"] .pitch-slot:not(.filled) { background: color-mix(in srgb, var(--surface) 76%, transparent); border-color: #7c867e; }
.pitch-slot { grid-column: var(--slot-column-start) / var(--slot-column-end); grid-row: var(--slot-row); }
.pitch[data-format-size="11"] .pitch-slot { width: min(104px, 100%); min-width: 0; padding-inline: 5px; }
.pitch-slot[data-line="forward"] { --pitch-depth-scale: .86; }
.pitch-slot[data-line="midfield"] { --pitch-depth-scale: .92; }
.pitch-slot[data-line="defence"] { --pitch-depth-scale: .97; }
.pitch-slot[data-line="goalkeeper"] { --pitch-depth-scale: 1.04; }
.formation-confirm-content { display: grid; gap: var(--space-4); padding: var(--space-6); }
.formation-confirm-content p { color: var(--muted); font-size: var(--text-sm); }
.lineup-player-dialog { width: min(calc(100% - 2rem), 560px); }
.lineup-player-dialog-content { display: grid; gap: var(--space-4); padding: var(--space-6); }
.lineup-player-dialog-content > p { color: var(--muted); font-size: var(--text-sm); }
.lineup-player-options { display: grid; gap: var(--space-2); max-height: min(54dvh, 480px); overflow-y: auto; }
.lineup-player-option {
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lineup-player-option:hover { border-color: var(--positive); background: var(--positive-soft); }
.lineup-player-option > span { display: grid; gap: 2px; min-width: 0; }
.lineup-player-option small { color: var(--muted); }
.lineup-player-option em {
  padding: var(--space-1) var(--space-2);
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.lineup-player-option.match-rank-0 { border-color: var(--positive); }
.lineup-player-option.match-rank-0 em { color: var(--positive); background: var(--positive-soft); }
.lineup-player-option.match-rank-1 em { color: var(--action); background: var(--surface-2); }
.lineup-player-cancel { width: 100%; }
.selection-checks ul { list-style: none; display: grid; gap: var(--space-3); }
.selection-checks li { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); align-items: start; }
.selection-checks li div { display: grid; gap: 2px; }
.match-day-sections { width: min(100%, 1180px); display: grid; gap: var(--space-3); }
.match-day-disclosure { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.match-day-summary { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border: 0; background: transparent; color: var(--text); text-align: left; }
.match-day-summary > span { min-width: 0; display: grid; gap: 2px; }
.match-day-summary strong { font-size: var(--text-lg); }
.match-day-summary small { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.match-day-summary::after { content: "+"; flex: 0 0 auto; color: var(--muted); font-size: var(--text-xl); font-weight: 400; }
.match-day-summary[aria-expanded="true"]::after,
.match-day-disclosure.is-open > .match-day-summary::after { content: "−"; }
.match-day-disclosure.is-open > .match-day-summary { border-bottom: 1px solid var(--border); }
.match-day-disclosure > #lineup-panel,
.match-day-disclosure > .tactics-board-workflow,
.match-day-disclosure > .match-plan-workflow,
.match-day-disclosure > .role-assignment-workflow { padding: var(--space-4); }
.tactics-board-workflow { display: grid; gap: var(--space-3); }
body.tactics-board-fullscreen-open { overflow: hidden; }
.tactics-board-options {
  position: absolute;
  z-index: 6;
  top: var(--space-2);
  right: var(--space-2);
  left: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--radius-md);
  background: rgba(247, 249, 247, .94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}
.tactics-expand-button {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}
.tactics-opposition-toggle {
  flex: 0 0 48px;
  width: 48px;
  min-height: 44px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
}
.tactics-opposition-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tactics-opposition-toggle span { font-size: 9px; font-weight: 900; line-height: 1; }
.tactics-opposition-toggle[aria-pressed="true"] { border-color: #c84b3a; background: #fff3f0; color: #a93628; }
.tactics-opposition-control {
  position: absolute;
  z-index: 6;
  top: 66px;
  left: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 6px 5px var(--space-3);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--radius-md);
  background: rgba(247, 249, 247, .94);
  color: #8f3025;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  font-size: var(--text-xs);
  font-weight: 900;
}
.tactics-opposition-control[hidden] { display: none; }
.tactics-opposition-control select {
  min-height: 38px;
  padding: 0 32px 0 var(--space-3);
  border: 1px solid #dbb0a9;
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: #70251c;
  font: inherit;
  font-size: var(--text-sm);
}
.tactics-expand-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tactics-formation-control { flex: 0 0 96px; color: var(--muted); font-size: var(--text-xs); font-weight: 800; }
.tactics-formation-control > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tactics-formation-control select {
  width: 100%;
  min-height: 42px;
  min-width: 0;
  padding: 0 34px 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}
.tactics-view-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 3px !important;
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.tactics-view-controls button {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}
.tactics-view-controls button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--positive);
  box-shadow: var(--shadow-sm);
}
.tactics-pitch-dock {
  position: absolute;
  z-index: 5;
  right: var(--space-2);
  bottom: var(--space-2);
  left: var(--space-2);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-md);
  background: rgba(10, 22, 15, .88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
}
.tactics-pitch-dock button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 1px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, .78);
}
.tactics-pitch-dock button[aria-pressed="true"] { background: #fff; color: #164a31; }
.tactics-pitch-dock button:disabled { opacity: .34; }
.tactics-pitch-dock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tactics-pitch-dock span { font-size: 10px; font-weight: 800; line-height: 1; }

.tactics-pitch.is-targeting { cursor: crosshair; }
.tactics-target {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd25a;
  transform: translate(-50%, -50%);
  touch-action: none;
  left: calc(var(--tactics-pad-x) + ((100% - var(--tactics-pad-x) - var(--tactics-pad-x)) * var(--tactics-x, 50) / 100));
  top: calc(var(--tactics-pad-top) + ((100% - var(--tactics-pad-top) - var(--tactics-pad-bottom)) * var(--tactics-y, 50) / 100));
}
.tactics-target svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.tactics-target:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.tactics-target.is-dragging { opacity: .85; }

.tactics-library {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.tactics-board-workflow.is-fullscreen .tactics-library { display: none; }
.tactics-library-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}
.tactics-library-head h4 { margin: 0; font-size: var(--text-sm); }
.tactics-library-save {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--brand, #164a31);
  color: #fff;
  font-weight: 700;
}
.tactics-library-note { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.tactics-save-form { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.tactics-save-form label { display: grid; gap: 4px; font-size: var(--text-xs); font-weight: 700; }
.tactics-save-form input,
.tactics-save-form select {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}
.tactics-save-actions { display: flex; gap: var(--space-2); }
.tactics-save-actions button {
  min-height: 44px;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 700;
}
.tactics-save-actions button.primary { background: var(--brand, #164a31); border-color: transparent; color: #fff; }
.tactics-library-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.tactics-library-types button {
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 700;
}
.tactics-library-types button[aria-pressed="true"] { background: var(--brand, #164a31); border-color: transparent; color: #fff; }
.tactics-library-list { display: grid; gap: 6px; }
.tactics-library-item { display: flex; gap: var(--space-2); align-items: stretch; }
.tactics-library-open {
  flex: 1;
  min-height: 52px;
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
}
.tactics-library-open strong { font-size: var(--text-sm); }
.tactics-library-meta { font-size: var(--text-xs); color: var(--text-muted); }
.tactics-library-delete,
.tactics-library-confirm {
  min-width: 76px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 700;
}
.tactics-library-confirm { background: #b3261e; border-color: transparent; color: #fff; }
.tactics-library-empty { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.tactics-pitch {
  --tactics-pad-x: var(--space-2);
  --tactics-pad-top: 60px;
  --tactics-pad-bottom: 66px;
  position: relative;
  height: clamp(380px, 56dvh, 540px);
  overflow: hidden;
  border: 1px solid rgba(238, 250, 240, .48);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(0, 20, 10, .16), rgba(0, 11, 6, .06)),
    repeating-linear-gradient(90deg, #1c6842 0 12.5%, #22764a 12.5% 25%);
  touch-action: none;
  user-select: none;
}
.tactics-board-workflow.is-fullscreen {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: block;
  padding: 0 !important;
  background: #10281b;
}
.tactics-board-workflow.is-fullscreen .tactics-pitch {
  width: 100%;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}
.tactics-board-workflow.is-fullscreen .tactics-board-options {
  top: max(var(--space-2), env(safe-area-inset-top));
  right: max(var(--space-2), env(safe-area-inset-right));
  left: max(var(--space-2), env(safe-area-inset-left));
}
.tactics-board-workflow.is-fullscreen .tactics-pitch-dock {
  right: max(var(--space-2), env(safe-area-inset-right));
  bottom: max(var(--space-2), env(safe-area-inset-bottom));
  left: max(var(--space-2), env(safe-area-inset-left));
}
.tactics-board-workflow.is-fullscreen .tactics-player-tray {
  display: none;
}
[data-theme="dark"] .tactics-pitch {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .08)),
    repeating-linear-gradient(90deg, #15482f 0 12.5%, #1a5637 12.5% 25%);
}
.tactics-pitch.is-drawing { cursor: crosshair; }
.tactics-pitch-lines, .tactics-drawing-layer {
  position: absolute;
  top: var(--tactics-pad-top);
  right: var(--tactics-pad-x);
  bottom: var(--tactics-pad-bottom);
  left: var(--tactics-pad-x);
  width: calc(100% - var(--tactics-pad-x) - var(--tactics-pad-x));
  height: calc(100% - var(--tactics-pad-top) - var(--tactics-pad-bottom));
  pointer-events: none;
}
.tactics-pitch-lines { fill: none; stroke: rgba(238, 250, 240, .62); stroke-width: .65; vector-effect: non-scaling-stroke; }
.tactics-drawing-layer { z-index: 2; overflow: visible; }
.tactics-drawing-layer polyline { fill: none; stroke: #f4d35e; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tactics-drawing-layer marker path { fill: #f4d35e; }
.tactics-player-disc {
  z-index: 3;
  width: 64px;
  min-width: 64px;
  min-height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.tactics-player-disc.is-pitch {
  position: absolute;
  left: calc(var(--tactics-pad-x) + ((100% - var(--tactics-pad-x) - var(--tactics-pad-x)) * var(--tactics-x, 50) / 100));
  top: calc(var(--tactics-pad-top) + ((100% - var(--tactics-pad-top) - var(--tactics-pad-bottom)) * var(--tactics-y, 50) / 100));
  transform: translate(-50%, -50%);
  color: #fff;
}
.tactics-player-disc.is-number-only { width: 52px; min-width: 52px; min-height: 52px; padding: 4px; }
.tactics-player-disc.is-opposition .tactics-player-marker { border-color: rgba(255,255,255,.96); background: #c84b3a; color: #fff; }
.tactics-player-disc.is-dragging { opacity: .72; }
.tactics-player-marker {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: #14241b;
  color: #fff;
  box-shadow: 0 5px 12px rgba(0,0,0,.32);
  font-size: var(--text-sm);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.tactics-player-disc.is-tray .tactics-player-marker { border-color: var(--border); background: var(--surface-strong); color: var(--text); box-shadow: none; }
.tactics-player-name {
  max-width: 72px;
  overflow: hidden;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(9, 18, 13, .78);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tactics-player-disc.is-tray .tactics-player-name { background: transparent; color: var(--text); }
.tactics-player-tray {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  touch-action: pan-x;
}
.tactics-tray-empty { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.match-day-panel-actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }
.match-plan-workflow { display: grid; gap: var(--space-4); }
.role-assignment-workflow { display: grid; gap: var(--space-4); }
.role-assignment-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: var(--space-4); }
.role-assignment-save-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.role-assignment-save-bar span { color: var(--muted); font-size: var(--text-sm); }
.match-plan-state { min-height: 240px; display: grid; align-content: center; justify-items: start; gap: var(--space-3); }
.match-plan-state .loading-block { width: min(100%, 420px); height: 72px; }
.match-plan-hero { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.match-plan-context { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.match-plan-context > div { display: grid; gap: var(--space-1); }
.match-plan-summary { max-width: 76ch; font-size: var(--text-sm); }
.match-plan-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: var(--space-4); margin-top: var(--space-4); align-items: start; }
.match-plan-phases, .match-plan-side { display: grid; gap: var(--space-4); }
.match-plan-phase { display: grid; gap: var(--space-3); }
.match-plan-phase-heading { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
.match-plan-phase-heading > div { display: grid; gap: var(--space-1); }
.match-plan-phase-heading p { font-size: var(--text-xs); }
.match-plan-options { display: grid; gap: var(--space-2); }
.match-plan-option { min-height: 64px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-align: left; }
.match-plan-option:hover:not(:disabled) { border-color: var(--positive); background: var(--positive-soft); }
.match-plan-option[aria-pressed="true"] { border-color: var(--positive); background: var(--positive-soft); }
.match-plan-option .match-plan-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: transparent; font-weight: 900; }
.match-plan-option[aria-pressed="true"] .match-plan-check { border-color: var(--positive); background: var(--positive); color: var(--surface); }
.match-plan-option > span:last-child { display: grid; gap: var(--space-1); }
.match-plan-option strong { font-size: var(--text-sm); }
.match-plan-option small { line-height: 1.35; }
.match-plan-option:disabled { cursor: not-allowed; opacity: .65; }
.match-plan-roles { display: grid; gap: var(--space-2); }
.match-plan-role { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.match-plan-role:first-child { border-top: 0; }
.match-plan-role .avatar { width: 38px; height: 38px; }
.match-plan-role > div { min-width: 0; display: grid; gap: 2px; }
.match-plan-role strong, .match-plan-role small { overflow: hidden; text-overflow: ellipsis; }
.match-plan-role small { line-height: 1.35; }
.match-plan-role > em { color: var(--positive); font-size: var(--text-xs); font-style: normal; font-weight: 800; }
.match-plan-details { padding: 0; overflow: hidden; }
.match-plan-details summary { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); cursor: pointer; font-size: var(--text-sm); font-weight: 800; }
.match-plan-details summary span { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.match-plan-owner-grid { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.match-plan-owner-grid label { display: grid; gap: var(--space-1); font-size: var(--text-xs); font-weight: 700; }
.match-plan-owner-grid select, #match-plan-opposition-notes { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-3); }
#match-plan-opposition-notes { min-height: 104px; resize: vertical; }
.match-plan-details > textarea, .match-plan-details > small { margin: 0 var(--space-4) var(--space-2); width: calc(100% - (var(--space-4) * 2)); }
.match-plan-details > small { display: block; text-align: right; }
.match-plan-save-bar { position: sticky; bottom: 0; z-index: 3; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 -4px 16px rgb(0 0 0 / .08); backdrop-filter: blur(8px); }
.match-plan-save-bar > div { display: grid; gap: var(--space-1); }
.match-plan-save-bar > div:last-child { display: flex; grid-auto-flow: initial; flex-direction: row; gap: var(--space-2); }
.match-plan-save-bar span { color: var(--muted); font-size: var(--text-xs); }
.match-plan-save-bar button { min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); font-weight: 800; }
.match-plan-save-bar button:disabled { cursor: not-allowed; opacity: .5; }
.check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.check.pass { color: var(--positive); background: var(--positive-soft); }
.check.warn { color: var(--warning); background: var(--warning-soft); }
.equipment { margin-top: var(--space-5); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.equipment p { margin-top: var(--space-2); font-size: var(--text-sm); }

/* Substitutes strip, directly under the pitch. Deliberately styled to echo the
   pitch cards so a single screenshot of this article reads as one team sheet. */
.pitch-bench { margin-top: var(--space-2); padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.pitch-bench .eyebrow em { color: var(--muted); font-style: normal; font-weight: 700; }
/* Kept deliberately compact: the coach screenshots the pitch and this strip together,
   so every row saved here is a row that stays inside one screen. */
.pitch-bench-list { margin-top: var(--space-2); list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
/* These are tap targets for swapping players, so they hold the 44px minimum. */
.pitch-bench-player { min-height: 56px; width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; padding: 8px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pitch-bench-player:hover:not(:disabled) { border-color: var(--text); }
.pitch-bench-player.selected { color: var(--surface); background: var(--text); border-color: var(--text); }
.pitch-bench-player.selected .pitch-bench-number { color: var(--surface); opacity: .75; }
.pitch-bench-player:disabled { cursor: not-allowed; opacity: .55; }
.pitch-bench-player.unconfirmed { border-style: dashed; }
.pitch-bench-number { color: var(--muted); font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pitch-bench-player strong { font-size: var(--text-sm); font-weight: 700; }
.pitch-bench-positions { grid-column: 2; font-size: var(--text-xs); color: var(--muted); font-weight: 500; letter-spacing: .01em; }
.pitch-bench-player.selected .pitch-bench-positions { color: var(--surface); opacity: .8; }
.pitch-bench-empty { color: var(--muted); font-size: var(--text-sm); }
.pitch-bench-hint { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); }

.training-phase-cards { width: min(100%, 980px); display: grid; gap: var(--space-3); }
.training-phase-disclosure { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.training-phase-summary { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); color: var(--text); background: transparent; border: 0; text-align: left; }
.training-phase-summary > span { min-width: 0; display: grid; gap: 2px; }
.training-phase-summary strong { font-size: var(--text-lg); }
.training-phase-summary small { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.training-phase-summary::after { content: "+"; flex: 0 0 auto; color: var(--muted); font-size: var(--text-xl); font-weight: 400; }
.training-phase-summary[aria-expanded="true"]::after { content: "−"; }
.training-phase-disclosure.is-open > .training-phase-summary { border-bottom: 1px solid var(--border); }
.training-principle { margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.training-phase-panel { display: grid; gap: var(--space-5); padding: var(--space-4); }
.training-phase-panel > .panel { margin: 0; border: 0; box-shadow: none; }
.training-idea-card { display: grid; gap: var(--space-4); }
.training-idea-heading { align-items: start; }
.training-idea-heading > div { display: grid; gap: var(--space-1); }
.training-idea-heading p { max-width: 66ch; font-size: var(--text-sm); }
.training-idea-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .5fr); gap: var(--space-4); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.training-idea-form > label, .training-idea-controls label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.training-idea-form textarea { min-height: 168px; background: var(--surface); }
.training-idea-controls { display: grid; align-content: start; gap: var(--space-3); }
.training-idea-controls button { width: 100%; }
.training-idea-form > .hint { grid-column: 1 / -1; }
.training-idea-output { display: grid; gap: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.training-participation-check { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-md); }
.training-participation-check.ready { color: var(--positive); background: var(--positive-soft); }
.training-participation-check.needs-adapting { color: var(--warning); background: var(--warning-soft); }
.training-participation-check > div { display: grid; gap: var(--space-1); }
.training-participation-check p { color: var(--text); font-size: var(--text-sm); }
.training-check-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-weight: 900; }
.training-setup-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.training-setup-summary > div { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.training-setup-summary span { color: var(--muted); font-size: var(--text-xs); }
.training-setup-summary strong { font-size: var(--text-sm); }
.training-idea-activities { display: grid; list-style: none; }
.training-idea-activities li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.training-idea-activities li > div { display: grid; gap: var(--space-1); }
.training-idea-activities p, .training-idea-activities small { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.training-idea-activities p strong { color: var(--text); }
.training-idea-number { width: 30px; height: 30px; display: grid; place-items: center; color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--surface)); border-radius: 50%; font-size: var(--text-xs); font-weight: 800; }
.training-idea-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); }
.training-idea-actions p { max-width: 56ch; font-size: var(--text-sm); }
.training-idea-card > .section-status { min-height: 0; margin: 0; }
.training-recommendation-card { display: grid; gap: var(--space-4); }
.recommendation-kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.training-workflow { display: grid; gap: var(--space-5); max-width: 980px; }
.training-step { display: grid; gap: var(--space-4); }
.training-step-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.training-step-heading p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.training-step-number { width: 36px; height: 36px; display: grid; place-items: center; color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--surface)); border-radius: 50%; font-weight: 800; }
.next-training-recommendation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.recommendation-date { max-width: 110px; color: var(--muted); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; }
.recommendation-copy { display: grid; gap: var(--space-1); min-width: 0; }
.recommendation-copy p { color: var(--muted); font-size: var(--text-sm); }
.recommendation-copy .theme-tag { margin-bottom: var(--space-1); }
.recommendation-availability { color: var(--text) !important; font-weight: 700; }
.panel .training-build-action, .panel .training-save-action { min-height: 44px; padding: 0 var(--space-5); color: var(--action-text); background: var(--action); border-color: var(--action); font-weight: 800; }
.panel .training-build-action:hover, .panel .training-save-action:hover { background: var(--action-hover); border-color: var(--action-hover); }
.training-disclosure { border-top: 1px solid var(--border); }
.training-disclosure summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text); cursor: pointer; font-size: var(--text-sm); font-weight: 800; list-style: none; }
.training-disclosure summary::-webkit-details-marker { display: none; }
.training-disclosure summary::after { content: "+"; color: var(--muted); font-size: var(--text-lg); }
.training-disclosure[open] summary::after { content: "−"; }
.training-disclosure-body { padding: var(--space-2) 0 var(--space-4); }
.training-alternatives { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.training-alternatives > div:first-child { display: grid; gap: var(--space-1); }
.training-alternative-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.training-alternative-actions button { min-height: 44px; background: var(--surface); }
.training-advanced { padding: 0; overflow: clip; }
.training-advanced > summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; }
.training-advanced > summary::-webkit-details-marker { display: none; }
.training-advanced > summary > span { display: grid; gap: var(--space-1); }
.training-advanced > summary::after { content: "+"; color: var(--muted); font-size: var(--text-lg); }
.training-advanced[open] > summary::after { content: "−"; }
.training-advanced-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border); }
.training-advanced .session-plan { padding-top: var(--space-5); }
.training-advanced .training-step-heading { grid-template-columns: minmax(0, 1fr) auto; }
.training-strategy-details { display: grid; gap: var(--space-3); }
.rotation-heading { margin-top: var(--space-5); }
.training-save-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.training-save-heading { grid-template-columns: 36px minmax(0, 1fr); }
.training-save-actions { display: flex; gap: var(--space-2); }
.needs-panel, .strategy-panel { min-width: 0; }
.needs-list, .strategy-list { display: grid; margin-top: var(--space-3); }
.need-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.need-rank { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 800; }
.need-row > div { display: flex; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.need-row > div span { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.need-bar { grid-column: 2; height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.need-bar i { display: block; height: 100%; background: var(--accent); }
.missing-theme-state { display: grid; gap: var(--space-1); margin-top: var(--space-3); padding: var(--space-3); color: var(--warning); background: var(--warning-soft); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.strong-empty { display: grid; gap: var(--space-2); text-align: left; background: var(--surface-2); border: 0; border-radius: var(--radius-sm); }
.strategy-list { grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--border); }
.strategy-session { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface); }
.strategy-date { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.strategy-date strong { color: var(--text); white-space: nowrap; }
.strategy-session > div:nth-child(2) { min-width: 0; }
.strategy-session h3 { margin-top: var(--space-1); }
.strategy-session p { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.strategy-session button { min-width: 64px; min-height: 44px; }
.theme-tags, .goal-card-labels { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.theme-tag { display: inline-flex; width: fit-content; padding: 2px var(--space-2); color: var(--muted); background: var(--surface-2); border-radius: 99px; font-size: var(--text-xs); font-weight: 700; }
.completion-summary { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); padding: var(--space-4); color: var(--positive); background: var(--positive-soft); border-radius: var(--radius-md); }
.completion-summary span { font-size: var(--text-sm); }
.delivery-card { display: grid; gap: var(--space-4); }
.delivery-helper { padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.delivery-run-sheet { display: grid; list-style: none; }
.delivery-run-sheet li { border-top: 1px solid var(--border); }
.delivery-run-sheet li:first-child { border-top: 0; }
.delivery-run-sheet button { width: 100%; min-height: 72px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px 88px; align-items: center; gap: var(--space-3); padding: var(--space-3); text-align: left; border: 0; border-radius: 0; background: transparent; }
.delivery-run-sheet li.current button { background: var(--action); color: var(--action-text); border-radius: var(--radius-sm); }
.delivery-run-sheet li.current small { color: color-mix(in srgb, var(--action-text) 72%, transparent); }
.delivery-run-sheet li.next button { background: var(--surface-2); }
.delivery-time, .delivery-minutes { font-variant-numeric: tabular-nums; font-weight: 800; }
.delivery-activity { display: grid; gap: var(--space-1); min-width: 0; }
.delivery-place { justify-self: end; font-size: var(--text-xs); font-weight: 800; }
.delivery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.delivery-actions button { min-height: 52px; }
.delivery-actions .primary-action, .review-completion-card .primary-action { color: var(--action-text); background: var(--action); border-color: var(--action); }
.delivery-actions button:disabled, .training-phase-panel button:disabled { cursor: not-allowed; opacity: .5; }
.review-completion-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.review-completion-card > div { display: grid; gap: var(--space-2); }
.review-completion-card.is-complete { background: var(--positive-soft); }
.training-history { display: grid; margin-top: var(--space-3); }
.training-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.training-history-row > div { display: grid; gap: var(--space-1); }
.training-history-row > div span, .training-history-row small { color: var(--muted); font-size: var(--text-xs); }
.training-history-row small { grid-column: 1 / -1; }
.completion-theme-review { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.completion-theme-review > div:first-child { display: grid; gap: var(--space-1); }
.completion-theme-review p { font-size: var(--text-xs); }
.session-details { margin: 0; padding: 0; border: 0; box-shadow: none; }
.session-detail-grid { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1.2fr; gap: var(--space-3); }
.session-detail-grid label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.session-rule { margin-top: var(--space-3); font-size: var(--text-xs); }
.search-label { display: block; font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-2); }
input, select, textarea { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
textarea { resize: vertical; line-height: 1.45; }
.library-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block: var(--space-3); font-size: var(--text-xs); }
.library-meta a, .learning-link { color: var(--accent); text-underline-offset: 3px; }
.drill-results { display: grid; }
.drill-card { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.drill-thumb { height: 52px; display: grid; place-items: center; border: 1px dashed var(--faint); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.drill-card > div:nth-child(2) { display: grid; gap: 2px; }
.drill-card p { font-size: var(--text-xs); }
.drill-actions { display: grid; gap: var(--space-1); }
.drill-actions button { min-width: 64px; }
.learning-link { width: fit-content; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 700; }
.time-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.time-total.under { color: var(--warning); }
.time-total.over { color: var(--accent); }
.time-total.on-target { color: var(--positive); }
.duration-meter { height: 10px; overflow: hidden; margin-bottom: var(--space-2); border-radius: 99px; background: var(--surface-2); }
.duration-meter span { display: block; height: 100%; transition: width .2s ease; }
.duration-meter .under { background: var(--warning); }
.duration-meter .over { background: var(--accent); }
.duration-meter .on-target { background: var(--positive); }
.duration-guidance { min-height: 1.5em; font-size: var(--text-sm); font-weight: 700; }
.planner-hint { margin-block: var(--space-3); }
.session-plan ol { list-style: none; display: grid; }
.session-plan li { display: grid; grid-template-columns: 30px minmax(120px, 1fr) 72px auto; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.session-plan li > span { color: var(--faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.session-plan li div { display: grid; gap: var(--space-1); }
.session-coach-note { max-width: 72ch; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.session-plan li[draggable="true"] { cursor: grab; }
.drag-handle { font-size: var(--text-lg) !important; letter-spacing: -.25em; }
.minutes-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1); }
.minutes-field input { min-width: 0; padding-inline: var(--space-2); text-align: center; }
.timeline-actions { display: flex !important; grid-auto-flow: column; gap: var(--space-1) !important; }
.timeline-actions button { min-width: 44px; padding-inline: var(--space-2); }
.default-plan-action { width: 100%; margin-top: var(--space-4); }

.mobile-nav { display: none; }
.demo-message { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 80; max-width: 360px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: white; background: var(--nav); border-radius: var(--radius-md); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.demo-message button { min-height: 44px; padding-inline: var(--space-3); color: white; border-color: currentColor; }
.demo-message.visible { opacity: 1; transform: none; pointer-events: auto; }
.empty-state { padding: var(--space-6) var(--space-3); text-align: center; color: var(--muted); font-size: var(--text-sm); border-top: 1px solid var(--border); }
.empty-state.compact { padding: var(--space-4) var(--space-2); }
.loading-block { min-height: 80px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: loading 1.2s linear infinite; }
@keyframes loading { to { background-position: -200% 0; } }
.form-dialog { width: min(calc(100% - 2rem), 520px); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow-y: auto; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.form-dialog::backdrop { background: rgb(0 0 0 / .55); }
.recording-correction-dialog { padding: 20px; }
.recording-correction-dialog .dialog-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.recording-correction-dialog .dialog-heading h2 { font-size: 20px; margin: 0; }
.recording-correction-dialog form { padding: 12px 0; }
.recording-correction-dialog button, .recording-correction-dialog select, .recording-correction-dialog input { min-height: 44px; }
.recording-correction-dialog [data-history] { white-space: pre-line; padding-top: 12px; }
.form-dialog form { display: grid; gap: var(--space-4); padding: var(--space-6); }
.settings-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  box-sizing: border-box;
  width: min(100vw, 680px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  border: 0;
  border-left: 1px solid var(--border);
}
.settings-dialog::backdrop { background: rgb(0 0 0 / .55); }
.settings-dialog[open] { animation: settings-reveal .18s ease-out; }
@keyframes settings-reveal { from { opacity: .5; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.settings-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.settings-heading { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.settings-heading > div { display: grid; gap: 2px; }
.settings-content { display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--space-3); overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-10); overscroll-behavior: contain; }
.settings-inline { display: block; padding: 0; background: transparent; border: 0; }
.settings-inline .settings-content { padding: 0; overflow: visible; gap: var(--space-3); }
.coaches-disclosure-body .settings-inline .settings-card { padding: var(--space-3) var(--space-4); }
.settings-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 86px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.settings-card-stacked { display: grid; align-items: stretch; }
.settings-card-copy { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.settings-card-copy > div { min-width: 0; display: grid; gap: var(--space-1); }
.settings-card-copy p { font-size: var(--text-sm); overflow-wrap: anywhere; }
.settings-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--text); background: var(--surface-2); border-radius: 50%; font-size: var(--text-sm); font-weight: 800; }
.settings-safeguarding-icon { color: var(--positive); }
.settings-safeguarding-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.settings-actions, .settings-branding-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.settings-actions button, .settings-branding-actions button, .settings-single-action { min-height: 44px; white-space: nowrap; }
.settings-sign-out { color: var(--accent); }
.settings-sponsor-preview { width: 86px; height: 44px; display: grid; place-items: center; padding: var(--space-1); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.settings-sponsor-preview img { max-width: 76px; max-height: 34px; object-fit: contain; }
.settings-sync-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.settings-sync-item { display: grid; gap: 2px; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.settings-sync-when { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.settings-sync-when strong { font-size: var(--text-sm); }
.settings-sync-when small { color: var(--text); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.settings-sync-why { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.settings-sync-actions { display: grid; gap: var(--space-2); }
.settings-sync-actions .secondary-action { min-height: 44px; justify-self: start; }
#force-sync-status:empty { display: none; }
#force-sync-status[data-sync-level="error"] { color: var(--accent); font-weight: 600; }
#settings-sync-summary[data-sync-level="amber"] { color: var(--warning); font-weight: 600; }
#settings-sync-summary[data-sync-level="red"] { color: var(--danger); font-weight: 600; }
.settings-sync-health-slot { margin-top: var(--space-1); }
.settings-sync-health { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; margin: 0; font-variant-numeric: tabular-nums; }
.settings-sync-health[data-sync-health="overdue"] { color: var(--warning); font-weight: 600; }
.settings-defaults { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.settings-defaults > div { display: grid; gap: 2px; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.settings-defaults span { color: var(--muted); font-size: var(--text-xs); }
.settings-defaults strong { font-size: var(--text-sm); }
.settings-toggle { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; }
.settings-toggle > span { display: grid; gap: 2px; }
.settings-toggle small { font-weight: 400; }
.settings-toggle input { width: 48px; height: 28px; flex: 0 0 48px; appearance: none; padding: 3px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 99px; transition: background .15s ease; }
.settings-toggle input::before { content: ""; display: block; width: 20px; height: 20px; background: var(--surface); border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s ease; }
.settings-toggle input:checked { background: var(--positive); }
.settings-toggle input:checked::before { transform: translateX(20px); }
.settings-note { padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: var(--text-xs); }
.settings-status { color: var(--positive); font-size: var(--text-xs); font-weight: 700; text-align: right; }
.settings-status.error { color: var(--accent); }
#settings-team-access-slot, #settings-feedback-slot { display: grid; }
#settings-team-access-slot .coaches-disclosure, #settings-feedback-slot .coaches-disclosure { border-radius: var(--radius-md); }
.coach-assist-dialog {
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  width: min(100%, 760px);
  max-width: none;
  max-height: min(88dvh, 760px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -16px 46px rgb(0 0 0 / .22);
}
.coach-assist-dialog::backdrop { background: rgb(0 0 0 / .58); }
.coach-assist-dialog[open] { animation: coach-assist-reveal .18s ease-out; }
@keyframes coach-assist-reveal { from { opacity: .45; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.coach-assist-shell { max-height: inherit; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.coach-assist-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.coach-assist-lockup { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.coach-assist-lockup > div { min-width: 0; display: grid; gap: 1px; }
.coach-assist-lockup h2 { font-size: var(--text-lg); }
.coach-assist-lockup p { color: var(--muted); font-size: var(--text-xs); }
.coach-assist-lockup svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--action); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.coach-assist-content { min-width: 0; display: grid; align-content: start; gap: var(--space-4); overflow-y: auto; padding: var(--space-4) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.coach-assist-fixture { display: block; overflow-wrap: anywhere; font-size: var(--text-base); text-align: center; }
.coach-assist-match-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .62fr); gap: var(--space-3); padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.coach-assist-clock-panel { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: var(--space-3); padding: var(--space-1) var(--space-2); }
.coach-assist-match-state { align-self: center; width: fit-content; padding: 4px 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.coach-assist-clock { grid-column: 2; grid-row: 1 / span 2; color: var(--text); font-size: clamp(2rem, 7vw, 3.25rem); font-variant-numeric: tabular-nums; line-height: .95; letter-spacing: -.055em; text-align: right; }
.coach-assist-clock-detail { color: var(--muted); font-size: var(--text-xs); font-weight: 650; }
.coach-assist-primary-match-action { min-height: 74px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--action-text); background: var(--action); border-color: var(--action); border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 850; }
.coach-assist-primary-match-action svg { width: 22px; height: 22px; fill: currentColor; }
.coach-assist-primary-match-action:hover, .coach-assist-primary-match-action:focus-visible { background: var(--action-hover); border-color: var(--action-hover); }
.coach-assist-primary-match-action:disabled { color: var(--muted); background: var(--surface-3); border-color: var(--border); }
.coach-assist-match-control[data-phase="live"] { border-color: color-mix(in srgb, var(--positive) 45%, var(--border)); background: var(--positive-soft); }
.coach-assist-match-control[data-phase="live"] .coach-assist-match-state { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 45%, var(--border)); }
.coach-assist-match-control[data-phase="paused"], .coach-assist-match-control[data-phase="interval"] { border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); background: var(--warning-soft); }
.coach-assist-match-control[data-phase="paused"] .coach-assist-match-state, .coach-assist-match-control[data-phase="interval"] .coach-assist-match-state { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.coach-assist-halftime { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border)); border-radius: var(--radius-md); }
.coach-assist-halftime[hidden] { display: none; }
.coach-assist-halftime-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.coach-assist-halftime-heading h3 { margin-top: 2px; font-size: var(--text-base); }
.coach-assist-eyebrow { color: var(--warning); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.coach-assist-halftime-heading button { min-height: 40px; padding: 7px 12px; }
.coach-assist-halftime-points { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: halftime-point; }
.coach-assist-halftime-points li { counter-increment: halftime-point; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.coach-assist-halftime-points li::before { content: counter(halftime-point); display: grid; place-items: center; width: 30px; height: 30px; color: var(--action-text); background: var(--action); border-radius: 50%; font-size: var(--text-xs); font-weight: 900; }
.coach-assist-halftime-point { display: grid; gap: 2px; }
.coach-assist-halftime-point strong { font-size: var(--text-xs); letter-spacing: .03em; text-transform: uppercase; }
.coach-assist-halftime-point span { font-size: var(--text-sm); line-height: 1.45; }
.coach-assist-halftime-status { color: var(--muted); font-size: var(--text-xs); }
.coach-assist-voice-stage { display: grid; justify-items: stretch; gap: var(--space-3); padding: var(--space-4) 0; text-align: center; }
.coach-assist-voice { width: 100%; min-height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: var(--surface); background: var(--action); border-color: var(--action); border-radius: 999px; font-size: var(--text-base); font-weight: 800; }
.coach-assist-voice svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coach-assist-voice:hover, .coach-assist-voice:focus-visible { filter: brightness(.94); }
.coach-assist-voice[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.coach-assist-voice:disabled { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.coach-assist-voice-note { color: var(--muted); font-size: var(--text-xs); }
.coach-assist-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.coach-assist-quick-actions button { min-height: 52px; padding: var(--space-2) var(--space-3); color: var(--text); background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-sm); font-weight: 750; text-align: center; }
.coach-assist-quick-actions button:hover, .coach-assist-quick-actions button:focus-visible { border-color: var(--action); background: var(--surface); }
.coach-assist-quick-actions button:disabled { color: color-mix(in srgb, var(--muted) 72%, transparent); background: var(--surface-2); border-color: var(--border); cursor: not-allowed; }
.coach-assist-postmatch-note { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); color: var(--text); background: var(--positive-soft); border: 1px solid color-mix(in srgb, var(--positive) 35%, var(--border)); border-radius: var(--radius-sm); }
.coach-assist-postmatch-note strong { font-size: var(--text-sm); }
.coach-assist-postmatch-note p { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.coach-assist-result { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 1.5; overflow-wrap: anywhere; }
.coach-assist-result[data-state="error"], .coach-assist-result[data-state="unsupported"] { border-color: var(--accent); }
.coach-assist-result[data-state="listening"] { border-color: var(--accent); background: var(--accent-soft); }
.coach-assist-result[data-state="review"] { border-color: var(--warning); background: var(--warning-soft); }
.coach-assist-result[data-state="saved"] { border-color: var(--positive); background: var(--positive-soft); }
.coach-assist-result[data-state="subs_due"] { border-color: var(--warning); background: var(--warning-soft); }
.coach-assist-state { padding: 3px 7px; color: var(--muted); background: var(--surface); border-radius: 999px; font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.coach-assist-result[data-state="listening"] .coach-assist-state, .coach-assist-result[data-state="error"] .coach-assist-state { color: var(--accent); }
.coach-assist-result[data-state="review"] .coach-assist-state { color: var(--warning); }
.coach-assist-result[data-state="saved"] .coach-assist-state { color: var(--positive); }
.coach-assist-result[data-state="subs_due"] .coach-assist-state { color: var(--warning); }
.coach-assist-result p { white-space: pre-wrap; }
.coach-assist-substitution-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .72fr); gap: var(--space-2); padding-top: var(--space-1); }
.coach-assist-substitution-actions[hidden] { display: none; }
.coach-assist-substitution-actions button { min-height: 50px; white-space: normal; }
.coach-assist-manual-substitution { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.coach-assist-manual-substitution[hidden] { display: none; }
.coach-assist-substitution-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.coach-assist-substitution-pickers label { display: grid; gap: 5px; font-size: var(--text-xs); font-weight: 750; }
.coach-assist-substitution-pickers select { width: 100%; min-height: 48px; }
.coach-assist-manual-substitution-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.coach-assist-manual-substitution-actions button { min-height: 50px; }
.coach-assist-observation { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.coach-assist-observation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.coach-assist-character-count { color: var(--muted); font-size: var(--text-xs); text-align: right; }
.coach-assist-safety { display: grid; gap: var(--space-2); padding: var(--space-3); color: var(--text); background: var(--accent-soft); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.coach-assist-safety button { width: fit-content; min-height: 44px; }
.coach-assist-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.coach-assist-actions button { min-height: 44px; }
.coach-assist-text-fallback { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.coach-assist-text-fallback summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: var(--muted); cursor: pointer; font-size: var(--text-sm); font-weight: 750; list-style: none; }
.coach-assist-text-fallback summary::-webkit-details-marker { display: none; }
.coach-assist-text-fallback summary::after { content: "+"; margin-left: var(--space-2); font-size: var(--text-lg); font-weight: 400; line-height: 1; }
.coach-assist-text-fallback[open] summary::after { content: "−"; }
.coach-assist-text-fallback form { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.coach-assist-text-fallback label { font-size: var(--text-sm); font-weight: 750; }
.coach-assist-composer { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
.coach-assist-composer textarea { min-height: 76px; max-height: 160px; resize: vertical; }
.coach-assist-composer button { min-height: 46px; }
.safeguarding-dialog { width: min(calc(100% - 2rem), 500px); }
.safeguarding-shell { display: grid; gap: var(--space-5); padding: var(--space-6); }
.safeguarding-officer { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.safeguarding-officer > div { display: grid; gap: 2px; }
.safeguarding-officer span { color: var(--muted); font-size: var(--text-sm); }
.safeguarding-officer a { width: fit-content; color: var(--text); font-size: var(--text-sm); font-weight: 750; text-underline-offset: 3px; }
.safeguarding-shield { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: var(--positive) !important; background: var(--positive-soft); border-radius: 50%; }
.safeguarding-shield svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.safeguarding-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.safeguarding-actions a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-3); text-align: center; text-decoration: none; }
.safeguarding-actions a:first-child, .safeguarding-actions a:last-child:not([hidden]) { grid-column: 1 / -1; }
.safeguarding-privacy { padding: var(--space-4); color: var(--text); background: var(--surface-2); border-left: 3px solid var(--positive); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); }
.safeguarding-privacy strong { display: block; margin-bottom: var(--space-1); }
.safeguarding-emergency { padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--text); font-size: var(--text-sm); }
.safeguarding-emergency a { color: inherit; font-weight: 800; text-underline-offset: 3px; }
.goal-template-step, .goal-fields { display: grid; gap: var(--space-4); }
.theme-checklist, .attendance-fieldset { min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.theme-checklist legend, .attendance-fieldset legend { padding-inline: var(--space-2); font-size: var(--text-sm); font-weight: 800; }
.theme-checklist > p { margin-bottom: var(--space-3); }
.theme-checklist > div, .attendance-fieldset > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.theme-checklist label, .attendance-fieldset label, .completion-confirm { min-height: 44px; display: flex; grid-template-columns: none; flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
.theme-checklist input, .attendance-fieldset input, .completion-confirm input { width: 20px; min-height: 20px; flex: 0 0 20px; accent-color: var(--accent); }
.completion-confirm { background: var(--surface-2); }
.template-step-heading { display: grid; gap: var(--space-2); }
.template-step-heading h3 { margin-top: var(--space-1); font-size: var(--text-lg); }
.template-step-heading p { color: var(--muted); font-size: var(--text-sm); }
.goal-template-list { display: grid; gap: var(--space-4); }
.template-group { display: grid; gap: var(--space-2); }
.template-group h4 { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.template-options { display: grid; gap: var(--space-2); }
.goal-template-card { min-height: 44px; display: grid; gap: var(--space-1); width: 100%; padding: var(--space-3); text-align: left; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.goal-template-card:hover, .goal-template-card:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.goal-template-card span { font-size: var(--text-sm); line-height: 1.4; }
.goal-template-card small { color: var(--muted); font-size: var(--text-xs); }
.custom-goal-action { width: 100%; }
.selected-template-note { min-height: 0; padding: var(--space-3); color: var(--positive); background: var(--positive-soft); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; }
[hidden] { display: none !important; }
.compact-dialog { max-width: 420px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dialog-heading > div { display: grid; gap: var(--space-1); }
.icon-button { width: 44px; min-height: 44px; padding: 0 !important; font-size: 1.5rem !important; line-height: 1; }
.match-review-card { display: grid; align-content: start; }
.match-review-card > p { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.match-review-card > button { width: 100%; }
.match-review-dialog { width: min(calc(100% - 2rem), 780px); }
.match-review-dialog :focus-visible { outline-color: var(--text); }
.match-review-context { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.match-review-context .fixture-identity { grid-template-columns: auto minmax(0, 1fr); }
.match-review-context .fixture-identity > strong { font-size: var(--text-base); }
.match-review-dialog .review-attribution { margin-top: calc(var(--space-2) * -1); }
.match-review-context span, .match-review-intro { color: var(--muted); font-size: var(--text-sm); }
.match-review-score-grid { display: grid; grid-template-columns: 1.2fr 1.4fr .7fr .7fr; gap: var(--space-3); }
.review-scorers { border: 1px solid var(--border); border-radius: var(--radius-md); }
.review-scorers summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); cursor: pointer; font-size: var(--text-sm); font-weight: 800; }
.review-scorers summary .review-scorers-title { color: var(--text); font-size: var(--text-sm); font-weight: 800; }
.review-scorers summary .review-scorers-tally { color: var(--muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.review-scorers summary .review-scorers-tally[data-state="complete"] { color: #22733a; }
.review-scorers summary .review-scorers-tally[data-state="gap"] { color: #b0141f; }
.review-scorers summary .review-scorers-tally[data-state="over"] { color: #b0141f; }
.review-scorers-hint { margin: 0 var(--space-4) var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.review-scorer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0 var(--space-3) var(--space-3); background: var(--border); }
.review-scorer { min-width: 0; min-height: 52px; display: flex !important; grid-template-columns: none !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: var(--space-2) !important; padding: var(--space-2); background: var(--surface); }
.review-scorer > span { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.review-scorer .avatar { width: 34px; height: 34px; }
.avatar-own-goal { background: rgba(180, 35, 53, 0.14); color: var(--danger); border-color: rgba(180, 35, 53, 0.4); font-size: 0.7rem; letter-spacing: 0.02em; }
.review-scorer--own-goal { grid-column: 1 / -1; border-bottom: 2px solid var(--border); background: var(--surface-2) !important; }
.review-scorer select { width: 64px; flex: 0 0 64px; }
.field-error { min-height: 1.4em; color: var(--accent); font-size: var(--text-sm); font-weight: 700; }
/* Voice review section — post-match voice notes + AI merge */
.voice-review { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.voice-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.voice-review-intro { color: var(--text-muted); font-size: var(--font-size-sm); margin: 0; }
.voice-review-collapsible { display: grid; gap: var(--space-3); }
.voice-review-collapsible[open] > .voice-review-summary .voice-review-summary-chevron { transform: rotate(90deg); }
.voice-review-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-1); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); user-select: none; }
.voice-review-summary::-webkit-details-marker { display: none; }
.voice-review-summary-label { font-weight: 600; color: var(--text); font-size: var(--font-size-sm); }
.voice-review-summary-chevron { color: var(--text-muted); font-size: 1.25rem; line-height: 1; transition: transform 120ms ease-out; display: inline-block; }
.voice-review-collapsible-body { display: grid; gap: var(--space-3); }
.voice-notes-list { display: grid; gap: var(--space-2); }
.voice-note-card { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surface-1); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.voice-note-card-header { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-muted); }
.voice-note-card-author { font-weight: 600; color: var(--text-primary); }
.voice-note-card-transcript { font-size: var(--font-size-sm); color: var(--text-primary); line-height: 1.4; }
.voice-note-card-actions { display: flex; justify-content: flex-end; }
.voice-note-delete { background: none; border: none; color: var(--text-muted); font-size: var(--font-size-sm); cursor: pointer; padding: var(--space-1) var(--space-2); }
.voice-note-delete:hover { color: var(--danger); }
.voice-recorder { display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-3); background: var(--surface-1); border-radius: var(--radius-sm); }
.voice-mic-button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--accent-primary); color: var(--on-accent); border: none; border-radius: 999px; font-weight: 600; font-size: var(--font-size-md); cursor: pointer; min-height: 48px; }
.voice-mic-button[aria-pressed="true"] { background: var(--danger); animation: voice-pulse 1.4s ease-in-out infinite; }
.voice-mic-button:disabled { opacity: 0.5; cursor: not-allowed; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); } 50% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
.voice-live-transcript { min-height: 1.5em; font-size: var(--font-size-sm); color: var(--text-muted); font-style: italic; text-align: center; margin: 0; }
.voice-live-transcript:not(:empty) { color: var(--text-primary); font-style: normal; }
.voice-merge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.voice-merge-hint { color: var(--text-muted); font-size: var(--font-size-sm); }
.voice-merged-output { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--surface-1); border-radius: var(--radius-sm); }
.voice-merged-output label { display: grid; gap: var(--space-1); font-weight: 600; }
.voice-merged-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.weather-label-row { display: inline-flex; align-items: center; gap: 0.4em; }
.weather-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--brand-orange); flex-shrink: 0; }
.weather-glyph svg { width: 22px; height: 22px; }
.weather-glyph.is-empty { color: var(--text-muted); opacity: 0.5; }
.voice-merged-pill { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; background: rgba(245, 165, 36, 0.12); color: var(--brand-orange); border: 1px solid rgba(245, 165, 36, 0.35); }
.voice-merged-pill.voice-merged-pill--empty { background: rgba(107, 114, 128, 0.14); color: var(--text-muted); border-color: rgba(107, 114, 128, 0.35); }
.voice-merged-output textarea { width: 100%; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--font-size-sm); resize: vertical; min-height: 6em; }
.voice-merged-hint { color: var(--text-muted); font-size: var(--font-size-sm); margin: 0; }
.voice-char-count { display: block; text-align: right; font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.plan-scout-voice-body { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: var(--font-size-sm); line-height: 1.5; margin: var(--space-2) 0 0; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.plan-scout-voice-body.is-empty { color: var(--text-muted); font-style: italic; border-left-color: var(--border); }
.plan-scout-voice-meta { font-size: var(--font-size-xs); margin: var(--space-2) 0 0; }
.develop-training-focus-body { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: var(--font-size-sm); line-height: 1.5; margin: var(--space-2) 0 0; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.develop-training-focus-meta { font-size: var(--font-size-xs); margin: var(--space-2) 0 0; }
.develop-training-focus-card { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.season-development-card { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }

.collaborative-review { min-width: 0; display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.collaborative-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.collaborative-review-heading > div { display: grid; gap: var(--space-1); }
.collaborative-review-heading p { color: var(--muted); font-size: var(--text-xs); }
.collaborative-review-themes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.collaborative-review-themes span { padding: var(--space-1) var(--space-2); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.observation-groups { min-width: 0; display: grid; gap: var(--space-3); }
.observation-group { min-width: 0; display: grid; gap: var(--space-2); }
.observation-group > h4 { font-size: var(--text-sm); }
.observation-card { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.observation-card p { overflow-wrap: anywhere; white-space: pre-wrap; }
.observation-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.observation-correction { padding-top: var(--space-2); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); }
.collaborative-review-draft { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border-left: 3px solid var(--action); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.collaborative-review-draft p { overflow-wrap: anywhere; white-space: pre-wrap; }
.review-suggestions { display: grid; gap: var(--space-3); }
.review-suggestion-card { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.review-suggestion-card textarea { min-height: 72px; }
.review-suggestion-meta { color: var(--muted); font-size: var(--text-xs); }
.review-suggestion-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.review-suggestion-actions button { min-height: 44px; }
.match-review-actions { grid-template-columns: 1fr 1fr; }
.player-picker { min-width: 150px; }
.player-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.position-fields { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.position-fields legend { padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.drill-card a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }

.coach-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.coach-summary span, .coach-summary p { font-size: var(--text-sm); }
.coach-summary .primary-action { flex: 0 0 auto; }
.coaches-sections { display: grid; gap: var(--space-3); }
.coaching-sections { display: grid; gap: var(--space-3); }
#coaching-admin-sections { display: grid; gap: var(--space-3); }
.coaching-development-disclosure { border-color: color-mix(in srgb, var(--action) 34%, var(--border)); }
.coaching-development-disclosure > summary { min-height: 84px; }
.coaching-development-disclosure > summary strong { font-size: var(--text-xl); }
.coaching-development-body { display: grid; gap: var(--space-4); }
.kit-management-heading { align-items: flex-start; gap: var(--space-4); }
.kit-management-heading p,
.kit-privacy-note,
.kit-read-only,
.kit-disabled-state p,
.kit-rotation-heading p { color: var(--muted); font-size: var(--text-sm); }
.kit-management-heading p { margin-top: var(--space-1); }
.kit-management-heading button { flex: 0 0 auto; }
.kit-privacy-note {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.kit-read-only { margin-bottom: var(--space-4); }
.kit-disabled-state { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-6) 0 var(--space-3); }
.kit-assignment-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.kit-assignment-summary > div { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-sm); }
.kit-assignment-summary span { color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kit-checklist { display: grid; gap: var(--space-1); margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kit-checklist legend { padding-inline: var(--space-2); font-size: var(--text-sm); font-weight: 800; }
.kit-checklist label { min-height: 44px; display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.kit-checklist input { width: 20px; min-height: 20px; flex: 0 0 20px; accent-color: var(--action); }
.kit-checklist label:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.kit-rotation-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.kit-rotation-list { display: grid; list-style-position: inside; }
.kit-rotation-list li { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); }
.kit-rotation-number { width: 1.5rem; flex: 0 0 1.5rem; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.kit-rotation-family { flex: 1; }
.kit-rotation-list li strong { color: var(--positive); font-size: var(--text-xs); }
.kit-rotation-list li[aria-current="true"] { background: var(--surface-2); }
.coaches-disclosure { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.coaches-disclosure > summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; }
.coaches-disclosure > summary::-webkit-details-marker { display: none; }
.coaches-disclosure > summary > span { min-width: 0; display: grid; gap: 2px; }
.coaches-disclosure > summary strong { font-size: var(--text-base); display: block; }
.coaches-disclosure > summary small { color: var(--muted); font-size: var(--text-xs); display: block; }
.manage-disclosure > summary { gap: var(--space-3); }
.manage-summary-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); flex: 0 0 auto; }
.manage-summary-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.manage-disclosure > summary > span:nth-of-type(2) { flex: 1 1 auto; }
.coaches-disclosure > summary::after { content: "+"; color: var(--brand-orange); font-size: var(--text-xl); }
.coaches-disclosure[open] > summary::after { content: "−"; }
.coaches-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.coaches-summary-count { display: flex; align-items: baseline; gap: var(--space-1); margin-left: auto; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.coaches-summary-count strong { color: var(--text); font-size: var(--text-lg) !important; font-variant-numeric: tabular-nums; }
.coaches-disclosure-body { padding: var(--space-4); }
.coaches-disclosure-body > .panel { margin-top: 0; border: 0; padding: 0; box-shadow: none; }
.match-history-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.match-history-empty { color: var(--muted); font-size: var(--text-sm); padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-md); text-align: center; }
.match-history-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-3); row-gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.match-history-outcome { grid-row: 1; grid-column: 1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.match-history-outcome[data-outcome="win"] { background: rgba(52, 168, 83, 0.12); color: #22733a; }
.match-history-outcome[data-outcome="loss"] { background: rgba(217, 25, 46, 0.1); color: #b0141f; }
.match-history-outcome[data-outcome="draw"] { background: rgba(107, 107, 112, 0.12); color: var(--muted); }
.match-history-outcome[data-outcome="unscored"] { background: rgba(107, 107, 112, 0.08); color: var(--muted); }
.match-history-main { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.match-history-teams { font-weight: 700; color: var(--text); font-size: var(--text-md); line-height: 1.25; }
.match-history-teams .score { font-variant-numeric: tabular-nums; margin: 0 0.35rem; }
.match-history-meta { color: var(--muted); font-size: var(--text-sm); line-height: 1.3; }
.match-history-review-status { grid-row: 1; grid-column: 3; font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.match-history-review-status[data-state="reviewed"] { color: #22733a; }
.match-history-review-status[data-state="needed"] { color: #b0141f; }
.match-history-actions { grid-row: 2; grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.match-history-actions button { background: none; border: 0; padding: 0.35rem 0; color: var(--primary); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.match-history-actions button:hover { text-decoration: underline; }
.match-history-actions button[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.match-history-scorers { font-size: var(--text-sm); color: var(--text); line-height: 1.35; margin-top: 0.1rem; }
.match-history-scorers strong { font-weight: 700; }
.match-history-scorers[data-state="complete"] strong { color: #22733a; }
.match-history-scorers[data-state="gap"] strong { color: #b0141f; }
.post-match-scorers { font-size: var(--text-sm); color: var(--text); line-height: 1.4; margin-top: var(--space-2); }
.post-match-scorers strong { font-weight: 700; }
.post-match-scorers[data-state="complete"] strong { color: #22733a; }
.post-match-scorers[data-state="gap"] strong { color: #b0141f; }
/* On the dark Match Centre card the default body text is invisible; scope
   lighter text and brighter status colours so scorers remain legible. */
.now-mc-latest .post-match-scorers { color: #f6f2ec; margin-top: 0.15rem; margin-bottom: 0.35rem; }
.now-mc-latest .post-match-scorers[data-state="complete"] strong { color: #6adf8c; }
.now-mc-latest .post-match-scorers[data-state="gap"] strong { color: #ff8a95; }
/* Score-source label — tells the coach whether a scoreline is DDSL-official,
   coach-recorded (awaiting DDSL), or in conflict between the two. The row
   wrapper controls spacing; the pill styles the label itself. */
.score-source-row { margin: 0.15rem 0 0; line-height: 1.35; }
.score-source-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.score-source-label[data-source-state="confirmed"] { background: #e5f3ea; color: #1c5c2e; border-color: #c9e6d2; }
.score-source-label[data-source-state="official"]  { background: #eef1f6; color: #2a3247; border-color: #d5dbe6; }
.score-source-label[data-source-state="coach"]     { background: #fff2df; color: #8a4a10; border-color: #f6d9a8; }
.score-source-label[data-source-state="conflict"]  { background: #fde3e6; color: #8f0d18; border-color: #f5b4bb; }
.score-source-label[data-source-state="disputed"]  { background: #fff2df; color: #8a4a10; border-color: #f6d9a8; }
/* Dark Match Centre card overrides: lift contrast against the near-black bg. */
.now-mc-latest .score-source-label[data-source-state="confirmed"] { background: rgba(106, 223, 140, 0.16); color: #a7ecb9; border-color: rgba(106, 223, 140, 0.4); }
.now-mc-latest .score-source-label[data-source-state="official"]  { background: rgba(255, 255, 255, 0.10); color: #e6e2dc; border-color: rgba(255, 255, 255, 0.22); }
.now-mc-latest .score-source-label[data-source-state="coach"]     { background: rgba(255, 176, 71, 0.16); color: #ffcf87; border-color: rgba(255, 176, 71, 0.4); }
.now-mc-latest .score-source-label[data-source-state="conflict"]  { background: rgba(255, 138, 149, 0.18); color: #ff8a95; border-color: rgba(255, 138, 149, 0.45); }
.now-mc-latest .score-source-label[data-source-state="disputed"]  { background: rgba(255, 176, 71, 0.16); color: #ffcf87; border-color: rgba(255, 176, 71, 0.4); }

/* Reconcile CTA — opens the reconcile dialog when DDSL and coach disagree.
   Two variants: 'inline' sits next to the source pill on Manage rows / review
   dialog / dashboard card; 'chip' is a compact pill for the dark Match Centre
   card on Now. */
.score-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.reconcile-cta {
  border: 1px solid #8f0d18;
  background: transparent;
  color: #8f0d18;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
}
.reconcile-cta:hover,
.reconcile-cta:focus-visible {
  background: #8f0d18;
  color: #fff;
  outline: none;
}
.reconcile-cta[data-variant="chip"] {
  padding: 2px 8px;
}
.now-mc-latest .reconcile-cta {
  border-color: rgba(255, 138, 149, 0.6);
  color: #ff8a95;
}
.now-mc-latest .reconcile-cta:hover,
.now-mc-latest .reconcile-cta:focus-visible {
  background: rgba(255, 138, 149, 0.22);
  color: #ffd0d6;
}

/* Reconcile dialog — side-by-side comparison of DDSL official vs coach
   recorded scoreline. Radio-selects the winning value; primary action writes
   the choice to the review row (accepting DDSL updates the scoreline; keeping
   coach flags the review as ddsl_disputed_at so we stop nagging). */
.score-reconcile-dialog { max-width: 460px; }
.score-reconcile-intro { color: var(--muted); font-size: var(--text-sm); margin: 0.4rem 0 0.75rem; line-height: 1.45; }
.score-reconcile-compare { display: grid; gap: 0.6rem; margin-bottom: 0.5rem; }
.score-reconcile-option { display: block; cursor: pointer; }
.score-reconcile-option input { position: absolute; opacity: 0; pointer-events: none; }
.score-reconcile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.25rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.score-reconcile-option input:checked + .score-reconcile-card {
  border-color: var(--brand);
  background: rgba(255, 168, 66, 0.08);
}
.score-reconcile-option input:focus-visible + .score-reconcile-card {
  box-shadow: 0 0 0 3px rgba(255, 168, 66, 0.35);
}
.score-reconcile-tag {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.score-reconcile-tag[data-tag="official"] { background: #eef1f6; color: #2a3247; border-color: #d5dbe6; }
.score-reconcile-tag[data-tag="coach"]    { background: #fff2df; color: #8a4a10; border-color: #f6d9a8; }
.score-reconcile-score {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-reconcile-help {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

/* Unattributed-goals warning — fires when DDSL's official team total exceeds
   the goals the coach has attributed to individual players. Two variants:
   'card' (Manage, review dialog, dashboard) sits on light card backgrounds;
   'chip' (Now Latest Result) is a compact pill on the dark match centre card. */
.unattributed-goals-warning[data-variant="card"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fde3e6;
  border: 1px solid #f5b4bb;
  color: #8f0d18;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.unattributed-goals-warning[data-variant="card"] strong { font-weight: 700; }
.unattributed-goals-warning[data-variant="card"] .unattributed-goals-cta {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 6px;
  background: #8f0d18;
  color: #fff;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.unattributed-goals-warning[data-variant="card"] .unattributed-goals-cta:hover,
.unattributed-goals-warning[data-variant="card"] .unattributed-goals-cta:focus-visible {
  background: #b0141f;
  outline: none;
}
.unattributed-goals-warning[data-variant="chip"] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fde3e6;
  border: 1px solid #f5b4bb;
  color: #8f0d18;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}
/* Dark Match Centre card override for the chip. */
.now-mc-latest .unattributed-goals-warning[data-variant="chip"] {
  background: rgba(255, 138, 149, 0.18);
  color: #ff8a95;
  border-color: rgba(255, 138, 149, 0.45);
}
.section-status, .dialog-status { min-height: 1.45em; color: var(--muted); font-size: var(--text-sm); }
.section-status { margin: calc(var(--space-3) * -1) 0 var(--space-3); }
.section-status.error, .dialog-status.error { color: var(--accent); }
.section-status.success, .dialog-status.success { color: var(--positive); }
.coaches-panel { padding-bottom: var(--space-2); }
.parent-portal-panel {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(320px, 1.4fr) auto;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}
.parent-portal-panel p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.parent-poll-flow { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; counter-reset: parent-step; }
.parent-poll-flow li { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); counter-increment: parent-step; }
.parent-poll-flow li::before { content: counter(parent-step); color: var(--text); font-weight: 800; }
.parent-poll-flow li:not(:last-child)::after { content: "›"; color: var(--border); font-size: var(--text-lg); }
.parent-portal-actions { display: grid; gap: var(--space-2); }
.coach-list { display: grid; }
.coach-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(130px, .7fr) minmax(90px, .5fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.coach-identity { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.coach-identity .avatar { width: 42px; height: 42px; }
.coach-identity > div { min-width: 0; display: grid; gap: 2px; }
.coach-identity strong, .coach-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-access-receipt {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.coach-access-receipt strong { color: var(--text); font-size: inherit; }
.current-user-label { color: var(--accent); font-size: var(--text-xs); font-weight: 700; }
.coach-role { color: var(--muted); font-size: var(--text-sm); }
.coach-state { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--positive); font-size: var(--text-sm); font-weight: 700; }
.coach-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.coach-statuses { display: grid; justify-items: start; gap: var(--space-1); }
.coach-ack-state { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.coach-ack-state.acknowledged { color: var(--positive); }
.coach-ack-state.pending { color: var(--warning); }
.coach-access-email-state { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.coach-access-email-state.sent { color: var(--positive); }
.coach-access-email-state.failed, .coach-access-email-state.pending { color: var(--warning); }
.coach-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.coach-actions button, .secondary-action {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-sm);
}
.coach-actions .remove-action { color: var(--accent); }
.coach-actions button:disabled, #add-coach:disabled, .dialog-actions button:disabled { cursor: not-allowed; opacity: .52; }
.coach-self-note { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-xs); }
.coach-empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-8) 0; border-top: 1px solid var(--border); }
.coach-empty p { max-width: 44ch; font-size: var(--text-sm); }
.coach-skeleton { display: grid; grid-template-columns: 42px 1fr 100px; align-items: center; gap: var(--space-3); min-height: 76px; border-top: 1px solid var(--border); }
.coach-skeleton > div { display: grid; gap: var(--space-2); }
.loading-line { display: block; width: 100%; height: 12px; border-radius: var(--radius-sm); background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite alternate; }
.loading-line.short { width: 62%; }
.loading-avatar { width: 42px; height: 42px; border-radius: 50%; }
@keyframes pulse { to { opacity: .45; } }
.club-contacts-panel { overflow: hidden; }
.club-contacts-heading { align-items: flex-start; gap: var(--space-4); }
.club-contacts-heading p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.club-contacts-privacy,
.club-contact-dialog-privacy {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.club-contacts-read-only { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.club-contacts-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .34fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.club-contacts-tools label { min-width: 0; font-size: var(--text-sm); font-weight: 700; }
.club-contacts-tools input,
.club-contacts-tools select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.club-contacts-list { min-width: 0; display: grid; }
.club-contact-group-title {
  padding: var(--space-5) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.club-contact-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.club-contact-identity { min-width: 0; }
.club-contact-identity h3 { font-size: var(--text-base); overflow-wrap: anywhere; }
.club-contact-club { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.club-contact-role { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.club-contact-notes { grid-column: 1 / -1; max-width: 70ch; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.club-contact-actions { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.club-contact-actions a,
.club-contact-actions button,
.club-contacts-empty button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.club-contact-actions .whatsapp-action { border-color: var(--positive); color: var(--positive); }
.club-contact-actions .remove-action { color: var(--accent); }
.club-contact-actions button:disabled,
#add-club-contact:disabled { cursor: not-allowed; opacity: .52; }
.club-contacts-empty {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.club-contacts-empty h3 { color: var(--text); font-size: var(--text-base); }
.club-contacts-empty p { max-width: 48ch; font-size: var(--text-sm); }
.contact-skeleton { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.club-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
#club-contact-form textarea { min-width: 0; max-width: 100%; resize: vertical; }
#club-contact-notes-counter { justify-self: end; color: var(--muted); font-size: var(--text-xs); }
.app-feedback-panel { overflow: hidden; }
.feedback-heading p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.feedback-privacy-note {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
}
.app-feedback-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, .7fr);
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.app-feedback-form > label { min-width: 0; }
.app-feedback-form > label:has(textarea) { grid-column: 1 / -1; }
.feedback-kind-fieldset { min-width: 0; border: 0; }
.feedback-kind-fieldset legend, .app-feedback-form > label { font-size: var(--text-sm); font-weight: 700; }
.feedback-kind-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.feedback-kind-options label {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.feedback-kind-options input { position: absolute; opacity: 0; }
.feedback-kind-options label:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.feedback-kind-options label:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.app-feedback-form select, .app-feedback-form textarea, .feedback-status-control select {
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.app-feedback-form select, .feedback-status-control select { padding: 0 var(--space-3); }
.app-feedback-form textarea { min-width: 0; max-width: 100%; padding: var(--space-3); resize: vertical; line-height: 1.5; }
.feedback-form-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-3); margin-top: calc(var(--space-3) * -1); color: var(--muted); font-size: var(--text-xs); }
.feedback-submit { justify-self: start; min-width: 160px; }
.feedback-form-status { align-self: center; margin: 0; }
.feedback-list-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); }
.feedback-list-heading h3 { font-size: var(--text-base); }
.app-feedback-list { display: grid; margin-top: var(--space-2); }
.feedback-item { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.feedback-item p { max-width: 72ch; overflow-wrap: anywhere; }
.feedback-item-meta, .feedback-item-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.feedback-item-meta span:not(:last-child)::after { content: "·"; margin-left: var(--space-3); color: var(--border); }
.feedback-kind, .feedback-status { color: var(--text); font-weight: 800; }
.feedback-kind[data-kind="problem"] { color: var(--accent); }
.feedback-kind[data-kind="improvement"], .feedback-status[data-status="planned"] { color: var(--warning); }
.feedback-status[data-status="done"] { color: var(--positive); }
.feedback-item-footer { justify-content: space-between; }
.feedback-status-control { min-width: 132px; }
.feedback-status-control select { margin-top: 0; font-size: var(--text-sm); font-weight: 700; }
.feedback-empty { display: grid; gap: var(--space-2); padding: var(--space-8) 0; border-top: 1px solid var(--border); color: var(--muted); }
.feedback-empty h4 { color: var(--text); font-size: var(--text-base); }
.feedback-skeleton { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.optional-label { color: var(--muted); font-weight: 400; }
.coach-responsibility-invitation {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.coach-responsibility-invitation p,
.coach-responsibility-invitation li { color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.coach-responsibility-invitation ul,
.responsibility-list { display: grid; gap: var(--space-2); padding-left: var(--space-5); }
.responsibility-resources,
[data-coach-responsibility-resources] {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.responsibility-resources a,
[data-coach-responsibility-resources] a {
  color: var(--accent-dark);
  font-weight: 700;
  text-underline-offset: 3px;
}
.responsibility-dialog { width: min(calc(100% - 2rem), 600px); }
.responsibility-dialog form { gap: var(--space-5); }
.responsibility-dialog > form > p { font-size: var(--text-sm); }
.responsibility-list li { color: var(--text); font-size: var(--text-sm); line-height: 1.5; }
.responsibility-check {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: start;
  gap: var(--space-3) !important;
  min-height: 48px;
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.responsibility-check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--action); }
.responsibility-dialog .primary-action { width: 100%; min-height: 48px; }
.responsibility-dialog .primary-action:disabled { cursor: not-allowed; opacity: .52; }
.player-photo-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.player-photo-field[hidden] { display: none; }
.player-photo-preview .large-avatar { width: 88px; height: 88px; margin: 0; }
.player-photo-copy { min-width: 0; display: grid; gap: var(--space-2); }
.player-photo-copy small { color: var(--muted); line-height: 1.4; }
.player-photo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.player-photo-actions button { min-height: 44px; padding-inline: var(--space-3); }
.player-photo-actions #remove-player-photo,
.player-photo-actions #remove-coach-photo { color: var(--muted); }
.photo-crop-dialog { width: min(calc(100% - 2rem), 480px); }
.photo-crop-help { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.photo-crop-stage {
  width: min(100%, 360px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgb(0 0 0 / .16);
}
.photo-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.photo-crop-stage canvas:active { cursor: grabbing; }
.photo-zoom-control { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3) !important; }
.photo-zoom-control input { min-height: 44px; padding: 0; accent-color: var(--action); }
.photo-reset-action { width: 100%; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.dialog-actions .primary-action, .dialog-actions .secondary-action { width: 100%; }
.player-dialog-actions { grid-template-columns: repeat(3, 1fr); }
.player-dialog-actions .remove-action { color: var(--accent); }
.parent-links-dialog { width: min(calc(100% - 2rem), 760px); padding: var(--space-6); }

/* Season development check-ins (Technical/Tactical, Physical, Mental, Social/Personal) */
.checkin-dialog[open] { padding: var(--space-6); display: grid; gap: var(--space-4); }
.checkin-checkpoint-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.checkin-checkpoint-tab { min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.checkin-checkpoint-tab[aria-pressed="true"] { background: var(--action); color: var(--action-text); border-color: var(--action); }
.checkin-player-list { display: grid; gap: var(--space-2); max-height: 55vh; overflow-y: auto; }
.checkin-player-row { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.checkin-player-row.expanded { background: var(--surface); }
.checkin-player-toggle { width: 100%; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-3); background: none; border: none; text-align: left; cursor: pointer; color: var(--text); }
.checkin-player-name { flex: 1; font-weight: 700; }
.checkin-player-status { font-size: var(--text-xs); color: var(--muted); }
.checkin-player-status.done { color: var(--positive); font-weight: 700; }
.checkin-player-chevron { color: var(--muted); font-size: 1.2rem; line-height: 1; flex-shrink: 0; transition: transform 120ms ease-out; display: inline-block; }
.checkin-player-row.expanded .checkin-player-chevron { transform: rotate(90deg); }
.checkin-expanded { padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-3); }
.checkin-corner-group h5 { margin: 0 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.checkin-theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); }
.checkin-rating-chips { display: flex; gap: var(--space-1); }
.checkin-rating-chip { min-width: 36px; min-height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; }
.checkin-rating-chip.selected { background: var(--action); color: var(--action-text); border-color: var(--action); }
.checkin-expanded-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.checkin-expanded-hint { margin: 0; font-size: var(--text-xs); color: var(--muted); }

.corner-snapshot-range { font-size: var(--text-sm); font-weight: 700; color: var(--muted); }
.corner-snapshot-grid { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.corner-snapshot-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: var(--space-3); }
.corner-snapshot-label { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.corner-delta { color: var(--muted); font-weight: 700; font-size: var(--text-xs); }
.corner-delta.positive { color: var(--positive); font-weight: 700; font-size: var(--text-xs); }
.corner-delta.negative { color: var(--danger); font-weight: 700; font-size: var(--text-xs); }
.corner-bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.corner-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; }
.corner-bar-fill.corner-bar-start { background: var(--border); z-index: 1; }
.corner-bar-fill.corner-bar-latest { background: var(--positive); z-index: 2; }
.corner-snapshot-values { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.corner-snapshot-highlight { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 560px) {
  .checkin-rating-chip { min-width: 32px; min-height: 32px; }
  .corner-snapshot-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Player development: rating scale legend, learn-more, status grid, previous-rating hint, report */
.rating-scale-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.rating-scale-legend span { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); flex: 1 1 100px; }
.rating-scale-legend strong { color: var(--text); font-size: var(--text-base); }
.rating-scale-legend small { color: var(--muted); }
.checkin-learn-more { margin-top: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding: var(--space-1) var(--space-3); }
.checkin-learn-more summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.checkin-learn-more-body { padding: 0 0 var(--space-3); display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.checkin-status-summary { margin-top: var(--space-3); }
.checkin-status-summary h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.checkin-status-grid { display: grid; gap: var(--space-1); max-height: 40vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); }
.checkin-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; }
.checkin-status-header { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.checkin-status-name { flex: 1; font-size: var(--text-sm); font-weight: 600; }
.checkin-status-cells { display: flex; gap: var(--space-2); }
.checkin-status-header .checkin-status-cells span { width: 44px; text-align: center; }
.checkin-status-pill { width: 44px; min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 700; cursor: pointer; }
.checkin-status-pill.done { background: var(--positive); color: var(--action-text); border-color: var(--positive); }
.checkin-status-pill.pending { color: var(--muted); }
.checkin-status-pill:disabled { opacity: .5; cursor: not-allowed; }
.checkin-previous-rating { font-size: var(--text-xs); color: var(--muted); font-weight: 600; margin-left: var(--space-2); }
.checkin-previous-rating.muted { opacity: .7; }
@media (max-width: 560px) {
  .rating-scale-legend span { flex: 1 1 45%; }
}
.parent-links-dialog > * + * { margin-top: var(--space-4); }
.dialog-context { color: var(--muted); }
.poll-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.poll-toolbar > div { display: grid; gap: var(--space-1); }
.poll-toolbar small { color: var(--muted); }
.parent-detail-panel { border: 1px solid var(--border); border-radius: var(--radius-md); }
.parent-detail-panel summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--space-4); cursor: pointer; font-weight: 700; }
.parent-links-dialog #parent-details-form { padding: 0 var(--space-4) var(--space-4); }
.parent-links-dialog textarea { resize: vertical; }
.parent-links-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.parent-links-heading p { max-width: 54ch; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.parent-links-list { display: grid; border-top: 1px solid var(--border); }
.fixture-link-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.parent-link-player, .parent-link-state { display: grid; gap: var(--space-1); min-width: 0; }
.parent-link-state small, .parent-link-state p, .link-security-note { color: var(--muted); font-size: var(--text-xs); }
.parent-link-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); }
.parent-link-actions button { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 700; }
.parent-link-actions .primary-action { border-color: var(--action); background: var(--action); color: var(--action-text); }
.parent-link-actions .danger { color: var(--accent); }
.parent-link-actions button:disabled { cursor: not-allowed; opacity: .5; }
.link-security-note { grid-column: 1 / -1; }
.parent-link-settings { border-top: 1px solid var(--border); }
.parent-link-settings summary { min-height: 44px; display: flex; align-items: center; width: fit-content; cursor: pointer; color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.parent-link-settings-body { display: grid; gap: var(--space-3); padding: 0 0 var(--space-2); }
.parent-link-settings-body p { max-width: 58ch; color: var(--muted); font-size: var(--text-xs); }
.link-settings-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.link-settings-actions button { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 700; }
.link-settings-actions .danger { color: var(--accent); }
.fixture-polls-disclosure { overflow: hidden; margin-bottom: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.fixture-polls-disclosure > summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; }
.fixture-polls-disclosure > summary::-webkit-details-marker { display: none; }
.fixture-polls-disclosure > summary > span:first-child { min-width: 0; display: grid; gap: 2px; }
.fixture-polls-disclosure > summary strong { font-size: var(--text-base); }
.fixture-polls-disclosure > summary small { color: var(--muted); font-size: var(--text-xs); }
.fixture-polls-disclosure > summary::after { content: "+"; color: var(--muted); font-size: var(--text-xl); }
.fixture-polls-disclosure[open] > summary::after { content: "−"; }
.fixture-polls-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.fixture-polls-count { margin-left: auto; color: var(--muted); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.fixture-polls-body { padding: var(--space-4); }
.fixture-polls-helper { max-width: 68ch; margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.fixture-availability-disclosure .availability-summary { margin-bottom: var(--space-4); }
.fixture-availability-disclosure .panel { margin: 0; border: 0; padding: 0; box-shadow: none; }
.fixture-options-disclosure .fixture-action-buttons { max-width: 720px; }
.parent-poll-list { display: grid; gap: var(--space-4); }
.parent-poll-card { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(280px, 1.2fr); gap: var(--space-4) var(--space-6); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.parent-poll-main { display: grid; align-content: start; gap: var(--space-2); }
.parent-poll-main p, .missing-responders { color: var(--muted); font-size: var(--text-sm); }
.parent-poll-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.source-badge, .poll-status { width: max-content; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 800; }
.poll-status.provisional { background: var(--warning-soft); color: var(--warning); }
.poll-status.complete { background: var(--positive-soft); color: var(--positive); }
.poll-status.closed { color: var(--muted); }
.parent-poll-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--border); }
.parent-poll-counts div { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surface); }
.parent-poll-counts dt { color: var(--muted); font-size: var(--text-xs); }
.parent-poll-counts dd { font-size: var(--text-lg); font-weight: 800; }
.missing-responders { grid-column: 1 / -1; }
.missing-responders strong { color: var(--text); }
.parent-poll-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.parent-poll-actions button { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: 700; }
.parent-poll-actions button.primary-action { border-color: var(--action); background: var(--action); color: var(--action-text); }
.parent-poll-actions button:disabled { cursor: not-allowed; opacity: .52; }

@media (max-width: 1020px) {
  .selection-layout { grid-template-columns: 220px 1fr; }
  .selection-checks { grid-column: 1 / -1; }
  .selection-checks ul { grid-template-columns: repeat(3, 1fr); }
  .match-plan-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .parent-portal-panel { grid-template-columns: 1fr; }
  .parent-portal-actions { grid-template-columns: 1fr 1fr; }
  .parent-poll-card { grid-template-columns: 1fr; }
  .missing-responders, .parent-poll-actions { grid-column: 1; }
}

@media (max-width: 760px) {
  /* The document itself must scroll on mobile. Giving `body` overflow:auto makes it
     the scrolling box, and iOS Safari then anchors position:fixed children to the
     body's content origin rather than the viewport, so .mobile-nav drifts up the page
     as you scroll. Desktop Chrome does not reproduce it. Keep this `visible`. */
  body { overflow: visible; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  /* The full-screen tactics board sets overflow:hidden on body to lock background
     scroll. On iOS that is the very thing that detaches .mobile-nav from the
     viewport, so it must never apply at mobile widths. The board is position:fixed
     over the whole viewport anyway, and the nav is hidden below, so nothing leaks. */
  body.tactics-board-fullscreen-open { overflow: visible; }
  body.tactics-board-fullscreen-open .mobile-nav { display: none; }
  .prototype-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    min-height: 60px;
    padding: var(--space-2) var(--space-3);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
  }
  .prototype-brand { gap: var(--space-2) !important; min-width: 0; }
  .prototype-brand > div { min-width: 0; }
  .prototype-brand strong, .prototype-brand span { display: none; }
  .parent-portal-actions { grid-template-columns: 1fr; }
  .mobile-club-mark { display: block; width: 32px; height: 35px; object-fit: contain; flex: 0 0 auto; }
  .mobile-sponsor-mark {
    display: block;
    width: 54px;
    height: auto;
    aspect-ratio: 250 / 104;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm);
  }
  .mobile-sponsor-button { display: block; }
  .prototype-actions { gap: var(--space-2); }
  #screen-count { display: none; }
  .connection-pill { display: none; }
  .prototype-actions button { min-height: 44px; padding-inline: var(--space-3); }
  .microphone-onboarding { align-items: stretch; flex-direction: column; gap: var(--space-3); }
  .microphone-onboarding button { width: 100%; }
  .settings-trigger span, .safeguarding-trigger span, .coach-assist-trigger span { display: none; }
  .settings-trigger, .safeguarding-trigger, .coach-assist-trigger { width: 44px; justify-content: center; padding: 0 !important; }
  .settings-trigger svg, .safeguarding-trigger svg, .coach-assist-trigger svg { width: 21px; height: 21px; }
  .app-shell { display: block; height: auto; }
  .sidebar { display: none; }
  main { overflow: visible; padding: var(--space-5) var(--space-3); }
  .page-header { align-items: flex-start; margin-bottom: var(--space-5); }
  .page-header .primary-action { width: 100%; }
  .page-header { flex-direction: column; }
  .page-header-actions { width: 100%; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .fixture-actions { width: 100%; min-width: 0; }
  .fixture-picker select { min-width: 0; width: 100%; }
  .fixture-selection { gap: var(--space-3); }
  .selected-fixture-card { padding: var(--space-4); }
  .selected-fixture-card h2 { font-size: var(--text-lg); }
  .fixture-action-buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .fixture-action-buttons button { width: 100%; }
  .fixture-action-buttons .primary-action { grid-column: 1 / -1; }
  .status-strip { grid-template-columns: 1fr; }
  .fixture-identity > strong { font-size: var(--text-base); }
  .dashboard-action-grid, .player-grid, .selection-layout, .session-detail-grid { grid-template-columns: 1fr; }
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .dashboard-section-heading p { text-align: left; }
  .dashboard-disclosure > summary { min-height: 64px; padding-inline: var(--space-4); }
  .dashboard-disclosure-body { padding: var(--space-4); }
  .match-plan-layout { grid-template-columns: 1fr; }
  .match-plan-side { grid-template-columns: 1fr 1fr; }
  .match-plan-side > :first-child { grid-column: 1 / -1; }
  .league-table-scroll { overflow-x: visible; }
  .league-table { min-width: 0; table-layout: fixed; }
  .league-table th, .league-table td { padding-inline: var(--space-2); }
  .league-table th:nth-child(2) { width: auto; }
  .league-table th:nth-child(4), .league-table td:nth-child(4),
  .league-table th:nth-child(5), .league-table td:nth-child(5),
  .league-table th:nth-child(6), .league-table td:nth-child(6) { display: none; }
  .league-table th:nth-child(1), .league-table td:nth-child(1) { width: 42px; }
  .league-table th:nth-child(3), .league-table td:nth-child(3),
  .league-table th:nth-child(7), .league-table td:nth-child(7) { width: 48px; }
  .league-table tbody th { padding-block: var(--space-2); white-space: normal; line-height: 1.25; }
  .league-heading { padding-inline: var(--space-4); }
  .league-source { align-items: flex-start; flex-direction: column; padding-inline: var(--space-4); }
  .match-review-score-grid { grid-template-columns: 1fr 1fr; }
  .development-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtered-player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wide-panel { grid-column: auto; }
  .identity-card { text-align: left; }
  .player-meta { justify-content: flex-start; }
  .large-avatar { width: 72px; height: 72px; margin: 0 0 var(--space-3); }
  .metric-row { gap: var(--space-1); }
  .availability-summary { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-1); }
  .availability-summary > div { display: grid; gap: 0; padding: var(--space-3); }
  .availability-row { grid-template-columns: 40px 1fr 112px; }
  .availability-row > span:nth-child(3) { display: none; }
  .pitch { min-height: 560px; padding: var(--space-5) var(--space-2); }
  .pitch-markings { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .pitch-slot { width: 92px; min-height: 80px; padding: var(--space-2) var(--space-2) var(--space-4); }
  .pitch-role-key { gap: var(--space-2); }
  .pitch-toolbar { align-items: flex-end; }
  .pitch-toolbar label { flex: 1 1 auto; }
  .pitch-toolbar select { min-width: 0; }
  .selection-checks { grid-column: auto; }
  .selection-checks ul { grid-template-columns: 1fr; }
  .available-players .player-chips { grid-template-columns: 1fr 1fr; }
  .next-training-recommendation { grid-template-columns: 1fr; }
  .recommendation-date { max-width: none; }
  .training-build-action { width: 100%; }
  .training-alternatives { align-items: stretch; flex-direction: column; }
  .training-alternative-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .training-alternative-actions button { width: 100%; }
  .review-completion-card { align-items: stretch; flex-direction: column; }
  .review-completion-card button { width: 100%; }
  .training-save-row { align-items: stretch; flex-direction: column; }
  .training-save-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .review-scorer-list { grid-template-columns: 1fr; }
  .training-save-actions button { width: 100%; }
  .mobile-nav {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: var(--nav);
    border-top: 1px solid #333;
    padding: var(--space-1);
    padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom));
  }
  .mobile-nav button {
    min-width: 0;
    min-height: 56px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    color: #aaa;
    background: transparent;
    border: 0;
    font-size: .68rem;
  }
  .mobile-nav button span { font-size: 1.05rem; line-height: 1; }
  .mobile-nav button.active { color: var(--brand-orange); }
  .mobile-nav button.active svg { stroke: var(--brand-orange); }
  .demo-message { left: var(--space-3); right: var(--space-3); bottom: calc(76px + env(safe-area-inset-bottom)); }
  .auth-screen { padding: var(--space-3); }
  .auth-card { padding: var(--space-5); }
  .auth-brand { grid-template-columns: 62px 1fr; gap: var(--space-4); }
  .auth-brand img { width: 62px; height: 67px; }
  .auth-divider span { white-space: normal; text-align: center; }
  .coach-summary { align-items: flex-start; }
  .coach-summary p { max-width: 22ch; text-align: right; }
  .coach-row { grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-4) 0; }
  .coach-role { grid-column: 1; padding-left: 54px; }
  .coach-statuses { grid-column: 2; grid-row: 1; }
  .coach-actions { grid-column: 1 / -1; justify-content: stretch; }
  .coach-actions button { flex: 1; }
  .coach-self-note { padding-left: 54px; }
  .player-header .page-header-actions { display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .player-header .player-picker { grid-column: 1 / -1; }
  .summary-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .summary-heading p { text-align: left; }
  .individual-player-heading { align-items: stretch; flex-direction: column; gap: var(--space-3); }
  .individual-player-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .individual-player-actions select { min-width: 0; width: 100%; }
}

@media (max-width: 430px) {
  .settings-dialog { inset: 0; width: 100vw; max-width: none; border-left: 0; }
  .coach-assist-dialog { width: 100%; max-height: 92dvh; border-inline: 0; }
  .coach-assist-heading { min-height: 68px; padding: var(--space-3) var(--space-4); }
  .coach-assist-content { padding-inline: var(--space-3); }
  .coach-assist-match-control { grid-template-columns: 1fr; }
  .coach-assist-primary-match-action { min-height: 58px; }
  .coach-assist-voice-stage { padding-block: var(--space-3); }
  .coach-assist-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-assist-substitution-actions { grid-template-columns: 1fr; }
  .coach-assist-substitution-pickers, .coach-assist-manual-substitution-actions { grid-template-columns: 1fr; }
  .coach-assist-composer { grid-template-columns: 1fr; }
  .coach-assist-composer button { width: 100%; }
  .coach-assist-observation-grid { grid-template-columns: 1fr; }
  .coach-assist-actions { display: grid; grid-template-columns: 1fr; }
  .coach-assist-actions button { width: 100%; }
  .collaborative-review-heading { display: grid; }
  .collaborative-review-heading button { width: 100%; }
  .settings-heading { min-height: 68px; padding: var(--space-3) var(--space-4); }
  .settings-content { padding: var(--space-3) var(--space-3) calc(var(--space-8) + env(safe-area-inset-bottom)); }
  .settings-card { min-height: 0; align-items: stretch; flex-direction: column; }
  .settings-actions, .settings-branding-actions { justify-content: stretch; }
  .settings-actions button, .settings-branding-actions button, .settings-single-action { flex: 1; width: 100%; }
  .settings-branding-actions { display: grid; grid-template-columns: 86px 1fr; }
  .settings-defaults { grid-template-columns: 1fr; }
  .settings-status { text-align: left; }
  .training-phase-cards { width: 100%; }
  .training-phase-summary { min-height: 76px; padding-inline: var(--space-4); }
  .training-phase-summary strong { font-size: var(--text-base); }
  .training-phase-summary small { font-size: var(--text-xs); }
  .training-phase-panel { padding: var(--space-4); }
  .training-idea-form { grid-template-columns: 1fr; }
  .training-idea-form > .hint { grid-column: 1; }
  .training-setup-summary { grid-template-columns: 1fr; }
  .training-idea-actions { align-items: stretch; flex-direction: column; }
  .training-idea-actions button { width: 100%; }
  .training-principle { margin-bottom: var(--space-4); }
  .training-advanced > summary { min-height: 64px; padding: var(--space-3) var(--space-4); }
  .training-advanced-body { padding: 0 var(--space-4) var(--space-4); }
  .training-advanced .training-step-heading { grid-template-columns: 1fr; }
  .training-advanced .training-step-heading > .time-total { grid-column: 1; }
  .delivery-run-sheet button { min-height: 88px; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: var(--space-2); padding-inline: var(--space-2); }
  .delivery-place { grid-column: 2 / -1; justify-self: start; }
  .delivery-actions { grid-template-columns: 1fr; }
  .training-history-row { grid-template-columns: 1fr; }
  .training-history-row small { grid-column: 1; }
  .tactics-board-options {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 46px 44px;
    align-items: center;
    gap: 4px;
  }
  .tactics-formation-control { min-width: 0; }
  .tactics-formation-control select { padding: 0 24px 0 var(--space-2); font-size: var(--text-xs); }
  .tactics-view-controls { flex: 1 1 auto; min-width: 0; }
  .tactics-view-controls button {
    min-width: 0;
    padding-inline: 2px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tactics-pitch { height: clamp(420px, 62dvh, 540px); }
  .tactics-board-workflow.is-fullscreen .tactics-pitch { height: 100dvh; }
  .tactics-player-disc { width: 58px; min-width: 58px; }
  .match-plan-hero { padding: var(--space-4); }
  .match-plan-context { align-items: center; }
  .match-plan-layout { margin-top: var(--space-3); }
  .match-plan-side { grid-template-columns: 1fr; }
  .match-plan-side > :first-child { grid-column: auto; }
  .match-plan-option { min-height: 68px; }
  .match-plan-role { grid-template-columns: 38px minmax(0, 1fr); }
  .match-plan-role > em { grid-column: 2; }
  .match-plan-save-bar { align-items: stretch; flex-direction: column; }
  .match-plan-save-bar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .prototype-brand strong { font-size: var(--text-sm); white-space: nowrap; }
  .mobile-sponsor-mark { width: 56px; }
  .prototype-actions button { padding-inline: var(--space-2); font-size: var(--text-xs); }
  .panel { padding: var(--space-4); }
  .session-line { grid-template-columns: 56px 1fr; }
  .session-line small { grid-column: 2; }
  .availability-summary span { font-size: .72rem; }
  .drill-card { grid-template-columns: 54px 1fr auto; }
  .drill-thumb { height: 48px; }
  .drill-actions button { min-width: 52px; padding-inline: var(--space-2); }
  .session-plan li { grid-template-columns: 22px minmax(0, 1fr) 88px; }
  .minutes-field input { min-width: 52px; }
  .training-step-heading { grid-template-columns: 36px minmax(0, 1fr); }
  .training-step-heading > .time-total { grid-column: 2; }
  .training-save-actions { grid-template-columns: 1fr; }
  .timeline-actions { grid-column: 2 / -1; }
  .timeline-actions button { flex: 1; }
  .library-meta { align-items: flex-start; flex-direction: column; }
  .coaches-header .primary-action { margin-top: 0; }
  .coach-summary { display: grid; gap: var(--space-2); }
  .coach-summary p { max-width: none; text-align: left; }
  .coach-summary .primary-action { width: 100%; }
  .coaches-disclosure > summary { min-height: 68px; padding-inline: var(--space-4); }
  .coaches-disclosure-body { padding: var(--space-4); }
  .fixture-polls-disclosure > summary { min-height: 92px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: var(--space-4); }
  .fixture-polls-disclosure > summary > span:first-child { grid-column: 1; grid-row: 1; padding-right: var(--space-2); }
  .fixture-polls-disclosure > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .fixture-polls-count { grid-column: 1; grid-row: 2; width: auto; margin: var(--space-2) 0 0; }
  .fixture-polls-body { padding: var(--space-4); }
  .match-day-summary { min-height: 68px; padding-inline: var(--space-4); }
  .match-day-disclosure > #lineup-panel,
  .match-day-disclosure > .tactics-board-workflow,
  .match-day-disclosure > .match-plan-workflow,
  .match-day-disclosure > .role-assignment-workflow { padding: var(--space-4); }
  .role-assignment-layout { grid-template-columns: 1fr; }
  .role-assignment-save-bar { align-items: stretch; flex-direction: column; }
  .role-assignment-save-bar .primary-action { width: 100%; }
  .match-day-panel-actions .primary-action { width: 100%; }
  .coach-role, .coach-self-note { padding-left: 0; }
  .app-feedback-form { grid-template-columns: 1fr; }
  .app-feedback-form > label:has(textarea), .feedback-form-footer { grid-column: 1; }
  .feedback-submit { width: 100%; }
  .feedback-form-status { min-height: 0; }
  .feedback-item-footer { align-items: stretch; flex-direction: column; }
  .feedback-status-control { width: 100%; }
  .club-contacts-heading { display: grid; }
  .club-contacts-heading .primary-action { width: 100%; }
  .club-contacts-tools,
  .club-contact-form-row { grid-template-columns: 1fr; }
  .club-contact-card { grid-template-columns: 1fr; }
  .club-contact-actions { justify-content: flex-start; }
  .club-contact-actions a,
  .club-contact-actions button { flex: 1 1 108px; }
  .club-contact-notes { grid-column: 1; }
  .kit-management-heading,
  .kit-rotation-heading { display: grid; align-items: stretch; }
  .kit-management-heading button,
  .kit-rotation-heading button { width: 100%; }
  .kit-assignment-summary { grid-template-columns: 1fr; }
  .mobile-nav button { font-size: .6rem; }
  .parent-poll-counts { grid-template-columns: 1fr; }
  .parent-poll-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .form-dialog form { padding: var(--space-5); }
  .responsibility-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .responsibility-dialog form { gap: var(--space-4); }
  .match-review-actions { grid-template-columns: 1fr; }
  .player-photo-field { grid-template-columns: 72px minmax(0, 1fr); padding: var(--space-3); }
  .player-photo-preview .large-avatar { width: 68px; height: 68px; }
  .photo-crop-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .photo-crop-dialog form { padding: var(--space-4); }
  .photo-crop-stage { width: min(100%, 300px); }
  .player-form-row { grid-template-columns: 1fr; }
  .development-metric { min-height: 100px; padding: var(--space-3); }
  .development-metrics { grid-template-columns: 1fr; }
  .player-disclosure > summary { min-height: 68px; padding-inline: var(--space-4); }
  .player-disclosure-body { padding: var(--space-4); }
  .filtered-player-list { grid-template-columns: 1fr; }
  .filter-results-heading { align-items: flex-start; }
  .goal-prerequisite { align-items: stretch; flex-direction: column; }
  .goal-prerequisite button { width: 100%; }
  .player-dialog-actions { grid-template-columns: 1fr 1fr; }
  .individual-player-actions { grid-template-columns: 1fr; }
  .individual-player-actions .primary-action { width: 100%; }
  .roster-options > div { align-items: flex-start; flex-direction: column; }
  .player-dialog-actions .remove-action { grid-column: 1 / -1; }
  .strategy-list { grid-template-columns: 1fr; }
  .strategy-session { grid-template-columns: 54px minmax(0, 1fr); }
  .strategy-session button { grid-column: 2; width: 100%; }
  .need-row > div { display: grid; gap: var(--space-1); }
  .need-row > div span { white-space: normal; }
  .theme-checklist > div, .attendance-fieldset > div { grid-template-columns: 1fr; }
  .review-theme-options { grid-template-columns: 1fr 1fr; }
  .parent-links-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); padding: var(--space-4); }
  .formation-confirm-content { padding: var(--space-5); }
  .lineup-player-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .lineup-player-dialog-content { padding: var(--space-4); }
  .lineup-player-option {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-1);
    align-items: center;
    min-height: 76px;
    padding: var(--space-3);
  }
  .lineup-player-option > *:first-child { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .lineup-player-option > span { grid-column: 2; grid-row: 1; }
  .lineup-player-option em {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .poll-toolbar, .parent-links-heading { align-items: stretch; flex-direction: column; }
  .fixture-link-card { grid-template-columns: 1fr; }
  .parent-link-actions { justify-content: stretch; }
  .parent-link-actions button { flex: 1 1 44%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Match day · Game management */
.match-day-disclosure > .game-management-workflow { padding: var(--space-4); }
.game-management-workflow, #game-management-content { display: grid; gap: var(--space-4); min-width: 0; }
.game-recovery { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--warning); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text); }
.game-clock-panel { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center; }
.game-clock-heading { width: 100%; display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); text-align: left; }
#game-period-label, #game-elapsed { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
#game-clock { color: var(--text); font-size: clamp(3rem, 13vw, 5.5rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.game-warning { width: min(100%, 560px); min-height: 44px; display: grid; place-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.game-warning[data-level="five_minutes"], .game-warning[data-level="prepare_subs"], .game-warning[data-level="due_now"] { background: var(--warning-soft); color: var(--warning); }
.game-controls, .game-demo-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.game-controls button, .game-demo-controls button, .game-recovery button, .game-player button, .game-next-panel button { min-height: 44px; }
.game-clock-tools { width: min(100%, 460px); margin-top: var(--space-3); text-align: left; }
.game-clock-tools summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--text-sm); font-weight: 800; }
.game-clock-tools label { display: grid; grid-template-columns: 1fr minmax(96px, 140px); align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.game-clock-tools input { width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.game-clock-tools button { width: 100%; margin-top: var(--space-2); }
.game-demo-controls { width: 100%; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.game-demo-controls > span { align-self: center; color: var(--muted); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; }
.game-next-panel { display: grid; gap: var(--space-2); }
#next-change { display: grid; gap: var(--space-2); }
#next-change > span { color: var(--muted); font-size: var(--text-sm); }
#next-change > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.game-playing-time { display: grid; gap: var(--space-3); min-width: 0; }
.game-participants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
.game-player { min-width: 0; display: grid; grid-template-columns: minmax(110px, 1fr) minmax(190px, 1.5fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.game-player > div:first-child { min-width: 0; display: grid; gap: 2px; }
.game-player > div:first-child strong, .game-player > div:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-player > div:first-child span { color: var(--muted); font-size: var(--text-xs); }
.game-player dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.game-player dl div { display: grid; gap: 2px; }
.game-player dt { color: var(--muted); font-size: var(--text-xs); }
.game-player dd { color: var(--text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 800; }
.game-player dd.positive { color: var(--positive); }
.game-player dd.warning { color: var(--warning); }
.game-player dd.neutral { color: var(--muted); }
.game-player > button { grid-column: 1 / -1; width: 100%; }
.game-player > button[aria-pressed="true"] { color: var(--positive); border-color: var(--positive); background: var(--positive-soft); }
.game-exception { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.game-exception select { min-width: 0; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 0 var(--space-3); }
.section-status.error, #game-management-status.error { color: var(--accent); }

@media (max-width: 700px) {
  .game-participants { grid-template-columns: 1fr; }
  .game-player { grid-template-columns: minmax(92px, .8fr) minmax(178px, 1.2fr); }
}

@media (max-width: 430px) {
  .match-day-disclosure > .game-management-workflow { padding: var(--space-3); }
  .game-clock-panel { padding: var(--space-4) var(--space-3); }
  .game-clock-heading { align-items: center; }
  #game-clock { font-size: clamp(3rem, 19vw, 4.5rem); }
  .game-controls, .game-controls button, #next-change > div, #next-change button { width: 100%; }
  .game-player { grid-template-columns: 1fr; }
  .game-player dl { grid-column: 1; }
  .game-exception { grid-template-columns: 1fr; }
  .game-recovery { align-items: stretch; flex-direction: column; }
}
.game-note { grid-column: 1 / -1; display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.game-note input { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.late-arrivals { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.late-arrivals summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 800; }
#late-arrivals { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#late-arrivals button { min-height: 44px; }

/* Handbooks and links: official reference pages grouped by purpose.
   Tokens only, so the dark theme is inherited rather than restated. */
.handbooks-group { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.handbooks-group:first-of-type { margin-top: var(--space-4); }
.handbooks-note { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.handbooks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.handbooks-list li { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.handbooks-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px; padding: var(--space-3) var(--space-4) var(--space-1);
  font-weight: 600; color: var(--text); text-decoration: none;
}
.handbooks-list a:hover { text-decoration: underline; }
.handbooks-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md); }
.handbooks-host { flex: none; font-size: var(--text-xs); font-weight: 500; color: var(--faint); }
.handbooks-list small { display: block; padding: 0 var(--space-4) var(--space-3); font-size: var(--text-sm); color: var(--muted); }

/* ============================================================
   Release 1A shell: 5-tab primary nav, Now hero, Plan sub-nav
   ============================================================ */

/* Bottom nav — override + expand default block */
.mobile-nav button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-nav button svg circle,
.mobile-nav button svg path { vector-effect: non-scaling-stroke; }

/* Bottom nav is the primary control on mobile *and* tablet. Show it on all
   viewports so touch-first coaches see it, and reserve space at the bottom
   of the main content so it never overlaps. */
.mobile-nav {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--nav);
  color: #cfcfca;
  border-top: 1px solid #2a2a29;
  padding: 4px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}
.mobile-nav button {
  min-width: 0;
  min-height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.mobile-nav button span { line-height: 1.1; }
.mobile-nav button.active {
  color: var(--brand-orange);
}
.mobile-nav button.active svg {
  stroke: var(--brand-orange);
}
.mobile-nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Give the main content enough bottom padding to clear the fixed tab bar. */
main#main-content {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  /* On wide screens the sidebar is the primary nav; bottom nav becomes a
     compact footer bar but still visible for accent and quick access. */
  .mobile-nav { max-width: 720px; margin: 0 auto; border-radius: 16px 16px 0 0; }
}

/* ---- Now hero -------------------------------------------------- */
.now-header .now-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.now-hero {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.now-hero > article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--text);
}

.now-next-match {
  background: linear-gradient(160deg, var(--nav) 0%, #1a0709 100%);
  color: #f6f6f3;
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.now-next-match::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(217,25,46,0.35) 0%, rgba(217,25,46,0) 70%);
  pointer-events: none;
}
.now-next-match .eyebrow { color: #ffb3bc; }
.now-next-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.now-countdown {
  background: rgba(255,255,255,0.08);
  color: #ffd07a; /* amber energy accent per HalfOrange direction */
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.now-next-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
  color: #ffffff;
}
.now-team {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.now-team.away { grid-template-columns: 1fr 40px; text-align: right; }
.now-team.away .now-team-crest { order: 2; }
.now-team-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  flex-shrink: 0;
}
.now-team-crest .club-crest { width: 100%; height: 100%; border-radius: 0; background: transparent; }
.now-team-crest .club-crest img { width: 100%; height: 100%; object-fit: contain; }
.now-team-crest .club-crest-fallback { font-size: 0.7rem; font-weight: 700; color: #ffffff; }
/* recent-result card lives on light bg, use dark text for fallback */
.now-recent-result .now-team-crest { background: #f4f4f6; }
.now-recent-result .now-team-crest .club-crest-fallback { color: #4a4a4e; }
.now-team-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-vs { color: #888582; font-size: .8rem; text-transform: uppercase; }
.now-next-match-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.now-next-match-meta > div { min-width: 0; }
.now-next-match-meta dt {
  font-size: .7rem;
  color: #a09d99;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.now-next-match-meta dd {
  margin: 0;
  font-weight: 600;
  color: #ffffff;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-primary-cta {
  width: 100%;
  min-height: 48px;
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 700;
}
.now-primary-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* League preview */
.now-league-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}
.now-league-head h2 { margin: 2px 0 0; font-size: 1.05rem; }
.now-league-sync { margin: 4px 0 0; font-size: var(--text-xs); }
.now-league-sync[data-level="amber"] { color: var(--warning, #f5b041); }
.now-league-sync[data-level="red"] { color: var(--danger, #d9192e); }
.link-button {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: .82rem;
  min-height: 32px;
}
.link-button:hover { text-decoration: underline; }
.now-league-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.now-league-table th,
.now-league-table td {
  text-align: right;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.now-league-table th:first-child,
.now-league-table td:first-child { text-align: center; width: 28px; color: var(--muted); }
.now-league-table th:nth-child(2),
.now-league-table td:nth-child(2) { text-align: left; }
.now-league-table thead th {
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.now-league-table tr.is-dundrum td {
  /* Highlight our own row in the league table with the brand amber, not red. */
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 700;
}
.now-league-form {
  display: inline-flex;
  gap: 3px;
  justify-content: flex-end;
}
.now-league-form span {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  font-size: .62rem;
  font-weight: 700;
  color: #ffffff;
}
.now-league-form span[data-form="W"] { background: #16794a; }
.now-league-form span[data-form="D"] { background: #7a6a2e; }
.now-league-form span[data-form="L"] { background: #a13343; }
.now-league-form span[data-form="-"] { background: var(--surface-3); color: var(--muted); }
.now-league-empty { color: var(--muted); font-size: .85rem; margin: 0; }

/* Coach Assist entry */
.now-coach-assist {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  border-left: 3px solid #f5a623; /* amber accent */
}
.now-coach-assist p { color: var(--muted); font-size: .85rem; }
.primary-action.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  justify-self: start;
  padding: 0 var(--space-4);
  font-weight: 600;
}
.primary-action.ghost svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; fill: none; }

/* Next training + unresolved */
.now-next-training-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}
.now-next-training-summary { margin: var(--space-3) 0 0; color: var(--text); font-size: .92rem; }
.now-unresolved ul { margin: var(--space-3) 0 0; padding-left: 20px; color: var(--text); }
.now-unresolved li { padding: 4px 0; }

/* ---- Plan sub-nav --------------------------------------------- */
.plan-subnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 8px;
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.plan-subnav::-webkit-scrollbar { display: none; }
.plan-subnav-item {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.plan-subnav-item.active {
  background: var(--nav);
  color: #ffffff;
  border-color: var(--nav);
}

/* Plan overview tiles + placeholders */
.plan-overview-hint { color: var(--muted); font-size: .88rem; margin: 0 0 var(--space-3); }
.plan-overview-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.plan-tile {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  min-height: 68px;
}
.plan-tile:hover { border-color: var(--accent); }
.plan-tile span { font-weight: 700; }
.plan-tile small { color: var(--muted); font-size: .78rem; }

.plan-sub-placeholder {
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
}
.plan-sub-placeholder p { margin: 0 0 var(--space-3); font-size: .9rem; }

/* Hide desktop sidebar on mobile — bottom nav takes over. */
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; height: auto; }
  .sidebar { display: none; }
}

/* Very narrow phones — keep the bottom nav labels legible */
@media (max-width: 360px) {
  .mobile-nav { padding: 2px; }
  .mobile-nav button { font-size: .58rem; gap: 1px; }
  .mobile-nav button svg { width: 20px; height: 20px; }
}

/* Tab label swap at narrow widths */
.mobile-nav .tab-label-short { display: none; }
@media (max-width: 360px) {
  .mobile-nav .tab-label-long { display: none; }
  .mobile-nav .tab-label-short { display: inline; }
}

/* Release 1A — polish pass: Now empty states, Plan tiles, Play header */
.muted-copy { color: var(--muted); font-size: .88rem; margin: 4px 0 0; }
.now-next-match.empty { background: linear-gradient(135deg, #131315, #1c1c1f); color: #fff; }
.now-next-match.empty .now-next-match-head .eyebrow { color: #ffd07a; }
.now-next-match-empty { padding: 8px 0; }
.now-next-match-empty p { margin: 0; color: #fff; font-weight: 600; }
.now-next-match-empty p.muted-copy { margin-top: 6px; color: rgba(255,255,255,.72); font-weight: 400; }

/* Plan tile — richer layout with icon + status pill */
.plan-tile {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  min-height: 68px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.plan-tile:hover, .plan-tile:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(217,25,46,.08);
  transform: translateY(-1px);
}
.plan-tile-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #f5f5f7;
  color: var(--text);
}
.plan-tile-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-tile-title { font-weight: 700; font-size: .98rem; color: var(--text); }
.plan-tile-sub { font-size: .78rem; color: var(--muted); }
.plan-tile-status {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: #f5f5f7;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-tile-status[data-state="done"] { color: #0a7f3e; background: #e6f6ec; }
.plan-tile-status[data-state="progress"] { color: #b25e00; background: #fff2df; }
.plan-tile-status[data-state="blocked"] { color: #a01123; background: #fbe6e8; }

/* Overview tiles: single column on phones, two columns from 520+ */
.plan-overview-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .plan-overview-tiles { grid-template-columns: 1fr 1fr; } }

/* Play header */
.play-header { background: var(--nav, #111); color: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.play-header .eyebrow { color: #ffd07a; }
.play-header h1.play-title { color: #fff; margin: 6px 0 4px; font-size: 1.4rem; }
.play-header p.play-meta { color: rgba(255,255,255,.75); margin: 0; }
.play-status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.play-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd07a; box-shadow: 0 0 0 3px rgba(255,208,122,.18); }

/* Plan sub-nav: right-edge fade so hidden pills are discoverable */
.plan-subnav { position: relative; }
.plan-subnav::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, rgba(245,245,247,0), var(--bg, #f5f5f7));
  pointer-events: none;
}

/* Release 1A Phase 2 — Now hero live data */
.now-next-match:not(.empty) {
  background: linear-gradient(140deg, #1a1a1e 0%, #0f0f11 60%, #2a0a0e 100%);
  color: #fff;
}
.now-next-match:not(.empty) .now-next-match-teams {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem;
  margin: 0.5rem 0 0.75rem; font-size: 1rem; font-weight: 700;
}
.now-next-match:not(.empty) .now-team-name { min-width: 0; }
.now-next-match:not(.empty) .now-team { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.now-next-match:not(.empty) .now-team.away { flex-direction: row-reverse; text-align: right; }
.now-next-match:not(.empty) .now-team-name { white-space: normal; overflow-wrap: break-word; word-break: normal; line-height: 1.15; font-size: 1rem; font-weight: 700; }
@media (max-width: 400px) {
  .now-next-match:not(.empty) .now-team-name { font-size: 0.9rem; }
}
.now-next-match:not(.empty) .now-vs { font-size: 0.75rem; opacity: 0.55; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.now-next-match:not(.empty) .now-next-match-meta {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.now-next-match:not(.empty) .now-next-match-meta > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.4rem;
}
.now-next-match:not(.empty) .now-next-match-meta > div:last-child { border-bottom: 0; padding-bottom: 0; }
.now-next-match:not(.empty) .now-next-match-meta dt { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.15rem; }
.now-next-match:not(.empty) .now-next-match-meta dd { font-size: 0.85rem; font-weight: 600; margin: 0; }
.now-countdown {
  background: rgba(255, 176, 32, 0.15); color: #ffb020;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.02em; border: 1px solid rgba(255, 176, 32, 0.35);
}

/* Now — Around us mini table */
.now-league-mini { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.now-league-mini th, .now-league-mini td { padding: 0.4rem 0.35rem; text-align: left; }
.now-league-mini th { font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b70; font-weight: 600; border-bottom: 1px solid #ececee; }
.now-league-mini td { border-bottom: 1px solid #f2f2f4; }
.now-league-mini tr:last-child td { border-bottom: 0; }
.now-league-mini .pos { width: 2.5rem; color: #6b6b70; font-variant-numeric: tabular-nums; }
.now-league-mini .team { font-weight: 500; }
.now-league-mini .num { text-align: right; font-variant-numeric: tabular-nums; width: 2.5rem; color: #6b6b70; }
.now-league-mini .pts { color: #1a1a1e; font-weight: 700; }
/* Our own row in the mini table — amber highlight, not red (matches Coach Assist palette). */
.now-league-mini tr.is-us td { background: var(--warning-soft); color: var(--warning); font-weight: 700; }
.now-league-mini tr.is-us .pos, .now-league-mini tr.is-us .num, .now-league-mini tr.is-us .pts { color: var(--warning); }

/* Now — Unresolved list */
.now-unresolved { border: 1px solid #ececee; border-radius: 16px; padding: 1rem; background: #fff; }
.now-unresolved ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.now-unresolved-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.6rem 0.75rem; border: 1px solid #ececee; border-radius: 12px;
  background: #fafafb; color: #1a1a1e; font-size: 0.9rem; font-weight: 500;
  text-align: left; cursor: pointer; min-height: 44px;
}
.now-unresolved-item:hover { border-color: #d9192e; background: #fff; }
.now-unresolved-dot { width: 8px; height: 8px; border-radius: 999px; background: #ffb020; flex: 0 0 8px; }
.now-unresolved-chevron { width: 16px; height: 16px; margin-left: auto; stroke: #6b6b70; fill: none; stroke-width: 2; }

/* Release 1A Phase 2 — Coach Assist card + Recent Result */
.now-coach-assist { border: 1px solid #ececee; border-radius: 16px; padding: 0.85rem 1rem; background: #fff; display: flex; flex-direction: column; gap: 0.35rem; }
.now-coach-assist > .eyebrow { margin-bottom: 0.1rem; }
.now-coach-assist h2, .now-coach-assist .now-coach-assist-prompt { margin: 0; font-size: 0.98rem; line-height: 1.25; font-weight: 700; }
.now-coach-assist > p, .now-coach-assist .now-coach-assist-hint { margin: 0; }
.now-coach-assist .now-coach-assist-open { margin-top: 0.35rem; }
.now-coach-assist-head { display: flex; flex-direction: column; gap: 0.25rem; }
.now-coach-assist-head h2 { margin: 0; font-size: 1rem; }
.now-coach-assist-suggestion { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem; border-radius: 12px; background: #fafafb; border: 1px solid #ececee; }
.now-coach-assist-tag { align-self: flex-start; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(217, 25, 46, 0.08); color: #d9192e; }
.now-coach-assist-tag[data-tone="urgent"] { background: rgba(217, 25, 46, 0.14); color: #b0141f; }
.now-coach-assist-tag[data-tone="info"] { background: rgba(255, 176, 32, 0.14); color: #a56b00; }
.now-coach-assist-label { margin: 0; font-size: 0.95rem; font-weight: 600; color: #1a1a1e; line-height: 1.35; }
.now-coach-assist-hint { margin: 0; font-size: 0.8rem; }
.now-coach-assist-cta { align-self: flex-start; min-height: 40px; padding: 0.55rem 1rem; font-size: 0.85rem; }
.now-coach-assist-empty p { margin: 0; color: #6b6b70; font-size: 0.85rem; }
.now-coach-assist-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: #6b6b70; }
.now-coach-assist-open svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Recent result card */
.now-recent-result { border: 1px solid #ececee; border-radius: 16px; padding: 1rem; background: #fff; display: flex; flex-direction: column; gap: 0.6rem; }
.now-recent-result-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.now-recent-result-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; }
.now-recent-result-badge[data-outcome="win"] { background: rgba(52, 168, 83, 0.12); color: #22733a; }
.now-recent-result-badge[data-outcome="loss"] { background: rgba(217, 25, 46, 0.1); color: #b0141f; }
.now-recent-result-badge[data-outcome="draw"] { background: rgba(107, 107, 112, 0.12); color: #4a4a4e; }
.now-recent-result-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-size: 1rem; font-weight: 700; color: #1a1a1e; }
.now-recent-result .now-team { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.now-recent-result .now-team.away { flex-direction: row-reverse; text-align: right; }
.now-recent-result .now-team-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.now-recent-score { font-size: 1.4rem; font-weight: 800; color: #1a1a1e; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; padding: 0 0.4rem; }
.now-recent-result-meta { margin: 0; font-size: 0.75rem; }

/* At narrow widths, let recent-result team names wrap instead of truncating with an ellipsis. */
.now-recent-result .now-team-name { overflow: visible; text-overflow: clip; white-space: normal; font-size: 0.9rem; }
@media (max-width: 360px) {
  .now-recent-score { font-size: 1.2rem; padding: 0 0.25rem; }
  .now-recent-result .now-team-name { font-size: 0.82rem; }
}

/* Countdown urgency states */
.now-countdown[data-urgency="urgent"] { background: rgba(217, 25, 46, 0.18); color: #ffb0b8; animation: pulse-urgent 2s ease-in-out infinite; }
.now-countdown[data-urgency="live"] { background: rgba(217, 25, 46, 0.28); color: #ffd6d9; }
@keyframes pulse-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 25, 46, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(217, 25, 46, 0); }
}

/* ================ Release 1A Phase 3 ================ */

/* Plan > Parent Poll */
.plan-parent-poll { background: #fff; border: 1px solid #ececee; border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.plan-parent-poll-head { display: flex; flex-direction: column; gap: 0.75rem; }
.plan-parent-poll-head h2 { margin: 0.15rem 0 0; font-size: 1.05rem; }
.plan-parent-poll-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.plan-parent-poll-summary .pill strong { font-weight: 700; margin-right: 0.25rem; }
.pill { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.pill-available { background: rgba(52, 168, 83, 0.14); color: #22733a; }
.pill-unavailable { background: rgba(217, 25, 46, 0.12); color: #b0141f; }
.pill-pending { background: rgba(107, 107, 112, 0.12); color: #4a4a4e; }
.plan-parent-poll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-parent-poll-empty { padding: 1rem; text-align: center; color: #6b6b70; font-size: 0.85rem; background: #fafafb; border-radius: 12px; margin: 0; }

/* --- Availability poll v2: progress + actions + grouped chip grid --- */
.pp-progress { display: flex; align-items: stretch; width: 100%; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 0.5rem; }
.pp-progress-seg { display: block; height: 100%; transition: width 260ms ease; min-width: 0; }
/* Green (available) — anchored left; use the token so both themes stay legible. */
.pp-progress-avail { background: var(--success, #4c9f70); }
/* Amber (unavailable) — Coach Assist palette; not as loud as red for a poll signal. */
.pp-progress-unavail { background: var(--warning); }
/* Grey (pending) — anchored right; quiet, so the bar reads as "how much do we know". */
.pp-progress-pending { background: var(--border); }
.pp-progress-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); }
.pp-progress-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-progress-swatch { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.pp-progress-swatch-avail { background: var(--success, #4c9f70); }
.pp-progress-swatch-unavail { background: var(--warning); }
.pp-progress-swatch-pending { background: var(--border); }
.plan-parent-poll-actions { display: flex; gap: 0.5rem; }
.pp-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 40px; padding: 0.55rem 0.9rem; font-size: 0.85rem; font-weight: 600; border-radius: 10px; border: 1px solid #d5d5d9; background: #fff; color: #1a1a1e; cursor: pointer; }
.pp-action:hover, .pp-action:focus-visible { border-color: #b8b8bd; background: #fafafb; }
.pp-action-primary { background: #25d366; border-color: #25d366; color: #fff; }
.pp-action-primary:hover, .pp-action-primary:focus-visible { background: #1eb955; border-color: #1eb955; }
.pp-action svg { flex-shrink: 0; }
.pp-footnote { margin: 0; font-size: 0.72rem; color: #8a8a90; text-align: center; }

/* Groups */
/* legacy .pp-group rules removed — dark v2 rules further down own the styling now */
.pp-group[data-empty] { opacity: 0.55; }
.pp-group-empty { padding: 0 0.85rem 0.7rem; font-size: 0.8rem; margin: 0; }

/* Chip grid */
.pp-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; padding: 0 0.6rem 0.7rem; }
@media (min-width: 480px) { .pp-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .pp-chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pp-chip { position: relative; }
.pp-chip-face { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.55rem 0.6rem; border-radius: 10px; border: 1px solid #ececee; background: #fafafb; font-size: 0.82rem; font-weight: 500; color: #1a1a1e; cursor: pointer; text-align: left; min-height: 40px; }
.pp-chip-face:hover, .pp-chip-face:focus-visible { background: #f2f2f4; border-color: #d5d5d9; }
.pp-chip.is-expanded .pp-chip-face { border-color: #1a1a1e; background: #fff; box-shadow: 0 0 0 2px rgba(26,26,30,0.06); }
.pp-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pp-chip-pending .pp-chip-dot { background: var(--brand-orange); }
.pp-chip-available .pp-chip-dot { background: #34a853; }
.pp-chip-unavailable .pp-chip-dot { background: #d9192e; }
.pp-chip-pending .pp-chip-face { background: var(--surface-2); border-color: var(--border); }
.pp-chip-available .pp-chip-face { background: var(--surface-2); border-color: var(--border); }
.pp-chip-unavailable .pp-chip-face { background: var(--surface-2); border-color: var(--border); }
.pp-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-chip-manual { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: #6b6b70; background: rgba(0,0,0,0.06); padding: 0.1rem 0.35rem; border-radius: 999px; flex-shrink: 0; }

/* ==== ACTION CENTER: amber palette matching Coach Assist screen ==== */
.now-next-action { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.now-next-action-head { display: flex; flex-direction: column; gap: 0.15rem; }
.now-next-action-head .eyebrow { color: var(--warning); font-size: var(--text-xs, 0.75rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.now-next-action-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.now-next-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.na-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.4rem; padding: 0.9rem 0.85rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; min-height: 148px; transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.na-card:hover, .na-card:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); outline: none; }
.na-card:active { transform: translateY(0); }
.na-card-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--warning-soft); color: var(--warning); }
.na-card-label { font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1.2; letter-spacing: -0.005em; }
.na-card-status { font-size: 0.82rem; color: var(--muted); line-height: 1.35; align-self: start; }
.na-card-cta { font-size: 0.88rem; font-weight: 700; color: var(--warning); margin-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.25rem; }

/* ==== LEANER AVAILABILITY CARD (v2) ==== */
.plan-parent-poll.v2 .plan-parent-poll-actions.single { display: block; }
.pp-action.full { width: 100%; }

/* Two accordions only: Available (open by default) + Not available (closed).
   No white surface — the accordions sit directly on the dark availability card. */
.pp-group { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); overflow: hidden; margin-top: 0.6rem; }
.pp-group-summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; cursor: pointer; list-style: none; }
.pp-group-summary::-webkit-details-marker { display: none; }
.pp-group-summary::marker { content: ""; }
.pp-group-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pp-group-available .pp-group-dot { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.pp-group-unavailable .pp-group-dot { background: #ff5a6b; box-shadow: 0 0 0 3px rgba(255,90,107,0.22); }
.pp-group-pending .pp-group-dot { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent); }
.pp-group-label { flex: 1; font-weight: 700; color: var(--text); font-size: 0.95rem; }
.pp-group-count { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; padding: 0.15rem 0.5rem; background: var(--surface-3); border-radius: 999px; }
.pp-group-chevron { width: 18px; height: 18px; color: var(--muted); transition: transform 0.15s ease; }
.pp-group[open] .pp-group-chevron { transform: rotate(180deg); }
[data-theme="light"] .pp-group-unavailable .pp-group-dot { background: #d9192e; box-shadow: 0 0 0 3px rgba(217,25,46,0.15); }

.pp-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0 0.85rem 0.85rem; }
@media (min-width: 480px) { .pp-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Chip: football glyph left, name, coloured status dot right */
.pp-chip { grid-column: auto; }
.pp-chip.is-expanded { grid-column: 1 / -1; }
.pp-chip-face { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-3); cursor: pointer; width: 100%; min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.pp-chip-face:hover, .pp-chip-face:focus-visible { border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); outline: none; }
.pp-chip-glyph { color: var(--warning); opacity: 1; }
.pp-group-label { color: var(--text); }
.pp-group-summary:hover { background: var(--surface-2); }
.pp-chip.is-expanded .pp-chip-face { border-color: var(--warning) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 20%, transparent) !important; background: var(--surface-3) !important; color: var(--text) !important; }
.pp-chip.is-expanded .pp-chip-name { color: var(--text) !important; }
.pp-chip-glyph { width: 20px; height: 20px; flex-shrink: 0; }
.pp-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-chip-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 2px solid transparent; }
.pp-chip-dot-available { background: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 20%, transparent); }
.pp-chip-dot-unavailable { background: #ff5a6b; box-shadow: 0 0 0 2px rgba(255,90,107,0.2); }
.pp-chip-dot-pending { background: transparent; border-color: #b8b8bd; }

/* Tri-toggle popover under expanded chip — dark tokens, amber accents. */
.pp-chip-actions { margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem; box-shadow: 0 6px 18px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 0.55rem; }
.pp-chip-actions[hidden] { display: none !important; }
.pp-chip-actions .pp-manual-set { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.4rem !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; align-self: auto !important; }
.pp-chip-actions .pp-set-btn { padding: 0.7rem 0.4rem !important; border-radius: 10px !important; border: 1.5px solid var(--border) !important; background: var(--surface-2) !important; font-size: 0.9rem !important; font-weight: 700 !important; color: var(--text) !important; cursor: pointer; min-height: 44px !important; min-width: 0 !important; margin: 0 !important; }
.pp-chip-actions .pp-set-btn + .pp-set-btn { border-left: 1.5px solid var(--border) !important; }
.pp-chip-actions .pp-set-btn:hover, .pp-chip-actions .pp-set-btn:focus-visible { background: var(--surface-3) !important; }
.pp-chip-actions .pp-set-yes { color: var(--warning) !important; border-color: color-mix(in srgb, var(--warning) 60%, var(--border)) !important; }
.pp-chip-actions .pp-set-yes.is-active { background: var(--warning) !important; border-color: var(--warning) !important; color: #1a1a1e !important; }
.pp-chip-actions .pp-set-no { color: #ff5a6b !important; border-color: rgba(255,90,107,0.55) !important; }
.pp-chip-actions .pp-set-no.is-active { background: #ff5a6b !important; border-color: #ff5a6b !important; color: #1a1a1e !important; }
.pp-chip-actions .pp-set-clear { color: var(--muted) !important; border-color: var(--border) !important; }
.pp-chip-actions .pp-set-clear.is-active { background: var(--surface-3) !important; border-color: var(--muted) !important; color: var(--text) !important; }
.pp-chip-close { padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 40px; }
.pp-chip-close:hover, .pp-chip-close:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.pp-chip-remind { padding: 0.6rem 0.75rem; border-radius: 10px; border: 1.5px solid rgba(255,90,107,0.55); background: transparent; color: #ff5a6b; font-size: 0.85rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.pp-chip-remind:hover, .pp-chip-remind:focus-visible { background: rgba(255,90,107,0.1); }

/* Plan > Match Card */
.plan-match-card { background: #fff; border: 1px solid #ececee; border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.plan-match-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.plan-match-card-head h2 { margin: 0.15rem 0 0.35rem; font-size: 1.05rem; }
.plan-match-card-status { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(255,176,32,0.14); color: #a56b00; white-space: nowrap; }
.plan-match-card-print { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid #d9192e; background: #d9192e; color: #fff; font-size: 0.8rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(217,25,46,0.25); }
.plan-match-card-print:hover { background: #b21023; border-color: #b21023; }
.plan-match-card-print svg { flex-shrink: 0; }

/* ---- DDSL print sheet: A4, hidden on screen, only visible in print media ---- */
.ddsl-print-sheet { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  /* Hide the entire app; show ONLY the print sheet */
  body > *:not(.ddsl-print-sheet) { display: none !important; }
  .ddsl-print-sheet { display: block !important; position: relative; width: 210mm; height: 297mm; margin: 0; padding: 0; background: #fff; }
  .ddsl-print-page { position: relative; width: 210mm; height: 297mm; overflow: hidden; }
  .ddsl-print-bg { position: absolute; top: 0; left: 0; width: 210mm; height: 297mm; }
  .ddsl-fld { position: absolute; font-family: Arial, Helvetica, sans-serif; color: #111; font-size: 9.5pt; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; transform: translateY(-50%); }
  /* Header row — DATE dd / mm / yyyy */
  .ddsl-date-dd  { top: 13.36%; left: 13%;   width: 4%; text-align: center; }
  .ddsl-date-mm  { top: 13.36%; left: 17%;   width: 4%; text-align: center; }
  .ddsl-date-yy  { top: 13.36%; left: 21%;   width: 6%; text-align: center; }
  .ddsl-comp     { top: 13.36%; left: 42%;   width: 15%; font-weight: 700; font-size: 8.5pt; }
  .ddsl-official { top: 13.36%; left: 68%;   width: 27%; font-weight: 700; }
  .ddsl-ko       { top: 15.44%; left: 16%;   width: 15%; font-weight: 700; }
  /* Home starters team name sits in the HOME: header row, right of the label */
  .ddsl-home-name      { top: 21.24%; left: 17%; width: 24%; font-weight: 700; font-size: 8.5pt; }
  .ddsl-home-name-subs { top: 47.24%; left: 17%; width: 24%; font-weight: 700; font-size: 8.5pt; }
  /* Starter rows 1..11 — midpoint of each row derived from template grid */
  .ddsl-starter { left: 11%; width: 34%; font-weight: 600; }
  #ddsl-s1  { top: 23.24%; }
  #ddsl-s2  { top: 25.16%; }
  #ddsl-s3  { top: 27.06%; }
  #ddsl-s4  { top: 28.96%; }
  #ddsl-s5  { top: 30.89%; }
  #ddsl-s6  { top: 32.81%; }
  #ddsl-s7  { top: 34.72%; }
  #ddsl-s8  { top: 36.62%; }
  #ddsl-s9  { top: 38.54%; }
  #ddsl-s10 { top: 40.45%; }
  #ddsl-s11 { top: 42.35%; }
  /* Substitute rows 12..20 */
  .ddsl-sub { left: 11%; width: 34%; font-weight: 600; }
  #ddsl-sub12 { top: 49.30%; }
  #ddsl-sub13 { top: 51.20%; }
  #ddsl-sub14 { top: 53.12%; }
  #ddsl-sub15 { top: 55.05%; }
  #ddsl-sub16 { top: 56.95%; }
  #ddsl-sub17 { top: 58.85%; }
  #ddsl-sub18 { top: 60.78%; }
  #ddsl-sub19 { top: 62.68%; }
  #ddsl-sub20 { top: 64.58%; }
  /* Technical rows 1..3 (home side) */
  .ddsl-tech { left: 11%; width: 34%; font-weight: 600; }
  #ddsl-tech1 { top: 68.58%; }
  #ddsl-tech2 { top: 70.48%; }
  #ddsl-tech3 { top: 72.40%; }
  .plan-match-card-print { display: none !important; }
}
.plan-match-card-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.plan-mc-block { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem; background: #fafafb; border-radius: 10px; }
.plan-mc-block-wide { grid-column: 1 / -1; }
.plan-mc-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b70; }
.plan-mc-value { font-size: 0.95rem; font-weight: 500; color: #1a1a1e; overflow-wrap: anywhere; }
.plan-mc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.plan-mc-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.plan-mc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 0.4rem; margin-right: 8px; border-radius: 6px; background: #d9192e; color: #fff !important; font-size: 0.75rem; font-weight: 700; vertical-align: middle; }
.plan-mc-pos { display: inline-block; min-width: 32px; margin-right: 8px; font-size: 0.7rem; font-weight: 700; color: #6b6b6b; letter-spacing: 0.04em; }
.plan-match-card-footnote { font-size: 0.75rem; margin: 0; }

/* Plan > Briefing */
.plan-briefing { background: #fff; border: 1px solid #ececee; border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.plan-briefing-head h2 { margin: 0.15rem 0 0.35rem; font-size: 1.05rem; }
.plan-briefing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.plan-briefing-block { padding: 0.7rem 0.8rem; background: #fafafb; border-radius: 10px; display: flex; flex-direction: column; gap: 0.25rem; }
.plan-briefing-block-wide { grid-column: 1 / -1; }
.plan-briefing-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b70; }
.plan-briefing-value { margin: 0; font-size: 0.85rem; line-height: 1.4; color: #1a1a1e; }
.plan-briefing-focus { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: #1a1a1e; }

@media (max-width: 420px) {
  .plan-match-card-preview, .plan-briefing-grid { grid-template-columns: 1fr; }
  .plan-mc-block-wide, .plan-briefing-block-wide { grid-column: auto; }
}

/* -------------------------------------------------------------------------- */
/* Now hero \u2014 wow-factor rework (Release 1A)                                    */
/* -------------------------------------------------------------------------- */

/* Kill boxy card feel on the four narrative sections \u2014 they read as flow, not admin. */
.now-hero > article.now-form-ribbon,
.now-hero > article.now-recent-result,
.now-hero > article.now-coach-assist.inline,
.now-hero > article.now-next-training,
.now-hero > article.now-unresolved {
  background: transparent;
  border: 0;
  padding: var(--space-3) var(--space-2);
}

/* --- Season form ribbon ---------------------------------------------------- */
.now-form-ribbon {
  background: linear-gradient(180deg, #12080a 0%, #1c0d10 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-4) !important;
  color: #f6f6f3;
}
.now-form-ribbon .eyebrow { color: #ffb3bc; letter-spacing: .12em; }
.now-form-ribbon-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.now-form-position {
  font-size: var(--text-sm);
  color: #f6d68b;
  background: rgba(245, 165, 36, .14);
  border: 1px solid rgba(245, 165, 36, .35);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.now-form-dots {
  list-style: none; padding: 0; margin: 0 0 var(--space-2);
  display: flex; gap: 10px;
}
.now-form-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; letter-spacing: .02em;
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.28);
}
.now-form-dot[data-outcome="w"] { background: #2eb670; }
.now-form-dot[data-outcome="l"] { background: #d9192e; }
.now-form-dot[data-outcome="d"] { background: var(--brand-orange); color: #1a0709; }
.now-form-dot[data-outcome="none"] { background: var(--surface-3); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.now-form-dot > a { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: inherit; text-decoration: none; }
.now-form-dot > a:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }
.now-form-line {
  margin: 0;
  color: rgba(246,246,243,.78);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* --- Latest result (make it hero-scale, always visible) -------------------- */
.now-recent-result {
  padding: var(--space-2) var(--space-2) !important;
}
.now-recent-result-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.now-recent-result-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
.now-recent-score {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: center;
}
.now-recent-result-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.now-recent-result-badge[data-outcome="win"] { background: rgba(46,182,112,.15); color: #2eb670; }
.now-recent-result-badge[data-outcome="loss"] { background: rgba(217,25,46,.15); color: #ff6a78; }
.now-recent-result-badge[data-outcome="draw"] { background: rgba(245,165,36,.15); color: var(--brand-orange); }

/* --- Coach Assist as inline prompt (not a boxed card) --------------------- */
.now-coach-assist.inline .now-coach-assist-prompt {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--text);
}
.now-coach-assist.inline .now-coach-assist-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}
.now-coach-assist-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
}
.ghost-action {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ghost-action:hover, .ghost-action:focus-visible {
  background: rgba(217,25,46,.08);
  border-color: rgba(217,25,46,.45);
  outline: none;
}
.now-coach-assist.inline .now-coach-assist-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(217,25,46,.12);
  color: #ff6a78;
  margin-top: var(--space-2);
}
.now-coach-assist.inline .now-coach-assist-tag[data-tone="urgent"] {
  background: rgba(217,25,46,.18);
  color: #ffb3bc;
}

/* --- Next fixture: remove primary CTA styling remnants, tighten --------- */
.now-next-match .now-primary-cta { display: none; }

/* --- Hide the "Enable microphone once" banner on Now ------------------- */
#dashboard.active ~ * .microphone-onboarding,
body:has(#dashboard.active) .microphone-onboarding { display: none !important; }

/* --- Nav: Half Orange active state -------------------------------------- */
.mobile-nav button[data-tab="now"].active svg.nav-icon-halforange path {
  stroke: var(--brand-orange);
}
.mobile-nav button[data-tab="now"] svg.nav-icon-halforange {
  overflow: visible;
}

/* Utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =====================================================================
   Now page — refined match-centre card
   Unifies form, latest result, next fixture into a single dark card.
   The admin accordions and cross-section shortcuts stay in the DOM
   (renderers write to them) but are hidden on Now.
   ===================================================================== */

/* Hide the below-hero admin blocks and cross-section previews on Now. */
#dashboard .now-next-training,
#dashboard .now-unresolved,
#dashboard .dashboard-sections { display: none !important; }
/* League snapshot on Now: shown with a last-refresh caption for context. */
#dashboard .now-league { display: block; margin-top: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
#dashboard .now-league > summary { list-style: none; cursor: pointer; padding: var(--space-4); }
#dashboard .now-league > summary::-webkit-details-marker { display: none; }
/* Full table toggle uses the amber accent, not the site red. */
#dashboard .now-league-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); font-weight: 600; font-size: .82rem; transition: color .15s ease; }
#dashboard .now-league-toggle svg { transition: transform .2s ease; }
#dashboard .now-league[open] > summary .now-league-toggle-label { display: none; }
#dashboard .now-league[open] > summary .now-league-toggle::before { content: "Hide full"; }
#dashboard .now-league[open] > summary .now-league-toggle svg { transform: rotate(180deg); }
#dashboard .now-league-full { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--border); }
#dashboard .now-league-full .league-table-scroll { margin-top: var(--space-3); }

.now-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1rem;
}

.now-match-centre {
  background: linear-gradient(180deg, #14100e 0%, #1a1210 100%) !important;
  background-color: #14100e !important;
  color: #f6f2ec !important;
  border-radius: 20px;
  padding: 1.25rem 1.15rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.now-match-centre-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.now-match-centre-head .eyebrow {
  color: var(--brand-orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.now-match-centre-team {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.now-mc-block {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.now-mc-block:last-child { border-bottom: 0; padding-bottom: 0.25rem; }

.now-mc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.now-mc-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Form dots */
.now-mc-form .now-form-dots {
  display: flex;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem 0;
}
.now-mc-form .now-form-line {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.now-mc-form .now-form-position {
  font-size: 0.72rem;
  color: var(--brand-orange);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Latest result block */
.now-mc-latest .now-recent-result-badge {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #14100e;
}
.now-mc-latest .now-recent-result-badge[data-outcome="win"] { background: #2eb670; color: white; }
.now-mc-latest .now-recent-result-badge[data-outcome="loss"] { background: #d9192e; color: white; }
.now-mc-latest .now-recent-result-badge[data-outcome="draw"] { background: var(--brand-orange); color: #14100e; }

.now-mc-latest .now-recent-result-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.now-mc-latest .now-recent-score {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f6f2ec;
}
.now-mc-latest .now-team-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f6f2ec;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.2;
}
@media (max-width: 420px) {
  .now-mc-latest .now-recent-result-teams { gap: 0.35rem; font-size: 0.85rem; }
  .now-mc-latest .now-team-name { font-size: 0.78rem; }
  .now-mc-latest .now-recent-score { font-size: 1.2rem; }
  .now-mc-latest .now-team { grid-template-columns: 32px 1fr; gap: 6px; }
  .now-mc-latest .now-team.away { grid-template-columns: 1fr 32px; }
  .now-mc-latest .now-team-crest { width: 32px; height: 32px; }
}
.now-mc-latest .now-team.home { text-align: left; }
.now-mc-latest .now-team.away { text-align: right; justify-content: flex-end; }
.now-mc-latest .now-recent-result-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.55rem;
}
.now-mc-latest #now-recent-result-cta {
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0;
  background: transparent;
  border: 0;
  letter-spacing: 0.02em;
}

/* Next fixture block */
.now-mc-next .now-countdown {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(245, 165, 36, 0.15);
  color: var(--brand-orange);
  border: 1px solid rgba(245, 165, 36, 0.35);
}
.now-mc-next .now-next-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f6f2ec;
}
.now-mc-next .now-team-name {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.2;
}
@media (max-width: 420px) {
  .now-mc-next .now-next-match-teams { gap: 0.35rem; }
  .now-mc-next .now-team-name { font-size: 0.8rem; }
  .now-mc-next .now-team { grid-template-columns: 32px 1fr; gap: 6px; }
  .now-mc-next .now-team.away { grid-template-columns: 1fr 32px; }
  .now-mc-next .now-team-crest { width: 32px; height: 32px; }
}
.now-mc-next .now-team.home { text-align: left; }
.now-mc-next .now-team.away { text-align: right; }
.now-mc-next .now-vs {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.now-mc-next .now-next-match-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.now-mc-next .now-next-match-meta > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.now-mc-next .now-next-match-meta dt {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin: 0;
}
.now-mc-next .now-next-match-meta dd {
  margin: 0;
  color: #f6f2ec;
  font-weight: 600;
}
.now-mc-next .now-next-match-empty p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}
.now-mc-next.empty .now-mc-block-head .now-countdown { display: none; }

/* Coach Assist card (Now variant) */
.now-hero .now-coach-assist.inline {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.35rem 1.2rem 1.25rem;
  border: 1px solid rgba(20, 16, 14, 0.06);
  box-shadow: 0 8px 28px -18px rgba(20, 16, 14, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.now-hero .now-coach-assist.inline .eyebrow {
  color: #d9192e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.now-hero .now-coach-assist-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #14100e;
  line-height: 1.25;
}
.now-hero .now-coach-assist-hint {
  margin: 0;
  color: rgba(20, 16, 14, 0.65);
  font-size: 0.85rem;
  line-height: 1.4;
}
.now-hero .now-coach-assist-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.75rem 1.1rem;
  background: #14100e;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  align-self: flex-start;
  cursor: pointer;
}
.now-hero .now-coach-assist-open svg {
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.now-coach-assist-hidden-cta { display: none !important; }

/* Override legacy standalone-card styling when these blocks live inside the
   unified match centre. They become plain sections with dividers, not cards. */
.now-match-centre .now-recent-result,
.now-match-centre .now-next-match,
.now-match-centre .now-next-match:not(.empty),
.now-match-centre .now-next-match.empty {
  background: transparent !important;
  border: 0 !important;
  padding: 1rem 0 !important;
  color: inherit !important;
  border-radius: 0 !important;
  gap: 0.55rem !important;
}
.now-match-centre .now-next-match::before { display: none !important; }
.now-match-centre .now-next-match-head { display: none !important; }
.now-match-centre .now-recent-result-head { display: none !important; }
.now-match-centre .now-recent-result-teams,
.now-match-centre .now-next-match-teams { color: #f6f2ec !important; }
.now-match-centre .now-team-name { color: #f6f2ec !important; }
.now-match-centre .now-recent-score { color: #f6f2ec !important; }
.now-match-centre .now-recent-result-meta { color: rgba(255,255,255,0.55) !important; }
.now-match-centre .now-next-match-meta > div { border: 0 !important; padding: 0 !important; }
.now-match-centre .now-next-match-meta dt { color: rgba(255,255,255,0.5) !important; }
.now-match-centre .now-next-match-meta dd { color: #f6f2ec !important; }
.now-match-centre .now-team-crest {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06) !important;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.now-match-centre .now-team-crest img { width: 100%; height: 100%; object-fit: contain; }
.now-match-centre .now-team-crest .club-crest-fallback { color: rgba(255,255,255,0.7) !important; }

/* Scale form dots down inside the match centre. */
.now-match-centre .now-form-dot {
  width: 28px; height: 28px; font-size: 0.72rem;
}
.now-match-centre .now-form-dots { gap: 6px; }

/* =====================================================================
   Coach Assist Hub — the smart landing surface
   ===================================================================== */

.coach-assist-hub {
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  color: #f6f2ec;
  background: linear-gradient(180deg, #0f0d0c 0%, #171310 100%);
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.coach-assist-hub::backdrop {
  background: rgba(10, 8, 6, 0.6);
  backdrop-filter: blur(4px);
}
.coach-assist-hub[open] {
  margin: auto auto 0;
}
@media (min-width: 640px) {
  .coach-assist-hub {
    border-radius: 24px;
    max-height: 88vh;
  }
  .coach-assist-hub[open] {
    margin: auto;
  }
}

.coach-assist-hub-shell {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.35rem 1.15rem 1.15rem;
  max-height: 92vh;
  overflow-y: auto;
}

/* Header */
.coach-assist-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.coach-assist-hub-head-copy .eyebrow {
  color: var(--brand-orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.coach-assist-hub-head-copy h2 {
  margin: 0.25rem 0 0.3rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}
.coach-assist-hub-head-copy p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.coach-assist-hub-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.coach-assist-hub-close svg {
  width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round;
}
.coach-assist-hub-close:hover { background: rgba(255, 255, 255, 0.1); }

/* Suggestion chips */
.coach-assist-hub-suggestions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 380px) {
  .coach-assist-hub-suggestions { grid-template-columns: 1fr 1fr; }
}
.ca-chip {
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  min-height: 64px;
}
.ca-chip:hover,
.ca-chip:focus-visible {
  background: rgba(245, 165, 36, 0.08);
  border-color: rgba(245, 165, 36, 0.35);
  outline: none;
}
.ca-chip:active { transform: scale(0.985); }
.ca-chip-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(245, 165, 36, 0.14);
  color: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ca-chip-icon svg {
  width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ca-chip-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.ca-chip-body strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.ca-chip-body span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Input row */
.coach-assist-hub-input {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ca-input-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ca-input-row:focus-within {
  border-color: rgba(245, 165, 36, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.ca-mic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 165, 36, 0.14);
  color: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ca-mic:hover { background: rgba(245, 165, 36, 0.22); }
.ca-mic[aria-pressed="true"] {
  background: #d9192e;
  color: #fff;
  animation: caMicPulse 1.2s ease-in-out infinite;
}
@keyframes caMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 25, 46, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(217, 25, 46, 0); }
}
.ca-mic svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#coach-assist-hub-text {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  padding: 0.3rem 0.2rem;
  outline: none;
}
#coach-assist-hub-text::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.ca-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-orange);
  color: #14100e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ca-send:hover { background: #ffb838; }
.ca-send:active { transform: scale(0.94); }
.ca-send svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: currentColor; stroke-linejoin: round; }
.ca-input-status {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  min-height: 1.05em;
  padding: 0 0.5rem;
}

/* =====================================================================
   Plan section — five-step plan overview + Scout + Final preparation
   ===================================================================== */

/* Numbered plan-step list on the Plan overview */
.plan-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.plan-step {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  min-height: 72px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.plan-step:hover,
.plan-step:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(217, 25, 46, 0.08);
  transform: translateY(-1px);
  outline: none;
}
.plan-step-number {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent, #d9192e);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.plan-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-step-title { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.25; }
.plan-step-sub { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.plan-step-status {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: #f5f5f7;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-step-status[data-state="done"] { color: #0a7f3e; background: #e6f6ec; }
.plan-step-status[data-state="progress"] { color: #b25e00; background: #fff2df; }
.plan-step-status[data-state="blocked"] { color: #a01123; background: #fbe6e8; }

/* Scout panel */
.plan-scout { display: flex; flex-direction: column; gap: 18px; }
.plan-scout-head .eyebrow { color: var(--accent, #d9192e); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.plan-scout-head h2 { margin: 4px 0 6px; font-size: 1.35rem; }
.plan-scout-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.plan-scout-block-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.plan-scout-block-hint { margin: 0 0 12px; }
.plan-scout-h2h {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  margin: 0;
}
@media (min-width: 480px) {
  .plan-scout-h2h { grid-template-columns: 1fr 1fr; }
}
.plan-scout-h2h > div {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.plan-scout-h2h dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.plan-scout-h2h dd { margin: 4px 0 0; font-weight: 600; color: var(--text); font-size: .95rem; line-height: 1.35; }

/* Form pills: last five completed division results for the next opponent. */
@media (min-width: 480px) {
  .plan-scout-h2h > .plan-scout-h2h-full { grid-column: 1 / -1; }
}
.plan-scout-form-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.plan-scout-form-pills.is-empty { color: var(--text-muted); font-style: italic; font-weight: 500; }
.plan-scout-form-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; letter-spacing: 0;
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  cursor: default; user-select: none;
}
.plan-scout-form-pill--w { background: var(--success, #16a34a); }
.plan-scout-form-pill--d { background: var(--text-muted, #6b7280); }
.plan-scout-form-pill--l { background: var(--danger, #b42335); }
.plan-scout-form-pills .plan-scout-form-caption { font-size: .78rem; color: var(--text-muted); font-weight: 500; margin-left: 4px; }

.plan-scout-notes { display: flex; flex-direction: column; gap: 12px; }
.plan-scout-readout-list { margin: 0; display: grid; gap: var(--space-3); }
.plan-scout-readout-list > div { display: grid; gap: 2px; }
.plan-scout-readout-list dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.plan-scout-readout-list dd { margin: 0; font-size: var(--font-size-md); color: var(--text); }
.plan-scout-readout-list dd.is-empty { color: var(--text-muted); font-style: italic; }
.plan-scout-note { display: flex; flex-direction: column; gap: 4px; }
.plan-scout-note-label { font-size: .8rem; font-weight: 600; color: var(--text); }
.plan-scout-note input,
.plan-scout-note textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .92rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-height: 44px;
  box-sizing: border-box;
}
.plan-scout-note input:focus,
.plan-scout-note textarea:focus {
  outline: none;
  border-color: var(--accent, #d9192e);
  box-shadow: 0 0 0 3px rgba(217, 25, 46, 0.12);
}
.plan-scout-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.plan-scout-status { margin: 8px 0 0; font-size: .82rem; }

/* Final preparation */
.plan-final-prep { display: flex; flex-direction: column; gap: 18px; }
.plan-final-prep-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.plan-final-prep-head .eyebrow { color: var(--accent, #d9192e); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.plan-final-prep-head h2 { margin: 4px 0 6px; font-size: 1.35rem; }
.plan-final-prep-status {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: #f5f5f7;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-fp-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.plan-fp-block-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.plan-fp-roles,
.plan-fp-setpieces {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 480px) {
  .plan-fp-roles, .plan-fp-setpieces { grid-template-columns: 1fr 1fr; }
}
.plan-fp-role,
.plan-fp-sp {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: #fafafa;
  border-radius: 10px;
  min-height: 52px;
  justify-content: center;
}
.plan-fp-role-label,
.plan-fp-sp-label {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.plan-fp-role-value,
.plan-fp-sp-value {
  margin-top: 2px;
  font-weight: 700;
  color: #111 !important;
  font-size: 1rem;
}
/* Match card field values — same treatment (Starting XI, Subs, Team official). */
.plan-match-card-preview dd,
.plan-match-card-preview li,
.plan-mc-value {
  color: #111 !important;
  font-weight: 600;
}
.plan-fp-briefing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Manual availability override — segmented Yes/No/? per player row */
.plan-parent-poll-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
}
.plan-parent-poll-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}
.plan-parent-poll-main .plan-parent-poll-name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pp-manual-set { justify-self: start; }
.plan-parent-poll-reminder {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}
.pp-manual-set {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border, #d8d3cc);
  background: #fff;
  align-self: center;
}
.pp-manual-set .pp-set-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 36px;
  font: inherit;
  font-weight: 600;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pp-manual-set .pp-set-btn + .pp-set-btn {
  border-left: 1px solid var(--border, #d8d3cc);
}
.pp-manual-set .pp-set-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #1a1a1a);
}
.pp-manual-set .pp-set-btn:focus-visible {
  outline: 2px solid rgba(217, 25, 46, 0.35);
  outline-offset: -2px;
}
.pp-manual-set .pp-set-yes.is-active {
  background: #1f8f4a;
  color: #fff;
}
.pp-manual-set .pp-set-no.is-active {
  background: #d9192e;
  color: #fff;
}
.pp-manual-set .pp-set-clear.is-active {
  background: #f0eae0;
  color: var(--text, #1a1a1a);
}
.pp-manual-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--text, #1a1a1a);
  vertical-align: middle;
}

/* Step 5 · Final preparation — tappable rows and picker dialog */
.plan-fp-role.is-tappable,
.plan-fp-sp.is-tappable {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.plan-fp-role.is-tappable:hover,
.plan-fp-sp.is-tappable:hover {
  background: rgba(217, 25, 46, 0.04);
}
.plan-fp-role.is-tappable:focus-visible,
.plan-fp-sp.is-tappable:focus-visible {
  outline: 2px solid rgba(217, 25, 46, 0.45);
  outline-offset: 2px;
}
.plan-fp-role.is-tappable::after,
.plan-fp-sp.is-tappable::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #8a8a8a);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.plan-fp-role.is-tappable .plan-fp-role-value,
.plan-fp-sp.is-tappable .plan-fp-sp-value {
  padding-right: 24px; /* leave room for the chevron */
}

/* Picker dialog */
dialog.fp-picker-dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(92vw, 420px);
  max-height: 80vh;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
dialog.fp-picker-dialog::backdrop {
  background: rgba(15, 15, 15, 0.45);
}
.fp-picker-form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.fp-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e6e2dc);
}
.fp-picker-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.fp-picker-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted, #6b6b6b);
  min-height: 36px;
  min-width: 36px;
}
.fp-picker-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.fp-picker-list li { margin: 0; }
.fp-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  min-height: 48px;
  border: 0;
  background: #ffffff;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  cursor: pointer;
}
.fp-picker-option:hover { background: rgba(0, 0, 0, 0.05); }
.fp-picker-option.is-current {
  background: rgba(217, 25, 46, 0.08);
  color: #a01324;
  font-weight: 700;
}
.fp-picker-option .fp-picker-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #b3b3b3;
  background: #ffffff;
  color: transparent;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.fp-picker-option.is-current .fp-picker-check {
  border-color: #d9192e;
  background: #d9192e;
  color: #ffffff;
}
.fp-picker-option .fp-picker-name {
  flex: 1;
  color: inherit;
}
.fp-picker-empty {
  padding: 16px;
  color: var(--muted, #6b6b6b);
  font-style: italic;
}
.fp-picker-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border, #e6e2dc);
}
.fp-picker-clear {
  color: var(--accent, #d9192e);
  font-weight: 600;
}

/* Plan shows Line-up, Tactics, Match Plan, Role assignment.
   Only Game management is Play-only. */
body[data-tab="plan"] .match-day-disclosure[data-match-day-phase="game-management"] {
  display: none !important;
}
/* In Play, hide the two Plan-only sections (they still live in Plan). */
body[data-tab="play"] .match-day-disclosure[data-match-day-phase="lineup"],
body[data-tab="play"] .match-day-disclosure[data-match-day-phase="tactics-board"] {
  display: none !important;
}

/* Final prep — responsibility block eyebrow */
.plan-fp-block-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.plan-fp-responsibilities {
  padding-left: 0;
}

/* Plan overview status pills — live values driven by real state */
.plan-step-status {
  transition: background 0.15s ease, color 0.15s ease;
}
.plan-step-status.plan-step-status-todo {
  background: #ece7de;
  color: #6b6b6b;
}
.plan-step-status.plan-step-status-progress {
  background: #fff2cc;
  color: #7a5b00;
}
.plan-step-status.plan-step-status-done {
  background: #d9f2e0;
  color: #1f8f4a;
}
.plan-step-status.plan-step-status-blocked {
  background: #f8d7da;
  color: #a01b2a;
}

/* Coach responsibility rows — Sep 2026 v3: single dark card, condensed, inline SVG icons.
   Matches the .now-match-centre / Action Center visual language. */
.plan-fp-responsibilities {
  background: linear-gradient(180deg, #14100e 0%, #1a1210 100%);
  color: #f6f2ec;
  border-radius: 20px;
  padding: 1.1rem 1.15rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
}
.plan-fp-responsibilities .plan-fp-block-eyebrow {
  display: block;
  color: var(--brand-orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.plan-fp-responsibilities .plan-fp-block-title {
  color: #f6f2ec;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}
.plan-fp-responsibilities > p.muted-copy {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}
.plan-fp-roles {
  display: block;
  grid-template-columns: none;
}
.plan-fp-roles .plan-fp-role {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 0;
  min-height: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.plan-fp-roles .plan-fp-role:last-child { border-bottom: 0; }
.plan-fp-roles .plan-fp-role:hover,
.plan-fp-roles .plan-fp-role:focus-within {
  background: rgba(255, 255, 255, 0.03);
}
.plan-fp-role .plan-fp-role-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.plan-fp-role .plan-fp-role-labelrow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.plan-fp-role .plan-fp-role-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.plan-fp-role .plan-fp-role-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: #f6f2ec !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.25;
}
.plan-fp-role .plan-fp-role-value .plan-fp-role-names { color: #f6f2ec !important; }
.plan-fp-role .plan-fp-role-names { min-width: 0; }
.plan-fp-role .plan-fp-role-empty {
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  font-style: normal;
}
.plan-fp-role .plan-fp-role-default {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.3;
}
.plan-fp-role .plan-fp-home-tag,
.plan-fp-role .plan-fp-multi-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
}
.plan-fp-role .plan-fp-home-tag { background: rgba(90, 155, 235, 0.18); color: #9ec5ff; }
.plan-fp-role .plan-fp-multi-tag { background: rgba(245, 165, 36, 0.18); color: #f5c774; }
.plan-fp-role-cog {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  padding: 6px;
  border-radius: 8px;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.plan-fp-role-cog:hover, .plan-fp-role-cog:focus-visible {
  background: rgba(255,255,255,0.08);
  color: var(--brand-orange);
  outline: none;
}
.plan-fp-role-chev {
  color: rgba(255,255,255,0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px 0 4px;
}
.pp-auto-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(46, 182, 112, 0.2);
  color: #7ee0a3;
  vertical-align: middle;
  text-transform: uppercase;
}
.pp-manual-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
  vertical-align: middle;
  text-transform: uppercase;
}
.fp-default-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 0;
  font-size: 14px;
  color: #333;
}
.fp-default-help {
  padding: 0 14px 4px;
}

/* ============ PLAY-TAB TOUCHLINE MODE ============ */
/* Hide Match Plan and Role Assignment on Play; they live in Plan. */
body[data-tab="play"] [data-plan-only] { display: none !important; }

/* Sticky game clock on Play so it never scrolls off. */
body[data-tab="play"] .game-clock-panel {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface, #fff);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  padding-block: 8px;
}
body[data-tab="play"] .game-clock-panel #game-clock {
  font-size: clamp(48px, 12vw, 72px);
  line-height: 1;
}
body[data-tab="play"] .game-clock-panel details.game-clock-tools { display: none; }

/* Compact "Next planned change" card on Play */
body[data-tab="play"] .game-next-panel { padding: 12px 14px; }
body[data-tab="play"] .game-next-panel h2 { font-size: 14px; margin: 2px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
body[data-tab="play"] .game-next-panel #next-change strong { display: block; font-size: 16px; line-height: 1.3; }
body[data-tab="play"] .game-next-panel #next-change span { display: block; font-size: 13px; color: var(--muted, #6b7280); margin-top: 4px; }
body[data-tab="play"] .game-next-panel #next-change > div { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 10px; }
body[data-tab="play"] .game-next-panel #next-change button.primary-action { min-height: 48px; }
body[data-tab="play"] .game-next-panel #next-change button.secondary-action { min-height: 48px; font-size: 13px; padding: 8px 10px; }

/* Fairness strip: single-row grid on mobile, no scroll on 15 players */
.game-fairness-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px 4px 4px;
}
.fairness-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: #eef1f4;
  color: #111;
  min-height: 56px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
  transition: transform .12s ease;
}
.fairness-tile:active { transform: scale(0.97); }
.fairness-name {
  font-size: 11px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fairness-min { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.fairness-min small { font-size: 10px; font-weight: 600; opacity: .8; margin-left: 1px; }
.fairness-state { font-size: 10px; opacity: .7; }
.fairness-positive { background: #dff5e3; border-color: #37a765; color: #0e3f24; }
.fairness-warning { background: #fff2cc; border-color: #e2a72c; color: #4a2f00; }
.fairness-neutral { background: #ececee; border-color: #d0d3d8; color: #5a5f66; }

/* Fairness legend under the heading */
.fairness-legend { font-size: 12.5px; margin: 4px 0 0; }

/* Details area for per-player editing collapsed by default */
.fairness-details { margin-top: 10px; }
.fairness-details > summary {
  padding: 10px 12px;
  background: #f3f5f8;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.fairness-details > summary::-webkit-details-marker { display: none; }
.fairness-details[open] > summary { margin-bottom: 8px; }

/* Highlight when jumped from a pill */
.game-player.highlight { outline: 2px solid var(--brand-red, #d9192e); outline-offset: 2px; transition: outline-color .3s ease; }

/* Extra: on Play, keep the game management accordion open + hide its collapse chevron */
body[data-tab="play"] .match-day-disclosure[data-match-day-phase="game-management"] .match-day-summary { pointer-events: none; }
body[data-tab="play"] .match-day-disclosure[data-match-day-phase="game-management"] .match-day-summary::after { display: none; }

/* Hide the microphone-onboarding banner on Play; coaches enable once on Now. */
body[data-tab="play"] #microphone-onboarding { display: none !important; }

/* Compact Play hero to give match-day content the space */
body[data-tab="play"] .play-header {
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
}
body[data-tab="play"] .play-title { font-size: 20px; margin: 2px 0; }
body[data-tab="play"] .play-meta { display: none; }

/* Sticky chip inside hero */
.play-status-chip[data-state="running"] .play-status-dot { background: #37a765; animation: pulse 1.4s ease-in-out infinite; }
.play-status-chip[data-state="paused"] .play-status-dot { background: #e2a72c; }
.play-status-chip[data-state="ended"] .play-status-dot { background: #6b7280; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Compact Game management panel header on Play */
body[data-tab="play"] .match-day-summary { padding: 8px 12px; }
body[data-tab="play"] .match-day-summary small { display: none; }

/* --- Live pitch (Play tab v2) --------------------------------------- */
body[data-tab="plan"] [data-play-only] { display: none !important; }

.live-subs-panel {
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.live-clock-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  margin: 0 calc(var(--space-3) * -1) var(--space-3);
  background: #101a16;
  color: #f4f5f4;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.live-clock-time {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.live-clock-meta { display: grid; gap: 2px; font-size: var(--text-xs); }
.live-clock-period { color: rgba(255,255,255,.72); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.live-clock-status { color: #7CFC9C; font-weight: 700; }
.live-clock-status.paused { color: #f0c348; }
.live-clock-status.ended { color: rgba(255,255,255,.5); }
.live-clock-controls { display: flex; gap: var(--space-1); }
.live-clock-btn {
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
  color: #f4f5f4;
  font-weight: 700;
  font-size: var(--text-sm);
}
.live-clock-btn.primary { background: #d9192e; border-color: #d9192e; }
.live-clock-btn.ghost { background: transparent; }

.live-subs-hint {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(217,25,46,.06);
  border-left: 3px solid #d9192e;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.4;
}
.live-subs-hint.active {
  background: rgba(217,25,46,.16);
  color: var(--text);
  font-weight: 700;
}

/* --- Play tab: KIOSK MODE ---
   Match-day: nothing on screen that isn't helping the sub decision.
   Hide top brand bar, page hero, and any parent chrome. Keep only:
     sticky clock • pitch • bench • (bottom nav).
   Rule: if it doesn't help the coach in the next 30 seconds, it goes. */
body[data-tab="play"] .prototype-bar { display: none !important; }
body[data-tab="play"] .play-header { display: none !important; }
body[data-tab="play"] .fixture-page-header { display: none !important; }
body[data-tab="play"] .microphone-onboarding { display: none !important; }
.live-play-root { padding: 0; margin: 0; }

/* Today's focus — read-only pre-match summary above the live pitch. */
.todays-focus { margin: 0 0 var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.todays-focus > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.todays-focus > summary::-webkit-details-marker { display: none; }
.todays-focus > summary > span { min-width: 0; display: grid; gap: 2px; }
.todays-focus > summary strong { font-size: var(--text-base); }
.todays-focus > summary small { color: var(--muted); font-size: var(--text-xs); }
.todays-focus > summary::after { content: "+"; color: var(--brand-orange); font-size: var(--text-xl); line-height: 1; }
.todays-focus[open] > summary::after { content: "\2013"; }
.todays-focus-body { padding: 0 var(--space-4) var(--space-4); display: grid; gap: var(--space-4); }
.todays-focus-phase { display: grid; gap: var(--space-2); }
.todays-focus-phase .eyebrow { display: block; }
.todays-focus-phase ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.todays-focus-phase li { padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.todays-focus-phase li strong { display: block; font-size: var(--text-sm); }
.todays-focus-phase li small { color: var(--muted); font-size: var(--text-xs); }
.todays-focus-phase.empty p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.todays-focus-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.todays-focus-role { padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.todays-focus-role span { display: block; color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.todays-focus-role strong { font-size: var(--text-sm); }

/* Single lean topbar: clock • half • Start/Pause/End half • (i) */
.live-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #101a16;
  color: #f4f5f4;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
}
.live-topbar-time {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.live-topbar-half {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-full);
}
.live-topbar-btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #f4f5f4;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.live-topbar-btn.primary { background: #d9192e; border-color: #d9192e; }
.live-topbar-btn:active { transform: translateY(1px); }
.live-topbar-info {
  width: 28px; height: 28px;
  margin-left: auto;
  display: grid; place-items: center;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  font-style: italic;
  color: rgba(255,255,255,.75);
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.live-clock-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6ee7a4;
}
.live-clock-status.paused { color: #f0b04a; }
.live-clock-status.ended  { color: rgba(255,255,255,.55); }

/* Boundary decisions need wide touch targets, not three squeezed text columns. */
.live-topbar.at-period-limit {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 10px;
  padding: 12px;
}
.live-topbar.at-period-limit .live-topbar-time { grid-column: 1; grid-row: 1; }
.live-topbar.at-period-limit .live-topbar-half { grid-column: 2; grid-row: 1; }
.live-topbar.at-period-limit .live-clock-status { grid-column: 3; grid-row: 1; text-align: right; font-size: 12px; }
.live-topbar.at-period-limit #live-clock-start { grid-column: 1 / 3; grid-row: 2; }
.live-topbar.at-period-limit #live-clock-pause { grid-column: 3; grid-row: 2; }
.live-topbar.at-period-limit .live-topbar-btn { min-height: 48px; white-space: nowrap; padding: 10px; }
#live-demo-tools { margin: 8px 0; font-size: 14px; }
#live-demo-tools summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; }
#live-demo-tools p { margin: 4px 0 10px; color: var(--muted); }
#live-demo-tools .live-topbar-btn { min-height: 48px; background: #101a16; color: #f4f5f4; }
#live-recording-options { margin: 8px 0; font-size: 14px; }
#live-recording-options summary { cursor: pointer; min-height: 44px; align-content: center; }
#live-recording-options button { min-height: 48px; color: #f4f5f4; background: #101a16; }
.show-completed-summary > :not(#live-completed-summary):not(#live-demo-tools) { display: none !important; }
#live-completed-summary { padding: 22px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface, #fff); }
#live-completed-summary h2 { margin: 8px 0; font-size: 24px; }
#live-completed-summary h2:focus { outline: none; }
#live-completed-summary p { line-height: 1.5; }
.completed-duration { display: grid; gap: 4px; margin: 22px 0; }
.completed-duration strong { font-size: 36px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.completed-duration span { font-size: 14px; color: var(--muted); }
.completed-warning { padding: 12px; border-left: 3px solid #ce8623; background: #fff5e3; color: #513817; border-radius: 4px; }
.completed-actions { display: grid; gap: 10px; margin: 20px 0; }
.completed-actions button { min-height: 48px; padding: 12px 16px; text-align: left; font-size: 16px; }
#live-completed-summary details summary { min-height: 44px; align-content: center; cursor: pointer; }

/* Helper text sits between the topbar and the pitch on a light body background,
   so hardcode a dark pill with amber text — reads cleanly on iPhone in sunlight. */
.live-help-tooltip {
  margin: 8px 12px 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-orange);
  background: #101a16;
  border: 1px solid rgba(245,165,36,.35);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Pitch container joins seamlessly onto the topbar (no double radius) */
.live-subs-panel .pitch { border-radius: 0; border-top: 0; }

/* Play tab uses Plan's `.pitch` container directly — no separate grid needed.
   Extras below: live-minute badge colour + pulse animation on selected sub target. */
.pitch-slot .pitch-slot-number.live-min-warn { color: #f0b04a; }
.pitch-slot .pitch-slot-number.live-min-ok { color: #b5f2c6; }
.pitch-slot.live-pulse { animation: livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,25,46,0); }
  50% { box-shadow: 0 0 0 4px rgba(217,25,46,.32); }
}
/* Selected tile: amber outline matching active bottom-nav (var(--brand-orange)) for consistency. */
.pitch-slot.selected { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(245,165,36,.35); transform: translateY(-2px); }
.live-bench {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2, rgba(0,0,0,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
[data-theme="dark"] .live-bench { background: rgba(255,255,255,.02); }
.live-bench .eyebrow { display: block; margin-bottom: var(--space-2); }
.live-bench-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.live-bench-tile {
  min-height: 60px;
  padding: var(--space-2);
  display: grid;
  gap: 2px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.live-bench-tile.selected {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(245,165,36,.3);
}
.live-bench-tile.pulse { animation: livePulse 1.2s ease-in-out infinite; }
.live-bench-tile-name { font-size: var(--text-sm); font-weight: 800; }
.live-bench-tile-minutes { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.live-fairness-summary {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2, rgba(0,0,0,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.live-fairness-dot { width: 10px; height: 10px; border-radius: 50%; background: #1a7a3a; }
.live-fairness-dot.warn { background: #b8631a; }
.live-fairness-dot.bad { background: #d9192e; }

/* Play empty state — shown when line-up isn't ready yet. Shortcut back to Plan. */
.live-empty-state {
  padding: 24px 20px;
  text-align: center;
  color: #f4f5f4;
  background: #101a16;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.live-empty-eyebrow {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #f0b04a;
  background: rgba(240,176,74,.14);
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.live-empty-state h2 { font-size: 18px; margin: 0 0 8px; }
.live-empty-state p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0 0 16px; line-height: 1.45; }
.live-empty-cta {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #d9192e;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* Shared Plan/Play pitch: selection always sits on the card edge, including duty cards. */
.pitch-slot.filled.has-duty.selected {
  box-shadow: 0 0 0 4px var(--brand-orange), 0 0 0 8px rgba(245,165,36,.4), 0 12px 26px rgba(4, 18, 10, .5), inset 0 0 0 1px rgba(235, 198, 75, .5);
  transform: scale(calc(var(--pitch-depth-scale, 1) * 1.05)) translateY(-2px);
  z-index: 3;
}
.pitch-slot-open { opacity: .8; cursor: pointer; border-color: rgba(245,165,36,.55); }
.pitch-slot-open:hover, .pitch-slot-open:focus-visible { opacity: 1; border-color: var(--brand-orange); background: rgba(245,165,36,.14); }
.pitch-slot-open.selected { opacity: 1; border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(245,165,36,.35); }
.pitch-slot-open[disabled] { opacity: .5; cursor: default; pointer-events: none; }
/* Clip-path masks outer shadows, so the selected card carries its 4px amber edge inside its own shape. */
.pitch-slot.filled.selected {
  outline: 0;
  box-shadow: 0 9px 20px rgba(4, 18, 10, .38), inset 0 1px rgba(255, 255, 255, .09);
}
.pitch-slot.filled.selected::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  inset: 1px;
  box-sizing: border-box;
  clip-path: polygon(8% 0, 92% 0, 100% 13%, 96% 88%, 50% 100%, 4% 88%, 0 13%);
  border: 4px solid var(--brand-orange);
}
.pitch-slot.filled.has-duty.selected {
  box-shadow: 0 9px 20px rgba(4, 18, 10, .38), inset 0 0 0 1px rgba(235, 198, 75, .5);
}

/* Season Fairness Report */
.fairness-report { display: flex; flex-direction: column; gap: 8px; }
.fairness-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 10.5px; color: var(--muted); line-height: 1.3;
}
.fairness-legend-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 3px;
}
.fairness-legend-dot.fairness-positive { background: var(--positive); }
.fairness-legend-dot.fairness-warning { background: var(--warning); }
.fairness-legend-dot.fairness-negative { background: var(--danger); }
.fairness-rows { display: flex; flex-direction: column; gap: 3px; }
.fairness-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font: inherit; text-align: left; width: 100%;
}
button.fairness-row { cursor: pointer; }
button.fairness-row:active { transform: scale(0.995); }
.fairness-row-name strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
.fairness-row-name small { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; }
.fairness-row-value { text-align: right; flex: none; }
.fairness-row-value strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fairness-row-value small { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.fairness-row.fairness-positive { box-shadow: inset 3px 0 0 var(--positive); }
.fairness-row.fairness-positive .fairness-row-value strong { color: var(--positive); }
.fairness-row.fairness-warning { background: var(--warning-soft); box-shadow: inset 3px 0 0 var(--warning); }
.fairness-row.fairness-warning .fairness-row-value strong { color: var(--warning); }
.fairness-row.fairness-negative { background: var(--danger-soft); box-shadow: inset 3px 0 0 var(--danger); }
.fairness-row.fairness-negative .fairness-row-value strong { color: var(--danger); }
.fairness-row.fairness-neutral { opacity: .68; }
.fairness-row-missed {
  display: block; font-size: 10px; color: var(--muted); margin-top: 3px;
  font-style: italic;
}
.fairness-note { font-size: 10.5px; color: var(--muted); margin: 4px 0 0; }
.fairness-note-warning { color: var(--warning); }
.fairness-empty { padding: 12px; }
.fairness-empty p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.fairness-player-breakdown { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.fairness-player-headline {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 12px; background: #f6f7f9; border-radius: 12px;
}
.fairness-player-headline > div strong { display: block; font-size: 18px; font-weight: 800; }
.fairness-player-headline > div small { display: block; font-size: 11px; color: #5a5f66; margin-top: 2px; }
.fairness-fixture-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fairness-fixture-table th, .fairness-fixture-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid #e5e6ea;
}
.fairness-fixture-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #5a5f66; }
.fairness-fixture-mins { text-align: right; white-space: nowrap; }
.fairness-fixture-mins small { color: #5a5f66; margin-left: 4px; }
.fairness-fixture-row.fairness-positive { background: #f2fbf5; }
.fairness-fixture-row.fairness-warning { background: #fffbeb; }
.fairness-fixture-row.fairness-negative { background: #fdf1f3; }
.fairness-fixture-row.fairness-neutral td { color: #6b7078; }

/* Phase 2 concept board (Manage) */
.phase2-concept-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.phase2-lock-panel .panel-heading { margin-bottom: var(--space-4); }
.phase2-lock-form { display: grid; gap: var(--space-3); max-width: 320px; }
.phase2-lock-form input { font: inherit; font-size: 1.25rem; letter-spacing: 0.4em; text-align: center; padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.phase2-lock-form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.phase2-lock-form .primary-action { width: 100%; }
.phase2-lock-status { margin: 0; min-height: 1.25em; font-size: 0.875rem; color: var(--text-muted); }
.phase2-lock-status:not(:empty) { color: var(--error, #b3271c); }
.phase2-concept-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.phase2-concept-card img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border); background: var(--surface); }
.zoomable-image { cursor: zoom-in; }
.zoomable-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.image-lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: none; background: transparent; }
.image-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.image-lightbox::backdrop { background: rgb(0 0 0 / .92); }
.image-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-md); }
.image-lightbox-close { position: fixed; top: max(var(--space-4), env(safe-area-inset-top)); right: max(var(--space-4), env(safe-area-inset-right)); background: rgb(0 0 0 / .6); color: #fff; border: 1px solid rgb(255 255 255 / .3); border-radius: var(--radius-full, 999px); z-index: 2; }
.phase2-concept-caption { padding: var(--space-4); display: grid; gap: var(--space-2); }
.phase2-concept-caption strong { font-size: var(--text-base); }
.phase2-concept-caption p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }

/* ---- Player Profile card carousel (Develop tab player picker) — rebuild v2 ----
   Changes from the reverted v1 (commit b1f5b67):
   1. No player photos. Medallion shows initials on a tone-tinted ring instead of
      <img src="avatar_url"> or a generic shirt icon. Removes async image loading
      and the safeguarding/consent concern around per-player photos entirely.
   2. Track uses native CSS scroll-snap (overflow-x + scroll-snap-type) instead of
      a JS-computed `transform: translateX()` driven by custom pointer capture.
      There is NO pointerdown/pointermove/pointerup/setPointerCapture code at all —
      that custom gesture handling was the confirmed root cause of the live scroll/
      navigation hijack bug (setPointerCapture on the track stole every subsequent
      touch event from the browser, blocking native page scroll-chaining). Native
      horizontal scroll containers do not intercept vertical page scroll.
   3. Selecting a card is click-only (buttons, dots, direct card tap, or the
      "Choose player" dropdown) — scrolling the track never changes selection.
*/
.player-squad-tally { color: var(--faint); font-size: var(--text-xs); margin: 0 0 var(--space-2); }

.player-urgency-strip { display: flex; gap: 8px; margin: 0 0 var(--space-4); flex-wrap: wrap; }
.player-urgency-pill { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.player-urgency-pill svg { width: 13px; height: 13px; flex: 0 0 auto; }
.player-urgency-pill.pill-fire { background: rgba(243, 58, 79, .14); color: #ff8a95; }
.player-urgency-pill.pill-amber { background: rgba(245, 165, 36, .14); color: #ffc670; }
.player-urgency-pill.pill-ok { background: rgba(141, 213, 166, .12); color: var(--positive); }

.player-carousel-outer { position: relative; max-width: 420px; margin: 0 auto; padding: 10px 0 0; }
.player-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.player-carousel-track::-webkit-scrollbar { display: none; }
.player-slide { flex: 0 0 auto; width: 78%; padding: 0 5%; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; }

.player-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  transform: scale(.88);
  opacity: .4;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22, .9, .32, 1), opacity .3s ease, box-shadow .3s ease;
}
.player-slide.is-active .player-card,
.player-card.is-active { transform: scale(1); opacity: 1; cursor: default; }
.player-card.is-active.tone-fire { box-shadow: 0 20px 44px -14px rgba(243, 58, 79, .45), 0 0 0 1px rgba(243, 58, 79, .25); }
.player-card.is-active.tone-amber { box-shadow: 0 20px 44px -14px rgba(245, 165, 36, .4), 0 0 0 1px rgba(245, 165, 36, .22); }
.player-card.is-active.tone-neutral { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04); }

.player-card-bg {
  position: absolute; inset: 0;
  /* Always a hardcoded-dark base (not var(--surface)) so the card reads the
     same whether the coach's device is in light or dark mode. Tone only adds
     a coloured glow on top — it never controls base contrast. */
  background: linear-gradient(165deg, #202723 0%, #111613 72%);
}
.player-card.tone-fire .player-card-bg {
  background:
    radial-gradient(130% 80% at 15% -10%, rgba(243, 58, 79, .38), transparent 58%),
    radial-gradient(100% 70% at 105% 110%, rgba(243, 58, 79, .14), transparent 55%),
    linear-gradient(165deg, #241417 0%, #16100f 72%);
}
.player-card.tone-amber .player-card-bg {
  background:
    radial-gradient(130% 80% at 15% -10%, rgba(245, 165, 36, .32), transparent 58%),
    radial-gradient(100% 70% at 105% 110%, rgba(245, 165, 36, .12), transparent 55%),
    linear-gradient(165deg, #241d10 0%, #16130a 72%);
}
.player-card.tone-neutral .player-card-bg {
  background:
    radial-gradient(120% 70% at 20% -10%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(165deg, #202723 0%, #111613 72%);
}
.player-card-bg::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 90px);
  mix-blend-mode: overlay;
}

.player-card-flag {
  position: absolute; top: 14px; left: 0; z-index: 3; max-width: calc(100% - 34px);
  display: flex; align-items: center; gap: 5px;
  color: var(--action-text);
  font-size: 11px; font-weight: 800; letter-spacing: .01em; line-height: 1.3;
  padding: 6px 13px 6px 10px; border-radius: 0 16px 16px 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.player-card-flag svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.player-card-flag.flag-fire { background: linear-gradient(100deg, var(--accent), var(--accent-hover)); }
.player-card-flag.flag-amber { background: linear-gradient(100deg, var(--brand-orange), #ffc670); color: #241d10; }

.player-status-check {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(141, 213, 166, .14);
  display: flex; align-items: center; justify-content: center;
  color: var(--positive);
}
.player-status-check svg { width: 14px; height: 14px; }

.player-roster-tag {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; color: var(--muted); background: rgba(0, 0, 0, .35); border: 1px solid var(--border);
}

.player-card-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px 0; }

/* Jersey + squad number replaces the old circular photo/initials medallion —
   same visual language as the shirt numbers on Team Selection. All colours
   here are hardcoded (not theme tokens) so the card is always legible
   regardless of the coach's device light/dark setting. */
.player-jersey-badge { position: relative; width: 96px; height: 96px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.player-jersey-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: rgba(255, 255, 255, .07);
  stroke: var(--jersey-accent, #6e6e66);
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.player-jersey-number { position: relative; z-index: 1; font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -.01em; padding-top: 6px; }

.player-card-name { position: relative; z-index: 2; font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -.015em; margin: 0; text-align: center; }
.player-card-position { position: relative; z-index: 2; color: rgba(255, 255, 255, .62); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; text-align: center; }

.player-card-stats { position: relative; z-index: 2; display: flex; width: 100%; margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .09); }
.player-card-stat { flex: 1; text-align: center; padding: 12px 4px 16px; }
.player-card-stat strong { display: block; font-size: 18px; font-weight: 900; color: #fff; }
.player-card-stat span { display: block; font-size: 10px; color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.player-card-stat + .player-card-stat { border-left: 1px solid rgba(255, 255, 255, .09); }

.player-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--space-3); }
.player-card-nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; padding: 0; }
.player-card-nav:disabled { opacity: .4; cursor: default; }
.player-card-dots { display: flex; align-items: center; gap: 5px; overflow-x: auto; max-width: 180px; scrollbar-width: none; }
.player-card-dots::-webkit-scrollbar { display: none; }
.player-card-dots span { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--border); transition: background .2s, width .2s; cursor: pointer; }
.player-card-dots span.active { width: 16px; border-radius: 4px; background: var(--accent); }
.player-card-dots span.dot-fire.active { background: var(--accent); }
.player-card-dots span.dot-amber.active { background: var(--brand-orange); }

.player-card-position-text { text-align: center; color: var(--muted); font-size: var(--text-xs); margin: var(--space-2) 0 0; }

@media (max-width: 430px) {
  .player-carousel-outer { max-width: none; }
}

/* Carousel hidden on Develop tab — was rendering an empty void on mobile.
   Urgency pills ("N urgent · N due soon · N all clear") kept.
   Player-permission-note above already shows "N active · N in this season",
   so the duplicate .player-squad-tally is hidden.
   Player selection still works via the #player-selector dropdown below. */
.player-carousel-outer,
.player-carousel-controls,
.player-card-position-text,
.player-squad-tally { display: none; }

/* Close the vertical gap left where the carousel used to be:
   • Collapse empty #players-status (min-height comes from .section-status)
   • Kill the heading's padding-top/bottom-margin so it sits tight below the tally
   • Give the dropdown breathing room */
#players-status:empty { display: none; }
.individual-player-heading { padding-top: 0; margin-bottom: var(--space-3); }
.player-urgency-strip { margin-bottom: var(--space-4); }

/* No player photos. Jersey number is the identity everywhere.
   Hides the photo picker in the Edit player modal; the coach photo
   field is deliberately left in place. */
#player-photo-field { display: none !important; }

/* Number-based avatar: render #NN or initial as a strong tabular numeral.
   Do NOT override `.player-avatar > span` (it already sets width/height 100%). */
.player-avatar.player-avatar-number { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Parent-poll availability chip: jersey number replaces the football glyph.
   Matches the .pp-chip-glyph slot (20px) so the row layout is unchanged. */
.pp-chip-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 4px;
  flex-shrink: 0;
  color: var(--warning);
  font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* -------------------------------------------------------------------
   Half Orange polish for the coach parent-poll review dialog
   (composegate: coach reviews content BEFORE WhatsApp send)
   ------------------------------------------------------------------- */
.parent-links-dialog .dialog-heading { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.parent-links-dialog .dialog-heading .eyebrow { color: var(--brand-orange); }
.parent-links-dialog .dialog-context {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Review panel — the whole point of composegate. Give it a brand-orange
   accent bar on top, roomier padding, and a clear "step 1" feel. */
.parent-links-dialog .parent-detail-panel {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.parent-links-dialog .parent-detail-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-orange);
}
.parent-links-dialog .parent-detail-panel summary {
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.005em;
}
.parent-links-dialog .parent-detail-panel summary::-webkit-details-marker { display: none; }
.parent-links-dialog .parent-detail-panel summary::marker { content: ""; }
.parent-links-dialog .parent-detail-panel summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.parent-links-dialog .parent-detail-panel[open] summary::after { transform: rotate(-135deg); }

.parent-links-dialog #parent-details-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-5);
}
.parent-links-dialog #parent-details-form label {
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.parent-links-dialog #parent-details-form .optional-label {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0;
}
.parent-links-dialog #parent-details-form input,
.parent-links-dialog #parent-details-form select,
.parent-links-dialog #parent-details-form textarea {
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.parent-links-dialog #parent-details-form textarea { min-height: 76px; padding-block: var(--space-3); }
.parent-links-dialog #parent-details-form input:focus,
.parent-links-dialog #parent-details-form select:focus,
.parent-links-dialog #parent-details-form textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-orange) 22%, transparent);
}
.parent-links-dialog #parent-details-form input::placeholder,
.parent-links-dialog #parent-details-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.parent-links-dialog #parent-details-form .player-form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
  .parent-links-dialog #parent-details-form .player-form-row { grid-template-columns: 1fr; }
}

/* Save primary — brand orange so it clearly reads as the completion step. */
.parent-links-dialog .parent-details-actions {
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.parent-links-dialog .save-details-action,
.parent-links-dialog .save-details-action:hover {
  min-height: 52px;
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  color: #1a0f00;
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.005em;
}
.parent-links-dialog .save-details-action:hover { filter: brightness(1.06); }
.parent-links-dialog .save-details-action:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* Status line — success/error color from the same tokens the parent page uses. */
.parent-links-dialog #parent-links-status { min-height: 1.4em; font-size: var(--text-sm); font-weight: 700; }
.parent-links-dialog #parent-links-status.success { color: var(--positive); }
.parent-links-dialog #parent-links-status.error { color: var(--accent); }

/* Poll toolbar — cleaner card, orange dot when open. */
.parent-links-dialog .poll-toolbar {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.parent-links-dialog .poll-toolbar strong { font-size: var(--text-base); }
.parent-links-dialog .poll-toolbar small { color: var(--muted); font-size: var(--text-xs); }

/* Link card and section heading polish. */
.parent-links-dialog .parent-links-heading h3 { letter-spacing: -0.01em; }
.parent-links-dialog .parent-links-heading p { color: var(--muted); font-size: var(--text-sm); }
.parent-links-dialog .parent-link-state strong { font-size: var(--text-base); }
.parent-links-dialog .fixture-link-card {
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------------------
   composegate v2 — orange match line, poll slider, single-line summary
   ------------------------------------------------------------------- */
.parent-links-dialog .dialog-context {
  color: var(--brand-orange);
  font-weight: 800;
  letter-spacing: -0.005em;
}

/* Poll toolbar becomes a single row with the toggle switch on the right. */
.parent-links-dialog .poll-toolbar { display: flex; align-items: center; gap: var(--space-4); }
.parent-links-dialog .poll-toggle {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%;
  cursor: pointer;
  user-select: none;
}
.parent-links-dialog .poll-toggle input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.parent-links-dialog .poll-toggle-labels {
  display: grid; gap: 2px;
  min-width: 0; flex: 1;
}
.parent-links-dialog .poll-toggle-labels strong { font-size: var(--text-base); }
.parent-links-dialog .poll-toggle-labels small { color: var(--muted); font-size: var(--text-xs); }
.parent-links-dialog .poll-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 52px; height: 30px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease;
}
.parent-links-dialog .poll-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: var(--text);
  border-radius: 50%;
  transition: transform .18s ease, background .18s ease;
}
.parent-links-dialog .poll-toggle input:checked ~ .poll-toggle-track {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}
.parent-links-dialog .poll-toggle input:checked ~ .poll-toggle-track::after {
  transform: translateX(22px);
  background: #1a0f00;
}
.parent-links-dialog .poll-toggle input:focus-visible ~ .poll-toggle-track {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}
.parent-links-dialog .poll-toggle input:disabled ~ .poll-toggle-track { opacity: .55; }
.parent-links-dialog .poll-toggle:has(input:disabled) { cursor: not-allowed; }

/* One-line summary: title stays on a single row next to the chevron. */
.parent-links-dialog .parent-detail-panel summary {
  gap: var(--space-3);
  white-space: nowrap;
}
.parent-links-dialog .parent-detail-panel summary > span {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.wet-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.wet-toolbar [hidden]{display:none!important}
.wet-toolbar button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--border,#777);border-radius:12px;background:transparent;color:inherit;font:inherit;font-size:14px}
.wet-toolbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.wet-toolbar [aria-pressed="true"]{border-color:#e89739;color:#e89739}
.wet-mode #live-pitch,.wet-mode .live-bench,.wet-mode #live-player-actions,.wet-mode #live-unavailable,.wet-mode .live-fairness-summary{display:none!important}
.wet-mode .live-topbar{flex-wrap:wrap;gap:12px;padding:16px}
.wet-mode .live-topbar-time{font-size:42px;line-height:1.2;flex:1;font-variant-numeric:tabular-nums}
.wet-mode .live-topbar button{min-height:60px;min-width:100px;font-size:18px}
#wet-weather-controls{padding:16px;border:1px solid #777;border-radius:16px;max-width:620px;margin:12px auto}
#wet-weather-controls[hidden],#wet-weather-controls [hidden]{display:none!important}
#wet-weather-controls button,#wet-weather-controls select{display:block;width:100%;min-height:60px;padding:12px 14px;border:1px solid #888;border-radius:12px;font:inherit;font-size:17px;color:inherit;background:transparent;touch-action:manipulation}
#wet-weather-controls button{margin:12px 0;font-weight:650}
#wet-weather-controls .wet-confirm{background:#e8a449;color:#161616;border-color:#e8a449;min-height:72px;font-size:21px}
#wet-weather-controls :disabled{opacity:.4}
#wet-weather-controls select option{color:#111;background:#fff}
#wet-weather-controls strong{display:block;font-size:23px;line-height:1.35;overflow-wrap:anywhere}
#wet-weather-controls .wet-next{padding:8px 0}
#wet-due{margin:8px 0;font-size:19px;font-weight:700}
#wet-weather-controls small{display:block;font-size:12px;line-height:1.45;opacity:.8}
#wet-weather-controls summary{padding:16px 0;min-height:56px;cursor:pointer}
#wet-weather-controls label{display:block;margin:10px 0;font-size:14px}
#wet-feedback{font-size:15px;line-height:1.45;margin-bottom:0}
.wet-lock-message{font-size:22px;line-height:1.5;padding:24px 0}
.live-preparation {
  border: 1px solid #b86a28;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.live-preparation p { margin: 0 0 10px; line-height: 1.4; }
.live-preparation button { min-height: 48px; width: 100%; white-space: normal; }
.live-preparation[hidden] { display: none; }
/* Scoped pilot status; existing application colours and type remain unchanged. */
.pilot-rehearsal-banner {
  border: 1px solid currentColor;
  border-left-width: 4px;
  border-radius: .5rem;
  padding: 1rem;
  margin: 1rem 0;
  font-size: .875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pilot-rehearsal-banner[hidden] { display:none; }
.pilot-rehearsal-banner p { margin:.5rem 0; }
.pilot-rehearsal-banner a { color:inherit; text-decoration:underline; }