/* Accessibility floor for every shell. Session 43.
 *
 * Three things that are cheap here and impossible to retrofit page by page:
 * a focus indicator that survives, a way past the navigation, and a class for
 * text that only screen readers need.
 *
 * Loaded after the token and shell sheets so its focus rules win. It sets no
 * colours of its own beyond the focus ring, so it cannot collide with the
 * palette - see tools/check_css_tokens.py for why that matters.
 */

/* --- 2.4.7 / 2.4.11 Focus appearance ---------------------------------- */

/* :focus-visible, not :focus - a mouse click should not leave a ring behind,
 * but every keyboard tab stop must show one. Browsers that do not support
 * :focus-visible fall back to their own :focus outline, which is the correct
 * degradation.
 *
 * The ring is drawn with outline plus an offset rather than a border, so it
 * never shifts layout, and box-shadow underneath guarantees contrast against
 * both the light marketplace and the near-black ERP.
 */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

/* The ERP runs on near-black. A blue ring on #0f172a clears 3:1, but the white
 * halo above would glare, so it is inverted there.
 */
.erp-shell :where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible,
body:has(.content-body) :where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
    outline-color: #60a5fa;
    box-shadow: 0 0 0 5px rgba(2, 6, 23, 0.9);
}

/* --- 2.4.1 Bypass blocks ---------------------------------------------- */

.skip-link {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 9999;
    padding: 12px 20px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: #1d4ed8;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    /* No transition: a skip link that animates into place is a skip link a
     * keyboard user has already tabbed past. */
}

.skip-link:focus {
    top: 0;
}

/* --- Text for screen readers only ------------------------------------- */

/* The standard clip pattern. Not display:none and not visibility:hidden -
 * both of those remove the text from the accessibility tree too, which is the
 * opposite of what this is for.
 */
.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;
}

/* --- 2.3.3 Animation from interactions -------------------------------- */

@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;
    }
}