/*
 * Plannor accessibility menu: the effects each setting applies to the page,
 * then the menu's own look. Loaded by resources/views/partials/a11y/head.blade.php,
 * which also adds the html classes (a11y-*) before first paint.
 *
 * Everything the menu itself renders is marked .a11y-ui and excluded from the
 * page effects, so the menu stays usable whatever is switched on.
 */

/* ── Fonts (only downloaded when a font setting is on) ─────────────── */
@font-face{font-family:'A11y Atkinson';font-weight:400;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/atkinson-hyperlegible@5.2.8/files/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'A11y Atkinson';font-weight:700;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/atkinson-hyperlegible@5.2.8/files/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'A11y OpenDyslexic';font-weight:400;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff) format('woff')}
@font-face{font-family:'A11y OpenDyslexic';font-weight:700;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff) format('woff')}

/* ── Bigger text: public pages size text in rem, so this scales them like browser zoom (WCAG 1.4.4) ── */
html.a11y-text-1{font-size:115%}
html.a11y-text-2{font-size:130%}
html.a11y-text-3{font-size:145%}
html.a11y-text-4{font-size:160%}

/* ── Contrast ─────────────────────────────────────────────────────── */
/* High: keeps the design, darkens the grey text and borders each page family defines. */
html.a11y-contrast-high{--muted:#2E2B4A;--body-c:#12102A;--faint:#2E2B4A;--border:#6B6890;--text:#000;--green-d:#00664D;--gold-d:#7A5300}
html.a11y-contrast-high .grad-text{background:none;-webkit-text-fill-color:currentColor;color:#3D1FAB}
html.a11y-contrast-high .sc-footer,html.a11y-contrast-high .sc-footer .f-link,html.a11y-contrast-high .f-ack p,html.a11y-contrast-high .f-bottom{color:#fff}
html.a11y-contrast-high .summary,html.a11y-contrast-high .last-updated{color:#163047}
/* Dark and Light: flatten every colour to two, links in a third. */
html.a11y-contrast-dark,html.a11y-contrast-dark body{background:#000!important}
html.a11y-contrast-dark body :not(.a11y-ui,.a11y-ui *,img,video,picture,svg,svg *){background-color:#000!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:currentColor!important;border-color:#fff!important;box-shadow:none!important;text-shadow:none!important}
html.a11y-contrast-dark body a:not(.a11y-ui *),html.a11y-contrast-dark body a:not(.a11y-ui *) *{color:#FFE14D!important}
html.a11y-contrast-light,html.a11y-contrast-light body{background:#fff!important}
html.a11y-contrast-light body :not(.a11y-ui,.a11y-ui *,img,video,picture,svg,svg *){background-color:#fff!important;background-image:none!important;color:#000!important;-webkit-text-fill-color:currentColor!important;border-color:#000!important;box-shadow:none!important;text-shadow:none!important}
html.a11y-contrast-light body a:not(.a11y-ui *),html.a11y-contrast-light body a:not(.a11y-ui *) *{color:#0B3FBF!important}
/* Invert and saturation are filters on <html>; they share one filter declaration. */
html.a11y-contrast-invert{--a11y-inv:invert(1) hue-rotate(180deg);background:#fff}
html.a11y-sat-low{--a11y-sat:saturate(.45)}
html.a11y-sat-high{--a11y-sat:saturate(2)}
html.a11y-sat-mono{--a11y-sat:grayscale(1)}
html.a11y-contrast-invert,html.a11y-sat-low,html.a11y-sat-high,html.a11y-sat-mono{filter:var(--a11y-inv,) var(--a11y-sat,)}
/* Put photos and the menu back the right way round. */
html.a11y-contrast-invert :is(img:not(picture img),picture,video,iframe):not(.a11y-ui *),html.a11y-contrast-invert .a11y-ui{filter:invert(1) hue-rotate(180deg)}

/* ── Highlight links: underlined and outlined, so they don't rely on colour (WCAG 1.4.1) ── */
html.a11y-links a:not(.a11y-ui *){text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:max(1px,.08em);outline:2px solid #FFBF47!important;outline-offset:2px}

/* ── Text spacing: level 2 is exactly the WCAG 1.4.12 test ─────────── */
html.a11y-spacing-1 body :not(.a11y-ui,.a11y-ui *){letter-spacing:.05em!important;word-spacing:.1em!important}
html.a11y-spacing-2 body :not(.a11y-ui,.a11y-ui *){letter-spacing:.12em!important;word-spacing:.16em!important}
html.a11y-spacing-3 body :not(.a11y-ui,.a11y-ui *){letter-spacing:.2em!important;word-spacing:.3em!important}
html.a11y-spacing-2 body p:not(.a11y-ui *),html.a11y-spacing-3 body p:not(.a11y-ui *){margin-bottom:2em!important}

/* ── Line height ──────────────────────────────────────────────────── */
html.a11y-lineh-1 body :not(.a11y-ui,.a11y-ui *){line-height:1.5!important}
html.a11y-lineh-2 body :not(.a11y-ui,.a11y-ui *){line-height:1.8!important}
html.a11y-lineh-3 body :not(.a11y-ui,.a11y-ui *){line-height:2.1!important}

/* ── Text align ───────────────────────────────────────────────────── */
html.a11y-align-left body :not(.a11y-ui,.a11y-ui *){text-align:left!important}
html.a11y-align-center body :not(.a11y-ui,.a11y-ui *){text-align:center!important}
html.a11y-align-right body :not(.a11y-ui,.a11y-ui *){text-align:right!important}

/* ── Fonts: Atkinson Hyperlegible (Braille Institute, low vision) or OpenDyslexic ── */
html.a11y-font-readable body,html.a11y-font-readable body :not(code,pre,kbd,samp,.a11y-ui,.a11y-ui *){font-family:'A11y Atkinson',Verdana,Tahoma,sans-serif!important}
html.a11y-font-dyslexic body,html.a11y-font-dyslexic body :not(code,pre,kbd,samp,.a11y-ui,.a11y-ui *){font-family:'A11y OpenDyslexic','Comic Sans MS',Verdana,sans-serif!important}

/* ── Pause animations (WCAG 2.2.2, 2.3.3) ─────────────────────────── */
html.a11y-motion{scroll-behavior:auto!important}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-motion .reveal,html.a11y-motion .stagger>*{opacity:1!important;transform:none!important}

/* ── Hide images ──────────────────────────────────────────────────── */
html.a11y-hideimg :is(img,picture,video,iframe,svg[role="img"]):not(.a11y-ui *){visibility:hidden!important}

/* ── Big cursor (arrow; links and buttons get a violet one) ───────── */
html.a11y-cursor-big,html.a11y-cursor-big *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Cpath d='M5 3v37l9-9 6.5 14.5 7-3L21 28h13z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,auto!important}
html.a11y-cursor-big :is(a,button,[role="button"],label,select,summary,input[type="checkbox"],input[type="radio"]),html.a11y-cursor-big :is(a,button,[role="button"],label,summary) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Cpath d='M5 3v37l9-9 6.5 14.5 7-3L21 28h13z' fill='%235229DC' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,pointer!important}

/* ── Stronger focus: two colours, visible on light and dark ───────── */
html.a11y-focus :focus-visible{outline:4px solid #FFBF47!important;outline-offset:2px!important;box-shadow:0 0 0 7px #12102A!important;border-radius:4px}

/* ── Reading guide / mask, tooltips, read-aloud highlight (built by a11y.js) ── */
.a11y-guide{position:fixed;left:0;top:0;z-index:2147482990;height:12px;width:min(640px,90vw);background:#12102A;border:2px solid #FFBF47;border-radius:6px;pointer-events:none;display:none}
.a11y-mask{position:fixed;left:0;right:0;z-index:2147482990;background:rgba(0,0,0,.6);pointer-events:none;display:none}
.a11y-mask-top{top:0}.a11y-mask-bot{bottom:0}
.a11y-tip{position:fixed;z-index:2147482995;max-width:280px;padding:8px 12px;border-radius:8px;background:#12102A;color:#fff;font:600 14px/1.4 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:normal;word-spacing:normal;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.a11y-reading{outline:3px solid #FFBF47!important;outline-offset:3px!important;background-color:rgba(255,191,71,.18)!important}
.a11y-flash{outline:4px solid #FFBF47!important;outline-offset:4px!important}

/* ════════════════════════ The menu itself ════════════════════════ */
.a11y-ui{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#12102A;letter-spacing:normal;word-spacing:normal;text-align:left;text-transform:none}
.a11y-ui *,.a11y-ui *::before,.a11y-ui *::after{box-sizing:border-box}
.a11y-ui :is(h2,h3,p,ul,li){margin:0;padding:0;font-family:inherit;letter-spacing:normal;color:inherit}
.a11y-ui button{font:inherit;color:inherit;margin:0}
.a11y-ui svg{width:1em;height:1em;flex-shrink:0;display:block}
.a11y-ui :focus-visible{outline:3px solid #12102A;outline-offset:2px}
.a11y-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Side tab: flush to the screen edge, vertically centred. Slim at rest so it
   doesn't sit on the page's text; slides out to full size on hover or focus.
   28×56 at rest is still above the WCAG 2.5.8 minimum target (24×24). */
:root{--a11y-tab:28px;--a11y-gutter:calc(var(--a11y-tab) + 8px)}
html.a11y-big{--a11y-tab:36px}
.a11y-tab{position:fixed;top:50%;left:0;z-index:2147483000;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;width:var(--a11y-tab);height:56px;padding:0 5px 0 0;border:0;border-radius:0 12px 12px 0;background:linear-gradient(135deg,#6B41F8 0%,#4361EE 100%);color:#fff;font-size:20px;cursor:pointer;overflow:hidden;box-shadow:0 0 0 2px #fff,0 8px 22px rgba(18,16,42,.26);transition:width .18s ease,font-size .18s ease,padding .18s ease}
.a11y-tab:hover,.a11y-tab:focus-visible,.a11y-tab[aria-expanded="true"]{width:56px;font-size:28px;padding-right:13px}
.a11y-tab:focus-visible{outline:3px solid #12102A;outline-offset:3px}
html[data-a11y-side="right"] .a11y-tab{left:auto;right:0;justify-content:flex-start;padding:0 0 0 5px;border-radius:12px 0 0 12px}
html[data-a11y-side="right"] .a11y-tab:hover,html[data-a11y-side="right"] .a11y-tab:focus-visible,html[data-a11y-side="right"] .a11y-tab[aria-expanded="true"]{padding:0 0 0 13px}
html.a11y-big .a11y-tab{height:68px;font-size:26px}
html.a11y-big .a11y-tab:hover,html.a11y-big .a11y-tab:focus-visible{width:68px;font-size:34px}

/* Keep page text clear of the tab. Where a layout's content would reach the
   screen edge, its side gutters widen to the tab's width + 8px — both sides,
   so centred layouts stay centred. Wide screens already have the room and
   don't change. Bootstrap containers here; the docs and legal layouts set
   their own gutters from var(--a11y-gutter). */
@media (max-width:1247.98px){.container-xl{padding-left:var(--a11y-gutter);padding-right:var(--a11y-gutter)}}
@media (max-width:1199.98px){.container{padding-left:var(--a11y-gutter);padding-right:var(--a11y-gutter)}}

.a11y-backdrop{position:fixed;inset:0;z-index:2147483001;background:rgba(18,16,42,.45)}
.a11y-backdrop[hidden]{display:none}

/* Drawer */
.a11y-drawer{position:fixed;top:0;bottom:0;left:0;z-index:2147483002;display:flex;flex-direction:column;width:min(440px,100vw);background:#F3F1FC;box-shadow:12px 0 48px rgba(18,16,42,.28);transform:translateX(-104%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.a11y-drawer.open{transform:none;visibility:visible;transition:transform .25s ease}
html[data-a11y-side="right"] .a11y-drawer{left:auto;right:0;transform:translateX(104%);box-shadow:-12px 0 48px rgba(18,16,42,.28)}
html[data-a11y-side="right"] .a11y-drawer.open{transform:none}
html.a11y-big .a11y-drawer{font-size:18px;width:min(520px,100vw)}
@media (prefers-reduced-motion:reduce){.a11y-drawer,.a11y-drawer.open,.a11y-tab{transition:none}}

.a11y-hd{display:flex;align-items:center;gap:.6em;padding:1em 1.1em;background:linear-gradient(135deg,#6B41F8 0%,#4361EE 100%);color:#fff}
.a11y-hd h2{font-size:1.15em;font-weight:800;color:#fff}
.a11y-hd kbd{font:700 .72em/1 system-ui,sans-serif;padding:.35em .5em;border-radius:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff}
.a11y-close{margin-left:auto!important;display:flex;align-items:center;justify-content:center;width:2.5em;height:2.5em;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.12);color:#fff!important;font-size:1em;cursor:pointer}
.a11y-close:hover{background:rgba(255,255,255,.25)}
.a11y-close:focus-visible{outline-color:#fff!important}

.a11y-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1em}
.a11y-card{background:#fff;border:1px solid #E1DDF3;border-radius:14px;margin-bottom:.75em}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:.75em;padding:.7em .9em;font-weight:700}
.a11y-row .a11y-xl{display:inline-block;min-width:1.9em;font-weight:900;color:#5229DC}

/* Profiles accordion */
.a11y-acc{display:flex;align-items:center;gap:.7em;width:100%;padding:.85em .9em;border:0;background:none;font-weight:800!important;cursor:pointer;text-align:left;border-radius:14px}
.a11y-acc .a11y-acc-ic{display:flex;align-items:center;justify-content:center;width:2em;height:2em;border-radius:50%;background:#12102A;color:#fff;font-size:1em}
.a11y-acc .a11y-acc-ic svg{width:1.15em;height:1.15em}
.a11y-acc .a11y-chev{margin-left:auto;transition:transform .2s}
.a11y-acc[aria-expanded="true"] .a11y-chev{transform:rotate(180deg)}
.a11y-profiles{display:grid;grid-template-columns:1fr 1fr;gap:.5em;padding:0 .9em .9em}
.a11y-profiles[hidden]{display:none}
.a11y-prof{display:flex;align-items:center;gap:.55em;min-height:2.9em;padding:.5em .7em;border:2px solid #8A87A8;border-radius:10px;background:#fff;font-size:.9em!important;font-weight:700!important;cursor:pointer;text-align:left}
.a11y-prof svg{color:#5229DC;width:1.15em;height:1.15em}
.a11y-prof:hover{border-color:#6B6890}
.a11y-prof[aria-pressed="true"]{background:#5229DC;border-color:#5229DC;color:#fff!important}
.a11y-prof[aria-pressed="true"] svg{color:#fff}

/* Switch */
.a11y-switch{position:relative;width:3.1em;height:1.75em;flex-shrink:0;border:2px solid #6B6890;border-radius:100px;background:#fff;cursor:pointer;padding:0}
.a11y-switch::after{content:'';position:absolute;top:.17em;left:.17em;width:1.1em;height:1.1em;border-radius:50%;background:#6B6890;transition:left .15s}
.a11y-switch[aria-checked="true"]{background:#5229DC;border-color:#5229DC}
.a11y-switch[aria-checked="true"]::after{left:calc(100% - 1.27em);background:#fff}

/* Tile grid */
.a11y-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin-bottom:.75em}
.a11y-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;min-height:7.2em;padding:.9em .4em .8em;border:2px solid #fff;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(18,16,42,.06);cursor:pointer;text-align:center}
.a11y-tile:hover{border-color:#6B6890}
.a11y-tile-ic{font-size:1.75em;color:#12102A}
.a11y-tile-t{font-size:.85em;font-weight:800;line-height:1.2}
.a11y-tile-s{font-size:.75em;font-weight:700;color:#5229DC;min-height:1.1em}
.a11y-steps{display:flex;gap:.25em;width:70%}
.a11y-steps i{flex:1;height:.3em;border-radius:4px;background:#D9D4EE}
.a11y-steps i.on{background:#5229DC}
.a11y-check{position:absolute;top:.45em;right:.45em;display:none;align-items:center;justify-content:center;width:1.4em;height:1.4em;border-radius:50%;background:#5229DC;color:#fff;font-size:.8em}
.a11y-tile[aria-pressed="true"]{border-color:#5229DC;background:#EDE8FE}
.a11y-tile[aria-pressed="true"] .a11y-tile-ic{color:#5229DC}
.a11y-tile[aria-pressed="true"] .a11y-check{display:flex}
@media (max-width:360px){.a11y-grid{grid-template-columns:1fr 1fr}}

.a11y-reset{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;min-height:3em;margin-bottom:.75em!important;border:0;border-radius:12px;background:linear-gradient(135deg,#6B41F8 0%,#4361EE 100%);color:#fff!important;font-weight:800!important;cursor:pointer}
.a11y-reset:hover{filter:brightness(1.08)}

.a11y-seg{display:flex;gap:.35em}
.a11y-seg button{min-height:2.4em;padding:.3em .9em;border:2px solid #6B6890;border-radius:100px;background:#fff;font-size:.88em!important;font-weight:700!important;cursor:pointer}
.a11y-seg button[aria-pressed="true"]{background:#5229DC;border-color:#5229DC;color:#fff!important}

/* Page structure view */
.a11y-back{display:inline-flex;align-items:center;gap:.5em;min-height:2.5em;padding:.3em .9em;margin-bottom:.8em!important;border:2px solid #12102A;border-radius:100px;background:#fff;font-weight:800!important;cursor:pointer}
.a11y-struct-t{font-size:1.1em;font-weight:800;margin-bottom:.7em!important}
.a11y-list{list-style:none;margin-top:.8em!important;background:#fff;border:1px solid #E1DDF3;border-radius:14px;overflow:hidden}
.a11y-list li+li{border-top:1px solid #EEEBF8}
.a11y-list button{display:flex;align-items:baseline;gap:.6em;width:100%;padding:.65em .9em;border:0;background:none;text-align:left;cursor:pointer;font-size:.92em!important}
.a11y-list button:hover{background:#F3F1FC}
.a11y-lv{flex-shrink:0;min-width:2.2em;padding:.1em .35em;border-radius:6px;background:#EDE8FE;color:#3D1FAB;font-size:.78em;font-weight:800;text-align:center}
.a11y-empty{padding:.9em;color:#4A4768}

.a11y-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4em .8em;padding:.8em 1.1em;background:#fff;border-top:1px solid #E1DDF3;font-size:.82em;color:#4A4768}
.a11y-ft a{color:#3D1FAB;font-weight:800;text-decoration:underline;text-underline-offset:.18em}

@media print{.a11y-tab,.a11y-drawer,.a11y-backdrop,.a11y-guide,.a11y-mask,.a11y-tip{display:none!important}}