feat(design): batch C recorded, the player row open as C5 (E28 S2d)

C1-C4 as proposed: the action classification, overlay-drawer side panels,
touch-first players, dialog focus by purpose with a pinned footer. The
players were then played live at tablet size, which found the Plex
control row running off-screen below 1024; how it fits is open as C5.
CLAUDE.md now points at DESIGN.md.

frontend/src/design-lab/DesignLab.tsx

@@ -3,16 +3,10 @@ import clsx from "clsx";
 import { SCHEMES, type Scheme } from "../lib/theme";
 import { BatchA } from "./batchA";
 import { BatchB } from "./batchB";
-import { C1 } from "./batchCActions";
-import { C2, C3, C4 } from "./batchC";
+import { BatchC, C5 } from "./batchC";
 
 // The open decisions, in the order they are asked. The decided ones render below them as reference.
-const OPEN = [
-  { id: "c1", code: "C1", title: "Action placement", render: C1 },
-  { id: "c2", code: "C2", title: "Side panels", render: C2 },
-  { id: "c3", code: "C3", title: "Player touch", render: C3 },
-  { id: "c4", code: "C4", title: "Dialogs", render: C4 },
-] as const;
+const OPEN = [{ id: "c5", code: "C5", title: "Player row", render: C5 }] as const;
 
 // The design lab (E28): the living style guide. Dev-only — see main.tsx and devOnlyGuard.ts. It sits
 // OUTSIDE <App>, so it owns the theme attributes on <html> itself, through the same data-theme /
@@ -114,12 +108,15 @@ export default function DesignLab() {
           <a href="#decided-b" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
             B ✓
           </a>
+          <a href="#decided-c" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
+            C ✓
+          </a>
         </nav>
       </div>
 
       <main className="mx-auto flex max-w-screen-2xl flex-col gap-6 p-4">
         <header>
-          <h1 className="text-2xl font-bold">Batch C · behaviour and device</h1>
+          <h1 className="text-2xl font-bold">Open · the player row on a narrow screen</h1>
           <p className="text-sm text-muted">
             Each decision shows its variants with the app&apos;s real CSS. The framed one is the
             recommendation. Resize the window to tablet size to see them there too.
@@ -142,6 +139,13 @@ export default function DesignLab() {
           </p>
         </header>
         <BatchB />
+        <header id="decided-c" className="mt-6 scroll-mt-20">
+          <h2 className="text-xl font-bold">Decided · batch C, behaviour and device</h2>
+          <p className="text-sm text-muted">
+            C1 is the action classification S3 builds each object&apos;s one action list from.
+          </p>
+        </header>
+        <BatchC />
       </main>
     </div>
   );