/* Transcript: the passage being spoken (transcript-follow-along.js) and
   fixing a passage's speaker by hand (transcript-passage-menu.js,
   transcript-passage-split.js). The popover itself is speaker-popover.css.
   Outside the styles.css split manifest. Colours are the accent tokens, so
   the same tint reads on the light and the dark theme. */

/* ─── Follow-along highlight ─────────────────────────────────────────────── */

/* The passage being spoken: a thicker bar and the faintest tint — the place
   to look, not a block of colour. The word carries the emphasis. */
.transcript-full-segment.is-playing {
    background: var(--accent-blue-opacity-3);
    border-left-color: var(--accent-blue);
    border-left-width: 3px;
    padding-left: calc(var(--space-4) - 1px); /* the thicker bar doesn't shift the text */
}

.transcript-full-segment.is-playing .transcript-full-text {
    color: var(--text-primary);
}

.transcript-word {
    border-radius: var(--radius-sm);
    text-decoration: underline;
    text-decoration-color: transparent; /* the underline is there to colour in: no reflow when the word lights */
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

/* The word being spoken: accent text on an accent underline — a different
   kind of mark from the passage's tint and from a text selection's fill.
   #3579BD on white is 4.6:1; the dark theme's lighter accent is 6.2:1. */
.transcript-full-segment.is-playing .transcript-word.is-current {
    color: var(--accent-fill);
    text-decoration-color: var(--accent-blue);
}

[data-theme="dark"] .transcript-full-segment.is-playing .transcript-word.is-current {
    color: var(--accent-blue);
}

.transcript-full-speaker:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* ─── "Change speaker…" pill by a text selection ─────────────────────────── */

.transcript-selection-pill {
    position: absolute;
    z-index: var(--z-layer-raised);
    padding: 4px 12px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-fill);
    color: #fff;
    font-family: var(--font-primary);
    font-size: var(--font-size-12);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    white-space: nowrap;
    animation: transcript-pill-in var(--duration-fast) var(--ease-in-out);
}

.transcript-selection-pill:hover {
    background: var(--accent-fill-hover);
}

.transcript-selection-pill:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

@keyframes transcript-pill-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

/* ─── Caret split mode ("Part of it…") ───────────────────────────────────── */

.transcript-full-segment.is-splitting {
    cursor: text;
}

.transcript-full-segment.is-splitting .transcript-full-text {
    outline: 1.5px solid var(--accent-blue);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
    background: var(--accent-blue-opacity-3);
    color: var(--text-primary);
    caret-color: var(--accent-blue);
}

.transcript-split-hint {
    padding-left: 32px; /* lines up with the text */
    margin-top: var(--space-2);
    font-size: var(--font-size-12);
    color: var(--text-tertiary);
}

.transcript-split-hint kbd {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 1px 5px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .transcript-full-segment.is-playing .transcript-word.is-current {
        color: var(--accent-blue);
    }
}

@media (prefers-reduced-motion: reduce) {
    .transcript-word {
        transition: none;
    }

    .transcript-selection-pill {
        animation: none;
    }
}