/* Theater mode repair. Presentation only: no copy, metadata, routes or stream behavior.
   Defect: entering theater mode collapsed the video to 0px tall. v17 nulls the
   16/9 aspect-ratio on .player-stage and sets height:100% instead, but the stage's
   containing block .player-video-column is a grid item with align-self:start, so its
   height was auto, and the stage's only child (<video>) is position:absolute/inset:0
   and therefore out of flow. The percentage had no definite height to resolve against
   and the stage collapsed. The chat panel was unaffected because a grid item's
   percentage height resolves against its grid area.
   Fix: make section > wrap > player-shell a 100vh flex column, take the header out of
   flow, stretch the video column, and let the layout flex to the remaining height. The
   wrap needs an explicit width:100% because margin:0 auto disables cross-axis stretch
   and would otherwise shrink-to-fit the whole player. */
@media (min-width: 721px) {
  .page-live.live-theater .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .page-live.live-theater .player-section {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
  }

  .page-live.live-theater .player-section > .wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
  }

  .page-live.live-theater .player-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .page-live.live-theater .player-layout {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
  }

  .page-live.live-theater .player-video-column {
    align-self: stretch;
    min-height: 0;
  }
}