fix(mobile): WCAG 2.4.7 focus-visible rings audit — remaining components

Systematic audit of all mobile components for missing focus rings:
- MobileCanvas: reset zoom, agent card, spawn FAB
- MobileComms: filter pills
- MobileHome: spawn FAB
- MobileMe: accent swatches, SegmentedRow buttons
- MobileSpawn: close, template card, cancel, deploy
- components.tsx: tab bar, workspace card, radio filters

All interactive buttons now have emerald-500 focus-visible rings with
dark/light mode ring-offset for WCAG 2.4.7 compliance.

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

canvas/src/components/mobile/MobileCanvas.tsx

@@ -205,6 +205,7 @@ export function MobileCanvas({
           type="button"
           onClick={resetView}
           aria-label="Reset zoom"
+          className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
           style={{
             position: "absolute",
             right: 14,
@@ -272,6 +273,7 @@ export function MobileCanvas({
             key={l.agent.id}
             type="button"
             onClick={() => onOpen(l.agent.id)}
+            className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
             style={{
               position: "absolute",
               left: `${l.x}%`,
@@ -376,6 +378,7 @@ export function MobileCanvas({
         type="button"
         onClick={onSpawn}
         aria-label="Spawn new agent"
+        className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
         style={{
           position: "absolute",
           right: 24,

canvas/src/components/mobile/MobileComms.tsx

@@ -218,6 +218,7 @@ export function MobileComms({ dark }: { dark: boolean }) {
               key={o.id}
               type="button"
               onClick={() => setFilter(o.id)}
+              className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
               style={{
                 display: "inline-flex",
                 alignItems: "center",

canvas/src/components/mobile/MobileHome.tsx

@@ -183,6 +183,7 @@ export function MobileHome({
         type="button"
         onClick={onSpawn}
         aria-label="Spawn new agent"
+        className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
         style={{
           position: "absolute",
           right: 24,

canvas/src/components/mobile/MobileMe.tsx

@@ -83,6 +83,7 @@ export function MobileMe({
                   type="button"
                   onClick={() => setAccent(c)}
                   aria-label={`Set accent ${c}`}
+                  className="focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
                   style={{
                     width: 36,
                     height: 36,
@@ -173,6 +174,7 @@ function SegmentedRow({
             key={o.id}
             type="button"
             onClick={() => onChange(o.id)}
+            className="focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
             style={{
               flex: 1,
               padding: "10px 8px",

canvas/src/components/mobile/MobileSpawn.tsx

@@ -146,6 +146,7 @@ export function MobileSpawn({ dark, onClose }: { dark: boolean; onClose: () => v
             type="button"
             onClick={onClose}
             aria-label="Close"
+            className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
             style={{
               width: 32,
               height: 32,

canvas/src/components/mobile/components.tsx

@@ -133,6 +133,7 @@ export function TabBar({
             aria-label={t.label}
             onClick={() => onChange(t.id)}
             onKeyDown={(e) => handleKeyDown(e, idx)}
+            className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
             style={{
               background: "none",
               border: "none",