/* Screen-reader-only content — for skip-link targets' companion text
   and for aria-live announcer elements that shouldn't be visible. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — hidden off-screen until keyboard-focused, then
   drops into view at the top-left so keyboard/screen-reader users can
   bypass the header/nav and land directly on the page's main content. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--accent, #2f6f4f);
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 0 6px 6px;
  z-index: 1000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

.a11y-controls {
  border: 1px solid var(--line, #d8dce3);
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin: 0 0 16px;
}

.a11y-controls-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Font size — `zoom` scales the whole rendered sheet (fonts, borders,
   spacing) regardless of whether a tool's CSS uses px/em/rem, since
   every tool in this suite hardcodes pixel font-sizes throughout.
   Chromium/Chrome only (documented deployment target) — no Firefox
   support for `zoom`. */
body.a11y-fontsize-lg #sheet-wrap .sheet { zoom: 1.15; }
body.a11y-fontsize-xl #sheet-wrap .sheet { zoom: 1.3; }

/* Dyslexia-friendly font — a widely-installed, consistent-letterform
   sans-serif stack plus a touch of letter/word spacing, rather than a
   vendored font file (keeps the zero-network-calls, no-extra-assets
   footprint; swapping in a licensed font like OpenDyslexic later is a
   two-line change if ever wanted). */
body.a11y-dyslexia-font,
body.a11y-dyslexia-font #sheet-wrap .sheet {
  font-family: Verdana, Tahoma, Arial, sans-serif;
  letter-spacing: 0.02em;
  word-spacing: 0.05em;
}

/* High contrast — repoints the same CSS custom properties every tool's
   :root block already defines, so this reliably overrides all
   categories via specificity (body.class beats :root) without touching
   any tool's own CSS. */
body.a11y-high-contrast {
  --ink: #000000;
  --muted: #000000;
  --line: #000000;
  --bg: #ffffff;
  --paper: #ffffff;
  --accent: #000000;
  --accent-dark: #000000;
}

/* Dark mode — same custom-property-repoint mechanism as high contrast,
   inverted palette instead of pure black/white. Explicit opt-in toggle
   only (no prefers-color-scheme auto-detection), consistent with the
   other three toggles here all being explicit. */
body.a11y-dark-mode {
  --ink: #e5e7eb;
  --muted: #9aa1ac;
  --line: #3a4150;
  --bg: #14171c;
  --paper: #1c2128;
  --accent: #4caf7d;
  --accent-dark: #6fcf9a;
}