/* ============ Accessibility themes & presets (public/js/a11y.js) ============
   Body classes: a11y-hc (high contrast), a11y-xl (XL text), a11y-dys
   (dyslexia font + spacing), a11y-rm (reduce motion), a11y-motor (bigger
   targets). Loaded after style.css so equal-specificity rules win. ThemeInit
   adds the same classes before paint on every route. */

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lexend/lexend-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lexend/lexend-latin-700-normal.woff2') format('woff2');
}

/* ---------- Keyboard focus: always visible ---------- */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 10000;
    background: #fff; color: #102040; padding: 10px 16px; border-radius: 8px;
    font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.skip-link:focus { top: 8px; }

/* ---------- Settings: preset picker ---------- */
.a11y-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.a11y-presets button {
    display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center;
    text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    border: 2px solid var(--border); background: var(--card); color: var(--text); font: inherit;
}
.a11y-presets button > span { grid-row: span 2; font-size: 1.3rem; }
.a11y-presets button b { font-size: .86rem; }
.a11y-presets button small { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.a11y-presets button:hover { border-color: var(--primary); }
.a11y-presets button.active { border-color: var(--primary); background: rgba(47,128,237,.1); }
.a11y-presets button.active b::after { content: ' \2713'; color: var(--primary); }

/* ---------- High contrast ---------- */
body.a11y-hc {
    --primary: #ffd400;
    --primary-dark: #ffe866;
    --green: #3dff8f;
    --red: #ff6b6b;
    --err: #ff6b6b;
    --gold: #ffd400;
    --bg: #000;
    --bg2: #000;
    --card: #000;
    --panel2: #111;
    --text: #fff;
    --muted: #e6e6e6;
    --border: #fff;
    --line2: #fff;
    --key-bg: #000;
    --key-border: #fff;
    --header-bg: #000;
    --hero-a: #000;
    --hero-b: #000;
    --bub-bg: #000;
    --bub-ink: #fff;
    --bub-line: #fff;
    --section-bg: #000;
    --section-head-bg: #111;
    background: #000;
    color: #fff;
}
body.a11y-hc .header { border-bottom: 2px solid #fff; }
body.a11y-hc a { color: #ffd400; }
body.a11y-hc .main-nav a, body.a11y-hc .header a { color: #fff; }
body.a11y-hc .main-nav a.active, body.a11y-hc .main-nav a:hover { color: #ffd400; text-decoration: underline; }
/* Many components hard-code light backgrounds; in high contrast every control
   and card is black-on-white-outline, the primary action yellow. */
body.a11y-hc button, body.a11y-hc select, body.a11y-hc input, body.a11y-hc textarea,
body.a11y-hc [class*="card"], body.a11y-hc .popover, body.a11y-hc .toast {
    background-color: #000 !important; color: #fff !important; border-color: #fff !important;
}
body.a11y-hc [class*="card"] *, body.a11y-hc button * { color: inherit !important; }
body.a11y-hc .btn.primary, body.a11y-hc .btn.btn-primary, body.a11y-hc .seg button.active,
body.a11y-hc .theme-grid button.active, body.a11y-hc .a11y-presets button.active {
    background-color: #ffd400 !important; color: #000 !important; border: 2px solid #ffd400 !important;
}
body.a11y-hc .btn.ghost, body.a11y-hc .btn.secondary { background: #000; color: #fff; border: 2px solid #fff; }
body.a11y-hc .modal-box { background: #000; color: #fff; border: 2px solid #fff; }
body.a11y-hc :focus-visible { outline: 4px solid #ffd400; outline-offset: 3px; }
body.a11y-hc .drill-text .pending-c { color: #fff; }
body.a11y-hc .drill-text .ok-c { color: #3dff8f; }
body.a11y-hc .drill-text .err-c { color: #000; background: #ff6b6b; }
body.a11y-hc .drill-text .caret-c { background: #ffd400; color: #000; box-shadow: 0 4px 0 0 #fff; }
body.a11y-hc .l1-ch.cur { background: #ffd400; color: #000; }
body.a11y-hc .key { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.a11y-hc .key.active, body.a11y-hc .key.kb-pressing { background: #ffd400 !important; color: #000 !important; }
body.a11y-hc img, body.a11y-hc video { filter: contrast(1.1); }

/* ---------- XL text: every typing surface + the guided journey ---------- */
body.a11y-xl .drill-text,
body.a11y-xl .practice-stage .drill-text,
body.a11y-xl .drill .practice-stage .drill-text { font-size: 3.1rem; line-height: 1.9; }
body.a11y-xl .l1-title { font-size: 2.2rem; }
body.a11y-xl .l1-sub { font-size: 1.45rem; }
body.a11y-xl .l1-body { font-size: 1.3rem; max-width: 720px; }
body.a11y-xl .l1-kicker { font-size: 1rem; }
body.a11y-xl .l1-chars { font-size: 2.4rem; }
body.a11y-xl .l1-bigkey { width: 88px; height: 88px; font-size: 2.4rem; }
body.a11y-xl .r-msg, body.a11y-xl .r-cell label { font-size: 1.1rem; }
body.a11y-xl .r-cell span { font-size: 2.2rem; }
body.a11y-xl .toast { font-size: 1.2rem; }
@media (max-width: 600px) {
    body.a11y-xl .drill-text,
    body.a11y-xl .practice-stage .drill-text,
    body.a11y-xl .drill .practice-stage .drill-text { font-size: 2.1rem; }
    body.a11y-xl .l1-title { font-size: 1.7rem; }
    body.a11y-xl .l1-chars { font-size: 1.9rem; }
    body.a11y-xl .l1-bigkey { width: 64px; height: 64px; font-size: 1.8rem; }
}

/* ---------- Dyslexia: Lexend + spacing ---------- */
body.a11y-dys,
body.a11y-dys button, body.a11y-dys input, body.a11y-dys select, body.a11y-dys textarea {
    font-family: 'Lexend', 'Segoe UI', sans-serif;
}
body.a11y-dys { letter-spacing: .04em; word-spacing: .14em; line-height: 1.75; }
body.a11y-dys .drill-text { font-family: 'Lexend', 'Segoe UI', sans-serif !important; letter-spacing: .08em; word-spacing: .3em; }
body.a11y-dys .l1-body, body.a11y-dys p { max-width: 70ch; }
/* Icon fonts keep their own face. */
body.a11y-dys .material-symbols-rounded { font-family: 'Material Symbols Rounded'; letter-spacing: normal; }

/* ---------- Motor: bigger, easier targets ---------- */
body.a11y-motor .btn, body.a11y-motor .main-nav a, body.a11y-motor .seg button,
body.a11y-motor .theme-grid button, body.a11y-motor .icon-btn { min-height: 44px; min-width: 44px; }
body.a11y-motor .set-row input[type="checkbox"] { width: 24px; height: 24px; }

/* ---------- Reduce motion (setting or OS preference) ---------- */
body.a11y-rm *, body.a11y-rm *::before, body.a11y-rm *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}