Add fourth sampler: current theme kept, layout quieted

Review feedback: keep the current theme as close as possible - the
top bar with its buttony dropdown menus and the cards have a charm
worth evaluating side by side - but make the layout less noisy.

dashboard-current.html reuses the live app.css component recipes
verbatim (tokens, nav dropdown buttons, bordered cards, tinted pill
badges, details-as-cards, full-grid tables; verified equal via
computed styles) and quiets only the structure: one 64rem column,
needs-a-human as rows in one card instead of a card per item, one
small heading per section instead of stacked h2/h3 with explanatory
paragraphs, and a plain advisor hero card.

All four samplers share the byte-identical body (now cross-linked 1-4)
so the comparison stays purely visual. A dark token set is included
for scheme parity; light values are the faithful ones.

mocks/README.md

@@ -9,8 +9,9 @@ Open directly via `file://`. Each supports light AND dark via
 - `dashboard-primer.html` — 1 Curated Primer (light-first)
 - `dashboard-control.html` — 2 Control Room (dark-first)
 - `dashboard-swiss.html` — 3 Swiss Flat (light-first)
+- `dashboard-current.html` — 4 Current quieted (theme-faithful)
 
-All three carry IDENTICAL content structure (the `<body>` markup is
+All four carry IDENTICAL content structure (the `<body>` markup is
 byte-identical apart from the sampler number/label), so the comparison
 is purely visual.
 
@@ -128,7 +129,30 @@ typographic (bold caps tags, question underlined in ink). Links are
 ink with a thin grey underline; red appears on hover and on the
 primary button. Radius 0, no shadows, 2px structural rules.
 
-## Anti-slop checklist (honoured by all three)
+## Direction 4 — Current quieted (theme-faithful)
+
+The control sample: today's theme kept as close as possible — the
+same tokens as `app.css` (`#f6f8fa` sunken page, `#ffffff` cards,
+`#0969da` accent, `1a7f37/9a6700/cf222e` status, 8px radius, 8px
+grid, system-ui 15px), the buttony nav dropdown menus, bordered cards
+with tinted pill badges, `details` sections rendered as cards, and the
+full-grid bordered tables. Only the LAYOUT is quieted:
+
+- one column at the app's real 64rem (no second sidebar column),
+- "Needs a human" as three rows inside ONE card instead of a card
+  per item (the `.cards` grid stays for comparison on the queue-health
+  side),
+- section headings reduced to a single small card heading each — no
+  stacked h2 + h3 pairs, no explanatory paragraphs between sections,
+- the advisor hero is a plain card matching `home.html`'s, minus the
+  secondary notices.
+
+Component styles verified identical to the live `app.css` via
+computed-style comparison (radius, shadow, paddings, colours, fonts).
+A dark set is included so it honours `prefers-color-scheme` like its
+siblings; the light values are the faithful ones.
+
+## Anti-slop checklist (honoured by all four)
 
 No purple-blue gradients, no glassmorphism, no oversized drop
 shadows, no marketing hero, no emoji decoration, no fake-perfect
@@ -141,9 +165,11 @@ rationed.
 - Light/dark flip verified per file via forced scheme: page
   backgrounds and every status colour change to the intended tokens;
   content extents identical between schemes (no reflow breakage).
-- The three `<body>` blocks verified identical modulo sampler label.
+- The four `<body>` blocks verified identical modulo sampler label.
 - Nav dropdowns verified open (per-direction probe renders); emblem
-  verified visible in both schemes in all three directions, rendered
+  verified visible in both schemes in all four directions, rendered
   at the app's original 8rem height; brand/nav vertical alignment
   verified equal via getBoundingClientRect mids.
+- Direction 4 verified component-faithful to `app.css` via computed
+  styles (radius/shadow/padding/colours/fonts all equal).
 - 390px mobile: no horizontal overflow; all zones render.

mocks/dashboard-control.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Clanker-Saddle dashboard &mdash; Control Room (sampler 2 of 3)</title>
+<title>Clanker-Saddle dashboard &mdash; Control Room (sampler 2 of 4)</title>
 <style>
 /* DIRECTION 2 — CONTROL ROOM. Dark-first, mono-forward, quiet neutrals;
    status colour carries the meaning. Light variant via scheme query. */
@@ -349,10 +349,11 @@ main { max-width: 70rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
 </header>
 
 <main id="main">
-    <p class="sampler-note">Sampler 2 of 3 &mdash; Control Room. Static mock, not live data.
+    <p class="sampler-note">Sampler 2 of 4 &mdash; Control Room. Static mock, not live data.
         <a href="dashboard-primer.html">1 Curated Primer</a> &middot;
         <a href="dashboard-control.html">2 Control Room</a> &middot;
-        <a href="dashboard-swiss.html">3 Swiss Flat</a></p>
+        <a href="dashboard-swiss.html">3 Swiss Flat</a> &middot;
+        <a href="dashboard-current.html">4 Current quieted</a></p>
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">

mocks/dashboard-primer.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Clanker-Saddle dashboard &mdash; Curated Primer (sampler 1 of 3)</title>
+<title>Clanker-Saddle dashboard &mdash; Curated Primer (sampler 1 of 4)</title>
 <style>
 /* DIRECTION 1 — CURATED PRIMER. GitHub/Primer lineage, disciplined.
    ~14 named tokens; the existing blue #0969da as accent; light default. */
@@ -360,10 +360,11 @@ main { max-width: 66rem; margin: 0 auto 3rem; padding: 0 1rem; }
 </header>
 
 <main id="main">
-    <p class="sampler-note">Sampler 1 of 3 &mdash; Curated Primer. Static mock, not live data.
+    <p class="sampler-note">Sampler 1 of 4 &mdash; Curated Primer. Static mock, not live data.
         <a href="dashboard-primer.html">1 Curated Primer</a> &middot;
         <a href="dashboard-control.html">2 Control Room</a> &middot;
-        <a href="dashboard-swiss.html">3 Swiss Flat</a></p>
+        <a href="dashboard-swiss.html">3 Swiss Flat</a> &middot;
+        <a href="dashboard-current.html">4 Current quieted</a></p>
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">

mocks/dashboard-swiss.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Clanker-Saddle dashboard &mdash; Swiss Flat (sampler 3 of 3)</title>
+<title>Clanker-Saddle dashboard &mdash; Swiss Flat (sampler 3 of 4)</title>
 <style>
 /* DIRECTION 3 — SWISS FLAT. Strict grid, typographic hierarchy, one
    strong accent, no shadows, no ornament. Light-first. */
@@ -342,10 +342,11 @@ main {
 </header>
 
 <main id="main">
-    <p class="sampler-note">Sampler 3 of 3 &mdash; Swiss Flat. Static mock, not live data.
+    <p class="sampler-note">Sampler 3 of 4 &mdash; Swiss Flat. Static mock, not live data.
         <a href="dashboard-primer.html">1 Curated Primer</a> &middot;
         <a href="dashboard-control.html">2 Control Room</a> &middot;
-        <a href="dashboard-swiss.html">3 Swiss Flat</a></p>
+        <a href="dashboard-swiss.html">3 Swiss Flat</a> &middot;
+        <a href="dashboard-current.html">4 Current quieted</a></p>
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">