refactor(e5): deferred review-tail (frontend) — Carousel reuse + shared scroll core

The last of the deep-review deferred reuse items:

- extract the scroll-affordance machinery (watch the scroller AND its swappable/
  lazily-growing children, diff two edge booleans) that useScrollFade (vertical) and
  Carousel's useHScroll (horizontal) each hand-duplicated into one shared
  lib/useScrollEdges(axis); both hooks now just map start/end to their own shape.

- migrate PlexInfo's two remaining hand-rolled `flex overflow-x-auto` strips — the
  cast row and the collection strips — to the S1 <Carousel> primitive, so they get the
  edge fade + hover/focus scroll buttons (only on the clipped side) for free, matching
  the Discover rails / CastStrip / RelatedStrip.

Pure refactor, no behaviour change. Gate green (tsc, vitest 351, eslint, prettier,
knip). Browser-verified on a movie info page: cast row + collection strip render as
Carousels with the edge fade and the right-scroll button on the clipped cast row.

frontend/src/components/PlexInfo.tsx

@@ -15,6 +15,7 @@ import {
   useDetailPrefs,
 } from "../lib/plexDetailUi";
 import { usePref } from "../lib/usePref";
+import { Carousel } from "./Carousel";
 import PlexCollectionEditor from "./PlexCollectionEditor";
 import PlexPlaylistAdd from "./PlexPlaylistAdd";
 
@@ -614,7 +615,7 @@ export default function PlexInfo({
             <h2 className={`mb-2 text-sm font-semibold ${overlay ? "text-white/80" : ""}`}>
               {t("plex.info.cast")}
             </h2>
-            <div className="flex gap-3 overflow-x-auto pb-2">
+            <Carousel ariaLabel={t("plex.info.cast")} gap="gap-3">
               {cast.map((c, i) => {
                 const clickable = !!(onOpenPerson || onFilter);
                 const inner = (
@@ -669,7 +670,7 @@ export default function PlexInfo({
                   </div>
                 );
               })}
-            </div>
+            </Carousel>
           </div>
         )}
 
@@ -694,7 +695,7 @@ export default function PlexInfo({
                   </button>
                 )}
               </div>
-              <div className="flex gap-3 overflow-x-auto pb-2">
+              <Carousel ariaLabel={col.title} gap="gap-3">
                 {col.items.map((m) => (
                   <button
                     key={m.id}
@@ -739,7 +740,7 @@ export default function PlexInfo({
                     {m.year ? <div className="text-2xs text-muted">{m.year}</div> : null}
                   </button>
                 ))}
-              </div>
+              </Carousel>
             </div>
           ))}
       </div>