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/index.css

@@ -142,6 +142,14 @@
   border-color: var(--edge-strong);
 }
 
+/* The reading measure for prose (a synopsis, a biography, a channel's description): ~65 characters
+   a line, inside the 45–75 a reader follows back to the next line's start. A full-width page ran
+   one to 110 (owner, E28 S3h: "shorter lines are easier to follow"). Only where the container can
+   be wider than that; a narrow panel or popover is its own measure. */
+@utility measure {
+  max-width: 65ch;
+}
+
 /* B9: the header + fade edge — a crisp band with a 1rem gradient of the colour it sits on, so content
    dissolves as it slides under (the reference is DataTable's sticky header). The host is positioned. */
 /* A STICKY header's fade (a table head, the server log's toolbar), inside the scroller it sticks in.
@@ -865,6 +873,18 @@ html[data-perf="1"] .overlay-backdrop {
   content-visibility: auto;
   contain-intrinsic-size: auto 320px;
 }
+/* A Plex poster card in a grid: the same skip, at a poster's height. */
+.cv-poster {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 300px;
+}
+/* ...but not in a carousel. A rail stretches every card to its tallest (the pinned meta line,
+   ui/MediaCard), and an off-screen card's reserved box WAS the tallest: Home's shelves measured 338px
+   where the real cards were 170–216. A rail holds a handful of cards; there is nothing to skip. */
+.media-rail .cv-card,
+.media-rail .cv-poster {
+  content-visibility: visible;
+}
 .cv-row {
   content-visibility: auto;
   contain-intrinsic-size: auto 96px;