/* The accessibility panel — its chrome, and what its controls actually do.
   Loaded by every page, so the panel looks and behaves identically everywhere.
   It reads the same custom properties the page defines, which is why "high
   contrast" works on the landing page and the policy pages alike. */
/* ── the accessibility panel ─────────────────────────────────────────────── */
.a11y{position:fixed;inset-block-end:16px;inset-inline-start:16px;z-index:50}
.a11y-fab{width:46px;height:46px;border-radius:50%;border:1px solid var(--live-edge);
          background:var(--live);color:#fff;cursor:pointer;display:grid;place-items:center;
          box-shadow:0 2px 10px rgb(11 18 32/.18)}
.a11y-fab:hover{background:#0a5c5f}
.a11y-panel{position:absolute;inset-block-end:56px;inset-inline-start:0;width:248px;
            background:var(--surface);border:1px solid var(--line);border-radius:12px;
            padding:14px;box-shadow:0 8px 28px rgb(11 18 32/.16);
            display:flex;flex-direction:column;gap:7px}
/* `hidden` sets display:none, and the rule above outranks it — without this the panel
   is open on every page load. A dialog that cannot be closed is not a dialog. */
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.a11y-head strong{font-size:15px}
.a11y-x{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:15px;
        line-height:1;padding:4px}
.a11y-row{display:flex;gap:7px}
.a11y-row button{flex:1}
.a11y-panel button{font:inherit;font-size:14px;text-align:start;padding:8px 11px;
                   border:1px solid var(--line);border-radius:8px;background:var(--sunken);
                   color:var(--ink);cursor:pointer}
.a11y-panel button:hover{border-color:var(--live-edge)}
.a11y-panel button[aria-pressed="true"]{background:var(--live-wash);border-color:var(--live-edge);
                                        color:var(--live);font-weight:600}
.a11y-reset{text-align:center !important;margin-top:3px}
.a11y-note{font-size:12.5px;color:var(--ink-faint);margin-top:6px;line-height:1.5}
.a11y-link{font-size:13px;color:var(--live)}

/* ── what the panel's controls actually do ───────────────────────────────── */
.a11y-contrast{--paper:#fff;--surface:#fff;--sunken:#f2f2f2;--line:#000;
               --ink:#000;--ink-soft:#000;--ink-faint:#333;--live:#00524f;
               --live-wash:#e8f2f1;--live-edge:#00524f}
@media (prefers-color-scheme:dark){
  .a11y-contrast{--paper:#000;--surface:#000;--sunken:#111;--line:#fff;
                 --ink:#fff;--ink-soft:#fff;--ink-faint:#ddd;--live:#7fe3dd;
                 --live-wash:#062b29;--live-edge:#7fe3dd}
}
.a11y-gray{filter:grayscale(1)}
/* underline plus weight: distinguishable without relying on colour (WCAG 1.4.1) */
.a11y-links a{text-decoration:underline !important;text-underline-offset:2px;font-weight:600 !important}
.a11y-readable{--ui:Arial,"Helvetica Neue",Helvetica,sans-serif;--display:Arial,sans-serif}
.a11y-readable body,.a11y-readable .legal h1,.a11y-readable .mark{font-family:var(--ui) !important}
.a11y-still *,.a11y-still *::before,.a11y-still *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important}

/* The grayscale filter applies to the whole document, the panel included. Counter-filter
   it so the control that turns the setting OFF is not itself washed out — a user who
   cannot read the panel cannot leave the mode. */
.a11y-gray .a11y{filter:grayscale(0)}

/* Preferences are for the screen. High contrast and enlarged text following the user
   onto paper is not what they asked for. */
@media print{
  html[class*="a11y-"]{filter:none !important;font-size:100% !important}
  .a11y{display:none !important}
}