/* Video viewer: the poster shows at once, native controls, no text over the picture.
 * Only a small centered spinner while playback waits for data, and a thin line
 * along the bottom edge with how much of the video has arrived. */
.media-stage.is-video { place-items: center; overflow: hidden; }
.media-stage.is-video .media-player { background: #080c11; }
.media-spinner {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  pointer-events: none;
}
.media-spinner[hidden] { display: none; }
.media-spinner .inline-spinner {
  width: 28px; height: 28px; border-width: 3px; color: #ffffff;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 65%));
}
.media-buffer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px;
  background: rgb(255 255 255 / 14%); pointer-events: none;
}
.media-buffer[hidden] { display: none; }
.media-buffer > span {
  display: block; height: 100%; width: 0; background: rgb(255 255 255 / 55%);
  transition: width .2s linear;
}
@media (prefers-reduced-motion: reduce) { .media-buffer > span { transition: none; } }