@@ -240,7 +255,21 @@ function onClearAll() { emit('clear-all') }
.sfh__pill:hover { border-color: var(--brand); }
.sfh__pill[data-active] { background-color: var(--dx-accent-weak, rgba(146, 177, 149, .18)); border-color: var(--brand); color: var(--ink); }
-.sfh__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+/* ★ FIXED HEIGHT IS THE WHOLE POINT — this row must be the same size empty or full, or everything
+ below it jumps on every click. min-height pins it; nowrap keeps a long selection on ONE line rather
+ than growing to a second (flex-wrap was the other way this row could change height).
+ 28px is the Driver's "a bit slimmer": tall enough for a chip and its remove button, short enough
+ that it reads as a status strip rather than a tray. overflow-x:auto lets a long selection scroll
+ sideways instead of ever adding a row. */
+.sfh__chips { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center;
+ min-height: 28px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
+/* The persistent prefix. flex:0 0 auto so it never shrinks away and the row always starts the same
+ way, which is what makes the strip scannable at a glance. */
+.sfh__sel-label { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; letter-spacing: .4px;
+ text-transform: uppercase; color: var(--mut, #6d766e); }
+/* The empty state. Muted rather than hidden: "World" is real information (nothing is filtered), and
+ rendering it keeps the row's content box occupied so the height cannot collapse. */
+.sfh__sel-world { flex: 0 0 auto; font-size: 0.875rem; color: var(--mut, #6d766e); }
.sfh__chip {
display: inline-flex; gap: 6px; align-items: center; background-color: var(--dx-accent-weak, rgba(146, 177, 149, .18));
color: var(--ink); border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; font-size: 0.85rem;