/* Accessibility toolbar: colorblind-safe palette, dyslexia-friendly text,
   and page zoom. Toggled from a fixed button in the top-right corner
   (see accessibility.js), state persisted per-visitor via localStorage. */

#a11y-toolbar {
  position: fixed;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 100000;
  font-family: Arial, Helvetica, sans-serif;
}

#a11y-toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid #888;
  background: #ffffff;
  color: #111111;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

#a11y-toolbar-button:hover,
#a11y-toolbar-button:focus {
  background: #f0f0f0;
}

/* Dark mode (site theme toggle sets data-theme="dark" on <html>) */
html[data-theme="dark"] #a11y-toolbar-button {
  background: #2b2b2b;
  color: #f0f0f0;
  border-color: #666;
}

html[data-theme="dark"] #a11y-toolbar-button:hover,
html[data-theme="dark"] #a11y-toolbar-button:focus {
  background: #3a3a3a;
}

html[data-theme="dark"] #a11y-toolbar-panel {
  background: #2b2b2b;
  color: #f0f0f0;
  border-color: #666;
}

html[data-theme="dark"] #a11y-toolbar-panel .a11y-zoom-row button {
  background: #3a3a3a;
  color: #f0f0f0;
  border-color: #666;
}

#a11y-toolbar-panel {
  display: none;
  position: absolute;
  top: 2.8rem;
  right: 0;
  width: 15rem;
  padding: 0.75rem;
  background: #ffffff;
  color: #111111;
  border: 1px solid #888;
  border-radius: 0.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-size: 0.85rem;
}

#a11y-toolbar-panel.open {
  display: block;
}

#a11y-toolbar-panel h2 {
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
}

#a11y-toolbar-panel label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

#a11y-toolbar-panel .a11y-zoom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

#a11y-toolbar-panel .a11y-zoom-row button {
  flex: 1;
  cursor: pointer;
  border: 1px solid #888;
  border-radius: 0.3rem;
  background: #f5f5f5;
  padding: 0.2rem 0;
}

/* --- Colorblind-safe palette (Okabe-Ito accent, links always underlined so
   color is never the only cue) --- */
html.a11y-colorblind {
  --pst-color-primary: #0072B2 !important;
  --pst-color-link: #0072B2 !important;
  --pst-color-link-hover: #d55e00 !important;
  --pst-color-inline-code-links: #0072B2 !important;
}

html.a11y-colorblind a {
  text-decoration: underline !important;
}

/* --- Dyslexia-friendly fonts. Loaded from CDN, only ever fetched by a
   browser once html.a11y-dyslexia actually applies them to some text (no
   cost for the (default) majority of visitors who never toggle it on). No
   Google Fonts entry exists for OpenDyslexic, hence separate @font-face
   rules instead of the Google Fonts <link> in conf.py's html_css_files. --- */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic Mono';
  src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@20160623-Stable/ttf/OpenDyslexicMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Dyslexia-friendly text: readable font, extra spacing, left-aligned --- */
html.a11y-dyslexia body {
  font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, Arial, sans-serif !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.12em !important;
  line-height: 1.7 !important;
}

html.a11y-dyslexia section {
  text-align: left !important;
}

/* --- Page zoom: scale body from the top-left, compensate width so content
   doesn't get clipped on the right (works the same in every browser,
   unlike the non-standard CSS "zoom" property) --- */
body.a11y-zoomed {
  transform-origin: top left;
}

/* --- Cursor-following magnifier lens (see accessibility.js initMagnifier).
   Fixed-size window, clipped, with a small clone of the real text under the
   cursor scaled up inside it. --- */
#a11y-magnifier-lens {
  position: fixed;
  width: 280px;
  height: 160px;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #888;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  z-index: 100001;
  pointer-events: none;
}

html[data-theme="dark"] #a11y-magnifier-lens {
  background: #2b2b2b;
  border-color: #666;
}

/* --- Colorblind-safe syntax highlighting for Python/code cells ---
   Okabe-Ito palette: distinguishable under deuteranopia/protanopia/tritanopia.
   Applied unconditionally (on top of both the light and dark Pygments
   themes) -- this used to be opt-in behind the colorblind toggle above, but
   accessible code contrast shouldn't require finding a settings panel first. */
.highlight .k,
.highlight .kn,
.highlight .kd,
.highlight .kc,
.highlight .kr {
  color: #0072B2 !important;
  font-weight: bold !important;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss {
  color: #D55E00 !important;
}

.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs {
  color: #999999 !important;
  font-style: italic !important;
}

.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mo,
.highlight .mh,
.highlight .il {
  color: #CC79A7 !important;
}

.highlight .nb,
.highlight .nf,
.highlight .fm {
  color: #009E73 !important;
}

.highlight .o,
.highlight .ow {
  color: #56B4E9 !important;
}

/* Dyslexia mode: switch code to a dyslexia-friendly *monospace* font
   (regular OpenDyslexic isn't monospaced, which would misalign code -- see
   the @font-face rules above), plus the same extra breathing room as the
   body text. */
html.a11y-dyslexia .highlight pre,
html.a11y-dyslexia code {
  font-family: 'OpenDyslexic Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace !important;
}

html.a11y-dyslexia .highlight pre {
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
}