/* text-to-speech: voice picker, speed/pitch/volume sliders, and the reading view with the sentence
   (and word) being read highlighted. Family styles for text pages are in ../text-tools.css. */
.matrix-ui #tts-voice { width: 100%; box-sizing: border-box; }
.tts-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--matrix-space-12) var(--matrix-space-16); }
.tts-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--matrix-space-8); min-width: 0; }
.tts-slider label { grid-column: 1 / -1; font-weight: 600; }
.matrix-ui .tts-range { width: 100%; margin: 0; accent-color: var(--matrix-brand); }
.tts-value { min-width: 3.5em; text-align: right; font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); }
.tts-normal { margin-top: var(--matrix-space-8); }
.tts-view { position: relative; max-height: 50vh; overflow: auto; margin-top: var(--matrix-space-8); padding: var(--matrix-space-12) var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.tts-s.is-current { background: var(--matrix-selected); color: var(--matrix-selected-text); border-radius: 3px; box-shadow: 0 0 0 2px var(--matrix-selected); }
.tts-word { background: var(--matrix-brand); color: var(--matrix-on-brand); border-radius: 2px; }
#tts-info.matrix-error, #tts-voice-note.matrix-error { color: var(--matrix-danger); }