From 3ad1aa1b74be0831114226ab2e9f984ddbb2e3ff Mon Sep 17 00:00:00 2001
From: nym21 <expat-epochs0i@icloud.com>
Date: Fri, 7 Aug 2026 13:21:13 +0200
Subject: [PATCH] trail: improvements

---
 experiments/trail/index.html | 44 ++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/experiments/trail/index.html b/experiments/trail/index.html
index 8e5cc9ed6..6a9170183 100644
--- a/experiments/trail/index.html
+++ b/experiments/trail/index.html
@@ -190,7 +190,7 @@
         align-items: flex-end;
         justify-content: space-between;
         gap: 24px;
-        pointer-events: auto;
+        pointer-events: none;
       }
 
       .selector-group {
@@ -199,6 +199,7 @@
         grid-template-columns: max-content max-content;
         align-items: center;
         gap: 8px 7px;
+        pointer-events: auto;
       }
 
       .selector-group-right {
@@ -1912,7 +1913,7 @@
 
           context.save();
           context.strokeStyle = "rgba(203, 212, 202, 0.22)";
-          context.fillStyle = "rgba(214, 218, 207, 0.52)";
+          context.fillStyle = "rgba(231, 232, 219, 0.78)";
           context.lineWidth = 0.7;
           context.font = `500 ${mobile ? 11 : 12}px ${MONO_FONT}`;
           context.textBaseline = "middle";
@@ -3524,16 +3525,27 @@
           }
         }
 
-        function drawRidge(layout, dateIndex, row) {
-          context.save();
-          context.globalAlpha = 0.32;
-          context.strokeStyle = "#eee4cb";
-          context.lineWidth = 0.8;
-          context.lineJoin = "round";
-          context.beginPath();
+        function drawSelectionOutline(layout, dateIndex, row) {
+          const leftBase = projectAtPrice(
+            layout,
+            dateIndex,
+            0,
+            0,
+          );
+          const rightBase = projectAtPrice(
+            layout,
+            dateIndex,
+            1,
+            0,
+          );
           const dateOffset = dateIndex - state.viewIndex;
           const offsetX = dateOffset * layout.timeXStep;
           const offsetY = dateOffset * layout.timeYStep;
+
+          context.save();
+          context.lineCap = "round";
+          context.lineJoin = "round";
+          context.beginPath();
           traceProfilePath(
             context,
             layout,
@@ -3541,6 +3553,18 @@
             offsetX,
             offsetY,
           );
+          context.lineTo(rightBase.x, rightBase.y);
+          context.lineTo(leftBase.x, leftBase.y);
+          context.closePath();
+
+          context.globalAlpha = 0.72;
+          context.strokeStyle = "#07100f";
+          context.lineWidth = state.width <= 560 ? 2.2 : 2.8;
+          context.stroke();
+
+          context.globalAlpha = 0.82;
+          context.strokeStyle = "#f4ecd9";
+          context.lineWidth = state.width <= 560 ? 0.8 : 1.05;
           context.stroke();
           context.restore();
         }
@@ -3618,7 +3642,7 @@
           profile,
         ) {
           if (row) {
-            drawRidge(layout, dateIndex, row);
+            drawSelectionOutline(layout, dateIndex, row);
             drawPriceCap(
               context,
               layout,