fix(design): rating and live colour tokens, the player's menus over its notices, the info overlay on a light theme (E28)

- F16: --rating (theme-scoped gold, 4.5:1 on the page and its chip), --rating-media, --live/--live-fg,
  --media-chrome replace 14 palette literals; a lint rule refuses palette classes; the theme contract
  measures them.
- The Plex player's notices drew over its open settings/tracks popovers: notices z-base, popovers z-menu.
- The player's info overlay rendered theme tokens on its always-dark panel: on a light theme the score
  (2.6:1), collection years (3.2:1) and cast initials (1.05:1) were unreadable; onDark variants now.
- The lint-rule contract tests share one ESLint with a one-off warm-up (a cold first lint took 8 s,
  past vitest's 5 s).

frontend/src/components/PlexInfo.tsx

@@ -90,6 +90,7 @@ function RatingsRow({
   tmdbRating,
   tmdbVotes,
   onFilterRating,
+  onDark,
 }: {
   imdbRating?: number | null;
   imdbUrl?: string | null;
@@ -97,11 +98,16 @@ function RatingsRow({
   tmdbRating?: number | null;
   tmdbVotes?: number | null;
   onFilterRating?: (score: number) => void;
+  /** Over the always-dark player: the page's `--rating` is tuned for the theme's page, so a light
+   *  theme's dark gold would sit on the player's black (2.6:1, measured). */
+  onDark?: boolean;
 }) {
   const { t } = useTranslation();
   const primary = imdbRating ?? audience ?? null; // the filterable score
-  const chipCls =
-    "inline-flex items-center gap-1 rounded-md bg-amber-400/15 px-1.5 py-0.5 font-semibold text-amber-500";
+  // The source label is the chip's own colour at full strength: dimmed to 70% it fell under 4.5:1.
+  const chipCls = `inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-semibold ${
+    onDark ? "bg-rating-media/15 text-rating-media" : "bg-rating/15 text-rating"
+  }`;
   const has = (x?: number | null): x is number => x != null;
   if (!has(imdbRating) && !has(audience) && !has(tmdbRating)) return null;
   return (
@@ -113,7 +119,7 @@ function RatingsRow({
             filterable={imdbRating === primary}
             onFilterRating={onFilterRating}
           />
-          <span className="text-2xs font-normal opacity-70">IMDb</span>
+          <span className="text-2xs font-normal">IMDb</span>
         </span>
       )}
       {/* Beside the score, not inside it: a link needs its own ≥ 24 box, and the score is a label. */}
@@ -123,6 +129,7 @@ function RatingsRow({
           target="_blank"
           rel="noopener noreferrer"
           label={t("plex.info.openImdb")}
+          variant={onDark ? "overlay" : "ghost"}
           className="-ml-1.5"
         >
           <ExternalLink />
@@ -131,7 +138,7 @@ function RatingsRow({
       {has(tmdbRating) && (
         <span className={chipCls}>
           <Score score={tmdbRating} filterable={false} />
-          <span className="text-2xs font-normal opacity-70">
+          <span className="text-2xs font-normal">
             TMDb{has(tmdbVotes) ? ` · ${compact(tmdbVotes)}` : ""}
           </span>
         </span>
@@ -139,7 +146,7 @@ function RatingsRow({
       {has(audience) && imdbRating !== audience && (
         <span className={chipCls}>
           <Score score={audience} filterable={!has(imdbRating)} onFilterRating={onFilterRating} />
-          <span className="text-2xs font-normal opacity-70">{t("plex.info.audience")}</span>
+          <span className="text-2xs font-normal">{t("plex.info.audience")}</span>
         </span>
       )}
     </div>
@@ -322,7 +329,7 @@ function PlaybackChip({ detail, overlay }: { detail: PlexItemDetail; overlay: bo
     .join(" · ");
   return (
     <Badge onDark={overlay} title={t(`plex.playable.${cls}`)}>
-      <span className={`h-2 w-2 shrink-0 rounded-full ${PLAYABLE_TINT[cls] ?? "bg-gray-400"}`} />
+      <span className={`h-2 w-2 shrink-0 rounded-full ${PLAYABLE_TINT[cls] ?? "bg-muted"}`} />
       <span className="font-medium">{t(`plex.filter.playableOpt.${cls}`)}</span>
       {sub && <span className="opacity-70">{sub}</span>}
     </Badge>
@@ -568,6 +575,7 @@ export default function PlexInfo({
                   tmdbRating={detail.tmdb?.rating}
                   tmdbVotes={detail.tmdb?.vote_count}
                   onFilterRating={onFilter ? (n) => onFilter({ ratingMin: n }) : undefined}
+                  onDark={overlay}
                 />
               </div>
 
@@ -700,7 +708,9 @@ export default function PlexInfo({
                       {c.thumb ? (
                         <img src={c.thumb} alt="" className="h-full w-full object-cover" />
                       ) : (
-                        <div className="grid h-full w-full place-items-center text-lg opacity-40">
+                        <div
+                          className={`grid h-full w-full place-items-center text-lg opacity-40 ${overlay ? "text-white" : ""}`}
+                        >
                           {c.name.charAt(0)}
                         </div>
                       )}
@@ -784,7 +794,11 @@ export default function PlexInfo({
                     disabled={!onPlayItem}
                     className="group/col w-28 shrink-0"
                   >
-                    <div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-surface">
+                    <div
+                      className={`relative aspect-2/3 overflow-hidden rounded-lg border ${
+                        overlay ? "border-white/15 bg-white/10" : "border-border bg-surface"
+                      }`}
+                    >
                       <img
                         src={m.thumb}
                         alt=""
@@ -818,7 +832,11 @@ export default function PlexInfo({
                     >
                       {m.title}
                     </div>
-                    {m.year ? <div className="text-2xs text-muted">{m.year}</div> : null}
+                    {m.year ? (
+                      <div className={`text-2xs ${overlay ? "text-white/55" : "text-muted"}`}>
+                        {m.year}
+                      </div>
+                    ) : null}
                   </Pressable>
                 ))}
               </Carousel>