/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY WIDGET

   v1 and v2 both carry one; this build did not, and losing it was a regression
   the client caught. Feature parity with the React component in
   /root/idangates/src/components/AccessibilityWidget.tsx — same five toggles,
   same text sizing, same localStorage key (idg-a11y) — so a visitor who used
   one of the older builds finds the same controls here.

   Everything is scoped under html.a11y-* set by a11y.js, so nothing here costs
   anything until a visitor actually turns something on.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the button ──
   Bottom-left. The fixed .mbar CTA owns the bottom edge on a phone, so the
   button is lifted clear of it there rather than sitting on top of the one
   control we most want tapped. */
.a11y-fab{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:var(--azure-ink,#0972ab);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px -10px rgba(8,21,31,.55);transition:transform .2s,background .2s}
.a11y-fab svg{width:27px;height:27px;display:block;fill:currentColor}
.a11y-fab:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:820px){
  .a11y-fab{inset-block-end:calc(86px + var(--pad,0px));width:48px;height:48px}
  .a11y-fab svg{width:25px;height:25px}
}
@media(hover:hover){.a11y-fab:hover{background:var(--azure-lite,#00a0e0);transform:scale(1.06)}}

/* ── the panel ── */
.a11y-panel{position:fixed;inset-block-end:86px;inset-inline-end:22px;z-index:71;
  width:min(310px,calc(100vw - 44px));background:#fff;color:var(--ink,#0f2333);
  border:1px solid var(--line,rgba(15,35,51,.14));border-radius:4px;
  box-shadow:0 26px 60px -26px rgba(8,21,31,.55);padding:16px;
  font-family:var(--body,Assistant,sans-serif)}
.a11y-panel[hidden]{display:none}
@media(max-width:820px){.a11y-panel{inset-block-end:calc(144px + var(--pad,0px))}}
.a11y-panel .hd{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.a11y-panel .hd b{font-family:var(--display,Rubik,sans-serif);font-size:17px;font-weight:800;
  letter-spacing:-.02em}
.a11y-panel .x{width:36px;height:36px;border:1px solid var(--line,rgba(15,35,51,.14));
  background:none;border-radius:2px;cursor:pointer;font-size:19px;line-height:1;
  color:var(--ink-2,#54606b)}
.a11y-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.a11y-row span{flex:1;font-size:15px;font-weight:600}
.a11y-step{width:42px;height:42px;border:1px solid var(--line,rgba(15,35,51,.14));
  background:#fff;border-radius:2px;cursor:pointer;font-size:19px;font-weight:700;
  color:var(--ink,#0f2333);line-height:1}
.a11y-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:46px;padding:0 13px;margin-bottom:6px;
  border:1px solid var(--line,rgba(15,35,51,.14));background:#fff;border-radius:2px;
  cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;
  color:var(--ink,#0f2333);text-align:start}
.a11y-toggle i{flex:none;width:34px;height:20px;border-radius:100px;
  background:var(--line,rgba(15,35,51,.14));position:relative;transition:background .18s}
.a11y-toggle i::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s}
.a11y-toggle[aria-pressed="true"]{border-color:var(--azure-ink,#0972ab)}
.a11y-toggle[aria-pressed="true"] i{background:var(--azure-ink,#0972ab)}
.a11y-toggle[aria-pressed="true"] i::after{transform:translateX(-14px)}
.a11y-reset{width:100%;min-height:44px;margin-top:8px;border:1px solid var(--line,rgba(15,35,51,.14));
  background:none;border-radius:2px;cursor:pointer;font-family:inherit;font-size:14.5px;
  font-weight:600;color:var(--ink-2,#54606b)}
.a11y-panel .note{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink-3,#66635c)}
.a11y-panel .note a{color:var(--azure-ink,#0972ab);text-decoration:underline;
  text-underline-offset:3px}
@media(hover:hover){
  .a11y-step:hover,.a11y-reset:hover{border-color:var(--azure-ink,#0972ab)}
  .a11y-toggle:hover{border-color:var(--azure-ink,#0972ab)}
  .a11y-panel .x:hover{border-color:var(--azure-ink,#0972ab);color:var(--ink,#0f2333)}
}

/* ══ what the toggles actually do ══
   The filter is applied to the page's own top-level blocks rather than to body,
   because a filter on an ancestor becomes a containing block for fixed children
   — the widget would be dragged into it and tinted along with everything else. */
html.a11y-contrast body>*:not(.a11y-fab):not(.a11y-panel){filter:contrast(1.4) saturate(1.3)}

html.a11y-links a:not(.a11y-fab){text-decoration:underline!important;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* a plain, wide-set stack with unambiguous letterforms, and no negative tracking
   — the display face is tightened by -.04em, which is the first thing to go */
html.a11y-readable body>*:not(.a11y-fab):not(.a11y-panel),
html.a11y-readable body>*:not(.a11y-fab):not(.a11y-panel) *{
  font-family:Arial,"Segoe UI",sans-serif!important;letter-spacing:normal!important}

html.a11y-no-anim *,html.a11y-no-anim *::before,html.a11y-no-anim *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}

html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 2 L6 34 L14 26 L20 40 L26 37 L20 24 L32 24 Z' fill='%23fff' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") 4 2,auto!important}