From 762605f04b2043af1da45b30cae0426aa4e33dbe Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Mon, 11 May 2026 13:37:28 -0700
Subject: [PATCH] Compact the journey rail to reclaim form width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gutter shrinks from md:pl-20 (80px) to md:pl-12 (48px) — a 32px (40%) gain
back to the form column. Markers, pulse halo, and 'Now' pill scale down to
match so the rail still reads at a glance:

- Marker container: -left-14 w-12 -> -left-9 w-7
- Past/future markers: h-6 -> h-5
- Current marker: h-7 ring-4 -> h-6 ring-2; rank label 11px -> 10px
- 'Now' pill: 9px -> 8px; tracking and offset re-balanced for the shorter
  drop from the smaller marker bottom
- Rail-pulse keyframe shadow radius: 8px -> 6px to suit the smaller disc
---
 app/globals.css               |  2 +-
 components/EngagementForm.tsx | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a5833cd..7dc2a24 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -151,7 +151,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     box-shadow: 0 0 0 0 oklch(72% 0.14 135 / 0.55);
   }
   60% {
-    box-shadow: 0 0 0 8px oklch(72% 0.14 135 / 0);
+    box-shadow: 0 0 0 6px oklch(72% 0.14 135 / 0);
   }
 }
 
diff --git a/components/EngagementForm.tsx b/components/EngagementForm.tsx
index a84a430..cc6e595 100644
--- a/components/EngagementForm.tsx
+++ b/components/EngagementForm.tsx
@@ -299,7 +299,7 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
         }} />
       )}
 
-      <ol className="relative space-y-5 md:pl-20">
+      <ol className="relative space-y-5 md:pl-12">
         {sectionsToRender.map((entry, i) => {
           const { section, pathwayState, locked } = entry;
           const nextState =
@@ -585,12 +585,12 @@ function RailMarker({
   return (
     <div
       aria-hidden
-      className="pointer-events-none hidden md:block absolute -left-14 top-0 bottom-0 w-12"
+      className="pointer-events-none hidden md:block absolute -left-9 top-0 bottom-0 w-7"
     >
       {nextState && (
         <span
           className={
-            "absolute left-1/2 -translate-x-1/2 top-12 -bottom-11 " +
+            "absolute left-1/2 -translate-x-1/2 top-11 -bottom-11 " +
             (nextState === "future"
               ? "w-0 border-l border-dashed border-rule"
               : "w-px bg-leaf-500/70")
@@ -599,7 +599,7 @@ function RailMarker({
       )}
       <MarkerCircle rank={rank} state={state} />
       {state === "current" && (
-        <span className="absolute left-1/2 -translate-x-1/2 top-[60px] whitespace-nowrap rounded-full bg-leaf-700 px-1.5 py-[1px] text-[9px] font-medium uppercase tracking-[0.12em] text-paper shadow-sm">
+        <span className="absolute left-1/2 -translate-x-1/2 top-[52px] whitespace-nowrap rounded-full bg-leaf-700 px-1.5 py-[1px] text-[8px] font-medium uppercase tracking-[0.1em] text-paper shadow-sm">
           Now
         </span>
       )}
@@ -610,8 +610,8 @@ function RailMarker({
 function MarkerCircle({ rank, state }: { rank: number; state: PathwayState }) {
   if (state === "past") {
     return (
-      <span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-6 w-6 items-center justify-center rounded-full bg-leaf-700 text-paper shadow-sm">
-        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3">
+      <span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-5 w-5 items-center justify-center rounded-full bg-leaf-700 text-paper shadow-sm">
+        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" className="h-2.5 w-2.5">
           <path d="M3 6.5l2 2 4-5" />
         </svg>
         <span className="sr-only">Stage {rank} (completed)</span>
@@ -620,15 +620,15 @@ function MarkerCircle({ rank, state }: { rank: number; state: PathwayState }) {
   }
   if (state === "current") {
     return (
-      <span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-7 w-7 items-center justify-center rounded-full bg-leaf-700 text-paper text-[11px] font-semibold shadow-md ring-4 ring-leaf-100 motion-safe:animate-[rail-pulse_2.6s_ease-in-out_infinite]">
+      <span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-6 w-6 items-center justify-center rounded-full bg-leaf-700 text-paper text-[10px] font-semibold shadow-md ring-2 ring-leaf-100 motion-safe:animate-[rail-pulse_2.6s_ease-in-out_infinite]">
         {rank}
         <span className="sr-only">Stage {rank} (current)</span>
       </span>
     );
   }
   return (
-    <span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-6 w-6 items-center justify-center rounded-full border border-dashed border-rule bg-paper text-ink-mute">
-      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3">
+    <span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-rule bg-paper text-ink-mute">
+      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" className="h-2.5 w-2.5">
         <rect x="2.5" y="5.5" width="7" height="5" rx="0.75" />
         <path d="M4 5.5V4a2 2 0 0 1 4 0v1.5" />
       </svg>