/*
 * E.V.G. Lab accessibility settings for the learner app, /login and the /hub pages (PLATFORM_PLAN.md 7d).
 * public/learner/a11y.js puts the settings on <html> (data attributes and --evg-text-scale):
 *   data-contrast="high"           high contrast, light or dark (text 7:1 — WCAG AAA)
 *   data-palette="protan|deutan|tritan"  colours told apart with each colour vision; colour is never the
 *                                  only sign (icons and words stay)
 *   data-a11y-colors               set when one of the two above is on: the colour rules below apply
 *   data-motion="reduce"           no animations, flashing or blinking
 *   data-font="readable"           Atkinson Hyperlegible (Latin), Andika (Cyrillic) — public/topics/vendor/fonts
 *   data-line-spacing="wide"       more space between lines
 *   --evg-text-scale: 1 … 2        text size 100–200 %
 *
 * The UI is Tailwind with a light theme made of id selectors in learner.css; every rule here starts with
 * html:not(#_a):not(#_b) so it outranks those (two ids) without touching the original styles.
 */

/* ---------- Text size (WCAG 1.4.4) ---------- */
/*
 * Only the type grows (the Tailwind text-* sizes and the body text), not the rem-based spacing: the app is a
 * fixed-height shell, and growing every padding with the text would squeeze the chat on a phone.
 */
html:not(#_a):not(#_b)[data-text-scale] body { font-size: calc(1rem * var(--evg-text-scale, 1)); }
html:not(#_a):not(#_b)[data-text-scale] .text-xs { font-size: calc(0.75rem * var(--evg-text-scale, 1)) !important; line-height: 1.35 !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-sm { font-size: calc(0.875rem * var(--evg-text-scale, 1)) !important; line-height: 1.4 !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-base { font-size: calc(1rem * var(--evg-text-scale, 1)) !important; line-height: 1.45 !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-lg { font-size: calc(1.125rem * var(--evg-text-scale, 1)) !important; line-height: 1.4 !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-xl { font-size: calc(1.25rem * var(--evg-text-scale, 1)) !important; line-height: 1.35 !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-2xl { font-size: calc(1.5rem * var(--evg-text-scale, 1)) !important; line-height: 1.3 !important; }
html:not(#_a):not(#_b)[data-text-scale] :is(input, textarea, select, button) { font-size: inherit; }
html:not(#_a):not(#_b)[data-text-scale] .a11y-dialog { font-size: calc(1rem * var(--evg-text-scale, 1)); }
html:not(#_a):not(#_b)[data-text-scale] .text-\[9px\] { font-size: calc(9px * var(--evg-text-scale, 1)) !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-\[10px\] { font-size: calc(10px * var(--evg-text-scale, 1)) !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-\[11px\] { font-size: calc(11px * var(--evg-text-scale, 1)) !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-\[12px\] { font-size: calc(12px * var(--evg-text-scale, 1)) !important; }
html:not(#_a):not(#_b)[data-text-scale] .text-\[13\.5px\] { font-size: calc(13.5px * var(--evg-text-scale, 1)) !important; }
/* Long words and big text wrap instead of running out of their box. */
html:not(#_a):not(#_b)[data-text-scale]:not([data-text-scale="100"]) body { overflow-wrap: break-word; }
/* Bigger text: header rows wrap instead of pushing buttons off the screen. */
html:not(#_a):not(#_b)[data-text-scale]:not([data-text-scale="100"]) :is(header > div, header > div > div) { flex-wrap: wrap; row-gap: 6px; }
html:not(#_a):not(#_b)[data-text-scale]:not([data-text-scale="100"]) #user-session-bar { flex-shrink: 1; min-width: 0; max-width: 100%; }
html:not(#_a):not(#_b)[data-text-scale]:not([data-text-scale="100"]) #user-menu-btn { max-width: 100%; }

/* ---------- Line spacing (WCAG 1.4.12) ---------- */
html:not(#_a):not(#_b)[data-line-spacing="wide"] body,
html:not(#_a):not(#_b)[data-line-spacing="wide"] :is(.leading-none, .leading-tight, .leading-snug, .leading-normal, .leading-relaxed) {
  line-height: 1.8 !important;
}
html:not(#_a):not(#_b)[data-line-spacing="wide"] body { word-spacing: 0.12em; letter-spacing: 0.02em; }
html:not(#_a):not(#_b)[data-line-spacing="wide"] p { margin-bottom: 0.6em; }

/* ---------- Readable font ---------- */
html:not(#_a):not(#_b)[data-font="readable"] :is(body, button, input, select, textarea, h1, h2, h3, h4, p, span, div, a, label, li) {
  font-family: 'Atkinson Hyperlegible', 'Andika', Verdana, system-ui, sans-serif !important;
}
html:not(#_a):not(#_b)[data-font="readable"] :is(.katex, .katex *, code, pre, .font-mono) {
  font-family: revert !important;
}
html:not(#_a):not(#_b)[data-font="readable"] .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ---------- Less motion (WCAG 2.3.3; sensory safety) ---------- */
html:not(#_a):not(#_b)[data-motion="reduce"] *,
html:not(#_a):not(#_b)[data-motion="reduce"] *::before,
html:not(#_a):not(#_b)[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html:not(#_a):not(#_b)[data-motion="reduce"] :is(.animate-pulse, .animate-spin, .animate-bounce, .animate-ping, .cursor-blink) {
  animation: none !important;
}
html:not(#_a):not(#_b)[data-motion="reduce"] :is(.active\:scale-95, .hover\:scale-105):is(:active, :hover) { transform: none !important; }

/* ---------- Colour roles (high contrast and colour-vision palettes) ---------- */
/* High contrast, dark: text 7:1 and more on #000. */
html[data-contrast="high"]:not([data-theme="light"]) {
  --evg-ok: #6ee7b7; --evg-bad: #fca5a5; --evg-warn: #fcd34d; --evg-info: #93c5fd; --evg-accent: #d8b4fe;
  --evg-hc-bg: #000000; --evg-hc-surface: #0a0a0a; --evg-hc-raised: #1a1a1a; --evg-hc-text: #ffffff; --evg-hc-muted: #e5e5e5; --evg-hc-line: #bdbdbd;
  --evg-hc-solid-mix: #000000; --evg-hc-focus: #ffff00;
}
/* High contrast, light: text 7:1 and more on #fff. */
html[data-contrast="high"][data-theme="light"] {
  --evg-ok: #065f46; --evg-bad: #7f1d1d; --evg-warn: #78350f; --evg-info: #1e3a8a; --evg-accent: #4c1d95;
  --evg-hc-bg: #ffffff; --evg-hc-surface: #ffffff; --evg-hc-raised: #f2f2f2; --evg-hc-text: #000000; --evg-hc-muted: #1f1f1f; --evg-hc-line: #4d4d4d;
  --evg-hc-solid-mix: #000000; --evg-hc-focus: #1d4ed8;
}
/*
 * Colour-vision palettes: success / mistake / hint / information keep apart under the simulated colour vision
 * (Machado et al. 2009: smallest colour distance 29–38 instead of 10–19 with the usual colours).
 */
html[data-palette="protan"]:not([data-theme="light"]) { --evg-ok: #6ee7b7; --evg-bad: #ff8a3d; --evg-warn: #f0e442; --evg-info: #93c5fd; --evg-accent: #93c5fd; }
html[data-palette="protan"][data-theme="light"] { --evg-ok: #0369a1; --evg-bad: #be123c; --evg-warn: #a16207; --evg-info: #6d28d9; --evg-accent: #6d28d9; }
html[data-palette="deutan"]:not([data-theme="light"]) { --evg-ok: #67e8f9; --evg-bad: #f87171; --evg-warn: #fbbf24; --evg-info: #818cf8; --evg-accent: #818cf8; }
html[data-palette="deutan"][data-theme="light"] { --evg-ok: #0e7490; --evg-bad: #9f1239; --evg-warn: #c2410c; --evg-info: #1d4ed8; --evg-accent: #1d4ed8; }
html[data-palette="tritan"]:not([data-theme="light"]) { --evg-ok: #86efac; --evg-bad: #ff8a3d; --evg-warn: #fbbf24; --evg-info: #a78bfa; --evg-accent: #a78bfa; }
html[data-palette="tritan"][data-theme="light"] { --evg-ok: #15803d; --evg-bad: #be123c; --evg-warn: #854d0e; --evg-info: #5b21b6; --evg-accent: #5b21b6; }
/* A palette together with high contrast: the same hues, pushed towards white (dark) or black (light). */
html[data-contrast="high"][data-palette]:not([data-palette="default"]):not([data-theme="light"]) {
  --evg-ok-hc: color-mix(in srgb, var(--evg-ok) 75%, #fff); --evg-bad-hc: color-mix(in srgb, var(--evg-bad) 75%, #fff);
  --evg-warn-hc: color-mix(in srgb, var(--evg-warn) 75%, #fff); --evg-info-hc: color-mix(in srgb, var(--evg-info) 75%, #fff);
}
html[data-contrast="high"][data-palette]:not([data-palette="default"])[data-theme="light"] {
  --evg-ok-hc: color-mix(in srgb, var(--evg-ok) 70%, #000); --evg-bad-hc: color-mix(in srgb, var(--evg-bad) 70%, #000);
  --evg-warn-hc: color-mix(in srgb, var(--evg-warn) 70%, #000); --evg-info-hc: color-mix(in srgb, var(--evg-info) 70%, #000);
}

html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="text-emerald-"], [class*="text-green-"], [class*="text-teal-"]) { color: var(--evg-ok-hc, var(--evg-ok)) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="text-red-"], [class*="text-rose-"]) { color: var(--evg-bad-hc, var(--evg-bad)) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="text-amber-"], [class*="text-yellow-"], [class*="text-orange-"]) { color: var(--evg-warn-hc, var(--evg-warn)) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="text-blue-"], [class*="text-sky-"], [class*="text-cyan-"]) { color: var(--evg-info-hc, var(--evg-info)) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="text-indigo-"], [class*="text-purple-"], [class*="text-violet-"]) { color: var(--evg-info-hc, var(--evg-accent)) !important; }

html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="border-emerald-"], [class*="border-green-"], [class*="border-teal-"]) { border-color: var(--evg-ok) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="border-red-"], [class*="border-rose-"]) { border-color: var(--evg-bad) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="border-amber-"], [class*="border-yellow-"], [class*="border-orange-"]) { border-color: var(--evg-warn) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="border-blue-"], [class*="border-sky-"], [class*="border-indigo-"], [class*="border-purple-"], [class*="border-violet-"]) { border-color: var(--evg-info) !important; }

/* Tinted backgrounds (bg-emerald-500/20, bg-red-950 …): a faint tint of the role colour. */
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-teal-"]) { background-color: color-mix(in srgb, var(--evg-ok) 16%, transparent) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="bg-red-"], [class*="bg-rose-"]) { background-color: color-mix(in srgb, var(--evg-bad) 16%, transparent) !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is([class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-orange-"]) { background-color: color-mix(in srgb, var(--evg-warn) 16%, transparent) !important; }
/* Solid buttons with white text: a dark shade of the role colour keeps the text readable (7:1 in high contrast). */
html:not(#_a):not(#_b)[data-a11y-colors] :is(.bg-emerald-500, .bg-emerald-600, .bg-teal-600) { background-color: color-mix(in srgb, var(--evg-ok) 40%, #000) !important; background-image: none !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is(.bg-red-600, .bg-rose-500) { background-color: color-mix(in srgb, var(--evg-bad) 40%, #000) !important; background-image: none !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is(.bg-amber-400, .bg-amber-500, .bg-amber-600) { background-color: var(--evg-warn) !important; color: #000 !important; }
html:not(#_a):not(#_b)[data-a11y-colors] :is(.bg-amber-400, .bg-amber-500, .bg-amber-600) * { color: #000 !important; }

/* ---------- High contrast surfaces ---------- */
html:not(#_a):not(#_b)[data-contrast="high"] body { background: var(--evg-hc-bg) !important; color: var(--evg-hc-text) !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(.card, header.card, #main-container, #panel-chat, #panel-lab, .modal, [role="dialog"], dialog) {
  background-color: var(--evg-hc-surface) !important; background-image: none !important; border-color: var(--evg-hc-line) !important; box-shadow: none !important; backdrop-filter: none !important;
}
html:not(#_a):not(#_b)[data-contrast="high"] :is([class*="bg-slate-950"], [class*="bg-slate-900"], [class*="bg-slate-800"], [class*="bg-black"]) { background-color: var(--evg-hc-surface) !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is([class*="bg-slate-700"], [class*="bg-slate-600"], [class*="bg-slate-500"]) { background-color: var(--evg-hc-raised) !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(.text-white, [class*="text-slate-"], [class*="text-gray-"]) { color: var(--evg-hc-text) !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(.text-slate-400, .text-slate-500, .text-slate-600) { color: var(--evg-hc-muted) !important; }
/* Dark text on a light button stays dark (yellow and white buttons). */
html:not(#_a):not(#_b)[data-contrast="high"] :is(.text-slate-950, .text-slate-900, .text-black) { color: #000 !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is([class*="border-slate-"], [class*="border-gray-"], .border) { border-color: var(--evg-hc-line) !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(input, select, textarea) {
  background-color: var(--evg-hc-surface) !important; color: var(--evg-hc-text) !important; border: 2px solid var(--evg-hc-line) !important;
}
html:not(#_a):not(#_b)[data-contrast="high"] ::placeholder { color: var(--evg-hc-muted) !important; opacity: 1 !important; }
/* Solid brand buttons: deep blue or indigo behind white text (≥ 8:1), no gradients. */
html:not(#_a):not(#_b)[data-contrast="high"] :is(.bg-blue-500, .bg-blue-600, .bg-sky-600, [class*="from-blue-"], [class*="from-sky-"]) { background-color: #1e3a8a !important; background-image: none !important; color: #fff !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(.bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600, [class*="from-indigo-"], [class*="from-purple-"]) { background-color: #312e81 !important; background-image: none !important; color: #fff !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(.bg-blue-500, .bg-blue-600, .bg-sky-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600, [class*="from-blue-"], [class*="from-indigo-"], [class*="from-purple-"]) :is(*, [class*="text-"]) { color: #fff !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :is(.tab-active, .mob-tab-active) { background: #1e3a8a !important; color: #fff !important; }
/* Tinted blue and purple chips become outlined. */
html:not(#_a):not(#_b)[data-contrast="high"] :is([class*="bg-blue-500/"], [class*="bg-blue-600/"], [class*="bg-blue-950"], [class*="bg-blue-900"], [class*="bg-indigo-500/"], [class*="bg-indigo-600/"], [class*="bg-indigo-950"], [class*="bg-purple-500/"], [class*="bg-purple-950"], [class*="bg-sky-950"]) {
  background-color: transparent !important; border-color: var(--evg-hc-line) !important;
}
/* Decorative glows and blurred blobs carry no information. */
html:not(#_a):not(#_b)[data-contrast="high"] :is(.blur-xl, .blur-2xl, .blur-3xl) { display: none !important; }
html:not(#_a):not(#_b)[data-contrast="high"] a:not([class]) { text-decoration: underline !important; }
html:not(#_a):not(#_b)[data-contrast="high"] :focus-visible { outline: 3px solid var(--evg-hc-focus) !important; outline-offset: 2px !important; }
html:not(#_a):not(#_b)[data-contrast="high"] .katex,
html:not(#_a):not(#_b)[data-contrast="high"] .katex * { color: var(--evg-hc-text) !important; }

/* ---------- "Comfort" dialog (first-visit wizard, menu → Comfort) ---------- */
.a11y-dialog {
  --a11y-bg: #111827; --a11y-text: #f1f5f9; --a11y-muted: #cbd5e1; --a11y-line: #475569; --a11y-card: #0b1220; --a11y-accent: #93c5fd; --a11y-primary: #1d4ed8;
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 0; border: 1px solid var(--a11y-line); border-radius: 18px; background: var(--a11y-bg); color: var(--a11y-text);
  font-size: 1rem; line-height: 1.5;
}
[data-theme="light"] .a11y-dialog { --a11y-bg: #ffffff; --a11y-text: #0f172a; --a11y-muted: #334155; --a11y-line: #94a3b8; --a11y-card: #f8fafc; --a11y-accent: #1d4ed8; }
html[data-contrast="high"] .a11y-dialog { --a11y-bg: var(--evg-hc-bg); --a11y-text: var(--evg-hc-text); --a11y-muted: var(--evg-hc-muted); --a11y-line: var(--evg-hc-line); --a11y-card: var(--evg-hc-surface); }
.a11y-dialog::backdrop { background: rgba(2, 6, 23, 0.72); }
.a11y-dialog__form { display: flex; flex-direction: column; gap: 16px; padding: 20px; margin: 0; }
.a11y-dialog__step { margin: 0; font-size: 0.85rem; color: var(--a11y-muted); font-weight: 600; }
.a11y-dialog__title { margin: 2px 0 4px; font-size: 1.35rem; font-weight: 800; }
.a11y-dialog__intro, .a11y-step__hint, .a11y-dialog__later { margin: 0; color: var(--a11y-muted); font-size: 0.95rem; }
.a11y-step { display: flex; flex-direction: column; gap: 14px; }
.a11y-step[hidden] { display: none; }
.a11y-step__title { margin: 0; font-size: 1.15rem; font-weight: 700; outline: none; }
.a11y-sample { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--a11y-line); background: var(--a11y-card); }
.a11y-sample__text { margin: 0 0 6px; }
.a11y-sample__math { margin: 0; font-weight: 700; color: var(--a11y-accent); font-size: 1.2rem; }
.a11y-field { display: flex; flex-direction: column; gap: 8px; }
.a11y-field__label { font-weight: 700; padding: 0; }
.a11y-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a11y-scale input[type="range"] { flex: 1 1 160px; min-width: 140px; accent-color: var(--a11y-accent); min-height: 44px; }
.a11y-scale__value { min-width: 4.5em; font-weight: 700; text-align: right; }
.a11y-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--a11y-line); border-radius: 14px; cursor: pointer; }
.a11y-check input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--a11y-accent); }
.a11y-check__hint { display: block; color: var(--a11y-muted); font-size: 0.9rem; }
.a11y-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.a11y-cards--three { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.a11y-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px solid var(--a11y-line); border-radius: 14px; background: var(--a11y-card); cursor: pointer; min-height: 44px; }
.a11y-card.is-selected { border-color: var(--a11y-accent); border-width: 3px; padding: 11px; }
.a11y-card.is-selected::after { content: "✓"; position: absolute; top: 8px; right: 10px; font-weight: 800; color: var(--a11y-accent); }
.a11y-card:focus-within { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }
.a11y-card__title { font-weight: 700; padding-right: 18px; }
.a11y-card__hint { color: var(--a11y-muted); font-size: 0.9rem; }
.a11y-card__icon { font-size: 1.6rem; line-height: 1; }
.a11y-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: 10px; background: var(--pv-bg); }
.a11y-chip { display: block; padding: 3px 6px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; border: 2px solid currentColor; color: var(--pv-c); background: transparent; }
.a11y-chip--ok { --pv-c: var(--pv-ok); } .a11y-chip--bad { --pv-c: var(--pv-bad); } .a11y-chip--warn { --pv-c: var(--pv-warn); } .a11y-chip--info { --pv-c: var(--pv-info); }
/* Each card shows its own colours (same values as the palettes above). */
.a11y-preview { --pv-bg: #0b0f19; --pv-ok: #34d399; --pv-bad: #f87171; --pv-warn: #fbbf24; --pv-info: #60a5fa; }
.a11y-preview[data-preview="high"] { --pv-bg: #000; --pv-ok: #6ee7b7; --pv-bad: #fca5a5; --pv-warn: #fcd34d; --pv-info: #93c5fd; }
.a11y-preview[data-preview="protan"] { --pv-ok: #6ee7b7; --pv-bad: #ff8a3d; --pv-warn: #f0e442; --pv-info: #93c5fd; }
.a11y-preview[data-preview="deutan"] { --pv-ok: #67e8f9; --pv-bad: #f87171; --pv-warn: #fbbf24; --pv-info: #818cf8; }
.a11y-preview[data-preview="tritan"] { --pv-ok: #86efac; --pv-bad: #ff8a3d; --pv-warn: #fbbf24; --pv-info: #a78bfa; }
[data-theme="light"] .a11y-preview { --pv-bg: #ffffff; --pv-ok: #047857; --pv-bad: #b91c1c; --pv-warn: #b45309; --pv-info: #1d4ed8; }
[data-theme="light"] .a11y-preview[data-preview="high"] { --pv-bg: #fff; --pv-ok: #065f46; --pv-bad: #7f1d1d; --pv-warn: #78350f; --pv-info: #1e3a8a; }
[data-theme="light"] .a11y-preview[data-preview="protan"] { --pv-ok: #0369a1; --pv-bad: #be123c; --pv-warn: #a16207; --pv-info: #6d28d9; }
[data-theme="light"] .a11y-preview[data-preview="deutan"] { --pv-ok: #0e7490; --pv-bad: #9f1239; --pv-warn: #c2410c; --pv-info: #1d4ed8; }
[data-theme="light"] .a11y-preview[data-preview="tritan"] { --pv-ok: #15803d; --pv-bad: #be123c; --pv-warn: #854d0e; --pv-info: #5b21b6; }
.a11y-preview[data-preview="high"] .a11y-chip { border-width: 3px; }
.a11y-segment { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.a11y-segment legend { width: 100%; margin-bottom: 6px; }
.a11y-segment__option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--a11y-line); border-radius: 12px; cursor: pointer; }
.a11y-segment__option:has(input:checked) { border-color: var(--a11y-accent); }
.a11y-segment__option input { width: 20px; height: 20px; accent-color: var(--a11y-accent); }
.a11y-motion-demo { height: 40px; border-radius: 12px; border: 1px dashed var(--a11y-line); position: relative; overflow: hidden; }
.a11y-motion-demo__dot { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--a11y-accent); animation: a11y-slide 2.4s ease-in-out infinite alternate; }
@keyframes a11y-slide { from { transform: translateX(0); } to { transform: translateX(calc(min(560px, 80vw) - 60px)); } }
.a11y-dialog__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--a11y-line); padding-top: 14px; }
.a11y-dialog__nav { display: flex; gap: 10px; margin-left: auto; }
.a11y-btn { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--a11y-line); background: transparent; color: var(--a11y-text); font: inherit; font-weight: 700; cursor: pointer; }
.a11y-btn--icon { padding: 0 10px; }
.a11y-btn--ghost { border-color: transparent; text-decoration: underline; }
.a11y-btn--primary { background: var(--a11y-primary); border-color: var(--a11y-primary); color: #fff; }
.a11y-btn[hidden] { display: none; }
.a11y-btn:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }
.a11y-dialog .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; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .a11y-motion-demo__dot { animation: none; } }
/* The buttons stay in reach on a small screen and with big text. */
.a11y-dialog__foot { position: sticky; bottom: 0; background: var(--a11y-bg); margin: 0 -20px -20px; padding: 14px 20px 20px; }