/* Copyright Ayers Electronics Inc. All rights reserved. */
/* channel HUD chrome: the band, the plate, the logo. */

/* Where a flex container's spacing was measured to vanish on the television WebView, the distance is
   a margin on `> * + *` rather than `gap`. Flex `gap` is Chromium 84 and the floor is 83,
   which drops the declaration and sits the items flush. `gap` stays on a
   grid container, which the floor honours, and on the handset breakpoints, which no television
   matches. js/css-floor.test.mjs pins the swept selectors. */

/* Tuner overlays (HUD, number entry, watermark), guide grid cells, on-demand rails. */

/* ---- channel HUD (broadcast lower-third banner) ----
   Legibility outranks translucency: every glyph has to read over bright white video, so every word
   and mark stands on --band-ground, near-opaque. The only translucent parts are the feathers - the
   band's across its top padding, the top row's under the top line - which keep the picture
   dissolving into each ground instead of meeting a drawn rectangle. Their own stops, not --scrim:
   that token is the on-demand transport bar's, and nothing the viewer chose is playing behind it. */
/* One rail: every left edge in the band - text, plate, start clock, LIVE pill - sits on --hud-pad-l,
   every right edge on --hud-pad-r; #hudMain, the lockup and the transport groups all read it, so
   nothing keeps its own inset. The pair lives on the root because the page's one clock (#clock,
   outside the player) stands on the same right rail. The top line - the lockup, the Binge ring, the
   clock, and the guide's head row (layout.css #guideHead) - shares --top-line-top and --top-line-h
   the same way, so the clock is at one point on every surface. The breakpoints below set all four. */
:root {
  --hud-pad-l: 28px;
  --hud-pad-r: 28px;
  --top-line-top: 24px;
  --top-line-h: 38px;
  /* The ground the banner, the quick bar, the top row and the cards over the picture wear, and the
     same colour fully clear, where each feather ends. */
  --band-ground: rgba(6, 6, 8, 0.97);
  --band-clear: rgba(6, 6, 8, 0);
  /* How far the top row's ground fades out below the top line. */
  --top-ground-feather: 40px;
}
#hud {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The bottom inset is a variable so #hudMain can bleed its ground down by exactly this much and
     pay it back as padding - the ground reaches the frame edge while the last line holds its place. */
  --hud-inset-bottom: 22px;
  padding: 24px var(--hud-pad-r) var(--hud-inset-bottom) var(--hud-pad-l);
  pointer-events: none;
}
/* The top row's ground: the lockup, the Binge ring and the page's clock (hud-body.css #clock, fixed
   on the same line) stand on the band's own ground from the top edge, solid through the top line and
   feathered below it, on the full band and the quick bar alike. Under everything the overlay draws;
   the middle of the picture stays clear. */
#hud::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(var(--top-line-top) + var(--top-line-h) + var(--top-ground-feather));
  background: linear-gradient(
    to bottom,
    var(--band-ground) 0%,
    var(--band-ground) calc(100% - var(--top-ground-feather)),
    var(--band-clear) 100%
  );
  pointer-events: none;
}
/* The shade belongs to the BLOCK, not to a fraction of the picture: a percentage of the frame is a
   different number of lines on a television than on a desk, and the text was rising out of its own
   gradient there. Anchored to the block, the fade always starts above the first line. */
#hudMain {
  min-width: 0;
  /* Solid the whole way up the words, and the fade spent only in the padding above them: a fade
     still thinning at the first line lets the picture's own titles read through it on a bright
     frame. */
  background: linear-gradient(
    to top,
    var(--band-ground) 0%,
    var(--band-ground) calc(100% - 72px),
    var(--band-clear) 100%
  );
  /* The ground reaches the bottom of the frame: #hud's bottom inset would leave the picture showing
     under the band, so #hudMain bleeds down by that inset (the vertical twin of the --hud-pad side bleed)
     and re-pays it as bottom padding, keeping the last line - and the safe-area inset - where it was. */
  padding: 72px var(--hud-pad-r) var(--hud-inset-bottom, 22px) var(--hud-pad-l);
  margin: 0 calc(-1 * var(--hud-pad-r)) calc(-1 * var(--hud-inset-bottom, 22px)) calc(-1 * var(--hud-pad-l));
  /* Two columns so the NEXT line can sit at the far right in the now-title's row; every other line
     spans both, so the stack keeps its full width and one-line-per-row rhythm. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
/* The two columns sit 24 px apart as a grid, the band's display whenever the quick bar is down; the surf strip below is a flex row of the same element
   and carries that distance as a margin, since a flex gap is dead at the WebView floor. */
body:not(.hud-mini) #hudMain {
  display: grid;
  column-gap: 24px;
}
#hudMain > * {
  grid-column: 1 / -1;
}
/* The transport row is the library's layout element, and its own sheet makes that element
   display: contents - it draws no frame of its own, so the controls INSIDE it are what the grid
   actually places. Without this they land in column one and the row, the bar and the badges all
   stop short of the banner's width. */
#hudMain > #transport > * {
  grid-column: 1 / -1;
}
/* The quick bar (body.hud-mini, js/chrome.js showHudMini): a channel key or UP tunes onto one line at
   the foot of the picture instead of the band - the channel's number on its plate and its fallback
   name at the left, the title of what is on with its episode, ellipsized to the free width, then
   the state words, the joined network's mark and the channel logo at the far right. Nothing sits at the top left: the
   band's lockup moves down onto the line. OK or DOWN raises the whole band over it. */
body.hud-mini #hudMain {
  display: flex;
  align-items: center;
  padding-top: 32px;
  background: linear-gradient(
    to top,
    var(--band-ground) 0%,
    var(--band-ground) calc(100% - 32px),
    var(--band-clear) 100%
  );
}
/* The line's spacing rides as margins, since a flex gap is dead at the WebView floor. */
body.hud-mini #hudMain > * + * {
  margin-left: 24px;
}
/* On the strip the lockup's children join the one flex line: the plate and missing-logo fallback
   lead, while the channel logo leaves the lockup and ends the line. display: contents is already in
   the television floor for the transport layout. */
body.hud-mini #hudLockup {
  position: static;
  display: contents;
  height: auto;
  padding-right: 0;
}
body.hud-mini #hudLockup > * {
  align-self: center;
}
body.hud-mini #hudLockup > * + * {
  margin-left: 0;
}
body.hud-mini #hudNum {
  order: 1;
}
body.hud-mini #hudChannelName {
  order: 2;
  margin-left: 12px;
}
body.hud-mini #hudTitleRow {
  order: 3;
}
body.hud-mini #hudState {
  order: 4;
}
body.hud-mini #hudNetwork {
  order: 5;
}
body.hud-mini #hudLogo {
  order: 6;
  flex: 0 0 auto;
  margin-left: calc(24px - var(--logo-h) * 4 * var(--ink-lead, 0));
}
/* A logo names the channel, on the band and the quick bar alike: the name shows only while the
   channel has no logo that drew (#hud.no-logo, js/tuner.js). */
#hud:not(.no-logo) #hudChannelName {
  display: none;
}
/* The network's mark precedes the channel logo at the right of the quick bar. */
body.hud-mini #hudNetwork {
  flex: 0 0 auto;
  margin-top: 0;
}
/* The title row takes the line's free width, so the title inside it ellipsizes and everything after
   it - the state words, network mark, then channel logo - sits at the right. */
body.hud-mini #hudTitleRow {
  flex: 1 1 auto;
  min-width: 0;
}
body.hud-mini #hudState {
  margin-top: 0;
}
body.hud-mini #hudNext,
body.hud-mini #hudSynopsisWrap,
body.hud-mini #hudShift,
body.hud-mini #tpBadges,
body.hud-mini #hudMain > #transport > * {
  display: none;
}
/* Only what a viewer presses takes the pointer back, so the picture keeps its own taps. */
#hud > * {
  pointer-events: auto;
}
/* The channel names itself at the picture's top left, clear of the programme's own block below:
   the number on its plate, its logo, then its name. Centered on the cross axis so the plate, the
   logo and the name share the clock's own centre line (#clock centers the same way in the same
   --top-line-h band). */
#hudLockup {
  position: absolute;
  top: var(--top-line-top);
  left: var(--hud-pad-l);
  height: var(--top-line-h);
  display: flex;
  align-items: center;
  min-width: 0;
}
#hudLockup > * + * {
  margin-left: 12px;
}
/* The channel number reads the way a set-top box states one: a squared plate rather than a disc,
   and figures that line up - tabular, tight, condensed where the platform has a face for it, so 5
   and 105 sit on the same left edge and neither the plate nor the number moves as the channel
   changes. The plate stands the top line's height; three figures fill its width, a longer label
   widens it. It is opaque, the elevated ground inside a soft edge, so the figures read on any
   picture. */
#hudNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: var(--plate-h);
  padding: 0 7px;
  border-radius: var(--radius);
  background: var(--elevated);
  border: 1px solid var(--border-soft);
  font-family: "Roboto Condensed", "Segoe UI Semibold", system-ui, sans-serif;
  font-size: var(--plate-type);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
}
/* The channel's logo stands to the right of the number, the plate's own height. The box is the 4:1
   canvas at that height, and its margins take back the canvas's empty lead and trail (the channel
   row's logoInk, js/logo-ink.js), so the drawn art, not the canvas, sits one step from the plate. */
#hudLogo {
  --logo-h: var(--plate-h);
  height: var(--logo-h);
  width: calc(var(--logo-h) * 4);
  max-width: none;
  margin-left: calc(12px - var(--logo-h) * 4 * var(--ink-lead, 0));
  margin-right: calc(-1 * var(--logo-h) * 4 * var(--ink-trail, 0));
  object-fit: contain;
}
/* The joined network's mark takes the grid's right column beside the title row, flush with the band's
   right rail, lifted onto the title's own line the way a 40 px logo canvas is: the title's 28 px face
   on its 1.05 line puts its cap centre 14 px under the row's top, 6 px above the box's own. An empty
   column costs no width, so the home network's channels lose nothing. */
#hudNetwork {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin-top: -6px;
  display: flex;
  align-items: center;
  min-height: 40px;
}
#hudNetworkLogo {
  height: 40px;
  max-width: 180px;
  object-fit: contain;
}
#hudNetworkName {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}