/* ── Widget root container ──────────────────────────────────── */
/* Zero-size wrapper so CSS filters can target body>*:not(#a11y-widget-root)
   without affecting the fixed-position widget elements inside */
#a11y-widget-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
}

/* ── Accessibility Widget ─────────────────────────────────── */
#a11y-btn{
  position:fixed;bottom:24px;left:24px;z-index:8000;
  width:52px;height:52px;border-radius:50%;
  background:var(--gold);color:#080808;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(164,136,217,0.35);
  transition:transform .2s,box-shadow .2s,background .2s;
  font-size:22px;line-height:1;
}
#a11y-btn:hover{
  background:var(--gold2);transform:scale(1.1);
  box-shadow:0 6px 28px rgba(164,136,217,0.5);
}
#a11y-btn:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;
}

/* ── Panel ─────────────────────────────────────────────────── */
#a11y-panel{
  position:fixed;bottom:88px;left:24px;z-index:8001;
  width:300px;max-height:82vh;
  background:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:none;flex-direction:column;overflow:hidden;
  font-family:var(--font);
}
#a11y-panel.open{display:flex}

/* RTL support */
html[dir="rtl"] #a11y-btn{left:auto;right:24px}
html[dir="rtl"] #a11y-panel{left:auto;right:24px}

.a11y-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
}
.a11y-header-title{
  font-size:.85rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.a11y-close{
  background:none;border:none;cursor:pointer;
  color:var(--muted);padding:4px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,background .2s;
}
.a11y-close:hover{color:var(--text);background:var(--glass)}

/* scrollable body */
.a11y-body{
  overflow-y:auto;padding:12px;flex:1;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.a11y-body::-webkit-scrollbar{width:4px}
.a11y-body::-webkit-scrollbar-track{background:transparent}
.a11y-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── Section ───────────────────────────────────────────────── */
.a11y-section{margin-bottom:12px}
.a11y-section-title{
  font-size:.68rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--gold);
  padding:0 4px;margin-bottom:8px;
}

/* ── Toggle row ─────────────────────────────────────────────── */
.a11y-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px;border-radius:8px;
  transition:background .15s;cursor:pointer;
}
.a11y-toggle-row:hover{background:var(--glass)}
.a11y-toggle-label{
  font-size:.8rem;color:var(--text-secondary);
  display:flex;align-items:center;gap:8px;
}
.a11y-toggle-label-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}

/* toggle switch */
.a11y-switch{
  position:relative;width:36px;height:20px;flex-shrink:0;
}
.a11y-switch input{opacity:0;width:0;height:0;position:absolute}
.a11y-slider{
  position:absolute;inset:0;background:var(--border-strong);
  border-radius:100px;transition:background .2s;cursor:pointer;
}
.a11y-slider::before{
  content:'';position:absolute;left:3px;top:3px;
  width:14px;height:14px;background:#fff;
  border-radius:50%;transition:transform .2s;
}
.a11y-switch input:checked+.a11y-slider{background:var(--gold)}
.a11y-switch input:checked+.a11y-slider::before{transform:translateX(16px)}
.a11y-switch input:focus-visible+.a11y-slider{outline:2px solid var(--gold);outline-offset:2px}

/* ── Font size buttons ─────────────────────────────────────── */
.a11y-font-row{
  display:flex;gap:6px;padding:4px 8px;
}
.a11y-font-btn{
  flex:1;padding:6px 4px;
  background:var(--glass);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;color:var(--muted);
  font-family:var(--font);transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.a11y-font-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.a11y-font-btn.active{background:var(--gold);color:#080808;border-color:var(--gold);font-weight:600}
.a11y-font-btn .a11y-font-sample{line-height:1}
.a11y-font-btn .a11y-font-name{font-size:.6rem;opacity:.75}

/* ── Slider row ─────────────────────────────────────────────── */
.a11y-slider-row{
  padding:6px 8px;
}
.a11y-slider-label{
  font-size:.78rem;color:var(--text-secondary);
  display:flex;justify-content:space-between;margin-bottom:6px;
}
.a11y-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;background:var(--border-strong);
  border-radius:4px;outline:none;cursor:pointer;
}
.a11y-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--gold);border-radius:50%;cursor:pointer;
  transition:transform .15s;
}
.a11y-range::-webkit-slider-thumb:hover{transform:scale(1.2)}
.a11y-range:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ── Color blindness chips ─────────────────────────────────── */
.a11y-chips{
  display:flex;gap:6px;padding:4px 8px;flex-wrap:wrap;
}
.a11y-chip{
  padding:5px 10px;font-size:.72rem;
  background:var(--glass);border:1px solid var(--border);
  border-radius:100px;cursor:pointer;color:var(--muted);
  font-family:var(--font);transition:all .15s;
}
.a11y-chip:hover{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.a11y-chip.active{background:var(--gold);color:#080808;border-color:var(--gold);font-weight:600}

/* ── Footer buttons ─────────────────────────────────────────── */
.a11y-footer{
  display:flex;gap:8px;padding:12px;
  border-top:1px solid var(--border);flex-shrink:0;
}
.a11y-footer-btn{
  flex:1;padding:8px;font-size:.75rem;font-weight:600;
  border-radius:8px;cursor:pointer;font-family:var(--font);
  transition:all .15s;border:none;
}
.a11y-reset{background:var(--glass);color:var(--muted);border:1px solid var(--border)}
.a11y-reset:hover{background:var(--surface);color:var(--text)}
.a11y-statement{background:var(--gold);color:#080808}
.a11y-statement:hover{background:var(--gold2)}

/* ── Divider ────────────────────────────────────────────────── */
.a11y-divider{height:1px;background:var(--border);margin:4px 0}

/* ── Reading guide line ─────────────────────────────────────── */
#a11y-reading-guide{
  position:fixed;left:0;right:0;height:2px;
  background:rgba(164,136,217,0.5);pointer-events:none;
  z-index:7999;display:none;
  box-shadow:0 0 8px rgba(164,136,217,0.4);
}

/* ── SVG color-blindness filters ───────────────────────────── */
#a11y-svg-filters{position:absolute;width:0;height:0;overflow:hidden}

/* ══ Applied accessibility classes ══════════════════════════ */

/* High contrast */
html.a11y-high-contrast{
  --bg:#000;--bg2:#0a0a0a;--surface:#111;
  --text:#fff;--text-secondary:#eee;
  --muted:#ccc;--border:rgba(255,255,255,0.3);
  --border-strong:rgba(255,255,255,0.5);
  --gold:#FFD700;--gold2:#FFE135;
}
html.a11y-high-contrast body{background:#000;color:#fff}
html.a11y-high-contrast a{color:#FFD700!important;text-decoration:underline!important}
html.a11y-high-contrast button{border:1px solid #FFD700!important}

/* ── Grayscale / Invert / Color-blind filters ────────────────
   IMPORTANT: filters must NOT be applied to body directly.
   filter on a positioned ancestor breaks position:fixed children
   (they become relative to the filtered ancestor, not viewport).

   Fix: target direct children of body EXCEPT the two widget
   root containers (#a11y-widget-root, #ai-widget-root).
   Those containers hold all panels + floating buttons, keeping
   them viewport-fixed and always reachable.
─────────────────────────────────────────────────────────── */
/* Grayscale */
html.a11y-grayscale body>*:not(#a11y-widget-root):not(#ai-widget-root){filter:grayscale(100%)}

/* Invert */
html.a11y-invert body>*:not(#a11y-widget-root):not(#ai-widget-root){filter:invert(100%) hue-rotate(180deg)}
/* double-invert media so images look correct */
html.a11y-invert body>*:not(#a11y-widget-root):not(#ai-widget-root) img,
html.a11y-invert body>*:not(#a11y-widget-root):not(#ai-widget-root) video,
html.a11y-invert body>*:not(#a11y-widget-root):not(#ai-widget-root) canvas{filter:invert(100%) hue-rotate(180deg)}

/* Highlight links */
html.a11y-links a{
  text-decoration:underline!important;
  font-weight:700!important;
  outline:1px solid currentColor;
  border-radius:2px;
}

/* Highlight headings */
html.a11y-headings h1,html.a11y-headings h2,html.a11y-headings h3,
html.a11y-headings h4,html.a11y-headings h5,html.a11y-headings h6{
  outline:2px solid var(--gold)!important;
  outline-offset:2px;
  border-radius:4px;
}

/* Dyslexia font */
html.a11y-dyslexia body,html.a11y-dyslexia input,
html.a11y-dyslexia textarea,html.a11y-dyslexia select{
  font-family:Arial,Helvetica,sans-serif!important;
  letter-spacing:.05em!important;
  word-spacing:.1em!important;
}

/* Reduce animations */
html.a11y-no-anim *,html.a11y-no-anim *::before,html.a11y-no-anim *::after{
  animation:none!important;
  transition:none!important;
}

/* Big cursor */
html.a11y-big-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 4l16 12-8 2-4 8z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E"),auto!important}

/* Focus highlight */
html.a11y-focus *:focus{
  outline:3px solid var(--gold)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 6px rgba(164,136,217,0.2)!important;
}

/* Color blindness filters */
html.a11y-cb-protanopia   body>*:not(#a11y-widget-root):not(#ai-widget-root){filter:url(#a11y-protanopia)}
html.a11y-cb-deuteranopia body>*:not(#a11y-widget-root):not(#ai-widget-root){filter:url(#a11y-deuteranopia)}
html.a11y-cb-tritanopia   body>*:not(#a11y-widget-root):not(#ai-widget-root){filter:url(#a11y-tritanopia)}