/* WrestleSmart — dark, high-contrast UI for gyms and tournament halls. */
:root {
  --bg: #0d141c;
  --surface: #141e29;
  --surface-2: #1b2734;
  --surface-3: #22303f;
  --line: #273546;
  --line-strong: #36475b;
  --text: #e9eff5;
  --muted: #8d9db0;
  --us: #3d95e3;
  --us-ink: #9cc8f2;
  --us-bg: rgba(61, 149, 227, 0.14);
  --opp: #e8665e;
  --opp-ink: #f3a7a2;
  --opp-bg: rgba(232, 102, 94, 0.14);
  --clock: #f2b43a;
  --ok: #3fbf8a;
  --warn: #f2b43a;
  --danger: #e8665e;
  --focus: #9cc8f2;
  --radius: 10px;
  --radius-sm: 6px;
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  color-scheme: dark;
  /* iPhone notch / camera and home bar (a home-screen app draws under them) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--us-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.01em; margin: 0 0 0.5rem; line-height: 1.15; }
h1 { font-size: 2rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; margin-top: 1rem; }
p { margin: 0 0 0.75rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.strong { font-weight: 600; }
.danger { color: var(--danger) !important; }
[hidden] { display: none !important; }
.icon { flex: none; }

/* ------------------------------------------------ layout */
#app { min-height: 100%; }
.layout-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.layout-full { min-height: 100vh; }
.layout-auth { min-height: 100vh; display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }
.main { padding: 28px 32px 64px; max-width: 1280px; width: 100%; outline: none; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 14px; border-right: 1px solid var(--line); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark { width: 36px; height: 36px; flex: none; display: block; }
.brand-mark svg { display: block; }
.brand-lg .brand-mark { width: 52px; height: 52px; }
.brand-name { font-family: var(--font-cond); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; }
.brand-lg .brand-name { font-size: 1.9rem; }
.team-name, .team-switch { font-size: 0.85rem; color: var(--muted); }
.team-switch { background: transparent; border: 0; padding: 0; width: auto; min-height: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-main, .nav-secondary { display: flex; flex-direction: column; gap: 2px; }
.nav-secondary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav-icon { position: relative; display: inline-flex; }
.nav-short { display: none; }
.study-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--clock, #f2b43a); color: #1a1205; font-size: 0.75rem; font-weight: 700; line-height: 1; }
.study-badge[hidden] { display: none; }
.nav-badge { position: absolute; top: -7px; right: -11px; min-width: 18px; height: 18px; font-size: 0.7rem; padding: 0 5px; }
.topbar { display: none; }
.film-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; gap: 4px; padding: 4px; margin-bottom: 16px; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.film-switch-item { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 600; }
.film-switch-item:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.film-switch-item.active { background: var(--surface-3); color: var(--text); font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--surface-3); color: var(--text); box-shadow: inset 3px 0 0 var(--us); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.whoami { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sync, .live-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); width: fit-content; }
.sync-ok { color: var(--ok); }
.sync-pending { color: var(--warn); }
.sync-error { color: var(--danger); }
.sync-local { color: var(--muted); }

@media (max-width: 860px) {
  /* Like a native app: the screen never scrolls — only the page between the top bar and the bottom
     menu does — so the menu can't drift (iPhone home-screen apps misplace fixed bars otherwise). */
  html:has(#app.layout-shell), body:has(#app.layout-shell) { overflow: hidden; overscroll-behavior: none; }
  .layout-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 16px 16px 28px; max-width: none; }
  .topbar {
    display: flex; align-items: center; gap: 6px; position: relative; flex: none; z-index: 20;
    min-height: calc(52px + env(safe-area-inset-top)); box-sizing: border-box;
    padding: env(safe-area-inset-top) 4px 0 14px; background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .topbar-mark { width: 30px; height: 30px; flex: none; }
  .topbar-mark .brand-mark { width: 30px; height: 30px; }
  .topbar-logo { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
  .topbar-team { flex: 1; min-width: 0; font-weight: 600; }
  .topbar-team .team-name { color: var(--text); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-team .team-switch { color: var(--text); font-size: 0.95rem; max-width: 100%; }
  .topbar .sync { font-size: 0.78rem; padding: 3px 8px; max-width: 120px; flex: none; }
  .topbar .sync span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 22px; color: var(--muted); }
  .top-btn:hover, .top-btn.active { color: var(--text); background: var(--surface-2); text-decoration: none; }
  .sidebar {
    position: relative; order: 3; flex: none; top: auto; height: auto; z-index: 20;
    flex-direction: row; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line);
  }
  .brand, .sidebar-foot, .nav-secondary { display: none; }
  .nav { flex-direction: row; flex: 1; }
  .nav-main { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .nav-item { flex-direction: column; gap: 3px; padding: 7px 2px; min-height: 52px; font-size: 0.75rem; flex: 1; align-items: center; justify-content: center; text-align: center; }
  .nav-item.active { box-shadow: inset 0 3px 0 var(--us); font-weight: 700; }
  .nav-label { display: none; }
  .nav-short { display: inline; }
  .film-switch { max-width: none; }
  h1 { font-size: 1.6rem; }
}

/* ------------------------------------------------ page parts */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.page-sub { margin: 0; max-width: 70ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); margin-bottom: 8px; font-size: 0.9rem; }
.section-title { display: flex; gap: 8px; align-items: baseline; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.panel-live { border-color: var(--clock); margin-bottom: 16px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 960px) { .dash-grid, .settings-grid { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile { background: var(--surface); padding: 16px 18px; }
.tile-value { font-family: var(--font-cond); font-size: 2.1rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-label { color: var(--text); font-weight: 500; }
.tile-sub { font-size: 0.82rem; }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile-value { font-size: 1.7rem; } }

.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); color: var(--text); min-height: 48px; }
.list-row:first-child { border-top: 0; }
a.list-row:hover { background: var(--surface-2); text-decoration: none; }
.list-date { color: var(--muted); width: 56px; flex: none; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.list-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp { white-space: nowrap; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 0.85rem; padding: 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.table .num { text-align: right; }
.table-hover tbody tr { cursor: pointer; }
.table-hover tbody tr:hover { background: var(--surface-2); }
.table-compact td { padding: 6px 8px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); font-size: 0.82rem; white-space: nowrap; border: 1px solid transparent; color: var(--text); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-win { background: var(--us-bg); border-color: var(--us); color: var(--us-ink); }
.chip-loss { background: var(--opp-bg); border-color: var(--opp); color: var(--opp-ink); }
.chip-draw, .chip-muted { color: var(--muted); }
.chip-live { color: var(--clock); border-color: var(--clock); background: transparent; }
.chip-ok { color: var(--ok); }
.chip-flag { color: var(--clock); }
.chip-time { cursor: pointer; font-variant-numeric: tabular-nums; border-color: var(--line-strong); font: inherit; font-size: 0.82rem; }
.chip-time:hover { border-color: var(--us); }

.state { padding: 24px 8px; text-align: center; }
.state-title { font-weight: 600; margin-bottom: 4px; }
.state-loading { display: flex; gap: 10px; justify-content: center; align-items: center; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--us); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.callout { background: var(--surface-2); border-left: 3px solid var(--clock); padding: 10px 12px; border-radius: var(--radius-sm); margin: 0 0 12px; font-size: 0.92rem; }
.banner { padding: 8px 12px; border-radius: var(--radius-sm); }
.banner-warn { background: rgba(242, 180, 58, 0.14); color: var(--clock); }

/* ------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--us); border-color: var(--us); color: #06121f; font-weight: 600; }
.btn-primary:hover { background: #5aa7ea; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #1f0806; font-weight: 600; }
.btn-danger-ghost { color: var(--opp-ink); }
.btn-sm { min-height: 34px; padding: 4px 10px; font-size: 0.9rem; }
.btn-lg { min-height: 52px; padding: 10px 18px; font-size: 1.05rem; }
.btn-link { background: none; border: 0; color: var(--us-ink); padding: 4px 0; font: inherit; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: transparent; border: 0; color: var(--text); cursor: pointer; }
.btn-icon:hover { background: var(--surface-2); }

input, select, textarea {
  width: 100%; min-height: 42px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit;
}
textarea { resize: vertical; min-height: 60px; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--us); }
input[type=date] { min-width: 0; }
.input-sm { max-width: 110px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 0.88rem; color: var(--muted); font-weight: 500; }
.field-hint { font-size: 0.8rem; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid > .form-msg, .form-grid > .fieldset { grid-column: 1 / -1; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.fieldset legend { color: var(--muted); padding: 0 6px; font-size: 0.88rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-msg { color: var(--opp-ink); min-height: 0; margin: 0; }
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--ok); }
.row { display: flex; gap: 10px; align-items: flex-end; }
.row.wrap { flex-wrap: wrap; }
.row > .field { flex: 1; }
.row-end { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.row-between { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters > * { width: auto; flex: 0 1 180px; }
.filters input[type=search] { flex: 1 1 200px; }
ul.plain { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab { background: none; border: 0; color: var(--muted); padding: 10px 14px; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--text); border-bottom-color: var(--us); }
details summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.danger-zone { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.invite-code { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.invite-code:has(.invite-link) { flex-wrap: wrap; }
.invite-link { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; background: var(--bg); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); }
.invite-out .muted code { font-size: inherit; letter-spacing: 0.08em; }
.invite-banner .small { margin-top: 4px; }
.invite-code code { font-size: 1.6rem; letter-spacing: 0.14em; background: var(--bg); padding: 6px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); }

/* ------------------------------------------------ auth */
.auth-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.auth-wide { width: min(760px, 100%); }
.onboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onboard-grid .panel { display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
@media (max-width: 640px) { .onboard-grid { grid-template-columns: 1fr; } }
.onboard-grid.onboard-single { grid-template-columns: 1fr; }

/* ------------------------------------------------ dialogs & toasts */
.modal { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text); padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.modal-wide { width: min(780px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(4, 8, 12, 0.7); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 0 20px; }
.modal-head h2 { margin: 0; }
.modal-body { padding: 12px 20px 20px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice-grid .btn { flex-direction: column; gap: 2px; white-space: normal; }
.choice-grid small { color: var(--muted); font-weight: 400; }
.btn-primary small { color: #0b2340; }
#toasts { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-3); border: 1px solid var(--line-strong); padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); pointer-events: auto; }
.toast-ok .icon { color: var(--ok); }
.toast-error { border-color: var(--danger); }
.toast-error .icon { color: var(--danger); }
.uploads { position: fixed; z-index: 90; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.uploads:empty { display: none; }
.upload { background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.upload-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.upload progress { width: 100%; accent-color: var(--us); }

/* ------------------------------------------------ profile, match, notes */
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.profile-id { flex: 1; min-width: 200px; }
.profile-id h1 { margin-bottom: 6px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-cond); font-weight: 600; object-fit: cover; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.8rem; }
.match-summary { margin-bottom: 0; }
.summary-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 12px; }
.side { display: flex; flex-direction: column; gap: 2px; }
.side-opp { text-align: right; align-items: flex-end; }
.side-name { font-weight: 600; }
.side-us .side-name { color: var(--us-ink); }
.side-opp .side-name { color: var(--opp-ink); }
.side-score { font-family: var(--font-cond); font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-mid { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.log { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.log li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.log li:first-child { border-top: 0; }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; width: 72px; flex: none; font-size: 0.85rem; }
.log-text { flex: 1; min-width: 0; }
.log-text.is-us::before, .log-text.is-opp::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.log-text.is-us::before { background: var(--us); }
.log-text.is-opp::before { background: var(--opp); }
.log-by { font-size: 0.82rem; }
.log-void .log-text { text-decoration: line-through; color: var(--muted); }
.log-void .log-text::before { opacity: 0.4; }
.log-video li { align-items: flex-start; }
.tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.log-video li.is-override .chip-time { border-color: var(--clock); }
.history { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.notes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.note { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 12px; }
.note-flag { border-left-color: var(--clock); }
.note-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.note-body { white-space: pre-wrap; margin: 0; }
.note-actions { display: flex; gap: 14px; font-size: 0.85rem; }
.note-form { display: flex; flex-direction: column; gap: 8px; }
.note-form .row { align-items: center; flex-wrap: wrap; }
.note-form .row input:not([type=checkbox]) { flex: 1 1 140px; width: auto; }

/* ------------------------------------------------ film */
.film-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); grid-template-areas: "top side" "tools side" "rest side"; grid-template-rows: auto auto 1fr; gap: 16px; align-items: start; }
.film-top { grid-area: top; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.film-rest { grid-area: rest; }
.film-tools { grid-area: tools; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.film-tools:empty { display: none; }
.film-layout > .film-side { grid-area: side; }
.log-video li.is-current { background: rgba(242, 180, 58, 0.1); box-shadow: inset 3px 0 0 var(--clock); border-radius: 6px; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.sheet-grid > .panel { margin: 0; }
.sheet-scores { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.sheet-actions tr.is-current td { background: rgba(242, 180, 58, 0.1); }
.sheet-actions tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--clock); }
.film-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.film-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.film-score { font-family: var(--font-cond); font-size: 1.4rem; margin-bottom: 8px; }
@media (max-width: 960px) { .film-layout { grid-template-columns: 1fr; grid-template-areas: "top" "side" "tools" "rest"; grid-template-rows: none; } .film-side { position: static; max-height: none; } .sheet-grid { grid-template-columns: 1fr; } .sheet-scores { position: static; max-height: none; } }
.player-wrap { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--ar, 16 / 9); display: grid; place-items: center; }
/* Filmed upright: a tall box the width of the video, up to most of the screen height */
.player-wrap.portrait { width: min(100%, calc(78vh * var(--arn, 0.5625)), calc(78dvh * var(--arn, 0.5625))); margin-inline: auto; }
.player-wrap.portrait .player { max-height: none; }
.player { width: 100%; height: 100%; display: block; background: #000; }
.player-missing { padding: 24px; text-align: center; }
.player-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.player-controls select { width: auto; min-height: 34px; }
.sync-note { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 0.88rem; color: var(--muted); padding: 8px 0 12px; flex-wrap: wrap; }
.sync-note.warn { color: var(--clock); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.video-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); display: flex; flex-direction: column; }
.video-card:hover { border-color: var(--line-strong); text-decoration: none; }
.video-thumb { aspect-ratio: 16 / 9; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); position: relative; }
.video-dur { position: absolute; right: 8px; bottom: 6px; font-size: 0.8rem; background: rgba(0, 0, 0, 0.6); padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.video-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }

/* ------------------------------------------------ charts */
.chart { margin: 0; position: relative; }
.chart figcaption { font-weight: 500; margin-bottom: 8px; }
.chart-svg { width: 100%; height: 190px; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .fill-us, .legend .fill-us { fill: var(--us); background: var(--us); }
.chart .fill-opp, .legend .fill-opp { fill: var(--opp); background: var(--opp); }
.chart .fill-muted { fill: var(--line-strong); }
.chart .hit { fill: transparent; cursor: default; }
.chart .bar:hover path, .chart .bar:hover rect:not(.hit) { opacity: 0.85; }
.chart-tip { position: absolute; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--line-strong); padding: 4px 8px; border-radius: 4px; font-size: 0.82rem; pointer-events: none; white-space: nowrap; z-index: 2; }
.legend { display: flex; gap: 14px; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------ live scorer */
.live-root { padding: 0 !important; max-width: none !important; }
.live {
  --green: #2e9e5b; --green-ink: #8fe0b0; --red: #d9433b; --red-ink: #f6a39d;
  height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #0a0f14; overflow: hidden;
}
.live[data-us-band="green"] { --us-band: var(--green); --us-ink: var(--green-ink); --opp-band: var(--red); --opp-ink: var(--red-ink); }
.live[data-us-band="red"] { --us-band: var(--red); --us-ink: var(--red-ink); --opp-band: var(--green); --opp-ink: var(--green-ink); }

/* top bar */
.live-top { display: flex; align-items: center; gap: 12px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: #0f161e; border-bottom: 1px solid var(--line); min-height: 48px; }
.top-link { display: inline-flex; align-items: center; gap: 2px; color: var(--clock); font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 6px 4px; min-height: 40px; }
.top-link:hover { text-decoration: none; filter: brightness(1.15); }
.live-meta { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 0.92rem; overflow: hidden; white-space: nowrap; }
.live-meta span { overflow: hidden; text-overflow: ellipsis; }
.live-meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); margin-right: 18px; vertical-align: middle; }

/* camera stage */
.stage { position: relative; background: #000; min-height: 0; overflow: hidden; }
.stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); text-align: center; padding: 16px;
  background: radial-gradient(circle at 50% 55%, transparent 0 60px, rgba(242, 180, 58, 0.08) 61px 64px, transparent 65px 150px, rgba(217, 67, 59, 0.10) 151px 156px, transparent 157px), #070b0f; }
.stage-title { color: var(--text); font-weight: 600; margin: 4px 0 0; }
.rec-badge { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; padding: 3px 10px 3px 8px; border-radius: 999px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.stage-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(15, 22, 30, 0.92); border: 1px solid var(--clock); color: var(--clock); padding: 6px 8px 6px 14px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.mark-btn { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; background: rgba(10, 15, 20, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; min-height: 46px; }
.mark-btn:disabled { opacity: 0.35; cursor: default; }
.rec-btn { position: absolute; right: 18px; bottom: 14px; width: 72px; height: 72px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.25); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rec-btn:disabled { opacity: 0.3; cursor: default; }
.rec-inner { width: 52px; height: 52px; border-radius: 50%; background: #ff3b30; transition: all 0.15s; }
.rec-btn.recording .rec-inner { width: 28px; height: 28px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .rec-inner { transition: none; } }

/* scoring from an uploaded video */
.stage-player { object-fit: contain; background: #000; }
.vid-ctrls { position: absolute; top: 12px; left: 14px; right: 150px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.vid-ctrls > * { pointer-events: auto; }
@media (max-width: 600px) { .vid-ctrls { left: 8px; top: 8px; right: 112px; gap: 4px; } .vid-ctrls .vid-btn, .vid-ctrls .vid-select { min-height: 36px; min-width: 0; padding: 4px 8px; font-size: 0.85rem; } .mark-btn.mark-top { top: 8px; right: 8px; } }
.vid-btn { background: rgba(10, 15, 20, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; min-width: 52px; min-height: 40px; padding: 6px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.vid-select { width: auto; min-height: 40px; background: rgba(10, 15, 20, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 6px 10px; font-weight: 600; }
.vid-btn:disabled { opacity: 0.5; }
.mark-btn.mark-top { top: 12px; bottom: auto; left: auto; right: 14px; }
.meta-video { color: var(--clock) !important; font-weight: 600; }

/* scorebug */
.bug { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 150px; background: #121a23; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bug-names { display: grid; grid-template-rows: 1fr 1fr; padding: 4px 0; border-right: 1px solid var(--line); }
.bug-name { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 34px; min-width: 0; }
.bug-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.band-green { background: var(--green); }
.band-red { background: var(--red); }
.bug-periods { display: flex; overflow-x: auto; scrollbar-width: none; }
.bug-col { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; padding: 4px 12px 4px 10px; border-right: 1px solid var(--line); min-width: 150px; }
.bug-col.current { background: rgba(242, 180, 58, 0.05); }
.bug-col-label { grid-row: 1 / span 2; align-self: center; font-size: 0.78rem; font-weight: 700; color: #c9d3de; background: #2a3644; padding: 2px 7px; border-radius: 4px; }
.bug-col.current .bug-col-label { background: var(--clock); color: #1d1405; }
.bug-row { display: flex; gap: 6px; align-items: center; min-height: 30px; flex-wrap: nowrap; }
.chip-act { font: inherit; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 4px; border: 0; color: #fff; cursor: pointer; line-height: 1.2; }
.chip-green { background: var(--green); }
.chip-red { background: var(--red); }
.chip-call { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.chip-pos { background: #2a3644; color: #c9d3de; }
.bug-ctrl { border-left: 1px solid var(--line); display: grid; grid-template-rows: 1fr 1fr; }
.bug-period { display: grid; grid-template-columns: 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.bug-step { background: none; border: 0; color: var(--clock); font-size: 1.5rem; font-weight: 600; cursor: pointer; }
.bug-period-label { display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; }
.bug-pos { background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bug-pos:hover { color: var(--text); }
.bug-ctrl.has-clock { grid-template-rows: auto 1fr 1fr; }
.bug-clock { display: grid; grid-template-columns: 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.bug-clock[hidden] { display: none; }
.bug-clock-time { background: none; border: 0; color: var(--clock); font: 700 1.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; padding: 8px 4px; cursor: pointer; letter-spacing: 0.02em; }
.bug-clock.running .bug-clock-time { color: #fff; }
.bug-clock.over .bug-clock-time { color: #f87171; }
.bug-riding .rt-sign { display: none; }
.bug-riding { font-size: 0.78rem; color: var(--muted); text-align: center; padding: 2px 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* controls */
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: #0d141b; }
.ctrl-half { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.ctrl-opp { justify-content: flex-end; }
.side-ctrl { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.side-ctrl.side-opp { align-items: stretch; text-align: left; }
.side-opp .act-row { justify-content: flex-end; }
.act-row { display: flex; gap: 8px; flex-wrap: wrap; }
.act-row-score { flex-wrap: nowrap; }
.act {
  min-height: 48px; min-width: 84px; padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer; font: inherit; color: #fff;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.act:active { transform: scale(0.96); }
.act-label { font-weight: 700; font-size: 1rem; }
.act-sub { font-size: 0.68rem; opacity: 0.85; margin-top: 2px; white-space: nowrap; }
.side-us .act-call, .side-us .act-score { background: var(--us-band); }
.side-opp .act-call, .side-opp .act-score { background: var(--opp-band); }
.act-call { filter: saturate(0.85) brightness(0.92); }
.act-score { min-width: 72px; flex: 0 1 96px; }
.act-ghost { flex: 0 1 84px; min-width: 0; }
.act-score .act-label { font-size: 1.35rem; font-family: var(--font-cond); letter-spacing: 0.02em; }
.act-wide { min-width: 132px; }
.act-ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--text); }
.side-us .act-fall { box-shadow: inset 0 0 0 2px var(--us-band); color: var(--us-ink); }
.side-opp .act-fall { box-shadow: inset 0 0 0 2px var(--opp-band); color: var(--opp-ink); }
.act-more { background: #1d2733; min-width: 52px; color: var(--muted); }
.ctrl-score { font-family: var(--font-cond); font-weight: 700; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; min-width: 72px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.ctrl-center {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "colors undo" "timer timer" "run run";
  align-content: center; gap: 6px; min-width: 210px; max-width: 240px; padding: 0 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.ctrl-center .colors-btn { grid-area: colors; justify-content: center; }
.ctrl-center .undo-btn { grid-area: undo; justify-content: center; min-width: 0; }
.ctrl-center .timer-pill { grid-area: timer; text-align: center; padding: 6px 12px; }
.ctrl-center .run-ctl { grid-area: run; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; background: #1d2733; color: var(--text); border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 0.9rem; cursor: pointer; min-height: 40px; max-width: 220px; }
.pill-btn:disabled { opacity: 0.45; cursor: default; }
.period-ctl { display: flex; gap: 6px; width: 100%; }
.run-ctl { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.clock-run {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 6px 12px;
  border-radius: 10px; border: 1px solid #1f6b3d; background: #14532d; color: #fff; font: inherit; cursor: pointer;
}
.clock-run .run-icon { display: inline-flex; }
.clock-run .run-icon svg { fill: currentColor; }
.run-word { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.clock-run.running { background: #1d2733; border-color: var(--line-strong); }
.clock-run.paused { background: #4a3510; border-color: var(--clock); color: var(--clock); }
.clock-run.ready, .clock-run.nag { animation: clock-ready 1.6s ease-in-out infinite; }
.clock-run:disabled { opacity: 0.45; cursor: default; animation: none; }
.clock-run.nudge { animation: clock-nudge 0.9s ease-out 2; }
@keyframes clock-ready { 50% { box-shadow: 0 0 0 4px rgba(46, 158, 91, 0.35); filter: brightness(1.2); } }
.clock-run.nag { animation-name: clock-nag; }
@keyframes clock-nag { 50% { box-shadow: 0 0 0 4px rgba(242, 180, 58, 0.35); filter: brightness(1.25); } }
@keyframes clock-nudge { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .clock-run.ready, .clock-run.nag, .clock-run.nudge { animation: none; } }
.period-prev { width: 44px; min-height: 44px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line); background: #121a23; color: var(--text); font-size: 1.3rem; cursor: pointer; }
.period-next { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: #1d2733; color: var(--text); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; padding: 0 10px; white-space: nowrap; }
.period-prev:disabled, .period-next:disabled { opacity: 0.4; cursor: default; }
.period-next.due { background: var(--clock); border-color: var(--clock); color: #1d1405; animation: period-due 1.2s ease-in-out infinite; }
@keyframes period-due { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .period-next.due { animation: none; } }
.timer-pill::before { content: attr(data-label); margin-right: 8px; font-family: var(--font-body, inherit); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.undo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-pill { background: rgba(242, 180, 58, 0.18); color: #b98a2e; font-weight: 700; font-variant-numeric: tabular-nums; padding: 8px 16px; border-radius: 8px; font-size: 1.05rem; letter-spacing: 0.03em; }
.timer-pill.is-recording { background: var(--clock); color: #1d1405; }

.live-flash { position: fixed; left: 50%; top: 60px; transform: translate(-50%, -8px); background: var(--surface-3); border: 1px solid var(--line-strong); padding: 8px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 30; font-weight: 500; max-width: calc(100vw - 32px); }
.live-flash.show { opacity: 1; transform: translate(-50%, 0); }
.live-flash.warn { border-color: var(--clock); color: var(--clock); }
@media (prefers-reduced-motion: reduce) { .live-flash { transition: none; } }
.live-sync { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; padding: 3px 8px; border-radius: 999px; background: #1d2733; white-space: nowrap; }
.end-panel { position: fixed; inset: 0; background: rgba(4, 8, 12, 0.72); display: grid; place-items: center; z-index: 40; padding: 16px; }
.end-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 24px; width: min(560px, 100%); }
.end-win { border-color: var(--us); }
.end-loss { border-color: var(--opp); }
.end-score { font-family: var(--font-cond); font-size: 3rem; font-weight: 700; margin: 0; line-height: 1.1; }

/* Phone portrait (and the same compact controls for a phone turned sideways) */
@media (max-width: 760px), (orientation: landscape) and (max-height: 540px) {
  .live { grid-template-rows: auto minmax(150px, 34vh) auto minmax(0, 1fr); }
  .live-meta { display: none; }
  .live-top { justify-content: space-between; }
  .live-top .live-sync { margin-left: auto; }
  .rec-btn { width: 58px; height: 58px; right: 12px; bottom: 10px; }
  .rec-inner { width: 40px; height: 40px; }
  .mark-btn { left: 10px; bottom: 10px; padding: 8px 12px; min-height: 40px; }
  .stage-empty .muted { display: none; }
  .bug { grid-template-columns: 112px minmax(0, 1fr) 92px; font-size: 0.85rem; }
  .bug-name { padding: 0 8px; gap: 6px; }
  .bug-col { min-width: 108px; padding: 4px 8px; column-gap: 6px; }
  .bug-clock-time { font-size: 1.15rem; padding: 6px 2px; }
  .bug-riding .rt-who { display: none; }
  .bug-riding .rt-sign { display: inline; }
  .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "center center" "us opp"; overflow-y: auto; gap: 8px; padding: 8px; }
  .ctrl-us { grid-area: us; }
  .ctrl-opp { grid-area: opp; }
  .ctrl-center { grid-area: center; display: flex; max-width: none; padding: 0; flex-direction: row; flex-wrap: wrap; border: 0; min-width: 0; justify-content: space-between; }
  .run-ctl { order: 10; flex-basis: 100%; flex-direction: row; align-items: stretch; }
  .run-ctl .clock-run { width: auto; flex: 0 0 150px; min-height: 48px; padding: 4px 10px; gap: 6px; }
  .run-ctl .run-word { font-size: 0.95rem; }
  .run-ctl .period-ctl { flex: 1; min-width: 0; }
  .run-ctl .period-next { min-height: 48px; }
  .run-ctl .period-prev { min-height: 48px; }
  .ctrl-center .pill-btn { padding: 6px 10px; min-height: 36px; font-size: 0.82rem; max-width: 150px; }
  .timer-pill { padding: 6px 10px; font-size: 0.9rem; }
  .ctrl-half { flex-direction: column; gap: 6px; }
  .ctrl-us .ctrl-score { order: -1; }
  .ctrl-half > .side-ctrl { align-self: stretch; width: 100%; flex: none; }
  .ctrl-opp { justify-content: flex-start; }
  .ctrl-score { font-size: 2.6rem; }
  .side-opp .act-row { justify-content: flex-start; }
  .act-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .act { min-width: 0; min-height: 50px; padding: 4px 6px; }
  .act-row-score .act:only-child, .act-wide { grid-column: 1 / -1; }
  .act-label { font-size: 0.92rem; }
}

/* Phone turned sideways (the way most matches are filmed): camera on the left, full height;
   names, periods and scoring buttons in a column on the right that scrolls. */
@media (orientation: landscape) and (max-height: 540px) {
  .live { grid-template-columns: minmax(0, 1fr) minmax(330px, 42%); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top top" "stage bug" "stage controls"; }
  .live-top { grid-area: top; min-height: 40px; padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
  .stage { grid-area: stage; }
  .bug { grid-area: bug; border-top: 0; }
  .controls { grid-area: controls; padding-right: max(8px, env(safe-area-inset-right)); }
  .live.film-only { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "stage"; }
  .ctrl-score { font-size: 2.1rem; }
  .act { min-height: 46px; }
  .ctrl-center .pill-btn { min-height: 34px; }
  .run-ctl .clock-run { flex-basis: 128px; }
  /* the scoring buttons first, warnings and penalties under them */
  .side-ctrl .act-row-score { order: -1; }
}

/* storage meter */
.meter-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; max-width: 520px; }
.meter { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--us); border-radius: 999px; }
.meter-warn span { background: var(--clock); }
.meter-full span { background: var(--opp); }

/* On the scoring screen, messages appear at the top so they never cover the buttons. */
body:has(.live) #toasts { bottom: auto; top: calc(56px + env(safe-area-inset-top)); }
body:has(.live) .uploads { bottom: auto; top: calc(56px + env(safe-area-inset-top)); }

/* team branding */
.brand-team { align-items: center; }
.team-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: var(--surface-2); flex: none; }
.team-logo-lg { width: 76px; height: 76px; border-radius: 12px; background: rgba(13, 20, 28, 0.6); padding: 4px; }
.brand-team-name { font-size: 1.12rem; line-height: 1.15; }
.brand-sub { font-size: 0.78rem; color: var(--muted); }
.team-banner { position: relative; height: 210px; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--surface-2); }
.team-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 20, 28, 0) 35%, rgba(13, 20, 28, 0.88) 100%); }
.team-banner-text { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: flex-end; gap: 16px; z-index: 1; }
.team-banner-text h1 { margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.team-banner-text p { margin: 2px 0 0; color: #d5dde6; }
@media (max-width: 700px) { .team-banner { height: 150px; } .team-logo-lg { width: 56px; height: 56px; } }
.tc-slot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); align-items: start; }
.tc-pickers { display: flex; flex-direction: column; gap: 10px; }
.tc-pickers p { margin: 0; }
.tc-pick { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tc-pick input[type="color"] { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); cursor: pointer; flex: none; }
.tc-hex { font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; color: var(--muted); }
.tc-preview { pointer-events: none; }
.tc-preview .pp-hero-logo { width: 150px; height: 150px; }
@media (max-width: 760px) { .tc-slot { grid-template-columns: 1fr; } }
.brand-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; }
@media (max-width: 760px) { .brand-slots { grid-template-columns: 1fr; } }
.brand-slot { display: flex; gap: 14px; align-items: flex-start; }
.brand-slot p { margin: 4px 0 8px; }
.brand-preview { flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 10px; overflow: hidden; }
.brand-slot-logo .brand-preview { width: 104px; height: 104px; }
.brand-slot-banner .brand-preview { width: 216px; height: 72px; }
.brand-preview img { width: 100%; height: 100%; object-fit: contain; }
.brand-slot-banner .brand-preview img { object-fit: cover; }
@media (max-width: 760px) { .brand-slot-banner { flex-direction: column; } .brand-slot-banner .brand-preview { width: 100%; height: auto; aspect-ratio: 3 / 1; } }
.row.wrap > input, .row.wrap > select { flex: 1 1 150px; width: auto; }
.row.wrap > .input-sm { flex: 0 1 110px; }

/* on-device video shrinking */
.shrink-box { display: flex; justify-content: center; background: #000; border-radius: 8px; margin-bottom: 12px; min-height: 60px; }
.shrink-preview { max-width: 100%; max-height: 200px; display: block; }
.modal-body progress { width: 100%; }

/* score sheet */
.sheet-result { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.sheet-film .player { width: 100%; max-height: 62vh; background: #000; border-radius: 8px; }
.sheet-film .row { margin-top: 8px; }
.sheet-film [aria-pressed="true"] { background: var(--accent, #3b82f6); color: #fff; border-color: transparent; }
.sheet-actions a.chip-time, .sheet-actions button.chip-time { text-decoration: none; cursor: pointer; }
.time-pair { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.od-test { font-size: 0.8rem; white-space: nowrap; }

/* archived films */
.chip-archived { display: inline-flex; align-items: center; gap: 6px; }
.od-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 999px; background: #0364b8; color: #fff; }
.player-archived { gap: 10px; }
.player-archived .state-title { display: inline-flex; align-items: center; gap: 6px; }

/* Cloudflare film storage */
.cf-settings { margin-top: 1rem; border-top: 1px solid var(--line, #e5e7eb); padding-top: .75rem; }
.cf-settings h3 { margin: 0 0 .35rem; font-size: 1rem; }
.cf-form { display: grid; gap: .5rem; }
.cf-form input { width: 100%; }
.cf-meter { margin: .25rem 0 .5rem; }
.move-panel { margin: .5rem 0; }
.move-panel .row-between { gap: 1rem; align-items: center; flex-wrap: wrap; }
.move-panel p { margin: 0; }
.rec-size { font-weight: 500; letter-spacing: 0; opacity: .9; }

/* Dual meet lineup */
.lineup-table td { vertical-align: middle; }
.lineup-table select, .lineup-table .lineup-opp { width: 100%; min-width: 150px; }
.lineup-actions { white-space: nowrap; text-align: right; }
.lineup-actions .btn { margin-left: 4px; }
.lineup-done td { opacity: .92; }
.lineup-note-row td { background: var(--surface-2); padding-top: 10px; padding-bottom: 10px; }
.lineup-notes { margin: 0 0 8px; padding-left: 18px; }
.lineup-notes li { margin: 2px 0; }
.lineup-note-form input { flex: 1; min-width: 200px; }
.lineup-note-btn { min-width: 0; }
@media (max-width: 720px) {
  .lineup-table thead { display: none; }
  .lineup-table tr { display: grid; grid-template-columns: 52px 1fr; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .lineup-table td { border: 0; padding: 0; }
  .lineup-table td:first-child { grid-row: span 4; }
  .lineup-actions { text-align: left; }
  .lineup-actions .btn { margin: 0 4px 0 0; }
}

/* Pause filming (injury / blood time) */
.pause-btn { position: absolute; right: 14px; bottom: 98px; display: inline-flex; align-items: center; gap: 6px; background: rgba(10, 15, 20, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.pause-btn.is-paused { background: #f5a623; color: #111; border-color: #f5a623; }
.pause-btn .pause-ico { display: inline-flex; }
.pause-btn.is-paused .pause-ico { color: #d0021b; }
.rec-badge.paused { background: rgba(245, 166, 35, 0.9); color: #111; }
.rec-badge.paused .rec-dot { background: #111; animation: none; }
@media (max-width: 720px) { .pause-btn { right: 8px; bottom: 76px; padding: 6px 10px; min-height: 38px; } }

/* Film Room: one card per match */
.video-card-main { color: inherit; display: flex; flex-direction: column; flex: 1; }
.video-card-main:hover { text-decoration: none; }
.video-clips { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 12px 10px; font-size: 0.82rem; }
.video-clips a { color: var(--muted); }
.video-clips a:hover { color: var(--text); }

/* Differentials */
td.pos { color: var(--ok, #2fbf71); }
td.neg { color: var(--opp-ink, #e5484d); }

/* Sign-up: Team / Individual / Family */
.kind-cards { display: grid; gap: 8px; margin-bottom: 12px; }
.kind-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.kind-card input { grid-row: span 2; margin-top: 3px; }
.kind-card .kind-title { font-weight: 700; }
.kind-card.selected { border-color: var(--us); background: var(--us-bg); }
.onboard-details { display: grid; gap: 8px; }
/* Trial banner */
.trial-banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 14px; margin: 0 0 14px; border-radius: var(--radius); background: var(--us-bg); color: var(--us-ink); font-size: 0.9rem; }
.trial-banner.ending { background: rgba(245, 166, 35, 0.15); color: #f5c26b; }

/* TrackWrestling sheet */
.tw-sheet .table-wrap { max-height: 50vh; overflow: auto; margin: 8px 0 12px; }
.tw-sheet tr.tw-win td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.tw-sheet tr.tw-loss td:first-child { box-shadow: inset 3px 0 0 #ef4444; }

/* Just filming (scored later in Film Study): the camera gets the whole screen */
.live.film-only { grid-template-rows: auto minmax(0, 1fr); }
.live.film-only .bug, .live.film-only .controls { display: none; }
.film-only-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(5, 9, 13, 0.82); color: var(--text); font-size: 0.88rem; white-space: nowrap; z-index: 3; }
@media (max-width: 760px) {
  .live.film-only { grid-template-rows: auto minmax(0, 1fr); }
  .film-only-note { top: 46px; white-space: normal; width: calc(100% - 24px); justify-content: space-between; border-radius: 12px; }
}
/* Who's scoring? (new match) */
.scoring-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .scoring-choice { grid-template-columns: 1fr; } }
/* Film Study */
.study-next { border-color: var(--clock); }
.study-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clock); }
.study-next-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-top: 8px; }

/* Access codes (invite-only sign-up) */
.code-ok { color: var(--ok); }
.code-bad { color: var(--danger); }
.kind-card.disabled { opacity: 0.45; cursor: not-allowed; }
.codes-table td, .codes-table th { white-space: nowrap; }
.code-mono { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: 0.03em; }
.chip-warn { color: var(--warn); }
.chip-bad { color: var(--danger); }
.admin-table td { vertical-align: top; }

/* ------------------------------------------------ people: coaches, athletes, parents */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.seg-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.seg-btn.active { background: var(--surface-3); color: var(--text); }
.kid-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; max-height: 220px; overflow-y: auto; padding: 8px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.kid-checks .check { min-height: 32px; }
#coaches h3 { margin: 16px 0 6px; font-size: 1rem; }
#coaches select[name=athlete] { margin-bottom: 10px; max-width: 360px; }
.chip.role-athlete { background: rgba(61, 149, 227, 0.18); color: #9cc8f2; }
.chip.role-parent { background: rgba(242, 180, 58, 0.16); color: #f2c66b; }
.chip-vis { font-size: 0.72rem; }
.chip-vis.vis-coaches { background: var(--surface-3); color: var(--muted); }
.chip-vis.vis-athlete { background: rgba(61, 149, 227, 0.18); color: #9cc8f2; }
.chip-vis.vis-family { background: rgba(242, 180, 58, 0.16); color: #f2c66b; }
.note-form select[name=visibility] { width: auto; max-width: 100%; }

/* ------------------------------------------------ clips and highlight reels */
.player-wrap.has-clips { position: relative; }
.spot-tap { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); border: 2px dashed var(--clock); cursor: crosshair; z-index: 3; }
.spot-tap[hidden], .spot-marker[hidden] { display: none; }
.spot-marker { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 4px solid var(--clock); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 2; }
.clips-panel { margin-top: 12px; }
.clip-editor { display: flex; flex-direction: column; gap: 12px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--us); border-radius: var(--radius); background: rgba(61, 149, 227, 0.06); }
.clip-editor h3 { margin: 0; }
.chip-loop { background: rgba(61, 149, 227, 0.18); color: #9cc8f2; }
.clip-strip { position: relative; height: 18px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.clip-range { position: absolute; top: 0; bottom: 0; background: rgba(61, 149, 227, 0.3); border-left: 3px solid var(--us); border-right: 3px solid var(--us); }
.clip-edges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.clip-edge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.clip-edge-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.clip-edge-time { font: 700 1.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.clip-edge-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
.clip-edge-btns .btn { min-height: 44px; justify-content: center; font-weight: 700; }
.clip-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.tag-chip.on { border-color: var(--us); background: rgba(61, 149, 227, 0.2); color: var(--text); }
.reel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 16px; align-items: start; }
.reel-main, .reel-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1000px) { .reel-grid { grid-template-columns: 1fr; } }
.reel-meta { display: block; }
.reel-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.reel-stage canvas, .reel-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.reel-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.reel-row .reel-n { width: 22px; text-align: right; color: var(--muted); font-weight: 700; }
.reel-row .list-main { flex: 1; min-width: 0; }
.reel-row .btn-icon { width: 36px; height: 36px; }
.reel-row.dragging { opacity: 0.5; }
.reel-title-row { color: var(--clock); font-weight: 600; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.render-progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.render-progress > div { height: 100%; background: var(--us); width: 0; transition: width 0.3s; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.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; }
.clip-bar { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.clip-bar:empty { display: none; }
.clip-bar-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.clip-bar-ctl:empty { display: none; }
.clip-bar-ctl .btn { min-height: 44px; }
.clip-bar-reel { margin-left: auto; }
.clip-rec { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.clip-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .clip-rec-dot { animation: none; } }
.clip-bar .clip-editor { margin-bottom: 0; }
/* Trim slider: two range inputs over one track; only the handles take touches. */
.trim { position: relative; height: 44px; }
.trim-track { position: absolute; left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.trim-sel { position: absolute; top: 0; bottom: 0; background: rgba(61, 149, 227, 0.4); border-left: 3px solid var(--us); border-right: 3px solid var(--us); }
.trim input[type=range] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.trim input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 44px; }
.trim input[type=range]::-moz-range-track { background: transparent; }
.trim input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 26px; height: 40px; border-radius: 8px; background: #fff; border: 3px solid var(--us); cursor: ew-resize; margin-top: 2px; }
.trim input[type=range]::-moz-range-thumb { pointer-events: auto; width: 22px; height: 36px; border-radius: 8px; background: #fff; border: 3px solid var(--us); cursor: ew-resize; }
.trim input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--clock); }
.film-switch.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
@media (max-width: 860px) { .film-switch-item { font-size: 0.88rem; gap: 4px; } }
/* Highlights: a grid of clips like a saved folder */
.clip-folders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
@media (max-width: 520px) { .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.clip-card { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.clip-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #05080c; display: grid; place-items: center; border: 1px solid var(--line); }
.clip-card:hover .clip-thumb, .clip-card:focus-visible .clip-thumb { border-color: var(--us); }
.clip-thumb .clip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clip-thumb-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(13, 20, 28, 0.7); color: #fff; }
.clip-len { position: absolute; z-index: 1; right: 6px; bottom: 6px; font: 600 0.75rem/1 ui-monospace, Menlo, monospace; padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.75); color: #fff; }
.clip-badge { position: absolute; z-index: 1; left: 6px; top: 6px; font-size: 0.7rem; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: rgba(242, 180, 58, 0.9); color: #1a1205; }
.clip-card-text { display: flex; flex-direction: column; min-width: 0; }
.clip-card-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-view { display: flex; flex-direction: column; gap: 10px; }
.clip-view-stage { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.clip-view-stage .clip-video { width: 100%; height: 100%; display: block; background: #000; }

.card-looks { margin-bottom: 12px; }

.invite-status:empty { display: none; }
.invite-status.ok { color: var(--ok, #2e9e5b); font-weight: 600; }

/* Statistics: three main filters, the rest under "More filters" */
.filters-wrap { margin-bottom: 16px; }
.filters-wrap .filters { margin-bottom: 8px; align-items: center; }
.filters-wrap .filters-more { flex: 0 0 auto; min-height: 44px; }
.filters-extra { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filters-extra[hidden] { display: none; }
.date-filter { display: flex; align-items: center; gap: 8px; }
.date-filter input { flex: 1; }
.stats-table td.strong { font-weight: 600; }
@media (max-width: 600px) {
  .filters-wrap .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-wrap .filters > * { width: 100%; }
  .filters-extra .date-filter { grid-column: span 2; }
  .stats-table td:first-child { white-space: nowrap; }
}

.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; color: inherit; }
.th-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.th-sort.on { color: var(--text); font-weight: 600; }
.th-arrow { font-size: 0.7em; }
.stats-table th:first-child, .stats-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* The film player's deck (src/ui/scorestrip.ts): video, period seek bar, controls and scorebug as one unit */
.film-unit, .film-deck { --green: #2e9e5b; --red: #d9433b; }
.film-unit { scroll-margin-top: 64px; background: #070b10; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.film-unit .player-wrap { border-radius: 0; }
.film-unit .player-wrap.portrait { width: min(100%, calc(70vh * var(--arn, 0.5625)), calc(70dvh * var(--arn, 0.5625))); }
@media (max-width: 600px) { .film-unit .player-wrap.portrait { width: min(100%, calc(56vh * var(--arn, 0.5625)), calc(56dvh * var(--arn, 0.5625))); } }
.film-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.player-wrap .player { cursor: pointer; }
.ss-overlay { position: absolute; top: 10px; left: 10px; display: flex; gap: 7px; align-items: center; padding: 5px 10px; border-radius: 8px; background: rgba(7, 11, 16, 0.75); color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; pointer-events: none; text-transform: uppercase; }
.ss-overlay .band { width: 10px; height: 10px; }
.ss-o-dash { color: var(--muted); }
.fd-bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(7, 11, 16, 0.65); color: #fff; display: grid; place-items: center; cursor: pointer; }
.fd-bigplay[hidden] { display: none; }
.fd-bigplay svg { margin-left: 4px; fill: currentColor; }
.film-deck { background: #0d141c; }
.fd-controls { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.fd-clock:empty { display: none; }
.fd-bar { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.fd-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.fd-seg { position: absolute; top: 8px; height: 6px; background: #2a3644; border-radius: 3px; }
.fd-fill { position: absolute; left: 0; top: 8px; height: 6px; background: var(--clock); border-radius: 3px; pointer-events: none; }
.fd-knob { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(242, 180, 58, 0.45); pointer-events: none; }
.fd-tick { position: absolute; top: 0; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; pointer-events: none; }
.fd-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 700 0.9rem var(--font); cursor: pointer; }
.fd-btn:hover { background: #1b2734; }
.fd-btn:focus-visible { outline: 2px solid var(--focus); }
.fd-play svg { fill: currentColor; }
.fd-btn-t { font-size: 0.72rem; color: var(--muted); }
.fd-clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; white-space: nowrap; }
.fd-clock b { color: var(--clock); }
.fd-grow { flex: 1; }
.fd-speed { width: auto; min-height: 36px; background: #1b2734; border-color: #2a3644; }
.fd-bug { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto; border-top: 1px solid var(--line); background: #121a23; }
.fd-names { display: grid; grid-template-rows: 1fr 1fr; border-right: 1px solid var(--line); padding: 4px 0; }
.fd-name { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 36px; min-width: 0; }
.fd-who { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-score { font-family: var(--font-cond); font-size: 1.35rem; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.fd-cols { display: flex; overflow-x: auto; scrollbar-width: none; }
.fd-col { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; padding: 4px 12px 4px 10px; border-right: 1px solid var(--line); min-width: 120px; }
.fd-col.current { background: rgba(242, 180, 58, 0.06); }
.fd-col-label { grid-row: 1 / span 2; font-size: 0.78rem; font-weight: 700; color: #c9d3de; background: #2a3644; padding: 2px 7px; border-radius: 4px; }
.fd-col.current .fd-col-label { background: var(--clock); color: #1d1405; }
.fd-row-chips { display: flex; gap: 6px; align-items: center; min-height: 36px; }
.fd-chip { min-height: 30px; min-width: 38px; }
.fd-chip.later { opacity: 0.4; }
.fd-chip.on { outline: 2px solid var(--clock); outline-offset: 2px; }
.fd-nav { display: grid; grid-template-rows: 1fr auto 1fr; border-left: 1px solid var(--line); min-width: 64px; }
.fd-step { border: 0; background: transparent; color: var(--clock); cursor: pointer; display: grid; place-items: center; min-height: 32px; }
.fd-step:disabled { color: #3a4757; cursor: default; }
.fd-where { font-size: 0.72rem; color: var(--muted); text-align: center; white-space: nowrap; padding: 0 6px; }
.band-none { background: var(--surface-3); }
@media (max-width: 600px) {
  .fd-bug { grid-template-columns: 124px minmax(0, 1fr) auto; font-size: 0.88rem; }
  .fd-name { padding: 0 8px; gap: 6px; }
  .fd-score { min-width: 1.2em; }
  .fd-col { min-width: 96px; padding: 4px 8px; column-gap: 6px; }
  .film-page h1 { font-size: 1.5rem; }
}
:fullscreen.player-wrap, .player-wrap:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- front page (signed out) */
.layout-landing { min-height: 100vh; background: #0d141c; }
.landing { --lp-red: #3d95e3; --lp-line: #273546; --lp-dim: #8d9db0; background: #0d141c; color: #e9eff5; font-size: 17px; line-height: 1.55; overflow-x: hidden; }
.landing h1, .landing h2, .landing h3 { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0; margin: 0; }
.landing h1 span, .landing h2 span { color: var(--lp-red); }
.lp-wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.lp-dim { color: var(--lp-dim); }
.lp-center { text-align: center; }
.lp-eyebrow { margin: 0; color: var(--lp-red); font-weight: 700; letter-spacing: .14em; font-size: 14px; }
.lp-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 4px; font-weight: 700; text-align: center; }
.lp-btn:hover { text-decoration: none; filter: brightness(1.1); }
.lp-big { min-height: 56px; padding: 0 28px; font-size: 18px; }
.lp-red { background: var(--lp-red); color: #06121f; }
.lp-white { background: #fff; color: #0d141c; }

.lp-nav { display: flex; align-items: center; gap: 20px; padding-top: calc(22px + var(--safe-top)); padding-bottom: 22px; }
.lp-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: 26px; }
.lp-logo:hover, .lp-signin:hover { text-decoration: none; }
.lp-signin { color: #fff; font-weight: 600; white-space: nowrap; }

.lp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 56px; padding-bottom: 40px; }
.landing h1 { font-size: clamp(52px, 7vw, 104px); line-height: .88; }
.lp-lead { margin: 22px auto 28px; max-width: 620px; font-size: 19px; color: #c9d3de; }
.lp-devices { position: relative; width: 100%; max-width: 1000px; margin-top: 64px; padding-right: 110px; box-sizing: border-box; text-align: left; }
.lp-ipad { padding: 16px; border-radius: 34px; background: #1b2734; border: 1px solid #36475b; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.lp-ipad img { display: block; width: 100%; height: auto; border-radius: 20px; }
.lp-iphone { position: absolute; right: 0; bottom: -36px; width: 230px; padding: 9px; border-radius: 40px; background: #000; border: 1px solid #36475b; box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
.lp-iphone img { display: block; width: 100%; height: auto; border-radius: 32px; }

.lp-features { padding-top: 112px; }
.lp-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; }
.lp-tab { position: relative; flex: 1 1 220px; padding: 18px 20px; border: 0; border-top: 4px solid var(--lp-line); background: none; color: var(--lp-dim); font: inherit; text-align: left; cursor: pointer; }
.lp-tab b { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; color: #e9eff5; }
.lp-tab[aria-selected="true"] { border-top-color: var(--lp-red); color: #c9d3de; }
.lp-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Auto-advancing: the bar fills across the top of the tab you're on */
.lp-tab-bar { position: absolute; left: 0; top: -4px; height: 4px; width: 0; background: var(--lp-red); }
.lp-auto .lp-tab[aria-selected="true"] { border-top-color: rgba(61, 149, 227, .3); }
.lp-auto .lp-tab.lp-running .lp-tab-bar { animation: lp-fill var(--lp-auto, 3s) linear forwards; }
.lp-auto.lp-paused .lp-tab.lp-running .lp-tab-bar { animation-play-state: paused; }
@keyframes lp-fill { from { width: 0; } to { width: 100%; } }
.lp-pane:not([hidden]) { animation: lp-fade .35s ease-out; }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lp-pane:not([hidden]) { animation: none; } }
.lp-panes { margin-top: 24px; }
.lp-pane img { display: block; width: 100%; height: auto; border-radius: 8px; }
.lp-pane p { margin: 18px 0 0; color: var(--lp-dim); }

.lp-reels { padding-top: 112px; }
.lp-reels h2 { margin-top: 10px; font-size: clamp(42px, 5.5vw, 76px); line-height: .92; max-width: 980px; }
.lp-reels-cols { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 48px; }
.lp-reels h3 { font-size: 32px; margin-bottom: 14px; }
.lp-steps { flex: 1.4 1 520px; min-width: 0; }
.lp-steps ol { list-style: none; margin: 0; padding: 0; }
.lp-steps li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--lp-line); }
.lp-step-n { font-family: var(--font-cond); font-weight: 800; font-size: 40px; line-height: 1; color: var(--lp-red); }
.lp-steps li b { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.lp-steps li span span { color: var(--lp-dim); }
.lp-filmlist { flex: 1 1 340px; min-width: 0; }
.lp-filmlist > div { padding: 16px 0; border-top: 1px solid var(--lp-line); }
.lp-filmlist b { font-family: var(--font-cond); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.lp-filmlist p { margin: 4px 0 0; color: var(--lp-dim); font-size: 16px; }
.lp-cards { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.lp-cards figure { margin: 0; flex: 1 1 220px; min-width: 0; }
.lp-cards img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--lp-line); }
.lp-cards figcaption { margin-top: 8px; color: var(--lp-dim); font-size: 15px; }

.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 0; padding-top: 104px; }
.lp-facts > div { padding: 0 24px; border-left: 1px solid var(--lp-line); }
.lp-facts > div:first-child { border-left: 0; padding-left: 0; }
.lp-facts b { font-family: var(--font-cond); font-size: 28px; text-transform: uppercase; }
.lp-facts p { margin: 6px 0 0; color: var(--lp-dim); }

.lp-plans-sec { padding-top: 112px; padding-bottom: 96px; }
.lp-plans-sec h2 { font-size: clamp(44px, 6vw, 80px); line-height: .92; }
.lp-sub { margin: 14px 0 0; font-size: 19px; }
.lp-sub b { color: #fff; }
.lp-plans { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin-top: 56px; }
.lp-plan { flex: 1 1 300px; display: flex; flex-direction: column; padding: 36px 32px; border-radius: 10px; background: #141e29; border: 1px solid var(--lp-line); }
.lp-plan.lp-featured { flex-grow: 1.15; background: var(--lp-red); border-color: var(--lp-red); color: #fff; transform: translateY(-16px); box-shadow: 0 30px 80px rgba(61, 149, 227, .35); }
.lp-tag { align-self: flex-start; margin: 0 0 10px; padding: 4px 10px; border-radius: 4px; background: #0d141c; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.lp-plan h3 { font-size: 56px; line-height: .9; }
.lp-price { margin: 14px 0 0; font-family: var(--font-cond); font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; }
.lp-per { margin: 6px 0 0; font-size: 15px; opacity: .8; }
.lp-plan ul { list-style: none; margin: 22px 0 28px; padding: 0; }
.lp-plan li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); color: #c9d3de; }
.lp-featured li { color: #fff; border-top-color: rgba(255, 255, 255, .25); }
.lp-plan .lp-btn { margin-top: auto; }

.lp-foot { border-top: 1px solid var(--lp-line); }
.lp-foot .lp-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-top: 24px; padding-bottom: 24px; color: #7d8ea2; font-size: 15px; }
.lp-foot a { color: #7d8ea2; }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.auth-home { display: block; margin-top: 14px; text-align: center; color: var(--muted); }

@media (max-width: 640px) {
  .lp-wrap { padding-left: 16px; padding-right: 16px; }
  .lp-logo { font-size: 20px; gap: 8px; }
  .lp-logo svg { width: 28px; height: 28px; }
  .lp-nav { gap: 12px; }
  .lp-nav .lp-btn { padding: 0 12px; }
  .lp-hero { padding-top: 32px; }
  .lp-lead { font-size: 18px; }
  .lp-hero > .lp-btn { width: 100%; }
  .lp-devices { margin-top: 40px; padding-right: 64px; }
  .lp-ipad { padding: 7px; border-radius: 16px; }
  .lp-ipad img { border-radius: 10px; }
  .lp-iphone { width: 120px; padding: 5px; border-radius: 22px; bottom: -24px; }
  .lp-iphone img { border-radius: 18px; }
  .lp-features, .lp-reels { padding-top: 72px; }
  .lp-tabs { flex-wrap: nowrap; }
  .lp-tab { flex: 1 1 0; min-width: 0; padding: 12px 4px; }
  .lp-tab b { font-size: 20px; }
  .lp-tab span { display: none; }
  .lp-reels-cols { gap: 32px; }
  .lp-steps, .lp-filmlist { flex-basis: 100%; }
  .lp-cards figure { flex-basis: calc(50% - 8px); }
  .lp-facts { padding-top: 64px; }
  .lp-facts > div, .lp-facts > div:first-child { border-left: 0; padding: 0; }
  .lp-plans-sec { padding-top: 72px; padding-bottom: 56px; }
  .lp-plans { margin-top: 32px; }
  .lp-plan.lp-featured { transform: none; order: -1; }
  .lp-plan h3 { font-size: 44px; }
}

/* Dual lineup: score now or just film */
.how-choice { display: grid; gap: 10px; }
.how-card { grid-template-columns: 1fr; background: var(--surface-2); text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.how-card:disabled { opacity: .5; cursor: not-allowed; }

/* Film Study: scored (part 1) and the recap (part 2) */
.chip-part { background: rgba(242, 180, 58, 0.14); color: var(--clock); border-color: rgba(242, 180, 58, 0.4); }
.study-item + .study-item { border-top: 1px solid var(--line); }
.study-item .study-row { border-top: 0; }
.recap-open { margin: 0 0 10px 0; padding: 0 12px; }
.recap-open > summary { cursor: pointer; color: var(--us-ink); font-size: 0.9rem; }
.recap { display: grid; gap: 6px; margin: 8px 0; }
.recap > div { display: flex; gap: 10px; align-items: baseline; }
.recap-k { flex: 0 0 72px; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: .04em; }
.recap-win { color: var(--ok); }
.recap-miss { color: var(--opp-ink); }
.recap-goal { color: var(--clock); }
.recap-form { display: grid; gap: 10px; }
.recap-field textarea { width: 100%; }
.study-how { margin: 4px 0 16px; }


/* Film study recap beside the film */
.recap-panel { margin: 0 0 18px; padding: 14px; border-radius: var(--radius); border: 1px solid rgba(242, 180, 58, 0.45); background: rgba(242, 180, 58, 0.06); }
.recap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.recap-head h2 { margin: 0; font-size: 1.25rem; }
.recap-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.recap-time .btn { min-height: 30px; padding: 2px 8px; font-size: 0.82rem; }
.recap-marked { display: inline-flex; align-items: center; gap: 8px; }
.recap-panel .recap-field textarea { min-height: 58px; }
.recap > div > span:last-child { min-width: 0; }
.onboard-login { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.onboard-login h3 { margin: 0; font-size: 1rem; }

/* ---- Sign in / Create account: the front page's look, split screen */
.layout-auth.auth-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr); place-items: stretch; padding: 0; min-height: 100vh; min-height: 100dvh; background: #0d141c; color: #e9eff5; }
.auth-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: calc(36px + var(--safe-top)) clamp(28px, 5vw, 72px) calc(36px + var(--safe-bottom)); background: radial-gradient(120% 70% at 0% 100%, rgba(61, 149, 227, .22), transparent 60%), radial-gradient(90% 60% at 100% 0%, rgba(46, 158, 91, .10), transparent 60%), #0d141c; border-right: 1px solid #22303f; }
.auth-hero-brand, .auth-form-brand { color: inherit; text-decoration: none; align-self: flex-start; }
.auth-hero-h { margin: auto 0 0; font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 3.9vw, 3.9rem); line-height: .9; letter-spacing: 0; }
.auth-hero-h span { color: #3d95e3; }
.auth-hero-p { margin: 0; max-width: 34em; color: #c9d3de; font-size: 1.08rem; line-height: 1.5; }
.auth-devices { position: relative; margin: 6px 0 0; padding-right: 84px; width: min(100%, 600px, calc((100vh - 470px) * 1.62)); min-width: 300px; }
.auth-ipad { padding: 10px; border-radius: 24px; background: #1b2734; border: 1px solid #36475b; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.auth-ipad img { display: block; width: 100%; height: auto; border-radius: 15px; }
.auth-iphone { position: absolute; right: 0; bottom: -18px; width: 27%; padding: 6px; border-radius: 30px; background: #000; border: 1px solid #36475b; box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
.auth-iphone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.auth-hero-foot { margin: 18px 0 auto; color: #7d8ea2; font-size: .9rem; font-weight: 600; }
.auth-main { display: grid; place-items: center; padding: calc(40px + var(--safe-top)) 24px calc(40px + var(--safe-bottom)); background: #111b26; }
.auth-split .auth-form { width: min(420px, 100%); background: transparent; border: 0; padding: 0; gap: 16px; }
.auth-form-brand { display: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: #1b2734; border: 1px solid #273546; }
.auth-tab { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: #8d9db0; font: inherit; font-weight: 700; cursor: pointer; }
.auth-tab:hover { color: #e9eff5; }
.auth-tab.on { background: #e9eff5; color: #0d141c; }
.auth-tab:focus-visible { outline: 2px solid #3d95e3; outline-offset: 2px; }
.auth-title { margin: 10px 0 0; font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: 2.4rem; line-height: 1; letter-spacing: 0; }
.auth-sub { margin: -6px 0 2px; color: #8d9db0; }
.auth-split .field-label { color: #c9d3de; font-weight: 600; }
.auth-split input:not([type=checkbox]) { min-height: 50px; background: #0d141c; border-color: #36475b; border-radius: 10px; font-size: 1rem; padding: 0 14px; color: #e9eff5; }
.auth-split input::placeholder { color: #5d6d80; }
.auth-split input:focus { outline: none; border-color: #3d95e3; box-shadow: 0 0 0 3px rgba(61, 149, 227, .25); }
.auth-pass { position: relative; display: block; }
.auth-pass input { width: 100%; box-sizing: border-box; padding-right: 72px !important; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #8d9db0; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.auth-eye:hover, .auth-eye:focus-visible { color: #e9eff5; background: #22303f; }
.auth-forgot { display: flex; justify-content: flex-end; margin-top: -8px; }
.auth-forgot:has(> [hidden]) { display: none; }
.auth-split .btn-primary { min-height: 54px; background: #3d95e3; border-color: #3d95e3; color: #06121f; font-weight: 700; font-size: 1.05rem; border-radius: 10px; }
.auth-split .btn-primary:hover { background: #5aa7ea; border-color: #5aa7ea; }
.auth-split .btn-link { color: #c9d3de; }
.auth-perks { list-style: none; margin: 2px 0 0; padding: 14px 0 0; border-top: 1px solid #22303f; display: grid; gap: 8px; color: #c9d3de; font-size: .93rem; }
.auth-perks li { display: flex; gap: 10px; align-items: baseline; }
.auth-perks li::before { content: '✓'; color: #2e9e5b; font-weight: 800; }
.auth-split .auth-home { color: #7d8ea2; text-align: center; }
.auth-split .callout { background: #1b2734; border-left-color: #3d95e3; color: #e4e4e7; }
.auth-split .form-msg { margin: 0; }
@media (max-width: 920px) {
  .layout-auth.auth-split { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-main { align-items: start; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: calc(var(--safe-top) + max(28px, 6vh)) 16px calc(28px + var(--safe-bottom)); background: radial-gradient(120% 50% at 50% 0%, rgba(61, 149, 227, .16), transparent 70%), #0d141c; }
  .auth-form-brand { display: flex; margin-bottom: 4px; }
  .auth-title { font-size: 2.1rem; }
}
.confirm-box { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 10px; background: var(--us-bg); border: 1px solid var(--us); color: var(--text); text-align: left; }
.confirm-box strong { font-size: 1.05rem; }
.confirm-box p { margin: 0; }
.confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.confirm-actions .btn { min-height: 40px; }

/* ---- Practice planner and technique library (Team plan) */
.pp-page > * + * { margin-top: 16px; }
.pp-page .film-switch { margin-bottom: 0; }
.pp-page .back { margin-bottom: -6px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.pre { white-space: pre-wrap; }
.text-danger { color: var(--opp-ink); }
.eyebrow { margin: 0; color: var(--us-ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow-btn { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.chip-btn:hover { color: var(--text); }
.chip-btn.on { background: var(--us); border-color: var(--us); color: #06121f; }
.chip-removable button { background: none; border: 0; color: inherit; font-size: 1rem; line-height: 1; padding: 0 0 0 4px; cursor: pointer; }
/* Team status colors */
.ts-nw { background: rgba(232, 102, 94, 0.16); border-color: rgba(232, 102, 94, 0.5); color: var(--opp-ink); }
.ts-dev { background: rgba(242, 180, 58, 0.15); border-color: rgba(242, 180, 58, 0.5); color: #f2c66b; }
.ts-sol { background: var(--us-bg); border-color: rgba(61, 149, 227, 0.5); color: var(--us-ink); }
.ts-cr { background: rgba(63, 191, 138, 0.15); border-color: rgba(63, 191, 138, 0.5); color: #8fe0bd; }
.tech-quick { display: flex; gap: 8px; }
.tech-quick input { flex: 1; min-width: 0; }
.tech-search { width: 100%; }
.tech-list .list-row { padding: 12px 4px; }
.tech-list .list-main { display: flex; flex-direction: column; gap: 4px; color: var(--text); white-space: normal; }
.tech-list .list-main:hover { text-decoration: none; }
.tech-sub { display: block; }
.flag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clock); flex: none; }
.tech-head h1 { margin: 4px 0 2px; }
.status-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.status-btns.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-btn { min-height: 44px; padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.status-btn.on { color: var(--text); background: var(--us-bg); border-color: var(--us); }
.status-btn.ts-nw.on, .status-btn.ts-dev.on, .status-btn.ts-sol.on, .status-btn.ts-cr.on { border-width: 2px; }
.status-btn.ts-nw:not(.on), .status-btn.ts-dev:not(.on), .status-btn.ts-sol:not(.on), .status-btn.ts-cr:not(.on) { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); }
.flag-row { margin: 14px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.panel > h2 { margin-bottom: 12px; }
.tech-detail { margin: 0; display: grid; gap: 4px 0; }
.tech-detail dt { margin-top: 12px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tech-detail dt:first-child { margin-top: 0; }
.tech-detail dd { margin: 0; line-height: 1.55; }
.tech-form textarea { min-height: 72px; }
/* Practices */
.practice-row .list-main { white-space: normal; }
.practice-sub { display: block; }
.practice-head h1 { margin: 4px 0 2px; }
.practice-head > * + * { margin-top: 14px; }
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-list { display: flex; flex-direction: column; gap: 8px; }
.block-card { position: relative; display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.block-stripe { width: 6px; flex: none; }
.block-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px 14px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; }
.block-main:hover { background: var(--surface-3); }
.block-kicker { color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.block-kicker b { color: var(--text); }
.block-plan { white-space: pre-wrap; }
.block-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border-left: 1px solid var(--line); }
.block-mins { font-family: var(--font-cond); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.block-side .btn-icon { width: 36px; height: 32px; }
.block-side .btn-icon:disabled { opacity: 0.3; }
.block-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bt-warmup { background: #f2b43a; }
.bt-cardio { background: #e8665e; }
.bt-techniquedrill { background: #3d95e3; }
.bt-live { background: #b46cf0; }
.bt-situational { background: #3fbf8a; }
.bt-talkbreak { background: #8d9db0; }
.list-btn { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; cursor: pointer; }
.list-btn:hover { background: var(--surface-2); }
.recap-block { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.recap-block .row { align-items: flex-end; }
.recap-block .check { min-height: 44px; }
.practice-actions { padding-top: 4px; }
@media (max-width: 700px) {
  .status-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-btns.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.tiles-3 .tile-value { font-size: 1.5rem; }
}
/* Planner look (from the Coaches Hub): condensed caps headings, the next practice in team colors */
.pp-page h2 { font-family: var(--font-cond); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pp-page .page-head h1 { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.pp-sec > * + * { margin-top: 10px; }
.pp-sec > .row-between h2 { margin: 0; }
.pp-hero { --pp-gold: var(--team-accent-text, #ffc62a); --pp-ink: var(--team-card-ink, #fff); --pp-muted: color-mix(in srgb, var(--pp-ink) 66%, var(--team-main, #0f2d55));
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border-radius: var(--radius); background: linear-gradient(135deg, var(--team-main, #0f2d55) 0%, var(--team-deep, #0b2140) 100%); border: 1px solid var(--team-line, #23436b); border-bottom: 4px solid var(--team-accent, #ffc62a); color: var(--pp-ink); }
.pp-hero-logo { position: absolute; right: -34px; top: -20px; width: 200px; height: 200px; object-fit: contain; opacity: 0.13; transform: rotate(-8deg); z-index: -1; pointer-events: none; }
.pp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pp-hero-eyebrow { margin: 0; color: var(--pp-gold); font-family: var(--font-cond); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; }
button.pp-hero-eyebrow { font-family: var(--font-cond); }
.pp-hero-title { margin: 2px 0 0; font-family: var(--font-cond); font-weight: 700; font-size: clamp(28px, 4.4vw, 36px); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; color: var(--pp-ink); }
.pp-hero-muted { color: var(--pp-muted); margin: 4px 0 0; }
.pp-over { color: #ff8a82; margin: 4px 0 0; }
.pp-hero-link { color: var(--pp-gold); padding: 0; }
.pp-countdown { flex: none; font-family: var(--font-cond); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--pp-gold); text-transform: uppercase; white-space: nowrap; }
.pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-stats > div { display: grid; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--pp-ink) 9%, transparent); }
.pp-stats b { font-family: var(--font-cond); font-weight: 700; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-stats span { color: var(--pp-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.pp-hero-actions .btn { min-height: 46px; }
.btn-gold { background: var(--team-accent, #ffc62a); border-color: var(--team-accent, #ffc62a); color: var(--team-accent-ink, #2b2000); font-weight: 700; }
.btn-gold:hover { background: var(--team-accent, #ffc62a); color: var(--team-accent-ink, #2b2000); filter: brightness(1.08); }
.btn-onband { background: transparent; border-color: color-mix(in srgb, var(--pp-ink, #fff) 38%, transparent); color: var(--pp-ink, #fff); }
.btn-onband:hover { background: color-mix(in srgb, var(--pp-ink, #fff) 10%, transparent); color: var(--pp-ink, #fff); }
.pp-timeline { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.pp-timeline i { display: block; min-width: 4px; }
.pp-timeline-sm { height: 5px; max-width: 260px; margin-top: 6px; }
.pp-date { flex: none; width: 48px; height: 52px; display: grid; place-content: center; text-align: center; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.pp-date span { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; }
.pp-date b { font-family: var(--font-cond); font-size: 1.45rem; font-weight: 700; line-height: 1; }
.pp-date-tpl { color: var(--muted); }
.practice-row { padding: 10px 6px; }
.pp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.pp-two > .panel { margin: 0; }
.pp-rev-main { color: var(--text); white-space: normal; }
.pp-rev-main:hover { text-decoration: none; }
.flag-dot.amber { background: #e0a542; }
.pp-last-head { margin-bottom: 12px; }
/* Blocks as one list, like the hub */
.pp-page .block-list { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.pp-page .block-card { border: 0; border-radius: 0; border-top: 1px solid var(--line); background: var(--surface); }
.pp-page .block-card:first-child { border-top: 0; }
.pp-page .block-main:hover { background: var(--surface-2); }
.pp-page .block-kicker { letter-spacing: 0.08em; font-size: 0.74rem; font-weight: 700; }
.pp-page .block-mins { font-size: 1.5rem; }
@media (max-width: 700px) {
  .pp-hero { padding: 16px; }
  .pp-hero-actions .btn { flex: 1 1 130px; min-height: 48px; }
  .pp-countdown { font-size: 1.25rem; }
  .pp-sec > .row-between .muted { display: none; }
}
@media print { .pp-hero { background: #fff !important; color: #000 !important; border-color: #bbb !important; } .pp-hero-logo, .pp-hero-actions, .pp-countdown { display: none !important; } .pp-hero-title, .pp-hero-eyebrow, .pp-stats span { color: #000 !important; } .pp-stats > div { background: #f2f2f2 !important; } }
/* Live practice: a mat-side scoreboard — navy, condensed type, gold for "now", the team logo behind it */
.live-practice { --lv-bg: var(--team-deep, #0b2140); --lv-card: var(--team-card, #123058); --lv-line: var(--team-line, #23436b); --lv-ink: var(--team-ink, #eef4fa); --lv-muted: var(--team-muted, #9fb6d0); --lv-gold: var(--team-accent-text, #ffc62a); --lv-sky: var(--team-accent, #4fb8ec);
  position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain; background: var(--lv-bg); color: var(--lv-ink);
  padding: calc(14px + var(--safe-top)) 16px calc(20px + var(--safe-bottom)); box-sizing: border-box; }
.lv-watermark { position: fixed; right: -60px; bottom: -40px; width: 340px; height: 340px; object-fit: contain; opacity: 0.08; pointer-events: none; user-select: none; }
.lv-wrap { position: relative; max-width: 640px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lv-top { display: flex; align-items: center; gap: 8px; }
.lv-top .btn { background: transparent; color: var(--lv-ink); border-color: var(--lv-line); }
.lv-top .btn:disabled { opacity: 0.35; }
.lv-count { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lv-crest { width: 26px; height: 26px; object-fit: contain; }
.lv-meta { color: var(--lv-muted); font-family: var(--font-cond); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lv-progress { display: flex; gap: 4px; }
.lv-dot { flex: 1; height: 6px; border: 0; padding: 0; border-radius: 3px; background: var(--lv-line); cursor: pointer; background-clip: content-box; padding-block: 8px; box-sizing: content-box; }
.lv-dot.cur { background-color: var(--team-accent, #ffc62a); }
.lv-dot.done { background-color: #3fbf78; }
.lv-dot.partial { background-color: #e0a542; }
.lv-dot.skipped { background-color: #5a6b80; }
.lv-dot:focus-visible { outline: 2px solid var(--lv-gold); }
.lv-kicker { color: var(--lv-gold); font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: -10px; }
.lv-title { margin: 0; font-family: var(--font-cond); font-weight: 700; font-size: clamp(30px, 8vw, 46px); line-height: 1.02; text-transform: uppercase; text-wrap: balance; letter-spacing: 0.01em; }
.lv-was { margin: 0; align-self: flex-start; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 600; }
.lv-time { font-family: var(--font-cond); font-weight: 700; font-size: clamp(84px, 30vw, 170px); line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lv-time.over { color: #f0645b; }
.lv-time.paused { opacity: 0.45; }
.lv-sub { color: var(--lv-muted); font-size: 0.95rem; margin-top: -8px; }
.lv-cues { border-left: 3px solid var(--lv-sky); padding-left: 12px; font-size: 1rem; }
.lv-cues .lv-meta { margin-bottom: 2px; }
.lv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lv-row2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.lv-btn { min-height: 58px; border-radius: 12px; border: 1px solid var(--lv-line); background: var(--lv-card); color: var(--lv-ink); font: inherit; font-weight: 700; font-size: 1.06rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; touch-action: manipulation; }
.lv-btn:active { filter: brightness(1.15); }
.lv-btn.ok { background: #17834a; border-color: #17834a; color: #fff; }
.lv-btn.part { background: #a86d12; border-color: #a86d12; color: #fff; }
.lv-flag.on { background: var(--team-accent, #ffc62a); border-color: var(--team-accent, #ffc62a); color: var(--team-accent-ink, #2b2000); }
.lv-note { background: transparent; border: 1.5px dashed var(--lv-gold); color: var(--lv-gold); }
.lv-notes { background: var(--lv-card); border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; display: grid; gap: 4px; }
.lv-notes .lv-meta { font-size: 0.78rem; }
.lv-next { margin-top: auto; border-top: 1px solid var(--lv-line); padding-top: 12px; color: var(--lv-muted); }
.lv-next b { color: var(--lv-ink); }
@media (max-width: 700px) { .lv-btn { min-height: 66px; border-radius: 14px; } .lv-title { font-size: clamp(28px, 9vw, 40px); } }
/* Printing a practice plan: just the plan */
@media print {
  .sidebar, .topbar, .trial-banner, .film-switch, .practice-actions, .block-side .btn-icon, .back, .btn, #toasts, .uploads { display: none !important; }
  body, .layout-shell, .main { background: #fff !important; color: #000 !important; height: auto !important; overflow: visible !important; display: block !important; }
  .panel, .block-card { background: #fff !important; border-color: #bbb !important; color: #000 !important; break-inside: avoid; }
  .muted, .block-kicker { color: #444 !important; }
}
.steps { margin: 0 0 4px; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }