/* SHARED·READALOUD (424) — the Deep read-aloud button. (D-368 · D-596)
 *
 * EXTRACTED 2026-08-20 from the live 502 read (web/css/cards/weeks/read.css) — Phase 2
 * block 4 of cc-wb-cascade-and-weeks-extract. Values VERBATIM (.wkr-readaloud → ral):
 * accent-outlined pill in the label register, speaker glyph at 16. Deep ONLY (D-596 —
 * read-aloud is Deep's apparatus). No margin-top: it only ever follows the standfirst,
 * whose bottom margin is the whole gap (the read's rule, kept). ⚠️ The audio behaviour is
 * OWED — nothing wires this button yet (no handler anywhere in web/js); this is the face,
 * honestly inert, exactly as the live read ships it. */
.ral { display: inline-flex; align-items: center; gap: var(--space-8); background: var(--surface-card); border: 1px solid var(--accent); color: var(--nav-active); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); font-family: var(--font-label); font-size: var(--text-body-sm); font-weight: var(--weight-600); cursor: pointer; } /* token-exception */
.ral:active { transform: scale(0.98); }
.ral:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ral svg { width: var(--dim-16); height: var(--dim-16); }