/* The website's teleprompter (/teleprompter): a copy of the studio's (see
   "Teleprompter" in ultra.css) sitting in the page instead of floating over
   the studio, with the same look — dark glass, the reading line a third of
   the way down, − / + for speed and size, the ultramodern switch. */
.tp-lead { max-width: 640px; margin: 14px auto 0; font-size: 17px; line-height: 1.6; color: var(--text-dim); }
.tp-private { margin: 12px auto 0; max-width: 980px; text-align: center; font-size: 13px; color: var(--text-dim); }

.prompter { position: relative; display: flex; flex-direction: column; overflow: hidden; max-width: 980px; height: min(560px, 72vh); min-height: 340px; margin: 0 auto; border-radius: 22px; background: rgba(9, 11, 16, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px -20px rgba(8, 20, 70, 0.55); color: #eceef4; font-family: 'Plus Jakarta Sans', sans-serif; outline: none; resize: vertical; --line-y: 34%; --fg-rgb: 255, 255, 255; }
.prompter:fullscreen { max-width: none; height: 100vh; border-radius: 0; resize: none; }
.prompter .ui-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prompter-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.prompter-view { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 40px; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.4) 26%, #000 32%, #000 78%, rgba(0, 0, 0, 0.45) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.4) 26%, #000 32%, #000 78%, rgba(0, 0, 0, 0.45) 100%); scrollbar-width: none; }
.prompter-view::-webkit-scrollbar { display: none; }
.prompter-view.mirror { transform: scaleX(-1); }
.prompter-text { white-space: normal; line-height: 1.35; font-weight: 700; letter-spacing: -0.005em; color: #eceef4; }
.prompter-text p { margin: 0 0 0.25em; color: inherit; font-size: inherit; line-height: inherit; }
.prompter-text .pt-gap { height: 0.6em; }
.prompter-text .pt-head { font-size: 0.5em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9fc0ff; margin: 0.6em 0 0.3em; }
.prompter-text .pt-cue { color: #f4c95d; font-size: 0.7em; }
.prompter-text .pt-empty { color: #8d94a7; font-size: 0.7em; font-weight: 600; }
.prompter-line { position: absolute; left: 0; right: 0; top: calc(var(--line-y) - 0.2em); height: 1.5em; pointer-events: none; border-top: 1px solid rgba(var(--accent-rgb), 0.45); border-bottom: 1px solid rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.12); font-size: var(--pt-size, 34px); }
.prompter-line::before { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 11px solid var(--accent); }
.prompter-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 96px; font-weight: 800; color: #ffffff; background: rgba(9, 11, 16, 0.55); }
.prompter-count[hidden] { display: none; }
.prompter-editor { flex: 1; resize: none; margin: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; outline: none; background: rgba(0, 0, 0, 0.35); color: #fff; font: 16px/1.55 'Plus Jakarta Sans', sans-serif; }
.prompter-editor:focus { border-color: rgba(var(--accent-rgb), 0.6); }
.prompter-progress { height: 3px; background: rgba(255, 255, 255, 0.08); flex: none; }
.prompter-progress i { display: block; height: 3px; width: 0; background: var(--accent); transition: width 0.2s linear; }
.prompter-jump { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; flex: none; }
.prompter-jump[hidden] { display: none; }
.prompter-jump button { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #c9cdd8; font: 600 11.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.prompter-jump button:hover { border-color: var(--accent); color: #ffffff; }
.prompter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 12px 11px; flex: none; }
.prompter-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: #ffffff; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), 0.8); }
.prompter-play .ui-ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.prompter-pill { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.prompter-pill-val { min-width: 76px; text-align: center; font-size: 12px; font-weight: 700; color: #c9cdd8; }
.prompter-pill-val b { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #ffffff; }
.prompter-btn { width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.07); color: #eceef4; display: inline-grid; place-items: center; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; }
.prompter-btn:hover { background: rgba(255, 255, 255, 0.14); }
.prompter-btn.active { background: var(--accent); color: #ffffff; }
.prompter-btn:disabled { opacity: .35; cursor: default; background: rgba(255, 255, 255, 0.07); }
.prompter-a-small { font-size: 12px; font-weight: 700; }
.prompter-a-big { font-size: 17px; font-weight: 800; }
.prompter-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: #c9cdd8; font: 700 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.prompter-chip .ui-ic { width: 15px; height: 15px; }
.prompter-chip.active { background: rgba(var(--accent-rgb), 0.22); border-color: rgba(var(--accent-rgb), 0.7); color: #ffffff; }
.prompter-left { margin-left: auto; font: 600 12px 'JetBrains Mono', ui-monospace, monospace; color: #9aa1b2; white-space: nowrap; }
.prompter-settings { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.prompter-settings[hidden] { display: none; }
.prompter-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; padding-top: 8px; cursor: pointer; color: #eceef4; }
.prompter-keys { margin: 4px 0 0; font: 500 11px 'JetBrains Mono', ui-monospace, monospace; color: #8d94a7; }
@media (max-width: 700px) {
  .prompter { border-radius: 16px; }
  .prompter-view { padding: 0 18px; }
  .prompter-controls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .prompter-controls::-webkit-scrollbar { display: none; }
  .prompter-pill-val { min-width: 64px; }
}

/* The ultramodern switch, as in the studio (see ultra.css). */
.prompter .switch { position: relative; width: 50px; height: 28px; flex-shrink: 0; }
.prompter .switch input { opacity: 0; width: 0; height: 0; }
.prompter .switch .slider { position: absolute; inset: 0; border-radius: 999px; border: 1px solid rgba(var(--fg-rgb), 0.16); background: linear-gradient(180deg, rgba(var(--fg-rgb), 0.20), rgba(var(--fg-rgb), 0.12)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; cursor: pointer; }
.prompter .switch .slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), width .18s ease; }
.prompter .switch .slider::after { content: ""; position: absolute; left: 9px; top: 9px; width: 8px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) scale(0.4); opacity: 0; transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.prompter .switch input:checked + .slider { background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent))); border-color: transparent; box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.prompter .switch input:checked + .slider::before { transform: translateX(22px); }
.prompter .switch input:checked + .slider::after { transform: translateX(22px) rotate(-45deg) scale(1); opacity: 1; }
.prompter .switch:active .slider::before { width: 26px; }
.prompter .switch input:checked:active + .slider::before { transform: translateX(18px); }
.prompter .switch input:focus-visible + .slider { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: 2px; }

/* How to use it. */
.tp-how h2 { text-align: center; margin: 0 0 22px; }
.tp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
.tp-step { padding: 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.tp-step b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; }
.tp-step h3 { margin: 12px 0 6px; font-size: 17px; }
.tp-step p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.tp-tips { max-width: 980px; margin: 20px auto 0; padding-left: 20px; color: var(--text-dim); font-size: 14.5px; line-height: 1.7; }
@media (max-width: 760px) { .tp-steps { grid-template-columns: 1fr; } }

/* Notes: more than one set of words, as tabs along the top (2026-11-01, the
   user's "Make the teleprompter able to add another notes or field"; prompterdocs.js). */
.prompter-docs { flex: none; padding: 10px 12px 0; }
.pd-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab { display: inline-flex; align-items: center; flex: none; height: 30px; padding: 0 4px 0 2px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #c9cdd8; }
.pd-tab.active { background: rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.65); color: #fff; }
.pd-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; border: 0; background: none; color: inherit; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.pd-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; opacity: .55; font-size: 15px; line-height: 1; cursor: pointer; }
.pd-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.pd-add { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px dashed rgba(255, 255, 255, 0.25); background: none; color: #eceef4; font-size: 15px; cursor: pointer; }
.pd-add:hover { border-color: var(--accent); color: #fff; background: rgba(var(--accent-rgb), 0.15); }
.pd-rename { width: 140px; height: 24px; margin: 0 4px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--accent); background: #0c0f1a; color: #fff; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; outline: none; }

/* ======================================================================
   Ultramodern (2026-11-01, the user's "Make the teleprompter page
   ultramodern too", after the Scripture console): the teleprompter in a
   glowing glass frame, a gradient play button that glows, glass pills,
   gradient tabs and chips, a glowing reading line and progress; the
   how-to as frosted cards. The website's blue, into violet. Same sizes.
   ====================================================================== */
.prompter.tp-page {
  --u-grad: linear-gradient(135deg, #4f8bff 0%, #1665ff 45%, #7c5cff 100%);
  --u-glow: rgba(22, 101, 255, 0.5);
  --u-glass: rgba(255, 255, 255, 0.06);
  --u-edge: rgba(255, 255, 255, 0.1);
  border: 1.5px solid transparent;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(22, 101, 255, 0.16), transparent 70%) padding-box,
    radial-gradient(60% 50% at 100% 100%, rgba(124, 92, 255, 0.14), transparent 70%) padding-box,
    linear-gradient(#090b12, #090b12) padding-box,
    linear-gradient(135deg, rgba(79, 139, 255, 0.7), rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.06) 65%, rgba(124, 92, 255, 0.7)) border-box;
  box-shadow: 0 30px 70px -30px rgba(22, 101, 255, 0.55), 0 0 120px -40px rgba(124, 92, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.prompter.tp-page:fullscreen { border: 0; }
.prompter.tp-page button { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; }
.prompter.tp-page button:not(:disabled):active { transform: scale(0.94); }

/* The reading line and the progress: lit */
.prompter.tp-page .prompter-line { background: linear-gradient(90deg, rgba(79, 139, 255, 0.18), rgba(124, 92, 255, 0.08) 60%, transparent); border-color: rgba(79, 139, 255, 0.45); box-shadow: 0 0 24px -6px rgba(22, 101, 255, 0.5); }
.prompter.tp-page .prompter-line::before { border-left-color: #4f8bff; filter: drop-shadow(0 0 6px rgba(79, 139, 255, 0.9)); }
.prompter.tp-page .prompter-progress { background: rgba(255, 255, 255, 0.06); }
.prompter.tp-page .prompter-progress i { background: var(--u-grad); box-shadow: 0 0 12px rgba(79, 139, 255, 0.8); }
.prompter.tp-page .prompter-text .pt-head { background: linear-gradient(90deg, #8fb4ff, #b39dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prompter.tp-page .prompter-count { background: radial-gradient(circle, rgba(22, 101, 255, 0.25), rgba(9, 11, 16, 0.7)); text-shadow: 0 0 40px rgba(79, 139, 255, 0.9); }

/* Controls: a glowing gradient play button, glass pills */
.prompter.tp-page .prompter-play { background: var(--u-grad); box-shadow: 0 8px 22px -6px var(--u-glow), 0 0 0 4px rgba(22, 101, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.prompter.tp-page .prompter-play:hover { filter: brightness(1.1); box-shadow: 0 10px 28px -6px var(--u-glow), 0 0 0 6px rgba(22, 101, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.prompter.tp-page .prompter-pill { border-radius: 999px; background: var(--u-glass); box-shadow: inset 0 0 0 1px var(--u-edge); }
.prompter.tp-page .prompter-btn { border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.prompter.tp-page .prompter-btn:hover:not(:disabled) { background: rgba(79, 139, 255, 0.18); box-shadow: 0 0 0 3px rgba(22, 101, 255, 0.14); color: #fff; }
.prompter.tp-page .prompter-btn.active { background: var(--u-grad); box-shadow: 0 6px 16px -6px var(--u-glow); }
.prompter.tp-page .prompter-chip { border-radius: 999px; background: var(--u-glass); border-color: var(--u-edge); }
.prompter.tp-page .prompter-chip:hover { border-color: rgba(79, 139, 255, 0.6); color: #fff; }
.prompter.tp-page .prompter-chip.active { background: var(--u-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -6px var(--u-glow); }
.prompter.tp-page .prompter-jump button { background: var(--u-glass); border-color: var(--u-edge); }
.prompter.tp-page .prompter-jump button:hover { border-color: rgba(79, 139, 255, 0.7); box-shadow: 0 0 0 3px rgba(22, 101, 255, 0.14); }
.prompter.tp-page .prompter-left { color: #a9b8e8; }
.prompter.tp-page .prompter-editor { background: rgba(255, 255, 255, 0.04); border-color: var(--u-edge); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.prompter.tp-page .prompter-editor:focus { border-color: rgba(79, 139, 255, 0.7); box-shadow: 0 0 0 3px rgba(22, 101, 255, 0.18), inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.prompter.tp-page .prompter-settings { border-top-color: var(--u-edge); background: rgba(255, 255, 255, 0.02); }

/* The note tabs */
.prompter.tp-page .pd-tab { border-radius: 999px; background: var(--u-glass); border-color: var(--u-edge); }
.prompter.tp-page .pd-tab.active { background: var(--u-grad); border-color: transparent; box-shadow: 0 6px 16px -6px var(--u-glow); color: #fff; }
.prompter.tp-page .pd-add { border-radius: 999px; }
.prompter.tp-page .pd-add:hover { background: rgba(79, 139, 255, 0.18); box-shadow: 0 0 0 3px rgba(22, 101, 255, 0.14); }

/* Around it: the how-to as frosted cards with glowing numbers */
.tp-step { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.65)); border: 1px solid rgba(22, 101, 255, 0.14); box-shadow: 0 18px 40px -28px rgba(22, 60, 160, 0.55), inset 0 1px 0 #fff; backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s ease; }
.tp-step::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, 0.18), transparent 70%); pointer-events: none; }
.tp-step:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -26px rgba(22, 60, 160, 0.6), inset 0 1px 0 #fff; }
.tp-step b { width: 34px; height: 34px; background: linear-gradient(135deg, #4f8bff, #1665ff 45%, #7c5cff); box-shadow: 0 8px 18px -6px rgba(22, 101, 255, 0.6); }
.tp-tips li::marker { color: #1665ff; }
.tp-private { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tp-private::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
@media (prefers-reduced-motion: reduce) { .tp-step { transition: none; } }

/* ---------- Ultramodern extras (2026-11-02, the user's "build all"; see "Coach, rehearsal, camera…" in teleprompter-page.js) ---------- */
.prompter-set small { display: block; font-size: 11.5px; font-weight: 500; color: #8d94a7; margin-top: 1px; }
.prompter-select { height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #eceef4; font: 600 13px 'Plus Jakarta Sans', sans-serif; }
.prompter-select option { color: #0b1d4d; }
.prompter-tools { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.prompter-tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(135deg, rgba(79, 139, 255, 0.16), rgba(124, 92, 255, 0.12)); color: #eceef4; font: 700 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.prompter-tool:hover { border-color: rgba(79, 139, 255, 0.6); box-shadow: 0 0 18px rgba(79, 139, 255, 0.25); }
.prompter-tool.on { background: linear-gradient(135deg, #ff5a74, #ff2d55); border-color: transparent; }
/* Your camera behind the words, darkened so they stay clear. */
.prompter-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0.42; pointer-events: none; z-index: 0; }
.prompter.has-cam .prompter-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 20, 0.35), rgba(5, 8, 20, 0.6)); z-index: 0; pointer-events: none; }
.prompter.has-cam .prompter-view, .prompter.has-cam .prompter-line { z-index: 1; }
.prompter-eye { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(5, 8, 20, 0.7); color: #fff; font: 700 12px 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; pointer-events: none; }
.prompter-eye i { width: 10px; height: 10px; border-radius: 50%; background: #2ee59d; box-shadow: 0 0 0 4px rgba(46, 229, 157, 0.25), 0 0 14px #2ee59d; animation: tp-eye 1.8s ease-in-out infinite; }
@keyframes tp-eye { 50% { box-shadow: 0 0 0 8px rgba(46, 229, 157, 0.08), 0 0 20px #2ee59d; } }
/* The coach's pace, top right; finishing on time, top left. */
.prompter-coach { position: absolute; top: 10px; right: 12px; z-index: 3; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 14px; background: rgba(5, 8, 20, 0.72); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; pointer-events: none; }
.prompter-coach b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prompter-coach span { font-size: 11px; color: #a9b0c6; }
.prompter-coach em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; font-weight: 700; }
.prompter-coach .pc-fill { grid-column: 1 / -1; }
.prompter-coach.good { border-color: rgba(46, 229, 157, 0.5); }
.prompter-coach.good em { color: #2ee59d; }
.prompter-coach.fast { border-color: rgba(255, 90, 116, 0.6); }
.prompter-coach.fast em { color: #ff7a8e; }
.prompter-coach.slow em { color: #ffc35a; }
.prompter-coach[hidden], .prompter-ontime[hidden], .prompter-eye[hidden] { display: none; }
.prompter-ontime { position: absolute; top: 10px; left: 12px; z-index: 3; padding: 6px 12px; border-radius: 999px; background: rgba(5, 8, 20, 0.72); border: 1px solid rgba(79, 139, 255, 0.5); color: #cfe0ff; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
/* Words a rehearsal missed. */
.prompter-text .tp-missed { color: #ff7a8e; text-decoration: underline wavy rgba(255, 122, 142, 0.6); text-underline-offset: 0.15em; }
/* A rehearsal's results, under the teleprompter. */
.tp-rehearsal { max-width: 980px; margin: 16px auto 0; padding: 18px 20px; border-radius: 20px; background: linear-gradient(160deg, #0b1230, #121a3d); color: #eceef4; box-shadow: 0 20px 50px -24px rgba(8, 20, 70, 0.7); }
.tp-rehearsal[hidden] { display: none; }
.tr-head2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tr-head2 h3 { margin: 0; font-size: 17px; color: #fff; }
.tr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.tr-stats div { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.tr-stats b { display: block; font-size: 24px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tr-stats span { font-size: 12px; color: #a9b0c6; }
.tp-rehearsal audio { width: 100%; margin-bottom: 8px; }
.tr-sub { margin: 6px 0 8px; font-size: 13px; color: #a9b0c6; }
.tr-runs { display: flex; flex-direction: column; gap: 6px; }
.tr-run { text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 122, 142, 0.35); background: rgba(255, 122, 142, 0.08); color: #ffd0d8; font: 600 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
@media (max-width: 640px) { .tr-stats { grid-template-columns: repeat(2, 1fr); } }
/* Buttons and the script helper's dialog. */
.tp-btn { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(11, 29, 77, 0.16); background: #fff; color: #0b1d4d; font: 700 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.tp-rehearsal .tp-btn { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.15); }
.tp-btn.primary { background: linear-gradient(135deg, #4f8bff, #1665ff 45%, #7c5cff); color: #fff; border: 0; }
.tp-btn.ai { border-color: rgba(124, 92, 255, 0.4); background: linear-gradient(135deg, rgba(79, 139, 255, 0.1), rgba(124, 92, 255, 0.12)); }
.tp-btn:disabled { opacity: .5; cursor: default; }
.tp-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 22px; border: 0; border-radius: 22px; color: #0b1d4d; background: #fff; color-scheme: light; box-shadow: 0 30px 80px -20px rgba(6, 12, 34, 0.6); font-family: 'Plus Jakarta Sans', sans-serif; }
.tp-dialog::backdrop { background: rgba(6, 12, 34, 0.55); backdrop-filter: blur(4px); }
.tp-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.tp-dialog-head h2 { margin: 0; font-size: 19px; }
.tp-x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: #eef1f8; cursor: pointer; }
.tp-dialog-lead { margin: 6px 0 14px; color: #4a5578; font-size: 13.5px; }
.tp-helper-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.tp-shorten { display: inline-flex; gap: 6px; align-items: center; }
.tp-shorten select { height: 38px; border-radius: 10px; border: 1px solid rgba(11, 29, 77, 0.16); padding: 0 8px; font: 600 13px 'Plus Jakarta Sans', sans-serif; }
.tp-helper-out { width: 100%; box-sizing: border-box; min-height: 260px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(11, 29, 77, 0.16); background: #f6f8fc; font: 500 14.5px/1.55 'Plus Jakarta Sans', sans-serif; color: #0b1d4d; resize: vertical; }
.tp-helper-status { min-height: 18px; margin: 8px 0 12px; font-size: 13px; color: #4a5578; }
.tp-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* Translation under each line, and sharing a note (2026-11-02, the user's picks). */
.prompter-text .pt-trans { margin: -0.1em 0 0.45em; font-size: 0.6em; font-weight: 600; line-height: 1.35; color: #8fb4ff; opacity: 0.9; }
.tp-share-link { display: flex; gap: 8px; margin-bottom: 6px; }
.tp-share-link input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(11, 29, 77, 0.16); background: #f6f8fc; color: #0b1d4d; font: 12.5px ui-monospace, Consolas, monospace; }
.tp-share-on[hidden], .tp-share-off[hidden] { display: none; }
.pd-shared { font-size: 0.85em; }
/* The word you're on, lit; the ones read, dimmed (2026-11-02, "Light up the word I'm on"). */
.prompter-text .pt-now { color: #ffffff; background: linear-gradient(135deg, rgba(79, 139, 255, 0.55), rgba(124, 92, 255, 0.45)); border-radius: 0.2em; box-shadow: 0 0 0.6em rgba(79, 139, 255, 0.55); padding: 0 0.08em; margin: 0 -0.08em; transition: background .15s; }
.prompter-text .pt-read { opacity: 0.5; transition: opacity .3s; }
/* Import: a place to drop a file. */
.tp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border-radius: 16px; border: 2px dashed rgba(79, 139, 255, 0.45); background: rgba(79, 139, 255, 0.05); color: #0b1d4d; cursor: pointer; text-align: center; }
.tp-drop b { font-size: 15px; }
.tp-drop span { font-size: 13px; color: #4a5578; }
.tp-drop.over { background: rgba(79, 139, 255, 0.14); border-color: #1665ff; }
.tp-share-link input#tp-import-gdoc { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; }
/* Settings (now many): two columns, scrolling inside, so the words keep their room. */
.prompter-settings:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 2px; max-height: 44%; overflow-y: auto; flex: none; scrollbar-width: thin; }
.prompter-settings .prompter-tools, .prompter-settings .prompter-keys { grid-column: 1 / -1; }
.prompter-stage { min-height: 170px; }
@media (max-width: 720px) { .prompter-settings:not([hidden]) { grid-template-columns: 1fr; max-height: 50%; } }

/* ---------- 2026-11-06: section times, two presenters, producer cues, captions, versions ---------- */
.prompter { position: relative; }
/* Two presenters */
.prompter-text .pt-who { color: var(--who); }
.prompter-text .pt-name { font-size: 0.42em; font-weight: 800; letter-spacing: 0.1em; padding: 0.18em 0.55em; border-radius: 0.35em; background: color-mix(in srgb, var(--who) 22%, transparent); vertical-align: 0.35em; margin-right: 0.25em; }
.prompter-text.pt-mine .pt-theirs { opacity: 0.3; }
.prompter-who { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 14px 0; font: 700 11.5px 'Plus Jakarta Sans', sans-serif; color: #c9cdd8; }
.prompter-who[hidden] { display: none; }
.prompter-who span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.prompter-who span.mine { border-color: var(--who); box-shadow: 0 0 0 2px color-mix(in srgb, var(--who) 30%, transparent); }
.prompter-who i { width: 9px; height: 9px; border-radius: 50%; background: var(--who); }
/* Section times on the chips, and the pace badge */
.prompter-jump button { display: inline-flex; align-items: center; gap: 7px; }
.prompter-jump .pj-time { font: 700 10.5px 'JetBrains Mono', ui-monospace, Consolas, monospace; color: #8f96b3; }
.prompter-jump .pj-time:empty { display: none; }
.prompter-jump button.pj-done { border-color: rgba(52, 211, 153, 0.5); }
.prompter-jump button.pj-done .pj-time { color: #6ee7b7; }
.prompter-jump button.pj-warn { border-color: rgba(251, 191, 36, 0.7); background: rgba(251, 191, 36, 0.12); }
.prompter-jump button.pj-warn .pj-time { color: #fde68a; }
.prompter-jump button.pj-over { border-color: rgba(251, 113, 133, 0.75); background: rgba(251, 113, 133, 0.14); }
.prompter-jump button.pj-over .pj-time { color: #fda4af; }
.prompter-pace { position: absolute; right: 14px; top: 10px; z-index: 4; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 14, 30, 0.85); color: #d7dbea; font: 700 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.prompter-pace[hidden] { display: none; }
.prompter-pace.behind { border-color: rgba(251, 191, 36, 0.6); color: #fde68a; background: rgba(251, 191, 36, 0.14); }
.prompter-pace.ahead { border-color: rgba(52, 211, 153, 0.55); color: #a7f3d0; }
/* A producer's cue */
.prompter-cue { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 6; padding: 12px 28px; border-radius: 16px; font: 800 clamp(18px, 3.2vw, 34px)/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.04em; color: #fff; white-space: nowrap; background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.22), 0 20px 50px -10px rgba(239, 68, 68, 0.7); pointer-events: none; }
.prompter-cue[hidden] { display: none; }
.prompter-cue.show { animation: tp-cue-in .35s cubic-bezier(.2, 1.4, .4, 1), tp-cue-pulse 1.1s ease-in-out .35s infinite; }
@keyframes tp-cue-in { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
@keyframes tp-cue-pulse { 50% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0.05), 0 20px 50px -10px rgba(239, 68, 68, 0.7); } }
.prompter-tool.on { border-color: rgba(52, 211, 153, 0.6); }
/* Captions window */
.tp-cap-on { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.tp-cap-live { font-size: 12.5px; font-weight: 700; color: #8a93b2; } .tp-cap-live.on { color: #16a34a; }
.tp-cap-look { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0 12px; font-size: 13px; font-weight: 600; }
.tp-cap-look select { margin-left: 6px; height: 32px; border-radius: 9px; border: 1px solid rgba(11, 29, 77, 0.16); padding: 0 8px; font: inherit; }
.tp-cap-chk { display: inline-flex; align-items: center; gap: 6px; }
.tp-cap-preview { border-radius: 14px; padding: 26px 18px; text-align: center; background: linear-gradient(135deg, #3a2b22, #120d0a); min-height: 96px; display: grid; place-items: center; }
.tp-cap-preview > span { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.tp-cap-preview b { display: inline-block; padding: 6px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; }
.tp-cap-preview b mark { background: rgba(99, 102, 241, 0.75); color: #fff; border-radius: 4px; padding: 0 2px; }
.tp-cap-preview i { display: block; font-style: normal; color: rgba(255, 255, 255, 0.55); font-size: 14px; margin-top: 4px; }
/* Versions */
.tp-ver-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.tp-ver { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(11, 29, 77, 0.1); background: #f7f8fc; }
.tp-ver-dot { width: 10px; height: 10px; border-radius: 50%; background: #7c5cff; box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.18); flex: none; }
.tp-ver.cur .tp-ver-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18); }
.tp-ver-g { flex: 1; min-width: 0; } .tp-ver-g small { display: block; color: #5a6585; font-size: 12px; }
.tp-ver .tp-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.tp-ver-none { color: #5a6585; font-size: 13px; margin: 4px 2px; }
.tp-ver-diff { border-radius: 14px; border: 1px solid rgba(11, 29, 77, 0.12); padding: 12px 14px; margin-bottom: 12px; max-height: 240px; overflow-y: auto; font-size: 14px; line-height: 1.7; }
.tp-ver-diff-head { font-size: 12px; font-weight: 700; color: #5a6585; margin-bottom: 6px; }
.tp-ver-diff del { color: #be123c; background: rgba(244, 63, 94, 0.12); padding: 0 3px; border-radius: 4px; }
.tp-ver-diff ins { color: #15803d; background: rgba(34, 197, 94, 0.14); text-decoration: none; padding: 0 3px; border-radius: 4px; }