/* Section 28/29 - the embed renderer inside the existing player shell.
 *
 * The hard lock is the whole point of this file: it must not be able to change
 * the player's width, height, aspect ratio or position. So it sets no size on
 * the container at all. The iframe is absolutely positioned to fill whatever box
 * the container already is, and every selector below is scoped to
 * `.embed-active` or `body.embed-mode` so nothing here applies in native mode.
 *
 * No selector here names the player container, the video element by id, the
 * video section or the page frame - not even to hide something. The suspended
 * video is reached through a descendant selector under the embed-mode class
 * instead, so a hard-lock test can assert the absence of those ids outright.
 */

.embed-renderer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: #000;
  /* Above the suspended <video>, below the existing controls and menus. */
  z-index: 3;
}

/* The suspended native element stays in the layout - removing it would change
 * the container's own sizing - but must not paint over the iframe. */
.embed-active video {
  visibility: hidden;
}

/* Section 29. A native-only control keeps its box, so nothing shifts, and reads
 * as unavailable rather than broken. */
[data-embed-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* The provider's own player draws its controls inside the iframe, so ours must
 * not sit on top of the picture and take the clicks. Controls that still mean
 * something in embed mode - fullscreen, close - keep working because they are
 * above this stacking context in the existing layout. */
body.embed-mode .player-hover-overlay,
body.embed-mode .center-play-overlay,
body.embed-mode .seek-overlay {
  display: none !important;
}

.embed-active::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .embed-renderer {
    transition: none;
  }
}