:root { --a11y-text-scale: 1; }

html[data-a11y-text="s"]  { --a11y-text-scale: .9; }
html[data-a11y-text="m"]  { --a11y-text-scale: 1; }
html[data-a11y-text="l"]  { --a11y-text-scale: 1.15; }
html[data-a11y-text="xl"] { --a11y-text-scale: 1.3; }
html[data-a11y-text]      { font-size: calc(100% * var(--a11y-text-scale)); }

html[data-a11y-contrast="high"] { filter: contrast(1.15); }
html[data-a11y-contrast="max"]  { filter: contrast(1.35); }

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-dyslexia="on"], html[data-a11y-dyslexia="on"] body {
  font-family: "Atkinson Hyperlegible", "Comic Sans MS", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: .02em; word-spacing: .08em; line-height: 1.6;
}

html[data-a11y-links="underline"] a { text-decoration: underline !important; text-underline-offset: 2px; }

html[data-a11y-focus="large"] :focus-visible {
  outline: 3px solid var(--silvershell-accent-color, #2196f3) !important; outline-offset: 3px !important; border-radius: 2px;
}

html[data-a11y-cursor="large"] { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M4 2l22 11-9 2 5 11-4 2-5-11-7 6z" fill="black" stroke="white" stroke-width="1.5"/></svg>') 4 2, auto; }
html[data-a11y-cursor="xl"]    { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32"><path d="M4 2l22 11-9 2 5 11-4 2-5-11-7 6z" fill="black" stroke="white" stroke-width="1.5"/></svg>') 6 3, auto; }

html[data-a11y-palette="deuter"] { filter: url('#a11y-deuter'); }
html[data-a11y-palette="protan"] { filter: url('#a11y-protan'); }
html[data-a11y-palette="tritan"] { filter: url('#a11y-tritan'); }

/* Structural styles for the drop-in panel — themeable via host --silvershell-* vars */
.a11y-panel { display: flex; flex-direction: column; gap: 4px; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--silvershell-border-color, rgba(128,128,128,.2)); }
.a11y-row:last-child { border-bottom: none; }
.a11y-row > label { font-weight: 500; }
.a11y-seg { display: inline-flex; border: 1px solid var(--silvershell-border-color, rgba(128,128,128,.3)); border-radius: 8px; overflow: hidden; }
.a11y-seg button { background: transparent; border: 0; padding: 6px 12px; cursor: pointer; color: inherit; font: inherit; }
.a11y-seg button.on { background: var(--silvershell-accent-color, #2196f3); color: #fff; font-weight: 600; }
.a11y-toggle { width: 42px; height: 24px; border: 0; border-radius: 100px; background: var(--silvershell-border-color, #888); position: relative; cursor: pointer; padding: 0; }
.a11y-toggle.on { background: var(--silvershell-accent-color, #2196f3); }
.a11y-toggle::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .15s; }
.a11y-toggle.on::after { left: 21px; }
.a11y-error { color: #d33; font-size: .85em; margin: 6px 0 0; }