/* DE: Wort-Audio auf der Wortseite: Player je Varietät, kindgerechter Abspielknopf (Progressive
       Enhancement — der Knopf liegt hidden, Stimulus enthüllt ihn), „Hör auch"-Umschalt-Chips des
       gekoppelten Layouts. Aus learner-word.css herausgelöst (Dateigrößen-Ratchet, kohärente Einheit).
   EN: Word-page audio: per-variety players, the kid-friendly play button (progressive enhancement —
       the button ships hidden, Stimulus reveals it), and the coupled layout's "also listen" switch
       chips. Split out of learner-word.css (file-size ratchet, cohesive unit). */
/* Recorded/synthesised pronunciation players, one per variety (RP/US/AU), under the lemma. */
.word-hero__audio{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-block:var(--sp-sm)}
.word-audio{margin:0}
/* the active variety's recording leads and is marked (its variety caption uses the brand colour) */
.word-audio--active .word-audio__variety{color:var(--brand-strong)}
.word-audio__variety{color:var(--text-muted);font-size:var(--step--2);font-weight:700;letter-spacing:.03em;margin-block-end:.15rem}
.word-audio audio{block-size:2rem;max-inline-size:16rem}
/* .btn setzt display:inline-flex und schlägt die UA-Regel [hidden] — gescopte Wiederherstellung,
   sonst wäre der Play-Knopf ohne JS sichtbar und der native Player nicht versteckbar (Build-Gotchas). */
.word-audio [hidden]{display:none}
.word-audio__play-icon{font-size:1.1em;line-height:1}
.word-audio__play[aria-pressed="true"]{filter:saturate(1.4)}

/* Beispielsatz-Audio (B1): ein kleiner Inline-Player je Satz, gekoppelt an die aktive Varietät. Der native
   <audio>-Player ist die No-JS-Basis; der audio-play-Controller blendet den kompakten Knopf ein und versteckt
   den nativen Player (die .btn-lose [hidden]-Wiederherstellung wie oben). */
.example-sentence-audio{display:inline-flex;align-items:center;margin-inline-start:.4ch;vertical-align:baseline}
.example-sentence-audio [hidden]{display:none}
.example-sentence-audio__play{display:inline-flex;align-items:center;justify-content:center;
  inline-size:1.9rem;block-size:1.9rem;padding:0;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text);cursor:pointer}
.example-sentence-audio__play:hover{background:var(--surface-2)}
.example-sentence-audio__play:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.example-sentence-audio__play[aria-pressed="true"]{filter:saturate(1.4)}
.example-sentence-audio__icon{font-size:1em;line-height:1}