/* ══════════════════════════════════════════════════════════════════════════
Odysseus Accessibility Layer — a11y.css v1 (2026-09-03)
Durable: /opt/odysseus/data/custom-assets/custom/a11y.css
Served: /app/static/custom/a11y.css (docker cp after a container recreate)
Loads LAST of the stylesheets (after consilium-theme.css, before
user-theme.js). Palette-neutral: keys only on the shared `--e-*` token
schema every account theme defines (eggie/mifu/cy/consilium) plus the
`.ody-dark` class user-theme.js derives from the resolved --bg luminance.
Companion script: a11y.js (stamps the mode classes, skip links,
accessible names, tab/dialog semantics, the preferences panel).
MODE CLASSES on (a11y.js; unset = follow the OS media query):
.a11y-motion reduce motion .a11y-contrast high contrast
.a11y-text larger text .a11y-font readable font
.a11y-focus always-on focus .a11y-targets bigger tap targets
SPECIFICITY: `:root:root:root` = (0,3,0) — ties the deepest theme scope
(`:root[data-ody-user="x"].ody-dark`) and wins on source order; `!important`
on custom properties beats the inline --vars theme.js writes on .
DEFAULT (always-on) fixes are objective WCAG 2.2 AA items only:
§2 keyboard focus ring §4 skip links §6 underlined links in chat
§7 24px minimum control size §14 muted-text contrast (4.21 → 5.3:1)
Everything else is opt-in via the ♿ Accessibility panel (Alt+Shift+A).
Remove the and every rule in this file is gone — single unit.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
--a11y-ring: var(--e-teal-deep, var(--accent-primary, var(--red, #1a9488)));
--a11y-ring-halo: #ffffff; /* contrasting band inside the ring */
--a11y-panel-w: 380px;
}
:root.ody-dark { --a11y-ring-halo: #0b100f; }
/* ── 2. Keyboard focus — visible on EVERY control (WCAG 2.4.7 / 2.4.11) ──
style.css ships 97 `outline:none` rules (incl. `.list-item:focus`) and only
5 `:focus-visible` rules; the theme's zero-specificity halo loses to any
component box-shadow. This ring only fires on :focus-visible, so mouse
users see no change. Text fields keep their own theme glow (border +
halo) and get a lighter 2px outline so the composer look is untouched. */
:root:root :is(a[href], button, summary, [tabindex]:not([tabindex="-1"]),
[role="button"], [role="tab"], [role="menuitem"], [role="option"],
[role="switch"], [role="checkbox"], .list-item, .memory-tab, .admin-tab,
.icon-rail-btn, .minimized-dock-chip):focus-visible {
outline: 3px solid var(--a11y-ring) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px var(--a11y-ring-halo) !important;
}
/* rows that live inside overflow:hidden/scroll containers: inset ring so it
is never clipped at the container edge */
:root:root :is(.list-item, .memory-tab, .admin-tab, .icon-rail-btn,
.minimized-dock-chip, .session-folder-header, .section-header):focus-visible {
outline-offset: -3px !important;
box-shadow: inset 0 0 0 2px var(--a11y-ring-halo) !important;
}
:root:root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea, [contenteditable="true"]):focus-visible {
outline: 2px solid var(--a11y-ring) !important;
outline-offset: 1px !important;
}
:root:root :is(input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
outline: 3px solid var(--a11y-ring) !important;
outline-offset: 3px !important;
}
/* the composer already has a strong themed focus treatment (1.5px accent
border + glow) — leave it alone by default (§3 adds the ring in focus mode) */
:root:root:not(.a11y-focus) .chat-input-bar textarea:focus-visible {
outline: none !important;
}
/* ── 3. Always-show-focus mode: thick ring on :focus (mouse too), composer
included, plus a soft outer halo so it reads on busy backgrounds ──── */
:root:root:root.a11y-focus :is(a[href], button, summary, [tabindex]:not([tabindex="-1"]),
[role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"],
input, select, textarea, [contenteditable="true"], .list-item, .memory-tab,
.admin-tab, .icon-rail-btn, .minimized-dock-chip):focus {
outline: 4px solid var(--a11y-ring) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px var(--a11y-ring-halo), 0 0 0 9px color-mix(in srgb, var(--a11y-ring) 30%, transparent) !important;
}
:root:root:root.a11y-focus :is(.list-item, .memory-tab, .admin-tab, .icon-rail-btn,
.minimized-dock-chip, .session-folder-header, .section-header):focus {
outline-offset: -4px !important;
box-shadow: inset 0 0 0 2px var(--a11y-ring-halo) !important;
}
/* ── 4. Skip links (WCAG 2.4.1) — a11y.js injects them as body's first child.
Off-screen until focused; then a floating pill at the top-left. ───── */
.a11y-skips {
position: fixed; top: 10px; left: 10px; z-index: 2147481000;
display: flex; gap: 8px; pointer-events: none;
}
.a11y-skip {
pointer-events: auto;
position: absolute; left: 0; top: 0;
transform: translateY(-300%);
padding: 10px 14px; white-space: nowrap;
background: var(--panel, #fff); color: var(--fg, #111);
border: 2px solid var(--a11y-ring); border-radius: 10px;
font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
text-decoration: none; box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
transition: transform .12s ease;
}
.a11y-skip + .a11y-skip { left: 132px; }
.a11y-skip:focus, .a11y-skip:focus-visible {
transform: none;
outline: 3px solid var(--a11y-ring) !important; outline-offset: 2px !important;
}
/* skip-link target: no ring on the landmark itself (programmatic focus) */
#chat-container:focus { outline: none; }
/* ── 5. Utilities ──────────────────────────────────────────────────────── */
.a11y-sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ── 6. Links inside chat content are distinguishable without colour
(WCAG 1.4.1). Buttons/chips styled as are excluded. ───────────── */
:root:root .chat-history .msg a[href]:not([class*="btn"]):not([role="button"]):not(.chip) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .16em;
}
/* ── 7. Target size (WCAG 2.5.8): 24 × 24 CSS px floor on every real button.
min-* wins over an explicit smaller height regardless of specificity,
so the 20–22px toolbar/menu buttons grow 2–4px; nothing else moves. */
:root:root button:not(.a11y-nomin) { min-width: 24px; min-height: 24px; }
:root:root .list-item-plus-btn { min-height: 22px; } /* inline "+ document" pill — sits inside a 26px row; keep the row height */
/* ── 8. Reduce-motion mode (same intent as prefers-reduced-motion, but
switchable in-app; the ambient effects only read the OS media query
once at load, so they are hidden here) ───────────────────────────── */
:root:root:root.a11y-motion body *,
:root:root:root.a11y-motion body *::before,
:root:root:root.a11y-motion body *::after {
transition-duration: .001ms !important;
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
:root:root:root.a11y-motion {
scroll-behavior: auto !important;
--bg-effect-intensity: 0 !important; /* stock synapse/rain/petals/… canvases */
}
:root:root:root.a11y-motion :is(#bubbleCanvas, #snowCanvas, #cloudCanvas, #constCanvas,
#synapse-canvas, #rain-canvas, #constellations-canvas, #perlin-flow-canvas,
#petals-canvas, #sparkles-canvas, #embers-canvas, .petal, .startrail) {
display: none !important;
}
:root:root:root.a11y-motion .send-btn:hover { transform: none !important; }
:root:root:root.a11y-motion .msg:hover { box-shadow: none !important; }
/* ── 8b. Ambient effects are opt-in (a11y-effects); when the switch is off after
they were started in this session, hide them until the next load ──── */
:root:root:root:not(.a11y-effects) :is(#bubbleCanvas, #snowCanvas, #cloudCanvas, #constCanvas, .petal, .startrail) {
display: none !important;
}
/* ── 9. High-contrast mode ─────────────────────────────────────────────────
Keeps each account's hue family but forces AA+ text everywhere:
near-black/near-white ink, accent text mixed toward black/white
(pink #ec7faf 2.55:1 → #824660 7.0:1 light; #f4b2cf 8.1:1 dark),
stronger borders, flat background, no grain, underlined links, and the
generated block below lifts every control style.css dims to opacity .3–.6. */
:root:root:root.a11y-contrast {
--a11y-ink: #111a19;
--a11y-ink-soft: #2c3a38; /* 11.9:1 on white */
--a11y-muted: #465552; /* 7.8:1 */
--a11y-accent: color-mix(in srgb, var(--e-pink, var(--accent-primary, var(--red, #c93f7b))) 55%, #000);
--a11y-accent-2: color-mix(in srgb, var(--e-teal, var(--color-accent, #178277)) 45%, #000);
--fg: var(--a11y-ink) !important;
--e-ink: var(--a11y-ink) !important;
--e-ink-soft: var(--a11y-ink-soft) !important;
--e-muted: var(--a11y-muted) !important;
--color-muted: var(--a11y-ink-soft) !important;
--color-muted-alt: var(--a11y-ink-soft) !important;
--color-subheader: var(--a11y-ink-soft) !important;
--hamburger-color: var(--a11y-ink) !important;
--e-pink-text: var(--a11y-accent) !important;
--e-teal-text: var(--a11y-accent-2) !important;
--accent-primary: var(--a11y-accent) !important;
--red: var(--a11y-accent) !important;
--brand-color: var(--a11y-accent) !important;
--color-accent: var(--a11y-accent-2) !important;
--color-link-hover: var(--a11y-accent-2) !important;
--color-success: var(--a11y-accent-2) !important;
--color-error: #a8173f !important;
--send-btn-bg: var(--a11y-accent) !important;
--send-btn-hover: var(--a11y-ink) !important;
--e-btn-ink: #ffffff !important;
--border: color-mix(in srgb, var(--a11y-ink) 42%, transparent) !important;
--bubble-border: color-mix(in srgb, var(--a11y-ink) 42%, transparent) !important;
--input-border: color-mix(in srgb, var(--a11y-ink) 55%, transparent) !important;
--code-fg: var(--a11y-ink) !important;
--hl-fg: var(--a11y-ink) !important;
--hl-comment: var(--a11y-muted) !important;
--hl-function: #1f5a7a !important;
--hl-number: #7a4614 !important;
--hl-keyword: var(--a11y-accent) !important;
--hl-string: var(--a11y-accent-2) !important;
--a11y-ring: var(--a11y-ink);
}
:root:root:root.a11y-contrast.ody-dark {
--a11y-ink: #f6f9f8; /* 13.2:1 on #282c34 */
--a11y-ink-soft: #d2dcd9; /* 10.0:1 */
--a11y-muted: #b3c0bd; /* 7.5:1 */
--a11y-accent: color-mix(in srgb, var(--e-pink, var(--accent-primary, var(--red, #f7a3c5))) 60%, #fff);
--a11y-accent-2: color-mix(in srgb, var(--e-teal, var(--color-accent, #7fe3da)) 65%, #fff);
--color-error: #ff8fae !important;
--e-btn-ink: #0b100f !important;
--send-btn-hover: #ffffff !important;
--hl-function: #9ccdf2 !important;
--hl-number: #f0c08a !important;
}
:root:root:root.a11y-contrast body { background: var(--bg) !important; }
:root:root:root.a11y-contrast body::after { content: none !important; }
:root:root:root.a11y-contrast :is(#bubbleCanvas, #snowCanvas, #cloudCanvas, #constCanvas) { display: none !important; }
:root:root:root.a11y-contrast { --bg-effect-intensity: 0 !important; }
:root:root:root.a11y-contrast a[href] { text-decoration: underline; text-underline-offset: .14em; }
:root:root:root.a11y-contrast :is(input, textarea, select)::placeholder { color: var(--a11y-muted) !important; opacity: 1 !important; }
:root:root:root.a11y-contrast :is(.msg, .msg-user, .msg-ai) { border-width: 1.5px !important; }
:root:root:root.a11y-contrast :is(button, .list-item, .memory-tab, .admin-tab) { text-shadow: none !important; }
/* gradient-text brand titles become plain ink (background-clip text has no contrast guarantee) */
:root:root:root.a11y-contrast :is(.sidebar-brand-title, .welcome-title) {
background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--fg) !important;
}
:root:root:root.a11y-contrast .send-btn { color: var(--e-btn-ink) !important; }
/* ── 10. Larger-text mode ─────────────────────────────────────────────────
html is 16px and body 0.9em (14.4px) in stock; density presets move html
to 13/16px. Here html goes to 18px (body ≈ 16.2px) and the generated block
below floors every ≤11px stock size at 12px. Line spacing follows WCAG
1.4.12 (1.5×) inside message content only — dense tool grids keep theirs. */
:root:root:root.a11y-text { font-size: 18px !important; }
:root:root:root.a11y-text .chat-history .msg { line-height: 1.6; }
:root:root:root.a11y-text .chat-history .msg p { margin-block: 0 1em; }
:root:root:root.a11y-text .chat-input-bar textarea { font-size: 17px !important; line-height: 1.5; }
:root:root:root.a11y-text .list-item { font-size: 14px; }
:root:root:root.a11y-text .list-item span { font-size: inherit !important; }
/* ── 11. Readable-font mode — Atkinson Hyperlegible (Braille Institute;
designed for low vision, dyslexia-friendly letterforms). a11y.js loads
the Google Fonts stylesheet only when this mode is on (CSP allows
fonts.googleapis.com / fonts.gstatic.com). Code, the doc editor (it is
character-aligned with an overlay) and SVG text are exempt. */
:root:root:root.a11y-font :where(body, body *:not(code, code *, pre, pre *, kbd, samp,
.mono, [class*="doc-editor"], [class*="doc-editor"] *, svg, svg *, .hljs, .hljs *)) {
font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif !important;
letter-spacing: .01em;
}
:root:root:root.a11y-font .chat-history .msg { word-spacing: .04em; }
/* ── 12. Bigger-targets mode — 44px minimum (iOS HIG / Android 48dp class)
on the controls people actually tap; fine pointers stay dense. ───── */
:root:root:root.a11y-targets :is(.memory-toolbar-btn, .icon-rail-btn, .user-bar-btn,
.close-btn, .admin-tab, .memory-tab, .section-header-btn, .session-menu-btn,
.session-bulk-btn, .theme-io-btn, .export-dl-btn, .incognito-btn, .attach-ocr-btn,
.chat-new-btn, .hamburger-btn, .minimized-dock-chip) {
min-width: 44px !important; min-height: 44px !important;
}
:root:root:root.a11y-targets .send-btn { min-width: 44px !important; width: 44px !important; height: 44px !important; }
:root:root:root.a11y-targets #sidebar .list-item { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
:root:root:root.a11y-targets :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; }
:root:root:root.a11y-targets .a11y-switch { width: 62px; height: 34px; }
:root:root:root.a11y-targets .a11y-switch .a11y-knob { width: 26px; height: 26px; }
:root:root:root.a11y-targets .a11y-switch[aria-checked="true"] .a11y-knob { transform: translateX(28px); }
/* ── 13. The ♿ Accessibility preferences panel (native