diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2b7aa179..560b6b4c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -438,7 +438,8 @@ body {
     transition:
       color 0.15s ease,
       background-color 0.15s ease,
-      border-color 0.15s ease;
+      border-color 0.15s ease,
+      box-shadow 0.15s ease; /* so an on-state shadow (Tabs/SettingsPanel) fades in, not pops */
   }
   .pill:hover,
   .is-current:hover {
@@ -450,9 +451,11 @@ body {
   .is-current:hover {
     background-color: var(--card);
   }
-  /* selected / current — SOLID accent fill (the dominant idiom) */
+  /* selected / current — SOLID accent fill (the dominant idiom). The `:not([aria-current="false"])`
+     guard matters: `.is-current` is a shared primitive and a consumer using the common
+     `aria-current={x ? "true" : "false"}` idiom would otherwise paint a NON-current row as current. */
   .pill[aria-pressed="true"],
-  .is-current[aria-current] {
+  .is-current[aria-current]:not([aria-current="false"]) {
     background-color: var(--accent);
     color: var(--accent-fg);
     border-color: var(--accent);
@@ -465,9 +468,13 @@ body {
     border-color: color-mix(in srgb, var(--accent) 40%, transparent);
   }
 
-  /* .chip — an applied tag / filter token (rounded, tinted). The tint is the resting look (a filter
-     is "on" whenever the chip exists); removable variants add their own × button as a child.
-     .chip-solid = the strong-fill token (an applied tag colour, a picked channel). */
+  /* .chip — an applied tag / filter token (rounded, tinted, self-contained: display + geometry +
+     paint). The tint is the resting look (a filter is "on" whenever the chip exists); removable
+     variants add their own × button as a child.
+     .chip-solid is intentionally a PAINT-ONLY modifier (bg/text/border colour, no display or
+     geometry): it sits on a site's OWN chip geometry so a truncating single-element chip
+     (ChannelTags) isn't forced into inline-flex, which would break its text-overflow. Use it WITH a
+     site's `rounded-full`/`border` utilities (or on top of `.chip`), never bare. */
   .chip {
     display: inline-flex;
     align-items: center;