/* Presenter — the operator's panel, the projector wall and a stage monitor
   that runs (see presenter.js). Every rule is scoped to .pm-* or to the one
   .mock-frame that holds the .stage; only transform and opacity move. */

.pm-frame, .pm-top { --pm-h: 96px; --pm-gap: 12px; --pm-pad: 16px; }
@media (min-width: 768px) {
  .pm-frame, .pm-top { --pm-h: 132px; --pm-gap: 20px; --pm-pad: 32px; }
}

/* Room for the panel + wall row, reserved from the first paint (the row is
   placed absolutely inside it), so adding it moves nothing. `scripting`
   keeps a script-less page from getting an empty band; .pm-frame is the
   fallback for browsers without :has(). */
@media (scripting: enabled) {
  .mock-frame:has(> .stage) { position: relative; padding-top: calc(16px + 96px + 12px); }
}
@media (scripting: enabled) and (min-width: 768px) {
  .mock-frame:has(> .stage) { padding-top: calc(32px + 132px + 20px); }
}
.mock-frame.pm-frame { position: relative; padding-top: calc(var(--pm-pad) + var(--pm-h) + var(--pm-gap)); }

.pm-top {
  position: absolute; top: var(--pm-pad); inset-inline: var(--pm-pad);
  height: var(--pm-h); display: flex; gap: 12px;
}

/* ---------- the operator's panel ---------- */
.pm-panel {
  flex: 1; min-width: 0; padding: 8px; border-radius: var(--radius-lg);
  background: #fff; box-shadow: inset 0 0 0 1px var(--gray-200), var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.pm-title {
  font-size: 11px; line-height: 14px; font-weight: 600; color: var(--gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-list { position: relative; display: grid; gap: 3px; }
.pm-row {
  position: relative; display: flex; align-items: center; gap: 6px; height: 18px; padding-inline: 4px;
  font-size: 10px; line-height: 14px; color: var(--gray-600); min-width: 0;
}
.pm-num {
  flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px;
  background: var(--gray-100); color: var(--gray-700); font-weight: 600; font-size: 9px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pm-row-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-bar { height: 6px; width: 58%; border-radius: 3px; background: var(--gray-200); }
.pm-sel {
  position: absolute; top: 0; inset-inline: 0; height: 18px; border-radius: 5px;
  background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200);
  transition: transform 460ms var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
}
.pm-sel::before {
  content: ""; position: absolute; inset-block: 3px; inset-inline-start: 0; width: 2px;
  border-radius: 2px; background: var(--brand-600);
}
.pm-still, .pm-still.pm-hl { transition: none !important; }

@media (min-width: 768px) {
  .pm-panel { padding: 12px; gap: 8px; }
  .pm-title { font-size: 13px; line-height: 18px; }
  .pm-list { gap: 4px; }
  .pm-row, .pm-sel { height: 24px; }
  .pm-row { font-size: 12px; gap: 8px; padding-inline: 6px; }
  .pm-num { width: 18px; height: 18px; font-size: 11px; }
}

/* ---------- the projector wall ---------- */
.pm-wall {
  position: relative; flex: none; height: 100%; width: calc(var(--pm-h) * 16 / 9);
  border-radius: var(--radius-md); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #1D3A6E 0%, #0F1D38 55%, var(--gray-950) 100%);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), var(--shadow-lg);
}
.pm-wdeck { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px 10px; }
.pm-wslide {
  grid-area: 1 / 1; text-align: center; color: #fff; font-weight: 600;
  font-size: calc(var(--pm-h) * 0.104); line-height: 1.25; letter-spacing: -0.005em;
  text-wrap: balance;
}
.pm-wslide p + p { margin-top: 2px; }

/* ---------- the stage monitor ---------- */
.pm-stage { position: relative; }
.stage .pm-chart { position: relative; display: grid; }
.pm-slide { grid-area: 1 / 1; position: relative; z-index: 1; }
.pm-slide > .ln:last-child { margin-bottom: 0; }

/* Slide change: the old lines lift away fast, the new ones rise in a beat
   later, one after the other (the wall does the same, in step). */
.stage .pm-slide > .ln, .pm-wslide {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.stage .pm-slide:not(.is-on) > .ln, .pm-wslide:not(.is-on) { opacity: 0; transform: translateY(-6px); }
.stage .pm-slide.pm-pre > .ln, .pm-wslide.pm-pre { transform: translateY(8px); transition: none; }
.stage .pm-slide.is-on > .ln, .pm-wslide.is-on {
  opacity: 1; transform: none; transition-duration: 480ms; transition-delay: 120ms;
}
.stage .pm-slide.is-on > .ln + .ln { transition-delay: 180ms; }

/* The "now" line: a soft blue band with a bar at the reading start, sliding
   from line to line under the chords. */
.pm-hl {
  position: absolute; top: 0; inset-inline: -6px; height: 50px; z-index: 0;
  border-radius: 6px; background: rgba(46, 144, 250, .16);
  transform-origin: 50% 0; opacity: 0; pointer-events: none;
  transition: transform 520ms var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)), opacity 300ms var(--ease-out);
}
.pm-hl::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  border-radius: 3px; background: var(--brand-400);
}
.pm-hl.is-on { opacity: 1; }

/* One ring on both screens when the slide changes: the same click. */
.pm-flash {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--brand-400), inset 0 0 24px rgba(46, 144, 250, .18);
}
.pm-wall .pm-flash { z-index: 1; }

/* Countdown digits roll one by one; tabular so nothing jiggles. */
.stage-next .pm-dig { display: inline-block; }
.pm-stage .stage-timer .pm-d, .pm-stage .stage-timer .pm-col { position: relative; display: inline-block; vertical-align: top; }
.pm-stage .stage-timer .pm-d { overflow: hidden; }
.pm-stage .stage-timer .pm-di { display: inline-block; }
.pm-stage .stage-timer .pm-out { position: absolute; inset-block-start: 0; inset-inline-start: 0; }
/* Split into boxes, the digits would gain wrap points between them. */
.pm-stage .stage-timer, .pm-verse { white-space: nowrap; }
.pm-stage .stage-timer { transition: opacity 200ms ease; }
.pm-stage .stage-timer.pm-dim { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pm-sel, .pm-hl, .stage .pm-slide > .ln, .pm-wslide, .pm-stage .stage-timer { transition: none !important; }
}