/* Read-aloud speaker button (spec 2026-11-02). 48px for gloved hands; blue + moving wave while
   speaking; a "Volume is off" note under it when the tablet's media volume is zero. */
.hcd-speak { position: relative; flex: none; width: 48px; height: 48px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 12px; border: 2px solid #bfdbfe;
  background: #eff6ff; color: #1a56db; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.hcd-speak:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
.hcd-speak.is-playing { background: #1a56db; border-color: #1a56db; color: #fff; }
.hcd-speak.is-playing .hcd-speak-wave { animation: hcd-speak-pulse 1s ease-in-out infinite; }
.hcd-speak.is-playing .hcd-speak-wave + .hcd-speak-wave { animation-delay: .25s; }
.hcd-speak-muted { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: #a4262c; background: #fff; border-radius: 6px; padding: 2px 6px; }
.hcd-speak.is-playing.is-muted .hcd-speak-muted { display: block; }
@keyframes hcd-speak-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .hcd-speak.is-playing .hcd-speak-wave { animation: none; } }