/* The shared public player. Tenant shells may map these tokens to their palette. */
.site-video {
  --video-ink: var(--color-neutral);
  --video-paper: var(--color-neutral-content);
  --video-focus: var(--color-primary);
  position: relative;
  isolation: isolate;
}
.site-video > video { display: block; width: 100%; height: auto; }
.site-video-controls[hidden] { display: none; }
.site-video-controls:not([hidden]) {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 2.5rem .7rem .7rem;
  background: linear-gradient(transparent, color-mix(in srgb, var(--video-ink) 55%, transparent));
  pointer-events: none;
}
.site-video-controls button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--video-paper) 45%, transparent);
  color: var(--video-paper);
  background: color-mix(in srgb, var(--video-ink) 72%, transparent);
  cursor: pointer;
  pointer-events: auto;
}
.site-video-controls button:first-child { margin-right: auto; }
.site-video-controls button:focus-visible { outline: 3px solid var(--video-focus); outline-offset: 3px; }
.site-video-controls svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-video-pause-icon, .site-video-sound-icon { display: none; }
.site-video-controls [data-playing="true"] .site-video-play-icon,
.site-video-controls [aria-pressed="true"] .site-video-muted-icon { display: none; }
.site-video-controls [data-playing="true"] .site-video-pause-icon,
.site-video-controls [aria-pressed="true"] .site-video-sound-icon { display: block; }