/*
 * The things every page owes a keyboard, a screen reader, and an eye that
 * cannot pick a grey label off a grey card.
 *
 * The European Accessibility Act has applied to new consumer-facing services
 * since 28 June 2025, and it points at EN 301 549, which points at WCAG 2.1
 * level AA. This file is the part of that which is genuinely global; the rest
 * is per-page and lives in the pages.
 *
 * Loaded alongside the fonts on every view, because the failure mode of a
 * stylesheet like this is that it covers the pages somebody remembered.
 */

/* ---- Focus, visibly ----------------------------------------------------
 *
 * The single largest gap in this app: almost nothing showed where the keyboard
 * was. A sighted keyboard user — anyone with a tremor, an injury, or simply a
 * preference — was navigating an interface that gave no sign of what pressing
 * Enter would do. WCAG 2.4.7.
 *
 * :focus-visible rather than :focus, so a mouse click does not leave a ring
 * behind it. The outline is offset so it does not sit on the control's own
 * border and read as a rendering fault.
 */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid #18181b;
    outline-offset: 2px;
    border-radius: 4px;
}

/* On a dark control the black ring disappears into it. */
:where(button, a).go:focus-visible,
:where(button, a).use:focus-visible,
:where(button, a).danger:focus-visible {
    outline-color: #fff;
    outline-offset: -4px;
    box-shadow: 0 0 0 2px #18181b;
}

/* Browsers that only know :focus still get something. */
@supports not selector(:focus-visible) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus {
        outline: 2px solid #18181b;
        outline-offset: 2px;
    }
}

/* ---- Saying things only a screen reader needs -------------------------- */
.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;
}

/*
 * Except when it is focused. A skip link that stays hidden while focused is a
 * skip link nobody can use — which is most of them.
 */
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 200;
    background: #18181b;
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: top .12s ease-in-out;
}

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

/* ---- Motion ------------------------------------------------------------
 *
 * WCAG 2.3.3. For some people this is a headache rather than a preference,
 * and the setting is already on their machine — the only thing needed is to
 * stop overriding it.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Targets big enough to hit ----------------------------------------
 *
 * WCAG 2.5.8 asks for 24×24 CSS pixels. Applied to the small icon-only
 * controls, which are the ones that fall under it.
 */
:where(button, a)[aria-label]:not(.skip-link) {
    min-width: 24px;
    min-height: 24px;
}