/*!
* Accessibility Widget — styles
* ------------------------------
* Load this alongside accessibility-widget.js, e.g. in :
*
*/
/* ---------- feature classes (applied to ) ---------- */
/* Text spacing levels */
html.a11y-spacing-1 body, html.a11y-spacing-1 body * { letter-spacing: .08em !important; word-spacing: .16em !important; }
html.a11y-spacing-2 body, html.a11y-spacing-2 body * { letter-spacing: .14em !important; word-spacing: .3em !important; }
html.a11y-spacing-3 body, html.a11y-spacing-3 body * { letter-spacing: .2em !important; word-spacing: .5em !important; }
/* Line height levels */
html.a11y-lineheight-1 body, html.a11y-lineheight-1 body * { line-height: 1.8 !important; }
html.a11y-lineheight-2 body, html.a11y-lineheight-2 body * { line-height: 2.2 !important; }
html.a11y-lineheight-3 body, html.a11y-lineheight-3 body * { line-height: 2.6 !important; }
/* Highlight links */
html.a11y-links a { outline: 3px solid #f6c000 !important; outline-offset: 2px; background: #fff3b0 !important; color: #0b2545 !important; text-decoration: underline !important; }
/* Hide images (keeps layout, hides visuals incl. backgrounds) */
html.a11y-noimg img, html.a11y-noimg picture, html.a11y-noimg svg:not(.a11yw svg), html.a11y-noimg video { visibility: hidden !important; }
html.a11y-noimg body *:not(.a11yw):not(.a11yw *) { background-image: none !important; }
/* Big cursor (inline SVG arrow) */
html.a11y-cursor, html.a11y-cursor * {
cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important;
}
/* ADHD reading mask overlays */
.a11y-mask { position: fixed; left: 0; right: 0; background: rgba(0,0,0,.55); z-index: 2147483600; pointer-events: none; }
/* ---------- widget panel styles (scoped under .a11yw) ---------- */
/* Single source of truth for where the widget lives. The toggle button
and the panel both read from these, so they can never drift apart —
change --a11yw-edge / --a11yw-size here and both move together. */
:root {
--a11yw-edge: 18px; /* distance from the corner of the viewport */
--a11yw-size: 56px; /* toggle button diameter */
--a11yw-gap: 10px; /* gap between the toggle button and the panel */
}
.a11yw { position: fixed; z-index: 2147483646; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.a11yw *, .a11yw *::before, .a11yw *::after { box-sizing: border-box; }
.a11yw-toggle {
position: fixed;width: var(--a11yw-size); height: var(--a11yw-size); border-radius: 20px;background: #cc8328; color: #fff; border: none; cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; font-size: 26px; z-index: 2147483646;right: 0px;bottom: calc(100vh - 50%);
}
.a11yw-toggle:focus-visible { outline: 3px solid #f6c000; outline-offset: 3px; }
/* Wrapper for the icon(s) inside the toggle button. Add more icon
elements (svg/span/img) inside this wrapper in the HTML and they'll
lay out side by side automatically. */
.a11yw-toggle-icons { display: flex; align-items: center; justify-content: center; gap: 4px; }
.a11yw-icon { width: 26px; height: 26px; fill: currentColor; flex: none; }
.a11yw-toggle-icons .a11yw-icon + .a11yw-icon { width: 18px; height: 18px; } /* extra icons render a bit smaller */
/*
* Panel position: `right`/`top`/`bottom` here are only a FALLBACK
* (used for the split second before JS runs, or if JS fails).
* The real positioning is done by positionPanel() in the JS file,
* which reads the toggle button's actual on-screen position every
* time the panel opens and sets inline top/bottom/right so the panel
* always appears right next to the button — wherever the button is.
*/
.a11yw-panel {
position: fixed; right: var(--a11yw-edge);
bottom: calc(var(--a11yw-size) + var(--a11yw-edge) + var(--a11yw-gap));
width: 340px; max-width: calc(100vw - 24px);
max-height: min(72vh, 640px); overflow-y: auto; background: #fff; border-radius: 14px;
box-shadow: 0 10px 40px rgba(0,0,0,.28); padding: 14px; display: none;
}
.a11yw-panel.open { display: block; }
.a11yw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 12px; }
.a11yw-title { font-size: 15px; font-weight: 600; color: #223; }
/* Close (×) button in the panel header */
.a11yw-close {
background: transparent; border: none; cursor: pointer;
width: 28px; height: 28px; flex: none; border-radius: 8px;
font-size: 20px; line-height: 1; color: #667; display: flex;
align-items: center; justify-content: center;
}
.a11yw-close:hover { background: #eef1f6; color: #223; }
.a11yw-close:focus-visible { outline: 3px solid #1a56db; outline-offset: 1px; }
.a11yw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a11yw-btn {
background: #fff; border: 1px solid #e2e6ee; border-radius: 10px; padding: 12px 6px 10px;
display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
font-size: 11.5px; line-height: 1.25; color: #23324d; text-align: center; min-height: 78px;
}
.a11yw-btn:hover { border-color: #1a56db; }
.a11yw-btn:focus-visible { outline: 3px solid #1a56db; outline-offset: 1px; }
.a11yw-btn.active { background: #1a56db; border-color: #1a56db; color: #fff; }
.a11yw-btn .a11yw-ico { font-size: 19px; line-height: 1; }
.a11yw-btn .a11yw-lv { font-size: 10px; opacity: .75; }
.a11yw-reset {
width: 100%; margin-top: 12px; background: #1a56db; color: #fff; border: none;
border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.a11yw-reset:hover { background: #164bc4; }
/* keep widget usable when page is inverted */
html.a11y-invert .a11yw-panel, html.a11y-invert .a11yw-toggle,
html.a11y-contrast-1 .a11yw-panel, html.a11y-contrast-1 .a11yw-toggle { filter: invert(1) hue-rotate(180deg); }
/* ==========================================================================
Read-aloud additions — append to accessibility-widget.css
========================================================================== */
/* Block currently being spoken. Colours are hard-coded rather than
inherited so the highlight survives the invert / contrast filters. */
.a11y-reading {
background: #FFF3B0 !important;
color: #16202B !important;
box-shadow: 0 0 0 2px #9C7A16;
border-radius: 2px;
scroll-margin-block: 25vh;
}
/* Unavailable controls: Stop before reading starts, or both where the
browser has no speech synthesis. */
.a11yw-btn:disabled {
opacity: .45;
cursor: not-allowed;
filter: grayscale(1);
}
.a11yw-btn:disabled:hover {
background: inherit;
}
/* Status messages for screen readers only. */
.a11yw-live {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
/* The icon glyph swaps between ▶ and ⏸ — keep the box from reflowing. */
.a11yw-btn .a11yw-ico {
min-width: 1.25em;
text-align: center;
}