/* Local video layer over the shared renderer's original poster. */
.editorial-web-screen > .editorial-web-native-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.editorial-web-screen.is-native-playing > .editorial-web-native-video { opacity: 1; }
.editorial-web.is-open .editorial-web-win:not(.is-focus) .editorial-web-native-video { filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) {
  .editorial-web-screen > .editorial-web-native-video,
  .editorial-web-screen.is-native-playing > .editorial-web-native-video { opacity: 0; transition: none; }
}
/* Align this site's lists with the shared page edge without changing the
   renderer stylesheet shared with withok. */
body.editorial-web-page { --body-padding-sides: var(--gutter); }
/* Only the selected recording has a status. Ambient previews stay quiet. */
.editorial-web-native-status {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 28px);
  z-index: 30;
  color: var(--muted);
  font-size: var(--text-label);
  pointer-events: none;
}
.editorial-web-native-status[hidden],
.editorial-web-native-status [hidden] { display: none; }
@media (max-width: 768px) {
  .editorial-web-native-status {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h, 48px) + var(--space-8));
    bottom: auto;
    width: fit-content;
    max-width: calc(100% - 2 * var(--gutter));
    background: var(--background-color, #111);
  }
}