/* DSP Sentinel speech to text: the "Speak" button after a text area (speech.js; branch speech-buttons, 2026-10-10).
   Loaded by both apps after /assets/school.css. Theme tokens only, so the four designs (Sentinel, Light, Dark, LCARS)
   keep their own look; LCARS gets its pill at the end of this file.

   Where it sits: at the left, right under its text area. When "Improve with AI" follows, the two share one row: this
   button floats left and the AI button keeps its place at the right (school.css: margin-left auto). Inside a column
   that cannot float (a flex column, a grid) the two simply stack, this one first. Phones and tablets: 44px tall, and
   the AI button beside it is made the same height so the row is even. */
.dsp-speech{display:flex;width:fit-content;max-width:100%;margin:6px 0 0;align-self:flex-start;justify-self:start;text-align:left}
.dsp-speech:has(+ .sn-ai:not([hidden])){float:left;margin-right:8px}
/* What follows the row starts under it, never beside the floated button. */
.dsp-speech ~ .sn-ai-note,.dsp-speech ~ .sn-ai-status,.dsp-speech ~ .dsp-speech-note,.dsp-speech ~ .hint,.dsp-speech ~ .error-box{clear:both}

.dsp-mic{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:9.6em;min-height:32px;margin:0;padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--kit-radius);background:var(--kit-card-bg);color:var(--text);font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dsp-mic:hover{background:var(--surface-hover)}
.dsp-mic-icon{width:15px;height:15px;flex:none}
.dsp-mic-icon--stop{display:none}
/* Listening: the red of a recording light, a square "stop" mark and the word, never the colour alone. */
.dsp-speech[data-state=starting] .dsp-mic,.dsp-speech[data-state=listening] .dsp-mic{background:var(--tone-bad-bg);border-color:var(--tone-bad-fg);color:var(--tone-bad-fg)}
.dsp-speech[data-state=starting] .dsp-mic,.dsp-speech[data-state=stopping] .dsp-mic{cursor:progress}
.dsp-speech[data-state=stopping] .dsp-mic{opacity:.7}
.dsp-speech[data-state=listening] .dsp-mic-icon--mic{display:none}
.dsp-speech[data-state=listening] .dsp-mic-icon--stop{display:block;animation:dsp-speech-pulse 1.4s ease-in-out infinite}
@keyframes dsp-speech-pulse{50%{opacity:.35}}
/* For screen readers only: "Listening. Press the button again to stop." / "Stopped listening." */
.dsp-speech-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.dsp-speech-note{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted);text-align:left}
.dsp-speech-note[data-tone=warn]{color:var(--tone-warn-fg)}
.dsp-speech-note[data-tone=bad]{color:var(--tone-bad-fg)}

/* Phones and tablets (the shell's own 850px line), and any touch screen: a 44px target. */
@media (max-width:850px),(pointer:coarse){
  .dsp-mic{min-height:44px;padding:8px 14px;font-size:13px}
  .dsp-mic-icon{width:17px;height:17px}
  .dsp-speech.dsp-speech + .sn-ai{min-height:44px}
}
@media print{.dsp-speech,.dsp-speech-note{display:none!important}}

/* ---- LCARS: the same pill as "Improve with AI" (themes/lcars.css), with the band on the left ---- */
html[data-theme="lcars"] .dsp-mic{padding:6px 16px 5px 22px;border:0;border-radius:16px 3px 3px 16px;background:var(--lc-raised-bg);box-shadow:inset 8px 0 0 var(--lc-ice);color:var(--lc-ice);font:600 14px/1.1 var(--lc-display);letter-spacing:.08em;text-transform:uppercase}
html[data-theme="lcars"] .dsp-mic:hover{background:var(--lc-steel-bg);color:var(--lc-steel-ink)}
html[data-theme="lcars"] .dsp-speech[data-state=starting] .dsp-mic,html[data-theme="lcars"] .dsp-speech[data-state=listening] .dsp-mic{background:var(--tone-bad-bg);box-shadow:inset 8px 0 0 var(--tone-bad-fg);color:var(--tone-bad-fg)}
html[data-theme="lcars"] .dsp-speech-note{font:600 12px/1.4 var(--lc-display);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:850px),(pointer:coarse){html[data-theme="lcars"] .dsp-mic{padding:8px 16px 7px 22px}}