/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the guide detail band. */
/* The phone's caption in place of the preview (PhoneGeometry.CaptionEpx): hidden everywhere else. */
#previewCaption {
  display: none;
}
/* The marks ride the end of the facts line rather than the title's own row: the title is never
   pushed aside by a badge. */
#guideDetailBadges {
  display: inline-flex;
  align-items: center;
  flex: none;
}
#guideDetailBadges > * + * {
  margin-left: 6px;
}
/* A television's band ends at the preview frame's foot (the frame's 8px inset above it), and the
   colour key rides up onto that line (css/components/guide-grid-cells.css). */
@media screen and (min-width: 900px) {
  #guideDetail {
    height: calc(var(--preview-w) * 9 / 16 + 8px);
  }
}
/* The frame's height is 9/16 of its own width, taken from a percentage padding rather than a ratio:
   percentage padding resolves against the frame's width on every browser the heads run, so the box
   is the same rectangle whether or not a picture is mounted in it. Everything inside is positioned
   against that box, so the frame keeps no content in flow. */
#guidePreview {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
#guidePreview video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The timebar is sticky at the scroller's top (css/components/guide-grid-cells.css .g-timebar), so
   the snap padding keeps every row clear of it: the scroll always stops with a whole row just under
   the ruler. The scroller runs to the screen's foot and its last row runs off it; the focused row is
   always brought whole above that slice (js/guide-focus.js revealRow). The mini player, when it is
   over the guide, holds the foot itself (css/components/mini-player.css). */
#guideScroll {
  flex: 1;
  overflow: auto;
  position: relative;
  scroll-padding-top: var(--guide-timebar-h);
  scroll-snap-type: y mandatory;
  margin-top: 6px;
}
/* On a television the key's foot is the ruler's top, which leaves room for seven whole rows. */
@media screen and (min-width: 900px) {
  #guideScroll {
    margin-top: 0;
  }
}