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/mediaRail.contract.test.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+// A card skips its off-screen rendering (`cv-card` / `cv-poster`: content-visibility auto with a
+// reserved height), but not inside a carousel. A rail stretches every card to its tallest, and an
+// off-screen card's reserve WAS the tallest — Home's shelves measured 338px around 170–216px cards
+// (E28 S3h). The pair lives in two files and neither can be seen in jsdom, so it is held here.
+const read = (file: string) => readFileSync(new URL(file, import.meta.url), "utf8");
+
+describe("a carousel turns the cards' content-visibility off", () => {
+  it("the carousel's track is the .media-rail", () => {
+    expect(read("./Carousel.tsx")).toMatch(/["`]media-rail /);
+  });
+
+  it("index.css makes both card kinds visible inside it", () => {
+    expect(read("../../index.css")).toMatch(
+      /\.media-rail \.cv-card,\s*\.media-rail \.cv-poster\s*\{\s*content-visibility: visible;/,
+    );
+  });
+});