fix(ui): Draw focus rings on controls only, not on focusable containers (#66)

The global :focus-visible outline loads after the module CSS with the same
specificity, so every focusable container without its own override (the
Intentions list, other list/tree/menu popups) got a square blue frame. ee99b36
patched the Select popup only. Like IDEA, rings now mark controls (buttons,
links, fields, checkboxes, tabs…); lists, trees, tables and popups show focus
through their selected row, and the few rows that drew frames use the hover
background instead.

Claude-Session: https://claude.ai/code/session_01VUYsdXA2nkF5v6zsC93dpn

src/features/plugins/PluginsPage.module.css

@@ -155,8 +155,8 @@
   text-align: left;
 }
 .rowMain:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
+  outline: none;
+  background: var(--bg-hover);
 }
 .rowName {
   overflow: hidden;

src/features/settings/components/Form.module.css

@@ -172,9 +172,6 @@
   overflow: auto;
   outline: none;
 }
-.globList:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
 .globRow {
   display: flex;
   align-items: center;

src/features/settings/languages/Sdk.module.css

@@ -96,9 +96,8 @@
 .table tbody tr.selected:hover {
   background: var(--bg-list-selected);
 }
-.table tbody tr:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+.table tbody tr:focus-visible:not(.selected) {
+  background: var(--bg-hover);
 }
 .versionCell {
   color: var(--fg-secondary);

src/features/settings/pages/editor/Editor.module.css

@@ -144,9 +144,6 @@
   white-space: pre;
   outline: none;
 }
-.previewArea:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
 
 /* Color Scheme page */
 .schemeRow {

src/features/tools/LanguageServersPage.module.css

@@ -108,8 +108,8 @@
   text-align: left;
 }
 .rowMain:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
+  outline: none;
+  background: var(--bg-hover);
 }
 .rowName {
   flex: none;

src/styles/global.css

@@ -94,7 +94,28 @@ a:hover {
   color: var(--link-hover);
 }
 
+/* Focus rings mark controls only, as in IDEA: lists, trees, tables, menus, popups and other
+   focusable containers show focus through their selected row instead of a frame. */
 :focus-visible {
+  outline: none;
+}
+:is(
+  button,
+  a[href],
+  input,
+  select,
+  textarea,
+  summary,
+  [role="button"],
+  [role="link"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="switch"],
+  [role="tab"],
+  [role="combobox"],
+  [role="slider"],
+  [role="spinbutton"]
+):focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: -2px;
 }