/* ============================================================
   Tap feedback that follows each button's own shape
   BUG-199 (Ren 2026-11-04): on phones a tapped button flashed a
   grey/blue RECTANGLE (the browser's tap highlight, and a focus
   ring after a tap) instead of following the rounded shape.
   Loaded on every page. The browser rectangle is turned off and
   a press shows as a slight darkening of the button itself, so
   the feedback has the same rounded corners as the button.
   Keyboard users still get a focus ring (:focus-visible).
   ============================================================ */
html, body, *, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* No focus ring after a mouse/finger tap; keep it for the keyboard. */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
label:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="tab"]:focus:not(:focus-visible),
[role="menuitem"]:focus:not(:focus-visible),
[onclick]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) { outline: none; }

/* Pressed look, same shape as the button. */
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active { filter: brightness(.92); }