diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss
index d0bfe92..dcc46a1 100644
--- a/apps/web/src/features/recipes/recipes.scss
+++ b/apps/web/src/features/recipes/recipes.scss
@@ -689,6 +689,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
+  // Every clickable chip/card below is a plain `<button>` with no text to
+  // actually select — without this, a click that moves even a pixel (a
+  // fast click, a trackpad) is read as a text-selection drag instead, and
+  // the browser's native selection highlight paints over the intended
+  // `.active` state. Reads as "the selection styling is flaky" from the
+  // outside; this is the actual cause, not the `.active` rules themselves.
+  user-select: none;
   padding: var(--space-sm);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
@@ -712,6 +719,10 @@
       border-radius: var(--radius-base);
       background: var(--color-surface-alt);
       color: var(--color-text);
+      // Undo the container's `user-select: none` — that rule exists for
+      // the chip/card buttons, not this text input; a search box the user
+      // can't select/copy text from would be its own bug.
+      user-select: text;
     }
   }