diff --git a/src/styles/global.css b/src/styles/global.css
index ba8dff292..f359bf836 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -96,11 +96,13 @@ a: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. Text fields
-   aren't listed: their frame shows focus, and an outline here draws a second box inside it. */
+   never get one, whatever their role (a search box is a combobox): their frame shows focus, and
+   an outline here draws a second box inside it. `:where` keeps this at the specificity of a bare
+   `:focus-visible`, so a component's own focus style always wins. */
 :focus-visible {
   outline: none;
 }
-:is(
+:where(
   button,
   a[href],
   input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
@@ -115,6 +117,13 @@ a:hover {
   [role="combobox"],
   [role="slider"],
   [role="spinbutton"]
+):not(
+  :where(
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
+    textarea,
+    [contenteditable="true"],
+    [contenteditable=""]
+  )
 ):focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: -2px;