/* Shared accessibility safeguards for the active GradeWise screens. */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--teal, var(--accent, #0f766e)) !important;
    outline-offset: 3px !important;
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])) {
    -webkit-tap-highlight-color: transparent;
}

/* Pointer/touch focus must not leave the browser's blue ring behind. The
   modality marker is set by a11y.js; keyboard focus remains visible above. */
html[data-focus-modality="pointer"]
    :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus {
    outline: none !important;
    box-shadow: var(--a11y-pointer-box-shadow, none) !important;
}

:where(button, [role="button"], summary) { cursor: pointer; }
:where(button, [role="button"], summary, input, select, textarea) { touch-action: manipulation; }
:where(img, svg, canvas, video) { max-width: 100%; }
.theme-icon-rotor > svg { max-width: none; max-height: none; }

@media (max-width: 480px) {
    :where(input, select, textarea) { font-size: max(16px, 1em); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}