From 48bfac490f777ac6cd49924853f3d53084bb95d5 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 9 Jul 2026 14:18:05 +0000
Subject: [PATCH] style(scenarios): make the fabric-first toggle distinctive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The plain bordered checkbox blended into the Measures step. Give it the
emerald "Fabric first" identity used by the list/detail indicators — a
layers icon, an "Optimisation order" eyebrow, and a state-reactive tint
so the same green signals fabric-first across create, list and detail.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../scenarios/new/NewScenarioJourney.tsx      | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/scenarios/new/NewScenarioJourney.tsx b/src/app/portfolio/[slug]/(portfolio)/scenarios/new/NewScenarioJourney.tsx
index 0603da40..ac9a9d06 100644
--- a/src/app/portfolio/[slug]/(portfolio)/scenarios/new/NewScenarioJourney.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/scenarios/new/NewScenarioJourney.tsx
@@ -460,20 +460,50 @@ export function NewScenarioJourney({
                   </div>
                 </div>
               ))}
-              <label className="mt-2 flex cursor-pointer items-start gap-3 rounded-xl border border-gray-200 bg-white p-4">
-                <input
-                  type="checkbox"
-                  checked={fabricFirst}
-                  onChange={(e) => setFabricFirst(e.target.checked)}
-                  className="mt-0.5 h-4 w-4 flex-none accent-brandmidblue"
-                />
-                <span className="flex flex-col">
+              <label
+                className={`mt-2 flex cursor-pointer items-start gap-3.5 rounded-xl border p-4 transition ${
+                  fabricFirst
+                    ? "border-emerald-300 bg-emerald-50/70 shadow-[0_0_0_3px_rgba(16,185,129,.12)]"
+                    : "border-gray-200 bg-white hover:border-emerald-200 hover:bg-emerald-50/30"
+                }`}
+              >
+                <span
+                  aria-hidden
+                  className={`mt-0.5 inline-flex h-9 w-9 flex-none items-center justify-center rounded-lg transition ${
+                    fabricFirst ? "bg-emerald-500 text-white" : "bg-emerald-50 text-emerald-500"
+                  }`}
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M12 2 2 7l10 5 10-5-10-5Z" />
+                    <path d="m2 17 10 5 10-5" />
+                    <path d="m2 12 10 5 10-5" />
+                  </svg>
+                </span>
+                <span className="flex min-w-0 flex-col">
+                  <span className="font-manrope text-[10px] font-extrabold uppercase tracking-[.12em] text-emerald-600">
+                    Optimisation order
+                  </span>
                   <span className="text-sm font-semibold text-brandblue">Fabric first</span>
-                  <span className="text-[13px] text-gray-500">
+                  <span className="mt-0.5 text-[13px] text-gray-500">
                     Insulation, glazing and ventilation are applied first; heating and
                     renewables are only considered if the target isn&apos;t met.
                   </span>
                 </span>
+                <input
+                  type="checkbox"
+                  checked={fabricFirst}
+                  onChange={(e) => setFabricFirst(e.target.checked)}
+                  className="mt-1 h-4 w-4 flex-none accent-emerald-600"
+                />
               </label>
               {errors.excl && <div className="text-[13px] text-red-800">{errors.excl}</div>}
             </div>