Broaden focus ring to all focusable elements via :focus-visible

Replace input:focus with :focus-visible to cover all focusable elements
(buttons, links, inputs, selects, textareas, [tabindex] elements).
Using :focus-visible shows the ring only for keyboard navigation,
not mouse clicks — the correct accessibility behavior per WCAG 2.4.11.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/javascript/application.scss

@@ -4,7 +4,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-input:focus {
+:focus-visible {
   outline-color: rgb(14, 99, 200);
   outline-style: solid;
   outline-width: 8px;

app/javascript/form.scss

@@ -4,7 +4,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-input:focus {
+:focus-visible {
   outline-color: rgb(14, 99, 200);
   outline-style: solid;
   outline-width: 8px;