/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the on demand pane. */
/* ---- on demand: a pane of the guide surface, not a layer of its own ---- */
#ondemand {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg);
}
/* ---- On Demand: the shared upper area
   (css/layout/upper-area.css) is the whole top of the screen - the focused thing's title, facts and
   story, with the live preview at its right - and under it the page is rails and nothing else,
   LIBRARIES the first of them and CONTINUE WATCHING the second. ---- */
.od-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
/* The search stop takes the row's slack up to a field's width; the pickers hold their own size (their
   flex: none in components.css). A focus STOP, never the input itself. */
/* The panhandle's contents: the 16:9 frame the moved #video fills and the bar over its own bottom
   edge (the same .nowbar the guide's column draws). The frame is a picture, never a focus stop. */
/* The panhandle is a plain wrapper: the preview's place and size are the shared upper area's
   (css/layout/upper-area.css), the one both screens read, so the wrapper itself keeps no box. */
#odPan {
  display: contents;
}
/* The same frame as the guide's, and its height comes the same way. */
#odPreview {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
#odPreview video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The rails run to the screen's edge: the scroller keeps no side margin, every heading and every
   rail's first card stand on the margin line, and a moved card passes off the glass. Nothing scrolls
   the page sideways. The scroller is never positioned, grouped or clipped by a rule of its own: the
   landing's band lives inside it and is laid out against the pane (below). */
#odScroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 40px;
}
/* One room above every heading: 14 from the cards above (6 foot room, 8 rail), 6 down to its cards. */
#odScroll .rail,
#musicRows .rail {
  margin-bottom: calc(8 * var(--od-tv-px));
}
#odScroll .rail > h3,
#musicRows .rail > h3 {
  margin-top: 0;
  margin-bottom: calc(6 * var(--od-tv-px));
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}
#odScroll .rail .cards,
#musicRows .rail .cards {
  margin-top: calc(-6 * var(--od-tv-px));
  margin-left: 0;
  margin-right: 0;
  padding: calc(6 * var(--od-tv-px)) var(--page-margin) calc(6 * var(--od-tv-px)) var(--page-margin);
  scroll-padding-left: max(var(--page-margin), calc(var(--focus-ring-width) + var(--card-focus-inset)));
  scroll-padding-right: max(var(--page-margin), calc(var(--focus-ring-width) + var(--card-focus-inset)));
}
/* A tile is its picture, no shade and no title face (js/on-demand-render.js): its name on the preview
   label's chip at the foot (css/components/preview.css .preview-chan), its count at the foot's right,
   and the open library's name chip in the accent, lit apart from the focus ring. */
#odLibraries > .card.labelled .meta {
  top: auto;
  padding-top: 0;
  padding-right: calc(5 * var(--od-tv-px));
  padding-bottom: calc(5 * var(--od-tv-px));
  padding-left: calc(5 * var(--od-tv-px));
  background: none;
}
#odLibraries .card-btn {
  height: 100%;
}
#odLibraries .card-art {
  height: 100%;
  padding-top: 0;
  border-radius: var(--radius);
  background: var(--elevated);
}
#odLibraries .title-row {
  display: block;
  line-height: 0;
}
/* The caption's reserved second line (on-demand-cards.css .card .sub) would lift the chip off the foot. */
#odLibraries .sub {
  display: none;
}
#odLibraries .title,
#odLibraries .card-count {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: var(--radius-small);
  background: var(--upper-fade-mid);
  color: var(--on-chip);
  font-size: calc(14 * var(--od-tv-px));
  font-weight: 600;
  line-height: calc(20 * var(--od-tv-px));
}
#odLibraries .card-count {
  right: calc(5 * var(--od-tv-px));
  bottom: calc(5 * var(--od-tv-px));
}
#odLibraries .card-count:empty {
  display: none;
}
#odLibraries .card-btn[aria-current="true"] .title {
  background: var(--accent);
  color: var(--on-accent);
}
/* Networks shows no upper area (js/guide-head.js showSurface). #ondemand stays up under it
   for the preview frame alone: its rails, its detail and the area's words and pictures go, and the area
   leaves the flow at the top of the pane, the frame in On Demand's rectangle over the page's right. A
   library's grid (js/on-demand-see-all.js sets .grid-open) takes the pane the same way, beside the frame;
   a title's page opened from it brings the area back. */
#guide.mode-shared #ondemand {
  position: relative;
  flex: none;
  min-height: 0;
}
#ondemand.grid-open {
  position: relative;
}
#ondemand.grid-open:not(.details-open) #odUpper,
#guide.mode-shared #odUpper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  justify-content: flex-end;
  pointer-events: none;
}
#ondemand.grid-open:not(.details-open) #odUpper > :not(#odPan),
#guide.mode-shared #odUpper > :not(#odPan) {
  display: none;
}
#ondemand.grid-open:not(.details-open) #odPreviewWrap,
#guide.mode-shared #odPreviewWrap {
  pointer-events: auto;
}
/* The page keeps the shared column clear: nothing reaches under its preview, tabs or lower panel.
   The first run's networks step keeps its dedicated setup presentation. */
@media screen and (min-width: 900px) {
  #ondemand.grid-open #odAll {
    padding-right: calc(var(--od-pan-w) + var(--page-margin) - var(--preview-reach) + 8px);
  }
  body:not(.networks-setup) #serversPage,
  #settingsPage {
    padding-right: calc(var(--od-pan-w) + var(--page-margin) - var(--preview-reach) + 8px);
  }
}
/* #ondemand follows the page in the markup; under it it must come first, right under the head. */
#guide.mode-shared #serversPage {
  order: 1;
}
/* Networks shows nothing of On Demand's own but the bar and the pan: the rows, a title's page and a
   SEE ALL grid with its filter row all wait under it, hidden, for the way back. */
#guide.mode-shared #odScroll,
#guide.mode-shared #odDetail,
#guide.mode-shared #odAll {
  display: none;
}
@media screen and (min-width: 900px) {
  .od-filters {
    flex-wrap: nowrap;
  }
  /* One preview frame on every page: the panhandle keeps 8px around its frame and the frame takes the
     rest of the pan's width; the guide's frame takes the same width and ends 8px from the edge too, so
     the picture sits in the same rectangle on the guide, On Demand, Networks and Settings. */
  /* --preview-reach: how far the wrap reaches past the upper area's right margin, the frame's 8px inset
     plus 12 sheet px, so the picture ends 12 sheet px past the clock's right edge (the head and the upper
     area share the page margin); never past the screen's edge. */
  #guide,
  #ondemand {
    --preview-w: calc(var(--od-pan-w) - 15px);
    --preview-reach: min(var(--page-margin), calc(8px + 12 * var(--od-tv-px)));
  }
  /* Both frames are this one box: the pan's width with 8px around the picture (7px in at the left) and its
     top at the head's underside, so the picture sits 8px under the head in one rectangle whichever of guide,
     On Demand or Networks is up. */
  #guidePreviewWrap,
  #odPreviewWrap {
    box-sizing: border-box;
    width: var(--od-pan-w);
    margin-top: 0;
    margin-right: calc(-1 * var(--preview-reach));
  }
  /* The way back's first frame: the picture in the slot is covered where it stands - under native video
     the cover box paints the page ground, a browser's slot video hides - one frame before the layer
     goes (js/guide-head.js hideSurfacePane). */
  html[data-native-video] #guide.closing #odPreviewWrap::before,
  html[data-native-video] #guide.closing #guidePreviewWrap::before {
    background: var(--bg);
  } /* the wrap itself paints nothing, so the cover paints its own ground */
  #guide.closing #guidePreview video,
  #guide.closing #odPreview video {
    visibility: hidden;
  }
  /* The frame floats with no background: the wrap draws nothing - no panel, no edge,
     no seam - and keeps only its place. #odPan generates no box of its own (display: contents above), so
     the frame's own wrap is what carries the padding and the cover; the guide's wrap shares both. Under
     native video the layer's hole ground (css/player.css) is the page's one opaque ground. The now
     bar (css/components/preview.css) reads the same two insets, so its gradient ends at the frame's
     edges. */
  #odPreviewWrap,
  #guidePreviewWrap {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    --frame-inset: 8px;
    --frame-inset-left: 7px;
    padding: var(--frame-inset) var(--frame-inset) var(--frame-inset) var(--frame-inset-left);
  }
  /* The cover box: a full-size pseudo that paints nothing and takes no pointer until the way back's
     first frame (above). It sits OVER the frame - the frame is a positioned later sibling, so at the
     auto layer the cover would paint behind the picture and cover nothing. */
  #odPreviewWrap::before,
  #guidePreviewWrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
  }
}
@media screen and (min-width: 900px) and (max-width: 1279px) {
  /* A 960 television: the library view's pickers keep their line at the smaller numbers
     css/components.css carries for this band. */
  .od-filters {
    flex-wrap: nowrap;
  }
  #odScroll {
    padding: 10px 0 27px;
  }
}

/* The tiles stand at the preview's height; three share the row, and with more they narrow so part of
   the next one shows. */
#ondemand:not(.grid-open):not(.details-open) #odLibraries > .card {
  flex-basis: calc((100% - 2 * var(--od-card-gap)) / 3);
  height: calc(var(--preview-w) * 9 / 16);
}
#ondemand:not(.grid-open):not(.details-open) #odLibraries > .card:first-child:nth-last-child(n + 4),
#ondemand:not(.grid-open):not(.details-open) #odLibraries > .card:first-child:nth-last-child(n + 4) ~ .card {
  flex-basis: calc(180 * var(--od-tv-px));
}

/* ---- the landing: the top band stays, the rails pass beneath it ----
   The band is the preview top right (the upper area with no words, as over a library's grid) and the
   library tiles beside it at its height. The tiles stay inside #odScroll, so the walk, the return and
   the arrangement read them as the first rail, but the rail keeps no height in the flow and its row
   is laid out against the pane: a scroller neither clips nor moves a descendant whose containing
   block is its ancestor (CSS 2.1, 11.1.1), which holds on every engine the page runs on. The scroller
   starts at the band's foot, and a 12 deep fade under the foot dims what passes up into it. The
   focused rail stands 35 under the foot, clear of the fade, with 92 kept under it for the next rail's
   heading (js/focus-view.js reads both paddings). */
@media screen and (min-width: 900px) {
  #ondemand:not(.grid-open):not(.details-open) {
    position: relative;
    --od-band-h: calc(var(--preview-w) * 9 / 16 + 14px);
  }
  #ondemand:not(.grid-open):not(.details-open) #odUpper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    justify-content: flex-end;
    pointer-events: none;
  }
  #ondemand:not(.grid-open):not(.details-open) #odUpper > :not(#odPan) {
    display: none;
  }
  #ondemand:not(.grid-open):not(.details-open) #odPreviewWrap {
    pointer-events: auto;
  }
  #ondemand:not(.grid-open):not(.details-open) #odScroll {
    margin-top: var(--od-band-h);
    padding-top: 8px;
    scroll-padding-top: calc(35 * var(--od-tv-px));
    scroll-padding-bottom: calc(92 * var(--od-tv-px));
  }
  #ondemand:not(.grid-open):not(.details-open) #odLibrariesRail {
    margin: 0;
  }
  #ondemand:not(.grid-open):not(.details-open) #odLibrariesRail .cards-wrap {
    position: static;
  }
  /* The row: its tiles' tops on the frame's top (8 under the head), the first on the margin line, the
     last one card gap short of the frame, 6 of room round them for the ring. A tile moved left passes
     under the row's own edge at the margin, never the glass. */
  #ondemand:not(.grid-open):not(.details-open) #odLibraries {
    position: absolute;
    z-index: 3;
    top: 2px;
    left: calc(var(--page-margin) - 6px);
    right: calc(var(--page-margin) - var(--preview-reach) + var(--od-pan-w) - 7px + var(--od-card-gap) - 6px);
    margin: 0;
    padding: 6px;
    scroll-padding-left: 6px;
    scroll-padding-right: 6px;
  }
  #ondemand:not(.grid-open):not(.details-open) #odLibrariesRail::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: var(--od-band-h);
    height: calc(12 * var(--od-tv-px));
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
  }
}

/* ---- on demand: "see all" paged grid ----
   A sibling of #odScroll (both children of #ondemand, toggled by .hidden), never nested inside
   it: a virtualizing-by-eye grid given #odScroll's infinite scrolling height would stop behaving
   like a bounded page (search results and the paged grid are SIBLINGS
   of the vertical browse scroll, never nested inside it). Same column layout as #ondemand
   itself: a fixed head, then a scrolling body that takes the rest. */
#odAll {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg);
}
/* The inline detail panel: the pane's own bounds, the page's chrome inside it. */
#odDetail {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
#odDetail .details-scroll {
  flex: 1;
  height: auto;
}
/* The band's own foot is the air above the first row: kept small so the next row's heading and the
   top of its cards stand above the screen's foot at rest. */
@media screen and (min-width: 900px) {
  #odDetail .details-scroll {
    padding-top: 2px;
  }
}
#odAllHead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
}
#odAllTitle {
  font-size: var(--type-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
#odAllGrid {
  flex: 1;
  overflow: auto;
  padding: 18px 22px 40px;
}