/* ============================================================================
   a11y-perfection.css — WCAG AAA focus + cognitive-friction layer (2026-06-12)
   Loads after aesthetic-premium.css. Additive only.

   FOCUS RING: dual-ring technique — a 2px high-luminance ring (hsl 210 100 80,
   ≈8.5:1 vs the #16213c dark frame, ≈1.55 vs white) separated from ANY surface
   by a 2px near-black halo (≈17:1 vs white), so on light surfaces the dark halo
   carries the >=3:1 indicator contrast and on dark surfaces the light ring
   does — the pair is >=3:1 against every background by construction.
   `outline: 2px solid` is kept (route_abuse pins outlineStyle/Width on session
   tap targets); the halo rides box-shadow.
   ============================================================================ */

:root {
  --a11y-ring-hi: hsl(210deg 100% 80%);
  --a11y-ring-halo: hsl(222deg 45% 5%);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--a11y-ring-hi) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--a11y-ring-halo) !important;
  border-radius: 6px;
}

/* keyboard users never lose the ring to decorative outline:none resets */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* COGNITIVE FRICTION KILL: anything inert is fully out of the interaction
   plane — belt over the UA behavior for older engines. */
[inert] {
  pointer-events: none;
  user-select: none;
}

/* System-2 surfaces: data tables get an explicit focal frame when focused so
   keyboard exploration has a visible anchor. */
:where(table, [role="table"]):focus-visible {
  outline: 2px solid var(--a11y-ring-hi) !important;
  outline-offset: 4px !important;
}