/* ==========================================================================
   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
   (--st-primary #008CFF). Baddy lime / cyan survive only INSIDE the frame as
   content (shuttle, pose, court, player identity), never on chrome.

   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;
  --st-primary:#008CFF;
  --st-primary-hover:#015192;
  --st-primary-press:#013E70;
  --st-on:#013E70;
  --st-on-fg:#CCE8FF;
  --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;
}


/* ==========================================================================
   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);
  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/-1}
.timeline{grid-row:4;grid-column:1/-1}

/* 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;
}
.st-btn-primary{background:var(--st-primary);color:#F2F2F2}
.st-btn-primary:hover{background:var(--st-primary-hover)}
.st-btn-primary:active{background:var(--st-primary-press)}
.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}

/* 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:#F2F2F2;background:var(--st-primary)}
.st-tool.active:hover{background:var(--st-primary-hover)}
.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:#F2F2F2}
.st-menu-item:hover kbd{color:rgba(242,242,242,.7);background:rgba(255,255,255,.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;
  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)}


/* ==========================================================================
   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(0,140,255,.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-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}
.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)}
.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}

/* 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;
  background:#0F3C8A;
  color:#CCE0FF;
  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)}
.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%)}
.ph-time{
  position:absolute;
  top:16px;
  left:6px;
  height:16px;
  padding:0 4px;
  border-radius:4px;
  background:var(--st-primary);
  color:#F2F2F2;
  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(0,140,255,.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}
}
@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{display:none}
  .st-header,.st-stage-col,.st-tl-resize,.timeline{grid-column:1}
  .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:150px 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}