/* Site-wide dictation mic. Uses the site tokens, so it follows every palette and the light/dark toggle without knowing anything about either. Nothing here styles the page's own markup. The buttons sit at the end of and are positioned over their field in document coordinates by voice.js. An earlier version wrapped each field in a positioning element and broke any layout that sized a field through the DOM structure: the review form and the article response box both collapsed to default-sized boxes. A tool that runs on every page cannot restructure markup it has never seen. */ .bgwv-btn{position:absolute;z-index:20;display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;padding:0;margin:0;border:0;border-radius:8px;cursor:pointer;line-height:1; /* Tinted rather than grey. A faint grey icon reads as decoration and gets missed, which defeats the point: somebody who does not want to type has to notice they need not. */ background:color-mix(in srgb,var(--accent,#9b2f2c) 10%,transparent); color:var(--accent,#9b2f2c); transition:background .2s,color .2s} /* Over a textarea the button can sit on top of typed text, so it needs to be opaque. Same tint as the others, mixed into the page colour rather than left transparent, so both look alike. */ .bgwv-btn-area{background:color-mix(in srgb,var(--accent,#9b2f2c) 10%,var(--bg,#faf7f2)); box-shadow:0 0 0 4px var(--bg,#faf7f2)} .bgwv-btn:hover{background:color-mix(in srgb,var(--accent,#9b2f2c) 20%,transparent)} .bgwv-btn-area:hover{background:color-mix(in srgb,var(--accent,#9b2f2c) 20%,var(--bg,#faf7f2)); box-shadow:0 0 0 4px var(--bg,#faf7f2)} .bgwv-btn:focus-visible{outline:2px solid var(--accent,#9b2f2c);outline-offset:2px} @keyframes bgwv-pulse{0%,100%{opacity:1}50%{opacity:.55}} .bgwv-btn.rec{background:var(--accent,#9b2f2c);color:#fff;animation:bgwv-pulse 1.4s ease infinite;box-shadow:none} .bgwv-btn.bgwv-blocked{background:transparent;color:var(--muted,#938a7e);cursor:help} /* While listening, mark the field itself so it is obvious which one is receiving the words. */ .bgwv-live{border-color:var(--accent,#9b2f2c)!important} @media(prefers-reduced-motion:reduce){.bgwv-btn.rec{animation:none}}