refactor(ui): R10 S4 — unify selected-paint into .pill/.is-current/.chip recipes

The ~14 hand-rolled "this is the selected/current/active one" idioms each
repeated the same `sel ? "bg-accent text-accent-fg border-accent" : "…"` inline
ternary, which had drifted. Three attribute-driven recipes in @layer components
now own that paint, keyed on the ARIA the control already carries: .pill
(aria-pressed segments/toggles), .is-current (aria-current nav/list items), and
.chip / .chip-solid (tag & filter tokens). The JSX just toggles the ARIA; the CSS
paints, so one control's selected look can't diverge from the next's. No
focus-visible in the recipes — the @layer base rule already rings every button/a.

Migrated 15 sites (Feed show/content, Channels tag filter, Sidebar or-and +
scope, PlexSidebar match, Tabs, SettingsPanel tab-rail, PlexPlaylistView layout
[soft], NavSidebar nav + settings, ActiveFilterChips, PlexSidebar RemovableChip,
ChannelTags, ChannelPicker). Deliberately left: PlexSidebar facet Chip and
PlexPlaylistView already covered; SavedViews row (paint split across two
elements), the scheme swatch (border-only on a coloured swatch), and
ChannelPicker's option rows (text-only selection) — noted for a follow-up.

frontend/src/components/Sidebar.tsx

@@ -281,11 +281,7 @@ export default function Sidebar({
                     key={m}
                     onClick={() => setFilters({ ...filters, tagMode: m })}
                     aria-pressed={filters.tagMode === m}
-                    className={`px-2 py-0.5 rounded-full transition ${
-                      filters.tagMode === m
-                        ? "bg-accent text-accent-fg"
-                        : "text-muted hover:text-fg"
-                    }`}
+                    className="pill px-2 py-0.5 rounded-full"
                   >
                     {m === "or" ? t("sidebar.any") : t("sidebar.all")}
                   </button>
@@ -392,9 +388,7 @@ export default function Sidebar({
             onClick={() => setFilters({ ...filters, scope: s })}
             title={t("header.scope." + s + "Tip")}
             aria-pressed={filters.scope === s}
-            className={`flex-1 inline-flex items-center justify-center gap-1 px-2.5 py-1 rounded-full transition ${
-              filters.scope === s ? "bg-accent text-accent-fg" : "text-muted hover:text-fg"
-            }`}
+            className="pill flex-1 inline-flex items-center justify-center gap-1 px-2.5 py-1 rounded-full"
           >
             {s === "my" ? <User className="w-3.5 h-3.5" /> : <Library className="w-3.5 h-3.5" />}
             <span>{t("header.scope." + s)}</span>