/* ============================================================================
 * Outrangutan 🦧 — web playback & cue system.
 * Full UI rewrite (2026-07-14, owner-directed): one coherent "floating console"
 * system replacing ten accreted style passes. The stage is a deep well; the cue
 * list, program, inspector, and editors float on it as glass cards; chrome is
 * quiet (Deference), the monitor + count clock + ON AIR state are the loudest
 * things on screen (Clarity), and layers are explicit (Depth).
 * Uses Cueola's global theme tokens (--bg/--s1..s4/--accent/--red/--mono/--r…)
 * so every Cueola theme restyles this module too. DESIGN_GUIDELINES.md is the
 * reference; the inspector follows the Keynote-style standard.
 * ==========================================================================*/

#outrangutan {
  /* liquid glass vocabulary: same token names as the index.html sheet, values
     tuned for og's darker well. Shadow tokens are transparent no-ops per the
     2026-07-27 doctrine (depth = translucency + rims, never shadows). */
  --liquid-fill: linear-gradient(145deg, color-mix(in srgb, var(--s2) 56%, transparent), color-mix(in srgb, var(--s1) 40%, transparent)), linear-gradient(90deg, color-mix(in srgb, #fff 5%, transparent), color-mix(in srgb, #fff 2%, transparent));
  --liquid-fill-strong: linear-gradient(145deg, color-mix(in srgb, var(--s2) 86%, transparent), color-mix(in srgb, var(--s1) 62%, transparent)), linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent), color-mix(in srgb, #fff 3%, transparent));
  --liquid-edge: color-mix(in srgb, var(--text) 18%, transparent);
  --liquid-edge-strong: color-mix(in srgb, var(--text) 24%, transparent);
  /* og-local rim equivalents: 1px inner rims over colored fills and dark wells
     (these are rims/fills, not shadows; keep per doctrine) */
  --liquid-edge-lit: rgba(255, 255, 255, .12);
  --liquid-edge-recess: rgba(0, 0, 0, .45);
  --liquid-edge-recess-strong: rgba(0, 0, 0, .6);
  --liquid-highlight: none;
  --liquid-shadow: none;
  --liquid-shadow-raised: none;
  --liquid-blur: 26px;
  --liquid-saturation: 155%;
  --ui-radius-control: 12px;
  --ui-radius-group: 16px;
  --ui-radius-panel: 22px;

  /* local design tokens (derived from app tokens: never hardcoded hex).
     og hairlines stay quieter than chrome rims by design. */
  --og-edge: color-mix(in srgb, var(--text) 8%, transparent);          /* hairline */
  --og-edge-strong: color-mix(in srgb, var(--text) 15%, transparent);
  --og-well: color-mix(in srgb, var(--bg) 88%, #000);                  /* the deck the cards float on */
  --og-card: linear-gradient(180deg, color-mix(in srgb, var(--s1) 94%, transparent), color-mix(in srgb, var(--s1) 84%, transparent));
  --og-r-lg: var(--ui-radius-group);
  --og-r: var(--ui-radius-control);
  --og-r-sm: var(--ui-radius-control);

  position: absolute; inset: 0; display: none;
  flex-direction: column; background: var(--bg); color: var(--text);
  font-family: var(--sans);
}
#outrangutan.on { display: flex; }

/* show-mode lock dims edit affordances */
#outrangutan.locked .og-cue-add, #outrangutan.locked .og-inspector input,
#outrangutan.locked .og-inspector select, #outrangutan.locked .og-cue-del { opacity: .4; pointer-events: none; }
#outrangutan.locked .og-pad.empty, #outrangutan.locked .og-pad-add-slot, #outrangutan.locked .og-pad-edit,
#outrangutan.locked .og-pad-inspector input, #outrangutan.locked .og-pad-inspector select,
#outrangutan.locked .og-p-clear { opacity: .4; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════════
 * 1 · TOP BAR — one glass strip: back · brand · mode · tabs · clock · actions
 * ══════════════════════════════════════════════════════════════════════════ */
.og-bar {
  position: relative; z-index: 6;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; flex: 0 0 auto;
  padding: 9px 14px;
  border-bottom: 1px solid transparent;
  background: var(--liquid-fill-strong, color-mix(in srgb, var(--s2) 82%, transparent));
  /* the glass strip has to terminate somewhere. --liquid-shadow is a no-op by
     doctrine, so the bottom rim rides an INSET shadow, not a border. */
  box-shadow: inset 0 -1px 0 var(--liquid-edge, var(--og-edge));
  -webkit-backdrop-filter: blur(var(--liquid-blur, 22px)) saturate(var(--liquid-saturation, 150%));
  backdrop-filter: blur(var(--liquid-blur, 22px)) saturate(var(--liquid-saturation, 150%));
}
.og-title { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; white-space: nowrap; font-family: var(--syne); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.og-title .og-glyph { display: inline-grid; place-items: center; }
.og-title .brand-ico { width: 30px; height: 30px; }
.og-wordmark { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; }
.og-wm-hi { color: var(--accent); }   /* two-tone wordmark: Out·rangutan follows the theme accent */
.og-mode-badge {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; padding: 4px 9px;
  border-radius: 999px; color: var(--text2);
  border: 1px solid var(--og-edge-strong);
  background: color-mix(in srgb, var(--s2) 60%, transparent);
}
.og-bar-spacer { flex: 1 1 auto; }

/* shared quiet control (bar buttons, sheet buttons, recovery, …):
   paint rides the app --btn-* tokens so it matches .btn-secondary exactly */
.og-bar .og-back, .og-bar-btn, .og-recovery button {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--ui-control-height-compact, 34px);
  padding: 6px 11px; font-size: 13px; font-weight: 650; cursor: pointer;
  border-radius: var(--ui-radius-control, 12px);
  border: var(--btn-hairline);
  background: var(--btn-fill);
  color: var(--btn-ink);
  transition: transform .12s var(--ease, ease), background .15s var(--ease, ease), border-color .15s var(--ease, ease), color .15s var(--ease, ease);
}
.og-bar .og-back:hover, .og-bar-btn:hover, .og-recovery button:hover {
  transform: translateY(-1px); color: var(--btn-ink-hover);
  border-color: transparent;
  background: var(--btn-fill-hover);
}
.og-bar .og-back:active, .og-bar-btn:active, .og-recovery button:active { transform: translateY(0) scale(.98); }
.og-bar-btn .sf-symbol { font-size: 15px; }
/* in-sheet action buttons ride the app capsule idiom (house rule 7) */
.og-bar-btn.og-capsule { border-radius: 999px; }
.og-bar-btn.on { background: color-mix(in srgb, var(--accent) 84%, var(--s2)); border-color: transparent; color: color-mix(in srgb, var(--bg) 18%, #000); }
.og-bar-btn.on:hover { background: color-mix(in srgb, var(--accent) 92%, var(--s2)); border-color: transparent; color: color-mix(in srgb, var(--bg) 18%, #000); }
.og-bar-btn.danger { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: transparent; font-weight: 600; }
.og-bar-btn.danger:hover { color: var(--red); background: color-mix(in srgb, var(--red) 20%, transparent); border-color: transparent; }
.og-program-popout { white-space: nowrap; font-weight: 750; }
.og-program-popout.on { background: color-mix(in srgb, var(--green) 16%, var(--s2)); border-color: transparent; color: var(--green); }
.og-program-popout.dead { background: color-mix(in srgb, var(--red) 14%, var(--s2)); border-color: transparent; color: var(--red); }
/* dead state now reads as a red FILL (matching .og-program-popout.dead) instead
   of a red rim, so the stroke could go without the state going quiet */
#og-output-btn.dead { color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--s2)); border-color: transparent; }

/* Playback / SFX segmented pill */
.og-tabs {
  display: inline-flex; gap: 3px; height: 44px; padding: 3px; margin-left: 4px;
  border-radius: 999px; overflow: hidden;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--s1) 66%, transparent);
}
.og-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 132px; min-height: 36px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  color: var(--text2); font-size: 14px; font-weight: 850; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
}
.og-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.og-tab.on { background: color-mix(in srgb, var(--accent) 88%, #fff); color: color-mix(in srgb, var(--bg) 18%, #000); }
.og-tab .sf-symbol { font-size: 18px; opacity: .96; }

/* wall clock — quiet, mono, tap to toggle format */
.og-wallclock, .og-top-wallclock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--text2); cursor: pointer; user-select: none;
  border-radius: var(--og-r-sm, 8px); padding: 6px 8px;
}
.og-wallclock:hover, .og-top-wallclock:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.og-wallclock:focus-visible, .og-top-wallclock:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 78%, white); outline-offset: 2px; }
.og-wallclock .sf-symbol { font-size: 12px; opacity: .8; }
.og-top-wallclock .sf-symbol { width: 15px; height: 15px; }

/* settings gear + popover menus (Apple-style: icon column, aligned text) */
.og-theme-control, .og-theme-menu > summary, .og-tools-menu > summary {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; list-style: none; cursor: pointer;
  min-height: var(--ui-control-height-compact, 34px);
  border-radius: var(--ui-radius-control, 12px);
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--s2) 80%, transparent);
  color: var(--text2); font-size: 13px; font-weight: 800;
}
.og-theme-control:hover, .og-theme-menu > summary:hover, .og-tools-menu > summary:hover {
  color: var(--text);
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 7%, var(--s2));
}
.og-theme-menu, .og-tools-menu { position: relative; }
.og-theme-menu > summary::-webkit-details-marker, .og-tools-menu > summary::-webkit-details-marker { display: none; }
.og-theme-menu .og-menu-chev { margin-left: 2px; font-size: 10px; transition: transform .15s var(--ease, ease); }
.og-theme-menu[open] .og-menu-chev { transform: rotate(180deg); }
.og-settings-menu { margin-left: 0; }
.og-settings-menu > summary { width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%; justify-content: center; }
.og-settings-menu > summary .sf-symbol { font-size: 22px; }

.og-theme-pop, .og-tools-pop, .og-settings-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 21; display: none;
  border: 1px solid transparent;
  border-radius: 16px;
  background: color-mix(in srgb, var(--s1) 92%, transparent);
  /* a popover opens over the bar, which is itself s1/s2 glass. With shadows
     disabled by doctrine the rim IS the layer boundary, so it is carried as an
     inset shadow (same idiom as the .og-tr-ico and .og-sdk-preview rims). */
  box-shadow: inset 0 0 0 1px var(--liquid-edge, var(--og-edge));
  -webkit-backdrop-filter: blur(var(--liquid-blur, 26px)) saturate(var(--liquid-saturation, 150%));
  backdrop-filter: blur(var(--liquid-blur, 26px)) saturate(var(--liquid-saturation, 150%));
}
.og-theme-pop { width: min(340px, calc(100vw - 28px)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 11px; }
.og-theme-menu[open] .og-theme-pop { display: grid; }
.og-theme-pop .theme-swatch { min-width: 0; gap: 6px; padding: 8px 4px; border-radius: 12px; }
.og-theme-pop .ts-preview { width: 34px; height: 34px; }
.og-theme-pop .ts-name { max-width: 100%; font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
.og-tools-pop { z-index: 20; min-width: 210px; padding: 8px; }
.og-tools-menu[open] .og-tools-pop { display: grid; gap: 7px; }
.og-tools-pop .og-bar-btn { justify-content: flex-start; width: 100%; }
.og-tools-sep { height: 1px; background: var(--og-edge); margin: 3px 2px; }

.og-settings-pop { width: 330px; padding: 10px 8px; grid-template-columns: 1fr; gap: 7px; }
.og-theme-menu[open] .og-settings-pop { display: grid; }
.og-settings-label { color: var(--text3); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px 3px; border: 0; }
.og-settings-pop .og-theme-grid, .og-settings-pop .og-tools-pop-inline { display: flex; flex-direction: column; gap: 0; }
.og-settings-pop .theme-swatch, .og-settings-pop .og-tools-pop-inline .og-bar-btn {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; justify-content: start;
  width: 100%; min-height: 34px; padding: 5px 8px;
  border: 0 !important; border-radius: 7px; background: transparent !important; box-shadow: none !important;
  color: var(--text2); text-align: left; font-size: 13px; font-weight: 760;
}
.og-settings-pop .theme-swatch:hover, .og-settings-pop .og-tools-pop-inline .og-bar-btn:hover {
  color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent) !important; transform: none;
}
.og-settings-pop .theme-swatch.active, .og-settings-pop .theme-swatch[aria-pressed="true"],
.og-settings-pop .og-tools-pop-inline .og-bar-btn.on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent) !important; }
.og-settings-pop .theme-swatch.active::after, .og-settings-pop .theme-swatch[aria-pressed="true"]::after,
.og-settings-pop .og-tools-pop-inline .og-bar-btn.on::after { content: "✓"; grid-column: 3; color: var(--accent); font-weight: 900; }
/* the preview chip's whole job is to SHOW a theme colour (background comes in
   inline from CUEOLA_THEME_SWATCHES), so it cannot be given a fill. It gets an
   inset rim instead of a border: the colour data survives, the chip still ends. */
.og-settings-pop .theme-swatch .ts-preview { grid-column: 1; width: 18px; height: 18px; border-radius: 4px; border: 1px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent); }
.og-settings-pop .theme-swatch .ts-name,
.og-settings-pop .og-tools-pop-inline .og-bar-btn > span:not(.sf-symbol) { grid-column: 2; min-width: 0; justify-self: start; overflow: hidden; text-overflow: ellipsis; }
.og-settings-pop .og-tools-pop-inline .og-bar-btn .sf-symbol { grid-column: 1; width: 18px; height: 18px; justify-self: start; color: currentColor; }

/* themes submenu (drill row + circular swatch grid) */
.og-themes-submenu { display: block; }
.og-themes-submenu > summary {
  list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center;
  min-height: 34px; padding: 5px 8px; border-radius: 7px; cursor: pointer;
  color: var(--text2); font-size: 13px; font-weight: 760; white-space: nowrap; user-select: none;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
}
.og-themes-submenu > summary::-webkit-details-marker { display: none; }
.og-themes-submenu > summary:hover, .og-themes-submenu[open] > summary { color: var(--text); }
.og-themes-submenu > summary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.og-themes-submenu > summary .og-tr-ico {
  grid-column: 1; justify-self: start; width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(from 120deg, var(--accent), var(--green), var(--yellow), var(--accent));
  box-shadow: inset 0 0 0 1px var(--liquid-edge);
}
.og-themes-submenu > summary .og-tr-lbl { grid-column: 2; justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.og-themes-submenu > summary .og-tr-val { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; color: var(--text3); font-size: 12px; font-weight: 600; }
.og-themes-submenu > summary .og-tr-chev { transition: transform .18s var(--ease, ease); font-size: 13px; line-height: 1; }
.og-themes-submenu[open] > summary .og-tr-chev { transform: rotate(90deg); }
.og-settings-pop .og-themes-submenu .og-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; padding: 2px 2px 6px; }
.og-settings-pop .og-themes-submenu .theme-swatch {
  display: flex !important; flex-direction: column; align-items: center; gap: 8px;
  min-height: 0; width: 100%; padding: 8px 4px;
  border: 0 !important; border-radius: 12px; background: transparent !important; box-shadow: none !important;
  color: var(--text2); text-align: center; font-weight: 600; white-space: normal;
}
.og-settings-pop .og-themes-submenu .theme-swatch:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent) !important; }
.og-settings-pop .og-themes-submenu .theme-swatch:is(.active, [aria-pressed="true"]) { background: transparent !important; }
.og-settings-pop .og-themes-submenu .theme-swatch:is(.active, [aria-pressed="true"])::after { content: none; }
.og-settings-pop .og-themes-submenu .ts-preview { width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.og-settings-pop .og-themes-submenu .theme-swatch:is(.active, [aria-pressed="true"]) .ts-preview { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.og-settings-pop .og-themes-submenu .ts-name { max-width: 100%; font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; color: var(--text2); }
.og-settings-pop .og-themes-submenu .theme-swatch:is(.active, [aria-pressed="true"]) .ts-name { color: var(--accent); }

/* module-only icons registered on the shared sf-symbol channel. Root-relative
   on purpose: relative url() in a custom property resolves against the stylesheet
   that USES the var (assets/sf-symbols.css), not the one that declares it. */
.sf-symbol[data-symbol="og.document.plus"] { --sf-symbol: url("/assets/icons/document.badge.plus.svg"); }
.sf-symbol[data-symbol="og.scope"] { --sf-symbol: url("/assets/icons/scope.svg"); }

/* ════════════════════════════════════════════════════════════════════════════
 * 2 · STAGE — a deep well; the panes float on it as glass cards
 * ══════════════════════════════════════════════════════════════════════════ */
.og-stage { flex: 1 1 auto; min-height: 0; display: flex; }
.og-sfx { flex: 1 1 auto; display: none; min-height: 0; }
.og-stage.sfx .og-main { display: none !important; }
.og-stage.sfx .og-sfx { display: flex; flex-direction: column; }

.og-main {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    var(--og-well);
}
.og-sfx {
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    var(--og-well);
}
.og-toprow { flex: 1 1 auto; display: flex; min-height: 0; gap: 10px; padding: 10px 10px 0; }
.og-toprow > .og-pane { min-width: 0; min-height: 0; }

/* every pane is a floating card */
.og-pane {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border: 1px solid var(--og-edge);
  border-radius: var(--og-r-lg);
  background: var(--og-card);
  overflow: hidden;
}
.og-pane-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text3);
  border-bottom: 1px solid var(--og-edge);
  background: color-mix(in srgb, var(--s1) 55%, transparent);
}
.og-pane-head .sf-symbol { font-size: 13px; }
.og-pane-head .og-pane-actions { margin-left: auto; display: flex; gap: 6px; }
.og-pane-head .og-bar-btn { min-height: 30px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }

/* pane sizing (fixed proportions — resizing was removed by owner decision) */
.og-cuelist-pane { flex: 0 0 var(--og-w-cuelist, 300px); }
.og-program-pane { flex: 1 1 auto; min-width: 320px; align-items: stretch; }
.og-inspector-pane { flex: 0 0 var(--og-w-inspector, 300px); max-height: none; }

/* shared bottom region (clip editor; + relocated inspector at medium/narrow) */
.og-bottom { display: flex; flex-direction: column; min-height: 0; margin: 10px; gap: 0; }
.og-bottom-tabs {
  display: none; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 8px 2px;
}
.og-bottom-tab {
  min-height: 40px; padding: 6px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--s2) 80%, transparent);
  border: 1px solid transparent;
  color: var(--text2); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease), border-color .15s var(--ease, ease);
}
.og-bottom-tab:hover { color: var(--text); border-color: transparent; background: color-mix(in srgb, var(--text) 7%, var(--s2)); }
.og-bottom-tab.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--s2)); border-color: transparent; }
.og-bottom-hint { margin-left: auto; font-size: 12px; color: var(--text3); white-space: nowrap; }
.og-main.og-has-sel .og-bottom-hint { display: none; }

.og-edit-pane { flex: 0 0 var(--og-h-edit, 200px); display: flex; flex-direction: column; min-height: 0; }
.og-edit-body { flex: 1 1 auto; overflow: auto; padding: 10px 14px; }
.og-edit-empty { color: var(--text3); font-size: 13px; text-align: center; padding: 18px 8px; }
.og-edit-actions { display: flex; gap: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
 * 3 · CUE LIST
 * ══════════════════════════════════════════════════════════════════════════ */
.og-cuelist { overflow: auto; flex: 1 1 auto; padding: 6px 8px; }
.og-cue {
  position: relative;
  display: grid; grid-template-columns: 30px 22px 1fr auto; align-items: center; gap: 9px;
  min-height: 44px; padding: 7px 10px 7px 13px; margin: 2px 0;
  border-radius: var(--og-r); cursor: pointer;
  transition: background .12s var(--ease, ease);
}
.og-cue:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.og-cue.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.og-cue.playing { background: color-mix(in srgb, var(--red) 15%, transparent); box-shadow: inset 3px 0 0 var(--red); }
.og-cue.armed-off { opacity: .45; }
.og-cue.broken { background: color-mix(in srgb, var(--red) 8%, transparent); }
.og-cue.broken .og-cue-name { color: color-mix(in srgb, var(--red) 70%, var(--text)); }
.og-cue-num { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text3); font-variant-numeric: tabular-nums; text-align: right; }
.og-cue.playing .og-cue-num, .og-cue.selected .og-cue-num { color: var(--text); }
.og-cue-typeicon { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; color: var(--bg); box-shadow: inset 0 0 0 1px var(--liquid-edge-lit); }
.og-cue-typeicon .sf-symbol { font-size: 11px; color: var(--bg); }
.og-type-video { background: var(--video); }
.og-type-audio { background: var(--green); }
.og-type-image { background: var(--yellow); }
.og-type-video-fg { color: var(--video); }
.og-type-audio-fg { color: var(--green); }
.og-cue-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-cue-meta { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.og-cue-cont { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--og-edge-strong); color: var(--text2); }
.og-cue-cont .sf-symbol { font-size: 10px; vertical-align: -1px; }
/* these two sit shoulder to shoulder with plain .og-cue-cont chips that still
   carry a rim, so each needs a FILL to stay a pill once its own rim is gone */
.og-cue-sfx { border-color: transparent; background: color-mix(in srgb, var(--green) 9%, transparent); color: var(--green); font-weight: 800; letter-spacing: .04em; }
/* the broken row also carries a red fill (.og-cue.broken) + red name; the chip
   still needs its own wash so it reads as a pill next to its siblings */
.og-cue-bad { color: var(--red) !important; border-color: transparent !important; background: color-mix(in srgb, var(--red) 10%, transparent); font-weight: 800; }
.og-cue-color-dot { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3px; border-radius: 999px; }
.og-cue-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--text2); }
.og-cue-empty-title { font-family: var(--syne); font-size: 16px; font-weight: 800; color: var(--text); }
.og-cue-empty-sub { font-size: 13px; line-height: 1.55; color: var(--text2); }
.og-cue-meter { display: inline-block; vertical-align: middle; margin-left: 6px; position: relative; width: 56px; height: 5px; background: var(--s3); border-radius: 3px; overflow: hidden; }
.og-cue-meter-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--green) 0%, var(--green) 55%, var(--yellow) 80%, var(--red) 100%); }

/* drop zone + inline matte button — every "create a cue" affordance in one row */
.og-cue-add-row { display: flex; gap: 8px; align-items: stretch; margin: 8px 10px 10px; }
.og-cue-add-row #og-cue-add { flex: 1; min-width: 0; margin: 0; }
.og-matte-inline { flex: 0 0 auto; }
.og-cue-add {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; text-align: left;
  margin: 8px 10px 10px; padding: 12px 14px;
  border: 1.5px dashed var(--og-edge-strong); border-radius: var(--og-r);
  color: var(--text2); font-size: 13px; cursor: pointer; background: transparent;
  transition: border-color .15s var(--ease, ease), color .15s var(--ease, ease), background .15s var(--ease, ease);
}
.og-cue-add .sf-symbol { width: 20px; height: 20px; color: var(--text2); }
.og-cue-add:hover, .og-cue-add.drag { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.og-cue-add:hover .sf-symbol, .og-cue-add.drag .sf-symbol { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════════
 * 4 · PROGRAM — monitor bezel, meters rail, scopes, count clock, transport
 * ══════════════════════════════════════════════════════════════════════════ */
.og-program-pane {
  background:
    radial-gradient(70% 46% at 50% 26%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%),
    var(--og-card);
  container-type: inline-size;
}

/* monitor row: bezel flexes, VU/output rail pinned right at monitor height */
.og-program-top { display: flex; align-items: stretch; gap: 14px; padding: 12px 16px 4px; min-height: 0; }
/* The monitor is ALWAYS 16:9: it self-sizes from its width (never stretched to
   the row height), and the meter rail stretches to match it. */
.og-program-top > .og-program-wrap { flex: 1 1 auto; align-self: flex-start; min-width: 0; width: auto; height: auto; max-width: 100%; margin: 0; }
.og-program-wrap {
  position: relative; background: #000; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--og-edge-strong);
  box-shadow: inset 0 0 0 1px var(--liquid-edge-recess-strong);
}
.og-program-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.og-deck { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; display: block; }
.og-deck.front { z-index: 2; }
.og-program-wrap video.og-deck:not(.front) { z-index: 1; }
.og-img-deck { z-index: 3; opacity: 0; pointer-events: none; object-fit: contain; }
.og-key { display: none; opacity: 1 !important; z-index: 4; }   /* WebGL keyer overlay */
.og-key.on { display: block; }
.og-program-tag {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .12em;
  padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.og-program-status {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 999px;
}
.og-status-idle { background: rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .75); }
.og-status-pre { background: var(--yellow); color: #000; }
.og-status-play { background: var(--red); color: #fff; animation: og-pulse 1.4s ease-in-out infinite; }
.og-status-pause { background: var(--orange); color: #000; }
@keyframes og-pulse { 50% { opacity: .55; } }

/* VU pair + vertical output fader */
.og-meters { flex: 0 0 auto; display: flex; gap: 14px; align-items: stretch; }
.og-vu-col, .og-fader-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.og-vu-pair { flex: 1 1 auto; display: flex; gap: 5px; align-items: stretch; min-height: 40px; }
.og-vu { position: relative; width: 8px; border-radius: 4px; background: color-mix(in srgb, var(--s3) 80%, #000); box-shadow: inset 0 0 0 1px var(--liquid-edge-recess); overflow: hidden; }
.og-vu-fill-y { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom center; transform: scaleY(0); background: linear-gradient(0deg, var(--green) 0%, var(--green) 55%, var(--yellow) 80%, var(--red) 100%); }
.og-meter-col-lbl { flex: 0 0 auto; font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.og-master { display: inline-flex; align-items: center; gap: 6px; }
.og-master-lbl { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--text3); }
.og-meter { position: relative; width: 84px; height: 8px; background: var(--s3); border: 1px solid var(--og-edge); border-radius: 3px; overflow: hidden; display: inline-block; }
.og-meter-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--green) 0%, var(--green) 55%, var(--yellow) 80%, var(--red) 100%); }
.og-meter-peak { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0; }

.og-vfader {
  flex: 1 1 auto; -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr; direction: rtl;
  width: 20px; min-height: 40px; padding: 0; margin: 0;
  background: transparent; cursor: pointer; touch-action: none; accent-color: var(--accent);
}
.og-vfader::-webkit-slider-runnable-track { width: 7px; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, .16)); border: 1px solid transparent; }
.og-vfader::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-left: -6.5px; border-radius: 50%; background: var(--accent); border: 2px solid color-mix(in srgb, var(--bg) 86%, #fff); box-shadow: none; }
.og-vfader::-moz-range-track { width: 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, .16)); border: 1px solid transparent; }
.og-vfader::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid color-mix(in srgb, var(--bg) 86%, #fff); }
.og-vfader:focus-visible { outline: none; }
.og-vfader:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* scopes strip (hidden until toggled) */
.og-scopes { display: none; gap: 10px; padding: 6px 16px 0; align-items: stretch; }
.og-scopes.on { display: flex; }
.og-scope { position: relative; min-width: 0; overflow: hidden; height: 118px; height: clamp(96px, 16cqh, 156px); border: 1px solid var(--og-edge-strong); border-radius: var(--og-r); background: #04060a; }
.og-scope-wfm { flex: 1 1 auto; }
.og-scope-vec { flex: 0 0 auto; aspect-ratio: 1; }
.og-scope-lbl { position: absolute; top: 6px; left: 9px; z-index: 1; pointer-events: none; font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: rgba(214, 232, 240, .62); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.og-scope canvas { display: block; width: 100%; height: 100%; }
.og-scopes-btn.on { background: color-mix(in srgb, var(--accent) 84%, var(--s2)); color: color-mix(in srgb, var(--bg) 18%, #000); border-color: transparent; }

/* count-out clock — with the monitor, the loudest thing here */
.og-clock {
  /* Owner mockup 2026-07-15: time big and centered under the program monitor,
     transport centered beneath it. */
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 100%; margin: 0; padding: 4px 16px 8px; border: 0; background: transparent; cursor: pointer; user-select: none;
}
.og-clock-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.og-clock-label { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.og-clock-dir {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--og-edge-strong); border-radius: var(--og-r-sm, 8px);
  background: color-mix(in srgb, var(--s2) 80%, transparent); color: var(--text2); cursor: pointer;
}
/* hover ADDS paint: deeper fill, and the resting rim above is left standing
   (it used to be overridden to transparent, which erased the button on hover) */
.og-clock-dir:hover { color: var(--text); background: color-mix(in srgb, var(--text) 9%, var(--s2)); }
.og-clock-dir .sf-symbol { font-size: 12px; transition: transform .16s ease; transform: rotate(90deg); }   /* down = counting down */
.og-clock-dir.is-elapsed .sf-symbol { transform: rotate(-90deg); }                                          /* up = counting up */
.og-clock-duration { color: var(--text3); font: 800 10px/1 var(--mono-num, monospace); letter-spacing: .08em; }
/* SMPTE digits: tabular, pane-scaled; color strictly by count direction.
   LED face matches Cueola main's production clocks — the one sanctioned
   hardcoded-hex zone per DESIGN_GUIDELINES.md. */
.og-clock-time { font-family: 'Courier New', Courier, monospace; font-weight: 900; font-size: clamp(40px, 11cqw, 92px); line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #ff3030; background: #060709; border: 1px solid #1c2028; border-radius: 2px; padding: 8px 20px; }
.og-clock.og-count-down .og-clock-time { color: #ff3030; }
.og-clock.og-count-up .og-clock-time { color: #3ad090; }

/* media transport — round icon cluster with quiet captions (kept from the
   owner-approved redesign; single source of transport styling) */
.og-transport { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin: 14px 0 20px; padding: 0 14px; }
.og-transport-group { display: flex; align-items: flex-start; gap: 18px; }
.og-tctl { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 60px; }
.og-tctl-go { min-width: 84px; }
/* the rule IS the element here: a bare vertical hairline holding the destructive
   column apart from the four safe transport buttons. Nothing to fill. */
.og-tctl-panic { margin-left: 4px; padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.og-tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: color-mix(in srgb, var(--s2) 92%, transparent); color: var(--text); cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .1s ease, color .14s ease;
}
.og-tbtn .sf-symbol { font-size: 21px; }
.og-tbtn:hover { background: color-mix(in srgb, var(--text) 9%, var(--s2)); border-color: transparent; }
.og-tbtn:active { transform: scale(.94); }
/* transport identity is 100% fill now: solid green = ready, solid yellow =
   paused, red-tinted disc = panic. No rims. */
.og-tbtn-go {
  width: 72px; height: 72px;
  background: color-mix(in srgb, var(--green) 86%, #fff);
  border-color: transparent;
  color: color-mix(in srgb, var(--bg) 18%, #000);
}
.og-tbtn-go .sf-symbol { font-size: 30px; }
.og-tbtn-go:hover { background: color-mix(in srgb, var(--green) 94%, #fff); border-color: transparent; }
.og-tbtn-go.paused { background: color-mix(in srgb, var(--yellow) 82%, #fff); border-color: transparent; }
/* panic had NO fill: it was a red outline and nothing else, so de-stroking it
   left a 20% tint that vanished on the monochrome themes (panda's --red is a
   grey). It now mirrors GO exactly: a SOLID disc with dark ink, so it stays the
   loudest thing in the cluster on all nine themes. */
.og-tbtn-panic { background: color-mix(in srgb, var(--red) 86%, #fff); border: 1.5px solid transparent; color: color-mix(in srgb, var(--bg) 18%, #000); }
.og-tbtn-panic:hover { background: color-mix(in srgb, var(--red) 86%, #000); border-color: transparent; color: #fff; }
.og-tcap { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
/* keycap chip: no fill of its own once the rim went, so it takes the .og-foot
   .og-kbd fill. The two keycap treatments have to read the same. */
.og-tbtn-key { font-family: var(--mono); font-size: 9px; line-height: 1; font-weight: 600; padding: 2px 5px; border: 1px solid transparent; border-radius: 4px; background: color-mix(in srgb, var(--s3) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); color: var(--text2); }
.og-tbtn-key:empty { display: none; }
@container (max-width: 560px) {
  .og-transport { gap: 12px; }
  .og-transport-group { gap: 10px; }
  .og-tctl, .og-tctl-go { min-width: 0; }
  .og-tctl-panic { padding-left: 12px; }
  .og-tbtn { width: 46px; height: 46px; }
  .og-tbtn .sf-symbol { font-size: 18px; }
  .og-tbtn-go { width: 60px; height: 60px; }
  .og-tbtn-go .sf-symbol { font-size: 25px; }
  .og-tcap { font-size: 8.5px; letter-spacing: .04em; }
}

/* recovery banner (crash restore) */
.og-recovery { display: none; align-items: center; gap: 12px; padding: 9px 14px; background: color-mix(in srgb, var(--yellow) 16%, var(--s1)); border-bottom: 1px solid var(--og-edge); font-size: 12.5px; color: var(--text); }
.og-recovery.on { display: flex; }

/* ════════════════════════════════════════════════════════════════════════════
 * 5 · INSPECTOR — Keynote-style standard: icon tabs, one flat page per group
 * ══════════════════════════════════════════════════════════════════════════ */
.og-inspector { display: block; overflow: auto; flex: 1 1 auto; padding: 0; }
.og-inspector .insp-head { padding: 9px 10px 8px; }
.og-insp-body { padding: 11px 14px 14px; }
.og-insp-empty { color: var(--text3); font-size: 13px; line-height: 1.45; padding: 16px 14px; }
/* section + subsection dividers: pure rules, no box to fill and no shadow to
   hang depth on, so the stroke stays (doctrine case "the element IS the line") */
.og-insp-sec + .og-insp-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.og-sec-title { font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--text); margin: 2px 0 3px; }
.og-insp-sub { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--accent); margin: 8px 0 -2px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.og-insp-meta { font-family: var(--mono); font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; margin: 2px 4px 8px; }
.og-inspector .ui-context-pill input { font-family: var(--syne); font-weight: 800; font-size: 14.5px; }

/* fields */
.og-field { display: flex; flex-direction: column; gap: 3px; }
.og-field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
/* FIELD IDENTITY (all nine input/select rules in this file follow this recipe).
   Two moves, no border: the fill steps down one surface (s2 -> s3) so the field
   is a different plane from its container, and a 1px INSET shadow rings it. The
   fill alone cannot do it: on the dark themes even --s4 only reaches 1.34:1
   against the inspector card, so the ring is what actually ends the field. */
.og-field input, .og-field select {
  min-height: var(--ui-control-height, 40px);
  background: color-mix(in srgb, var(--s3) 88%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border));
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control, 12px);
  color: var(--text); font-size: 14px; padding: 8px 10px; font-family: var(--sans); width: 100%;
}
.og-field input:focus, .og-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.og-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.og-field-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.og-field-row3 .og-field label { font-size: 11px; }
.og-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); cursor: pointer; user-select: none; }
.og-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.og-check-inline { font-size: 12px; }

/* the kit: label-left rows separated by hairlines, controls on the panel bg */
.og-kit .og-field { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 42px; padding: 5px 0; }
.og-kit .og-field + .og-field, .og-kit .og-field-row + .og-field, .og-kit .og-field + .og-field-row,
.og-kit .og-field + details, .og-kit details + .og-field, .og-kit details + label,
.og-kit .og-field-row + .og-field-row, .og-kit .og-field + .og-check, .og-kit .og-field-row3 + .og-check { border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
.og-insp-sec .og-kit > .og-field:first-child, .og-insp-sec .og-kit > .og-field-row:first-child { border-top: 0; }
.og-kit .og-field > label { flex: 1 0 auto; max-width: 46%; font-size: 13.5px; font-weight: 550; color: var(--text); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.og-kit .og-field input[type="text"] { flex: 1; width: auto; min-width: 0; }
.og-kit .og-field input[type="number"] { width: 70px; }
.og-kit .og-field input[type="range"] { flex: 1; width: auto; min-width: 80px; }
.og-kit .og-field select { width: auto; max-width: 54%; }
.og-kit .og-field:has(.ui-seg) { flex-wrap: wrap; }
.og-kit .og-field .ui-seg { flex: 1 1 100%; min-width: 0; max-width: none; margin-bottom: 6px; }
.og-kit .og-field .ui-stepper input[type="number"] { width: 56px; min-height: 30px; border: none; background: transparent; box-shadow: none; text-align: center; font-family: var(--mono-num, var(--mono)); font-size: 12px; padding: 0; border-radius: 0; }
.og-kit .og-field .ui-stepper input[type="number"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 78%, white); outline-offset: 1px; }
.og-kit .og-field-row .og-field, .og-kit .og-field-row3 .og-field { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; max-width: none; }
.og-kit .og-field-row .og-field > label, .og-kit .og-field-row3 .og-field > label { max-width: none; font-size: 11.5px; color: var(--text2); font-weight: 650; }
.og-kit .og-field-row .og-field input, .og-kit .og-field-row .og-field select,
.og-kit .og-field-row3 .og-field input, .og-kit .og-field-row3 .og-field select { width: 100%; max-width: none; }
.og-kit .og-check { justify-content: space-between; padding: 8px 0; min-height: 42px; }
.og-eq-details > summary.og-drill { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 42px; cursor: pointer; font-size: 12.5px; font-weight: 550; color: var(--text); }
.og-eq-details > summary.og-drill::-webkit-details-marker { display: none; }
.og-drill-val { margin-left: auto; font-family: var(--mono-num, var(--mono)); font-size: 11px; color: var(--text2); }
.og-eq-details[open] .ui-chevron { transform: rotate(90deg); }
.og-eq-details .og-field-row3 { padding-bottom: 8px; }
.og-insp-sec .ui-stepper { justify-self: end; margin-left: auto; }

/* segmented / stepper / number polish (kit controls come from index.html) */
.og-inspector .ui-seg, .og-pad-inspector .ui-seg { overflow: hidden; }
.og-inspector .ui-seg-btn, .og-pad-inspector .ui-seg-btn { min-height: 34px; color: var(--text); font-weight: 800; text-shadow: none; }
.og-inspector .ui-seg-btn.on, .og-pad-inspector .ui-seg-btn.on { color: color-mix(in srgb, var(--bg) 18%, #000); background: var(--accent); }
.og-inspector input[type="number"], .og-pad-inspector input[type="number"] { -moz-appearance: textfield; text-align: center; }
.og-inspector input[type="number"]::-webkit-outer-spin-button, .og-inspector input[type="number"]::-webkit-inner-spin-button,
.og-pad-inspector input[type="number"]::-webkit-outer-spin-button, .og-pad-inspector input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ranges: round accent thumb on a soft track */
.og-field input[type="range"], .og-sfx-master input[type="range"], .og-pad-inspector input[type="range"] {
  -webkit-appearance: none; appearance: none; min-height: 30px; height: 30px; padding: 0; border: 0;
  background: transparent; box-shadow: none; cursor: pointer; touch-action: pan-y; accent-color: var(--accent);
}
.og-field input[type="range"]::-webkit-slider-runnable-track, .og-sfx-master input[type="range"]::-webkit-slider-runnable-track, .og-pad-inspector input[type="range"]::-webkit-slider-runnable-track {
  height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, .16)); border: 1px solid transparent;
}
.og-field input[type="range"]::-webkit-slider-thumb, .og-sfx-master input[type="range"]::-webkit-slider-thumb, .og-pad-inspector input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9.5px; border-radius: 50%; background: var(--accent); border: 2px solid color-mix(in srgb, var(--bg) 86%, #fff); box-shadow: none;
}
.og-field input[type="range"]::-moz-range-track, .og-sfx-master input[type="range"]::-moz-range-track, .og-pad-inspector input[type="range"]::-moz-range-track {
  height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, .16)); border: 1px solid transparent;
}
.og-field input[type="range"]::-moz-range-thumb, .og-sfx-master input[type="range"]::-moz-range-thumb, .og-pad-inspector input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid color-mix(in srgb, var(--bg) 86%, #fff);
}

/* cue color swatches */
.og-swatches { display: flex; gap: 8px; }
.og-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.og-swatch.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }

/* destructive actions: quiet red fill */
.og-cue-del, .og-p-clear {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ui-control-height-compact, 34px); margin-top: 4px; padding: 8px;
  border-radius: var(--ui-radius-control, 12px); font-size: 13.5px; cursor: pointer; grid-column: 1 / -1;
  background: color-mix(in srgb, var(--red) 14%, var(--s2));
  border: 1px solid transparent;
  color: var(--red);
  transition: transform .12s var(--ease, ease), background .15s var(--ease, ease);
}
.og-cue-del:hover, .og-p-clear:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--red) 22%, var(--s2)); border-color: transparent; }
.og-inspector .og-cue-del { margin-top: 12px; }
.og-p-clear { flex: 1; margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════════════
 * 6 · CLIP EDITOR — trim/scrub track
 * ══════════════════════════════════════════════════════════════════════════ */
.og-trk-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 12px; }
.og-trk-name { font-weight: 700; font-size: 13px; }
.og-trk-times { font-family: var(--mono-num, monospace); color: var(--text2); font-variant-numeric: tabular-nums; }
.og-trk-times b { color: var(--text); }
.og-track { position: relative; height: 58px; background: #05070a; border: 1px solid var(--og-edge-strong); border-radius: var(--og-r); overflow: hidden; cursor: pointer; user-select: none; }
.og-track-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.og-track-strip { position: absolute; inset: 0; display: flex; opacity: .46; }
.og-track-strip .frame { flex: 1 1 0; min-width: 0; background-position: center; background-size: cover; background-color: #05070a; box-shadow: inset -1px 0 0 var(--liquid-edge-recess); }
.og-track-strip .frame:last-child { box-shadow: none; }
.og-track-strip.loading { opacity: .22; }
.og-track-strip.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); background-size: 200% 100%; animation: ogStripShimmer 1.1s linear infinite; }
@keyframes ogStripShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.og-track-thumb.og-track-audio { background: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--green) 34%, transparent) 3px 4px); opacity: .5; }
.og-track-region { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); border-left: 2px solid var(--green); border-right: 2px solid var(--red); }
.og-track-h { position: absolute; top: 0; bottom: 0; width: 12px; margin-left: -6px; cursor: ew-resize; z-index: 3; }
.og-track-h::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; }
.og-track-in::before { background: var(--green); }
.og-track-out::before { background: var(--red); }
.og-track-h::after { content: ''; position: absolute; top: 50%; left: 1px; width: 10px; height: 20px; margin-top: -10px; border-radius: 3px; }
.og-track-in::after { background: var(--green); }
.og-track-out::after { background: var(--red); }
.og-track-play { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; z-index: 4; pointer-events: none; }
.og-trk-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 9px; }

/* waveform peaks overlay (persisted per media record) */
.og-wave { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--green) 75%, transparent); pointer-events: none; }
.og-track-thumb.og-track-audio:has(.og-wave) { background: none; opacity: .9; }
.og-wave-host { position: relative; }
.og-wave-host .og-wave { opacity: .55; }

/* ════════════════════════════════════════════════════════════════════════════
 * 7 · SFX BOARD — banks, search, pad grid, master, side panes
 * ══════════════════════════════════════════════════════════════════════════ */
.og-sfx > .og-toprow { flex: 1 1 auto; display: flex; min-height: 0; }
.og-sfx .og-sfx-main { flex: 1 1 auto; min-width: 0; }
.og-sfx .og-sfx-side { flex: 0 0 var(--og-w-inspector, 300px) !important; min-width: 0; }
.og-sfx > #og-sfx-edit-pane { flex: 0 0 var(--og-h-edit, 200px); margin: 10px; }
.og-sfx > .og-toprow { padding: 10px 10px 0; gap: 10px; }

#og-sfx-stop {
  background: color-mix(in srgb, var(--red) 20%, var(--s3)) !important;
  border-color: transparent !important;
  color: color-mix(in srgb, var(--text) 88%, var(--red)) !important;
}
#og-sfx-stop .sf-symbol { font-size: 19px; }
#og-sfx-stop:hover { background: color-mix(in srgb, var(--red) 27%, var(--s3)) !important; border-color: transparent !important; }

/* bank bar: segmented pills */
.og-bank-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--og-edge); overflow-x: auto; flex: 0 0 auto; }
.og-bank-tab { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--s2) 80%, transparent); border: 1px solid transparent; border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 650; color: var(--text2); cursor: pointer; white-space: nowrap; }
.og-bank-tab:hover { background: var(--s3); color: var(--text); }
.og-bank-tab.on { background: color-mix(in srgb, var(--accent) 18%, var(--s2)); border-color: transparent; color: var(--text); }
.og-bank-tab.editing { cursor: text; padding-top: 3px; padding-bottom: 3px; }
.og-bank-rename { width: 9ch; min-width: 5ch; max-width: 22ch; background: transparent; border: none; outline: none; padding: 0; margin: 0; font: inherit; color: var(--text); caret-color: var(--accent); }
.og-bank-rename:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 78%, white); outline-offset: 2px; }
.og-bank-count { font-family: var(--mono); font-size: 10px; background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; padding: 1px 6px; color: var(--text2); font-variant-numeric: tabular-nums; }
.og-bank-x { font-size: 16px; line-height: 1; color: var(--text3); padding: 0 1px; border-radius: 4px; }
.og-bank-x:hover { color: var(--red); }
.og-bank-edit { line-height: 1; color: var(--text3); padding: 0 1px; border-radius: 4px; }
.og-bank-edit:hover { color: var(--accent); }
.og-bank-edit .sf-symbol { font-size: 12.5px; }
.og-bank-add { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--s2) 80%, transparent); border: 1px dashed var(--og-edge-strong); color: var(--text2); cursor: pointer; flex: 0 0 auto; display: inline-grid; place-items: center; font-size: 15px; }
.og-bank-add:hover { border-color: var(--accent); color: var(--accent); }

/* search */
.og-pad-search { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--s2) 82%, transparent); border: 1px solid transparent; }
/* the inner input carries outline:none, so the PILL is the field's only keyboard
   focus indicator. It uses the same 2px accent outline as every other focus mark
   in the module (og-wallclock, og-bank-rename) and joins the forced-colors group
   at the bottom of the file, instead of a lone 1px border nobody else uses. */
.og-pad-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 78%, white);
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white);
  outline-offset: 2px;
}
.og-pad-search .sf-symbol { font-size: 15px; color: var(--accent); }
.og-pad-search input { background: transparent; border: 0; color: var(--text); font-size: 13px; font-weight: 600; width: clamp(120px, 15vw, 210px); outline: none; font-family: var(--sans); }
.og-pad-search input::placeholder { color: var(--text3); font-weight: 400; }
.og-search-glyph { position: relative; width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); }
.og-search-glyph::before { content: ''; position: absolute; width: 10px; height: 10px; left: 1px; top: 1px; border: 2px solid currentColor; border-radius: 50%; }
.og-search-glyph::after { content: ''; position: absolute; width: 8px; height: 2px; right: 0; bottom: 2px; border-radius: 999px; background: currentColor; transform: rotate(45deg); transform-origin: center; }
.og-pad-grid-wrap { flex: 1 1 auto; position: relative; min-height: 0; display: flex; }
.og-pad-grid-wrap .og-pad-grid { flex: 1 1 auto; height: 100%; }
.og-pad-search-results { display: none; position: absolute; inset: 0 0 auto 0; max-height: 100%; overflow: auto; background: color-mix(in srgb, var(--s1) 97%, var(--bg)); border-bottom: 1px solid var(--og-edge); z-index: 6; }
.og-pad-search-results.on { display: block; }
.og-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--og-edge); cursor: pointer; }
.og-search-row:hover { background: var(--s2); }
.og-search-emoji { font-size: 18px; width: 24px; text-align: center; flex: 0 0 auto; }
.og-search-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.og-search-name { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-search-bank { font-size: 11px; color: var(--text3); white-space: nowrap; }
.og-search-fire { background: var(--s3); border: 1px solid transparent; border-radius: 6px; color: var(--text2); width: 30px; height: 26px; font-size: 14px; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.og-search-fire:hover { background: var(--green); color: var(--s1); border-color: transparent; }
.og-search-none { padding: 16px; text-align: center; color: var(--text3); font-size: 12.5px; }

/* pads: color-lit tiles */
.og-pad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); grid-auto-rows: minmax(104px, 126px); gap: 10px; padding: 14px; overflow: auto; align-content: start; }
.og-pad {
  position: relative; min-height: 104px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; text-align: left;
  border-radius: var(--og-r); color: var(--text);
  border: 1px solid var(--og-edge);
  background: color-mix(in srgb, var(--s2) 88%, transparent);
  transition: transform .1s var(--ease, ease), box-shadow .15s var(--ease, ease), background .15s var(--ease, ease);
}
.og-pad[data-pad] {
  border-color: color-mix(in srgb, var(--pad) 45%, var(--og-edge));
  background: linear-gradient(160deg, color-mix(in srgb, var(--pad) 22%, var(--s2)), color-mix(in srgb, var(--pad) 7%, var(--s2)) 70%);
}
.og-pad[data-pad]:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--pad) 30%, var(--s2)), color-mix(in srgb, var(--pad) 12%, var(--s2)) 70%); transform: translateY(-1px); }
.og-pad[data-pad]:active { transform: translateY(0) scale(.985); }
.og-pad.live { box-shadow: 0 0 0 2px var(--pad); }
.og-pad.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.og-pad.empty { border: 1.5px dashed var(--og-edge-strong); background: transparent; color: var(--text3); align-items: center; justify-content: center; gap: 4px; flex-direction: column; }
.og-pad.empty:hover, .og-pad.drag { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* ghost tile: grow the current bank by one slot (12 → 20 max) */
.og-pad-add-slot { border: 1.5px dashed var(--og-edge-strong); background: transparent; color: var(--text3); align-items: center; justify-content: center; font-size: 12px; }
.og-pad-add-slot:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.og-pad-empty-l .sf-symbol { font-size: 22px; }
.og-pad-hint { font-size: 12px; }
.og-pad-key { position: absolute; top: 8px; left: 8px; font-family: var(--mono-num, var(--mono)); font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--pad) 70%, var(--text)); background: rgba(0, 0, 0, .30); border-radius: 5px; padding: 1px 6px; min-width: 14px; text-align: center; }
.og-pad-edit { position: absolute; top: 6px; right: 6px; opacity: 0; color: var(--text2); padding: 3px; border-radius: 4px; }
.og-pad:hover .og-pad-edit { opacity: .85; }
.og-pad-edit:hover { background: rgba(0, 0, 0, .3); color: var(--text); opacity: 1; }
.og-pad-edit .sf-symbol { font-size: 16px; }
.og-pad-emoji { font-size: 30px; line-height: 1.05; margin-bottom: 1px; }
.og-pad-name { font-size: 14px; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.og-pad[data-pad] .og-pad-name { padding-bottom: 6px; }
.og-pad-meter { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; background: rgba(0, 0, 0, .35); border-radius: 2px; overflow: hidden; }
.og-pad-meter-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--pad); }

/* master strip + pad inspector */
.og-sfx-master { padding: 10px 14px; border-bottom: 1px solid var(--og-edge); }
.og-sfx-master .og-field { gap: 6px; }
.og-sfx-master .og-field span { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.og-pad-inspector { overflow: auto; flex: 1 1 auto; padding: 11px 14px; display: flex; flex-direction: column; gap: 10px; }
.og-pad-actions { display: flex; gap: 8px; margin-top: 4px; }
.og-pad-actions .og-bar-btn { flex: 1; justify-content: center; }
.og-p-key { justify-content: center; font-family: var(--mono-num, var(--mono)); }
.og-namerow { grid-template-columns: 1fr 72px; }
.og-emoji-in { text-align: center; font-size: 18px !important; }
.og-emoji-quick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.og-emoji-pick { font-size: 18px; background: color-mix(in srgb, var(--s2) 80%, transparent); border: 1px solid transparent; border-radius: 7px; padding: 3px 0; cursor: pointer; line-height: 1.1; }
.og-emoji-pick:hover { background: var(--s3); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════════════════════
 * 8 · SHEETS & OVERLAYS — one glass card language
 * ══════════════════════════════════════════════════════════════════════════ */
.og-sheet, .og-help { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: none; align-items: center; justify-content: center; z-index: 30; }
.og-sheet.on, .og-help.on { display: flex; }
.og-join { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 31; }
.og-join.on { display: flex; }
.og-join-code-in { font-size: 24px; font-family: var(--mono); letter-spacing: .2em; text-align: center; }
.og-sheet-card, .og-help-card {
  width: min(680px, 94vw); max-height: 86vh; overflow: auto; padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-panel, 20px);
  background: color-mix(in srgb, var(--s1) 90%, transparent);
  /* same reason as the popovers: shadows are a no-op in this module, so the
     card's edge is an inset rim. Without it the sticky head's own border-bottom
     reads as a rule floating in space. */
  box-shadow: inset 0 0 0 1px var(--liquid-edge, var(--og-edge));
  -webkit-backdrop-filter: blur(var(--liquid-blur, 26px)) saturate(var(--liquid-saturation, 150%));
  backdrop-filter: blur(var(--liquid-blur, 26px)) saturate(var(--liquid-saturation, 150%));
}
.og-help-card { padding: 20px; width: min(520px, 92vw); }
.og-help-card h3 { font-family: var(--syne); font-weight: 800; margin: 0 0 12px; }
.og-help-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--og-edge); }
.og-help-row input { width: 110px; text-align: center; font-family: var(--mono); min-height: var(--ui-control-height, 40px); background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; color: var(--text); border-radius: var(--ui-radius-control, 12px); padding: 6px; }
.og-help-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* quiet fixed-shortcut rows (not rebindable) */
.og-help-row.og-help-note { color: var(--text2); }
.og-help-row.og-help-noline { border-bottom: none; }

.og-sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; border-bottom: 1px solid var(--og-edge);
  background: color-mix(in srgb, var(--s1) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--liquid-blur, 22px)); backdrop-filter: blur(var(--liquid-blur, 22px));
}
.og-sheet-head h3 { font-family: var(--syne); font-weight: 800; margin: 0; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.og-sheet-head .sf-symbol { font-size: 15px; color: var(--text2); }
/* Done = app .btn-primary (per-theme paint inherits); these keep sheet layout
   only. Compound selectors on purpose: outrangutan.css loads before the app's
   inline styles, so a bare .og-sheet-x would lose the metrics to .btn-primary
   by source order. */
.btn-primary.og-sheet-x, .btn-primary.og-help-close {
  width: auto; min-height: var(--ui-control-height-compact, 34px);
  padding: 6px 16px; font-size: 14px;
}
.btn-primary.og-sheet-x { margin-left: auto; }
.btn-primary.og-help-close { margin-top: 14px; width: 100%; padding: 10px; }
#og-outputs-body, #og-sd-body, #og-integrations-body, #og-midi-body { padding: 18px 20px; }
.og-sheet-note { color: var(--text2); font-size: 12px; line-height: 1.5; margin: 14px 0 0; max-width: 68ch; }
.og-sheet-hint { color: var(--text2); font-size: 12px; margin: 12px 0 0; }
.og-sheet-note code { font-family: var(--mono-num, monospace); background: var(--s3); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* Phase 9 (D10.1): one-time non-Chromium capability sheet */
.og-chrome-card { max-width: 460px; padding-bottom: 16px; }
.og-chrome-body { padding: 18px 20px 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.og-chrome-card .og-sheet-note { margin: 10px 20px 0; }

/* New Matte sheet */
.og-matte-card { max-width: 420px; padding-bottom: 16px; }
.og-matte-card .og-matte-swatches, .og-matte-card .og-sheet-note { margin-inline: 20px; }
.og-matte-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.og-matte-swatch { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--og-edge); border-radius: var(--og-r); background: color-mix(in srgb, var(--s2) 80%, transparent); color: var(--text); font: 600 12px var(--sans, inherit); cursor: pointer; }
.og-matte-swatch:hover { border-color: var(--accent); background: var(--s3); }
/* the chip IS the colour (JS sets background inline: #000000 for Black, #ffffff
   for White), so it cannot take a fill: white vanishes on Polar Bear, black on
   Planda Bear. Inset rim on the span; the native colour input paints its swatch
   OVER an inset shadow, so that one keeps a real 1px stroke. */
.og-matte-chip { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
.og-matte-custom { position: relative; }
.og-matte-custom input[type="color"] { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 6px; background: none; cursor: pointer; }

/* outputs sheet */
.og-out-tools { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--og-edge); }
.og-out-mastersink { flex: 1 1 220px; min-width: 200px; }
.og-out-mastersink label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
.og-out-mastersink select { min-height: var(--ui-control-height, 40px); background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 13px; padding: 8px 10px; width: 100%; }
.og-out-standby { flex: 1 1 200px; min-width: 180px; }
.og-out-standby label { font-size: 11px; }
.og-out-standby input { font-size: 13px; }
.og-out-row { border: 1px solid var(--og-edge); border-radius: var(--og-r); padding: 12px; margin-bottom: 12px; background: color-mix(in srgb, var(--s2) 70%, transparent); }
.og-out-main { display: flex; align-items: center; gap: 8px; }
.og-out-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.og-out-dot.live { background: var(--green); }
.og-out-dot.dead { background: var(--red); animation: og-dot-pulse 1s ease-in-out infinite; }
@keyframes og-dot-pulse { 50% { opacity: .35; } }
.og-out-label { flex: 1 1 auto; min-width: 80px; min-height: var(--ui-control-height, 40px); background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 13.5px; font-weight: 600; padding: 7px 10px; }
.og-out-label:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.og-out-cfg { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 10px; align-items: center; margin-top: 10px; }
.og-out-cfg .og-field label { font-size: 10px; }
.og-out-cfg select { min-height: var(--ui-control-height, 40px); background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 12.5px; padding: 7px 9px; width: 100%; }
.og-out-audiochk { align-self: end; padding-bottom: 8px; }
.og-out-note { font-size: 11.5px; color: var(--text3); align-self: center; }
.og-out-open, .og-out-del, .og-out-recover { flex: 0 0 auto; }

/* stream deck sheet */
.og-sd-card { width: min(1040px, 96vw); }
.og-sd-card .og-sheet-x, .og-sd-card .og-bar-btn { min-height: 44px; }
.og-sd-status { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--text); padding-bottom: 12px; border-bottom: 1px solid var(--og-edge); }
.og-sd-device-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.og-sd-device-tools label { display: grid; gap: 5px; min-width: 250px; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.og-sd-device-tools select { min-height: 44px; background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 13px; padding: 8px 10px; }
.og-sd-device-tools select:disabled { opacity: .7; }
/* the red wash carries the state; the left callout bar comes back as an INSET
   shadow (same idiom as .og-cue.selected / .og-cue.playing) rather than a
   border. The §12 rule only exists under forced-colors and paints nothing here. */
.og-sd-error { margin-top: 12px; border-left: 3px solid transparent; padding: 9px 11px; background: color-mix(in srgb, var(--red) 16%, var(--s2)); box-shadow: inset 3px 0 0 var(--red); color: var(--text); font-size: 12.5px; line-height: 1.4; }
.og-sd-grid { display: grid; grid-template-columns: repeat(var(--sd-cols, 5), minmax(104px, 1fr)); gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.og-sdk { border: 1px solid var(--og-edge); border-radius: var(--og-r); background: color-mix(in srgb, var(--s2) 70%, transparent); padding: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; position: relative; min-width: 0; }
/* mapped = a stronger accent wash instead of an accent rim */
.og-sdk.mapped { border-color: transparent; background: color-mix(in srgb, var(--accent) 20%, var(--s2)); }
.og-sdk-i { font-family: var(--mono-num, monospace); font-size: 9px; font-weight: 750; letter-spacing: .05em; color: var(--text3); }
.og-sdk-preview { display: block; align-self: center; width: min(100%, 96px); height: auto; aspect-ratio: 1; border-radius: 8px; background: #05070a; box-shadow: inset 0 0 0 1px var(--liquid-edge-lit); }
.og-sdk-preview[data-active="true"] { box-shadow: 0 0 0 2px var(--green), inset 0 0 0 1px var(--liquid-edge-lit); }
.og-sdk-preview-missing { display: grid; place-items: center; aspect-ratio: 1; min-height: 72px; border-radius: 8px; background: #05070a; color: var(--text3); font-size: 10px; text-align: center; }
.og-sdk select { min-height: 44px; background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 11.5px; padding: 7px 6px; width: 100%; min-width: 0; }
.og-sd-grid .og-bar-btn[disabled] { opacity: .5; pointer-events: none; }
.og-sd-proof { margin-top: 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.og-sd-proof h4 { margin: 0; font-family: var(--syne); font-size: 14px; }
.og-sd-proof p { margin: 5px 0 12px; color: var(--text2); font-size: 12px; line-height: 1.45; }
.og-sd-proof-grid { display: grid; grid-template-columns: repeat(6, minmax(76px, 1fr)); gap: 12px; }
.og-sd-proof-sample { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.og-sd-proof-preview { display: block; width: min(100%, 96px); height: auto; aspect-ratio: 1; border-radius: 8px; background: #05070a; }
.og-sd-proof-sample span { color: var(--text2); font-size: 10.5px; text-align: center; }
.og-sd-card :is(select, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* MIDI sheet rows */
.og-midi-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.og-midi-row { display: flex; align-items: center; gap: 9px; }
.og-midi-key { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; min-width: 92px; color: var(--text2); }
.og-midi-actions { display: flex; align-items: center; gap: 10px; }
.og-midi-status { font-size: 11px; font-family: var(--mono); color: var(--green); }
.og-midi-del { flex: none; }
.og-midi-act, .og-midi-ref { min-height: var(--ui-control-height-compact, 34px); background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 12.5px; padding: 5px 8px; }

/* integrations sheet (OBS · Dropbox · Transcode) */
.og-intg-sect { padding: 16px 0; border-bottom: 1px solid var(--og-edge); }
.og-intg-sect:first-child { padding-top: 0; }
.og-intg-sect:last-child { border-bottom: none; padding-bottom: 0; }
.og-intg-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: var(--text); margin-bottom: 12px; }
.og-intg-head .sf-symbol { font-size: 15px; color: var(--text2); }
.og-intg-head .og-out-note { font-weight: 500; }
.og-push-right { margin-left: auto; }   /* pushes a row's trailing item (e.g. the OBS status dot) to the right edge */
.og-intg-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.og-intg-row:last-child { margin-bottom: 0; }
.og-intg-in { flex: 1 1 120px; min-width: 80px; box-sizing: border-box; min-height: var(--ui-control-height, 40px); background: color-mix(in srgb, var(--s3) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, var(--border)); border: 1px solid transparent; border-radius: var(--ui-radius-control, 12px); color: var(--text); font-size: 13px; padding: 8px 12px; }
.og-intg-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.og-intg-port { flex: 0 0 80px; }
.og-obs-scenes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.og-obs-scene.on { background: color-mix(in srgb, var(--accent) 84%, var(--s2)); color: color-mix(in srgb, var(--bg) 18%, #000); border-color: transparent; }
.og-dbx-files { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.og-dbx-file { display: flex; align-items: center; gap: 8px; }
.og-dbx-name { flex: 1 1 auto; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-dbx-pull, .og-dbx-pullall { flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════════════════════
 * 9 · FOOT — shortcut strip
 * ══════════════════════════════════════════════════════════════════════════ */
.og-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 7px 14px;
  border-top: 1px solid transparent;
  background: var(--liquid-fill-strong, color-mix(in srgb, var(--s2) 82%, transparent));
  /* matches .og-bar: the strip's edge against the scrolling well is an inset
     rim, since --liquid-shadow is a deliberate no-op in this module */
  box-shadow: inset 0 1px 0 var(--liquid-edge, var(--og-edge));
  -webkit-backdrop-filter: blur(var(--liquid-blur, 22px)) saturate(var(--liquid-saturation, 150%));
  backdrop-filter: blur(var(--liquid-blur, 22px)) saturate(var(--liquid-saturation, 150%));
  font-size: 11.5px; color: var(--text2);
}
.og-foot .og-kbd { font-family: var(--mono); font-size: 10.5px; background: color-mix(in srgb, var(--s3) 80%, transparent); border: 1px solid var(--og-edge-strong); border-radius: 4px; padding: 1px 5px; color: var(--text); }
.og-foot-spacer { flex: 1 1 auto; }

/* ════════════════════════════════════════════════════════════════════════════
 * 10 · CUEOLA INTEGRATION — rundown cell badge + cue-config link block
 * (these classes render inside the main Cueola screens, not the console)
 * ══════════════════════════════════════════════════════════════════════════ */
.cue-out-badge { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--text2); overflow: hidden; }
.cue-out-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cue-out-live { margin-left: auto; flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 4px; }
.cue-out-play { background: var(--red); color: #fff; animation: og-pulse 1.4s ease-in-out infinite; }
.cue-out-pre { background: var(--yellow); color: #000; }
.cue-out-pause { background: var(--orange); color: #000; }
.cc-out-glyph { font-size: 13px; vertical-align: -1px; }
/* this one renders inside MAIN Cueola's cue-config panel, where there is no
   og fill hierarchy to lean on: the rule is the only thing marking where the
   Outrangutan block starts. */
.cc-outrangutan { border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.cc-out-hint { font-size: 11px; color: var(--text3); margin-top: 5px; }
.lf-out-go { background: color-mix(in srgb, var(--accent) 24%, transparent) !important; border-color: transparent !important; color: var(--text) !important; }
.lf-out-go:hover { background: color-mix(in srgb, var(--accent) 40%, transparent) !important; border-color: transparent !important; }

/* ════════════════════════════════════════════════════════════════════════════
 * 11 · LAYOUT MODES — wide / medium / narrow, set on .og-main by JS from the
 * root width; .og-has-sel / .og-no-sel collapse empty editors. The inspector
 * pane physically relocates between the top row (wide) and #og-bottom.
 * ══════════════════════════════════════════════════════════════════════════ */

/* WIDE (>1180): three floating columns; clip editor collapses when idle */
.og-main.og-lay-wide #og-bottom-tabs { display: none; }
.og-main.og-lay-wide #og-bottom { flex: 0 0 var(--og-h-edit, 200px); display: flex; flex-direction: column; min-height: 0; }
.og-main.og-lay-wide #og-bottom > .og-edit-pane { flex: 1 1 auto; min-height: 0; margin: 0; }
.og-main.og-lay-wide.og-no-sel #og-bottom { flex: 0 0 auto; }
.og-main.og-lay-wide.og-no-sel #og-edit-pane .og-edit-body { display: none; }
/* The monitor row is the pane's flexible child and the monitor sizes itself
   from the row's REAL leftover height (100cqh of the row), so it can never
   paint over the clock meta below — the old fixed 54cqh guess overflowed once
   the clock + transport stack outgrew its assumed share. The monitor + meters
   group is centered so the clock underneath lines up with the program. */
.og-main.og-lay-wide .og-program-pane { container-type: size; }
.og-main.og-lay-wide .og-program-top,
.og-main.og-lay-medium .og-program-top { flex: 1 1 auto; min-height: 0; justify-content: center; container-type: size; }
.og-main.og-lay-wide .og-program-top > .og-program-wrap,
.og-main.og-lay-medium .og-program-top > .og-program-wrap { flex: 0 1 auto; align-self: center; width: min(100%, calc(100cqh * 16 / 9)); }
.og-main.og-lay-wide .og-clock { flex: 0 0 auto; min-height: 90px; box-sizing: border-box; justify-content: center; container-type: inline-size; }
/* digits scale with pane height too, so a short pane gets a smaller clock
   instead of a clipped one (cqh skips the inline-size clock, queries the pane) */
.og-main.og-lay-wide .og-clock-time { font-size: clamp(28px, min(9cqw, 16cqh), 72px); }

/* MEDIUM (721–1180): Cue List | Program on top, shared tabbed bottom card */
.og-main.og-lay-medium { display: flex; flex-direction: column; overflow: hidden; }
.og-main.og-lay-medium .og-toprow { flex: 1 1 auto; display: flex; flex-direction: row; min-height: 0; }
.og-main.og-lay-medium .og-toprow > .og-pane { min-width: 0; }
.og-main.og-lay-medium .og-toprow > .og-cuelist-pane { flex: 0 0 clamp(260px, 30%, 320px); max-height: none; }
.og-main.og-lay-medium .og-toprow > .og-program-pane { flex: 1 1 auto; min-width: 320px; }
/* monitor sizing shared with wide mode above — the row's 100cqh cap keeps the
   16:9 monitor inside its leftover height instead of overlapping the clock */
.og-main.og-lay-medium #og-bottom { flex: 0 0 auto; }
.og-main.og-lay-medium #og-bottom-tabs { display: flex; }
.og-main.og-lay-medium.og-has-sel #og-bottom { flex: 0 0 min(42vh, 380px); }
.og-main.og-lay-medium #og-inspector-pane, .og-main.og-lay-medium #og-edit-pane { flex: 1 1 auto; min-height: 0; margin: 0; }
.og-main.og-lay-medium #og-inspector-pane > .og-pane-head { display: none; }   /* the tab replaces it */
.og-main.og-lay-medium #og-bottom:not(.show-edit) #og-edit-pane { display: none; }
.og-main.og-lay-medium #og-bottom.show-edit #og-inspector-pane { display: none; }
.og-main.og-lay-medium.og-no-sel #og-inspector-pane, .og-main.og-lay-medium.og-no-sel #og-edit-pane { display: none; }

/* NARROW (≤720): stacked scroll */
.og-main.og-lay-narrow { display: flex; flex-direction: column; overflow-y: auto; }
.og-main.og-lay-narrow .og-toprow { flex: none; display: flex; flex-direction: column; min-height: 0; }
.og-main.og-lay-narrow .og-toprow > .og-pane { flex: none !important; }
.og-main.og-lay-narrow .og-cuelist-pane { max-height: 42vh; flex-basis: auto !important; }
.og-main.og-lay-narrow #og-bottom { flex: none; }
.og-main.og-lay-narrow #og-bottom-tabs { display: flex; }
.og-main.og-lay-narrow #og-inspector-pane > .og-pane-head { display: none; }
.og-main.og-lay-narrow #og-inspector-pane, .og-main.og-lay-narrow #og-edit-pane { flex: none; min-height: 220px; margin: 0; }
.og-main.og-lay-narrow #og-bottom:not(.show-edit) #og-edit-pane { display: none; }
.og-main.og-lay-narrow #og-bottom.show-edit #og-inspector-pane { display: none; }
.og-main.og-lay-narrow.og-no-sel #og-inspector-pane, .og-main.og-lay-narrow.og-no-sel #og-edit-pane { display: none; }
.og-main.og-lay-narrow .og-clock { min-height: 84px; }
.og-main.og-lay-narrow .og-program-top { flex-direction: column; align-items: stretch; }
/* column direction: align-self governs WIDTH here — stretch to the pane, and
   aspect-ratio still derives the height (16:9 holds) */
.og-main.og-lay-narrow .og-program-top > .og-program-wrap { flex: 0 0 auto; align-self: stretch; width: auto; max-width: 100%; }
.og-main.og-lay-narrow .og-meters { flex: 0 0 auto; height: 64px; justify-content: flex-start; }
.og-main:is(.og-lay-medium, .og-lay-narrow) .og-program-pane { align-items: stretch; container-type: inline-size; }
.og-main:is(.og-lay-medium, .og-lay-narrow) :is(.og-clock, .og-transport) { width: auto; max-width: none; }

/* SFX board: collapse the pad editor when no pad is selected */
.og-sfx.og-no-padsel > #og-sfx-edit-pane { flex: 0 0 auto !important; }
.og-sfx.og-no-padsel > #og-sfx-edit-pane .og-edit-body { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
 * 12 · RESPONSIVE & ACCESSIBILITY
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  .og-sfx { overflow-y: auto; }
  .og-sfx > .og-toprow { flex: none; flex-direction: column; }
  .og-sfx > .og-toprow > .og-pane { flex: none !important; }
  .og-sfx .og-sfx-main { max-height: 60vh; }
  .og-sfx .og-sfx-side { flex-basis: auto !important; }
  .og-sfx > #og-sfx-edit-pane { flex: none !important; min-height: 160px; }
  .og-pad-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .og-program-popout span:not(.sf-symbol) { display: none; }
  .og-bar { flex-wrap: wrap; align-content: flex-start; gap: 8px; }
  .og-title { flex: 0 0 auto; min-width: max-content; }
  .og-bar-spacer { display: none; }
  .og-theme-menu { margin-left: 0; }
  .og-tabs { order: 10; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-tab { justify-content: center; min-width: 0; }
  .og-tools-menu, .og-theme-menu { max-width: 100%; }
  .og-tools-menu > summary, .og-theme-menu > summary { max-width: calc(100vw - 28px); }
  .og-theme-pop, .og-tools-pop { right: auto; left: 0; }
  .og-sd-device-tools > * { width: 100%; }
  .og-sd-proof-grid { grid-template-columns: repeat(3, minmax(76px, 1fr)); }
}
@media (max-width: 720px) {
  .og-tabs { width: 100%; }
  .og-tab { flex: 1 1 0; min-width: 0; }
  .og-tools-pop-inline, .og-theme-grid { grid-template-columns: 1fr; }
  .og-settings-pop .og-themes-submenu .og-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#outrangutan :is(.og-tbtn, .og-clock-dir, .og-bottom-tab):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) {
  #outrangutan :is(.og-tbtn, .og-clock-dir, .og-bottom-tab):focus-visible,
  #outrangutan .og-pad-search:focus-within { outline-color: Highlight; }
  .og-bottom-tab.on { border-color: Highlight; }
  .og-sdk.mapped, .og-sdk-preview[data-active="true"], .og-sd-error { border: 2px solid Highlight; forced-color-adjust: auto; }
}

/* v2.1 D11.6: live drag-reorder — insertion edge on the drop target. */
.og-cue { cursor: grab; }
.og-cue:active { cursor: grabbing; }
.og-cue.og-drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.og-cue.og-drop-after { box-shadow: 0 2px 0 0 var(--accent); }

/* Phase 9 (D10.4): coarse-pointer touch targets — appended LAST on purpose so
   the hardcoded compact rows above (settings-pop 34px, pane-head 30px) can't
   defeat the 44px minimum by source order; the base .og-bar-btn already rides
   the --ui-control-height-compact var bumped in index.html's coarse block. */
@media (pointer: coarse) {
  .og-settings-pop .theme-swatch, .og-settings-pop .og-tools-pop-inline .og-bar-btn { min-height: 44px; }
  .og-pane-head .og-bar-btn { min-height: 44px; }
  /* segmented pill grows with its tabs so each tab reaches the 44px floor */
  .og-tabs { height: auto; }
  .og-tab { min-height: 44px; }
  .og-settings-menu > summary { width: 44px; height: 44px; min-width: 44px; }
  /* color swatches lift like chips; the 8px gap keeps them separable */
  .og-swatch { width: 36px; height: 36px; }
  .og-bank-add { width: 44px; height: 44px; }
  .og-search-fire { width: 44px; height: 44px; }
  .og-matte-swatch { min-height: 44px; }
  /* hover-only edit affordance: always visible on touch, comfortable hit size */
  .og-pad-edit { opacity: .85; min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; padding: 0; }
}