/* Body Zen Lab: the video layer (lab-video.js). Lab only: lab/serve.py links this file into the app page.

   While video is on, <body> carries .lab-video-on and one layout class:
     .lab-layout-mini   the clip fills the screen; a small ring in the top corner keeps the beat
     .lab-layout-split  phone: clip on top, compact ring and controls below; desktop: clip left, panel right
     .lab-layout-edge   the clip fills the screen; a glowing band around the screen edge keeps the beat
   .lab-immersive marks the two full-screen layouts; there .lab-ui-asleep fades the controls after a few
   quiet seconds (never at a stop). Nothing here applies while video is off. */

/* --- the clip ------------------------------------------------------------------------------------------- */
.lab-video {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #050506;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.lab-video.is-shown { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.lab-video.is-covered { transition: none; }
.lab-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .3s ease;
}
.lab-video video.is-on { opacity: 1; }
.lab-video video.fit-contain { object-fit: contain; }
/* No dark scrim: only soft gradients where text sits, top and bottom. A stop dims the paused clip. */
.lab-video-scrim {
  position: absolute; inset: 0; background-color: rgba(6, 6, 8, 0);
  background-image: linear-gradient(to bottom, rgba(6, 6, 8, .62) 0, rgba(6, 6, 8, 0) 110px),
                    linear-gradient(to top, rgba(6, 6, 8, .8) 0, rgba(6, 6, 8, 0) 230px);
  transition: background-color .45s ease;
}
.lab-video.is-held .lab-video-scrim { background-color: rgba(6, 8, 12, .55); }

/* --- the app around it ------------------------------------------------------------------------------------ */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .app-container { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on:not(.zen-immersed) #zen-space,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on:not(.zen-immersed) #zen-horizon,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on:not(.zen-immersed) #zen-cosmos,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on:not(.zen-immersed) #ambience-swimmer { display: none !important; }

/* App rules here carry !important and deep selectors, so every rule that reshapes the app is prefixed
   with two :is(#id, :root) groups: two ID-weights of specificity that always match. */

/* The stage becomes a transparent full-screen layer. Of its contents only two stay: the app's REAL ring
   stage (ring, wave line, aura, beat wash, recovery flow: every effect it has) and Ease back / Faster.
   lab-video.js measures the ring and places the stage with translate + scale (CSS variables below), and
   clips it to a rounded tile around the ring. The ring is not shown in Edge beat, where the band carries
   the beat. The app keeps running and updating all of it; nothing is copied. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #main-visualizer-deck, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #main-visualizer-deck {
  position: fixed !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important;
  width: auto !important; height: auto !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important;
  visibility: visible !important; opacity: 1 !important; display: block !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #main-visualizer-deck::before, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #main-visualizer-deck::after,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #main-visualizer-deck::before, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #main-visualizer-deck::after { display: none !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #main-visualizer-deck > :not(.rhythm-ring-stage):not(#pace-nudge),
:is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #main-visualizer-deck > :not(.rhythm-ring-stage):not(#pace-nudge),
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-edge #main-visualizer-deck > .rhythm-ring-stage { display: none !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini .rhythm-ring-stage, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .rhythm-ring-stage {
  position: fixed !important; left: 0 !important; top: 0 !important; margin: 0 !important; z-index: 3 !important;
  width: var(--lab-stage-w, 400px) !important; height: var(--lab-stage-h, 340px) !important; min-height: 0 !important; max-width: none !important;
  transform: translate(var(--lab-ring-x, 0px), var(--lab-ring-y, 0px)) scale(var(--lab-ring-s, 1)) !important;
  transform-origin: 0 0 !important; transition: none !important; pointer-events: none !important;
  clip-path: var(--lab-ring-clip, none); -webkit-clip-path: var(--lab-ring-clip, none);
  background: radial-gradient(circle var(--lab-glow-r, 160px) at var(--lab-glow-x, 50%) var(--lab-glow-y, 50%), rgba(6, 8, 10, .55), rgba(6, 8, 10, .3) 70%, rgba(6, 8, 10, 0)) !important;
}
/* The beat stays compact. Its level is drawn separately at readable screen-pixel sizes. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini .rhythm-ring-stage { opacity: 1 !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini #pulse-center {
  background: rgba(22,14,29,.58) !important;
  border: calc(2.2px / var(--lab-ring-s,1)) solid #f6c1e6 !important;
  transform: scale(calc(1 + var(--beat-energy,0) * .18)) !important;
  box-shadow: 0 0 calc(4px + var(--beat-energy,0) * 24px) #e797cc99, inset 0 0 8px #120917 !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini #pulse-center .beat-wash::before {
  background: linear-gradient(to bottom, transparent 35%, #ffb5e133 43%, #ffb5e1 48%, #fff3fc 50%, #ffb5e1 52%, #ffb5e133 57%, transparent 65%) !important;
  filter: none !important; opacity: calc(var(--motion-opacity,0) * 1.6) !important;
  transform: translateY(calc(var(--motion-y,0) * 1.05%)) !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini #pulse-center::after {
  border-width: calc(2px / var(--lab-ring-s,1)); border-color: #ffd9f1;
  opacity: calc((1 - var(--beat-travel,1)) * .9);
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini #live-wave-canvas {
  filter: drop-shadow(0 1px 1px #09050c) !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-mini #pulse-center > :is(.ready-core,.zen-tempo-center,#pulse-phase-icon,#journey-percent,#recovery-breath-label) {
  visibility: hidden !important;
}
#lab-mini-status {
  position: fixed; z-index: 4; pointer-events: none;
  left: var(--lab-mini-x); top: var(--lab-mini-y); width: var(--lab-mini-d);
  height: var(--lab-mini-d); transform: translate(-50%,-50%);
  display: grid; place-items: center; text-align: center; color: #fff;
}
#lab-mini-status[hidden] { display: none !important; }
#lab-mini-backing {
  position: fixed; z-index: 2; pointer-events: none;
  left: var(--lab-mini-x); top: calc(var(--lab-mini-y) - var(--lab-mini-d) * 1.1);
  width: var(--lab-mini-d); height: calc(var(--lab-mini-d) * 1.6); transform: translateX(-50%);
  overflow: visible; filter: drop-shadow(0 2px 4px #0009);
}
#lab-mini-backing[hidden] { display: none !important; }
#lab-mini-backing path { fill: rgba(22,14,29,.92); stroke: #eeb0dc; stroke-width: 1.6; }
#lab-mini-status strong { display: block; font: 650 18px/1.05 system-ui; text-shadow: 0 1px 3px #000, 0 0 5px #000; }
#lab-mini-status small { display: block; font: 500 12px/1.2 system-ui; margin-top: 4px; text-shadow: 0 1px 3px #000, 0 0 5px #000; }

/* Move the existing check-in, with its handlers intact, out of the transformed stage. */
#lab-video-check-in {
  display: none; position: fixed; z-index: 8; left: 50%; transform: translateX(-50%);
  bottom: var(--lab-check-in-bottom, 130px); width: min(560px, calc(100vw - 24px));
  max-height: var(--lab-check-in-space, 260px); overflow-y: auto;
  border: 1px solid #ffffff24; border-radius: 16px; padding: 12px 16px;
  background: rgba(22,14,29,.96); color: #fff; box-shadow: 0 6px 24px #0005;
}
#lab-video-check-in:has(> .check-in-core:not([hidden])) { display: block; }
#lab-video-check-in > .check-in-core {
  position: static !important; inset: auto !important; transform: none !important; translate: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
#lab-video-check-in > .check-in-core[hidden] { display: none !important; }
#lab-video-check-in .check-in-step { font-size: 11px; color: #d0bccc; }
#lab-video-check-in .check-in-question { max-width: none; font: 600 18px/1.25 system-ui; color: #fff; }
#lab-video-check-in .check-in-options { width: 100%; flex-direction: row; gap: 6px; }
#lab-video-check-in .check-in-options button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 6px; font: 500 14px/1.2 system-ui;
  color: #fff; background: #382335; border: 1px solid #986a88; border-radius: 10px;
}
#lab-video-check-in .check-in-options button:is(:hover,:focus-visible) { background: #58354c; outline: 2px solid #eeb0dc; outline-offset: 2px; }
#lab-video-check-in .check-in-skip { min-height: 32px; font-size: 12px; color: #d0bccc; padding: 6px 10px; }
body:has(#lab-video-check-in > .check-in-core:not([hidden])) #lab-video-slot { visibility: hidden; }
/* Ease back / Faster ride just above the scale, whenever the app shows them. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #pace-nudge:not([hidden]), :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #pace-nudge:not([hidden]) {
  position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; top: auto !important;
  bottom: var(--lab-pace-bottom, 120px) !important; width: min(560px, calc(100vw - 24px)) !important; max-width: none !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  margin: 0 !important; z-index: 4 !important; pointer-events: auto !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #pace-nudge .btn, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #pace-nudge .btn {
  background: rgba(10, 10, 12, .62) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* The phone's folded scale (ui-shell.js) has no handle here, so the scale always stays out. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on.dock-folded .zen-arousal-dock #arousal-tactile-strip { display: grid !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-status-ribbon, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-status-ribbon,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-drawer-toggle-row, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-drawer-toggle-row,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive #zen-advanced-drawer, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact #zen-advanced-drawer,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .dock-handle, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .dock-handle,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-header-bar, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-zones-legend,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .visual-intensity-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .visual-intensity-dock,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-guidance-callout, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-arousal-guidance-callout { display: none !important; }

/* Slim bottom bar: the arousal scale over one row of Pause / Recovery break / Finished. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-arousal-dock,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-action-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-action-dock {
  position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 4 !important;
  width: min(560px, calc(100vw - 24px)) !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-action-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-action-dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-arousal-dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important; }
/* Short landscape Split keeps the numbered scale and gives its repeated labels' room to the controls. */
@media (max-height: 460px) {
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-arousal-header-bar,
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-arousal-zones-legend { display: none !important; }
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-section, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-arousal-section { margin: 0 !important; padding: 0 !important; width: 100% !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-controls, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-controls { display: flex !important; flex-direction: row !important; gap: 8px !important; width: 100% !important; max-width: none !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-controls .controls-row, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-controls .controls-row { display: contents !important; }
/* Before a session the app shows only Start session (settings-modes.css hides the rest); keep that. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-controls[data-session-controls="idle"] .secondary-actions, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-controls[data-session-controls="idle"] .secondary-actions { display: none !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-controls .btn, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-controls .btn {
  flex: 1 1 0 !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 8px !important; font-size: 14px !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-dock .arousal-tap-btn { text-shadow: 0 1px 3px rgba(0, 0, 0, .9) !important; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-header { position: relative !important; z-index: 4 !important; }
/* Over a bright clip the header and the scale carry their own dark glass, so they read on any frame. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-header, :is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-header {
  background: rgba(10, 10, 12, .55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 16px !important; padding-inline: 8px !important; box-sizing: border-box !important;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-dock {
  background: rgba(10, 10, 12, .62) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 14px !important; padding: 2px 4px !important; box-sizing: border-box !important;
}

/* Controls fade after a few quiet seconds in the full-screen layouts; a tap brings them back. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-header, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-action-dock,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail { transition: opacity .35s ease; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep .zen-header, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep .zen-action-dock,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep .lab-video-rail,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep #pace-nudge,
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep #bodyzen-lab-badge { opacity: 0 !important; pointer-events: none !important; }
/* The arousal scale never leaves: faint while the controls rest, and a tap on it reports the level. */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep .zen-arousal-dock { opacity: .45; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive.lab-ui-asleep * { cursor: none; }

/* --- split -------------------------------------------------------------------------------------------- */
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .lab-video { bottom: auto; height: var(--lab-split-h, 56vh); }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-split-compact .zen-header { position: relative; z-index: 4; }
@media (min-width: 900px) {
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .lab-video { inset: 0 480px 0 0 !important; height: auto !important; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .app-container {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 480px !important; max-width: 480px !important;
    margin: 0 !important; border-radius: 0 !important; overflow-x: hidden !important; overflow-y: auto !important;
    background: #0d0d0f !important; border-left: 1px solid rgba(255, 255, 255, .08) !important;
  }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .app-container > * { max-width: 100% !important; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .header-actions .btn-text, :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .header-actions .privacy-shortcut { display: none !important; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .zen-status-ribbon { width: auto !important; max-width: 100% !important; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split #main-visualizer-deck { width: 100% !important; max-width: 100% !important; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .zen-arousal-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .zen-action-dock,
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .primary-controls { width: 100% !important; max-width: 100% !important; }
}

/* --- what the pace means right now: a small tag under the corner ring, or with the BPM in Edge beat ------ */
.lab-beat { display: none; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-beat.has-text {
  display: flex; align-items: baseline; gap: 6px; position: fixed; z-index: 8; pointer-events: none;
  left: var(--lab-tag-x, auto); top: var(--lab-tag-y, 66px); right: auto; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: #eef0f2; background: rgba(8, 10, 12, .62);
  font: 600 13px/1.2 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split:not(.lab-split-compact) .lab-beat.has-text { display: none; }
.lab-beat-bpm:empty, .lab-beat-unit:empty { display: none; }
.lab-beat-unit { font-weight: 500; color: #c9d4d1; }
.lab-beat.is-peak { color: #ffe1a8; }
.lab-beat.is-calm { color: #cfe0ff; }

.lab-edge-band { display: none; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-edge .lab-edge-band {
  display: block; position: fixed; inset: 0; z-index: 7; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(143, 227, 208, .5), inset 0 0 22px rgba(143, 227, 208, .22);
  transition: box-shadow .28s ease-out;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-edge .lab-edge-band.is-beat {
  box-shadow: inset 0 0 0 4px rgba(143, 227, 208, .95), inset 0 0 52px rgba(143, 227, 208, .55); transition-duration: .06s;
}
:is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-edge .lab-edge-band.is-calm { box-shadow: inset 0 0 0 3px rgba(127, 178, 255, .8), inset 0 0 30px rgba(127, 178, 255, .3); }


/* --- one message row below the header, outside the ring's transform and away from the video centre --- */
.lab-video-slot { display: none; }
body.lab-video-on .lab-video-slot {
  position: fixed; z-index: 8; left: var(--lab-slot-x, 50%); top: var(--lab-slot-y, 60%); width: var(--lab-slot-w, 360px);
  height: 32px; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; align-items: center; pointer-events: none; transition: opacity .35s ease;
}
.lab-video-slot:has(#challenge-status:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; }
.lab-video-slot.is-narrow:has(#lab-rhythm-cd.is-on) { grid-template-columns: minmax(0, 1fr); }
.lab-video-slot.is-narrow:has(#lab-rhythm-cd.is-on) #lab-video-slot-line { display: none; }
#lab-video-slot-line:has(#challenge-status[hidden]), #lab-video-slot-line:empty { display: none; }
body.lab-immersive.lab-ui-asleep .lab-video-slot { opacity: .45; }
body.lab-immersive.lab-ui-asleep #lab-video-slot-line > #challenge-status { pointer-events: none; }
.lab-slot-row { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; min-width: 0; }
.lab-slot-row > * {
  position: static !important; left: auto !important; top: auto !important; transform: none !important;
  max-width: 100% !important; margin: 0 !important;
}
#lab-video-slot-pill > #lab-task, #lab-video-slot-pill > #lab-rhythm-cd { position: absolute !important; left: 50% !important; top: 0 !important; transform: translateX(-50%) !important; height: 32px; box-sizing: border-box; }
#lab-video-slot-pill > #lab-video-caption { position: absolute !important; left: 50% !important; top: 6px !important; transform: translateX(-50%) !important;
  white-space: nowrap; padding: 3px 10px; border-radius: 999px; font: 12px/1.4 system-ui, -apple-system, sans-serif; color: #c4c8cd; background: rgba(10, 10, 12, .5); }
#lab-video-slot-pill > #lab-video-caption[hidden] { display: none; }
#lab-video-slot-pill:has(#lab-task.is-on, #lab-rhythm-cd.is-on) #lab-video-caption { display: none; }
#lab-video-slot-pill:has(#lab-rival.is-on) #lab-video-caption { display: none; }
#lab-video-slot-pill:has(#lab-rhythm-cd.is-on) #lab-task { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
#lab-video-slot-line > #challenge-status { pointer-events: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 26px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: rgba(10, 10, 12, .62); }
#lab-video-slot-line > #challenge-status[hidden] { display: none !important; }

/* --- hands off: unmistakable in every layout -------------------------------------------------------------- */
.lab-handsoff {
  position: fixed; z-index: 8; left: 50%; top: var(--lab-msg-y, 38%); transform: translate(-50%, -50%);
  width: max-content; max-width: min(420px, calc(100vw - 112px)); padding: 14px 20px; border-radius: 16px;
  text-align: center; pointer-events: none; color: #dce9ff; background: rgba(10, 14, 22, .86);
  border: 1px solid rgba(127, 178, 255, .6); box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  font: 15px/1.4 system-ui, -apple-system, sans-serif;
}
.lab-handsoff[hidden] { display: none; }
.lab-handsoff strong { display: block; font-size: 20px; font-weight: 650; margin-bottom: 2px; }
.lab-handsoff span { color: #b9c6da; }
.lab-handsoff.is-compact { padding: 9px 16px; }
.lab-handsoff.is-compact strong { font-size: 17px; margin: 0; }
.lab-handsoff.is-compact span { display: none; }
.lab-break-options { display: block; min-height: 44px; margin: 10px auto 0; padding: 8px 16px; border-radius: 12px;
  border: 1px solid #ffffff40; background: #252531; color: #f5f5f7; font: 500 14px/1.2 system-ui; cursor: pointer; pointer-events: auto; }
.lab-break-options[hidden] { display: none; }
.lab-break-options:focus-visible { outline: 2px solid #9bbbef; outline-offset: 3px; }
body.lab-video-on:has(> #punish-choice:not([hidden])) .lab-handsoff { visibility: hidden; }
body.lab-video-on > #punish-choice {
  position: fixed; z-index: 60; top: var(--lab-break-options-top, 80px); left: 50%; transform: translateX(-50%);
  max-width: 460px; width: calc(100vw - 32px); max-height: calc(100dvh - var(--lab-break-options-top, 80px) - 16px);
  box-sizing: border-box; margin: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(17, 15, 24, .96); border: 1px solid #ffffff30; border-radius: 16px; box-shadow: 0 12px 40px #00000080;
}
@media (min-width: 900px) {
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .lab-handsoff { left: calc((100vw - 480px) / 2); }
  body.lab-layout-split > #punish-choice { left: calc((100vw - 480px) / 2); width: calc(100vw - 480px - 32px); }
}

/* --- controls rail ---------------------------------------------------------------------------------------- */
/* Video off: no floating control at all; the entry is one more icon in the app's bottom icon row.
   Video on: a vertical column on the chosen side, clear of the ring tile, header and bottom bar.
   In desktop Split, either side belongs to the clip area, outside the app panel. */
.lab-video-rail { display: none; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail {
  display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 8; left: 10px; right: auto; top: var(--lab-rail-y, 50%); transform: translateY(-50%);
  max-height: var(--lab-rail-space, 100vh); overflow-y: auto; scrollbar-width: none;
}
.lab-video-rail::-webkit-scrollbar { display: none; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail[data-side="right"] { left: auto; right: 10px; }
@media (min-width: 900px) {
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail { left: 24px; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail[data-side="right"] { right: 24px; }
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-layout-split .lab-video-rail[data-side="right"] { right: calc(480px + 16px); }
}
.lab-video-rail button {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  color: #ececf0; background: rgba(12, 12, 14, .62); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lab-video-rail button svg { width: 16px; height: 16px; }
.lab-video-rail button:hover { background: rgba(32, 32, 36, .8); }
.lab-video-rail button:focus-visible { outline: 2px solid #8fe3d0; outline-offset: 2px; }
.lab-video-rail [data-act="power"] { margin-bottom: 4px; }
.lab-video-rail [data-act="layout"] { margin-top: 4px; }
.lab-video-rail.is-empty [data-act="prev"], .lab-video-rail.is-empty [data-act="keep"],
.lab-video-rail.is-empty [data-act="next"] { display: none; }
.lab-video-rail [aria-pressed="true"] { color: #b9f5e7; background: rgba(40, 120, 104, .55); border-color: rgba(143, 227, 208, .7); }
.lab-video-rail button[hidden] { display: none; }
.lab-video-rail [data-act="preset"].is-set { color: #b9f5e7; border-color: rgba(143, 227, 208, .7); }

/* --- clip presets list (lab-video.js openMenu) ---------------------------------------------------------- */
.lab-video-presets {
  position: fixed; z-index: 9; width: 210px; max-height: min(70vh, 470px); overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 14px;
  background: rgba(12, 12, 14, .88); border: 1px solid rgba(255, 255, 255, .16); color: #ececf0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 14px/1.3 system-ui, -apple-system, sans-serif;
}
.lab-video-presets[hidden], body.zen-immersed .lab-video-presets { display: none; }
.lab-video-presets button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 36px; padding: 8px 10px;
  border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lab-video-presets button:hover, .lab-video-presets button:focus-visible { background: rgba(255, 255, 255, .09); outline: none; }
.lab-video-presets button[aria-checked="true"] { color: #b9f5e7; background: rgba(40, 120, 104, .45); }
.lab-video-presets small { font-size: 12px; color: #8e8e98; font-variant-numeric: tabular-nums; }
body.zen-immersed .lab-video-rail { display: none; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail.is-tight { gap: 3px; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail.is-tight button { width: 28px; height: 28px; }
:is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail.is-tight [data-act] { margin: 0; }
@media (min-width: 900px) {
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail { gap: 8px; }
  .lab-video-rail button { width: 38px; height: 38px; }
  .lab-video-rail button svg { width: 18px; height: 18px; }
}

/* The entry in the bottom icon row, styled by the app's own .btn-drawer-toggle. */
.lab-video-entry { position: relative; flex: 0 0 auto; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; }
.lab-video-entry > svg { display: block !important; width: 18px; height: 18px; }
.lab-video-entry[aria-pressed="true"],
body.zen-mode .zen-drawer-toggle-row > .lab-video-entry[aria-pressed="true"] { color: #8fe3d0 !important; }
/* Until video has been turned on once, the entry is filled with the app's mint and a soft ring pulses out of
   it, so people see there is something to press. The app's .btn-drawer-toggle sets colours with !important
   (ui-polish.css, and about-body-zen.css through the row), hence the !important and the row in the selector;
   the pulse is a separate ring because an animation cannot override box-shadow: none !important. */
.lab-video-entry.is-invite,
body.zen-mode .zen-drawer-toggle-row > .lab-video-entry.is-invite {
  color: #06231d !important; background: #8fe3d0 !important; border-color: #8fe3d0 !important;
}
.lab-video-entry.is-invite::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  animation: lab-video-invite 2.4s ease-out infinite;
}
@keyframes lab-video-invite {
  0% { box-shadow: 0 0 0 0 rgba(143, 227, 208, .6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(143, 227, 208, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lab-video-entry.is-invite::before { animation: none; box-shadow: 0 0 0 3px rgba(143, 227, 208, .35); }
}
.lab-video-entry.is-unavailable::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #e3b36a;
}
.lab-video-note {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px;
  border-radius: 999px; font: 12px/1.2 system-ui, -apple-system, sans-serif; color: #c9ccd2; background: rgba(12, 12, 14, .9);
  border: 1px solid rgba(255, 255, 255, .12); pointer-events: none; z-index: 5;
}
.lab-video-note[hidden] { display: none; }

/* --- unlock dialog --------------------------------------------------------------------------------------- */
.lab-video-unlock {
  /* style.css zeroes every margin, which drops the browser's auto margin that centres a modal dialog */
  margin: auto;
  width: min(400px, calc(100vw - 32px)); padding: 22px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14); background: #141417; color: #ececf0;
  font: 15px/1.45 system-ui, -apple-system, sans-serif;
}
.lab-video-unlock::backdrop { background: rgba(0, 0, 0, .66); }
.lab-video-unlock h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.lab-video-unlock p { margin: 0 0 10px; color: #c4c4cc; }
.lab-video-unlock .lab-video-fine { font-size: 12px; color: #8e8e98; }
.lab-video-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.lab-video-actions button {
  flex: 1 1 auto; min-height: 42px; padding: 0 16px; white-space: nowrap; border-radius: 12px; font: inherit; cursor: pointer;
  color: #ececf0; background: transparent; border: 1px solid rgba(255, 255, 255, .2);
}
.lab-video-actions .is-primary { background: #e9e9ee; color: #141417; border-color: #e9e9ee; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .lab-video, .lab-video.is-shown, .lab-video video, .lab-video-scrim, .lab-beat, .lab-edge-band,
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-header, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-arousal-dock, :is(#lab-a, :root):is(#lab-b, :root) body.lab-immersive .zen-action-dock,
  :is(#lab-a, :root):is(#lab-b, :root) body.lab-video-on .lab-video-rail { transition: none !important; }
  .lab-beat.is-beat { transform: none !important; }
}