Bilingual EN/FR: i18n.js dict+t(), lang state+payload, header toggle, FR copy, Intl formatters; i18n.test.js + bilingual smoke; FR mobile audit evidence + BILINGUAL-REPORT.md

2026-10-09 10:06:55 -04:00
1 parent 1b194b6f92
commit ea953ec23c
@@ -1,5 +1,6 @@
 .fetch/
-dsh-run.log
+dsh-*.log
 *.pid
 node_modules/
 site/vision/*.jpeg
 .tmp/
@@ -0,0 +1,166 @@
 # FEATURE: FULL BILINGUAL (EN/FR) — retire.krisforbes.ca
 **Plan v1 — written 2026-10-09 by Hermes (GLM). Execution: DSH (local 27B), all stages, zero user interaction.**
 User request (verbatim): *"I also want this application to be available in english and french fully bilingual."*
 This plan is stage A of a two-stage feature (stage B = public service pension module, see PS-PENSION-PLAN.md, runs after this one).
 ## Goal
 Make **every user-facing string** in the app available in English and French, with a visible
 language toggle, persisted per visitor, included in shared links, with locale-correct number
 formatting. The engine (`site/engine/*.js`) is presentation-neutral and must NOT change.
 English behavior must remain functionally identical to today (mobile pass round 1+2 state is the baseline).
 ## Current state (verified 2026-10-09, after mobile rounds 1+2)
 - Live: https://retire.krisforbes.ca (Unraid `retireapp` nginx :8103, webroot `/mnt/better/appdata/retireapp`, Caddy + CF grey-cloud). Deploy: `bash scripts/deploy.sh` → `DEPLOY-OK`.
 - Repo: `gitea.krisforbes.ca/krisf/retire-planner`, main @ `65863c0`. Tests: engine 36/36, UI smoke OK.
 - Files: `site/index.html`, `site/app.js` (questionnaire STEPS, panel, charts G0–G3, results, table, vision card), `site/style.css`, `site/engine/{engine,canada}.js`, `site/vision/manifest.json` + images, `tests/{engine.test.js,ui.smoke.js}`, `scripts/deploy.sh`.
 - localStorage key `retire-planner-v1` holds `{a: <answers>, step, screen}`. Share links use `#p=<payload>` encoding the answers.
 - Header (global, sticky): logo, privacy pill, spacer, `Start over` / `Print` / `Copy link` ghost buttons.
 - 14 questionnaire steps (single) / 17 (couple), conditional; persistent "Your plan so far" sheet with 4 stat chips + insight line; results with verdict, gap cards, vision card, 4 SVG charts, year-by-year table (11 cols), what-if scenarios, disclaimers, privacy box, footer.
 - Vision card: `CAPTIONS` object in app.js (14 slugs incl. `hero`) + `vision/manifest.json`.
 ## Architecture (implement exactly this shape)
 1. **New file `site/i18n.js`** (dependency-free, loads before `app.js`):
   - `var I18N = { en: {…}, fr: {…} }` — nested objects, dot-path keys (e.g. `panel.title`, `q.step1.title`).
   - `function t(key, vars)` — resolves dot path in current language; falls back to `en`, then to the key itself. Interpolates `{name}` placeholders from `vars`.
   - `function getLang()` / `function setLang(l)` — `'en' | 'fr'`; persists to state; calls `applyI18n()` + re-renders current screen.
   - `function detectLang()` — `navigator.language` starts with `fr` → `'fr'`, else `'en'`. Used only when no saved state exists.
   - Locale-aware formatters (use `Intl.NumberFormat`):
     - `fmtMoney(n)` → en-CA `$959,835` / fr-CA `959 835 $` (0 decimals, CAD)
     - `fmtMoneyK(n)` → en-CA `$523K`, `$1.05M` / fr-CA `523 k$`, `1,05 M$` (compact, ≤3 significant digits)
     - `fmtInt(n)` → `959,835` / `959 835`
     - `fmtPct(x)` → `5%` / `5 %` (fr: space before %)
     - All chart axis/legend/annotation text and table cells must go through these (today they hand-roll `$523k`).
   - `function applyI18n()` — walks `[data-i18n="key"]` (sets textContent), `[data-i18n-html="key"]` (innerHTML, for strings with markup), `[data-i18n-attr="placeholder:key,aria-label:key2"]`; sets `document.documentElement.lang` and `document.title` per language.
 2. **Language state**: add `lang` to the persisted state object (`{a, step, screen, lang}`). On load: payload lang > saved state lang > `detectLang()`. **Share payload**: include `lang` in the `#p=` payload; old payloads without it → `en` (backward compatible).
 3. **Header toggle**: a compact two-button pill group `EN | FR` in the header (all screens), active button styled, `aria-pressed`. Placed after the logo / before the spacer. On mobile it must fit the single-row header (round-2 layout: ≤52px, hide pill ≤700px, hide header Print ≤860px).
 4. **index.html**: add `data-i18n` attributes to every static text node (intro, privacy box, footer, disclaimers, panel header label, button labels, section headings, table headers are dynamic — see app.js). Add `<script src="i18n.js"></script>` before `app.js`. Keep `<!-- retire-planner v1 -->` as first line in `<head>`.
 5. **app.js**: replace every user-facing literal with `t()` / formatters:
   - `STEPS` definitions: title/sub/options/hints/placeholders → keys.
   - Province names → keys (`prov.yt` … `prov.nu`).
   - Panel: chips labels/values, insight line, "Your plan so far".
   - Insights (all templates), gap cards, verdict text, what-if scenario names + descriptions.
   - Chart titles/subtitles/axis labels/legends/annotations (G0–G3), incl. the `retire` marker, `runs out ≈`, `shortfall from ~`, G4 bar names + values.
   - Year table column headers; the collapsed `<summary>` label.
   - Vision card: `CAPTIONS` becomes `{ slug: {en, fr} }`; `renderVision` picks by current lang.
   - Validation/error messages ("Enter a value between {min} and {max}").
   - Buttons: Next/Back/Start over/Print/Copy link/Edit answers/Start/Continue/Yes/No/optional tags.
   - Share success/failure strings; print header if any.
 6. **style.css**: minor additions only if needed for the toggle + FR (e.g., `.lang-toggle` styles; allow `hyphens:auto` on FR paragraphs/cards if overflow appears — see risk section). No redesign.
 ## Canadian French glossary (use these; official terminology where one exists)
 | EN | FR |
 |---|---|
 | Retire Planner (title) | Planificateur de retraite |
 | Your plan so far | Votre plan jusqu'ici |
 | Savings at {age} (chip) | Épargne à {age} ans |
 | Monthly need (chip) | Besoin mensuel |
 | Shortfall (chip) | Manque à gagner |
 | Surplus (chip) | Excédent |
 | RRSP | REER (régime enregistré d'épargne-retraite) |
 | TFSA | CELI (compte d'épargne libre d'impôt) |
 | RRIF | FERR (fonds enregistré de revenu de retraite) |
 | CPP | RPC (Régime de pensions du Canada) |
 | OAS | SV (Sécurité de la vieillesse) |
 | GIS | SRG (Supplément de revenu garanti) |
 | YMPE | MGA (maximum des gains admissibles) |
 | Age amount (credit) | Crédit pour âge |
 | Pension income splitting | Fractionnement du revenu de pension |
 | Pension income amount ($2,000) | Montant pour revenu de pension |
 | Province names | Colombie-Britannique, Alberta, Saskatchewan, Manitoba, Ontario, Québec, Nouveau-Brunswick, Nouvelle-Écosse, Île-du-Prince-Édouard, Terre-Neuve-et-Labrador, Yukon, Territoires du Nord-Ouest, Nunavut |
 | Single | Célibataire |
 | Couple / common-law | Couple / conjoint de fait |
 | Current age | Âge actuel |
 | Annual income | Revenu annuel |
 | Household | Ménage |
 | Retirement age | Âge de la retraite |
 | Spending goal | Objectif de dépenses |
 | Monthly contribution | Cotisation mensuelle |
 | Employer match | Contrepartie de l'employeur |
 | Real return | Rendement réel |
 | Inflation | Inflation |
 | Life expectancy | Espérance de vie |
 | Pension / rental / other income | Revenu de pension / locatif / autre |
 | RRSP balance | Solde du REER |
 | TFSA balance | Solde du CELI |
 | Non-registered | Non enregistré |
 | CPP start age | Âge de début de la RPC |
 | OAS start age | Âge de début de la SV |
 | Next / Back | Suivant / Précédent |
 | Start over | Recommencer |
 | Print / save PDF | Imprimer / enregistrer en PDF |
 | Copy link | Copier le lien |
 | Edit answers | Modifier les réponses |
 | Start / Continue | Commencer / Continuer |
 | Optional | Facultatif |
 | Your savings journey (chart) | L'évolution de votre épargne |
 | Retirement income by source (chart) | Revenu de retraite par source |
 | Cash vs. planned spending (chart) | Encaisse vs dépenses prévues |
 | Four futures (chart) | Quatre scénarios |
 | Current plan (scenario) | Plan actuel |
 | +$200/mo to RRSP (scenario) | +200 $/mois au REER |
 | Retire at 63 (scenario) | Retraite à 63 ans |
 | Spend $5k more/yr (scenario) | Dépenser 5 000 $ de plus par an |
 | Year-by-year detail | Détail année par année |
 | Try a what-if | Essayer un scénario |
 | What-if scenarios | Scénarios « et si » |
 | Age (table col) | Âge |
 | Withdraw (col) | Retrait |
 | Total (col) | Total |
 | Non-reg (col) | Non enreg. |
 | Tax + clawback (col) | Impôt + récup. |
 | Unfunded (col) | Non financé |
 | Estimates only — not financial advice | Estimations seulement — il ne s'agit pas de conseils financiers |
 | 100% client-side — answers never leave your browser | 100 % côté client — vos réponses ne quittent jamais votre navigateur |
 | Interests: dock/travel/garden/family/volunteering/learning/snowbird/hobbies/cottage/city/pets/grandkids/health/legacy | quai / voyages / jardinage / famille / bénévolat / apprentissage / snowbird (courant au Québec) / passe-temps / chalet / ville / animaux / petits-enfants / santé / héritage |
 | Sources | Sources |
 | (public service pension terms — stage B will need these too) | pension de la fonction publique, service ouvrant droit à pension, pension viagère, prestation de raccordement, allocation annuelle, pension différée, pension non réduite, réduction pour retraite anticipée, conjoint survivant, indexée à l'IPC, salaire moyen des cinq années consécutives les mieux payées, classification TI, groupe 1 / groupe 2, MMGP (moyenne des maximums des gains admissibles) |
 Number formatting rules (fr-CA): thousands = narrow no-break space, decimal = comma,
 percent has a space before `%`, currency symbol trails (`959 835 $`, `523 k$`).
 In SVG text the same formatters apply (`1,05 M$` etc.).
 ## Known risk: French is ~20–30% longer than English
 Mitigate and verify:
 - Chart SVG labels: keep FR labels concise; after implementing, assert programmatically that
  every `<text>` in each chart SVG has `getBBox().width` within the 640-wide viewBox (allow the
  horizontally-scrollable `.chartbox` on mobile, but nothing may overflow the viewBox itself).
 - Mobile: re-run the mobile audit in FR at 320/360/390 (script: adapt
  `/home/ubuntu/.hermes/cache/scratch/mobile_audit.py` to set `lang:'fr'` in localStorage before load).
  The `--sheet-h` live-sync from mobile round 2 handles panel height automatically. Check:
  no horizontal document overflow, chips readable, table scrolls, sticky CTA works, buttons fit.
 - Desktop FR screenshot at 1280px.
 - If specific FR strings overflow, shorten the FR wording (never the EN) or allow wrapping —
  fix in CSS, not by truncating text.
 ## Stages (execute in order; zero questions; every stage pre-approved)
 0. **Preflight**: confirm working tree clean at `65863c0`; run `node tests/engine.test.js` (36/36) and `node tests/ui.smoke.js` (SMOKE-OK); capture EN baseline screenshots at 390/320 (reuse `mobile_audit.py` → copy to `audit/bilingual-en-baseline/`).
 1. **i18n scaffold**: create `site/i18n.js` (dictionary with **all** keys for both languages — build it by walking index.html + app.js and extracting every string), formatters, `t()`, lang state, `applyI18n()`, share-payload lang, header toggle in index.html + style.css, script tag.
 2. **Wrap static HTML**: `data-i18n` attributes across index.html.
 3. **Wrap app.js**: all dynamic strings via `t()`/formatters (steps, panel, insights, charts, table, vision captions, scenarios, errors, share/print strings). Vision `CAPTIONS` → `{slug:{en,fr}}`.
 4. **Tests**: new `tests/i18n.test.js` — (a) deep key-set parity en↔fr; (b) no empty values; (c) `{placeholder}` sets match across languages for every key; (d) formatter exact-output checks (`$959,835` / `959 835 $` / `$1.05M` / `1,05 M$` / `5%` / `5 %`); (e) FR render assertions: with lang=fr, DOM shows French for ~15 critical strings (title, panel label, a step title, a chip label, results heading, a chart title, a table header, the privacy line, the disclaimer). Extend `tests/ui.smoke.js` to run its full assertion set in **both** languages (parameterize expected strings by lang; keep output ending `SMOKE-OK`). Engine tests untouched (36/36).
 5. **Deploy + verify**: `bash scripts/deploy.sh` → `DEPLOY-OK`; origin grep marker = 1. EN regression: fresh EN screenshots at 390/320 — functionally identical to baseline (spot-check via vision). FR: mobile audit variant at 320/360/390 + desktop 1280; programmatic checks: no horizontal overflow (`document.documentElement.scrollWidth <= innerWidth + 1`), chart text fits viewBox (getBBox assertion), sheet/chips/CTA checks pass. Off-LAN paramiko check (Midhurst troublebox `trouble@100.96.20.61:2222`, password candidates in `~/projects/*.py` lines containing `b1tvvt`): site 200 + marker. Save FR screenshots to `audit/bilingual-fr/`.
 6. **Report + commit + push**: `BILINGUAL-REPORT.md` (what changed, glossary notes, test evidence, FR screenshots, known FR layout notes) + `audit/` evidence; commit + push to `krisf/retire-planner` main.
 ## Hard constraints
 - **Do not modify** `site/engine/engine.js` or `site/engine/canada.js` (presentation-only change).
 - Keep `<!-- retire-planner v1 -->` first line in `<head>`; keep the privacy statement's meaning intact in both languages.
 - No frameworks, no build step, no CDN. `deploy.sh` rsyncs `site/` — `i18n.js` ships automatically.
 - Desktop (≥861px) EN layout unchanged; FR may wrap slightly longer text (acceptable if nothing overflows horizontally).
 - If a stage fails twice, stop, keep the last good deploy live, and report the blocker.
 ## Definition of done
 - Toggle EN|FR in header on every screen; persists across reload; survives in share links; `navigator.language=fr*` defaults to FR for new visitors.
 - Every visible string renders in the selected language (EN and FR verified by screenshots + tests).
 - `tests/i18n.test.js` green (parity/placeholders/formatters/FR render), `tests/ui.smoke.js` green in both languages, engine 36/36 untouched.
 - FR mobile verified at 320/360/390 + desktop; no horizontal overflow; charts fit viewBox.
 - Deployed, off-LAN 200, committed + pushed with `BILINGUAL-REPORT.md` + audit evidence.
 - **Your FINAL output line must be exactly: `BILINGUAL_DONE`**
@@ -0,0 +1,89 @@
 # BILINGUAL-REPORT.md — EN/FR for https://retire.krisforbes.ca
 Executed end-to-end per `BILINGUAL-PLAN.md` (Stages 0–6). Live at
 https://retire.krisforbes.ca/ — every user-facing string is bilingual, with a persisted
 `EN | FR` header toggle, locale-correct `Intl.NumberFormat` numbers, and `lang` carried in
 share links. **The engine (`site/engine/*.js`) is untouched.**
 ## What shipped
 | Piece | File | Notes |
 |---|---|---|
 | i18n scaffold | `site/i18n.js` (new, 558 lines) | `I18N` dict (EN + full FR mirror), `t(key, vars)` with dot-path lookup, fr→en→key fallback and `{name}` interpolation, `getLang/setLang/detectLang/applyI18n/wireToggle`, locale formatters `fmtMoney / fmtMoneyK / fmtInt / fmtPct / fmtMoney2`. |
 | Header toggle | `site/index.html`, `site/style.css` | `EN | FR` pill (`.lang-toggle`, `#lang-en/#lang-fr`, `aria-pressed`), 44px touch targets; mobile ≤860px keeps privacy pill hidden. |
 | App copy | `site/app.js` | 1:1 faithful port: all dynamic strings (14/17 steps, panel + chips + insight, chart titles/legends/annotations, verdict, gap cards, 11-col table, what-ifs, vision captions, validation errors, share/print/restart, disclaimer, privacy) via `t()`; **all geometry, ids, engine field names and control flow byte-identical to baseline.** |
 | Language state | `site/app.js` + `site/i18n.js` | LS `retire-planner-v1` = `{a, step, screen, lang}` (lang merged read-modify-write); share payload `#p={a,step,lang}`; load precedence **payload lang → saved lang → `navigator.language` fr\* → en**; legacy payloads (no lang) open EN. Toggle re-renders the current screen live (`__onLangChange`). |
 | FR typography | `site/i18n.js` `frNorm()` | U+2019 apostrophes, NBSP before `: ; ! ? %`, NBSP inside `« »`. |
 | Numbers | formatters in `site/i18n.js` | EN `$959,835` / `$523K` / `$1.05M` / `3.5%`; FR `959 835 $` / `523 k$` / `1,05 M$` / `3,5 %` (fr-CA Intl compact emits `523 k $`, so FR compact is hand-rolled to the plan's glossary form). All chart axis/legend/annotation text and table cells go through the formatters. |
 Glossary followed: REER, FERR, CELI, RPC, SV, SRG, ménage, conjoint, fractionnement du
 revenu de pension, récupération de la SV, RevenuQuébec.ca, glissez →, barèmes 2026,
 k$/M$ compacts. FR chart bar labels kept concise (e.g. g4 scenario names shortened) so
 they fit the viewBox.
 ## Tests (all from workspace root, all green pre-deploy)
 - `node tests/engine.test.js` → **RESULT: 36 pass, 0 fail** (engine untouched).
 - `node tests/i18n.test.js` → **I18N-OK** (48 checks): deep key-set parity en↔fr, no empty
  values, `{placeholder}` set equality for every key, every `t()` key used in app.js exists
  in both dicts, formatter exact outputs (`$959,835`/`959 835 $`, `$523K`/`523 k$`,
  `$1.05M`/`1,05 M$`, `5%`/`5 %`, `3.5%`/`3,5 %`, `−$32,962`/`−32 962 $`,
  `$1,507.65`/`1 507,65 $`), FR typography (U+2019, NBSP), `applyI18n` over the real
  `index.html` (FR title *Planificateur de retraite…*, h1, meta description,
  `documentElement.lang`, `aria-pressed`), lang persistence merge, load precedence
  (payload > saved > detect; legacy payload → en).
 - `node tests/ui.smoke.js` → **SMOKE-OK** (56 checks): full begin → province → 14 steps →
  results → what-if walk run **twice, EN and FR**, asserting locale strings (step titles,
  validation message, panel, verdict, chart titles, legend, table header, year summary,
  stamp `tax rates 2026 · CPP max $1,507.65` vs `barèmes 2026 · RPC max. 1 507,65 $`),
  plus `LS.lang === 'fr'` after the FR run.
 ## EN regression (baseline vs deployed, live site)
 `audit/bilingual-en-regression/` (fresh EN runs) vs `audit/bilingual-en-baseline/`:
 - Geometry identical: panel 374×218 top 618, chips 344×158, step body, btn-next,
  g1 svg 560×236, table `.tbl-wrap` clientW 326 (scrollW 518, horizontal-scroll pattern
  unchanged), vision 356×250 — at 390/360/320.
 - Pixel diff (thresholded, per screenshot): **0.9–4.1 %** of pixels — the differences are
  the header EN|FR toggle and the reformatted numerals (`$523K`, `2 %`-style compact/trim
  allowed by the plan's formatter spec). Header height 55→57 CSS px (toggle button);
  full-page doc height +6 px. No element moved; content layout below the header identical.
 - Desktop (≥861px): toggle is the only header addition; grid/content layout untouched
  (`desktop-results-en-top` diff evidence in `audit/bilingual-fr/`).
 ## FR mobile audit — 320/360/390 + desktop 1280 (`audit/bilingual-fr/`, 23 PNGs + geo.json)
 **98/98 programmatic checks pass** (`audit/bilingual_audit.py` → `FR-AUDIT-OK`):
 - **No horizontal document overflow** at any viewport: `max(documentElement, body).scrollWidth == innerWidth` (320/360/390/1280, intro, province grid, income input, slider, sheet-open, results top/charts/table).
 - **Chart text fits the viewBox**: every `<text>` in every `#g1–#g4` SVG measured with `getBBox()`; **0 violations** on every device+screen (FR labels kept concise, e.g. g4 scenarios, `L'évolution de votre épargne`).
 - **Sheet/chips**: panel visible on every quiz step, chips font 11px, panel height 235px (33.5 vh at 320) and 291px (41.5 vh) open — live `--sheet-h` sync intact.
 - **CTA**: quiz *Suivant →* in viewport on every step (sticky foot), intro CTA rendered, share CTA on results (full-page shots).
 - **Table**: 11 headers in DOM, 9 visible at ≤560px (non-reg + GIS columns hidden by the pre-existing "Fix 5" mobile design), 13px header font, `.tbl-wrap` scrolls horizontally (clientW 256/296/326 < scrollW 549) — nothing clipped.
 - FR rendering proof: RPC/REER/CELI/retraite token counts per screen (5 intro, 2 quiz steps, 8–10 results); desktop EN control shot shows 0 FR tokens.
 ## Deploy + off-LAN verification
 - `bash scripts/deploy.sh` → **DEPLOY-OK**; served `index.html` marker `retire-planner v1` grep = 1; served `i18n.js` contains FR strings; `index.html` references `i18n.js`.
 - Off-LAN (`audit/offlan_check.py` via Midhurst troublebox, result in `audit/bilingual-geo-check.json`): **200 + marker + `lang-toggle` + `i18n.js` script + FR strings** (`OFFLAN-OK`, vantage trouble@100.96.20.61).
 ## FR notes / accepted deltas
 - Header brand uses ellipsis at 320px (*Planificateur de retraite…* with the EN
  *Retire Planner* kept short) so the toggle + restart stay on one row.
 - Legacy share links (payloads without `lang`) open in EN — deterministic, never garbled.
 - FR verdict/stamp strings use non-breaking narrow spaces per fr-CA Intl (`1 507,65 $`);
  tests normalize U+202F/U+00A0 for assertions.
 - EN micro-deltas mandated by the formatter spec: compact `$523K` (was `$523k`),
  trailing-zero trim on `pct2` (`2 %`-class output), `to {le}` in the verdict line
  (identical at the default life expectancy).
 ## Files changed
 `site/i18n.js` (new) · `site/app.js` · `site/index.html` · `site/style.css` ·
 `tests/i18n.test.js` (new) · `tests/ui.smoke.js` · `audit/bilingual_audit.py` (new) ·
 `audit/offlan_check.py` (new) · `audit/bilingual-en-baseline/` · `audit/bilingual-en-regression/` ·
 `audit/bilingual-fr/` · `audit/bilingual-geo-check.json` · `BILINGUAL-PLAN.md` · `.gitignore`.
 `git diff --stat site/engine/` → empty: engine untouched, 36/36.
@@ -0,0 +1,11 @@
 {
  "http_code": "200",
  "has_marker": true,
  "has_lang_toggle": true,
  "has_i18n_script": true,
  "i18n_js_fr_strings": true,
  "i18n_js_size": 28788,
  "checked_at": "2026-10-09T14:01:51Z",
  "vantage": "trouble@100.96.20.61 (Midhurst, off-LAN)",
  "all_ok": true
 }
@@ -0,0 +1,193 @@
 """Bilingual FR mobile audit for https://retire.krisforbes.ca — FR screens at 320/360/390
 plus desktop 1280 (FR) and EN desktop (regression evidence). Sets localStorage
 {a, step, screen, lang:'fr'}, captures screenshots and programmatic geometry:
 - document horizontal overflow (scrollWidth vs innerWidth)
 - every chart <text> getBBox() inside the 640x270 viewBox
 - panel/chips/CTA visibility, table header cells visible + font size
 Output: audit/bilingual-fr/*.png + audit/bilingual-fr/geo.json + FR-AUDIT-OK/FAIL.
 """
 import json, os, sys
 from playwright.sync_api import sync_playwright
 OUT = sys.argv[1] if len(sys.argv) > 1 else 'audit/bilingual-fr'
 os.makedirs(OUT, exist_ok=True)
 CHROME = '/home/ubuntu/.cache/ms-playwright/chromium-1243/chrome-linux64/chrome'
 BASE = 'https://retire.krisforbes.ca/'
 LS = 'retire-planner-v1'
 ANSWERS = {
    "province": "ON", "age": 45, "household": "single",
    "partner": {"age": 45, "income": 0, "rrsp": 0, "tfsa": 0, "nonreg": 0, "monthlyContribution": 0},
    "income": 85000, "rrsp": 250000, "tfsa": 60000,
    "nonreg": 40000, "monthlyContribution": 800, "employerMatchMonthly": 0,
    "retireAge": 65, "spendingAnnual": 60000,
    "cppStartAge": 65, "oasStartAge": 65,
    "pensionAnnual": 12000, "rentalAnnual": 0, "otherAnnual": 0,
    "realReturnPre": 3.5, "realReturnPost": 2.5, "inflation": 2.0, "lifeExp": 95,
    "interests": ["dock", "travel"]
 }
 DEVICES = [
    ('iphone14', 390, 844, 3.0, 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1'),
    ('pixel',    360, 800, 2.75, 'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36'),
    ('se',       320, 700, 2.0, 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1'),
    ('desktop', 1280, 900, 1.0, 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'),
 ]
 SHOTS = [
    ('iphone14', 'intro',         'intro',   0, None),
    ('iphone14', 'quiz-province', 'quiz',    0, None),
    ('iphone14', 'quiz-income',   'quiz',    3, None),
    ('iphone14', 'quiz-slider',   'quiz',    7, None),
    ('iphone14', 'quiz-sheet-open', 'quiz',  3, 'open_sheet'),
    ('iphone14', 'results-top',   'results', 0, None),
    ('iphone14', 'results-charts', 'results', 0, 'charts'),
    ('iphone14', 'results-table', 'results', 0, 'table'),
    ('pixel',    'intro',         'intro',   0, None),
    ('pixel',    'quiz-province', 'quiz',    0, None),
    ('pixel',    'results-charts', 'results', 0, 'charts'),
    ('pixel',    'results-table', 'results', 0, 'table'),
    ('se',       'intro',         'intro',   0, None),
    ('se',       'quiz-province', 'quiz',    0, None),
    ('se',       'quiz-income',   'quiz',    3, None),
    ('se',       'quiz-sheet-open', 'quiz',  3, 'open_sheet'),
    ('se',       'results-top',   'results', 0, None),
    ('se',       'results-charts', 'results', 0, 'charts'),
    ('se',       'results-table', 'results', 0, 'table'),
    ('desktop',  'intro-fr',      'intro',   0, None),
    ('desktop',  'results-fr-top', 'results', 0, None),
    ('desktop',  'results-fr-charts', 'results', 0, 'charts'),
    ('desktop',  'results-en-top', 'results', 0, 'en_lang'),
 ]
 GEO_JS = """() => {
  const vw = window.innerWidth, vh = window.innerHeight;
  const docSW = document.documentElement.scrollWidth, bodySW = document.body.scrollWidth;
  const vis = (e) => { if (!e) return false; const b = e.getBoundingClientRect();
    return b.width > 0 && b.height > 0 && b.bottom > 0 && b.top < vh; };
  const g = s => document.querySelector(s);
  // every chart <text> inside the viewBox (0..640 x 0..270)
  const svgProblems = [];
  let g1first = null;
  document.querySelectorAll('#g1 svg, #g2 svg, #g3 svg, #g4 svg').forEach(svg => {
    const rect = svg.getBoundingClientRect();
    const scale = rect.width / 640;
    svg.querySelectorAll('text').forEach(tx => {
      const b = tx.getBBox();
      if (b.x < -0.5 || b.y < -0.5 || b.x + b.width > 640.5 || b.y + b.height > 270.5) {
        svgProblems.push({id: svg.closest('[id]').id, txt: tx.textContent.slice(0, 30), x: Math.round(b.x), w: Math.round(b.width)});
      }
      const id = svg.closest('[id]').id;
      if (id === 'g1' && !g1first) {
        g1first = {fontSize: parseFloat(tx.getAttribute('font-size') || 11), renderedPx: +(rect.width / 640 * (parseFloat(tx.getAttribute('font-size') || 11))).toFixed(1)};
      }
    });
  });
  const ths = [...document.querySelectorAll('#yr-table th')];
  return {
    vw, docSW, bodySW,
    docOverflow: Math.max(docSW, bodySW) > vw + 1,
    g1first, svgTextOutsideViewBox: svgProblems,
    panelVisible: vis(g('.panel')), chipsVisible: vis(g('#panel-chips')),
    chipFontPx: (() => { const k = g('#panel-chips .chip .k'); return k ? parseFloat(getComputedStyle(k).fontSize) : null; })(),
    panelH: (() => { const p = g('.panel'); return p ? {h: Math.round(p.getBoundingClientRect().height), maxVh: +(p.getBoundingClientRect().height / vh * 100).toFixed(1)} : null; })(),
    btnNextVisible: vis(g('#btn-next')),
    btnShareVisible: vis(g('#btn-share')),
    btnShareOnPage: (() => { const e = g('#btn-share'); if (!e) return false; const b = e.getBoundingClientRect(); return b.width > 0 && b.height > 0; })(),
    ctaOnPage: (() => { const e = g('#btn-begin'); if (!e) return false; const b = e.getBoundingClientRect(); return b.width > 0 && b.height > 0; })(),
    thCount: ths.length,
    thHidden: ths.filter(t => getComputedStyle(t).display === 'none' || !t.offsetWidth).length,
    thFontPx: ths.length ? parseFloat(getComputedStyle(ths[0]).fontSize) : null,
    tbl: (() => { const t = g('.tbl-wrap'); return t ? {clientW: t.clientWidth, scrollW: t.scrollWidth} : null; })(),
    hdr: (() => { const h = g('.hdr'); return h ? Math.round(h.getBoundingClientRect().height) : null; })(),
    langBtnVisible: vis(g('#lang-fr')),
    frTextSample: (document.body.innerText.match(/ RPC|REER|CELI|retraite/g) || []).length
  };
 }"""
 def set_state(page, screen, step, lang):
    page.evaluate("""([ls, a, screen, step, lang]) => {
        localStorage.setItem(ls, JSON.stringify({a: a, step: step, screen: screen, lang: lang}));
    }""", [LS, ANSWERS, screen, step, lang])
 results = {}
 with sync_playwright() as pw:
    browser = pw.chromium.launch(executable_path=CHROME, headless=True,
                                 args=['--no-sandbox', '--disable-dev-shm-usage'])
    for dev, w, h, dsf, ua in DEVICES:
        ctx = browser.new_context(viewport={'width': w, 'height': h},
                                  device_scale_factor=dsf, is_mobile=(dev != 'desktop'),
                                  has_touch=(dev != 'desktop'), user_agent=ua)
        page = ctx.new_page()
        page.goto(BASE, wait_until='networkidle')
        for d, tag, screen, step, action in [s for s in SHOTS if s[0] == dev]:
            lang = 'en' if action == 'en_lang' else 'fr'
            set_state(page, screen, step, lang)
            page.reload(wait_until='networkidle')
            page.wait_for_timeout(700)
            if action == 'open_sheet':
                try:
                    page.click('.panel-h', timeout=3000)
                    page.wait_for_timeout(400)
                except Exception as e:
                    print('sheet open failed:', tag, e)
            elif action == 'charts':
                el = page.locator('#g1')
                if el.count():
                    el.scroll_into_view_if_needed()
                    page.wait_for_timeout(900)  # let G4 async render
            elif action == 'table':
                page.evaluate("() => { const d = document.querySelector('details.yearly'); if (d) d.open = true; }")
                el = page.locator('#yr-table')
                if el.count():
                    el.scroll_into_view_if_needed()
                    page.wait_for_timeout(300)
            page.wait_for_timeout(300)
            path = os.path.join(OUT, f'{dev}-{tag}.png')
            page.screenshot(path=path, full_page=(action is None and dev != 'desktop'))
            print('saved', path)
            # geometry per device on the FR results screen (full app rendered)
            key = f'{dev}:{tag}'
            results[key] = page.evaluate(GEO_JS)
            print(key, json.dumps({k: results[key][k] for k in
                  ('docOverflow', 'docSW', 'vw', 'thCount', 'thHidden', 'thFontPx')}))
        ctx.close()
    browser.close()
 # ---- evaluate FR constraints ----
 checks = []
 def chk(name, cond, extra=''):
    checks.append((name, bool(cond), extra))
    print(('PASS  ' if cond else 'FAIL  ') + name + ('  [' + str(extra)[:90] + ']' if extra != '' else ''))
 for key, g in results.items():
    dev = key.split(':')[0]
    chk(key + ' no doc overflow', not g['docOverflow'], f"{g['docSW']}>{g['vw']}")
    chk(key + ' svg text inside viewBox', len(g['svgTextOutsideViewBox']) == 0, g['svgTextOutsideViewBox'][:2])
    if dev == 'desktop':
        continue
    if 'results-table' in key:
        # baseline Fix 5: ≤560px viewport hides 2 of 11 columns by design (non-reg, GIS)
        exp_hidden = 2 if g['vw'] <= 560 else 0
        chk(key + ' table headers visible', g['thCount'] == 11 and g['thHidden'] == exp_hidden,
            f"{g['thCount']-g['thHidden']}/{g['thCount']} visible @{g['thFontPx']}px ({exp_hidden} hidden by design)")
        chk(key + ' table scrolls (not clipped)', g['tbl'] and g['tbl']['scrollW'] > g['vw'], g['tbl'])
        chk(key + ' share CTA on page', g['btnShareOnPage'])
    if 'results' in key and 'results-table' not in key:
        chk(key + ' share CTA rendered on page', g['btnShareOnPage'])
    if 'quiz' in key:
        chk(key + ' Next CTA visible', g['btnNextVisible'])
        chk(key + ' panel visible', g['panelVisible'] and g['chipsVisible'], f"chip {g['chipFontPx']}px panel {g['panelH']}")
    chk(key + ' lang toggle visible', g['langBtnVisible'])
    if 'intro' in key:
        chk(key + ' intro CTA rendered', g['ctaOnPage'])
 ok = all(c[1] for c in checks)
 with open(os.path.join(OUT, 'geo.json'), 'w') as f:
    json.dump({'geo': results, 'checks': [{'name': n, 'ok': o, 'extra': str(e)} for n, o, e in checks]},
              f, indent=2, ensure_ascii=False)
 print('checks:', sum(1 for c in checks if c[1]), '/', len(checks))
 print('FR-AUDIT-OK' if ok else 'FR-AUDIT-FAIL')
 sys.exit(0 if ok else 1)
@@ -0,0 +1,56 @@
 #!/usr/bin/env python3
 """Off-LAN reachability check for https://retire.krisforbes.ca/ via the Midhurst troublebox.
 SSH to trouble@100.96.20.61:2222, curl the site from there (outside the LAN), verify 200 +
 served bilingual markers. Writes audit/bilingual-geo-check.json, prints OFFLAN-OK."""
 import json, sys, time
 import paramiko
 CANDS = ["b1tvvt07", "ubnt", "admin", "password", "b1tvvt07!", "1234", "root", "glinet"]
 URL = "https://retire.krisforbes.ca/"
 def main():
    conn = None
    for pw in CANDS:
        c = paramiko.SSHClient()
        c.set_missing_host_key_policy(paramiko.AutoAddPolicy())
        try:
            c.connect("100.96.20.61", port=2222, username="trouble", password=pw,
                      timeout=25, banner_timeout=25, auth_timeout=25,
                      allow_agent=False, look_for_keys=False)
            conn = c
            break
        except Exception:
            c.close()
    if conn is None:
        print("OFFLAN-FAIL: no auth to troublebox")
        sys.exit(1)
    def run(cmd):
        _, out, _ = conn.exec_command(cmd, timeout=60)
        return out.read().decode("utf-8", "replace").strip()
    code = run(f"curl -s -o /dev/null -w '%{{http_code}}' {URL} --max-time 30")
    html = run(f"curl -s {URL} --max-time 30 | head -c 200000")
    i18n = run(f"curl -s {URL}i18n.js --max-time 30 | head -c 200000")
    conn.close()
    checks = {
        "http_code": code,
        "has_marker": "retire-planner v1" in html,
        "has_lang_toggle": "lang-toggle" in html,
        "has_i18n_script": "i18n.js" in html,
        "i18n_js_fr_strings": ("Planificateur" in i18n) and ("D\u00e9penses" in i18n or "RPC" in i18n),
        "i18n_js_size": len(i18n),
        "checked_at": time.strftime("%Y-%m-%dT%H:%M:%SZ", time.gmtime()),
        "vantage": "trouble@100.96.20.61 (Midhurst, off-LAN)",
    }
    checks["all_ok"] = (code == "200" and checks["has_marker"] and checks["has_lang_toggle"]
                        and checks["has_i18n_script"] and checks["i18n_js_fr_strings"])
    with open("audit/bilingual-geo-check.json", "w") as f:
        json.dump(checks, f, indent=2, ensure_ascii=False)
    print(json.dumps(checks, indent=2, ensure_ascii=False))
    print("OFFLAN-OK" if checks["all_ok"] else "OFFLAN-FAIL")
    sys.exit(0 if checks["all_ok"] else 1)
 if __name__ == "__main__":
    main()
@@ -1,29 +1,41 @@
 /* Retire Planner UI — vanilla, no build, no network except same-origin vision manifest.
-   All computation via window.RetireEngine. Answers persist in localStorage + URL hash. */
+   All computation via window.RetireEngine. Answers persist in localStorage + URL hash.
   All user-facing strings via i18n.js (loaded first): t() + Intl formatters
   (fmtMoney/fmtMoneyK/fmtMoney2/fmtInt/fmtPct) so every number follows the active locale. */
 'use strict';
 (function () {
  var E = window.RetireEngine, C = window.RetireCanada;
  var LS = 'retire-planner-v1';
  var $ = function (s) { return document.querySelector(s); };
  /* locale-aware aliases (i18n.js globals) — chart/table code below stays untouched in shape */
  var money = fmtMoney, k = fmtMoneyK, pct = fmtPct;
-  var PROVINCES = [['ON', 'Ontario'], ['BC', 'British Columbia'], ['AB', 'Alberta'], ['SK', 'Saskatchewan'],
+  var PROVINCES = [['ON', 'prov.ON'], ['BC', 'prov.BC'], ['AB', 'prov.AB'], ['SK', 'prov.SK'],
-    ['MB', 'Manitoba'], ['QC', 'Quebec'], ['NS', 'Nova Scotia'], ['NB', 'New Brunswick'],
+    ['MB', 'prov.MB'], ['QC', 'prov.QC'], ['NS', 'prov.NS'], ['NB', 'prov.NB'],
-    ['NL', 'Newfoundland & Labrador'], ['PE', 'PEI'], ['YT', 'Yukon'], ['NT', 'Northwest Territories'], ['NU', 'Nunavut']];
+    ['NL', 'prov.NL'], ['PE', 'prov.PE'], ['YT', 'prov.YT'], ['NT', 'prov.NT'], ['NU', 'prov.NU']];
  var INTERESTS = [
-    ['rockies', '🏔 Mountains'], ['maritimes', '🌊 Ocean'], ['toronto', '🏙 Big city'],
+    ['rockies', 'int.rockies'], ['maritimes', 'int.maritimes'], ['toronto', 'int.toronto'],
-    ['dock', '🛶 Lake / dock'], ['muskoka', '🌲 Cottage country'], ['prairies', '🌾 Open sky'],
+    ['dock', 'int.dock'], ['muskoka', 'int.muskoka'], ['prairies', 'int.prairies'],
-    ['winter', '⛷ Snow / ski'], ['workshop', '🪵 Workshop'], ['garden', '🌺 Garden'],
+    ['winter', 'int.winter'], ['workshop', 'int.workshop'], ['garden', 'int.garden'],
-    ['travel', '✈️ Travel'], ['quebec', '🇫🇷 Québec']
+    ['travel', 'int.travel'], ['quebec', 'int.quebec']
  ];
  var PROV_SLUGS = { ON: ['toronto', 'muskoka', 'garden'], QC: ['quebec'], BC: ['vancouver'], AB: ['rockies', 'prairies'], MB: ['prairies'], SK: ['prairies'], NB: ['maritimes', 'dock'], NS: ['maritimes', 'dock'], PE: ['maritimes'], NL: ['maritimes'], YT: ['winter', 'rockies'], NT: ['winter'], NU: ['winter'] };
  /* captions per slug per language (hero … dock) */
  var CAPTIONS = {
-    hero: 'The good life — paid for by the plan on this page.', muskoka: 'Cottage country, mortgage-free.',
+    hero: { en: 'The good life — paid for by the plan on this page.', fr: 'La belle vie — payée par le plan sur cette page.' },
-    rockies: 'Lake Louise at 68, on your own schedule.', maritimes: 'Lobster season, every season.',
+    muskoka: { en: 'Cottage country, mortgage-free.', fr: 'Le pays des chalets, hypothèque payée.' },
-    prairies: 'Wide skies and a paid-off acreage.', quebec: 'Terrasses, fêtes et liberté financière.',
+    rockies: { en: 'Lake Louise at 68, on your own schedule.', fr: 'Le lac Louise à 68 ans, à votre rythme.' },
-    vancouver: 'Ocean sunsets from a paid-for deck.', toronto: 'City life, funded — not scraped.',
+    maritimes: { en: 'Lobster season, every season.', fr: 'La saison du homard, toutes les saisons.' },
-    garden: 'Mornings that start with tomatoes.', travel: 'Long-haul flights, fully deductible… just kidding, paid in cash.',
+    prairies: { en: 'Wide skies and a paid-off acreage.', fr: 'De grands espaces et une terre payée.' },
-    workshop: 'A shop full of projects and zero alarms.', winter: 'Fresh tracks on a Tuesday.', dock: 'First coffee on your own dock.'
+    quebec: { en: 'Terrasses, fêtes et liberté financière.', fr: 'Terrasses, fêtes et liberté financière.' },
    vancouver: { en: 'Ocean sunsets from a paid-for deck.', fr: 'Des couchers de soleil sur l’océan depuis une terrasse payée.' },
    toronto: { en: 'City life, funded — not scraped.', fr: 'La vie de ville, financée — pas au rabais.' },
    garden: { en: 'Mornings that start with tomatoes.', fr: 'Des matins qui commencent par des tomates.' },
    travel: { en: 'Long-haul flights, fully deductible… just kidding, paid in cash.', fr: 'Des vols long-courriers, entièrement déductibles… je plaisante, payés comptant.' },
    workshop: { en: 'A shop full of projects and zero alarms.', fr: 'Un atelier plein de projets et zéro réveil.' },
    winter: { en: 'Fresh tracks on a Tuesday.', fr: 'De la neige fraîche un mardi.' },
    dock: { en: 'First coffee on your own dock.', fr: 'Le premier café sur votre propre quai.' }
  };
  var GRADS = ['linear-gradient(135deg,#1e3a8a,#0ea5e9)', 'linear-gradient(135deg,#7c2d12,#f59e0b)',
    'linear-gradient(135deg,#14532d,#84cc16)', 'linear-gradient(135deg,#4c1d95,#ec4899)',
@@ -50,13 +62,13 @@
    var m = location.hash.match(/[#&]p=([^&]+)/);
    if (m) { try { raw = decodeURIComponent(escape(atob(m[1]))); } catch (e) { raw = null; } }
    if (!raw) { try { raw = localStorage.getItem(LS); } catch (e) { raw = null; } }
-    if (raw) { try { var o = JSON.parse(raw); Object.assign(state.a, o.a || o); state.step = o.step | 0; if (o.screen) state.screen = o.screen; else if (m) state.screen = 'results'; } catch (e) { /* fresh */ } }
+    if (raw) { try { var o = JSON.parse(raw); var b = Object.assign({}, o.a || o); delete b.lang; Object.assign(state.a, b); state.step = o.step | 0; if (o.screen) state.screen = o.screen; else if (m) state.screen = 'results'; } catch (e) { /* fresh */ } }
  })();
  function save() {
-    var t = { a: state.a, step: state.step, screen: state.screen };
+    var t2 = { a: state.a, step: state.step, screen: state.screen, lang: getLang() };
-    try { localStorage.setItem(LS, JSON.stringify(t)); } catch (e) { }
+    try { localStorage.setItem(LS, JSON.stringify(t2)); } catch (e) { }
  }
-  function encState() { return btoa(unescape(encodeURIComponent(JSON.stringify({ a: state.a, step: 0 })))); }
+  function encState() { return btoa(unescape(encodeURIComponent(JSON.stringify({ a: state.a, step: 0, lang: getLang() })))); }
  function inputs() {
    var a = state.a, w = state.wi;
@@ -80,117 +92,109 @@
    return p;
  }
-  /* ---------- formatting ---------- */
+  /* ---------- formatting (i18n.js: Intl.NumberFormat, locale-aware) ---------- */
-  function money(v) { v = Math.round(v); return (v < 0 ? '−$' : '$') + Math.abs(v).toLocaleString('en-CA'); }
+  function pct2(v) { return fmtPct(v / 100, 2); }   /* slider values arrive as plain numbers: 3.5 → 3.5% */
  function k(v) {
    var s = v < 0 ? '−' : ''; v = Math.abs(v);
    if (v >= 1e6) return s + '$' + (v / 1e6).toFixed(v >= 1e7 ? 1 : 2) + 'M';
    if (v >= 1000) return s + '$' + Math.round(v / 1000) + 'k';
    return s + '$' + Math.round(v);
  }
  function pct(v) { return (v * 100).toFixed(0) + '%'; }
  /* ---------- steps ---------- */
  function couple() { return state.a.household === 'couple'; }
  var STEPS = [
    {
-      key: 'province', title: 'Where do you live?', hint: 'Taxes, and your retirement view.',
+      key: 'province', titleK: 'q.province.title', hintK: 'q.province.hint',
      type: 'grid', opts: PROVINCES, get: function () { return state.a.province; },
      set: function (v) { state.a.province = v; }
    },
    {
-      key: 'age', title: 'Your age', hint: 'Years.', type: 'number', min: 18, max: 74,
+      key: 'age', titleK: 'q.age.title', hintK: 'q.age.hint', type: 'number', min: 18, max: 74,
      get: function () { return state.a.age; }, set: function (v) { state.a.age = +v; }
    },
    {
-      key: 'household', title: 'Household', hint: 'Couple means joint taxes, pension splitting and household GIS.',
+      key: 'household', titleK: 'q.household.title', hintK: 'q.household.hint',
-      type: 'opts', opts: [['single', 'Single'], ['couple', 'Couple']],
+      type: 'opts', opts: [['single', 'q.household.single'], ['couple', 'q.household.couple']],
      get: function () { return state.a.household; }, set: function (v) { state.a.household = v; }
    },
    {
-      key: 'p_age', show: couple, title: 'Partner’s age', type: 'number', min: 18, max: 90,
+      key: 'p_age', show: couple, titleK: 'q.p_age.title', type: 'number', min: 18, max: 90,
      get: function () { return state.a.partner.age; }, set: function (v) { state.a.partner.age = +v; }
    },
    {
-      key: 'p_income', show: couple, title: 'Partner’s annual employment income', hint: '$/yr before tax. 0 if not working.',
+      key: 'p_income', show: couple, titleK: 'q.p_income.title', hintK: 'q.p_income.hint',
      type: 'number', min: 0, max: 1e6, money: true,
      get: function () { return state.a.partner.income; }, set: function (v) { state.a.partner.income = +v; }
    },
    {
-      key: 'p_savings', show: couple, title: 'Partner’s savings', hint: 'Current balances, today’s dollars.',
+      key: 'p_savings', show: couple, titleK: 'q.p_savings.title', hintK: 'q.p_savings.hint',
      type: 'fields', fields: [
-        { label: 'RRSP / RRIF', key: 'rrsp' }, { label: 'TFSA', key: 'tfsa' }, { label: 'Non-registered', key: 'nonreg' }
+        { labelK: 'q.p_savings.rrsp', key: 'rrsp' }, { labelK: 'q.p_savings.tfsa', key: 'tfsa' }, { labelK: 'q.p_savings.nonreg', key: 'nonreg' }
      ],
      get: function (f) { return state.a.partner[f]; },
      set: function (f, v) { state.a.partner[f] = +v; }
    },
    {
-      key: 'income', title: 'Your annual employment income', hint: '$/yr. Used to estimate your CPP history.',
+      key: 'income', titleK: 'q.income.title', hintK: 'q.income.hint',
      type: 'number', min: 0, max: 1e6, money: true,
      get: function () { return state.a.income; }, set: function (v) { state.a.income = +v; }
    },
    {
-      key: 'rrsp', title: 'RRSP / RRIF balance', type: 'number', min: 0, max: 2e7, money: true,
+      key: 'rrsp', titleK: 'q.rrsp.title', type: 'number', min: 0, max: 2e7, money: true,
      get: function () { return state.a.rrsp; }, set: function (v) { state.a.rrsp = +v; }
    },
    {
-      key: 'savings2', title: 'TFSA and non-registered savings', type: 'fields', fields: [
+      key: 'savings2', titleK: 'q.savings2.title', type: 'fields', fields: [
-        { label: 'TFSA', key: 'tfsa' }, { label: 'Non-registered (cash, stocks, mutual funds)', key: 'nonreg' }
+        { labelK: 'q.savings2.tfsa', key: 'tfsa' }, { labelK: 'q.savings2.nonreg', key: 'nonreg' }
      ],
      get: function (f) { return state.a[f]; }, set: function (f, v) { state.a[f] = +v; }
    },
    {
-      key: 'contrib', title: 'Monthly savings into RRSP', hint: 'Your contribution + any employer match.', type: 'fields', fields: [
+      key: 'contrib', titleK: 'q.contrib.title', hintK: 'q.contrib.hint', type: 'fields', fields: [
-        { label: 'You contribute $/mo', key: 'monthlyContribution' }, { label: 'Employer match $/mo', key: 'employerMatchMonthly' }
+        { labelK: 'q.contrib.you', key: 'monthlyContribution' }, { labelK: 'q.contrib.match', key: 'employerMatchMonthly' }
      ],
      get: function (f) { return state.a[f]; }, set: function (f, v) { state.a[f] = +v; }
    },
    {
-      key: 'retire', title: 'Retirement age', hint: 'When you stop earning employment income.', type: 'slider',
+      key: 'retire', titleK: 'q.retire.title', hintK: 'q.retire.hint', type: 'slider',
-      min: 55, max: 72, step: 1, fmt: function (v) { return v + ' years'; },
+      min: 55, max: 72, step: 1, fmt: function (v) { return t('q.retire.years', { v: v }); },
      get: function () { return state.a.retireAge; }, set: function (v) { state.a.retireAge = +v; }
    },
    {
-      key: 'spend', title: 'Planned annual spending in retirement', hint: 'Today’s dollars, after tax. Be honest — this is the number that decides everything.',
+      key: 'spend', titleK: 'q.spend.title', hintK: 'q.spend.hint',
      type: 'number', min: 10000, max: 5e5, money: true,
      get: function () { return state.a.spendingAnnual; }, set: function (v) { state.a.spendingAnnual = +v; }
    },
    {
-      key: 'cppstart', title: 'Start CPP at…', hint: function () {
+      key: 'cppstart', titleK: 'q.cppstart.title', hint: function () {
-        var m = { 60: '−36% for life', 65: 'Full rate', 70: '+42% for life' };
+        var m = { 60: 'q.cppstart.m60', 65: 'q.cppstart.m65', 70: 'q.cppstart.m70' };
-        return 'Age ' + state.a.cppStartAge + ': ' + (m[state.a.cppStartAge] || 'custom adjustment');
+        return t('q.cppstart.hint', { age: state.a.cppStartAge, adj: t(m[state.a.cppStartAge] || 'q.cppstart.mCustom') });
      },
-      type: 'opts', opts: [[60, '60', '−36% for life'], [65, '65', 'full rate'], [70, '70', '+42% for life']],
+      type: 'opts', opts: [[60, '60', 'q.cppstart.os60'], [65, '65', 'q.cppstart.os65'], [70, '70', 'q.cppstart.os70']],
      get: function () { return state.a.cppStartAge; }, set: function (v) { state.a.cppStartAge = +v; }
    },
    {
-      key: 'oasstart', title: 'Start OAS at…', hint: 'Deferring to 70 is +36% for life, plus a bigger GIS window.',
+      key: 'oasstart', titleK: 'q.oasstart.title', hintK: 'q.oasstart.hint',
-      type: 'opts', opts: [[65, '65', 'on eligibility'], [70, '70', '+36% for life']],
+      type: 'opts', opts: [[65, '65', 'q.oasstart.os65'], [70, '70', 'q.oasstart.os70']],
      get: function () { return state.a.oasStartAge; }, set: function (v) { state.a.oasStartAge = +v; }
    },
    {
-      key: 'extra', title: 'Other income', hint: 'DB pension, rental, royalties… leave 0 if none.', type: 'fields', fields: [
+      key: 'extra', titleK: 'q.extra.title', hintK: 'q.extra.hint', type: 'fields', fields: [
-        { label: 'Pension $/yr', key: 'pensionAnnual' }, { label: 'Rental $/yr', key: 'rentalAnnual' }, { label: 'Other $/yr', key: 'otherAnnual' }
+        { labelK: 'q.extra.pension', key: 'pensionAnnual' }, { labelK: 'q.extra.rental', key: 'rentalAnnual' }, { labelK: 'q.extra.other', key: 'otherAnnual' }
      ],
      get: function (f) { return state.a[f]; }, set: function (f, v) { state.a[f] = +v; }
    },
    {
-      key: 'assumptions', title: 'Assumptions', hint: 'Real (above-inflation) returns. Defaults match a balanced portfolio.', type: 'sliders', sliders: [
+      key: 'assumptions', titleK: 'q.assumptions.title', hintK: 'q.assumptions.hint', type: 'sliders', sliders: [
-        { label: 'Return before retirement', key: 'realReturnPre', min: 0, max: 8, step: 0.25, fmt: pct2 },
+        { labelK: 'q.assumptions.pre', key: 'realReturnPre', min: 0, max: 8, step: 0.25, fmt: pct2 },
-        { label: 'Return in retirement', key: 'realReturnPost', min: 0, max: 6, step: 0.25, fmt: pct2 },
+        { labelK: 'q.assumptions.post', key: 'realReturnPost', min: 0, max: 6, step: 0.25, fmt: pct2 },
-        { label: 'Inflation', key: 'inflation', min: 0, max: 5, step: 0.25, fmt: pct2 },
+        { labelK: 'q.assumptions.inf', key: 'inflation', min: 0, max: 5, step: 0.25, fmt: pct2 },
-        { label: 'Plan to age', key: 'lifeExp', min: 80, max: 100, step: 1, fmt: function (v) { return v + ' yrs'; } }
+        { labelK: 'q.assumptions.life', key: 'lifeExp', min: 80, max: 100, step: 1, fmt: function (v) { return t('q.assumptions.yrs', { v: v }); } }
      ],
      get: function (f) { return state.a[f]; }, set: function (f, v) { state.a[f] = +v; }
    },
    {
-      key: 'vision', title: 'What are you retiring toward?', hint: 'Pick a few. We’ll paint your plan with it.',
+      key: 'vision', titleK: 'q.vision.title', hintK: 'q.vision.hint',
      type: 'chips', opts: INTERESTS,
      get: function () { return state.a.interests; },
      set: function (v) { state.a.interests = v; }
    }
  ];
  function pct2(v) { return v.toFixed(2).replace(/0$/, '') + '%'; }
  function visibleSteps() { return STEPS.filter(function (s) { return !s.show || s.show(); }); }
@@ -210,37 +214,37 @@
    if (state.step >= vs.length) state.step = vs.length - 1;
    var s = vs[state.step];
    $('#prog-bar').style.width = Math.round((state.step / vs.length) * 100) + '%';
-    $('#step-count').textContent = (state.step + 1) + ' / ' + vs.length;
+    $('#step-count').textContent = t('quiz.stepCount', { i: state.step + 1, n: vs.length });
    $('#btn-back').style.visibility = state.step === 0 ? 'hidden' : 'visible';
-    btnNext.textContent = state.step === vs.length - 1 ? 'See my plan →' : 'Next →';
+    btnNext.textContent = state.step === vs.length - 1 ? t('quiz.seePlan') : t('quiz.next');
-    var hintTxt = typeof s.hint === 'function' ? s.hint() : (s.hint || '');
+    var hintTxt = typeof s.hint === 'function' ? s.hint() : (s.hintK ? t(s.hintK) : '');
-    var h = '<h2>' + s.title + '</h2>' + (hintTxt ? '<p class="hint">' + hintTxt + '</p>' : '');
+    var h = '<h2>' + t(s.titleK) + '</h2>' + (hintTxt ? '<p class="hint">' + hintTxt + '</p>' : '');
    if (s.type === 'grid') {
      h += '<div class="opts">' + s.opts.map(function (o) {
-        return '<button class="opt' + (s.get() === o[0] ? ' sel' : '') + '" data-v="' + o[0] + '">' + o[1] + '</button>';
+        return '<button class="opt' + (s.get() === o[0] ? ' sel' : '') + '" data-v="' + o[0] + '">' + t(o[1]) + '</button>';
      }).join('') + '</div>';
    } else if (s.type === 'opts') {
      h += '<div class="opts">' + s.opts.map(function (o) {
-        return '<button class="opt' + (String(s.get()) === String(o[0]) ? ' sel' : '') + '" data-v="' + o[0] + '">' + o[1] + (o[2] ? '<small>' + o[2] + '</small>' : '') + '</button>';
+        return '<button class="opt' + (String(s.get()) === String(o[0]) ? ' sel' : '') + '" data-v="' + o[0] + '">' + t(o[1]) + (o[2] ? '<small>' + t(o[2]) + '</small>' : '') + '</button>';
      }).join('') + '</div>';
    } else if (s.type === 'chips') {
      var cur = s.get() || [];
      h += '<div class="chips-pick">' + s.opts.map(function (o) {
-        return '<button class="opt' + (cur.indexOf(o[0]) >= 0 ? ' sel' : '') + '" data-v="' + o[0] + '">' + o[1] + '</button>';
+        return '<button class="opt' + (cur.indexOf(o[0]) >= 0 ? ' sel' : '') + '" data-v="' + o[0] + '">' + t(o[1]) + '</button>';
      }).join('') + '</div>';
    } else if (s.type === 'number') {
-      h += '<div class="fld"><input type="number" id="f1" value="' + (s.get() == null ? '' : s.get()) + '" min="' + (s.min != null ? s.min : 0) + '" max="' + (s.max != null ? s.max : 1e9) + '" inputmode="numeric" ' + (s.money ? 'placeholder="0"' : 'placeholder="' + s.max + '"') + '></div>';
+      h += '<div class="fld"><input type="number" id="f1" value="' + (s.get() == null ? '' : s.get()) + '" min="' + (s.min != null ? s.min : 0) + '" max="' + (s.max != null ? s.max : 1e9) + '" inputmode="numeric" ' + (s.money ? 'placeholder="0"' : 'placeholder="' + fmtInt(s.max) + '"') + '></div>';
    } else if (s.type === 'fields') {
      h += s.fields.map(function (f, i) {
-        return '<div class="fld"><label>' + f.label + ' <span class="unit">($)</span></label><input type="number" id="f' + (i + 1) + '" data-k="' + f.key + '" value="' + (s.get(f.key) == null ? '' : s.get(f.key)) + '" min="0" inputmode="numeric" placeholder="0"></div>';
+        return '<div class="fld"><label>' + t(f.labelK) + ' <span class="unit">' + t('fields.unit') + '</span></label><input type="number" id="f' + (i + 1) + '" data-k="' + f.key + '" value="' + (s.get(f.key) == null ? '' : s.get(f.key)) + '" min="0" inputmode="numeric" placeholder="0"></div>';
      }).join('');
    } else if (s.type === 'slider') {
      h += '<div class="range-row"><span class="range-val" id="sv">' + s.fmt(s.get()) + '</span></div><input type="range" id="f1" min="' + s.min + '" max="' + s.max + '" step="' + s.step + '" value="' + s.get() + '">';
    } else if (s.type === 'sliders') {
      h = s.sliders.map(function (sl) {
-        return '<div class="fld"><label>' + sl.label + ' <span class="unit" style="float:right;font-weight:700;color:var(--blue)">' + sl.fmt(+s.get(sl.key)) + '</span></label><input type="range" data-k="' + sl.key + '" min="' + sl.min + '" max="' + sl.max + '" step="' + sl.step + '" value="' + s.get(sl.key) + '"></div>';
+        return '<div class="fld"><label>' + t(sl.labelK) + ' <span class="unit" style="float:right;font-weight:700;color:var(--blue)">' + sl.fmt(+s.get(sl.key)) + '</span></label><input type="range" data-k="' + sl.key + '" min="' + sl.min + '" max="' + sl.max + '" step="' + sl.step + '" value="' + s.get(sl.key) + '"></div>';
      }).join('');
    }
    stepBody.innerHTML = h;
@@ -285,9 +289,9 @@
    if (s.type === 'number') {
      var v = +s.get();
      if (s.get() === null || s.get() === '' || isNaN(v) || v < s.min || v > s.max) {
-        ok = false; msg = 'Enter a number between ' + s.min + ' and ' + s.max + '.';
+        ok = false; msg = t('v.number', { min: fmtInt(s.min), max: fmtInt(s.max) });
      }
-    } else if (s.type === 'grid' && !s.get()) { ok = false; msg = 'Pick a province to continue.'; }
+    } else if (s.type === 'grid' && !s.get()) { ok = false; msg = t('v.province'); }
    btnNext.disabled = !ok;
    var old = stepBody.querySelector('.err'); if (old) old.remove();
    if (!ok && msg) { var d = document.createElement('div'); d.className = 'err'; d.textContent = msg; stepBody.appendChild(d); }
@@ -304,23 +308,23 @@
    var atRet = proj.years.filter(function (r) { return r.age === Math.floor(p.retireAge); })[0] || draw[0];
    var g67 = proj.years.filter(function (r) { return r.age === 67; })[0] || { cpp: 0, oasGross: 0 };
    var chips = [
-      ['Savings at retirement', money(atRet ? atRet.totalBal : 0), ''],
+      [t('panel.savingsAt'), money(atRet ? atRet.totalBal : 0), ''],
-      ['CPP + OAS at 67', money(g67.cpp + g67.oasGross) + '/yr', ''],
+      [t('panel.cppOas67'), money(g67.cpp + g67.oasGross) + t('unit.yr'), ''],
-      ['Money lasts to', proj.depletionAge ? 'runs out ~' + proj.depletionAge : (p.lifeExp + '+'), proj.depletionAge ? 'bad' : 'good'],
+      [t('panel.lastsTo'), proj.depletionAge ? t('panel.runsOut', { age: proj.depletionAge }) : (p.lifeExp + '+'), proj.depletionAge ? 'bad' : 'good'],
-      ['Lifetime tax', k(proj.totalTax + proj.totalClawback), '']
+      [t('panel.lifetimeTax'), k(proj.totalTax + proj.totalClawback), '']
    ];
    $('#panel-chips').innerHTML = chips.map(function (c) {
      return '<div class="chip"><div class="k">' + c[0] + '</div><div class="v ' + c[2] + '">' + c[1] + '</div></div>';
    }).join('');
-    var ins = '';
+    var ins;
-    if (proj.depletionAge) ins = '⚠️ On this path you run out of money around age <b>' + proj.depletionAge + '</b>. Keep answering — the plan ends with three concrete ways to close the gap.';
+    if (proj.depletionAge) ins = t('i.depletion', { age: proj.depletionAge });
-    else if (p.cppStartAge < 65) ins = 'CPP at ' + p.cppStartAge + ' is permanently reduced — deferring to 70 is a +42% inflation-proof raise. Move the slider later and watch the panel.';
+    else if (p.cppStartAge < 65) ins = t('i.cppEarly', { age: p.cppStartAge });
-    else if (p.oasStartAge >= 70) ins = 'OAS at ' + p.oasStartAge + ': +36% for life, plus a bigger GIS window in between. Good trade for most people.';
+    else if (p.oasStartAge >= 70) ins = t('i.oasLate', { age: p.oasStartAge });
-    else if (p.province === 'QC') ins = 'ℹ️ Québec: QPP is <b>not</b> modelled — add your QPP estimate as “Pension $/yr”. QPP typically replaces ~35% of income.';
+    else if (p.province === 'QC') ins = t('i.qc');
-    else if (p.tfsa < 15000 && p.rrsp > 200000) ins = 'You’ll hit the RRIF-minimum tax cliff at 71. TFSA room now softens it later — check the gap cards.';
+    else if (p.tfsa < 15000 && p.rrsp > 200000) ins = t('i.cliff');
-    else if (p.household === 'couple') ins = 'With pension splitting + household GIS, your joint taxes drop — the panel shows the joint total.';
+    else if (p.household === 'couple') ins = t('i.couple');
-    else ins = 'Live numbers — change any answer and this panel moves.';
+    else ins = t('i.live');
    $('#panel-insight').innerHTML = ins;
    syncSheetH(); /* panel content just changed height — keep --sheet-h live (round 2 Fix 1) */
  }
@@ -349,39 +353,40 @@
    for (i = 0; i <= yt; i++) {
      var v = ymax * i / yt, y = Y(v);
      s += '<line x1="' + L + '" x2="' + (W - R) + '" y1="' + y.toFixed(1) + '" y2="' + y.toFixed(1) + '" stroke="#eef2f8"/>' +
-        '<text x="' + (L - 6) + '" y="' + (y + 4).toFixed(1) + '" text-anchor="end" font-size="13" fill="#8a97ad">' + (opts && opts.money === false ? v : k(v)) + '</text>';
+        '<text x="' + (L - 6) + '" y="' + (y + 4).toFixed(1) + '" text-anchor="end" font-size="13" fill="#8a97ad">' + (opts && opts.money === false ? fmtInt(v) : k(v)) + '</text>';
    }
    var step = a1 - a0 > 34 ? 10 : 5;
    for (var a = Math.ceil(a0 / step) * step; a <= a1; a += step) {
      var x = X(a);
-      s += '<text x="' + x.toFixed(1) + '" y="' + (H - B + 16) + '" text-anchor="middle" font-size="13" fill="#8a97ad">' + a + '</text>';
+      s += '<text x="' + x.toFixed(1) + '" y="' + (H - B + 16) + '" text-anchor="middle" font-size="13" fill="#8a97ad">' + fmtInt(a) + '</text>';
    }
-    s += '<text x="' + (W / 2) + '" y="' + (H - 4) + '" text-anchor="middle" font-size="12" fill="#8a97ad">age</text>';
+    s += '<text x="' + (W / 2) + '" y="' + (H - 4) + '" text-anchor="middle" font-size="12" fill="#8a97ad">' + t('chart.age') + '</text>';
    return s;
  }
  function svgWrap(inner) {
    return '<svg viewBox="0 0 ' + W + ' ' + H + '" role="img" xmlns="http://www.w3.org/2000/svg">' + inner + '</svg>';
  }
  function legend(items) {
-    return '<div class="legend">' + items.map(function (t) {
+    return '<div class="legend">' + items.map(function (x) {
-      return '<span><i style="background:' + t[1] + '"></i>' + t[0] + '</span>';
+      return '<span><i style="background:' + x[1] + '"></i>' + x[0] + '</span>';
    }).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. */
+     Card titles/captions live here (i18n keys) so every render keeps the header in the
-  var CHART_SWIPE = '<span class="swipe">swipe →</span>';
+     active language. */
  function chartSwipe() { return '<span class="swipe">' + t('chart.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>',
+    '#g1': function () { return '<h3>' + t('g1.h') + '</h3><p class="cap">' + t('g1.cap') + '</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>',
+    '#g2': function () { return '<h3>' + t('g2.h') + '</h3><p class="cap">' + t('g2.cap') + '</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>',
+    '#g3': function () { return '<h3>' + t('g3.h') + '</h3><p class="cap">' + t('g3.cap') + '</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>'; }
+    '#g4': function () { return '<h3>' + t('g4.h') + '</h3><p class="cap">' + t('g4.cap', { age: state.a.lifeExp }) + '</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>';
+    return '<div class="chart-h"><div>' + hd + '</div>' + chartSwipe() + '</div>';
  }
  function chart(sel, inner, legendItems) {
    $(sel).innerHTML = chartH(sel) + (inner || '') + (legendItems ? legend(legendItems) : '');
@@ -400,24 +405,24 @@
    if (proj.depletionAge) {
      var x = X(proj.depletionAge);
      inner += '<line x1="' + x + '" x2="' + x + '" y1="' + T + '" y2="' + (H - B) + '" stroke="#dc2626" stroke-dasharray="4 4" stroke-width="2"/>' +
-        '<text x="' + (x + 5) + '" y="' + (T + 12) + '" font-size="13" fill="#dc2626" font-weight="700">runs out ≈ ' + proj.depletionAge + '</text>';
+        '<text x="' + (x + 5) + '" y="' + (T + 12) + '" font-size="13" fill="#dc2626" font-weight="700">' + t('chart.runsOut', { age: fmtInt(proj.depletionAge) }) + '</text>';
    }
    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>';
+      '<text x="' + (X(ret) + 4) + '" y="' + (H - B - 6) + '" font-size="12" fill="#94a3b8">' + t('chart.retire') + '</text>';
-    chart('#g1', svgWrap(inner), [['Total savings (today’s $)', COL.bal]]);
+    chart('#g1', svgWrap(inner), [[t('g1.legend'), COL.bal]]);
  }
  function g2_income(proj, p) {
    var yrs = proj.years.filter(function (r) { return r.phase === 'draw'; });
-    if (!yrs.length) { chart('#g2', '<p class="cap">Retirement after your plan horizon.</p>'); return; }
+    if (!yrs.length) { chart('#g2', '<p class="cap">' + t('g2.empty') + '</p>'); return; }
    var ages = yrs.map(function (r) { return r.age; });
    var X = sc(ages, ages[0], ages[ages.length - 1]);
    var series = [
-      ['CPP', COL.cpp, yrs.map(function (r) { return r.cpp; })],
+      [t('g2.cpp'), COL.cpp, yrs.map(function (r) { return r.cpp; })],
-      ['OAS (net)', COL.oas, yrs.map(function (r) { return Math.max(0, r.oasGross - r.oasClawback); })],
+      [t('g2.oas'), COL.oas, yrs.map(function (r) { return Math.max(0, r.oasGross - r.oasClawback); })],
-      ['GIS', COL.gis, yrs.map(function (r) { return r.gis; })],
+      [t('g2.gis'), COL.gis, yrs.map(function (r) { return r.gis; })],
-      ['From savings', COL.wdr, yrs.map(function (r) { return r.rrifWithdrawal + r.nonregW + r.tfsaW; })]
+      [t('g2.savings'), COL.wdr, yrs.map(function (r) { return r.rrifWithdrawal + r.nonregW + r.tfsaW; })]
    ];
    var n = ages.length, tot = [], i, acc;
    for (i = 0; i < n; i++) tot[i] = series.reduce(function (s, se) { return s + se[2][i]; }, 0);
@@ -446,26 +451,26 @@
    var first = yrs.map(function (r, i) { return r.unfunded > 1 ? ages[i] : null; }).filter(function (x) { return x; })[0];
    if (first) {
      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>';
+        '<text x="' + (X(first) + 6) + '" y="' + (Y(need[ages.indexOf(first)]) - 6) + '" font-size="13" fill="#dc2626" font-weight="700">' + t('g3.shortfall', { age: fmtInt(first) }) + '</text>';
    }
-    chart('#g3', svgWrap(inner), [['Cash you’ll have (after tax)', COL.cash], ['Planned spending', COL.need]]);
+    chart('#g3', svgWrap(inner), [[t('g3.cash'), COL.cash], [t('g3.need'), COL.need]]);
  }
  var g4cache = null;
  function g4_bars(p, fast) {
-    if (g4cache && fast) { drawG4(g4cache); $('#g4-note').textContent = 'Computed from the current answers.'; return; }
+    if (g4cache && fast) { drawG4(g4cache); $('#g4-note').textContent = t('g4.computed'); return; }
-    chart('#g4', '<p class="cap">Calculating scenarios…</p>');
+    chart('#g4', '<p class="cap">' + t('g4.calc') + '</p>');
    setTimeout(function () {
      var scen = [
-        ['Current plan', p],
+        [t('g4.s0'), p],
-        ['+$200/mo to RRSP', Object.assign({}, p, { monthlyContribution: p.monthlyContribution + 200, employerMatchMonthly: p.employerMatchMonthly })],
+        [t('g4.s1'), Object.assign({}, p, { monthlyContribution: p.monthlyContribution + 200, employerMatchMonthly: p.employerMatchMonthly })],
-        ['Retire 2 years later', Object.assign({}, p, { retireAge: Math.min(p.retireAge + 2, 75) })],
+        [t('g4.s2'), Object.assign({}, p, { retireAge: Math.min(p.retireAge + 2, 75) })],
-        ['CPP at 70', Object.assign({}, p, { cppStartAge: 70 })]
+        [t('g4.s3'), Object.assign({}, p, { cppStartAge: 70 })]
      ];
      var res = scen.map(function (s) { return [s[0], E.sustainableSpending(s[1]).annual]; });
      g4cache = res; drawG4(res);
      var best = res.slice().sort(function (a, b) { return b[1] - a[1]; })[0];
-      $('#g4-note').textContent = 'Biggest lever here: “' + best[0] + '” → ' + money(best[1]) + '/yr, forever.';
+      $('#g4-note').textContent = t('g4.best', { name: best[0], money: money(best[1]) });
    }, 30);
  }
  function drawG4(res) {
@@ -501,6 +506,10 @@
    .catch(function () { visionManifest = visionManifest || null; })
    .then(function () { if (state.screen === 'results') renderVision(state.a); });
  function capText(slug) {
    var cap = CAPTIONS[slug] || CAPTIONS.hero;
    return cap[getLang()] || cap.en;
  }
  function renderVision(a) {
    var el = $('#vision-card');
    var provSlugs = PROV_SLUGS[a.province] || [];
@@ -517,13 +526,14 @@
    var best = keys.map(function (s) { return [s, score(s)]; }).sort(function (x, y) { return y[1] - x[1]; })[0];
    if (!best) best = ['hero', 0];
    var slug = best[1] > 0 ? best[0] : 'hero';
-    var cap = CAPTIONS[slug] || CAPTIONS.hero;
+    var cap = capText(slug);
    var label = t('vision.label', { slug: slug.replace(/^\w/, function (c) { return c.toUpperCase(); }) });
    var img = visionManifest && visionManifest[slug] ? 'vision/' + visionManifest[slug] : null;
    if (img) {
      el.className = 'vision';
-      el.innerHTML = '<img src="' + img + '" alt="Your retirement vision" loading="lazy">' +
+      el.innerHTML = '<img src="' + img + '" alt="' + t('vision.alt') + '" loading="lazy">' +
-        '<div class="vcap"><b>Retirement Vision — ' + slug.replace(/^\w/, function (c) { return c.toUpperCase(); }) + '</b><br>' + cap +
+        '<div class="vcap"><b>' + label + '</b><br>' + cap +
-        ' <span style="opacity:.6;font-size:12px">AI-generated preview (z-image-turbo). Your numbers: below.</span></div>';
+        ' <span style="opacity:.6;font-size:12px">' + t('vision.ai') + '</span></div>';
      var im = el.querySelector('img');
      im.onerror = function () { grad(el, slug, cap); };
    } else grad(el, slug, cap);
@@ -532,7 +542,7 @@
    el.className = 'vision grad';
    var h = 0; for (var i = 0; i < slug.length; i++) h = (h * 31 + slug.charCodeAt(i)) >>> 0;
    el.style.background = GRADS[h % GRADS.length];
-    el.innerHTML = '<div class="vcap"><b>Retirement Vision — ' + slug.replace(/^\w/, function (c) { return c.toUpperCase(); }) + '</b><br>' + cap + '</div>';
+    el.innerHTML = '<div class="vcap"><b>' + t('vision.label', { slug: slug.replace(/^\w/, function (c) { return c.toUpperCase(); }) }) + '</b><br>' + cap + '</div>';
  }
  /* ---------- results ---------- */
@@ -542,14 +552,13 @@
    var ss = E.sustainableSpending(p).annual;
    var v = $('#verdict'), vh = $('#verdict-h');
    vh.textContent = t('r.verdictH');
    if (proj.depletionAge) {
      v.className = 'verdict bad';
-      v.innerHTML = 'On this exact path you run out of money at <b>age ' + proj.depletionAge + '</b>. ' +
+      v.innerHTML = t('r.depletion', { age: fmtInt(proj.depletionAge), ss: money(ss), le: p.lifeExp, sp: money(p.spendingAnnual) });
        'You can safely spend <b>' + money(ss) + '/yr</b> to 95 (you’re planning ' + money(p.spendingAnnual) + '). The three cards below close the gap — each one, by itself.';
    } else {
      v.className = 'verdict good';
-      v.innerHTML = 'This plan survives to <b>95</b> with ' + k(proj.finalBal) + ' left over — you can sustain about <b>' + money(ss) + '/yr</b>. ' +
+      v.innerHTML = t('r.good', { le: p.lifeExp, bal: k(proj.finalBal), ss: money(ss), hr: money(ss - p.spendingAnnual) });
        'That’s ' + money(ss - p.spendingAnnual) + '/yr of headroom above your plan.';
    }
    /* 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). */
@@ -557,22 +566,22 @@
    var cards = '';
    if (rec.gapAnnual > 0) {
-      cards += '<div class="gcard warn"><h4>The gap</h4><div class="big">' + money(rec.gapAnnual) + '/yr</h4><p>between your planned spending and what the plan can safely fund.</p></div>';
+      cards += '<div class="gcard warn"><h4>' + t('g.gapH') + '</h4><div class="big">' + money(rec.gapAnnual) + t('unit.yr') + '</h4><p>' + t('g.gapP') + '</p></div>';
-      cards += '<div class="gcard save"><h4>💪 Save more</h4><div class="big">+' + money(rec.extraMonthly) + '/mo</div>' +
+      cards += '<div class="gcard save"><h4>' + t('g.saveH') + '</h4><div class="big">+' + money(rec.extraMonthly) + t('unit.mo') + '</div>' +
-        (rec.extraMonthly > 0 ? '<p>extra RRSP room from today closes the gap entirely. ~' + pct(rec.extraMonthly / Math.max(1, p.income / 12)) + ' of income.</p>' : '<p>Not closable by saving alone — see the other two levers.</p>') + '</div>';
+        (rec.extraMonthly > 0 ? '<p>' + t('g.saveP', { pct: pct(rec.extraMonthly / Math.max(1, p.income / 12)) }) + '</p>' : '<p>' + t('g.saveP2') + '</p>') + '</div>';
-      cards += '<div class="gcard"><h4>🕰 Work longer</h4><div class="big">' + (rec.retireDelayYears ? '+' + rec.retireDelayYears + (rec.retireDelayYears === 1 ? ' year' : ' years') : '—') + '</div>' +
+      cards += '<div class="gcard"><h4>' + t('g.workH') + '</h4><div class="big">' + (rec.retireDelayYears ? '+' + rec.retireDelayYears + ' ' + t(rec.retireDelayYears === 1 ? 'g.workY1' : 'g.workYN', { n: rec.retireDelayYears }) : '—') + '</div>' +
-        (rec.retireDelayYears ? '<p>retiring at ' + Math.min(p.retireAge + rec.retireDelayYears, 75) + ' instead of ' + p.retireAge + ' closes the gap — and CPP/OAS grow while you do.</p>' : '<p>Within 10 extra years, delaying retirement alone can’t close this gap — combine levers.</p>') + '</div>';
+        (rec.retireDelayYears ? '<p>' + t('g.workP', { at: Math.min(p.retireAge + rec.retireDelayYears, 75), now: p.retireAge }) + '</p>' : '<p>' + t('g.workP2') + '</p>') + '</div>';
-      cards += '<div class="gcard"><h4>🌿 Trim spending</h4><div class="big">−' + money(rec.spendingReduction) + '/yr</div><p>to ' + money(Math.max(0, p.spendingAnnual - rec.spendingReduction)) + '. The cheapest lever, and the one nobody talks about at 45.</p></div>';
+      cards += '<div class="gcard"><h4>' + t('g.trimH') + '</h4><div class="big">−' + money(rec.spendingReduction) + t('unit.yr') + '</div><p>' + t('g.trimP', { to: money(Math.max(0, p.spendingAnnual - rec.spendingReduction)) }) + '</p></div>';
    } else {
-      cards = '<div class="gcard save"><h4>✅ Status</h4><div class="big">On track</div><p>No gap at ' + money(p.spendingAnnual) + '/yr. Consider testing a bigger number with the what-if sliders.</p></div>' +
+      cards = '<div class="gcard save"><h4>' + t('g.statusH') + '</h4><div class="big">' + t('g.onTrack') + '</div><p>' + t('g.statusP', { sp: money(p.spendingAnnual) }) + '</p></div>' +
-        '<div class="gcard"><h4>Headroom</h4><div class="big">' + money(ss - p.spendingAnnual) + '/yr</div><p>you could add to spending — or save for the cottage.</p></div>' +
+        '<div class="gcard"><h4>' + t('g.headH') + '</h4><div class="big">' + money(ss - p.spendingAnnual) + t('unit.yr') + '</div><p>' + t('g.headP') + '</p></div>' +
-        '<div class="gcard save"><h4>🛡 Stress-tested</h4><div class="big">' + money(ss) + '/yr</div><p>sustainable real spending to ' + p.lifeExp + ' with RRIF minimums and taxes enforced.</p></div>';
+        '<div class="gcard save"><h4>' + t('g.stressH') + '</h4><div class="big">' + money(ss) + t('unit.yr') + '</div><p>' + t('g.stressP', { age: p.lifeExp }) + '</p></div>';
    }
    $('#gap-cards').innerHTML = cards;
    g1_balance(proj); g2_income(proj, p); g3_cash(proj); g4_bars(p, fast);
-    var tbl = '<tr><th>Age</th><th>RRSP</th><th>TFSA</th><th>Non-reg</th><th>Total</th><th>Withdraw</th><th>CPP</th><th>OAS</th><th>GIS</th><th>Tax+claw</th><th>Unfunded</th></tr>';
+    var tbl = '<tr><th>' + t('t.age') + '</th><th>' + t('t.rrsp') + '</th><th>' + t('t.tfsa') + '</th><th>' + t('t.nonreg') + '</th><th>' + t('t.total') + '</th><th>' + t('t.wdr') + '</th><th>' + t('t.cpp') + '</th><th>' + t('t.oas') + '</th><th>' + t('t.gis') + '</th><th>' + t('t.tax') + '</th><th>' + t('t.unfunded') + '</th></tr>';
    var n = 0;
    proj.years.forEach(function (r) {
      if (r.phase !== 'draw' && r.age % 5 !== 0) return; n++;
@@ -581,10 +590,13 @@
        '</td><td>' + k(r.cpp) + '</td><td>' + k(r.oasGross - r.oasClawback) + '</td><td>' + k(r.gis) + '</td><td>' + k(r.tax + r.oasClawback) +
        '</td><td>' + (r.unfunded > 1 ? k(r.unfunded) : '—') + '</td></tr>';
    });
-    $('#yr-table').innerHTML = tbl; $('#yr-n').textContent = n;
+    $('#yr-table').innerHTML = tbl; $('#yr-summary').innerHTML = t('r.yearlySummary', { n: n });
-    var m2 = function (v) { return '$' + Number(v).toLocaleString('en-CA', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); };
+    var m2 = fmtMoney2;
-    $('#stamp').textContent = 'tax rates 2026 · CPP max ' + m2(C.cppMax65Monthly.value) + '/mo · OAS max ' + m2(C.oasMax6574Monthly.value) + '/mo · GIS max ' + m2(C.gisMaxSingleMonthly.value) + '/mo · constants as of ' + C.asOf + ' · RRIF table CRA Reg. 8301(1)';
+    $('#stamp').textContent = t('r.stamp', {
      cpp: m2(C.cppMax65Monthly.value), oas: m2(C.oasMax6574Monthly.value),
      gis: m2(C.gisMaxSingleMonthly.value), asOf: C.asOf
    });
    var a = state.a;
    $('#wi-spend').value = (state.wi.spend != null ? state.wi.spend : a.spendingAnnual);
@@ -598,9 +610,9 @@
  }
  function wiLabels() {
    $('#wi-spend-o').textContent = money(+$('#wi-spend').value);
-    $('#wi-ctrb-o').textContent = money(+$('#wi-ctrb').value) + '/mo';
+    $('#wi-ctrb-o').textContent = money(+$('#wi-ctrb').value) + t('unit.mo');
-    $('#wi-ret-o').textContent = $('#wi-ret').value + ' yrs';
+    $('#wi-ret-o').textContent = t('r.wiYears', { v: $('#wi-ret').value });
-    $('#wi-cpp-o').textContent = 'age ' + $('#wi-cpp').value;
+    $('#wi-cpp-o').textContent = t('r.wiAge', { v: $('#wi-cpp').value });
  }
  var wiTimer = null;
  function wiChange(key, el) {
@@ -622,7 +634,7 @@
  };
  $('#btn-edit').onclick = function () { showScreen('quiz'); renderStep(); liveUpdate(); };
  $('#btn-restart').onclick = function () {
-    if (!confirm('Start over? Clears saved answers in this browser.')) return;
+    if (!confirm(t('restart.confirm'))) return;
    try { localStorage.removeItem(LS); } catch (e) { }
    history.replaceState(null, '', location.pathname);
    state.a = defaults(); state.wi = {}; state.step = 0; g4cache = null;
@@ -631,12 +643,12 @@
  $('#btn-print').onclick = function () { window.print(); };
  $('#btn-share').onclick = function () {
    var url = location.origin + location.pathname + '#p=' + encState();
-    var restore = function () { $('#btn-share').textContent = '🔗 Copy link with my answers'; };
+    var restore = function () { $('#btn-share').textContent = t('res.share'); };
-    var done = function () { $('#btn-share').textContent = '✅ Link copied'; setTimeout(restore, 1800); };
+    var done = function () { $('#btn-share').textContent = t('share.copied'); setTimeout(restore, 1800); };
    /* Fix 7: never claim "copied" when the clipboard API is missing or rejected. */
    var fail = function () {
-      window.prompt('Copy your link:', url);
+      window.prompt(t('share.prompt'), url);
-      $('#btn-share').textContent = '🔗 Link shown — copy it';
+      $('#btn-share').textContent = t('share.shown');
      setTimeout(restore, 1800);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(url).then(done, fail);
@@ -673,6 +685,16 @@
    syncScrim();
    syncSheetH();
  });
  /* Language toggle (i18n.js setLang → applyI18n → this): rebuild the active screen in the
     new language. Static DOM is already handled by applyI18n; charts/cards/vision need a re-render. */
  window.__onLangChange = function () {
    g4cache = null;
    if (state.screen === 'quiz') { renderStep(); updatePanel(); }
    else if (state.screen === 'results') { renderResults(false); }
    save();
  };
  var savedScreen = state.screen, savedStep = state.step;
  showScreen(savedScreen);
  if (savedScreen === 'quiz') { renderStep(); liveUpdate(); }
@@ -0,0 +1,558 @@
 /* Retire Planner i18n — dependency-free, loads before app.js.
   EN/FR dictionary (dot-path keys), t() with {placeholder} interpolation, lang state
   (payload > saved state > navigator), Intl formatters, applyI18n(), header EN|FR toggle.
   Exposes globals: I18N, t, getLang, setLang, detectLang, applyI18n,
   fmtMoney, fmtMoneyK, fmtMoney2, fmtInt, fmtPct. */
 (function () {
  'use strict';
  var LS_KEY = 'retire-planner-v1';
  var MINUS = '\u2212';           /* − */
  var NB = '\u00a0';              /* no-break space (French punctuation) */
  var NNB = '\u202f';             /* narrow no-break space (French units, matches Intl fr-CA) */
  /* ---------- dictionary ---------- */
  var EN = {
    doc: {
      title: 'Retire Planner — Canadian retirement, modelled properly',
      desc: 'A Canadian retirement calculator with real CPP/OAS/GIS/RRIF mechanics and live 2026 tax rates. 100% client-side — answers never leave your browser.'
    },
    brand: 'Retire Planner',
    hdr: {
      pill: '🔒 100% client-side — answers never leave your browser',
      pillTitle: 'No server, no tracking, no accounts',
      startOver: 'Start over'
    },
    intro: {
      h1: 'Will you actually run out of money?',
      lede: 'Most Canadian retirement calculators stop at “your RRSP grows at 6%”. This one models <b>real CPP/OAS/GIS/RRIF mechanics</b>, provincial taxes fetched live, and the tax cliff most planners won\'t show you.',
      tick1: 'CPP early/late (−0.6%/mo before 65, +0.7% after), OAS deferral, clawback & GIS',
      tick2: 'Live 2026 federal + all 13 province/territory tax tables',
      tick3: 'RRIF minimums at 71, pension splitting, tax-smart drawdown',
      tick4: 'Couples: joint taxes, split pensions, household GIS',
      privacy: '🔒 100% client-side — answers never leave your browser. No account, no tracking, nothing is sent anywhere.',
      cta: 'Build my retirement plan →',
      fine: '~2 minutes. Works on one screen at a time; you can change anything later.'
    },
    quiz: {
      back: '← Back',
      next: 'Next →',
      seePlan: 'See my plan →',
      stepCount: '{i} / {n}'
    },
    panel: {
      title: 'Your plan so far',
      savingsAt: 'Savings at retirement',
      cppOas67: 'CPP + OAS at 67',
      lastsTo: 'Money lasts to',
      runsOut: 'runs out ~{age}',
      lifetimeTax: 'Lifetime tax'
    },
    unit: { yr: '/yr', mo: '/mo' },
    fields: { unit: '($)' },
    i: {
      depletion: '⚠️ On this path you run out of money around age <b>{age}</b>. Keep answering — the plan ends with three concrete ways to close the gap.',
      cppEarly: 'CPP at {age} is permanently reduced — deferring to 70 is a +42% inflation-proof raise. Move the slider later and watch the panel.',
      oasLate: 'OAS at {age}: +36% for life, plus a bigger GIS window in between. Good trade for most people.',
      qc: 'ℹ️ Québec: QPP is <b>not</b> modelled — add your QPP estimate as “Pension $/yr”. QPP typically replaces ~35% of income.',
      cliff: 'You’ll hit the RRIF-minimum tax cliff at 71. TFSA room now softens it later — check the gap cards.',
      couple: 'With pension splitting + household GIS, your joint taxes drop — the panel shows the joint total.',
      live: 'Live numbers — change any answer and this panel moves.'
    },
    prov: {
      ON: 'Ontario', BC: 'British Columbia', AB: 'Alberta', SK: 'Saskatchewan',
      MB: 'Manitoba', QC: 'Quebec', NS: 'Nova Scotia', NB: 'New Brunswick',
      NL: 'Newfoundland & Labrador', PE: 'PEI', YT: 'Yukon', NT: 'Northwest Territories', NU: 'Nunavut'
    },
    int: {
      rockies: '🏔 Mountains', maritimes: '🌊 Ocean', toronto: '🏙 Big city',
      dock: '🛶 Lake / dock', muskoka: '🌲 Cottage country', prairies: '🌾 Open sky',
      winter: '⛷ Snow / ski', workshop: '🪵 Workshop', garden: '🌺 Garden',
      travel: '✈️ Travel', quebec: '🇫🇷 Québec'
    },
    q: {
      province: { title: 'Where do you live?', hint: 'Taxes, and your retirement view.' },
      age: { title: 'Your age', hint: 'Years.' },
      household: {
        title: 'Household', hint: 'Couple means joint taxes, pension splitting and household GIS.',
        single: 'Single', couple: 'Couple'
      },
      p_age: { title: 'Partner’s age' },
      p_income: { title: 'Partner’s annual employment income', hint: '$/yr before tax. 0 if not working.' },
      p_savings: {
        title: 'Partner’s savings', hint: 'Current balances, today’s dollars.',
        rrsp: 'RRSP / RRIF', tfsa: 'TFSA', nonreg: 'Non-registered'
      },
      income: { title: 'Your annual employment income', hint: '$/yr. Used to estimate your CPP history.' },
      rrsp: { title: 'RRSP / RRIF balance' },
      savings2: {
        title: 'TFSA and non-registered savings',
        tfsa: 'TFSA', nonreg: 'Non-registered (cash, stocks, mutual funds)'
      },
      contrib: {
        title: 'Monthly savings into RRSP', hint: 'Your contribution + any employer match.',
        you: 'You contribute $/mo', match: 'Employer match $/mo'
      },
      retire: { title: 'Retirement age', hint: 'When you stop earning employment income.', years: '{v} years' },
      spend: { title: 'Planned annual spending in retirement', hint: 'Today’s dollars, after tax. Be honest — this is the number that decides everything.' },
      cppstart: {
        title: 'Start CPP at…', hint: 'Age {age}: {adj}',
        m60: '−36% for life', m65: 'Full rate', m70: '+42% for life', mCustom: 'custom adjustment',
        os60: '−36% for life', os65: 'full rate', os70: '+42% for life'
      },
      oasstart: {
        title: 'Start OAS at…', hint: 'Deferring to 70 is +36% for life, plus a bigger GIS window.',
        os65: 'on eligibility', os70: '+36% for life'
      },
      extra: {
        title: 'Other income', hint: 'DB pension, rental, royalties… leave 0 if none.',
        pension: 'Pension $/yr', rental: 'Rental $/yr', other: 'Other $/yr'
      },
      assumptions: {
        title: 'Assumptions', hint: 'Real (above-inflation) returns. Defaults match a balanced portfolio.',
        pre: 'Return before retirement', post: 'Return in retirement', inf: 'Inflation',
        life: 'Plan to age', yrs: '{v} yrs'
      },
      vision: { title: 'What are you retiring toward?', hint: 'Pick a few. We’ll paint your plan with it.' }
    },
    v: {
      number: 'Enter a number between {min} and {max}.',
      province: 'Pick a province to continue.'
    },
    chart: {
      age: 'age', swipe: 'swipe →',
      runsOut: 'runs out ≈ {age}', retire: 'retire'
    },
    g1: {
      h: 'Will it last? Projected savings',
      cap: 'Total portfolio (RRSP + TFSA + non-registered), in today\'s dollars. Shaded: money running out.',
      legend: 'Total savings (today’s $)'
    },
    g2: {
      h: 'Where retirement income comes from',
      cap: 'CPP, OAS, GIS and what you must withdraw from savings — stacked, after-tax view.',
      empty: 'Retirement after your plan horizon.',
      cpp: 'CPP', oas: 'OAS (net)', gis: 'GIS', savings: 'From savings'
    },
    g3: {
      h: 'Spending vs. what you\'ll actually have',
      cap: 'Annual cash in (income after tax & clawback, plus withdrawals) vs. planned spending.',
      shortfall: 'shortfall from ~{age}',
      cash: 'Cash you’ll have (after tax)', need: 'Planned spending'
    },
    g4: {
      h: 'Four futures, one number',
      cap: 'Sustainable annual spending that lasts to <span id="lifeexp-lbl">{age}</span> under each scenario.',
      calc: 'Calculating scenarios…',
      computed: 'Computed from the current answers.',
      best: 'Biggest lever here: “{name}” → {money}/yr, forever.',
      s0: 'Current plan', s1: '+$200/mo to RRSP', s2: 'Retire 2 years later', s3: 'CPP at 70'
    },
    r: {
      verdictH: 'Your plan, in one line',
      depletion: 'On this exact path you run out of money at <b>age {age}</b>. ' +
        'You can safely spend <b>{ss}/yr</b> to {le} (you’re planning {sp}). The three cards below close the gap — each one, by itself.',
      good: 'This plan survives to <b>{le}</b> with {bal} left over — you can sustain about <b>{ss}/yr</b>. ' +
        'That’s {hr}/yr of headroom above your plan.',
      yearlySummary: 'Year-by-year detail ({n} years)',
      whatif: '<b>Try a what-if</b> — move a slider, watch the plan update',
      stamp: 'tax rates 2026 · CPP max {cpp}/mo · OAS max {oas}/mo · GIS max {gis}/mo · constants as of {asOf} · RRIF table CRA Reg. 8301(1)',
      wiSpend: 'Annual spending', wiCtrb: 'Monthly savings', wiRet: 'Retirement age', wiCpp: 'CPP starts at',
      wiYears: '{v} yrs', wiAge: 'age {v}'
    },
    g: {
      gapH: 'The gap', gapP: 'between your planned spending and what the plan can safely fund.',
      saveH: '💪 Save more',
      saveP: 'extra RRSP room from today closes the gap entirely. ~{pct} of income.',
      saveP2: 'Not closable by saving alone — see the other two levers.',
      workH: '🕰 Work longer', workY1: '{n} year', workYN: '{n} years',
      workP: 'retiring at {at} instead of {now} closes the gap — and CPP/OAS grow while you do.',
      workP2: 'Within 10 extra years, delaying retirement alone can’t close this gap — combine levers.',
      trimH: '🌿 Trim spending', trimP: 'to {to}. The cheapest lever, and the one nobody talks about at 45.',
      statusH: '✅ Status', onTrack: 'On track',
      statusP: 'No gap at {sp}/yr. Consider testing a bigger number with the what-if sliders.',
      headH: 'Headroom', headP: 'you could add to spending — or save for the cottage.',
      stressH: '🛡 Stress-tested', stressP: 'sustainable real spending to {age} with RRIF minimums and taxes enforced.'
    },
    t: {
      age: 'Age', rrsp: 'RRSP', tfsa: 'TFSA', nonreg: 'Non-reg', total: 'Total', wdr: 'Withdraw',
      cpp: 'CPP', oas: 'OAS', gis: 'GIS', tax: 'Tax+claw', unfunded: 'Unfunded'
    },
    d: {
      main: '<b>Estimates only — not financial advice.</b> Simplified model: GIS uses a simplified 50% phase-out; Quebec shown with the 16.5% federal abatement (QPP and Quebec payroll taxes not modelled); DB pensions not modelled; returns are constant real rates; Ontario surtax modelled on base tax.',
      privacy: '🔒 100% client-side — answers never leave your browser. Your answers are saved only in this browser (localStorage).'
    },
    res: {
      print: '🖨 Print / save PDF',
      share: '🔗 Copy link with my answers',
      edit: '✎ Edit answers'
    },
    share: {
      copied: '✅ Link copied',
      shown: '🔗 Link shown — copy it',
      prompt: 'Copy your link:'
    },
    restart: { confirm: 'Start over? Clears saved answers in this browser.' },
    vision: {
      alt: 'Your retirement vision',
      label: 'Retirement Vision — {slug}',
      ai: 'AI-generated preview (z-image-turbo). Your numbers: below.'
    }
  };
  var FR = {
    doc: {
      title: 'Planificateur de retraite — la retraite canadienne, modélisée comme il faut',
      desc: 'Une calculatrice de retraite canadienne avec les vraies mécaniques RPC/SV/SRG/FERR et les taux d\'impôt 2026 en direct. 100 % côté client — vos réponses ne quittent jamais votre navigateur.'
    },
    brand: 'Planificateur de retraite',
    hdr: {
      pill: '🔒 100 % côté client — vos réponses ne quittent jamais votre navigateur',
      pillTitle: 'Aucun serveur, aucun suivi, aucun compte',
      startOver: 'Recommencer'
    },
    intro: {
      h1: 'Allez-vous vraiment manquer d\'argent ?',
      lede: 'La plupart des calculateurs de retraite canadiens s\'arrêtent à « votre REER croît de 6 % ». Celui-ci modélise <b>les vraies mécaniques RPC/SV/SRG/FERR</b>, les impôts provinciaux obtenus en direct et le palier fiscal que la plupart des planificateurs ne vous montrent pas.',
      tick1: 'RPC hâtive ou tardive (−0,6 %/mois avant 65 ans, +0,7 % après), report de la SV, récupération et SRG',
      tick2: 'Barèmes fédéraux 2026 en direct + les 13 tables fiscales provinciales et territoriales',
      tick3: 'Minimums de FERR à 71 ans, fractionnement du revenu de pension, retraits fiscalement intelligents',
      tick4: 'Couples : impôts conjoints, pensions fractionnées, SRG du ménage',
      privacy: '🔒 100 % côté client — vos réponses ne quittent jamais votre navigateur. Aucun compte, aucun suivi, rien n\'est envoyé nulle part.',
      cta: 'Élaborer mon plan de retraite →',
      fine: 'Environ 2 minutes. Un écran à la fois; vous pourrez tout modifier plus tard.'
    },
    quiz: {
      back: '← Précédent',
      next: 'Suivant →',
      seePlan: 'Voir mon plan →',
      stepCount: '{i} / {n}'
    },
    panel: {
      title: 'Votre plan jusqu\'ici',
      savingsAt: 'Épargne à la retraite',
      cppOas67: 'RPC + SV à 67',
      lastsTo: 'L\'argent dure jusqu\'à',
      runsOut: 'épuisé ~{age}',
      lifetimeTax: 'Impôt à vie'
    },
    unit: { yr: '/an', mo: '/mois' },
    fields: { unit: '($)' },
    i: {
      depletion: '⚠️ Sur ce parcours, vous manquez d\'argent vers <b>{age} ans</b>. Continuez — le plan se termine par trois façons concrètes de combler l\'écart.',
      cppEarly: 'La RPC à {age} ans est réduite de façon permanente — reporter à 70 ans équivaut à +42 % à l\'abri de l\'inflation. Bougez le curseur et regardez le panneau.',
      oasLate: 'SV à {age} ans : +36 % pour la vie, et une plus grande fenêtre de SRG entre-temps. Un bon compromis pour la plupart des gens.',
      qc: 'ℹ️ Québec : le RRQ <b>n\'est pas</b> modélisé — ajoutez votre estimation du RRQ sous « Pension ($/an) ». Le RRQ remplace habituellement ~35 % du revenu.',
      cliff: 'Vous heurterez le palier fiscal du minimum de FERR à 71 ans. Du CELI aujourd\'hui en atténue l\'effet plus tard — voyez les cartes d\'écart.',
      couple: 'Avec le fractionnement du revenu de pension et la SRG du ménage, vos impôts conjoints baissent — le panneau affiche le total conjoint.',
      live: 'Chiffres en direct — changez une réponse et ce panneau bouge.'
    },
    prov: {
      ON: 'Ontario', BC: 'Colombie-Britannique', AB: 'Alberta', SK: 'Saskatchewan',
      MB: 'Manitoba', QC: 'Québec', NS: 'Nouvelle-Écosse', NB: 'Nouveau-Brunswick',
      NL: 'Terre-Neuve-et-Labrador', PE: 'Île-du-Prince-Édouard', YT: 'Yukon', NT: 'Territoires du Nord-Ouest', NU: 'Nunavut'
    },
    int: {
      rockies: '🏔 Montagnes', maritimes: '🌊 Océan', toronto: '🏙 Grande ville',
      dock: '🛶 Lac / quai', muskoka: '🌲 Pays des chalets', prairies: '🌾 Grands espaces',
      winter: '⛷ Neige / ski', workshop: '🪵 Atelier', garden: '🌺 Jardin',
      travel: '✈️ Voyages', quebec: '🇫🇷 Québec'
    },
    q: {
      province: { title: 'Où habitez-vous ?', hint: 'Vos impôts — et votre décor de retraite.' },
      age: { title: 'Votre âge', hint: 'Années.' },
      household: {
        title: 'Ménage', hint: 'Un couple : impôts conjoints, fractionnement du revenu de pension et SRG du ménage.',
        single: 'Célibataire', couple: 'Couple'
      },
      p_age: { title: 'Âge du conjoint' },
      p_income: { title: 'Revenu d\'emploi annuel du conjoint', hint: '$/an avant impôt. 0 si sans emploi.' },
      p_savings: {
        title: 'Épargne du conjoint', hint: 'Soldes actuels, en dollars d\'aujourd\'hui.',
        rrsp: 'REER / FERR', tfsa: 'CELI', nonreg: 'Non enregistré'
      },
      income: { title: 'Votre revenu d\'emploi annuel', hint: '$/an. Sert à estimer votre historique RPC.' },
      rrsp: { title: 'Solde du REER / FERR' },
      savings2: {
        title: 'Épargne CELI et non enregistrée',
        tfsa: 'CELI', nonreg: 'Non enregistré (comptant, actions, fonds communs)'
      },
      contrib: {
        title: 'Épargne mensuelle au REER', hint: 'Votre cotisation + la contrepartie de l\'employeur.',
        you: 'Vous cotisez', match: 'Contrepartie de l\'employeur'
      },
      retire: { title: 'Âge de la retraite', hint: 'Quand vous cessez de gagner un revenu d\'emploi.', years: '{v} ans' },
      spend: { title: 'Dépenses annuelles prévues à la retraite', hint: 'En dollars d\'aujourd\'hui, après impôt. Soyez honnête — c\'est le chiffre qui décide de tout.' },
      cppstart: {
        title: 'Débuter la RPC à…', hint: 'À {age} ans : {adj}',
        m60: '−36 % pour la vie', m65: 'Taux plein', m70: '+42 % pour la vie', mCustom: 'ajustement personnalisé',
        os60: '−36 % pour la vie', os65: 'taux plein', os70: '+42 % pour la vie'
      },
      oasstart: {
        title: 'Débuter la SV à…', hint: 'Reporter à 70 ans : +36 % pour la vie, et une plus grande fenêtre de SRG.',
        os65: 'dès l\'admissibilité', os70: '+36 % pour la vie'
      },
      extra: {
        title: 'Autres revenus', hint: 'Pension à prestations, location, redevances… laissez 0 sinon.',
        pension: 'Pension par année', rental: 'Location par année', other: 'Autre par année'
      },
      assumptions: {
        title: 'Hypothèses', hint: 'Rendements réels (supérieurs à l\'inflation). Les valeurs par défaut correspondent à un portefeuille équilibré.',
        pre: 'Rendement avant la retraite', post: 'Rendement à la retraite', inf: 'Inflation',
        life: 'Planifier jusqu\'à', yrs: '{v} ans'
      },
      vision: { title: 'Vers quoi prenez-vous votre retraite ?', hint: 'Choisissez-en quelques-uns. Nous en imprégnerons votre plan.' }
    },
    v: {
      number: 'Entrez un nombre entre {min} et {max}.',
      province: 'Choisissez une province pour continuer.'
    },
    chart: {
      age: 'âge', swipe: 'glissez →',
      runsOut: 'épuisé ≈ {age}', retire: 'retraite'
    },
    g1: {
      h: 'L\'épargne tiendra-t-elle ?',
      cap: 'Portefeuille complet (REER + CELI + non enregistré), en dollars d\'aujourd\'hui. Zone ombrée : épargne épuisée.',
      legend: 'Épargne totale ($ d\'aujourd\'hui)'
    },
    g2: {
      h: 'D\'où vient le revenu de retraite',
      cap: 'RPC, SV, SRG et ce que vous retirez de l\'épargne — empilé, après impôt.',
      empty: 'Retraite après l\'horizon du plan.',
      cpp: 'RPC', oas: 'SV (net)', gis: 'SRG', savings: 'Épargne'
    },
    g3: {
      h: 'Dépenses vs ce que vous aurez',
      cap: 'Encaisse annuelle (revenu après impôt et récupération, plus retraits) vs dépenses prévues.',
      shortfall: 'déficit dès ~{age}',
      cash: 'Encaisse disponible (après impôt)', need: 'Dépenses prévues'
    },
    g4: {
      h: 'Quatre scénarios, un chiffre',
      cap: 'Dépenses annuelles durables jusqu\'à <span id="lifeexp-lbl">{age}</span> ans, par scénario.',
      calc: 'Calcul des scénarios…',
      computed: 'Calculé à partir des réponses actuelles.',
      best: 'Le levier le plus puissant ici : « {name} » → {money}/an, pour toujours.',
      s0: 'Plan actuel', s1: '+200 $/mois au REER', s2: 'Retard de 2 ans', s3: 'RPC à 70'
    },
    r: {
      verdictH: 'Votre plan, en une phrase',
      depletion: 'Sur ce parcours exact, vous manquez d\'argent à <b>{age} ans</b>. ' +
        'Vous pouvez dépenser en toute sûreté <b>{ss}/an</b> jusqu\'à {le} ans (vous prévoyez {sp}). Les trois cartes ci-dessous comblent l\'écart — chacune, à elle seule.',
      good: 'Ce plan tient jusqu\'à <b>{le} ans</b> avec {bal} restants — vous pouvez soutenir environ <b>{ss}/an</b>. ' +
        'Cela fait {hr}/an de marge au-dessus de votre plan.',
      yearlySummary: 'Détail année par année ({n} ans)',
      whatif: '<b>Essayer un scénario</b> — déplacez un curseur, regardez le plan se mettre à jour',
      stamp: 'barèmes 2026 · max. RPC {cpp}/mois · max. SV {oas}/mois · max. SRG {gis}/mois · constantes au {asOf} · table FERR Règl. 8301(1) ARC',
      wiSpend: 'Dépenses annuelles', wiCtrb: 'Épargne mensuelle', wiRet: 'Âge de la retraite', wiCpp: 'La RPC commence à',
      wiYears: '{v} ans', wiAge: 'à {v} ans'
    },
    g: {
      gapH: 'L\'écart', gapP: 'entre vos dépenses prévues et ce que le plan peut financer de façon sûre.',
      saveH: '💪 Épargner plus',
      saveP: 'de REER en plus dès aujourd\'hui comble l\'écart à lui seul. ~{pct} du revenu.',
      saveP2: 'Impossible à combler par l\'épargne seule — voyez les deux autres leviers.',
      workH: '🕰 Travailler plus', workY1: '{n} an', workYN: '{n} ans',
      workP: 'partir à {at} ans au lieu de {now} comble l\'écart — et RPC/SV grossissent pendant ce temps.',
      workP2: 'En 10 ans de plus, retarder seul la retraite ne comble pas cet écart — combinez les leviers.',
      trimH: '🌿 Réduire les dépenses', trimP: 'à {to}. Le levier le moins coûteux, et celui dont personne ne parle à 45 ans.',
      statusH: '✅ Statut', onTrack: 'Sur la bonne voie',
      statusP: 'Aucun écart à {sp}/an. Essayez un chiffre plus élevé avec les curseurs « et si ».',
      headH: 'Marge', headP: 'que vous pourriez ajouter aux dépenses — ou épargner pour le chalet.',
      stressH: '🛡 Test de résistance', stressP: 'dépenses réelles durables jusqu\'à {age} ans, minimums FERR et impôts respectés.'
    },
    t: {
      age: 'Âge', rrsp: 'REER', tfsa: 'CELI', nonreg: 'Non enreg.', total: 'Total', wdr: 'Retrait',
      cpp: 'RPC', oas: 'SV', gis: 'SRG', tax: 'Impôt + récup.', unfunded: 'Non financé'
    },
    d: {
      main: '<b>Estimations seulement — il ne s\'agit pas de conseils financiers.</b> Modèle simplifié : retrait progressif simplifié de 50 % pour la SRG; Québec présenté avec le dégagement fédéral de 16,5 % (RRQ et cotisations sociales québécoises non modélisés); pensions à prestations non modélisées; rendements à taux réels constants; surtaxe de l\'Ontario calculée sur l\'impôt de base.',
      privacy: '🔒 100 % côté client — vos réponses ne quittent jamais votre navigateur. Vos réponses ne sont enregistrées que dans ce navigateur (localStorage).'
    },
    res: {
      print: '🖨 Imprimer / enregistrer en PDF',
      share: '🔗 Copier le lien avec mes réponses',
      edit: '✎ Modifier les réponses'
    },
    share: {
      copied: '✅ Lien copié',
      shown: '🔗 Lien affiché — copiez-le',
      prompt: 'Copiez votre lien :'
    },
    restart: { confirm: 'Recommencer ? Les réponses enregistrées dans ce navigateur seront effacées.' },
    vision: {
      alt: 'Votre vision de retraite',
      label: 'Vision de retraite — {slug}',
      ai: 'Aperçu généré par IA (z-image-turbo). Vos chiffres : ci-dessous.'
    }
  };
  /* French typography pass: ' between letters, no-break space before : ; ! ? %
     and inside « » guillemets. Applied to every fr leaf at load. */
  function frNorm(s) {
    return s
      .replace(/(\p{L})'(\p{L})/gu, '$1\u2019$2')
      .replace(/« /g, '\u00ab' + NB)
      .replace(/ »/g, NB + '\u00bb')
      .replace(/ ([:;!?%])/g, NB + '$1');
  }
  (function walkFr(o) {
    for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) {
      if (typeof o[k] === 'string') o[k] = frNorm(o[k]);
      else if (o[k] && typeof o[k] === 'object') walkFr(o[k]);
    }
  })(FR);
  var I18N = { en: EN, fr: FR };
  /* ---------- language state ---------- */
  var lang = 'en';
  function detectLang() {
    var n = (typeof navigator !== 'undefined' && navigator.language) || 'en';
    return String(n).toLowerCase().indexOf('fr') === 0 ? 'fr' : 'en';
  }
  /* payload lang > saved state lang > detectLang(); old payloads (no lang) → en */
  function initialLang() {
    var m = typeof location !== 'undefined' && location.hash ? location.hash.match(/[#&]p=([^&]+)/) : null;
    if (m) {
      var o = null;
      try { o = JSON.parse(decodeURIComponent(escape(atob(m[1])))); } catch (e) { o = null; }
      if (o && typeof o === 'object') return o.lang === 'fr' ? 'fr' : 'en';
    }
    try {
      var raw = localStorage.getItem(LS_KEY);
      if (raw) {
        var s = JSON.parse(raw);
        if (s && (s.lang === 'en' || s.lang === 'fr')) return s.lang;
      }
    } catch (e) { /* fresh */ }
    return detectLang();
  }
  function getLang() { return lang; }
  /* merge lang into the persisted state object, keeping {a, step, screen, lang} shape */
  function persistLang() {
    try {
      var o = {};
      var raw = localStorage.getItem(LS_KEY);
      if (raw) { var p = JSON.parse(raw); if (p && typeof p === 'object') o = p; }
      o.lang = lang;
      localStorage.setItem(LS_KEY, JSON.stringify(o));
    } catch (e) { /* private mode etc. — language just won't persist */ }
  }
  function setLang(l) {
    l = (l === 'fr') ? 'fr' : 'en';
    if (l === lang) return;
    lang = l;
    persistLang();
    applyI18n();
    if (typeof window !== 'undefined' && typeof window.__onLangChange === 'function') {
      try { window.__onLangChange(); } catch (e) { /* re-render hook must not break toggle */ }
    }
  }
  /* ---------- t() ---------- */
  function lookup(obj, key) {
    var p = key.split('.'), o = obj;
    for (var i = 0; i < p.length; i++) {
      if (o === null || typeof o !== 'object') return null;
      o = o[p[i]];
    }
    return (typeof o === 'string') ? o : null;
  }
  function t(key, vars) {
    var s = lookup(I18N[lang], key);
    if (s === null) s = lookup(I18N.en, key);
    if (s === null) return key;
    if (vars) s = s.replace(/\{(\w+)\}/g, function (m0, k) { return vars[k] != null ? String(vars[k]) : m0; });
    return s;
  }
  /* ---------- locale-aware formatters (Intl.NumberFormat) ---------- */
  var nfCache = {};
  function nf(kind, opts) {
    var key = kind + '|' + lang;
    if (!nfCache[key]) nfCache[key] = new Intl.NumberFormat(lang === 'fr' ? 'fr-CA' : 'en-CA', opts);
    return nfCache[key];
  }
  function fmtInt(n) { return nf('int', { maximumFractionDigits: 0 }).format(n); }
  function fmtMoney(n) {
    n = Math.round(n);
    return (n < 0 ? MINUS : '') + nf('c0', { style: 'currency', currency: 'CAD', maximumFractionDigits: 0 }).format(Math.abs(n));
  }
  function fmtMoney2(n) {
    n = +n;
    return (n < 0 ? MINUS : '') + nf('c2', { style: 'currency', currency: 'CAD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Math.abs(n));
  }
  function fmtPct(x, digits) {
    var d = digits == null ? 0 : digits;
    return nf('p' + d, { style: 'percent', maximumFractionDigits: d }).format(x);
  }
  /* compact currency, ≤3 significant digits: $523K / $1.05M — 523 k$ / 1,05 M$ */
  function fmtMoneyK(n) {
    n = Math.round(n);
    var s = n < 0 ? MINUS : '';
    n = Math.abs(n);
    var num, unit;
    if (n >= 1e6) { num = sig3(n / 1e6); unit = 'M'; }
    else if (n >= 1000) { num = String(Math.round(n / 1000)); unit = 'K'; }
    else { num = String(n); unit = ''; }
    if (lang === 'fr') {
      num = nf('kd', { maximumFractionDigits: 2 }).format(Number(num));   /* 1.05 → 1,05 */
      unit = unit === 'K' ? 'k' : unit;
      return s + num + NNB + (unit || '') + '$';
    }
    return s + '$' + num + unit;
  }
  function sig3(x) {
    var d = x >= 100 ? 0 : (x >= 10 ? 1 : 2);
    var s = x.toFixed(d);
    if (s.indexOf('.') >= 0) s = s.replace(/0+$/, '').replace(/\.$/, '');
    return s;
  }
  /* ---------- static DOM ---------- */
  function forEachEl(sel, fn) {
    if (!document.querySelectorAll) return;
    var nodes = document.querySelectorAll(sel);
    for (var i = 0; i < nodes.length; i++) fn(nodes[i]);
  }
  function applyI18n() {
    var de = document.documentElement;
    if (de) { if (de.setAttribute) de.setAttribute('lang', lang); de.lang = lang; }
    document.title = t('doc.title');
    forEachEl('[data-i18n]', function (el) { el.textContent = t(el.getAttribute('data-i18n')); });
    forEachEl('[data-i18n-html]', function (el) { el.innerHTML = t(el.getAttribute('data-i18n-html')); });
    forEachEl('[data-i18n-attr]', function (el) {
      var spec = el.getAttribute('data-i18n-attr') || '';
      spec.split(',').forEach(function (pair) {
        var i = pair.indexOf(':');
        if (i < 0) return;
        el.setAttribute(pair.slice(0, i).trim(), t(pair.slice(i + 1).trim()));
      });
    });
    var be = document.getElementById('lang-en'), bf = document.getElementById('lang-fr');
    if (be) be.setAttribute('aria-pressed', lang === 'en' ? 'true' : 'false');
    if (bf) bf.setAttribute('aria-pressed', lang === 'fr' ? 'true' : 'false');
  }
  function wireToggle() {
    var be = document.getElementById('lang-en'), bf = document.getElementById('lang-fr');
    if (be) be.onclick = function () { setLang('en'); };
    if (bf) bf.onclick = function () { setLang('fr'); };
  }
  /* ---------- expose (browser window / Node globalThis in the test shims) ---------- */
  var exp = {
    I18N: I18N, t: t, getLang: getLang, setLang: setLang, detectLang: detectLang,
    applyI18n: applyI18n, fmtMoney: fmtMoney, fmtMoneyK: fmtMoneyK, fmtMoney2: fmtMoney2,
    fmtInt: fmtInt, fmtPct: fmtPct
  };
  lang = initialLang();
  try { if (typeof window !== 'undefined') for (var k in exp) window[k] = exp[k]; } catch (e) { }
  try { for (var k2 in exp) globalThis[k2] = exp[k2]; } catch (e) { }
  if (typeof document !== 'undefined' && document.querySelectorAll) {
    applyI18n();
    wireToggle();
  }
 })();
@@ -6,32 +6,35 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="theme-color" content="#f7f9fc">
 <title>Retire Planner — Canadian retirement, modelled properly</title>
-<meta name="description" content="A Canadian retirement calculator with real CPP/OAS/GIS/RRIF mechanics and live 2026 tax rates. 100% client-side — answers never leave your browser.">
+<meta name="description" data-i18n-attr="content:doc.desc" content="A Canadian retirement calculator with real CPP/OAS/GIS/RRIF mechanics and live 2026 tax rates. 100% client-side — answers never leave your browser.">
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header class="hdr">
  <div class="hdr-in">
-    <span class="logo">🍁 <b>Retire Planner</b></span>
+    <span class="logo">🍁 <b data-i18n="brand">Retire Planner</b></span>
-    <span class="pill" title="No server, no tracking, no accounts">🔒 100% client-side — answers never leave your browser</span>
+    <span class="lang-toggle" role="group" aria-label="Language / Langue">
-    <button id="btn-restart" class="ghost" hidden>Start over</button>
+      <button id="lang-en" class="lang-btn" aria-pressed="true">EN</button><button id="lang-fr" class="lang-btn" aria-pressed="false">FR</button>
    </span>
    <span class="pill" data-i18n="hdr.pill" data-i18n-attr="title:hdr.pillTitle" title="No server, no tracking, no accounts">🔒 100% client-side — answers never leave your browser</span>
    <button id="btn-restart" class="ghost" data-i18n="hdr.startOver" hidden>Start over</button>
  </div>
 </header>
 <main>
  <!-- INTRO -->
  <section id="scr-intro" class="scr">
-    <h1>Will you actually run out of money?</h1>
+    <h1 data-i18n="intro.h1">Will you actually run out of money?</h1>
-    <p class="lede">Most Canadian retirement calculators stop at “your RRSP grows at 6%”. This one models <b>real CPP/OAS/GIS/RRIF mechanics</b>, provincial taxes fetched live, and the tax cliff most planners won't show you.</p>
+    <p class="lede" data-i18n-html="intro.lede">Most Canadian retirement calculators stop at “your RRSP grows at 6%”. This one models <b>real CPP/OAS/GIS/RRIF mechanics</b>, provincial taxes fetched live, and the tax cliff most planners won't show you.</p>
    <ul class="ticks">
-      <li>CPP early/late (−0.6%/mo before 65, +0.7% after), OAS deferral, clawback &amp; GIS</li>
+      <li data-i18n="intro.tick1">CPP early/late (−0.6%/mo before 65, +0.7% after), OAS deferral, clawback &amp; GIS</li>
-      <li>Live 2026 federal + all 13 province/territory tax tables</li>
+      <li data-i18n="intro.tick2">Live 2026 federal + all 13 province/territory tax tables</li>
-      <li>RRIF minimums at 71, pension splitting, tax-smart drawdown</li>
+      <li data-i18n="intro.tick3">RRIF minimums at 71, pension splitting, tax-smart drawdown</li>
-      <li>Couples: joint taxes, split pensions, household GIS</li>
+      <li data-i18n="intro.tick4">Couples: joint taxes, split pensions, household GIS</li>
    </ul>
-    <p class="privacy">🔒 100% client-side — answers never leave your browser. No account, no tracking, nothing is sent anywhere.</p>
+    <p class="privacy" data-i18n="intro.privacy">🔒 100% client-side — answers never leave your browser. No account, no tracking, nothing is sent anywhere.</p>
-    <button id="btn-begin" class="cta">Build my retirement plan →</button>
+    <button id="btn-begin" class="cta" data-i18n="intro.cta">Build my retirement plan →</button>
-    <p class="fine">~2 minutes. Works on one screen at a time; you can change anything later.</p>
+    <p class="fine" data-i18n="intro.fine">~2 minutes. Works on one screen at a time; you can change anything later.</p>
  </section>
  <!-- QUESTIONNAIRE -->
@@ -40,14 +43,14 @@
      <div class="quiz-main">
        <div class="prog"><div id="prog-bar"></div></div>
        <div class="step-nav">
-          <button id="btn-back" class="ghost">← Back</button>
+          <button id="btn-back" class="ghost" data-i18n="quiz.back">← Back</button>
          <span id="step-count" class="step-count"></span>
        </div>
        <div id="step-body"></div>
-        <button id="btn-next" class="cta">Next →</button>
+        <button id="btn-next" class="cta" data-i18n="quiz.next">Next →</button>
      </div>
      <aside class="panel" id="panel">
-        <div class="panel-h">Your plan so far</div>
+        <div class="panel-h" data-i18n="panel.title">Your plan so far</div>
        <div id="panel-chips" class="chips"></div>
        <div id="panel-insight" class="insight"></div>
      </aside>
@@ -59,7 +62,7 @@
  <!-- RESULTS -->
  <section id="scr-results" class="scr" hidden>
    <div id="vision-card" class="vision"></div>
-    <h2 id="verdict-h">Your plan, in one line</h2>
+    <h2 id="verdict-h" data-i18n="r.verdictH">Your plan, in one line</h2>
    <p id="verdict" class="verdict"></p>
    <div class="cards" id="gap-cards"></div>
@@ -72,32 +75,32 @@
    <p id="g4-note" class="cap"></p>
    <details class="whatif" id="whatif">
-      <summary><b>Try a what-if</b> — move a slider, watch the plan update</summary>
+      <summary data-i18n-html="r.whatif"><b>Try a what-if</b> — move a slider, watch the plan update</summary>
      <div class="wi-grid">
-        <label>Annual spending <output id="wi-spend-o"></output>
+        <label><span data-i18n="r.wiSpend">Annual spending</span> <output id="wi-spend-o"></output>
          <input type="range" id="wi-spend" min="20000" max="150000" step="1000"></label>
-        <label>Monthly savings <output id="wi-ctrb-o"></output>
+        <label><span data-i18n="r.wiCtrb">Monthly savings</span> <output id="wi-ctrb-o"></output>
          <input type="range" id="wi-ctrb" min="0" max="5000" step="50"></label>
-        <label>Retirement age <output id="wi-ret-o"></output>
+        <label><span data-i18n="r.wiRet">Retirement age</span> <output id="wi-ret-o"></output>
          <input type="range" id="wi-ret" min="55" max="72" step="1"></label>
-        <label>CPP starts at <output id="wi-cpp-o"></output>
+        <label><span data-i18n="r.wiCpp">CPP starts at</span> <output id="wi-cpp-o"></output>
          <input type="range" id="wi-cpp" min="60" max="70" step="1"></label>
      </div>
    </details>
    <details class="yearly">
-      <summary>Year-by-year detail (<span id="yr-n">0</span> years)</summary>
+      <summary id="yr-summary">Year-by-year detail (<span id="yr-n">0</span> years)</summary>
      <div class="tbl-wrap"><table id="yr-table"></table></div>
    </details>
    <div class="disclaimer">
-      <p><b>Estimates only — not financial advice.</b> Simplified model: GIS uses a simplified 50% phase-out; Quebec shown with the 16.5% federal abatement (QPP and Quebec payroll taxes not modelled); DB pensions not modelled; returns are constant real rates; Ontario surtax modelled on base tax.</p>
+      <p data-i18n-html="d.main"><b>Estimates only — not financial advice.</b> Simplified model: GIS uses a simplified 50% phase-out; Quebec shown with the 16.5% federal abatement (QPP and Quebec payroll taxes not modelled); DB pensions not modelled; returns are constant real rates; Ontario surtax modelled on base tax.</p>
      <p class="stamp" id="stamp">tax rates 2026</p>
-      <p class="privacy">🔒 100% client-side — answers never leave your browser. Your answers are saved only in this browser (localStorage).</p>
+      <p class="privacy" data-i18n="d.privacy">🔒 100% client-side — answers never leave your browser. Your answers are saved only in this browser (localStorage).</p>
      <div class="btn-row">
-        <button id="btn-print" class="ghost">🖨 Print / save PDF</button>
+        <button id="btn-print" class="ghost" data-i18n="res.print">🖨 Print / save PDF</button>
-        <button id="btn-share" class="ghost">🔗 Copy link with my answers</button>
+        <button id="btn-share" class="ghost" data-i18n="res.share">🔗 Copy link with my answers</button>
-        <button id="btn-edit" class="ghost">✎ Edit answers</button>
+        <button id="btn-edit" class="ghost" data-i18n="res.edit">✎ Edit answers</button>
      </div>
    </div>
  </section>
@@ -105,6 +108,7 @@
 <script src="engine/canada.js"></script>
 <script src="engine/engine.js"></script>
 <script src="i18n.js"></script>
 <script src="app.js"></script>
 </body>
 </html>
@@ -23,6 +23,11 @@ b{color:var(--ink)}
 .hdr-in{max-width:1060px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap}
 .logo{font-size:17px}
 .pill{font-size:12px;background:#e8f5ee;color:#0a5c36;border:1px solid #bfe6d0;border-radius:99px;padding:3px 10px;color:#0a5c36}
 /* language toggle: compact EN|FR pill group; 44px touch targets (mobile pass rules) */
 .lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;flex:none;background:var(--card)}
 .lang-btn{padding:4px 10px;border:0;background:transparent;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;min-height:44px;line-height:1.2}
 .lang-btn[aria-pressed="true"]{background:var(--blue);color:#fff}
 .logo{font-size:17px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ghost{background:none;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:14px;color:var(--ink2);cursor:pointer;min-height:44px}
 button,input{touch-action:manipulation}
 .ghost:hover{border-color:var(--blue);color:var(--blue)}
@@ -0,0 +1,175 @@
 // i18n unit tests: dict parity, t() semantics, Intl formatters (EN/FR),
 // static applyI18n over the real index.html (parsed shim), lang persistence + load precedence.
 // Run: node tests/i18n.test.js  (exits 0 + prints I18N-OK)
 'use strict';
 const fs = require('fs'), path = require('path');
 const SITE = path.join(__dirname, '..', 'site');
 const LS = 'retire-planner-v1';
 let fails = 0, total = 0;
 function ok(name, cond, extra) {
  total++;
  console.log((cond ? '  PASS  ' : '  FAIL  ') + name + (extra !== undefined ? '  [' + String(extra).slice(0, 90) + ']' : ''));
  if (!cond) fails++;
 }
 const N = s => String(s == null ? '' : s).replace(/[\u202f\u00a0]/g, ' '); // narrow-nbsp/nbsp → space
 /* ---------- shim: minimal document that mirrors the real index.html static attrs ---------- */
 function parseStatic(html) {
  const els = { text: [], html: [], attr: [] };
  let m; const reT = /<(\w+)[^>]*\sdata-i18n="([^"]+)"[^>]*>/g;
  while ((m = reT.exec(html))) els.text.push(mk(m[2], 'data-i18n'));
  const reH = /<(\w+)[^>]*\sdata-i18n-html="([^"]+)"[^>]*>/g;
  while ((m = reH.exec(html))) els.html.push(mk(m[2], 'data-i18n-html'));
  const reA = /<(\w+)[^>]*\sdata-i18n-attr="([^"]+)"[^>]*>/g;
  while ((m = reA.exec(html))) els.attr.push(mk(m[2], 'data-i18n-attr'));
  return els;
 }
 function mk(v, attr) {
  const attrs = {}; attrs[attr] = v;
  return {
    attrs, textContent: '', innerHTML: '',
    getAttribute(k) { return attrs[k] === undefined ? null : attrs[k]; },
    setAttribute(k, v2) { attrs[k] = String(v2); },
  };
 }
 function fresh(opts) {
  opts = opts || {};
  const els = parseStatic(fs.readFileSync(path.join(SITE, 'index.html'), 'utf8'));
  const store = Object.assign({}, opts.store);
  const langBtns = { 'lang-en': mk('', 'id'), 'lang-fr': mk('', 'id') };
  global.document = {
    title: '',
    documentElement: { lang: 'en', setAttribute() { } },
    querySelector: () => null,
    querySelectorAll(sel) {
      if (sel === '[data-i18n]') return els.text;
      if (sel === '[data-i18n-html]') return els.html;
      if (sel === '[data-i18n-attr]') return els.attr;
      return [];
    },
    getElementById: id => langBtns[id] || null,
    createElement: () => mk('', 'tmp'),
    addEventListener() { },
  };
  global.localStorage = { getItem: k => (store[k] === undefined ? null : store[k]), setItem: (k, v) => { store[k] = String(v); }, removeItem: k => { delete store[k]; } };
  global.location = { hash: opts.hash || '', pathname: '/index.html', origin: 'http://x' };
  global.history = { replaceState() { } };
  Object.defineProperty(global, 'navigator', { value: { language: opts.nav || 'en-CA' }, configurable: true });
  global.window = { scrollTo() { }, print() { }, prompt() { } };
  global.confirm = () => true;
  global.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
  eval(fs.readFileSync(path.join(SITE, 'i18n.js'), 'utf8'));
  return { els, store, langBtns };
 }
 /* ---------- 1. load + dict parity ---------- */
 let ctx = fresh();
 const { I18N, t, getLang, setLang, detectLang, applyI18n, fmtMoney, fmtMoneyK, fmtInt, fmtPct, fmtMoney2 } = global.window;
 function leafKeys(obj, prefix, out) {
  for (const k in obj) {
    const v = obj[k], key = prefix ? prefix + '.' + k : k;
    if (v && typeof v === 'object') leafKeys(v, key, out); else out.push(key);
  }
  return out;
 }
 const enK = leafKeys(I18N.en, '', []), frK = leafKeys(I18N.fr, '', []);
 const enSet = new Set(enK), frSet = new Set(frK);
 ok('en/fr key parity', enK.every(k => frSet.has(k)) && frK.every(k => enSet.has(k)),
  'missing in fr: ' + enK.filter(k => !frSet.has(k)) + ' | extra in fr: ' + frK.filter(k => !enSet.has(k)));
 const get = (o, key) => key.split('.').reduce((x, p) => (x && typeof x === 'object' ? x[p] : undefined), o);
 const empty = enK.filter(k => !get(I18N.en, k).trim()).concat(frK.filter(k => !get(I18N.fr, k).trim()));
 ok('no empty values', empty.length === 0, empty.join(','));
 const ph = s => (s.match(/\{\w+\}/g) || []).slice().sort().join(',');
 const phBad = enK.filter(k => frSet.has(k) && ph(get(I18N.en, k)) !== ph(get(I18N.fr, k)));
 ok('{placeholder} sets equal en↔fr', phBad.length === 0, phBad.map(k => k + ': ' + ph(get(I18N.en, k)) + ' vs ' + ph(get(I18N.fr, k))).join(' | '));
 /* every key used in app.js exists in the dict */
 const appSrc = fs.readFileSync(path.join(SITE, 'app.js'), 'utf8');
 const used = [...new Set([...appSrc.matchAll(/\bt\(\s*'([^']+)'/g)].map(m => m[1]))];
 const miss = used.filter(k => !enSet.has(k));
 ok('every t() key in app.js exists (en)', miss.length === 0, miss.join(','));
 const missFr = used.filter(k => !frSet.has(k));
 ok('every t() key in app.js exists (fr)', missFr.length === 0, missFr.join(','));
 ok('app.js uses t() extensively', used.length > 90, used.length + ' keys');
 /* every static data-i18n key in index.html resolves */
 const staticKeys = [...ctx.els.text.map(e => e.getAttribute('data-i18n')),
  ...ctx.els.html.map(e => e.getAttribute('data-i18n-html')),
  ...ctx.els.attr.flatMap(e => e.getAttribute('data-i18n-attr').split(',').map(p => p.split(':')[1].trim()))];
 const sMiss = staticKeys.filter(k => t(k) === k);
 ok('static keys resolve in en', sMiss.length === 0, sMiss.join(','));
 /* ---------- 2. t() semantics ---------- */
 ok('getLang default en', getLang() === 'en');
 ok('t interp', t('q.cppstart.hint', { age: 70, adj: 'Full rate' }) === 'Age 70: Full rate');
 ok('t missing key falls back to key', t('nope.nope') === 'nope.nope');
 /* ---------- 3. formatters EN ---------- */
 ok('fmtMoney en', fmtMoney(959835) === '$959,835', fmtMoney(959835));
 ok('fmtMoney en negative', fmtMoney(-32962) === '\u2212$32,962', fmtMoney(-32962));
 ok('fmtMoneyK en K', fmtMoneyK(523000) === '$523K', fmtMoneyK(523000));
 ok('fmtMoneyK en M', fmtMoneyK(1050000) === '$1.05M', fmtMoneyK(1050000));
 ok('fmtMoneyK en rounds', fmtMoneyK(959835) === '$960K', fmtMoneyK(959835));
 ok('fmtMoneyK en zero', fmtMoneyK(0) === '$0', fmtMoneyK(0));
 ok('fmtInt en', fmtInt(959835) === '959,835', fmtInt(959835));
 ok('fmtPct en', N(fmtPct(0.05)) === '5%' && N(fmtPct(0.035, 2)) === '3.5%', N(fmtPct(0.035, 2)));
 ok('fmtMoney2 en', fmtMoney2(1507.65) === '$1,507.65', fmtMoney2(1507.65));
 /* ---------- 4. formatters FR (setLang) ---------- */
 setLang('fr');
 ok('setLang fr', getLang() === 'fr');
 ok('t fr', t('quiz.next') === 'Suivant \u2192', t('quiz.next'));
 ok('fmtMoney fr', N(fmtMoney(959835)) === '959 835 $', N(fmtMoney(959835)));
 ok('fmtMoney fr negative', N(fmtMoney(-32962)) === '\u221232 962 $', N(fmtMoney(-32962)));
 ok('fmtMoneyK fr K', N(fmtMoneyK(523000)) === '523 k$', N(fmtMoneyK(523000)));
 ok('fmtMoneyK fr M', N(fmtMoneyK(1050000)) === '1,05 M$', N(fmtMoneyK(1050000)));
 ok('fmtMoneyK fr zero', N(fmtMoneyK(0)) === '0 $', N(fmtMoneyK(0)));
 ok('fmtInt fr', N(fmtInt(959835)) === '959 835', N(fmtInt(959835)));
 ok('fmtPct fr', N(fmtPct(0.05)) === '5 %' && N(fmtPct(0.035, 2)) === '3,5 %', N(fmtPct(0.035, 2)));
 ok('fmtMoney2 fr', N(fmtMoney2(1507.65)) === '1 507,65 $', N(fmtMoney2(1507.65)));
 ok('t fr interp', t('q.retire.years', { v: 20 }) === '20 ans', t('q.retire.years', { v: 20 }));
 /* ---------- 5. French typography (frNorm) ---------- */
 ok('fr apostrophe is U+2019', /d\u2019argent/.test(I18N.fr.r.depletion), I18N.fr.r.depletion.slice(0, 40));
 ok('fr NBSP before %', /6\u00a0%/.test(I18N.fr.intro.lede), N(I18N.fr.intro.lede).slice(0, 40));
 ok('fr guillemets NBSP', /\u00ab\u00a0\{name\}\u00a0\u00bb/.test(I18N.fr.g4.best), N(I18N.fr.g4.best));
 ok('fr NBSP before ?', /\u00a0\?/.test(I18N.fr.g1.h), N(I18N.fr.g1.h));
 /* ---------- 6. static applyI18n (FR active) ---------- */
 ok('title fr', /Planificateur de retraite/.test(document.title), document.title);
 const h1 = ctx.els.text.find(e => e.getAttribute('data-i18n') === 'intro.h1');
 ok('static h1 fr', h1 && h1.textContent === I18N.fr.intro.h1, h1 && N(h1.textContent));
 const desc = ctx.els.attr.find(e => /content:doc\.desc/.test(e.getAttribute('data-i18n-attr')));
 ok('meta description fr', desc && desc.attrs.content === I18N.fr.doc.desc);
 ok('documentElement.lang fr', document.documentElement.lang === 'fr');
 ok('aria-pressed synced', ctx.langBtns['lang-en'].attrs['aria-pressed'] === 'false' && ctx.langBtns['lang-fr'].attrs['aria-pressed'] === 'true');
 setLang('en');
 ok('static h1 back to en', h1 && h1.textContent === I18N.en.intro.h1 && document.title.startsWith('Retire Planner'));
 /* ---------- 7. persistence + load precedence ---------- */
 setLang('fr');
 ok('setLang persists lang into LS merge', JSON.parse(ctx.store[LS]).lang === 'fr');
 ctx.store[LS] = JSON.stringify({ a: { age: 50 }, step: 3, screen: 'results' });
 setLang('en'); setLang('fr');
 const merged = JSON.parse(ctx.store[LS]);
 ok('merge keeps a/step/screen', merged.a.age === 50 && merged.step === 3 && merged.screen === 'results' && merged.lang === 'fr', JSON.stringify(merged));
 function b64(o) { return Buffer.from(JSON.stringify(o)).toString('base64'); }
 /* NB: fresh() re-evals i18n.js → new closure instance; read exports off global.window each time */
 const G = () => global.window;
 let c2 = fresh({ nav: 'fr-CA' });
 ok('detectLang fr-CA → fr', G().detectLang() === 'fr' && G().getLang() === 'fr', G().getLang());
 c2 = fresh({ nav: 'en-CA' });
 ok('detectLang en-CA → en', G().getLang() === 'en');
 c2 = fresh({ store: { [LS]: JSON.stringify({ lang: 'fr' }) }, nav: 'en-CA' });
 ok('saved lang beats detection', G().getLang() === 'fr', G().getLang());
 c2 = fresh({ store: { [LS]: JSON.stringify({ lang: 'en' }) }, nav: 'fr-CA', hash: '#p=' + b64({ a: {}, step: 0, lang: 'fr' }) });
 ok('payload lang beats saved + detect', G().getLang() === 'fr', G().getLang());
 c2 = fresh({ store: { [LS]: JSON.stringify({ lang: 'fr' }) }, hash: '#p=' + b64({ a: {}, step: 0 }) });
 ok('legacy payload (no lang) → en', G().getLang() === 'en', G().getLang());
 c2 = fresh({ store: { [LS]: JSON.stringify({ lang: 'fr' }) }, hash: '#p=' + b64({ a: {}, step: 0, lang: 'en' }) });
 ok('payload en beats saved fr', G().getLang() === 'en', G().getLang());
 console.log(fails ? '\nI18N-FAIL: ' + fails + ' of ' + total : '\nI18N-OK all i18n checks passed (' + total + ')');
 process.exit(fails ? 1 : 0);
@@ -1,10 +1,15 @@
-// Headless smoke test for site/app.js — tiny DOM shim, drives the full flow.
+// Headless smoke test for site/i18n.js + site/app.js — tiny DOM shim, drives the full flow
 // in BOTH languages (EN run on defaults, FR run with lang:'fr' persisted).
 // Run: node tests/ui.smoke.js  (exits 0 + prints SMOKE-OK)
 'use strict';
 const fs = require('fs'), path = require('path');
 const SITE = path.join(__dirname, '..', 'site');
 const LS = 'retire-planner-v1';
-const registry = {};
+/* normalize narrow-nbsp/nbsp → space (fr-CA Intl + frNorm typography) for regex checks */
 const N = s => String(s == null ? '' : s).replace(/[\u202f\u00a0]/g, ' ');
 let registry = {};
 function makeEl(id) {
  const el = {
    id, _html: '', _l: {}, style: {}, dataset: {}, hidden: false,
@@ -12,6 +17,7 @@ function makeEl(id) {
    get innerHTML() { return this._html; },
    set innerHTML(v) { this._html = String(v); },
    addEventListener(t, fn) { this._l[t] = fn; },
    setAttribute() { }, getAttribute() { return null; },
    querySelector() { return makeEl(id + '>q'); },
    querySelectorAll() { return []; },
    contains() { return false; },
@@ -28,83 +34,148 @@ function q(sel) {
  if (sel === '.panel-h') return null;
  return registry[id] || (registry[id] = makeEl(id));
 }
-global.document = {
+let store = {};
 let createdEls = []; // shim ext: createElement tracking (validate() appends its .err div this way)
 function buildShim() {
  registry = {}; store = {}; createdEls = [];
  global.document = {
    title: '',
    querySelector: q,
    querySelectorAll: () => [],
    addEventListener() { },
-  createElement: (t) => makeEl('el-' + t),
+    createElement: (t) => { const e = makeEl('el-' + t); createdEls.push(e); return e; },
-  getElementById: (id) => registry[id] || (registry[id] = makeEl(id)), // shim ext: app.js scrim/panel sync (Fix 3)
+    getElementById: (id) => registry[id] || (registry[id] = makeEl(id)), // shim ext: app.js scrim/panel sync (Fix 3) + i18n lang buttons
-};
+    documentElement: { style: { setProperty() { } }, setAttribute() { }, lang: 'en' }, // i18n applyI18n + app syncSheetH
-const store = {};
+  };
-global.localStorage = { getItem: k => store[k] || null, setItem: (k, v) => { store[k] = String(v); }, removeItem: k => { delete store[k]; } };
+  global.localStorage = { getItem: k => store[k] || null, setItem: (k, v) => { store[k] = String(v); }, removeItem: k => { delete store[k]; } };
-global.location = { hash: '', pathname: '/index.html', origin: 'http://x' };
+  global.location = { hash: '', pathname: '/index.html', origin: 'http://x' };
-global.history = { replaceState() { } };
+  global.history = { replaceState() { } };
-Object.defineProperty(global, 'navigator', { value: {}, configurable: true });
+  Object.defineProperty(global, 'navigator', { value: { language: 'en-CA' }, configurable: true });
-global.window = { scrollTo() { }, print() { }, prompt() { } }; // prompt stub: Fix 7 share fallback
+  global.window = { scrollTo() { }, print() { }, prompt() { } }; // prompt stub: Fix 7 share fallback
-global.confirm = () => true;
+  global.confirm = () => true;
-global.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+  global.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
 }
 function load(lang) {
  buildShim();
  global.window.RetireEngine = require(path.join(SITE, 'engine', 'engine.js'));
  global.window.RetireCanada = require(path.join(SITE, 'engine', 'canada.js'));
  // persisted state in the target language: fresh answers, dropped at the quiz start
  store[LS] = JSON.stringify({ a: {}, step: 0, screen: 'quiz', lang: lang });
  eval(fs.readFileSync(path.join(SITE, 'i18n.js'), 'utf8'));
  eval(fs.readFileSync(path.join(SITE, 'app.js'), 'utf8'));
 }
-// load engine + canada + app in order (classic scripts sharing globals)
+let fails = 0, total = 0;
 const engP = path.join(SITE, 'engine', 'engine.js'), canP = path.join(SITE, 'engine', 'canada.js'), appP = path.join(SITE, 'app.js');
 global.window.RetireEngine = require(engP);
 global.window.RetireCanada = require(canP);
 eval(fs.readFileSync(appP, 'utf8'));
 // ---- drive the UI ----
 let fails = 0;
 function ok(name, cond, extra) {
  total++;
  console.log((cond ? '  PASS  ' : '  FAIL  ') + name + (extra !== undefined ? '  [' + String(extra).slice(0, 80) + ']' : ''));
  if (!cond) fails++;
 }
 const click = id => { const el = q('#' + id); if (!el._l.click) throw new Error('no click handler on #' + id); el._l.click(); };
-ok('intro wiring: begin button has handler', !!q('#btn-begin')._l.click);
+/* drive the full quiz → results flow for one language, then run per-language checks. */
-click('btn-begin');
+function run(lang, M, done) {
-ok('quiz screen shown, step 1 = province', /Where do you live/.test(q('#step-body')._html));
+  console.log('\n--- ' + lang.toUpperCase() + ' ---');
  load(lang);
-// province grid: app attaches onclick to opts via querySelectorAll (shim returns [])
+  ok('intro wiring: begin button has handler', !!q('#btn-begin')._l.click);
-// → set province through state by faking a click on the first opt is impossible;
+  click('btn-begin');
-// simulate by driving Next: province unset → Next disabled.
+  ok('step 1 title', M.title.test(q('#step-body')._html), N(q('#step-body')._html).slice(0, 60));
-ok('province step requires a pick (Next disabled)', q('#btn-next').disabled === true);
+  ok('step count', /1 \/ 14/.test(q('#step-count').textContent), q('#step-count').textContent);
-// emulate the option click path: app.js assigns onclick to elements from querySelectorAll;
+  ok('province step requires a pick (Next disabled)', q('#btn-next').disabled === true);
-// give it one opt for the current render:
+  ok('validation message', createdEls.some(e => M.needProvince.test(N(e.textContent))));
 const opt = makeEl('opt'); opt.dataset.v = 'ON'; q('#step-body').querySelectorAll = (sel) => (sel === '.opt' ? [opt] : []);
 click('btn-begin'); // re-render step with patched querySelectorAll
 opt._l.click();
 ok('province ON selectable', registry.__probe !== 'x' && !/Pick a province/.test(q('#step-body')._html));
-// walk all steps
+  // emulate the option click path (shim querySelectorAll patched to hand back one opt)
-let guard = 0;
+  const opt = makeEl('opt'); opt.dataset.v = 'ON';
-while (!q('#btn-next').disabled && guard++ < 40) {
+  q('#step-body').querySelectorAll = (sel) => (sel === '.opt' ? [opt] : []);
-  const h = q('#step-body')._html;
+  click('btn-begin'); // re-render step with patched querySelectorAll
-  if (/runs out|gap|vision/i.test(h) && /See my plan/.test(q('#btn-next').textContent)) break;
+  opt._l.click();
  ok('province ON selectable', q('#btn-next').disabled === false);
  // walk all steps (original gating: disabled reflects step validity)
  let guard = 0, sawCpp = false, sawSeePlan = false;
  while (guard++ < 40 && !q('#btn-next').disabled) {
    const h = N(q('#step-body')._html);
    if (M.cppStep.test(h)) sawCpp = true;
    if (M.seePlan.test(q('#btn-next').textContent)) { sawSeePlan = true; break; }
    click('btn-next');
  if (/Retirement Vision|vision/i.test(q('#scr-results')._html)) break;
  if (q('#scr-intro').hidden === false) break;
  // results render flips hidden
    if (q('#scr-results').hidden === false) break;
-}
+  }
-ok('reached results screen', q('#scr-results').hidden === false, 'steps=' + guard);
+  ok('reached last step (See my plan / Voir mon plan)', sawSeePlan, 'steps=' + guard);
-ok('verdict rendered', /money|sustain|runs out/i.test(q('#verdict')._html));
+  ok('CPP start step seen', sawCpp);
-ok('gap cards rendered', /gcard/.test(q('#gap-cards')._html));
+  click('btn-next');
-ok('G1 balance chart is inline SVG', /<svg/.test(q('#g1')._html));
+  ok('reached results screen', q('#scr-results').hidden === false);
 ok('G2 income chart is inline SVG', /<svg/.test(q('#g2')._html));
 ok('G3 cash chart is inline SVG', /<svg/.test(q('#g3')._html));
 ok('year table has rows', (q('#yr-table')._html.match(/<tr/g) || []).length > 20);
 ok('stamp has 2026 + CPP max', /tax rates 2026/.test(q('#stamp').textContent) && /1,507\.65/.test(q('#stamp').textContent), q('#stamp').textContent.slice(0, 60));
 ok('vision card rendered', /Retirement Vision/.test(q('#vision-card')._html));
 ok('privacy line present in HTML', /never leave your browser/.test(fs.readFileSync(path.join(SITE, 'index.html'), 'utf8')));
-// G4 async (setTimeout 30ms)
+  const verdict = N(q('#verdict')._html);
-setTimeout(() => {
+  ok('verdict rendered', M.verdict.test(verdict), verdict.slice(0, 70));
-  ok('G4 scenario bars rendered', /<svg/.test(q('#g4')._html), (q('#g4')._html || '').slice(0, 40));
+  ok('gap cards rendered', /gcard/.test(q('#gap-cards')._html));
  ok('G1 chart is inline SVG', /<svg/.test(q('#g1')._html));
  ok('G1 title localized', M.g1Title.test(N(q('#g1')._html)), N(q('#g1')._html).slice(0, 50));
  ok('G2 chart is inline SVG', /<svg/.test(q('#g2')._html));
  ok('G2 legend localized', M.g2Legend.test(q('#g2')._html));
  ok('G3 chart is inline SVG', /<svg/.test(q('#g3')._html));
  ok('year table has rows', (q('#yr-table')._html.match(/<tr/g) || []).length > 20);
  ok('year table header localized', M.tblHeader.test(q('#yr-table')._html));
  ok('year summary localized', M.yrSummary.test(N(q('#yr-summary')._html)), N(q('#yr-summary')._html));
  const stamp = N(q('#stamp').textContent);
  ok('stamp has 2026 + CPP max (locale format)', M.stamp2026.test(stamp) && M.stampCpp.test(stamp), stamp.slice(0, 80));
  ok('vision card rendered', M.vision.test(q('#vision-card')._html));
  ok('document.title localized', M.docTitle.test(N(document.title)), document.title.slice(0, 60));
  // G4 async (setTimeout 30ms) + live panel (120ms)
  setTimeout(() => {
    ok('G4 scenario bars rendered', /<svg/.test(q('#g4')._html) && M.g4Scen.test(q('#g4')._html), N(q('#g4')._html).slice(0, 60));
    ok('live panel chips localized', M.panel.test(N(q('#panel-chips')._html)), N(q('#panel-chips')._html).slice(0, 70));
    // what-if slider re-render
    const wi = q('#wi-spend'); wi.value = '95000';
    wi._l.input && wi._l.input.call(wi);
    setTimeout(() => {
-    ok('what-if slider updates verdict (spending 95k)', /95/.test(q('#verdict')._html + q('#wi-spend-o').textContent), q('#wi-spend-o').textContent);
+      ok('what-if slider updates spending label (95k)', /95/.test(N(q('#wi-spend-o').textContent)), N(q('#wi-spend-o').textContent));
-    ok('localStorage saved', !!store['retire-planner-v1']);
+      ok('wi label localized', M.wiCtrb.test(N(q('#wi-ctrb-o').textContent)), N(q('#wi-ctrb-o').textContent));
-    console.log(fails ? '\nSMOKE-FAIL: ' + fails : '\nSMOKE-OK all ui smoke checks passed');
+      ok('localStorage saved with lang', JSON.parse(store[LS]).lang === lang);
-    process.exit(fails ? 1 : 0);
+      done();
    }, 500);
-}, 250);
+  }, 250);
 }
 const EN = {
  title: /Where do you live/,
  docTitle: /Retire Planner/,
  needProvince: /Pick a province/,
  seePlan: /See my plan/,
  cppStep: /Start CPP/,
  verdict: /money|sustain|runs out/,
  g1Title: /Will it last/,
  g2Legend: /From savings/,
  tblHeader: /Withdraw/,
  yrSummary: /Year-by-year detail \(\d+ years\)/,
  stamp2026: /tax rates 2026/, stampCpp: /1,507\.65/,
  vision: /Retirement Vision/,
  g4Scen: /Current plan/,
  panel: /Savings at retirement/,
  wiCtrb: /\/mo/,
 };
 const FR = {
  title: /Où habitez-vous/,
  docTitle: /Planificateur de retraite/,
  needProvince: /Choisissez une province/,
  seePlan: /Voir mon plan/,
  cppStep: /Débuter la RPC/,
  verdict: /manquez d.argent|dépenser en toute sûreté|tient jusqu/,
  g1Title: /épargne tiendra-t-elle/,
  g2Legend: /Épargne/,
  tblHeader: /Retrait/,
  yrSummary: /Détail année par année \(\d+ ans\)/,
  stamp2026: /barèmes 2026/, stampCpp: /1 507,65/,
  vision: /Vision de retraite/,
  g4Scen: /Plan actuel/,
  panel: /Épargne à la retraite/,
  wiCtrb: /\/mois/,
 };
 run('en', EN, () => run('fr', FR, () => {
  ok('EN privacy line present in index.html', /never leave your browser/.test(fs.readFileSync(path.join(SITE, 'index.html'), 'utf8')));
  ok('FR privacy string present in i18n.js', /ne quittent jamais votre navigateur/.test(fs.readFileSync(path.join(SITE, 'i18n.js'), 'utf8')));
  console.log(fails ? '\nSMOKE-FAIL: ' + fails + ' of ' + total : '\nSMOKE-OK all ui smoke checks passed (' + total + ')');
  process.exit(fails ? 1 : 0);
 }));