diff --git a/.agents/tasks/prd-mobile-refactor.json b/.agents/tasks/prd-mobile-refactor.json
index d442428..4b0d9f7 100644
--- a/.agents/tasks/prd-mobile-refactor.json
+++ b/.agents/tasks/prd-mobile-refactor.json
@@ -77,7 +77,7 @@
     {
       "id": "US-002",
       "title": "Refactor screen-level files into layer-based modules",
-      "status": "in_progress",
+      "status": "done",
       "dependsOn": [
         "US-001"
       ],
@@ -89,13 +89,13 @@
         "All screens render identically before and after refactor"
       ],
       "startedAt": "2026-01-25T20:47:07.436262+00:00",
-      "completedAt": null,
-      "updatedAt": "2026-01-25T20:47:07.436370+00:00"
+      "completedAt": "2026-01-25T21:07:57.526689+00:00",
+      "updatedAt": "2026-01-25T21:07:57.526580+00:00"
     },
     {
       "id": "US-003",
       "title": "Refactor oversized shared components",
-      "status": "open",
+      "status": "in_progress",
       "dependsOn": [
         "US-001"
       ],
@@ -105,7 +105,10 @@
         "Example: extract nested UI blocks into `components/<Component>/SubComponent.tsx`",
         "Negative case: do not extract one-off UI fragments that would reduce cohesion",
         "No change to public component API unless required for split"
-      ]
+      ],
+      "startedAt": "2026-01-26T14:09:11.801117+00:00",
+      "completedAt": null,
+      "updatedAt": "2026-01-26T14:09:11.801233+00:00"
     },
     {
       "id": "US-004",
diff --git a/.ralph/activity.log b/.ralph/activity.log
index e98e98c..e9e6000 100644
--- a/.ralph/activity.log
+++ b/.ralph/activity.log
@@ -1,6 +1,30 @@
 # Activity Log
 
 ## Run Summary
+- 2026-01-25 21:09:07 | run=20260125-204012-65223 | iter=25 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:09:04 | run=20260125-204012-65223 | iter=24 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:09:01 | run=20260125-204012-65223 | iter=23 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:08:58 | run=20260125-204012-65223 | iter=22 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:08:55 | run=20260125-204012-65223 | iter=21 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:52 | run=20260125-204012-65223 | iter=20 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:49 | run=20260125-204012-65223 | iter=19 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:46 | run=20260125-204012-65223 | iter=18 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:42 | run=20260125-204012-65223 | iter=17 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:08:39 | run=20260125-204012-65223 | iter=16 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:08:37 | run=20260125-204012-65223 | iter=15 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:08:34 | run=20260125-204012-65223 | iter=14 | mode=build | story=US-003 | duration=0s | status=error
+- 2026-01-25 21:08:31 | run=20260125-204012-65223 | iter=13 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:28 | run=20260125-204012-65223 | iter=12 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:25 | run=20260125-204012-65223 | iter=11 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:22 | run=20260125-204012-65223 | iter=10 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:19 | run=20260125-204012-65223 | iter=9 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:16 | run=20260125-204012-65223 | iter=8 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:13 | run=20260125-204012-65223 | iter=7 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:10 | run=20260125-204012-65223 | iter=6 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:07 | run=20260125-204012-65223 | iter=5 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:04 | run=20260125-204012-65223 | iter=4 | mode=build | story=US-003 | duration=1s | status=error
+- 2026-01-25 21:08:01 | run=20260125-204012-65223 | iter=3 | mode=build | story=US-003 | duration=2s | status=error
+- 2026-01-25 21:07:57 | run=20260125-204012-65223 | iter=2 | mode=build | story=US-002 | duration=1250s | status=success
 - 2026-01-25 20:47:05 | run=20260125-204012-65223 | iter=1 | mode=build | story=US-001 | duration=413s | status=success
 
 ## Events
@@ -16,3 +40,55 @@
 [2026-01-25 20:59:27] Refactored swipe screen into feature modules (hooks/services/components)
 [2026-01-25 21:02:54] Completed verification commands (test/lint/typecheck/build/web)
 [2026-01-25 21:06:57] Updated progress log for US-002
+[2026-01-25 21:07:57] ITERATION 2 end (duration=1250s)
+[2026-01-25 21:07:59] ITERATION 3 start (mode=build story=US-003)
+[2026-01-25 21:08:01] ITERATION 3 end (duration=2s)
+[2026-01-25 21:08:03] ITERATION 4 start (mode=build story=US-003)
+[2026-01-25 21:08:04] ITERATION 4 end (duration=1s)
+[2026-01-25 21:08:06] ITERATION 5 start (mode=build story=US-003)
+[2026-01-25 21:08:07] ITERATION 5 end (duration=1s)
+[2026-01-25 21:08:09] ITERATION 6 start (mode=build story=US-003)
+[2026-01-25 21:08:10] ITERATION 6 end (duration=1s)
+[2026-01-25 21:08:12] ITERATION 7 start (mode=build story=US-003)
+[2026-01-25 21:08:13] ITERATION 7 end (duration=1s)
+[2026-01-25 21:08:15] ITERATION 8 start (mode=build story=US-003)
+[2026-01-25 21:08:16] ITERATION 8 end (duration=1s)
+[2026-01-25 21:08:18] ITERATION 9 start (mode=build story=US-003)
+[2026-01-25 21:08:19] ITERATION 9 end (duration=1s)
+[2026-01-25 21:08:21] ITERATION 10 start (mode=build story=US-003)
+[2026-01-25 21:08:22] ITERATION 10 end (duration=1s)
+[2026-01-25 21:08:24] ITERATION 11 start (mode=build story=US-003)
+[2026-01-25 21:08:25] ITERATION 11 end (duration=1s)
+[2026-01-25 21:08:27] ITERATION 12 start (mode=build story=US-003)
+[2026-01-25 21:08:28] ITERATION 12 end (duration=1s)
+[2026-01-25 21:08:30] ITERATION 13 start (mode=build story=US-003)
+[2026-01-25 21:08:31] ITERATION 13 end (duration=1s)
+[2026-01-25 21:08:33] ITERATION 14 start (mode=build story=US-003)
+[2026-01-25 21:08:34] ITERATION 14 end (duration=0s)
+[2026-01-25 21:08:36] ITERATION 15 start (mode=build story=US-003)
+[2026-01-25 21:08:36] ITERATION 15 end (duration=0s)
+[2026-01-25 21:08:39] ITERATION 16 start (mode=build story=US-003)
+[2026-01-25 21:08:39] ITERATION 16 end (duration=0s)
+[2026-01-25 21:08:42] ITERATION 17 start (mode=build story=US-003)
+[2026-01-25 21:08:42] ITERATION 17 end (duration=0s)
+[2026-01-25 21:08:45] ITERATION 18 start (mode=build story=US-003)
+[2026-01-25 21:08:46] ITERATION 18 end (duration=1s)
+[2026-01-25 21:08:48] ITERATION 19 start (mode=build story=US-003)
+[2026-01-25 21:08:49] ITERATION 19 end (duration=1s)
+[2026-01-25 21:08:51] ITERATION 20 start (mode=build story=US-003)
+[2026-01-25 21:08:52] ITERATION 20 end (duration=1s)
+[2026-01-25 21:08:54] ITERATION 21 start (mode=build story=US-003)
+[2026-01-25 21:08:55] ITERATION 21 end (duration=1s)
+[2026-01-25 21:08:57] ITERATION 22 start (mode=build story=US-003)
+[2026-01-25 21:08:58] ITERATION 22 end (duration=0s)
+[2026-01-25 21:09:00] ITERATION 23 start (mode=build story=US-003)
+[2026-01-25 21:09:00] ITERATION 23 end (duration=0s)
+[2026-01-25 21:09:03] ITERATION 24 start (mode=build story=US-003)
+[2026-01-25 21:09:04] ITERATION 24 end (duration=0s)
+[2026-01-25 21:09:06] ITERATION 25 start (mode=build story=US-003)
+[2026-01-25 21:09:06] ITERATION 25 end (duration=0s)
+[2026-01-26 14:09:11] ITERATION 1 start (mode=build story=US-003)
+[2026-01-26 14:09:37] Start US-003 refactor oversized shared components
+[2026-01-26 14:14:12] Refactored IntensitySlider into subcomponents and extracted constants/styles
+[2026-01-26 14:17:23] Attempted Expo web for browser verification; expo start --web failed with localStorage.getItem error
+[2026-01-26 14:17:58] Ran quality gates and build (npm test failed: missing script; npm run lint failed with existing issues; npm run typecheck/build passed)
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-10.md b/.ralph/runs/run-20260125-204012-65223-iter-10.md
new file mode 100644
index 0000000..bc3e240
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-10.md
@@ -0,0 +1,34 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 10
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:21
+- Ended: 2026-01-25 21:08:22
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-10.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-11.md b/.ralph/runs/run-20260125-204012-65223-iter-11.md
new file mode 100644
index 0000000..87885db
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-11.md
@@ -0,0 +1,35 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 11
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:24
+- Ended: 2026-01-25 21:08:25
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-11.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-12.md b/.ralph/runs/run-20260125-204012-65223-iter-12.md
new file mode 100644
index 0000000..798bdeb
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-12.md
@@ -0,0 +1,36 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 12
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:27
+- Ended: 2026-01-25 21:08:28
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-12.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-13.md b/.ralph/runs/run-20260125-204012-65223-iter-13.md
new file mode 100644
index 0000000..b6eb91d
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-13.md
@@ -0,0 +1,37 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 13
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:30
+- Ended: 2026-01-25 21:08:31
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-13.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-14.md b/.ralph/runs/run-20260125-204012-65223-iter-14.md
new file mode 100644
index 0000000..47fb1a2
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-14.md
@@ -0,0 +1,38 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 14
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:33
+- Ended: 2026-01-25 21:08:33
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-14.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-15.md b/.ralph/runs/run-20260125-204012-65223-iter-15.md
new file mode 100644
index 0000000..aa272c6
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-15.md
@@ -0,0 +1,39 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 15
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:36
+- Ended: 2026-01-25 21:08:36
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-15.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-16.md b/.ralph/runs/run-20260125-204012-65223-iter-16.md
new file mode 100644
index 0000000..49a240f
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-16.md
@@ -0,0 +1,40 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 16
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:39
+- Ended: 2026-01-25 21:08:39
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-16.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-17.md b/.ralph/runs/run-20260125-204012-65223-iter-17.md
new file mode 100644
index 0000000..1003903
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-17.md
@@ -0,0 +1,41 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 17
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:42
+- Ended: 2026-01-25 21:08:42
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-17.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-18.md b/.ralph/runs/run-20260125-204012-65223-iter-18.md
new file mode 100644
index 0000000..084da3a
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-18.md
@@ -0,0 +1,42 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 18
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:45
+- Ended: 2026-01-25 21:08:46
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-18.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-19.md b/.ralph/runs/run-20260125-204012-65223-iter-19.md
new file mode 100644
index 0000000..52c61ff
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-19.md
@@ -0,0 +1,43 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 19
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:48
+- Ended: 2026-01-25 21:08:49
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-19.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-2.md b/.ralph/runs/run-20260125-204012-65223-iter-2.md
new file mode 100644
index 0000000..b44a3e7
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-2.md
@@ -0,0 +1,81 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 2
+- Mode: build
+- Story: US-002: Refactor screen-level files into layer-based modules
+- Started: 2026-01-25 20:47:07
+- Ended: 2026-01-25 21:07:57
+- Duration: 1250s
+- Status: success
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-2.log
+
+## Git
+- Head (before): 209dc652d2aaf04d31fe6dd187a28cf2da8ffd67
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- a01079a chore(ralph): update progress logs
+- 8d4d9d8 refactor(swipe): split swipe screen modules
+
+### Changed Files (commits)
+- .agents/ralph/PROMPT_build.md
+- .agents/ralph/README.md
+- .agents/ralph/agents.sh
+- .agents/ralph/config.sh
+- .agents/ralph/diagram.svg
+- .agents/ralph/log-activity.sh
+- .agents/ralph/loop.sh
+- .agents/ralph/ralph.webp
+- .agents/ralph/references/CONTEXT_ENGINEERING.md
+- .agents/ralph/references/GUARDRAILS.md
+- .agents/tasks/prd-mobile-refactor.json
+- .codex/skills/commit/SKILL.md
+- .codex/skills/commit/references/commit_examples.md
+- .codex/skills/dev-browser/SKILL.md
+- .codex/skills/dev-browser/bun.lock
+- .codex/skills/dev-browser/package-lock.json
+- .codex/skills/dev-browser/package.json
+- .codex/skills/dev-browser/references/scraping.md
+- .codex/skills/dev-browser/scripts/start-relay.ts
+- .codex/skills/dev-browser/scripts/start-server.ts
+- .codex/skills/dev-browser/server.sh
+- .codex/skills/dev-browser/src/client.ts
+- .codex/skills/dev-browser/src/index.ts
+- .codex/skills/dev-browser/src/relay.ts
+- .codex/skills/dev-browser/src/snapshot/__tests__/snapshot.test.ts
+- .codex/skills/dev-browser/src/snapshot/browser-script.ts
+- .codex/skills/dev-browser/src/snapshot/index.ts
+- .codex/skills/dev-browser/src/snapshot/inject.ts
+- .codex/skills/dev-browser/src/types.ts
+- .codex/skills/dev-browser/tsconfig.json
+- .codex/skills/dev-browser/vitest.config.ts
+- .codex/skills/prd/SKILL.md
+- .ralph/activity.log
+- .ralph/guardrails.md
+- .ralph/progress.md
+- .ralph/runs/run-20260125-204012-65223-iter-1.md
+- apps/mobile/android/app/build.gradle
+- apps/mobile/app.json
+- apps/mobile/app/(app)/swipe.tsx
+- apps/mobile/ios/Sauci.xcodeproj/project.pbxproj
+- apps/mobile/src/features/swipe/SwipeScreen.tsx
+- apps/mobile/src/features/swipe/components/SwipeBlockedState.tsx
+- apps/mobile/src/features/swipe/components/SwipeCardStack.tsx
+- apps/mobile/src/features/swipe/components/SwipeCaughtUpState.tsx
+- apps/mobile/src/features/swipe/components/SwipeDailyLimitState.tsx
+- apps/mobile/src/features/swipe/components/SwipeHeader.tsx
+- apps/mobile/src/features/swipe/components/SwipeInfoStateLayout.tsx
+- apps/mobile/src/features/swipe/components/SwipeLoadingState.tsx
+- apps/mobile/src/features/swipe/components/SwipeNoPacksState.tsx
+- apps/mobile/src/features/swipe/components/SwipeNoPartnerState.tsx
+- apps/mobile/src/features/swipe/components/SwipeQuestionCard.tsx
+- apps/mobile/src/features/swipe/components/SwipeUploadOverlay.tsx
+- apps/mobile/src/features/swipe/hooks/useProgressShimmer.ts
+- apps/mobile/src/features/swipe/hooks/useSwipeScreen.ts
+- apps/mobile/src/features/swipe/services/swipeService.ts
+- apps/mobile/src/features/swipe/types.ts
+
+### Uncommitted Changes
+- .ralph/activity.log
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-20.md b/.ralph/runs/run-20260125-204012-65223-iter-20.md
new file mode 100644
index 0000000..1439890
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-20.md
@@ -0,0 +1,44 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 20
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:51
+- Ended: 2026-01-25 21:08:52
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-20.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-19.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-21.md b/.ralph/runs/run-20260125-204012-65223-iter-21.md
new file mode 100644
index 0000000..16ee33d
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-21.md
@@ -0,0 +1,45 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 21
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:54
+- Ended: 2026-01-25 21:08:55
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-21.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-19.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-20.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-22.md b/.ralph/runs/run-20260125-204012-65223-iter-22.md
new file mode 100644
index 0000000..c0c85aa
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-22.md
@@ -0,0 +1,46 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 22
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:57
+- Ended: 2026-01-25 21:08:57
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-22.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-19.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-20.md
+- .ralph/runs/run-20260125-204012-65223-iter-21.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-23.md b/.ralph/runs/run-20260125-204012-65223-iter-23.md
new file mode 100644
index 0000000..5da5d7e
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-23.md
@@ -0,0 +1,47 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 23
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:09:00
+- Ended: 2026-01-25 21:09:00
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-23.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-19.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-20.md
+- .ralph/runs/run-20260125-204012-65223-iter-21.md
+- .ralph/runs/run-20260125-204012-65223-iter-22.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-24.md b/.ralph/runs/run-20260125-204012-65223-iter-24.md
new file mode 100644
index 0000000..349e113
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-24.md
@@ -0,0 +1,48 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 24
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:09:03
+- Ended: 2026-01-25 21:09:03
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-24.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-19.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-20.md
+- .ralph/runs/run-20260125-204012-65223-iter-21.md
+- .ralph/runs/run-20260125-204012-65223-iter-22.md
+- .ralph/runs/run-20260125-204012-65223-iter-23.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-25.md b/.ralph/runs/run-20260125-204012-65223-iter-25.md
new file mode 100644
index 0000000..839b788
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-25.md
@@ -0,0 +1,49 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 25
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:09:06
+- Ended: 2026-01-25 21:09:06
+- Duration: 0s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-25.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-10.md
+- .ralph/runs/run-20260125-204012-65223-iter-11.md
+- .ralph/runs/run-20260125-204012-65223-iter-12.md
+- .ralph/runs/run-20260125-204012-65223-iter-13.md
+- .ralph/runs/run-20260125-204012-65223-iter-14.md
+- .ralph/runs/run-20260125-204012-65223-iter-15.md
+- .ralph/runs/run-20260125-204012-65223-iter-16.md
+- .ralph/runs/run-20260125-204012-65223-iter-17.md
+- .ralph/runs/run-20260125-204012-65223-iter-18.md
+- .ralph/runs/run-20260125-204012-65223-iter-19.md
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-20.md
+- .ralph/runs/run-20260125-204012-65223-iter-21.md
+- .ralph/runs/run-20260125-204012-65223-iter-22.md
+- .ralph/runs/run-20260125-204012-65223-iter-23.md
+- .ralph/runs/run-20260125-204012-65223-iter-24.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+- .ralph/runs/run-20260125-204012-65223-iter-9.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-3.md b/.ralph/runs/run-20260125-204012-65223-iter-3.md
new file mode 100644
index 0000000..39d7a5d
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-3.md
@@ -0,0 +1,27 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 3
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:07:59
+- Ended: 2026-01-25 21:08:01
+- Duration: 2s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-3.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-4.md b/.ralph/runs/run-20260125-204012-65223-iter-4.md
new file mode 100644
index 0000000..d7be3ab
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-4.md
@@ -0,0 +1,28 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 4
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:03
+- Ended: 2026-01-25 21:08:04
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-4.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-5.md b/.ralph/runs/run-20260125-204012-65223-iter-5.md
new file mode 100644
index 0000000..6491116
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-5.md
@@ -0,0 +1,29 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 5
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:06
+- Ended: 2026-01-25 21:08:07
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-5.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-6.md b/.ralph/runs/run-20260125-204012-65223-iter-6.md
new file mode 100644
index 0000000..e26b80b
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-6.md
@@ -0,0 +1,30 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 6
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:09
+- Ended: 2026-01-25 21:08:10
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-6.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-7.md b/.ralph/runs/run-20260125-204012-65223-iter-7.md
new file mode 100644
index 0000000..2b783a1
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-7.md
@@ -0,0 +1,31 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 7
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:12
+- Ended: 2026-01-25 21:08:13
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-7.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-8.md b/.ralph/runs/run-20260125-204012-65223-iter-8.md
new file mode 100644
index 0000000..6e28257
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-8.md
@@ -0,0 +1,32 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 8
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:15
+- Ended: 2026-01-25 21:08:16
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-8.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+
diff --git a/.ralph/runs/run-20260125-204012-65223-iter-9.md b/.ralph/runs/run-20260125-204012-65223-iter-9.md
new file mode 100644
index 0000000..3489c0c
--- /dev/null
+++ b/.ralph/runs/run-20260125-204012-65223-iter-9.md
@@ -0,0 +1,33 @@
+# Ralph Run Summary
+
+- Run ID: 20260125-204012-65223
+- Iteration: 9
+- Mode: build
+- Story: US-003: Refactor oversized shared components
+- Started: 2026-01-25 21:08:18
+- Ended: 2026-01-25 21:08:19
+- Duration: 1s
+- Status: error
+- Log: /Users/jjbrunton/Projects/Sauci/.ralph/runs/run-20260125-204012-65223-iter-9.log
+
+## Git
+- Head (before): a01079a7c3c6c727a55cd46a72543e86f2378932
+- Head (after): a01079a7c3c6c727a55cd46a72543e86f2378932
+
+### Commits
+- (none)
+
+### Changed Files (commits)
+- (none)
+
+### Uncommitted Changes
+- .agents/tasks/prd-mobile-refactor.json
+- .ralph/activity.log
+- .ralph/runs/run-20260125-204012-65223-iter-2.md
+- .ralph/runs/run-20260125-204012-65223-iter-3.md
+- .ralph/runs/run-20260125-204012-65223-iter-4.md
+- .ralph/runs/run-20260125-204012-65223-iter-5.md
+- .ralph/runs/run-20260125-204012-65223-iter-6.md
+- .ralph/runs/run-20260125-204012-65223-iter-7.md
+- .ralph/runs/run-20260125-204012-65223-iter-8.md
+
diff --git a/apps/mobile/src/components/ui/IntensitySlider.tsx b/apps/mobile/src/components/ui/IntensitySlider.tsx
index ddc7d61..d840b88 100644
--- a/apps/mobile/src/components/ui/IntensitySlider.tsx
+++ b/apps/mobile/src/components/ui/IntensitySlider.tsx
@@ -1,18 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Pressable, Platform, Modal, TouchableOpacity } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { BlurView } from 'expo-blur';
-import { Image } from 'expo-image';
-import Animated, {
-    useAnimatedStyle,
-    useSharedValue,
-    withSpring,
-    FadeIn,
-    FadeOut,
-} from 'react-native-reanimated';
-import { colors, spacing, radius, typography } from '../../theme';
+import { View, Platform } from 'react-native';
+import { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import type { IntensityLevel } from '@/types';
+import { INTENSITY_LEVELS } from './IntensitySlider/constants';
+import { IntensitySliderCurrentCard } from './IntensitySlider/IntensitySliderCurrentCard';
+import { IntensitySliderInfoModal } from './IntensitySlider/IntensitySliderInfoModal';
+import { IntensitySliderLevels } from './IntensitySlider/IntensitySliderLevels';
+import { IntensitySliderTrack } from './IntensitySlider/IntensitySliderTrack';
+import { styles } from './IntensitySlider/styles';
 
 export interface IntensitySliderProps {
     value: IntensityLevel;
@@ -26,22 +21,6 @@ export interface IntensitySliderProps {
     partnerAvatar?: string | null;
 }
 
-const INTENSITY_LEVELS: Array<{ level: IntensityLevel; label: string; emoji: string; description: string }> = [
-    { level: 1, label: 'Gentle', emoji: '💭', description: 'Pure emotional connection & non-sexual bonding' },
-    { level: 2, label: 'Warm', emoji: '💕', description: 'Romantic atmosphere & affectionate touch' },
-    { level: 3, label: 'Playful', emoji: '😏', description: 'Light sexual exploration & sensual discovery' },
-    { level: 4, label: 'Steamy', emoji: '🔥', description: 'Explicit sexual activities & moderate adventure' },
-    { level: 5, label: 'Intense', emoji: '🌶️', description: 'Advanced/BDSM/Extreme exploration' },
-];
-
-const HEAT_COLORS = [
-    '#9b59b6', // Purple - gentle
-    '#e94560', // Rose - warm
-    '#ff6b6b', // Coral - playful
-    '#ff4757', // Red - steamy
-    '#ff3333', // Bright red - intense
-];
-
 const triggerHaptic = async () => {
     if (Platform.OS === 'web') return;
     const Haptics = await import('expo-haptics');
@@ -90,570 +69,37 @@ export function IntensitySlider({
 
     return (
         <View style={[styles.container, disabled && styles.containerDisabled]}>
-            {/* Progress track */}
-            <View style={styles.trackContainer}>
-                <View style={styles.track}>
-                    <Animated.View style={[styles.progressFill, progressStyle]}>
-                        <LinearGradient
-                            colors={['#9b59b6', HEAT_COLORS[value - 1]]}
-                            start={{ x: 0, y: 0 }}
-                            end={{ x: 1, y: 0 }}
-                            style={StyleSheet.absoluteFill}
-                        />
-                    </Animated.View>
-                </View>
-            </View>
-
-            {/* Level indicators */}
-            <View style={styles.levelsRow}>
-                {INTENSITY_LEVELS.map((level) => {
-                    const isSelected = value === level.level;
-                    const isPassed = value > level.level;
-                    const isActive = isSelected || isPassed;
-                    const isPartnerLevel = hasPartner && partnerValue === level.level;
-
-                    return (
-                        <Pressable
-                            key={level.level}
-                            style={styles.levelButton}
-                            onPress={() => handleSelect(level.level)}
-                            disabled={disabled}
-                        >
-                            <View style={styles.indicatorWrapper}>
-                                {/* Partner indicator ring */}
-                                {isPartnerLevel && !isSelected && (
-                                    <View style={styles.partnerRing}>
-                                        {partnerAvatar ? (
-                                            <Image
-                                                source={{ uri: partnerAvatar }}
-                                                style={styles.partnerAvatarSmall}
-                                                cachePolicy="memory-disk"
-                                                contentFit="cover"
-                                                transition={150}
-                                            />
-                                        ) : (
-                                            <Ionicons name="heart" size={8} color={colors.secondary} />
-                                        )}
-                                    </View>
-                                )}
-                                <View style={[
-                                    styles.levelIndicator,
-                                    isActive && styles.levelIndicatorActive,
-                                    isSelected && {
-                                        backgroundColor: HEAT_COLORS[level.level - 1],
-                                        borderColor: HEAT_COLORS[level.level - 1],
-                                    },
-                                    isPartnerLevel && !isSelected && styles.levelIndicatorPartner,
-                                ]}>
-                                    {isSelected ? (
-                                        <Text style={styles.levelEmoji}>{level.emoji}</Text>
-                                    ) : (
-                                        <Ionicons
-                                            name={isActive ? 'flame' : 'flame-outline'}
-                                            size={16}
-                                            color={isActive ? colors.text : colors.textTertiary}
-                                        />
-                                    )}
-                                </View>
-                            </View>
-                            <Text style={[
-                                styles.levelLabel,
-                                isSelected && styles.levelLabelActive,
-                                isPartnerLevel && !isSelected && styles.levelLabelPartner,
-                            ]}>
-                                {level.label}
-                            </Text>
-                        </Pressable>
-                    );
-                })}
-            </View>
-
-            {/* Current level card */}
-            <View style={[styles.currentCard, levelsDiffer && userIsHigher && styles.currentCardWarning]}>
-                <View style={styles.currentHeader}>
-                    <Text style={styles.currentEmoji}>{current.emoji}</Text>
-                    <Text style={styles.currentLabel}>{current.label}</Text>
-                    {hasPartner && !levelsDiffer && (
-                        <Pressable
-                            style={styles.matchBadge}
-                            onPress={() => setShowInfoModal(true)}
-                        >
-                            <Ionicons name="checkmark-circle" size={14} color={colors.success} />
-                            <Text style={styles.matchBadgeText}>Matched</Text>
-                            <Ionicons name="information-circle-outline" size={12} color={colors.success} style={{ marginLeft: 2 }} />
-                        </Pressable>
-                    )}
-                </View>
-                <Text style={styles.currentDescription}>{current.description}</Text>
-
-                {/* Mismatch message */}
-                {levelsDiffer && (
-                    <Pressable
-                        style={styles.mismatchRow}
-                        onPress={() => setShowInfoModal(true)}
-                    >
-                        {partnerAvatar ? (
-                            <Image
-                                source={{ uri: partnerAvatar }}
-                                style={styles.partnerAvatarTiny}
-                                cachePolicy="memory-disk"
-                                contentFit="cover"
-                                transition={150}
-                            />
-                        ) : (
-                            <View style={styles.partnerIconTiny}>
-                                <Ionicons name="person" size={10} color={colors.secondary} />
-                            </View>
-                        )}
-                        <Text style={[
-                            styles.mismatchText,
-                            userIsHigher && styles.mismatchTextWarning,
-                        ]}>
-                            {getMismatchMessage()}
-                        </Text>
-                        <Ionicons
-                            name="chevron-forward"
-                            size={14}
-                            color={userIsHigher ? colors.warning : colors.textSecondary}
-                        />
-                    </Pressable>
-                )}
-            </View>
-
-            {/* Info Modal */}
-            <Modal
+            <IntensitySliderTrack value={value} progressStyle={progressStyle} />
+            <IntensitySliderLevels
+                value={value}
+                disabled={disabled}
+                partnerValue={partnerValue}
+                partnerAvatar={partnerAvatar}
+                onSelect={handleSelect}
+            />
+            <IntensitySliderCurrentCard
+                current={current}
+                levelsDiffer={levelsDiffer}
+                userIsHigher={userIsHigher}
+                hasPartner={hasPartner}
+                partnerAvatar={partnerAvatar}
+                mismatchMessage={getMismatchMessage()}
+                onShowInfo={() => setShowInfoModal(true)}
+            />
+            <IntensitySliderInfoModal
                 visible={showInfoModal}
-                transparent
-                animationType="fade"
-                onRequestClose={() => setShowInfoModal(false)}
-            >
-                <Pressable
-                    style={styles.modalOverlay}
-                    onPress={() => setShowInfoModal(false)}
-                >
-                    <Pressable style={styles.modalContent} onPress={e => e.stopPropagation()}>
-                        {Platform.OS === 'ios' ? (
-                            <BlurView intensity={40} tint="dark" style={StyleSheet.absoluteFill} />
-                        ) : null}
-                        <View style={styles.modalInner}>
-                            {/* Header */}
-                            <View style={styles.modalHeader}>
-                                {levelsDiffer ? (
-                                    <LinearGradient
-                                        colors={userIsHigher ? ['#F39C12', '#E67E22'] : [colors.secondary, colors.primary]}
-                                        style={styles.modalIconGradient}
-                                    >
-                                        <Ionicons
-                                            name={userIsHigher ? "alert-circle" : "information-circle"}
-                                            size={28}
-                                            color={colors.text}
-                                        />
-                                    </LinearGradient>
-                                ) : (
-                                    <LinearGradient
-                                        colors={[colors.success, '#27AE60']}
-                                        style={styles.modalIconGradient}
-                                    >
-                                        <Ionicons name="heart" size={28} color={colors.text} />
-                                    </LinearGradient>
-                                )}
-                                <Text style={styles.modalTitle}>
-                                    {levelsDiffer
-                                        ? (userIsHigher ? "Different Comfort Zones" : "Room to Explore")
-                                        : "You're Perfectly Matched"
-                                    }
-                                </Text>
-                            </View>
-
-                            {/* Comparison visual */}
-                            {hasPartner && (
-                                <View style={styles.comparisonContainer}>
-                                    <View style={styles.comparisonPerson}>
-                                        <View style={[styles.comparisonAvatar, { backgroundColor: HEAT_COLORS[value - 1] }]}>
-                                            <Text style={styles.comparisonEmoji}>{current.emoji}</Text>
-                                        </View>
-                                        <Text style={styles.comparisonName}>You</Text>
-                                        <Text style={styles.comparisonLevel}>{current.label}</Text>
-                                    </View>
-
-                                    <View style={styles.comparisonDivider}>
-                                        <Ionicons
-                                            name={levelsDiffer ? "swap-horizontal" : "heart"}
-                                            size={20}
-                                            color={levelsDiffer ? colors.textTertiary : colors.success}
-                                        />
-                                    </View>
-
-                                    <View style={styles.comparisonPerson}>
-                                        {partnerAvatar ? (
-                                            <Image
-                                                source={{ uri: partnerAvatar }}
-                                                style={styles.comparisonAvatarImage}
-                                                cachePolicy="memory-disk"
-                                                contentFit="cover"
-                                                transition={150}
-                                            />
-                                        ) : (
-                                            <View style={[styles.comparisonAvatar, { backgroundColor: HEAT_COLORS[(partnerValue ?? 1) - 1] }]}>
-                                                <Text style={styles.comparisonEmoji}>{partnerLevel?.emoji}</Text>
-                                            </View>
-                                        )}
-                                        <Text style={styles.comparisonName}>{displayPartnerName}</Text>
-                                        <Text style={styles.comparisonLevel}>{partnerLevel?.label}</Text>
-                                    </View>
-                                </View>
-                            )}
-
-                            {/* Explanation */}
-                            <View style={styles.modalExplanation}>
-                                {!levelsDiffer ? (
-                                    <>
-                                        <Text style={styles.modalText}>
-                                            You and {displayPartnerName} have the same comfort zone setting.
-                                            You'll both see the same question packs and can match on everything!
-                                        </Text>
-                                        <View style={styles.modalTip}>
-                                            <Ionicons name="sparkles" size={16} color={colors.success} />
-                                            <Text style={styles.modalTipText}>
-                                                Perfect alignment means more matches
-                                            </Text>
-                                        </View>
-                                    </>
-                                ) : userIsHigher ? (
-                                    <>
-                                        <Text style={styles.modalText}>
-                                            You're both seeing questions up to {partnerLevel?.label} level because that's {displayPartnerName}'s comfort zone.
-                                        </Text>
-                                        <View style={[styles.modalTip, styles.modalTipWarning]}>
-                                            <Ionicons name="information-circle" size={16} color={colors.warning} />
-                                            <Text style={[styles.modalTipText, styles.modalTipTextWarning]}>
-                                                You won't see {current.label} content until {displayPartnerName} raises their level
-                                            </Text>
-                                        </View>
-                                        <Text style={styles.modalSubtext}>
-                                            The lower setting between you determines what you both see.
-                                        </Text>
-                                    </>
-                                ) : (
-                                    <>
-                                        <Text style={styles.modalText}>
-                                            You're both seeing questions up to {current.label} level based on your comfort zone.
-                                        </Text>
-                                        <View style={styles.modalTip}>
-                                            <Ionicons name="arrow-up-circle" size={16} color={colors.secondary} />
-                                            <Text style={styles.modalTipText}>
-                                                {displayPartnerName} is at {partnerLevel?.label} — raise yours to unlock more content together
-                                            </Text>
-                                        </View>
-                                    </>
-                                )}
-                            </View>
-
-                            {/* Close button */}
-                            <TouchableOpacity
-                                style={styles.modalCloseButton}
-                                onPress={() => setShowInfoModal(false)}
-                            >
-                                <Text style={styles.modalCloseText}>Got it</Text>
-                            </TouchableOpacity>
-                        </View>
-                    </Pressable>
-                </Pressable>
-            </Modal>
+                onClose={() => setShowInfoModal(false)}
+                hasPartner={hasPartner}
+                levelsDiffer={levelsDiffer}
+                userIsHigher={userIsHigher}
+                displayPartnerName={displayPartnerName}
+                current={current}
+                partnerLevel={partnerLevel}
+                partnerValue={partnerValue}
+                partnerAvatar={partnerAvatar}
+            />
         </View>
     );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        gap: spacing.md,
-    },
-    containerDisabled: {
-        opacity: 0.6,
-    },
-    trackContainer: {
-        paddingHorizontal: spacing.lg,
-    },
-    track: {
-        height: 4,
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        borderRadius: 2,
-        overflow: 'hidden',
-    },
-    progressFill: {
-        height: '100%',
-        borderRadius: 2,
-        overflow: 'hidden',
-    },
-    levelsRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        paddingHorizontal: spacing.xs,
-    },
-    levelButton: {
-        alignItems: 'center',
-        flex: 1,
-    },
-    indicatorWrapper: {
-        position: 'relative',
-        marginBottom: spacing.xs,
-    },
-    levelIndicator: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: colors.backgroundLight, // Flat
-        borderWidth: 2,
-        borderColor: colors.border,
-    },
-    levelIndicatorActive: {
-        backgroundColor: colors.background, // Nested
-        borderColor: colors.primary,
-    },
-    levelIndicatorPartner: {
-        borderColor: colors.secondary,
-        borderStyle: 'dashed',
-    },
-    partnerRing: {
-        position: 'absolute',
-        top: -6,
-        right: -6,
-        width: 18,
-        height: 18,
-        borderRadius: 9,
-        backgroundColor: colors.secondary,
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 1,
-        borderWidth: 2,
-        borderColor: colors.backgroundLight,
-    },
-    partnerAvatarSmall: {
-        width: 14,
-        height: 14,
-        borderRadius: 7,
-    },
-    levelEmoji: {
-        fontSize: 16,
-    },
-    levelLabel: {
-        ...typography.caption2,
-        color: colors.textTertiary,
-        textAlign: 'center',
-    },
-    levelLabelActive: {
-        color: colors.text,
-        fontWeight: '600',
-    },
-    levelLabelPartner: {
-        color: colors.secondary,
-    },
-    currentCard: {
-        backgroundColor: colors.backgroundLight, // Flat
-        borderRadius: radius.md,
-        padding: spacing.md,
-        borderWidth: 1,
-        borderColor: colors.border,
-    },
-    currentCardWarning: {
-        borderColor: colors.warning,
-        backgroundColor: colors.background, // Use background for warning state to differentiate
-    },
-    currentHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing.sm,
-        marginBottom: spacing.xs,
-    },
-    currentEmoji: {
-        fontSize: 20,
-    },
-    currentLabel: {
-        ...typography.subhead,
-        fontWeight: '600',
-        color: colors.text,
-    },
-    matchBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        marginLeft: 'auto',
-        backgroundColor: 'rgba(46, 204, 113, 0.15)',
-        paddingHorizontal: spacing.sm,
-        paddingVertical: 2,
-        borderRadius: radius.full,
-    },
-    matchBadgeText: {
-        ...typography.caption2,
-        color: colors.success,
-        fontWeight: '600',
-    },
-    currentDescription: {
-        ...typography.caption1,
-        color: colors.textSecondary,
-        lineHeight: 18,
-    },
-    mismatchRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing.sm,
-        marginTop: spacing.sm,
-        paddingTop: spacing.sm,
-        borderTopWidth: 1,
-        borderTopColor: colors.border,
-    },
-    partnerAvatarTiny: {
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-    },
-    partnerIconTiny: {
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        backgroundColor: 'rgba(155, 89, 182, 0.2)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    mismatchText: {
-        ...typography.caption1,
-        color: colors.textSecondary,
-        flex: 1,
-    },
-    mismatchTextWarning: {
-        color: colors.warning,
-    },
-    modalOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: spacing.lg,
-    },
-    modalContent: {
-        width: '100%',
-        maxWidth: 360,
-        borderRadius: radius.xl,
-        overflow: 'hidden',
-        backgroundColor: colors.backgroundLight, // Flat
-        borderWidth: 1,
-        borderColor: colors.border,
-    },
-    modalInner: {
-        padding: spacing.lg,
-        backgroundColor: colors.backgroundLight,
-    },
-    modalHeader: {
-        alignItems: 'center',
-        marginBottom: spacing.lg,
-    },
-    modalIconGradient: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: spacing.md,
-    },
-    modalTitle: {
-        ...typography.title3,
-        color: colors.text,
-        textAlign: 'center',
-    },
-    comparisonContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: colors.background,
-        borderRadius: radius.lg,
-        padding: spacing.md,
-        marginBottom: spacing.lg,
-    },
-    comparisonPerson: {
-        alignItems: 'center',
-        flex: 1,
-    },
-    comparisonAvatar: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: spacing.xs,
-    },
-    comparisonAvatarImage: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-        marginBottom: spacing.xs,
-    },
-    comparisonEmoji: {
-        fontSize: 24,
-    },
-    comparisonName: {
-        ...typography.caption1,
-        color: colors.text,
-        fontWeight: '600',
-    },
-    comparisonLevel: {
-        ...typography.caption2,
-        color: colors.textSecondary,
-    },
-    comparisonDivider: {
-        width: 40,
-        alignItems: 'center',
-    },
-    modalExplanation: {
-        marginBottom: spacing.lg,
-    },
-    modalText: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        lineHeight: 22,
-        marginBottom: spacing.md,
-    },
-    modalSubtext: {
-        ...typography.caption1,
-        color: colors.textTertiary,
-        textAlign: 'center',
-        marginTop: spacing.sm,
-    },
-    modalTip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(46, 204, 113, 0.1)',
-        borderRadius: radius.md,
-        padding: spacing.sm,
-        gap: spacing.xs,
-    },
-    modalTipWarning: {
-        backgroundColor: 'rgba(243, 156, 18, 0.1)',
-    },
-    modalTipText: {
-        ...typography.caption1,
-        color: colors.success,
-        flex: 1,
-    },
-    modalTipTextWarning: {
-        color: colors.warning,
-    },
-    modalCloseButton: {
-        backgroundColor: colors.background,
-        borderRadius: radius.md,
-        paddingVertical: spacing.md,
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: colors.border,
-    },
-    modalCloseText: {
-        ...typography.subhead,
-        color: colors.text,
-        fontWeight: '600',
-    },
-});
-
 export default IntensitySlider;
diff --git a/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderCurrentCard.tsx b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderCurrentCard.tsx
new file mode 100644
index 0000000..ab15768
--- /dev/null
+++ b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderCurrentCard.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { colors } from '../../../theme';
+import type { IntensityLevelConfig } from './constants';
+import { styles } from './styles';
+
+interface IntensitySliderCurrentCardProps {
+    current: IntensityLevelConfig;
+    levelsDiffer: boolean;
+    userIsHigher: boolean;
+    hasPartner: boolean;
+    partnerAvatar?: string | null;
+    mismatchMessage: string | null;
+    onShowInfo: () => void;
+}
+
+export function IntensitySliderCurrentCard({
+    current,
+    levelsDiffer,
+    userIsHigher,
+    hasPartner,
+    partnerAvatar,
+    mismatchMessage,
+    onShowInfo,
+}: IntensitySliderCurrentCardProps) {
+    return (
+        <View style={[styles.currentCard, levelsDiffer && userIsHigher && styles.currentCardWarning]}>
+            <View style={styles.currentHeader}>
+                <Text style={styles.currentEmoji}>{current.emoji}</Text>
+                <Text style={styles.currentLabel}>{current.label}</Text>
+                {hasPartner && !levelsDiffer && (
+                    <Pressable
+                        style={styles.matchBadge}
+                        onPress={onShowInfo}
+                    >
+                        <Ionicons name="checkmark-circle" size={14} color={colors.success} />
+                        <Text style={styles.matchBadgeText}>Matched</Text>
+                        <Ionicons name="information-circle-outline" size={12} color={colors.success} style={{ marginLeft: 2 }} />
+                    </Pressable>
+                )}
+            </View>
+            <Text style={styles.currentDescription}>{current.description}</Text>
+
+            {levelsDiffer && mismatchMessage && (
+                <Pressable
+                    style={styles.mismatchRow}
+                    onPress={onShowInfo}
+                >
+                    {partnerAvatar ? (
+                        <Image
+                            source={{ uri: partnerAvatar }}
+                            style={styles.partnerAvatarTiny}
+                            cachePolicy="memory-disk"
+                            contentFit="cover"
+                            transition={150}
+                        />
+                    ) : (
+                        <View style={styles.partnerIconTiny}>
+                            <Ionicons name="person" size={10} color={colors.secondary} />
+                        </View>
+                    )}
+                    <Text style={[
+                        styles.mismatchText,
+                        userIsHigher && styles.mismatchTextWarning,
+                    ]}>
+                        {mismatchMessage}
+                    </Text>
+                    <Ionicons
+                        name="chevron-forward"
+                        size={14}
+                        color={userIsHigher ? colors.warning : colors.textSecondary}
+                    />
+                </Pressable>
+            )}
+        </View>
+    );
+}
diff --git a/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderInfoModal.tsx b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderInfoModal.tsx
new file mode 100644
index 0000000..79e1668
--- /dev/null
+++ b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderInfoModal.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import {
+    Modal,
+    Pressable,
+    View,
+    Text,
+    TouchableOpacity,
+    Platform,
+    StyleSheet,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
+import type { IntensityLevel } from '@/types';
+import { colors } from '../../../theme';
+import type { IntensityLevelConfig } from './constants';
+import { HEAT_COLORS } from './constants';
+import { styles } from './styles';
+
+interface IntensitySliderInfoModalProps {
+    visible: boolean;
+    onClose: () => void;
+    hasPartner: boolean;
+    levelsDiffer: boolean;
+    userIsHigher: boolean;
+    displayPartnerName: string;
+    current: IntensityLevelConfig;
+    partnerLevel: IntensityLevelConfig | null;
+    partnerValue?: IntensityLevel | null;
+    partnerAvatar?: string | null;
+}
+
+export function IntensitySliderInfoModal({
+    visible,
+    onClose,
+    hasPartner,
+    levelsDiffer,
+    userIsHigher,
+    displayPartnerName,
+    current,
+    partnerLevel,
+    partnerValue,
+    partnerAvatar,
+}: IntensitySliderInfoModalProps) {
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onClose}
+        >
+            <Pressable
+                style={styles.modalOverlay}
+                onPress={onClose}
+            >
+                <Pressable style={styles.modalContent} onPress={event => event.stopPropagation()}>
+                    {Platform.OS === 'ios' ? (
+                        <BlurView intensity={40} tint="dark" style={StyleSheet.absoluteFill} />
+                    ) : null}
+                    <View style={styles.modalInner}>
+                        <View style={styles.modalHeader}>
+                            {levelsDiffer ? (
+                                <LinearGradient
+                                    colors={userIsHigher ? ['#F39C12', '#E67E22'] : [colors.secondary, colors.primary]}
+                                    style={styles.modalIconGradient}
+                                >
+                                    <Ionicons
+                                        name={userIsHigher ? "alert-circle" : "information-circle"}
+                                        size={28}
+                                        color={colors.text}
+                                    />
+                                </LinearGradient>
+                            ) : (
+                                <LinearGradient
+                                    colors={[colors.success, '#27AE60']}
+                                    style={styles.modalIconGradient}
+                                >
+                                    <Ionicons name="heart" size={28} color={colors.text} />
+                                </LinearGradient>
+                            )}
+                            <Text style={styles.modalTitle}>
+                                {levelsDiffer
+                                    ? (userIsHigher ? "Different Comfort Zones" : "Room to Explore")
+                                    : "You're Perfectly Matched"
+                                }
+                            </Text>
+                        </View>
+
+                        {hasPartner && (
+                            <View style={styles.comparisonContainer}>
+                                <View style={styles.comparisonPerson}>
+                                    <View style={[styles.comparisonAvatar, { backgroundColor: HEAT_COLORS[current.level - 1] }]}>
+                                        <Text style={styles.comparisonEmoji}>{current.emoji}</Text>
+                                    </View>
+                                    <Text style={styles.comparisonName}>You</Text>
+                                    <Text style={styles.comparisonLevel}>{current.label}</Text>
+                                </View>
+
+                                <View style={styles.comparisonDivider}>
+                                    <Ionicons
+                                        name={levelsDiffer ? "swap-horizontal" : "heart"}
+                                        size={20}
+                                        color={levelsDiffer ? colors.textTertiary : colors.success}
+                                    />
+                                </View>
+
+                                <View style={styles.comparisonPerson}>
+                                    {partnerAvatar ? (
+                                        <Image
+                                            source={{ uri: partnerAvatar }}
+                                            style={styles.comparisonAvatarImage}
+                                            cachePolicy="memory-disk"
+                                            contentFit="cover"
+                                            transition={150}
+                                        />
+                                    ) : (
+                                        <View style={[styles.comparisonAvatar, { backgroundColor: HEAT_COLORS[(partnerValue ?? 1) - 1] }]}>
+                                            <Text style={styles.comparisonEmoji}>{partnerLevel?.emoji}</Text>
+                                        </View>
+                                    )}
+                                    <Text style={styles.comparisonName}>{displayPartnerName}</Text>
+                                    <Text style={styles.comparisonLevel}>{partnerLevel?.label}</Text>
+                                </View>
+                            </View>
+                        )}
+
+                        <View style={styles.modalExplanation}>
+                            {!levelsDiffer ? (
+                                <>
+                                    <Text style={styles.modalText}>
+                                        You and {displayPartnerName} have the same comfort zone setting.
+                                        You'll both see the same question packs and can match on everything!
+                                    </Text>
+                                    <View style={styles.modalTip}>
+                                        <Ionicons name="sparkles" size={16} color={colors.success} />
+                                        <Text style={styles.modalTipText}>
+                                            Perfect alignment means more matches
+                                        </Text>
+                                    </View>
+                                </>
+                            ) : userIsHigher ? (
+                                <>
+                                    <Text style={styles.modalText}>
+                                        You're both seeing questions up to {partnerLevel?.label} level because that's {displayPartnerName}'s comfort zone.
+                                    </Text>
+                                    <View style={[styles.modalTip, styles.modalTipWarning]}>
+                                        <Ionicons name="information-circle" size={16} color={colors.warning} />
+                                        <Text style={[styles.modalTipText, styles.modalTipTextWarning]}>
+                                            You won't see {current.label} content until {displayPartnerName} raises their level
+                                        </Text>
+                                    </View>
+                                    <Text style={styles.modalSubtext}>
+                                        The lower setting between you determines what you both see.
+                                    </Text>
+                                </>
+                            ) : (
+                                <>
+                                    <Text style={styles.modalText}>
+                                        You're both seeing questions up to {current.label} level based on your comfort zone.
+                                    </Text>
+                                    <View style={styles.modalTip}>
+                                        <Ionicons name="arrow-up-circle" size={16} color={colors.secondary} />
+                                        <Text style={styles.modalTipText}>
+                                            {displayPartnerName} is at {partnerLevel?.label} — raise yours to unlock more content together
+                                        </Text>
+                                    </View>
+                                </>
+                            )}
+                        </View>
+
+                        <TouchableOpacity
+                            style={styles.modalCloseButton}
+                            onPress={onClose}
+                        >
+                            <Text style={styles.modalCloseText}>Got it</Text>
+                        </TouchableOpacity>
+                    </View>
+                </Pressable>
+            </Pressable>
+        </Modal>
+    );
+}
diff --git a/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderLevels.tsx b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderLevels.tsx
new file mode 100644
index 0000000..a926a76
--- /dev/null
+++ b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderLevels.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import type { IntensityLevel } from '@/types';
+import { colors } from '../../../theme';
+import { HEAT_COLORS, INTENSITY_LEVELS } from './constants';
+import { styles } from './styles';
+
+interface IntensitySliderLevelsProps {
+    value: IntensityLevel;
+    disabled: boolean;
+    partnerValue?: IntensityLevel | null;
+    partnerAvatar?: string | null;
+    onSelect: (value: IntensityLevel) => void;
+}
+
+export function IntensitySliderLevels({
+    value,
+    disabled,
+    partnerValue,
+    partnerAvatar,
+    onSelect,
+}: IntensitySliderLevelsProps) {
+    const hasPartner = partnerValue != null;
+
+    return (
+        <View style={styles.levelsRow}>
+            {INTENSITY_LEVELS.map((level) => {
+                const isSelected = value === level.level;
+                const isPassed = value > level.level;
+                const isActive = isSelected || isPassed;
+                const isPartnerLevel = hasPartner && partnerValue === level.level;
+
+                return (
+                    <Pressable
+                        key={level.level}
+                        style={styles.levelButton}
+                        onPress={() => onSelect(level.level)}
+                        disabled={disabled}
+                    >
+                        <View style={styles.indicatorWrapper}>
+                            {isPartnerLevel && !isSelected && (
+                                <View style={styles.partnerRing}>
+                                    {partnerAvatar ? (
+                                        <Image
+                                            source={{ uri: partnerAvatar }}
+                                            style={styles.partnerAvatarSmall}
+                                            cachePolicy="memory-disk"
+                                            contentFit="cover"
+                                            transition={150}
+                                        />
+                                    ) : (
+                                        <Ionicons name="heart" size={8} color={colors.secondary} />
+                                    )}
+                                </View>
+                            )}
+                            <View style={[
+                                styles.levelIndicator,
+                                isActive && styles.levelIndicatorActive,
+                                isSelected && {
+                                    backgroundColor: HEAT_COLORS[level.level - 1],
+                                    borderColor: HEAT_COLORS[level.level - 1],
+                                },
+                                isPartnerLevel && !isSelected && styles.levelIndicatorPartner,
+                            ]}>
+                                {isSelected ? (
+                                    <Text style={styles.levelEmoji}>{level.emoji}</Text>
+                                ) : (
+                                    <Ionicons
+                                        name={isActive ? 'flame' : 'flame-outline'}
+                                        size={16}
+                                        color={isActive ? colors.text : colors.textTertiary}
+                                    />
+                                )}
+                            </View>
+                        </View>
+                        <Text style={[
+                            styles.levelLabel,
+                            isSelected && styles.levelLabelActive,
+                            isPartnerLevel && !isSelected && styles.levelLabelPartner,
+                        ]}>
+                            {level.label}
+                        </Text>
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+}
diff --git a/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderTrack.tsx b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderTrack.tsx
new file mode 100644
index 0000000..46d10c2
--- /dev/null
+++ b/apps/mobile/src/components/ui/IntensitySlider/IntensitySliderTrack.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import Animated, { type AnimatedStyleProp } from 'react-native-reanimated';
+import type { ViewStyle } from 'react-native';
+import type { IntensityLevel } from '@/types';
+import { HEAT_COLORS } from './constants';
+import { styles } from './styles';
+
+interface IntensitySliderTrackProps {
+    value: IntensityLevel;
+    progressStyle: AnimatedStyleProp<ViewStyle>;
+}
+
+export function IntensitySliderTrack({ value, progressStyle }: IntensitySliderTrackProps) {
+    return (
+        <View style={styles.trackContainer}>
+            <View style={styles.track}>
+                <Animated.View style={[styles.progressFill, progressStyle]}>
+                    <LinearGradient
+                        colors={['#9b59b6', HEAT_COLORS[value - 1]]}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                        style={StyleSheet.absoluteFill}
+                    />
+                </Animated.View>
+            </View>
+        </View>
+    );
+}
diff --git a/apps/mobile/src/components/ui/IntensitySlider/constants.ts b/apps/mobile/src/components/ui/IntensitySlider/constants.ts
new file mode 100644
index 0000000..e6d2b0b
--- /dev/null
+++ b/apps/mobile/src/components/ui/IntensitySlider/constants.ts
@@ -0,0 +1,24 @@
+import type { IntensityLevel } from '@/types';
+
+export interface IntensityLevelConfig {
+    level: IntensityLevel;
+    label: string;
+    emoji: string;
+    description: string;
+}
+
+export const INTENSITY_LEVELS: IntensityLevelConfig[] = [
+    { level: 1, label: 'Gentle', emoji: '💭', description: 'Pure emotional connection & non-sexual bonding' },
+    { level: 2, label: 'Warm', emoji: '💕', description: 'Romantic atmosphere & affectionate touch' },
+    { level: 3, label: 'Playful', emoji: '😏', description: 'Light sexual exploration & sensual discovery' },
+    { level: 4, label: 'Steamy', emoji: '🔥', description: 'Explicit sexual activities & moderate adventure' },
+    { level: 5, label: 'Intense', emoji: '🌶️', description: 'Advanced/BDSM/Extreme exploration' },
+];
+
+export const HEAT_COLORS = [
+    '#9b59b6', // Purple - gentle
+    '#e94560', // Rose - warm
+    '#ff6b6b', // Coral - playful
+    '#ff4757', // Red - steamy
+    '#ff3333', // Bright red - intense
+];
diff --git a/apps/mobile/src/components/ui/IntensitySlider/styles.ts b/apps/mobile/src/components/ui/IntensitySlider/styles.ts
new file mode 100644
index 0000000..458cc26
--- /dev/null
+++ b/apps/mobile/src/components/ui/IntensitySlider/styles.ts
@@ -0,0 +1,294 @@
+import { StyleSheet } from 'react-native';
+import { colors, spacing, radius, typography } from '../../../theme';
+
+export const styles = StyleSheet.create({
+    container: {
+        gap: spacing.md,
+    },
+    containerDisabled: {
+        opacity: 0.6,
+    },
+    trackContainer: {
+        paddingHorizontal: spacing.lg,
+    },
+    track: {
+        height: 4,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    levelsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: spacing.xs,
+    },
+    levelButton: {
+        alignItems: 'center',
+        flex: 1,
+    },
+    indicatorWrapper: {
+        position: 'relative',
+        marginBottom: spacing.xs,
+    },
+    levelIndicator: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.backgroundLight, // Flat
+        borderWidth: 2,
+        borderColor: colors.border,
+    },
+    levelIndicatorActive: {
+        backgroundColor: colors.background, // Nested
+        borderColor: colors.primary,
+    },
+    levelIndicatorPartner: {
+        borderColor: colors.secondary,
+        borderStyle: 'dashed',
+    },
+    partnerRing: {
+        position: 'absolute',
+        top: -6,
+        right: -6,
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        backgroundColor: colors.secondary,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1,
+        borderWidth: 2,
+        borderColor: colors.backgroundLight,
+    },
+    partnerAvatarSmall: {
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+    },
+    levelEmoji: {
+        fontSize: 16,
+    },
+    levelLabel: {
+        ...typography.caption2,
+        color: colors.textTertiary,
+        textAlign: 'center',
+    },
+    levelLabelActive: {
+        color: colors.text,
+        fontWeight: '600',
+    },
+    levelLabelPartner: {
+        color: colors.secondary,
+    },
+    currentCard: {
+        backgroundColor: colors.backgroundLight, // Flat
+        borderRadius: radius.md,
+        padding: spacing.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    currentCardWarning: {
+        borderColor: colors.warning,
+        backgroundColor: colors.background, // Use background for warning state to differentiate
+    },
+    currentHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        marginBottom: spacing.xs,
+    },
+    currentEmoji: {
+        fontSize: 20,
+    },
+    currentLabel: {
+        ...typography.subhead,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    matchBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        marginLeft: 'auto',
+        backgroundColor: 'rgba(46, 204, 113, 0.15)',
+        paddingHorizontal: spacing.sm,
+        paddingVertical: 2,
+        borderRadius: radius.full,
+    },
+    matchBadgeText: {
+        ...typography.caption2,
+        color: colors.success,
+        fontWeight: '600',
+    },
+    currentDescription: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        lineHeight: 18,
+    },
+    mismatchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        marginTop: spacing.sm,
+        paddingTop: spacing.sm,
+        borderTopWidth: 1,
+        borderTopColor: colors.border,
+    },
+    partnerAvatarTiny: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+    },
+    partnerIconTiny: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        backgroundColor: 'rgba(155, 89, 182, 0.2)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    mismatchText: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        flex: 1,
+    },
+    mismatchTextWarning: {
+        color: colors.warning,
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: spacing.lg,
+    },
+    modalContent: {
+        width: '100%',
+        maxWidth: 360,
+        borderRadius: radius.xl,
+        overflow: 'hidden',
+        backgroundColor: colors.backgroundLight, // Flat
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    modalInner: {
+        padding: spacing.lg,
+        backgroundColor: colors.backgroundLight,
+    },
+    modalHeader: {
+        alignItems: 'center',
+        marginBottom: spacing.lg,
+    },
+    modalIconGradient: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: spacing.md,
+    },
+    modalTitle: {
+        ...typography.title3,
+        color: colors.text,
+        textAlign: 'center',
+    },
+    comparisonContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.background,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        marginBottom: spacing.lg,
+    },
+    comparisonPerson: {
+        alignItems: 'center',
+        flex: 1,
+    },
+    comparisonAvatar: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: spacing.xs,
+    },
+    comparisonAvatarImage: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        marginBottom: spacing.xs,
+    },
+    comparisonEmoji: {
+        fontSize: 24,
+    },
+    comparisonName: {
+        ...typography.caption1,
+        color: colors.text,
+        fontWeight: '600',
+    },
+    comparisonLevel: {
+        ...typography.caption2,
+        color: colors.textSecondary,
+    },
+    comparisonDivider: {
+        width: 40,
+        alignItems: 'center',
+    },
+    modalExplanation: {
+        marginBottom: spacing.lg,
+    },
+    modalText: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: spacing.md,
+    },
+    modalSubtext: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        textAlign: 'center',
+        marginTop: spacing.sm,
+    },
+    modalTip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(46, 204, 113, 0.1)',
+        borderRadius: radius.md,
+        padding: spacing.sm,
+        gap: spacing.xs,
+    },
+    modalTipWarning: {
+        backgroundColor: 'rgba(243, 156, 18, 0.1)',
+    },
+    modalTipText: {
+        ...typography.caption1,
+        color: colors.success,
+        flex: 1,
+    },
+    modalTipTextWarning: {
+        color: colors.warning,
+    },
+    modalCloseButton: {
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        paddingVertical: spacing.md,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    modalCloseText: {
+        ...typography.subhead,
+        color: colors.text,
+        fontWeight: '600',
+    },
+});