/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the base stage and video layer. */

/* Surface layout: the tuner video fills the viewport; every other surface (sign-in gate, guide,
   on demand) is a full-viewport layer above it. Exactly three surfaces, no nav bar (parity). */

#stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
}
/* The demo's bottom bar is page chrome, not an overlay on the picture: the stage - and so the
   picture, the banner and the overlay inside it - ends at the bar's top edge. The bar
   itself is fixed to the viewport, and full screen has no bar at all, so there the picture takes
   the whole frame. js/main.js measures the bar into --demo-bar-height; this is the one rule that
   spends it. */
body.demo #stage {
  bottom: var(--demo-bar-height, 0px);
}
#video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: var(--bg);
  overflow: hidden;
}