/* Copyright Ayers Electronics Inc. All rights reserved. */
/* demo idle gate. */

/* ---- the cards that ask the viewer a question: the demo's idle gate (js/main.js), the confirm
   (js/confirm.js) and the full-seats card (js/full-card.js), drawn as the dialog family
   (card-dialog.css). They stand on the document, never inside #stage: a card can arrive while a page
   (z 20), the wizard (45) or the tour (52) is up, and #stage's own stacking context (position: fixed
   always opens one) would trap any z-index nested inside it under those layers no matter how high it
   climbed - so the three are markup siblings of #stage and the page layer (pages/modal-cards.html).
   Above every page, gate, wizard, tour and the side panel (80); only the toast (90) passes over a
   question. ---- */
#stillWatching,
#confirmCard,
#fullCard {
  position: fixed;
  z-index: 85;
}
#confirmCard .confirm-actions {
  display: flex;
}
#confirmCard .card-dialog-panel > * + .confirm-actions {
  margin-top: calc(var(--card-step) + 4px);
}
#confirmCard .confirm-actions > * + * {
  margin-left: 10px;
}
/* The off-air page (js/off-air-card.js): the same card grammar as the cards
   above on the plain dark ground the Binge Limit slate has - no field, no panel, the words centred on the
   picture. The admin's own still or video, when the channel has one, fills the picture
   under them. Never over a page: the layers are above the stage. */
#offAirCard {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--offair-ground);
}
/* The tuning face: leaving a channel that stood on this page keeps the page up as the ground the next
   picture lands on - the lockup on the plain dark, no plate or lines - under the banner (#hud, z 10), so
   the channel just tuned reads on the quick bar while its picture comes. */
#offAirCard[data-mode="tuning"] {
  z-index: 5;
}
#offAirCard[data-mode="tuning"] .offair-band {
  visibility: hidden;
}
/* The off-air face stands under the banner and over the watermark (z 5): a tune onto a channel with
   nothing scheduled raises the banner for its usual span, Off the Air as its title, over the card. The
   failure faces keep the card's own place above the banner, so nothing covers their buttons. */
#offAirCard[data-mode="offair"] {
  z-index: 9;
}
#offAirStill,
#offAirLoop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--offair-ground);
}
#offAirStill[hidden],
#offAirLoop[hidden] {
  display: none;
}
/* The slate's frame (SlateRenderer at 1920x1080): the lockup, the gap under it and the lines are
   one block, centred on the card. */
#offAirCard .offair-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 36px;
  text-align: center;
}
/* The lockup and the text band under it: offair-lockup.css. */
/* The channel's plate and name stand where the banner's lockup stands, top left, clear of the block. They
   come back once the banner has faded (banner.css, 200 ms). */
#offAirCard .offair-lockup {
  position: absolute;
  top: var(--top-line-top);
  left: var(--hud-pad-l);
  display: flex;
  align-items: center;
  transition: visibility 0s linear 200ms;
}
/* The banner over the off-air face names the channel with its own plate - the band from this same point,
   the quick bar on its bottom line - so the card's steps aside while either is up. */
body.hud-up #offAirCard[data-mode="offair"] .offair-lockup {
  visibility: hidden;
  transition: none;
}
#offAirCard .offair-lockup > * + * {
  margin-left: 14px;
}
#offAirNum {
  min-width: 2.75rem;
  height: 1.875rem;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--type-body);
  background: var(--elevated);
  color: var(--text);
}
#offAirNum:empty {
  display: none;
}
/* The channel's logo stands beside the plate, the banner's own size (#hudLogo): the 4:1 canvas at the
   plate's height, its margins taking back the canvas's empty lead and trail (js/logo-ink.js), so the
   drawn art, not the canvas, sits one step from the plate. */
#offAirCard .offair-lockup #offAirLogo {
  --logo-h: var(--plate-h);
  height: var(--logo-h);
  width: calc(var(--logo-h) * 4);
  max-width: none;
  margin-left: calc(14px - var(--logo-h) * 4 * var(--ink-lead, 0));
  margin-right: calc(-1 * var(--logo-h) * 4 * var(--ink-trail, 0));
  object-fit: contain;
}
#offAirName {
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text);
}
/* The same three-line composition SlateRenderer.ComposeThreeLine draws server-side for the
   Binge Limit slate and the off-air slate - a headline, an accent middle line with clear space above and
   below, a foot line, wrapped to 72% of the card's width (the 1920 canvas wraps text to 1382px, 72% of
   1920). .standby-lines/.standby-face are the reusable pair - a page-side card drawn later on this same
   dark ground shares them rather than duplicating. */
#offAirCard .standby-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: clamp(280px, 72vw, 1382px);
  text-align: center;
}
#offAirCard .standby-face {
  margin: 0;
  font-weight: 700;
  line-height: 1.31;
  font-size: clamp(var(--type-heading), 3.65vw, var(--type-card-headline));
} /* 70px/1920 width; SentenceLeading 92/70 = 1.31 */
#offAirCard #offAirNext {
  color: var(--accent-text);
  margin: clamp(6px, 0.83vw, 16px) 0 clamp(14px, 2.08vw, 40px);
  font-size: calc(clamp(var(--type-heading), 3.65vw, var(--type-card-headline)) * 41 / 70);
  line-height: 1.34;
} /* the accent middle line; MiddleGapAbove 16 and MiddleGapBelow 40 of 1920 clear around it; 41/70 of the headline, leading 55/41 */
#offAirCard #offAirCopy {
  margin: 0;
  font-weight: 400;
  font-size: clamp(var(--type-label), 1.61vw, var(--type-title));
  line-height: 1.36;
  color: var(--text);
} /* the foot, the headline's own cream; 31px/1920 width; FootLeading 42/31 = 1.36 */
/* Please Stand By (js/standby-card.js): a channel stall over the still-playing picture, not the
   plain ground #offAirCard uses over a frozen frame - there is a live picture under this one. The
   same lockup, band and .standby-lines/.standby-face pair, centred as one block. */
#standByCard {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}
#standByCard .standby-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: clamp(280px, 72vw, 1382px);
  text-align: center;
}
#standByCard .standby-face {
  margin: 0;
  font-weight: 700;
  line-height: 1.31;
  font-size: clamp(var(--type-heading), 3.65vw, var(--type-card-headline));
}
#standByCard #standByNext {
  color: var(--accent-text);
  margin: clamp(6px, 0.83vw, 16px) 0 0;
  font-size: calc(clamp(var(--type-heading), 3.65vw, var(--type-card-headline)) * 41 / 70);
  line-height: 1.34;
}
#standByCard .standby-dots,
#offAirCard .standby-dots {
  display: flex;
  margin-top: clamp(10px, 1.5vw, 24px);
}
#standByCard .standby-dots > * + *,
#offAirCard .standby-dots > * + * {
  margin-left: 10px;
}
#standByCard .standby-dots span,
#offAirCard .standby-dots span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--accent);
  opacity: 0.7;
  animation: standby-pulse 1.2s ease-in-out infinite;
}
#standByCard .standby-dots span:nth-child(2),
#offAirCard .standby-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
#standByCard .standby-dots span:nth-child(3),
#offAirCard .standby-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes standby-pulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #standByCard .standby-dots span,
  #offAirCard .standby-dots span {
    animation: none;
  }
}
#stillWatching .gate-download {
  font-size: var(--type-label);
}
#stillWatching .card-dialog-panel > * + .gate-download {
  margin-top: calc(var(--card-step) + 8px);
}
#stillWatching .gate-download a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
#stillWatching .gate-download a:hover,
#stillWatching .gate-download a:focus {
  text-decoration: underline;
}
/* The Binge Limit chip (js/binge.js): a ring like Claude Code does in its own UI - a
   28px ring whose arc is what is USED of the budget it speaks for, on the clock's own line LEFT of the
   clock, with the span in a tooltip to the ring's left when it has something to say - js/binge.js measures the clock each tick into --binge-clock-w - so it
   never sits over the channel's mark under the clock. Muted ink while it flashes a milestone, the text
   ink once it must stay (under 30 minutes); the arc is the bird's accent in every state. Never a fill: information, not an event. */
#hudBinge {
  position: absolute;
  top: var(--top-line-top);
  right: calc(var(--hud-pad-r) + var(--binge-clock-w, 0px) + 20px);
  height: var(--top-line-h);
  display: flex;
  align-items: center;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The tip stands 10px left of the ring; the tip is the child that can be hidden, so it carries the
   space on its right and the ring, always last, carries none. */
#hudBinge > * {
  margin-right: 10px;
}
#hudBinge > :last-child {
  margin-right: 0;
}
.binge-ring {
  width: 28px;
  height: 28px;
  flex: none;
  transform: rotate(-90deg);
}
.binge-ring circle {
  fill: none;
  stroke-width: 3;
}
.binge-ring-track {
  stroke: var(--track);
}
.binge-ring-arc {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 81.68;
  stroke-dashoffset: var(--binge-offset, 81.68);
  transition: stroke-dashoffset 400ms ease;
}
/* The tooltip: a tail on the left of the ring, the span in a bubble on the
   panel ground, its tail on its right edge pointing at the ring; muted ink for a milestone's moment,
   the text ink once it stays (under 30 minutes). */
.binge-tip {
  position: relative;
  padding: 6px 10px;
  background: var(--panel);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.binge-tip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
#hudBinge.persistent {
  color: var(--text);
}