/* EDL video player — extends walkthrough chrome tokens (P1–P3) */

.edl-player-root {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.edl-player-shell {
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #121826);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.16), 0 24px 80px rgba(0, 0, 0, 0.45);
}

/* Stage box must equal the EDL frame's aspect ratio EXACTLY — the zoom-origin and caption-band
   geometry (mapSourceOriginToFramePercent / captionBandForAspect, computed against
   stage.getBoundingClientRect() in edl-player.js) assumes stage == frame. Default 16:9 below is
   just the pre-hydration fallback; stage.dataset.aspect (set in createEdlPlayer) picks the real
   aspect via the attribute selectors that follow. */
.edl-player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  margin: 0 auto;
}

.edl-player-stage[data-aspect='16:9'] {
  aspect-ratio: 16 / 9;
}

.edl-player-stage[data-aspect='4:3'] {
  aspect-ratio: 4 / 3;
}

.edl-player-stage[data-aspect='1:1'] {
  aspect-ratio: 1 / 1;
}

/* Portrait aspects: height-capped so a tall frame never blows out the viewport (mobile in
   particular), width derived from that cap via the aspect ratio directly. Landscape/square
   aspects above stay width-capped via the shell's max-width (960px) and width: 100%. Computing
   width as min(100%, capHeight * ratio) with height: auto (rather than setting height directly
   and letting width: auto derive from aspect-ratio) keeps the box's rendered aspect ratio EXACT
   even when the container is narrower than the capped-height box would otherwise be — required
   since the player's zoom-origin/caption-band math assumes stage aspect === frame aspect. */
.edl-player-stage[data-aspect='9:16'] {
  aspect-ratio: 9 / 16;
  width: min(100%, min(78vh, 780px) * 9 / 16);
  height: auto;
}

.edl-player-stage[data-aspect='4:5'] {
  aspect-ratio: 4 / 5;
  width: min(100%, min(78vh, 780px) * 4 / 5);
  height: auto;
}

.edl-video-stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Zoom/pan is driven per-frame from JS (see renderOverlays/updateZoomVisual in
     edl-player.js) so it can stay in lockstep with .edl-overlay-spotlight-zoom — a CSS
     transition here would race the JS writes and cause visible desync/wobble. */
  will-change: transform;
}

/* CONTAIN, every aspect, always — the whole source video is visible, never cover-cropped. When
   the source's native aspect matches the frame (native portrait recordings, the common case),
   contain fills the box exactly with zero bars; when it doesn't (e.g. a legacy 16:9 recording
   inside a 9:16 frame), letterbox bars appear instead of cropping content off-canvas. This was
   previously overridden per-aspect (object-fit: cover + fixed 9:16/1:1 sizing) which cropped
   mismatched-aspect sources and, combined with the stage always being 16:9 (see above), also
   visibly squashed/cropped portrait video inside a landscape box. */
.edl-player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
  opacity: 0;
  transition: opacity 0.05s linear;
}

.edl-player-video.is-active {
  opacity: 1;
  z-index: 1;
}

.edl-player-video.is-crossfading-in {
  z-index: 2;
}

.edl-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.edl-overlay-dynamic {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.edl-overlay-spotlight-zoom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.edl-overlay-spotlight-zoom[hidden],
.edl-overlay-caption--vo[hidden] {
  display: none !important;
}

.edl-overlay-card {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: min(340px, calc(100% - 28px));
  z-index: 6;
}

.edl-overlay-card h2 {
  font-size: clamp(13px, 2.8vw, 17px);
}

.edl-overlay-card p {
  font-size: clamp(12px, 2.4vw, 14px);
}

.edl-overlay-card__logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.edl-overlay-card--watermark {
  left: auto;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(320px, calc(100% - 28px));
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(10, 10, 15, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.edl-overlay-card--watermark h2 {
  margin: 0;
  font-size: clamp(11px, 2.1vw, 13px);
  line-height: 1.2;
}

.edl-overlay-card--watermark p {
  margin: 2px 0 0;
  color: #c4b5fd;
  font-size: clamp(10px, 1.9vw, 12px);
  line-height: 1.2;
}

.edl-overlay-card--outro {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 10, 15, 0.9);
}

.edl-overlay-card--outro .edl-overlay-card__logo {
  width: clamp(56px, 12vw, 80px);
  height: clamp(56px, 12vw, 80px);
}

.edl-overlay-card--outro h2 {
  margin: 0;
  font-size: clamp(18px, 4vw, 28px);
}

.edl-overlay-card--outro p {
  margin: 0;
  color: #c4b5fd;
  font-size: clamp(14px, 2.8vw, 18px);
}

/* Position comes from the per-aspect safe area computed in edl-player.js
   (positionCaptionBand -> captionBandForAspect, same math the canvas bake uses) via CSS custom
   properties set on the parent overlay layer, NOT a fixed bottom offset — a fixed bottom: 18px
   put captions in the wrong place on portrait aspects (often overlapping the presenter avatar,
   or off the actual letterboxed video content box). Centered horizontally within the band (not
   the whole stage) — hugs its text (width: max-content, capped by the band width) rather than
   spanning it as a full-width bar, so the visual "pill" caption look is unchanged; only its
   anchor point moved from the stage center to the band center, which matters once the band stops
   short of the avatar's column (16:9/4:3/1:1) instead of spanning full width. voCaptionEl
   overrides left/top/width/height/transform/font-size inline (positionCaptionBand) with its
   exact box since it needs deterministic layout for its own flex-centered text instead of
   shrink-to-fit. */
.edl-overlay-caption {
  position: absolute;
  left: calc(var(--caption-band-x, 16px) + var(--caption-band-w, calc(100% - 32px)) / 2);
  /* Fallback only matters before positionCaptionBand's first run (it always runs synchronously
     right after the player mounts, before any caption node can exist) — approximates the old
     fixed bottom-18px placement for a single-line box. */
  top: var(--caption-band-y, calc(100% - 46px));
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--caption-band-w, calc(100% - 32px));
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: #f8fafc;
  font-size: var(--caption-band-font, clamp(13px, 2.6vw, 16px));
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
  z-index: 6;
}

.edl-overlay-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--spot-x, 50%) var(--spot-y, 50%),
    transparent 0,
    transparent var(--spot-r, 18%),
    rgba(0, 0, 0, 0.55) calc(var(--spot-r, 18%) + 2%)
  );
  z-index: 4;
}

.edl-player-caption {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #e8ecf4;
  font-size: 13px;
  pointer-events: none;
  max-width: calc(100% - 24px);
  z-index: 7;
}

.edl-player-caption:empty {
  display: none;
}

.edl-player-caption.is-error {
  background: rgba(127, 29, 29, 0.85);
  color: #fecaca;
}

/* Non-fatal: narration/voiceover track failed but the video itself is still playing fine —
   visually distinct from .is-error (which signals playback itself is blocked/stalled). */
.edl-player-caption.is-voiceover-error {
  background: rgba(120, 89, 8, 0.85);
  color: #fde68a;
}

.edl-player-stage:fullscreen,
.edl-player-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  aspect-ratio: auto;
  background: #000;
}

.edl-player-stage:fullscreen .edl-video-stack,
.edl-player-stage:-webkit-full-screen .edl-video-stack {
  width: 100%;
  height: 100%;
}

.edl-btn-fullscreen.is-active {
  border-color: rgba(124, 92, 255, 0.55);
  background: rgba(124, 92, 255, 0.18);
}

.edl-player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(6, 8, 13, 0.92);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  flex-wrap: wrap;
}

.edl-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #e8ecf4;
  border-radius: 8px;
  width: 36px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
}

.edl-btn:hover {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(20, 184, 166, 0.45);
}

.edl-btn.is-active {
  background: rgba(20, 184, 166, 0.28);
  border-color: rgba(20, 184, 166, 0.65);
  color: #f0fdfa;
}

.edl-btn-toggle {
  font-size: 15px;
  line-height: 1;
}

.edl-btn-toggle.is-playing {
  background: rgba(20, 184, 166, 0.32);
  border-color: rgba(20, 184, 166, 0.7);
  color: #f0fdfa;
}

.edl-time {
  font-size: 13px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  min-width: 88px;
}

.edl-chapter {
  flex: 1;
  font-size: 13px;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 120px;
}

.edl-btn-download {
  width: auto;
  min-width: 36px;
  padding: 0 8px;
  font-size: 13px;
}

.edl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.edl-bake-status {
  font-size: 12px;
  color: #5eead4;
  min-width: 80px;
  flex: 0 1 auto;
}

.edl-bake-status[hidden] {
  display: none;
}

.edl-scrub {
  flex: 1 1 160px;
  min-width: 120px;
  accent-color: #14b8a6;
}

body.embed-mode .edl-page-header {
  display: none;
}

.edl-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.edl-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.edl-note {
  margin-top: 14px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

.edl-note code {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.edl-fixture-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.edl-fixture-links a {
  font-size: 12px;
  color: #5eead4;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(94, 234, 212, 0.25);
}

.edl-overlay-caption--vo {
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(94, 234, 212, 0.35);
  /* left/top/width/height/font-size are set inline by positionCaptionBand (edl-player.js) to the
     exact per-aspect safe-area box — center the text within that box on both axes. */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
}

.edl-audio-track {
  display: none;
}

.edl-avatar-overlay {
  position: absolute;
  z-index: 8;
  object-fit: cover;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  background: #000;
  pointer-events: none;
}

/* Standalone/shared walkthrough pages have no other mobile override (the Glimeo Studio embed
   scopes its own #gl-player-mount .edl-btn breakpoint separately in studio.css) — bump tap
   targets to the ~44px minimum on phones. .edl-btn holds a single text glyph set via
   textContent (no absolute-positioned icon), so no centering adjustment is needed here. */
@media (max-width: 480px) {
  .edl-btn {
    width: 44px;
    height: 44px;
  }
}