From 9a2c502a19a7284e1e87bc03f478b3e4afc0042e Mon Sep 17 00:00:00 2001
From: Olov Johansson <johansson.olov@gmail.com>
Date: Sat, 8 Aug 2026 20:27:29 +0200
Subject: [PATCH] project sub-timeline: dashed rail, no animation, pins on rail
 above bar

---
 game.html | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/game.html b/game.html
index 393f121..79af698 100644
--- a/game.html
+++ b/game.html
@@ -637,23 +637,41 @@
       color:var(--brass); flex-shrink:0; opacity:.7;
     }
     .truth-item-text { flex:1; }
-    /* Project bar event dots + click zone */
+    /* Project sub-timeline row: dashed rail above, bar below */
+    .tl-row.project-tl {
+      height: 36px;
+      overflow: visible;
+    }
+    /* Dashed sub-rail at pin level */
+    .tl-row.project-tl::before {
+      content: '';
+      position: absolute;
+      left: 0; right: 0;
+      top: 7px;
+      border-top: 1px dashed rgba(232,220,196,.2);
+      z-index: 0;
+      pointer-events: none;
+    }
+    /* Project bar sits in lower half */
+    .tl-row.project-tl .tl-bar {
+      top: 16px;
+      height: 18px;
+    }
+    /* Pins sit on the dashed rail */
     .tl-project-evt-dot {
       position: absolute;
-      width: 11px; height: 11px;
+      width: 10px; height: 10px;
       border-radius: 50%;
-      top: -6px; /* sticks above the bar */
-      transform: translateX(-50%);
+      top: 7px;
+      transform: translate(-50%, -50%);
       z-index: 3; cursor: pointer;
       border: 2px solid var(--void);
-      box-shadow: 0 1px 4px rgba(0,0,0,.6);
-      transition: transform .1s;
+      box-shadow: 0 1px 3px rgba(0,0,0,.5);
     }
     .tl-project-evt-dot.light { background: var(--paper); border-color: var(--brass); }
-    .tl-project-evt-dot.dark  { background: var(--rust); border-color: var(--void); }
-    .tl-project-evt-dot:hover { transform: translateX(-50%) scale(1.4); }
+    .tl-project-evt-dot.dark  { background: var(--rust);  border-color: var(--void); }
     .tl-bar-add-overlay {
-      position: absolute; top: 0; bottom: 0;
+      position: absolute; top: 16px; bottom: 0;
       z-index: 2; cursor: crosshair; background: transparent;
     }
 
@@ -853,7 +871,7 @@
           <div class="tl-sublabel">Projects</div>
           <div class="tl-rows">
             <template x-for="item in projects()" :key="item.id">
-              <div class="tl-row" style="height:26px;overflow:visible">
+              <div class="tl-row project-tl">
                 <a
                   class="tl-bar project-bar"
                   :class="[item.mood || (game && game.mood), !item.end_date ? 'open-right' : '']"