arrow and highlight timeline step

app.js

@@ -721,6 +721,8 @@ function renderTimeline() {
   const v = state.visible || 1;
   for (let i = 0; i < v; i++) addStep(host, STEPS[i], i + 1);
   expandDetailsForStep(state.step);
+  markCurrentStep(state.step);
+  requestAnimationFrame(drawLinkToFlow);
 }
 
 function addStep(host, step, idx) {
@@ -890,6 +892,11 @@ function expandDetailsForStep(stepNum) {
     const btn = document.querySelector(`button.toggle[data-fold="${current.key}"]`);
     if (btn) btn.setAttribute("aria-expanded", "true");
   }
+  // highlight and link
+  markCurrentStep(stepNum);
+  // Wait for layout to settle then draw the link
+  requestAnimationFrame(drawLinkToFlow);
+
 }
 
 /* ------------ Dots / progress ------------ */
@@ -915,6 +922,7 @@ function renderDots(visible) {
         askCurrent();
         scrollToStep(i);
         highlightDot();
+        requestAnimationFrame(drawLinkToFlow);
       });
     }
     d.appendChild(dot);
@@ -959,6 +967,8 @@ function askCurrent() {
   }
 
   expandDetailsForStep(state.step);
+  markCurrentStep(state.step);
+  requestAnimationFrame(drawLinkToFlow);
 
   if (state.step === 7) {
     const seq = FLOW[7];
@@ -1014,6 +1024,7 @@ function goto(dest) {
   askCurrent();
   scrollToStep(state.step);
   save(true);
+  requestAnimationFrame(drawLinkToFlow);
 }
 
 /* Called when step 1 completes to auto reveal step 2 */
@@ -1175,7 +1186,58 @@ function clearAll() {
   updateProgress();
 }
 
+/* ------------ (a) mark the current step and (b) draw the arrow ------------ */
+function markCurrentStep(stepNum) {
+  // Clear old
+  $$("#timeline .step").forEach(el => el.classList.remove("current"));
+  const current = document.querySelector(`.step:nth-of-type(${stepNum})`);
+  if (current) current.classList.add("current");
+}
+
+function drawLinkToFlow() {
+  const flowEl = $("#flow");
+  const svg = $("#linkSvg");
+  const path = $("#linkPath");
+
+  // Hide arrow if flow is hidden or no current step
+  const current = document.querySelector(`.step:nth-of-type(${state.step})`);
+  const flowHidden = flowEl.classList.contains("hidden");
+  if (!current || flowHidden) {
+    if (path) path.setAttribute("d", "");
+    return;
+  }
+
+  // Dimensions
+  const sRect = current.getBoundingClientRect();
+  const fRect = flowEl.getBoundingClientRect();
+
+  // Start: bottom-center of current step card
+  const x1 = sRect.left + sRect.width / 2;
+  const y1 = sRect.bottom + 4; // a tiny gap below the step
+
+  // End: top-center of the flow bar
+  const x2 = fRect.left + fRect.width / 2;
+  const y2 = fRect.top - 6; // a tiny gap above the bar
+
+  // Control points for a smooth bent curve
+  const midY = (y1 + y2) / 2;
+  const c1x = x1;
+  const c1y = midY;
+  const c2x = x2;
+  const c2y = midY;
+
+  // Resize SVG viewBox to viewport and draw
+  svg.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.innerHeight}`);
+  path.setAttribute("d", `M ${x1} ${y1} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}`);
+
+  // Optional: animate the path slightly on change (simple stroke-dash trick)
+  path.style.transition = "d 0.2s ease";
+}
+
 /* ------------ Boot ------------ */
+// Keep arrow aligned on resize/scroll
+window.addEventListener("resize", drawLinkToFlow, { passive: true });
+window.addEventListener("scroll", drawLinkToFlow, { passive: true });
 load();
 renderPurposes();
 if (state.purpose && state.purpose !== "anon") {