/* a11y.css
   Phase 2, Theme 7: accessibility feature styling. Each rule keys off a body
   class (or a documentElement data attribute / CSS variable) that js/a11y.js
   toggles, so every feature is flag-gated in code and purely additive here. No
   layout logic lives in CSS that scoring, GPS or pack content depends on; these
   are presentation-only. Child-first: large tap targets and one primary action
   stay intact, and animations remain reduced-motion-aware. */

/* ---- shared spacing variables (67) -------------------------------------- *
 * Defaults match the base look so the variables are safe to reference even
 * before a preset is applied. The spacing preset overwrites these on :root. */
:root {
  --a11y-line-height: 1.4;
  --a11y-letter-spacing: 0em;
  --a11y-word-spacing: 0em;
}

/* 67. Spacing presets. Applied to the readable body copy; headings keep their
   tighter display spacing so the look stays Norse. */
body,
.narration-text,
.panel-note,
.sub-body,
.menu-item,
p {
  line-height: var(--a11y-line-height);
  letter-spacing: var(--a11y-letter-spacing);
  word-spacing: var(--a11y-word-spacing);
}

/* 61. Dyslexia-friendly font. A rounder, evenly weighted system stack with
   OpenDyslexic first when the reader has it installed; otherwise a comfortable
   sans fallback. Overrides --font-body so body copy across the app switches,
   while the decorative --font-head (Cinzel) is left for titles only. */
body.a11y-dyslexia {
  --font-body: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', 'Verdana', system-ui, sans-serif;
}
body.a11y-dyslexia,
body.a11y-dyslexia .narration-text,
body.a11y-dyslexia .panel-note,
body.a11y-dyslexia p,
body.a11y-dyslexia .menu-item,
body.a11y-dyslexia input,
body.a11y-dyslexia button {
  font-family: var(--font-body);
}

/* 64. Left-handed layout. Mirror the narration portrait to the opposite side
   and move the primary action to the left. Visual mirroring only; no logic or
   tap-target change, so the one-primary-action child-first rule is preserved. */
body.a11y-left-handed .narration-portrait.side-left { left: auto; right: 0; }
body.a11y-left-handed .narration-portrait.side-right { right: auto; left: 0; }
body.a11y-left-handed .a11y-screen,
body.a11y-left-handed .panel-wrap { direction: ltr; }
/* Primary action (the big amber button) hugs the left for a left thumb. */
body.a11y-left-handed .btn-amber.big { margin-left: 0; margin-right: auto; }

/* 70. Junior mode. An even larger, simpler layout: bigger tap targets and text,
   and the secondary chrome (small buttons, help tips) is hidden so a young child
   sees fewer choices. Built on the existing --tap and --font-scale tokens so it
   never breaks the layout. */
body.a11y-junior {
  --tap: 76px;
  --font-scale: 1.4;
}
body.a11y-junior .btn-amber,
body.a11y-junior .menu-item,
body.a11y-junior .a11y-toggle,
body.a11y-junior .a11y-opt {
  font-size: 20px;
  min-height: var(--tap);
}
/* Fewer options visible: hide the small secondary affordances and help tips. */
body.a11y-junior .help-tip,
body.a11y-junior .btn-small:not(.update-banner-btn) {
  display: none;
}

/* 68. Calm mode. Reduce-motion is forced in js (body.reduce-motion); here we
   gently dim any remaining decorative animation and soften bright accents so the
   screen is quieter overall. */
body.a11y-calm .fx-layer,
body.a11y-calm .parallax-stack { opacity: 0.5; }
body.a11y-calm * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }

/* 69. Reading mode. The narration layer renders a plain, scrollable article
   instead of the tap-through panel. Generous spacing and high contrast for
   comfortable reading; the panel grows to hold the whole sequence. */
.narration-panel.reading-mode {
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.narration-reading {
  display: block;
  text-align: left;
  font-size: calc(18px * var(--font-scale, 1));
  line-height: var(--a11y-line-height);
}
.narration-reading-line { margin: 0 0 14px; }
.narration-reading-speaker { color: var(--gold); }
.narration-reading-done { margin-top: 8px; width: 100%; }

/* 62. Colourblind palettes are applied as token overrides on :root in js (the
   --amber / --sky / --forest / --rune-red variables). A data attribute is set
   so any future per-mode tweak can hook here; the token override alone already
   recolours every accent. */
html[data-colorblind] .chapter-card { border-color: var(--gold); }

/* 66. App-icon preview swatches in the Easy settings panel. */
.a11y-icon-options .a11y-opt {
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.a11y-icon-preview {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
}