/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the one upper area the guide and On Demand share. */
/* The top of both screens is the same block: the title, the facts line under it, two lines of
   story, and the live preview at the right. Every rule that places or sizes one of those pieces
   is written here once, for both surfaces. Each screen's own sheet adds only what it alone carries -
   the guide's filter key and its band's height on a television, On Demand's rails. */
#guideDetail,
#odUpper {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  /* A fixed height, never the words': they are clamped to fit, so a long story, a late one or none
     moves nothing under the area. The floor is the television's; a wider screen's larger preview
     frame (16:9 of --preview-w, with its 8px padding) sets the height there. */
  --upper-frame-h: calc(var(--preview-w) * 9 / 16 + 16px);
  height: max(var(--upper-area-h), var(--upper-frame-h));
  /* No band of air under the button row: the area begins where the row ends. */
  padding: 0 var(--page-margin);
  /* The faded picture behind the words is clipped to this area, so it cannot reach the ruler or
     the rails below it. */
  overflow: hidden;
}
/* The words and the preview stand above the picture, side by side. The decoration is excluded by
   name: an id-scoped child rule outranks a class, so matching it here would take the backdrop and
   the fade out of their own absolute positions and lay them in the row. */
#guideDetail > *:not(.upper-backdrop):not(.upper-fade):not(.hero-art),
#odUpper > *:not(.upper-backdrop):not(.upper-fade):not(.hero-art) {
  position: relative;
  z-index: 1;
}
#guideDetail
  > *:not(.upper-backdrop):not(.upper-fade):not(.hero-art)
  + *:not(.upper-backdrop):not(.upper-fade):not(.hero-art),
#odUpper
  > *:not(.upper-backdrop):not(.upper-fade):not(.hero-art):not(.upper-poster)
  + *:not(.upper-backdrop):not(.upper-fade):not(.hero-art) {
  margin-left: 16px;
}
/* The focused programme's own picture, behind the whole band edge to edge. It takes no press and
   sits under every word: the fade is a second element over it rather than an opacity on the text's
   ground, so the ink keeps its measured contrast. */
.upper-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center 22%;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
/* On Demand's two stacked backdrops crossfade as focus moves: whichever is down takes the next
   picture and fades up, so the picture never cuts. A FINITE transition, and only where the viewer
   has not asked for less motion - under reduce the next picture simply appears. */
#odUpper .upper-backdrop {
  opacity: 0;
}
#odUpper .upper-backdrop.up {
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  #odUpper .upper-backdrop {
    transition: opacity 420ms ease;
  }
}
/* The fade over the picture: the ground whole at the words' left edge and most of the way whole
   under them, thinning toward the live frame at the right, then whole again along the foot, so the
   picture never competes with the words and the band runs into the page under it. */
.upper-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      var(--bg) 0,
      var(--upper-fade-strong) 40%,
      var(--upper-fade-mid) 70%,
      var(--upper-fade-light) 100%
    ),
    linear-gradient(180deg, var(--upper-fade-clear) 0, var(--upper-fade-clear) 45%, var(--bg) 100%);
}
/* The words' column: the title's row, then the story's row, held at the top of the area. */
#guideDetailText,
#odUpperText {
  flex: 1;
  min-width: 0;
  padding-top: 10px;
}
#guideDetailTitle,
#odUpperTitle {
  font-size: var(--type-heading);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The facts line: the times, the year, the genre, what is left to run, then the marks. */
/* A title's own marketing line, under the title in the facts line's own type - no italic, the info
   page's one tagline slot. Empty for a title the provider sent none for, and for every band that
   is not the info screen. An episode's season, episode and own title wear the same line under its
   show. */
#odUpperTagline,
#odUpperSubtitle,
#guideDetailSubtitle {
  margin-top: 4px;
  font-size: var(--type-label);
  color: var(--on-panel-variant);
}
#odUpperTagline:empty,
#odUpperSubtitle:empty,
#guideDetailSubtitle:empty {
  display: none;
}
#guideDetailMeta,
#odUpperFacts {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 6px;
  font-size: var(--type-label);
  color: var(--on-panel-variant);
  white-space: nowrap;
  overflow: hidden;
}
#guideDetailMeta > * + *,
#odUpperFacts > * + * {
  margin-left: 10px;
}
/* text-overflow does nothing on the row itself (MDN: applies to block container elements, and a
   flex row lays its children out as flex items, not as one run of inline text). Becoming a flex
   item blockifies a span (CSS Display Module Level 3 SS2.7: "a parent with a grid or flex display
   value blockifies the box's display type"), so the mark can sit on the words' own span instead.
   The marks (#guideDetailBadges, already flex: none; the on-demand badges below) hold their width;
   only the words give way. */
#guideDetailFacts,
#odUpperFactsText {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#odUpperBadges {
  flex: none;
}
/* The release banner leads the row; hidden, it leaves the words at the row's own edge. */
#odUpperFacts > .release-status {
  margin-right: 10px;
}
#odUpperFacts > .release-status + * {
  margin-left: 0;
}
/* The story's row. */
#guideDetailRow2,
#odUpperStory {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
  min-width: 0;
}
/* The story's slot: two lines at the facts' size across the words' column to the preview's, clamped
   with an ellipsis, and the same height whether the story is long, short or absent. */
#guideDetailSynopsis,
#odUpperSynopsis {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--type-label);
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
  height: calc(2 * 1.45em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* An episode's own line under its show takes one of the story's two lines, so the words end where
   they end without it and the guide's key keeps its ground. */
#guideDetailSubtitle:not(:empty) ~ #guideDetailRow2 #guideDetailSynopsis {
  height: 1.45em;
  -webkit-line-clamp: 1;
}
/* A focused block of shorts, in place of the story: its programmes with their start times, two
   columns, each cut at its own edge. */
.upper-shorts {
  list-style: none;
  padding: 0;
  margin-top: 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 18px;
  font-size: var(--type-label);
  color: var(--on-panel-variant);
}
.upper-shorts li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upper-shorts li time {
  color: var(--muted);
  display: inline-block;
  min-width: 64px;
  font-size: var(--type-micro);
}
/* The short that Left and Right have picked, the one OK opens, wears the accent with its time. */
.upper-shorts li.current {
  color: var(--accent-text);
}
.upper-shorts li.current time {
  color: var(--accent-text);
}
/* The live preview at the right, the same frame at the same size on both screens. */
#guidePreviewWrap,
#odPreviewWrap {
  position: relative;
  flex: none;
  width: var(--preview-w);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

/* ---- the one info screen (APPROVED-DESIGN-4) ---- */
/* The info screen IS this band. A title opened from the Guide, On Demand, Search or Ask Magpie
   paints the same title, facts, story and picture the cursor already painted here, and the notes
   line and the one button row join them inside it. The words stand a little lower than the
   preview, clear of the head's focus captions, and the preview keeps its place. The story takes up
   to three lines and no more room than its words, so the button row sits closer under them and the
   rows below start clear of it. The notes line keeps its one line, so a late air line moves nothing. */
#ondemand.details-open #odUpper {
  height: auto;
  min-height: max(var(--info-band-h), var(--upper-frame-h));
}
#ondemand.details-open #odUpperText {
  padding-top: calc(10px + 8 * var(--tv-px));
}
#ondemand.details-open #odUpperSynopsis {
  height: auto;
  max-height: calc(3 * 1.45em);
  -webkit-line-clamp: 3;
}
/* An artist's or an album's page with no story of its own: a compact band of the name, the notes line
   and the button row, with no story lines standing empty, so the tracks and the covers start higher. */
#ondemand.details-open.storyless #odUpperStory {
  display: none;
}
#ondemand.details-open.storyless #odUpper {
  min-height: max(calc(var(--info-band-h) - 3 * 1.45 * var(--type-label)), var(--upper-frame-h));
}
/* An artist's or an album's info screen (js/album-head.js): the artist under an album's name in the
   accent, down on every other screen. */
#odUpperByline {
  margin-top: 4px;
  font-size: var(--type-label);
  color: var(--accent-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#odUpperByline:empty {
  visibility: hidden;
}
#odUpperByline {
  display: none;
}
#ondemand.details-open.music #odUpperByline {
  display: block;
}
/* The title's poster, left of its title, facts, story and buttons on every info screen, at the band's
   height and a poster's shape; an album's or an artist's sleeve stands square in its place. A title
   with no poster wears its title face in the same box (js/info-poster.js). Down while the rails are
   up and on a person's page; a title the library does not hold shows its own poster column there. */
#odUpper {
  --info-poster-h: calc(var(--upper-frame-h) - 16px);
  --info-poster-w: calc(var(--info-poster-h) * 2 / 3);
}
.upper-poster {
  display: none;
  position: relative;
  flex: none;
  width: var(--info-poster-w);
  height: var(--info-poster-h);
  margin: 10px 16px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--elevated);
}
#ondemand.details-open:not(.asking):not(.person-open) .upper-poster {
  display: block;
}
#ondemand.details-open.music .upper-poster {
  width: var(--info-poster-h);
}
.upper-poster .poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upper-poster .poster[data-missing="1"] {
  display: none;
}
.upper-poster .art-missing {
  height: 100%;
}
/* The info screen's own rows: down while the rails are up. */
#ondemand:not(.details-open) #detailsNotes,
#ondemand:not(.details-open) #detailsPlayRow {
  display: none;
}
/* The poster column of a title the library does not hold, left of its words where a library title's
   poster stands, filled as the get lands (css/components/asks.css paints the fill), its title face
   where the poster is missing. */
.hero-art {
  position: relative;
  flex: none;
  width: var(--info-poster-w);
  height: var(--info-poster-h);
  margin: 10px 16px 0 0;
  z-index: 1;
}
#ondemand:not(.asking) .hero-art {
  display: none;
}
#ondemand.asking .hero-art .poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.hero-art .poster[data-missing="1"] {
  display: none;
}
.hero-art .art-missing {
  height: 100%;
}
#ondemand.asking .hero-art .poster[data-missing="1"] + .art-missing.stock {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/* The info screen's facts: the lead words stand a gap apart with no marks between them. */
#odUpperFactsText > .fact-word + .fact-word {
  margin-left: 14px;
}
/* The table of named facts under the story: a label over its value, cells side by side and wrapping
   to a second line when the column is full. Block and inline-block only, so no flex gap is needed. */
#odUpperTable {
  margin-top: 10px;
}
#odUpperTable:empty {
  display: none;
}
#odUpperTable > .up-fact {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  margin: 0 28px 6px 0;
}
.up-fact-label,
.up-fact-value {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.up-fact-label {
  font-size: var(--type-micro);
  color: var(--muted);
}
.up-fact-value {
  font-size: var(--type-label);
  color: var(--on-panel-variant);
}