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/plexViews.tsx

@@ -262,7 +262,7 @@ export function PlexPersonView({
               </div>
             </div>
             {d.biography && (
-              <p className="mt-4 whitespace-pre-line text-sm leading-relaxed text-muted">
+              <p className="measure mt-4 whitespace-pre-line text-sm leading-relaxed text-muted">
                 {d.biography}
               </p>
             )}
@@ -277,8 +277,9 @@ export function PlexPersonView({
                 keyboardNav
               >
                 {d.known_for.map((c, i) => (
-                  <div key={c.id} className="w-37.5 shrink-0">
+                  <div key={c.id} className="grid w-37.5 shrink-0 grid-cols-1">
                     <PlexPosterCard
+                      shelf
                       card={c}
                       navIndex={i}
                       onOpen={() => onOpenCard(c)}
@@ -470,9 +471,12 @@ export function PlexShowView({
             }
           >
             <PageHeading className="text-2xl font-semibold leading-tight">{show.title}</PageHeading>
-            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted">
+            {/* The same meta row as the media-info page: filtering values are chips, plain facts flat
+                text, spaced by the gap alone (a '·' between chips reads as noise). */}
+            <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted">
               {show.year != null && (
                 <Filterable
+                  tag
                   title={onFilter ? t("plex.info.filterYear", { year: show.year }) : undefined}
                   onClick={
                     onFilter
@@ -484,21 +488,19 @@ export function PlexShowView({
                 </Filterable>
               )}
               {show.content_rating && (
-                <span>
-                  ·{" "}
-                  <Filterable
-                    onClick={
-                      onFilter
-                        ? () => onFilter({ contentRatings: [show.content_rating!] })
-                        : undefined
-                    }
-                  >
-                    {show.content_rating}
-                  </Filterable>
-                </span>
+                <Filterable
+                  tag
+                  onClick={
+                    onFilter
+                      ? () => onFilter({ contentRatings: [show.content_rating!] })
+                      : undefined
+                  }
+                >
+                  {show.content_rating}
+                </Filterable>
               )}
               {show.season_count != null && (
-                <span>· {t("plex.seasons", { count: show.season_count })}</span>
+                <span>{t("plex.seasons", { count: show.season_count })}</span>
               )}
               {(() => {
                 // IMDb score when present, else the Plex audience score — mirrors PlexInfo so a show
@@ -518,7 +520,7 @@ export function PlexShowView({
                     className={`inline-flex items-center gap-1 ${onFilter ? "min-h-6 cursor-pointer hover:text-accent touch-target" : "cursor-default"}`}
                   >
                     {/* the rating gold — its own token, not --warn: a score is not a warning */}
-                    · <Star className="w-3.5 h-3.5 text-rating" fill="currentColor" />
+                    <Star className="w-3.5 h-3.5 text-rating" fill="currentColor" />
                     {score.toFixed(1)}
                   </Pressable>
                 );
@@ -538,7 +540,9 @@ export function PlexShowView({
               </div>
             )}
             {show.summary && (
-              <p className="text-sm text-muted mt-3 leading-relaxed line-clamp-5">{show.summary}</p>
+              <p className="measure mt-3 line-clamp-5 text-sm leading-relaxed text-muted">
+                {show.summary}
+              </p>
             )}
             <div className="mt-4 flex flex-wrap gap-2">
               {show.resume && (