/* Copyright Ayers Electronics Inc. All rights reserved. */
/* phones (360-430 wide). */

/* ================= phones and tablets =================
   One stylesheet, the blocks below: phones (either orientation), tablets, the short landscape
   phone, and pointer: coarse for what only a finger needs. Nothing here drops a line of the banner
   stack (parity.hud lines, in order) or a word of the transport row; the row scrolls sideways on a
   phone instead of stacking into a column. */

/* ---- phones (360-430 wide) ---- */
@media (max-width: 767px) {
  /* The banner: the lockup line (number, name, logo) then the stack, all at the full width. */
  :root {
    --hud-pad-l: max(16px, var(--safe-left));
    --hud-pad-r: max(16px, var(--safe-right));
  }
  #hud {
    --hud-inset-bottom: calc(12px + var(--safe-bottom));
    padding: 24px var(--hud-pad-r) var(--hud-inset-bottom) var(--hud-pad-l);
  }
  #hudLockup {
    gap: 10px;
    max-width: calc(100% - 96px);
  } /* the clock's time keeps its corner; the name ellipsises inside what is left */
  #hudChannelName {
    font-size: var(--type-label);
    min-width: 0;
  }
  /* The band's fade-in feather was one 96px constant at every size: a third of a phone's
     picture spent on a gradient before any glyph. Half of it here; the stack itself is unchanged. */
  #hudMain {
    padding-top: 48px;
    background: linear-gradient(
      to top,
      var(--band-ground) 0%,
      var(--band-ground) calc(100% - 48px),
      var(--band-clear) 100%
    );
  }
  /* The sort direction's two glyph buttons measured 31px wide: the floor, sideways too. */
  #odFilters .seg .seg-btn {
    min-width: var(--control-min-height);
  }
  #hudLogo {
    --logo-h: 22px;
  }
  #hudNetworkLogo {
    height: 22px;
    max-width: 40vw;
  }
  #hudNowTitle,
  #odPlayTitle {
    font-size: var(--type-body);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #tpBadges {
    margin-top: 3px;
  }
  /* No far-right next block on a phone: the narrow stack has no room for a second column beside the
     title, so it drops (the short landscape band already drops it too). The title reclaims the full width. */
  #hudNext {
    display: none;
  }
  #hudSynopsisWrap {
    grid-column: 1 / -1;
    max-width: none;
  }
  #transport .ends {
    flex-wrap: wrap;
    gap: 0 10px;
  }
  /* The ten words, one row, scrolled sideways by a finger: never wrapped into a column, never cut. */
  /* Below the phone breakpoint the row keeps the three transport faces, LIVE / GO LIVE and the
     MORE word; the rest lives in MORE's fly-up (js/transport.js). No sideways scroll. */
  #xray {
    max-width: none;
    max-height: calc(100% - 48px);
    overflow-y: auto;
    padding: 24px max(16px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(16px, var(--safe-left));
  }
  #xrayHeadline {
    font-size: var(--type-body);
  }
  #xraySynopsis {
    font-size: var(--type-label);
  }
  #numEntry {
    top: calc(12px + var(--safe-top));
    right: max(12px, var(--safe-right));
    font-size: var(--type-heading);
    padding: 8px 14px;
    min-width: 72px;
  }
  #demoStrip {
    padding: calc(6px + var(--safe-top)) max(40px, var(--safe-right)) 6px max(12px, var(--safe-left));
    font-size: var(--type-micro);
  } /* room for the close at the right */
  /* the demo strip shortens its sentence on a phone */
  #demoStrip .strip-long {
    display: none;
  }
  #demoStrip .strip-short {
    display: inline;
  }
  #demoMark {
    top: calc(8px + var(--safe-top));
    right: max(8px, var(--safe-right));
    min-height: 32px;
  }
  #demoMark img {
    height: 22px;
    width: 22px;
  }
  /* The bar grows by the home-bar inset; js/main.js measures the rendered height, so the HUD lift
     follows without a second number. The right cell is reserved and empty: dropped for the width. */
  #demoBar {
    min-height: calc(32px + var(--safe-bottom));
    padding: 0 max(12px, var(--safe-right)) var(--safe-bottom) max(12px, var(--safe-left));
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  #demoBarLeft {
    display: none;
  }
  #demoBarNow {
    justify-self: start;
    max-width: none;
    min-width: 0;
  }
  #startOverlay,
  #stillWatching {
    padding: calc(24px + var(--safe-top)) max(20px, var(--safe-right)) calc(24px + var(--safe-bottom))
      max(20px, var(--safe-left));
  }
  #stillWatching h2 {
    font-size: var(--type-heading);
  }
  #toast {
    bottom: calc(24px + var(--safe-bottom));
    max-width: calc(100vw - 32px);
  }
  #upnext {
    left: max(16px, var(--safe-left));
    right: max(16px, var(--safe-right));
  } /* the manifest margin is 48; a phone keeps 16 */
  /* The Coming Up Next Card drops to one column: the thumbnail above the text, its own aspect. */
  .upnext-card {
    flex-direction: column;
    align-items: stretch;
  }
  .upnext-card .upnext-poster {
    width: 100%;
    height: auto;
  }
  /* The face stands where the thumbnail would, above the text, not over the whole column. */
  .upnext-card .art-missing {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .audio-card,
  .dialog-card {
    max-width: calc(100vw - 24px);
  }
  /* Three poster cards across the screen (PhoneGeometry.CardsPerScreen), two wide ones; the
     viewer's card-size setting does not apply on a phone. */
  .card {
    flex-basis: var(--phone-card-w);
  }
  .card.wide {
    flex-basis: var(--phone-card-w-wide);
  }
  /* A library tile is a wide card here too: two across, as tall as a wide picture, under each
     selector the landing sizes a tile by (css/layout/on-demand.css). */
  #ondemand:not(.grid-open):not(.details-open) #odLibraries > .card,
  #ondemand:not(.grid-open):not(.details-open) #odLibraries > .card:first-child:nth-last-child(n + 4),
  #ondemand:not(.grid-open):not(.details-open) #odLibraries > .card:first-child:nth-last-child(n + 4) ~ .card {
    flex-basis: var(--phone-card-w-wide);
    height: calc(var(--phone-card-w-wide) * 9 / 16);
  }
  .card .meta {
    padding: 6px 8px 8px;
  }
  .card .title {
    font-size: var(--type-label);
  }
  /* The channel cell (PhoneGeometry.ChannelColumnEpx 88): the logo alone with the number over it. */
  .g-chan {
    padding: 0 4px;
    gap: 0;
    position: relative;
    justify-content: center;
  }
  .g-chan .num {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: var(--type-micro);
    min-width: 0;
    line-height: 1;
    color: var(--muted);
  }
  /* A Kids channel's dot at the foot of the corner the number holds. */
  .g-chan > .kids-dot {
    top: auto;
    bottom: 4px;
    left: 4px;
    margin: 0;
  }
  .g-chan .logo {
    flex: none;
    max-width: 72px;
    max-height: 28px;
    width: auto;
    height: auto;
  }
  .g-chan .name {
    font-size: var(--type-micro);
  }
  .g-chan .fav {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: var(--type-micro);
  }
  /* The banner's own close sits above the lockup line, never over the channel logo. */
  #hud {
    padding-top: 40px;
  }
  /* The bar's status line stops short of the version at its right. */
  #demoBarNow {
    max-width: calc(100vw - 120px);
  }
  #demoBarNow .now-title {
    max-width: 34vw;
  }
  .details-scroll {
    padding: calc(64px + var(--safe-top)) max(16px, var(--safe-right)) 40px max(16px, var(--safe-left));
  }
  .details-body {
    flex-direction: column;
    gap: 16px;
  }
  .details-episode-still {
    width: 112px;
    height: 63px;
  }
}