diff --git a/docs/superpowers/plans/2026-06-11-p3-polish.md b/docs/superpowers/plans/2026-06-11-p3-polish.md
new file mode 100644
index 0000000..f6d898a
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-11-p3-polish.md
@@ -0,0 +1,669 @@
+# P3 Polish Backlog Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Land the ten deliberately-deferred P3 items from the 2026-06-11 critique (`.impeccable/critique/2026-06-11T05-34-28Z__web-src.md`): orphaned asset cleanup, saved-rail typography/contrast, Edge-slots plain-words copy, status-page desktop layout, emoji→glyph swap, color swatches, mobile-bar occlusion, toolbar scope readout, and the two `$:` hidden-dep smells (only if cheap).
+
+**Architecture:** All work is in `web/` except one read-only grep already done (crates/ has zero asset-path references to the focus PNGs — confirmed). Every change is small and local; the one M-effort item (status desktop layout) is prepared as two screenshot-able treatments and decided at a single batched user CHECKPOINT together with the other visual items. `cd web && npm run check` is the regression rail after every task.
+
+**Tech Stack:** Svelte 5 (App.svelte and tuning panels are LEGACY `$:` mode — do not introduce runes there; SavedRail.svelte is already runes mode), Vite, Playwright (devDep).
+
+**Hard rules (user-enforced; violations failed prior reviews):**
+- Never touch `web/src/lib/api/*`, `web/src/lib/mock/*`, `web/src/lib/types.ts` (the Edge-slots dev-voiced error string lives in `web/src/lib/api/controllers.ts` — map it in the VIEW, do not edit the api file).
+- Copy law: no Device/HID/gamepad/plugin/backend/bus in user copy; "Everyday" always pairs with "Global Profile"; `/legacy/i` must not match anything in production source (source-audit enforces).
+- Never commit to `main`. This plan's branch: `p3-polish` off `main`.
+- No local Rust toolchain; nothing here touches `crates/`.
+- Gates: `cd web && npm run check` green at every commit.
+- Visual items (Tasks 2, 4, 5, 7, 8) get ONE batched user CHECKPOINT (Task 10) before the PR — the user reviews in dev:mock; commits before the checkpoint are fine (branch is unpushed and amendable).
+
+---
+
+### Task 0: Branch + baseline
+
+**Files:** none (git + gates only)
+
+- [ ] **Step 0.1: Create the branch**
+
+```bash
+cd /Users/kmcdowell/Documents/repos/dualsense-command
+git checkout main && git pull
+git checkout -b p3-polish
+```
+
+- [ ] **Step 0.2: Confirm the gate baseline**
+
+Run: `cd web && npm run check`
+Expected: all gates green (typecheck, source-audit, button-map, snapshot-map, haptics-graph, build, release-size, visual-smoke). If anything is red, STOP and report.
+
+---
+
+### Task 1: Delete the orphaned HUD-era focus PNGs (+ their dead CSS hook)
+
+20 PNGs (156KB) in `web/public/dualsense/focus/` have zero references anywhere in `web/` or `crates/` (verified by exhaustive grep: the only image lookups are `ButtonMappingView.svelte:316` → `/dualsense/controller_front.png` and `buttonMapping.ts:251` → `/dualsense/icons/iconid_controller_key_*.png`). The companion CSS class `.dm-controller-focus` (`web/src/styles/button-mapping/layout/controller-art.css:88-99`) is defined but never applied to any element.
+
+**Files:**
+- Delete: `web/public/dualsense/focus/` (entire directory, 20 PNGs)
+- Modify: `web/src/styles/button-mapping/layout/controller-art.css:88-99`
+
+- [ ] **Step 1.1: Re-verify zero references (cheap insurance)**
+
+```bash
+cd /Users/kmcdowell/Documents/repos/dualsense-command
+grep -rn "dualsense/focus\|focus_" web/src web/scripts web/index.html web/vite.config.ts crates/ || echo "ZERO REFS"
+```
+Expected: `ZERO REFS` (or only hits that are clearly not asset paths, e.g. `focus-visible`, `focus_` absent). If a real asset reference appears, STOP and report.
+
+- [ ] **Step 1.2: Delete the directory and the dead CSS block**
+
+```bash
+git rm -r web/public/dualsense/focus
+```
+
+Then in `web/src/styles/button-mapping/layout/controller-art.css` delete the entire `.dm-controller-focus { ... }` rule block (lines 88–99: opacity/filter/transition styling for a focus overlay image that is never rendered). Verify nothing else references the class first:
+
+```bash
+grep -rn "dm-controller-focus" web/src || echo "only the css rule"
+```
+Expected: only the rule being deleted (in controller-art.css). If a Svelte file uses it, STOP — leave the CSS and report.
+
+- [ ] **Step 1.3: Verify build + size gate**
+
+Run: `cd web && npm run build && npm run test:release-size && (grep -r "focus_" dist/ && echo "FAIL: focus refs in dist" || echo "clean")`
+Expected: build green, release-size green (smaller), `clean`.
+
+- [ ] **Step 1.4: Commit**
+
+```bash
+git add -A web/public/dualsense web/src/styles/button-mapping/layout/controller-art.css
+git commit -m "p3-polish: delete 156KB of orphaned HUD-era focus PNGs and their dead CSS hook"
+```
+
+---
+
+### Task 2: Saved rail typography + raised-surface contrast — **CHECKPOINT (batched, Task 10)**
+
+The rail title is 9px and rows are 11px; `--ink-muted` (#8b8b96) on `--surface-raised` (#26262c) computes ≈4.46:1 — a marginal AA fail. Raise rows to 12px, title to 10px, and add a one-step-brighter muted token for raised surfaces.
+
+**Files:**
+- Modify: `web/src/styles/tokens.css` (after `--ink-muted`, line ~10)
+- Modify: `web/src/styles/tuning.css` (`.saved-rail-title` ~505, `.saved-row` ~519, `.saved-row-saved`/`.saved-row-was` ~546)
+
+- [ ] **Step 2.1: Add the raised-surface muted token**
+
+In `tokens.css`, directly after the `--ink-muted: #8b8b96;` line, add:
+
+```css
+  /* Muted ink for raised surfaces: #8b8b96 on --surface-raised is ≈4.46:1
+     (marginal AA fail); this lands ≈4.9:1. */
+  --ink-muted-raised: #93939d;
+```
+
+- [ ] **Step 2.2: Apply in tuning.css**
+
+Change `.saved-rail-title` from:
+```css
+.saved-rail-title {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+```
+to:
+```css
+.saved-rail-title {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted-raised);
+}
+```
+
+In `.saved-row`, change `font-size: 11px;` to `font-size: 12px;` (rest of the rule unchanged).
+
+Change:
+```css
+.saved-row-saved,
+.saved-row-was {
+  color: var(--ink-muted);
+}
+```
+to:
+```css
+.saved-row-saved,
+.saved-row-was {
+  color: var(--ink-muted-raised);
+}
+```
+
+- [ ] **Step 2.3: Verify**
+
+Run: `cd web && npm run check`
+Expected: green (visual-smoke covers 1366/1440/390; the rail is fixed-width furniture so +1px text must not break layout — if visual-smoke fails on rail overflow, report rather than shrinking the font back).
+
+- [ ] **Step 2.4: Commit**
+
+```bash
+git add web/src/styles/tokens.css web/src/styles/tuning.css
+git commit -m "p3-polish: saved rail 12px rows, 10px title, AA-passing muted ink on raised surfaces"
+```
+
+---
+
+### Task 3: Edge onboard slots — plain words, teach Fn slots
+
+The error state renders the raw API message "DualSense Edge onboard profile read/write requires the real DSCC agent." (thrown in `web/src/lib/api/controllers.ts` — FORBIDDEN file, map in the view). The empty state says "No slot data / unavailable". Both are dev register.
+
+**Files:**
+- Modify: `web/src/lib/features/controllers/EdgeSlotsView.svelte` (script + error note + empty-state block)
+
+- [ ] **Step 3.1: Map the dev-voiced error in the view's script**
+
+In the `<script>` block, after the existing `$: alias = ...` line, add:
+
+```ts
+  // The missing-agent failure arrives as dev-voiced API text; speak product here.
+  $: slotsError = edgeProfilesError
+    ? edgeProfilesError.includes('requires the real DSCC agent')
+      ? 'Reading onboard slots needs the desktop app running.'
+      : edgeProfilesError
+    : '';
+```
+
+Then change the error note from `{#if edgeProfilesError}` / `<p class="ctl-note error">{edgeProfilesError}</p>` to:
+
+```svelte
+      {#if slotsError}
+        <p class="ctl-note error">{slotsError}</p>
+```
+(the `{:else if edgeProfiles?.warning}` branch is unchanged).
+
+- [ ] **Step 3.2: Rewrite the empty/loading state to teach Fn slots**
+
+Replace:
+```svelte
+          <div class="edge-slot-row disabled">
+            <div class="edge-slot-copy">
+              <span class="lbl">Fn Slots</span>
+              <strong>{edgeProfilesLoading ? 'Reading slots' : 'No slot data'}</strong>
+              <small>{edgeProfilesLoading ? 'controller scan' : 'unavailable'}</small>
+            </div>
+          </div>
+```
+with:
+```svelte
+          <div class="edge-slot-row disabled">
+            <div class="edge-slot-copy">
+              <span class="lbl">Fn slots</span>
+              <strong>{edgeProfilesLoading ? 'Reading slots' : 'Nothing read yet'}</strong>
+              <small
+                >{edgeProfilesLoading
+                  ? 'checking the controller'
+                  : 'Fn slots are shortcuts stored on the controller — hold Fn and press an action button to switch. Read to see what each slot holds.'}</small
+              >
+            </div>
+          </div>
+```
+
+- [ ] **Step 3.3: Verify copy law + gates**
+
+Copy check: no Device/HID/gamepad/plugin/backend/bus; "controller", "desktop app", "Fn slots" all allowed (CONTEXT.md: Edge Onboard Slot = "Fn plus an action button").
+Run: `cd web && npm run typecheck && npm run test:source-audit && npm run test:visual-smoke`
+Expected: PASS. Eyes-on in `dev:mock`: Advanced → Edge onboard slots shows the friendly error (mock has no real agent) and/or the teaching empty state; long `<small>` copy wraps without breaking the row (if it clips, report — don't shorten the teaching copy below one full sentence).
+
+- [ ] **Step 3.4: Commit**
+
+```bash
+git add web/src/lib/features/controllers/EdgeSlotsView.svelte
+git commit -m "p3-polish: Edge slots speak product — plain-words error, empty state teaches Fn slots"
+```
+
+---
+
+### Task 4: 🎮 emoji → brand controller glyph in StatusView — **CHECKPOINT (batched, Task 10)**
+
+`StatusView.svelte` renders a literal 🎮 inside `.status-controller-icon`; the sidebar brand mark uses a CSS-masked SVG (`.dm-controller-glyph`, mask `/dualsense-controller.svg`, defined in `web/src/styles/controllers.css:450-456` — global stylesheet, available on Status).
+
+**Files:**
+- Modify: `web/src/lib/features/status/StatusView.svelte:141`
+- Modify: `web/src/styles/status.css` (`.status-controller-icon` ~106)
+
+- [ ] **Step 4.1: Swap the markup**
+
+Replace:
+```svelte
+  <div class="status-controller-icon" aria-hidden="true">🎮</div>
+```
+with:
+```svelte
+  <div class="status-controller-icon" aria-hidden="true">
+    <span class="dm-controller-glyph status-controller-glyph"></span>
+  </div>
+```
+
+- [ ] **Step 4.2: Size the glyph in status.css**
+
+In `.status-controller-icon`, delete the now-purposeless `font-size: 16px;` line, and add directly after that rule block:
+
+```css
+.status-controller-glyph {
+  width: 30px;
+  height: 22px;
+}
+```
+(`.dm-controller-glyph` already sets `background: currentColor` + the contain mask; `color: var(--ink)` inherits.)
+
+- [ ] **Step 4.3: Verify**
+
+Run: `cd web && npm run typecheck && npm run test:visual-smoke`
+Expected: PASS. Eyes-on in `dev:mock`: Status controller card shows the brand glyph (same mark as the sidebar), crisp, centered in its 46×34 tile.
+
+- [ ] **Step 4.4: Commit**
+
+```bash
+git add web/src/lib/features/status/StatusView.svelte web/src/styles/status.css
+git commit -m "p3-polish: replace status 🎮 emoji with the brand controller glyph"
+```
+
+---
+
+### Task 5: Color swatches for hex values in the saved rail — **CHECKPOINT (batched, Task 10)**
+
+`savedDiff.ts` formats lightbar/redline colors as lowercase hex strings (`#4cc9f0` etc.); the rail renders them as raw text. Add a swatch beside any value that is a 6-digit hex color. SavedRail.svelte is runes-mode Svelte 5.
+
+**Files:**
+- Modify: `web/src/lib/features/tuning/SavedRail.svelte` (script + `diffRows` snippet)
+- Modify: `web/src/styles/tuning.css` (new `.saved-swatch` rule near the saved-row rules)
+
+- [ ] **Step 5.1: Add the detector and a value snippet**
+
+In SavedRail.svelte's `<script>`, after the `changeSummary` derivation, add:
+
+```ts
+  // Lightbar/redline rows carry raw hex strings; pair them with a swatch.
+  const swatchColor = (value: string): string | null =>
+    /^#[0-9a-f]{6}$/i.test(value.trim()) ? value.trim() : null;
+```
+
+Then add a snippet above the existing `{#snippet diffRows()}`:
+
+```svelte
+{#snippet rowValue(value: string)}
+  {#if swatchColor(value)}<span class="saved-swatch" style:background={swatchColor(value)}></span>{/if}{value}
+{/snippet}
+```
+
+And inside `diffRows`, replace the three value renderings:
+```svelte
+          <s class="saved-row-was">{item.savedValue}</s>
+          <span class="saved-row-now">→ {item.currentValue}</span>
+```
+→
+```svelte
+          <s class="saved-row-was">{@render rowValue(item.savedValue)}</s>
+          <span class="saved-row-now">→ {@render rowValue(item.currentValue)}</span>
+```
+and
+```svelte
+          <span class="saved-row-now">{item.currentValue}</span>
+```
+→
+```svelte
+          <span class="saved-row-now">{@render rowValue(item.currentValue)}</span>
+```
+and
+```svelte
+          <span class="saved-row-saved">{item.savedValue}</span>
+```
+→
+```svelte
+          <span class="saved-row-saved">{@render rowValue(item.savedValue)}</span>
+```
+
+- [ ] **Step 5.2: Style the swatch**
+
+In `tuning.css`, after the `.saved-row-now` rule, add:
+
+```css
+/* Hex color values get a swatch so the color is readable at a glance.
+   (Atomic inline boxes don't inherit the strikethrough line, so the saved
+   swatch stays clean inside <s>.) */
+.saved-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+  border-radius: 3px;
+  border: 1px solid var(--hairline-strong);
+  vertical-align: -1px;
+}
+```
+
+- [ ] **Step 5.3: Verify**
+
+Run: `cd web && npm run typecheck && npm run test:visual-smoke`
+Expected: PASS. Eyes-on in `dev:mock`: Tuning → change the lightbar color → rail shows old-swatch+hex struck through, arrow, new-swatch+hex; non-color rows unchanged; mobile bar (<900px) expanded list shows the same swatches.
+
+- [ ] **Step 5.4: Commit**
+
+```bash
+git add web/src/lib/features/tuning/SavedRail.svelte web/src/styles/tuning.css
+git commit -m "p3-polish: render color swatches beside hex values in the saved rail"
+```
+
+---
+
+### Task 6: Stop the <900px bottom bar occluding the last content row
+
+`.saved-mobile-bar` is `position: fixed; bottom: 12px` (tuning.css ~635) and only renders while dirty. Reserve scroll room under the canvas only while the bar exists, via `:has()` (fine for a local Vite app; all evergreen browsers).
+
+**Files:**
+- Modify: `web/src/styles/tuning.css` (inside the existing `@media (max-width: 900px)` block, ~700)
+
+- [ ] **Step 6.1: Add the conditional padding**
+
+Inside the existing `@media (max-width: 900px) { ... }` block (the one that hides `.saved-rail` and shows `.saved-mobile-bar`), append:
+
+```css
+  /* The fixed bar floats over the document; reserve room beneath the canvas
+     only while it's shown so the last row stays reachable. */
+  body:has(.saved-mobile-bar) .canvas-grid {
+    padding-bottom: 84px;
+  }
+```
+(84px ≈ collapsed bar height + its 12px bottom offset + breathing room.)
+
+- [ ] **Step 6.2: Verify**
+
+Run: `cd web && npm run check`
+Expected: green. Eyes-on in `dev:mock` at ~390–880px wide: make a change (bar appears), scroll to the bottom of Tuning — the last control row clears the bar; discard the change — the extra padding disappears.
+
+- [ ] **Step 6.3: Commit**
+
+```bash
+git add web/src/styles/tuning.css
+git commit -m "p3-polish: reserve scroll room under the tuning canvas while the mobile save bar is shown"
+```
+
+---
+
+### Task 7: Disambiguate the toolbar "Profile Scope" readout — **CHECKPOINT (batched, Task 10)**
+
+The toolbar readout says "PROFILE SCOPE: Global — Controller-only tuning" while Status says "Everyday · Global Profile" for the same situation: the readout means *tuning scope*, the page means *profile resolution*. Rename to Tuning Scope and use the law-mandated vocabulary ("Everyday" pairs with "Global Profile").
+
+**Files:**
+- Modify: `web/src/App.svelte:634-639` (the three `systemReadout*` derivations — legacy `$:` mode, keep it)
+
+- [ ] **Step 7.1: Rewrite the derivations**
+
+Replace:
+```ts
+$: systemReadoutTitle = selectedTuningScope === 'global' ? 'Profile Scope' : 'Telemetry Rate';
+$: systemReadoutValue = selectedTuningScope === 'global' ? 'Global' : telemetryRateText;
+$: systemReadoutDetail =
+  selectedTuningScope === 'global'
+    ? 'Controller-only tuning'
+    : telemetryRateDetail;
+```
+with:
+```ts
+// "Tuning Scope", not "Profile Scope": this readout tracks what the tuning
+// view edits, while Status's sentence tracks profile resolution — the two can
+// legitimately differ, so the label must not claim to be the same thing.
+$: systemReadoutTitle = selectedTuningScope === 'global' ? 'Tuning Scope' : 'Telemetry Rate';
+$: systemReadoutValue = selectedTuningScope === 'global' ? 'Everyday' : telemetryRateText;
+$: systemReadoutDetail =
+  selectedTuningScope === 'global'
+    ? 'Global Profile · controller-only tuning'
+    : telemetryRateDetail;
+```
+
+- [ ] **Step 7.2: Verify**
+
+Run: `cd web && npm run typecheck && npm run test:source-audit && npm run test:visual-smoke`
+Expected: PASS (if visual-smoke asserts the old readout text, fix the script's expectation, not the copy). Eyes-on in `dev:mock`: Everyday scope → toolbar reads "TUNING SCOPE / Everyday / Global Profile · controller-only tuning"; game scope → unchanged Telemetry Rate readout.
+
+- [ ] **Step 7.3: Commit**
+
+```bash
+git add web/src/App.svelte
+git commit -m "p3-polish: toolbar readout says Tuning Scope · Everyday, matching the vocabulary law"
+```
+
+---
+
+### Task 8: Status page desktop layout — TWO treatments, screenshots only, user picks (M) — **CHECKPOINT (batched, Task 10)**
+
+At ≥1366px the Status page leaves ~75% of the viewport empty (groups cap at 420px/360px, content hugs the top-left). Not a layout-law breach — so the user decides between two treatments, shown as screenshots from dev:mock (per the handoff: show options, don't ask abstractly). **Nothing from this task is committed until the user picks in Task 10.**
+
+**Files:**
+- Create: `web/scripts/p3-status-shots.mjs` (temporary, NOT committed — deleted in Task 10)
+- Modify (provisionally): `web/src/styles/status.css`
+
+- [ ] **Step 8.1: Write the screenshot helper**
+
+```js
+// web/scripts/p3-status-shots.mjs — TEMPORARY checkpoint helper, do not commit.
+// Spawns dev:mock, screenshots the Status view at 1366x768 and 1440x900.
+// Usage: node scripts/p3-status-shots.mjs <label>   → /tmp/dscc-p3/status-<label>-<w>.png
+import { spawn } from 'node:child_process';
+import { mkdirSync } from 'node:fs';
+import net from 'node:net';
+import process from 'node:process';
+import { chromium } from 'playwright';
+
+const label = process.argv[2] ?? 'shot';
+const host = '127.0.0.1';
+mkdirSync('/tmp/dscc-p3', { recursive: true });
+
+function findOpenPort(startPort) {
+  return new Promise((resolve, reject) => {
+    const tryPort = (candidate) => {
+      const server = net.createServer();
+      server.unref();
+      server.once('error', (error) => {
+        if (error.code === 'EADDRINUSE' || error.code === 'EACCES') tryPort(candidate + 1);
+        else reject(error);
+      });
+      server.listen(candidate, host, () => {
+        server.close(() => resolve(candidate));
+      });
+    };
+    tryPort(startPort);
+  });
+}
+
+async function waitForServer(url, timeoutMs = 30000) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) return;
+    } catch {
+      /* not up yet */
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+  throw new Error(`dev server did not come up at ${url}`);
+}
+
+const port = await findOpenPort(5190);
+const baseUrl = `http://${host}:${port}`;
+const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+const server = spawn(npmCommand, ['run', 'dev:mock', '--', '--port', String(port), '--strictPort'], {
+  cwd: new URL('..', import.meta.url).pathname,
+  stdio: 'ignore'
+});
+
+const browser = await chromium.launch();
+try {
+  await waitForServer(baseUrl);
+  for (const [width, height] of [[1366, 768], [1440, 900]]) {
+    const page = await browser.newPage({ viewport: { width, height } });
+    await page.goto(`${baseUrl}/#/status`);
+    await page.waitForSelector('.status-sentence', { timeout: 15000 });
+    await page.waitForTimeout(750);
+    await page.screenshot({ path: `/tmp/dscc-p3/status-${label}-${width}.png` });
+    await page.close();
+    console.log(`/tmp/dscc-p3/status-${label}-${width}.png`);
+  }
+} finally {
+  await browser.close();
+  server.kill();
+}
+```
+
+- [ ] **Step 8.2: Baseline screenshots**
+
+Run: `cd web && node scripts/p3-status-shots.mjs baseline`
+Expected: two PNGs in /tmp/dscc-p3/.
+
+- [ ] **Step 8.3: Treatment A — let the band breathe wider**
+
+Append to `web/src/styles/status.css`:
+
+```css
+/* Wide desktops: scale the band up instead of leaving three-quarters air. */
+@media (min-width: 1200px) {
+  .status-view { font-size: 13px; }
+  .status-headline { font-size: 17px; }
+  .status-clause { font-size: 13px; }
+  .status-groups { gap: 22px 32px; margin-top: 20px; }
+  .status-group { flex: 1 1 340px; max-width: 540px; }
+  .status-group.narrow { flex: 1 1 280px; max-width: 440px; }
+  .status-surf { padding: 14px 16px; }
+  .status-row { font-size: 12px; }
+  .status-controller-line,
+  .status-hint,
+  .status-finding { font-size: 12px; }
+}
+```
+
+Run: `cd web && node scripts/p3-status-shots.mjs option-a`
+
+- [ ] **Step 8.4: Treatment B — center the band vertically**
+
+Revert A (`git checkout -- src/styles/status.css`), then append instead:
+
+```css
+/* Wide desktops: the band keeps its scale but sits centered in the viewport
+   instead of hugging the top-left corner. */
+@media (min-width: 1200px) and (min-height: 720px) {
+  .status-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: calc(100dvh - 230px); /* viewport minus app chrome; tuned by eye */
+  }
+}
+```
+
+Run: `cd web && node scripts/p3-status-shots.mjs option-b`
+Then revert: `git checkout -- src/styles/status.css`
+
+- [ ] **Step 8.5: Leave the working tree clean except the untracked helper script**
+
+Run: `git status --short` — expected: only `?? web/scripts/p3-status-shots.mjs` (and nothing staged). The six PNGs in /tmp/dscc-p3/ go to the Task 10 checkpoint. Do NOT commit anything in this task.
+
+---
+
+### Task 9: Legacy-`$:` hidden-dep smells — fix only what's cheap
+
+Two carried-over P3 perf-review smells in App.svelte (LEGACY mode — no runes). The handoff is explicit: fix only if cheap; a runes migration is out of scope. Timebox the whole task; bail with a written note rather than restructuring.
+
+**Files:**
+- Modify (conditionally): `web/src/App.svelte` (~:467, the `l2LivePress`/`r2LivePress` derivations)
+
+- [ ] **Step 9.1: Stale telemetry fallback on live trigger readouts**
+
+Current (App.svelte ~:467):
+```ts
+$: l2LivePress = controllerInputFresh ? l2ControllerPress : selectedTuningScope === 'global' ? 0 : telemetryUnitValue('input.brake');
+$: r2LivePress = controllerInputFresh ? r2ControllerPress : selectedTuningScope === 'global' ? 0 : telemetryUnitValue('input.throttle');
+```
+The smell: when telemetry goes stale, `telemetryUnitValue` keeps returning the last value, so the live-press readout freezes at a non-zero number. Check whether App.svelte already derives a telemetry-freshness boolean (search for `Fresh`/`stale` near the telemetry derivations — CONTEXT.md's "Fresh Telemetry" concept; likely names: `telemetryFresh`, `adapterFresh`, `telemetryActive`). IF such a signal exists, gate the fallback:
+
+```ts
+$: l2LivePress = controllerInputFresh ? l2ControllerPress : selectedTuningScope === 'global' || !telemetryFresh ? 0 : telemetryUnitValue('input.brake');
+$: r2LivePress = controllerInputFresh ? r2ControllerPress : selectedTuningScope === 'global' || !telemetryFresh ? 0 : telemetryUnitValue('input.throttle');
+```
+(substituting the real signal name; add a one-line comment: `// Stale telemetry must read as "no press", not as the last frozen value.`). IF no existing freshness signal is found, SKIP — do not build one; note the skip for the PR body.
+
+- [ ] **Step 9.2: `profileConfigDirty` double config build — assess, almost certainly skip**
+
+The dirty flag re-runs `profileConfigSignature(buildControllerConfig())` on every flush, and a save response triggers another build via the baseline update riding the 120ms live-sync round trip (`profileManagement.ts:250-292` already builds the config once and reuses it for both writes — that half is fine at HEAD). A cheap fix would be memoizing `buildControllerConfig()` on its inputs, which in legacy mode means hand-listing ~30 dependencies — NOT cheap. Unless inspection reveals a genuinely small change (e.g. an existing memo helper already used elsewhere in App.svelte), SKIP and record one sentence in the PR body: "profileConfigDirty double-build deferred — no cheap fix without a runes migration."
+
+- [ ] **Step 9.3: Verify + commit (only if 9.1 or 9.2 changed code)**
+
+Run: `cd web && npm run check`
+Expected: green. Eyes-on in `dev:mock` (game scope): trigger readouts move with mock telemetry; when mock telemetry stops, readouts settle to 0 instead of freezing.
+
+```bash
+git add web/src/App.svelte
+git commit -m "p3-polish: stale telemetry reads as no press on the live trigger readouts"
+```
+If both were skipped: no commit; carry the notes to the PR body.
+
+---
+
+### Task 10: Batched user CHECKPOINT (main session, not a subagent)
+
+ONE ask covering all visual items, per the handoff ("the user gave batch approval last time after the first checkpoint, so ask once, not five times").
+
+- [ ] **Step 10.1: Start dev:mock and present**
+
+Start `cd web && npm run dev:mock` in the background (note the URL). Present to the user:
+1. The six Status screenshots (baseline / option-a / option-b at 1366 + 1440) for the Task 8 decision.
+2. The dev:mock URL with a look-list for batch approval: saved rail typography (Task 2), Edge slots copy (Task 3), status glyph (Task 4), rail swatches (Task 5), mobile-bar padding (Task 6), toolbar readout (Task 7).
+3. The deferred-by-default question: toast severity side-stripe (`feedback.css` ~:89, 3px border-left) — detector-ban hit but conventional for toasts; change to full border/bg tint ONLY if the user opts in.
+
+- [ ] **Step 10.2: Apply the outcome**
+
+- Apply the chosen Status treatment (A or B code from Task 8) to `status.css`, plus any tweaks the user requested on other items; re-run `cd web && npm run check`; commit:
+```bash
+git add web/src/styles/status.css
+git commit -m "p3-polish: <chosen treatment> for the status page at desktop widths"
+```
+- If the user opted into the toast stripe change, implement it per their pick and commit separately.
+- Delete the temporary helper: `rm web/scripts/p3-status-shots.mjs`.
+
+---
+
+### Task 11: Final gates, code review, PR
+
+- [ ] **Step 11.1: Full gates**
+
+Run: `cd web && npm run check`
+Expected: all green.
+
+- [ ] **Step 11.2: /code-review on the branch** (main session) — fix anything real it finds, keep gates green.
+
+- [ ] **Step 11.3: Push and open the PR**
+
+```bash
+git push -u origin p3-polish
+gh pr create --base main --title "P3 polish: asset cleanup, rail legibility, plain-words Edge slots, status desktop layout" --body "<summary: the ten P3 items from .impeccable/critique/2026-06-11T05-34-28Z__web-src.md, which were fixed vs skipped (item 9 notes, item 10 user decision), checkpoint outcome>
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)"
+```
+Rust CI runs on the PR (no local toolchain) — wait for green before declaring done.
+
+---
+
+### Task 12: Critique re-run + memory (main session)
+
+- [ ] **Step 12.1:** Invoke `/impeccable critique web/src` exactly per the skill: Assessment A (isolated design review) + Assessment B (`detect.mjs`), synthesize, persist via `critique-storage.mjs` (slug `web-src`), report the trend (29 → ?). Browser-overlay injection unavailable — CLI detector + Playwright screenshots is the established fallback. Expect heuristic 7 (Flexibility) to stay low: only Cmd/Ctrl+S exists; that's known and out of scope.
+
+- [ ] **Step 12.2:** Update the project memory `ui-review-deferred-p3-backlog` to record which items landed/skipped and the new score.
+
+---
+
+## Self-review notes
+
+- **Spec coverage:** handoff items 1–10 → Tasks 1, 2, 3, 8, 4, 5, 6, 7, 9, 10.3 respectively; critique re-run → Task 12; memory → 12.2. Item 10 (toast stripe) is intentionally a user-opt-in question, not a default change — per the handoff.
+- **Forbidden files:** the Edge-slots error string lives in `web/src/lib/api/controllers.ts` — Task 3 deliberately maps it in the view instead. No task touches `web/src/lib/api/*`, `web/src/lib/mock/*`, or `web/src/lib/types.ts`.
+- **Copy law:** Task 3 and Task 7 copy checked against CONTEXT.md ("Everyday" + "Global Profile" pairing, no banned terms); source-audit runs in both tasks' gates.
+- **Svelte modes:** Tasks 7/9 touch App.svelte in legacy `$:` style only; Task 5 touches runes-mode SavedRail.svelte in runes style (snippet + const).
+- **No placeholders:** every code step carries the actual code; Task 9 is explicitly conditional with bail-out criteria, which is the spec's own instruction ("fix only if cheap").
diff --git a/web/public/dualsense/focus/focus_L1.png b/web/public/dualsense/focus/focus_L1.png
deleted file mode 100644
index b6a6c16..0000000
Binary files a/web/public/dualsense/focus/focus_L1.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_L2.png b/web/public/dualsense/focus/focus_L2.png
deleted file mode 100644
index 656cda1..0000000
Binary files a/web/public/dualsense/focus/focus_L2.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_Lstick.png b/web/public/dualsense/focus/focus_Lstick.png
deleted file mode 100644
index b411de3..0000000
Binary files a/web/public/dualsense/focus/focus_Lstick.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_PS.png b/web/public/dualsense/focus/focus_PS.png
deleted file mode 100644
index b68ca14..0000000
Binary files a/web/public/dualsense/focus/focus_PS.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_R1.png b/web/public/dualsense/focus/focus_R1.png
deleted file mode 100644
index bfb8160..0000000
Binary files a/web/public/dualsense/focus/focus_R1.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_R2.png b/web/public/dualsense/focus/focus_R2.png
deleted file mode 100644
index 7b5f18b..0000000
Binary files a/web/public/dualsense/focus/focus_R2.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_Rstick.png b/web/public/dualsense/focus/focus_Rstick.png
deleted file mode 100644
index 18aab07..0000000
Binary files a/web/public/dualsense/focus/focus_Rstick.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_circle.png b/web/public/dualsense/focus/focus_circle.png
deleted file mode 100644
index ddb658c..0000000
Binary files a/web/public/dualsense/focus/focus_circle.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_create.png b/web/public/dualsense/focus/focus_create.png
deleted file mode 100644
index f999fc2..0000000
Binary files a/web/public/dualsense/focus/focus_create.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_cross.png b/web/public/dualsense/focus/focus_cross.png
deleted file mode 100644
index 3e8af4d..0000000
Binary files a/web/public/dualsense/focus/focus_cross.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_down.png b/web/public/dualsense/focus/focus_down.png
deleted file mode 100644
index 31cf83b..0000000
Binary files a/web/public/dualsense/focus/focus_down.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_left.png b/web/public/dualsense/focus/focus_left.png
deleted file mode 100644
index a43684b..0000000
Binary files a/web/public/dualsense/focus/focus_left.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_options.png b/web/public/dualsense/focus/focus_options.png
deleted file mode 100644
index ad5658c..0000000
Binary files a/web/public/dualsense/focus/focus_options.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_rear_L.png b/web/public/dualsense/focus/focus_rear_L.png
deleted file mode 100644
index 5e69246..0000000
Binary files a/web/public/dualsense/focus/focus_rear_L.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_rear_R.png b/web/public/dualsense/focus/focus_rear_R.png
deleted file mode 100644
index 4ec8725..0000000
Binary files a/web/public/dualsense/focus/focus_rear_R.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_right.png b/web/public/dualsense/focus/focus_right.png
deleted file mode 100644
index 8a6743d..0000000
Binary files a/web/public/dualsense/focus/focus_right.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_square.png b/web/public/dualsense/focus/focus_square.png
deleted file mode 100644
index 8be0df7..0000000
Binary files a/web/public/dualsense/focus/focus_square.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_touchpad.png b/web/public/dualsense/focus/focus_touchpad.png
deleted file mode 100644
index c2640ea..0000000
Binary files a/web/public/dualsense/focus/focus_touchpad.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_triangle.png b/web/public/dualsense/focus/focus_triangle.png
deleted file mode 100644
index 804d8be..0000000
Binary files a/web/public/dualsense/focus/focus_triangle.png and /dev/null differ
diff --git a/web/public/dualsense/focus/focus_up.png b/web/public/dualsense/focus/focus_up.png
deleted file mode 100644
index 6e2a692..0000000
Binary files a/web/public/dualsense/focus/focus_up.png and /dev/null differ
diff --git a/web/src/App.svelte b/web/src/App.svelte
index ae35f9e..f28fdd2 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -26,6 +26,7 @@
     edgeSlotWriteLabel as edgeOnboardSlotWriteLabel,
     edgeSlotWriteTooltip as edgeOnboardSlotWriteTooltip,
     emptyEdgeOnboardProfileState,
+    friendlyEdgeSlotsError,
     isEdgeTargetController,
     shouldReadEdgeOnboardProfiles,
     shouldResetEdgeOnboardProfiles
@@ -464,8 +465,10 @@
   $: telemetry = snapshot?.telemetry ?? [];
   $: telemetryByName = new Map(telemetry.map((item) => [item.name, item]));
   $: effectState = snapshot?.effectState;
-  $: l2LivePress = controllerInputFresh ? l2ControllerPress : selectedTuningScope === 'global' ? 0 : telemetryUnitValue('input.brake');
-  $: r2LivePress = controllerInputFresh ? r2ControllerPress : selectedTuningScope === 'global' ? 0 : telemetryUnitValue('input.throttle');
+  // Stale telemetry must read as "no press", not as the last frozen value.
+  $: gameTelemetryUsable = selectedTuningScope !== 'global' && selectedGameTelemetryFresh;
+  $: l2LivePress = controllerInputFresh ? l2ControllerPress : gameTelemetryUsable ? telemetryUnitValue('input.brake') : 0;
+  $: r2LivePress = controllerInputFresh ? r2ControllerPress : gameTelemetryUsable ? telemetryUnitValue('input.throttle') : 0;
   $: triggerCurveDisplayMode = selectedTuningScope === 'game' && usesForzaRuntimeProfile(selectedTuningGame) ? 'forza' : 'base';
   $: appSettings = snapshot?.appSettings;
   $: forzaGlyphs = appSettings?.settings.forzaPlaystationGlyphs;
@@ -631,11 +634,14 @@
   };
   $: telemetryRateText = `${telemetryPacketRate >= 100 ? telemetryPacketRate.toFixed(0) : telemetryPacketRate.toFixed(1)} Hz`;
   $: telemetryRateDetail = telemetryRateStatusText(adapter);
-  $: systemReadoutTitle = selectedTuningScope === 'global' ? 'Profile Scope' : 'Telemetry Rate';
-  $: systemReadoutValue = selectedTuningScope === 'global' ? 'Global' : telemetryRateText;
+  // "Tuning Scope", not "Profile Scope": this readout tracks what the tuning
+  // view edits, while Status's sentence tracks profile resolution — the two can
+  // legitimately differ, so the label must not claim to be the same thing.
+  $: systemReadoutTitle = selectedTuningScope === 'global' ? 'Tuning Scope' : 'Telemetry Rate';
+  $: systemReadoutValue = selectedTuningScope === 'global' ? 'Everyday' : telemetryRateText;
   $: systemReadoutDetail =
     selectedTuningScope === 'global'
-      ? 'Controller-only tuning'
+      ? 'Global Profile · controller-only tuning'
       : telemetryRateDetail;
   $: overrideScope = profileWorkspace.overrideScope;
   // Sync the override dropdown when the ACTIVE profile changes (server-side
@@ -1495,7 +1501,7 @@
       edgeProfiles = await getEdgeProfiles(controllerId);
     } catch (caught) {
       edgeProfiles = null;
-      edgeProfilesError = caught instanceof Error ? caught.message : 'Unable to read Edge onboard slots.';
+      edgeProfilesError = friendlyEdgeSlotsError(caught, 'Unable to read Edge onboard slots.');
     } finally {
       edgeProfilesLoading = false;
     }
@@ -1534,7 +1540,7 @@
       showToast(response.message, response.accepted ? 'success' : 'error');
       await loadEdgeProfiles(controller.id, true);
     } catch (caught) {
-      edgeProfilesError = caught instanceof Error ? caught.message : 'Unable to write Edge onboard slot.';
+      edgeProfilesError = friendlyEdgeSlotsError(caught, 'Unable to write Edge onboard slot.');
       showToast(edgeProfilesError, 'error');
     } finally {
       edgeProfilesBusySlot = '';
diff --git a/web/src/app/edgeOnboardProfiles.ts b/web/src/app/edgeOnboardProfiles.ts
index bb6f65e..a931a51 100644
--- a/web/src/app/edgeOnboardProfiles.ts
+++ b/web/src/app/edgeOnboardProfiles.ts
@@ -90,6 +90,20 @@ export function edgeSlotWriteLabel(edgeProfiles: EdgeProfilesResponse | null): s
   return edgeProfiles?.supportState === 'read_write' ? 'Write' : 'Stage';
 }
 
+/**
+ * The missing-agent failure arrives as dev-voiced API text (thrown by
+ * getEdgeProfiles/writeEdgeProfile when no real agent is serving); speak
+ * product before it reaches a note or toast. Direction-neutral: the same
+ * helper handles both the read and the write path, so the copy can't claim a
+ * direction.
+ */
+export const friendlyEdgeSlotsError = (caught: unknown, fallback: string): string => {
+  const message = caught instanceof Error ? caught.message : fallback;
+  return message.includes('requires the real DSCC agent')
+    ? 'Onboard slots need DSCC running.'
+    : message;
+};
+
 export function edgeProfileNameForSlot(slot: EdgeProfileSlot, profileName: string): string {
   const sourceName = profileName || 'DSCC Profile';
   return `${sourceName} ${slot.shortcut.replace('Fn + ', '')}`.trim().slice(0, 64);
diff --git a/web/src/lib/features/controllers/EdgeSlotsView.svelte b/web/src/lib/features/controllers/EdgeSlotsView.svelte
index a3d6eed..0026f82 100644
--- a/web/src/lib/features/controllers/EdgeSlotsView.svelte
+++ b/web/src/lib/features/controllers/EdgeSlotsView.svelte
@@ -82,9 +82,13 @@
         {:else}
           <div class="edge-slot-row disabled">
             <div class="edge-slot-copy">
-              <span class="lbl">Fn Slots</span>
-              <strong>{edgeProfilesLoading ? 'Reading slots' : 'No slot data'}</strong>
-              <small>{edgeProfilesLoading ? 'controller scan' : 'unavailable'}</small>
+              <span class="lbl">Fn slots</span>
+              <strong>{edgeProfilesLoading ? 'Reading slots' : 'Nothing read yet'}</strong>
+              <small
+                >{edgeProfilesLoading
+                  ? 'checking the controller'
+                  : 'Fn slots are shortcuts stored on the controller — hold Fn and press an action button to switch. Press Read to see what each slot holds.'}</small
+              >
             </div>
           </div>
         {/if}
diff --git a/web/src/lib/features/status/StatusView.svelte b/web/src/lib/features/status/StatusView.svelte
index ff3ec65..a678914 100644
--- a/web/src/lib/features/status/StatusView.svelte
+++ b/web/src/lib/features/status/StatusView.svelte
@@ -138,7 +138,9 @@
         <div class="status-surf">
           {#each controllers as item (item.id)}
             <div class="status-controller-card">
-              <div class="status-controller-icon" aria-hidden="true">🎮</div>
+              <div class="status-controller-icon" aria-hidden="true">
+                <span class="dm-controller-glyph status-controller-glyph"></span>
+              </div>
               <div class="status-controller-main">
                 {#if renameActiveId === item.id}
                   <div class="status-rename">
diff --git a/web/src/lib/features/tuning/SavedRail.svelte b/web/src/lib/features/tuning/SavedRail.svelte
index d7da522..f0a0e5b 100644
--- a/web/src/lib/features/tuning/SavedRail.svelte
+++ b/web/src/lib/features/tuning/SavedRail.svelte
@@ -61,19 +61,23 @@
   );
 </script>
 
+{#snippet rowValue(value: string, isColor: boolean)}
+  {#if isColor && value.startsWith('#')}<span class="saved-swatch" style:background={value}></span>{/if}{value}
+{/snippet}
+
 {#snippet diffRows()}
   {#each rows as item (item.id)}
     <div class="saved-row" class:dirty={item.dirty}>
       <span class="saved-row-label">{item.label}</span>
       <span class="saved-row-value">
         {#if item.dirty && item.savedValue !== item.currentValue}
-          <s class="saved-row-was">{item.savedValue}</s>
-          <span class="saved-row-now">→ {item.currentValue}</span>
+          <s class="saved-row-was">{@render rowValue(item.savedValue, item.kind === 'color')}</s>
+          <span class="saved-row-now">→ {@render rowValue(item.currentValue, item.kind === 'color')}</span>
         {:else if item.dirty}
           <!-- Group summaries ("2 of 5 edited") have no single saved value to strike. -->
-          <span class="saved-row-now">{item.currentValue}</span>
+          <span class="saved-row-now">{@render rowValue(item.currentValue, item.kind === 'color')}</span>
         {:else}
-          <span class="saved-row-saved">{item.savedValue}</span>
+          <span class="saved-row-saved">{@render rowValue(item.savedValue, item.kind === 'color')}</span>
         {/if}
       </span>
     </div>
diff --git a/web/src/lib/features/tuning/savedDiff.ts b/web/src/lib/features/tuning/savedDiff.ts
index fc379eb..d228de5 100644
--- a/web/src/lib/features/tuning/savedDiff.ts
+++ b/web/src/lib/features/tuning/savedDiff.ts
@@ -41,6 +41,8 @@ export type SavedDiffRow = {
   savedValue: string;
   currentValue: string;
   dirty: boolean;
+  /** 'color' rows carry raw hex values; the rail pairs them with a swatch. */
+  kind?: 'color';
 };
 
 /** The saved baseline: the editable slice of a controller configuration. */
@@ -135,8 +137,9 @@ const row = (
   label: string,
   savedValue: string,
   currentValue: string,
-  dirty = savedValue !== currentValue
-): SavedDiffRow => ({ id, label, savedValue, currentValue, dirty });
+  dirty = savedValue !== currentValue,
+  kind?: 'color'
+): SavedDiffRow => ({ id, label, savedValue, currentValue, dirty, kind });
 
 /** A generic per-field comparison for the deep telemetry tuning groups. */
 const tuningGroupRow = <T extends object>(
@@ -249,13 +252,17 @@ export const savedDiffRows = (
       'lightbar-color',
       'Lightbar color',
       (saved.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR).toLowerCase(),
-      draft.lightbarColor.toLowerCase()
+      draft.lightbarColor.toLowerCase(),
+      undefined,
+      'color'
     ),
     row(
       'redline-color',
       'Redline color',
       (saved.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR).toLowerCase(),
-      draft.rpmColor.toLowerCase()
+      draft.rpmColor.toLowerCase(),
+      undefined,
+      'color'
     ),
     row(
       'left-deadzone',
diff --git a/web/src/styles/button-mapping/layout/controller-art.css b/web/src/styles/button-mapping/layout/controller-art.css
index 5532ca6..4357df9 100644
--- a/web/src/styles/button-mapping/layout/controller-art.css
+++ b/web/src/styles/button-mapping/layout/controller-art.css
@@ -64,8 +64,7 @@
   z-index: 1;
 }
 
-.dm-controller-base,
-.dm-controller-focus {
+.dm-controller-base {
   position: absolute;
   inset: 4% 4% 6%;
   width: 92%;
@@ -85,19 +84,6 @@
   opacity: 0.46;
 }
 
-.dm-controller-focus {
-  z-index: 3;
-  opacity: 0;
-  filter:
-    drop-shadow(0 0 6px rgba(0, 112, 204, 0.55))
-    drop-shadow(0 0 18px rgba(0, 112, 204, 0.4));
-  transition: opacity 200ms ease-out, filter 220ms ease-out;
-}
-
-.dm-controller-focus.visible {
-  opacity: 1;
-}
-
 .dm-controller-focus-card {
   position: absolute;
   left: 50%;
diff --git a/web/src/styles/feedback.css b/web/src/styles/feedback.css
index 9d9aba9..320d143 100644
--- a/web/src/styles/feedback.css
+++ b/web/src/styles/feedback.css
@@ -84,9 +84,8 @@
   display: grid;
   gap: 5px;
   min-width: 0;
-  padding: 11px 13px 12px;
-  border: 0;
-  border-left: 3px solid var(--toast-accent);
+  padding: 11px 13px 12px 15px;
+  border: 1px solid var(--toast-accent);
   color: #FFFFFF;
   background:
     linear-gradient(90deg, var(--toast-bg), rgba(18, 18, 20, 0.96) 46%),
diff --git a/web/src/styles/status.css b/web/src/styles/status.css
index 8088646..8d8defa 100644
--- a/web/src/styles/status.css
+++ b/web/src/styles/status.css
@@ -110,11 +110,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
   border-radius: var(--radius-m);
   background: var(--surface-raised);
 }
 
+/* Two-class selector to out-specify .dm-controller-glyph's `mask` shorthand
+   (which would otherwise reset mask-size back to `contain`, same as the
+   sidebar brand glyph does in shell-v2.css). */
+.dm-controller-glyph.status-controller-glyph {
+  width: 30px;
+  height: 22px;
+  /* Square SVG canvas with the artwork in a central band — zoom the mask
+     past the box so the controller renders at ~22px tall (see shell-v2.css). */
+  mask-size: 36px 36px;
+  -webkit-mask-size: 36px 36px;
+}
+
 .status-controller-main {
   flex: 1;
   min-width: 0;
@@ -237,3 +248,14 @@
 .status-ok { color: var(--ok); }
 .status-warn { color: var(--warn); }
 .status-mut { color: var(--ink-muted); }
+
+/* Wide desktops: the band keeps its scale but sits centered in the viewport
+   instead of hugging the top-left corner. */
+@media (min-width: 1200px) and (min-height: 720px) {
+  .status-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: calc(100dvh - 130px); /* viewport minus measured app chrome */
+  }
+}
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index 8f9bd53..92daa68 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -8,6 +8,10 @@
   --hairline-strong: #2e2e36;
   --ink: #d6d6dc;
   --ink-muted: #8b8b96;      /* secondary text only; not body-sized prose */
+  /* Brighter muted ink for small text needing AA headroom: #8b8b96 computes
+     ≈4.46:1 on --surface-raised (a marginal fail); #93939d clears 4.5:1 on
+     every app surface. */
+  --ink-muted-raised: #93939d;
 
   /* accent — PlayStation blue */
   --accent: #0070cc;          /* primary buttons */
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index c1a2473..f99ca39 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -503,11 +503,11 @@
 }
 
 .saved-rail-title {
-  font-size: 9px;
+  font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--ink-muted);
+  color: var(--ink-muted-raised);
 }
 
 .saved-rail-rows {
@@ -523,7 +523,7 @@
   gap: 10px;
   padding: 4px 0;
   border-bottom: 1px solid var(--hairline);
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .saved-row:last-child {
@@ -545,7 +545,7 @@
 
 .saved-row-saved,
 .saved-row-was {
-  color: var(--ink-muted);
+  color: var(--ink-muted-raised);
 }
 
 .saved-row-now {
@@ -553,6 +553,19 @@
   font-weight: 600;
 }
 
+/* Hex color values get a swatch so the color is readable at a glance.
+   (Atomic inline boxes don't inherit the strikethrough line, so the saved
+   swatch stays clean inside <s>.) */
+.saved-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+  border-radius: 3px;
+  border: 1px solid var(--hairline-strong);
+  vertical-align: -1px;
+}
+
 .saved-rail-foot {
   margin-top: 12px;
   padding-top: 10px;
@@ -588,7 +601,7 @@
 
 .saved-preview-note {
   font-size: 9px;
-  color: var(--ink-muted);
+  color: var(--ink-muted-raised);
   white-space: nowrap;
 }
 
@@ -614,7 +627,7 @@
 .saved-discard-button {
   flex: 0 0 auto;
   background: var(--surface-raised);
-  color: var(--ink-muted);
+  color: var(--ink-muted-raised);
   border: 0;
   border-radius: var(--radius-s);
   padding: 5px 12px;
@@ -671,7 +684,7 @@
   padding: 0;
   font-family: inherit;
   font-size: 11px;
-  color: var(--ink-muted);
+  color: var(--ink-muted-raised);
   cursor: pointer;
   min-width: 0;
   text-align: left;
@@ -705,6 +718,13 @@
   .saved-mobile-bar {
     display: block;
   }
+
+  /* The fixed bar floats over the document; reserve room beneath the canvas
+     only while it's shown so the last row stays reachable. Anchored at the
+     tuning wrapper to keep :has() invalidation local. */
+  .work-and-rail:has(.saved-mobile-bar) .canvas-grid {
+    padding-bottom: 84px;
+  }
 }
 
 /* Content parked below the grid until Tasks 8-10 re-home it. */