feat(design): the field family, the dropdown trigger, native controls, the no-raw-input lint rule (E28 S3c)

- ui/Input, Textarea, InnerInput + fieldClass (A4): the >= 3:1 edge, a 2px accent
  focus edge, the danger edge for invalid, md/sm/xs/heading rungs, 1rem and 44 on touch
- ui/SelectTrigger (A5): SortControl, FilterSelect, the view switcher and the date
  filter on one trigger, a pill in a toolbar, r8 in a form
- ui/NativeControls (A6): Checkbox, CheckRow, Slider, ColorInput
- every raw input swept (~100 sites); inputCls retired; local/input-primitive
- useReturnFocus: an in-place editor hands the focus back to its trigger on
  Enter/Escape (the playlist and Plex title renames, the priority number);
  the Plex playlist rename gains Escape and an accessible name
- back to top: a round 48 FAB (owner decision); DESIGN.md A2 and the log

frontend/src/components/plexBrowseLists.tsx

@@ -14,6 +14,7 @@ import PlexLibraryPicker from "./PlexLibraryPicker";
 import NavGrid from "./ui/NavGrid";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
+import { Input } from "./ui/Input";
 
 // A collection tile's sub-line: item count · total runtime (each dropped when unknown, e.g. show-only
 // collections have no movie runtime).
@@ -114,13 +115,13 @@ function NewCollectionPanel({
           <X />
         </IconButton>
       </div>
-      <input
+      <Input
+        className="w-full"
         autoFocus
         value={name}
         onChange={(e) => setName(e.target.value)}
         placeholder={t("plex.collection.namePlaceholder")}
         aria-label={t("plex.collection.newCollection")}
-        className="glass-card w-full rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
       />
       {dupHint ? (
         <p className="mt-1 mb-2 text-xs text-muted">{t("plex.collection.nameMaybeTaken")}</p>
@@ -129,13 +130,13 @@ function NewCollectionPanel({
       )}
       <div className="mb-3 flex items-center gap-2">
         <Search className="h-4 w-4 shrink-0 text-muted" />
-        <input
+        <Input
+          className="flex-1"
           value={term}
           onChange={(e) => setTerm(e.target.value)}
           disabled={!nameOk}
           placeholder={t("plex.collection.addSearch")}
           aria-label={t("plex.collection.addSearch")}
-          className="glass-card flex-1 rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40 disabled:opacity-50"
         />
       </div>
       <PlexLibraryPicker
@@ -179,13 +180,15 @@ export function PlexCollectionsBrowse({ onPick }: { onPick: (id: string, title:
   return (
     <div>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <input
+        <Input
+          className="w-full max-w-sm"
+          size="sm"
+          pill
           type="search"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder={t("plex.filter.collectionSearch")}
           aria-label={t("plex.filter.collectionSearch")}
-          className="glass-card w-full max-w-sm rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         {isAdmin && !creating && (
           <Button variant="glass" size="sm" icon={<Plus />} onClick={() => setCreating(true)}>