/* 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(--8gi-amber); 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 */
[data-a11y-menu-anchor] { position: relative; display: inline-block; }
.a11y-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 36px;
  border-radius: 8px; 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; transition: border-color .2s, color .2s;
}
.a11y-trigger:hover,
.a11y-trigger[aria-expanded="true"] { border-color: var(--8gi-amber); color: var(--8gi-amber); }
.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(212, 137, 12, 0.08), 0 24px 48px rgba(0,0,0,0.5);
  padding: 20px; z-index: 60;
  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(212, 137, 12, 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(--8gi-amber); 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(--8gi-amber); color: var(--8gi-amber) !important; background: rgba(212,137,12,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(--8gi-amber); border-color: var(--8gi-amber); }

/* 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(--8gi-amber); }

.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(--8gi-amber); 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(212,137,12,0.14); border-color: var(--8gi-amber); }
.a11y-menu input[type="checkbox"]:checked::after { left: 16px; background: var(--8gi-amber); }

/* 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(--8gi-amber); 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(--8gi-amber); 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(--8gi-amber); 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(--8gi-amber); outline-offset: 0; border-color: var(--8gi-amber); }

/* 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(--8gi-amber); color: var(--8gi-amber); background: rgba(212,137,12,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(--8gi-amber); 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(--8gi-amber-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(--8gi-amber); color: var(--8gi-amber); }

.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(--8gi-amber); }
.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(212,137,12,0.06); color: var(--8gi-amber); }
.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(212,137,12,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 */
.bionic { font-weight: 800; color: var(--text); }

/* 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 */
.a11y-high-contrast { --text: #FFFCF5; --text-soft: #FFFCF5; --muted: #E8DFCC; }
html[data-theme="light"] .a11y-high-contrast,
html[data-theme="light"].a11y-high-contrast { --text: #0C0A07; --text-soft: #0C0A07; --muted: #2A2216; }

/* 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(--8gi-amber); box-shadow: 0 0 18px rgba(212,137,12,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(--8gi-amber); outline-offset: 4px; background: rgba(212, 137, 12, 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(--8gi-amber); 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); }