/* Copyright Ayers Electronics Inc. All rights reserved. */
/* ---- The side panel: INFO and SETTINGS, over the picture, above the player bar ----
   A fixed ground over the video area only (its bottom is the transport row's top; js/xray.js writes
   --side-panel-bottom on open) that dims the picture a step, and a drawer docked at its right edge; the
   row below stays usable and the sound and picture run on. js/xray.js dresses #xray as the drawer at
   init; these id+class rules outrank the plain #xray padding and size rules in every breakpoint. */
#xray.xray-takeover {
  /* js/xray-init.js moves the panel to the top level, so this ground stands over every surface. */
  /* The ground stops above the transport row on every page - the measured row when there is one, the
     row's own standing height otherwise; never the screen's bottom. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--side-panel-bottom, var(--side-panel-bottom-fallback, 112px));
  z-index: 80;
  width: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  background: var(--scrim-dim);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden; /* the drawer scrolls; this ground does not */
}
/* The drawer is the player bar's band stood on end, on a ground nothing shows through: flush with the
   right edge, the height of the video area, the notch kept as padding. It grows from its own right edge, so nothing sweeps over the video. Its
   width is declared once, for anything that stands clear of the panel. */
:root {
  --side-panel-w: min(calc(460px + var(--safe-right)), 100%);
  --side-panel-ground: rgb(6, 6, 8);
}
.xray-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--side-panel-w);
  box-sizing: border-box;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) 0;
  display: flex;
  flex-direction: column;
  min-height: 0; /* the column shrinks to the ground's own height; #xrayBody/#xraySettingsBody scroll */
  overflow: hidden; /* the row's own top and bottom stay inside the drawer's box while it grows */
  background: var(--side-panel-ground);
  border-left: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft); /* closed above the controls row it stops at */
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 200ms ease-out;
  will-change: transform;
}
#xray.xray-in .xray-drawer {
  transform: scaleX(1);
}
/* While a settings face is up the band's words and the clock step aside; the row stays. */
body.side-panel-up #hudLockup,
body.side-panel-up #hudBinge,
body.side-panel-up #hudTitleRow,
body.side-panel-up #hudNext,
body.side-panel-up #hudSynopsisWrap,
body.side-panel-up #odPlayback,
body.side-panel-up #hudNetwork,
body.side-panel-up #clock {
  visibility: hidden;
}
/* Under either face the rest of the band's words and its bar step aside; the row stays. */
body.xray-open #hudMain > :not(#hudLockup):not(#transport),
body.xray-open #transport .scrub {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .xray-drawer {
    transition: none;
  }
}
/* Either face names itself in the head. The SETTINGS face: the INFO rows step aside for the settings
   rows (the Settings page's own row grammar: section titles that are not stops, label: value rows, 44px). */
#xray.xray-settings #xrayBody {
  display: none;
}
#xray:not(.xray-settings) #xraySettingsBody {
  display: none;
}
/* The auto margin takes the head's slack; the padding keeps 14px before Close. */
#xrayPanelTitle {
  margin-right: auto;
  padding-right: 14px;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}
#xraySettingsBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 18px 24px;
}
#xraySettingsBody .settings-section-title {
  margin: 14px 0 6px;
}
#xraySettingsBody .settings-section-title:first-child {
  margin-top: 6px;
}
/* The rows are the Settings page's own two columns (css/layout/settings.css .settings-row-split). */
#xraySettingsBody .settings-row-btn {
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
}

/* The header never scrolls, so the close stays reachable at any content length - the clip
   showed the close scrolled below the fly-up's own max-height fold, and a close that scrolled
   away with the content would be the same fault in the other direction. */
.xray-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
#xray.xray-takeover #xrayCloseBtn {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  padding: 8px 16px;
}
/* The scroll body carries the programme rows and grows to any length. min-height:0 lets it actually
   shrink inside the flex column so its own overflow-y is what scrolls, not the drawer. The foot fades
   over the bottom padding's height, so a row under the edge fades rather than slices, the list's end
   shows whole, and the same scroll padding keeps a stop the walk scrolls to above the fade. */
.xray-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 24px;
  scroll-padding-bottom: 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
/* ---- the rows under the story ----
   The info page's own icon row (css/components/details-icons.css .icon-btn), reused at the panel's
   width: it wraps onto as many lines as it needs rather than running off the edge. Its buttons stand
   the rail's 12px apart (.xray-rail below), 8px under a line above. */
#xrayBody .details-play-row.xray-icon-row {
  flex-wrap: wrap;
  height: auto;
  padding: 0;
  margin: 0 0 12px;
}
#xrayBody .details-play-row.xray-icon-row > button {
  margin: 0 12px 8px 0;
}
/* What a row button opens under the row: ADD TO PLAYLIST's picker, WATCH TOGETHER's two choices. */
.xray-drop.hidden {
  display: none;
}
.xray-drop:not(.hidden) {
  margin-bottom: 12px;
}
#xrayBody .xray-heading {
  margin: 14px 0 8px;
}
#xrayBody .xray-list {
  min-width: 0;
}
.xray-line {
  margin: 0 0 8px;
  font-size: var(--type-label);
  color: var(--muted);
}
/* A stop's ring: the row lifts on the elevated ground with the white ring inside its own edge. */
#xrayBody .xray-stop {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#xrayBody .xray-stop:focus {
  background: var(--elevated);
  outline: none;
  box-shadow: var(--focus-ring-inset);
}
/* CAST: a short rail of faces, each a 48x64 face over the name and the part. */
.xray-person {
  display: flex;
  flex: 0 0 88px;
  flex-direction: column;
  align-items: center;
  width: 88px;
  padding: 6px 4px;
  border-radius: var(--radius);
  box-sizing: border-box;
}
.xray-person .face {
  flex: 0 0 auto;
  width: 48px;
  height: 64px;
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  overflow: hidden;
}
.xray-person .face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xray-person .who {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}
.xray-person .nm {
  font-size: var(--type-label);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xray-person .rl {
  font-size: var(--type-micro);
  line-height: 1.2;
  margin-top: 2px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The panel's rows (the playlist picker, the pre-show actions): one line each, the facts at the right. */
.xray-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  margin-bottom: 4px;
  padding: 6px 8px;
  border-radius: var(--radius);
  box-sizing: border-box;
  font-size: var(--type-label);
}
.xray-row .ttl {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xray-row .sub {
  flex: none;
  font-size: var(--type-micro);
  color: var(--muted);
  white-space: nowrap;
}
/* A rail: the Cast row and the button row, one stop to Up and Down, walked by Left and Right. */
.xray-rail {
  display: flex;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px;
  margin-left: -3px;
}
.xray-row > * + *,
.xray-rail > * + * {
  margin-left: 12px;
}
.xray-rail::-webkit-scrollbar {
  display: none;
}
/* READ MORE: the story's way to the whole of itself, a word under the paragraph. */
.xray-read-more {
  margin: -6px 0 12px;
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: var(--type-label);
  font-weight: 700;
  color: var(--accent-text);
}