/* teleprompter: script editor, pace and display settings, live preview, and the prompter overlay.
   Colours in the prompter are fixed schemes (not the site theme): the text must read from a glass. */
.tp-intake { display: grid; gap: var(--matrix-space-8); }
.tp-intake > label { font-weight: 600; }
.matrix-ui .tp-script { width: 100%; box-sizing: border-box; min-height: 200px; resize: vertical; font-size: 1rem; line-height: 1.5; }
.tp-open-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-12); }
.tp-open-row .text-note { margin: 0; flex: 1 1 240px; }
.tp-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--matrix-space-12) var(--matrix-space-16); margin-bottom: var(--matrix-space-8); }
.tp-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--matrix-space-8); min-width: 0; }
.tp-slider label { grid-column: 1 / -1; font-weight: 600; }
.matrix-ui .tp-range { width: 100%; margin: 0; accent-color: var(--matrix-brand); }
.tp-value { min-width: 4.5em; text-align: right; font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); }
.tp-fit { display: flex; flex-wrap: wrap; align-items: end; gap: var(--matrix-space-8) var(--matrix-space-12); margin-top: var(--matrix-space-12); }
.tp-fit-field { display: grid; gap: var(--matrix-space-8); }
.tp-fit-field label { font-weight: 600; }
.matrix-ui .tp-target { width: 8em; font-family: var(--matrix-font-mono); }
#tp-info.matrix-error, #tp-fit-note.matrix-error, #tp-follow-note.matrix-error { color: var(--matrix-danger); }
/* following the voice (queue row 115, T66-02) */
.tp-voice-lang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-12); margin-top: var(--matrix-space-8); }
.tp-voice-lang label { font-weight: 600; }
.matrix-ui .tp-voice-lang select { min-height: 44px; width: auto; }
#tp-voice-download { margin-top: var(--matrix-space-8); }
#tp-voice-download[hidden] { display: none; }

/* colour schemes, shared by the preview and the prompter */
.tp-dark { background: #000; color: #fff; }
.tp-light { background: #fff; color: #000; }
.tp-yellow { background: #000; color: #ffd60a; }
.tp-dark .tp-cue, .tp-yellow .tp-cue { color: #7cc4ff; font-weight: 400; font-style: italic; }
.tp-light .tp-cue { color: #0055aa; font-weight: 400; font-style: italic; }

.tp-preview-wrap { display: grid; gap: var(--matrix-space-8); }
.tp-preview-label { margin: 0; font-weight: 600; }
.tp-preview { position: relative; height: 180px; overflow: hidden; border-radius: var(--matrix-radius-control); border: 1px solid var(--matrix-border); }
.tp-preview-stage { position: absolute; inset: 0; }
.tp-preview-text { margin: 0 auto; padding-top: 54px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.tp-preview-guide { position: absolute; left: 0; right: 0; top: 50px; height: 1.6em; border-block: 1px solid rgba(128, 128, 128, 0.7); background: rgba(128, 128, 128, 0.15); }
.tp-preview-guide[hidden] { display: none; }
.tp-stage.is-mirrored, .tp-preview-stage.is-mirrored { transform: scaleX(-1); }
.tp-stage.is-flipped, .tp-preview-stage.is-flipped { transform: scaleY(-1); }
.tp-stage.is-mirrored.is-flipped, .tp-preview-stage.is-mirrored.is-flipped { transform: scale(-1, -1); }

/* the prompter */
.tp-open, .tp-open body { overflow: hidden; }
.tp-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.tp-overlay:fullscreen { width: 100%; height: 100%; }
.tp-stage { position: relative; overflow: hidden; touch-action: none; cursor: pointer; user-select: none; }
.tp-text { will-change: transform; }
.tp-content { margin: 0 auto; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.tp-guide { position: absolute; left: 0; right: 0; pointer-events: none; border-block: 2px solid rgba(128, 128, 128, 0.8); background: rgba(128, 128, 128, 0.14); }
.tp-guide[hidden] { display: none; }
.tp-countdown { position: absolute; inset: 0 0 auto; top: 35%; text-align: center; font-size: clamp(64px, 20vw, 220px); font-weight: 700; color: #fff; text-shadow: 0 0 24px #000; pointer-events: none; }
.tp-countdown[hidden] { display: none; }
.tp-light .tp-countdown { color: #000; text-shadow: 0 0 24px #fff; }
.tp-bar { display: grid; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: #111; color: #f5f5f7; border-top: 1px solid #333; font-size: 15px; }
.tp-bar-buttons, .tp-bar-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tp-button { min-height: 40px; padding: 6px 12px; border-radius: 8px; border: 1px solid #555; background: #222; color: #fff; font: inherit; cursor: pointer; }
.tp-button:hover { background: #333; }
.tp-button:focus-visible { outline: 3px solid #7abeff; outline-offset: 2px; }
.tp-button[aria-pressed="true"] { background: #0a4a8a; border-color: #7abeff; }
#tp-play { min-width: 6.5em; font-weight: 600; background: #0066cc; border-color: #0066cc; }
#tp-play:hover { background: #005bb5; }
.tp-readout { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; min-width: 4em; }
#tp-progress { flex: 1 1 120px; min-width: 80px; height: 8px; accent-color: #7abeff; }
.tp-keys { color: #c7c7cc; font-size: 13px; }
#tp-voice { color: #7abeff; min-width: 0; }
#tp-voice[hidden], .tp-voice-note[hidden] { display: none; }
.tp-voice-note { margin: 0; color: #ffd60a; font-size: 14px; }
@media (max-width: 560px) {
  .tp-keys { display: none; }
  .tp-button { padding: 6px 10px; flex: none; }
  /* a phone keeps the reading area: the buttons stay on one row that scrolls sideways within the bar (a focused button scrolls
     into view), the readouts and progress on a second, so the bar takes about a tenth of the screen, not a fifth with three rows
     (Jack's review of 2026-10-12, appendix 66b) */
  .tp-bar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .tp-bar-buttons { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
  /* Close stays in view at the row's right edge, the other buttons scrolling beneath it (review Iceeabe24: Close is seen at once) */
  #tp-close { position: sticky; right: 0; z-index: 1; box-shadow: -10px 0 8px #111; }
  .tp-bar-status { flex-wrap: nowrap; }
  .tp-readout { min-width: 0; flex: none; white-space: nowrap; }
}