/* Teleprompter (template-parts/tools/teleprompter.php) */

.tp { --tp-stage-h: 460px; --tp-ink: #f3efe6; --tp-bg: #0c1111; }
.tp[data-context="embed"] { --tp-stage-h: 300px; }

.tp-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
.tp-bar--settings { margin-top: 12px; gap: 10px 18px; }

.tp-start { min-width: 8.5rem; }
.tp-start__ico, .tp-tool, .tp-toggle { display: inline-flex; align-items: center; }
.tp-ico { flex: none; }

.tp-toggle {
    gap: 8px;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out);
}
.tp-toggle input { accent-color: var(--color-accent); width: 16px; height: 16px; margin: 0; }
.tp-toggle:has(input:checked) { border-color: var(--color-accent); color: var(--color-text-primary); }
.tp-toggle.is-off { opacity: 0.55; cursor: not-allowed; }
.tp-lang { max-width: 13rem; }

.tp-time {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    color: var(--color-text-muted);
    min-width: 3.5em;
    text-align: end;
}

.tp-step { display: inline-flex; align-items: center; gap: 6px; }
.tp-sq { min-width: 2.25rem; justify-content: center; font-weight: 600; }
.tp-val {
    min-width: 4.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.tp-size-out { min-width: 2.5em; }
.tp-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tp-tool { gap: 6px; }
.tp-tool[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-text-primary); }

/* Stage: the script box and the prompter share one frame */
.tp-stage {
    position: relative;
    margin-top: 14px;
    height: var(--tp-stage-h);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--tp-bg);
}
.tp-script {
    display: block;
    width: 100%;
    height: 100%;
    resize: none;
    border: 0;
    padding: 18px 20px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    line-height: 1.6;
}
.tp-script:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.tp-view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    outline: none;
}
.tp-view:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); }
.tp-flipbox { position: absolute; inset: 0; }
/* lines already read fade back; the shade flips with the text */
.tp-flipbox::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--tp-shade, 30%);
    background: linear-gradient(to bottom, var(--tp-bg) 0%, color-mix(in srgb, var(--tp-bg) 55%, transparent) 100%);
    z-index: 1;
    pointer-events: none;
}
.tp-scroll { will-change: transform; }
.tp-text {
    position: relative; /* word offsets are measured against it */
    margin: 0 auto;
    padding-inline: 4%;
    color: var(--tp-ink);
    font-family: var(--font-display, 'Sora', 'DM Sans', sans-serif);
    font-weight: 500;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: start;
}
.tp-w { transition: opacity var(--duration-ui) var(--ease-out); }

.tp-marker {
    position: absolute;
    inset-inline: 0;
    top: 35%;
    height: 0;
    pointer-events: none;
}
.tp-marker::before,
.tp-marker::after {
    content: "";
    position: absolute;
    top: -9px;
    border: 9px solid transparent;
}
.tp-marker::before { left: 0; border-left-color: var(--color-accent, #2d9e9e); }
.tp-marker::after { right: 0; border-right-color: var(--color-accent, #2d9e9e); }
.tp-marker span {
    position: absolute;
    inset-inline: 18px;
    top: 0;
    border-top: 1px dashed color-mix(in srgb, var(--color-accent, #2d9e9e) 55%, transparent);
}

.tp-count {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(64px, 18vw, 160px);
    font-weight: 600;
    color: var(--tp-ink);
    background: color-mix(in srgb, var(--tp-bg) 70%, transparent);
    pointer-events: none;
}
.tp-count[hidden] { display: none; }
.tp-count.is-tick { animation: tp-tick 1s var(--ease-out) both; }
@keyframes tp-tick {
    from { opacity: 0; transform: scale(1.25); }
    25%  { opacity: 1; transform: scale(1); }
    to   { opacity: 0.2; transform: scale(0.96); }
}

.tp-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 10px;
}
.tp-more summary { cursor: pointer; }
.tp-more__body {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    min-width: min(100%, 360px);
}
.tp-range { display: flex; flex-direction: column; gap: 4px; }
.tp-range input { accent-color: var(--color-accent); width: 100%; }
.tp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-secondary); }
.tp-check input { accent-color: var(--color-accent); width: 16px; height: 16px; }
.tp-keys { line-height: 1.5; }

.tp-note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-subtle, var(--color-text-muted));
}

/* Edit mode: the prompter-only controls step back */
.tp.is-editing #tp-top,
.tp.is-editing #tp-edit { display: none; }
.tp.is-follow .tp-step:first-child { opacity: 0.5; }

/* Full screen (real or the iPhone stand-in): stage takes everything */
.tp.is-full,
.tp.tp--full {
    display: flex;
    flex-direction: column;
    background: var(--tp-bg);
    padding: 10px 12px;
    color-scheme: dark;
}
.tp.tp--full {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
}
html.tp-lock, html.tp-lock body { overflow: hidden; }
.tp.is-full .army-status, .tp.tp--full .army-status { background: #182020; border-color: #2a3434; color: #d6d2c8; margin-top: 8px; }
.tp.is-full .tp-stage,
.tp.tp--full .tp-stage { flex: 1; height: auto; margin-top: 8px; border: 0; border-radius: 0; }
.tp.is-full .tp-foot, .tp.is-full .tp-note, .tp.is-full .army-next,
.tp.tp--full .tp-foot, .tp.tp--full .tp-note, .tp.tp--full .army-next { display: none; }
.tp.is-full .tp-tool__txt, .tp.tp--full .tp-tool__txt { display: none; }
.tp.is-full .tool-btn-sm, .tp.tp--full .tool-btn-sm,
.tp.is-full .tp-toggle, .tp.tp--full .tp-toggle { background: #182020; border-color: #2a3434; color: #d6d2c8; }
.tp.is-full .army-label, .tp.tp--full .army-label,
.tp.is-full .tp-val, .tp.tp--full .tp-val, .tp.is-full .tp-time, .tp.tp--full .tp-time { color: #b9b4a8; }

/* Compact controls: phones and the embed */
@media (max-width: 640px) {
    .tp { --tp-stage-h: min(56vh, 420px); }
    .tp-tool__txt { display: none; }
    .tp-bar--settings { gap: 8px 12px; }
    .tp-time { font-size: 14px; }
}
.tp[data-context="embed"] .tp-tool__txt { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tp-count.is-tick { animation: none; }
}