/* ---------- Global scrollbar (page) ---------- */
:root{
  --scroll-thumb: #5f6dff;
  --scroll-thumb-hover: #7aa6ff;
  --scroll-track: rgba(255,255,255,.08);
}

/* Firefox */
html{
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

/* WebKit (Chromium/Safari/Edge) */
html::-webkit-scrollbar{ width: 12px; height: 12px; }
html::-webkit-scrollbar-track{ background: var(--scroll-track); }
html::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--scroll-thumb), #9bb2ff);
  border-radius: 10px;
  border: 2px solid transparent;           /* creates inset */
}
html::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scroll-thumb-hover), #bcd0ff);
}
/* Before: html{ scrollbar-gutter: stable both-edges; } */
html{ scrollbar-gutter: stable; }  /* reserve only on the scrollbar side */


/* ---------- A11y panel sizing & scroll ---------- */
.a11y-panel{
  /* keep your existing styles; just add a max-height */
  max-height: min(78vh, 640px);
}

.a11y-panel-inner{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
  justify-content: center;

  /* new: scrollable area */
  max-height: calc(min(78vh, 640px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;               /* room for scrollbar */
}

/* Sticky title so it stays visible while you scroll */
.a11y-panel .a11y-title{
  position: sticky; top: 0;
  background: rgba(12,14,26,.96);
  padding-block: 6px;
  z-index: 1;
}

/* Panel scrollbar — a bit slimmer */
.a11y-panel-inner{
  scrollbar-color: #8ea0ff transparent;    /* Firefox */
  scrollbar-width: thin;
}
.a11y-panel-inner::-webkit-scrollbar{ width: 10px; }
.a11y-panel-inner::-webkit-scrollbar-track{
  background: transparent;
}
.a11y-panel-inner::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #8ea0ff, #c8d4ff);
  border-radius: 10px;
  border: 2px solid rgba(12,14,26,.96);
}
.a11y-panel-inner::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #a5b6ff, #e0e7ff);
}

.a11y-wrap{ position: relative; display: inline-flex; }

.a11y-bubble{
  --sz: 42px;
  width: var(--sz); height: var(--sz);
  border-radius: 999px;
  display: inline-grid; place-items: center;
  margin-right: 8px; cursor: pointer;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.a11y-bubble:hover{ background: rgba(255,255,255,.16); color: var(--accent); transform: translateY(-1px); }
.a11y-bubble:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.a11y-bubble svg{ width: 20px; height: 20px; display: block; }

/* ===== Normal dropdown panel ==================================== */
.a11y-panel{
  position: absolute;
  top: calc(100% + 8px); right: 0;
  z-index: 1600;

  width: 320px; max-width: 72vw;
  padding: 14px 14px 16px;

  color: #fff;
  background: rgba(12,14,26,.96);           /* solid/glassy dark */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,.36);

  opacity: 0; pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transform-origin: 12px -8px;
  transition: opacity .16s ease, transform .16s ease;
}

/* small caret that “attaches” the panel under the bubble */
.a11y-panel::after{
  content:"";
  position:absolute; top:-6px; right: 14px;
  width: 10px; height: 10px;
  background: inherit;
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: rotate(45deg);
}

/* visible state */
.a11y-panel.open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* content layout */
.a11y-panel-inner{ display: grid; gap: 10px; }
.a11y-title{
  font: 700 13px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .06em; text-transform: uppercase; opacity: .9;
  margin-bottom: 4px;
}

/* switches */
.a11y-switch{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center; gap: 10px;
  font-size: 14px;
}
.a11y-switch input{ position: absolute; opacity: 0; pointer-events: none; }
.a11y-switch .lab{ color:#e6e9f7; }

.a11y-switch .knob{
  --h: 22px; --w: 38px;
  position: relative; width: var(--w); height: var(--h);
  border-radius: calc(var(--h)/2);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  transition: background .18s ease, border-color .18s ease;
}
.a11y-switch .knob::before{
  content:""; position:absolute; top: 50%; left: 2px; transform: translateY(-50%);
  width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: left .18s ease;
}

/* checked state */
.a11y-switch input:checked + .knob{
  background: linear-gradient(90deg, #1a195a, #5f6dff);
  border-color: rgba(122,166,255,.6);
}
.a11y-switch input:checked + .knob::before{
  left: calc(100% - (var(--h) - 6px) - 2px);
}

/* Mobile: pin to right if bubble is near edge */
@media (max-width: 900px){
  .a11y-panel{ right: -280px;  width: min(86vw, 360px);}
  .a11y-panel::after{ right: auto; left: 14px; }
}

/* ===== Effects from toggles (keep) ============================== */
body.a11y-stop-fluid #fluidCanvas{ display: none !important; }
body.a11y-stop-fluid #bgVideo{ opacity: .3; }
/* === Panel cosmetics === */
.a11y-hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:8px 2px}
.a11y-group{display:grid;gap:8px;margin:10px 0}
.a11y-subtitle{font-weight:700;opacity:.9;font-size:.95rem}
.a11y-row{display:flex;flex-wrap:wrap;gap:8px}
.a11y-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer}
.a11y-chip input{appearance:none;width:14px;height:14px;border:2px solid #8ea0ff;border-radius:50%;display:inline-block}
.a11y-chip input:checked{background:#8ea0ff}
.a11y-select{display:grid;gap:4px}
.a11y-range{display:grid;gap:6px}
.a11y-range input[type="range"]{width:100%}
.a11y-range .range-notes{opacity:.65;font-size:.8em}

/* === Effects (classes / data-attributes) === */

/* Color/contrast themes */
body.a11y-invert { filter: invert(1) hue-rotate(180deg); }
body[data-contrast="light"] { --bg:#f8f9ff; --text:#0b0f24; --accent:#3759ff; background:var(--bg); color:var(--text); }
body[data-contrast="dark"]  { --bg:#0b0f24; --text:#f3f6ff; --accent:#7aa6ff; background:var(--bg); color:var(--text); }
body[data-contrast="high"]  { filter: contrast(1.25) saturate(1.1); }

/* Saturation */
body[data-sat="low"] { filter: saturate(.6); }
body[data-sat="high"]{ filter: saturate(1.6); }
body[data-sat="desaturate"]{ filter: saturate(0); }

/* Hide images (also background images) */
body.a11y-hide-images img{opacity:0 !important}
body.a11y-hide-images [style*="background-image"]{background-image:none !important}

/* Big cursor (pure CSS data-uri pointer) */
body.a11y-big-cursor { 
  cursor: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>\
    <circle cx='10' cy='10' r='9' fill='white' stroke='%23000' stroke-width='2'/>\
  </svg>") 2 2, auto;
}
body.a11y-big-cursor *{ cursor: inherit !important; }

/* Spacing & line-height */
:root{ --a11y-lh: 1.6; --a11y-letter: 0px; --a11y-word: 0px; }
body[data-lh="1.5"]{ --a11y-lh:1.5 }
body[data-lh="1.75"]{ --a11y-lh:1.75 }
body[data-lh="2"]{ --a11y-lh:2 }
body[data-space="1"]{ --a11y-letter:.2px; --a11y-word:.4px }
body[data-space="2"]{ --a11y-letter:.6px; --a11y-word:1px }

:where(p,li,dd,dt,blockquote,.info-copy){ line-height: var(--a11y-lh); letter-spacing: var(--a11y-letter); word-spacing: var(--a11y-word); }

/* Alignment */
body[data-align="left"]  :where(p,li,.info-copy){ text-align:left }
body[data-align="right"] :where(p,li,.info-copy){ text-align:right }
body[data-align="center"]:where(p,li,.info-copy){ text-align:center }
body[data-align="justify"]:where(p,li,.info-copy){ text-align:justify }

/* Page structure debugging */
body.a11y-structure :where(header,nav,main,aside,section,article,footer){
  outline:1px dashed rgba(80,120,255,.6); outline-offset:2px;
}

/* Tooltips for elements with aria-label or title */
body.a11y-tooltips :where([aria-label],[title]):hover::after,
body.a11y-tooltips :where([aria-label],[title]):focus-visible::after{
  content: attr(aria-label) attr(title);
  position:absolute; transform: translateY(-120%);
  background:#1c2248; color:#fff; padding:.3rem .5rem; border-radius:.4rem;
  font-size:.8rem; white-space:nowrap; pointer-events:none; z-index:9999;
}

/* Reading mask (horizontal) and guide (vertical) */
#readingMask,#readingGuide{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:9998; display:none }
body.a11y-read-mask #readingMask{ display:block }
body.a11y-read-guide #readingGuide{ display:block }

/* Mask: two dark zones leaving a horizontal strip around --maskY */
#readingMask::before,#readingMask::after{
  content:""; position:absolute; left:0; right:0; background:rgba(0,0,0,.35);
}
#readingMask::before{ top:0; height: calc(var(--maskY,40vh) - var(--maskH, 80px)); }
#readingMask::after { bottom:0; height: calc(100vh - var(--maskY,40vh) - var(--maskH, 80px)); }

/* Vertical guide line following mouse X */
#readingGuide::after{
  content:""; position:absolute; top:0; width:2px; height:100%;
  left: var(--guideX, 50vw); background:#2e5bff; box-shadow:0 0 0 1px #fff;
}
/* Warm tint overlay (safe with other filters) */
#warmOverlay{
  position:fixed; inset:0; pointer-events:none; z-index:9996;
  background: rgba(255, 150, 60, var(--warmAlpha,0));
  mix-blend-mode: multiply;               /* soft, natural warmth */
  display:none;
}
body.a11y-warm #warmOverlay{ display:block; }

/* Levels */
body[data-warm-level="1"]{ --warmAlpha:.10; }
body[data-warm-level="2"]{ --warmAlpha:.18; }
body[data-warm-level="3"]{ --warmAlpha:.26; }
/* Accurate warm shift via SVG color-matrix */
body.a11y-warm[data-warm-level="1"] { filter: url(#warm1); }
body.a11y-warm[data-warm-level="2"] { filter: url(#warm2); }
body.a11y-warm[data-warm-level="3"] { filter: url(#warm3); }

/* Fallback for older engines that can’t use url(#filter-id) */
@supports not (filter: url(#warm1)) {
  body.a11y-warm[data-warm-level="1"] {
    filter: sepia(.12) saturate(1.08) hue-rotate(-10deg) brightness(1.02);
  }
  body.a11y-warm[data-warm-level="2"] {
    filter: sepia(.22) saturate(1.12) hue-rotate(-12deg) brightness(1.02);
  }
  body.a11y-warm[data-warm-level="3"] {
    filter: sepia(.32) saturate(1.18) hue-rotate(-15deg) brightness(1.02);
  }
}
/* Apply to media when redscale is ON */
body.a11y-redscale img,
body.a11y-redscale video,
body.a11y-redscale picture img,
body.a11y-redscale .media-redscale {
  filter: url(#redscale) !important;
}

/* Optional: opt out per element */
.no-filter { filter: none !important; }

/* Fallback (approximate) for browsers without SVG filter on CSS */
@supports not (filter: url(#redscale)) {
  body.a11y-redscale img,
  body.a11y-redscale video,
  body.a11y-redscale picture img,
  body.a11y-redscale .media-redscale {
    /* grayscale → strong sepia → rotate toward red */
    filter: grayscale(1) sepia(1) saturate(500%) hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  }
}
/* Images: precise SVG filter */
body.a11y-redscale img,
body.a11y-redscale picture img {
  filter: url(#redscale) !important;
}

/* Videos: robust CSS chain (works everywhere) */
body.a11y-redscale video,
body.a11y-redscale #bgVideo {
  filter: grayscale(1) sepia(1) saturate(450%)
          hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  -webkit-filter: grayscale(1) sepia(1) saturate(450%)
                  hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  will-change: filter;
}

/* Optional helper to force redscale on any element */
.media-redscale { 
  filter: grayscale(1) sepia(1) saturate(450%)
          hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  -webkit-filter: grayscale(1) sepia(1) saturate(450%)
                  hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
}
/* -------- Warm mode: reduce blue / add amber tint -------- */
body.a11y-warm { filter: none; } /* base */
body.a11y-warm[data-warm-level="1"] { filter: sepia(.15) hue-rotate(10deg)  saturate(120%) brightness(1.02); }
body.a11y-warm[data-warm-level="2"] { filter: sepia(.25) hue-rotate(15deg)  saturate(140%) brightness(1.03); }
body.a11y-warm[data-warm-level="3"] { filter: sepia(.35) hue-rotate(18deg)  saturate(160%) brightness(1.04); }
body.a11y-warm[data-warm-level="4"] { filter: sepia(.45) hue-rotate(22deg)  saturate(180%) brightness(1.05); }
body.a11y-warm[data-warm-level="5"] { filter: sepia(.55) hue-rotate(26deg)  saturate(200%) brightness(1.06); }

/* Don’t warm the a11y UI itself */
.a11y-panel, .a11y-bubble { filter: none !important; }

/* -------- Redscale (precise for images, robust for video) -------- */
/* Precise for images via SVG matrix (see HTML snippet below) */
body.a11y-redscale img,
body.a11y-redscale picture img {
  filter: url(#redscale) !important;
}

/* Robust chain for videos (works across engines) */
body.a11y-redscale video,
body.a11y-redscale #bgVideo {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  -webkit-filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
}

/* Grayscale (your existing class) — keep if you already had it */
body.a11y-grayscale img,
body.a11y-grayscale video,
body.a11y-grayscale #bgVideo {
  filter: grayscale(1) !important;
}

/* Optional: opt-out per element */
.no-filter { filter: none !important; -webkit-filter: none !important; }


/* Let you opt-out per element */
.no-filter { filter: none !important; -webkit-filter: none !important; }

body.a11y-bold :where(p, li, a, span, .info-copy, .footer_link, .dtrail-head p){
  font-weight: 700 !important;
}
/* Larger text (affects rem-based + nudges others) */
body.a11y-text-lg{
  font-size: 112.5%;                 /* bumps rem-based text */
  -webkit-text-size-adjust: 125%;
  text-size-adjust: 125%;
}

/* High contrast: override tokens you already use */
body.a11y-contrast{
  --text:#ffffff;
  --muted:#f2f4ff;
  --accent:#6fb3ff;
  --glass: rgba(0,0,0,.72);
  --glass-strong: rgba(0,0,0,.86);
  background:#000 !important;
  color:#fff !important;
}
body.a11y-contrast .header .chrome,
body.a11y-contrast .cta-bubble,
body.a11y-contrast .info-right{ border-color: rgba(122,166,255,.5) !important; }

/* Underline links */
body.a11y-underline-links a{ text-decoration: underline !important; text-underline-offset: .15em; }

/* Bold text (already supported in your CSS, this ensures common text) */
body.a11y-bold :where(h1,h2,h3,h4,h5,h6,div,p,li,a,span,strong,em,button,label,.info-copy){ 
    font-family: "Atkinson Hyperlegible", "OpenDyslexic", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;

  font-weight: 700 !important; }

/* Reduce motion */
body.a11y-reduce-motion *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: smooth !important;
}

/* Dyslexia-friendly / readable font (add your own font-face if desired) */
body.a11y-dyslexic :where(h1,h2,h3,h4,h5,h6,div,p,li,a,span,strong,em,button,label,.info-copy){
  font-family: "Atkinson Hyperlegible", "OpenDyslexic", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
}

/* Grayscale media */
body.a11y-grayscale img,
body.a11y-grayscale video,
body.a11y-grayscale canvas{ filter: grayscale(100%) !important; }
/* --- Cursor zoom lens ---------------------------------------------------- */
.zoom-pane{
  position: fixed;
  width: 320px;                 /* lens size */
  height: 320px;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 200% auto;   /* default 2x zoom; JS overwrites precisely */
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  pointer-events: none;         /* never block clicks */
  display: none;                /* shown via .show */
  z-index: 1400;                /* above nav/panels */
  backdrop-filter: none;
}

.a11y-cursor-zoom .zoom-pane.show{ display: block; }

/* Make zoomable images show intent */
.a11y-cursor-zoom img.is-zoomable{ cursor: zoom-in; }

/* Hide lens on smaller screens */
@media (max-width: 1200px){
  .zoom-pane{ display: none !important; }
}

/* Stop fluid (already in earlier CSS, included here for completeness) */
body.a11y-stop-fluid #fluidCanvas{ display: none !important; }
body.a11y-stop-fluid #bgVideo{ opacity: .3; }
/* Fallback if JS hasn’t run yet */
body.a11y-redscale video,
body.a11y-redscale #bgVideo{
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
  -webkit-filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
}
/* Fallback only—JS will set inline !important anyway */
body.a11y-redscale img,
body.a11y-redscale video,
body.a11y-redscale canvas,
body.a11y-redscale picture img,
body.a11y-redscale #bgVideo {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
  -webkit-filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
}
/* 2-column grid for the panel content */
.a11y-panel-inner{

  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
}

/* Make specific blocks span both columns */
.a11y-title,
.a11y-hr,
.a11y-group,
.a11y-range,
.a11y-select,
#warmRangeWrap,
.a11y-actions{ grid-column: 1 / -1; }

/* Keep each switch compact inside a grid cell */
.a11y-switch{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
}

/* Single column on narrow screens */
@media (max-width: 520px){
  .a11y-panel-inner{ grid-template-columns: 1fr; }
}
/* Page-wide green tint if you ever need it */
.a11y-greenscale {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(95deg) brightness(1.05) contrast(0.95) !important;
}
.a11y-greenscale img,
.a11y-greenscale video {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(95deg) brightness(1.05) contrast(0.95) !important;
}

/* Body-level invert: keep a11y UI/overlays readable via double-invert */
body.a11y-invert .a11y-panel,
body.a11y-invert .a11y-bubble,
body.a11y-invert .zoom-pane,
body.a11y-invert #readingMask,
body.a11y-invert #readingGuide,
body.a11y-invert #warmOverlay {
  /* inverse of parent filter -> cancels it for these elements */
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Opt-out hook for anything else you don’t want inverted when body is inverted */
body.a11y-invert [data-no-invert] {
  filter: invert(1) hue-rotate(180deg) !important;
}
/* Instead of body.a11y-invert { ... } */
body.a11y-invert .site-root { filter: invert(1) hue-rotate(180deg); }

body.a11y-contrast .a11y-panel,
body.a11y-contrast .a11y-bubble { filter: none !important; }
/* When invert is active, keep body overlays off (so they aren't inverted) */
body.a11y-invert #warmOverlay,
body.a11y-invert #readingMask,
body.a11y-invert #readingGuide,
body.a11y-invert #zoomPane{ display: none !important; }
body{overflow-x: hidden;}
/* Keep language select tidy */
#a11yPanel #optUILang{ width:100%; min-height:34px; border-radius:8px; }