/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the one info screen's panel: what the sheet draws UNDER the band. The title, its facts, the story,
   the picture, the air line and the button row are the shared upper area's (css/layout/upper-area.css). */

/* ---- item details page ---- */
#details {
  overflow: hidden;
}
.details-scroll {
  position: relative;
  height: 100%;
  overflow: auto;
  padding: 24px var(--page-margin) 40px;
}
/* The rows under the band run the page's whole width, under the preview as well as the words. */
.details-body {
  display: flex;
}
/* The row of titles under the band sits quieter than the band above it, the sheet's own step back. */
#detailsMoreLikeThis {
  opacity: 0.62;
}
.details-text {
  flex: 1 1 auto;
  min-width: 0;
}
/* The notes line, under the story inside the band: one line of fixed height, empty or not, so an air
   line that lands after the row is drawn moves no button. Two notes share it side by side, each cut
   at its own end; the air between them is a margin, the television floor having no flex gap. */
.details-notes {
  display: flex;
  align-items: baseline;
  margin-top: 8px;
  height: calc(1.45 * var(--type-label));
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
}
.details-notes > * {
  margin-right: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The air line: when the title airs, or that it is airing now and how much of it is left. */
.details-air-line {
  font-size: var(--type-label);
  color: var(--accent-text);
}
/* The rows under the band, one room for each: 14 in the set's unit under a row, above the next row's
   heading. Scoped past the rail rules of every width (css/components/on-demand.css and
   on-demand-desktop.css), which reach the info page's rails too. */
#odDetail .details-scroll .details-text > * {
  margin-bottom: calc(14 * var(--od-tv-px));
}
/* A heading stands 6 above what it heads. Its type is the rail heading's (css/components/on-demand.css). */
.details-heading {
  margin-bottom: calc(6 * var(--od-tv-px));
}
#odDetail .details-text > .rail > h3 {
  margin-bottom: calc(6 * var(--od-tv-px));
}
/* A rail's cards keep 6 of room round them for the ring, pulled up by the same 6 so a card stands 6
   under its heading (js/details-walk.js measures a card with this room). */
#odDetail .details-text > .rail .cards {
  margin-top: calc(-6 * var(--od-tv-px));
  padding-top: calc(6 * var(--od-tv-px));
  padding-bottom: calc(6 * var(--od-tv-px));
}
/* The info room's rail card takes its size from the room's slot at every width: the heading's
   21.75, the air above the card, the 2:3 poster and the ring's 6 fit the 171 the room has under the
   band at 960 by 540, so the card is at most 88 wide; a smaller card size keeps its own. The name of a
   People or More Like This card rides its picture's foot (css/components/on-demand.css), so the
   caption's second line is not drawn. The landing's card does not change. */
#odDetail .details-text > .rail .card {
  flex-basis: min(var(--od-card-w), calc(88 * var(--od-tv-px)));
}
#odDetail .details-text > #detailsCast .card .sub,
#odDetail .details-text > #detailsMoreLikeThis .card .sub {
  display: none;
}
/* The air between chips is a margin, the television floor having no flex gap. */
.details-cast-chips {
  display: flex;
  flex-wrap: wrap;
}
.details-cast-chips > * {
  margin: 0 8px 8px 0;
}
/* A person's card on the Cast & Crew rail holds a disabled button on a title the library does not
   hold: the same card, nothing to open. */
#detailsCastChips .card-btn:disabled {
  cursor: default;
}
.details-chip {
  display: inline-block;
  font-size: var(--type-label);
  color: var(--on-chip);
  background: var(--chip);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
/* The episode rows run the page's whole content width, to the band's right edge. */
#detailsEpisodesList {
  display: flex;
  flex-direction: column;
}
#detailsEpisodesList > * + * {
  margin-top: 8px;
}
.details-episode {
  display: flex;
  text-align: left;
  padding: 10px 14px 10px 10px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.details-episode > * + * {
  margin-left: 14px;
}
/* An episode's still, else the placeholder still (the title face) in the same box. */
.details-episode-still {
  position: relative;
  width: 168px;
  height: 94px;
  border-radius: var(--radius-small);
  background: var(--elevated);
  overflow: hidden;
  flex: none;
}
.details-episode-still .still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.details-episode-still .still[data-missing="1"] {
  display: none;
}
.details-episode-still .art-missing {
  height: 100%;
}
.details-episode-text {
  min-width: 0;
}
.details-episode-head {
  font-size: var(--type-label);
  color: var(--accent-text);
  font-weight: 700;
  margin-bottom: 3px;
}
.details-episode-title {
  font-size: var(--type-label);
  font-weight: 600;
}
.details-episode-overview {
  font-size: var(--type-label);
  color: var(--muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* An album's page draws no format line when its files carry none, so its tracks start under the band. */
#ondemand.details-open.music #detailsFormatLine:empty {
  display: none;
}
.details-format-line {
  font-size: var(--type-label);
  color: var(--muted);
}
/* Only an album has a format line under the band; every other title's facts are the band's. The Binge
   Limit's line stands only on a title of a network whose limit is spent. */
#detailsFormatLine:empty,
#detailsBingeLine:empty {
  display: none;
}
/* The cuts of one title, a row of their own under the band: each a button, the air between them a
   margin, the television floor having no flex gap. The cut on screen is drawn as chosen and is not
   pressable again. */
.details-edition-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.details-edition-list > * {
  margin: 0 10px 10px 0;
}
/* An artist's or an album's page: the top tracks take the panel's whole width, as its rows do. */
#ondemand.details-open.music .details-top-tracks {
  max-width: none;
}
/* An artist's albums, their covers laid across the panel and wrapping onto the next line; the air
   between them is a margin, the television floor having no flex gap. */
.details-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.details-tiles > .card {
  margin: 0 12px 12px 0;
}
/* Disc headers: drawn only when an album's rows split into more than one disc. */
.details-disc-heading {
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 14px 0 6px;
}
/* ADD TO PLAYLIST on the title page: the same rows, opened under the band ahead of the cast. */
.details-playlist-add {
  max-width: 560px;
}