/* Tweakpane greyscale reskin + widget styles, extracted from the Tempo Web Tool
   (the "shadcn-flavored pass, July 23" state). Dark instrument-panel identity:
   near-white is the single accent, muted zinc labels, hairline insets on
   interactive surfaces, thin-track round-thumb sliders.

   Usage: give the pane's container element the class `tp-panel` —
     new Pane({ container: el });  el.classList.add('tp-panel')
   The `--tp-*` variables on :root drive Tweakpane's own theming; everything
   below `.tp-panel` styles the widgets that tweakpane-helpers.js injects
   (.unit-suffix, .reset-btn, .fold-reset, .sld-center-fill, .icon-grid,
   .export-progress) plus the panel-wide polish. */

:root {
  /* value column takes the panel's extra width (default 160px) — wide radio
     cells need it so longer labels don't ellipsize */
  --tp-blade-value-width: 176px;
  --tp-blade-border-radius: 3px;
  --tp-base-border-radius: 4px;
  --tp-base-background-color: #141414;
  --tp-base-shadow-color: transparent;
  --tp-button-background-color: #272727;
  --tp-button-background-color-hover: #3f3f3f;
  --tp-button-background-color-focus: #3f3f3f;
  --tp-button-background-color-active: #525252;
  --tp-button-foreground-color: #fafafa;
  --tp-container-background-color: rgba(255, 255, 255, 0.05);
  --tp-container-background-color-hover: rgba(255, 255, 255, 0.08);
  --tp-container-background-color-focus: rgba(255, 255, 255, 0.10);
  --tp-container-background-color-active: rgba(255, 255, 255, 0.13);
  --tp-container-foreground-color: #fafafa;
  --tp-groove-foreground-color: rgba(255, 255, 255, 0.12);
  --tp-input-background-color: rgba(255, 255, 255, 0.05);
  --tp-input-background-color-hover: rgba(255, 255, 255, 0.08);
  --tp-input-background-color-focus: rgba(255, 255, 255, 0.10);
  --tp-input-background-color-active: rgba(255, 255, 255, 0.12);
  --tp-input-foreground-color: #fafafa;
  --tp-label-foreground-color: #a3a3a3;
  /* monitors (readonly readouts) sit FLAT on the panel — a filled field reads
     as editable, and these are display-only */
  --tp-monitor-background-color: transparent;
  --tp-monitor-foreground-color: #a3a3a3;
}

/* keep the pane on-screen even when it gets tall; thin neutral scrollbars */
.tp-panel { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  position: relative; z-index: 10; /* the value-drag ladder must stack above the stage */ }
.tp-panel, .tp-panel .tp-dfwv { scrollbar-width: thin; scrollbar-color: #3f3f3f transparent; }
.tp-panel::-webkit-scrollbar { width: 8px; height: 8px; }
.tp-panel::-webkit-scrollbar-track { background: transparent; }
.tp-panel::-webkit-scrollbar-thumb { background: #3f3f3f; border-radius: 3px;
  border: 2px solid transparent; background-clip: padding-box; }
.tp-panel::-webkit-scrollbar-thumb:hover { background: #525252; background-clip: padding-box; }

/* drop Tweakpane's drop shadow */
.tp-panel .tp-dfwv, .tp-panel .tp-rotv { box-shadow: none !important; }

/* the panel speaks sans (system stack — no webfont fetch, so standalone/offline
   builds stay self-contained) */
.tp-panel .tp-rotv { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 11px; }

/* strictly black & white: neutralize the browser's blue text-selection inside the
   panel (number fields select-all on focus) and keep native dropdowns dark */
.tp-panel ::selection { background: rgba(255, 255, 255, 0.28); color: #fafafa; }
.tp-panel .tp-txtv_i { caret-color: #fafafa; }
.tp-panel .tp-lstv_s option { background: #141414; color: #fafafa; }

/* hairline insets on interactive surfaces — box-shadow, so no layout shift */
.tp-panel .tp-btnv_b, .tp-panel .tp-lstv_s, .tp-panel .tp-txtv_i,
.tp-panel .tp-ckbv_w, .tp-panel .tp-radv_b, .tp-panel .export-progress {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }

/* slider, the shadcn way — mapped onto Tweakpane's own structure: _t::before is
   the groove, _k::before the filled run, _k::after the thumb. Thicker rounded
   track, near-white fill, square-ish thumb; the clickable area stays full height. */
.tp-panel .tp-sldv_t::before { height: 4px; border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12); }
.tp-panel .tp-sldv_k::before { height: 4px; border-radius: 999px;
  background-color: #d4d4d4; }
.tp-panel .tp-sldv_k::after { width: 12px; height: 12px; right: -6px; border-radius: 2px;
  background-color: #fafafa; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.tp-panel .tp-sldv_t:hover .tp-sldv_k::after,
.tp-panel .tp-sldv_t:focus .tp-sldv_k::after,
.tp-panel .tp-sldv_t:active .tp-sldv_k::after { background-color: #fff; }

/* centre-origin sliders (centerOriginSlider helper): the stock left-anchored fill
   is hidden and a custom div runs from the CENTRE to the knob */
.tp-panel .sld-center .tp-sldv_k::before { display: none; }
.tp-panel .sld-center-fill { position: absolute; top: 50%; margin-top: -2px; height: 4px;
  border-radius: 999px; background-color: #d4d4d4; pointer-events: none; }

/* checkbox: checked flips to the primary near-white with a dark check */
.tp-panel .tp-ckbv_i:checked + .tp-ckbv_w { background-color: #fafafa; box-shadow: none; }
.tp-panel .tp-ckbv_i:checked + .tp-ckbv_w svg path { stroke: #0a0a0a; }

/* section headers: PROMINENT filled bars so the control groups read at a glance */
.tp-panel .tp-rotv_b, .tp-panel .tp-fldv_b { background: rgba(255, 255, 255, 0.08); }
.tp-panel .tp-rotv_t, .tp-panel .tp-fldv_t { color: #fafafa; font-weight: 700;
  letter-spacing: 0.06em; }
/* the pane's ROOT title reads as the tool's HEADER on a taller bar */
.tp-panel .tp-rotv > .tp-rotv_b { height: 48px; }
.tp-panel .tp-rotv > .tp-rotv_b .tp-rotv_t { font-size: 24px; line-height: 48px;
  font-family: Arial, Helvetica, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0; }
.tp-panel .tp-fldv { margin-top: 8px; }

/* OPTIONAL — sections never fold: title bars are inert and the chevrons are gone
   (the ↺ fold-reset inside them stays clickable). Uncomment to adopt.
.tp-panel .tp-rotv_b, .tp-panel .tp-fldv_b { pointer-events: none; cursor: default; }
.tp-panel .fold-reset { pointer-events: auto; }
.tp-panel .tp-rotv_m, .tp-panel .tp-fldv_m { display: none; } */

/* radio cells: unselected dimmed (stock 50% goes illegible on the dark greys);
   the picked one fills near-white with a dark label */
.tp-panel .tp-radv_b { opacity: 0.7; font-size: 10px; }
.tp-panel .tp-radv_i:checked + .tp-radv_b { background-color: #fafafa; color: #0a0a0a;
  opacity: 1; box-shadow: none; }
.tp-panel .tp-tbiv.tp-v-selected .tp-tbiv_t { color: #fff; }

/* workflow switch (e.g. Static / Motion / Dev): a top-level segmented control —
   add class `wf-grid` to the radiogrid blade's element */
.tp-panel .wf-grid { margin-bottom: 6px; }
.tp-panel .wf-grid .tp-radv_b { height: 26px; line-height: 26px; font-size: 11px;
  letter-spacing: 0.02em; }

/* icon radiogrid (setRadioGridIcons helper): taller cells fit the artwork; icons
   are transparent PNGs with WHITE line art sitting straight on the dark cells —
   the selected (near-white) cell inverts them to black so they stay legible */
.tp-panel .icon-grid .tp-radv_b { height: 44px; line-height: 44px; text-transform: capitalize; }
.tp-panel .icon-grid .tp-radv_t { display: flex; align-items: center; justify-content: center; }
.tp-panel .icon-grid .tp-radv_t img { height: 36px; max-width: 92%; object-fit: contain;
  pointer-events: none; }
.tp-panel .icon-grid .tp-radv_i:checked + .tp-radv_b .tp-radv_t img { filter: invert(1); }

/* per-binding reset buttons (addReset helper), between label and control */
.tp-panel .tp-lblv button.reset-btn { flex: 0 0 auto; width: 20px; height: var(--cnt-usz);
  margin-right: 4px; padding: 0; border: 0; border-radius: var(--bld-br);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; font: inherit; }
.tp-panel .tp-lblv button.reset-btn:hover { background: var(--btn-bg-h); }
.tp-panel .tp-lblv button.reset-btn:active { background: var(--btn-bg-a); }

/* folder-title reset (addFolderReset helper) */
.tp-panel .tp-fldv_b { position: relative; }
.tp-panel .fold-reset { position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: var(--bld-br);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; }
.tp-panel .fold-reset:hover { background: var(--btn-bg-h); }
.tp-panel .fold-reset:active { background: var(--btn-bg-a); }

/* injected widgets follow their row/folder's disabled state (Tweakpane only dims
   its own sub-views, so custom buttons kept full-strength white icons) */
.tp-panel .tp-v-disabled .reset-btn, .tp-panel .tp-v-disabled .fold-reset {
  opacity: 0.35; pointer-events: none; }

/* unit suffixes (addUnit helper): greyed, overlaid on the value input's right
   edge so the number itself stays clean for typing */
.tp-panel .tp-txtv.has-unit { position: relative; }
.tp-panel .tp-txtv.has-unit .tp-txtv_i { padding-right: 20px; }
.tp-panel .tp-txtv.has-unit .unit-suffix { position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  color: var(--in-fg); opacity: 0.5; }

/* long-job progress (addProgressBar helper): a button-shaped bar that fills while
   a render runs; near-white fill = the accent */
.tp-panel .export-progress { display: none; position: relative; height: var(--cnt-usz);
  margin-top: 3px; border-radius: var(--bld-br); background: var(--btn-bg); overflow: hidden; }
.tp-panel .export-progress.on { display: block; }
.tp-panel .export-progress .fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%;
  background: #fafafa; transition: width 0.15s linear; }

/* export in progress: freeze ALL controls (sliders, buttons, custom ↺s) —
   toggle this class on the panel container */
.tp-panel.ui-locked { pointer-events: none; opacity: 0.55; }

/* sentence-case all labels (row labels, folder titles, tabs, radio cells,
   buttons) without touching the label strings in the JS */
.tp-panel .tp-lblv_l::first-letter, .tp-panel .tp-fldv_t::first-letter,
.tp-panel .tp-tbiv_t::first-letter, .tp-panel .tp-radv_t::first-letter,
.tp-panel .tp-btnv_t::first-letter { text-transform: uppercase; }