/* ==========================================================================
   Accessibility baseline — WCAG 2.1 AA basics shared by every page.
   Loaded LAST so its focus ring wins source-order ties against components
   that clear the outline unconditionally. Skip link · keyboard focus ring ·
   reduced motion.
   ========================================================================== */

/* --- Skip to content (WCAG 2.4.1 Bypass Blocks) ---------------------------
   First focusable element in the DOM. Off-screen until focused (kept in the
   a11y tree, not display:none, so it stays reachable), then it drops into the
   top-left corner. Its target is <main id="main-content" tabindex="-1">, so a
   keyboard user's first Tab lets them jump past the nav. */
.skip-link {
    position: fixed;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 2000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent);
    color: var(--n-0);
    border-radius: var(--radius-control);
    font-size: var(--fs-2);
    font-weight: var(--fw-600);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-150%);
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
    outline: 2px solid var(--n-0);
    outline-offset: 2px;
}
/* main is focused programmatically after the skip jump; never show a ring on it. */
#main-content:focus,
#main-content:focus-visible {
    outline: none;
}

/* --- Keyboard focus ring (WCAG 2.4.7 Focus Visible) -----------------------
   A consistent, visible ring on every clickable element when reached by
   keyboard (:focus-visible never fires on a mouse click). Form controls keep
   their own richer accent ring from input.css and are intentionally NOT
   listed here, so they are not double-ringed. This baseline is what restores
   a visible focus to links/buttons that cleared the UA outline with no
   replacement (e.g. .file-name-text a). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Reduced motion (WCAG 2.3.3) ------------------------------------------
   Honour the OS "reduce motion" preference: collapse animation/transition to a
   near-instant, non-animating step and disable smooth scrolling. State changes
   (colour, opacity, showing/hiding) still apply — only the movement is removed. */
@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;
    }
    html {
        scroll-behavior: auto !important;
    }
}