Design canvas: fix key label fit; direction settled

RESAMPLE still sat flush against its border after the soft hyphen,
because the type was simply too large for the button. A left-block
button is 35.9px wide, leaving 27.9px of usable text width once the
2px borders and padding are removed; SAMPLE at 8px with .03em tracking
measured ~27.8px.

Key labels drop to 7px with no tracking and 1px side padding, which
gives SAMPLE 6.8px of headroom and REVERSE 2.3px. SHIFT, the longest
label in the six-button bank row, gets flex:1.25 - the hardware makes
that button wider too.

Direction settled: A (manual, light) with the dark counterpart. It will
be implemented in the React port rather than retrofitted onto the
Phase 1 vanilla app, so the UI is only built once.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

design/canvas/DarkExplore.dc.html

@@ -11,10 +11,12 @@
   <style>
     body { margin: 0; }
     a { color: #FF4A00; } a:hover { color: #FF7A45; }
+    /* 7px, no tracking, 1px side padding — see Main.dc.html for the measurement. */
     .k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
-         background:#3E3E3A; border:2px solid #000000; border-radius:3px; color:#EDEDEB; font-size:8px;
+         background:#3E3E3A; border:2px solid #000000; border-radius:3px; color:#EDEDEB; font-size:7px;
-         line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
+         line-height:1.05; letter-spacing:0; padding:2px 1px; box-sizing:border-box; font-weight:500;
          hyphens:manual; overflow-wrap:break-word; }
+    .grp:last-child .col:last-child .btnrow .k:last-child { flex:1.25; }
     .lit { background:#FF4A00; color:#111111; font-weight:700; }
     .pad { background:#0E0E0C; border:2px solid #000000; border-radius:4px; color:#EDEDEB; font-size:9px; }
     .num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }

design/canvas/Main.dc.html

@@ -11,10 +11,16 @@
   <style>
     body { margin: 0; }
     a { color: #FF4A00; } a:hover { color: #C43900; }
+    /* 7px, no tracking, 1px side padding: a left-block button is 35.9px wide, so only
+       27.9px is usable text width once border and padding are taken out. At 8px with
+       tracking, SAMPLE measured 27.8px and sat flush against the border. */
     .k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
-         background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
+         background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:7px;
-         line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
+         line-height:1.05; letter-spacing:0; padding:2px 1px; box-sizing:border-box; font-weight:500;
          hyphens:manual; overflow-wrap:break-word; }
+    /* SHIFT is the longest label in the six-button bank row; give it a little more width,
+       as the hardware does. */
+    .grp:last-child .col:last-child .btnrow .k:last-child { flex:1.25; }
     .lit { background:#FF4A00; color:#111111; font-weight:700; }
     .pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
     .num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }

design/canvas/ManualDrill.dc.html

@@ -11,10 +11,12 @@
   <style>
     body { margin: 0; }
     a { color: #FF4A00; } a:hover { color: #C43900; }
+    /* 7px, no tracking, 1px side padding — see Main.dc.html for the measurement. */
     .k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
-         background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
+         background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:7px;
-         line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
+         line-height:1.05; letter-spacing:0; padding:2px 1px; box-sizing:border-box; font-weight:500;
          hyphens:manual; overflow-wrap:break-word; }
+    .grp:last-child .col:last-child .btnrow .k:last-child { flex:1.25; }
     .lit { background:#FF4A00; color:#111111; font-weight:700; }
     .pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
     .num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }