/* Text to speech (template-parts/tools/text-to-speech.php) */

.tts-pad__label { display: block; margin-bottom: 6px; }

.tts-text,
.tts-reader {
    min-height: 168px;
    max-height: 46vh;
    font-size: 1rem;
    line-height: 1.65;
}

.tts-reader {
    position: relative; /* offsetTop of the lit word is measured against it */
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
}
.tts-reader:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.tts-chunk { border-radius: 4px; transition: color var(--duration-ui) var(--ease-out); }
.tts-chunk:hover { color: var(--color-text-secondary); }
.tts-chunk.is-on { color: var(--color-text-primary); }
.tts-word {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
    color: var(--color-text-primary);
    border-radius: 3px;
    padding: 0 1px;
}

.tts-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.tts-meta #tts-count { margin-inline-end: auto; }

.tts-pad { margin-top: 14px; }
.tts-play { min-width: 9.5rem; }
.tts-play__ico, .tts-btn .tts-ico { display: inline-flex; }
.tts-ico { flex: none; }
.tts-btn { padding: 0.6rem 0.9rem; }
.tts-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.tts-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}
.tts-voice .tool-select { flex: 1; min-width: 0; max-width: 100%; }

.tts-sub { margin-top: 8px !important; }
.tts-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.tts-check input { accent-color: var(--color-accent); width: 16px; height: 16px; }

.tts-sliders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 20px;
    margin-top: 14px;
}
.tts-slider { display: flex; flex-direction: column; gap: 4px; }
.tts-slider output { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; margin-inline-start: 4px; }
.tts-slider input[type="range"] { width: 100%; accent-color: var(--color-accent); }

.tts-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.tts-hint[hidden] { display: none; }

.tts-langs {
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

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

@media (max-width: 640px) {
    .tts-text, .tts-reader { min-height: 132px; }
    .tts-sliders { grid-template-columns: 1fr 1fr; }
    .tts-voice { flex-basis: 100%; }
}