/* =====================================================================
 * a11y.css — accessibility helpers shared across portal + tools.
 *
 *   - Strong, always-visible focus ring for keyboard users (modern
 *     browsers paint :focus-visible only when navigation is via
 *     keyboard, so mouse clicks aren't littered with outlines).
 *   - Visually-hidden helper for screen-reader-only text.
 *   - Honors prefers-reduced-motion globally.
 * =====================================================================*/

:focus-visible {
    outline: 2px solid var(--color-accent, #38bdf8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* For buttons/links the outline-offset can clip against their own border;
   prefer a slim ring shadow there for tighter visual fit. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(56,189,248,0.85), 0 0 0 4px rgba(56,189,248,0.25);
}

/* Visually-hidden but exposed to screen readers. */
.visually-hidden,
.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;
}

/* Reduce motion globally for users who request it. Each individual
   keyframe rule already honors prefers-reduced-motion, but this catches
   any third-party CSS we haven't audited. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}