/* ==========================================================================
   Baddy Studio - studio.css
   --------------------------------------------------------------------------
   Complete, self-contained styling for the web Studio (AI badminton reel
   editor) in the visual language of the Diffusion Studio editor
   (TASK-098, docs/roadmap/STUDIO_PRO_UI_SPEC.md sections 1, 3, 4, 5, 6).

   Vanilla CSS, no build step. Every rule targets `.studio ...` or an element
   that only exists inside it. Chrome is monochrome plus ONE accent.

   Owner, 2026-09-21: "the editor follows a blue tint, can we keep the color
   scheme same as the landing page, the green neonish vibe". So the ONE accent
   is now the landing page's lime (--st-primary #a3e635, hover #bef264, press
   #84cc16) instead of the old #008CFF blue. The surfaces stay dark and neutral:
   only the accent moved. Lime is a LIGHT colour, so anything filled with
   --st-primary carries near-black text (--st-primary-fg #09090b), exactly like
   the landing page CTA; white on lime is unreadable.

   Baddy's in-frame content colours (shuttle, pose, court, player identity)
   still live in --st-lime / --st-cyan and are set per overlay.

   Rhythm: 28px controls, 24x28 icon buttons, 32px stage header, 36px
   timeline band, 40px section titles, 48px panel headers. Radius 6 (12 for
   menus and the floating pill). Type: Inter 11px labels, 10px captions,
   12px panel titles, weights 400-450 (500 only for the match-view stat);
   JetBrains Mono for timecode and the ruler.

   Sections, in order:
     tokens . base . icons . buttons . menus . segmented . panels . header .
     rallies panel . stage . pill + instruction + shortcuts . 3D . compose .
     right panel / inspector . export + stats . timeline . overlays (content
     colours) . match view . responsive . reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Tokens (scoped to .studio, spec section 4)
   ========================================================================== */
.studio{
  --st-bg:#121212;
  --st-canvas:#171717;
  --st-pop:#171717;
  --st-frame:#000;
  --st-line:rgba(255,255,255,.03);
  --st-line-strong:rgba(255,255,255,.06);
  --st-line-input:rgba(255,255,255,.09);
  --st-input:rgba(255,255,255,.06);
  --st-muted-bg:rgba(255,255,255,.09);
  --st-accent-bg:rgba(255,255,255,.06);
  --st-fg:#F2F2F2;
  --st-fg-muted:rgba(242,242,242,.64);
  --st-fg-dim:#666;
  /* accent: the landing page's lime neon (#a3e635 / #bef264 / #84cc16) */
  --st-primary:#a3e635;
  --st-primary-hover:#bef264;
  --st-primary-press:#84cc16;
  /* text ON a primary fill. Lime is light: near-black, like the landing CTA. */
  --st-primary-fg:#09090b;
  /* the quiet "this is on" chip: a deep lime tint carrying pale lime text */
  --st-on:#25400d;
  --st-on-fg:#d9f99d;
  /* the accent as a translucent wash, for glows, rails and tinted fills */
  --st-primary-rgb:163,230,53;
  --st-glow:0 0 20px rgba(163,230,53,.2);
  --st-danger:#E62D2D;
  --st-radius:6px;
  --st-radius-lg:12px;
  --st-ctl:28px;
  --st-icon:24px;
  --st-font:Inter,system-ui,sans-serif;
  --st-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* timeline lane background (spec section 4: lane bg #1C1C1C) */
  --st-lane:#1C1C1C;
  /* the only shadow recipe in the chrome (menus, shortcuts sheet, instruction pill) */
  --st-shadow-menu:0 0 1px 2px rgba(0,0,0,.12),0 4px 12px 8px rgba(0,0,0,.12),0 12px 16px 0 rgba(0,0,0,.16);
  /* content colours: used only inside the frame */
  --st-lime:#b7f542;
  --st-cyan:#46e3ff;
  /* layout: side-panel widths (collapsed and responsive states override) */
  --st-left-w:264px;
  --st-right-w:280px;
  /* TASK-110 AI panel: closed = two zero-width tracks, so the layout is unchanged */
  --st-chat-w:0px;
  --st-chat-gutter:0px;
}


/* ==========================================================================
   2. Base: shell grid, typography, resets, scrollbars, focus
   ========================================================================== */
.studio{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  grid-template-columns:var(--st-left-w) 1px minmax(0,1fr) 1px var(--st-right-w) var(--st-chat-gutter) var(--st-chat-w);
  grid-template-rows:40px minmax(0,1fr) 1px var(--tl-h,234px);
  min-width:0;
  min-height:0;
  background:var(--st-bg);
  color:var(--st-fg);
  font:11px/1.4 var(--st-font);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  user-select:none;
  -webkit-user-select:none;
  color-scheme:dark;
}
.studio *,.studio *::before,.studio *::after{box-sizing:border-box}
.studio>*{min-width:0;min-height:0}
.studio[hidden],.studio [hidden]{display:none!important}

/* element resets inside the Studio (nothing from shell.css / the landing page is relied on) */
.studio button{font:inherit;color:inherit;cursor:default;margin:0;text-transform:none;letter-spacing:0}
.studio a{color:inherit;text-decoration:none}
.studio input,.studio select,.studio textarea{font:inherit;color:inherit}
.studio input:not([type=checkbox]):not([type=range]),.studio textarea{user-select:text;-webkit-user-select:text}
.studio b,.studio strong{font-weight:450}
.studio i{font-style:normal}
.studio .muted{color:var(--st-fg-muted)}

/* grid placement: explicit rows/columns so DOM order cannot drift */
.st-header{grid-row:1;grid-column:1/-1}
.st-left{grid-row:2;grid-column:1}
.st-gutter-l{grid-row:2;grid-column:2}
.st-stage-col{grid-row:2;grid-column:3}
.st-gutter-r{grid-row:2;grid-column:4}
.st-right{grid-row:2;grid-column:5}
.st-tl-resize{grid-row:3;grid-column:1/6}
.timeline{grid-row:4;grid-column:1/6}
/* the AI panel runs the full height under the header, beside stage + timeline */
.st-gutter-chat{grid-row:2/5;grid-column:6}
.st-chat{grid-row:2/5;grid-column:7}
.studio.chat-open{--st-chat-w:340px;--st-chat-gutter:1px}

/* gutters are literal 1px tracks painted white 6% */
.st-gutter{background:var(--st-line-strong)}

/* collapsed side panels */
.studio.left-collapsed{--st-left-w:0px}
.studio.left-collapsed .st-left{display:none}
.studio.right-collapsed{--st-right-w:0px}
.studio.right-collapsed .st-right{display:none}

/* timeline resize track: 1px painted line with a 7px hit area */
.st-tl-resize{position:relative;z-index:41;background:var(--st-line-strong)}
.st-tl-resize::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;cursor:ns-resize}
.st-tl-resize:hover,.st-tl-resize.dragging{background:var(--st-primary)}

/* scrollbars: thin, quiet, everywhere inside the Studio */
.studio *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.studio *::-webkit-scrollbar{width:6px;height:6px}
.studio *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.studio *::-webkit-scrollbar-track{background:transparent}
.studio *::-webkit-scrollbar-corner{background:transparent}

/* focus: a 1px accent ring, never an outline glow */
.studio :is(button,a,input:not([type=range]),select,summary):focus-visible{outline:none;box-shadow:0 0 0 1px var(--st-primary)}
.studio :is(button,a,input,select,summary):focus:not(:focus-visible){outline:none}


/* ==========================================================================
   3. Icons (Lucide sprite, 24 viewBox drawn at 16px; stroke from the sprite)
   ========================================================================== */
.ic{display:block;width:16px;height:16px;flex:none;stroke:currentColor;fill:none;pointer-events:none}
.ic-sm{width:12px;height:12px}
.ic-brand{color:var(--st-primary)}


/* ==========================================================================
   4. Buttons
   ========================================================================== */
.st-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg);
  font-size:11px;
  font-weight:450;
  line-height:1;
  white-space:nowrap;
  cursor:default;
  flex:none;
  transition:background-color .12s,color .12s;
}
/* lime is light: the primary button is near-black ON lime, like the landing CTA */
.st-btn.st-btn-primary{background:var(--st-primary);color:var(--st-primary-fg);font-weight:600;box-shadow:var(--st-glow)}
.st-btn.st-btn-primary:hover{background:var(--st-primary-hover);color:var(--st-primary-fg)}
.st-btn.st-btn-primary:active{background:var(--st-primary-press);color:var(--st-primary-fg)}
.st-btn-primary:disabled{box-shadow:none}
.st-btn.st-btn-secondary{background:var(--st-accent-bg);color:var(--st-fg)}
.st-btn-secondary:hover{background:var(--st-muted-bg)}
.st-btn-secondary:active{background:rgba(102,102,102,.4)}
.st-btn-ghost{background:transparent;color:var(--st-fg)}
.st-btn-ghost:hover{background:var(--st-accent-bg)}
.st-btn-ghost:active{background:var(--st-muted-bg)}
.st-btn-link{background:transparent;color:var(--st-fg-muted);padding:0 4px}
.st-btn-link:hover{color:var(--st-fg)}
.st-btn-sm{height:24px;padding:0 8px;font-size:10px}
.st-btn-block{display:flex;width:100%}
.st-btn:disabled,.st-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
/* a disabled PRIMARY must still read: 50% of a light lime is an illegible smear */
.st-btn.st-btn-primary:disabled,.st-btn.st-btn-primary[aria-disabled="true"]{opacity:1;background:var(--st-muted-bg);color:var(--st-fg-muted);box-shadow:none}

/* 24x28 ghost icon button */
.st-ibtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:28px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg-muted);
  flex:none;
  transition:background-color .12s,color .12s;
}
.st-ibtn:hover{color:var(--st-fg);background:var(--st-accent-bg)}
.st-ibtn.active,.st-ibtn.on{color:var(--st-fg);background:var(--st-muted-bg)}
.st-ibtn:disabled{opacity:.4;pointer-events:none}

/* 28x28 tool button (floating pill) */
.st-tool{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg-muted);
  flex:none;
  white-space:nowrap;
  transition:background-color .12s,color .12s;
}
.st-tool:hover{color:var(--st-fg);background:var(--st-accent-bg)}
.st-tool.on{color:var(--st-fg);background:var(--st-muted-bg)}
.st-tool.active{color:var(--st-primary-fg);background:var(--st-primary)}
.st-tool.active:hover{background:var(--st-primary-hover);color:var(--st-primary-fg)}
.st-tool-text{width:auto;padding:0 8px;font-size:11px;font-weight:450}
.st-tool:disabled{opacity:.4;pointer-events:none}

/* landing-page `.btn` that app.js still emits inside the inspector: restyled as a small secondary */
.studio .btn{
  all:unset;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:24px;
  padding:0 8px;
  border-radius:6px;
  background:var(--st-accent-bg);
  color:var(--st-fg);
  font-size:10px;
  font-weight:450;
  line-height:1;
  white-space:nowrap;
  cursor:default;
}
.studio .btn:hover{background:var(--st-muted-bg)}
.studio .btn:disabled{opacity:.5;pointer-events:none}
.studio .btn-ghost{background:transparent}
.studio .btn-ghost:hover{background:var(--st-accent-bg)}


/* ==========================================================================
   5. Menus + kbd
   ========================================================================== */
.st-menu{position:relative;display:inline-flex}
.st-menu-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:200;
  min-width:184px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--st-pop);
  border:1px solid var(--st-line);
  border-radius:12px;
  box-shadow:var(--st-shadow-menu);
}
.st-menu-panel.st-menu-left{left:0;right:auto}
.st-menu-panel.st-menu-up{top:auto;bottom:calc(100% + 6px)}
/* the speed menu lives at the left edge of the 200px label column: open it left-aligned */
#speedToggle{left:0;right:auto;min-width:96px}
.st-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  height:28px;
  padding:0 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg);
  font-size:11px;
  font-weight:400;
  text-align:left;
  white-space:nowrap;
  cursor:default;
}
.st-menu-item kbd{margin-left:auto}
.st-menu-item.active:not(.st-check){background:var(--st-accent-bg)}
.st-menu-item.danger{color:var(--st-danger)}
.st-menu-item:hover{background:var(--st-primary);color:var(--st-primary-fg)}
.st-menu-item:hover kbd{color:rgba(9,9,11,.7);background:rgba(9,9,11,.12)}
.st-menu-item:disabled{opacity:.5;pointer-events:none}
.st-menu-item[hidden]{display:none}
/* check items reserve a 16px slot at the left; the check is an inline SVG mask */
.st-check{padding-left:28px;position:relative}
.st-check.active::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:12px;
  height:12px;
  margin-top:-6px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.st-menu-sep{height:1px;margin:4px 0;background:var(--st-line-strong);flex:none}
/* an open menu lifts its trigger (reference: data-expanded -> bg-accent) */
.st-menu:has(>.st-menu-panel:not([hidden]))>.st-menu-trigger{color:var(--st-fg);background:var(--st-accent-bg)}

.studio kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  min-width:18px;
  padding:0 4px;
  border-radius:4px;
  background:var(--st-muted-bg);
  color:var(--st-fg-muted);
  font:400 10px/1 var(--st-font);
  white-space:nowrap;
}


/* ==========================================================================
   6. Segmented control
   ========================================================================== */
.st-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:8px;background:var(--st-muted-bg);flex:none}
.st-seg button{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg-muted);
  font-size:11px;
  font-weight:450;
  white-space:nowrap;
  transition:color .12s;
}
.st-seg button:hover{color:var(--st-fg)}
.st-seg button.active{background:#121212;color:var(--st-fg);box-shadow:0 0 0 1px var(--st-line-input)}
/* the view the 3D renderer sits over: ringed, not filled */
.st-seg button.st-seg-origin{color:var(--st-fg-muted);background:transparent;box-shadow:0 0 0 1px var(--st-line-input)}
.st-seg button span{margin-left:4px;font-size:10px;font-weight:400;color:var(--st-fg-muted)}
.st-seg button:disabled{opacity:.4;pointer-events:none}
.st-seg-sm button{height:20px;padding:0 6px;font-size:10px}


/* ==========================================================================
   7. Panels (left + right)
   ========================================================================== */
.st-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0;min-width:0;background:var(--st-bg)}
.st-panel-head{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;border-bottom:1px solid var(--st-line-strong);flex:none;min-width:0}
.st-panel-title{font-size:12px;font-weight:450;color:var(--st-fg);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.st-count{margin-left:4px;font-size:11px;font-weight:400;color:var(--st-fg-muted)}
.st-panel-actions{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.st-panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.rp-pane,.lp-pane{display:none}
.rp-pane.active,.lp-pane.active{display:block}
.st-panel-actions[hidden]{display:none}
.st-tabs .st-count{margin-left:2px;font-size:10px;font-variant-numeric:tabular-nums}
#lpTabs{flex:1 1 auto;overflow:hidden}
.st-status{
  flex:none;
  min-height:28px;
  max-height:44px;        /* two lines, hard: a long message used to grow over the layer list */
  padding:6px 12px;
  border-top:1px solid var(--st-line-strong);
  font-size:10px;
  line-height:1.35;
  color:var(--st-fg-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.st-status:empty{display:none}


/* ==========================================================================
   8. Header (40px): identity + lifecycle
   ========================================================================== */
.st-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:40px;padding:0 8px;background:var(--st-bg);border-bottom:1px solid var(--st-line-strong);min-width:0}
.st-h-left{display:flex;align-items:center;min-width:0}
.st-h-centre{display:flex;align-items:center;justify-content:center;gap:6px}
.st-h-right{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.st-project{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  max-width:100%;
  padding:0 8px 0 6px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg-muted);
  font-size:11px;
  font-weight:450;
  white-space:nowrap;
  transition:background-color .12s,color .12s;
}
.st-project:hover{background:var(--st-accent-bg);color:var(--st-fg)}
.st-project .ic-brand{color:var(--st-primary)}
.st-project-name{max-width:320px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-dirty{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-size:11px;color:var(--st-fg-muted);white-space:nowrap}
.st-dirty i{display:block;width:6px;height:6px;border-radius:50%;background:var(--st-primary);flex:none}
.st-dirty.danger{color:var(--st-danger)}
.st-dirty.danger i{background:var(--st-danger)}


/* TASK-124: menus escape timeline clipping but keep Studio's theme. */
.studio .st-menu-panel.st-menu-floating{position:fixed;right:auto;bottom:auto;z-index:250;max-height:calc(100dvh - 56px);overflow-y:auto}
.st-dirty{border:0;background:transparent;cursor:pointer;padding:5px 7px;border-radius:6px;font-family:inherit}
.st-dirty:hover,.st-dirty[aria-expanded="true"]{background:var(--st-accent-bg);color:var(--st-fg)}
.st-changes-panel{width:min(360px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
.st-changes-heading{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-size:12px;color:var(--st-fg)}
.st-changes-note{padding:4px 8px 8px;font-size:11px;line-height:1.5;color:var(--st-fg-muted)}
.st-change-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:normal;text-align:left}
.st-change-row small{font-size:11px;font-weight:400;line-height:1.4;opacity:.8}
.studio #toolBlade[hidden]{display:none}
.blade-selection-label{color:var(--st-primary);margin-bottom:8px}


/* ==========================================================================
   9. Rallies panel (rows built by app.js renderRallyStrip)
   ========================================================================== */
.rally-strip{display:flex;flex-direction:column;gap:2px;padding:8px}
.rally-strip:empty::after{content:"No rallies detected in this recording.";display:block;padding:24px 12px;color:var(--st-fg-muted);font-size:11px;text-align:center}
.rcard{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:6px;
  background:transparent;
  cursor:default;
  transition:background-color .12s,opacity .15s;
}
.rcard:hover{background:var(--st-accent-bg)}
.rcard.active{background:var(--st-muted-bg);box-shadow:inset 0 0 0 1px var(--st-primary)}
.rcard.off{opacity:.5}
.rcard.rcard-excluded{opacity:.4}
.rcard.rcard-excluded .rcard-note{text-decoration:line-through}
.rcard.rcard-dim{opacity:.3}
.rcard.busy{box-shadow:inset 0 0 0 1px rgba(var(--st-primary-rgb),.5)}
.rcard.dragging{opacity:.45}
.rcard.rcard-hidden{display:none}
.rcard-thumb{display:block;width:64px;height:36px;border-radius:4px;background:#000;object-fit:cover;pointer-events:none}
.rcard-grip{display:none}
.rcard-body{min-width:0}
.rcard-top{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;color:var(--st-fg)}
.rcard-top b{font-weight:450;white-space:nowrap}
.rcard-t{font-family:var(--st-mono);font-size:10px;color:var(--st-fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rcard-dur{margin-left:auto;font-size:10px;color:var(--st-fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rcard-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--st-fg-dim)}
.rcard-dot.ok{background:rgba(52,239,68,.7)}
.rcard-dot.warn{background:rgba(245,205,71,.7)}
.rcard-note{margin-top:1px;font-size:10px;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;min-height:0;font-size:10px;color:var(--st-fg-muted)}
.rcard-q,.rcard-shots,.rcard-trim,.rcard-state{color:var(--st-fg-muted);white-space:nowrap}
.rcard-unrendered{color:rgba(245,205,71,.8)}
.rcard-qa.ok{color:var(--st-accent,#c6f432)}.rcard-qa.warn{color:rgba(245,205,71,.9)}
.rcard-stars{display:flex;gap:1px;margin-top:2px;opacity:0;transition:opacity .12s}
.rcard:hover .rcard-stars,.rcard.active .rcard-stars{opacity:1}
/* the same stars inside the inspector are always visible */
.rcard-stars.st-stars{opacity:1;margin-top:0;font-size:14px}
.rcard-stars.st-stars .rstar{font-size:14px}
/* empty camera lane: the state, not a block */
.lane-empty{position:absolute;left:8px;top:0;bottom:0;display:flex;align-items:center;font-size:10px;color:var(--st-fg-muted);pointer-events:none}
.kf-mark.dim{opacity:.45}
.rstar{padding:0;border:0;background:none;font-size:12px;line-height:1;color:var(--st-fg-muted);cursor:default;transition:color .12s}
.rstar.on{color:var(--st-fg)}
.rstar:hover{color:var(--st-fg)}
.rcard-stars:hover .rstar{color:var(--st-fg)}
.rcard-stars .rstar:hover~.rstar{color:var(--st-fg-muted)}
.rcard-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rcard-check{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:default}
.rcard-check input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--st-primary);cursor:default}
.rcard-kebab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:28px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg-muted);
  opacity:0;
  transition:opacity .12s,background-color .12s,color .12s;
}
.rcard-kebab:hover{color:var(--st-fg);background:var(--st-accent-bg)}
.rcard:hover .rcard-kebab,
.rcard.active .rcard-kebab,
.st-menu:has(.st-menu-panel:not([hidden])) .rcard-kebab{opacity:1}
.rcard-menu{right:0}
.schip,.coach-pill{
  display:inline-flex;
  align-items:center;
  height:16px;
  padding:0 5px;
  border-radius:4px;
  background:var(--st-accent-bg);
  color:var(--st-fg-muted);
  font-size:9px;
  font-weight:450;
  font-style:normal;
  line-height:1;
  white-space:nowrap;
}
.rcard-chips{display:inline-flex;flex-wrap:wrap;gap:3px}
.rally-strip.flash .rcard{animation:st-rcard-flash 1.2s ease-out 1}
@keyframes st-rcard-flash{
  0%{box-shadow:inset 0 0 0 1px var(--st-primary)}
  100%{box-shadow:inset 0 0 0 1px transparent}
}
/* .rcard-toggle is the in-reel checkbox; .rcard-regen / .rcard-strike are menu items (see .st-menu-item). */


/* ==========================================================================
   9b. Layers panel (TASK-107): one row per layer — icon, name + summary, state
       chip, and a show/hide eye on overlay layers. Click = that layer's settings.
   ========================================================================== */
.layer-list{display:flex;flex-direction:column;gap:2px;padding:8px}
.layer-row{
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto 24px;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:4px 4px 4px 8px;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg);
  cursor:default;
  transition:background-color .12s;
}
.layer-row:hover{background:var(--st-accent-bg)}
.layer-row.active{background:var(--st-muted-bg);box-shadow:inset 0 0 0 1px var(--st-primary)}
.layer-ico{width:16px;height:16px;color:var(--st-fg-muted);justify-self:center}
.layer-row.active .layer-ico,.layer-row:hover .layer-ico{color:var(--st-fg)}
.layer-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.layer-text b{font-size:11px;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-text span{font-size:10px;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-state{
  display:inline-flex;
  align-items:center;
  height:16px;
  padding:0 5px;
  border-radius:4px;
  background:var(--st-accent-bg);
  color:var(--st-fg-muted);
  font-size:9px;
  font-weight:450;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.layer-state.ls-on,.layer-state.ls-live,.layer-state.ls-edited{background:var(--st-on);color:var(--st-on-fg)}
.layer-state.ls-fix{background:rgba(245,205,71,.14);color:rgba(245,205,71,.9)}
.layer-eye{width:24px;height:24px;color:var(--st-fg-dim)}
.layer-eye.on{color:var(--st-fg-muted)}
.layer-eye:hover{color:var(--st-fg)}
.layer-eye-slot{display:block;width:24px;height:24px}


/* ==========================================================================
   10. Stage column: 32px header + monitor
   ========================================================================== */
.st-stage-col{display:grid;grid-template-rows:32px minmax(0,1fr) 12px;min-height:0;min-width:0;background:var(--st-canvas)}
/* label | view switch | right cluster: the cluster track grows to its content and the label track yields,
   so the switch stays centred whenever there is room and nothing overlaps when there is not */
.st-stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;gap:8px;padding:0 16px;min-width:0}
.st-stage-label{min-width:0;font-size:11px;color:var(--st-fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-stage-head>.st-seg,.st-stage-centre{justify-self:center}
/* view switch + preview aspect (TASK-107) */
.st-stage-centre{display:flex;align-items:center;gap:8px;min-width:0}
/* right cluster: tracks can shrink, so overflow (if any) runs right under the panel, never over the view switch */
.st-stage-right{display:flex;align-items:center;justify-content:flex-end;justify-content:safe flex-end;gap:8px;min-width:0}
.st-stage-right #timelineZoom{width:110px;flex:none}
.tl-zoomval{min-width:36px;font-family:var(--st-mono);font-size:10px;color:var(--st-fg-muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-stage{position:relative;overflow:hidden;display:grid;place-items:center;min-height:0;min-width:0;background:var(--st-canvas)}
.st-stage.tool-hand,.st-stage.space-hand{cursor:grab}
/* the frame while the other file buffers: a quiet plate, not a black hole */
.st-stage.stage-loading .stage-frame{background:#101010}
.st-stage.stage-loading .stage-frame video{opacity:0}
.st-stage.panning{cursor:grabbing}
.st-stage.tool-select .stage-frame.selected{cursor:move}
/* Framing layer: the frame is the handle (TASK-107) */
.st-stage.tool-select.layer-framing .stage-frame,.st-stage.tool-select.layer-framing .stage-frame.selected{cursor:grab}
.st-stage.framing-drag .stage-frame,.st-stage.tool-select.framing-drag .stage-frame.selected{cursor:grabbing}
/* the frame: black plate, hairline ring, no glow. The JS sets inline width/height
   once it computes fit; this is the CSS fallback size. */
.stage-frame{
  position:relative;
  height:calc(100% - 104px);
  max-width:calc(100% - 48px);
  aspect-ratio:var(--stage-ar,9/16);
  background:var(--st-frame);
  border-radius:2px;
  box-shadow:0 0 0 1px var(--st-line-strong);
  overflow:hidden;
  transform-origin:center;
  will-change:transform;
}
.stage-frame.selected{box-shadow:0 0 0 1px var(--st-primary)}
.stage-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.st-frame-handles{position:absolute;inset:0;pointer-events:none}
.st-frame-handles i{position:absolute;width:8px;height:8px;background:#F2F2F2;border:1px solid var(--st-primary)}
.st-frame-handles i:nth-child(1){left:-4px;top:-4px}
.st-frame-handles i:nth-child(2){right:-4px;top:-4px}
.st-frame-handles i:nth-child(3){left:-4px;bottom:-4px}
.st-frame-handles i:nth-child(4){right:-4px;bottom:-4px}
.st-frame-handles[hidden]{display:none}


/* ==========================================================================
   11. Floating pill, instruction pill, shortcuts sheet
   ========================================================================== */
.st-pill{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid var(--st-line-strong);
  border-radius:12px;
  background:var(--st-bg);
  white-space:nowrap;
}
.st-pill-group{display:flex;align-items:center;gap:4px}
.st-pill-sep{display:block;width:1px;height:20px;background:var(--st-line-strong);flex:none}
.st-pill [hidden]{display:none}

.st-instr,.compose-hint{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  z-index:6;
  max-width:70%;
  height:28px;
  padding:0 12px;
  border:1px solid var(--st-line-strong);
  border-radius:999px;
  background:var(--st-pop);
  color:var(--st-fg);
  font-size:11px;
  line-height:26px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:var(--st-shadow-menu);
  pointer-events:none;
}
.st-instr:empty,#tpHint:empty{display:none}
.compose-hint{top:auto;bottom:64px}

.st-shortcuts{
  position:absolute;
  left:50%;
  top:44px;
  transform:translateX(-50%);
  z-index:20;
  width:440px;
  max-width:calc(100% - 32px);
  max-height:calc(100% - 88px);
  overflow:auto;
  border:1px solid var(--st-line-strong);
  border-radius:12px;
  background:var(--st-pop);
  box-shadow:var(--st-shadow-menu);
}
.st-shortcuts-head{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:40px;
  padding:0 12px;
  border-bottom:1px solid var(--st-line-strong);
  background:var(--st-pop);
  font-size:11px;
  font-weight:450;
}
.st-shortcuts-grid{display:grid;grid-template-columns:1fr max-content;gap:6px 12px;align-items:center;padding:12px;font-size:11px}
.st-shortcuts-grid span{color:var(--st-fg-muted)}
.st-shortcuts-grid em{display:inline-flex;align-items:center;gap:4px;font-style:normal;justify-self:end}
.st-shortcuts-grid i{font-style:normal;font-size:10px;color:var(--st-fg-muted)}


/* ==========================================================================
   12. 3D replay (floating card by default; fills the stage in .view-r3d)
   ========================================================================== */
.replay3d{
  position:absolute;
  right:14px;
  top:14px;
  /* TASK-107: as a floating panel it sits BESIDE the 9:16 frame (the stage's free
     right third) instead of over it; the corner button expands it over the stage */
  width:min(34%,300px);
  height:min(64%,380px);
  z-index:8;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--st-pop);
  border:1px solid var(--st-line-strong);
  border-radius:8px;
}
.replay3d.expanded{left:14px;bottom:72px;width:auto;height:auto}
.replay3d:not(.expanded) .r3d-bar .muted,.replay3d:not(.expanded) .r3d-bar b{display:none}
.replay3d:not(.expanded) .r3d-bar{padding:0 6px}
.replay3d:not(.expanded) .r3d-views{margin-left:0;flex:1 1 auto;justify-content:space-between}
.replay3d:not(.expanded) .r3d-views button:not([data-r3d-expand]){padding:0 6px}
.r3d-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-bottom:1px solid var(--st-line-strong);font-size:11px;color:var(--st-fg);flex:none;min-width:0}
.r3d-bar b{font-weight:450;letter-spacing:0;white-space:nowrap}
.r3d-bar .muted{font-size:10px;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r3d-views{margin-left:auto;display:flex;gap:4px;flex:none}
.r3d-views button{height:24px;padding:0 8px;border:0;border-radius:6px;background:var(--st-accent-bg);color:var(--st-fg);font-size:10px;font-weight:450;white-space:nowrap}
.r3d-views button:hover{background:var(--st-muted-bg)}
.r3d-views button.active{background:var(--st-on);color:var(--st-on-fg)}
.r3d-views [data-r3d-expand]{display:inline-flex;align-items:center;justify-content:center;width:24px;padding:0;color:var(--st-fg-muted)}
.r3d-views [data-r3d-expand]:hover{color:var(--st-fg)}
.replay3d canvas{flex:1 1 auto;display:block;width:100%;min-height:0;cursor:grab;touch-action:none}
.replay3d canvas:active{cursor:grabbing}
.studio.view-r3d .replay3d,.studio.view-r3d .replay3d.expanded{inset:0;width:auto;height:auto;border:0;border-radius:0;z-index:8}
.studio.view-r3d .stage-frame{opacity:0}
.studio.view-r3d .r3d-views{display:none}
.studio.view-r3d .replay3d .r3d-bar b,.studio.view-r3d .replay3d .r3d-bar .muted{display:inline}
.studio.view-r3d .replay3d .r3d-bar{padding:0 10px}
.studio.view-r3d #stEyes,.studio.view-r3d #centerShuttle,.studio.view-r3d #courtDrawPill{display:none}


/* ==========================================================================
   13. Compose (Labs): node canvas + clip library over the dimmed frame
   ========================================================================== */
.studio.mode-compose .stage-frame{opacity:.35;pointer-events:none}
.canvas-nodes{position:absolute;inset:0;transform-origin:center;pointer-events:none}
.canvas-nodes .clip-node{pointer-events:auto}
.clip-node{position:absolute;width:172px;cursor:grab;user-select:none}
.clip-node.dragging{z-index:5;cursor:grabbing}
.clip-node-thumb{position:relative;width:172px;height:97px;border-radius:6px;background:#0c0e13 center/cover no-repeat;border:1px solid var(--st-line-input);transition:border-color .12s}
.clip-node:hover .clip-node-thumb,.clip-node.dragging .clip-node-thumb{border-color:var(--st-primary)}
.clip-node-kind{
  position:absolute;
  left:6px;
  top:6px;
  height:16px;
  padding:0 5px;
  border-radius:4px;
  background:var(--st-muted-bg);
  color:var(--st-fg-muted);
  font-size:9px;
  font-weight:450;
  line-height:16px;
}
.clip-node-x{
  position:absolute;
  right:5px;
  top:5px;
  width:18px;
  height:18px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  color:var(--st-fg);
  font-size:12px;
  line-height:18px;
  display:none;
}
.clip-node:hover .clip-node-x{display:block}
.clip-node-label{margin-top:4px;font-size:10px;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip-library{
  position:absolute;
  left:14px;
  top:14px;
  z-index:6;
  width:220px;
  max-height:calc(100% - 28px);
  overflow:auto;
  padding:8px;
  background:var(--st-pop);
  border:1px solid var(--st-line-strong);
  border-radius:12px;
}
.clip-library-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:6px;font-size:11px;font-weight:450;color:var(--st-fg)}
.clip-library-head .muted{font-size:10px;font-weight:400;color:var(--st-fg-muted)}
.clip-library-list{display:flex;flex-direction:column;gap:4px}
.lib-clip{display:flex;align-items:center;gap:8px;width:100%;padding:4px;border:0;border-radius:6px;background:transparent;color:var(--st-fg);text-align:left}
.lib-clip:hover{background:var(--st-accent-bg)}
.lib-thumb{width:42px;height:26px;border-radius:4px;background:#000 center/cover no-repeat;flex:none}
.lib-label{min-width:0}
.lib-label b{display:block;font-size:11px;font-weight:450;color:var(--st-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-label span{font-size:9px;color:var(--st-fg-muted)}
/* drag ghost: appended to <body> by the JS, so it uses literal values (no .studio tokens) */
.lib-ghost{
  position:fixed;
  z-index:300;
  pointer-events:none;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px;
  background:#171717;
  color:#F2F2F2;
  font:450 10px/1.4 Inter,system-ui,sans-serif;
  white-space:nowrap;
  box-shadow:0 0 1px 2px rgba(0,0,0,.12),0 4px 12px 8px rgba(0,0,0,.12),0 12px 16px 0 rgba(0,0,0,.16);
}


/* ==========================================================================
   14. Right panel: tabs, zoom menu, inspector sections + controls
   ========================================================================== */
.st-tabs{display:flex;align-items:center;gap:12px;min-width:0}
.st-tabs button{height:28px;padding:0;border:0;background:none;color:var(--st-fg-muted);font-size:12px;font-weight:450;white-space:nowrap;transition:color .12s}
.st-tabs button:hover,.st-tabs button.active{color:var(--st-fg)}
.st-zoom{margin-left:auto;flex:none}
.st-zoom-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:28px;
  padding:0 4px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--st-fg-muted);
  font-size:11px;
  font-weight:450;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.st-zoom-btn:hover{color:var(--st-fg)}

.inspector-head{
  display:flex;
  align-items:center;
  height:40px;
  padding:0 16px;
  border-bottom:1px solid var(--st-line);
  font-size:11px;
  font-weight:450;
  color:var(--st-fg);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inspector-head:has(>span:empty){display:none}
.inspector-panel{padding:0 0 12px}

/* PanelSection: 40px title row on a hairline, 16px gutters, 8px body gap, 12px bottom */
.control-group,.st-section{display:flex;flex-direction:column;gap:8px;padding:0 16px 12px;border-top:1px solid var(--st-line);min-width:0}
.inspector-panel>.control-group:first-child,.rp-pane>.st-section:first-child{border-top:0}
.control-title,.st-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  height:40px;
  margin:0 0 -8px;
  font-size:11px;
  font-weight:450;
  color:var(--st-fg);
  flex:none;
  min-width:0;
}
.control-title>span:first-child,.st-section-head>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.control-title>span+span,.st-section-sub{font-size:10px;font-weight:400;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-section-body{display:flex;flex-direction:column;gap:8px;min-width:0}

/* ControlRow: 64px muted label, content fills */
.control-row{display:flex;align-items:center;gap:8px;min-height:28px;min-width:0}
.control-row>label:not(.st-switch),.control-row>span:first-child{width:64px;flex:none;font-size:11px;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.control-row>span:not(:first-child){min-width:0;font-size:11px;color:var(--st-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.control-row input[type=range]{flex:1 1 auto;min-width:0}
.control-hint,.st-hint{font-size:10px;line-height:1.45;color:var(--st-fg-muted)}
.rp-empty{padding:8px 0;font-size:11px;line-height:1.45;color:var(--st-fg-muted)}
.rp-empty .st-btn{margin-left:8px;vertical-align:middle}

/* DS slider (shared by the inspector rows and the stage-header timeline zoom):
   4px white-9% track, 12px foreground thumb with a 1px #121212 border. The input
   box is 16px tall for a usable hit area; only the track is painted. */
.studio input[type=range]{-webkit-appearance:none;appearance:none;width:auto;height:16px;margin:0;padding:0;border:0;background:transparent;outline:0;cursor:default}
.studio input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--st-muted-bg)}
.studio input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  width:12px;
  height:12px;
  margin-top:-4px;
  border-radius:50%;
  background:#F2F2F2;
  border:1px solid #121212;
}
.studio input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--st-muted-bg)}
.studio input[type=range]::-moz-range-thumb{box-sizing:border-box;width:12px;height:12px;border-radius:50%;background:#F2F2F2;border:1px solid #121212}
.studio input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(242,242,242,.2)}
.studio input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(242,242,242,.2)}
.studio input[type=range]:disabled{opacity:.4}

/* DS checkbox: 16px, accent */
.studio input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--st-primary);cursor:default;flex:none}

/* DS switch 32x18: <label class="st-switch"><input type="checkbox"><span class="st-switch-track"></span>Label</label> */
.st-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:default;font-size:11px;color:var(--st-fg)}
.st-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.st-switch-track{position:relative;display:block;width:32px;height:18px;border-radius:999px;background:var(--st-accent-bg);flex:none;transition:background-color .15s}
.st-switch-track::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#F2F2F2;transition:transform .15s}
.st-switch input:checked+.st-switch-track{background:var(--st-primary)}
.st-switch input:checked+.st-switch-track::after{transform:translateX(14px);background:var(--st-primary-fg)}
.st-switch input:focus-visible+.st-switch-track{box-shadow:0 0 0 1px var(--st-primary)}
.st-switch input:disabled+.st-switch-track{opacity:.5}

/* slider read-out at the end of a control row */
.control-row>.st-num{width:36px;flex:none;font-family:var(--st-mono);font-size:10px;color:var(--st-fg-muted);text-align:right;font-variant-numeric:tabular-nums}
.control-title .st-switch{font-size:10px;font-weight:400;color:var(--st-fg-muted);flex:none}
.control-title .st-btn{flex:none}

/* colour swatches (Shuttle FX): content colours, so they are the one place chrome shows hue */
.st-swatch-row{align-items:flex-start}
.st-swatch-row>label:first-child{line-height:24px}
.st-swatches{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.st-swatch{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--sw,#b7f542);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  cursor:default;
  transition:transform .12s;
}
.st-swatch:hover{transform:scale(1.1)}
.st-swatch.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 2px var(--st-bg),0 0 0 3px var(--st-primary)}
.st-swatch-auto{background:var(--st-accent-bg);color:var(--st-fg-muted);font-size:10px;font-weight:450;box-shadow:inset 0 0 0 1px var(--st-line-input)}
.st-swatch-custom{background:conic-gradient(#ff5a5a,#ffd166,#b7f542,#46e3ff,#b388ff,#ff7ac6,#ff5a5a);overflow:hidden}
.st-swatch-custom.active{background:var(--sw)}
.st-swatch-custom input[type=color]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;border:0;opacity:0;cursor:default}
.st-swatch-chip{width:12px!important;height:12px;flex:none;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}

/* choice chips (presets, targets, styles) */
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-preset-row{display:flex;flex-wrap:wrap;gap:6px}
.choice-btn{
  display:block;
  height:28px;
  min-width:0;
  padding:0 8px;
  border:0;
  border-radius:6px;
  background:var(--st-accent-bg);
  color:var(--st-fg-muted);
  font-size:11px;
  font-weight:450;
  line-height:28px;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:default;
  transition:background-color .12s,color .12s;
}
.choice-btn:hover{background:var(--st-muted-bg);color:var(--st-fg)}
.choice-btn.active{background:var(--st-on);color:var(--st-on-fg)}
.choice-btn.active:hover{background:#092F4E}
.choice-btn:disabled{opacity:.5;pointer-events:none}

/* soundtrack picker (TASK-109) */
.st-tracks{display:flex;flex-direction:column;gap:2px;max-height:250px;overflow:auto}
.st-track{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;cursor:default;transition:background-color .12s}
.st-track:hover{background:var(--st-accent-bg)}
.st-track.active{background:var(--st-muted-bg);box-shadow:inset 0 0 0 1px var(--st-primary)}
.st-track-text{display:flex;flex-direction:column;min-width:0}
.st-track-text b{font-size:11px;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-track-text span{font-size:10px;color:var(--st-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-track-bpm{font-size:10px;color:var(--st-fg-dim);font-variant-numeric:tabular-nums}
.st-track-play{width:24px;height:24px;color:var(--st-fg-muted)}
.st-track.active .st-track-play,.st-track:hover .st-track-play{color:var(--st-fg)}

/* metrics, keyframe list, shot list controls, heatmaps */
.metric-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.metric{padding:8px;border-radius:6px;background:var(--st-accent-bg);min-width:0}
.metric b{display:block;font-size:14px;font-weight:450;line-height:1.2;color:var(--st-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric span{display:block;margin-top:2px;font-size:10px;color:var(--st-fg-muted)}
.kf-list{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto}
.kf-item{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:6px;font-size:11px;color:var(--st-fg);cursor:default;flex:none}
.kf-item:hover{background:var(--st-accent-bg)}
.kf-item.active{background:var(--st-muted-bg);box-shadow:inset 0 0 0 1px var(--st-primary)}
.kf-t{min-width:40px;font-family:var(--st-mono);font-size:10px;color:var(--st-fg-muted);font-variant-numeric:tabular-nums}
.kf-tgt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-tgt b{font-weight:450}
.kf-del{padding:0;border:0;background:none;font-size:16px;line-height:1;color:var(--st-fg-muted);cursor:default}
.kf-del:hover{color:var(--st-danger)}
/* shot rows: read-out line + a line of correction controls */
.kf-item.shot-row{display:grid;grid-template-columns:40px minmax(0,1fr);row-gap:2px;height:auto;padding:5px 8px}
.kf-item.shot-row .shot-fixes{grid-column:2;display:flex;align-items:center;gap:8px;min-width:0}
.shot-list{max-height:260px}
select.shot-fix{height:24px;max-width:100%;padding:0 6px;border:0;border-radius:6px;background:var(--st-accent-bg);color:var(--st-fg);font-size:10px;appearance:auto}
select.shot-fix:hover{background:var(--st-muted-bg)}
button.shot-flag,.btn-link{padding:0;border:0;background:none;font-size:10px;color:var(--st-fg-muted);cursor:default}
button.shot-flag:hover,.btn-link:hover{color:var(--st-fg);text-decoration:underline}
.heatmap-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.heatmap-cell{position:relative;display:grid;place-items:center;padding:6px;border-radius:6px;background:var(--st-accent-bg)}
.heatmap-cell canvas{display:block;width:100%;height:auto;border-radius:4px}
.heatmap-label{position:absolute;top:8px;left:9px;font-size:9px;font-weight:450;text-shadow:0 1px 2px rgba(0,0,0,.8)}
/* player identity colours: content, they match the pose palette inside the frame */
.heatmap-label.hp0{color:#46e3ff}
.heatmap-label.hp1{color:#ff7ac6}
.heatmap-label.hp2{color:#ffd166}
.heatmap-label.hp3{color:#b388ff}
.ana-shot-mix{display:flex;flex-wrap:wrap;gap:4px}
.ana-rally .metric-list{margin-bottom:4px}


/* ==========================================================================
   15. Export tab + Stats diagnostics
   ========================================================================== */
.st-kv>div{display:flex;justify-content:space-between;align-items:center;gap:8px;height:24px;font-size:11px}
.st-kv>div span{color:var(--st-fg-muted)}
.st-kv>div b{font-weight:450;color:var(--st-fg);text-align:right}
.st-details{border-top:1px solid var(--st-line)}
.st-details summary{
  display:flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 16px;
  font-size:11px;
  font-weight:450;
  color:var(--st-fg-muted);
  cursor:default;
  list-style:none;
  transition:color .12s;
}
.st-details summary::-webkit-details-marker{display:none}
.st-details summary::before{
  content:"";
  width:12px;
  height:12px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .12s;
}
.st-details[open]>summary::before{transform:rotate(90deg)}
.st-details summary:hover,.st-details[open]>summary{color:var(--st-fg)}
.coachbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 16px 12px;font-size:10px;color:var(--st-fg-muted)}
.coachbar span{white-space:nowrap}
.coach-pill.ok{color:var(--st-fg)}
.coachbar .coach-main{width:100%;font-size:11px;line-height:1.35;color:var(--st-fg);white-space:normal}
.coachbar .coach-note{width:100%;font-size:10px;line-height:1.35;color:var(--st-fg-muted);white-space:normal}
.coach-metric{color:var(--st-fg-muted)}
.coach-metric.warn{color:rgba(245,205,71,.85)}


/* ==========================================================================
   16. Timeline: one 36px band (transport | ruler), label column 200px, lanes
   ========================================================================== */
.timeline{
  position:relative;
  z-index:40;             /* wins hit-testing over the transformed stage frame */
  display:grid;
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
  min-height:0;
  background:var(--st-lane);
}
.timeline-grid{display:grid;grid-template-columns:200px minmax(0,1fr);height:100%;min-height:0}

/* label column: transport header + track rows (JS translates .tl-rows with the board's scrollTop) */
.track-labels{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--st-bg);border-right:1px solid var(--st-line-strong)}
.tl-transport{display:flex;align-items:center;gap:2px;height:36px;padding:0 6px;border-bottom:1px solid var(--st-line-strong);flex:none;min-width:0;overflow:hidden}
.tp-time{padding:0 6px;font-family:var(--st-mono);font-size:11px;font-weight:300;color:var(--st-fg);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;white-space:nowrap}
#tpSpeed{min-width:0;padding:0 6px;font-variant-numeric:tabular-nums}
.tl-meta{font-size:10px;color:var(--st-fg-muted);white-space:nowrap}
.tl-rows{flex:1 1 auto;min-height:0;will-change:transform}
.track-label{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 6px 0 4px;
  border-bottom:1px solid var(--st-line);
  font-size:11px;
  color:var(--st-fg);
  cursor:default;
  min-width:0;
  transition:background-color .12s;
}
.track-label:hover{background:var(--st-accent-bg)}
.track-label.active{background:var(--st-accent-bg)}
.track-label.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--st-primary)}
.track-label.tl-toggle{cursor:default}
.track-label.tl-off .tl-name,.track-label.is-hidden .tl-name{opacity:.5}
.tl-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-n{margin-left:auto;font-family:var(--st-mono);font-size:10px;color:var(--st-fg-muted);font-variant-numeric:tabular-nums;flex:none}
.tl-ico,.tl-sw{display:none}
/* overlay tracks: show/hide on the header itself (TASK-107) */
.tl-eye{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--st-fg-muted);flex:none}
.tl-eye:hover{background:var(--st-muted-bg);color:var(--st-fg)}
.track-label.is-hidden .tl-eye{color:var(--st-fg-dim)}

/* board: scrolls both axes; the ruler is sticky in the same 36px band as the transport */
.timeline-board{position:relative;overflow:auto;min-width:0;min-height:0;background:var(--st-lane);cursor:default}
.timeline-board .lane{cursor:crosshair}
.ruler{
  position:sticky;
  top:0;
  z-index:3;
  height:36px;
  min-width:100%;
  background:var(--st-bg);
  border-bottom:1px solid var(--st-line-strong);
  font-family:var(--st-mono);
  font-size:10px;
  font-weight:300;
  line-height:1;
  color:rgb(120,120,120);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1;
}
/* ticks: 9px major stubs from the bottom with the label at the top; 4px minor stubs */
.tick{position:absolute;top:0;bottom:0;width:0;padding:10px 0 0 4px;white-space:nowrap}
.tick::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:9px;background:rgb(53,53,53)}
.tick.minor{padding:0;color:transparent}
.tick.minor::before{height:4px}

.lane{position:relative}
.lane-row{position:relative;border-bottom:1px solid var(--st-line);transition:background-color .12s}
.lane-row:hover{background:rgba(41,41,41,.5)}
.lane-row.is-hidden{opacity:.4}

/* blocks: flat type colour, 4px radius, 1px lane-colour border, accent ring when selected */
.seg{
  position:absolute;
  top:3px;
  bottom:3px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:10px;
  padding:0 6px;
  border:1px solid var(--st-lane);
  border-radius:4px;
  /* the default clip colour is the accent family darkened (was the #0F3C8A
     blue of the old #008CFF accent); per-track lanes override it below */
  background:#38571A;
  color:#ecfccb;
  font-size:11px;
  overflow:hidden;
  cursor:default;
  transition:filter .12s;
}
.seg b{font-size:11px;font-weight:450;white-space:nowrap}
.seg span{font-size:10px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg:hover{filter:brightness(1.12);z-index:2}
.seg.active-seg{box-shadow:0 0 0 1px var(--st-primary),inset 0 0 0 1px var(--st-primary);z-index:2}
.seg.shuttle{background:#0E483D;color:#6EE7C7}
.seg.pose{background:#2B525F;color:#E7F4F9}
.seg.audio{background:#004732;color:#CBFAED}
.seg.camera{background:#303E4F;color:#E7EFF9}
.seg.court{background:#066284;color:#DBEAF0}
.seg.source{background:#40464F;color:#EDF0F3}
.seg.caption{top:2px;bottom:2px;padding:0 5px;background:#26262B;color:#C9C9D2;border-left:2px solid #6B6B78;border-radius:3px}
.seg.caption b{font-size:10px;font-weight:400;overflow:hidden;text-overflow:ellipsis}
/* strike a rally from its Match-lane block (hover) */
.seg-x{position:absolute;top:2px;right:2px;z-index:3;display:none;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;border-radius:4px;background:rgba(18,18,18,.78);color:#F2F2F2}
.seg:hover .seg-x{display:inline-flex}
.seg-x:hover{background:var(--st-danger)}
.seg.seg-excluded .seg-x:hover{background:var(--st-primary);color:var(--st-primary-fg)}
.seg.skip{opacity:.55;border:1px dashed rgba(255,255,255,.18)}
.seg.seg-excluded{background:#2E1D1D;color:#FF8A8A;opacity:.85}
.seg.seg-picked{border-color:#6EE7C7}
.seg.mask-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(242,242,242,.3);pointer-events:none}
.skim-on .seg.clip:not(.seg-picked){opacity:.35}
/* filmstrip clip: thumbnail plate with a legibility gradient under the caption */
.seg.clip{padding:0;align-items:stretch}
.seg .film{position:absolute;inset:0;background:#1a1d26 center/cover no-repeat}
.seg .film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72))}
.seg .clip-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;padding:3px 6px;line-height:1.25}
.seg .clip-cap b{color:#F2F2F2}
.seg .clip-cap span{color:rgba(242,242,242,.8)}
.seg-x{display:none}
.gap-mark{
  position:absolute;
  top:6px;
  bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  overflow:hidden;
  border:1px dashed rgba(255,255,255,.1);
  border-radius:4px;
  font-family:var(--st-mono);
  font-size:9px;
  color:var(--st-fg-muted);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
/* waveform */
.wave-wrap{position:absolute;inset:5px 6px;display:flex;align-items:center;gap:1px;pointer-events:none}
.wave-bar{flex:1 1 0;min-width:1px;border-radius:1px;background:rgba(13,191,138,.55)}
.seg.audio.has-wave{padding:0}
.seg.audio.has-wave>b,.seg.audio.has-wave>span{position:relative;z-index:1;padding-left:6px}
/* data strips (Match view) and keyframe diamonds */
.shuttle-dot{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--st-lime);pointer-events:none}
.player-dot{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--st-cyan);pointer-events:none}
.player-dot.p0{background:#46e3ff}
.player-dot.p1{background:#ff7ac6}
.player-dot.p2{background:#ffd166}
.player-dot.p3{background:#b388ff}
.kf-mark{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;transform:rotate(45deg);background:rgba(242,242,242,.64);border:1px solid var(--st-lane);cursor:default}
.kf-mark.shuttle{background:rgba(242,242,242,.64)}
.kf-mark.player{background:#ff7ac6}
.kf-mark.point{background:#ffd166}
.kf-mark:hover{background:var(--st-primary)}
/* playhead: 1px accent line with a 10x13 knob in the ruler; chip on hover / scrub */
.playhead{position:absolute;top:0;bottom:0;z-index:5;width:1px;background:var(--st-primary);box-shadow:0 0 0 1px var(--st-lane);pointer-events:none}
.playhead::before{content:"";position:absolute;top:0;left:-5px;width:10px;height:13px;background:var(--st-primary);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
.playhead .ph-time{
  position:absolute;
  top:16px;
  left:6px;
  height:16px;
  padding:0 4px;
  border-radius:4px;
  background:var(--st-primary);
  color:var(--st-primary-fg);
  font-family:var(--st-mono);
  font-size:10px;
  line-height:16px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  opacity:0;
  transition:opacity .12s;
}
.timeline-board:hover .ph-time,.playhead.scrubbing .ph-time{opacity:1}
.playhead.flip .ph-time{left:auto;right:6px}
.ghost-head{position:absolute;top:0;bottom:0;z-index:4;width:1px;background:rgba(255,255,255,.25);pointer-events:none}
.gh-time{
  position:absolute;
  top:16px;
  left:6px;
  height:16px;
  padding:0 4px;
  border-radius:4px;
  background:#292929;
  color:var(--st-fg);
  font-family:var(--st-mono);
  font-size:10px;
  line-height:16px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}


/* ==========================================================================
   17. Overlays inside the frame (content: Baddy lime / cyan stay here)
   ========================================================================== */
.ai-overlays{position:absolute;inset:0;pointer-events:none}
/* pose is redrawn on one DPR-capped canvas (keeps the timeline responsive on 4K sources) */
.pose-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* shuttle FX: a small hot core + one thin breathing halo; the comet trail carries the motion */
.shuttle-mark{position:absolute;left:58%;top:31%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;opacity:var(--overlay-opacity,.92);pointer-events:none}
.shuttle-mark::before{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1.5px solid rgba(183,245,66,.6);
  box-shadow:0 0 12px rgba(183,245,66,.3),inset 0 0 8px rgba(183,245,66,.15);
  animation:st-shuttle-breathe 2.4s ease-in-out infinite;
}
.shuttle-mark::after{
  content:"";
  position:absolute;
  inset:36%;
  border-radius:50%;
  background:radial-gradient(circle,#f4ffd8 0%,#b7f542 55%,rgba(183,245,66,0) 80%);
  box-shadow:0 0 10px rgba(183,245,66,.85);
}
@keyframes st-shuttle-breathe{
  0%,100%{transform:scale(1);opacity:.95}
  50%{transform:scale(1.16);opacity:.5}
}
.shuttle-mark.fire::before{border-color:rgba(255,170,90,.55);box-shadow:0 0 14px rgba(255,122,47,.4),inset 0 0 10px rgba(255,122,47,.22)}
.shuttle-mark.fire::after{background:radial-gradient(circle,#fff3c4 0%,#ff9a3d 52%,rgba(255,122,47,0) 82%);box-shadow:0 0 14px rgba(255,140,60,.9)}
.shuttle-mark.square::before{border-radius:24%;border-color:rgba(70,227,255,.55);box-shadow:0 0 12px rgba(70,227,255,.35)}
.shuttle-mark.square::after{background:radial-gradient(circle,#e6fbff 0%,#46e3ff 55%,rgba(70,227,255,0) 80%);box-shadow:0 0 10px rgba(70,227,255,.85)}
/* custom colour (TASK-107): --sh-rgb tints halo + core; style shapes stay */
.shuttle-mark.tinted::before{border-color:rgba(var(--sh-rgb),.6);box-shadow:0 0 12px rgba(var(--sh-rgb),.32),inset 0 0 8px rgba(var(--sh-rgb),.16)}
.shuttle-mark.tinted::after{background:radial-gradient(circle,#fff 0%,rgb(var(--sh-rgb)) 55%,rgba(var(--sh-rgb),0) 80%);box-shadow:0 0 10px rgba(var(--sh-rgb),.85)}
.shuttle-mark.trail::before{display:none}
.shuttle-mark.trail::after{inset:32%}
/* finisher flame: the last stroke ignites */
.shuttle-mark.finisher{filter:drop-shadow(0 0 10px rgba(255,120,30,.9)) drop-shadow(0 0 22px rgba(255,60,10,.55));animation:st-finisher-pulse .5s ease-in-out infinite alternate}
@keyframes st-finisher-pulse{from{transform:scale(1)}to{transform:scale(1.22)}}
.shuttle-trail-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.shuttle-trail-svg .trail-glow{filter:blur(4px)}
.shuttle-trail-svg .trail-tip{filter:drop-shadow(0 0 5px currentColor);animation:st-tip-pulse 1.1s ease-in-out infinite}
@keyframes st-tip-pulse{0%,100%{opacity:.35}50%{opacity:.7}}
/* skeleton SVG is authored in pixel space (viewBox = frame px) so joints stay round at any aspect */
.pose-figure{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pose-limb{stroke:#46e3ff;stroke-width:var(--pose-width,3px);stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(70,227,255,.7))}
.pose-joint{fill:#46e3ff;stroke:#081018;stroke-width:1;filter:drop-shadow(0 0 5px rgba(70,227,255,.65))}
.pose-limb.p1,.pose-joint.p1{stroke:#ff7ac6;fill:#ff7ac6}
.pose-limb.p2,.pose-joint.p2{stroke:#ffd166;fill:#ffd166}
.pose-limb.p3,.pose-joint.p3{stroke:#b388ff;fill:#b388ff}
.pose-joint.p1,.pose-joint.p2,.pose-joint.p3{stroke:#081018}
.pose-figure.ps-minimal .pose-limb{stroke:rgba(255,255,255,.82);filter:none}
.pose-figure.ps-minimal .pose-joint{fill:rgba(255,255,255,.9);stroke:#11131a;filter:none}
.pose-figure.ps-heat .pose-limb{stroke:#ff8a5c;filter:drop-shadow(0 0 4px rgba(255,77,109,.6))}
.pose-figure.ps-heat .pose-joint{fill:#ff4d6d;stroke:#2a0b12;filter:drop-shadow(0 0 4px rgba(255,77,109,.6))}
.pose-figure.ps-velocity .pose-limb{stroke:#b7f542;filter:drop-shadow(0 0 5px rgba(183,245,66,.5))}
.pose-figure.ps-velocity .pose-joint{fill:#b7f542;stroke:#101403}
/* detected court boundary + net */
.court-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.court-edge{fill:rgba(183,245,66,.06);stroke:#b7f542;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(183,245,66,.35))}
.court-corner{fill:#b7f542;stroke:#0a0c08;stroke-width:1}
.court-net{stroke:#46e3ff;stroke-width:2;stroke-dasharray:7 5;filter:drop-shadow(0 0 4px rgba(70,227,255,.5))}
.court-net-tape{stroke:#46e3ff;stroke-width:3;filter:drop-shadow(0 0 6px rgba(70,227,255,.72))}
/* court corner picking (Studio draw mode) */
.court-draw-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
.court-draw-layer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.court-draw-poly{fill:none;stroke:#b7f542;stroke-width:.35;vector-effect:non-scaling-stroke}
.court-draw-net{stroke:#46e3ff;stroke-width:.55;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(70,227,255,.7))}
.court-draw-dot{
  position:absolute;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:#b7f542;
  color:#0a0c08;
  font:500 9px/14px var(--st-font);
  text-align:center;
  border:1px solid #0a0c08;
  box-shadow:0 0 8px rgba(183,245,66,.7);
}
.court-draw-dot.net{background:#46e3ff;box-shadow:0 0 8px rgba(70,227,255,.75)}
/* tracked player boxes: per-id colours match the pose palette so P1/P2 read as the same person across layers */
.player-box{position:absolute;border:1.5px solid #46e3ff;border-radius:6px;box-shadow:0 0 10px rgba(70,227,255,.28),inset 0 0 12px rgba(70,227,255,.07);pointer-events:none}
.player-tag{position:absolute;top:-15px;left:-1px;padding:0 5px;border-radius:4px;background:#46e3ff;color:#07080b;font-size:9px;font-weight:500;line-height:14px}
.player-box.p1{border-color:#ff7ac6;box-shadow:0 0 10px rgba(255,122,198,.3)}
.player-box.p1 .player-tag{background:#ff7ac6}
.player-box.p2{border-color:#ffd166;box-shadow:0 0 10px rgba(255,209,102,.3)}
.player-box.p2 .player-tag{background:#ffd166}
.player-box.p3{border-color:#b388ff;box-shadow:0 0 10px rgba(179,136,255,.3)}
.player-box.p3 .player-tag{background:#b388ff}
.player-box.target{border-color:#b7f542;box-shadow:0 0 14px rgba(183,245,66,.45)}
.player-box.target .player-tag{background:#b7f542}
/* measured racquet boxes */
.racquet-box{position:absolute;border:1.5px dashed #ffcf6a;border-radius:5px;box-shadow:0 0 8px rgba(255,207,106,.3);pointer-events:none}
.racquet-tag{position:absolute;top:-14px;left:-1px;padding:0 4px;border-radius:3px;background:#ffcf6a;color:#0a0c08;font-size:8px;font-weight:500;line-height:13px}
/* camera area-box preview: dashed accent rect, everything outside dims */
#camBoxPreview{
  position:absolute;
  z-index:8;
  pointer-events:none;
  border:2px dashed rgba(var(--st-primary-rgb),.9);
  border-radius:4px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  transition:left .08s,top .08s,width .08s,height .08s;
}
.stVideo-mirror{transform:scaleX(-1)}


/* ==========================================================================
   18. Match view (fullscreen lean-back on #stStageCol) + vignette + stats card
   ========================================================================== */
.st-stage-col:fullscreen{background:#000}
.st-stage-col:fullscreen .st-stage{background:#000}
.st-stage-col:fullscreen .st-stage-head{background:rgba(0,0,0,.6)}
.st-stage-col:fullscreen .stage-frame{max-width:100vw;max-height:100vh}
.st-stage-col:fullscreen .st-pill{opacity:0;transition:opacity .2s}
.st-stage-col:fullscreen:hover .st-pill{opacity:1}
/* legacy target (the stage itself fullscreened) */
.st-stage:fullscreen{background:#000;padding:0}
.st-stage:fullscreen .stage-frame{max-width:100vw;max-height:100vh}
body.match-view .st-stage{background:#000}
.mv-vignette{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 16%,transparent 80%,rgba(0,0,0,.55) 100%);
}
.mv-stats{
  position:absolute;
  top:16px;
  right:16px;
  z-index:7;
  pointer-events:none;
  min-width:200px;
  padding:12px 14px;
  border:1px solid var(--st-line-input);
  border-radius:8px;
  background:rgba(18,18,18,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s,transform .25s;
}
.mv-stats.on{opacity:1;transform:none}
.mv-rank{margin-bottom:8px;font-size:10px;color:var(--st-fg-muted)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.mv-cell b{display:block;font-size:20px;font-weight:500;line-height:1.05;color:var(--st-fg)}
.mv-cell span{font-size:9px;color:var(--st-fg-muted)}
.mv-energy b{color:var(--st-fg)}


/* ==========================================================================
   19. Responsive
   ========================================================================== */
@media (max-width:1280px){
  /* Match view on a narrow window: the playback-mode segmented takes the stage header slot; zoom stays on the wheel */
  .st-stage-right:has(#tlPlayMode:not([hidden])) #timelineZoom,
  .st-stage-right:has(#tlPlayMode:not([hidden])) .tl-zoomval{display:none}
}
@media (max-width:1100px){
  .studio{--st-left-w:220px;--st-right-w:240px}
  .studio.chat-open{--st-chat-w:300px}
}
@media (max-width:1280px){
  /* room for the chat: the inspector gives way first, it is one click back */
  .studio.chat-open{--st-right-w:0px}
  .studio.chat-open .st-right,.studio.chat-open .st-gutter-r{display:none}
}
@media (max-width:900px){
  .studio{grid-template-columns:minmax(0,1fr);--tl-h:200px}
  .st-left,.st-right,.st-gutter-l,.st-gutter-r,.st-h-centre,.st-gutter-chat{display:none}
  .st-header,.st-stage-col,.st-tl-resize,.timeline{grid-column:1}
  .st-chat{position:fixed;inset:40px 0 0 auto;width:min(340px,100vw);z-index:60;border-left:1px solid var(--st-line-strong)}
  .st-stage-head{padding:0 8px}
  .st-shortcuts{width:auto;left:16px;right:16px;transform:none}
}


/* ==========================================================================
   20. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .shuttle-mark::before,
  .shuttle-mark.finisher,
  .shuttle-trail-svg .trail-tip,
  .rally-strip.flash .rcard{animation:none}
}
@media (max-width:900px){
  /* phone: the header is a flex row — the title truncates instead of the
     lifecycle buttons overlapping it; the stage-header cluster wraps */
  .studio .st-header{display:flex;align-items:center;gap:6px}
  .studio .st-h-left{flex:1;min-width:0}
  .studio .st-project{max-width:100%}
  .studio .st-project-name{max-width:none;flex:1}
  .studio .st-h-right{flex:none}
  .studio .st-stage-head{grid-template-columns:auto minmax(0,1fr);gap:8px}
  .studio .st-stage-label{display:none}
  .studio .st-stage-right{justify-self:end;flex-wrap:wrap;gap:6px}
  .studio .timeline-grid{grid-template-columns:200px minmax(0,1fr)}
}


/* ==========================================================================
   TASK-107. Whole-duration scrubber under the stage: a 2px progress line that
   shows its thumb on hover (the ruler below only spans the zoomed window).
   ========================================================================== */
.st-scrub{display:flex;align-items:center;height:12px;padding:0 1px;background:var(--st-canvas);min-width:0}
.studio .st-scrub input[type=range]{width:100%;height:12px}
.studio .st-scrub input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:0;background:linear-gradient(to right,var(--st-primary) var(--p,0%),var(--st-muted-bg) var(--p,0%))}
.studio .st-scrub input[type=range]::-moz-range-track{height:2px;border-radius:0;background:var(--st-muted-bg)}
.studio .st-scrub input[type=range]::-moz-range-progress{height:2px;background:var(--st-primary)}
.studio .st-scrub input[type=range]::-webkit-slider-thumb{width:10px;height:10px;margin-top:-4px;opacity:0;transition:opacity .12s}
.studio .st-scrub input[type=range]::-moz-range-thumb{width:10px;height:10px;opacity:0;transition:opacity .12s}
.studio .st-scrub:hover input[type=range]::-webkit-slider-thumb,.studio .st-scrub input[type=range]:active::-webkit-slider-thumb{opacity:1}
.studio .st-scrub:hover input[type=range]::-moz-range-thumb,.studio .st-scrub input[type=range]:active::-moz-range-thumb{opacity:1}


/* ==========================================================================
   21. Effects layer + AI panel (TASK-110)
   ========================================================================== */
/* the effects canvas redraws the video frame, so it sits exactly on the <video>;
   studio-fx.js mirrors the video's inline box + transform onto it every frame */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#000}
/* Owner, 2026-09-21: the hint sat dead centre over the picture, on top of the tool pill,
   with its text running under its own button and no way to close it. It now lives in the
   stage's top-left corner, lays its parts out in a row and carries a dismiss. */
.fx-hint{position:absolute;left:12px;top:12px;z-index:6;max-width:min(78%,420px);padding:5px 12px;border:1px solid var(--st-line-strong);border-radius:999px;background:var(--st-pop);color:var(--st-fg-muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:var(--st-shadow-menu)}
.layer-state.ls-add{background:var(--st-accent-bg);color:var(--st-fg-muted)}

.fx-stack{display:flex;flex-direction:column;gap:4px}
.fx-item{border:1px solid var(--st-line-strong);border-radius:var(--st-radius);background:rgba(255,255,255,.02);min-width:0}
.fx-item.open{border-color:var(--st-line-input)}
.fx-item.bad{border-color:rgba(230,45,45,.5)}
.fx-item-head{display:flex;align-items:center;gap:2px;height:36px;padding:0 4px;min-width:0}
.fx-item-name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0 4px;border:0;background:none;text-align:left}
.fx-item-name b{font-size:11px;font-weight:450;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-item-name span{font-size:10px;color:var(--st-fg-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-eye{color:var(--st-fg-dim)}
.fx-eye.on{color:var(--st-fg)}
.fx-item-body{display:flex;flex-direction:column;gap:6px;padding:4px 10px 10px;border-top:1px solid var(--st-line)}
.fx-err{display:block;padding:4px 10px 8px;font-size:10px;line-height:1.4;color:#ff8a8a;font-weight:400}
.st-select{flex:1 1 auto;min-width:0;height:24px;padding:0 6px;border:0;border-radius:6px;background:var(--st-accent-bg);color:var(--st-fg);font-size:11px;appearance:auto}
.fx-presets{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.fx-preset{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:6px 8px;border:1px solid var(--st-line-strong);border-radius:var(--st-radius);background:rgba(255,255,255,.02);text-align:left}
.fx-preset:hover{border-color:var(--st-primary);background:var(--st-accent-bg)}
.fx-preset b{font-size:11px;font-weight:450;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-preset span{font-size:10px;color:var(--st-fg-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-code summary{font-size:10px;color:var(--st-fg-muted);cursor:default}
.fx-code textarea{width:100%;height:160px;margin:6px 0;padding:8px;border:1px solid var(--st-line-input);border-radius:var(--st-radius);background:#0d0d0d;color:var(--st-on-fg,#d9f99d);font:10px/1.5 var(--st-mono);resize:vertical;white-space:pre;overflow:auto;tab-size:2}
.fx-progress{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--st-fg)}
.fx-progress i{width:10px;height:10px;flex:none;border-radius:50%;border:2px solid var(--st-line-input);border-top-color:var(--st-primary);animation:fx-spin .8s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}

.st-ai-btn{gap:4px}
.st-ai-btn.active{background:var(--st-on);color:var(--st-on-fg)}
.st-chat{border:0}
.st-chat[hidden]{display:none}
.st-chat .st-panel-head{gap:4px}
.st-chat-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:450;margin-right:auto}
.st-menu-note{padding:6px 10px;max-width:220px;font-size:10px;line-height:1.4;color:var(--st-fg-muted);white-space:normal}
.st-chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.chat-empty{margin:auto 0;display:flex;flex-direction:column;gap:6px;padding:8px 4px;color:var(--st-fg-muted);font-size:11px;line-height:1.5}
.chat-empty b{font-size:13px;color:var(--st-fg);font-weight:450}
.chat-msg{display:flex;flex-direction:column;gap:4px;min-width:0}
.chat-msg.user{align-items:flex-end}
.chat-bubble{max-width:92%;padding:8px 10px;border-radius:10px;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.chat-msg.user .chat-bubble{background:var(--st-primary);color:var(--st-primary-fg);border-bottom-right-radius:3px}
.chat-msg.ai .chat-bubble{background:var(--st-muted-bg);border-bottom-left-radius:3px}
.chat-msg.bad .chat-bubble{background:rgba(230,45,45,.14);color:#ffb3b3}
.chat-meta{font:10px var(--st-mono);color:var(--st-fg-dim);padding-left:2px}
.chat-trace{display:flex;flex-wrap:wrap;gap:4px}
.chat-tool{padding:2px 7px;border-radius:999px;border:1px solid var(--st-line-input);font-size:10px;color:var(--st-fg-muted)}
.chat-tool.srv{border-color:rgba(var(--st-primary-rgb),.45);color:var(--st-on-fg)}
.chat-tool.bad{border-color:rgba(230,45,45,.5);color:#ff8a8a}
.chat-typing{display:flex;gap:4px;align-items:center;height:30px}
.chat-typing i{width:5px;height:5px;border-radius:50%;background:var(--st-fg-muted);animation:chat-dot 1s ease-in-out infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}
.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.st-chat-chips{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.st-chat-chips[hidden]{display:none}
.chat-chip{padding:5px 9px;border:1px solid var(--st-line-input);border-radius:999px;background:none;font-size:11px;color:var(--st-fg-muted);text-align:left}
.chat-chip:hover{border-color:var(--st-primary);color:var(--st-fg)}
.st-chat-form{flex:none;display:flex;align-items:flex-end;gap:6px;margin:0 12px 12px;padding:6px 6px 6px 10px;border:1px solid var(--st-line-input);border-radius:10px;background:var(--st-input)}
.st-chat-form:focus-within{border-color:var(--st-primary)}
.st-chat-form textarea{flex:1 1 auto;min-width:0;max-height:140px;padding:4px 0;border:0;outline:0;background:none;resize:none;font-size:12px;line-height:1.45}
.st-chat-send.st-chat-send{flex:none;border-radius:50%;background:var(--st-primary);color:var(--st-primary-fg)}
.st-chat-send:hover{background:var(--st-primary-hover);color:var(--st-primary-fg)}
.st-chat-send:disabled{opacity:.4}
@media (prefers-reduced-motion:reduce){.fx-progress i,.chat-typing i{animation:none}}

/* TASK-111: analytics are the near player's — one heatmap, opponent shots greyed */
.heatmap-cell.heatmap-focus{grid-column:1/-1;max-width:190px}
.heatmap-note{grid-column:1/-1}
.kf-item.kf-opp{opacity:.5}

/* TASK-112/113: composed soundtracks + reel templates */
.tpl-flash{position:absolute;inset:0;background:#000;pointer-events:none;z-index:3}
.tpl-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:4;text-align:center;pointer-events:none;
  color:rgba(255,255,255,.86);font:600 8px/1 var(--st-font);letter-spacing:0;text-transform:lowercase;text-shadow:0 1px 2px rgba(0,0,0,.45);white-space:pre}
.tpl-cards{display:flex;flex-direction:column;gap:4px}
.tpl-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid var(--st-line-strong);border-radius:var(--st-radius);background:rgba(255,255,255,.02);text-align:left}
.tpl-card:hover{border-color:var(--st-primary)}
.tpl-card.active{border-color:var(--st-primary);background:var(--st-accent-bg)}
.tpl-card b{font-size:11px;font-weight:450}
.tpl-card span{font-size:10px;line-height:1.4;color:var(--st-fg-muted);white-space:normal}
.st-text{flex:1 1 auto;min-width:0;height:24px;padding:0 8px;border:1px solid var(--st-line-input);border-radius:6px;background:var(--st-input);font-size:11px}
.taste-row{display:flex;flex-wrap:wrap;gap:4px}
.taste-chip{padding:3px 8px;border:1px solid var(--st-line-input);border-radius:999px;background:none;font-size:10px;color:var(--st-fg-muted)}
.taste-chip.active{border-color:var(--st-primary);background:var(--st-on);color:var(--st-on-fg)}
.ai-track{display:flex;align-items:center;gap:6px;min-height:30px;padding:0 6px;border:1px solid var(--st-line-strong);border-radius:var(--st-radius)}
.ai-track.active{border-color:var(--st-primary);background:var(--st-accent-bg)}
.ai-track .ai-track-name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;border:0;background:none;text-align:left;padding:2px 0}
.ai-track b{font-size:11px;font-weight:450}
.ai-track span{font-size:10px;color:var(--st-fg-muted)}

/* TASK-114: effects lane, blade marks, muted audio lane */
.lane-row[data-track="effects"] .seg{height:10px;top:2px;border-radius:3px;background:rgba(var(--st-primary-rgb),.28);border:1px solid rgba(var(--st-primary-rgb),.55);overflow:hidden}
.lane-row[data-track="effects"] .seg b{font-size:8px;line-height:9px;font-weight:450;padding:0 4px;color:var(--st-on-fg)}
.lane-row[data-track="effects"] .seg span{display:none}
.lane-row[data-track="effects"] .seg.skip{opacity:.35}
.studio.tool-blade .lane-row.lane-clip .seg{cursor:col-resize}
/* the blade is armed from the stage pill, so the stage has to look cuttable too */
.studio.tool-blade .stage-frame,.studio.tool-blade .stage-frame video{cursor:crosshair}
.blade-mark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);z-index:3;pointer-events:none}
.blade-cut{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(230,45,45,.55) 0 4px,rgba(0,0,0,.55) 4px 8px)}
.blade-cut.baked{background:#E62D2D;margin-left:-1px}
.blade-sel{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 2px var(--st-primary);background:rgba(var(--st-primary-rgb),.18)}
.st-tool#toolBlade.active{background:var(--st-on);color:var(--st-on-fg)}

/* TASK-114: racket hits on the Shuttle lane */
.hit-tick{position:absolute;top:2px;bottom:2px;width:3px;margin-left:-1px;border-radius:2px;z-index:4;background:rgba(255,255,255,.35)}
.hit-tick.near{background:var(--st-lime)}
.hit-tick.far{background:rgba(255,255,255,.32)}
.hit-tick.manual{background:#fff;box-shadow:0 0 0 1px var(--st-primary)}
.hit-tick:hover{transform:scaleX(1.8)}
/* TASK-114: an inferred shuttle position (the normaliser's predicted path) — hollow and faint */
.shuttle-mark.guess{opacity:calc(var(--overlay-opacity,1) * .55);filter:saturate(.6);outline:1px dashed rgba(255,255,255,.55);outline-offset:2px;border-radius:50%}
/* TASK-115 Transitions layer: per-gap choice + the reusable transition library */
.tr-gap{padding:8px 0;border-bottom:1px solid var(--st-line,rgba(255,255,255,.06))}
.tr-gap:last-of-type{border-bottom:0}
.tr-gap-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tr-gap-name{font-size:11px;color:var(--st-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-arrow{color:var(--st-fg-muted);margin:0 2px}
.tr-kind button{min-width:38px}
.tr-gap-pick{display:flex;align-items:center;gap:8px;margin-top:6px}
.tr-thumb{width:22px;height:39px;border-radius:4px;object-fit:cover;flex:none;background:var(--st-muted-bg);cursor:pointer}
.tr-thumb-empty{display:inline-block;box-shadow:inset 0 0 0 1px var(--st-line-input,rgba(255,255,255,.12))}
.tr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tr-card{position:relative;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--st-muted-bg);cursor:pointer;aspect-ratio:9/16}
.tr-card img{width:100%;height:100%;object-fit:cover;display:block}
.tr-card:hover{box-shadow:0 0 0 1px var(--st-primary,#a3e635)}
.tr-card-name{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:10px;line-height:1.2;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.tr-badge{position:absolute;top:5px;left:5px;padding:1px 5px;border-radius:999px;font-size:9px;letter-spacing:.04em;text-transform:uppercase;background:rgba(0,0,0,.6);color:var(--st-lime,#b7f542)}
.tr-badge.card{color:#cfd8dc}
.tr-preview{display:block;width:60%;margin:10px auto 0;border-radius:8px;background:#000;aspect-ratio:9/16}
.tr-generate{width:100%;margin-top:8px}
/* TASK-116: saved effects shelf, effect authoring controls, the AI panel's memory */
.fx-saved-item{position:relative;display:block}
.fx-saved-item .fx-preset{width:100%}
.fx-saved-del{position:absolute;top:2px;right:2px;opacity:0;transition:opacity .12s}
.fx-saved-item:hover .fx-saved-del{opacity:1}
.fx-def label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}
.fx-defadd{gap:6px}.fx-defadd .fx-num{flex:0 0 52px;padding:0 4px}
.fx-save-row{margin-top:8px;gap:8px;align-items:center}.fx-save-row .control-hint{margin:0}
.fx-controls code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--st-fg)}
.st-chat-memory{border-bottom:1px solid var(--st-line,rgba(255,255,255,.06));padding:10px 12px;max-height:44%;overflow:auto;background:var(--st-panel-2,rgba(255,255,255,.02))}
.chat-mem-head{display:flex;justify-content:space-between;font-size:11px;color:var(--st-fg-muted);margin-bottom:6px}.chat-mem-head b{color:var(--st-fg)}
.chat-mem-note{display:flex;align-items:flex-start;gap:6px;padding:5px 0;font-size:11.5px;line-height:1.35}
.chat-mem-text{flex:1 1 auto;color:var(--st-fg)}
.chat-mem-scope{flex:none;margin-top:1px;padding:0 5px;border-radius:999px;font-size:9px;letter-spacing:.04em;text-transform:uppercase;background:var(--st-muted-bg);color:var(--st-fg-muted)}
.chat-mem-scope.always{color:var(--st-lime,#b7f542)}
.chat-mem-add{display:flex;gap:6px;margin-top:8px}.chat-mem-add .st-select{flex:0 0 88px}
#chatMemoryBtn.active{color:var(--st-lime,#b7f542)}
/* TASK-118: a "hit" the AI judged not to be a stroke stays on the lane, faded */
.hit-tick.vetoed{opacity:.28;background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 2px,transparent 2px 4px)}
/* TASK-119: where an effect cannot draw (rally not tracked) the lane says so, and the stage hint carries the fix */
.seg.fx.fx-untracked{background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);opacity:.9}
.seg.fx.fx-untracked b,.seg.fx.fx-untracked span{color:var(--st-fg-muted)}
.fx-hint.has-action{display:flex;align-items:center;gap:10px;white-space:normal;overflow:visible;pointer-events:auto;padding:6px 6px 6px 14px;font-size:11px;color:var(--st-fg)}
.fx-hint .fx-hint-text{flex:1 1 auto;min-width:0;line-height:1.35}
.fx-hint .fx-hint-x{flex:none;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--st-fg-muted);cursor:pointer;pointer-events:auto}
.fx-hint .fx-hint-x:hover{background:var(--st-muted-bg);color:var(--st-fg)}
.fx-hint:not(.has-action){padding-right:30px}
.fx-hint:not(.has-action) .fx-hint-x{position:absolute;right:5px;top:50%;transform:translateY(-50%)}
.fx-hint-btn.fx-hint-btn{flex:none;height:24px;padding:0 12px;border:0;border-radius:999px;background:var(--st-primary,#a3e635);color:var(--st-primary-fg,#09090b);font-size:11px;font-weight:600;cursor:pointer}
.fx-hint-btn:disabled{opacity:.6;cursor:default}
/* TASK-125: four live scoreboard styles, shared with the inspector samples. */
.scorebug{position:absolute;z-index:5;width:218px;max-width:calc(100% - 24px);padding:5px;border:1px solid #ffffff20;border-radius:9px;background:#111814f5;box-shadow:0 4px 18px #0005;font:600 11px/1.2 ui-sans-serif,system-ui,-apple-system,sans-serif;color:#f4f8f5;pointer-events:none;overflow:hidden}
.scorebug.sb-tl{left:12px;top:30px}.scorebug.sb-tr{right:12px;top:30px}.scorebug.sb-bl{left:12px;bottom:58px}.scorebug.sb-br{right:12px;bottom:58px}
.sb-heading{display:flex;justify-content:space-between;gap:8px;padding:3px 7px 7px;font-size:7px;font-weight:700;letter-spacing:.14em;color:#b4c7bb}.sb-heading span:first-child{color:#b2e67b}
.sb-row{display:flex;align-items:center;gap:8px;min-height:32px;padding:3px 3px 3px 6px;border-radius:4px}.sb-row+.sb-row{margin-top:2px}
.sb-row.serving{background:#b7f54210}.sb-dot{width:4px;height:4px;border-radius:50%;background:transparent;flex:none}.sb-row.serving .sb-dot{background:#b7f542;box-shadow:0 0 5px #bef26466}
.sb-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:600;letter-spacing:.01em;text-transform:none}
.sb-games{flex:none;min-width:12px;text-align:center;color:#bbcabc;font-size:10px;font-variant-numeric:tabular-nums}
.sb-pts{flex:none;min-width:30px;height:27px;padding:0 5px;display:flex;align-items:center;justify-content:center;background:#29372e;color:#f4f8f5;border-radius:3px;font:650 18px/1 ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums}.sb-row.serving .sb-pts{background:#b7f542;color:#17230b}.sb-pts sup{font-size:9px;margin-left:2px}
.sb-tag{padding:5px 7px 1px;color:#bac5be;font-size:7px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.sb-avatar{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#34483c;color:#dcf5c5;font-size:11px}.sb-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sb-theme-minimal{background:#f9fcf9;color:#182b20;border:0;border-radius:2px;padding:6px 8px;box-shadow:0 3px 14px #0003}.sb-theme-minimal .sb-heading{color:#526659;border-bottom:2px solid #244d35;padding-left:4px;padding-right:4px}.sb-theme-minimal .sb-heading span:first-child{color:#244d35}.sb-theme-minimal .sb-row{padding-left:4px;background:none;border-radius:0}.sb-theme-minimal .sb-row+.sb-row{border-top:1px solid #dce6df;margin-top:0}.sb-theme-minimal .sb-row .sb-pts{background:none;color:#182b20;font-size:20px}.sb-theme-minimal .sb-dot{box-shadow:none;background:transparent}.sb-theme-minimal .serving .sb-dot{background:#388034}.sb-theme-minimal .sb-tag,.sb-theme-minimal .sb-games{color:#536759}
.sb-theme-glass{padding:6px;background:#15221bbb;backdrop-filter:blur(14px);border:1px solid #e0fbe340;border-radius:18px;box-shadow:0 6px 22px #0003}.sb-theme-glass .sb-heading{display:none}.sb-theme-glass .sb-row{border-radius:12px;padding:5px 8px;min-height:34px}.sb-theme-glass .sb-row.serving{background:#e9ffe51c}.sb-theme-glass .sb-row .sb-pts{background:none;color:#fff;font-size:19px}.sb-theme-glass .sb-tag{padding:4px 12px 2px;color:#d0dfd3}
.sb-theme-players{border:0;border-radius:0;background:none;box-shadow:none;padding:0;overflow:visible}.sb-theme-players .sb-heading{background:#17251df0;border-radius:6px 6px 0 0;padding:5px 9px}.sb-theme-players .sb-row{background:#111e17ed;border-radius:0;padding:6px;min-height:46px;margin:0;border-left:3px solid #ffffff12}.sb-theme-players .sb-row+.sb-row{margin-top:1px;border-radius:0 0 6px 6px}.sb-theme-players .sb-row.serving{border-left-color:#b7f542;background:#20351cec}.sb-theme-players .sb-dot{display:none}.sb-theme-players .sb-row .sb-pts{background:transparent;color:#f5ffe7;font-size:23px}.sb-theme-players .sb-tag{background:#132016ed;border-radius:0 0 4px 4px;margin:1px 4px 0;padding:3px 7px}
.studio .sb-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 6px}.studio .sb-style{min-width:0;padding:0;text-align:left;border:1px solid var(--st-line-strong,#333);border-radius:9px;background:var(--st-muted-bg,#222);overflow:hidden;cursor:pointer}.studio .sb-style.active{border-color:var(--st-primary,#a3e635);box-shadow:0 0 0 1px var(--st-primary,#a3e635)}.studio .sb-style:focus-visible{outline:2px solid #fff;outline-offset:3px}.sb-style-stage{height:95px;display:flex;align-items:center;justify-content:center;padding:9px 7px;background:linear-gradient(135deg,#283b32,#17201b)}
.sb-style-stage .scorebug.sb-sample{position:relative;inset:auto;width:100%;max-width:none;padding:3px;box-shadow:none}.sb-sample .sb-heading{font-size:5px;padding:2px 4px 4px}.sb-sample .sb-row{gap:4px;min-height:23px;padding:2px 3px}.sb-sample .sb-name{font-size:8px}.sb-style-stage .sb-sample .sb-pts{font-size:13px;min-width:20px;height:20px;padding:0 2px}.sb-sample .sb-avatar{width:23px;height:23px;font-size:8px}.sb-sample.sb-theme-players .sb-row{min-height:28px}.sb-style-label{display:block;padding:8px;font-size:11px;font-weight:600}.sb-style-label>span{display:block;color:var(--st-fg-muted,#aaa);font-size:9px;font-weight:400;margin-top:3px}.sb-preview-note{margin-bottom:12px}.sb-player-actions{display:flex;gap:6px;margin-top:12px}.sb-player-fields{display:grid;gap:10px}.sb-player-fields label{display:block;color:var(--st-fg-muted,#aaa);font-size:10px;margin-bottom:6px}.studio #sbNear,.studio #sbFar{min-width:0;width:100%;text-align:left;height:32px}
@media(max-width:700px){.scorebug{width:174px;max-width:calc(100% - 16px)}.scorebug.sb-tl,.scorebug.sb-tr{top:25px}.scorebug.sb-tl,.scorebug.sb-bl{left:8px}.scorebug.sb-tr,.scorebug.sb-br{right:8px}.sb-name{font-size:10px}.sb-row{gap:6px;min-height:28px}.sb-pts{font-size:16px;min-width:25px;height:24px}.sb-avatar{width:28px;height:28px}.sb-theme-players .sb-row{min-height:39px}.studio-toast{font-size:11px;max-width:90%;top:7px}}
.sb-points{max-height:280px;overflow:auto;margin:8px 0;border:1px solid var(--st-line,rgba(255,255,255,.06));border-radius:8px}
.sb-point{display:flex;align-items:center;gap:8px;padding:3px 6px;font-size:11px;border-bottom:1px solid var(--st-line,rgba(255,255,255,.05))}
.sb-point:last-child{border-bottom:0}.sb-point.unsure{background:rgba(245,160,50,.10)}.sb-point.mine .sb-conf{color:var(--st-lime,#b7f542)}
.sb-seek{flex:none;width:44px;padding:0;border:0;background:none;color:var(--st-fg);font:inherit;font-variant-numeric:tabular-nums;text-align:left;cursor:pointer}
.sb-seek:hover{color:var(--st-primary,#a3e635)}
.sb-who{display:inline-flex;gap:2px;flex:none}
.sb-side{width:22px;height:20px;border:0;border-radius:4px;background:var(--st-muted-bg);color:var(--st-fg-muted);font-size:10px;font-weight:700;cursor:pointer}
.sb-side.active{background:#b7f542;color:#06100a}
.sb-after{flex:1 1 auto;text-align:right;font-variant-numeric:tabular-nums;color:var(--st-fg)}
.sb-conf{flex:none;width:34px;text-align:right;color:var(--st-fg-muted);font-size:10px}
.sb-flag{color:rgba(245,190,90,.95)}

/* TASK-119: "did my effect apply?" — the dialog an effect raises when the rally under the playhead has no SAM tracking */
.fx-dialog-wrap{position:fixed;inset:0;z-index:190;display:flex;align-items:center;justify-content:center;background:rgba(4,6,10,.62);backdrop-filter:blur(3px)}
.fx-dialog{width:min(460px,calc(100vw - 32px));padding:20px 22px 18px;border:1px solid var(--st-line-strong,rgba(255,255,255,.06));border-radius:14px;background:var(--st-pop,#171717);color:var(--st-fg,#F2F2F2);box-shadow:var(--st-shadow-menu,0 0 1px 2px rgba(0,0,0,.12),0 4px 12px 8px rgba(0,0,0,.12),0 12px 16px 0 rgba(0,0,0,.16))}
.fx-dialog-title{font-size:14px;font-weight:650;line-height:1.35;margin-bottom:10px}
.fx-dialog p{margin:0 0 9px;font-size:12px;line-height:1.55;color:var(--st-fg-muted,rgba(242,242,242,.64))}
.fx-dialog .fx-dialog-note{font-size:11px;opacity:.8}
.fx-dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fx-dialog-actions .st-btn-ghost{margin-left:auto;background:transparent;border:0;color:var(--st-fg-muted,rgba(242,242,242,.64))}
.sb-skipped .sb-point{opacity:.85}.sb-why{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--st-fg-muted,rgba(242,242,242,.64));text-align:left}

/* Body-level overlays must clear `.studio` (position:fixed; z-index:120). A lower value
   leaves them in the DOM, focusable and clickable by code, but PAINTED BEHIND the editor —
   how the effects dialog shipped invisible on 2026-09-21 until a screenshot caught it. */

/* ---------- TASK-121: the guided tour + the How-to index ----------
   Owner, 2026-09-21: "we need to add a onboarding guided flow explaining the flow of the
   editor as a tutorial" · "a how to or tutorial section on the editor showing how to
   configure different features". The tour rings the real control it is talking about
   (no dark cut-out: the editor stays readable) and dims everything else. */
.tour-layer{position:fixed;inset:0;z-index:200;pointer-events:none}
/* The dim IS the ring's outer shadow (a spotlight). A `filter` on .studio would dim the
   card with it and turn every fixed child into a containing block. */
.tour-ring{position:fixed;border:2px solid var(--st-primary,#a3e635);border-radius:10px;box-shadow:0 0 0 4px rgba(163,230,53,.18),0 0 0 9999px rgba(4,6,10,.55);transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease;pointer-events:none}
.tour-card{position:fixed;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:14px 16px 12px;border:1px solid rgba(163,230,53,.32);border-radius:var(--st-radius-lg,12px);background:#18181b;color:var(--st-fg,#F2F2F2);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.55);pointer-events:auto}
.tour-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);color:#bef264;font-size:11px}
.tour-ch{font-weight:650;color:#d9f99d;letter-spacing:.01em}
.tour-count{margin-left:auto;font-family:var(--st-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10px;opacity:.7}
.tour-title{font-size:14px;font-weight:650;line-height:1.35;margin-bottom:8px}
.tour-card p{margin:0 0 8px;font-size:12px;line-height:1.55;color:rgba(242,242,242,.78)}
.tour-tip{margin:10px 0 2px;padding:8px 10px;border-radius:var(--st-radius,6px);background:rgba(163,230,53,.10);border:1px solid rgba(163,230,53,.18);font-size:11px;line-height:1.5;color:var(--st-fg-muted,rgba(242,242,242,.64))}
.tour-tip b{display:block;margin-bottom:2px;color:#bef264;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.tour-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.tour-actions #tourIndex{margin-right:auto;background:transparent;border:0;color:var(--st-fg-muted,rgba(242,242,242,.64));padding:0}
.tour-exit.tour-exit{position:relative;z-index:92;display:inline-flex;align-items:center;gap:6px;height:var(--st-ctl,28px);margin-left:10px;padding:0 12px;border:0;border-radius:999px;background:var(--st-primary,#a3e635);color:var(--st-primary-fg,#09090b);font-size:11px;font-weight:600;cursor:pointer;pointer-events:auto}
.tour-blocked{position:fixed;z-index:203;padding:5px 10px;border-radius:999px;background:var(--st-pop,#171717);border:1px solid var(--st-line-strong,rgba(255,255,255,.06));color:var(--st-fg-muted,rgba(242,242,242,.64));font-size:10px;white-space:nowrap;box-shadow:var(--st-shadow-menu,0 0 1px 2px rgba(0,0,0,.12),0 4px 12px 8px rgba(0,0,0,.12),0 12px 16px 0 rgba(0,0,0,.16));pointer-events:none}
.tour-offer{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:195;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px solid var(--st-line-strong,rgba(255,255,255,.06));border-radius:999px;background:var(--st-pop,#171717);box-shadow:var(--st-shadow-menu,0 0 1px 2px rgba(0,0,0,.12),0 4px 12px 8px rgba(0,0,0,.12),0 12px 16px 0 rgba(0,0,0,.16))}
.tour-offer div{display:flex;flex-direction:column;gap:1px}
.tour-offer b{font-size:12px}
.tour-offer span{font-size:11px;color:var(--st-fg-muted,rgba(242,242,242,.64))}
.tour-index-wrap{position:fixed;inset:0;z-index:205;display:flex;align-items:center;justify-content:center;background:rgba(4,6,10,.62);backdrop-filter:blur(3px)}
.tour-index{width:min(460px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 48px));display:flex;flex-direction:column;padding:18px 20px 16px;border:1px solid var(--st-line-strong,rgba(255,255,255,.06));border-radius:14px;background:var(--st-pop,#171717);color:var(--st-fg,#F2F2F2);box-shadow:var(--st-shadow-menu,0 0 1px 2px rgba(0,0,0,.12),0 4px 12px 8px rgba(0,0,0,.12),0 12px 16px 0 rgba(0,0,0,.16))}
.tour-index-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:650}
.tour-index-lead{margin:8px 0 12px;font-size:12px;line-height:1.55;color:var(--st-fg-muted,rgba(242,242,242,.64))}
.tour-index-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px}
.tour-index-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:var(--st-radius,6px);background:var(--st-input,rgba(255,255,255,.06));color:var(--st-fg,#F2F2F2);text-align:left;cursor:pointer}
.tour-index-row:hover{border-color:var(--st-line-input,rgba(255,255,255,.09));background:var(--st-muted-bg,rgba(255,255,255,.09))}
.tour-index-row span{display:flex;flex-direction:column;gap:1px;min-width:0}
.tour-index-row b{font-size:12px}
.tour-index-row small{font-size:11px;color:var(--st-fg-muted,rgba(242,242,242,.64));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-index-go{margin-left:auto;opacity:.45;transform:rotate(-90deg)}
.tour-index-foot{margin-top:14px}
@media (max-width:700px){.tour-card{width:calc(100vw - 24px)}.tour-offer{width:calc(100vw - 24px);left:12px;transform:none}}

/* TASK-123: feedback belongs beside the action, with a durable queue in the header. */
.st-jobs{position:relative}
.st-jobs-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(390px,calc(100vw - 24px));max-height:65vh;overflow:auto;background:#181a17;border:1px solid #363b31;border-radius:12px;padding:14px;box-shadow:0 18px 55px #0009;z-index:190}
.st-jobs-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;font-size:12px}.st-jobs-title span,.st-jobs-panel p{color:#a4aaa0;font-size:11px}
.st-job-row{display:flex;gap:10px;padding:12px 0;border-top:1px solid #ffffff0c}.st-job-row div{min-width:0}.st-job-row b{display:block;font-size:12px;font-weight:550}.st-job-row span{display:block;color:#a8afa4;font-size:11px;line-height:1.5;margin-top:4px;overflow-wrap:anywhere}.st-job-row i{flex:none;width:7px;height:7px;border-radius:50%;background:#8a9185;margin-top:4px}.st-job-row.running i{background:#a3e635;animation:jobPulse 1.3s ease-in-out infinite}.st-job-row.ready i{background:#a3e635}.st-job-row.failed i,.st-job-row.interrupted i{background:#ffb65a}#stJobsBtn.running{border-color:#a3e635;color:#d1f78f}
@keyframes jobPulse{50%{opacity:.3}}
.studio-toast{position:absolute;z-index:80;top:14px;left:50%;transform:translateX(-50%);max-width:min(580px,85%);padding:10px 16px;border:1px solid #a3e63555;border-radius:10px;background:#151a12f5;color:#e9f3e2;font-size:12px;line-height:1.5;box-shadow:0 6px 24px #0006;pointer-events:none}
.court-mask-preview{position:absolute;inset:0;z-index:4;pointer-events:none}.court-mask-preview svg{width:100%;height:100%}
.shot-label{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:22;background:#11180eea;border:1px solid #a3e63570;border-radius:7px;padding:8px 14px;color:#dbf9b5;font-size:clamp(10px,1vw,14px);white-space:nowrap;pointer-events:none}
.shot-list{max-height:190px;overflow:auto;margin:10px 0}.shot-row{display:grid;grid-template-columns:44px 1fr 36px;gap:8px;width:100%;padding:9px 5px;background:transparent;border:0;border-bottom:1px solid #ffffff0c;text-align:left;color:var(--st-fg,#f1f1f1);font-size:11px;cursor:pointer}.shot-row:hover{background:#a3e63512}.shot-row span,.shot-row small{color:var(--st-fg-muted,#a4aaa0)}.shot-row b{font-weight:500}
.transition-preview{position:absolute;inset:0;z-index:21;overflow:hidden;pointer-events:none;background:#10160d}.transition-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.tr-stage-caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:linear-gradient(0deg,#000a,transparent);color:#fff;text-align:center;padding:12%;text-shadow:0 2px 8px #000}.tr-stage-caption small{font-size:11px;letter-spacing:.18em;color:#cefa83}.tr-stage-caption b{font-size:clamp(15px,2vw,30px);font-weight:650;line-height:1.2}.tr-stage-caption span{background:#111c;border:1px solid #ffffff33;border-radius:6px;padding:7px 12px;font-size:12px}.tr-stage-tag{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:5px 10px;border-radius:5px;background:#101510dc;color:#d4e7c9;font-size:10px;white-space:nowrap}.tr-stage-fade{background:#000;animation:transitionFade 2.4s ease both}.tr-stage-cut{background:transparent}
@keyframes transitionFade{0%,100%{background:#0000}50%{background:#000e}}
@media(prefers-reduced-motion:reduce){.st-job-row.running i,.tr-stage-fade{animation:none}}

.tr-stage-fade{background:#000;animation:none}.tr-stage-fade .tr-incoming{animation:transitionBlend 2.4s linear both}.tr-stage-cut .tr-incoming{animation:transitionCut 2.4s steps(1,end) both}.tr-stage-face{width:23%;max-width:130px;aspect-ratio:1;object-fit:contain}.tpl-montage{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.tpl-montage video{width:100%;height:100%;object-fit:cover}
@keyframes transitionBlend{0%,25%{opacity:0}65%,100%{opacity:1}}
@keyframes transitionCut{0%{opacity:0}50%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.tr-stage-fade .tr-incoming,.tr-stage-cut .tr-incoming{animation:none}}

@media(max-width:900px){.studio .st-h-left>.st-menu{min-width:0;width:100%}.studio .st-project{width:100%;min-width:0}.studio .st-project .ic{flex:none}.studio .st-stage-col{grid-template-rows:58px minmax(0,1fr) 12px}.studio .st-stage-head{display:flex;flex-direction:column;justify-content:center;gap:4px}.studio .st-stage-centre,.studio .st-stage-right{justify-content:center;width:100%}.studio .st-stage-right #timelineZoom,.studio .st-stage-right .tl-zoomval{display:none}.studio .st-h-right{gap:4px}.studio .st-h-right .st-btn{padding-left:7px;padding-right:7px}.studio .st-jobs-panel{position:fixed;top:44px;right:8px;width:min(390px,calc(100vw - 16px))}}