/* =====================================================================
   a11y.css — Reading & Accessibility panel (slide-over), focus mode,
   self-hosted fonts, and math-pinning. Tokens come from css/tokens.css.
   ===================================================================== */

/* ---------- OpenDyslexic via CDN @font-face (degrades to sans if offline) ---------- */
@font-face{
  font-family:"OpenDyslexic";
  font-style:normal;font-weight:400;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:"OpenDyslexic";
  font-style:normal;font-weight:700;font-display:swap;
  src:url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff") format("woff");
}
@font-face{
  font-family:"OpenDyslexic";
  font-style:italic;font-weight:400;font-display:swap;
  src:url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Italic.woff") format("woff");
}

/* ---------- Math stays MONO even when the reading font changes ---------- */
/* The dyslexia/serif reading font targets prose, never inline math or equations. */
.m,.eq,.exq,.psol .m,.prob .m{font-family:var(--mono)!important}

/* ---------- GEAR BUTTON in the topbar ---------- */
.a11ybtn{
  border:1px solid var(--line);background:var(--panel);border-radius:9px;
  width:38px;height:38px;flex:none;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
.a11ybtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.a11ybtn svg{width:18px;height:18px}

/* ---------- SLIDE-OVER PANEL ---------- */
.a11y-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(15,17,25,.42);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
}
.a11y-scrim.open{opacity:1;visibility:visible}

.a11y-panel{
  position:fixed;top:0;right:0;z-index:91;height:100%;
  width:min(420px,92vw);
  background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -30px rgba(20,30,80,.5);
  transform:translateX(105%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;color:var(--ink);
}
.a11y-panel.open{transform:translateX(0)}

.a11y-head{
  display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line);flex:none;
}
.a11y-head h2{
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin:0;flex:1;
}
.a11y-close{
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;
  width:34px;height:34px;cursor:pointer;color:var(--muted);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.a11y-close:hover{border-color:var(--accent);color:var(--accent-ink)}
.a11y-close svg{width:16px;height:16px}

.a11y-body{padding:8px 20px 24px;overflow-y:auto;flex:1}

/* a single control group */
.a11y-grp{padding:16px 0;border-bottom:1px solid var(--line-2)}
.a11y-grp:last-child{border-bottom:none}
.a11y-grp .lab{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;
}
.a11y-grp .lab .t{
  font-family:var(--sans);font-weight:600;font-size:.8125rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);
}
.a11y-grp .lab .v{
  font-family:var(--mono);font-size:.75rem;color:var(--accent-ink);
  background:var(--accent-soft);padding:2px 8px;border-radius:6px;min-width:48px;text-align:center;
}

/* segmented choices (font, theme) */
.a11y-seg{display:flex;flex-wrap:wrap;gap:6px}
.a11y-seg button{
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;
  padding:8px 11px;font-family:var(--sans);font-size:.8125rem;font-weight:500;
  color:var(--ink);cursor:pointer;flex:1 1 auto;min-width:0;
}
.a11y-seg button:hover{border-color:var(--accent);color:var(--accent-ink)}
.a11y-seg button.sel{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600;
}

/* palette swatches — the colours themselves, never product names */
.pal-dots{display:inline-flex;gap:5px;vertical-align:middle}
.pal-dots i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.22)}
.theme-dark .pal-dots i{border-color:rgba(255,255,255,.35)}

/* range slider in the panel reuses the global input[type=range] look */
.a11y-grp input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--line);cursor:pointer;
}
.a11y-grp input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:99px;background:var(--accent);
  border:3px solid var(--panel);box-shadow:0 1px 4px rgba(61,58,224,.5);cursor:pointer;
}
.a11y-grp input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:99px;background:var(--accent);
  border:3px solid var(--panel);box-shadow:0 1px 4px rgba(61,58,224,.5);cursor:pointer;
}
.a11y-grp input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* toggle switch (focus mode) */
.a11y-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:none;cursor:pointer;text-align:left;padding:0;color:inherit}
.a11y-toggle .tt{flex:1}
.a11y-toggle .tt b{display:block;font-family:var(--sans);font-weight:600;font-size:.875rem;color:var(--ink)}
.a11y-toggle .tt span{display:block;font-size:.75rem;color:var(--muted);margin-top:2px;line-height:1.4}
.a11y-switch{
  width:44px;height:26px;border-radius:99px;background:var(--line);flex:none;position:relative;
  transition:background .18s ease;
}
.a11y-switch::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:99px;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s ease;
}
.a11y-toggle[aria-pressed="true"] .a11y-switch{background:var(--accent)}
.a11y-toggle[aria-pressed="true"] .a11y-switch::after{transform:translateX(18px)}

/* footer / reset */
.a11y-foot{padding:16px 20px;border-top:1px solid var(--line);flex:none;display:flex;gap:10px}
.a11y-reset{
  border:1px solid var(--line);background:var(--panel-2);border-radius:10px;
  padding:11px 16px;font-family:var(--sans);font-size:.8125rem;font-weight:600;
  color:var(--ink);cursor:pointer;flex:1;
}
.a11y-reset:hover{border-color:var(--accent);color:var(--accent-ink)}
.a11y-note{font-size:.75rem;color:var(--faint);line-height:1.45;margin:2px 0 0}

/* searchable language combobox */
.a11y-langpick{position:relative}
.a11y-langinput{
  width:100%;box-sizing:border-box;
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;
  padding:10px 34px 10px 12px;font-family:var(--sans);font-size:.875rem;color:var(--ink);cursor:text;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%238b909c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
}
.a11y-langinput::placeholder{color:var(--faint)}
.a11y-langinput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.a11y-langmenu{
  display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;
  max-height:240px;overflow-y:auto;padding:5px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.a11y-langpick.open .a11y-langmenu{display:block}
.a11y-langopt{
  padding:8px 11px;border-radius:7px;font-family:var(--sans);font-size:.8125rem;color:var(--ink);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.a11y-langopt:hover,.a11y-langopt.active{background:var(--accent-soft);color:var(--accent-ink)}
.a11y-langopt.sel{font-weight:600;color:var(--accent-ink)}
.a11y-langopt.sel::after{content:" ✓";color:var(--accent)}
.a11y-langnone{padding:8px 11px;font-size:.8125rem;color:var(--faint)}
.a11y-langopt .a11y-langen{color:var(--faint);font-weight:400}
.a11y-langopt:hover .a11y-langen,.a11y-langopt.active .a11y-langen{color:var(--accent-ink,var(--accent));opacity:.8}

/* ---------- FOCUS MODE (ADHD: one-thing-at-a-time) ---------- */
/* hide the sidebar + the progress bar, narrow the column, dim non-active chrome */
body.focus-mode{--para-gap:1.5em}
body.focus-mode .sidebar{display:none}
body.focus-mode .shell{grid-template-columns:1fr}
body.focus-mode .progwrap{display:none}
body.focus-mode .col{max-width:var(--measure)}
/* dim secondary chrome so the lesson body is the one thing in focus */
body.focus-mode .crumb,
body.focus-mode .lfoot,
body.focus-mode .brand span,
body.focus-mode .menubtn{opacity:.45;transition:opacity .2s ease}
body.focus-mode .crumb:hover,
body.focus-mode .lfoot:hover{opacity:1}

/* responsive: full-width panel on small screens */
@media(max-width:480px){
  .a11y-panel{width:100vw;border-left:none}
}

@media(prefers-reduced-motion:reduce){
  .a11y-scrim,.a11y-panel,.a11y-switch,.a11y-switch::after{transition:none!important}
}