/* Copyright Ayers Electronics Inc. All rights reserved. */
/* a phone on its side. */

/* ---- a phone on its side (short viewport): the same stack, less air around it ---- */
@media (max-height: 430px) and (orientation: landscape) {
  /* The banner and the row together never cover more than about 45% of the picture's
     height - the lockup, the title and the time, the bar and the row of five faces (the words live
     in MORE's fly-up, as on a phone held upright), all at a smaller size; the description, the next
     line and the key chips are left out. */
  /* The top line at the phone's scale: the plate is 32 high on a 40 line, 8 from the top, so the
     line ends 48 down the picture instead of 62 (the lockup, the clock and the Binge ring read it). */
  :root {
    --hud-pad-l: max(16px, var(--safe-left));
    --hud-pad-r: max(16px, var(--safe-right));
    --top-line-top: 8px;
    --top-line-h: 40px;
    /* The top row's ground feathers in the band's own 12px here. */
    --top-ground-feather: 12px;
  }
  #hud {
    --hud-inset-bottom: calc(4px + var(--safe-bottom));
    padding: 6px var(--hud-pad-r) var(--hud-inset-bottom) var(--hud-pad-l);
    gap: 2px 12px;
  }
  #hudLockup {
    margin-bottom: 0;
    gap: 10px;
  }
  #hudNum {
    min-width: 2.75rem;
    height: 2rem;
    padding: 0 8px;
    font-size: var(--type-heading);
  }
  #hudChannelName {
    font-size: var(--type-label);
  }
  #hudLogo {
    --logo-h: 18px;
  }
  #hudNetworkLogo {
    height: 18px;
  }
  #hudNowTitle,
  #odPlayTitle {
    font-size: var(--type-label);
  }
  #hudSynopsis,
  #hudNext {
    display: none;
  }
  #hudMain {
    padding-top: 12px;
    background: linear-gradient(
      to top,
      var(--band-ground) 0%,
      var(--band-ground) calc(100% - 12px),
      var(--band-clear) 100%
    );
  }
  #hud #transport .vds-controls > * + * {
    margin-top: 4px;
  }
  #hudState:empty {
    display: none;
  } /* the state line takes no room while it says nothing */
  /* The scrub keeps no band here to share, so the words take their own row while they show. */
  body:not(.hud-mini) #hudState {
    top: 0;
    height: auto;
  }
  #transport {
    margin-top: 0;
  }
  #transport .vds-controls-group {
    padding: 0;
  }
  #hud #transport .ends {
    display: none;
  } /* the clocks are not in the short list; the bar and the dot still say where */
  /* 24 is the smallest pointer target (WCAG 2.5.8); a finger's bar takes the faces' own floor on a
     phone's side, 32 (css/player/transport-bands.css reads it). */
  #hud #transport .vds-time-slider {
    --control-min-height: 32px;
    height: 24px;
  }
  #hud #transport .vds-controls-group.scrub {
    margin-top: 2px;
  }
  #hud #transport .vds-controls-group.row {
    padding: 0;
  }
  #hud #transport .vds-controls-group.row > * + * {
    margin-left: 6px;
  }
  #hud #transport .vds-controls-group.row > * + .mag-divider {
    margin-left: 12px;
  }
  /* The faces at 32 on a phone's side: five of them still clear a thumb, and the row stays one row. */
  #hud #transport .vds-controls-group.row .vds-button,
  #hud #transport .vds-controls-group.row media-play-button,
  #hud #transport .vds-controls-group.row media-seek-button,
  #hud #transport .vds-controls-group.row media-caption-button,
  #hud #transport .vds-controls-group.row media-fullscreen-button {
    --control-min-height: 32px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  #transport .bar {
    margin: 2px 0 0;
  }
  #demoStrip {
    padding-top: calc(3px + var(--safe-top));
    padding-bottom: 3px;
  }
  #xray {
    padding-top: 16px;
  }
  #demoMark {
    top: calc(4px + var(--safe-top));
    min-height: 30px;
  }
  #startOverlay > * + * {
    margin-top: 8px;
  }
  #stillWatching {
    --card-step: 8px;
  }
  #stillWatching p {
    font-size: var(--type-label);
  }
  #guideDetailPoster {
    height: 48px;
  }
}