/* Copyright Ayers Electronics Inc. All rights reserved. */
/* The info page's one scroller: the title's head, then its rows, scrolling as one page under the
   page's top band (js/details-walk.js seats each row). */

/* On every other screen the scroller and the backdrops' ground draw no box: the area, On Demand's rows
   and the panel lay out as the pane's own, and the backdrops as the area's. */
.info-scroll,
.upper-ground {
  display: contents;
}

/* On a title's info page the scroller takes the pane and holds the area and the panel in its flow; the
   panel and its body draw no scroller of their own. The scroller is never positioned, so a box placed
   against the pane stands still while it scrolls: a scroller neither clips nor moves a descendant whose
   containing block is its ancestor (CSS 2.1, 11.1.1). Networks and Settings keep the area as their own
   (css/layout/on-demand.css). */
#guide:not(.mode-shared) #ondemand.details-open .info-scroll {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#guide:not(.mode-shared) #ondemand.details-open #odDetail {
  flex: none;
  overflow: visible;
}
#guide:not(.mode-shared) #ondemand.details-open #odDetail .details-scroll {
  height: auto;
  overflow: visible;
}

/* The preview stands at the top of the right column while the head scrolls away beside it: the frame
   is placed against the pane where it stands at rest, and #odPan keeps the frame's room in the area's
   row (with the preview hidden it is down, css/components/side-column.css). Under native video the shell draws the picture at the frame's rectangle, so the frame must not
   move (js/player-native.js). The area is not positioned here, so the pane is the frame's containing
   block; the backdrops' ground spans the area, a flex item of no net width stretched to its height
   (a single-line flex line takes the container's min-height), and keeps them clipped to it. A phone
   on its side draws no frame (css/layout/phones-landscape.css), so it keeps no room for one. */
@media screen and (min-width: 900px) and (min-height: 431px) {
  #guide:not(.mode-shared) #ondemand.details-open #odUpper {
    position: static;
  }
  #guide:not(.mode-shared) #ondemand.details-open #odUpper > .upper-ground {
    display: block;
    position: relative;
    z-index: 0;
    flex: none;
    align-self: stretch;
    width: calc(100% + 2 * var(--page-margin));
    margin: 0 calc(-100% - var(--page-margin)) 0 calc(-1 * var(--page-margin));
  }
  #guide:not(.mode-shared):not(.preview-off) #ondemand.details-open #odPan {
    display: block;
    position: static;
    flex: none;
    width: var(--od-pan-w);
    margin: 0 calc(-1 * var(--preview-reach)) 0 0;
  }
  #guide:not(.mode-shared) #ondemand.details-open #odPreviewWrap {
    position: absolute;
    top: 0;
    right: var(--page-margin);
    z-index: 2;
  }
}