/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the shared guide head row and tabs. */
/* ---- guide (one screen, two modes: GUIDE | ON DEMAND) ---- */
/* The guide preview's width. It was a full stage shared with On Demand, which made the band as tall
   as a 16:9 picture at that width and left a viewer under two rows on a television. In the guide the
   preview stays the subject but at a size that lets the band come down to the height its own text
   needs; On Demand shrinks it further, to a thumbnail sized off the control row, so this token is the
   guide band's alone now. */
/* --preview-w is declared on BOTH surfaces, not on #guide alone, because the video
   preview occupies "the same exact space and size" on On Demand as it does on the guide. One
   expression, two places that read it, so the two cannot drift apart. */
#guide,
#ondemand {
  --preview-w: clamp(128px, 14vw, 280px);
}
#guide {
  --head-under: var(--top-line-top);
  --guide-head-height: calc(var(--top-line-top) + var(--top-line-h) + var(--head-under));
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
/* The one head row every page wears - the segmented control, GUIDE to SETTINGS. It stands on the top
   line the banner's lockup and the page's one clock share (components.css --top-line-top and
   --top-line-h): the row is that line's height under that inset, its content centred on it, so the
   control sits where the channel's lockup sits and the clock never moves between the picture and a
   page. The clock itself is #clock, fixed at the line's right end, not a child of this row. Under the row
   stands --head-under: the line's inset, 11px on a wide screen; the tablet's head keeps one foot
   (--head-foot) under its row (css/layout/phones.css). */
#guideHead {
  --head-control-h: calc(var(--top-line-h) - 1px);
  --head-step: 8px;
  /* A focused button's label hangs 8px under it for one micro line (css/player/transport-controls.css
     .iconic .label); the foot is that and 6px of air. */
  --head-foot: calc(8px + var(--type-micro) + 6px);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--guide-head-height);
  padding: var(--top-line-top) var(--page-margin) var(--head-under);
}
@media screen and (min-width: 900px) {
  #guide {
    --head-under: 11px;
  }
}
/* One step between every control on the row, the icon group's own included (a flex gap is a television 83
   floor, css/css-floor tests hold it). */
#guideHead > * {
  margin-right: var(--head-step);
}
#guideHead > :last-child {
  margin-right: 0;
}
/* The head's faces sit inside the top line: their own padding, no 44 px floor. A coarse pointer takes
   the floor back (touch.css). */
#guideHead .seg-btn {
  min-height: 0;
  height: var(--head-control-h);
  margin-top: -1px;
  margin-bottom: -1px;
  padding: 0 13px;
}
/* Every control on the row wears one face: one height, one outline and corner, and the page's one
   white focus ring (base.css, on every button in #guide), a tab lifted above its neighbours while it has it. */
#guideCloseBtn,
#guideHead .seg,
#headSwitchProfile,
#headPickTogether,
#headSurpriseMe,
#headMusicMode,
#headSyncTvs,
#headAskMagpie,
#modeSettings {
  box-sizing: border-box;
  height: var(--head-control-h);
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* The icon group after the bar: Surprise Me, Pick Together, Sync TVs and Switch Profile, one tight
   group. The row's one step stands before each shown icon, and a hidden icon (display: none) leaves
   no hole. The group never clips, so a focused icon's hint hangs free of it. */
.head-icon-group {
  flex: none;
  display: flex;
  align-items: center;
}
.head-icon-group > :not(.hidden) ~ :not(.hidden) {
  margin-left: var(--head-step);
}
/* Back and the icons: icon buttons at the row's own height, the ghost face. The drawing inside is the
   shared .icon-btn size (css/components/details-icons.css). */
/* The word under a focused icon is the player's own hint (css/player/transport-controls.css .iconic .label):
   it hangs from the button's foot into the air under the row, so the row's height neither clips nor
   moves it. The row stands above the page below for that, and lets it overflow; a phone's row scrolls
   sideways and so would clip it, and there no hint is drawn. The pages share the guide layer's stacking
   with the row, so it stands above every layer they raise there: On Demand's tiles band (3) and the
   guide's time ruler (4 and 5). */
@media screen and (min-width: 900px) {
  #guideHead {
    position: relative;
    z-index: 6;
    overflow: visible;
  }
  #guideHead .head-icon .label {
    z-index: 4;
    pointer-events: none;
  }
}
@media screen and (max-width: 899px) {
  #guideHead .head-icon .label {
    display: none;
  }
}
#guideCloseBtn,
#headSwitchProfile,
#headPickTogether,
#headSurpriseMe,
#headMusicMode,
#headSyncTvs,
#headAskMagpie,
#modeSettings {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--head-control-h);
  padding: 0;
}
/* The original single note's drawn weight sits slightly above and left of its 24px view box. */
#headMusicMode .ico {
  transform: translate(0.5px, 0.5px);
}
#modeSettings .ico {
  transform: translateY(1px);
}
/* The accent fill marks Settings as current; its cog keeps the theme's normal foreground. */
#guideHead #modeSettings[aria-current="page"] {
  color: var(--text);
}
/* On a 900 to 1279 wide screen the clock stands at the right with the time alone, and the bar ends
   at least one step left of it: from 960 up the tabs keep their own padding, below it they tighten
   by the width, to 9 px at 900. */
@media screen and (min-width: 900px) and (max-width: 1279px) {
  #guideHead .seg-btn {
    padding: 0 clamp(9px, calc(5.83vw - 43px), 13px);
  }
}