/* tts-audio.css — "Listen to this article" bar: browser text-to-speech
 * controls plus an optional human-recorded audio player.
 *
 * Shared, external, same-origin file (CSP script-src/style-src 'self' clean;
 * no inline style block needed). One file to edit for every post, past or
 * future, that includes tts-audio.js's markup block. Matches the site's
 * existing dark / card-blur / #0087FF design system (see blog/*.html).
 */

.tts-bar {
    background: rgba(0, 135, 255, 0.06);
    border: 1px solid rgba(0, 135, 255, 0.35);
    border-radius: 4px;
    padding: 1rem 1.25rem;
}

.tts-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.tts-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #006DCC;
    color: #fff;
    border: none;
    padding: 0.6rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.tts-btn:hover { background-color: #0087FF; }

.tts-btn:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.tts-btn[aria-pressed="true"] { background: #0087FF; }

.tts-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tts-btn-icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #E2E8F0;
    padding: 0.6rem 0.75rem;
}

.tts-btn-icon:hover { background: rgba(255, 255, 255, 0.08); }

.tts-icon { font-size: 0.9rem; line-height: 1; }

.tts-rate-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999999;
    margin-left: auto;
}

.tts-rate-select {
    background: #0A0A0B;
    color: #E2E8F0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

.tts-status {
    margin: 0.6rem 0 0;
    min-height: 1.1em;
    font-size: 0.78rem;
    color: #60a5fa;
}

.tts-status[data-state="error"] { color: #f87171; }
.tts-status[data-state="unsupported"] { color: #999999; }

/* The <audio> element is a playback backend only — never shown with native
   controls, so it needs no layout rules of its own (it stays [hidden]). */

/* Reading-aloud highlight, applied by tts-audio.js to the block currently
   being spoken. Off by default for anyone with reduced-motion preferences —
   the highlight itself has no motion, but keep the transition instant. */
.tts-reading {
    background: rgba(0, 135, 255, 0.12);
    box-shadow: -0.75rem 0 0 rgba(0, 135, 255, 0.12), 0.75rem 0 0 rgba(0, 135, 255, 0.12);
    transition: background-color 0.2s ease;
}

/* Follow-along: current sentence inside the highlighted paragraph (2026-10-08). */
::highlight(tts-sentence) {
    background-color: rgba(0, 135, 255, 0.28);
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #0087FF;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

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

@media (max-width: 480px) {
    .tts-rate-label { margin-left: 0; }
}