Round 2 mobile pass: CTA pinned above bottom sheet, swipe hint in chart header, anchor scroll-margin

- Issue 1: --sheet-h CSS var (live sheet height via syncSheetH: load/toggle/resize/
  panel-content), .scr clearance and sticky #btn-next/.step-nav above the sheet;
  income short step pixel-identical to round 1 (CTA top 485).
- Issue 2: chart() helper renders .chart-h (h3+p + .swipe span) into #g1-#g4;
  .chartbox::before overlay removed; hint is flex sibling in header, sticky left.
- Issue 3: [id]{scroll-margin-top:70px} so #whatif anchor lands below sticky hdr.
- G2 tick clip and Four-futures scroll documented as non-issues in report.
- verify2.py: 90/90 PASS live; before/after evidence in audit/mobile-{before,after}2/.

Spec: MOBILE-FIX-2.md. Report: MOBILE-FIX-2-REPORT.md.

site/app.js

@@ -322,6 +322,7 @@
     else if (p.household === 'couple') ins = 'With pension splitting + household GIS, your joint taxes drop — the panel shows the joint total.';
     else ins = 'Live numbers — change any answer and this panel moves.';
     $('#panel-insight').innerHTML = ins;
+    syncSheetH(); /* panel content just changed height — keep --sheet-h live (round 2 Fix 1) */
   }
 
   /* ---------- charts (hand-rolled inline SVG) ---------- */
@@ -367,6 +368,25 @@
     }).join('') + '</div>';
   }
 
+  /* Round 2 Fix 2: one chart() helper renders each card = header (.chart-h: h3 + caption)
+     + SVG (+ legend). The "swipe →" hint is appended inside .chart-h — in the header row it
+     can never overlap SVG content (the old .chartbox::before overlay sat on the top y-tick).
+     Card titles/captions moved here from index.html so every render keeps the header. */
+  var CHART_SWIPE = '<span class="swipe">swipe →</span>';
+  var CHART_HDR = {
+    '#g1': '<h3>Will it last? Projected savings</h3><p class="cap">Total portfolio (RRSP + TFSA + non-registered), in today\'s dollars. Shaded: money running out.</p>',
+    '#g2': '<h3>Where retirement income comes from</h3><p class="cap">CPP, OAS, GIS and what you must withdraw from savings — stacked, after-tax view.</p>',
+    '#g3': '<h3>Spending vs. what you\'ll actually have</h3><p class="cap">Annual cash in (income after tax &amp; clawback, plus withdrawals) vs. planned spending.</p>',
+    '#g4': function () { return '<h3>Four futures, one number</h3><p class="cap">Sustainable annual spending that lasts to <span id="lifeexp-lbl">' + state.a.lifeExp + '</span> under each scenario.</p>'; }
+  };
+  function chartH(sel) {
+    var hd = typeof CHART_HDR[sel] === 'function' ? CHART_HDR[sel]() : (CHART_HDR[sel] || '');
+    return '<div class="chart-h"><div>' + hd + '</div>' + CHART_SWIPE + '</div>';
+  }
+  function chart(sel, inner, legendItems) {
+    $(sel).innerHTML = chartH(sel) + (inner || '') + (legendItems ? legend(legendItems) : '');
+  }
+
   var COL = { bal: '#2563eb', cpp: '#2563eb', oas: '#dc2626', gis: '#f59e0b', wdr: '#10b981', cash: '#0ea5e9', need: '#dc2626' };
 
   function g1_balance(proj) {
@@ -385,12 +405,12 @@
     var ret = Math.max(a0, inputs().retireAge);
     inner += '<line x1="' + X(ret) + '" x2="' + X(ret) + '" y1="' + T + '" y2="' + (H - B) + '" stroke="#94a3b8" stroke-dasharray="2 4"/>' +
       '<text x="' + (X(ret) + 4) + '" y="' + (H - B - 6) + '" font-size="12" fill="#94a3b8">retire</text>';
-    $('#g1').innerHTML = svgWrap(inner) + legend([['Total savings (today’s $)', COL.bal]]);
+    chart('#g1', svgWrap(inner), [['Total savings (today’s $)', COL.bal]]);
   }
 
   function g2_income(proj, p) {
     var yrs = proj.years.filter(function (r) { return r.phase === 'draw'; });
-    if (!yrs.length) { $('#g2').innerHTML = '<p class="cap">Retirement after your plan horizon.</p>'; return; }
+    if (!yrs.length) { chart('#g2', '<p class="cap">Retirement after your plan horizon.</p>'); return; }
     var ages = yrs.map(function (r) { return r.age; });
     var X = sc(ages, ages[0], ages[ages.length - 1]);
     var series = [
@@ -409,12 +429,12 @@
       inner += '<path d="' + stackPath(ages, lower, upper, X, Y) + '" fill="' + se[1] + '33" stroke="' + se[1] + '" stroke-width="1"/>';
       lower = upper;
     });
-    $('#g2').innerHTML = svgWrap(inner) + legend(series.map(function (s) { return [s[0], s[1]]; }));
+    chart('#g2', svgWrap(inner), series.map(function (s) { return [s[0], s[1]]; }));
   }
 
   function g3_cash(proj) {
     var yrs = proj.years.filter(function (r) { return r.phase === 'draw'; });
-    if (!yrs.length) { $('#g3').innerHTML = ''; return; }
+    if (!yrs.length) { chart('#g3', ''); return; }
     var ages = yrs.map(function (r) { return r.age; });
     var X = sc(ages, ages[0], ages[ages.length - 1]);
     var inc = yrs.map(function (r) { return r.cash + r.unfunded; });
@@ -428,13 +448,13 @@
       inner += '<circle cx="' + X(first) + '" cy="' + Y(need[ages.indexOf(first)]) + '" r="4.5" fill="#dc2626"/>' +
         '<text x="' + (X(first) + 6) + '" y="' + (Y(need[ages.indexOf(first)]) - 6) + '" font-size="13" fill="#dc2626" font-weight="700">shortfall from ~' + first + '</text>';
     }
-    $('#g3').innerHTML = svgWrap(inner) + legend([['Cash you’ll have (after tax)', COL.cash], ['Planned spending', COL.need]]);
+    chart('#g3', svgWrap(inner), [['Cash you’ll have (after tax)', COL.cash], ['Planned spending', COL.need]]);
   }
 
   var g4cache = null;
   function g4_bars(p, fast) {
     if (g4cache && fast) { drawG4(g4cache); $('#g4-note').textContent = 'Computed from the current answers.'; return; }
-    $('#g4').innerHTML = '<p class="cap">Calculating scenarios…</p>';
+    chart('#g4', '<p class="cap">Calculating scenarios…</p>');
     setTimeout(function () {
       var scen = [
         ['Current plan', p],
@@ -463,7 +483,7 @@
         '<text x="' + (x + bw * 0.34) + '" y="' + (y - 6) + '" text-anchor="middle" font-size="13.5" font-weight="700" fill="#16233b">' + k(r[1]) + '</text>' +
         '<text x="' + (x + bw * 0.34) + '" y="' + (H - B + 14) + '" text-anchor="middle" font-size="12" fill="#8a97ad">' + r[0] + '</text>';
     });
-    $('#g4').innerHTML = svgWrap(inner);
+    chart('#g4', svgWrap(inner));
   }
 
   /* ---------- vision ---------- */
@@ -531,7 +551,9 @@
       v.innerHTML = 'This plan survives to <b>95</b> with ' + k(proj.finalBal) + ' left over — you can sustain about <b>' + money(ss) + '/yr</b>. ' +
         'That’s ' + money(ss - p.spendingAnnual) + '/yr of headroom above your plan.';
     }
-    $('#lifeexp-lbl').textContent = p.lifeExp;
+    /* lifeexp-lbl now lives inside the g4 card header (rendered below via chart('#g4'));
+       the header bakes in state.a.lifeExp, so just sync if the node exists (re-renders). */
+    var le = $('#lifeexp-lbl'); if (le) le.textContent = p.lifeExp;
 
     var cards = '';
     if (rec.gapAnnual > 0) {
@@ -625,6 +647,7 @@
     if (h && h.contains(e.target)) {
       document.getElementById('panel').classList.toggle('open');
       syncScrim();
+      syncSheetH();
     }
   });
   /* Fix 3: scrim behind the open sheet on mobile; tapping it closes the sheet. */
@@ -635,13 +658,24 @@
     scrim.hidden = !open;
     scrim.classList.toggle('on', open);
   }
+  /* Round 2 Fix 1: publish the live sheet height as --sheet-h so .scr padding and the sticky
+     step-nav always clear the sheet (default 218px on :root keeps the first paint right).
+     Shim-safe: smoke-test stubs have no offsetHeight — the guard skips them. */
+  function syncSheetH() {
+    var panel = document.getElementById('panel');
+    var h = panel && panel.offsetHeight;
+    if (h) document.documentElement.style.setProperty('--sheet-h', h + 'px');
+  }
+  if (window.addEventListener) window.addEventListener('resize', syncSheetH);
   var scrimEl = document.getElementById('scrim');
   if (scrimEl) scrimEl.addEventListener('click', function () {
     document.getElementById('panel').classList.remove('open');
     syncScrim();
+    syncSheetH();
   });
   var savedScreen = state.screen, savedStep = state.step;
   showScreen(savedScreen);
   if (savedScreen === 'quiz') { renderStep(); liveUpdate(); }
   else if (savedScreen === 'results') { renderResults(false); liveUpdate(); }
+  syncSheetH();
 })();