/* Reading aids (a11y.js): the tab on the right edge, plus what High contrast and Larger text do to the page. */
.a11y-bar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9990; display: flex; flex-direction: column; gap: 3px; }
.a11y-btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 12px 0 0 12px; background: #2b2024; color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(219, 164, 149, .55), 0 10px 24px -10px rgba(43, 32, 36, .7); transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.a11y-btn svg { display: block; width: 23px; height: 23px; }
.a11y-btn:hover { background: #45343a; }
.a11y-btn[aria-pressed="true"] { background: linear-gradient(135deg, #c9838c, #8f4f5a); }
.a11y-btn:focus-visible { outline: 3px solid #dba495; outline-offset: 2px; }
.a11y-tip { position: absolute; right: calc(100% + 8px); top: 50%; transform: translate(6px, -50%); padding: 9px 12px; border-radius: 8px; background: #2b2024; color: #fff; font: 600 14px/1 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.a11y-btn:focus-visible .a11y-tip { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .a11y-btn:hover .a11y-tip { opacity: 1; transform: translate(0, -50%); } }
@media (max-width: 640px) {
  .a11y-btn { width: 40px; height: 40px; border-radius: 10px 0 0 10px; }
  .a11y-btn svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .a11y-btn, .a11y-tip { transition: none; } }
@media print { .a11y-bar { display: none; } }

/* Larger text: the whole page grows by a fifth, so layouts in px and rem both scale and nothing overlaps */
html.a11y-bigtext body { zoom: 1.2; }
html.a11y-bigtext .a11y-fit { zoom: .8334; }

/* High contrast: white text on black, yellow links and buttons, no faint greys, gradients or shadows */
html.a11y-contrast { color-scheme: dark; }
html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast body *:not(.a11y-bar, .a11y-bar *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; }
html.a11y-contrast body *:not(.a11y-bar, .a11y-bar *)::before,
html.a11y-contrast body *:not(.a11y-bar, .a11y-bar *)::after { background-color: transparent !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; -webkit-text-fill-color: currentColor !important; }
html.a11y-contrast body a:not(.a11y-bar *), html.a11y-contrast body a *:not(.a11y-bar *) { color: #ffe14d !important; }
html.a11y-contrast body a:not(.a11y-bar *, .btn) { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-contrast body :is(button, [role="button"], .btn, summary):not(.a11y-bar *) { color: #ffe14d !important; }
html.a11y-contrast body :is(button, [role="button"], .btn, input, select, textarea):not(.a11y-bar *) { outline: 2px solid #ffe14d !important; outline-offset: -2px; }
html.a11y-contrast body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }
html.a11y-contrast body ::placeholder { color: #d0d0d0 !important; -webkit-text-fill-color: #d0d0d0 !important; opacity: 1; }
html.a11y-contrast ::selection { background: #ffe14d; color: #000; -webkit-text-fill-color: #000; }
html.a11y-contrast .a11y-btn { background: #000; color: #ffe14d; box-shadow: inset 0 0 0 2px #ffe14d; }
html.a11y-contrast .a11y-btn[aria-pressed="true"] { background: #ffe14d; color: #000; }
html.a11y-contrast .a11y-tip { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; }