/* ━━ Theme initializer (prevent flash) ━━ */
/* ━━ Design Tokens ━━ */
:root, [data-theme="dark"] {
  --bg: #111820;
  --surface: #19212D;
  --surface-2: #1F2A38;
  --surface-hover: #253344;
  --primary: #45A8C8;
  --primary-hover: #5BC0E0;
  --primary-dim: rgba(69,168,200,0.12);
  --green: #43A047;
  --green-hover: #4CAF50;
  --green-dim: rgba(67,160,71,0.12);
  --red: #EF5350;
  --red-dim: rgba(239,83,80,0.10);
  --amber: #FFB74D;
  --amber-dim: rgba(255,183,77,0.10);
  --text: #E8ECF0;
  --text-2: #8B95A5;
  --text-3: #586474;
  --border: rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.12);
  --radius: 8px;
  --radius-sm: 5px;
  --font: 'Montserrat', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ghost-hover: rgba(255,255,255,0.05);
  --reject-hover: rgba(255,255,255,0.04);
  --reject-preview-bg: rgba(255,255,255,0.03);
  --modal-backdrop: rgba(0,0,0,0.6);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-warning: 0 4px 12px rgba(0,0,0,0.3);
  --kbd-bg: var(--surface-2);
  --kbd-border: var(--border-2);
  --kbd-text: var(--text-2);
}

[data-theme="light"] {
  --bg: #E4E6EB;
  --surface: #FFFFFF;
  --surface-2: #DDE0E7;
  --surface-hover: #D2D5DC;
  --primary: #2E8FAB;
  --primary-hover: #257A94;
  --primary-dim: rgba(46,143,171,0.14);
  --green: #2E7D32;
  --green-hover: #388E3C;
  --green-dim: rgba(46,125,50,0.12);
  --red: #D32F2F;
  --red-dim: rgba(211,47,47,0.10);
  --amber: #E69100;
  --amber-dim: rgba(230,145,0,0.12);
  --text: #141820;
  --text-2: #3D4554;
  --text-3: #687080;
  --border: rgba(0,0,0,0.15);
  --border-2: rgba(0,0,0,0.24);
  --ghost-hover: rgba(0,0,0,0.07);
  --reject-hover: rgba(0,0,0,0.06);
  --reject-preview-bg: rgba(0,0,0,0.05);
  --modal-backdrop: rgba(0,0,0,0.35);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.18);
  --shadow-warning: 0 4px 12px rgba(0,0,0,0.14);
  --kbd-bg: #D4D7DE;
  --kbd-border: rgba(0,0,0,0.22);
  --kbd-text: #3D4554;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  font-size: 14px;
  line-height: 1.5;
}
#root { min-height: 100vh; display: flex; flex-direction: column; }

/* ━━ Utilities ━━ */
.sl-mono { font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; }
.sl-muted { color: var(--text-2); }

/* ━━ Buttons ━━ */
.sl-btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sl-btn:disabled { opacity: 0.4; cursor: default; }
/* Mask-based button icon — inherits the button's text color (currentColor) so
   it's correct on filled buttons and in both themes. */
.sl-btn-icon {
  display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
  background-color: currentColor;
}
.sl-btn-icon-plus {
  -webkit-mask: url("assets/plus-circle.svg") no-repeat center / contain;
  mask: url("assets/plus-circle.svg") no-repeat center / contain;
}
.sl-btn-primary { background: var(--primary); color: #fff; }
.sl-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.sl-btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); }
.sl-btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }
.sl-btn-green { background: var(--green); color: #fff; }
.sl-btn-green:hover:not(:disabled) { background: var(--green-hover); }
.sl-btn-ghost { background: transparent; color: var(--text-2); }
.sl-btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--ghost-hover); }
.sl-btn-sm { font-size: 12px; padding: 5px 10px; }
.sl-btn-full { width: 100%; justify-content: center; }

/* ━━ Tags / Badges ━━ */
.sl-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-2);
  text-transform: capitalize;
}
.sl-tag-muted { opacity: 0.6; }
.sl-tag-ready { background: var(--green-dim); color: var(--green); }
.sl-tag-analyzing { background: var(--amber-dim); color: var(--amber); }
.sl-tag-delivered { background: var(--primary-dim); color: var(--primary); }
.sl-tag-failed { background: var(--red-dim); color: var(--red); }
.sl-tag-120fps { background: rgba(224,64,251,0.12); color: #E040FB; }
.sl-tag-female { background: rgba(233,30,99,0.12); color: #E91E63; }
.sl-tag-male { background: rgba(33,150,243,0.12); color: #2196F3; }
.sl-tag-rejected { background: var(--red-dim); color: var(--red); }
.sl-badge {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
}

/* ━━ Alerts ━━ */
.sl-alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.sl-alert-err { background: var(--red-dim); color: var(--red); }
.sl-alert-ok  { background: var(--green-dim); color: var(--green); }

/* ━━ Login ━━ */
.sl-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sl-login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sl-login-logo { width: 80px; height: 80px; object-fit: contain; }
.sl-login-title { font-size: 22px; font-weight: 700; }
.sl-login-sub { color: var(--text-2); font-size: 14px; margin-top: -8px; }
.sl-dev-section { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.sl-dev-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 10px 12px;
  resize: vertical;
}
.sl-dev-input::placeholder { color: var(--text-3); }

/* Custom auth forms (results-auth.jsx) */
.sl-auth-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.sl-auth-field { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.sl-auth-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.sl-auth-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 11px 12px;
}
.sl-auth-input:focus { outline: none; border-color: var(--primary); }
.sl-auth-input::placeholder { color: var(--text-3); }
.sl-auth-link {
  background: none; border: none; padding: 0;
  color: var(--primary); font-family: var(--font); font-size: 13px; cursor: pointer;
}
.sl-auth-link:hover { color: var(--primary-hover); text-decoration: underline; }
.sl-auth-notice {
  width: 100%; font-size: 13px; color: var(--text-2);
  background: var(--primary-dim); border-radius: var(--radius-sm); padding: 8px 10px;
}
.sl-auth-row { display: flex; align-items: center; width: 100%; margin-top: 2px; }
.sl-auth-divider {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.sl-auth-divider::before, .sl-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-2); }
/* Provider logos on the social sign-in buttons. */
.sl-social-icon { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
/* The Apple logo asset is solid black; invert it to white for the dark button. */
.sl-social-icon-apple { filter: invert(1); }

/* ━━ App Shell ━━ */
.sl-app { display: flex; flex-direction: column; min-height: 100vh; }
.sl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sl-header-left { display: flex; align-items: center; gap: 12px; }
.sl-header-logo { width: 32px; height: 32px; object-fit: contain; }
.sl-header-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.sl-header-right { display: flex; align-items: center; gap: 12px; }
.sl-header-user { color: var(--text-2); font-size: 13px; }
.sl-header-exp {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 4px;
}
.sl-main { flex: 1; }

/* ━━ Queue ━━ */
.sl-queue { max-width: 1200px; margin: 0 auto; padding: 32px 24px; width: 100%; }
.sl-queue-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sl-queue-title-row { display: flex; align-items: center; gap: 10px; }
.sl-queue-title-row h2 { font-size: 20px; font-weight: 700; }
.sl-queue-list { display: flex; flex-direction: column; gap: 6px; }
/* Collapsible / capped sections */
.sl-queue-section { margin-bottom: 22px; }
.sl-queue-head-btn { width: 100%; background: transparent; border: none; padding: 0; cursor: pointer; font-family: var(--font); color: var(--text); }
.sl-queue-chevron { display: inline-block; color: var(--text-3); font-size: 11px; transition: transform 0.15s, color 0.15s; }
.sl-queue-chevron.open { transform: rotate(90deg); }
.sl-queue-head-btn:hover .sl-queue-chevron { color: var(--text); }
.sl-queue-showmore {
  width: 100%; padding: 11px; margin-top: 2px;
  background: transparent; border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600;
  transition: all 0.15s;
}
.sl-queue-showmore:hover { color: var(--text); border-color: var(--text-3); background: var(--surface); }
.sl-queue-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
}
.sl-queue-row:hover { background: var(--surface-hover); border-color: var(--border-2); }
.sl-queue-row-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Date + age pill on one line. */
.sl-queue-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-queue-date { font-weight: 500; font-size: 13px; color: var(--text-2); }
/* When there's no submitter name (a user's own queue), the date is the lead. */
.sl-queue-date-lead { font-size: 16px; font-weight: 600; color: var(--text); }
/* Full submission ID — kept for debug/copy, but demoted to a quiet footnote. */
.sl-queue-id { color: var(--text-3); font-size: 11px; }
/* Provenance line — "Filmed by X for Y · 🏛 Org". Quieter than the date
   so it reads as context rather than primary header info. Used by both
   the list-row and grid-card layouts so they share visual weight. */
.sl-queue-provenance, .sl-card-provenance {
  color: var(--text-2);
  font-size: 12px;
  margin-top: 2px;
}
/* Phase 4b: per-serve "hide from coaches" toggle. Always small + quiet
   when visible; slightly more emphatic when active so the player
   notices a serve is currently hidden. Inline span (not a button) so
   it can live inside the card's outer <button> without nested-button
   shenanigans — handlers stopPropagation in JS. */
.sl-hide-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.sl-hide-toggle:hover { color: var(--text); }
.sl-hide-toggle.sl-hide-toggle-on {
  color: var(--warn, #c80);
  text-decoration: none;
  font-weight: 500;
}
/* Phase 6: share-link controls. Same quiet-by-default treatment as
   .sl-hide-toggle. When active uses the primary color to read as a
   genuine "this serve is shared publicly" status. */
.sl-share-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.sl-share-toggle:hover { color: var(--text); }
.sl-share-toggle.sl-share-toggle-on {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.sl-share-line { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.sl-share-stop {
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.sl-share-stop:hover { color: var(--warn, #c80); }
.sl-queue-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sl-queue-arrow { color: var(--text-3); font-size: 18px; margin-left: 4px; }
/* Prominent per-row call-to-action (Annotate / View feedback / Retry). Replaces
   the tiny status tag + tiny arrow — the section header already names the state. */
.sl-queue-cta {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.sl-queue-cta-arrow { font-size: 17px; line-height: 1; opacity: 0.9; transition: transform 0.15s; }
.sl-queue-row:hover .sl-queue-cta-arrow { transform: translateX(3px); }
.sl-queue-row-dim { opacity: 0.5; cursor: default; }
.sl-queue-row-dim:hover { background: var(--surface); border-color: var(--border); }
.sl-queue-list-dim { margin-top: 6px; }

/* Row main column (thumbnail + text), so the right-side tags stay pinned. */
.sl-queue-row-main { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1; }
/* Name + date share the top line; date sits to the right of the name. */
.sl-queue-owner-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sl-queue-owner { font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--text); letter-spacing: -0.01em; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-queue-fail {
  font-size: 12px; color: var(--red); margin-top: 4px;
  max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lazy serve thumbnail (muted <video> frame from the presigned source_url).
   Portrait box — serves are vertical, so a landscape box cropped them badly. */
.sl-queue-thumb {
  width: 72px; height: 104px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.sl-queue-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sl-queue-thumb-ph { font-size: 30px; opacity: 0.35; }

/* In-flight ("being worked on") affordances: friendly tag, a status sub-label,
   a small spinner where the click arrow would be, and an indeterminate progress
   bar along the row's bottom edge. The bar makes "something is happening"
   obvious even though we don't have true per-job progress %. */
.sl-tag-uploaded { background: var(--primary-dim); color: var(--primary); }
.sl-queue-status { font-size: 12px; color: var(--primary); margin-top: 2px; }
.sl-queue-spinner {
  width: 15px; height: 15px; flex-shrink: 0; margin-left: 4px;
  border-radius: 50%;
  border: 2px solid var(--surface-2); border-top-color: var(--primary);
  animation: sl-spin 0.8s linear infinite;
}
.sl-queue-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--surface-2); overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
}
.sl-queue-progress::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%;
  background: var(--primary); border-radius: 3px;
  animation: sl-indeterminate 1.5s ease-in-out infinite;
}
@keyframes sl-indeterminate {
  0%   { left: -35%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}
@keyframes sl-spin { to { transform: rotate(360deg); } }

/* Queue controls: search + state filter + sort. */
.sl-queue-controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
/* Unify the heights of every direct control in this row (search, state filter,
   sort button, layout toggle, Select button) so they line up flush. Buttons
   already vertical-center via inline-flex; the input + select need their
   vertical padding zeroed so the explicit height drives the box. */
.sl-queue-controls > * { box-sizing: border-box; height: 34px; }
.sl-queue-controls > .sl-queue-search,
.sl-queue-controls > .sl-queue-select { padding-top: 0; padding-bottom: 0; }
.sl-queue-search {
  flex: 1; min-width: 220px; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font); font-size: 13px;
}
.sl-queue-search::placeholder { color: var(--text-3); }
.sl-queue-search:focus { outline: none; border-color: var(--primary); }
.sl-queue-select {
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 13px; cursor: pointer;
}
.sl-queue-select:focus { outline: none; border-color: var(--primary); }

/* ── Header account control + theme toggle ── */
/* Clickable greeting + gear → opens the account screen. Looks interactive. */
.sl-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 6px 10px; cursor: pointer; color: var(--text);
  font-family: var(--font); font-size: 14px; transition: all 0.15s;
}
.sl-account-btn:hover { background: var(--surface-2); border-color: var(--border-2); }
.sl-greeting { font-weight: 600; white-space: nowrap; }
.sl-account-btn .sl-gear { color: var(--text-2); flex-shrink: 0; transition: color 0.15s, transform 0.3s; }
.sl-account-btn:hover .sl-gear { color: var(--text); transform: rotate(45deg); }
.sl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font-size: 15px; line-height: 1; transition: all 0.15s;
}
.sl-icon-btn:hover { background: var(--surface-2); border-color: var(--border-2); }
@media (max-width: 640px) { .sl-greeting { display: none; } }

/* ── Account / settings screen ── */
.sl-header-account { font-weight: 400; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-header-account:hover { color: var(--text); }
.sl-account { max-width: 640px; margin: 0 auto; padding: 32px 24px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.sl-account-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.sl-account-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 14px; }
.sl-account-rows { display: flex; flex-direction: column; gap: 10px; }
.sl-account-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.sl-account-label { color: var(--text-2); font-size: 14px; }
.sl-account-value { color: var(--text); font-size: 14px; font-weight: 600; text-align: right; word-break: break-word; }
.sl-account-note { margin-top: 14px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.sl-account-form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.sl-account-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sl-account-link { color: var(--primary); font-size: 14px; text-decoration: none; }
.sl-account-link:hover { color: var(--primary-hover); text-decoration: underline; }
.sl-account-signout { align-self: flex-start; }
.sl-account-footer { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 4px; }
.sl-account-diag-head { display: flex; align-items: center; justify-content: space-between; }
.sl-account .sl-mono { font-size: 12px; }

.sl-units-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.sl-units-opt {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.sl-units-opt:hover { color: var(--text); }
.sl-units-opt-active {
  background: var(--primary);
  color: #fff;
}
.sl-units-opt-active:hover { color: #fff; }
.sl-units-sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
}

.sl-loading { text-align: center; color: var(--text-2); padding: 60px 0; }
.sl-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-2);
}
.sl-empty-icon {
  font-size: 40px;
  margin-bottom: 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-dim);
  color: var(--green);
}

.sl-other-section { margin-top: 28px; }
.sl-other-summary {
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--font);
}
.sl-other-summary:hover { color: var(--text-2); }

/* Sections */
.sl-queue-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.sl-section { margin-bottom: 0; }
.sl-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sl-section-head h3 { font-size: 15px; font-weight: 700; }
.sl-section-reviewed { opacity: 0.7; }

/* ── Staleness (review backlog) ── */
/* Colored left-edge accent on rows/cards that have waited too long for review,
   plus an age pill (e.g. "13d waiting"). Row/card are position:relative. */
.sl-stale-warn::before, .sl-stale-over::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.sl-stale-warn::before { background: var(--amber); }
.sl-stale-over::before { background: var(--red); }
.sl-stale-over { border-color: var(--red); }
.sl-age {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; line-height: 1.5;
}
.sl-age-warn { background: var(--amber-dim); color: var(--amber); }
.sl-age-over { background: var(--red-dim); color: var(--red); }

/* ── Layout toggle (list ↔ grid) ── */
.sl-layout-toggle { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.sl-layout-toggle button {
  background: var(--surface); border: none; color: var(--text-2);
  padding: 7px 11px; cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; transition: all 0.15s; font-family: var(--font);
}
.sl-layout-toggle button + button { border-left: 1px solid var(--border-2); }
.sl-layout-toggle button:hover:not(.active) { background: var(--surface-hover); color: var(--text); }
.sl-layout-toggle button.active { background: var(--primary-dim); color: var(--primary); }

/* ── Grid layout ── */
.sl-queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sl-queue-grid .sl-queue-showmore { grid-column: 1 / -1; }
.sl-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: all 0.15s; padding: 0;
  text-align: left; font-family: var(--font); color: var(--text);
}
.sl-card:hover { background: var(--surface-hover); border-color: var(--border-2); }
.sl-card-thumb { width: 100%; aspect-ratio: 3 / 4; background: var(--surface-2); overflow: hidden; }
.sl-card-thumb .sl-queue-thumb { width: 100%; height: 100%; border-radius: 0; }
.sl-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sl-card-owner { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sl-card-date { font-size: 12px; color: var(--text-2); }
.sl-card-cta { margin-top: 8px; }
.sl-card-cta .sl-queue-cta { width: 100%; justify-content: center; }

/* ── Batch select mode ── */
.sl-no-select, .sl-no-select * { user-select: none; -webkit-user-select: none; }

/* Checkbox: inline (left of the thumb) in list, floated over the thumb in grid. */
.sl-check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  border: 2px solid var(--border-2); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1; transition: all 0.12s;
}
.sl-check.on { background: var(--primary); border-color: var(--primary); }
.sl-card .sl-check-wrap { position: absolute; top: 8px; left: 8px; z-index: 3; }
.sl-card .sl-check-wrap .sl-check { box-shadow: 0 1px 5px rgba(0,0,0,0.4); }

.sl-queue-row.selecting, .sl-card.selecting { cursor: pointer; }
.sl-queue-row.selected, .sl-card.selected { border-color: var(--primary); background: var(--primary-dim); }
.sl-queue-row.selected:hover, .sl-card.selected:hover { background: var(--primary-dim); }

/* Drag-to-select rubber-band. */
.sl-marquee {
  position: fixed; z-index: 500; pointer-events: none;
  border: 1px solid var(--primary); background: var(--primary-dim); border-radius: 2px;
}

/* Floating batch action bar. */
.sl-batchbar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 400; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 8px 14px; box-shadow: var(--shadow-popover);
}
.sl-batchbar-count { font-weight: 700; font-size: 13px; padding: 0 4px; white-space: nowrap; }
.sl-batchbar-sep { width: 1px; align-self: stretch; background: var(--border-2); margin: 2px; }

/* ━━ Review Panel ━━ */
.sl-review { display: flex; flex-direction: column; height: calc(100vh - 56px); overflow: hidden; }
.sl-review-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sl-review-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Quick Save flash — a transient confirmation banner that floats over the
   video pane when the Q shortcut fires. ~1.2s total: 120ms fade-in, hold,
   200ms fade-out (tail lines up with the React state clearing). Pointer-
   events disabled so it never blocks a click. */
@keyframes sl-quicksave-flash-anim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  82%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
.sl-quicksave-flash {
  position: absolute; top: 16px; left: 50%; z-index: 50;
  background: rgba(33, 150, 243, 0.92); color: #fff;
  border: 1px solid var(--primary);
  border-radius: 6px; padding: 6px 14px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  animation: sl-quicksave-flash-anim 1200ms ease both;
}

/* Gamer Mode active chip — sits between Back-to-Queue and the player name
   so the user always knows whether WASD keys are bound. Primary-blue to
   match other "mode is active" UI; the title attribute carries the keymap
   summary so a hover reminds without opening the help panel. */
.sl-gamer-chip {
  display: inline-flex; align-items: center;
  background: var(--primary-dim); color: var(--primary);
  border: 1px solid var(--primary); border-radius: 4px;
  padding: 2px 8px; font-family: var(--mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.5px; cursor: help;
  white-space: nowrap;
}
/* Header player name — double-click to inline-rename. The hover dotted
   underline + cursor:text are the discoverability cue (the dedicated
   Player-name input that used to live below the Send buttons is gone). */
.sl-review-player-name {
  font-weight: 700; font-size: 20px; line-height: 1.15;
  cursor: text;
  text-decoration: underline transparent dotted;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s;
  user-select: none;
}
.sl-review-player-name:hover { text-decoration-color: var(--text-3); }
/* Inline input that replaces the static name during editing. Matches the
   name's font/size so the header doesn't reflow when the swap happens. */
.sl-name-edit {
  font-family: var(--font);
  font-weight: 700; font-size: 20px; line-height: 1.15;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  min-width: 220px;
  outline: none;
}
.sl-review-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Video height: 80vh on tall screens, but flex down to fit the available
     space (minus header + body padding + transport chrome ≈ 200px) so the
     transport/scrubber never clip on short laptops. */
  --sl-video-h: min(80vh, calc(100vh - 200px));
}

/* Top area: video + stages side by side, transport below */
.sl-review-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  width: fit-content;
}
/* Transport is now inside video column, no grid-column span needed */

/* ── Video column ── */
.sl-video-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
}
.sl-video-wrap {
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sl-video-err {
  padding: 32px 24px;
  text-align: center;
  color: var(--red);
  font-size: 13px;
}
.sl-video-url {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  color: var(--text-3);
  word-break: break-all;
}

/* Transport */
.sl-transport {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 0;
  max-width: 100%;
}
.sl-transport-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.sl-tbtn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}
.sl-tbtn:hover { background: var(--surface-hover); }
.sl-tbtn-lg { width: 44px; height: 44px; font-size: 16px; }
.sl-tbtn-play { background: var(--primary); color: #fff; }
.sl-tbtn-play:hover { background: var(--primary-hover); }
.sl-frame-ct {
  margin-left: 12px;
  font-size: 15px;
  font-family: var(--mono);
  letter-spacing: -0.03em;
}
.sl-frame-total { color: var(--text-3); font-size: 13px; }

/* Scrubber */
.sl-scrubber-row { padding: 0 2px; }
.sl-scrubber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  outline: none;
  cursor: pointer;
}
.sl-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: grab;
  border: 2px solid var(--bg);
}
.sl-scrubber::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: grab;
  border: 2px solid var(--bg);
}

/* Scrubber with heatmap */
.sl-scrubber-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 0;
}
.sl-scrubber-heatmap {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
}
.sl-scrubber-wrap .sl-scrubber {
  position: relative;
  z-index: 1;
  width: 100%;
  background: transparent;
}

/* Speed buttons */
.sl-speeds { display: flex; gap: 4px; }
.sl-speed-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.12s;
}
.sl-speed-btn:hover { color: var(--text-2); }
.sl-speed-btn.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
.sl-time-display { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

/* Settings popover */

/* Annotation heatmap */
.sl-heatmap-bar {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  cursor: pointer;
}
.sl-heatmap-dot {
  position: absolute;
  top: 0;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  transform: translateX(-2px);
  cursor: pointer;
}
.sl-heatmap-correction { background: #00e5ff; }
.sl-heatmap-stage { background: var(--green); width: 6px; height: 12px; top: -2px; border-radius: 3px; transform: translateX(-3px); z-index: 1; }

/* Settings popover */
.sl-qr-done {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-dim);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.sl-analysis-complete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-dim);
}
.sl-analysis-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sl-speed-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}
.sl-settings-popover {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 260px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-popover);
}
.sl-settings-section { display: flex; flex-direction: column; gap: 8px; }
.sl-settings-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.sl-shortcuts-list { display: flex; flex-direction: column; gap: 6px; }
.sl-shortcut-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.sl-shortcut-item span { margin-left: auto; }
kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 5px;
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-radius: 3px;
  color: var(--kbd-text);
}

/* Video overlay buttons */
.sl-frame-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 25;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: monospace;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
}
.sl-zoom-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 25;
  background: rgba(0, 0, 0, 0.65);
  color: #00e5ff;
  font-family: monospace;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 6px;
  pointer-events: none;
}
.sl-video-overlay-btns {
  position: absolute;
  top: 56px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 25;
  pointer-events: none;
}
.sl-overlay-btn-wrap {
  position: relative;
  pointer-events: auto;
}
.sl-overlay-btn {
  font-family: var(--font);
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sl-overlay-btn:hover { background: rgba(0,0,0,0.8); }
.sl-overlay-btn.active { background: var(--primary); }
.sl-overlay-btn.needs-attention {
  background: rgba(255,183,77,0.35);
  box-shadow: inset 0 0 0 1.5px rgba(255,183,77,0.5);
}
.sl-overlay-btn.needs-attention:hover { background: rgba(255,183,77,0.55); }
.sl-overlay-btn.editing {
  background: rgba(0,229,255,0.5);
  box-shadow: inset 0 0 0 1.5px rgba(0,229,255,0.7);
}
.sl-overlay-btn.editing:hover { background: rgba(0,229,255,0.65); }
.sl-overlay-btn.placing {
  background: rgba(0,229,255,0.5);
  box-shadow: inset 0 0 0 1.5px rgba(0,229,255,0.7);
  animation: sl-pulse-placing 1s ease-in-out infinite;
}
@keyframes sl-pulse-placing {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(0,229,255,0.7), 0 0 0 0 rgba(0,229,255,0.3); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(0,229,255,0.7), 0 0 8px 3px rgba(0,229,255,0.4); }
}
.sl-overlay-btn.off { opacity: 0.45; }
.sl-overlay-btn.off:hover { opacity: 0.8; }
.sl-overlay-btn-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: 2px solid rgba(0,0,0,0.5);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 2;
  padding: 0;
  line-height: 1;
  font-family: var(--font);
}
.sl-overlay-btn-wrap:hover .sl-overlay-btn-delete { opacity: 1; }
.sl-overlay-btn-delete:hover { background: #f44336; transform: scale(1.15); }
.sl-overlay-btn-sep {
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  /* No vertical margin — let the parent's flex gap (4px) govern spacing so the
     separator doesn't add extra space and break the button rhythm. Keep the
     horizontal margin to center the 20px line under the 36px buttons. */
  margin: 0 8px;
  pointer-events: none;
}
.sl-settings-overlay {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  bottom: auto;
  right: auto;
  margin-bottom: 0;
}

/* ── Compare column ── */
.sl-compare-col {
  max-width: none;
}

/* ── Video column header ── */
.sl-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* ── Actions column ── */
.sl-actions-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  align-self: flex-end;
}

/* ── Stages column ── */
.sl-stages-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 420px;
  max-width: 700px;
}
.sl-stages-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sl-stages-head h3 { font-size: 14px; font-weight: 700; }
.sl-stages-ct { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sl-stages-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* During Quick Review, dim every stage except the one being reviewed so it's
   obvious where the reviewer is. Hovering a dimmed card brings it back in case
   they want to jump out of order. */
.sl-stages-list.quick-reviewing .sl-stage-card:not(.reviewing) {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.sl-stages-list.quick-reviewing .sl-stage-card:not(.reviewing):hover {
  opacity: 0.85;
}

/* Stage card */
.sl-stage-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all 0.3s ease, transform 0.3s ease;
}
.sl-stage-card:hover { background: var(--surface-hover); }
.sl-stage-card.set { background: var(--primary-dim); }
.sl-stage-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border-2);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-2);
}
.sl-stage-card.set .sl-stage-num { background: var(--primary); color: #fff; border-color: var(--primary); }
.sl-stage-info { flex: 1; min-width: 0; }
.sl-stage-name { font-weight: 600; font-size: 16px; }
.sl-stage-desc { font-size: 11px; color: var(--text); line-height: 1.45; opacity: 0.75; }
.sl-stage-thumb {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.85;
  flex-shrink: 0;
}
.sl-stage-thumb:hover { opacity: 1; }
.sl-stage-frame {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  color: var(--text-2);
  flex-shrink: 0;
}
.sl-stage-card.set .sl-stage-frame { color: var(--primary); font-size: 17px; }
/* Clickable frame number — jumps to the chosen frame so the reviewer can verify
   each stage after annotating. Inherits the number's font/color so it reads as
   plain text until hovered. */
.sl-stage-frame-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.sl-stage-frame-btn:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.sl-stage-card.corrected { background: rgba(67,160,71,0.10); }
.sl-stage-card.corrected .sl-stage-num { background: var(--green); color: #fff; border-color: var(--green); }
.sl-stage-card.reviewing {
  background: rgba(69,168,200,0.15);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  animation: sl-pulse-review 2s ease-in-out infinite;
  transform: scale(1.02);
  transition: all 0.3s ease;
}
.sl-stage-card.reviewing .sl-stage-num { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Confirmed state */
.sl-stage-card.confirmed {
  transition: all 0.4s ease;
}
.sl-stage-card.confirmed .sl-stage-num {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transition: all 0.3s ease;
}

/* All-complete flash */
.sl-stage-card.celebrate {
  animation: sl-flash-green 0.8s ease;
}

/* Racket-scale card — a required step that ISN'T a serve stage. Give the icon a
   distinct (amber) accent while unconfirmed so it reads as a different kind of
   step; once confirmed it inherits the shared green .confirmed treatment. */
.sl-scale-card .sl-stage-num { font-size: 20px; }
.sl-scale-card:not(.confirmed) .sl-stage-num { border-color: var(--amber); color: var(--amber); }

/* Stage card transitions */
.sl-stage-card {
  transition: all 0.3s ease, transform 0.3s ease;
}

@keyframes sl-pulse-review {
  0%, 100% { box-shadow: 0 0 0 0 rgba(69,168,200,0.3); }
  50% { box-shadow: 0 0 12px 4px rgba(69,168,200,0.25); }
}
@keyframes sl-pulse-qr {
  0%, 100% { box-shadow: 0 0 0 0 rgba(69,168,200,0.4); }
  50% { box-shadow: 0 0 10px 3px rgba(69,168,200,0.5); }
}

@keyframes sl-flash-green {
  0% { background: transparent; }
  30% { background: rgba(67,160,71,0.3); }
  100% { background: transparent; }
}

/* Progress dots */
.sl-progress-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}
.sl-progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.sl-progress-dot.pending {
  background: var(--surface-2);
  color: var(--text-3);
}
.sl-progress-dot.active {
  background: var(--primary);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(69,168,200,0.4);
}
.sl-progress-dot.done {
  background: var(--green);
  color: #fff;
}
.sl-progress-connector {
  flex: 1;
  height: 2px;
  background: var(--surface-2);
  transition: background 0.3s ease;
}
.sl-progress-connector.done {
  background: var(--green);
}

/* Analysis complete animation */
.sl-analysis-complete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-dim);
  animation: sl-complete-slide 0.5s ease;
}
@keyframes sl-complete-slide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-stage-pred { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.sl-pred-strike { text-decoration: line-through; opacity: 0.7; }
.sl-pred-unverified { color: var(--amber); }
/* The corrected stage's CHOSEN frame number (e.g. the "86" in "pred 85 → 86").
   Primary blue so it reads as the live target — the dotted underline from
   .sl-pred-clickable then makes the click affordance unambiguous without
   relying on hover, since the underline alone on bold dark text is too
   subtle to notice. Matches the big .set frame number's color so the eye
   connects them as two ways into the same thing. */
.sl-pred-chosen { color: var(--primary); }
.sl-pred-chosen:hover { color: var(--primary); opacity: 0.8; }
.sl-pred-clickable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.sl-pred-clickable:hover { color: var(--amber); opacity: 0.8; }
/* A struck (replaced) prediction that's also clickable keeps its line-through
   rather than switching to the dotted underline. */
.sl-pred-strike.sl-pred-clickable { text-decoration: line-through; }
.sl-pred-strike.sl-pred-clickable:hover { color: var(--amber); opacity: 1; }
.sl-stage-actions { display: flex; gap: 4px; flex-shrink: 0; position: relative; }
.sl-stage-warning {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--red);
  background: var(--surface);
  border: 1px solid var(--red);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: max-content;
  max-width: 380px;
  white-space: normal;
  z-index: 10;
  box-shadow: var(--shadow-warning);
}
.sl-warning-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.sl-warning-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.4;
}
/* Soft (informational) variant of .sl-stage-warning — amber instead of red,
   used for non-blocking real-time hints on the active Quick Review card
   (e.g., "Low-confidence pose at this frame: Left Wrist, …"). */
.sl-stage-warning-soft {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: none;
}

/* Inline eyeball+stage chip used in the Review Summary safety warnings.
   Replaces the plain "S5, S7" text — clicking closes the modal and seeks
   to that stage's frame, so the reviewer doesn't have to ✕ out and hunt
   for the card. The eye SVG ships as a black-fill icon; the amber filter
   recolors it to match the warning text without needing a per-theme asset. */
.sl-summary-jump {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--amber); color: var(--amber);
  padding: 1px 6px; border-radius: 3px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  line-height: 1.4; vertical-align: baseline;
  transition: background 0.15s;
}
.sl-summary-jump:hover { background: var(--amber-dim); }
.sl-summary-jump img {
  display: block;
  /* Recolor the black-fill SVG to amber. Targets #FFB74D (light theme).
     Approximation works in both themes since amber is similar enough. */
  filter: invert(78%) sepia(45%) saturate(685%) hue-rotate(335deg) brightness(102%) contrast(101%);
}
/* When inside the red blocking alert, recolor to red instead. */
.sl-alert-err .sl-summary-jump {
  border-color: var(--red); color: var(--red);
}
.sl-alert-err .sl-summary-jump:hover { background: var(--red-dim); }
.sl-alert-err .sl-summary-jump img {
  filter: invert(36%) sepia(99%) saturate(7474%) hue-rotate(354deg) brightness(94%) contrast(116%);
}

/* Send section */
.sl-send-section {
  padding: 14px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.sl-confirm-row { display: flex; gap: 8px; }
.sl-confirm-row .sl-btn { flex: 1; justify-content: center; }

/* Reject section */
.sl-reject-section { margin-top: 4px; }
.sl-reject-panel {
  background: var(--surface);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sl-reject-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sl-reject-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-reject-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.sl-reject-option:hover { background: var(--reject-hover); }
.sl-reject-option.selected { background: var(--red-dim); border-color: var(--red); }
.sl-reject-radio, .sl-reject-check { color: var(--red); font-size: 20px; line-height: 1; flex-shrink: 0; }
.sl-reject-label { line-height: 1.3; font-weight: 500; }
.sl-reject-preview {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--reject-preview-bg);
  line-height: 1.5;
}
/* The two "Reject / Delete" path choices in step 1 of the modal. */
.sl-reject-path {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.sl-reject-path:hover { border-color: var(--red); background: var(--red-dim); }
.sl-reject-path-title { font-size: 14px; font-weight: 600; color: var(--text); }
.sl-reject-path-sub { font-size: 12px; color: var(--text-2); line-height: 1.3; }

/* In-flow quick-review prompt: place a racket on a crucial stage that has none.
   Floats over the top of the video (absolute) so it never reflows the layout. */
.sl-racket-prompt {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 94%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 18, 24, 0.92);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.sl-racket-prompt-skip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--text-3);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
}
.sl-racket-prompt-skip:hover { color: var(--text); border-color: var(--text-2); }
.sl-btn-red { background: var(--red); color: #fff; }
.sl-btn-red:hover:not(:disabled) { background: #f44336; }
/* Carry-forward racket interpolation offer — in-flow banner above the transport. */
.sl-interp-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-dim);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.sl-interp-banner span { flex: 1; min-width: 0; }

/* Modal */
.sl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.sl-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 85vh;
  overflow-y: auto;
}
.sl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ━━ /orgs polish ━━
   Search + "+" button header, taller logo-bearing cards, and the
   logo-picker tile inside the create-org modal. */

.sl-orgs-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sl-orgs-list-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-org-search {
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 200px;
  max-width: 40vw;
}
.sl-org-search:focus {
  outline: none;
  border-color: var(--primary);
}
.sl-org-new-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

/* Org card — overrides .sl-queue-row defaults to keep the list visually
   distinct from the serves queue (taller, gap for the logo, no
   between-line text-align jitter). */
.sl-org-card {
  padding: 14px 16px;
  gap: 14px;
  align-items: center;
}
.sl-org-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sl-org-card-title {
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.sl-org-card-role { font-size: 12px; }
.sl-org-card-desc {
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sl-org-card-meta { font-size: 12px; }
.sl-org-card-cta { font-size: 16px; flex-shrink: 0; }

/* Modal logo picker — clickable tile with a dashed circle preview and a
   short helper line. Reuses the modal's surface/border vars so it sits
   naturally inside .sl-modal-card. */
.sl-org-logo-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sl-org-logo-picker:hover { border-color: var(--text-3); background: var(--surface); }
.sl-org-logo-picker-preview {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-3);
  overflow: hidden;
}
.sl-org-logo-picker-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.sl-org-logo-picker-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sl-org-logo-picker-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sl-org-desc-input {
  font-family: var(--font);
  resize: vertical;
  min-height: 60px;
}

/* ━━ Annotation Overlay ━━ */

/* Corrections Inspector */
.sl-inspector-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
}
.sl-inspector {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sl-inspector-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.sl-inspector-section { display: flex; flex-direction: column; gap: 4px; }
.sl-inspector-label { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.sl-inspector-json {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.sl-video-wrap { position: relative; }
.sl-annot-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: auto;
  z-index: 2;
}
.sl-annot-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.sl-annot-commit-overlay {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: var(--radius);
  z-index: 30;
  white-space: nowrap;
  pointer-events: auto;
}
.sl-problem-flash {
  position: absolute;
  top: 56px;
  right: 8px;
  background: rgba(255,183,77,0.9);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius);
  z-index: 30;
  pointer-events: none;
  animation: sl-flash-in 0.3s ease;
}
@keyframes sl-flash-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-annot-hint {
  font-size: 11px;
  color: var(--amber);
  font-weight: 500;
}
.sl-annot-joint-select {
  font-family: var(--font);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 4px 8px;
  cursor: pointer;
}

/* ━━ Queue Tabs ━━ */
.sl-queue-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sl-queue-tab {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
}
.sl-queue-tab:hover { color: var(--text-2); }
.sl-queue-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ━━ Feedback Review ━━ */
.sl-fb-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(400px, 1.4fr);
  gap: 20px;
  flex: 1;
  min-height: 0;
}
.sl-fb-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}
.sl-fb-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

/* Videos side-by-side */
.sl-fb-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sl-fb-video-pane { position: relative; }
.sl-fb-video-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Stage strip (feedback review) */
.sl-fb-stage-strip {
  display: flex;
  gap: 4px;
}
.sl-fb-stage-btn {
  flex: 1;
  padding: 8px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.sl-fb-stage-btn:hover { background: var(--surface-hover); }
.sl-fb-stage-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Pulse highlight for cross-referencing stage → mistake */
@keyframes sl-highlight-finding {
  0% { background: var(--primary-dim); border-color: var(--primary); }
  100% { background: var(--surface); border-color: var(--border); }
}
.sl-finding-pulse {
  animation: sl-highlight-finding 1.8s ease-out;
}
.sl-fb-stage-btn-num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  opacity: 0.85;
  line-height: 1.1;
}

/* Metrics grid */
.sl-fb-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
}
.sl-fb-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.sl-fb-metric.warn { border-color: var(--amber); background: var(--amber-dim); }
.sl-fb-metric-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.sl-fb-metric-value { font-size: 18px; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
.sl-fb-metric.warn .sl-fb-metric-value { color: var(--amber); }

/* CV Summary */
.sl-fb-cv-summary {
  background: var(--amber-dim);
  border: 1px solid rgba(255,183,77,0.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--amber);
  line-height: 1.5;
}

/* Progress bar */
.sl-fb-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.sl-fb-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.sl-fb-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s;
}

/* Tabs */
.sl-fb-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.sl-fb-tabs button {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.12s;
}
.sl-fb-tabs button:hover { color: var(--text); }
.sl-fb-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-dim); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* Tab content */
.sl-fb-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.sl-fb-cues-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sl-fb-stage-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-fb-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

/* Mistake card */
.sl-fb-mistake {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-fb-mistake.flagged { border-left: 3px solid var(--amber); }
.sl-fb-mistake-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-fb-mistake-id { font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 700; }
.sl-fb-mistake-name { font-weight: 700; font-size: 13px; flex: 1; }
.sl-fb-mistake-stages { display: flex; gap: 3px; }
.sl-fb-stage-chip {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface-2); color: var(--text-3);
}
.sl-fb-mistake-desc { font-size: 12px; color: var(--text-2); line-height: 1.4; }

/* Verdict row */
.sl-fb-verdict-row { display: flex; gap: 4px; }
.sl-fb-verdict-row button {
  flex: 1;
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sl-fb-verdict-row button:hover { background: var(--surface-hover); }
.sl-fb-verdict-row button.sel-agree { background: var(--green); color: #fff; border-color: var(--green); }
.sl-fb-verdict-row button.sel-partial { background: var(--amber); color: #fff; border-color: var(--amber); }
.sl-fb-verdict-row button.sel-disagree { background: var(--red); color: #fff; border-color: var(--red); }

/* Note textarea */
.sl-fb-note {
  width: 100%;
  resize: vertical;
  min-height: 54px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
}
.sl-fb-note:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-dim); }

/* Stars */
.sl-fb-stars { display: inline-flex; gap: 4px; }
.sl-fb-stars button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
}
.sl-fb-stars button.on { color: var(--amber); }

/* Overall feedback */
.sl-fb-overall {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}
.sl-fb-section h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sl-fb-ratings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sl-fb-rating-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sl-fb-rating-label { width: 140px; }

/* Voice note */
.sl-fb-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
}
.sl-fb-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  animation: sl-pulse-rec 1s infinite;
}
@keyframes sl-pulse-rec { 50% { opacity: 0.3; } }

/* ── Comparison Metrics ── */
.sl-cmp-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-cmp-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.sl-cmp-metric-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sl-cmp-metric-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sl-cmp-bar-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.sl-cmp-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.sl-cmp-metric-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 12px;
}
.sl-cmp-val-you { color: var(--text); font-weight: 600; }
.sl-cmp-val-pro { color: var(--text-3); }

/* ── Finding Cards (Mistakes + Strengths) ── */
.sl-finding {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
}
.sl-finding:hover { border-color: var(--border-2); }
.sl-finding-severity-strip { height: 3px; }
.sl-finding-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-finding-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sl-finding-name { font-weight: 700; font-size: 16px; }
.sl-finding-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.sl-finding-metric-detail {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
  white-space: pre-line;
}
/* Collapsed disclosure for the raw detection numbers (debug-ish, not for
   laypeople) — keeps the card compact; click to expand. */
.sl-finding-tech {
  font-size: 11px;
}
.sl-finding-tech-summary {
  cursor: pointer;
  color: var(--text-3);
  font-size: 11px;
  font-family: var(--font);
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}
.sl-finding-tech-summary:hover {
  color: var(--text-2);
}
.sl-finding-tech-summary::-webkit-details-marker {
  display: none;
}
.sl-finding-tech-summary::before {
  content: '\25B8'; /* triangle */
  display: inline-block;
  font-size: 9px;
  transition: transform 0.15s ease;
}
.sl-finding-tech[open] .sl-finding-tech-summary::before {
  transform: rotate(90deg);
}
.sl-finding-tech[open] .sl-finding-metric-detail {
  margin-top: 6px;
}
/* Dev-authored advisory note on a mistake card (e.g. a known false-positive
   detector). Data-driven: shows when the mistake's catalog entry carries a
   `devNote`. Click the banner to reveal the message. */
.sl-finding-devnote {
  border: 1px solid var(--primary);
  background: var(--primary-dim);
  border-radius: var(--radius-sm);
}
.sl-finding-devnote-summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  font-size: 11.5px;
  font-family: var(--font);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
}
.sl-finding-devnote-summary::-webkit-details-marker {
  display: none;
}
.sl-finding-devnote-summary::after {
  content: '\25B8'; /* triangle */
  margin-left: auto;
  font-size: 9px;
  transition: transform 0.15s ease;
}
.sl-finding-devnote[open] .sl-finding-devnote-summary::after {
  transform: rotate(90deg);
}
.sl-finding-devnote-body {
  padding: 0 10px 9px 30px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.sl-finding-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ━━ Visualization Theater Mode ━━ */
.sl-theater-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 900;
  animation: sl-theater-fade-in 0.3s ease both;
}
@keyframes sl-theater-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sl-theater-stats-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-theater-active .sl-fb-left {
  position: fixed;
  inset: 0;
  z-index: 901;
  padding: 2vh 4vw 2vh;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: transparent;
}
.sl-theater-active .sl-review-head {
  visibility: hidden;
  pointer-events: none;
}
.sl-theater-active .sl-fb-right {
  visibility: hidden;
  pointer-events: none;
}
/* Stage-angle navigator inside the theater: the column is centered, so the
   strip/row shrink to content (jammed). Give them a width spanning the two
   video panes (~62vh-tall 9/16 portraits) and enlarge the buttons to use it. */
.sl-theater-active .sl-fb-stage-strip,
.sl-theater-active .sl-fb-angle-row {
  width: min(760px, 88vw);
}
.sl-theater-active .sl-fb-stage-strip { gap: 8px; }
.sl-theater-active .sl-fb-angle-row { justify-content: center; }
.sl-theater-active .sl-fb-stage-btn { padding: 11px 8px; font-size: 12px; }
.sl-theater-active .sl-fb-stage-btn-num { font-size: 19px; }
.sl-theater-close {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 902;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sl-theater-close:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.sl-theater-esc-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 902;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  background: rgba(0,0,0,0.6);
  padding: 4px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  animation: sl-theater-hint-fade 4s ease forwards;
}
@keyframes sl-theater-hint-fade {
  0%, 50% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ━━ Upload screen ━━ */
.sl-upload { max-width: 760px; margin: 0 auto; padding: 32px 24px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.sl-upload-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* When a row's trim panel is open, widen the page and split into two columns:
   the list on the left, the trim UI on the right. The right column is sticky
   so it stays visible while scrolling a long batch. */
.sl-upload.trimming {
  max-width: 1280px;
  flex-direction: row;
  align-items: flex-start;
  gap: 28px;
}
.sl-upload.trimming .sl-upload-main { flex: 1 1 0; }
.sl-trim-col {
  flex: 0 0 440px;
  position: sticky; top: 24px;
  display: block;
}
@media (max-width: 960px) {
  .sl-upload.trimming { flex-direction: column; max-width: 760px; }
  .sl-trim-col { position: static; flex: 1 1 auto; width: 100%; }
}
.sl-upload-intro h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }

/* Drag-and-drop dropzone (click anywhere to pick, or drop files in). */
/* Comparison preferences (gender / handedness / stance). Sits between the
   intro and the dropzone. Open: 3-up grid of dropdowns. Closed: one-line
   summary + Edit link. Saved to localStorage as sl_compare_prefs and
   forwarded to the upload-url Lambda on every upload. */
.sl-up-prefs { margin-bottom: 16px; }
.sl-up-prefs-open {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.sl-up-prefs-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.sl-up-prefs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.sl-up-prefs-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-2); font-weight: 600;
}
.sl-up-prefs-field select {
  padding: 7px 10px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 500;
}
.sl-up-prefs-field select:focus { outline: none; border-color: var(--primary); }
.sl-up-prefs-closed {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.sl-up-prefs-closed > span { flex: 1; }

.sl-up-dropzone {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; cursor: pointer;
  transition: all 0.15s;
}
.sl-up-dropzone:hover { border-color: var(--text-3); background: var(--surface-hover); }
.sl-up-dropzone:focus-visible { outline: none; border-color: var(--primary); }
.sl-up-dropzone.dragover { border-color: var(--primary); background: var(--primary-dim); }
.sl-up-dropzone-icon {
  width: 38px; height: 38px; background-color: var(--text-3); transition: background-color 0.15s;
  -webkit-mask: url("assets/plus-circle.svg") no-repeat center / contain;
  mask: url("assets/plus-circle.svg") no-repeat center / contain;
}
.sl-up-dropzone:hover .sl-up-dropzone-icon { background-color: var(--text-2); }
.sl-up-dropzone.dragover .sl-up-dropzone-icon { background-color: var(--primary); }
.sl-up-dropzone-title { font-size: 15px; font-weight: 600; color: var(--text); }
.sl-up-dropzone-sub { font-size: 13px; color: var(--text-2); }
.sl-up-dropzone-hint { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Overall batch progress + summary. */
.sl-up-overall {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.sl-up-overall-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.sl-up-overall-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.sl-up-overall-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.2s; }

/* Per-file rows. */
.sl-up-list { display: flex; flex-direction: column; gap: 8px; }
.sl-up-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color 0.15s;
}
/* Already-uploaded rows recede visually so the "to-upload" rows clearly own
   the foreground. Opacity dim + a green background wash make the state
   unambiguous; the existing green border stays. Hover restores full
   opacity so the user can still read the filename / Trimmed badge / etc. */
.sl-up-item.done {
  border-color: var(--green-dim);
  background: rgba(67,160,71,0.05);
  opacity: 0.55;
  transition: border-color 0.15s, opacity 0.15s;
}
.sl-up-item.done:hover { opacity: 1; }
.sl-up-item.failed { border-color: var(--red-dim); }
.sl-up-item.blocked { border-color: var(--red); background: var(--red-dim); }
.sl-up-item.active { border-color: #ffcc00; box-shadow: 0 0 0 1px #ffcc00 inset; }
.sl-up-thumb {
  width: 92px; height: 56px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.sl-up-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sl-up-thumb-ph { font-size: 22px; opacity: 0.35; }
.sl-up-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sl-up-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-up-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
/* Keep each metadata token intact (don't break "10 MB" → "10" / "MB"); the row
   wraps BETWEEN tokens instead, so it never overlaps the warning lines below. */
.sl-up-meta > * { white-space: nowrap; }
.sl-up-meta .sl-up-dot { color: var(--text-3); }
/* "Trimmed ✓" badge — visual confirmation that the in-browser cut applied.
   Sits inline at the end of the meta row, green chip with the scissors and
   a trailing check SVG so it reads unambiguously as a success ack and as
   a hint that this row is the post-trim version. Hover shows the original
   duration. The check SVG uses currentColor so it inherits the green text
   color (no per-theme asset needed). */
.sl-up-trimmed-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(67,160,71,0.12); color: var(--green);
  border: 1px solid var(--green); border-radius: 4px;
  padding: 1px 7px; font-size: 11px; font-weight: 700; line-height: 1.4;
  font-family: var(--mono); white-space: nowrap;
}
/* Mask-based icon so the check picks up the badge's green from
   currentColor (matches the .sl-btn-icon pattern used elsewhere — an
   <img> wouldn't inherit the parent's text color). */
.sl-up-trimmed-check {
  display: inline-block; width: 11px; height: 11px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("assets/icon-check.svg") no-repeat center / contain;
  mask: url("assets/icon-check.svg") no-repeat center / contain;
}
.sl-up-status-queued { color: var(--text-3); }
.sl-up-status-uploading { color: var(--primary); font-weight: 600; }
.sl-up-status-done { color: var(--green); font-weight: 600; }
.sl-up-status-failed { color: var(--red); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Per-file validation messages (hard errors red, soft warnings amber). */
.sl-up-msg { font-size: 12px; line-height: 1.4; display: flex; align-items: baseline; gap: 5px; }
.sl-up-msg-err { color: var(--red); font-weight: 600; }
.sl-up-msg-warn { color: var(--amber); }
.sl-up-msg-active { color: #ffcc00; font-weight: 600; }
.sl-up-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.sl-up-bar-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.15s; }
.sl-up-remove {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: transparent; border: 1px solid var(--border-2);
  color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.sl-up-remove:hover:not(:disabled) { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.sl-up-remove:disabled { opacity: 0.3; cursor: default; }

/* Action bar. */
.sl-up-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-up-spacer { flex: 1; }
.sl-btn-lg { font-size: 14px; padding: 11px 20px; }

/* In-browser trim — inline pill button inside the row, plus the iOS-Photos-
   style panel (video preview + filmstrip track with a fixed-width yellow
   selection window that drags left/right). On wide viewports the panel
   docks to the right column of .sl-upload.trimming; on narrow viewports it
   stacks below the list (handled by the .sl-upload.trimming media query). */
.sl-up-trim-btn {
  align-self: flex-start; margin-top: 2px;
  background: transparent; border: 1px solid var(--primary);
  color: var(--primary); font-weight: 600; font-size: 12px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sl-up-trim-btn:hover { background: var(--primary); color: var(--surface); }
.sl-up-trim {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
/* The preview element is sized by its intrinsic aspect (set inline from the
   loaded metadata) so the box matches the content — no letterbox bars in
   either orientation. The column width caps landscape clips; max-height caps
   tall portrait clips so the trim track + buttons stay in the viewport. */
.sl-up-trim-video {
  display: block; margin: 0 auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 60vh;
  background: #000; border-radius: 6px;
  aspect-ratio: 16 / 9;
}
/* Filmstrip track + yellow draggable window. The track has horizontal margin
   so the side handles (which overhang the window's left/right edges) have
   room to render without being clipped. */
.sl-up-trim-track {
  position: relative; height: 56px;
  margin: 0 14px;
  background: var(--surface-2);
  border-radius: 6px;
  user-select: none;
  touch-action: none;
}
.sl-up-trim-strip {
  display: flex; height: 100%;
  border-radius: 6px; overflow: hidden;
  background: #1a1a1a;
}
.sl-up-trim-strip img {
  display: block; height: 100%;
  flex: 1 1 0; width: 0;
  object-fit: cover; pointer-events: none;
}
.sl-up-trim-strip-ph {
  width: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 12px;
}
.sl-up-trim-dim {
  position: absolute; top: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  border-radius: 6px;
}
.sl-up-trim-window {
  position: absolute; top: 0; bottom: 0;
  border-top: 3px solid #ffcc00;
  border-bottom: 3px solid #ffcc00;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}
.sl-up-trim-window:active { cursor: grabbing; }
.sl-up-trim-handle {
  position: absolute; top: -3px; bottom: -3px;
  width: 14px; background: #ffcc00;
  display: flex; align-items: center; justify-content: center;
}
.sl-up-trim-handle-l { left: -14px; border-radius: 4px 0 0 4px; }
.sl-up-trim-handle-r { right: -14px; border-radius: 0 4px 4px 0; }
.sl-up-trim-grip {
  width: 3px; height: 22px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1.5px;
}
.sl-up-trim-readout {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-2);
}
.sl-up-trim-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ━━ Responsive ━━ */
@media (max-width: 840px) {
  .sl-review-top { flex-direction: column; }
  .sl-stages-col { max-width: 100%; min-width: 0; }
  .sl-header { padding: 0 16px; }
  .sl-header-user { display: none; }
  .sl-queue-columns { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .sl-queue { padding: 20px 16px; }
  .sl-queue-row { padding: 12px 14px; }
  .sl-review-head { padding: 10px 16px; flex-wrap: wrap; }
}

/* ━━ Analytics dashboard (DRAFT / MOCKUP) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   docs/servelab-analytics-dashboard-design.md */
.sl-analytics-notice {
  margin: 24px; padding: 16px 18px;
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-2); line-height: 1.5; max-width: 640px;
}
.sl-analytics-notice code { font-family: var(--mono); color: var(--text); }
.sl-analytics-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; padding: 20px 24px; align-items: start;
}
.sl-analytics-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.sl-analytics-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.sl-analytics-card-head h3 { margin: 0; font-size: 15px; }
.sl-analytics-card-head .sl-muted { font-size: 12px; }
.sl-analytics-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-analytics-table th {
  text-align: left; font-weight: 600; color: var(--text-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.sl-analytics-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.sl-analytics-table tr:last-child td { border-bottom: none; }
.sl-analytics-table td:not(:first-child), .sl-analytics-table th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
/* per-day sparkline */
.sl-analytics-spark {
  display: flex; align-items: flex-end; gap: 2px; height: 44px; margin-top: 12px;
  padding-top: 4px; border-top: 1px solid var(--border);
}
.sl-analytics-spark-bar { flex: 1; min-width: 2px; background: var(--primary); opacity: 0.65; border-radius: 1px; }
/* stat tiles */
.sl-analytics-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sl-analytics-tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; text-align: center;
}
.sl-analytics-tile-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-analytics-tile-label { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.sl-analytics-tile-warn { border-color: var(--amber); }
.sl-analytics-tile-warn .sl-analytics-tile-value { color: var(--amber); }
.sl-analytics-tile-bad { border-color: var(--red); }
.sl-analytics-tile-bad .sl-analytics-tile-value { color: var(--red); }
@media (max-width: 840px) {
  .sl-analytics-grid { grid-template-columns: 1fr; }
}

/* ━━ Fit-down: feedback-review fluidity (1920×1080 ↓ to tablet) ━━━━━━━━━━━━━
   The feedback/comparison view was authored against ~2560×1140 where the video
   column had room to spare. Below that it produced INTERNAL scrollbars (the page
   itself is height-locked + overflow:hidden) because two parts had fixed
   intrinsic widths that never shrank:
     1. the side-by-side videos were sized purely by height (9/16 × 52vh) with
        flex:0 0 auto and no width cap, so two panes overflowed a narrow column;
     2. the stage strip's 7 buttons were flex:1 with the default min-width:auto
        and flex-wrap:nowrap, so they could not shrink below ~803px of content.
   These rules make both genuinely fluid, then a breakpoint stacks the whole
   layout for tablet. Nothing here changes the ≥2560 look beyond a slightly
   smaller default video height (48vh vs 52vh) for vertical breathing room. */

/* (1) Videos: each pane shares the column width equally (flex:1 1 0) but is
   capped so its height never exceeds the budget (--fb-vh, set per-mode in JSX);
   the wrap fills the pane width and derives height from the 9/16 aspect. Result:
   pane width = min(equal column share, --fb-vh × 9/16) → two (or four) panes
   ALWAYS fit the column width AND the height budget, at any viewport. */
.sl-fb-videos { --fb-vh: 48vh; }
.sl-fb-videos .sl-fb-video-pane {
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: calc(var(--fb-vh) * 9 / 16);
}
.sl-fb-videos .sl-video-wrap {
  width: 100% !important;
  max-height: var(--fb-vh) !important;
  height: auto !important;     /* width + aspect-ratio drive the height */
}

/* (2) Stage strip: let the buttons shrink below their content width (single row
   stays intact down to tablet); clip rather than force a horizontal scrollbar. */
.sl-fb-stage-strip { min-width: 0; }
.sl-fb-stage-btn { min-width: 0; overflow: hidden; }
.sl-fb-stage-btn-num, .sl-fb-stage-btn > * { max-width: 100%; }

/* (3) Tablet/short & below: the two-column grid can't hold two video panes + a
   dense findings panel side by side, so stack them and let the PAGE scroll (the
   height lock is desktop-only). Triggers when too NARROW (tablet) OR too SHORT
   (a wide but short window can't fit the stacked left column either).
   2026-06: bumped from 1100×760 → 1400×900 because the comparison viewer
   genuinely struggles below full-HD desktops (the jumpstart's "breaks below
   1920×1080" complaint). Above 1400×900 stays two-column; below either,
   stack and let the page scroll. */
@media (max-width: 1400px), (max-height: 900px) {
  .sl-review { height: auto; min-height: calc(100vh - 56px); overflow: visible; }
  .sl-review-body { overflow: visible; }
  .sl-fb-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .sl-fb-left, .sl-fb-right { overflow: visible; min-height: 0; }
  .sl-fb-tab-content { overflow: visible; }
  /* On a single column the videos have the full width, so give them more height.
     !important because JSX sets --fb-vh inline (inline beats a normal rule). */
  .sl-fb-videos { --fb-vh: min(56vh, calc(100vw * 0.62)) !important; }
}

/* ━━ Fit-down: admin annotation panel (review-panel.jsx) ━━━━━━━━━━━━━━━━━━━
   Two height bugs surfaced below 2560×1140:
     1. .sl-review-top had no min-height:0, so the two columns grew to their
        natural content height and pushed the row taller than the (overflow:
        hidden) body — clipping the Send section and lower stage cards instead
        of letting .sl-stages-list scroll internally;
     2. --sl-video-h (min(80vh, 100vh-200px)) under-subtracted the header +
        column-header + transport chrome (~340px), so the video column alone
        was ~1107px at 1080p and couldn't fit.
   Also: the old responsive rule set flex-direction on .sl-review-top, which is
   display:grid — inert. */

/* (1) Bound the row to the body so the stages list scrolls instead of clipping. */
.sl-review-top { min-height: 0; }
.sl-video-col, .sl-stages-col, .sl-stages-list { min-height: 0; }

/* (2) Honest video-height budget: leave room for the head + transport chrome.
   Sized so the video is a comfortable portrait (not floor-to-ceiling); the
   transport derives its width from the SAME value, so the two always match. */
.sl-review-body { --sl-video-h: min(66vh, calc(100vh - 410px)); }

/* (2b) Three-column admin layout: video (+inspector) | stages | actions. The
   send / reject / save buttons + player name move OUT of the (scrolling) stages
   column into their own always-visible narrow column, so they're never buried
   by the stage-card scroll at 1920×1080 / 1440×900. The group is centered. */
.sl-review-top { grid-template-columns: auto auto auto; margin: 0 auto; flex: 1 1 auto; }
.sl-actions-col { align-self: start; min-width: 210px; max-width: 248px; }
.sl-actions-col .sl-send-section { border-top: none; padding-top: 0; }

/* Corrections inspector now lives in the actions column, expanding inline into
   the free space below the buttons (capped + scroll so it can't exceed the body). */
.sl-actions-col .sl-inspector { max-height: 46vh; overflow: auto; margin-top: 4px; }

/* Stages-remaining hint, shown below the last stage card in the stages column. */
.sl-stages-remaining {
  margin: 6px 4px 2px; padding: 9px 12px; text-align: center;
  font-size: 12px; line-height: 1.4; color: var(--text-3);
  border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
}

/* (3) Tablet/short: actually stack the grid (video over stages) and page-scroll.
   Same thresholds as the feedback view so the shared .sl-review / .sl-review-body
   rules never disagree at an in-between width. */
@media (max-width: 1100px), (max-height: 760px) {
  .sl-review { height: auto; min-height: calc(100vh - 56px); overflow: visible; }
  .sl-review-body { overflow: visible; }
  .sl-review-top {
    grid-template-columns: 1fr;
    width: auto;
  }
  .sl-stages-col { max-width: none; min-width: 0; }
  .sl-stages-list { overflow: visible; }
  /* Actions column goes full-width when stacked; inspector becomes inline. */
  .sl-actions-col { max-width: none; }
  /* Stacked single column has full width available, so don't let the transport
     shrink to the (portrait) video width and over-wrap its buttons. */
  .sl-transport-annot { min-width: min(100%, 360px); }
  /* The desktop flex-fill video needs a definite parent height; stacked/page-
     scroll has none, so give it an explicit height cap (width follows aspect). */
  .sl-video-col .sl-video-wrap {
    flex: 0 0 auto !important;
    height: min(58vh, 78vw) !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* (4) Transport controls (admin): the playback buttons + problem-frame nav live
   in the narrow video-width column, so they overflow once --sl-video-h shrinks
   (≈1440×900 and below). Group them into two clusters that wrap independently:
   wide → one line [transport][⚠ counter ⚠] + scrubber; narrow → three lines
   (transport / problem-nav+counter / scrubber). Pure flex-wrap, no breakpoint —
   it wraps exactly when the row can't fit. */
.sl-transport-annot .sl-transport-row {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sl-transport-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Frame counter sits centered between the problem buttons (drop the left margin
   it carries from the single-row layout). */
.sl-transport-annot .sl-frame-ct { margin-left: 0; }

/* (5) Shorter viewports: compact the stage cards + progress dots so all EIGHT
   required steps (7 serve stages + the racket-scale frame) fit the stages column
   with no internal scrollbar. Threshold raised to 1100px (from 968px) when the
   8th card was added — 1080p now needs the compaction to fit the extra card.
   NOTE: exact threshold/sizing tuned by eye on dev; revisit if a scrollbar
   still appears at a common resolution. */
@media (max-height: 1100px) {
  .sl-stages-list { gap: 6px; padding: 6px 8px; }
  .sl-stage-card { padding: 7px 10px; gap: 8px; }
  .sl-stage-num { width: 38px; height: 38px; font-size: 17px; }
  .sl-scale-card .sl-stage-num { font-size: 16px; }
  .sl-stage-name { font-size: 14px; }
  .sl-stage-desc { font-size: 10.5px; line-height: 1.35; }
  .sl-progress-dots { padding: 8px 18px; }
  .sl-progress-dot { width: 24px; height: 24px; font-size: 11px; }
  .sl-stages-remaining { margin: 4px 4px 2px; padding: 6px 10px; font-size: 11px; }
}

/* (6) Phone: the app header (queue + upload pages) packs Upload + Analytics +
   theme + account into a fixed-height, no-wrap bar that overflows the viewport
   around ~390px wide. Let it wrap to auto height so nothing spills off-screen
   (the queue rows + controls already fit — the header was the sole offender). */
@media (max-width: 560px) {
  .sl-header { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .sl-header-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}

/* (7) Two-track queue tabs (Initial Results | Refined Results). Reuses the
   .sl-queue-tab look but sits inset inside the centered .sl-queue (no surface
   bg / full-bleed padding), with a count pill per tab. */
.sl-queue-tabs-inset { background: transparent; padding: 0; margin-bottom: 20px; }
.sl-queue-tab-count {
  margin-left: 8px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--text-2);
  border-radius: 999px; padding: 1px 8px; line-height: 1.5;
}
.sl-queue-tab.active .sl-queue-tab-count { background: var(--primary-dim); color: var(--primary); }
/* ============================================================================
   polish.css — ServeLab pre-launch visual polish
   ----------------------------------------------------------------------------
   Proposed additions + overrides, layered ON TOP of the real results.css.
   This file IS the handoff spec: everything here is new and portable.

   Conventions:
     .slp-*            new polish classes (drop into results.css)
     OVERRIDE:         tweaks to EXISTING .sl- rules (apply as edits)
     --slp-*           new tokens that could fold into results.css :root

   All values reuse existing design tokens (--surface, --primary, --text…)
   so light + dark themes both inherit for free.
   ============================================================================ */

:root, [data-theme="dark"] {
  --slp-shimmer: rgba(255,255,255,0.13);
  --slp-shimmer-hi: rgba(255,255,255,0.22);
}
[data-theme="light"] {
  --slp-shimmer: rgba(0,0,0,0.10);
  --slp-shimmer-hi: rgba(255,255,255,0.6);
}

/* ===========================================================================
   1 · CONFIRM MODAL  — replaces window.confirm() everywhere
   (remove member, delete org, sign out, batch delete, stop sharing…)
   Built on the existing .sl-modal-backdrop / .sl-modal-card pattern.
   =========================================================================== */
.slp-confirm-card { max-width: 420px; gap: 16px; text-align: center; align-items: center; }
.slp-confirm-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.slp-confirm-icon svg { width: 26px; height: 26px; }
.slp-confirm-icon-danger  { background: var(--red-dim);     color: var(--red); }
.slp-confirm-icon-primary { background: var(--primary-dim); color: var(--primary); }
.slp-confirm-icon-warn    { background: var(--amber-dim);   color: var(--amber); }
.slp-confirm-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.slp-confirm-body  { font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 340px; }
.slp-confirm-body strong { color: var(--text); font-weight: 600; }
.slp-confirm-card .sl-confirm-row { width: 100%; margin-top: 4px; }
.slp-btn-danger { background: var(--red); color: #fff; }
.slp-btn-danger:hover:not(:disabled) { background: var(--red); filter: brightness(1.08); }

/* ===========================================================================
   2 · LOADING — skeleton shimmer (replaces bare "Loading…" muted text)
   =========================================================================== */
.slp-skel {
  position: relative; overflow: hidden;
  background: var(--slp-shimmer); border-radius: var(--radius-sm);
}.slp-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--slp-shimmer-hi), transparent);
  transform: translateX(-100%);
  animation: slp-shimmer 1.4s ease-in-out infinite;
}
@keyframes slp-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .slp-skel::after { animation: none; } }

.slp-skel-line { height: 12px; border-radius: 4px; }
.slp-skel-line.lg { height: 20px; }
.slp-skel-thumb { width: 72px; height: 104px; border-radius: 8px; flex-shrink: 0; }
.slp-skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* a skeleton serve row mirrors .sl-queue-row geometry exactly */
.slp-skel-row {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
}
.slp-skel-row-text { display: flex; flex-direction: column; gap: 9px; flex: 1; }

/* ===========================================================================
   3 · ERROR STATE — friendly, actionable. Replaces raw setError(e.message)
   like "request failed (502)". Inline variant + full-panel variant.
   =========================================================================== */
.slp-error {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 56px 24px; max-width: 460px; margin: 0 auto;
}
.slp-error-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--red-dim); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
}
.slp-error-icon svg { width: 30px; height: 30px; }
.slp-error-title { font-size: 19px; font-weight: 700; }
.slp-error-body  { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.slp-error-detail {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px; margin-top: 2px;
}
/* compact inline banner (richer than .sl-alert-err: adds a retry affordance) */
.slp-error-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--red-dim); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.slp-error-banner .slp-eb-icon { color: var(--red); flex-shrink: 0; display: inline-flex; }
.slp-error-banner .slp-eb-text { flex: 1; min-width: 0; }
.slp-error-banner .slp-eb-title { font-size: 13px; font-weight: 600; color: var(--text); }
.slp-error-banner .slp-eb-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }

/* ===========================================================================
   4 · EMPTY STATE — finished, with a clear next action.
   Richer than the existing .sl-empty (which was icon + two lines).
   =========================================================================== */
.slp-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 72px 24px;
}
.slp-empty-icon {
  width: 76px; height: 76px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-dim); color: var(--primary); margin-bottom: 14px;
}
.slp-empty-icon svg { width: 36px; height: 36px; }
.slp-empty-icon.green { background: var(--green-dim); color: var(--green); }
.slp-empty-title { font-size: 19px; font-weight: 700; }
.slp-empty-body  { font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 380px; }
.slp-empty-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* ===========================================================================
   5 · SERVE CARDS — the headline fix. Bigger, clearly-readable names;
   provenance + status as quiet icon rows; hide/share as icon buttons.
   Three variations (A list-row / B media-card / C status-rail) share these
   primitives.
   =========================================================================== */

/* — quiet inline icon meta (provenance, fps, stance…) — */
.slp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.slp-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.slp-meta-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.slp-meta-org { color: var(--text-2); }
.slp-meta-org svg { color: var(--primary); opacity: 1; }

/* — icon action buttons (hide-from-coaches, share). Quiet by default,
     color-emphatic when active. Replaces the underlined-text toggles. — */
.slp-iconbtn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-2);
  color: var(--text-2); cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.slp-iconbtn svg { width: 16px; height: 16px; }
.slp-iconbtn:hover { color: var(--text); background: var(--ghost-hover); border-color: var(--text-3); }
.slp-iconbtn.on-hidden { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-dim); }
.slp-iconbtn.on-shared { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: var(--primary-dim); }

/* status pill — one consistent treatment across all card variants
   (replaces the scattered in-flight tags / status sub-labels / age pills) */
.slp-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.slp-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.slp-status-dot.pulse { box-shadow: 0 0 0 0 currentColor; animation: slp-pulse 1.6s ease-out infinite; }
@keyframes slp-pulse { 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.slp-st-delivered { color: var(--primary); }
.slp-st-ready     { color: var(--green); }
.slp-st-analyzing { color: var(--amber); }
.slp-st-failed    { color: var(--red); }

/* ---- Variation A: refined list row (conservative; the default) ---- */
.slp-card-a { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.slp-card-a .slp-thumb { width: 76px; height: 108px; border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.slp-card-a-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.slp-name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slp-subline { font-size: 13px; color: var(--text-3); }

/* date — a focal point alongside the name, not a dim afterthought.
   (Replaces the text-3 .sl-card-date / .sl-queue-date treatment.) */
.slp-date { font-size: 13.5px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }
.slp-date.lead { font-size: 15px; color: var(--text); }

/* ---- prominent track tabs (Initial / Refined) ----
   The underline tabs read as a label, not a control, and the inactive
   one (Refined — what power users want) sat at text-3. A contained
   segmented control reads unmistakably as a toggle and gives both
   tracks equal, readable weight. */
.slp-track { display: inline-flex; gap: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 11px; padding: 4px; }
.slp-track-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px;
  border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--text-2);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s; white-space: nowrap;
}
.slp-track-tab:hover { color: var(--text); }
.slp-track-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.slp-track-count {
  font-size: 12px; font-weight: 700; min-width: 22px; text-align: center;
  padding: 1px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--text-2);
}
.slp-track-tab.active .slp-track-count { background: var(--primary); color: #fff; }
.slp-card-a-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---- Variation B: media card (poster-forward grid) ---- */
.slp-card-b { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.slp-card-b .slp-thumb-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.slp-card-b .slp-thumb-wrap > .slp-thumb { width: 100%; height: 100%; border-radius: 0; }
.slp-card-b-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  background: linear-gradient(to top, rgba(8,12,18,0.92) 8%, rgba(8,12,18,0.55) 55%, transparent);
}
.slp-card-b-overlay .slp-name { font-size: 19px; color: #fff; }
.slp-card-b-overlay .slp-subline { color: rgba(255,255,255,0.7); }
.slp-card-b-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.slp-card-b-status {
  background: rgba(8,12,18,0.7); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 4px 11px;
}
.slp-card-b-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.slp-card-b-actions { display: flex; gap: 6px; }

/* ---- Variation C: status-rail row (status as a colored left rail) ---- */
.slp-card-c { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.slp-card-c-rail { width: 5px; flex-shrink: 0; background: var(--border-2); }
.slp-card-c.st-delivered .slp-card-c-rail { background: var(--primary); }
.slp-card-c.st-ready     .slp-card-c-rail { background: var(--green); }
.slp-card-c.st-analyzing .slp-card-c-rail { background: var(--amber); }
.slp-card-c.st-failed    .slp-card-c-rail { background: var(--red); }
.slp-card-c-inner { display: flex; align-items: center; gap: 18px; padding: 16px 18px; flex: 1; min-width: 0; }

/* shared serve-card shell (extends .sl-card / .sl-queue-row hover semantics) */
.slp-card {
  position: relative; width: 100%; text-align: left; font-family: var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.slp-card:hover { background: var(--surface-hover); border-color: var(--border-2); }
.slp-card:hover .slp-cta-arrow { transform: translateX(3px); }
.slp-cta-arrow { display: inline-block; transition: transform 0.15s; }

/* ===========================================================================
   6 · ORG DETAIL HERO — render the logo + description the create modal
   already collects (currently dropped on /orgs/<id>). Adds stat chips.
   =========================================================================== */
.slp-org-hero {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px;
}
.slp-org-hero-logo {
  width: 84px; height: 84px; border-radius: 20px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 30px; border: 1px solid var(--border);
}
.slp-org-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.slp-org-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.slp-org-hero-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.slp-org-hero-name { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.slp-org-hero-desc { font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 560px; }
.slp-org-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.slp-stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 14px; min-width: 84px;
}
.slp-stat-val { font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.slp-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.slp-billing { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.slp-billing-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.slp-billing-trial    { background: var(--amber-dim);   color: var(--amber); }
.slp-billing-active   { background: var(--green-dim);   color: var(--green); }
.slp-billing-past_due { background: var(--red-dim);     color: var(--red); }
.slp-billing-canceled { background: var(--surface-2);   color: var(--text-3); }

/* — styled role dropdown (replaces the OS-default <select> on member rows) — */
.slp-select {
  position: relative; font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 7px 30px 7px 12px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B95A5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.15s, background-color 0.15s;
}
.slp-select:hover { background-color: var(--surface-hover); border-color: var(--text-3); }
.slp-select:focus { outline: none; border-color: var(--primary); }

/* member row — a touch more room + clearly larger name */
.slp-member-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.slp-member-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
}
.slp-member-main { flex: 1; min-width: 0; }
.slp-member-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.slp-member-sub  { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.slp-chip {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.slp-chip-admin   { background: var(--primary-dim); color: var(--primary); }
.slp-chip-coach   { background: var(--surface-2);   color: var(--text-2); }
.slp-chip-you     { background: var(--green-dim);   color: var(--green); }
.slp-chip-pending { background: var(--amber-dim);   color: var(--amber); }

/* — Org detail · two-column layout (org card + people | search + invite) — */
.slp-org-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1200px) { .slp-org-grid { grid-template-columns: 1fr; } .slp-org-aside { position: static; } }
.slp-org-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; }

/* people list grouped by role */
.slp-people { display: flex; flex-direction: column; gap: 14px; }
.slp-people-group { display: flex; flex-direction: column; gap: 8px; }
.slp-people-label { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 4px 2px 0; }
.slp-people-label .slp-count { font-size: 11px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }

.slp-person { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.15s, transform 0.1s; }
.slp-person:hover { border-color: var(--border-2); }
/* coaches — a distinct, cooler base color so the working staff read as a set */
.slp-person-coach { background: var(--surface-2); }
/* owners & admins — special highlight card */
.slp-person-admin { background: var(--primary-dim);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--primary); }
.slp-person-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.slp-person-main { flex: 1; min-width: 0; }
.slp-person-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.slp-person-sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slp-person-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* right column — type-along search + a properly-styled invite card */
.slp-search-box { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 11px; padding: 12px 14px; transition: border-color 0.15s; }
.slp-search-box:focus-within { border-color: var(--primary); }
.slp-search-box svg { color: var(--text-3); flex-shrink: 0; }
.slp-search-box input { flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font); font-size: 14px; }
.slp-search-box input::placeholder { color: var(--text-3); }
.slp-search-count { font-size: 12px; color: var(--text-3); margin: 8px 2px 0; }

.slp-invite-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.slp-invite-title { font-size: 15px; font-weight: 700; }
.slp-invite-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
.slp-field { display: flex; flex-direction: column; gap: 7px; }
.slp-field-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.slp-input { width: 100%; background: var(--bg); border: 1px solid var(--border-2); border-radius: 9px;
  color: var(--text); font-family: var(--font); font-size: 14px; padding: 11px 13px; transition: border-color 0.15s; }
.slp-input:focus { outline: none; border-color: var(--primary); }
.slp-input::placeholder { color: var(--text-3); }
/* role picker — segmented, replaces the bare <select> */
.slp-role-toggle { display: flex; gap: 7px; }
.slp-role-opt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.slp-role-opt small { font-weight: 500; font-size: 11px; opacity: 0.85; }
.slp-role-opt:hover { border-color: var(--text-3); color: var(--text); }
.slp-role-opt.active { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }

/* ===========================================================================
   7 · ACCOUNT — subscription card + coach application get real structure
   =========================================================================== */
.slp-sub-card {
  display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 8%, var(--surface)) 100%);
  border: 1px solid var(--border-2); border-radius: 12px; padding: 20px;
}
.slp-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.slp-sub-plan { display: flex; flex-direction: column; gap: 3px; }
.slp-sub-tier { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.slp-sub-tier-sub { font-size: 13px; color: var(--text-2); }
.slp-sub-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 5px 11px; border-radius: 999px; background: var(--primary-dim); color: var(--primary); white-space: nowrap;
}
/* free-serve quota meter */
.slp-quota { display: flex; flex-direction: column; gap: 8px; }
.slp-quota-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.slp-quota-head > span { white-space: nowrap; }
.slp-quota-head b { font-weight: 700; }
.slp-quota-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.slp-quota-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.4s ease; }
.slp-quota-fill.full { background: var(--amber); }
.slp-sub-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--border); }
.slp-sub-cta-text { font-size: 13px; color: var(--text-2); }

/* coach application card states */
.slp-coach-state { display: flex; align-items: flex-start; gap: 12px; }
.slp-coach-state-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.slp-coach-state-icon svg { width: 20px; height: 20px; }
.slp-coach-approved { background: var(--green-dim); color: var(--green); }
.slp-coach-pending  { background: var(--amber-dim); color: var(--amber); }

/* — brand lockup (new ServeLab logo; replaces the old Bert ball + text) — */
.slp-brand-logo { height: 38px; width: auto; object-fit: contain; display: block; }
.slp-header-ctx { font-size: 14px; font-weight: 600; color: var(--text-2);
  padding-left: 13px; border-left: 1px solid var(--border-2); white-space: nowrap; }
.slp-rail-logo { height: 42px; width: auto; object-fit: contain; display: block; }

/* ===========================================================================
   7b · UPLOAD — inviting dropzone, segmented prefs, finished file rows,
   and gate placeholders (view-only / free-used) that double as a soft
   upgrade surface.
   =========================================================================== */

/* segmented form control (prefs + assignment) — replaces OS <select> */
.slp-choice { display: inline-flex; width: 100%; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 9px; padding: 3px; gap: 2px; }
.slp-choice button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-2);
  background: transparent; border: none; border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: all 0.13s; white-space: nowrap; }
.slp-choice button:hover { color: var(--text); }
.slp-choice button.active { background: var(--primary); color: #fff; }
.slp-choice button svg { width: 14px; height: 14px; }

.slp-pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.slp-pref-field { display: flex; flex-direction: column; gap: 8px; }
.slp-pref-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.slp-pref-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.slp-pref-title { font-size: 14px; font-weight: 700; }

/* collapsed prefs → readable tag pills (was dim "Comparing against: …") */
.slp-prefs-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.slp-prefs-summary-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.slp-tagpill { font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; }
.slp-tagpill svg { width: 13px; height: 13px; color: var(--text-2); }

/* inviting dropzone */
.slp-dropzone { border: 2px dashed var(--border-2); border-radius: 16px; background: var(--surface);
  padding: 46px 24px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.slp-dropzone:hover { border-color: var(--primary); background: var(--surface-hover); }
.slp-dropzone.drag { border-color: var(--primary); background: var(--primary-dim); }
.slp-dropzone-icon { width: 66px; height: 66px; border-radius: 50%; background: var(--primary-dim); color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px; transition: transform 0.15s; }
.slp-dropzone:hover .slp-dropzone-icon { transform: translateY(-2px); }
.slp-dropzone-icon svg { width: 30px; height: 30px; }
.slp-dropzone-title { font-size: 18px; font-weight: 700; }
.slp-dropzone-sub { font-size: 13.5px; color: var(--text-2); }
.slp-dropzone-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.slp-dropzone-chip { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.slp-dropzone-chip svg { width: 13px; height: 13px; opacity: 0.85; }

/* finished per-file rows */
.slp-upfile { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color 0.15s; }
.slp-upfile.done { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.slp-upfile.blocked { border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.slp-upfile-thumb { width: 48px; height: 66px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.slp-upfile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.slp-upfile-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slp-upfile-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.slp-upfile-meta span { white-space: nowrap; }
.slp-upfile-meta .dot { color: var(--text-3); }
.slp-upfile-warn { font-size: 12px; color: var(--amber); display: inline-flex; align-items: center; gap: 6px; }
.slp-upfile-warn svg { width: 13px; height: 13px; }
.slp-upfile-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.slp-upfile-bar-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.3s; }
.slp-trim-btn { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--primary-dim); border: none; border-radius: 7px; padding: 5px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.slp-trim-btn svg { width: 13px; height: 13px; }
.slp-upfile-x { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--text-3); cursor: pointer; transition: all 0.13s; }
.slp-upfile-x:hover { color: var(--red); background: var(--red-dim); }
.slp-upfile-x svg { width: 15px; height: 15px; }

/* upload summary bar */
.slp-upbatch { display: flex; flex-direction: column; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.slp-upbatch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slp-upbatch-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.slp-upbatch-fill { height: 100%; border-radius: 999px; background: var(--green); transition: width 0.3s; }

/* gate placeholders (view-only / free-used) */
.slp-gate { max-width: 560px; margin: 30px auto; display: flex; flex-direction: column; gap: 20px; }
.slp-gate-icon { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; }
.slp-gate-icon svg { width: 28px; height: 28px; }
.slp-gate-icon.amber { background: var(--amber-dim); color: var(--amber); }
.slp-gate-icon.primary { background: var(--primary-dim); color: var(--primary); }
.slp-gate-title { font-size: 25px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin-top: 14px; }
.slp-gate-body { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
.slp-gate-body strong { color: var(--text); }
.slp-feature-list { display: flex; flex-direction: column; gap: 12px; }
.slp-feature { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--text); line-height: 1.5; }
.slp-feature svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.slp-feature.ok svg { color: var(--green); }
.slp-feature.no svg { color: var(--text-3); }
.slp-gate-foot { font-size: 13px; color: var(--text-3); line-height: 1.55; }

/* ===========================================================================
   8 · REVIEW CHROME — the polish-review tool (sidebar, stage, notes, toggles).
   =========================================================================== */
.slp-shell { display: flex; min-height: 100vh; }
.slp-rail {
  width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 4px;
}
.slp-rail-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.slp-rail-brand img { width: 30px; height: 30px; }
.slp-rail-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.slp-rail-brand-sub { font-size: 11px; color: var(--text-3); font-weight: 600; }
.slp-rail-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3); padding: 14px 10px 6px; }
.slp-rail-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; border: none; color: var(--text-2);
  font-family: var(--font); font-size: 13.5px; font-weight: 600; text-align: left; transition: all 0.13s;
}
.slp-rail-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.slp-rail-item:hover { background: var(--ghost-hover); color: var(--text); }
.slp-rail-item.active { background: var(--primary-dim); color: var(--primary); }
.slp-rail-num { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 700; }

.slp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.slp-topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 28px; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.slp-topbar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slp-topbar-h { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.slp-topbar-sub { font-size: 12.5px; color: var(--text-2); }
.slp-topbar-route { font-family: var(--mono); font-size: 12px; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; }
.slp-stage { padding: 28px; max-width: 1180px; width: 100%; margin: 0 auto; }
.slp-stage.wide { max-width: 1320px; }

/* annotation callout — numbered "what changed" note */
.slp-note {
  display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13px; line-height: 1.55;
}
.slp-note-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.slp-note b { color: var(--text); font-weight: 700; }
.slp-note .slp-note-body { color: var(--text-2); }
.slp-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }

/* section scaffolding inside a stage */
.slp-block { margin-bottom: 34px; }
.slp-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.slp-block-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.slp-block-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; max-width: 640px; line-height: 1.5; }
.slp-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 7px; }

/* segmented variation toggle */
.slp-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.slp-seg button {
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: transparent; border: none; border-radius: 4px; padding: 6px 13px; cursor: pointer; transition: all 0.13s; white-space: nowrap;
}
.slp-seg button:hover { color: var(--text); }
.slp-seg button.active { background: var(--primary); color: #fff; }

/* a labeled mock frame — frames a surface so it reads as "the app" */
.slp-frame { background: var(--bg); border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-popover); }
.slp-frame-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.slp-frame-dots { display: flex; gap: 6px; }
.slp-frame-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); }
.slp-frame-url { flex: 1; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.slp-frame-body { background: var(--bg); }

/* small comparison grid for "before / after" chips */
.slp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.slp-ba-col { display: flex; flex-direction: column; gap: 8px; }
.slp-ba-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.slp-ba-tag.before { color: var(--text-3); }
.slp-ba-tag.after  { color: var(--green); }
.slp-ba-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; min-height: 60px; }
.slp-ba-pane.before { opacity: 0.92; }
@media (max-width: 720px) { .slp-ba { grid-template-columns: 1fr; } }

/* tidy demo grid for the card variations */
.slp-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.slp-demo-list { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 880px) {
  .slp-rail { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; }
  .slp-shell { flex-direction: column; }
}

/* ===========================================================================
   7c · ROSTER & CLAIM — coach roster management + player invitation claim.
   =========================================================================== */
.slp-chip-claimed { background: var(--green-dim); color: var(--green); }
.slp-check { accent-color: var(--primary); width: 16px; height: 16px; }
.slp-checkrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.slp-csv { width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-2); border-radius: 9px; padding: 12px 13px; resize: vertical; }
.slp-csv:focus { outline: none; border-color: var(--primary); }
.slp-csv::placeholder { color: var(--text-3); }
/* collapsible section header (CSV pane) */
.slp-collapse-head { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent;
  border: none; padding: 4px 2px; cursor: pointer; font-family: var(--font); color: var(--text); }
.slp-collapse-chevron { display: inline-flex; color: var(--text-3); transition: transform 0.15s; }
.slp-collapse-chevron.open { transform: rotate(90deg); }
.slp-collapse-head:hover .slp-collapse-chevron { color: var(--text); }
.slp-collapse-title { font-size: 14px; font-weight: 700; }
/* claim invitation card — a friendlier, player-facing version of .slp-person */
.slp-invite-from { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
.slp-invite-msg { font-size: 15px; line-height: 1.45; }
.slp-invite-msg strong { font-weight: 700; }
.slp-invite-detail { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.slp-invite-actions { display: flex; gap: 8px; flex-shrink: 0; }
.slp-accepted { display: flex; align-items: flex-start; gap: 12px; background: var(--green-dim);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 12px; padding: 16px; }
.slp-accepted-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slp-accepted-icon svg { width: 22px; height: 22px; }

/* ===========================================================================
   7d · SHARE — public read-only comparison viewer (prospect first impression).
   Mocks the FeedbackReviewPanel layout + feel; responsive (stacks < 1080px).
   =========================================================================== */
.slp-share { display: flex; flex-direction: column; background: var(--bg); }
/* public top bar — brand + shared-serve context + a prospect CTA */
.slp-share-top { display: flex; align-items: center; gap: 16px; padding: 12px 22px;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.slp-share-top .slp-brand-logo { height: 34px; }
.slp-share-shared { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px;
  padding-left: 13px; border-left: 1px solid var(--border-2); }
.slp-share-cta-btn { margin-left: auto; }

/* report header — player + comparison tags */
.slp-share-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; flex-wrap: wrap; }
.slp-share-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.slp-share-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.slp-share-vs { background: var(--primary-dim); color: var(--primary); }

/* two-column body → stacks under 1080px (the flagged responsive break) */
.slp-share-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr);
  gap: 22px; padding: 4px 22px 26px; align-items: start; }
@media (max-width: 1080px) { .slp-share-body { grid-template-columns: 1fr; } }

.slp-share-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* side-by-side portrait videos */
.slp-vid-pair { display: flex; gap: 10px; justify-content: center; }
.slp-vid { position: relative; flex: 1 1 0; max-width: 248px; aspect-ratio: 9 / 16; border-radius: 12px;
  overflow: hidden; background: #0b1016; border: 1px solid var(--border-2); }
.slp-vid-label { position: absolute; top: 9px; left: 9px; z-index: 3; font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #fff;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 999px; }
.slp-vid-label.pro { color: var(--primary); }
.slp-vid-stage { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

/* transport */
.slp-transport { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.slp-transport-btn { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer;
  background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.slp-transport-btn svg { width: 16px; height: 16px; }
.slp-scrub { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); position: relative; cursor: pointer; }
.slp-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--primary); }
.slp-scrub-knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid var(--primary); transform: translate(-50%, -50%); }
.slp-transport-time { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }

/* stage strip (S2–S8) */
.slp-stages { display: flex; gap: 5px; }
.slp-stage-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: all 0.13s; min-width: 0; }
.slp-stage-btn:hover { background: var(--surface-hover); border-color: var(--border-2); }
.slp-stage-btn.active { background: var(--primary-dim); border-color: var(--primary); }
.slp-stage-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-3); }
.slp-stage-btn.active .slp-stage-num { color: var(--primary); }
.slp-stage-name { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.slp-stage-btn.active .slp-stage-name { color: var(--text); }

/* key metrics — you vs pro bars */
.slp-metrics { display: flex; flex-direction: column; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.slp-metrics-title { font-size: 13px; font-weight: 700; }
.slp-metric { display: flex; flex-direction: column; gap: 6px; }
.slp-metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.slp-metric-name { font-size: 13px; font-weight: 600; }
.slp-metric-vals { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.slp-metric-vals b { color: var(--text); }
.slp-metric-track { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); }
.slp-metric-you { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--amber); }
.slp-metric-pro-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--primary); }

/* feedback rail */
.slp-share-right { display: flex; flex-direction: column; gap: 12px; }
.slp-fb-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.slp-fb-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px; border: none; border-radius: 7px; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: all 0.13s; }
.slp-fb-tab:hover { color: var(--text); }
.slp-fb-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.slp-fb-tab .slp-badge { min-width: 20px; }

/* finding card (mistake / strength) */
.slp-finding { position: relative; display: flex; gap: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; }
.slp-finding-strip { width: 4px; flex-shrink: 0; }
.slp-finding-body { flex: 1; min-width: 0; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; }
.slp-finding-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slp-finding-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.slp-finding-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.slp-stage-chip { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; cursor: pointer; }
.slp-sev { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.slp-sev-critical { background: var(--red-dim); color: var(--red); }
.slp-sev-moderate { background: var(--amber-dim); color: var(--amber); }
.slp-sev-minor { background: var(--surface-2); color: var(--text-3); }
.slp-finding-viz { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--primary-dim); border: none; border-radius: 7px; padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; }
.slp-finding-viz svg { width: 13px; height: 13px; }

/* prospect CTA banner */
.slp-share-promo { display: flex; align-items: center; gap: 16px; margin: 0 22px 26px;
  background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--primary) 10%, var(--surface)));
  border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 22px; flex-wrap: wrap; }
.slp-share-promo-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-dim); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slp-share-promo-icon svg { width: 24px; height: 24px; }
.slp-share-promo-text { flex: 1; min-width: 200px; }
.slp-share-promo-title { font-size: 16px; font-weight: 700; }
.slp-share-promo-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
/* ============================================================================
   tutorial.css — ServeLab guided "tutorial mode"
   ----------------------------------------------------------------------------
   A spotlight + coachmark walkthrough aimed at non-tech-savvy tennis coaches.
   Design priorities, in order:
     1. ONE thing at a time   — dim everything, ring the single target.
     2. Plain language        — big readable type, no jargon, warm voice.
     3. Large hit targets      — 44px+ buttons, generous spacing.
     4. Always escapable        — Skip + ✕ on every step; re-openable forever.

   Layered on top of results.css + polish.css; reuses --primary / --surface /
   --text tokens so it inherits both themes. All classes are .tut-*.
   ============================================================================ */

:root {
  --tut-scrim: rgba(9, 13, 19, 0.74);
  --tut-ring: var(--primary);
  --tut-card-w: 340px;
}
[data-theme="light"] { --tut-scrim: rgba(17, 24, 33, 0.55); }

/* The screen wrapper — tours are scoped to this box, never the whole page. */
.tut-stage { position: relative; }

/* ── Launcher: always-visible help pill at top-left of the viewport,
   just below the 56px-tall .sl-header. position:fixed so it stays put
   regardless of scroll. Originally bottom-right of .tut-stage (Design's
   default), but the stage is the whole page — on tall pages the
   launcher fell below the fold. ── */
.tut-launch {
  position: fixed; left: 18px; top: 72px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 18px 0 15px; border-radius: 999px;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 6px 22px rgba(0,0,0,0.32), 0 0 0 1px color-mix(in srgb, #fff 14%, transparent) inset;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.tut-launch:hover { transform: translateY(-2px); filter: brightness(1.06); }
.tut-launch svg { width: 19px; height: 19px; }
.tut-launch.icon-only { width: 46px; padding: 0; justify-content: center; }

/* First-run nudge bubble — sits below the launcher (also fixed-top-left).
   The tail points UP at the launcher above. */
.tut-nudge {
  position: fixed; left: 18px; top: 130px; z-index: 60;
  max-width: 260px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow-popover); animation: tut-rise 0.4s ease both;
}
.tut-nudge-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.tut-nudge-sub { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
.tut-nudge-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tut-nudge-tail {
  position: absolute; left: 28px; top: -7px; width: 14px; height: 14px;
  background: var(--surface); border-left: 1px solid var(--border-2); border-top: 1px solid var(--border-2);
  transform: rotate(45deg);
}
.tut-nudge-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-3); cursor: pointer;
}
.tut-nudge-x:hover { color: var(--text); background: var(--ghost-hover); }
.tut-nudge-x svg { width: 15px; height: 15px; }

/* ── The overlay (covers the screen, blocks stray clicks during a tour) ── */
.tut-overlay { position: absolute; inset: 0; z-index: 70; }

/* Spotlight: a transparent box over the target with a massive scrim shadow,
   so everything BUT the target dims. A ring + soft glow draws the eye. */
.tut-spot {
  position: absolute; top: 0; left: 0; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 4000px var(--tut-scrim);
  outline: 2px solid var(--tut-ring);
  outline-offset: 3px;
}
.tut-spot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 26%, transparent);
  animation: tut-pulse 2s ease-out infinite;
}
@keyframes tut-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); }
  70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .tut-spot, .tut-spot::after { transition: none; animation: none; } }

/* full-screen scrim used by the intro / completion step (no target) */
.tut-veil { position: absolute; inset: 0; background: var(--tut-scrim); }

/* ── Coachmark card ── */
.tut-card {
  position: absolute; z-index: 72; width: var(--tut-card-w); max-width: calc(100% - 32px);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px;
  padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  animation: tut-rise 0.32s ease both;
}
.tut-card.centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@keyframes tut-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tut-card.centered { animation: tut-pop 0.32s ease both; }
@keyframes tut-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* arrow tail pointing at the target */
.tut-arrow {
  position: absolute; width: 16px; height: 16px; background: var(--surface);
  border: 1px solid var(--border-2); transform: rotate(45deg);
}
.tut-arrow.up    { top: -9px; border-right: none; border-bottom: none; }
.tut-arrow.down  { bottom: -9px; border-left: none; border-top: none; }
.tut-arrow.left  { left: -9px; border-right: none; border-top: none; }
.tut-arrow.right { right: -9px; border-left: none; border-bottom: none; }

.tut-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.tut-card-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-dim); color: var(--primary);
}
.tut-card-icon svg { width: 20px; height: 20px; }
.tut-step {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
}
.tut-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); }
.tut-body { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin-top: 9px; }
.tut-body strong { color: var(--text); font-weight: 600; }

.tut-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-3); cursor: pointer; transition: all 0.13s;
}
.tut-x:hover { color: var(--text); background: var(--ghost-hover); }
.tut-x svg { width: 17px; height: 17px; }

/* footer: dots + navigation */
.tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tut-dots { display: flex; gap: 6px; align-items: center; }
.tut-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-2); transition: all 0.2s; cursor: pointer; }
.tut-dot.active { width: 20px; background: var(--primary); }
.tut-dot.done { background: color-mix(in srgb, var(--primary) 55%, transparent); }
.tut-nav { display: flex; align-items: center; gap: 8px; }

/* big, friendly buttons (min 44px tall handled by padding) */
.tut-btn {
  font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  border-radius: 10px; padding: 11px 18px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 7px; transition: all 0.14s; white-space: nowrap;
}
.tut-btn svg { width: 15px; height: 15px; }
.tut-btn-primary { background: var(--primary); color: #fff; }
.tut-btn-primary:hover { filter: brightness(1.07); }
.tut-btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-2); }
.tut-btn-ghost:hover { color: var(--text); background: var(--ghost-hover); }
.tut-skip {
  background: none; border: none; cursor: pointer; color: var(--text-3);
  font-family: var(--font); font-size: 13px; font-weight: 600; padding: 6px 4px;
}
.tut-skip:hover { color: var(--text-2); text-decoration: underline; }

/* the intro / done card is roomier and centered */
.tut-card.intro { width: 420px; text-align: center; padding: 28px 26px 24px; }
.tut-card.intro .tut-card-head { flex-direction: column; gap: 14px; margin-bottom: 6px; }
.tut-card.intro .tut-card-icon { width: 60px; height: 60px; border-radius: 18px; }
.tut-card.intro .tut-card-icon svg { width: 30px; height: 30px; }
.tut-card.intro .tut-title { font-size: 23px; }
.tut-card.intro .tut-body { font-size: 15px; max-width: 320px; margin: 10px auto 0; }
.tut-card.intro .tut-foot { flex-direction: column; gap: 14px; margin-top: 22px; }
.tut-card.intro .tut-nav { width: 100%; flex-direction: column; gap: 9px; }
.tut-card.intro .tut-btn { width: 100%; justify-content: center; font-size: 15px; padding: 13px 18px; }

/* the little "meta" line under the intro (time estimate) */
.tut-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.tut-meta svg { width: 14px; height: 14px; }

/* a once-per-tour "you can reopen this anytime" hint */
.tut-reopen-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* ============================================================================
   Overview / rationale page bits (the design-review explainer, not the product)
   ============================================================================ */
.tut-anatomy { position: relative; background: var(--bg); border: 1px solid var(--border-2);
  border-radius: 14px; padding: 30px; overflow: hidden; }
.tut-anatomy-scrim { position: absolute; inset: 0; background: var(--tut-scrim); }
.tut-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.tut-pill svg { width: 14px; height: 14px; color: var(--primary); }
.tut-principle { display: flex; gap: 14px; align-items: flex-start; }
.tut-principle-num { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--primary-dim);
  color: var(--primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.tut-principle h4 { font-size: 15px; font-weight: 700; margin: 3px 0 4px; letter-spacing: -0.01em; }
.tut-principle p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; }
/* ============================================================================
   annotate.css — the /serve/<id>/annotate power-user surface.
   A dense, dark, frame-by-frame pose editor. New ServeLab surface (it never
   existed in the polish round); built on the same results.css tokens so it
   sits beside the rest of the app. Classes are .anno-*.
   ============================================================================ */

.anno-shell { display: flex; flex-direction: column; min-height: 620px; background: var(--bg); }

/* ── top toolbar ── */
.anno-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.anno-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.anno-title-h { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.anno-title-sub { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }

.anno-tools { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.anno-tool { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.13s; white-space: nowrap; }
.anno-tool:hover { color: var(--text); }
.anno-tool.active { background: var(--primary); color: #fff; }

.anno-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anno-undo { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.anno-icon-btn { width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-2); cursor: pointer; transition: all 0.13s; }
.anno-icon-btn:hover { color: var(--text); background: var(--ghost-hover); }

/* ── body: canvas | side panels ── */
.anno-body { flex: 1; display: flex; gap: 18px; padding: 20px; align-items: flex-start; }
.anno-stage-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* the editable video canvas (portrait) */
.anno-canvas { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 14;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border-2); background: #0b1016;
  user-select: none; touch-action: none; }
.anno-canvas-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 28%, #16202b 0%, #0b1016 72%); }
.anno-frame-badge { position: absolute; top: 10px; left: 10px; z-index: 4; font-family: var(--mono);
  font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  padding: 4px 10px; border-radius: 999px; }
.anno-bones { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* ball marker */
.anno-ball { position: absolute; z-index: 3; width: 22px; height: 22px; transform: translate(-50%, -50%); cursor: grab; }
.anno-ball-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #C6E84B; box-shadow: 0 0 10px rgba(198,232,75,0.6); }
.anno-ball::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(198,232,75,0.35); }

/* draggable joint handles */
.anno-joint { position: absolute; z-index: 5; width: 16px; height: 16px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid #fff; background: #C6E84B; cursor: grab; padding: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4); transition: box-shadow 0.13s, transform 0.05s; }
.anno-joint:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 7; }
.anno-joint:active { cursor: grabbing; }
.anno-joint.flagged { background: var(--amber); border-color: #fff; box-shadow: 0 0 0 3px var(--amber-dim), 0 0 12px var(--amber);
  animation: anno-flag 1.6s ease-in-out infinite; }
@keyframes anno-flag { 0%,100% { box-shadow: 0 0 0 3px var(--amber-dim), 0 0 8px var(--amber); } 50% { box-shadow: 0 0 0 6px transparent, 0 0 16px var(--amber); } }
.anno-joint.edited { background: var(--green); }
@media (prefers-reduced-motion: reduce) { .anno-joint.flagged { animation: none; } }
.anno-joint-tip { position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-2);
  padding: 3px 7px; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.anno-joint:hover .anno-joint-tip { opacity: 1; }

/* film strip / scrubber */
.anno-filmstrip { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.anno-track { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); }
.anno-track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--primary) 45%, transparent); }
.anno-track-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.13s; }
.anno-track-mark:hover { border-color: var(--text); }
.anno-track-mark.active { border-color: var(--primary); background: var(--primary-dim); }
.anno-track-mark.unset { border-style: dashed; border-color: var(--amber); }
.anno-track-num { font-family: var(--mono); font-size: 8px; font-weight: 700; color: var(--text-2); }
.anno-track-mark.active .anno-track-num { color: var(--primary); }
.anno-track-head { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--primary); transform: translateX(-50%); z-index: 2; }
.anno-frameno { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }

/* ── right side panels ── */
.anno-side { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 820px) { .anno-body { flex-direction: column; align-items: stretch; } .anno-side { width: 100%; } }
.anno-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.anno-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.anno-panel-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.anno-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.anno-pill.warn { background: var(--amber-dim); color: var(--amber); }
.anno-pill.ok { background: var(--green-dim); color: var(--green); }

.anno-joint-list { display: flex; flex-direction: column; gap: 1px; max-height: 188px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.anno-joint-row { display: flex; align-items: center; gap: 10px; padding: 6px 7px; border-radius: 7px; transition: background 0.12s; }
.anno-joint-row.flagged { background: var(--amber-dim); }
.anno-joint-row.edited { background: color-mix(in srgb, var(--green) 9%, transparent); }
.anno-dot { width: 9px; height: 9px; border-radius: 50%; background: #C6E84B; flex-shrink: 0; }
.anno-dot.flagged { background: var(--amber); }
.anno-dot.edited { background: var(--green); }
.anno-joint-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.anno-conf { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.anno-conf.low { color: var(--amber); }
.anno-conf.fixed { color: var(--green); }

.anno-stage-list { display: flex; flex-direction: column; gap: 5px; }
.anno-stage-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: all 0.13s; text-align: left; }
.anno-stage-row:hover { border-color: var(--border-2); }
.anno-stage-row.active { border-color: var(--primary); background: var(--primary-dim); }
.anno-stage-row.unset { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.anno-stage-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-2); flex-shrink: 0; }
.anno-stage-row.active .anno-stage-badge { color: var(--primary); }
.anno-stage-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anno-stage-frame { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.anno-stage-set { font-size: 11px; font-weight: 700; color: var(--amber); background: var(--amber-dim); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* ===========================================================================
   7e · ACCOUNT — "About you" optional player profile questionnaire.
   Biographical inputs that sharpen ServeLab's comparison. One set of controls,
   three interchangeable layouts (rows / cards / guided), switchable via Tweaks.
   =========================================================================== */

/* two-column account layout: left = plan + profile + coach, right = About you.
   Keyed off the account's own width (container query) so it splits on a real
   browser even though the review frame is only a slice of the viewport. */
.sl-account.slp-acct-wide { max-width: 1060px; container-type: inline-size; container-name: acct; }
.slp-acct-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.slp-acct-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.slp-acct-aside { container-type: inline-size; }
@container acct (min-width: 720px) {
  .slp-acct-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
}

/* large, readable Profile (name + email lead; FYB note removed) */
.slp-profile { display: flex; align-items: center; gap: 15px; }
.slp-profile-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 19px; letter-spacing: 0.01em; }
.slp-profile-main { flex: 1; min-width: 0; }
.slp-profile-name { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slp-profile-email { font-size: 14.5px; color: var(--text-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* prominent Upgrade CTA — points to the future sales page */
.slp-upgrade-btn { padding: 11px 20px; font-size: 14.5px; font-weight: 700; border-radius: 10px;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
.slp-upgrade-btn:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 9px 24px -6px color-mix(in srgb, var(--primary) 78%, transparent); }
.slp-upgrade-btn:active { transform: translateY(0); }

/* subtle highlight that invites someone to fill out the questionnaire */
.slp-pp-highlight {
  background: linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--primary) 55%, transparent);
}
.slp-pp-hook { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--primary); background: var(--primary-dim);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 10px; padding: 9px 12px; }
.slp-pp-hook-spark { display: inline-flex; }
.slp-pp-hook-spark svg { width: 15px; height: 15px; }
.slp-pp-hook-time { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--surface); border-radius: 999px; padding: 2px 9px; }
@media (prefers-reduced-motion: no-preference) {
  .slp-pp-hook-spark { animation: slp-pp-glow 2.8s ease-in-out infinite; transform-origin: center; }
}
@keyframes slp-pp-glow { 0%, 100% { opacity: 0.6; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }

.slp-pp { display: flex; flex-direction: column; gap: 18px; }

/* intro + optional marker */
.slp-pp-intro { display: flex; align-items: flex-start; gap: 14px; }
.slp-pp-intro-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary-dim); color: var(--primary); }
.slp-pp-intro-icon svg { width: 21px; height: 21px; }
.slp-pp-intro-main { flex: 1; min-width: 0; }
.slp-pp-intro-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.slp-pp-optional { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.slp-pp-intro-sub { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 4px; max-width: 560px; }

/* completion meter */
.slp-pp-progress { display: flex; align-items: center; gap: 12px; }
.slp-pp-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.slp-pp-progress-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.4s ease; }
.slp-pp-progress-txt { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* shared label + "?" affordance */
.slp-pp-q-label { display: flex; align-items: center; gap: 8px; }
.slp-pp-info-wrap { position: relative; display: inline-flex; }
.slp-pp-info { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-3);
  font-family: var(--font); font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.13s; }
.slp-pp-info:hover, .slp-pp-info.open { color: var(--primary); border-color: var(--primary); background: var(--primary-dim); }
.slp-pp-pop { position: absolute; z-index: 60; top: calc(100% + 9px); left: -7px; width: 282px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 11px; padding: 13px 15px;
  box-shadow: var(--shadow-popover); cursor: default; }
.slp-pp-pop::before { content: ""; position: absolute; top: -6px; left: 12px; width: 11px; height: 11px;
  background: var(--surface); border-left: 1px solid var(--border-2); border-top: 1px solid var(--border-2); transform: rotate(45deg); }
.slp-pp-pop-title { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.slp-pp-pop-title svg { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }
.slp-pp-pop-body { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

/* control stacks + helper notes */
.slp-pp-ctl-stack { display: flex; flex-direction: column; gap: 7px; }
.slp-pp-default-note { font-size: 11.5px; color: var(--text-3); }

/* stepper (ratings + height) */
.slp-pp-stepper { display: inline-flex; align-items: center; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; }
.slp-pp-step-btn { width: 36px; height: 34px; border: none; background: transparent; color: var(--text-2);
  cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; }
.slp-pp-step-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.slp-pp-step-btn:disabled { opacity: 0.35; cursor: default; }
.slp-pp-step-val { min-width: 60px; text-align: center; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--text); }

/* rating */
.slp-pp-rating { display: flex; flex-direction: column; gap: 11px; }
.slp-pp-rating-row { display: flex; align-items: center; gap: 12px; }
.slp-pp-rating-desc { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.slp-pp-unsure { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; }
.slp-pp-unsure svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }

/* birthdate picker */
.slp-pp-date-wrap { display: block; }
.slp-pp-datebtn { display: inline-flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: 9px; color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 600; padding: 10px 13px; cursor: pointer; transition: border-color 0.13s; }
.slp-pp-datebtn:hover { border-color: var(--text-3); }
.slp-pp-datebtn.empty { color: var(--text-3); font-weight: 500; }
.slp-pp-datebtn > svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.slp-pp-datebtn > span:first-of-type { flex: 1; text-align: left; }
.slp-pp-date-age { font-size: 12px; color: var(--text-3); font-weight: 600; padding-left: 10px; border-left: 1px solid var(--border); white-space: nowrap; }
.slp-pp-cal { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 288px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 13px; padding: 13px; box-shadow: var(--shadow-popover); cursor: default; }
.slp-pp-cal-top { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.slp-pp-cal-top .slp-select { flex: 1; min-width: 0; padding: 6px 22px 6px 9px; font-size: 12.5px; }
.slp-pp-cal-nav { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; cursor: pointer; font-size: 16px; line-height: 1;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; }
.slp-pp-cal-nav:hover { color: var(--text); background: var(--surface-hover); }
.slp-pp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.slp-pp-cal-wd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); text-align: center; padding: 4px 0; }
.slp-pp-cal-day { aspect-ratio: 1; border: none; background: transparent; color: var(--text);
  font-family: var(--font); font-size: 12.5px; border-radius: 7px; cursor: pointer; transition: all 0.1s; }
.slp-pp-cal-day:hover { background: var(--surface-hover); }
.slp-pp-cal-day.sel { background: var(--primary); color: #fff; font-weight: 700; }

/* Layout A · rows */
.slp-pp-rows { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
.slp-pp-row { display: flex; align-items: center; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.slp-pp-row:last-child { border-bottom: none; }
.slp-pp-row-l { flex: 0 0 210px; min-width: 0; }
.slp-pp-row-title { font-size: 14px; font-weight: 600; color: var(--text); }
.slp-pp-row-hint { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.slp-pp-row-c { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.slp-pp-row-ctl { width: 100%; max-width: 330px; }
@media (max-width: 640px) {
  .slp-pp-row { flex-direction: column; align-items: stretch; gap: 11px; }
  .slp-pp-row-l { flex: none; }
  .slp-pp-row-ctl { max-width: none; }
}
/* stack rows when the questionnaire sits in a narrow column (right rail) */
@container (max-width: 470px) {
  .slp-pp-row { flex-direction: column; align-items: stretch; gap: 11px; }
  .slp-pp-row-l { flex: none; }
  .slp-pp-row-ctl { max-width: none; }
}

/* Layout B · cards */
.slp-pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.slp-pp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 16px 17px; display: flex; flex-direction: column; gap: 14px; }
.slp-pp-card.wide { grid-column: 1 / -1; }
.slp-pp-card-head { display: flex; align-items: flex-start; gap: 11px; }
.slp-pp-card-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.slp-pp-card-icon svg { width: 17px; height: 17px; }
.slp-pp-card-titles { flex: 1; min-width: 0; }
.slp-pp-card-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.slp-pp-card-hint { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.slp-pp-card-ctl { margin-top: auto; }

/* Layout C · guided */
.slp-pp-guided { display: flex; flex-direction: column; }
.slp-pp-q { padding: 20px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.slp-pp-q:first-child { padding-top: 4px; }
.slp-pp-q:last-child { border-bottom: none; padding-bottom: 4px; }
.slp-pp-q-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 0.03em; }
.slp-pp-q-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; display: flex; align-items: center; gap: 9px; }
.slp-pp-q-help { font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 560px; margin-top: -4px; }
.slp-pp-q-ctl { max-width: 440px; margin-top: 2px; }

/* ===========================================================================
   "← Dashboard" header back button — bright, prominent, never gets lost
   next to the email. Replaces the .sl-btn-ghost.sl-btn-sm pattern that
   read as quiet text. White label, surface-2 background so it pops on
   the dark .sl-header bar; subtle leftward slide on hover to signal
   "go back."
   =========================================================================== */
.slp-back-home {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: #fff; font-family: var(--font); font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.slp-back-home:hover {
  background: var(--surface-hover); border-color: var(--text-3); transform: translateX(-2px);
}
.slp-back-home:active { transform: translateX(-1px); }
.slp-back-home .slp-back-arrow { font-size: 17px; line-height: 1; font-weight: 700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Help Center (/help) + global SiteFooter — sl-help.jsx / sl-help-content.jsx.
   Theme-aware: everything rides the existing CSS vars. ━━━━━━━━━━━━━━━━━━━ */

/* ── Global footer ── */
.sl-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 48px; }
.sl-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.sl-footer-brand { font-weight: 700; font-size: 13px; color: var(--text-2); letter-spacing: 0.04em; }
.sl-footer-links { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.sl-footer-links a { color: var(--text-2); font-size: 13px; text-decoration: none; }
.sl-footer-links a:hover { color: var(--primary); text-decoration: underline; }
.sl-footer-copy { color: var(--text-3); font-size: 12px; }
.sl-login-help { justify-content: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ── Hub layout ── */
.sl-help-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }
.sl-help-hero { text-align: center; padding: 48px 0 28px; }
.sl-help-hero h1 { font-size: 30px; font-weight: 800; margin: 0 0 8px; }
.sl-help-hero-sub { color: var(--text-2); font-size: 15px; margin: 0 0 22px; }

/* ── Search box ── */
.sl-help-search {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 8px 16px; color: var(--text-3); width: 280px;
}
.sl-help-search.big { width: min(560px, 100%); padding: 12px 20px; }
.sl-help-search:focus-within { border-color: var(--primary); color: var(--primary); }
.sl-help-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font: inherit; font-size: 14px;
}
.sl-help-search.big input { font-size: 15px; }
.sl-help-search input::placeholder { color: var(--text-3); }
.sl-help-search-x {
  background: none; border: none; color: var(--text-3); font-size: 16px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.sl-help-search-x:hover { color: var(--text); }

/* ── Section cards ── */
.sl-help-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 14px; }
.sl-help-sec {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px;
}
.sl-help-sec-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.sl-help-sec-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-dim); color: var(--primary);
}
.sl-help-sec-icon svg { width: 20px; height: 20px; }
.sl-help-sec h2 { font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.sl-help-sec-blurb { color: var(--text-2); font-size: 13px; margin: 0; line-height: 1.45; }
.sl-help-sec-list { display: flex; flex-direction: column; }

/* ── Article rows (hub lists + search results) ── */
.sl-help-row {
  display: block; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.sl-help-row:hover { background: var(--ghost-hover); }
.sl-help-row-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.sl-help-row-blurb { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; line-height: 1.4; }
.sl-help-row:hover .sl-help-row-title { color: var(--primary); }
.sl-help-results { max-width: 720px; margin: 10px auto 0; display: flex; flex-direction: column; }
.sl-help-results-count { color: var(--text-3); font-size: 13px; margin: 6px 10px 10px; }

/* ── Article page: sidebar + body ── */
.sl-help-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px;
  padding-top: 28px; align-items: start;
}
.sl-help-sidenav {
  position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
  padding-right: 6px; display: flex; flex-direction: column; gap: 18px;
}
.sl-help-sidehead {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 5px;
}
.sl-help-sidelink {
  display: block; padding: 5px 8px; margin-left: -8px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 13px; text-decoration: none; line-height: 1.35;
}
.sl-help-sidelink:hover { color: var(--text); background: var(--ghost-hover); }
.sl-help-sidelink.active { color: var(--primary); font-weight: 600; background: var(--primary-dim); }

.sl-help-article { max-width: 760px; min-width: 0; }
.sl-help-crumbs { font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.sl-help-crumb-sep { margin: 0 6px; }
.sl-help-article h1 { font-size: 26px; font-weight: 800; margin: 0 0 16px; line-height: 1.2; }
.sl-help-body { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.sl-help-body p { margin: 0 0 14px; }
.sl-help-body h3 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; }
.sl-help-body ul, .sl-help-body ol { margin: 0 0 14px; padding-left: 22px; }
.sl-help-body li { margin-bottom: 7px; }
.sl-help-body li::marker { color: var(--text-3); }
.sl-help-link { color: var(--primary); text-decoration: none; }
.sl-help-link:hover { text-decoration: underline; }
.sl-help-article-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
}
.sl-help-related { color: var(--text-2); font-size: 13.5px; margin-top: 20px; }

/* ── Article atoms ── */
.sl-help-callout {
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  background: var(--surface); border-radius: var(--radius);
  padding: 13px 16px; margin: 16px 0; font-size: 13.5px; line-height: 1.55;
}
.sl-help-callout.tip { border-left-color: var(--green); }
.sl-help-callout.warn { border-left-color: var(--amber); }
.sl-help-callout-title { font-weight: 700; margin-bottom: 4px; font-size: 13.5px; }
.sl-help-callout.tip .sl-help-callout-title { color: var(--green); }
.sl-help-callout.warn .sl-help-callout-title { color: var(--amber); }

.sl-help-facts {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 16px; margin: 0 0 18px;
}
.sl-help-fact { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.sl-help-facts .sl-help-fact:last-child { border-bottom: none; }
.sl-help-body > .sl-help-fact { border-bottom: 1px solid var(--border); }
.sl-help-fact-label { flex: none; width: 170px; color: var(--text-3); font-weight: 600; }
.sl-help-fact-value { color: var(--text); min-width: 0; }
.sl-help-warn { color: var(--amber); font-weight: 600; }
.sl-help-okt { color: var(--text-3); }

.sl-help-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sl-help-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--primary-dim); color: var(--primary);
}

.sl-help-video { margin: 20px 0; }
.sl-help-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; }
.sl-help-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-help-video-cap { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }

/* ── Stage / metric list rows (generated index articles) ── */
.sl-help-stage-list {
  display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin: 16px 0;
}
.sl-help-stage-row {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.sl-help-stage-list a:last-child .sl-help-stage-row { border-bottom: none; }
.sl-help-stage-row:hover { background: var(--surface-hover); }
.sl-help-stage-num { flex: none; font-family: var(--mono); font-size: 12px; color: var(--primary); font-weight: 700; width: 26px; }
.sl-help-stage-name { flex: none; font-weight: 600; font-size: 14px; color: var(--text); min-width: 150px; }
.sl-help-stage-desc { color: var(--text-3); font-size: 12.5px; line-height: 1.4; }

/* Links that wrap row/list items shouldn't look like links. */
.sl-help-sec-list .sl-help-link, .sl-help-results .sl-help-link,
.sl-help-stage-list .sl-help-link { text-decoration: none; }
.sl-help-sec-list .sl-help-link:hover, .sl-help-results .sl-help-link:hover,
.sl-help-stage-list .sl-help-link:hover { text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sl-help-layout { grid-template-columns: 1fr; gap: 0; }
  .sl-help-sidenav { display: none; }
  .sl-help-sections { grid-template-columns: 1fr; }
  .sl-help-hero { padding: 32px 0 20px; }
  .sl-header .sl-help-search { display: none; }   /* article-page header search: desktop nicety */
  .sl-help-fact { flex-direction: column; gap: 2px; }
  .sl-help-fact-label { width: auto; }
  .sl-help-stage-name { min-width: 110px; }
}

/* ━━ Platform analytics (/platform, owners/su-only) — platform-analytics.jsx.
   Extends the .sl-analytics-* family. ━━ */
.sl-platform { max-width: 1200px; margin: 0 auto; padding: 20px 24px 48px; width: 100%; }
.sl-platform-kpirow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.sl-platform-kpi { position: relative; }
.sl-platform-kpi-sub { color: var(--text-3); font-size: 10.5px; margin-top: 3px; }
.sl-platform-warn-note { border-left: 3px solid var(--amber); margin-bottom: 14px; }

.sl-platform-spark-block { margin-top: 10px; }
.sl-platform-spark-title { font-size: 11.5px; color: var(--text-2); margin-bottom: 4px; }

.sl-platform-funnel { display: flex; flex-direction: column; gap: 7px; }
.sl-platform-funnel-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sl-platform-funnel-label { flex: none; width: 72px; color: var(--text-2); font-weight: 600; }
.sl-platform-funnel-bar {
  flex: 1; height: 16px; background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.sl-platform-funnel-fill {
  display: block; height: 100%; background: var(--primary); border-radius: 4px;
  min-width: 2px; transition: width 0.25s ease;
}
.sl-platform-funnel-n { flex: none; width: 48px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-platform-funnel-pct { flex: none; width: 110px; color: var(--text-3); font-size: 11.5px; }

/* Full-width cards (Mistakes) + two-column internals + sub-section heads. */
.sl-platform-wide { grid-column: 1 / -1; }
.sl-platform-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.sl-platform-subhead { font-size: 12px; font-weight: 700; color: var(--text-2); margin: 2px 0 6px; }
.sl-platform-subhead .sl-muted { font-weight: 400; }

@media (max-width: 720px) {
  .sl-platform { padding: 14px 14px 40px; }
  .sl-platform-funnel-pct { width: 84px; }
  .sl-platform-cols { grid-template-columns: 1fr; }
}