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

@@ -1,20 +1,18 @@
-import { fileURLToPath } from "node:url";
-
-import { ESLint } from "eslint";
 import { describe, expect, it } from "vitest";
 
-// Two E28-audit rules in eslint.config.js, pinned so a selector that stops matching cannot pass for a
-// clean codebase: a hover that swaps a colour instead of the B3 state layer, and an <a> that holds only
-// a glyph (DESIGN.md "A link that looks like a button" is IconLink).
-const FRONTEND = fileURLToPath(new URL("../../", import.meta.url));
+import { eslint } from "./lintProbe.testkit";
+
+// Three E28-audit rules in eslint.config.js, pinned so a selector that stops matching cannot pass for
+// a clean codebase: a hover that swaps a colour instead of the B3 state layer, an <a> that holds only a
+// glyph (DESIGN.md "A link that looks like a button" is IconLink), and a palette colour (F16).
 
 async function messages(source: string, starts: 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(starts)).length;
 }
 const swaps = (src: string) => messages(src, "hover by a colour swap");
 const glyphs = (src: string) => messages(src, "a glyph-only <a>");
+const palette = (src: string) => messages(src, "a palette colour");
 
 describe("a hover by a colour swap", () => {
   // Assembled, so this file does not trip the very rule it probes.
@@ -55,3 +53,23 @@ describe("a glyph-only link", () => {
     expect(await glyphs(src)).toBe(0);
   });
 });
+
+// F16: DESIGN.md Tokens "only semantic tokens". A palette class is measured by nothing, so a gold that
+// passes on dark ships at 2:1 on light. Black and white stay: they are the media scrims and their text.
+describe("a palette colour", () => {
+  const c = (v: string) => `${v}-500`; // assembled, as above
+  it("is refused as a text, fill, edge, gradient stop or ring", async () => {
+    expect(await palette(`export const a = "${c("text-amber")}";\n`)).toBe(1);
+    expect(await palette(`export const b = "x ${c("bg-red")}/90";\n`)).toBe(1);
+    expect(await palette("export const d = `${1} " + c("from-slate") + "`;\n")).toBe(1);
+    expect(await palette(`export const e = "hover:${c("ring-neutral")}";\n`)).toBe(1);
+  });
+  it("leaves the tokens, black and white alone", async () => {
+    expect(
+      await palette(
+        `export const f = "text-rating bg-live text-live-fg bg-black/80 text-white/75";\n`,
+      ),
+    ).toBe(0);
+    expect(await palette(`export const g = "bg-accent text-danger border-border";\n`)).toBe(0);
+  });
+});