/* Copyright Ayers Electronics Inc. All rights reserved. */
/* On Demand at desktop widths (1280+). */

/* On Demand in the mockup's numbers (docs/design/mockups/on-demand-d.html, 1920 space): the pickers
   40px sentence-case, the preview's LIVE mark, scene line and progress edge, the rails' 15px headings.
   Only a desktop browser reaches this band: the television and the Uno desktop app both request the
   fixed 960 hint (Magpie.Client.Core.TvViewport), so neither sees a CSS width past 1279. The cards
   and the air between them are not this band's: css/tokens.css scales them with the screen. */
@media screen and (min-width: 1280px) {
  #guideHead > * {
    margin-right: 34px;
  }
  #guideCloseBtn.head-back,
  #headSwitchProfile,
  #headPickTogether,
  #headSurpriseMe,
  #headMusicMode,
  #headSyncTvs,
  #headAskMagpie {
    border: none;
    background: transparent;
    color: var(--muted);
  }
  .now-chan {
    font-size: var(--type-label);
  }
  .nowbar-label .now-title {
    font-size: var(--type-body);
  }
  .nowbar-label .now-episode {
    font-size: var(--type-label);
  }
  #odFilters .filter-ctl {
    min-height: 40px;
    padding: 0 14px;
    font-size: var(--type-body);
    letter-spacing: normal;
    text-transform: none;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin-left: 6px;
  }
  #odFilters .filter-ctl .ico {
    margin-left: 8px;
    color: var(--muted);
  }
  #odSortDir.seg {
    min-height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin-left: 6px;
  }
  #odSortDir .seg-btn {
    font-size: var(--type-body);
  }
  .preview-live {
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 3;
    font-size: var(--type-label);
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--on-live);
    background: var(--live);
    padding: 2px 7px;
  } /* red: the live token */
  .preview-live.behind {
    letter-spacing: 0.02em;
    text-transform: none;
  } /* the distance in words, not a shouted mark */
  .preview-scene {
    position: absolute;
    left: 24px;
    bottom: 22px;
    right: 12px;
    z-index: 3;
    color: var(--text);
    font-size: var(--type-body);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #odNowScrub {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 3px;
    border-radius: 0;
    background: var(--border-soft);
  }
  #odNowLabel {
    font-size: var(--type-body);
  }
  #odNowLabel b,
  #guideNowLabel b {
    color: var(--text);
    font-weight: 600;
  }
  #ondemand .rail,
  #musicHome .rail {
    margin-bottom: 26px;
  }
  /* A rail's heading keeps the band's size; its weight and ink are the one type rule's
     (css/components/on-demand.css). */
  #ondemand .rail h3,
  #musicHome .rail h3 {
    font-size: var(--type-body);
    margin-bottom: 10px;
  }
  /* The info page's headings take the rail heading's size here, not the set's unit. */
  #ondemand .details-heading,
  #musicHome .details-heading {
    font-size: var(--type-body);
  }
  #ondemand .card .sub,
  #musicHome .card .sub {
    font-size: var(--type-label);
  }
  /* The prev/next arrows, pointer-only, on hover, one page (the cards row's own visible width) per
     click. js/rail-edges.js wraps each rail's .cards in a .cards-wrap once and appends them; the
     base rule (outside this band) keeps them display:none everywhere under 1280 as a second gate -
     they also carry aria-hidden and tabindex="-1" so they can never enter the D-pad walk or a
     television's focus order, which stays entirely js/on-demand-keys.js's own key handling. */
  .rail-arrow {
    display: flex;
  }
  .cards-wrap:hover .rail-arrow {
    opacity: 1;
  }
}

/* A desktop window narrowed to 1280-1919 draws the mockup's 1920 numbers at two-thirds. No
   television reaches this band: TvViewport.cs pins the television's own CSS width to 960, well
   under 1280, so this band only ever draws for a real desktop browser window in this exact width
   range. One band, every number literal; the 1920 block above keeps the mockup's numbers for a
   desktop that wide. */
@media screen and (min-width: 1280px) and (max-width: 1919px) {
  #guide {
    --page-margin: 32px;
    --page-margin-vertical: 16px;
    --radius: 3px;
  }
  #guideHead > * {
    margin-right: 23px;
  }
  .now-chan {
    font-size: var(--type-micro);
  }
  .nowbar-label .now-title {
    font-size: var(--type-label);
  }
  .nowbar-label .now-episode {
    font-size: var(--type-micro);
  }
  #odFilters .filter-ctl {
    min-height: 27px;
    padding: 0 9px;
    font-size: var(--type-micro);
    margin-left: 4px;
  }
  #odFilters .filter-ctl .ico {
    margin-left: 5px;
  }
  #odSortDir.seg {
    min-height: 27px;
    margin-left: 4px;
  }
  #odSortDir .seg-btn {
    font-size: var(--type-micro);
    min-height: 0;
  }
  .preview-live {
    left: 8px;
    top: 7px;
    font-size: var(--type-micro);
    padding: 1px 5px;
  }
  .preview-scene {
    left: 16px;
    bottom: 15px;
    right: 8px;
    font-size: var(--type-micro);
  }
  #odNowScrub {
    height: 2px;
  }
  #odNowLabel {
    font-size: var(--type-micro);
  }
  #ondemand .rail,
  #musicHome .rail {
    margin-bottom: 17px;
  }
  #ondemand .rail h3,
  #musicHome .rail h3 {
    font-size: var(--type-micro);
    margin-bottom: 7px;
  }
  #ondemand .details-heading,
  #musicHome .details-heading {
    font-size: var(--type-micro);
  }
  /* The card's words at type tokens, so 1536 reads like 1920 does. */
  #ondemand .card .title,
  #musicHome .card .title {
    font-size: var(--type-label);
  }
  #ondemand .card .sub,
  #musicHome .card .sub {
    font-size: var(--type-micro);
  }
}