feat(design): one media card, and Home's hero and shelves as cards (E28 S3h)

- ui/MediaCard + mediaCardStyles: one frame for every video, Plex title and
  Home tile; the meta line pinned to the bottom edge, the length a badge on
  the picture, the media Play only where the click plays, the hover row at
  the picture's bottom-right (the owner's pick C).
- Shelf density: on any strip a one-line title over one meta line; mixed
  Home shelves are landscape; rails turn content-visibility off (a card's
  reserved height had become the strip's). Home slot 232px, so the Play
  and the hover row no longer touch; a landscape shelf takes the small Play.
- Home hero is a card (hover row, the whole menu, a touch "…"), three
  quarters wide and centred; channel / playlist tiles get Play, open and
  "…"; a show tile acts on its next episode, ⓘ opens the show.
- Plex preview: a ~0.9 s mouse rest opens a passive panel with the whole
  title, facts and synopsis (popover `pointerOnly`); the synopsis and title
  tooltips are gone.
- Compact list row B: the title leads, "…" at the end, toggles over the
  date on hover.
- Media-info layout B (collections, crew, cast beside the facts sidebar;
  an empty column is not drawn); filtering values are chips there and on
  the show page; "Cast" over the cast-only strips.
- Browse tiles hover like a card; prose capped by the `measure` utility.

frontend/src/components/ui/anchoredPopoverHooks.ts

@@ -58,6 +58,10 @@ export interface AnchoredPopoverOptions {
    *  must tap. `mouseOnly` is forced on so a tap's synthetic mouseenter can't open the panel a
    *  hair before the click handler toggles it shut again. */
   hoverAlso?: boolean;
+  /** Hover mode only: a MOUSE affordance and nothing else — no focus-open, no touch. A media card's
+   *  preview (ui/MediaPreview): a keyboard walk down a grid would otherwise pop a panel at every stop,
+   *  and a tap is the card's play. */
+  pointerOnly?: boolean;
   /** Index of the item that is currently CHOSEN, for a single-choice menu/listbox. Opening then
    *  lands the roving focus on it instead of the first item — the behaviour a "pick one of these
    *  modes" menu needs. Leave unset for action menus and multi-select toggle lists. */
@@ -157,13 +161,13 @@ export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
     move: false,
     // A hover-card is a pointer affordance either way; a hover-ALSO menu must ignore touch, or the
     // synthetic mouseenter a tap emits would race the click toggle (open, then immediately shut).
-    mouseOnly: !isHover,
+    mouseOnly: !isHover || !!opts.pointerOnly,
     // A submenu wants a shorter intent delay than a hover card: the pointer is already inside a
     // menu, so the "did they mean it" question is mostly answered.
     delay: opts.hoverDelay ?? (isHover ? { open: 120, close: 140 } : { open: 90, close: 120 }),
     handleClose: safePolygon(),
   });
-  const focus = useFocus(context, { enabled: isHover });
+  const focus = useFocus(context, { enabled: isHover && !opts.pointerOnly });
   // Escape for EVERY mode (hover included) is dispatched through the shared `layerStack` below, so it
   // is strictly topmost-only across popovers, Modals and players — so turn floating-ui's own Escape
   // off entirely. (Leaving it on for hover made an open tooltip's document-level handler either