/* Copyright Ayers Electronics Inc. All rights reserved. */
/* Coming up next overlay. */

/* ---- "Coming up next" overlay ----
   Anchored lower-left at the standard page margin (§3.1). Width/height fractions are NOT literals here: js/up-next.js's OVERLAY_GEOMETRY is the
   one place those numbers live (§3.2 point 3) and applies them as inline styles at boot, so this
   stylesheet only owns structure, typography-role sizing, and the translateY/opacity motion §4
   specifies - no numeric ceiling to keep in sync with the JS law by hand. */
#upnext {
  position: absolute;
  left: var(--page-margin);
  right: var(--page-margin);
  bottom: var(--page-margin-vertical);
  z-index: 8; /* above the watermark (5), below #hud (10) -
    the interactive banner always wins outright (§3.1), though js/up-next.js's own gate already
    keeps the two from being open together; this is belt-and-suspenders, not the enforcement. */
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
.upnext-panel {
  opacity: 0;
  transition:
    opacity var(--upnext-outro-ms, 250ms) ease-out,
    transform var(--upnext-outro-ms, 250ms) ease-out;
}
.upnext-panel.open {
  opacity: 1;
  transition-duration: var(--upnext-intro-ms, 250ms);
}
/* Lower Third and Card slide up from below the safe-area's bottom edge (§4.1/§4.3); the Ticker
   only fades in place, already flush to the edge (§4.2) - never scale, never a spring overshoot
   (§4's own motion vocabulary). css/base.css's reduced-motion guard collapses every duration above
   to near-zero on its own; js/up-next.js additionally skips the wait for "in" under that same
   preference so the state machine does not sit idle waiting on a transition that never plays. */
.upnext-lowerthird,
.upnext-card {
  transform: translateY(120%);
}
.upnext-lowerthird.open,
.upnext-card.open {
  transform: translateY(0);
}

/* Lower Third: a scrim reusing the "read, not seen through" feather idiom (#hud/#xray above) at
   this element's own smaller footprint - built from --scrim/--on-scrim rather than a copied rgba
   ramp, since a hardcoded hex here is a hex a future re-theme cannot reach (§3.1). */
/* Three rows, in the ruled order: kicker (the resolved template, small tracked caps), title, meta
   ("time · channel"). The row heights sum to 8 + 12 + 2 + 18 + 2 + 14 + 8 = 64, so three lines fit
   the 15% ceiling at the reference canvas (OverlayTextOrderDriftTests pins these numbers). */
/* The look ("glass + accent hairline"): frosted dark glass -
   the brand dark at 72% behind a 12px backdrop blur, or the scrim at ~85% where blur is missing -
   with a 3px hairline in the brand green (--accent = tokens.json body.light) on the panel's left
   edge and the panel radius. The kicker is the warm accent (--accent-warm = accent.warm). */
.upnext-lowerthird {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--scrim-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 16px;
}
.upnext-lowerthird > * + * {
  margin-top: 2px;
}
@supports not (backdrop-filter: blur(1px)) {
  .upnext-panel {
    background: rgba(11, 11, 13, 0.85);
  }
}
.upnext-kicker {
  font-size: var(--type-micro);
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* type.micro, tracked caps */
}
.upnext-lowerthird .upnext-kicker {
  line-height: 12px;
}
.upnext-lowerthird .upnext-title {
  font-size: var(--type-body);
  line-height: 18px;
  font-weight: 600;
  color: var(--on-panel); /* type.body */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upnext-lowerthird .upnext-meta {
  font-size: var(--type-label);
  line-height: 14px;
  color: var(--on-panel-variant); /* type.label */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ticker: full safe-area width, flat and denser rather than feathered - there is no picture to
   dissolve into behind a full-width band the way there is behind Lower Third's floating panel
   (§4.2). Opacity-only motion, no translateY (already flush to the edge). */
.upnext-ticker {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--scrim-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 20px;
}
.upnext-ticker .upnext-tickertext {
  font-size: var(--type-label);
  color: var(--on-scrim);
  width: 100%; /* type.label */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card: opaque (panel/onPanel tokens, not a translucent scrim - §4.3), poster-forward at the
   on-demand card's own 16:9 "wide" ratio (on-demand.css .card.wide .card-art) rather than the default 2:3 -
   a portrait poster at 20% screen width over live video reads as too tall for a passive notice.
   HORIZONTAL layout: thumbnail left, text right (§4.3) - the card shares BOTH of Lower Third's ceilings (js/up-next.js's
   CARD_MAX_WIDTH_FRACTION/CARD_MAX_HEIGHT_FRACTION, 0.34/0.15) rather than a wider ceiling of its
   own, so the thumbnail is sized FROM the height cap (js/up-next.js sets `height`, not `max-height`,
   on this element) instead of from a separate width fraction - a fixed-width poster stacked above
   text at 20% of width would break the 15% height cap before any text existed. */
.upnext-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--scrim-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.upnext-card .upnext-poster {
  height: 100%;
  width: auto;
  flex: none; /* width follows from height via the aspect-ratio
    js/up-next.js sets - CardPosterWidth = CardPosterHeight * CardPosterAspectRatio, one source */
  object-fit: cover;
  background: var(--elevated);
  display: block;
  border-radius: var(--radius); /* the thumbnail rounds like the panel it sits in */
}
.upnext-card .upnext-cardtext {
  padding: 6px 10px;
  min-width: 0; /* min-width:0 - a flex child's default content-based minimum
    would otherwise refuse to shrink below its longest line and defeat the title's own ellipsis */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* kicker 12 + title 18 + meta 12 + the two 2px steps + padding 12 = 58 */
}
.upnext-card .upnext-cardtext > * + * {
  margin-top: 2px;
}
.upnext-card .upnext-title {
  font-size: var(--type-body);
  line-height: 18px;
  font-weight: 600;
  color: var(--on-panel); /* type.body */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upnext-card .upnext-meta {
  font-size: var(--type-micro);
  line-height: 12px;
  color: var(--on-panel-variant); /* type.micro */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}