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

@@ -193,9 +193,7 @@ export default function NavSidebar({
         onClick={() => setPage(p)}
         title={slim ? label : undefined}
         aria-current={active ? "page" : undefined}
-        className={`${rowBase} ${slim ? "justify-center px-0" : ""} relative ${
-          active ? "bg-accent text-accent-fg" : "text-muted hover:text-fg hover:bg-card"
-        }`}
+        className={`${rowBase} ${slim ? "justify-center px-0" : ""} relative is-current`}
       >
         <span className="relative shrink-0">
           <Icon className="w-4.5 h-4.5" />
@@ -308,11 +306,7 @@ export default function NavSidebar({
             onClick={() => setPage("settings")}
             title={slim ? t("header.account.settings") : undefined}
             aria-current={page === "settings" ? "page" : undefined}
-            className={`${rowBase} ${slim ? "justify-center px-0" : ""} ${
-              page === "settings"
-                ? "bg-accent text-accent-fg"
-                : "text-muted hover:text-fg hover:bg-card"
-            }`}
+            className={`${rowBase} ${slim ? "justify-center px-0" : ""} is-current`}
           >
             <Settings className="w-4.5 h-4.5 shrink-0" />
             {!slim && <span className="truncate">{t("header.account.settings")}</span>}