/* Copyright Ayers Electronics Inc. All rights reserved. */
/* channel HUD body: clock, title row, progress, synopsis. */

/* The one clock (index.html #clock) answers the top left from the top right, the way a set-top box
   states the time. It is fixed to the viewport on the lockup's own centre line and the band's right
   rail, over the picture and over the page layer alike (z above layout.css .layer), so the banner and
   every page show it at the same point. It shows with the banner (body.hud-up, js/chrome.js) and
   with a page (body.page-up, js/guide.js), fading on the banner's own clock. */
/* Centred on the CAP frame, not the font's own line frame: a descender in one string ("Sep") and
   none in the other would put their mass at different heights and the top line would read crooked.
   Trimming both edges to cap/baseline makes the clock and the channel name share the same optical
   centre whatever the strings are. */
#clock {
  position: fixed;
  top: var(--top-line-top);
  right: var(--hud-pad-r);
  height: var(--top-line-h);
  z-index: 21;
  display: flex;
  align-items: center;
  font-size: var(--type-heading);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
body.hud-up #clock,
body.page-up #clock {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
/* The clock's dot breathes the same on both sides: 0.35em of the
   clock's own face is 7 epx at 20px, the gap the started-at line's dot already keeps (measured 13-14 px
   physical on the set against the clock's 5-6). */
.clock-sep {
  margin: 0 0.35em;
}
/* Under 1280 wide the clock shows the time alone: the head row's bar needs the room the day and the
   dot would take (css/layout/guide-head.css). */
@media screen and (max-width: 1279px) {
  #clock .clock-day,
  #clock .clock-sep {
    display: none;
  }
}
/* Viewer message interrupt: an accent-filled chip, not a translucent line - it has to read as an
   event over the ordinary banner content, the same reasoning the Uno head's HudViewerMessageBanner
   uses AccentBrush/OnAccentBrush for. */
#hudViewerMessage {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--type-label);
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  max-width: 100%;
}
/* The name is trimmed to its own caps and baseline, so the lockup's align-items: center (hud.css)
   centers it on the same line the plate and the clock share - no offset math needed here. The
   ellipsis clips at the padding box and the trimmed box ends at the baseline, so a bottom padding
   gives g, y, p and q their room and the equal negative margin keeps the centred box unchanged. */
#hudChannelName {
  font-size: var(--plate-name-type);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-box: trim-both cap alphabetic;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}
/* The title and what the picture is, on one line: the badges sit immediately AFTER the words rather
   than at the far edge, so they read as belonging to this programme rather than to the frame.
   The title takes the room it needs and gives way first, because a clipped title is worse than a
   clipped badge - and the badges never shrink, so HD and CC stay legible across a room. */
/* The HD / CC pair sits right after the title with one gap, its top on the
   title's cap line - never baseline-low, never pushed to the row's far side. */
#hudTitleRow {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
#hudTitleRow > * + * {
  margin-left: 8px;
}
/* Title and the started-at row sit closer: the title's leading is the glyph's own, and the row is the
   title's own height - the network's mark beside it (#hudNetworkLogo, 40px) joins the row only once
   it has drawn (js/hud-network.js), because an empty image was holding the row at 42px under a 29px
   title. The title playing on demand is drawn at the same size in the same place. */
#hudNowTitle,
#odPlayTitle {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The episode under the show's name, a step smaller and muted, on the band and the quick bar alike
   (js/now-title.js); a film has no second line. */
#hudNowTitle[data-episode]:not([data-episode=""])::after {
  content: attr(data-episode);
  display: block;
  margin-top: 4px;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.15;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Held to the title's own line and never wrapped: flex-none so a long title cannot squeeze them, and
   the derived half-leading seats them on the 28px cap rather than the baseline the flex row shares. */
#tpBadges {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 5px;
}
/* The tiers under the title: every size is a step of the scale (tokens.css --type-*), never a literal
   here. Its rank is the more specific rule: the next-at line a step quieter than the description,
   the description the information. */
/* The next-at line a step quieter than the description: translucency over the same muted ink, 0.85 -
   measured on the band's own ground it reads 5.45:1, still above the 4.5:1 floor for text; 0.75 would
   fall to 4.43:1. */
#hudNextTitle {
  opacity: 0.85;
}
/* The next block rides the right column from the title row down, like Hulu: the bold "Next Up:"
   label on the title row, the programme and its start UNDER it. The block is capped so a long title
   clips rather than crowding the left column, and the description at the left is held to its own
   column (below) so this one stays free. */
#hudNext {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: start;
  justify-self: end;
  max-width: 360px;
  margin-top: 2px;
  text-align: right;
}
/* Quieter than the title above it: the muted ink, semibold rather than bold (the chrome polish). */
#hudNextLabel {
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.15;
  color: var(--muted);
}
#hudNextTitle {
  margin-top: 4px;
  font-size: var(--type-label);
  line-height: 1.15;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hudShift {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--history);
  margin-top: 6px;
}
#hudState {
  font-size: var(--type-label);
  color: var(--error);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
/* On the band the state words keep no row of their own: they draw in the band above the scrub that
   the position label holds (css/player/transport-row.css), and the label steps aside while they show,
   so the description, the band and the scrub sit together and the banner is one height either way. */
body:not(.hud-mini) #hudState {
  position: relative;
  top: 6px;
  z-index: 1;
  height: 0;
  margin-top: 0;
  overflow: visible;
  white-space: nowrap;
}
#hudState.tuning {
  color: var(--muted);
}
/* The X-Ray panel's own programme track (not the banner: the banner's one bar is the transport scrub). */
.hud-prog {
  height: 3px;
  background: var(--track);
  border-radius: var(--radius-small);
  margin-top: 8px;
  overflow: hidden;
}
.hud-prog > div {
  height: 100%;
  width: 0;
  background: var(--accent);
}
/* The artist line takes column one's second row, beside the next block, at the next-at line's quieter
   step; one line, clipped. It takes no room when empty, and goes wherever the description goes. */
#hudByline {
  grid-column: 1;
  grid-row: 2;
  margin-top: 6px;
  font-size: var(--type-body);
  line-height: 1.35;
  color: var(--text);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hudByline:empty,
body.hud-mini #hudByline,
body.playing-item #hudByline {
  display: none;
}
body.side-panel-up #hudByline {
  visibility: hidden;
}
/* The description line (parity.hud descriptionMaxLines): two lines, clipped; hidden when empty. */
/* The description is "the actual info": a clear step of air above it,
   and the text ink where the two date lines above it stay muted at 0.85 - the distinction comes from
   lifting the words, not from dimming the dates under the 4.5:1 floor. */
#hudSynopsis {
  font-size: var(--type-body);
  line-height: 1.35;
  color: var(--text);
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
/* The description keeps to the left column so the next block at the right is never crowded;
   the grid's minmax(0, 1fr) column and the wrap's own cap keep it narrower than the band. */
#hudSynopsisWrap {
  display: flex;
  align-items: flex-end;
  grid-column: 1;
  grid-row: 3;
  max-width: 720px;
}