/* ============================================================================
 * Teleprompter overlay — Tier 3c
 *
 * Full-screen reading surface the speech writer launches from the speech
 * stats panel. Renders the current chapter in performance typography,
 * scrolls via WPM autoscroll or manual jog, and supports
 * rehearse / perform / mirror states. The visual is derived
 * from the Round 3 mockup set at
 * `/Desktop/mockups/speech-writing/tier3c-r3-teleprompter/`.
 *
 * All colors come from theme variables, mostly the teleprompter palette
 * added at the bottom of themes.css (`--voice`, `--override`, `--pickup`,
 * `--on-pace`, `--alert`). The mockup uses pure-black backgrounds to
 * reflect real-world performance gear; in production we use the CivNode
 * bg-primary so the view follows the active theme. The body background
 * is locked to a very dark surface when the overlay is active so the
 * script never bleeds through the host page.
 * ============================================================================ */

.teleprompter-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
  font-feature-settings: "ss01", "cv11";
}

.teleprompter-overlay.mode-perform {
  /* Perform mode dims the host background to near-black regardless of
     theme so the chrome gets out of the speaker's way. */
  background: color-mix(in srgb, var(--bg-primary) 92%, #000 8%);
}

.teleprompter-overlay .stage {
  position: relative;
  height: 100vh;
}

/* ========== Top HUD ========== */

.teleprompter-overlay .top-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  display: flex;
  align-items: center;
  padding: 0 26px;
  gap: 22px;
  font-size: 11px;
  color: var(--text-secondary);
  z-index: 4;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: opacity 240ms ease, background 240ms ease, height 240ms ease;
}

.teleprompter-overlay .top-hud .title {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.teleprompter-overlay.mode-perform .top-hud .title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.teleprompter-overlay .top-hud .tag {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  letter-spacing: 0.18em;
  font-size: 10px;
}

.teleprompter-overlay .top-hud .spacer {
  flex: 1;
}

.teleprompter-overlay .elapsed-center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.teleprompter-overlay.mode-perform .elapsed-center .e-val {
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.teleprompter-overlay.mode-perform .elapsed-center .e-sub {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 2px;
}

.teleprompter-overlay.mode-rehearse .elapsed-center {
  display: none;
}

.teleprompter-overlay.mode-perform .top-hud {
  background: transparent;
  border-bottom: none;
  height: 64px;
  padding: 0 30px;
}

.teleprompter-overlay.mode-perform .top-hud .tag {
  display: none;
}

/* ========== Reading line ========== */

.teleprompter-overlay .reading-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 25vh;
  height: 2px;
  background: var(--override);
  box-shadow: 0 0 22px 2px var(--override-bg);
  z-index: 2;
  pointer-events: none;
  transition: background 240ms ease, box-shadow 240ms ease;
}

.teleprompter-overlay .reading-line::before,
.teleprompter-overlay .reading-line::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.teleprompter-overlay .reading-line::before {
  left: 10px;
  border-left: 12px solid var(--override);
}

.teleprompter-overlay .reading-line::after {
  right: 10px;
  border-right: 12px solid var(--override);
}

.teleprompter-overlay.mode-perform .reading-line {
  border-top: 1px dashed var(--voice-soft);
  background: transparent;
  box-shadow: none;
  height: 0;
}

.teleprompter-overlay.mode-perform .reading-line::before,
.teleprompter-overlay.mode-perform .reading-line::after {
  display: none;
}

/* ========== Script viewport + paragraphs ========== */

.teleprompter-overlay .script-viewport {
  position: absolute;
  top: 44px;
  bottom: 94px;
  left: 0;
  right: 0;
  padding: 20px 9vw 0;
  overflow: hidden;
}

.teleprompter-overlay.mode-perform .script-viewport {
  top: 64px;
  bottom: 0;
  padding: 20px 8vw 0;
}

.teleprompter-overlay .script {
  font-size: 66px;
  line-height: 1.26;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: font-size 240ms ease, font-weight 240ms ease, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.teleprompter-overlay.mode-perform .script {
  font-size: 70px;
  font-weight: 400;
}

.teleprompter-overlay .script p {
  margin: 0 0 0.42em 0;
  max-width: 22ch;
  transition: color 350ms ease, opacity 350ms ease, font-weight 250ms ease;
}

.teleprompter-overlay .script .spent {
  color: color-mix(in srgb, var(--text-primary) 18%, transparent);
  font-weight: 400;
}

.teleprompter-overlay .script .active {
  color: var(--text-primary);
  font-weight: 600;
}

.teleprompter-overlay.mode-perform .script .active {
  font-weight: 400;
  border-bottom: 2px solid var(--voice-soft);
  padding-bottom: 0.08em;
  background: transparent;
}

.teleprompter-overlay.mode-rehearse .script .active {
  text-shadow: 0 0 28px var(--voice-bg);
}

.teleprompter-overlay .script .upcoming {
  color: var(--text-primary);
}

.teleprompter-overlay .pickup {
  color: var(--pickup);
  font-weight: 700;
}

.teleprompter-overlay.mode-perform .pickup {
  font-weight: 600;
}

/* Inline stage-cue pills (Tier 3b markers rendered in perf typography) */
.teleprompter-overlay .cue {
  display: inline-block;
  font-size: 0.34em;
  color: var(--voice-soft);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.32em 0.92em;
  border: 1px solid var(--voice-soft);
  border-radius: 3px;
  margin: 0.5em 0;
  font-weight: 500;
  vertical-align: middle;
}

.teleprompter-overlay .cue.sc-pause,
.teleprompter-overlay .cue.sc-beat {
  color: var(--text-secondary);
  border-color: var(--border);
}

.teleprompter-overlay .cue.sc-applause {
  color: var(--voice);
  border-color: var(--voice);
  background: var(--voice-bg);
}

.teleprompter-overlay .cue.sc-stage {
  color: var(--override-soft);
  border-color: var(--override-soft);
}

.teleprompter-overlay .cue.sc-media {
  color: var(--pickup);
  border-color: var(--pickup);
}

/* Speaker-note marginalia — visible but not counted toward delivery */
.teleprompter-overlay .note {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.34em;
  color: color-mix(in srgb, var(--text-primary) 42%, transparent);
  margin: 0.5em 0;
  max-width: 26ch;
  padding-left: 16px;
  position: relative;
  font-weight: 400;
}

.teleprompter-overlay .note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: color-mix(in srgb, var(--text-primary) 42%, transparent);
}

/* ========== Bottom HUD (Rehearse) ========== */

.teleprompter-overlay .hud {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 94px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg-primary) 98%, transparent),
    color-mix(in srgb, var(--bg-primary) 78%, transparent) 70%,
    transparent
  );
  display: flex;
  flex-direction: column;
  z-index: 4;
  border-top: 1px solid var(--border);
  transition: opacity 240ms ease, transform 240ms ease;
}

.teleprompter-overlay.mode-perform .hud {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.teleprompter-overlay .hud-row {
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 18px;
}

.teleprompter-overlay .hud-row.top {
  height: 56px;
  border-bottom: 1px solid var(--border);
}

.teleprompter-overlay .hud-row.bottom {
  height: 38px;
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.teleprompter-overlay .mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.teleprompter-overlay .mode-btn {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  font-family: var(--font-sans);
}

.teleprompter-overlay .mode-btn:last-child {
  border-right: none;
}

.teleprompter-overlay .mode-btn.active[data-mode="wpm"] {
  color: var(--override);
  background: var(--override-bg);
}

.teleprompter-overlay .mode-btn.active[data-mode="manual"] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.teleprompter-overlay .mode-btn.active[data-mode="manual"] {
  color: var(--override);
  background: var(--override-bg);
}

.teleprompter-overlay .tp-btn {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border);
  color: var(--text-primary);
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
}

.teleprompter-overlay .tp-btn.override-primary {
  background: var(--override);
  color: var(--bg-primary);
  border-color: var(--override);
  min-width: 74px;
}

.teleprompter-overlay .hud-divider {
  width: 1px;
  height: 38px;
  background: var(--border);
}

.teleprompter-overlay .wpm-block {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 400px;
}

.teleprompter-overlay .wpm-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-secondary);
}

.teleprompter-overlay .wpm-presets {
  display: flex;
  gap: 4px;
}

.teleprompter-overlay .wpm-pre {
  padding: 6px 10px;
  font-size: 11px;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.teleprompter-overlay .wpm-pre.current {
  color: var(--override);
  border-color: var(--override);
  background: var(--override-bg);
}

.teleprompter-overlay .timer {
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}

.teleprompter-overlay .timer .elapsed {
  font-size: 22px;
  color: var(--text-primary);
  font-weight: 300;
  display: block;
}

.teleprompter-overlay .timer .remaining {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.teleprompter-overlay .key {
  display: inline-block;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: "SF Mono", Monaco, Menlo, monospace;
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.teleprompter-overlay .hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.teleprompter-overlay .hint-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
}

/* ========== Perform-mode menu ========== */

.teleprompter-overlay .menu-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  cursor: pointer;
  margin-left: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.teleprompter-overlay .menu-btn span {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--text-secondary);
  border-radius: 50%;
}

.teleprompter-overlay .menu-panel {
  position: absolute;
  top: 56px;
  right: 30px;
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  min-width: 290px;
  backdrop-filter: blur(10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 11px;
}

.teleprompter-overlay .menu-panel[hidden] {
  display: none;
}

.teleprompter-overlay .menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 500;
}

.teleprompter-overlay .menu-divider {
  height: 1px;
  background: var(--border);
}

.teleprompter-overlay .menu-row .seg {
  display: flex;
  gap: 4px;
}

.teleprompter-overlay .menu-row .seg button {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.teleprompter-overlay .menu-row .seg button.active {
  color: var(--voice);
  border-color: var(--voice);
  background: var(--voice-bg);
}

.teleprompter-overlay .menu-row .seg button.override-active {
  color: var(--override);
  border-color: var(--override);
  background: var(--override-bg);
}

/* ========== Pace hint (Perform mode floating chip) ========== */

.teleprompter-overlay .pace-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  backdrop-filter: blur(6px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 240ms ease;
}

.teleprompter-overlay.mode-perform .pace-hint {
  opacity: 1;
}

.teleprompter-overlay .pace-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--on-pace);
  border-radius: 50%;
}

/* ========== Mirror mode ========== */

.teleprompter-overlay.mirror .script-viewport {
  transform: scaleX(-1);
  transform-origin: center;
}

.teleprompter-overlay .mirror-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 4;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--override);
  padding: 7px 14px;
  border: 1px solid var(--override);
  background: var(--override-bg);
  border-radius: 18px;
  font-weight: 600;
}

.teleprompter-overlay .mirror-badge[hidden] {
  display: none;
}

/* ========== Countdown pre-roll ========== */

.teleprompter-overlay .countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  z-index: 6;
  font-family: var(--font-serif);
  font-size: 22vh;
  font-weight: 300;
  color: var(--override);
  text-shadow: 0 0 80px var(--override-bg);
  font-variant-numeric: tabular-nums;
}

.teleprompter-overlay .countdown[hidden] {
  display: none;
}

/* Voice mode — mic status pill */
.teleprompter-overlay .mic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--override);
  background: color-mix(in srgb, var(--override) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--override) 30%, transparent);
}
.teleprompter-overlay .mic-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success, #4a8);
  animation: mic-pulse 1.5s ease infinite;
}
.teleprompter-overlay .mic-pill[hidden] { display: none; }

@keyframes mic-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Off-script banner */
.teleprompter-overlay .off-script-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.6rem 1.5rem;
  background: color-mix(in srgb, var(--danger, #c44) 20%, var(--override-bg));
  color: var(--override);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 10;
  border-bottom: 1px solid color-mix(in srgb, var(--danger, #c44) 40%, transparent);
}
.teleprompter-overlay .off-script-banner[hidden] { display: none; }
/* Word-level voice highlight */
.teleprompter-overlay .word {
  transition: color 150ms ease, text-shadow 150ms ease;
}
.teleprompter-overlay .word-active {
  color: var(--accent, #c9a84c);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent, #c9a84c) 40%, transparent);
}

.off-script-wpm-link {
  background: none;
  border: none;
  color: var(--override);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  padding: 0;
}