# MOBILE PASS ROUND 2 — fix spec for https://retire.krisforbes.ca

**Spec v1 — written 2026-10-09 by Hermes (GLM). Execution: DSH (local 27B), all steps, zero user interaction.**
Round 1 (commit 666b6c5) shipped 8 fixes. Hermes then re-audited the live site with vision-checked
screenshots + DOM geometry and found **3 remaining issues** (below). Fix exactly these; do not
re-litigate round-1 decisions.

## Evidence (measured by Hermes against the LIVE site, 2026-10-09)

Geometry script: `/home/ubuntu/.hermes/cache/scratch/measure2.py` (Playwright, mobile emulation,
390×844 / 360×800 / 320×700). Screenshots: `/home/ubuntu/.hermes/cache/scratch/mobile-audit2/`.

### Issue 1 — Primary CTA hidden behind the bottom sheet on tall steps (all 3 widths)
Step 0 (province grid, 13 options) at initial scroll (`scrollY=0`):

| Device | Next button (viewport y) | Sheet top | Next behind sheet? | Next tappable? | Nunavut bottom vs sheet top |
|---|---|---|---|---|---|
| 390×844 | 667–717 | 618 | **yes, fully** | **false** | 630 > 618 (behind) |
| 360×800 | 667–717 | 574 | **yes, fully** | **false** | 630 > 574 (behind) |
| 320×700 | 701–751 | 474 | **yes, fully** | **false** | 664 > 474 (behind) |

Root cause, two parts:
- `.scr{padding-bottom:185px}` (mobile) is **smaller than the sheet obstruction** (sheet 218px tall +
  8px bottom offset + safe-area = 226px+). At max scroll (70px on 390w) the Next bottom lands at
  viewport y=647, still 29px **below** the sheet top (618). The padding must be ≥ sheet obstruction + gap.
- On tall steps the Back/Next row sits below the fold at load — the primary CTA of step 1 of 14 is
  invisible until the user scrolls.

**Fix (all rules scoped to `@media(max-width:860px)`):**
1. Maintain a CSS var with the live sheet height: on load, on `resize`, and whenever the panel
   toggles `.open`, run `document.documentElement.style.setProperty('--sheet-h', panel.offsetHeight + 'px')`
   (guard for the smoke-test shim: `const h = panel && panel.offsetHeight; if (h) …`). Default
   `--sheet-h:218px` on `:root` so the first paint is correct.
2. `.scr{padding-bottom:calc(var(--sheet-h) + 14px + env(safe-area-inset-bottom))}` (replaces the 185px).
3. `.step-nav{position:sticky;bottom:calc(var(--sheet-h) + 14px + env(safe-area-inset-bottom));background:var(--bg);z-index:20;padding:6px 0}`
   — Back/Next pin above the sheet on tall steps; on short steps (e.g. income) the nav is naturally
   above the stick point so nothing changes visually. Keep it below the scrim (z 35) and sheet (z 40).
   Give the stuck bar a solid background so content scrolling under it doesn't show through.

**Verify (programmatic, all 3 widths, step 0 AND step 12/interests):**
- At `scrollY=0`: `#btn-next` bottom ≤ panel top − 2, and `document.elementFromPoint(nextCenter)`
  is inside `#btn-next` (tappable).
- While scrolling (scrollY = maxScroll/2): nav bottom stays ≤ panel top − 2 (pinned).
- At max scroll: last `.opt` bottom ≤ panel top − 2 (every option reachable above the sheet).
- Short step (income, step 3): nav top unchanged vs round 1 (~485), i.e. no visual shift when not stuck.
- Desktop (1280px): `.step-nav` computed `position` is `static`, `.scr` padding-bottom back to 80px.

### Issue 2 — "swipe →" pill overlaps the chart's top y-axis tick
Vision-confirmed at 320px: the pill (`.chartbox::before` overlay, top-left of the card) sits on top of
the topmost y-tick ("$1.05M"). At 390px it grazes the tick area too.

**Fix:** remove the `.chartbox::before` overlay entirely. Instead render the hint in the chart card
header: in `app.js`'s `chart()` helper, append `<span class="swipe">swipe →</span>` inside the
`.chart-h` div (which already holds the `<h3>`+`<p>`). CSS: `.chart-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}`
and `.swipe{display:none}` by default; ≤860px: `.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}`.
The hint then lives in the header row and can never overlap SVG content. (The `.chart-h` flex change
is safe on desktop — the span is `display:none` there.)

**Verify:** at 320/360/390, for each of #g0–#g3: the `.swipe` rect does not intersect any `<text>`
rect of that chart's SVG; `.swipe` is visible (offsetParent ≠ null); hint present on all 4 charts.

### Issue 3 — anchor targets can hide behind the sticky header
The results page has in-page anchors (`#whatif`, `#years` details). The header is `position:sticky`,
so a native anchor jump can land the target underneath it. (Hermes' measurement was inconclusive —
re-measure with a 2s wait; regardless, the fix is one line and correct on desktop too, where the
header is also sticky.)

**Fix:** `style.css` (global, not media-scoped): `[id]{scroll-margin-top:70px}`.

**Verify:** on results at 390px: `location.hash='#whatif'`, wait **2000ms** (the page has
`scroll-behavior:smooth`), assert `window.scrollY > 0` AND
`document.querySelector('#whatif').getBoundingClientRect().top >= document.querySelector('.hdr').getBoundingClientRect().bottom - 1`.

### Verified NON-issues (document in the report, do not "fix")
- G2's bottom y-tick "$18k" looked half-clipped in a viewport screenshot — measured: the SVG fits
  vertically (`svgFitsVertically:true`, svg bottom 35px above the box bottom). It was a screenshot
  crop artifact.
- "Four futures" bar chart's third bar is cut at the card's right edge — that is the intentional
  horizontal scroll container working as designed (swipe hint present).

## Hard constraints (same as MOBILE-FIX.md)
- Do not touch `site/engine/*.js` or any constants. UI/CSS/JS-flow only.
- Keep `<!-- retire-planner v1 -->` as first line in `<head>`; keep privacy text untouched.
- No frameworks/build/CDN. Desktop (≥861px) visually unchanged (sticky nav + bigger padding are
  ≤860px-only; `scroll-margin-top` is a global improvement, not a regression).
- `node tests/engine.test.js` → 36/36; `node tests/ui.smoke.js` → SMOKE-OK. Shim-safe JS only
  (guard `panel.offsetHeight` etc.).

## Verification + delivery steps
1. Tests green (both suites).
2. `mkdir -p audit/mobile-before2 && cp /home/ubuntu/.hermes/cache/scratch/mobile-audit2/*.png audit/mobile-before2/`
   (round-2 before evidence; also copy `audit/mobile-before2/geo-round2.txt` — write the measure2
   output there: run `python3 /home/ubuntu/.hermes/cache/scratch/measure2.py > audit/mobile-before2/geo-round2.txt 2>&1`).
3. Deploy: `bash scripts/deploy.sh` → `DEPLOY-OK`; origin grep marker → 1.
4. Re-run `python3 /home/ubuntu/.hermes/cache/scratch/measure2.py` (after state) and save output +
   screenshots: extend measure2 usage — copy its output to `audit/mobile-after2/geo-round2.txt` and
   its PNGs to `audit/mobile-after2/`. Also re-run `python3 /home/ubuntu/.hermes/cache/scratch/mobile_audit.py`
   and copy those PNGs to `audit/mobile-after2/full-*.png` (prefix them so they don't collide).
5. All Issue-1/2/3 verification assertions above must pass; record the numbers.
6. Off-LAN (Midhurst troublebox paramiko, `trouble@100.96.20.61:2222`, password candidates in
   `~/projects/*.py` lines containing `b1tvvt`): `https://retire.krisforbes.ca/` → 200.
7. Commit + push to `krisf/retire-planner` main: site changes + `MOBILE-FIX-2.md` +
   `MOBILE-FIX-2-REPORT.md` (issue → fix → measured evidence, incl. the non-issues section) +
   `audit/mobile-before2/` + `audit/mobile-after2/`.
8. Your FINAL output line must be exactly: `MOBILE_PASS_2_DONE`