/* SchoolCAD — accessibility settings (Settings → Accessibility), set on <html> by js/theme.js. Used by the app and
 * the Help pages. WCAG 2.2 AA is met without them; these are for students who want more. */

/* the easy-read font: Atkinson Hyperlegible (Braille Institute, SIL Open Font Licence, fonts/OFL-atkinson-hyperlegible.txt) */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); }
html.a11y-font { --font-ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font: var(--font-ui); }
html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea { font-family: var(--font-ui); }

/* bigger menus, panels and dialogs; the 3D view itself keeps its size, so clicks in it land where they should */
html[data-a11y-text="115"] { --a11y-z: 1.15; }
html[data-a11y-text="130"] { --a11y-z: 1.3; }
html[data-a11y-text="150"] { --a11y-z: 1.5; }
html[data-a11y-text] :is(.topbar, .toolbar, .ftree, .fdialog, .lesson, .statusbar, dialog, .palette, .ctx-menu, .toast, .tool-menu, .val-edit, .help-main, .help-side, .hd) { zoom: var(--a11y-z); }
html[data-a11y-text] .cad { grid-template-columns: calc(240px * var(--a11y-z)) minmax(0, 1fr) calc(330px * var(--a11y-z)); }
@media (max-width: 1100px) { html[data-a11y-text] .cad { grid-template-columns: calc(200px * var(--a11y-z)) minmax(0, 1fr); } }

/* high contrast: darker words, stronger lines, a thicker focus outline */
html.a11y-contrast { --muted: #383d48; --line: #7b8290; --line-strong: #4f5562; --panel-2: #eef0f3; }
html.a11y-contrast[data-theme="dark"] { --muted: #d0d5de; --line: #737b89; --line-strong: #9aa2b0; --ink: #ffffff; }
@media (prefers-color-scheme: dark) { html.a11y-contrast:not([data-theme="light"]) { --muted: #d0d5de; --line: #737b89; --line-strong: #9aa2b0; --ink: #ffffff; } }
html.a11y-contrast :focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px; box-shadow: 0 0 0 5px var(--panel); }
html.a11y-contrast .help, html.a11y-contrast small { opacity: 1 !important; }

/* no movement: animations and transitions off (the view's own animation is turned off by the same setting) */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }

/* more space between letters, words, lines and paragraphs (the amounts in WCAG 1.4.12) */
html.a11y-spacing :is(p, li, dd, dt, td, th, label, blockquote, .help, .lesson, .st-note, .toast, .pw, .guide-card, .help-main) { line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em; }
html.a11y-spacing :is(p, .help-main li) { margin-bottom: 2em; }

/* links underlined, so they do not rely on colour */
html.a11y-links a, html.a11y-links .linkish { text-decoration: underline !important; text-underline-offset: 2px; }

/* the keyboard pointer (Alt+P): a crosshair in the 3D view moved with the arrow keys; Enter clicks where it is */
.kb-pointer { position: absolute; z-index: 6; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; }
.kb-pointer::before, .kb-pointer::after { content: ""; position: absolute; background: var(--accent); box-shadow: 0 0 0 1.5px var(--panel); }
.kb-pointer::before { left: 16px; top: 0; width: 2px; height: 34px; }
.kb-pointer::after { top: 16px; left: 0; height: 2px; width: 34px; }
.kb-pointer i { position: absolute; inset: 9px; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--panel); }
.kb-pointer-tip { position: absolute; z-index: 6; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 13px; color: var(--ink); }

/* a link that jumps past the top bar and toolbar (shown when it has keyboard focus) */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
.st-sub { margin: 14px 0 2px; font-size: 13px; font-weight: 650; }
/* words for screen readers only */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* bigger text must not make the page wider than the window: the bars fit the window and wrap or fold inside it */
html[data-a11y-text] body.cad-app { grid-template-columns: minmax(0, 1fr); }
html[data-a11y-text] body.cad-app > * { min-width: 0; }