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

@@ -1,15 +1,14 @@
-import { fileURLToPath } from "node:url";
+import { readFileSync } from "node:fs";
 
-import { ESLint } from "eslint";
 import { describe, expect, it } from "vitest";
 
+import { eslint } from "./lintProbe.testkit";
+
 // The layer-scale rule in eslint.config.js (DESIGN.md Tokens: "No ad-hoc z-index"). A numeric `z-10`
 // happened to equal `base` and passed every review; a `no-restricted-syntax` selector that matches
 // nothing looks exactly like a clean codebase, so pin that it fires.
-const FRONTEND = fileURLToPath(new URL("../../", import.meta.url));
 
 async function refused(source: string): Promise<number> {
-  const eslint = new ESLint({ cwd: FRONTEND });
   const [result] = await eslint.lintText(source, { filePath: "src/components/__probe.tsx" });
   return (result?.messages ?? []).filter((m) => m.message.startsWith("z-index off the layer scale"))
     .length;
@@ -32,3 +31,28 @@ describe("a z-index off the layer scale", () => {
     expect(await refused(`export const e = "${z("0")} md:${z("auto")}";\n`)).toBe(0);
   });
 });
+
+// The Plex player's notices (the track-switch OSD, the subtitle notice) sat on `menu` while its settings
+// and tracks popovers had no level: a notice drew over the open menu (E28 audit, seen live). A menu is
+// above a notice; the info overlay (`menu`, later in the tree) still covers both.
+describe("the Plex player's layers", () => {
+  const src = ["PlexPlayer.tsx", "PlexPlayerSettings.tsx"]
+    .map((f) => readFileSync(new URL(`../components/${f}`, import.meta.url), "utf8"))
+    .join("\n");
+  const classes = (marker: RegExp) =>
+    [...src.matchAll(/className="([^"]*)"/g)].map((m) => m[1]!).filter((c) => marker.test(c));
+
+  it("puts every popover on the menu level", () => {
+    const popovers = classes(
+      /\bbottom-full\b.*\bbg-media-chrome\b|\bbg-media-chrome\b.*\bbottom-full\b/,
+    );
+    expect(popovers).toHaveLength(2);
+    for (const c of popovers) expect(c).toMatch(/\bz-menu\b/);
+  });
+
+  it("keeps the notices a level below", () => {
+    const notices = classes(/pointer-events-none absolute inset-x-0 bottom-(24|36)\b/);
+    expect(notices).toHaveLength(2);
+    for (const c of notices) expect(c).toMatch(/\bz-base\b/);
+  });
+});