Kiosk: find a free drive by typing, and use the width of the panel

A cabinet of thirty drives was one long column to read through. The free list
now filters from a search box and lays out in as many columns as the panel is
wide - four on a wall display, two on a tablet, one on a phone - while the
steps that hold a single control stay narrow, because stretching one input
across a 24 inch screen reads as a broken page.

A drive is found by its id, by what is written on it, or by where it lives. The
words can arrive in any order, and "locker" is part of what is searched, so
"locker engineer" finds the engineering locker - that is how people say it out
loud. Filtering is client-side: every free drive is already on the screen, and a
round trip per keystroke on a wall panel would be worse than no filter at all.
The matcher lives in its own module with tests rather than inside the view.

The box takes focus as the picker opens so somebody can simply start typing,
and it is cleared when the kiosk resets - the next person at the cabinet must
not inherit a filter and conclude there are no drives left.

Also: both this view and the guides blocks coloured muted text with a
`--textmuted` variable this app has never defined. The browser dropped the
declaration, so every hint, subtitle and locker line was rendering at full
strength. The variable is `--text-light`.

plugins/guides/frontend/components/GuideBlocks.vue

@@ -253,7 +253,7 @@ function select (block) {
   margin: 0; padding: 0.75rem 1rem; border: 1px dashed var(--border);
   border-radius: 4px; font-size: 0.9rem;
 }
-.gb-imageloading { color: var(--textmuted); }
+.gb-imageloading { color: var(--text-light); }
 .gb-imagefailed { color: var(--danger, #b3261e); }
 .gb-figure figcaption { font-size: 0.8rem; color: var(--text-light); margin-top: 0.35rem; }