/* ===========================================================================
 * NDI design-token mapping. The accessibility widget inherits the NDI theme,
 * so it adapts automatically to light / dark / high-contrast. Accent is NDI
 * teal. Vendor-neutral, NDI-branded. See app/globals.css for sources.
 * ======================================================================== */
:root {
  --ndi-a11y-accent: #3882a2;
  --ndi-a11y-accent-light: #5aa9c9;
  --bg: var(--color-bg, #fbfcfd);
  --card: var(--color-surface, #ffffff);
  --border: var(--color-border, #d9e1e6);
  --muted: var(--color-muted, #50616c);
  --text: var(--color-fg, #16242e);
  --text-soft: var(--color-muted, #50616c);
  --font-heading: var(--font-ui, system-ui, sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --dur-base: .2s;
}

/* 8GI Accessibility + Personalisation — styles
   CSS custom props the JS sets:
     --a11y-font-scale, --a11y-letter-spacing, --a11y-word-spacing,
     --a11y-line-height, --a11y-paragraph-spacing,
     --a11y-focus-ring, --a11y-anim-scale, --a11y-hue-rotate
*/

:root {
  --a11y-font-scale: 1;
  --a11y-letter-spacing: 0em;
  --a11y-word-spacing: 0em;
  --a11y-line-height: inherit;
  --a11y-paragraph-spacing: 1;
  --a11y-focus-ring: 2px;
  --a11y-anim-scale: 1;
  --a11y-hue-rotate: 0deg;
}

/* Global scaling driven by the panel */
body {
  font-size: calc(1em * var(--a11y-font-scale));
  letter-spacing: var(--a11y-letter-spacing);
  word-spacing: var(--a11y-word-spacing);
}
body p, body li, body blockquote { line-height: var(--a11y-line-height); }
body p { margin-bottom: calc(1.5rem * var(--a11y-paragraph-spacing)); }

:focus-visible { outline-width: var(--a11y-focus-ring) !important; outline-style: solid; outline-color: var(--ndi-a11y-accent); outline-offset: 3px; border-radius: 2px; }

/* Hue rotation on amber accents (body scope) — lets users shift the accent */
body { filter: none; }
body[style*="--a11y-hue-rotate"] .a11y-amber-hue { filter: hue-rotate(var(--a11y-hue-rotate)); }

/* Trigger button - always-visible frosted pill so it reads over any page content */
[data-a11y-menu-anchor] { position: relative; display: inline-block; }

/* The panel IS the control surface — keep it immune to the page-level font
   scaling / spacing it sets, so Low Vision (1.35x) etc. can't blow up or break
   the panel's own layout. Re-bases inherited type to a fixed size. */
.a11y-menu, .a11y-trigger {
  font-size: 13px;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
}
.a11y-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 36px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(22, 36, 46, 0.72); color: #ffffff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.a11y-trigger:hover,
.a11y-trigger[aria-expanded="true"] {
  background: rgba(22, 36, 46, 0.9);
  border-color: rgba(56, 130, 162, 0.7);
  color: #ffffff;
}
.a11y-trigger .chev { transition: transform .2s; }
.a11y-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Panel - drops down from top-right anchor */
.a11y-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(380px, calc(100vw - 24px)); max-height: min(640px, 80vh); overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 0 40px rgba(56, 130, 162, 0.08), 0 24px 48px rgba(0,0,0,0.5);
  padding: 20px; z-index: 500;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s, transform .18s;
  color: var(--text);
}
.a11y-menu * { color: inherit; }
html[data-theme="light"] .a11y-menu {
  box-shadow: 0 0 40px rgba(56, 130, 162, 0.10), 0 24px 48px rgba(58, 48, 32, 0.12);
}
.a11y-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.a11y-head { display:flex; justify-content:space-between; gap:14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.a11y-head .eyebrow { font: 500 10px/1 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ndi-a11y-accent); margin-bottom: 8px; }
.a11y-head .title { font: 800 20px/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text); margin-bottom: 6px; }
.a11y-head .sub { font: 400 12px/1.5 var(--font-body); color: var(--muted) !important; max-width: 280px; }
.a11y-head-actions { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.a11y-reset {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px;
  border-radius: 6px; border: 1px solid var(--border); background: transparent;
  color: var(--text) !important; cursor: pointer;
  font: 500 9px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}
.a11y-reset:hover { border-color: var(--ndi-a11y-accent); color: var(--ndi-a11y-accent) !important; background: rgba(56,130,162,0.06); }
.a11y-close { width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.a11y-close:hover { color: var(--ndi-a11y-accent); border-color: var(--ndi-a11y-accent); }

/* Tabs */
.a11y-tabs { display:flex; flex-wrap:wrap; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 10px; }
.a11y-tabs button { background: transparent; border: 0; padding: 6px 10px; border-radius: 6px; color: var(--muted); font: 500 10px/1 var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; }
.a11y-tabs button:hover { color: var(--text); }
.a11y-tabs button.on { color: var(--bg); background: var(--ndi-a11y-accent); }

.a11y-panel { display: flex; flex-direction: column; gap: 12px; }
.a11y-panel[hidden] { display: none; }

.group-label { font: 500 9px/1 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* Segmented control */
.a11y-menu .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border: 1px solid var(--border); border-radius: 8px; padding: 3px; background: var(--bg); }
.a11y-menu .seg.four { grid-template-columns: repeat(4, 1fr); }
.a11y-menu .seg.five { grid-template-columns: repeat(5, 1fr); }
.a11y-menu .seg button { background: transparent; border: 0; color: var(--text-soft); padding: 8px 0; border-radius: 5px; cursor: pointer; font: 500 10px/1 var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; transition: background .2s, color .2s; }
.a11y-menu .seg button:hover { color: var(--text); }
.a11y-menu .seg button.on { background: var(--ndi-a11y-accent); color: var(--bg); }

/* Rows (checkbox items) */
.a11y-menu .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; margin: 0; }
.a11y-menu .row:first-of-type { border-top: 0; padding-top: 4px; }
.a11y-menu .row > span { display: flex; flex-direction: column; gap: 3px; font: 500 13px/1.3 var(--font-body); color: var(--text) !important; }
.a11y-menu .row em { font: 400 11px/1.4 var(--font-body); font-style: normal; color: var(--muted) !important; }
.a11y-menu input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s; }
.a11y-menu input[type="checkbox"]::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:999px; background:var(--muted); transition:left .2s, background .2s; }
.a11y-menu input[type="checkbox"]:checked { background: rgba(56,130,162,0.14); border-color: var(--ndi-a11y-accent); }
.a11y-menu input[type="checkbox"]:checked::after { left: 16px; background: var(--ndi-a11y-accent); }

/* Slider rows */
.a11y-menu .slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.a11y-menu .slider:first-of-type { border-top: 0; padding-top: 4px; }
.a11y-menu .slider > span { font: 500 12px/1 var(--font-body); color: var(--text) !important; grid-column: 1 / 2; }
.a11y-menu .slider > em { font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ndi-a11y-accent); grid-column: 2 / 3; }
.a11y-menu .slider input[type="range"] { grid-column: 1 / 3; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; margin-top: 4px; }
.a11y-menu .slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px; background: var(--ndi-a11y-accent); border: 2px solid var(--card); cursor: pointer; }
.a11y-menu .slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--ndi-a11y-accent); border: 2px solid var(--card); cursor: pointer; }

/* Inputs */
.a11y-input { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 13px/1 var(--font-body); }
.a11y-input:focus { outline: 2px solid var(--ndi-a11y-accent); outline-offset: 0; border-color: var(--ndi-a11y-accent); }

/* Presets grid */
.presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.presets button { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text) !important; font: 600 11px/1.1 var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; text-align: left; transition: border-color .2s, color .2s, background .2s; }
.presets button:hover { border-color: var(--ndi-a11y-accent); color: var(--ndi-a11y-accent); background: rgba(56,130,162,0.04); }

/* Profile row */
.profile-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.a11y-btn-primary { padding: 10px 14px; border-radius: 6px; border: 0; background: var(--ndi-a11y-accent); color: var(--bg); font: 500 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.a11y-btn-primary:hover { background: var(--ndi-a11y-accent-light); }
.a11y-btn-ghost { padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); font: 500 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; width: 100%; }
.a11y-btn-ghost:hover { border-color: var(--ndi-a11y-accent); color: var(--ndi-a11y-accent); }
/* "Primed" reset - after a preset is applied, the reset button lights up and is
   focused, so one Enter / tap / click reverts. Easy escape hatch from any preset. */
.a11y-btn-ghost.a11y-reset-primed {
  background: var(--ndi-a11y-accent); border-color: var(--ndi-a11y-accent);
  color: #ffffff !important; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(56,130,162,0.30);
  animation: a11yPrimePulse 1.3s ease-in-out infinite;
}
.a11y-btn-ghost.a11y-reset-primed:hover { color: #ffffff !important; }
@keyframes a11yPrimePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(56,130,162,0.28); }
  50%     { box-shadow: 0 0 0 7px rgba(56,130,162,0.10); }
}

.saved-profiles { display:flex; flex-direction:column; gap:6px; }
.profile-chip { display:flex; align-items:stretch; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.profile-chip.active { border-color: var(--ndi-a11y-accent); }
.profile-chip button { background: transparent; border: 0; color: var(--text) !important; padding: 8px 12px; cursor: pointer; flex: 1; text-align: left; font: 500 12px/1 var(--font-body); }
.profile-chip button:hover { background: rgba(56,130,162,0.06); color: var(--ndi-a11y-accent); }
.profile-chip button.x { flex: 0 0 auto; width: 32px; font: 500 16px/1 var(--font-body); color: var(--muted); padding: 0; }
.profile-chip button.x:hover { color: #D4890C; background: rgba(56,130,162,0.06); }

.a11y-empty { font: 400 12px/1.4 var(--font-body); color: var(--muted); padding: 8px 0; }

/* Footer */
.a11y-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.a11y-foot > div { font: 400 11px/1.4 var(--font-body); color: var(--muted); }
.a11y-foot strong { color: var(--text); font-weight: 600; }
.a11y-foot .a11y-btn-ghost { width: auto; padding: 8px 12px; }

/* ========================================================================
   Effects
   ======================================================================== */

/* Bionic reading — embolden the word stem but keep the element's own colour,
   so white-on-image overlays and coloured headings stay legible (not forced
   to the dark theme text colour). */
.bionic { font-weight: 800; color: inherit; }

/* Font families */
.a11y-font-dyslexic, .a11y-font-dyslexic * { font-family: "Atkinson Hyperlegible", "Comic Sans MS", ui-sans-serif, sans-serif !important; }
.a11y-font-mono, .a11y-font-mono * { font-family: var(--font-mono) !important; }
.a11y-font-serif, .a11y-font-serif * { font-family: var(--font-heading) !important; }

/* High contrast */
/* Dark-on-light by default (covers auto + light pages AND the panel's light card -
   white text here was invisible). White-on-dark only in explicit dark theme.
   Also boosts the NDI site's own text/border tokens for real, safe contrast. */
.a11y-high-contrast {
  --text: #0C0A07; --text-soft: #0C0A07; --muted: #2A2216;
  --color-fg: #0a0a0a; --color-muted: #1c1c1c; --color-border: #4a4a4a;
}
html[data-theme="dark"] .a11y-high-contrast,
html[data-theme="dark"].a11y-high-contrast {
  --text: #FFFCF5; --text-soft: #FFFCF5; --muted: #E8DFCC;
  --color-fg: #ffffff; --color-muted: #e8e8e8; --color-border: #b0b0b0;
}

/* Reduce motion */
.a11y-reduce-motion, .a11y-reduce-motion *, .a11y-reduce-motion *::before, .a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
/* Slow-anim scaler (approximate — multiplies transition durations on common timings) */
body:not(.a11y-reduce-motion) * { transition-duration: calc(var(--dur-base, 260ms) * var(--a11y-anim-scale)); }

/* Focus mode dims everything but what is under the cursor */
.a11y-focus-mode > * { filter: brightness(0.55); transition: filter .25s; }
.a11y-focus-mode > *:hover, .a11y-focus-mode > *:focus-within { filter: brightness(1); }

/* Simplify */
.a11y-simplify .hero-glow1, .a11y-simplify .hero-glow2, .a11y-simplify .glow { display: none !important; }
.a11y-simplify body::before { display: none; }

/* Reading ruler line */
.a11y-ruler-line { position: fixed; left: 0; right: 0; height: 2px; background: var(--ndi-a11y-accent); box-shadow: 0 0 18px rgba(56,130,162,0.4); pointer-events: none; z-index: 59; transform: translateY(-1px); mix-blend-mode: screen; }

/* Big cursor (custom cursor can't be scaled directly; we amplify the hit cursor via outlines) */
.a11y-big-cursor, .a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 2 L4 26 L10 22 L14 30 L18 28 L14 20 L22 20 Z' fill='%23D4890C' stroke='%230C0A07' stroke-width='1.5'/></svg>") 2 2, auto; }
.a11y-huge-cursor, .a11y-huge-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 32 32'><path d='M4 2 L4 26 L10 22 L14 30 L18 28 L14 20 L22 20 Z' fill='%23D4890C' stroke='%230C0A07' stroke-width='2'/></svg>") 2 2, auto; }

/* Link underlines */
.a11y-links-always a { text-decoration: underline !important; text-underline-offset: 3px; }
.a11y-links-never a { text-decoration: none !important; }

/* Reading highlight (tab reader + speech) */
.a11y-reading-highlight { outline: 3px solid var(--ndi-a11y-accent); outline-offset: 4px; background: rgba(56, 130, 162, 0.08); border-radius: 4px; }

/* Dwell ring */
.a11y-dwell-ring { position: fixed; width: 40px; height: 40px; margin-left:-20px; margin-top:-20px; border-radius: 999px; border: 2px solid var(--ndi-a11y-accent); pointer-events: none; z-index: 60; opacity: 0; }
.a11y-dwell-ring.active { opacity: 1; animation: a11y-dwell 1200ms linear forwards; }
@keyframes a11y-dwell {
  from { transform: scale(0.4); border-width: 2px; opacity: 1; }
  to   { transform: scale(1.4); border-width: 6px; opacity: 0; }
}

/* Colour-blindness filters (apply to everything except the panel) */
body[data-cb="protanopia"]    > :not(.a11y-menu):not([data-a11y-menu-anchor]) { filter: url(#a11y-cb-prot); }
body[data-cb="deuteranopia"]  > :not(.a11y-menu):not([data-a11y-menu-anchor]) { filter: url(#a11y-cb-deut); }
body[data-cb="tritanopia"]    > :not(.a11y-menu):not([data-a11y-menu-anchor]) { filter: url(#a11y-cb-trit); }
body[data-cb="achromatopsia"] > :not(.a11y-menu):not([data-a11y-menu-anchor]) { filter: grayscale(1); }