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/PlexSidebar.tsx

@@ -59,9 +59,7 @@ function MatchToggle({
             key={m}
             onClick={() => onChange(m)}
             aria-pressed={mode === m}
-            className={`rounded-full px-2 py-0.5 transition ${
-              mode === m ? "bg-accent text-accent-fg" : "text-muted hover:text-fg"
-            }`}
+            className="pill rounded-full px-2 py-0.5"
           >
             {t(`plex.filter.match.${m}`)}
           </button>
@@ -518,7 +516,7 @@ function Chip({
 
 function RemovableChip({ label, onRemove }: { label: string; onRemove: () => void }) {
   return (
-    <span className="inline-flex items-center gap-1 rounded-full bg-accent/15 text-accent px-2 py-1 text-xs">
+    <span className="chip px-2 py-1 text-xs">
       <span className="truncate max-w-36">{label}</span>
       <button onClick={onRemove} className="hover:opacity-70" aria-label="remove">
         <X className="w-3 h-3" />