/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the transport row: scrub, groups, edges, badges, the live pills shape. */
/* ---- the scrub above the row: one 4px line, the fill to the picture, the thumb on it ---- */
/* ---- the row ----
   The library's own layout, drawn by its own two sheets (vendor/default-theme.css and
   vendor/default-video-layout.css): every control is one of its components wearing its skin, so the
   rules below are only what those sheets have no equivalent for - the programme's own span above
   the bar, a live word that says which of two things a press will do, the word under each face, and
   the three bands a picture can be. */
#transport {
  margin-top: 10px;
}
/* Their controls element lays itself over the picture, because in their layout it IS the overlay
   (controls.css keys position: absolute on a video view). Ours is one item in the banner's stack,
   so it flows where the banner puts it. */
#transport .vds-controls {
  position: static;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: none;
}
/* The row's whole distance from the scrub group above it: the step between the two groups and the
   row's own lead in one margin, carried from the container so the row's own rules leave it standing. */
#transport .vds-controls > * + * {
  margin-top: 14px;
}
#transport .vds-controls-group {
  display: flex;
  align-items: center;
  width: 100%;
}
#transport .vds-controls-group.row {
  flex-wrap: wrap;
}
/* One step between controls. A divider draws no width and stands on its own margins, so the control
   after it is a step from the rule and the rule a step from the control before it. */
#transport .vds-controls-group.row > * + * {
  margin-left: 8px;
}
#transport .vds-controls-group.row > * + .mag-divider {
  margin-left: 16px;
}
/* The position label (.pos) rides 2px above the slider on its own absolute line, ~20px tall; the
   scrub group holds that band open (#transport is display: contents, so its margin never lands). The
   state words share the band and the label steps aside while they show, so the two never overprint. */
/* The clocks sit one spacing step (8) from the bar's ends, the library's half-thumb side margin gone
   (below): the bar reads as the span between its two times, not a rule floating between them. */
#transport .vds-controls-group.scrub {
  margin-top: 28px;
}
#transport .vds-controls-group.scrub > * + * {
  margin-left: 8px;
}
/* The groups keep no inset of their own: the vendor layout pads the scrub group 0 12px and the row
   4px 6px, and gives the live button a 12px margin - three private rails inside the band's one.
   Both groups and the button start and end on #hudMain's content edge (components.css --hud-pad-l/r). */
#transport .vds-controls-group.scrub,
#transport .vds-controls-group.row {
  padding-left: 0;
  padding-right: 0;
}
#transport .vds-live-button {
  margin-left: 0;
}
/* The vendor gives every button a 2.5px right margin on top of the row's gap; the last control then
   stops 2.5px short of the rail. The row's gap is the only spacing between controls. */
#transport .vds-controls-group.row .vds-button {
  margin-right: 0;
}
#transport .edge {
  flex: 0 0 auto;
  font-size: var(--type-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
}
#transport #tpEnd {
  text-align: right;
}
/* The library keeps half a thumb (7.5px) of margin at each end of its slider so the thumb at 0% and
   100% stays inside the control; here the clocks' own room beside the bar already holds it. */
#transport .vds-time-slider {
  flex: 1 1 auto;
  margin-left: 0;
  margin-right: 0;
}
/* The badges ride the banner's title line (#tpBadges, placed in #hudMain), not a row of their
   own here; the two rules below are the badge look, which is the same wherever the strip is drawn. */
.badges {
  display: flex;
  align-items: center;
}
.badges > * + * {
  margin-left: 6px;
}
.badges:empty {
  display: none;
}
/* Letter-spacing adds a trailing gap after the last glyph (~1px at 13px/0.08em), so the numeric
   right padding sits a hair under the left to read even on both sides. */
.badge {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 4px 4px 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  color: var(--muted);
}
.badge.mature {
  color: var(--text);
  border-color: var(--text);
}
/* The empty CC slot: the word stays for its width, nothing paints. */
.badge.empty {
  display: none;
} /* an absent mark takes no room, so the present ones sit right after the title */
/* The counter rides the playhead: their slider publishes --slider-fill for its own thumb, so the
   label sits on the same value and moves with it. */
#transport .pos {
  position: absolute;
  bottom: 100%;
  left: var(--slider-fill, 0%);
  transform: translateX(-50%);
  margin-bottom: 2px;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
#transport .pos:empty {
  display: none;
}
/* The state words have the band (#hud.stated, js/tuner-hud-state.js setHudState). */
#hud.stated #transport .pos {
  visibility: hidden;
}
#transport {
  --media-brand: var(--accent);
  --video-brand: var(--accent);
  --media-slider-track-fill-live-bg: var(--accent);
  --media-slider-track-height: 4px;
}

/* Any author rule that sets display beats the browser's own [hidden], and the library's slider sets
   display: flex - so the surface that is not in use has to be told to go. */
#transport [hidden] {
  display: none !important;
}

/* The scrubber is always drawn: their thumb is opacity 0 until the slider goes active, which reads
   as "hover to see where you are", and a television has no pointer to hover with. */
#transport .vds-slider .vds-slider-thumb {
  opacity: 1;
}

/* The scrub has to read as focused even though its thumb is always drawn (above): give the thumb the
   same white ring the row's other controls take - a dark gap then the ring - so focus is MORE than
   the resting thumb, not equal to it. */
#tpScrub:focus .vds-slider-thumb,
#tpScrub[data-focus] .vds-slider-thumb {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 5px var(--focus-ring);
}

/* The library's seek buttons delete themselves while IT thinks the stream cannot seek (the component
   sets aria-hidden and its sheet turns that into display:none). A control that vanishes drags every
   control beside it along, so ours hold their place. What they must NOT do is take their look from
   that flag: on a channel the library is judging an HLS live edge while the tuner is the one that
   knows the window and the programme's own start, so the face reads from the tuner's decision
   instead (js/chrome.js's paintScanFaces sets disabled from js/tuner.js's canScan). Otherwise a
   rewind that works reads as greyed out, which is the face lying about what a press will do. */
#transport .vds-seek-button[aria-hidden="true"] {
  display: inline-flex !important;
}
#transport .vds-seek-button.unavailable {
  opacity: 0.35;
}
/* The caption button deletes itself the same way while the player holds no caption track, which is
   always the case under a shell that draws the picture itself. AUDIO & CC opens the picker (the
   soundtrack and captions off at the least), so it holds its place on every surface. */
#transport .vds-caption-button[aria-hidden="true"] {
  display: inline-flex !important;
}

/* The fast-backward / fast-forward faces (media-icons 1.1.5) are asymmetric double chevrons drawn in
   a symmetric 0-32 viewBox: the ink mass sits on the two wide bases while the tip runs out toward the
   far edge, so with the box centred the glyph reads pulled toward its bases inside the round focus
   ring. A bounding-rect measure misses this (the box centres); the INK measures off. Each face is
   nudged toward the tip to the point where the ink weighs the same on both sides of centre - measured
   ~0.85 of 32 units, ~2.66% of the face - which is about half of full mass-centroid centring; the
   full amount would run the tip into the ring. The two faces mirror, so one magnitude, opposite
   signs, on the face alone - never the button, whose ring must stay concentric with the target. */
#tpRew .vds-icon {
  transform: translateX(-2.66%);
}
#tpFwd .vds-icon {
  transform: translateX(2.66%);
}

/* WHERE LIVE IS: a red dot filling the track at the live edge, 12px so it reads across a room,
   shown only while the viewer is behind live: scrubbed back, the thumb moves off and the dot shows
   where live is; at the edge the thumb itself is the edge and the dot is hidden. Above the thumb in
   the stack so the thumb's return never covers it. */
#transport .live-mark {
  position: absolute;
  top: 50%;
  left: var(--track-fill, 100%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  transform: translate(-50%, -50%);
  background: var(--live);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
#transport .behind-live .live-mark {
  opacity: 1;
}
/* Nothing lit while the window is unknown: no dot, no run, no mark, so a fresh tune shows an empty
   track rather than a thumb parked at zero. */
#tpScrub.undefined .vds-slider-thumb,
#tpScrub.undefined .vds-slider-track-fill,
#tpScrub.undefined .vds-slider-progress {
  opacity: 0;
}
/* A title's timeline shows its length and the position, never the buffered run, which grows in steps
   while the title loads. */
#tpTimeline .vds-slider-progress {
  display: none;
}
/* The played-out run (the library's progress, sized to the same live fraction) ends under the line:
   its right end is squared so it butts flat against the mark instead of curving away from it, while
   the left end keeps the track's radius. The scrubber's own fill is under the thumb, so it is left
   as the library draws it (the vendored .vds-slider-track radius, 2px). */
#tpScrub .vds-slider-progress {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Their row has no separator - a divider exists only inside their menus - so this borrows that
   token and the row keeps one colour system. */
.mag-divider {
  align-self: center;
  flex: 0 0 auto;
  width: 0;
  height: 20px;
  margin: 0 8px;
  border-left: var(--media-menu-divider, 1px solid rgb(255 255 255 / 0.15));
}

/* base.css puts a chip, a border and a 44px floor under every button of ours, and the library's own
   button rules are :where() - no specificity - so ours would win. In this row a button IS one of
   theirs, so it takes their box and nothing of ours: the reset outranks base.css's bare button rule
   and nothing more, so the library's own hover and focus paint (.vds-button:hover, the pill) still
   land on top of it.
   The weight is the whole point and it is written without an id: one element and one class outranks
   base.css's bare `button` and stays under the library's own `.vds-button:hover`. Every button
   carrying these classes is one of theirs, in this row (index.html #transport), so the selector needs
   no ancestor - and an ancestor would only add weight the row cannot afford. */
button.vds-button,
button.vds-live-button {
  min-width: 0;
  min-height: 0;
  padding: var(--media-button-padding, 0px);
  background: none;
  border: var(--media-button-border, 0);
  border-radius: var(--media-button-border-radius, 9999%);
}

/* The library states these sizes only in :where() rules, which the television floor (Chromium 83)
   drops: below it a control takes the measure of its own drawing, 300 px
   across. The same numbers as the library's default theme here, so the row measures alike on both
   sides of the floor: the control (38px, 42 in full screen), the face inside it (70% of the
   control, the drawing filling the face) and the live pill (40 tall). The numbers ride
   the library's own properties, so a caller that sets one still governs.
   Half this row is the library's own elements (media-play-button and kin), which no `button`
   selector reaches, so these carry the class alone - one class, under the library's own hover and
   focus paint, and this sheet is the last one in, so it takes the size while their paint stands. */
.vds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--media-button-size, 38px);
  height: var(--media-button-size, 38px);
}
.vds-live-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--media-live-button-height, 40px);
}
[data-fullscreen] .vds-button {
  width: var(--media-fullscreen-button-size, 42px);
  height: var(--media-fullscreen-button-size, 42px);
}
.vds-button .vds-icon {
  width: var(--media-button-icon-size, 70%);
  height: var(--media-button-icon-size, 70%);
}
.vds-button .vds-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}