/* ============================================================================
   Studio mode — workspace skin.                                    v2.26.0
   ============================================================================

   THE RULE THIS FILE EXISTS TO ENFORCE: panels are never re-parented.

   Moving a panel in the DOM would destroy and recreate the YouTube <iframe>, which
   restarts the stream from live edge — and would throw away chat's scroll position and
   poll cursor and any unsaved note text. So every arrangement here is pure CSS.

   The mechanism is `display: contents` on .eos-side: it removes the wrapper's own box
   while leaving its children exactly where they are in the DOM, which promotes the three
   panels to grid items of .eos-watch without a single node moving. Floating is likewise
   just position + transform on the panel where it already sits.

   EVERYTHING is scoped under .is-studio. With studio mode off, this file must have no
   effect whatsoever on the normal tabbed page.
   ========================================================================= */

/* ── v2.26.3 — THEME TOKENS ────────────────────────────────────────────────────
 * The studio chrome used to hardcode a dark palette, which fought the site theme: in
 * light mode members got dark toolbars and headers jammed against light panels. Every
 * colour below now derives from the same --cn-* system watch-cinema.css uses (light
 * values first, [data-theme="dark"] overrides), so the workspace follows the theme
 * toggle exactly like the rest of the watch page. Gold stays gold in both themes —
 * that is the site's accent — with dark ink on it for contrast either way. */
.eos-watch--cinema {
  --st-surface:       var(--cn-bg, #FFFFFF);
  --st-soft:          var(--cn-bg-soft, rgba(0, 0, 0, 0.04));
  --st-hover:         rgba(0, 0, 0, 0.08);
  --st-fg:            var(--cn-fg, #191919);
  --st-muted:         var(--cn-muted, rgba(0, 0, 0, 0.55));
  --st-border:        var(--cn-border, rgba(0, 0, 0, 0.08));
  --st-border-strong: rgba(0, 0, 0, 0.18);
  --st-gold:          var(--eos-gold, #F5A312);
  --st-gold-ink:      #2a1e04;
  /* v2.36.0 - #F5A312 on white is 2.07:1, under the 3:1 WCAG minimum for a focus ring, so
     a low-vision keyboard user could not see which control was focused. A darker gold
     clears 3:1 on white; dark mode keeps the bright gold (already ~8.9:1 there). */
  --st-focus:         #9a6200;
  --st-shadow:        var(--cn-shadow, 0 1px 2px rgba(0,0,0,0.04), 0 12px 36px rgba(0,0,0,0.08));
  --st-canvas:        var(--color-bg-alt, #F4F4F2);
  /* v2.26.8 - literal, NOT derived: the theme's own --color-bg is glassy (0.72 alpha) in
     places, which made "solid" panels translucent. Floating windows must be opaque. */
  --st-solid:         #FFFFFF;
  /* v2.38.1 - the workspace panel outline; see the note on --cn-edge. Separate from
     --st-border, which is the internal hairline (panel headers, toolbar chrome). */
  --st-edge:          rgba(0, 0, 0, 0.13);
  --st-tile-shadow:   0 1px 2px rgba(20, 18, 12, .06), 0 8px 22px rgba(20, 18, 12, .10);
}
[data-theme="dark"] .eos-watch--cinema {
  --st-hover:         rgba(255, 255, 255, 0.10);
  --st-border-strong: rgba(255, 255, 255, 0.22);
  --st-canvas:        #141414;
  --st-solid:         #1F1F1E;
  --st-edge:          rgba(255, 255, 255, 0.14);
  /* Dark needs an inset top highlight as well: a drop shadow alone is invisible against a
     near-black canvas, so the top edge is what separates the tile. */
  --st-tile-shadow:   inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 20px rgba(0, 0, 0, .48);
  --st-focus:         var(--eos-gold, #F5A312);
}

.eos-studio-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--st-soft); border: 1px solid var(--st-border);
  color: var(--st-fg); border-radius: var(--eos-radius, 8px);
  padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer;
  transition: background var(--eos-trans, 250ms ease), border-color var(--eos-trans, 250ms ease);
}
.eos-studio-toggle:hover { background: var(--st-hover); border-color: var(--st-border-strong); }
.eos-studio-toggle.is-on { background: var(--st-gold); border-color: var(--st-gold); color: var(--st-gold-ink); }
.eos-studio-toggle:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- toolbar */
.eos-studio-bar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 9px; margin: 0 0 8px;
  /* v2.34.1 - --st-solid, not --st-surface. The theme remaps --cn-bg to a 0.72-alpha
     glass, and this bar sits directly above a playing video: at 72% the labels were
     competing with whatever was moving behind them. Floating panels were already given
     --st-solid in v2.26.8 for exactly this reason; the toolbar was missed. */
  background: var(--st-solid); border: 1px solid var(--st-border);
  border-radius: var(--eos-radius-lg, 14px);
}
.is-studio .eos-studio-bar { display: flex; }
/* v2.36.0 - the `<select>` half of these rules is gone: studio.js never creates a select,
   so it only styled a phantom. The button rules are untouched. */
.eos-studio-bar button {
  background: var(--st-soft); border: 1px solid var(--st-border);
  color: var(--st-fg); border-radius: var(--eos-radius, 8px);
  padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1.4;
}
.eos-studio-bar button:hover { background: var(--st-hover); }
.eos-studio-bar button.is-on { background: var(--st-gold); border-color: var(--st-gold); color: var(--st-gold-ink); }
.eos-studio-bar button:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
.eos-studio-bar .eos-studio-sep { width: 1px; height: 20px; background: var(--st-border); }

/* ── the layout preview tile — base rules ───────────────────────────────────────
   v2.36.0 - the toolbar-scoped thumbnail layer that used to live here is GONE. Every
   `.eos-studio-bar button.eos-studio-thumb` variant, the `.eos-studio-presets` scroll
   strip and the `<select>` styling matched nothing after v2.33.0 moved the tiles into the
   layout box and replaced the toolbar strip with a single `.eos-studio-lbtn` - `tile()` is
   only ever called with big=true, so a thumb only exists as `.is-big` inside the box. Their
   "!important is load-bearing" comments described a cascade fight that can no longer happen,
   the exact stale-patch class that caused the v2.33.0 miniature regression, so they are
   removed rather than left to mislead the next edit. What remains is the bare base the box
   tiles (via `.is-big`, defined further down) actually build on. */
.eos-studio-thumb {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: grid; gap: 2px;
  padding: 3px;
  background: var(--st-soft);
  border: 1px solid var(--st-border);
  border-radius: 6px;
  cursor: pointer;
  width: 46px; height: 32px;
}
.eos-studio-thumb i {
  display: block;
  /* v2.26.8 - an icon stylesheet zero-heights bare <i> tags (computed height:0 even in a
     healthy 7px grid row). auto + stretch lets the row size the tile again. */
  height: auto !important;
  align-self: stretch;
  justify-self: stretch;
  background: var(--st-muted);
  opacity: .55;
  border-radius: 2px;
  min-width: 0; min-height: 0;
}
.eos-studio-thumb:hover { border-color: var(--st-border-strong); background: var(--st-hover); }
.eos-studio-thumb:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
.eos-studio-bar .eos-studio-spacer { margin-left: auto; }
.eos-studio-bar .eos-studio-status { font-size: 12px; color: var(--st-muted); }

/* ------------------------------------------------------- the grid itself */
/* ── v2.26.2 — WHY EVERYTHING BELOW IS !important ─────────────────────────────
 * watch-cinema.css:36-43 already declares this element a grid, and declares it hard:
 *
 *     .eos-watch--cinema {
 *       display: grid !important;
 *       grid-template-columns: minmax(0,1.55fr) minmax(0,1fr) !important;
 *       grid-template-areas: "top top" "stage side" "extra extra" !important;
 *       gap / max-width / margin / padding … !important;
 *     }
 *
 * An author !important declaration beats a plain inline style, so the templates studio.js
 * wrote were silently discarded and the workspace never applied at all — the page kept its
 * normal two-column arrangement while the studio chrome piled on top of it. That is what
 * "the studio space is a mess" actually was.
 *
 * So the studio layer has to answer in kind: !important here, and setProperty(…, 'important')
 * for the values studio.js computes at runtime. This is not decoration — remove any one of
 * these and the original stylesheet takes the property straight back. */
.eos-watch--cinema.is-studio {
  position: relative;
  display: grid !important;
  gap: 10px !important;
  align-items: stretch;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px !important;
}

/* ── v2.26.1 — THE FIX FOR "the studio space is a mess" ────────────────────────
 * .eos-watch has FIVE direct children, not two: an unclassed wrapper div, the
 * .eos-cn-top header, the stage, .eos-side, and .eos-watch-replays — plus the toolbar
 * this feature injects and a floating button watch-cinema.js appends.
 *
 * The moment the container became `display: grid`, every in-flow child WITHOUT an
 * explicit grid-area was auto-placed into implicit cells. That silently generated extra
 * rows and pushed the panels out of the areas the preset had assigned them: the toolbar
 * landed in a workspace cell, the replays strip claimed a row of its own, and the
 * carefully described layout collapsed.
 *
 * So: in studio mode ONLY the workspace participates in the grid. Anything that is not a
 * known workspace element is taken out. Written as a :not() chain rather than a list of
 * specific offenders so that a child added to this template in future cannot re-introduce
 * the same bug. .eos-side must survive — it is display:contents, and its children (the
 * panels) are the real grid items. */
.eos-watch--cinema.is-studio > *:not(.eos-watch-stage):not(.eos-side):not(.eos-studio-bar):not(.eos-studio-dock):not(.eos-studio-bartab):not(.eos-studio-hotzone):not(.eos-studio-seams):not(.eos-studio-box):not(.eos-studio-notice) {
  display: none !important;
}
/* v2.26.11 - the show-toolbar tab and the hover hotzone are direct children of the
   workspace too, so the sweep above was killing them with !important: the hidden bar had
   no way back. Any future direct child of .eos-watch that BELONGS to studio must be added
   to this chain. */
/* v2.26.4 - chrome other scripts float over the page must not float over the WORKSPACE:
   the chat-resizer grip (positioned off a wrapper that has no box here) and the cinema
   side-dock toggle both belong to the layout the workspace replaces. */
.is-studio #eos-cn-resizer,
body:has(.eos-watch--cinema.is-studio) #eos-cn-side-toggle,
.is-studio #eos-cn-side-toggle { display: none !important; }

/* v2.36.0 - the cinema layer's .eos-side::before glow (a 120px radial band) still makes a
   box after display:contents dissolves the wrapper, and with no containing block it
   resolved against the fixed workspace - a pale dome across the top of the video in the 11
   non-stack presets. Killed in the workspace; the stacked layout keeps its own box so its
   glow is harmless and left alone. */
.is-studio:not(.is-side-stack) .eos-side::before { content: none !important; }

/* The cinema layer also pins .eos-side and the stage to ITS areas (side / stage); those
   names do not exist in a studio template, and a grid item pointing at a missing area is
   auto-placed — which is how panels ended up in the wrong cells. */
.is-studio .eos-side-panel { grid-area: auto; }

/* ── v2.26.6 — the service hub collapses inside the video panel ────────────────
   #eos-hub, .eos-watch-meta and .eos-watch-description live INSIDE .eos-watch-stage, so
   the video cell was dragging the whole below-player hub into the workspace (the owner's
   red-bound screenshot). Hidden by default; the Info toggle in the Video header reveals
   them, scrollable, without disturbing the grid. .eos-cn-chrome stays - those are the
   player controls. */
.is-studio .eos-watch-stage > #eos-hub,
.is-studio .eos-watch-stage > .eos-watch-meta,
.is-studio .eos-watch-stage > .eos-watch-description { display: none !important; }
.is-studio.show-stage-meta .eos-watch-stage { overflow-y: auto; }
.is-studio.show-stage-meta .eos-watch-stage > #eos-hub,
.is-studio.show-stage-meta .eos-watch-stage > .eos-watch-meta,
.is-studio.show-stage-meta .eos-watch-stage > .eos-watch-description { display: block !important; }

/* A windowed workspace still needs a bounded canvas: fr rows against an unbounded
   height stretch to their content and the layout tells you nothing. */
/* v2.26.13 - there is no windowed workspace any more; .is-studio itself takes the
   full-viewport presentation below. */

/* Drag/resize feel: while a float moves it must not fight its own transition, and the
   grip is a real target now. */
.is-studio .eos-side-panel.is-floating { will-change: transform; }
/* v2.36.0 - the 22px enlargement here was dead: an identical selector at ~:466 reset it
   to 16px. Merged into that rule at 24px (WCAG 2.5.8 touch minimum). */

/* ── v2.26.6 — pin or peek ──────────────────────────────────────────────────────
   Pinned (default) the bar owns its grid row. Unpinned it lifts out of flow and slides
   away; its empty auto row collapses to nothing, so the panels get the full height. A
   14px hotzone at the top brings it back, and focus-within keeps it open for keyboards. */
.is-studio .eos-studio-bar { transition: transform .18s ease, opacity .18s ease; }
.is-studio.bar-auto .eos-studio-bar {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 90;
  transform: translateY(calc(-100% - 14px)); opacity: 0; pointer-events: none;
}
.is-studio.bar-auto.bar-peek .eos-studio-bar,
.is-studio.bar-auto .eos-studio-bar:focus-within {
  transform: none; opacity: 1; pointer-events: auto;
  box-shadow: var(--st-shadow);
}
/* v2.26.11 - the workspace never scrolls: it divides the box it has. Any overflow means
   a panel is out of view, which is the bug this version fixes - fail visibly, not silently. */
.eos-watch--cinema.is-studio { overflow: hidden !important; }

/* The show-toolbar tab: only while the bar is hidden, and it stays put so touch users
   have something to press. */
.eos-studio-bartab { display: none; }
.is-studio.bar-auto .eos-studio-bartab {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 91; width: 74px; height: 16px; padding: 0;
  /* v2.36.0 - --st-solid, not --st-surface: this tab is the only way back to the toolbar
     for a touch user, and unpinned it floats over the playing video; the glass 0.72 alpha
     washed it out on bright scenes, the defect v2.34.1 fixed for the bar and panels. */
  background: var(--st-solid); border: 1px solid var(--st-border); border-top: 0;
  border-radius: 0 0 9px 9px; cursor: pointer;
}
.is-studio.bar-auto .eos-studio-bartab span {
  display: block; width: 26px; height: 3px; border-radius: 999px; background: var(--st-muted);
}
.is-studio.bar-auto .eos-studio-bartab:hover { background: var(--st-hover); }
.is-studio.bar-auto .eos-studio-bartab:hover span { background: var(--st-gold); }
.is-studio.bar-auto .eos-studio-bartab:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
.is-studio.bar-auto.bar-peek .eos-studio-bartab { display: none; }

.eos-studio-hotzone { display: none; }
.is-studio.bar-auto .eos-studio-hotzone {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 14px; z-index: 89;
}
#eos-studio-pin { gap: 5px; }
#eos-studio-pin svg { width: 14px; height: 14px; }
#eos-studio-pin.is-on { color: var(--st-gold-ink); }
@media (prefers-reduced-motion: reduce) {
  .is-studio .eos-studio-bar { transition: none; }
}

/* The toolbar owns a full-width row of its own at the top of the workspace. The row is
   prepended to every preset's template in studio.js, so it can never eat a panel cell. */
.is-studio .eos-studio-bar {
  grid-area: eosbar !important;
  margin: 0;
  align-self: start;
}

/* ── v2.26.7 — THE VIDEO FITS ITS BOX ──────────────────────────────────────────
   watch-hub.css pins .eos-player to aspect-ratio 16/9 of its WIDTH. Inside a studio cell
   or floating window that demanded heights the box does not own; overflow clipped the
   surplus and the member watched a CROPPED stream no resize could fix. In the workspace
   the player fills whatever box the member gives it — the YouTube iframe letterboxes
   internally, so the full frame is always visible in any shape. !important because the
   hub rule is specific and the ratio must never win inside the workspace. */
.is-studio .eos-watch-stage {
  display: flex !important;
  flex-direction: column !important;
  /* v2.26.7 - the theme gives the stage a 16px flex gap, and even zero-height in-flow
     children (the empty chrome wrappers) each add one - together they bled ~32px of the
     video's height. The studio head provides its own separation. */
  gap: 0 !important;
  /* v2.36.1 - THE VIDEO OBEYS ITS CELL. The owner reports the player "overlaps all the
     time" and "should obey the display in the chosen layout." The grid already gives the
     stage `minmax(0, …)` columns, but a stray min-content or an over-wide player overlay
     could still push past the cell edge. Clamp the stage HARD to the box the grid hands it
     - it can never be wider or taller than its own column/row, and anything inside is
     clipped rather than allowed to overlap the neighbouring panel. */
  min-width: 0 !important; min-height: 0 !important;
  max-width: 100% !important; max-height: 100% !important;
  overflow: hidden !important;
}
/* The player, in turn, can never exceed the stage it lives in. */
.eos-watch--cinema.is-studio .eos-player {
  max-width: 100% !important; max-height: 100% !important; overflow: hidden !important;
}
.is-studio .eos-watch-stage > .eos-studio-head,
.is-studio .eos-watch-stage > .eos-cn-chrome { flex: 0 0 auto; }
.eos-watch--cinema.is-studio .eos-player {
  aspect-ratio: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  /* v2.34.2 - BORDER-BOX. watch-redesign.css gives the player a 1px border, and the theme
     does not set box-sizing on it, so `width: 100%` meant 100% PLUS two borders: the player
     rendered 2px wider than the cell it was given, in every one of the twelve layouts. The
     stage clips with overflow:hidden, so what was lost was the player's own right border
     and rounded corner - the video reading as if it were spilling out of its box. */
  box-sizing: border-box !important;
}
/* The same trap applies to anything else the workspace sizes to 100% of a cell. A border
   added by a future re-skin must never be able to push a panel out of its own grid area. */
.is-studio .eos-watch-stage,
.is-studio .eos-side-panel,
.is-studio .eos-player .eos-player-frame,
.is-studio .eos-player .eos-player-offair { box-sizing: border-box !important; }
.is-studio .eos-player .eos-player-frame,
.is-studio .eos-player .eos-player-offair { width: 100%; height: 100%; }
.is-studio .eos-player .eos-player-frame > iframe,
.is-studio .eos-player > iframe,
.is-studio .eos-player video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;              /* HTML5/HLS sources letterbox like the iframe does */
}

/* A grid item will not shrink below its content unless told to, which is what made the
   panels overflow their cells instead of scrolling inside them. */
.is-studio .eos-side-panel,
.is-studio .eos-watch-stage { min-height: 0; min-width: 0; overflow: hidden; }
/* Each panel holds exactly two things: a small control strip, and the main pane. Naming
   them explicitly matters — a blanket `> *` rule would stretch the chat utility lane and
   the expand button to an equal share of the height, which is its own kind of mess. The
   panes already know how to scroll from the tabbed layout; they only need to be told which
   one absorbs the leftover space. */
.is-studio .eos-side-panel > .eos-studio-head,
.is-studio .eos-side-panel > .eos-chat-utility-lane,
.is-studio .eos-side-panel > .eos-side-expand { flex: 0 0 auto; }
.is-studio .eos-side-panel > .eos-chat-pane,
.is-studio .eos-side-panel > .eos-notes,
.is-studio .eos-side-panel > .eos-bible {
  flex: 1 1 auto; min-height: 0;
  /* v2.26.6 - inside a grid cell the pane itself must scroll; in the tabbed layout the
     panel owned the viewport height and never needed to. */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}

/* v2.26.6 - panel-space display polish.
   The expand arrows belong to the TABBED layout (they grow the panel over the page);
   inside the workspace they either did nothing or fought the grid. The utility lane can
   be wider than a narrow cell - let it scroll sideways rather than wrap into the pane. */
.is-studio .eos-side-panel > .eos-side-expand { display: none !important; }
.is-studio .eos-side-panel > .eos-chat-utility-lane { overflow-x: auto; scrollbar-width: none; }
.is-studio .eos-side-panel > .eos-chat-utility-lane::-webkit-scrollbar { display: none; }

/* Floating windows keep a sane minimum, whatever a drag or restore hands them. */
.is-studio .eos-side-panel.is-floating { min-width: 260px; min-height: 200px; }
.is-studio .eos-watch-stage.is-floating { min-width: 320px; min-height: 220px; }

/* v2.26.12 - THE VIDEO FLOAT BUG. The stage carries `grid-area: v !important` from the
   rule below, and studio.js can only remove its own INLINE value - the !important
   stylesheet declaration survives. That matters because an absolutely-positioned child of
   a GRID container uses ITS GRID AREA as the containing block: the floating video resolved
   left/top against cell "v" instead of the workspace, so it sat in the wrong place, jumped
   on drag, and clipped against the cell. Side panels were unaffected - their grid-area is
   inline-only. A floating item must never be pinned to a cell. */
.is-studio .eos-watch-stage.is-floating,
.is-studio .eos-side-panel.is-floating { grid-area: auto !important; }

/* v2.26.12 - THE VIDEO-DRAG BUG. watch-redesign.css:1140 gives the stage an entrance
   animation (`w-rise ... both`), and a CSS ANIMATION OUTRANKS AN INLINE STYLE: the
   fill-mode:both final frame re-imposed its own transform every frame, so the inline
   translate the drag writes was discarded and the video simply would not move. Side
   panels have no such animation, which is exactly why only the video misbehaved.
   The workspace should not replay an entrance animation anyway. */
.is-studio .eos-watch-stage,
.is-studio .eos-side-panel,
.is-studio .eos-watch-stage > .eos-player { animation: none !important; }
/* Promote the panels to grid items without moving them in the DOM.
   !important because the cinema layer sets .eos-side's display and grid-area itself. */
.is-studio .eos-side { display: contents !important; }
/* The tab strip is meaningless once every panel is on screen at once. */
.is-studio .eos-side-tabs { display: none !important; }

.is-studio .eos-watch-stage { grid-area: v !important; min-width: 0; min-height: 0; }

.is-studio .eos-side-panel {
  display: flex !important;          /* beats the tab layer's .is-active toggling */
  flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
  /* v2.26.8 - !important: a more specific flagship rule kept these sections transparent
     (measured rgba(0,0,0,0) live). Docked over the page background nobody noticed, but a
     FLOATING panel let whatever sat behind it bleed through mid-drag - unreadable. */
  background: var(--st-solid) !important;
  /* v2.38.1 - was --st-border (8% light / 12% dark), which against the near-black
     workspace canvas left no readable boundary between neighbouring panels.
     v2.38.3 - the line is back down to ~13%, because the SHADOW below is what actually
     separates a tile from the canvas. The owner's note: outlines too thick, use backdrops
     to distinguish them. A panel now reads as a card lifted off the workspace rather than
     a rectangle drawn on it. */
  border: 1px solid var(--st-edge);
  border-radius: var(--eos-radius-lg, 14px);
  box-shadow: var(--st-tile-shadow);
}
/* v2.38.3 - CHAT GETS THE LIFT TOO. watch-redesign.css sets `box-shadow: none !important`
   on the dark chat panel at (0,4,0) so the dock's glass shows through on the ordinary
   watch page. In the workspace that is not what we want: chat is a free-standing tile like
   Notes and Bible, and without the shadow it was the one panel still flat against the
   canvas. Measured: notes and bible lifted, chat did not. Adding .is-studio to the chain
   takes this to (0,5,0), which beats it outright rather than by source order. */
[data-theme="dark"] .eos-watch--cinema.is-studio .eos-side-panel[data-eos-panel="chat"],
.eos-watch--cinema.is-studio .eos-side-panel[data-eos-panel="chat"] {
  box-shadow: var(--st-tile-shadow) !important;
}

/* The video tile is a panel too - it carried no outline of its own in the workspace. */
.is-studio .eos-watch-stage {
  border: 1px solid var(--st-edge);
  border-radius: var(--eos-radius-lg, 14px);
  box-shadow: var(--st-tile-shadow);
  overflow: hidden;
}
.is-studio .eos-watch-stage.is-floating { background: var(--st-solid) !important; }
.is-studio .eos-side-panel[hidden],
.is-studio .eos-side-panel.eos-studio-closed { display: none !important; }

/* The panel's own scrollable body sits under the chrome we inject. */
.is-studio .eos-side-panel > *:not(.eos-studio-head) { min-height: 0; }

/* ----------------------------------------------------------- panel chrome */
/* v2.26.14 - HARD GATE. studio.js injects the panel header, the resize grip and the edge
   handles ONCE at boot so they are ready the instant studio opens - but they belong to the
   workspace and must be invisible on the ordinary watch page. These rules were never
   scoped, so the "Video" and "Chat" header bars showed on the normal page (owner's
   screenshot). One gate here rather than per-rule scoping: anything studio injects into a
   panel stays hidden until .is-studio is on, whatever gets added later. */
.eos-studio-head,
.eos-studio-resize,
.eos-studio-edge { display: none !important; }
.is-studio .eos-studio-head { display: flex !important; }
.is-studio .is-floating > .eos-studio-edge { display: block !important; }
.is-studio .eos-side-panel.is-floating > .eos-studio-resize,
.is-studio .eos-watch-stage.is-floating > .eos-studio-resize { display: block !important; }

.eos-studio-head {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; flex: 0 0 auto;
  background: var(--st-soft);
  border-bottom: 1px solid var(--st-edge);   /* v2.38.1 - matches the panel outline */
  font-size: 12.5px; color: var(--st-fg);
  cursor: grab; touch-action: none; user-select: none;
}
.eos-studio-head:active { cursor: grabbing; }
.eos-studio-head .eos-studio-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eos-studio-head button {
  background: none; border: 0; color: var(--st-muted);
  cursor: pointer; padding: 0; line-height: 1; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto;   /* v2.26.3 - a real hit target */
}
.eos-studio-head button svg { width: 15px; height: 15px; display: block; }
.eos-studio-title:focus-visible {
  outline: 2px solid var(--st-focus); outline-offset: 2px; border-radius: 4px;
}
.eos-studio-head button:hover { color: var(--st-gold); background: var(--st-hover); }
.eos-studio-head button:focus-visible { outline: 2px solid var(--st-gold); outline-offset: 1px; }
/* v2.26.6 - the video header drags like every other panel now. */

/* -------------------------------------------------------------- floating */
.is-studio .eos-side-panel.is-floating,
.is-studio .eos-watch-stage.is-floating {
  position: absolute;
  z-index: 60;
  width: 340px; height: 260px;
  box-shadow: var(--st-shadow);
  border-color: var(--st-border-strong);
  border-radius: var(--eos-radius-lg, 14px);
}
.is-studio .is-floating.is-front { z-index: 70; }
.eos-studio-resize {
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px;
  cursor: nwse-resize; touch-action: none;
  background:
    linear-gradient(135deg, transparent 50%, var(--st-muted) 50%, var(--st-muted) 62%, transparent 62%);
  border-bottom-right-radius: var(--eos-radius-lg, 14px);
}
.is-studio .eos-side-panel:not(.is-floating) .eos-studio-resize { display: none; }
/* v2.26.8 - resize from the SIDES too (owner request): 8px live zones on the right,
   bottom and left edges of any floating window, video included. The corner grip stays
   for two-axis resizing. */
.eos-studio-edge { position: absolute !important; display: none; touch-action: none; z-index: 4; }
.is-floating > .eos-studio-edge { display: block; }
.eos-studio-edge[data-edge="r"] { top: 12px; bottom: 12px; right: -5px; width: 12px; cursor: ew-resize; }
.eos-studio-edge[data-edge="l"] { top: 12px; bottom: 12px; left: -5px;  width: 12px; cursor: ew-resize; }
.eos-studio-edge[data-edge="b"] { left: 12px; right: 12px; bottom: -5px; height: 12px; cursor: ns-resize; }

/* v2.26.8 - a VISIBLE handle, the way Claude's own panels do it (owner request): a slim
   pill rides the seam, appears when the window is hovered, turns gold under the pointer,
   and names itself. The invisible zone stays as the actual hit target. */
.eos-studio-edge::after {
  content: ''; position: absolute; border-radius: 999px;
  background: var(--st-muted); opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.eos-studio-edge[data-edge="r"]::after,
.eos-studio-edge[data-edge="l"]::after {
  width: 5px; height: 46px; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.eos-studio-edge[data-edge="b"]::after {
  height: 5px; width: 46px; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.is-floating:hover > .eos-studio-edge::after { opacity: .45; }
.eos-studio-edge:hover::after, .eos-studio-edge:active::after {
  opacity: 1; background: var(--st-gold);
}
/* the label, on the handle only */
.eos-studio-edge::before {
  content: 'Resize'; position: absolute; top: 50%; transform: translateY(-50%);
  background: #1c1c1c; color: #f2f2f2; font-size: 11px; line-height: 1;
  padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.eos-studio-edge[data-edge="r"]::before { right: 14px; }
.eos-studio-edge[data-edge="l"]::before { left: 14px; }
.eos-studio-edge[data-edge="b"]::before { left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); }
.eos-studio-edge:hover::before { opacity: 1; }
/* the corner grip joins the same language */
.eos-studio-resize:hover {
  background: linear-gradient(135deg, transparent 50%, var(--st-gold) 50%, var(--st-gold) 62%, transparent 62%);
}
@media (prefers-reduced-motion: reduce) {
  .eos-studio-edge::after, .eos-studio-edge::before { transition: none; }
}
/* v2.26.7 - the grip measured IN FLOW on the stage (a 16px flex child stealing video
   height) and the docked-stage grip had no hide rule at all - only .eos-side-panel did.
   Forced out of flow, and docked means no grip, stage included. */
.eos-studio-resize { position: absolute !important; z-index: 5; }
.is-studio .eos-watch-stage:not(.is-floating) .eos-studio-resize { display: none; }

/* --------------------------------------------------------- maximised one */
.is-studio .eos-side-panel.is-max,
.is-studio .eos-watch-stage.is-max {
  /* v2.26.6 - the actual area comes inline from studio.js at inline+!important priority
     (a stylesheet rule loses to the inline slot writes); this rule now only stacks it. */
  z-index: 50;
}
.eos-studio-head button.is-on { color: var(--st-gold-ink); background: var(--st-gold); }

/* ── v2.26.14 — seam resizers on the docked grid ───────────────────────────────
   Same idiom as the watch page's video/chat handle: an invisible hit strip on the grid
   line, with a small pill that shows on hover and turns gold while dragging. */
/* v2.36.4 - GATED ON .is-studio, both halves. The wrapper and the --col/--row geometry
   were unscoped while only the `position:absolute` rule carried .is-studio: with studio
   off, a seam layer left in the DOM still painted its grip pills (22px wide, opaque, with
   grip lines) over the top-left of the ordinary watch page. studio.js now removes the
   layer on exit; this makes it impossible to see one there even if a layer survives. */
.eos-studio-seams { display: none; }
.is-studio .eos-studio-seams { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 45; }
.eos-watch--cinema:not(.is-studio) .eos-studio-seam { display: none !important; }
/* v2.36.1 - THE DIVIDER IS NOW DISCOVERABLE. It used to be `opacity: 0` until you hovered
   its 14px strip, and even then only 35% - so members had no way to know the two halves
   could be dragged apart ("users are not able to resize it"). The grip is now ALWAYS
   visible: an opaque pill with grip lines and a ring that reads on both the dark video and
   a light panel, a wider 22px hit area (24px meets the touch-target minimum with the
   negative margin), and a clear gold hover/active state. */
.is-studio .eos-studio-seam { position: absolute; pointer-events: auto; display: flex;
  align-items: center; justify-content: center; z-index: 46; }
.eos-studio-seam--col { top: 10px; bottom: 10px; width: 22px; margin-left: -11px; cursor: col-resize; }
.eos-studio-seam--row { left: 10px; right: 10px; height: 22px; margin-top: -11px; cursor: row-resize; }
.eos-studio-seam span {
  display: block; border-radius: 999px;
  background: var(--st-solid);                    /* opaque, so it shows on the video */
  box-shadow: 0 0 0 1px var(--st-border), 0 2px 8px rgba(0,0,0,.35);
  opacity: 1;                                     /* ALWAYS visible now */
  transition: background .15s ease, box-shadow .15s ease, width .12s ease, height .12s ease;
}
/* grip lines so the pill reads as a handle, not a dot */
.eos-studio-seam--col span {
  width: 7px; height: 60px;
  background-image: repeating-linear-gradient(to bottom, var(--st-muted) 0 2px, transparent 2px 6px);
  background-size: 3px 30px; background-position: center; background-repeat: no-repeat;
}
.eos-studio-seam--row span {
  height: 7px; width: 60px;
  background-image: repeating-linear-gradient(to right, var(--st-muted) 0 2px, transparent 2px 6px);
  background-size: 30px 3px; background-position: center; background-repeat: no-repeat;
}
.eos-studio-seam:hover span, .eos-studio-seam.is-active span,
.eos-studio-seam:focus-visible span {
  background-color: var(--st-gold);
  box-shadow: 0 0 0 1px var(--st-gold), 0 3px 12px rgba(0,0,0,.4);
}
.eos-studio-seam--col:hover span, .eos-studio-seam--col.is-active span { height: 76px; }
.eos-studio-seam--row:hover span, .eos-studio-seam--row.is-active span { width: 76px; }
.eos-studio-seam:focus-visible { outline: 2px solid var(--st-focus); outline-offset: -2px; border-radius: 8px; }

/* v2.36.5 - the live split readout. Only while a handle is actually being moved, so the
   workspace stays quiet the rest of the time. Opaque per the opaque-surfaces rule: it sits
   over the video. Centred on the handle it belongs to and never intercepts the drag. */
.eos-studio-seamtip {
  position: absolute; z-index: 47; display: none; pointer-events: none;
  transform: translate(-50%, -50%);
  padding: 4px 9px; border-radius: 999px;
  background: var(--st-solid); color: var(--st-fg);
  border: 1px solid var(--st-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.is-studio .eos-studio-seamtip.show { display: block; }
@media (prefers-reduced-motion: reduce) { .eos-studio-seam span { transition: none; } }

/* ------------------------------------------------------ docking overlay */
.eos-studio-dock {
  position: absolute; z-index: 80; display: none; pointer-events: none;
  background: rgba(245,163,18,.20);
  border: 2px dashed var(--st-gold);
  border-radius: var(--eos-radius-lg, 14px);
  transition: all 90ms linear;
}
.eos-studio-dock.is-on { display: block; }
/* v2.26.8 - "very smooth and very responsive": while ANY drag or resize is live, nothing
   may fight the pointer. Transitions off, text selection off, and iframes go inert so the
   video cannot swallow pointer work mid-gesture. */
.is-studio-dragging { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.is-studio-dragging .eos-side-panel,
.is-studio-dragging .eos-watch-stage { transition: none !important; }
.is-studio-dragging iframe { pointer-events: none !important; }
.is-studio-dragging .eos-studio-edge::before { opacity: 0 !important; }

/* ------------------------------------------------------------ fullscreen */
/* v2.26.1 — studio mode IS fullscreen now (owner: "the studio should be in full screen
   mode"), so entering the workspace applies both classes together. Escape still exits. */
/* When the Fullscreen API grants it, the element IS the screen — so drop the fixed
   positioning and just fill the fullscreen box. The :fullscreen rules must come before the
   .is-studio-full fallback block so the fallback does not re-pin it. */
.eos-watch--cinema:fullscreen,
.eos-watch--cinema:-webkit-full-screen {
  position: static !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; margin: 0 !important;
  padding: 10px !important;
  background: var(--st-canvas) !important;
  overflow: hidden;
}
.eos-watch--cinema:fullscreen .eos-studio-bar,
.eos-watch--cinema:-webkit-full-screen .eos-studio-bar { margin: 0 !important; }

.eos-watch--cinema.is-studio,
.eos-watch--cinema.is-studio-full {
  /* v2.26.13 - !important because watch-resize-cinema.js:37 writes
     `watch.style.position = 'relative'` INLINE at boot, and an inline declaration beats a
     plain stylesheet one: the workspace stayed in page flow (the owner's screenshot -
     studio rendering under the site header). border-box so the 10px padding cannot push
     the box past the viewport. */
  position: fixed !important; inset: 0 !important; z-index: 9500;
  margin: 0 !important; padding: 10px !important;
  box-sizing: border-box !important;
  max-width: none !important; width: 100vw !important;
  height: 100vh !important; height: 100dvh !important;
  background: var(--st-canvas) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
body.eos-studio-full-open, body:has(.eos-watch--cinema.is-studio) { overflow: hidden; }
/* Site chrome is noise inside a workspace. */
body:has(.eos-watch--cinema.is-studio) .eos-header,
body:has(.eos-watch--cinema.is-studio) .eos-nav,
body:has(.eos-watch--cinema.is-studio) .eos-statusbar,
body:has(.eos-watch--cinema.is-studio) .eos-diaspora,
body:has(.eos-watch--cinema.is-studio) .site-footer,
body:has(.eos-watch--cinema.is-studio) footer,
body.eos-studio-full-open .eos-header,
body.eos-studio-full-open .eos-nav,
body.eos-studio-full-open .eos-statusbar,
body.eos-studio-full-open .eos-diaspora,
body.eos-studio-full-open .site-footer,
body.eos-studio-full-open footer { display: none !important; }

/* ------------------------------------------------------------- responsive
   Below tablet the workspace is off entirely — the stacked layout stays. This is a
   deliberate scope decision, not an oversight: dragging and floating on a phone is a
   different interaction problem and the stacked view already works there. */
@media (max-width: 900px) {
  .eos-studio-toggle, .eos-studio-bar { display: none !important; }
  .eos-watch--cinema.is-studio { display: block; }
  .is-studio .eos-side { display: block; }
  .is-studio .eos-side-tabs { display: flex !important; }
  .is-studio .eos-side-panel { display: none !important; }
  .is-studio .eos-side-panel.is-active { display: flex !important; }
  .is-studio .eos-studio-head { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eos-studio-dock { transition: none; }
}


/* ── v2.35.0 — THE SIDE STACK: the windowed view, as a layout ──────────────────
 * Every other preset relies on `display: contents` to dissolve .eos-side so its three
 * children become grid items in their own cells. This one does the opposite: .eos-side is
 * the grid item, holding the tab strip and one visible panel — which is precisely what the
 * watch page looks like with Studio switched OFF. Nothing here re-parents anything; the
 * panels sit exactly where they always sat in the DOM, and only their boxes change.
 *
 * The tab switching is NOT reimplemented: platform.js already owns .eos-side-tab clicks and
 * toggles .is-active on the panels. All this layer does is make the tabs visible again and
 * give .eos-side a box, so one behaviour has one owner.
 *
 * !important throughout for the same reason as the rest of this file: the cinema layer pins
 * .eos-side to its own `side` area and sets display on these elements with !important, and a
 * plain declaration loses that fight. */
.eos-watch--cinema.is-studio.is-side-stack .eos-side {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0; min-height: 0;
  gap: 8px;
  overflow: hidden;
  /* The cinema layer caps this column at `max-height: 84vh !important` for the ORDINARY
     page, where it hangs beside a stage of its own height. Inside the workspace the grid
     cell is the authority, and the cap left the side column 64px short of the video beside
     it - measured 756 against 820. A cell decides its own height here. */
  max-height: none !important;
  height: 100% !important;
  align-self: stretch !important;
}
.is-studio.is-side-stack .eos-side-tabs { display: flex !important; flex: 0 0 auto; }
/* Only the active tab's panel occupies the cell. */
.is-studio.is-side-stack .eos-side-panel { display: none !important; grid-area: auto !important; }
.is-studio.is-side-stack .eos-side-panel.is-active {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0; min-width: 0;
}
/* A panel pulled OUT of the stack is a floating window again, and must not be hidden by the
   not-active rule above - it is no longer part of the stack at all. */
.is-studio.is-side-stack .eos-side-panel.is-floating,
.is-studio.is-side-stack .eos-side-panel.is-max { display: flex !important; }
.is-studio.is-side-stack .eos-side-panel.is-floating { flex: 0 0 auto !important; }
/* The tab already names the panel, so the studio head keeps only its buttons - float,
   maximise and close stay reachable without printing the title twice. */
.is-studio.is-side-stack .eos-side-panel:not(.is-floating):not(.is-max) > .eos-studio-head {
  min-height: 0; padding: 2px 4px;
}
.is-studio.is-side-stack .eos-side-panel:not(.is-floating):not(.is-max) > .eos-studio-head > .eos-studio-title {
  display: none;
}
.is-studio.is-side-stack .eos-side-panel:not(.is-floating):not(.is-max) > .eos-studio-head { justify-content: flex-end; }

/* The tile preview for a stacked cell: one block, hatched like the panels it stands for. */
.eos-studio-thumb i.p-s {
  background: var(--st-muted);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.30) 0 2px, transparent 2px 6px);
}

/* ==================== v2.33.0 - labelled tiles + a reversible notice ====== */

/* Each cell carries its panel name, read from the same areas string that places it, so a
   label can never describe a cell the preview does not draw. Pattern as well as colour,
   so the tiles survive greyscale, colour blindness and forced-colors. */
.eos-studio-thumb i {
  display: flex !important; align-items: center; justify-content: center; overflow: hidden;
  font-size: 7.5px; font-weight: 600; line-height: 1;
  color: var(--st-gold-ink);
  /* v2.36.0 - the v2.26.8 base rule set opacity:.55 on the whole <i>, washing the LABEL
     along with the fill (~1.8:1 on the light box), which defeats the tiles' stated purpose
     of being READ. Full opacity here; the muted tiles carry their own alpha in the fill,
     and their text is white for contrast on that mid-grey. */
  opacity: 1;
}
.eos-studio-thumb i.p-c, .eos-studio-thumb i.p-b,
.eos-studio-thumb i.p-n, .eos-studio-thumb i.p-s,
.eos-studio-lmini i.p-c, .eos-studio-lmini i.p-b,
.eos-studio-lmini i.p-n, .eos-studio-lmini i.p-s { color: #fff; }
.eos-studio-thumb i.p-v { background: var(--st-gold); }
.eos-studio-thumb i.p-c { background: var(--st-muted); background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px); }
.eos-studio-thumb i.p-b { background: var(--st-muted); background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px); }
.eos-studio-thumb i.p-n { background: var(--st-muted); background-image: radial-gradient(rgba(255,255,255,.42) 1px,transparent 1px); background-size: 5px 5px; }
.eos-studio-cap {
  display: block; font-size: 9.5px; line-height: 1.35; margin-top: 4px;
  color: var(--st-muted); text-align: left; white-space: normal;
}

/* A notice that survives a hidden toolbar and carries the way back. The old flash lived
   in the bar, which can be unpinned and hidden - exactly when a member most needs to be
   told their screen just changed. */
.eos-studio-notice {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -8px);
  z-index: 100000; display: flex; align-items: center; gap: 12px;
  background: var(--st-fg); color: var(--st-solid);
  font: 500 12.5px/1.3 Figtree, system-ui, sans-serif;
  padding: 9px 9px 9px 15px; border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  max-width: min(92vw, 520px);
}
.eos-studio-notice.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.eos-studio-notice button {
  border: 0; background: rgba(128,128,128,.3); color: inherit; font: inherit; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; flex: none; min-height: 34px;
}
.eos-studio-notice button:hover { background: rgba(128,128,128,.45); }
@media (prefers-reduced-motion: reduce) { .eos-studio-notice { transition: none; } }


/* ── v2.34.1 — THE LAYOUT BOX CARRIES ITS OWN COLOURS ──────────────────────────
 * v2.33.0 let these two borrow the watch element's palette, and v2.34.0 mounted them
 * INSIDE that element so the borrowing worked. Both were wrong, for one reason each:
 *
 *  1. TRANSPARENCY. watch-redesign.css remaps `--cn-bg: var(--glass)` =
 *     rgba(255,255,255,0.72), so every surface built on --st-surface came out 28%
 *     see-through. The layout box is a DIALOG over a busy live page: chat messages and
 *     Bible verses read straight through the tiles and nobody could tell what they were
 *     choosing. (--st-solid already exists for exactly this reason - "floating windows
 *     must be opaque" - and the box was not using it.)
 *  2. CONTAINING BLOCK. A position:fixed element mounted inside the workspace is at the
 *     mercy of any ancestor with a transform, filter or containment: it stops resolving
 *     against the viewport and gets trapped in that ancestor's box, so the backdrop stops
 *     covering the page.
 *
 * Both disappear if the box does not depend on the workspace at all. LITERAL values, not
 * var() chains, so no other stylesheet can make a modal dialog translucent again. */
.eos-studio-box,
.eos-studio-notice {
  --st-surface:       #FFFFFF;
  --st-solid:         #FFFFFF;
  --st-fg:            #191919;
  --st-muted:         rgba(0, 0, 0, 0.55);
  --st-border:        rgba(0, 0, 0, 0.10);
  --st-border-strong: rgba(0, 0, 0, 0.20);
  --st-soft:          rgba(0, 0, 0, 0.04);
  --st-hover:         rgba(0, 0, 0, 0.08);
  --st-canvas:        #F4F4F2;
  --st-gold:          var(--eos-gold, #F5A312);
  --st-gold-ink:      #2a1e04;
  --st-focus:         #9a6200;
}
[data-theme="dark"] .eos-studio-box,
[data-theme="dark"] .eos-studio-notice {
  --st-focus:         var(--eos-gold, #F5A312);
  --st-surface:       #1F1F1E;
  --st-solid:         #1F1F1E;
  --st-fg:            #F8F8F6;
  --st-muted:         rgba(255, 255, 255, 0.55);
  --st-border:        rgba(255, 255, 255, 0.12);
  --st-border-strong: rgba(255, 255, 255, 0.24);
  --st-soft:          rgba(255, 255, 255, 0.06);
  --st-hover:         rgba(255, 255, 255, 0.10);
  --st-canvas:        #141414;
}
/* Follow the device only when the site has not been told which theme to wear. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eos-studio-box,
  :root:not([data-theme="light"]) .eos-studio-notice {
    --st-surface:       #1F1F1E;
    --st-solid:         #1F1F1E;
    --st-fg:            #F8F8F6;
    --st-muted:         rgba(255, 255, 255, 0.55);
    --st-border:        rgba(255, 255, 255, 0.12);
    --st-border-strong: rgba(255, 255, 255, 0.24);
    --st-soft:          rgba(255, 255, 255, 0.06);
    --st-hover:         rgba(255, 255, 255, 0.10);
    --st-canvas:        #141414;
  }
}

/* ================= v2.33.0 - the layout box ============================== */

/* The trigger keeps the toolbar answering "which layout am I on?" without opening
   anything: a live miniature plus the name, in the width the old scrolling strip
   of twelve unreadable thumbnails used to take. */
.eos-studio-lbtnwrap { display: flex; align-items: center; }
.eos-studio-lbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--st-border);
  color: inherit; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px 5px 6px; border-radius: 999px; cursor: pointer; min-height: 34px;
}
.eos-studio-lbtn:hover { border-color: var(--st-gold); }
.eos-studio-lbtn:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
.eos-studio-lmini {
  display: grid !important;                 /* same exposure as the big tiles */
  width: 26px; height: 19px; gap: 1.5px; flex: none;
  border-radius: 3px; overflow: hidden;
}
/* v2.36.0 - the mini's cells were transparent: every p-* fill and the height guard were
   scoped to .eos-studio-thumb, which the mini is not, so the "live miniature" promised on
   the toolbar chip was an empty grey box. Share the fills, and size the bare <i> the same
   way the tiles do (an icon stylesheet zero-heights unclassed <i>). */
.eos-studio-lmini i {
  border-radius: 1px; min-width: 0; min-height: 0;
  height: auto !important; align-self: stretch; justify-self: stretch;
}
.eos-studio-lmini i.p-v { background: var(--st-gold); }
.eos-studio-lmini i.p-c { background: var(--st-muted); background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px); }
.eos-studio-lmini i.p-b { background: var(--st-muted); background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px); }
.eos-studio-lmini i.p-n { background: var(--st-muted); background-image: radial-gradient(rgba(255,255,255,.42) 1px,transparent 1px); background-size: 5px 5px; }
.eos-studio-lmini i.p-s { background: var(--st-muted); background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.30) 0 2px,transparent 2px 6px); }
.eos-studio-llab { white-space: nowrap; }

.eos-studio-box {
  position: fixed; inset: 0; z-index: 100001; display: flex;
  /* v2.34.1 - CENTRED. flex-start pinned the card to the top of the screen with a lake of
     dimmed page under it; on a tall window the thing you are being asked to choose from
     sat in the top third. `center` centres it when it fits and, because the overlay
     scrolls, degrades to top-aligned when the content is taller than the viewport. */
  align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  /* Darker than .55: this sits over a live video, and the backdrop has to read as "the
     page is behind a dialog", not as a slightly dimmer page. */
  /* v2.36.0 - visibility:hidden, not opacity alone. opacity:0 leaves a closed chooser
     fully in the tab order and the accessibility tree: after opening once, every Tab
     pass walked ~15 invisible controls at the end of the body, and Enter on a ghost
     tile silently rewrote the workspace, even after Exit studio. */
  background: rgba(0,0,0,.66); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, visibility .18s;
  overflow-y: auto; overscroll-behavior: contain;
}
.eos-studio-box.open { opacity: 1; visibility: visible; pointer-events: auto; }
.eos-studio-boxcard {
  box-sizing: border-box;                /* 980 + padding used to render as a 1018px card */
  /* --st-solid, NOT --st-surface: the theme remaps --cn-bg to a 0.72-alpha glass and a
     see-through dialog over a live service is unreadable. */
  width: min(980px, 100%); background: var(--st-solid); color: var(--st-fg);
  border: 1px solid var(--st-border); border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0,0,0,.55); padding: 18px 18px 16px;
  transform: translateY(-8px); transition: transform .18s;
  /* Twelve tiles plus a twelve-row tick-list measured 853px in a 720px window. The card
     is capped and only its BODY scrolls, so the title and the close button stay put -
     a dialog whose own close button scrolls away is a dialog you are stuck in. */
  max-height: calc(100vh - 32px); display: flex; flex-direction: column; min-height: 0;
}
.eos-studio-boxbody { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 2px; background: var(--st-solid); }
.eos-studio-boxhead { flex: none; }
.eos-studio-box.open .eos-studio-boxcard { transform: none; }
.eos-studio-boxhead { display: flex; align-items: flex-start; gap: 14px; }
.eos-studio-boxhead h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.eos-studio-boxhead p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--st-muted); max-width: 62ch; }
.eos-studio-boxx {
  margin-left: auto; flex: none; width: 34px; height: 34px; line-height: 1; font-size: 22px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
}
.eos-studio-boxx:hover { background: rgba(128,128,128,.22); }

.eos-studio-boxgrid {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.eos-studio-boxitem { display: flex; flex-direction: column; gap: 6px; }
/* The tiles exist to be READ. At the strip's ~34px the panel names could not render at
   all, which is why twelve layouts looked like four. */
.eos-studio-thumb.is-big {
  /* v2.35.0 - the tiles live on <body> now, outside the workspace, where any theme or
     plugin rule for `button` can reach them. v2.26.8 already lost this exact fight inside
     the toolbar and had to answer with !important; the tiles moved and the protection did
     not move with them. The JS writes the template properties with `important` too. */
  display: grid !important;
  width: 100%; aspect-ratio: 16 / 10; height: auto; gap: 3px; padding: 3px;
  border-radius: 10px; border: 1px solid var(--st-border);
  background: rgba(128,128,128,.1); cursor: pointer;
}
.eos-studio-thumb.is-big i { font-size: 10.5px; border-radius: 4px; }
.eos-studio-thumb.is-big:hover { border-color: var(--st-muted); }
.eos-studio-thumb.is-big.is-sel { border-color: var(--st-gold); box-shadow: 0 0 0 2px var(--st-gold); }
.eos-studio-thumb.is-big:focus-visible { outline: 2px solid var(--st-gold); outline-offset: 3px; }
.eos-studio-thumb.is-big .eos-studio-cap { grid-column: 1 / -1; margin-top: 2px; font-size: 10px; }
.eos-studio-boxname { font-size: 12.5px; font-weight: 600; }
.eos-studio-thumb.is-big.is-sel + .eos-studio-boxname::after {
  content: " · in use"; font-weight: 500; color: var(--st-gold);
}

/* ---- the leader's tick-list -------------------------------------------- */
.eos-studio-curate { margin-top: 20px; border-top: 1px solid var(--st-border); padding-top: 14px; }
.eos-studio-curate h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.eos-studio-curate > p { margin: 3px 0 10px; font-size: 12px; color: var(--st-muted); }
.eos-studio-ticks { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.eos-studio-tick {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 8px; font-size: 12.5px; cursor: pointer; min-height: 34px;
}
.eos-studio-tick:hover { background: rgba(128,128,128,.14); }
.eos-studio-tick input { width: 16px; height: 16px; flex: none; accent-color: var(--st-gold); }
.eos-studio-tick input:disabled { cursor: not-allowed; }
.eos-studio-tick .nm { flex: 1; }
/* Staged, not applied — the row says so on its own, not only in the summary. */
.eos-studio-tick.is-dirty { background: rgba(237,185,79,.12); }
.eos-studio-tick.is-dirty .nm { font-weight: 700; }
.eos-studio-tick.is-dirty::after {
  content: "changed"; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--st-gold);
}
.eos-studio-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(128,128,128,.24); border-radius: 999px; padding: 2px 7px;
}
.eos-studio-cbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(128,128,128,.12); font-size: 12px;
}
.eos-studio-cbar.is-dirty { background: rgba(237,185,79,.15); box-shadow: inset 0 0 0 1px var(--st-gold); }
.eos-studio-cbar span { flex: 1; min-width: 190px; }
.eos-studio-cbar button {
  border: 0; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 16px; min-height: 34px;
  background: var(--st-gold); color: var(--st-gold-ink);
}
.eos-studio-cbar button.ghost { background: rgba(128,128,128,.28); color: inherit; }
.eos-studio-cbar button:disabled { opacity: .45; cursor: default; }

@media (max-width: 560px) {
  .eos-studio-boxcard { padding: 14px; border-radius: 14px; }
  .eos-studio-boxgrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .eos-studio-llab { display: none; }          /* the miniature still identifies it */
}
@media (prefers-reduced-motion: reduce) {
  .eos-studio-box, .eos-studio-boxcard { transition: none; }
}

/* ============================================================================
   v3.26.0 — THE FOUR NEW PANEL LETTERS IN THE LAYOUT TILES

   The workspace grew from four managed panels to seven, so the preset alphabet
   grew from v/c/b/n(/s) to v/c/b/n/p/f/g/h. Every tile swatch is painted by a
   per-letter rule, and a letter with no rule falls through to the base
   `.eos-studio-thumb i` block: visible, but undifferentiated mid-grey with gold
   ink instead of the white its neighbours get. Four presets would then have
   read as three grey blanks.

   These sit in studio.css rather than the mambo layer on purpose: they are
   siblings of the .p-v/.p-c/.p-b/.p-n rules a few lines above, at identical
   specificity, and putting them in a different sheet would make the paint depend
   on enqueue order for no benefit. studio.css is not purgeable (94% of its
   tokens have no mambo equivalent), so this is not a rule that has to be ported
   back out later.

   Patterns are chosen to stay distinguishable at 8px: prayer and flow are
   diagonals in opposite directions, give is a coarse dot, host is a crosshatch.
   ========================================================================= */
.eos-studio-thumb i.p-p, .eos-studio-thumb i.p-f,
.eos-studio-thumb i.p-g, .eos-studio-thumb i.p-h,
.eos-studio-lmini i.p-p, .eos-studio-lmini i.p-f,
.eos-studio-lmini i.p-g, .eos-studio-lmini i.p-h { color: #fff; }

.eos-studio-thumb i.p-p,
.eos-studio-lmini i.p-p {
  background: var(--st-muted);
  background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px);
}
.eos-studio-thumb i.p-f,
.eos-studio-lmini i.p-f {
  background: var(--st-muted);
  background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px);
}
.eos-studio-thumb i.p-g,
.eos-studio-lmini i.p-g {
  background: var(--st-muted);
  background-image: radial-gradient(rgba(255,255,255,.46) 1.6px,transparent 1.6px);
  background-size: 7px 7px;
}
.eos-studio-thumb i.p-h,
.eos-studio-lmini i.p-h {
  background: var(--st-muted);
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 5px);
}