feat(design): batch B recorded, batch C in the design lab (E28 S2c)

DESIGN.md: B1-B9 decided (compact density, the four-scheme set with the
accent-vs-status rule, state layers, the sticky band, surface per role, the
watch page, the slim NavRail with optional labels, loading by shape, the
fade edges) with their decision-log rows. The lab keeps the chosen A and B
renderings as reference on shared tokens (labTokens.ts) and adds batch C:
the action-placement classification for review, side panels on touch and
below 768, the Plex player on touch, and the dialog conventions.

frontend/src/design-lab/DesignLab.tsx

@@ -2,20 +2,16 @@ import { useLayoutEffect, useState } from "react";
 import clsx from "clsx";
 import { SCHEMES, type Scheme } from "../lib/theme";
 import { BatchA } from "./batchA";
-import { B1, B2, B3 } from "./batchB";
-import { B4, B5, B6, B7, B8, B9 } from "./batchBChrome";
+import { BatchB } from "./batchB";
+import { C1 } from "./batchCActions";
+import { C2, C3, C4 } from "./batchC";
 
 // The open decisions, in the order they are asked. The decided ones render below them as reference.
 const OPEN = [
-  { id: "b1", code: "B1", title: "Density", render: B1 },
-  { id: "b2", code: "B2", title: "Schemes", render: B2 },
-  { id: "b3", code: "B3", title: "Hover", render: B3 },
-  { id: "b4", code: "B4", title: "Page chrome", render: B4 },
-  { id: "b5", code: "B5", title: "Surfaces", render: B5 },
-  { id: "b6", code: "B6", title: "/watch", render: B6 },
-  { id: "b7", code: "B7", title: "Nav rail", render: B7 },
-  { id: "b8", code: "B8", title: "Loading", render: B8 },
-  { id: "b9", code: "B9", title: "Fade", render: B9 },
+  { 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;
 
 // The design lab (E28): the living style guide. Dev-only — see main.tsx and devOnlyGuard.ts. It sits
@@ -115,12 +111,15 @@ export default function DesignLab() {
           <a href="#decided" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
             A ✓
           </a>
+          <a href="#decided-b" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
+            B ✓
+          </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 B · surfaces, chrome and colour</h1>
+          <h1 className="text-2xl font-bold">Batch C · behaviour and device</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.
@@ -136,6 +135,13 @@ export default function DesignLab() {
           </p>
         </header>
         <BatchA />
+        <header id="decided-b" className="mt-6 scroll-mt-20">
+          <h2 className="text-xl font-bold">Decided · batch B, surfaces, chrome and colour</h2>
+          <p className="text-sm text-muted">
+            B1 (density) and B3 (state layers) are rendered inside the batch A references above.
+          </p>
+        </header>
+        <BatchB />
       </main>
     </div>
   );