Add one focus-visible outline rule for all controls

There were three answers and a silence. Seven call sites swapped a border
colour, which moves nothing and is easy to miss on a field that already has a
border. Three drew a Tailwind ring. The editor's stylesheet drew an outline.
And twenty of the thirty-two buttons in the app answered it not at all, so
tabbing through the toolbar showed nothing whatsoever.

One rule now covers everything focusable. An outline rather than a ring or a
border: it follows `border-radius`, takes no space in the layout, and paints
over whatever it sits on rather than needing a background to sit against.

`:where()` gives it zero specificity, so anything needing something different
overrides it with a single class and no fight. That is also why it belongs in
the theme rather than in a utility somebody has to remember — the failure mode
of a utility is the twenty buttons above.

Seven `outline-none` declarations were suppressing the ring before it existed
and are gone. `focus-visible:border-ring` survives where a border is the thing
that reveals the field rather than a restatement of focus.

Stripping the old declarations by pattern needed care: `focus-visible:ring-ring/40`
is a utility with an opacity modifier, and matching only the utility leaves the
`/40` welded onto whichever word precedes it. Three sites were affected and
they failed differently — `text-left/40` is not a utility, so Tailwind dropped
it and the alignment with it, while `hover:text-foreground/40` and
`focus-visible:border-ring/30` are both valid and went on working at reduced
opacity, which nothing reports.

`focus.test.ts` guards the two ways a component can leave the rule again:
suppressing the outline, or drawing a second answer beside it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>