/* Copyright Ayers Electronics Inc. All rights reserved. */
/* on demand rails. */

/* ---- on demand ---- */
.rail {
  margin-bottom: 20px;
}
/* A rail with nothing in it is not drawn (js/on-demand-rails.js fillRail): the empty sentence belongs to a
   surface with nothing anywhere, not to one row of a populated hub. */
.rail.empty {
  display: none;
}
/* A rail of another category than the one picked on LIBRARIES (js/on-demand-kind-rails.js). */
#odScroll > .off-kind {
  display: none;
}
/* The heading's type, one for a rail's heading and for the info page's section headings: 15 in the
   set's unit, weight 600, the text colour, no tracking of its own. */
.rail h3,
.details-heading {
  font-size: calc(15 * var(--od-tv-px));
  font-weight: 600;
  color: var(--text);
}
.rail h3 {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
}
/* The hint's auto margin takes the row's slack; its padding keeps 12px after the heading's words. */
.rail h3 > .rail-hint {
  padding-left: 12px;
}
/* The rail head's transport line, pushed to the head's right end by the auto margin on this one flex
   child: which key reaches the rail's first card and which its last. It keeps its own smaller size,
   tracking and quieter ink; its keys wear its type, a hairline and the small radius. */
.rail-hint {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  font-size: var(--type-micro);
  letter-spacing: 0.06em;
  color: var(--on-panel-variant);
  text-transform: none;
}
/* The air between the keys and their words as a margin, never a flex gap: flex gap is above the
   WebView floor and the line would run together on a set. */
.rail-hint > * + * {
  margin-left: 7px;
}
.rail-hint kbd {
  display: inline-flex;
  align-items: center;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 1px 6px;
  color: var(--text);
}
/* The VIEW ALL card that ends a rail running off the screen: its rail's card box (the shape its titles
   wear, js/on-demand-view-all.js, and the row's full height), in the library tile's dress - four of
   the rail's own pictures dimmed on the raised ground, the word on a chip at the foot's left and what
   the shelf holds on a chip at its right. No border, no arrow. */
.card.viewall {
  align-self: stretch;
}
.card.viewall .va {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--elevated);
  border-radius: var(--radius);
}
.card.viewall .va-mosaic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  opacity: 0.4;
}
.card.viewall .va-mosaic > img {
  display: block;
  width: 50%;
  height: 50%;
  object-fit: cover;
}
.card.viewall .va-chip {
  position: absolute;
  bottom: 5px;
  padding: 1px 6px;
  border-radius: var(--radius-small);
  background: var(--chip);
  color: var(--on-chip);
  font-size: var(--type-label);
  font-weight: 600;
  white-space: nowrap;
}
.card.viewall .va-word {
  left: 5px;
}
.card.viewall .va-count {
  right: 5px;
}
.card.viewall .va-count:empty {
  display: none;
}
/* The scroller carries the ring's own width, plus the room a focused card's own growth
   (--card-focus-inset) needs, at its top and left, taken straight back off as margin so the row does
   not move: a card whose ring draws outside its box (Continue Watching) sits flush against this
   edge, and overflow-x: auto clips on every side, so without the room the first card's ring - and now
   its scale - is shaved on two of them. The same room is left on the right and bottom so a card
   growing there is never clipped either. A card is scrolled into view by its box before its growth
   starts, so the row keeps the same room at its edges for a card walked to mid-row. */
.rail .cards {
  display: flex;
  overflow-x: auto;
  padding: calc(var(--focus-ring-width) + var(--card-focus-inset)) var(--card-focus-inset)
    calc(6px + var(--card-focus-inset)) calc(var(--focus-ring-width) + var(--card-focus-inset));
  margin: calc(-1 * (var(--focus-ring-width) + var(--card-focus-inset))) calc(-1 * var(--card-focus-inset)) 0
    calc(-1 * (var(--focus-ring-width) + var(--card-focus-inset)));
  scroll-padding-inline: calc(var(--focus-ring-width) + var(--card-focus-inset));
}
.rail .cards > * + * {
  margin-left: var(--od-card-gap);
}
/* One width per card: the row's stretch would hand the tallest card's height back through min-width:auto
   and draw one rail 120 to 192 wide (measured at 960x540: 120, 169.81, 190.63, 192 across, all 294.72 tall);
   each card takes its own height from its own art and stands on the row's top. */
#ondemand .rail .cards,
#musicHome .rail .cards {
  align-items: flex-start;
}
#ondemand .card,
#musicHome .card {
  min-width: 0;
}
/* The .cards-wrap js/rail-edges.js builds around every rail's .cards is the positioning context for
   the shades and the arrows - sized to the cards row alone, never the h3 above it. The arrows are
   hidden by default; the 1280px band turns them on (belt-and-suspenders with their own aria-hidden/
   tabindex="-1" - a television never reaches that band, since TvViewport pins it at 960, but neither
   gate depends on the other). */
.rail .cards-wrap {
  position: relative;
}
/* A shade over each end of every rail, on every screen: the ground colour at the edge fading to clear.
   js/rail-edges.js lays it over the scroller's own box and writes its strength from the rail's
   position, so it grows as the rail moves; no transition, or it would lag the rail and pop. */
.rail-shade {
  position: absolute;
  z-index: 1;
  width: 64px;
  pointer-events: none;
  opacity: 0;
}
.rail-shade-before {
  background: linear-gradient(to right, var(--bg), transparent);
}
.rail-shade-after {
  background: linear-gradient(to left, var(--bg), transparent);
}
.rail-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 40px;
  padding: 0;
  z-index: 2;
  border: none;
  border-radius: 0;
  background: var(--control-fill);
  color: var(--text);
  font-size: var(--type-heading);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease;
}
.rail-arrow-prev {
  left: 0;
}
.rail-arrow-next {
  right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rail-arrow {
    transition: none;
  }
}
.card {
  /* --od-card-w is the viewer's card size at this screen's size (css/tokens.css); 120px is Medium on
     the television - layout D's 120x180 poster (the poster shape, smaller).
     A plain positioning div, not a button - js/on-demand-card.js's card() builds the real control as a
     .card-btn child, and a favourite's mark sits beside it. */
  position: relative;
  flex: 0 0 var(--od-card-w, 120px);
  background: var(--panel);
  border-radius: var(--radius);
}
.card-btn {
  display: block;
  /* Also painted on .card above: a percentage height only resolves against a definite parent
     size, and .card's own height comes from the flex row's stretch - belt-and-suspenders against
     an older engine that does not resolve it, which would otherwise show bare page background
     through an unpainted strip rather than the panel color either element paints identically. */
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: var(--panel);
  border: 2px solid transparent;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
/* The ring draws INSIDE the card on plain :focus, on base.css's layer over the poster; scoped to
   the surface so it outranks the surface's own ring. */
#guide .card-btn:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.card-btn:focus {
  outline: none;
  box-shadow: none;
}
/* The picture's box is .card-art, its height a padding on its width from the shape's one ratio
   (height over width), so it stands the same before, during and without its picture on every head,
   the television floor included. The poster is 2:3: the focused card takes the ring and never grows.
   The landing's card keeps the viewer's card size at every width. At 960 and under the info room's
   rail card is sized from the room's slot instead (css/components/details.css). */
.card .card-art {
  --card-ratio: 1.5;
  height: 0;
  padding-top: calc(var(--card-ratio) * 100%);
}
/* The picture and the title face that stands in for it fill the box. */
.card .card-art > .poster,
.card .card-art > .art-missing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* The rounded crop lives on the artwork, not on the card: a card that clips takes the sides off the
   focus ring drawn at its own edge. */
.card .poster {
  object-fit: cover;
  background: var(--elevated);
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
/* OdCardLayout.Box's Landscape case: 1.6 of the step (css/tokens.css --od-card-w-wide), 192px at
   Medium on the television, at 16:9. A wide card keeps its own height beside taller poster cards in
   the same row, so its poster and the placeholder that stands in for it share the card's top edge. */
.card.wide {
  flex: 0 0 var(--od-card-w-wide, 192px);
  align-self: flex-start;
}
.card.wide .card-art {
  --card-ratio: 0.5625;
}
/* OdCardLayout.Box's Square case: the base width itself, no separate width step - a track has no
   art of its own to stretch wider or shorter than an ordinary poster's width. */
.card.square .card-art {
  --card-ratio: 1;
}
.card .meta {
  padding: 7px 9px 9px;
}
/* Every card's caption sits below its art, a poster's, a still's and a sleeve's alike - this base
   rule (static, in flow) draws it, so a sleeve's own lettering is never under a caption. */
/* A LIBRARY card wears its name over the face the same way, under the same scrim - the library rail,
   where the row reads as pictures rather than captions - and its name takes the larger
   face, since a library is what the rail is naming. */
/* A focused or hovered card with titles off names itself in the same band over its picture's foot
   (css/components/on-demand-cards.css), so the rail neither moves nor clips it. The info room's People
   and More Like This cards wear it always: the name rides the picture, so a row is its pictures' height
   (css/components/details.css). */
.card.labelled .meta,
#odDetail .details-text > #detailsCast .card .meta,
#odDetail .details-text > #detailsMoreLikeThis .card .meta,
html[data-card-titles="off"] .card:not(.cw):not(.labelled):focus-within .meta,
html[data-card-titles="off"] .card:not(.cw):not(.labelled):hover .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 9px;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.94) 0%, rgba(6, 6, 8, 0.8) 55%, var(--band-clear) 100%);
}
.card.labelled .title {
  font-size: var(--type-body);
}
/* The title's row: the title rides its chip over the picture, and the row holds at most one mark of
   its own, a Continue Watching episode code or a collection's kind face. The card's badges stand in
   its corners (css/components/on-demand-cards.css). */
.card .title-row {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.card .title {
  font-size: var(--type-label);
  line-height: calc(24 * var(--od-tv-px));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.card .badge {
  flex: none;
  font-size: var(--type-micro);
  padding: 2px 3px 2px 4px;
  line-height: 1;
}
.card .badge:empty {
  display: none;
}