/* Site-wide keyboard focus ring (WCAG 2.4.7 Focus Visible, 1.4.11 Non-text
   Contrast). Loaded by every page.

   Why a separate file: the dc runtime compiles `style-focus="..."` into
   generated .scpN:focus classes but silently drops any declaration containing
   a {{ template }} value, so `outline:3px solid {{ C.teal }}` never reached the
   browser — only outline-offset survived, and one header rule compiled to
   outline:none. Literal values here don't depend on that compiler.

   Two-tone ring (dark outline + white halo) so it stays visible on every
   background the site uses: white, cream, mint, teal, terracotta and the dark
   #1F3A3A comparison section. !important beats inline `outline:none`.

   Elements focused only by script (tabindex="-1" headings and dialog panels
   that receive focus on open) are excluded — they aren't tab stops. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible {
  outline: 3px solid #2A1F0E !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

/* Honour "Reduce motion" (promised in accessibility.html). index.html and the
   quiz already special-case it; this catches every CSS animation, transition
   and smooth scroll on the other pages too. */
@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;
  }
}