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/design-lab/DesignLab.tsx

@@ -3,6 +3,7 @@ import { SCHEMES, type Scheme } from "../lib/theme";
 import { BatchA } from "./batchA";
 import { BatchB } from "./batchB";
 import { BatchC } from "./batchC";
+import { BatchD } from "./batchD";
 import { Chip } from "../components/ui/Chip";
 import { Slider } from "../components/ui/NativeControls";
 import { SURFACE } from "../components/ui/surfaces";
@@ -82,6 +83,9 @@ export default function DesignLab() {
           <a href="#decided-c" className="rounded-md px-1.5 py-0.5 text-success state-layer">
             C ✓
           </a>
+          <a href="#decided-s3h" className="rounded-md px-1.5 py-0.5 text-success state-layer">
+            S3h ✓
+          </a>
         </nav>
       </div>
 
@@ -114,6 +118,14 @@ export default function DesignLab() {
           </p>
         </header>
         <BatchC />
+        <header id="decided-s3h" className="mt-6 scroll-mt-20">
+          <h2 className="text-xl font-bold">Decided · S3h, the media card</h2>
+          <p className="text-sm text-muted">
+            Hover a card: its Play and its hover row. The preview, the hero and the info page live
+            in the app.
+          </p>
+        </header>
+        <BatchD />
       </main>
     </div>
   );