/* Native prompter. Always dark: it is a stage, not a page. */
.tp { --tp-font-size: 48px; --tp-guide: 0.33; position: relative; display: flex; flex-direction: column; height: 100%; background: var(--stage); color: var(--stage-ink); }
.tp:fullscreen { height: 100vh; }
.tp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px var(--gutter); background: #121829; border-bottom: 1px solid rgb(255 255 255 / 0.08); font-size: 0.9rem; }
.tp-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.04); color: inherit; font: 600 0.9rem var(--font-body); cursor: pointer; }
.tp-btn:hover { background: rgb(255 255 255 / 0.1); }
.tp-btn[aria-pressed='true'] { background: var(--amber); border-color: var(--amber); color: #1b1300; }
.tp-play { min-width: 88px; background: #fff; color: #0b0f1c; border-color: #fff; }
.tp-play[aria-pressed='true'] { background: var(--amber); border-color: var(--amber); }
.tp-btn-quiet { border-color: transparent; background: none; opacity: 0.7; }
.tp-range { display: inline-flex; align-items: center; gap: 8px; }
.tp-range span { opacity: 0.7; }
.tp-range input { width: 96px; accent-color: var(--amber); }
.tp-range output { min-width: 2.2em; font-variant-numeric: tabular-nums; }
.tp-jump select { max-width: 220px; min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 0.16); background: #0b0f1c; color: inherit; font: inherit; }
.tp-timer { font: 700 1rem var(--font-body); font-variant-numeric: tabular-nums; margin-left: auto; }

.tp-stage { position: relative; flex: 1; min-height: 0; }
.tp-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; outline: none; }
.tp-text { padding: 33vh clamp(20px, 7vw, 120px) 70vh; /* padding-top is set from the guide position in JS */ font: 600 var(--tp-font-size)/1.45 var(--font-body); max-width: 40em; margin: 0 auto; }
.tp.is-mirrored .tp-text { transform: scaleX(-1); }
.tp-card { position: relative; padding: 0.35em 0.6em 0.55em; margin: 0 -0.6em 0.9em; border-radius: 14px; border: 2px dashed transparent; transition: opacity 0.3s, border-color 0.2s; }
.tp-card-head { font: 700 max(13px, calc(var(--tp-font-size) * 0.28))/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.25em; }
.tp-card .badge { background: rgb(255 255 255 / 0.12); color: inherit; }
.tp-card:not(.is-current) { opacity: 0.55; }
.tp[data-mode='present'] .tp-card { border-top: 1px dashed rgb(255 255 255 / 0.14); border-radius: 0; }
.tp[data-mode='edit'] .tp-card { border-color: rgb(255 255 255 / 0.22); opacity: 1; }
.tp[data-mode='edit'] .tp-card:focus-within { border-color: var(--amber); border-style: solid; }
.tp-notes strong { color: #fff; }
.tp-notes em { color: #d6e4ff; }
.tp-notes:empty::before, .tp-notes:has(> p:only-child > br:only-child)::before { content: '(no notes)'; opacity: 0.4; position: absolute; }
.tp-empty { opacity: 0.6; }
.tp-guide { position: absolute; left: 0; right: 0; top: calc(var(--tp-guide) * 100%); height: calc(var(--tp-font-size) * 1.45 + 12px); transform: translateY(-6px); background: rgb(255 176 32 / 0.1); border-top: 1px solid rgb(255 176 32 / 0.55); border-bottom: 1px solid rgb(255 176 32 / 0.55); pointer-events: none; }
.tp-guide::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-left-color: var(--amber); }
.tp[data-mode='edit'] .tp-guide { opacity: 0.25; }
.tp-preview { position: absolute; top: 12px; right: 12px; z-index: 2; width: 220px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.12); pointer-events: none; }
.tp-preview svg, .tp-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.tp-preview .thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #0b0f1c; font: 700 1.1rem var(--font-body); opacity: 0.5; }
.tp-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 10px 16px; border-radius: 12px; background: rgb(18 24 41 / 0.92); border: 1px solid rgb(255 255 255 / 0.12); font-size: 0.9rem; text-align: center; }
@media (max-width: 720px) {
  .tp-preview { width: 132px; top: 8px; right: 8px; }
  .tp-range-guide, .tp-btn-quiet { display: none; }
  .tp-range input { width: 72px; }
  .tp-bar { gap: 6px 10px; }
  .tp-timer { margin-left: 0; }
}