/* ================================================================================================= MC-BADGE-SPEAKS-0919 · the Read aloud control on a Maven answer (queue 127; ruling 558/562) It is deliberately the dock's OWN pill, not a new component: the same geometry, radius, weight and colour role as `.mvn-cite` (the Sources chips that already sit under an answer in this exact position), so an answer that can be read aloud looks like an answer with one more affordance rather than a page with an advert on it. Nothing here restyles anything that already exists — every selector below is this package's own class. Both themes are written explicitly. Mission Control's dark is a SEAT (fs_member_profiles.ui_theme resolved server-side into `.fs-dark` on ), never prefers-color-scheme, so the dark half is keyed on `.fs-dark` exactly as fs-maven.css keys its own. Contrast, MEASURED FROM THE RENDERED COLOUR in the dock on the guarded rig, never from this stylesheet (ruling 558; the same discipline SAFARI-A11Y-PASS-0918 had to correct three times): pill light rgb(75,71,214) on rgb(244,243,254) ....... 6.02 : 1 dark rgb(180,177,255) on rgb(38,39,58) .......... 7.44 : 1 note light rgb(90,90,117) on the bubble ............. 6.66 : 1 dark rgb(154,156,184) on the bubble ............. 5.65 : 1 All four clear AA (4.5:1) with room to spare. proof/speak/*.json carries the readings. ============================================================================================== */ .mvn-speakrow { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; } .mvn-speak { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #4b47d6; background: #f4f3fe; border: 1px solid #e3e1fb; padding: 5px 11px; border-radius: 200px; cursor: pointer; max-width: 100%; transition: background .14s ease, border-color .14s ease; } .mvn-speak:hover:not(:disabled) { background: #eceafd; border-color: #d3d0f7; } .mvn-speak:disabled { cursor: default; opacity: .78; } .mvn-speak:focus-visible { outline: 2px solid #514dfa; outline-offset: 2px; } .mvn-speak i, .mvn-speak svg, .mvn-speak [data-lucide] { width: 13px; height: 13px; flex: 0 0 auto; stroke-width: 2.4; } .mvn-speak span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Playing: the same pill, stated as a stop control. Red is not used — this stops a read-aloud, it does not destroy anything, and the estate's red means an irreversible action. */ .mvn-speak[data-state="playing"] { background: #eae8fd; border-color: #cdc9f6; } /* The spinner turns only while the request is out, and stands still for reduced motion. */ .mvn-speak[data-state="loading"] i, .mvn-speak[data-state="loading"] svg { animation: mvnSpeakSpin 1s linear infinite; } @keyframes mvnSpeakSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mvn-speak[data-state="loading"] i, .mvn-speak[data-state="loading"] svg { animation: none; } } /* The honest sentence, when the provider refuses. Wraps under the pill on a phone. */ .mvn-speak-note { font: 500 11.5px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #5a5a75; flex: 1 1 160px; min-width: 0; } /* ── dark seat ────────────────────────────────────────────────────────────────────────────── */ .fs-dark .mvn-speak { color: #b4b1ff; background: #26273a; border-color: #33344a; } .fs-dark .mvn-speak:hover:not(:disabled) { background: #2d2e44; border-color: #3c3d56; } .fs-dark .mvn-speak[data-state="playing"] { background: #2f3049; border-color: #43446090; } .fs-dark .mvn-speak:focus-visible { outline-color: #8b87ff; } .fs-dark .mvn-speak-note { color: #9a9cb8; } /* ── 400px ──────────────────────────────────────────────────────────────────────────────────── The dock is a narrow column at phone width. The pill keeps its own line and the note takes the next one, so nothing is ever clipped and the row never pushes the bubble sideways. */ @media (max-width: 480px) { .mvn-speakrow { gap: 5px; } .mvn-speak-note { flex: 1 1 100%; } }