/*
 * Running-commentary captions (/shared/commentary-overlay.css)
 *
 * ONE stylesheet for the caption rows that src/viewer/commentary-overlay.ts
 * builds, linked by the two pages that draw them:
 * - the display client (display/index.html), over the live feed — these rules
 *   used to live inline there, and its values are the defaults below;
 * - Scene Studio (demo/index.html), whose Captions & Sound tab draws sample
 *   lines over its viewer (demo/styles.css `.caption-preview`), so a captions
 *   document is seen the way a station draws it.
 *
 * Layout state is on the overlay element, not the page body:
 * `.commentary-pos-right` (the right column; the bottom strip is the default),
 * `.commentary-spoken-track` (the spoken track is on) and `.commentary-on-stage`
 * (the rows ARE the stage — a commentary station). A host keeps its own
 * show/hide rules (the display's boot curtain and `commentary-hidden`).
 *
 * Where the overlay anchors is a host's choice, through custom properties whose
 * defaults are the display's: fixed to the window, 18 px up from the bottom, or
 * 84 px down and 16 px in on the right. Studio anchors it inside its stage.
 *
 * Served at /shared/commentary-overlay.css (prepare-public copies shared/ into
 * public/; the local dev servers serve the repo root directly).
 */

/* A centered lower-third narration feed (newest on top), clear of the
   display's left-side HUD. */
.commentary-overlay {
  position: var(--commentary-overlay-position, fixed);
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--commentary-overlay-inset-bottom, 18px);
  z-index: var(--commentary-overlay-z-index, 8);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--commentary-overlay-bottom-max-width, min(680px, 60vw));
  pointer-events: none;
  text-align: center;
  /* The display's type, so a host with its own (Studio) draws the same rows. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.commentary-overlay .commentary-line {
  background: var(--panel, rgba(16, 21, 29, 0.88));
  border: 1px solid var(--line, rgba(151, 163, 184, 0.26));
  /* Leading stripe encodes the level of detail (see per-level rules below). */
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  padding: 7px 11px;
  color: var(--text, #edf2f7);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  /* The gap between cards, as a COLLAPSIBLE margin (not flex `gap`), so a
     retiring card can shrink it to nothing on its way out. */
  margin-bottom: 6px;
  /* Slow, readable card motion (animateCommentaryIn/Out in
     src/viewer/commentary-overlay.ts): the height + margin collapse animate
     the stack reflow so nothing pops; opacity carries the entrance and the age
     fade. Keep 700ms in sync with COMMENTARY_ANIM_MS. */
  transition:
    height 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 700ms ease,
    margin-bottom 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.commentary-overlay .commentary-time {
  color: var(--muted, #9aa8ba);
  font-variant-numeric: tabular-nums;
  margin-inline-end: 8px;
  font-size: 13px;
  opacity: 0.9;
}
/* SCOPE (text colour): the environment's whole-ensemble voice reads blue +
   italic; the Beam's own voice (it arbitrates control) reads teal + italic;
   a specific mobile reads white. */
/* Scope colours come from src/simulation/commentary/scope.ts, mirrored into
   these custom properties at the display's boot, so the clip editor's timeline
   ticks and these bubbles cannot drift apart. The fallbacks match that module. */
.commentary-overlay .commentary-line[data-scope="environment"] {
  color: var(--commentary-scope-environment, #5aa8ff);
  font-style: italic;
}
.commentary-overlay .commentary-line[data-scope="beam"] {
  color: var(--commentary-scope-beam, #4fc9c9);
  font-style: italic;
}
.commentary-overlay .commentary-line[data-scope="agent"] {
  color: var(--commentary-scope-agent, #e8eef7);
}
/* LEVEL of detail (leading stripe): L0 ambient (amber) → L1 highlights
   (slate) → L2 play-by-play colour beats (faint). */
.commentary-overlay .commentary-line[data-level="0"] { border-inline-start-color: #e0b341; }
.commentary-overlay .commentary-line[data-level="1"] { border-inline-start-color: #7f93ad; }
.commentary-overlay .commentary-line[data-level="2"] { border-inline-start-color: #46536a; }
.commentary-overlay .commentary-line[dir="rtl"] { text-align: right; }
/* Age fade: the newest line (top) is full; older lines are progressively
   dimmer, so as each new line pushes the stack down the older ones fade out
   (the opacity transition above makes the step smooth, not abrupt). */
.commentary-overlay .commentary-line:nth-child(2) { opacity: 0.82; }
.commentary-overlay .commentary-line:nth-child(3) { opacity: 0.58; }
.commentary-overlay .commentary-line:nth-child(4) { opacity: 0.4; }
.commentary-overlay .commentary-line:nth-child(n+5) { opacity: 0.26; }
/* Motion-sensitive visitors: no card transitions (JS also skips the anim). */
@media (prefers-reduced-motion: reduce) {
  .commentary-overlay .commentary-line { transition: none; }
}
/* Spoken track active: the caption reads white + a touch heavier (overrides
   the per-scope text colours while narration is playing). */
.commentary-overlay.commentary-spoken-track .commentary-line {
  color: #ffffff;
  font-weight: 600;
}
/* Right-column layout: a left-justified stack down the right edge, top-anchored.
   Show more lines here than the bottom strip affords. */
.commentary-overlay.commentary-pos-right {
  left: auto;
  right: var(--commentary-overlay-inset-side, 16px);
  top: var(--commentary-overlay-inset-top, 84px);
  bottom: auto;
  transform: none;
  align-items: flex-start;
  text-align: left;
  max-width: var(--commentary-overlay-right-max-width, min(340px, 30vw));
}
.commentary-overlay.commentary-pos-right .commentary-line { width: 100%; text-align: start; }

/* The caption STAGE (a commentary station, stageKind "commentary" —
   src/viewer/commentary-overlay.ts setCommentaryOverlayStage): the rows are the
   whole picture, so the same rows are drawn to be read across a room. The
   position still decides the layout and the line count: the bottom strip is a
   centred stack at the stage's foot, the right column a full-width column from
   the top. The host anchors them with the custom properties above (the
   display: between its heading and its foot band) and may cap the height
   (--commentary-overlay-max-height); the oldest rows clip at the foot. */
.commentary-overlay.commentary-on-stage {
  --commentary-stage-type: clamp(20px, 4.2vmin, 64px);
  left: var(--commentary-overlay-inset-side, 16px);
  right: var(--commentary-overlay-inset-side, 16px);
  transform: none;
  max-width: none;
  max-height: var(--commentary-overlay-max-height, none);
  overflow: hidden;
}
.commentary-overlay.commentary-on-stage .commentary-line {
  font-size: var(--commentary-stage-type);
  line-height: 1.3;
  padding: 0.38em 0.7em;
  border-radius: 0.32em;
  border-inline-start-width: 0.18em;
  margin-bottom: 0.32em;
}
.commentary-overlay.commentary-on-stage .commentary-time {
  font-size: 0.58em;
  margin-inline-end: 0.8em;
  vertical-align: 0.12em;
}
.commentary-overlay.commentary-on-stage.commentary-pos-right {
  left: var(--commentary-overlay-inset-side, 16px);
  right: var(--commentary-overlay-inset-side, 16px);
  max-width: none;
  align-items: stretch;
}