/* Copyright Ayers Electronics Inc. All rights reserved. */
/* on demand card badges and playback line. */

/* The picture and every mark on it: each mark in its own corner, 6 television pixels in, on the chip
   ground so it reads over any art. The words under the picture never move one. */
.card .card-art {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card .card-art .badge {
  position: absolute;
  z-index: 1;
  background: var(--chip);
  color: var(--on-chip);
}
/* The certificate, with Hidden beside it on a title the profile hid. */
.card .card-tl {
  position: absolute;
  top: calc(6 * var(--od-tv-px));
  left: calc(6 * var(--od-tv-px));
  z-index: 1;
  display: flex;
}
.card .card-tl > .badge {
  position: static;
}
.card .card-tl > * + * {
  margin-left: calc(4 * var(--od-tv-px));
}
/* The network a title belongs to: its name, in the certificate's own chip, stopping short of the card's
   width. */
.card .card-network {
  max-width: calc(120 * var(--od-tv-px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A network whose Binge Limit is spent: its title greyed, the limit's name over the picture. */
.card.binge-spent .card-art > .poster,
.card.binge-spent .card-art > .art-missing {
  filter: grayscale(1) brightness(0.55);
}
.card .card-art .binge-label {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
/* The catalog's score. */
.card .card-score {
  left: calc(6 * var(--od-tv-px));
  bottom: calc(6 * var(--od-tv-px));
}
/* The lower-right corner: the watched tick in the accent (gone under the watched-badges option), or the
   count chip - a show's unwatched count, or a category card's count of what it holds
   (js/on-demand-kind-count.js). A counted category card's name stops short of the chip. */
.card .badge.watched,
.card .card-count {
  right: calc(6 * var(--od-tv-px));
  bottom: calc(6 * var(--od-tv-px));
  background: var(--chip);
}
.card .badge.watched {
  color: var(--accent-text);
  border-color: var(--accent);
}
.card.labelled.counted .title-row {
  padding-right: calc(48 * var(--od-tv-px));
}
/* NEXT EPISODE, the tick's own colour, flush on the picture's left edge. */
.card .badge.next {
  left: 0;
  bottom: calc(6 * var(--od-tv-px));
  border-left: 0;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  color: var(--accent-text);
  border-color: var(--accent);
  letter-spacing: 0.06em;
}
/* The progress along the picture's foot, in the accent. */
.card .resume {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(4 * var(--od-tv-px));
  background: var(--track);
}
.card .resume > div {
  height: 100%;
  background: var(--accent);
}
/* A card's caption slot is a fixed height whether or not the item has a second line: min-height
   holds the line's own pitch when a row carries nothing to say (a season with no genre of its
   own) - an empty block draws no line box on its own, so without it the caption would be shorter
   than every card beside it that has a fact to show. */
.card .sub {
  font-size: var(--type-micro);
  color: var(--muted);
  line-height: calc(24 * var(--od-tv-px));
  min-height: calc(24 * var(--od-tv-px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* CONTINUE WATCHING: a wide card half a poster's height (css/tokens.css --od-card-w-resume and
   --od-card-h-resume), the picture's own 16:9, on the page ground. The frame
   where the viewer stopped, or the backdrop, fills it; a title's own art (data-fit="contain": a poster,
   a sleeve, a cover) stands whole, centred on its title's tone (js/continue-watching-face.js). The
   caption stands under it, as on every card: the show or film, then an episode's season and number
   and its name, or a film's time left. The ring draws outside the picture, so the card clips
   nothing. */
.card.cw {
  flex: 0 0 var(--od-card-w-resume);
  background: none;
  overflow: visible;
}
.card.cw .card-btn {
  background: none;
  border: 0;
}
.card.cw .card-art {
  height: var(--od-card-h-resume);
  padding-top: 0;
  border-radius: var(--radius);
  background: var(--elevated);
}
.card.cw .card-art[data-face="1"] {
  background: var(--face-1);
}
.card.cw .card-art[data-face="2"] {
  background: var(--face-2);
}
.card.cw .card-art[data-face="3"] {
  background: var(--face-3);
}
.card.cw .card-art[data-face="4"] {
  background: var(--face-4);
}
.card.cw .card-art[data-face="5"] {
  background: var(--face-5);
}
.card.cw .poster,
.card.cw .art-missing {
  height: 100%;
  border-radius: var(--radius);
}
.card.cw .poster {
  background: none;
}
.card.cw .card-art[data-fit="contain"] .poster {
  object-fit: contain;
}
.card.cw .art-missing {
  font-size: var(--type-label);
}
.card.cw .cw-name {
  color: var(--muted);
}
#guide .card.cw .card-btn:focus {
  box-shadow: var(--focus-ring-outset);
}
#guide .card.cw .card-btn:focus::after {
  content: none;
}
/* The four card options (js/prefs.js applyCardOptions writes the attributes on <html>).
   Shape: Posters is the kind's own shape (the rule above); List stands a grid's titles as rows.
   Continue Watching keeps its own card width whatever the shape. Titles off: the card is its picture,
   no block under it, and the upper area names the focused title on its one line - the Roku's card
   shape. Continue Watching, a library tile and a title's seasons and parts keep their
   words. Watched badges off: no tick. */
html[data-card-titles="off"] .card:not(.cw):not(.labelled) .meta {
  display: none;
}
html[data-card-titles="off"] .card:not(.cw):not(.labelled),
html[data-card-titles="off"] .card:not(.cw):not(.labelled) .card-btn {
  background: none;
}
html[data-card-titles="off"] .card:not(.cw):not(.labelled) .card-art {
  border-radius: var(--radius);
}
/* A title's seasons and parts on the info screen share one picture, so each keeps its name, and a
   network's Now On cards name what is on; the selector repeats the rule above's :not() pair so it
   outranks it. */
html[data-card-titles="off"] .details-tiles > .card:not(.cw):not(.labelled) .meta,
html[data-card-titles="off"] .detail-tiles > .card:not(.cw):not(.labelled) .meta {
  display: block;
}
/* Titles off, a focused or hovered card still shows its caption: the band over its picture's foot
   (css/components/on-demand.css, the library tile's). */
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 {
  display: block;
  z-index: 2;
}
html[data-watched-badges="off"] .card .watched {
  display: none;
}
/* List (the card shape's fourth value): a grid's titles stand as rows, each its thumbnail, then its
   words, then its marks along the row; the picture's marks join the row's own flow. A rail keeps its
   posters. */
html[data-card-shape="list"] #odAllGrid > .card,
html[data-card-shape="list"] #collectionPage .collection-members > .card {
  flex: 0 0 100%;
  margin-right: 0;
}
html[data-card-shape="list"] #odAllGrid .card-btn,
html[data-card-shape="list"] #collectionPage .collection-members .card-btn {
  display: flex;
  align-items: center;
  min-height: calc(52 * var(--od-tv-px));
  padding-right: calc(34 * var(--od-tv-px));
}
html[data-card-shape="list"] #odAllGrid .card-art,
html[data-card-shape="list"] #collectionPage .collection-members .card-art {
  display: contents;
}
html[data-card-shape="list"] #odAllGrid .poster,
html[data-card-shape="list"] #collectionPage .collection-members .poster,
html[data-card-shape="list"] #odAllGrid .art-missing,
html[data-card-shape="list"] #collectionPage .collection-members .art-missing {
  flex: none;
  position: relative;
  width: calc(35 * var(--od-tv-px));
  height: calc(35 * var(--od-tv-px) * var(--card-ratio));
  order: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
html[data-card-shape="list"] #odAllGrid .art-missing > *,
html[data-card-shape="list"] #collectionPage .collection-members .art-missing > * {
  display: none;
}
html[data-card-shape="list"] #odAllGrid .meta,
html[data-card-shape="list"] #collectionPage .collection-members .meta {
  display: block;
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 calc(14 * var(--od-tv-px));
}
html[data-card-shape="list"] #odAllGrid .card-art .badge,
html[data-card-shape="list"] #collectionPage .collection-members .card-art .badge,
html[data-card-shape="list"] #odAllGrid .card-tl,
html[data-card-shape="list"] #collectionPage .collection-members .card-tl {
  position: static;
  order: 2;
  flex: none;
  margin-left: calc(6 * var(--od-tv-px));
}
html[data-card-shape="list"] #odAllGrid .resume,
html[data-card-shape="list"] #collectionPage .collection-members .resume {
  left: calc(35 * var(--od-tv-px));
}
html[data-card-shape="list"] #odAllGrid .fav-mark,
html[data-card-shape="list"] #collectionPage .collection-members .fav-mark {
  top: 50%;
  margin-top: calc(-11 * var(--od-tv-px));
}
/* A row's own lines (js/on-demand-list-row.js): the facts line in place of the year under the title,
   then one line of the description. Every other style draws neither. */
.card .list-facts,
.card .list-story {
  display: none;
}
html[data-card-shape="list"] #odAllGrid .list-facts,
html[data-card-shape="list"] #odAllGrid .list-story,
html[data-card-shape="list"] #collectionPage .collection-members .list-facts,
html[data-card-shape="list"] #collectionPage .collection-members .list-story {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--type-label);
  color: var(--muted);
}
html[data-card-shape="list"] #odAllGrid .has-facts > .sub,
html[data-card-shape="list"] #collectionPage .collection-members .has-facts > .sub {
  display: none;
}
.empty {
  color: var(--muted);
  font-size: var(--type-label);
  padding: 14px 0;
}
/* A favourite's mark (js/card-favorite-mark.js): a star chip in the picture's top right corner, the
   star in the accent's ink on the chip ground, cornered like every other chip. Only a favourite carries it, and it
   is never a target: Favorite is a button on the Info page. */
.card .fav-mark {
  position: absolute;
  top: calc(6 * var(--od-tv-px));
  right: calc(6 * var(--od-tv-px));
  z-index: 1;
  width: calc(22 * var(--od-tv-px));
  height: calc(22 * var(--od-tv-px));
  box-sizing: border-box;
  background: var(--chip);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.card .fav-mark .ico {
  width: calc(12 * var(--od-tv-px));
  height: calc(12 * var(--od-tv-px));
  color: var(--accent-text);
}

/* The "see all" grid: the SAME .card/.card-btn component the rail uses (one card component per
   client, never a family of card classes), laid out as a grid instead of scrolled sideways: as many
   whole columns as the room holds at the card's own size, each card then grown to share what is
   left, so the air between columns is the card gap, the same as between rows, and nothing is left
   at a row's end, at every width. List stands one title to a row. */
#odAllGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--od-card-w), 1fr));
  grid-gap: var(--od-card-gap);
  align-content: start;
}
html[data-card-shape="list"] #odAllGrid {
  grid-template-columns: 100%;
}

/* ---- on-demand playback: the item's title block inside the one banner (body.playing-item) ----
   The title wears the live title's rule (hud-body.css #hudNowTitle); under it the facts line at the
   description's size, then the key hints. */
#odPlayFacts {
  font-size: var(--type-body);
  font-weight: 600;
  margin-top: 10px;
}
#odPlayFacts:empty {
  display: none;
}
#odPlayHint {
  font-size: var(--type-micro);
  margin-top: 10px;
}

/* The now-playing line beside the thumbnail: one line, ellipsised, so its group gives up width to
   the search field rather than pushing the control row into a second line. */