/* Copyright Ayers Electronics Inc. All rights reserved. */
/* On Demand at television widths (900-1279). */

/* A 960 television (900-1279): the body starts where the Back button starts ("match the Back button
   left padding"); the page margin is the head's surface margin on this band, as the 1280 band's 32px already is. */
@media screen and (min-width: 900px) and (max-width: 1279px) {
  #guide {
    --page-margin: var(--guide-surface-margin);
  }
}

/* The panhandle's frame is the guide's frame, to the letter ("needs to be A
   COPY. THE SAME ONE"): the picture, with the scrub and the Now Playing line over its own bottom edge, the same
   words js/guide-detail.js paintNowBar writes into both bars. The layout D mockup's in-picture marks - the LIVE
   badge, the scene line, the edge scrub - are put away on every television band, and neither frame carries a
   border: each sits flush in its place. */
/* A guide category switched off in the pop-up settings: dimmed, still a stop, still tunes. */
.g-cell.cat-off {
  opacity: 0.35;
}
.g-cell.cat-off.focused,
.g-cell.cat-off:focus {
  opacity: 0.7;
}

/* The library view's head on a narrow screen: the name, then the controls on a line of their own. From
   900 wide they stand in a column under the preview (css/components/on-demand-filters.css). */
#odAllHead {
  flex-wrap: wrap;
}
#odAllHead #odFilters {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
}
#odAllHead #odFilters > * {
  margin: 0 8px 8px 0;
}
/* The top row's search stop and gear, at the row's right end before the clock. */
/* The search button stands for the search page while it is up (the mock's lit button). */
/* The top row after the segments: the search button and the gear, two
   icon buttons of the Back button's grammar; the search button opens the search page, and no field
   sits between the two icons. */
/* The bar over the frame's own bottom edge carries the programme's title; the channel's number and
   name, small, ride the frame's top-left chip (css/components/preview.css). Each is ellipsized on its
   own, no prefix words. */
.nowbar-label {
  white-space: normal;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nowbar-label > * + * {
  margin-top: 1px;
}
.now-chan {
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nowbar-label .now-title {
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A live episode's line under its show's title: the code and the episode's own title, smaller. */
.nowbar-label .now-episode {
  display: block;
  font-size: var(--type-micro);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nowbar-label .now-episode:empty {
  display: none;
}

@media screen and (min-width: 900px) {
  #odPreviewLive,
  #odPreviewScene {
    display: none;
  }
  #odNowScrub {
    position: static;
    height: 3px;
    border-radius: var(--radius-small);
    background: var(--track);
  }
  #odNowLabel {
    font-size: var(--type-label);
  }
  /* A rail's own title over its View All grid: one line, ellipsised. */
  #odAllTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #odScroll .cards .empty {
    font-size: var(--type-label);
    color: var(--muted);
  }
}