/*
 * Shared accessibility + motion baseline for the public /tools/* pages.
 *
 * Each tool page still carries its own (largely duplicated) inline CSS
 * for layout. This file holds ONLY the cross-cutting rules that must be
 * identical on every tool and that the inline CSS currently omits:
 *   1. a visible keyboard-focus ring (none of the pages had one), and
 *   2. an OS-level reduced-motion opt-out (spinners / transitions).
 *
 * It is linked from every tool page directly after design-system.css so
 * it can lean on the design tokens (--accent) and win the cascade over
 * any per-page `:focus { outline: none }` reset.
 *
 * Scope is deliberately narrow: these two rules are purely additive, so
 * they carry no regression risk against the page tests that assert
 * specific CSS-in-HTML. The larger job of de-duplicating the inline CSS
 * into this file is a separate change (it would require migrating those
 * grep-based page tests) and is intentionally NOT done here.
 */

/* ---------------------------------------------------------------------
 * Keyboard focus
 * ------------------------------------------------------------------ */

/* A clear focus ring for keyboard and assistive-tech users. :focus-visible
 * only fires for keyboard / programmatic focus, so mouse users keep the
 * clean, ring-free look the pages were designed with. The element-level
 * selectors below carry enough specificity to override a bare
 * `input:focus { outline: none }` reset on the individual pages. */
:focus-visible {
  outline: 2px solid var(--accent, #ff5600);
  outline-offset: 2px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #ff5600);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

/* Honour the OS "reduce motion" setting for people who get motion sick
 * or use AT: collapse the loading spinners, streamed-row transitions,
 * and smooth-scroll. Near-zero (not 0) durations are used so any JS that
 * waits on `animationend` / `transitionend` still fires its handler. */
@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;
  }
}