/** * Accessibility primitives: screen-reader-only text, the skip link, * global focus-visible styling, and reduced-motion support. These rules * are load-bearing for WCAG 2.1 AA compliance — do not remove without * an equivalent replacement. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--color-gray-100); clip: auto !important; clip-path: none; color: var(--color-primary-700); display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); height: auto; inset-inline-start: var(--space-1); inset-block-start: var(--space-1); padding: var(--space-4) var(--space-5); text-decoration: none; line-height: normal; width: auto; z-index: var(--z-skip-link); } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 0; z-index: var(--z-skip-link); } .skip-link:focus { inset-block-start: 0; } /* Global focus-visible ring — never remove an outline without this replacement. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Body scroll lock — applied to while the mobile drawer (or any future overlay) is open, so the page behind it can't scroll. */ .has-locked-scroll { overflow: hidden; } /* Reduced motion: honor the OS-level preference across every animation/transition in the theme. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }