diff --git a/index.html b/index.html
index 00b4ef6..43bceea 100644
--- a/index.html
+++ b/index.html
@@ -278,14 +278,17 @@
   .gsumrow{min-height:30px;align-items:flex-start}
   /* project bar: a base track = the whole project duration, with a progress fill over it
      (auto-computed from task completion weighted by size) */
-  .gsumline{position:absolute;top:18px;height:9px;border-radius:999px;background:#ccd4e2;pointer-events:none;z-index:0}
-  .gsumfill{position:absolute;top:18px;height:9px;border-radius:999px;background:#3b6ef6;pointer-events:none;z-index:1;min-width:0}
+  .gsumline{position:absolute;top:18px;height:9px;border-radius:999px;background:#ccd4e2;cursor:pointer;z-index:0}
+  .gsumline:hover{background:#bec8d8}
+  .gsumfill{position:absolute;top:18px;height:9px;border-radius:999px;background:#3b6ef6;cursor:pointer;z-index:1;min-width:0}
+  .gsumfill:hover{background:#2f5fe0}
   .gsumlbl{position:absolute;top:0;z-index:2;font-size:12.5px;font-weight:700;color:var(--ink-2);
            background:none;padding:0 2px 0 1px;white-space:nowrap;cursor:grab;
            touch-action:none;-webkit-user-select:none;user-select:none}
   .gsumlbl:hover{color:var(--ink)}
   .gsumpct{position:absolute;top:16px;transform:translateX(7px);font-size:11px;font-weight:700;
-           color:var(--ink-3);white-space:nowrap;pointer-events:none}
+           color:var(--ink-3);white-space:nowrap;cursor:pointer;background:none;border:none;padding:0;font:inherit}
+  .gsumpct:hover{color:var(--ink)}
   .pgroup.gdropover .gsumline{background:var(--accent)}
   .pgroup.insb{box-shadow:0 -3px 0 0 var(--accent)}
   .pgroup.insa{box-shadow:0 3px 0 0 var(--accent)}
diff --git a/src/app/main.js b/src/app/main.js
index c9c30e4..211c4d6 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -476,9 +476,9 @@ function renderGantt(){
       <div class="grow gsumrow" style="min-height:${18+ph+16}px"><div class="gtrack">
         <button class="gsumlbl" style="left:${gx(scs)}%" onpointerdown="projDown(event,${p.id})"
           data-full="${p.title} — ${ppc}% done · ${pPts} pts · ${open} open · due ${p.due?fmtD(p.due):"no date"} — click to manage, drag to reorder">${p.title}</button>
-        <div class="gsumline" style="left:${gx(scs)}%;width:${spanW}%;height:${ph}px"></div>
-        <div class="gsumfill" style="left:${gx(scs)}%;width:${spanW*prog}%;height:${ph}px"></div>
-        <span class="gsumpct" style="left:${gx(sce)}%;top:${Math.round(18+ph/2-6)}px">${ppc}%</span>
+        <div class="gsumline" style="left:${gx(scs)}%;width:${spanW}%;height:${ph}px" onclick="openDetail(${p.id})" title="Open ${p.title.replace(/"/g,"&quot;")}"></div>
+        <div class="gsumfill" style="left:${gx(scs)}%;width:${spanW*prog}%;height:${ph}px" onclick="openDetail(${p.id})" title="Open ${p.title.replace(/"/g,"&quot;")}"></div>
+        <button type="button" class="gsumpct" style="left:${gx(sce)}%;top:${Math.round(18+ph/2-6)}px" onclick="openDetail(${p.id})" title="Open ${p.title.replace(/"/g,"&quot;")}">${ppc}%</button>
       </div></div>
       ${taskRows}</div>`);
   });