/* Accessibility panel (round 7, 2026-10-21). Our own widget, no third-party overlay: a slim tab on the left edge,
   vertically centred so it never meets the chat launcher (bottom right), the phone call bar (bottom, <=820 px) or the
   cookie banner. The tab opens a non-modal dialog. Choices live in localStorage "adm-a11y" and are applied before
   first paint as tokens in html[data-a11y] by the inline script in base.j2. Markup: base.j2, logic: a11y.js. */

/* ---------- the tab ---------- */
.a11y { --a-s: 4px; --a-s2: 8px; --a-navy: #0A1428; --a-ink: #E8EEF9; --a-muted: #A9BAD8; --a-line: #22345A; --a-tile: #0F1D38; --a-cyan: #00E6FF; --a-acc: #00BBFF;
  font: 500 15px/1.45 var(--f-body); color: var(--a-ink); }
.a11y-tab { position: fixed; z-index: 58; left: 0; top: 50%; width: 36px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--a-cyan); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.a11y-tab[hidden] { display: none; }
/* the fill and its 1 px ring sit in a clipped layer, so the button's own focus outline is never clipped away */
.a11y-tab-bg { position: absolute; inset: 0; z-index: -1; background: rgba(0, 230, 255, .38);
  clip-path: polygon(0 0, calc(100% - var(--a-s2)) 0, calc(100% - var(--a-s2)) var(--a-s), calc(100% - var(--a-s)) var(--a-s), calc(100% - var(--a-s)) var(--a-s2), 100% var(--a-s2), 100% calc(100% - var(--a-s2)), calc(100% - var(--a-s)) calc(100% - var(--a-s2)), calc(100% - var(--a-s)) calc(100% - var(--a-s)), calc(100% - var(--a-s2)) calc(100% - var(--a-s)), calc(100% - var(--a-s2)) 100%, 0 100%); }
.a11y-tab-bg::before { content: ""; position: absolute; inset: 1px 1px 1px 0; background: var(--a-navy); transition: background-color 120ms var(--ease, ease);
  clip-path: inherit; }
.a11y-tab svg { width: 22px; height: 22px; transition: transform 240ms var(--ease, ease); }
.a11y-tab:hover .a11y-tab-bg::before { background: #12264A; }
.a11y-tab:hover svg { transform: scale(1.08); }
.a11y-tab:focus-visible { outline: 3px solid var(--a-cyan); outline-offset: 2px; }
[data-theme="light"] .a11y-tab:focus-visible { outline-color: #0062B3; }
@media (min-width: 821px) { .a11y-tab { width: 40px; height: 48px; margin-top: -24px; } .a11y-tab svg { width: 24px; height: 24px; } }

/* ---------- the panel (navy in both themes, like the header and footer chrome) ---------- */
.a11y-panel { position: fixed; z-index: 75; left: 0; top: 50%; transform: translateY(-50%); width: min(320px, calc(100vw - 40px));
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 18px 16px; background: var(--a-navy); color: var(--a-ink);
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--a-line), inset 3px 0 0 var(--a-acc); }
.a11y-panel[hidden] { display: none; }
@media (max-width: 820px) { .a11y-panel { top: calc(50% - 20px); max-height: calc(100dvh - 190px); } }
@media (prefers-reduced-motion: no-preference) {
  .a11y-panel.is-in { animation: a11yIn 220ms cubic-bezier(.2, 0, 0, 1) both; }
  @keyframes a11yIn { from { opacity: 0; transform: translate(-14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
}
.a11y-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.a11y-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 20px/1.2 var(--f-head); letter-spacing: -.01em; color: #fff; }
.a11y-title::before { content: ""; width: 8px; height: 8px; background: var(--a-acc); flex: none; }
.a11y-x { position: relative; flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; padding: 0; border: 0; background: none; color: var(--a-ink); cursor: pointer; display: grid; place-items: center; }
.a11y-x svg { width: 20px; height: 20px; }
.a11y-x:hover { color: var(--a-cyan); }
.a11y-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--a-muted); }
.a11y-lbl { margin: 0 0 8px; font: 700 12px/1.2 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--a-muted); }
.a11y-size { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.a11y-opt { --c: 7px; position: relative; display: flex; align-items: flex-end; width: 100%; min-height: 56px; padding: 22px 10px 9px; border: 0; cursor: pointer; text-align: left;
  font: 600 13.5px/1.25 var(--f-body); color: var(--a-ink); background: var(--a-tile);
  box-shadow: inset 0 0 0 1px var(--a-line); transition: background-color 120ms, box-shadow 120ms; }
.a11y-size .a11y-opt { min-height: 48px; padding: 0 6px; align-items: center; justify-content: center; text-align: center; font: 700 15px/1 var(--f-head); }
.a11y-size .a11y-opt:nth-child(2) { font-size: 17px; }
.a11y-size .a11y-opt:nth-child(3) { font-size: 19px; }
/* the pixel square: hollow when off, filled cyan when on (state is aria-pressed, the square only mirrors it) */
.a11y-opt::after { content: ""; position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--a-muted); }
.a11y-size .a11y-opt::after { display: none; }
.a11y-opt:hover { background: #142649; }
.a11y-opt[aria-pressed="true"] { background: rgba(0, 187, 255, .14); box-shadow: inset 0 0 0 2px var(--a-acc); color: #fff; }
.a11y-opt[aria-pressed="true"]::after { background: var(--a-cyan); box-shadow: none; }
.a11y-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--a-line); }
.a11y-reset { min-height: 44px; padding: 0 14px; border: 0; cursor: pointer; font: 700 14px/1 var(--f-head); color: var(--a-navy); background: #fff;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.a11y-reset:hover { background: var(--a-cyan); }
.a11y-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--a-cyan); text-decoration: underline; text-underline-offset: .2em; }
.a11y-panel :focus-visible { outline: 3px solid var(--a-cyan); outline-offset: 2px; }
.a11y-reset:focus-visible { outline-offset: 3px; }
.a11y-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- what each choice does to the page ---------- */
/* text size: CSS zoom scales every px-sized type and box on the page, the way browser zoom does, and reflows */
html[data-a11y~="t1"] body { zoom: 1.15; }
html[data-a11y~="t2"] body { zoom: 1.3; }
html[data-a11y~="t1"] .a11y { zoom: .87; }
html[data-a11y~="t2"] .a11y { zoom: .77; }

/* line and letter spacing: the WCAG 1.4.12 text-spacing values */
html[data-a11y~="sp"] body :is(p, li, dd, dt, td, th, label, blockquote, figcaption, summary) { line-height: 1.8 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-a11y~="sp"] body :is(p, li, blockquote) { margin-bottom: .6em; }
html[data-a11y~="sp"] body :is(h1, h2, h3, h4) { line-height: 1.3 !important; letter-spacing: .02em !important; word-spacing: .12em !important; }
html[data-a11y~="sp"] .a11y :is(p, li) { margin-bottom: 0; }

/* high contrast: the muted greys go to full ink, lines get darker, gradient text turns solid, the grain goes */
html[data-a11y~="hc"] { --ink: #000; --ink-2: #000; --muted: #1C2638; --line: #5B6B85; --line-2: #3B4B66; --accent-ink: #00468A; --win-ink: #000; --win-muted: #1C2638; --navy-muted: #E8EEF9; }
html[data-a11y~="hc"][data-theme="dark"] { --bg: #000; --bg-2: #050A14; --ink: #fff; --ink-2: #fff; --muted: #E8EEF9; --line: #7F93B5; --line-2: #A9BAD8; --accent-ink: #7FE4FF; --win-ink: #fff; --win-muted: #E8EEF9; }
html[data-a11y~="hc"] body::after { display: none; }
html[data-a11y~="hc"] .acc { background: none; color: var(--accent-ink); -webkit-text-fill-color: currentColor; }
html[data-a11y~="hc"] .hdr { --h-muted: var(--h-ink); --h-ink-2: var(--h-ink); --h-glass: rgba(255, 255, 255, .98); }
html[data-a11y~="hc"][data-theme="dark"] .hdr { --h-glass: rgba(0, 0, 0, .96); }

/* underline links */
html[data-a11y~="ul"] a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em !important; }
html[data-a11y~="ul"] a.a11y-tab { text-decoration: none !important; }

/* readable font: the system sans the visitor's device already has, no webfonts */
html[data-a11y~="rf"], html[data-a11y~="rf"] body { --f-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html[data-a11y~="rf"] body :not(svg, svg *) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }

/* stop animations: every CSS animation lands on its last frame, no transitions, no smooth scroll (the JS loops read
   the same choice through matchMedia, see the head snippet in base.j2) */
html[data-a11y~="rm"] { scroll-behavior: auto !important; }
html[data-a11y~="rm"] *, html[data-a11y~="rm"] *::before, html[data-a11y~="rm"] *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* big cursor: a 40 px arrow, and a 40 px hand on anything clickable */
html[data-a11y~="cur"], html[data-a11y~="cur"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 3l26 15-11 2.6L26.5 34l-5.2 2.4-6.4-13.6L7 30z' fill='%23000' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important; }
html[data-a11y~="cur"] :is(a, button, summary, label, select, [role="button"], input[type="checkbox"], input[type="radio"]), html[data-a11y~="cur"] :is(a, button, summary, label, [role="button"]) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M14 4.5a3 3 0 0 1 6 0V17l2-.3a3 3 0 0 1 4.6 1.6 3 3 0 0 1 4.4 1.7 3 3 0 0 1 4 2.7V29c0 5-3.5 8.5-8.5 8.5h-4.4c-3 0-5.4-1.3-7-3.7L8 25.4a3 3 0 0 1 4.7-3.7l1.3 1.6z' fill='%23000' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 15 3, pointer !important; }
html[data-a11y~="cur"] :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { cursor: text !important; }

/* highlight focus: a thick two-tone ring on whatever has focus, mouse or keyboard */
html[data-a11y~="fo"] :focus, html[data-a11y~="fo"] :focus-visible { outline: 3px solid #0A1428 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #00E6FF !important; }
html[data-a11y~="fo"][data-theme="dark"] :focus, html[data-a11y~="fo"][data-theme="dark"] :focus-visible { outline-color: #fff !important; }
html[data-a11y~="fo"] .a11y-panel :focus, html[data-a11y~="fo"] .a11y-tab:focus { outline-color: #fff !important; }

@media print { .a11y { display: none !important; } }

/* ---------- round 7b: out of the way ---------- */
/* hides while scrolling down (a11y.js toggles .is-away), slides back on scroll up or when scrolling stops */
.a11y-tab { transition: transform 260ms cubic-bezier(.2, 0, 0, 1), opacity 200ms ease; }
.a11y-tab.is-away { transform: translateX(-110%); opacity: 0; pointer-events: none; }
/* phones: a slim edge handle (three pixel squares) instead of the full tab; the invisible hit area stays 32 x 52 px */
@media (max-width: 820px) {
  .a11y-tab { width: 12px; height: 52px; margin-top: -26px; }
  .a11y-tab svg { display: none; }
  .a11y-tab .a11y-tab-bg { --a-s: 2px; --a-s2: 4px; }
  .a11y-tab::before { content: ""; width: 4px; height: 4px; background: var(--a-cyan); box-shadow: 0 -9px 0 var(--a-cyan), 0 9px 0 var(--a-cyan); }
  .a11y-tab::after { content: ""; position: absolute; left: 0; top: -2px; width: 32px; height: calc(100% + 4px); }
  .a11y-tab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .a11y-tab { transition: none; } }