/* ============================================
   KEYBOARD FOCUS RING (the double-ring halo)
   ============================================
   LINKED LAST in index.html.template, deliberately, and NOT @imported by styles.css.

   The ring is a box-shadow halo plus an outline. accessibility.css used to carry it, but that sheet is
   @imported inside styles.css, which is the FIRST stylesheet linked, so every later sheet outranks it at
   equal specificity. Seven surfaces set their own base `box-shadow` at (0,1,0) -- the same specificity as
   `:focus-visible` -- and won, so keyboard focus showed no halo on .fab-add-wine, .context-menu,
   .first-run-card, .app-tooltip, .coach-mark, .recent-drinks-widget and .recipe-picker-listbox.

   Only the ring lives here. The rest of accessibility.css (touch targets, reduced motion, skip link,
   `:focus:not(:focus-visible)`) keeps its position: moving it would change pointer-focus outlines and touch
   target padding too, which is a different decision (docs/plans/focus-ring-precedence.md).
   `tests/unit/contracts/focusRingLast.test.js` pins the order. */

/* Focus visible styles for keyboard navigation — Phase 7.1 double-ring pattern */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25);
}