docs(11-01): complete mobile responsiveness and MD3 focus indicators plan

- 11-01-SUMMARY.md: execution summary for POLISH-01/POLISH-02
- STATE.md: position advanced to phase 11 plan 01 complete, decisions added
- ROADMAP.md: phase 11 progress updated (1/2 plans complete)
- REQUIREMENTS.md: POLISH-01 and POLISH-02 marked complete

.planning/REQUIREMENTS.md

@@ -26,8 +26,8 @@
 
 ### Polish
 
-- [ ] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch
+- [x] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch
-- [ ] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation
+- [x] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation
 - [ ] **POLISH-03**: Step transitions use subtle fade/slide animation that respects `prefers-reduced-motion`
 - [ ] **POLISH-04**: On validation failure, the view auto-scrolls to the first errored field
 
@@ -67,8 +67,8 @@
 | UX-02 | Phase 10 | Complete |
 | UX-03 | Phase 10 | Complete |
 | UX-04 | Phase 10 | Complete |
-| POLISH-01 | Phase 11 | Pending |
+| POLISH-01 | Phase 11 | Complete |
-| POLISH-02 | Phase 11 | Pending |
+| POLISH-02 | Phase 11 | Complete |
 | POLISH-03 | Phase 11 | Pending |
 | POLISH-04 | Phase 11 | Pending |
 

.planning/ROADMAP.md

@@ -98,7 +98,7 @@ Plans:
   2. Every interactive element shows a visible 3px MD3 focus outline when navigated via keyboard (using `focus-visible`)
   3. Step transitions use a subtle fade/slide animation that is suppressed when the user has `prefers-reduced-motion` enabled
   4. When form validation fails, the view auto-scrolls to the first field with an error
-**Plans:** 2 plans
+**Plans:** 1/2 plans executed
 Plans:
 - [ ] 11-01-PLAN.md — Mobile responsive layout + MD3 focus-visible indicators
 - [ ] 11-02-PLAN.md — Step transition animation + auto-scroll to first error
@@ -117,4 +117,4 @@ Plans:
 | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 |
 | 9. MD3 Components | v1.2 | 5/5 | Complete | 2026-04-01 |
 | 10. Content & Clarity | v1.2 | 3/3 | Complete | 2026-04-01 |
-| 11. Polish & Responsiveness | v1.2 | 0/2 | Not started | - |
+| 11. Polish & Responsiveness | 1/2 | In Progress|  | - |

.planning/STATE.md

@@ -3,15 +3,15 @@ gsd_state_version: 1.0
 milestone: v1.2
 milestone_name: UI Polish & Clarity
 status: completed
-stopped_at: Completed 10-02-PLAN.md
+stopped_at: Completed 11-01-PLAN.md
-last_updated: "2026-04-01T11:02:32.056Z"
+last_updated: "2026-04-01T11:26:15.869Z"
-last_activity: 2026-04-01 — Phase 9 complete (COMP-01, COMP-02, COMP-03, COMP-04, DEBT-01 satisfied)
+last_activity: 2026-04-01 — Phase 11 plan 01 complete (POLISH-01, POLISH-02 satisfied)
 progress:
   total_phases: 4
   completed_phases: 3
-  total_plans: 10
+  total_plans: 12
-  completed_plans: 10
+  completed_plans: 11
-  percent: 64
+  percent: 98
 ---
 
 # Project State
@@ -21,16 +21,16 @@ progress:
 See: .planning/PROJECT.md (updated 2026-03-31)
 
 **Core value:** An IT pro can go from zero to a deployable rclone setup in minutes — without needing to know rclone's config syntax or PowerShell deployment conventions.
-**Current focus:** v1.2 — UI Polish & Clarity (Phase 9: MD3 Components complete, Phase 10 next)
+**Current focus:** v1.2 — UI Polish & Clarity (Phase 11: Polish & Responsiveness in progress, plan 11-01 complete)
 
 ## Current Position
 
-Phase: 9 of 11 (MD3 Components) — COMPLETE
+Phase: 11 of 11 (Polish & Responsiveness) — In Progress
-Plan: 09-03 (complete)
+Plan: 11-01 (complete)
-Status: Phase 9 complete, ready for Phase 10
+Status: Phase 11 in progress, plan 11-01 complete (POLISH-01, POLISH-02 satisfied)
-Last activity: 2026-04-01 — Phase 9 complete (COMP-01, COMP-02, COMP-03, COMP-04, DEBT-01 satisfied)
+Last activity: 2026-04-01 — Phase 11 plan 01 complete (POLISH-01, POLISH-02 satisfied)
 
-Progress: [██████░░░░] 64% (v1.2)
+Progress: [██████████] 98% (v1.2)
 
 ## Accumulated Context
 
@@ -64,6 +64,9 @@ Recent decisions affecting current work:
 - [Phase 10-03]: SFTP host and user intentionally omitted from tooltipText — self-explanatory per user decision
 - [Phase 10-03]: getByLabelText selector ambiguity fixed with { selector: 'input' } across all affected tests (same DEBT-01 pattern as Phase 09-03)
 - [Phase 10-content-clarity]: RemoteNamePreview renders only div/span elements (no form controls) to preserve single-textbox selector contract in BackendSelectionStep tests
+- [Phase 11-polish-responsiveness]: ring-inset on ThemeToggle focus ring because overflow-hidden on container clips outset rings
+- [Phase 11-polish-responsiveness]: No ring-offset-2 on BackendCard to avoid dark mode surface color issues
+- [Phase 11-polish-responsiveness]: FieldRenderer select uses focus-visible:ring-2 (not focus:ring-2) for keyboard-only ring on selects
 
 ### Pending Todos
 
@@ -75,6 +78,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-04-01T10:58:05.050Z
+Last session: 2026-04-01T11:26:10.100Z
-Stopped at: Completed 10-02-PLAN.md
+Stopped at: Completed 11-01-PLAN.md
 Resume file: None

.planning/phases/11-polish-responsiveness/11-01-SUMMARY.md

@@ -0,0 +1,120 @@
+---
+phase: 11-polish-responsiveness
+plan: 01
+subsystem: ui
+tags: [tailwind, responsive, mobile, accessibility, focus-visible, md3]
+
+# Dependency graph
+requires:
+  - phase: 09-md3-components
+    provides: MD3_BTN_FILLED/OUTLINED/TEXT constants, BackendCard, StepIndicator, ThemeToggle, FieldRenderer components
+  - phase: 10-content-clarity
+    provides: final step component shapes and layouts
+provides:
+  - Mobile-responsive wizard layout (cards stack, buttons stack, step labels collapse)
+  - MD3 focus-visible ring-3 indicators on all interactive elements
+affects: [future UI phases, any plan touching step components or button constants]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "Mobile-first responsive: flex-col sm:flex-row for button rows, grid grid-cols-1 sm:grid-cols-2 for card grids"
+    - "hidden sm:block for collapsible labels on compact viewports"
+    - "focus-visible:ring-3 focus-visible:ring-primary on standalone interactive elements"
+    - "focus-visible:ring-inset on overflow-hidden button groups (ThemeToggle) to avoid clipping"
+
+key-files:
+  created: []
+  modified:
+    - src/styles/md3-buttons.ts
+    - src/components/ui/BackendCard.tsx
+    - src/components/ui/ThemeToggle.tsx
+    - src/components/ui/FieldRenderer.tsx
+    - src/components/wizard/BackendSelectionStep.tsx
+    - src/components/wizard/RemoteConfigStep.tsx
+    - src/components/wizard/DeploymentStep.tsx
+    - src/components/wizard/ReviewStep.tsx
+    - src/components/wizard/StepIndicator.tsx
+
+key-decisions:
+  - "ring-inset on ThemeToggle focus ring because overflow-hidden on container clips outset rings"
+  - "No ring-offset-2 on BackendCard to avoid dark mode surface color issues"
+  - "Tooltip buttons use ring-2 (not ring-3) — small utility buttons suit smaller ring"
+  - "FieldRenderer select uses focus-visible:ring-2 (not focus:ring-2) for keyboard-only focus behavior on selects"
+
+patterns-established:
+  - "Button row responsive pattern: flex flex-col sm:flex-row gap-3 mt-6 with w-full sm:w-auto on each button"
+  - "Card grid responsive pattern: grid grid-cols-1 sm:grid-cols-2 gap-3 on container div"
+  - "Step label collapse: hidden sm:block on all label spans inside StepIndicator"
+
+requirements-completed: [POLISH-01, POLISH-02]
+
+# Metrics
+duration: 3min
+completed: 2026-04-01
+---
+
+# Phase 11 Plan 01: Mobile Responsiveness & MD3 Focus Indicators Summary
+
+**Tailwind v4 mobile-first responsive layout (card grids, stacked button rows, collapsed step labels) plus MD3 focus-visible ring-3 keyboard indicators across all wizard interactive elements**
+
+## Performance
+
+- **Duration:** 3 min
+- **Started:** 2026-04-01T11:22:10Z
+- **Completed:** 2026-04-01T11:25:12Z
+- **Tasks:** 2
+- **Files modified:** 9
+
+## Accomplishments
+- Backend cards container uses responsive grid (1-col on mobile, 2-col on desktop); BackendCard fills its cell with w-full
+- All four step button rows stack vertically on mobile (flex-col) and go horizontal on desktop (sm:flex-row) with full-width buttons on mobile
+- StepIndicator hides label text on mobile (hidden sm:block) keeping circles and connectors visible
+- MD3 button constants upgraded from ring-2/50 to ring-3 for all three variants (FILLED, OUTLINED, TEXT)
+- BackendCard, ThemeToggle, StepIndicator completed-step circle, and FieldRenderer tooltip buttons all have focus-visible rings
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Mobile responsive layout** - `07f97d9` (feat)
+2. **Task 2: MD3 focus-visible indicators** - `9015db5` (feat)
+
+**Plan metadata:** (docs commit — see below)
+
+## Files Created/Modified
+- `src/styles/md3-buttons.ts` - Upgraded ring-2/primary/50 to ring-3/primary on all three constants
+- `src/components/ui/BackendCard.tsx` - Added w-full and focus-visible:ring-3 to button base classes
+- `src/components/ui/ThemeToggle.tsx` - Added focus-visible:ring-3 ring-inset to both selected/unselected branches
+- `src/components/ui/FieldRenderer.tsx` - Select uses focus-visible:ring-2; both tooltip buttons get focus-visible:ring-2 rounded
+- `src/components/wizard/BackendSelectionStep.tsx` - Responsive card grid and button row
+- `src/components/wizard/RemoteConfigStep.tsx` - Responsive button row with w-full sm:w-auto
+- `src/components/wizard/DeploymentStep.tsx` - Responsive button row with w-full sm:w-auto
+- `src/components/wizard/ReviewStep.tsx` - Responsive button row with w-full sm:w-auto
+- `src/components/wizard/StepIndicator.tsx` - hidden sm:block on all three label spans; ring-3 on completed-step circle
+
+## Decisions Made
+- ring-inset used on ThemeToggle because the container has overflow-hidden — outset ring would be clipped by the parent border
+- No ring-offset-2 on BackendCard to avoid dark mode surface color mismatch (per research open question #2)
+- Tooltip buttons use ring-2 (not ring-3) — they are small utility icons where a smaller ring is more appropriate
+- FieldRenderer select changed from focus:ring-2 to focus-visible:ring-2 so selects behave like buttons (ring on keyboard only), not like text inputs
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+None.
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- POLISH-01 and POLISH-02 requirements satisfied
+- All 202 existing tests pass — no regressions introduced
+- Wizard is now mobile-usable and fully keyboard-navigable
+
+---
+*Phase: 11-polish-responsiveness*
+*Completed: 2026-04-01*