/* Spraak (versie 1.43.0, ticket 9766, docs/SPRAAK.md): de microfoon in een
   tekstvak en de knop Lees voor, volgens component 18 van het
   Hero-ontwerpsysteem ("Microfoon in een tekstveld"). Eigen bestand naast
   stijl.css; alle eigen namen beginnen met sp-. Alleen in beeld als de server
   spraak aanzet. De kleuren van het ontwerpsysteem die stijl.css niet kent,
   staan hieronder als variabelen. */
:root{--sp-tekst-2:#4f5259;--sp-tekst-3:#6b6d78;--sp-vlak:#dfe4e6;--sp-gedimd:#9496a1}

/* ---------- Het vak met de microfoon ----------
   De knop staat rechtsonder in het vak, 8 px van de rand; het vak houdt
   rechts 44 px vrij, zodat de tekst nooit onder de knop loopt. */
.sp-veld{position:relative;min-width:0}
.sp-veld > textarea{display:block;padding-right:44px}

/* De knop: 36 bij 36, zonder rand en zonder vlak; de microfoon in de derde tekstkleur. */
.sp-knop{position:absolute;right:8px;bottom:8px;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--sp-tekst-3);cursor:pointer;transition:background-color .15s,color .15s}
.sp-knop .sp-icoon{display:block}
/* Hover alleen met een muis: op een telefoon blijft hover na een tik anders staan. */
@media (hover:hover){.sp-knop:hover{background:var(--sp-vlak);color:var(--blauw-black)}}
.sp-knop:focus-visible{outline:0;box-shadow:0 0 0 1px #fff,0 0 0 3px var(--blauw)}
/* Luistert: het pictogram in inkt, met één oranje stip van 7 px die zacht pulseert. */
.sp-knop[aria-pressed="true"]{color:var(--blauw-black)}
.sp-knop[aria-pressed="true"]::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--oranje);box-shadow:0 0 0 2px #fff;animation:sp-puls 1.2s ease-in-out infinite}
@keyframes sp-puls{0%,100%{opacity:1}50%{opacity:.35}}
/* Verwerkt: een draaiend pictogram, geen tweede klik. */
.sp-knop[aria-busy="true"]{pointer-events:none;cursor:progress}
.sp-draait{animation:sp-draai 1s linear infinite}
@keyframes sp-draai{to{transform:rotate(360deg)}}
/* Geen toestemming: gedimd en zonder hover; de knop blijft bereikbaar en leest zijn uitleg voor. */
.sp-knop[aria-disabled="true"],.sp-knop[aria-disabled="true"]:hover{background:transparent;color:var(--sp-gedimd);cursor:not-allowed}
/* Het vak is even dicht (een bericht of antwoord is onderweg). */
.sp-knop:disabled,.sp-knop:disabled:hover{background:transparent;color:var(--sp-gedimd);opacity:.6;cursor:not-allowed}

/* De melding voor de schermlezer, en de uitleg of de fout onder het vak. De fout
   is de compacte fout van component 10: één regel van 12 px in rood, met pictogram. */
.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sp-hint{font-size:12px;line-height:16px;color:var(--sp-tekst-3);margin-top:2px}
.sp-fout{display:flex;align-items:flex-start;gap:4px;font-size:12px;line-height:16px;font-weight:600;color:var(--rood);margin-top:2px}
.sp-fout .sp-icoon{flex:none;margin-top:1px}

/* ---------- De knop Lees voor ----------
   Rustig en klein (hero-knop hero-knop-rustig hero-knop-klein): geen rand en
   geen vlak, de luidspreker voor de tekst; tijdens het voorlezen heet hij Stop. */
.sp-leesrij{display:flex;flex-wrap:wrap;align-items:center;margin-top:2px}
.sp-lees{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-tekst-2);font-family:'Exo',Arial,sans-serif;font-size:12px;line-height:16px;font-weight:800;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
@media (hover:hover){.sp-lees:hover{background:var(--sp-vlak);color:var(--blauw-black)}}
.sp-lees:focus-visible{outline:0;box-shadow:0 0 0 1px #fff,0 0 0 3px var(--blauw)}
.sp-lees[aria-pressed="true"]{background:var(--sp-vlak);color:var(--blauw-black)}

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .sp-knop::after,.sp-draait{animation:none!important}
  .sp-knop,.sp-lees{transition:none}
}

/* ---------- Telefoon ----------
   Een raakvlak van 44 bij 44 rond de knop van 36 (een onzichtbaar vlak van 4 px
   rondom), en de knop Lees voor 44 hoog. */
@media (max-width:599px){
  .sp-knop::before{content:"";position:absolute;inset:-4px}
  .sp-lees{min-height:44px}
}