/* esc-a11y.css — APP-50 Wave 4 item 39: the accessibility CONTRACT stylesheet.
   Owner: Unknown Artist. Staging only.
   This file carries ONLY the contract rules (variables + root-class-gated rules).
   Settings UI styles reuse esc-ui4.css classes; the prefs/apply logic lives in
   esc-a11y.js; the settings controls are mounted by esc-a11y.js into the
   #ui4A11y section that esc-ui4-personal.js adds to its theme gallery.

   CONTRACT (single source of truth — no per-module one-offs):
     Root classes on <html> (toggled ONLY by escA11y.apply):
       esc-a11y-font-1 / esc-a11y-font-2 / esc-a11y-font-3  text scale steps
       esc-a11y-motion-reduced                              non-essential motion off
       esc-a11y-contrast                                    high contrast palette shift
       esc-a11y-targets                                     bigger tap targets
     Contract variables on :root:
       --esc-font-scale  unitless multiplier consumed by the root font-size rule
       --esc-tap-min     minimum tap-target size consumed by the targets rule
     Contrast mode overrides ONLY pre-existing theme variables (the set defined
     by index.html :root and esc-themes.js): --bg, --chrome, --panel, --border,
     --text, --muted, --gold, --gold-dim, --accent. No new palette names, no new
     accent colours: values are the SAME theme hues pushed toward the black /
     white contrast poles, or toward a stronger sibling variable of the same hue.
   Contrast mapping (html.esc-a11y-contrast):
       --bg       -> black pole (darkest ground)
       --chrome   -> black pole tinted 6% by the theme's own --gold
       --panel    -> black pole tinted 5% by --gold, fully opaque (themes ship
                     --panel at .92-.96 alpha; solid raises effective contrast)
       --text     -> white pole (themes already use near-white text)
       --muted    -> 25% --gold + 75% white pole (was the weakest text colour)
       --border   -> 55% --gold + 45% --text (visible edges, theme hues only)
       --gold-dim -> var(--gold) (the dim step becomes the full-strength hue)
       --gold, --accent -> unchanged (already each theme's strongest hues)
     (No variable references itself, so no custom-property cycles.) */

/* ---- contract variables (defaults = feature off) ---- */
:root {
  --esc-font-scale: 1;
  --esc-tap-min: 0px;
}

/* ---- font size scaling: root size scales everything sized in rem/em and
        anything inheriting the root size. Modules with hardcoded px font
        sizes do NOT scale — see the item-39 report for the honest count. ---- */
html.esc-a11y-font-1 { --esc-font-scale: 1.125; }
html.esc-a11y-font-2 { --esc-font-scale: 1.25; }
html.esc-a11y-font-3 { --esc-font-scale: 1.5; }
html.esc-a11y-font-1, html.esc-a11y-font-2, html.esc-a11y-font-3 {
  font-size: calc(100% * var(--esc-font-scale));
}

/* ---- reduce motion: kill non-essential animation/transition app-wide ---- */
html.esc-a11y-motion-reduced *,
html.esc-a11y-motion-reduced *::before,
html.esc-a11y-motion-reduced *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ---- high contrast: shift the EXISTING theme variables only ---- */
html.esc-a11y-contrast {
  --bg: #000;
  --chrome: color-mix(in srgb, var(--gold) 6%, #000);
  --panel: color-mix(in srgb, var(--gold) 5%, #000);
  --text: #fff;
  --muted: color-mix(in srgb, var(--gold) 25%, #fff);
  --border: color-mix(in srgb, var(--gold) 55%, var(--text));
  --gold-dim: var(--gold);
}

/* ---- bigger tap targets: 44px floor for the app's known button classes
        (grounded in the real CSS: .tool-btn header tools, .panel-tab view
        tabs, .ui4-chip settings chips, and the per-module *-btn classes) ---- */
html.esc-a11y-targets { --esc-tap-min: 44px; }
html.esc-a11y-targets button,
html.esc-a11y-targets .tool-btn,
html.esc-a11y-targets .panel-tab,
html.esc-a11y-targets .ui4-chip,
html.esc-a11y-targets .ah-btn,
html.esc-a11y-targets .ai-btn,
html.esc-a11y-targets .eg-btn,
html.esc-a11y-targets .es-btn,
html.esc-a11y-targets .jbx-btn,
html.esc-a11y-targets .szi-lbtn,
html.esc-a11y-targets [role="tab"],
html.esc-a11y-targets [role="button"] {
  min-height: var(--esc-tap-min);
  min-width: var(--esc-tap-min);
}