From 9e8cbfe44490343f8bd38a0d22745c92e8b66fda Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Sat, 31 Oct 2026 10:02:08 -0700
Subject: [PATCH 1/2] fix(web): emphasise only the chosen approach once one is
 chosen

The recommended approach card kept its emphasis after the person chose
another, so it still looked selected. Emphasis now follows the choice;
the recommended card keeps its badge.

Closes CL-11869
---
 apps/web/src/pages/workspace/approaches-comparison.tsx | 4 +++-
 apps/web/src/styles.css                                | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/workspace/approaches-comparison.tsx b/apps/web/src/pages/workspace/approaches-comparison.tsx
index 51ddc6fa..a7030b0e 100644
--- a/apps/web/src/pages/workspace/approaches-comparison.tsx
+++ b/apps/web/src/pages/workspace/approaches-comparison.tsx
@@ -67,7 +67,9 @@ export function ApproachesComparison({
             <Card
               key={approach.id}
               className="approach-card"
-              {...(recommended ? { "data-recommended": "" } : {})}
+              {...(picked || (recommended && chosen === undefined)
+                ? { "data-emphasis": "" }
+                : {})}
             >
               <CardHeader>
                 <div className="approach-badges">
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 1c261073..e6c6b75b 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1776,7 +1776,7 @@ button[aria-disabled="true"] {
   background: var(--wb-card);
 }
 
-.approaches .approach-card[data-recommended] {
+.approaches .approach-card[data-emphasis] {
   border-color: var(--wb-border-strong);
   background: color-mix(in srgb, var(--wb-muted) 45%, var(--wb-card));
 }

From f334d80c3dbf9eec4ad280ca43e161926466aeaa Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Sat, 31 Oct 2026 10:03:29 -0700
Subject: [PATCH 2/2] refactor(web): mark approach cards by state and emphasise
 in CSS

Cards carry data-recommended and data-chosen; the clicked card counts as
chosen while the choice is sending.
---
 apps/web/src/pages/workspace/approaches-comparison.tsx | 5 +++--
 apps/web/src/styles.css                                | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/workspace/approaches-comparison.tsx b/apps/web/src/pages/workspace/approaches-comparison.tsx
index a7030b0e..567d4f86 100644
--- a/apps/web/src/pages/workspace/approaches-comparison.tsx
+++ b/apps/web/src/pages/workspace/approaches-comparison.tsx
@@ -67,8 +67,9 @@ export function ApproachesComparison({
             <Card
               key={approach.id}
               className="approach-card"
-              {...(picked || (recommended && chosen === undefined)
-                ? { "data-emphasis": "" }
+              {...(recommended ? { "data-recommended": "" } : {})}
+              {...(picked || choosing === approach.id
+                ? { "data-chosen": "" }
                 : {})}
             >
               <CardHeader>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index e6c6b75b..31f1b9af 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1776,7 +1776,8 @@ button[aria-disabled="true"] {
   background: var(--wb-card);
 }
 
-.approaches .approach-card[data-emphasis] {
+.approaches .approach-card[data-chosen],
+.approaches-grid:not(:has([data-chosen])) .approach-card[data-recommended] {
   border-color: var(--wb-border-strong);
   background: color-mix(in srgb, var(--wb-muted) 45%, var(--wb-card));
 }