fix(home): refine search pill — smaller, single view icon, distinct icons, sort text fix

[p4gs]

Four refinements to the Google-style header search pill (#77):

1. Smaller — pill height 40px → 36px (input 32px), and a little narrower (reserve margins 185/284 → 215/314).
2. View toggle shows one icon at a time — hide the active .view-btn on desktop so only the target-view icon shows; clicking it switches the view and the icon swaps (grid ⇄ list). CSS-only; mobile keeps its segmented toggle.
3. Distinct System Type icon — was the 2×2 grid (identical to the grid-view icon); now a layers icon.
4. Sort no longer shows stretched 'A-Z' text when selected — the toggle JS wrote 'A-Z'/'Z-A' into childNodes[last], which (after the label was wrapped in a span) is the trailing whitespace text node → it rendered a visible bare "A-Z" and stretched the button. Now it writes into the .filter-label span (hidden on desktop, correct on mobile). The icon stays the default arrows glyph.

Verification (Interceptor, real built site, both themes)

• Pill 36px tall, 623px wide; header height still 64px.
• One view icon visible; clicking swaps icon and switches view (icon_swapped: true, view_changed: true).
• System Type icon = layers (polygon+polyline+polyline), no longer grid rects.
• Sort click → zero injected bare text nodes; direction stored in hidden .filter-label.
• System Type dropdown still opens (308px).

Build verified (exit 0). Files: style.css + index.html.