/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — global keyboard focus indicator
   Many components use `outline:none` to hide the mouse-click outline, which
   also strips the keyboard-focus ring and leaves keyboard / screen-reader
   users with no visible "where am I". This restores a clear focus ring using
   :focus-visible, which only triggers for keyboard / assistive navigation —
   so mouse clicks stay clean. Loads last; !important overrides the scattered
   outline:none rules.
   ════════════════════════════════════════════════════════════════════════ */
:where(a[href], button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]),
       [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="option"]):focus-visible {
  outline: 2px solid #19b6c9 !important;
  outline-offset: 2px !important;
  border-radius: 3px;
  /* a soft halo so the ring reads on both light and dark surfaces */
  box-shadow: 0 0 0 4px rgba(25, 182, 201, 0.25) !important;
}

/* Stronger ring when the user asks for more contrast. */
@media (prefers-contrast: more) {
  :where(a[href], button, input, select, textarea, summary,
         [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
    outline-width: 3px !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55) !important;
  }
}

/* Respect reduced-motion: nothing animates here, but keep the ring instant. */