/* Accessibility options (a11y.js, 2026-10-07). The bubble sits bottom-left so it never covers the page's own buttons. */
.a11y-fab { position: fixed; left: 16px; bottom: 16px; z-index: 1000; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; border: 2px solid var(--accent, #2d5bd6); background: var(--surface, #fff); color: var(--ink, #131c26); font: inherit; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.a11y-fab:focus-visible, .a11y-panel button:focus-visible, .a11y-panel input:focus-visible { outline: 3px solid var(--accent, #2d5bd6); outline-offset: 2px; }
.a11y-icon { font-size: 1.3rem; line-height: 1; }
.a11y-panel { position: fixed; left: 16px; bottom: 72px; z-index: 1001; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto;
  background: var(--surface, #fff); color: var(--ink, #131c26); border: 1px solid var(--line, #d6dce3); border-radius: 14px; padding: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  overscroll-behavior: contain; }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.a11y-close { min-width: 44px; min-height: 44px; border: 0; background: none; color: inherit; font-size: 1.4rem; cursor: pointer; }
.a11y-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.a11y-size { min-width: 44px; min-height: 40px; border: 1px solid var(--line, #d6dce3); border-radius: 8px; background: var(--bg, #f2f4f6); color: inherit; font: inherit; cursor: pointer; }
.a11y-size[aria-pressed="true"] { border: 2px solid var(--accent, #2d5bd6); font-weight: 700; }
.a11y-check { cursor: pointer; flex-wrap: nowrap; align-items: flex-start; } .a11y-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; }
.a11y-reset { margin-top: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line, #d6dce3); border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.a11y-note { font-size: .85rem; color: var(--muted, #4d5a68); margin: 10px 0 0; }
@media print { .a11y-fab, .a11y-panel { display: none !important; } }

/* the options themselves */
html.a11y-t1 { font-size: 112.5%; } html.a11y-t2 { font-size: 125%; } html.a11y-t3 { font-size: 150%; }
html.a11y-t1 body { font-size: 1.125rem; } html.a11y-t2 body { font-size: 1.25rem; } html.a11y-t3 body { font-size: 1.5rem; }
/* high contrast is always black on white, also when the visitor's device is in dark mode, so every colour is set here */
html.a11y-contrast, html.a11y-contrast[data-theme] { --bg: #ffffff; --surface: #ffffff; --ink: #000000; --muted: #1a1a1a; --line: #000000; --accent: #0033cc; --accent-ink: #ffffff;
  --sig: #5c3700; --sig-soft: #ffffff; --paper: #ffffff; --ok: #0b5a2c; --bad: #8f1d16; --link: #0033cc; --trace: #0033cc; --grid: transparent; color-scheme: light; }
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast a { color: #0033cc; }
html.a11y-contrast .btn, html.a11y-contrast button { border-color: #000 !important; }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-readable body { letter-spacing: .04em; word-spacing: .12em; font-family: Verdana, Tahoma, "Segoe UI", sans-serif; }
html.a11y-spacing body { line-height: 1.9; } html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1em; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-panel { transition: none; } }

/* compact bubble (2026-10-07): an icon-only round button so it covers less of the page; its name stays "Accessibility options" */
.a11y-fab { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.a11y-fab > :not(.a11y-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phones (2026-10-17): slides away while scrolling down so it never sits over the text being read (a11y.js); back on scroll up / stop */
.a11y-fab { transition: transform .2s ease, opacity .2s ease; }
.a11y-fab.a11y-fab-away { transform: translateY(90px); opacity: 0; pointer-events: none; }