/* Evia7 accessibility. accessibility.js sets data-a11y-* attributes on <html>; every rule keys off those.
   Values follow WCAG 2.2 text-spacing guidance (1.4.12) and the British Dyslexia Association style guide. */
@font-face{font-family:"Lexend";src:url("vendor/fonts/lexend-latin-400-normal.woff2") format("woff2");font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url("vendor/fonts/lexend-latin-600-normal.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}

/* Keyboard and switch users always get a clear focus ring. */
:focus-visible{outline:3px solid var(--yellow-ink,#6e5c00);outline-offset:2px}

/* ---- Text size: phones scale the text itself (like the phone's own setting); desktops zoom the content ---- */
html[data-a11y-scale="115"]{-webkit-text-size-adjust:115%;text-size-adjust:115%}
html[data-a11y-scale="130"]{-webkit-text-size-adjust:130%;text-size-adjust:130%}
html[data-a11y-scale="150"]{-webkit-text-size-adjust:150%;text-size-adjust:150%}
@media (hover:hover) and (pointer:fine){
  html[data-a11y-scale="115"] :is(#screen,#modal-root){zoom:1.15}
  html[data-a11y-scale="130"] :is(#screen,#modal-root){zoom:1.3}
  html[data-a11y-scale="150"] :is(#screen,#modal-root){zoom:1.5}
}

/* ---- Dyslexia-friendly font (Lexend, bundled so it works offline) ---- */
html[data-a11y-dyslexia="on"] body,html[data-a11y-dyslexia="on"] body *:not(svg):not(svg *):not(.evia-face):not(.evia-face *){font-family:"Lexend",Verdana,Tahoma,Arial,sans-serif!important}

/* ---- Text spacing (WCAG 1.4.12 values) ---- */
html[data-a11y-letter="on"] body *:not(svg *){letter-spacing:.12em!important;word-spacing:.16em!important}
html[data-a11y-line="on"] body :is(p,li,label,small,textarea,input,.bubble,.ksbtext,.compact-prompts,.ui-help,.ui-empty p,.ui-evia-bubble p){line-height:1.8!important}
html[data-a11y-line="on"] body :is(h1,h2,h3,strong){line-height:1.45!important}
html[data-a11y-line="on"] body p{margin-block-end:.9em}

/* ---- Reduce motion: also on automatically when the phone asks for it ---- */
html[data-a11y-motion="reduce"] *,html[data-a11y-motion="reduce"] *::before,html[data-a11y-motion="reduce"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-a11y-motion="reduce"] body .evia-fab,html[data-a11y-motion="reduce"] body .evia-fab:is(.evia-hop,.evia-squish){animation:none!important;rotate:none!important}

/* ---- High contrast: stays light and calm, but with black text and strong outlines ---- */
html[data-a11y-contrast="on"]{--ui-ink:#000;--ui-text:#000;--ui-muted:#1d2939;--ui-faint:#344054;--ui-line:#344054;--ui-shadow:none;--yellow-ink:#000}
html[data-a11y-contrast="on"] body{background:#fff!important}
html[data-a11y-contrast="on"] body :where(#app,#modal-root,#welcome-screen,.ui-evia-bubble,.evia-guide) *:not(.primary):not(.primary *):not(.ui-pill-primary):not(.ui-pill-primary *):not(svg):not(svg *):not(.evia-face *){color:#000!important}
html[data-a11y-contrast="on"] body :is(.ui-card,.card,.ui-tile,.ui-ksb,.ui-tabs button,.secondary,.chat-pill,.rating-pill,.a11y-row,input,textarea,select,.evidence-photo-button,.bubble,.ui-evia-bubble,.profile-sheet,.chat-sheet){border:2px solid #000!important;box-shadow:none!important}
html[data-a11y-contrast="on"] body :is(.ui-track,.ui-ring-track){background:#d0d5dd}
html[data-a11y-contrast="on"] body .ui-ring-track{stroke:#d0d5dd}
html[data-a11y-contrast="on"] body .primary{outline:2px solid #000;outline-offset:1px}
html[data-a11y-contrast="on"] body img{filter:contrast(1.05)}

/* ---- Colour overlay: a gentle tint multiplied over the whole screen ---- */
html[data-a11y-overlay]:not([data-a11y-overlay="none"]) body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;mix-blend-mode:multiply;background:var(--a11y-overlay)}
html[data-a11y-overlay="yellow"]{--a11y-overlay:#fff4c2}
html[data-a11y-overlay="blue"]{--a11y-overlay:#dcebff}
html[data-a11y-overlay="green"]{--a11y-overlay:#dff3e2}
html[data-a11y-overlay="pink"]{--a11y-overlay:#ffe1ec}
html[data-a11y-overlay="grey"]{--a11y-overlay:#e6e6e6}

/* ---- Bigger text: let the chat sheet's message area fit the sheet instead of a fixed height ---- */
html body .chat-sheet{display:flex;flex-direction:column}
html body .chat-sheet .chat{flex:1 1 auto;height:auto!important;min-height:0}

/* ---- Reading guide: shades above and below a clear strip; only the handle takes touches ---- */
#a11y-guide{position:fixed;inset:0;z-index:9000;pointer-events:none;--guide-y:45%;--guide-h:76px;--guide-shade:rgba(16,24,40,.42);--guide-tint:transparent}
#a11y-guide .a11y-shade{position:absolute;left:0;right:0;background:var(--guide-shade)}
#a11y-guide .a11y-shade.top{top:0;height:calc(var(--guide-y) - var(--guide-h)/2)}
#a11y-guide .a11y-shade.bottom{top:calc(var(--guide-y) + var(--guide-h)/2);bottom:0}
#a11y-guide .a11y-strip{position:absolute;left:0;right:0;top:calc(var(--guide-y) - var(--guide-h)/2);height:var(--guide-h);background:var(--guide-tint);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(255,255,255,.9)}
#a11y-guide .a11y-handle{position:absolute;right:8px;top:calc(var(--guide-y) - 22px);width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--yellow,#e7b900);box-shadow:0 6px 16px rgba(16,24,40,.2);display:grid;place-items:center;pointer-events:auto;touch-action:none;cursor:grab;color:#172033}
#a11y-guide .a11y-handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---- Read aloud button (top left, opposite the profile button) ---- */
#a11y-speak{position:fixed;z-index:9999;top:12px;left:12px;width:43px;height:43px;border-radius:50%;background:#fff;border:1px solid var(--yellow-line,#f1d878);box-shadow:0 6px 16px rgba(16,24,40,.1);display:grid;place-items:center;color:var(--ui-ink,#172033);cursor:pointer;padding:0}
#a11y-speak svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#a11y-speak.speaking{background:var(--yellow,#e7b900);border-color:var(--yellow,#e7b900)}
.a11y-reading{outline:3px solid var(--yellow,#e7b900)!important;outline-offset:4px}

/* ---- Settings sheet ---- */
.a11y-sheet .a11y-intro{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--ui-muted,#667085)}
.a11y-list{display:flex;flex-direction:column;gap:10px}
.a11y-row{background:#fff;border:1px solid var(--ui-line,#e9edf2);border-radius:18px;padding:14px}
.a11y-row-head{display:flex;align-items:center;gap:12px}
.a11y-row-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.a11y-row-copy strong{font-size:14.5px;color:var(--ui-ink,#172033)}
.a11y-row-copy small{font-size:12px;line-height:1.45;color:var(--ui-muted,#667085)}
.a11y-switch{flex:0 0 auto;width:52px;height:32px;border-radius:999px;border:0;background:#d0d5dd;position:relative;cursor:pointer;padding:0;transition:background .2s ease}
.a11y-switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.25);transition:transform .2s ease}
.a11y-switch[aria-checked="true"]{background:var(--yellow,#e7b900)}
.a11y-switch[aria-checked="true"]::after{transform:translateX(20px)}
.a11y-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.a11y-choices button{min-height:40px;padding:8px 13px;border-radius:12px;border:1px solid var(--ui-line,#e9edf2);background:#fff;font:inherit;font-size:13px;font-weight:650;color:var(--ui-ink,#172033);cursor:pointer;display:flex;align-items:center;gap:7px}
.a11y-choices button[aria-pressed="true"]{background:var(--soft,#fff7d6);border-color:var(--yellow,#e7b900);color:var(--yellow-ink,#6e5c00)}
.a11y-choices .a11y-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(16,24,40,.2)}
.a11y-sub{margin-top:10px;font-size:12px;font-weight:700;color:var(--ui-muted,#667085)}
.a11y-note{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--yellow-ink,#6e5c00)}
.a11y-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.a11y-actions button{min-height:46px;padding:10px 16px;border-radius:14px}
/* The bottom bar stays a fixed size: its icons carry the meaning, and bigger labels would push "Portfolio" off small phones. */
html[data-a11y-scale] .bottom-nav{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-a11y-letter] body .bottom-nav button,html[data-a11y-letter] body .bottom-nav button *,html body .bottom-nav button{letter-spacing:0!important;word-spacing:0!important;white-space:nowrap}
@media (max-width:360px){html body .bottom-nav button{font-size:11px}}