From ee0c6f329a55e5b200bec3acf5e1c8d81cb5358f Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Sun, 7 Jun 2026 15:45:55 -0500
Subject: [PATCH] pm-mobile: help tour covers tempo-nudge + prev/next;
 coachmark can span a group
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- showTour now unions the rects of all elements matching a step's selector,
  so a step can highlight a row of buttons.
- New steps: "Nudge the tempo" (the four ±10/±1 buttons) and
  "Previous / next track" (the ⏮/⏭ buttons).
- Trim the now-duplicated ±10/±1 mention from the Tempo step; note the TAP
  button there instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 mobile.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/mobile.html b/mobile.html
index 938ec71..b566e45 100644
--- a/mobile.html
+++ b/mobile.html
@@ -847,8 +847,10 @@ const TOUR=[
   {sel:".sels", title:"Pick what to play", text:"Choose a set list and the track within it. Tracks are your practice items — name them for whatever you're working on, even if two share the same beat."},
   {sel:"#saveBtn", title:"Save & library", text:"Save the current track — “Save as new”, or “Update” one of yours. The same sheet is your library: make set lists and rename / reorder / delete tracks. It all lives with the full editor too."},
   {sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras (above the tempo): Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."},
-  {sel:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, or drag up/down to scrub. ±10 / ±1 buttons nudge it."},
+  {sel:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, the TAP button to tap it out, or drag the wheel up/down to scrub."},
   {sel:"#lanes", title:"Edit the beat", text:"Each lane is a row of pads that blink on the beat — tap a pad to cycle rest → beat → accent → ghost. Tap a lane's label to set its note value (eighths, triplets, sixteenths…), sound, grouping, mute or polymeter. “+ Add lane” for more."},
+  {sel:"#bDn10,#bDown,#bUp,#bUp10", title:"Nudge the tempo", text:"Step the BPM up or down while it keeps playing: −10 / −1 / +1 / +10. Great for settling on a comfortable speed or pushing it faster as you improve."},
+  {sel:"#bPrev,#bNext", title:"Previous / next track", text:"⏮ and ⏭ move to the previous or next track in the current set list. If the metronome is running it carries straight on into the new track."},
   {sel:"#bPrac", title:"Practice = a timed session", text:"Play just runs the metronome. Practice times your playing and logs it (not audio): it starts a session clock and Play becomes Stop — start/pause each track, then Stop to save the session."},
   {sel:"#bJournal", title:"Practice journal", text:"Opens your saved practice sessions — notes and a per-track breakdown across days. While Practice is recording, this shows the live session timer."},
 ];
@@ -858,7 +860,11 @@ function endTour(){ $("tour").classList.remove("open"); lsSet(LS_TOURED,1); }
 function showTour(){
   while(tstep<TOUR.length && !document.querySelector(TOUR[tstep].sel)) tstep++;
   if(tstep>=TOUR.length){ endTour(); return; }
-  const s=TOUR[tstep], el=document.querySelector(s.sel), r=el.getBoundingClientRect(), pad=6, hole=$("tourHole");
+  const s=TOUR[tstep], pad=6, hole=$("tourHole");
+  // sel may match several elements (e.g. a row of buttons) — highlight their union
+  let r=null; document.querySelectorAll(s.sel).forEach(el=>{ const b=el.getBoundingClientRect();
+    r = r ? {left:Math.min(r.left,b.left),top:Math.min(r.top,b.top),right:Math.max(r.right,b.right),bottom:Math.max(r.bottom,b.bottom)} : {left:b.left,top:b.top,right:b.right,bottom:b.bottom}; });
+  r.width=r.right-r.left; r.height=r.bottom-r.top;
   hole.style.left=(r.left-pad)+"px"; hole.style.top=(r.top-pad)+"px"; hole.style.width=(r.width+2*pad)+"px"; hole.style.height=(r.height+2*pad)+"px";
   $("tourTitle").textContent=s.title; $("tourText").textContent=s.text; $("tourDots").textContent=(tstep+1)+" / "+TOUR.length;
   $("tourPrev").style.visibility=tstep?"visible":"hidden"; $("tourNext").textContent=(tstep===TOUR.length-1)?"Done":"Next";