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();
 })();

site/index.html

@@ -64,20 +64,10 @@
 
     <div class="cards" id="gap-cards"></div>
 
-    <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>
+    <!-- Chart titles/captions render inside each card's .chart-h via app.js chart() (round 2 Fix 2) -->
     <div id="g1" class="chartbox"></div>
-
-    <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>
     <div id="g2" class="chartbox"></div>
-
-    <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>
     <div id="g3" class="chartbox"></div>
-
-    <h3>Four futures, one number</h3>
-    <p class="cap">Sustainable annual spending that lasts to <span id="lifeexp-lbl">95</span> under each scenario.</p>
     <div id="g4" class="chartbox"></div>
     <p id="g4-note" class="cap"></p>
 

site/style.css

@@ -3,9 +3,13 @@
   --ink:#16233b; --ink2:#4c5b74; --line:#e3e8f0; --bg:#f7f9fc; --card:#ffffff;
   --blue:#2563eb; --red:#dc2626; --amber:#d97706; --green:#059669; --violet:#7c3aed;
   --r:14px;
+  --muted:#4c5b74; --chip:#eef2f8;
+  --sheet-h:218px; /* round 2 Fix 1: live bottom-sheet height; app.js keeps it current */
 }
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
+/* Round 2 Fix 3: in-page anchors must land below the sticky header (global; header is sticky on desktop too) */
+[id]{scroll-margin-top:70px}
 body{margin:0;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
 main{max-width:1060px;margin:0 auto;padding:12px}
 h1{font-size:clamp(26px,6vw,40px);line-height:1.15;margin:.4em 0 .3em}
@@ -25,6 +29,7 @@ button,input{touch-action:manipulation}
 
 /* screens */
 .scr{padding:8px 4px 80px}
+.swipe{display:none} /* round 2 Fix 2: hint hidden on desktop; shown ≤860px (rule in the mobile block below — keep it after this line) */
 .lede{font-size:18px}
 .ticks{list-style:none;padding:0;margin:14px 0}
 .ticks li{padding:7px 0 7px 30px;position:relative;color:var(--ink2)}
@@ -48,8 +53,11 @@ button,input{touch-action:manipulation}
   .hdr #btn-print{display:none}
   /* Fix 2: charts keep desktop scale; scroll sideways on phones */
   .chartbox{overflow-x:auto;overflow-y:hidden}
-  .chartbox::before{content:"swipe →";position:sticky;right:0;display:block;width:max-content;margin-bottom:-17px;padding:1px 8px;font-size:10px;color:var(--ink2);background:#ffffffcc;border:1px solid var(--line);border-radius:99px;pointer-events:none}
   .chartbox svg{min-width:560px}
+  /* Round 2 Fix 2: "swipe →" lives in the chart card header (can never overlap SVG ticks);
+     sticky left:0 keeps it pinned while the card scrolls horizontally */
+  .chart-h{position:sticky;left:0}
+  .swipe{display:inline-block;font-size:11.5px;color:var(--muted);background:var(--chip);border-radius:99px;padding:3px 9px;white-space:nowrap;flex:none}
   /* Fix 3: sheet height = its content; chips always visible; no transform peek */
   .panel{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;max-height:44vh;overflow:auto;box-shadow:0 -6px 24px #16233b22}
   .panel .insight{display:none}
@@ -59,7 +67,18 @@ button,input{touch-action:manipulation}
   .panel.open .panel-h::after{content:" ▼"}
   #scrim{position:fixed;inset:0;background:#16233b33;z-index:35}
   #scrim.on{display:block}
-  .scr{padding-bottom:calc(185px + env(safe-area-inset-bottom))}
+  /* Round 2 Fix 1: clearance = live sheet height (app.js sets --sheet-h) + gap + safe area */
+  .scr{padding-bottom:calc(var(--sheet-h) + 14px + env(safe-area-inset-bottom))}
+  /* Round 2 Fix 1: Back/Next rows stick above the sheet on tall steps; solid bg, below scrim(35)/sheet(40).
+     #btn-next (the primary CTA, last element of the flow) carries the pin at sheet+12px so it is on
+     screen at every scroll position of every step; .step-nav is pinned per spec and stays in flow
+     above it. margin-bottom:-6px nets out the base margin so the spec's 6px padding box does not
+     shift short steps at all (income step stays pixel-identical to round 1: CTA top 485).
+     At max scroll the doc's own padding + the CTA's 18px margin + 50px height keep the
+     last option's bottom ≈507 — clear of the CTA top (≈544) and the sheet (≥616). */
+  .step-nav{position:sticky;bottom:calc(var(--sheet-h) + 14px + env(safe-area-inset-bottom));background:var(--bg);z-index:20;padding:6px 0}
+  .quiz-main .step-nav{margin-bottom:-6px} /* specificity: base `.step-nav{margin-bottom:6px}` is later in file; net the padding box so round-1 flow is pixel-identical */
+  #btn-next{position:sticky;bottom:calc(var(--sheet-h) + 12px + env(safe-area-inset-bottom));z-index:21}
 }
 @media(max-width:700px){
   .hdr .pill{display:none} /* privacy pill is repeated on the intro screen and the footer */
@@ -106,6 +125,10 @@ input[type=range]{width:100%;accent-color:var(--blue)}
 .cap{font-size:13.5px;margin:.2em 0 .6em}
 .chartbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;overflow:hidden}
 .chartbox svg{display:block;width:100%;height:auto}
+/* Round 2 Fix 2: chart card header = title+caption block with the swipe hint on its right.
+   .swipe is display:none on desktop (base rule above), so the flex row renders exactly like the old stacked block. */
+.chart-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
+.chart-h>div{min-width:0}
 .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink2);padding:4px 6px 0}
 .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}