/* NOTE (v2): color + type tokens now live in hfg-tokens.css, which loads
BEFORE this file. The :root blocks below are retained only so this
stylesheet still works standalone in older tools — hfg-tokens.css sets the
same names, and later declarations win, so a tool loading both gets the
canonical values. When a tool is fully on v2, delete the :root blocks here.
Never edit a token value in this file. */
/* HFG TOOL SHELL — nav, hero, input cards, buttons, mobile live screen,
report palette tokens and the legacy report classes still used by the
SVG chart (.afb-*, .chart-svg). Extracted verbatim from the Home
Affordability tool. Load BEFORE hfg-report-v2.css.
Legacy/dead in a v2 tool (safe to delete once nothing references them):
the .rp .rhead/.rclient/.htitle/.hsub/.sectt/.cards/.acard/.two/.panel/
table.q/.pbar/.tos/.toi/.lo/.comp/.rfooter blocks and the two old
@media print blocks that tune them. Keep :root --rp-* / --af-* tokens,
.afb-*, .chart-svg, #pg2, .pg2-bar and everything above the report. */
/* ═══════════════════════════════════════════════════════════════════
HFG BASE THEME — desktop / light surface
Canonical brand tokens + shared chrome for HFG independent tools.
Extracted from the why-now builder site (styles/index.css) so every
tool starts from the same palette, type system, and component shapes.
Layering contract (link in this order):
1. https://use.typekit.net/pon7ryr.css — Adobe Fonts kit (Dunbar families)
2. styles/hfg-base.css — this file (tokens + shared chrome)
3. styles/hfg-mobile.css — mobile live-screen shell (mv-mode)
4. styles/app.css — YOUR tool's own layout (per tool)
Rules: never restate token values in app.css — always var(--…).
No inline styles anywhere (CSP forbids them).
═══════════════════════════════════════════════════════════════════ */
/* ── HFG BRAND TOKENS ── */
:root{
/* core palette */
--hfg-blue:#0f4369; --hfg-blue-dark:#0a3251; --hfg-blue-deep:#072438; --hfg-blue-light:#2e6a90;
--hfg-teal:#499fbe; --hfg-teal-dark:#2f7c9b; --hfg-teal-light:#7ab7d0; --hfg-teal-pale:#d8e9f1;
--hfg-lime:#d5e03f; --hfg-lime-bright:#dfe66c; --hfg-lime-deep:#bcc830;
/* surfaces + neutrals */
--cream:#faf8f3; --paper:#f7f4ec;
--white:#ffffff; --off-white:#f4f6f9;
--gray:#8a96a3; --gray-light:#e8ecf0; --text:#1a2a3a;
/* semantic — HFG palette has no green; positive values use brand teal */
--red:#c0392b; --red-pale:#fdf0ee;
/* type system — Adobe Fonts kit pon7ryr (family names as the kit registers them).
Canonical tokens match tools-portal src/styles.css; --sans/--mono are the
theme's historical aliases used by the component rules below and by app.css.
The kit serves no mono face: --font-mono is dunbartext by design.
--display is dunbartall-hairline — large display headings only, weight 400. */
--font-sans:"dunbartext",sans-serif;
--font-mono:"dunbartext",sans-serif;
--sans:var(--font-sans);
--mono:var(--font-mono);
--display:"dunbartall-hairline",sans-serif;
--serif:'Instrument Serif','Georgia',serif;
}
/* ── RESET / BASE ── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);background:var(--paper);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
/* ── SHARED NAV (every tool carries this bar) ── */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(247,244,236,.92);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(7,36,56,.07);}
.nav-inner{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav-logo-img{height:46px;width:auto;}
.nav-logo-link{display:flex;align-items:center;line-height:0;}
/* display:flex above outspecifies the UA [hidden] rule — restate it so app.js
can hide the portal link when framed (portal embed). */
.nav-logo-link[hidden]{display:none;}
.nav-context{text-align:right;}
.nav-context .eyebrow{justify-content:flex-end;}
.nav-context .nc-title{font-size:13px;font-weight:700;color:var(--hfg-blue-deep);margin-top:3px;letter-spacing:-.1px;}
/* ── EYEBROW (mono microlabel with lime status dot) ── */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--hfg-teal);display:inline-flex;align-items:center;gap:9px;}
.eyebrow .dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--hfg-lime-deep);box-shadow:0 0 0 4px rgba(184,196,58,.2);}
/* ── HERO (dark gradient panel with decorative brand circles) ── */
.hfg-hero{background:linear-gradient(135deg,var(--hfg-blue-deep) 0%,var(--hfg-blue) 70%,var(--hfg-blue-light) 100%);padding:48px 32px;position:relative;overflow:hidden;}
.hfg-hero::before{content:'';position:absolute;top:-160px;right:-120px;width:480px;height:480px;border-radius:50%;background:var(--hfg-lime);opacity:.06;}
.hfg-hero::after{content:'';position:absolute;bottom:-120px;left:-80px;width:320px;height:320px;border-radius:50%;background:var(--hfg-teal);opacity:.08;}
.hfg-hero-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;}
.hfg-hero .hero-eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--hfg-lime);margin-bottom:14px;}
.hfg-hero .hero-title{font-family:var(--display);font-size:46px;font-weight:400;color:#fff;letter-spacing:-1.6px;line-height:.98;}
.hfg-hero .hero-title span{color:var(--hfg-lime);} /* accent word in lime */
.hfg-hero .hero-sub{font-size:15px;color:rgba(255,255,255,.62);margin-top:14px;max-width:620px;font-weight:500;}
/* ── LOGO CHIP (color logo on dark panels: white chip behind it) ── */
.logo-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:9px 14px;flex-shrink:0;}
.logo-chip img{height:30px;width:auto;max-width:none;}
.logo-chip.sm{padding:7px 11px;border-radius:10px;}
.logo-chip.sm img{height:22px;}
/* ── FORM CARDS ── */
.fcard{background:var(--white);border-radius:20px;overflow:hidden;margin-bottom:18px;border:1px solid var(--gray-light);box-shadow:0 4px 18px rgba(7,36,56,.05);}
.fcard-accent{height:4px;background:linear-gradient(90deg,var(--hfg-teal) 0%,var(--hfg-lime) 100%);}
.fcard-body{padding:24px 26px;}
.fcard-title{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--hfg-teal);margin-bottom:18px;}
/* ── FORM GRID + INPUTS ── */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.fgrid-3{grid-template-columns:repeat(3,1fr);}
.fgrid-4{grid-template-columns:repeat(4,1fr);}
.inp-f{display:flex;flex-direction:column;gap:5px;}
.inp-f label{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray);}
.inp-wrap{position:relative;}
.inp-pre,.inp-suf{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;color:#aab4be;font-weight:700;pointer-events:none;}
.inp-pre{left:11px;}.inp-suf{right:11px;}
.inp-f input,.inp-f select{width:100%;padding:11px 12px;font-size:15px;font-weight:600;color:var(--text);background:var(--cream);border:1.5px solid var(--gray-light);border-radius:11px;outline:none;font-family:inherit;-webkit-appearance:none;transition:border-color .15s,background .15s,box-shadow .15s;}
.inp-f input:focus,.inp-f select:focus{border-color:var(--hfg-teal);background:var(--white);box-shadow:0 0 0 3px rgba(73,159,190,.13);}
.has-pre input{padding-left:23px;}.has-suf input{padding-right:30px;}
.inp-hint{font-size:10px;color:var(--gray);margin-top:1px;}
.inp-f input.field-error,.inp-f select.field-error{border-color:var(--red)!important;background:var(--red-pale)!important;}
/* ── NOTES / VALIDATION ── */
.note-box{font-size:11px;color:var(--gray);background:var(--cream);border-radius:10px;padding:10px 13px;line-height:1.5;border-left:3px solid var(--hfg-lime);}
.error-box{background:var(--red-pale);color:var(--red);border:1px solid rgba(192,57,43,.3);border-radius:10px;padding:11px 16px;font-size:13px;font-weight:600;}
.req{color:var(--red);font-weight:700;}
/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--hfg-blue);color:#fff;border:none;border-radius:999px;padding:17px 46px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 10px 28px rgba(15,67,105,.32);transition:background .15s,transform .12s;letter-spacing:.2px;}
.btn-primary:hover{background:var(--hfg-blue-deep);transform:translateY(-2px);}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--hfg-blue);border:1.5px solid var(--hfg-blue);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s,color .15s;}
.btn-secondary:hover{background:var(--hfg-blue);color:#fff;}
.btn-cta{display:inline-flex;align-items:center;gap:8px;background:var(--hfg-lime);color:var(--hfg-blue-deep);font-weight:700;font-size:13px;padding:10px 18px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(213,224,63,.2);transition:transform .12s;border:none;font-family:inherit;cursor:pointer;}
.btn-cta:hover{transform:translateY(-1px);}
/* display:flex on buttons outspecifies the UA [hidden] rule — restate it */
.btn-primary[hidden],.btn-secondary[hidden],.btn-cta[hidden]{display:none;}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.7;cursor:default;}
/* ── PILL BADGE ── */
.pill{background:var(--hfg-lime);color:var(--hfg-blue-deep);font-family:var(--mono);font-size:10px;font-weight:700;padding:7px 16px;border-radius:999px;letter-spacing:.6px;text-transform:uppercase;}
/* ── DATA TABLE ── */
.hfg-table{width:100%;border-collapse:collapse;border:1px solid var(--gray-light);border-radius:12px;overflow:hidden;}
.hfg-table th{background:var(--hfg-blue-deep);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:10px 14px;text-align:left;}
.hfg-table td{padding:8px 14px;border-top:1px solid var(--gray-light);font-size:13px;background:var(--white);}
.hfg-table td:first-child{background:var(--cream);font-weight:700;color:var(--hfg-blue);font-size:12px;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* ── CONTENT SHELL ── */
.page-body{max-width:1000px;margin:0 auto;padding:36px 24px 72px;}
.report-shell{max-width:1000px;margin:0 auto 48px;background:var(--white);border-radius:24px;box-shadow:0 8px 40px rgba(7,36,56,.12);overflow:hidden;}
/* ═══════════════════════════════════════════════════════════════════
HFG MOBILE LIVE SCREEN — dark shell (html.mv-mode only)
The touch-first counterpart to hfg-base.css. Ported from the field
tools app shell (.mapp.dk) via the why-now builder (styles/mobile.css).
THE SWITCH CONTRACT
───────────────────
• index.html ships an empty mount, hidden by default.
• scripts/app.js adds `mv-mode` to when the device is touch-first
(matchMedia '(hover: none) and (pointer: coarse)') AND the mobile
module (window.MobileView) loaded. mv-mode shows #mv and hides the
desktop pages + nav. If the mobile module is absent or detection
fails, nothing happens — the desktop experience is the fallback and
is never broken by this file.
• Both experiences render from ONE shared core module (see
references/mobile-desktop-pattern.md). Never fork the math.
All mobile component rules are scoped under #mv so they can never
leak into the desktop composition.
═══════════════════════════════════════════════════════════════════ */
#mv{display:none;}
html.mv-mode #mv{display:block;}
html.mv-mode #pg1{display:none!important;}
html.mv-mode #pg2{display:none!important;}
html.mv-mode .site-nav{display:none!important;}
html.mv-mode body{background:#0a2138;}
/* ── DARK SHELL TOKENS (app-shell .mapp.dk values) ── */
#mv .mapp.dk{
--bg:#0a2138;--bg2:#091d31;--panel:#0e2f4c;--panel2:#123a5c;
--line:rgba(150,190,220,.16);--ink:#eef5fc;--ink2:#aecade;--mut:#7794ac;
--lime:#bcd64a;--steel:#5fa8c4;--red:#ff6a57;--navy:#0c4a77;
/* fallback stack for mobile surfaces (kit family + system fallbacks) */
font-family:"dunbartext",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
min-height:100vh;min-height:100dvh;color:var(--ink);
}
/* ── SCREEN SHELL (max 560px column, safe-area aware) ── */
#mv .sub{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);overflow-x:hidden;max-width:560px;margin:0 auto;background:radial-gradient(120% 50% at 80% -8%,#11385a,#0a2138 52%,#08182a);}
#mv .subhdr{padding:max(24px,calc(env(safe-area-inset-top) + 10px)) 14px 10px;display:flex;align-items:center;gap:6px;flex:0 0 auto;}
#mv .backb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--panel);border:1px solid var(--line);cursor:pointer;flex:0 0 auto;}
#mv .subttl{font-size:18px;font-weight:800;letter-spacing:-.3px;flex:1;text-align:center;padding-right:40px;color:var(--ink);}
#mv .subscroll{flex:1;padding:4px 20px 26px;}
/* ── SCREEN HERO (icon + title row) ── */
#mv .scr-hero{display:flex;align-items:center;gap:13px;margin:4px 0 16px;}
#mv .scr-hero .hic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--lime);background:rgba(188,214,74,.13);border:1px solid var(--line);flex:0 0 auto;}
#mv .scr-hero .nm{font-size:24px;font-weight:800;letter-spacing:-.5px;}
#mv .scr-hero .bl{font-size:13.5px;color:var(--ink2);margin-top:2px;}
/* ── CARDS + COLLAPSIBLE SECTION HEADERS ── */
#mv .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 16px 6px;margin-bottom:14px;}
#mv .ch{display:flex;align-items:center;gap:9px;padding:2px 0 4px;}
#mv .ch .ic{color:var(--steel);display:flex;}
#mv .ch h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px;}
#mv .ch.tog,#mv .ch.tog *{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
#mv .ch .chgroup{margin-left:auto;display:flex;align-items:center;gap:9px;}
#mv .ch .chev{display:flex;align-items:center;color:var(--steel);transition:transform .2s;}
#mv .ch .chev.open{transform:rotate(90deg);}
#mv .ch .opt{color:var(--mut);font-weight:600;font-size:13px;}
#mv .cbody{padding-bottom:8px;}
/* ── ROWS + INLINE INPUTS ── */
#mv .row{display:block;padding:14px 0;border-top:1px solid var(--line);}
#mv .cbody .row:first-child{border-top:0;}
#mv .rlabel{font-size:15px;color:var(--ink2);font-weight:600;}
#mv .rlabel.caps{font-size:13px;color:var(--mut);font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
#mv .rlabel .opt{color:var(--mut);font-weight:600;font-size:13px;}
#mv .rline{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#mv .inp{display:flex;align-items:center;gap:4px;}
#mv .inp .pre{font-size:18px;color:var(--mut);font-weight:700;}
#mv .inp input{width:124px;text-align:right;background:transparent;border:none;outline:none;color:var(--ink);font-size:18px;font-weight:800;font-family:inherit;font-variant-numeric:tabular-nums;}
#mv .inp input.w46{width:46px;} #mv .inp input.w72{width:72px;} #mv .inp input.w84{width:84px;}
#mv .inp .suf{font-size:16px;color:var(--mut);font-weight:700;}
#mv .inp.txt input{width:160px;font-size:16px;font-weight:700;text-align:right;}
#mv .inp.txt input::placeholder{color:var(--mut);font-weight:600;}
/* ── SEGMENTED PICKERS ── */
#mv .seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:3px;}
#mv .seg.w168{width:168px;} #mv .seg.w224{width:224px;} #mv .seg.segflex{flex:1;min-width:0;}
#mv .seg button{flex:1;border:none;background:transparent;color:var(--ink2);font-size:14px;font-weight:800;padding:8px 4px;border-radius:16px;cursor:pointer;font-family:inherit;white-space:nowrap;}
#mv .seg button.on{background:var(--steel);color:#06243c;box-shadow:0 1px 3px rgba(0,0,0,.2);}
/* ── PIN INPUTS (bordered inline value chips) ── */
#mv .pin{display:flex;align-items:center;gap:3px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:7px 11px;}
#mv .pin input{width:66px;text-align:right;background:transparent;border:none;outline:none;color:var(--ink);font-size:16px;font-weight:800;font-family:inherit;font-variant-numeric:tabular-nums;}
#mv .pin input.w44{width:44px;}
#mv .pin input:disabled{color:var(--mut);}
#mv .pin .su{font-size:13px;color:var(--mut);font-weight:700;}
/* ── PRIMARY ACTION (full-width lime button) ── */
#mv .mbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;border-radius:16px;padding:16px;background:var(--lime);color:#06243c;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;margin:6px 0 14px;}
#mv .mbtn:active{transform:translateY(1px);}
#mv .mbtn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);}
/* ═══════════════════════════════════════════════════════════════════
HFG LETTER-PAGE REPORT SHELL — canonical tools-app report theme
Ported from the HFG Tools app report shell (RentReport et al.) via the
Rent vs. Buy refactor (/Users/jason/code/test-refactor). Copy VERBATIM.
Link order: pon7ryr kit → hfg-base.css → hfg-mobile.css → hfg-report.css
→ hfg-tool-ui.css → app.css.
Contract:
• renderReport() writes into #report (inside #pg2) a `.rp` containing
fixed 8.5×11in `.page` blocks — page 2+ get page-break-before in print.
• The composition NEVER reflows responsively: narrow screens scroll the
shell horizontally. The on-screen page IS the print preview.
• print-color-adjust:exact keeps every background/gradient/chart fill in
the PDF even when the browser's "Background graphics" box is unchecked.
• html.pdf-capture (set by ToolApp.sharePdf) shows #pg2 over the mobile
live screen so phones print the SAME desktop report.
• The Dunbar Typekit kit serves no italic face and print drops synthesized
italics — inside .be renders as weight, never add font-style:italic
to report output.
═══════════════════════════════════════════════════════════════════ */
/* ── REPORT PALETTE (canonical tools-app report shell values) ── */
:root{
--rp-backdrop:#cfd6dd; --rp-ink:#10324f; --rp-ink2:#41607a; --rp-mut:#7a8a98;
--rp-line:#e4e0d6; --rp-navy:#103a5c; --rp-grad1:#1d5c84; --rp-grad2:#0e2f4c;
--rp-lime:#7f9a16; --rp-lime-ink:#5f7414; --rp-limebg:#f2f6df; --rp-limeline:#d6e29a;
--rp-red:#c4503e; --rp-redpale1:#fbeeea; --rp-redpale2:#f6e2dc; --rp-redline:#e6c4bd; --rp-redink:#9a5448;
--rp-card:#fbfaf7; --rp-bestsub:#aecade; --rp-comp:#92a0ab;
--rp-chart-own:#4d8aa8; --rp-pill:#bcd64a; --rp-pill-ink:#16290a;
--rp-footnavy:#0f2a3d;
}
/* ── PG2 BAR + BACKDROP ── */
#pg2{background:var(--rp-backdrop);padding-bottom:40px;min-height:100vh;}
.pg2-bar{max-width:1000px;margin:0 auto;padding:26px 24px 6px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.pg2-bar h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:-1px;color:var(--hfg-blue-deep);}
.pg2-actions{display:flex;gap:10px;align-items:center;}
.pg2-actions .btn-primary{padding:11px 26px;font-size:14px;}
/* ── LETTER PAGES ON A GRAY BACKDROP ── */
.report-shell{background:transparent;box-shadow:none;border-radius:0;max-width:none;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rp{color:var(--rp-ink);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rp .page{width:8.5in;min-height:11in;background:var(--white);margin:18px auto;padding:.5in .55in;box-shadow:0 8px 30px rgba(0,0,0,.22);}
.rp .rhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--rp-navy);padding-bottom:14px;}
.rp .rhead .rlogo{height:32px;width:auto;}
.rp .rhead .meta{text-align:right;font-size:10.5px;color:var(--rp-mut);line-height:1.5;}
.rp .rhead .meta b{color:var(--rp-ink);font-size:11.5px;}
.rp .rheyebrow{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--rp-lime);margin-bottom:4px;text-align:right;}
.rp .rhname{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--rp-navy);line-height:1;text-align:right;}
.rp .rhname span{color:var(--rp-lime);}
.rp .rclient{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 4px;padding-bottom:14px;border-bottom:1px solid var(--rp-line);}
.rp .rclient .rc label{display:block;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--rp-mut);margin-bottom:3px;white-space:nowrap;}
.rp .rclient .rc .v{font-size:13.5px;font-weight:800;color:var(--rp-ink);letter-spacing:-.3px;white-space:nowrap;}
.rp .rpill{margin-left:auto;background:var(--rp-pill);color:var(--rp-pill-ink);font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:40px;padding:7px 13px;white-space:nowrap;}
.rp .htitle{font-size:26px;font-weight:800;letter-spacing:-.7px;margin:14px 0 4px;line-height:1.08;color:var(--rp-ink);}
.rp .hsub{font-size:13px;color:var(--rp-ink2);margin-bottom:4px;line-height:1.5;}
.rp .hsub b{color:var(--rp-navy);}
.rp .sectt{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--rp-mut);margin:14px 0 9px;display:flex;align-items:center;gap:9px;}
.rp .sectt::after{content:'';flex:1;height:1px;background:var(--rp-line);}
.rp .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
.rp .cards.c3{grid-template-columns:repeat(3,1fr);}
.rp .acard{border:1px solid var(--rp-line);border-radius:12px;padding:13px 13px 11px;background:var(--rp-card);}
.rp .acard.best{border-color:var(--rp-navy);background:linear-gradient(160deg,var(--rp-grad1),var(--rp-grad2));color:var(--white);}
.rp .acard.red{border-color:var(--rp-redline);background:linear-gradient(160deg,var(--rp-redpale1),var(--rp-redpale2));}
.rp .acard .ck{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--rp-mut);}
.rp .acard.best .ck{color:var(--rp-pill);}
.rp .acard.red .ck{color:var(--rp-red);}
.rp .acard .cn{font-size:25px;font-weight:800;letter-spacing:-1px;color:var(--rp-navy);margin:6px 0 1px;font-variant-numeric:tabular-nums;}
.rp .acard.best .cn{color:var(--white);}
.rp .acard.red .cn{color:var(--rp-red);}
.rp .acard .cl{font-size:10px;color:var(--rp-ink2);font-weight:700;line-height:1.35;}
.rp .acard.best .cl{color:var(--rp-bestsub);}
.rp .acard.red .cl{color:var(--rp-redink);}
.rp .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.rp .panel{border:1px solid var(--rp-line);border-radius:12px;padding:14px 15px;}
.rp .panel h4{font-family:var(--mono);margin:0 0 11px;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--rp-navy);}
.rp table.q{width:100%;border-collapse:collapse;font-size:11.5px;}
.rp table.q td{padding:7px 4px;border-bottom:1px solid var(--rp-line);font-variant-numeric:tabular-nums;}
.rp table.q td.l{text-align:left;color:var(--rp-ink2);}
.rp table.q td.v{text-align:right;font-weight:800;color:var(--rp-ink);}
.rp table.q tr.sum td{border-top:2px solid var(--rp-navy);border-bottom:none;padding-top:9px;}
.rp table.q tr.sum td.l{font-weight:800;color:var(--rp-ink);}
.rp table.q tr.sum td.v{color:var(--rp-navy);font-size:14px;}
.rp .pnote{font-size:10.5px;color:var(--rp-ink2);line-height:1.5;margin-top:11px;}
.rp .pnote b{color:var(--rp-navy);}
.rp .chartbox{border:1px solid var(--rp-line);border-radius:12px;padding:14px 15px 10px;}
.rp .chartbox .cbtt{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--rp-mut);margin-bottom:6px;}
.chart-svg{display:block;width:100%;height:auto;}
.rp .cbnote{font-size:10.5px;color:var(--rp-ink2);line-height:1.5;margin-top:10px;}
.rp .cbnote b{color:var(--rp-lime-ink);}
.rp .lgd{display:flex;gap:20px;margin-top:9px;font-size:11px;font-weight:700;color:var(--rp-ink2);flex-wrap:wrap;}
.rp .lgd .d{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:7px;vertical-align:3px;background:var(--rp-chart-own);}
.rp .lgd .d.dash{height:0;border-top:3px dotted var(--rp-red);background:none;}
/* SVG chart parts — colors via tokens (SVG attributes can't use var()) */
.gl{stroke:var(--rp-line);stroke-width:1;}
.ax{stroke:var(--rp-mut);stroke-width:1;}
.tl{fill:var(--rp-mut);font-size:10.5px;font-weight:600;font-family:var(--sans);}
.ln{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.ln-own{stroke:var(--rp-chart-own);}
.ln-rent{stroke:var(--rp-red);stroke-width:3;stroke-dasharray:2 7;}
.mk{stroke:var(--rp-navy);stroke-width:1;stroke-dasharray:3 4;opacity:.5;}
.grad-own stop:first-child{stop-color:var(--rp-chart-own);stop-opacity:.2;}
.grad-own stop:last-child{stop-color:var(--rp-chart-own);stop-opacity:.01;}
.rp .be{margin-top:14px;background:var(--rp-limebg);border:1px solid var(--rp-limeline);border-left:4px solid var(--rp-lime);border-radius:10px;padding:13px 15px;font-size:12px;line-height:1.55;}
.rp .be b{color:var(--rp-lime-ink);}
/* Dunbar kit has no italic face; print drops synthesized italics — use weight */
.rp .be i{font-style:normal;font-weight:800;}
.rp .lo{display:flex;gap:13px;align-items:center;margin-top:20px;padding-top:15px;border-top:1px solid var(--rp-line);}
.rp .lo .av{width:46px;height:46px;border-radius:50%;background:var(--rp-navy);color:var(--white);display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto;}
.rp .lo .nm{font-weight:800;font-size:14px;color:var(--rp-ink);}
.rp .lo .mt{font-size:11px;color:var(--rp-ink2);margin-top:2px;line-height:1.5;}
.rp .comp{margin-top:14px;font-size:8.7px;line-height:1.5;color:var(--rp-comp);}
/* navy company footer bar (original reportFooter) */
.rp .rfooter{margin-top:16px;background:var(--rp-footnavy);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:14px;}
.rp .rfooter .logo-chip.sm{background:transparent;padding:0;border-radius:0;}
.rp .rfooter .logo-chip.sm img{height:17px;}
.rp .rfooter .rftxt{flex:1 1 auto;text-align:center;color:rgba(255,255,255,.82);font-size:8.4px;line-height:1.5;letter-spacing:.2px;}
/* ── PRINT ── */
@page{size:letter;margin:0;}
@media print{
.site-nav,.pg2-bar{display:none!important;}
body,#pg2{background:var(--white)!important;}
.rp .page{box-shadow:none;margin:0;width:auto;max-width:none;min-height:auto;padding:.4in .5in;}
.rp .page + .page{page-break-before:always;}
.rp .chartbox,.rp .panel,.rp .acard,.rp .cards,.rp .be,.rp .lo{break-inside:avoid;}
/* even, compact rhythm so each page's composition fits one letter sheet */
.rp .rhead{padding-bottom:11px;}
.rp .rclient{margin:11px 0 2px;padding-bottom:11px;}
.rp .htitle{margin:11px 0 3px;font-size:23px;}
.rp .hsub{margin-bottom:0;}
.rp .sectt{margin:11px 0 8px;}
.rp .cards{gap:10px;}
.rp .acard{padding:11px 12px 10px;}
.rp .acard .cn{font-size:23px;margin:5px 0 1px;}
.rp table.q td{padding:6px 4px;}
.rp .chartbox{padding:10px 15px 6px;}
.rp .pnote{margin-top:8px;}
.rp .be{margin-top:11px;padding:11px 14px;}
.rp .lo{margin-top:14px;padding-top:12px;}
.rp .comp{margin-top:11px;}
}
/* ── PDF CAPTURE (why-now pattern) ──
Share-with-client always prints the DESKTOP report, even from the mobile
live screen — identical output on every device. app.js sets html.pdf-capture
around window.print(); .mv-mode.pdf-capture outranks the plain .mv-mode
visibility rules in hfg-mobile.css. */
html.pdf-capture #mv{display:none!important;}
html.mv-mode.pdf-capture #pg2{display:block!important;}
html.mv-mode.pdf-capture .pg2-bar{display:none!important;}
html.mv-mode.pdf-capture body{background:var(--white);}
/* ═══════════════════════════════════════════════════════════════════
HFG SHARED TOOL UI — desktop form extras + mobile bubble fields + share
overlay. Ported from the Rent vs. Buy refactor; copy VERBATIM.
Link order: pon7ryr kit → hfg-base.css → hfg-mobile.css → hfg-report.css
→ hfg-tool-ui.css → app.css.
Contains:
• Desktop: native-checkbox restore, chevron spinner column (.spinrow/.spin),
%/$ mode segment (.dp-tg), LO required note / auto-license tag / error box.
• Mobile (#mv): labeled bubble fields with chevron spinner (the original
NumField pattern), %/$ mini segment, select-in-bubble, toggle, checkbox
row, MI AUTO badge, slider tick alignment helpers, LO validation, and the
share-preview overlay (.shov/.sheet/.actions).
═══════════════════════════════════════════════════════════════════ */
/* ── DESKTOP FORM EXTRAS ── */
.submit-wrap{text-align:center;margin-top:10px;}
.chk{display:flex;align-items:flex-start;gap:8px;margin-top:7px;font-size:12px;color:var(--gray);font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;line-height:1.4;}
/* Restore the native checkbox: hfg-base's .inp-f input rule sets
-webkit-appearance:none (right for text fields, erases the check glyph
here). accent-color paints the checked state brand teal. */
.chk input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:16px;height:16px;min-width:16px;padding:0;margin-top:1px;border:none;border-radius:0;background:none;box-shadow:none;accent-color:var(--hfg-teal-dark);cursor:pointer;}
.chk i{font-style:italic;}
.chk-wide{margin-top:16px;font-size:12.5px;color:var(--text);}
.opt-tag{color:var(--gray);letter-spacing:.8px;font-size:10px;margin-left:6px;}
/* chevron spinner column next to an input (e.g. interest rate 1/8% steps).
Hide the native number spinner on such inputs per tool:
#rate::-webkit-inner-spin-button{-webkit-appearance:none;} etc. */
.spinrow{display:flex;gap:6px;align-items:stretch;}
.spinrow .inp-wrap{flex:1;min-width:0;}
.spin{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;}
.spin button{width:30px;flex:1;min-height:16px;border:1px solid var(--gray-light);background:var(--white);color:var(--hfg-blue);display:grid;place-items:center;cursor:pointer;padding:0;}
.spin button:first-child{border-radius:9px 9px 0 0;border-bottom:none;}
.spin button:last-child{border-radius:0 0 9px 9px;}
.spin button:active{background:var(--gray-light);}
/* %/$ mode segment inside a field label (down payment) */
.dp-tg{display:inline-flex;margin-left:8px;background:var(--gray-light);border-radius:8px;padding:2px;gap:1px;vertical-align:middle;}
.dp-tg button{border:none;background:transparent;color:var(--gray);font-size:10px;font-weight:800;padding:2px 9px;border-radius:6px;cursor:pointer;font-family:inherit;line-height:1.2;}
.dp-tg button.on{background:var(--white);color:var(--hfg-blue);box-shadow:0 1px 2px rgba(7,36,56,.18);}
/* Loan Officer section (why-now pattern): required note, auto-license tag,
validation error box shown above Generate when LO fields are incomplete */
.lo-note{margin-bottom:16px;}
.auto-lic{color:var(--hfg-teal-dark);font-size:9px;font-weight:700;letter-spacing:.5px;}
.lo-error{background:var(--red-pale);color:var(--red);border:1px solid rgba(192,57,43,.3);border-radius:10px;padding:11px 16px;font-size:13px;font-weight:600;margin-bottom:16px;max-width:560px;margin-left:auto;margin-right:auto;}
#lo-error{display:none;}
/* ═══════════ MOBILE (#mv) — dark-shell tokens only ═══════════ */
/* labeled bubble fields with chevron spinner (original NumField pattern) */
#mv .fld{padding:12px 0 13px;border-top:1px solid var(--line);}
#mv .cbody .fld:first-child,#mv .cbody .row:first-child + .fld{border-top:0;}
#mv .cbody .fld:first-child{padding-top:4px;}
#mv .fld .fl{font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin-bottom:7px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
#mv .box{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:11px 13px;}
#mv .box.dim{opacity:.5;}
#mv .box .pre{font-size:17px;color:var(--mut);font-weight:700;flex:0 0 auto;}
#mv .box input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-size:20px;font-weight:800;font-family:inherit;font-variant-numeric:tabular-nums;}
#mv .box input.txt{font-size:16px;font-weight:700;}
#mv .box input.txt::placeholder{color:var(--mut);font-weight:600;}
#mv .box .suf{font-size:15px;color:var(--mut);font-weight:700;flex:0 0 auto;}
#mv .spin{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;}
#mv .spin button{width:30px;height:17px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);display:grid;place-items:center;cursor:pointer;padding:0;}
#mv .spin button:first-child{border-radius:7px 7px 0 0;border-bottom:none;}
#mv .spin button:last-child{border-radius:0 0 7px 7px;}
#mv .spin button:active{background:var(--line);}
/* mini %/$ mode segment */
#mv .mseg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:2px;gap:1px;}
#mv .mseg button{border:none;background:transparent;color:var(--mut);font-size:11px;font-weight:800;padding:3px 11px;border-radius:12px;cursor:pointer;font-family:inherit;}
#mv .mseg button.on{background:var(--steel);color:#06243c;}
/* AUTO/MANUAL badge (e.g. mortgage insurance) */
#mv .auto{background:var(--bg2);color:var(--steel);font-size:10px;font-weight:800;letter-spacing:.5px;border-radius:20px;padding:3px 9px;cursor:pointer;border:1px solid var(--line);}
#mv .auto.off{color:var(--mut);}
/* toggle */
#mv .tg{width:50px;height:28px;border-radius:30px;background:var(--bg2);border:1px solid var(--line);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s;}
#mv .tg.on{background:var(--steel);border-color:var(--steel);}
#mv .tg .kn{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s;}
#mv .tg.on .kn{left:24px;}
/* checkbox row */
#mv .chkrow{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);cursor:pointer;}
#mv .chkrow .bx{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);flex:0 0 auto;margin-top:1px;display:grid;place-items:center;background:var(--bg2);color:transparent;font-size:14px;font-weight:800;}
#mv .chkrow.on .bx{background:var(--steel);border-color:var(--steel);color:#06243c;}
#mv .chkrow .ct{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4;}
#mv .chkrow .ct i{font-style:italic;color:var(--ink2);}
#mv .note{font-size:11.5px;color:var(--mut);line-height:1.5;margin:2px 2px 20px;}
/* slider card + tick labels aligned to the thumb's travel: the 11px /
(100% − 22px) terms compensate for the 22px thumb. tk10/tk20 offsets are
for a 1–30 range ((v−1)/29); recompute the factors for other ranges. */
#mv .rv-hz{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:15px 16px 12px;margin:14px 0;}
#mv .rv-hz .hh{display:flex;justify-content:space-between;align-items:baseline;}
#mv .rv-hz .hl{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);}
#mv .rv-hz .hv{font-size:16px;font-weight:800;color:var(--ink);}
#mv .rv-hz input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:7px;margin:11px 0 6px;outline:none;cursor:pointer;background:var(--bg2);}
#mv .rv-hz input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--steel);border:3px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.3);}
#mv .rv-hz .htk{position:relative;height:13px;margin-top:2px;font-size:11px;font-weight:700;color:var(--mut);}
#mv .rv-hz .htk span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;}
#mv .rv-hz .htk span:first-child{left:0;transform:none;}
#mv .rv-hz .htk .tk10{left:calc(11px + (100% - 22px) * 0.31034);}
#mv .rv-hz .htk .tk20{left:calc(11px + (100% - 22px) * 0.65517);}
#mv .rv-hz .htk span:last-child{left:100%;transform:translateX(-100%);}
/* LO section: select inside a bubble, required marker, validation error */
#mv .box select{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-size:16px;font-weight:700;font-family:inherit;-webkit-appearance:none;appearance:none;padding:0;}
#mv .box select:invalid,#mv .box select option[value=""]{color:var(--mut);}
#mv .box select option{background:var(--panel);color:var(--ink);}
#mv .fl .req{color:var(--red);letter-spacing:.5px;}
#mv .fl .auto-lic{color:var(--steel);font-size:10px;font-weight:800;letter-spacing:.5px;}
/* "optional" chip — the one LO field that is not required (the Override title). */
#mv .fl .opt{color:var(--steel);font-size:10px;font-weight:800;letter-spacing:.5px;}
#mv .box.field-error{border-color:var(--red);}
#mv .lo-err{background:rgba(255,106,87,.14);border:1px solid rgba(255,106,87,.5);color:var(--red);font-size:12.5px;line-height:1.5;font-weight:700;border-radius:14px;padding:12px 14px;margin:0 0 12px;}
/* ── SHARE SHEET OVERLAY (ported from the tools-app ShareSheet) ── */
#mv .shov{position:fixed;inset:0;z-index:120;background:rgba(4,12,20,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;flex-direction:column;}
#mv .shov[hidden]{display:none;}
#mv .shov .shtop{padding:max(24px,calc(env(safe-area-inset-top) + 10px)) 16px 8px;display:flex;align-items:center;gap:6px;flex:0 0 auto;}
#mv .shov .shclose{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;}
#mv .shov .shttl{flex:1;text-align:center;color:var(--ink);font-size:15px;font-weight:800;padding-right:40px;}
#mv .shov .shscroll{flex:1;overflow:auto;padding:2px 16px 6px;}
#mv .sheet{background:var(--white);border-radius:20px;overflow:hidden;color:var(--rp-ink);box-shadow:0 24px 60px rgba(0,0,0,.45);max-width:560px;margin:0 auto;}
#mv .sheet .shead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--gray-light);}
#mv .sheet .shead img{height:20px;width:auto;}
#mv .sheet .shead .prep{font-size:10px;color:var(--rp-mut);text-align:right;line-height:1.35;}
#mv .sheet .shead .prep b{color:var(--rp-ink);font-size:11px;}
#mv .sheet .sbody{padding:18px;}
#mv .sheet .kick{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--rp-lime);}
#mv .sheet .stitle{font-size:22px;font-weight:800;letter-spacing:-.5px;margin:4px 0 14px;}
#mv .sheet .shero{background:linear-gradient(150deg,var(--rp-grad1),var(--rp-grad2));color:var(--white);border-radius:14px;padding:18px;}
#mv .sheet .shero .hv{font-size:42px;font-weight:800;letter-spacing:-1.6px;line-height:1;font-variant-numeric:tabular-nums;}
#mv .sheet .shero .hl{font-size:12.5px;color:var(--rp-bestsub);margin-top:7px;line-height:1.4;}
#mv .sheet .srows{margin-top:6px;}
#mv .sheet .srow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 2px;border-bottom:1px solid var(--gray-light);font-size:13.5px;}
#mv .sheet .srow .l{color:var(--rp-ink2);}
#mv .sheet .srow .v{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
#mv .sheet .lo{display:flex;gap:12px;align-items:center;margin-top:16px;padding-top:15px;border-top:1px solid var(--gray-light);}
#mv .sheet .lo .av{width:44px;height:44px;border-radius:50%;background:var(--rp-grad2);color:var(--white);display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto;}
#mv .sheet .lo .nm{font-weight:800;font-size:14.5px;}
#mv .sheet .lo .mt{font-size:11.5px;color:var(--rp-ink2);margin-top:1px;line-height:1.5;}
#mv .sheet .compliance{padding:13px 18px 16px;background:var(--paper);font-size:9.5px;line-height:1.45;color:var(--rp-comp);}
#mv .shov .actions{flex:0 0 auto;display:flex;gap:9px;padding:12px 16px max(26px,calc(env(safe-area-inset-bottom) + 12px));max-width:592px;margin:0 auto;width:100%;}
#mv .shov .actions button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:700;border-radius:14px;padding:12px 6px;cursor:pointer;font-family:inherit;}
#mv .shov .actions button.primary{background:var(--lime);border-color:var(--lime);color:#06243c;}
/* The actions-button rule above sets display:flex, which outranks the UA
[hidden] rule — so a parked action needs this explicit hide (e.g. the
mobile Print / Save PDF button, deferred to a later sprint). */
#mv .shov .actions button[hidden]{display:none;}
#mv .shov .actions button:active{transform:scale(.97);}
/* Home Affordability — tool-specific layout (styles/app.css)
Layer 6 of the theme contract: pon7ryr kit → hfg-base → hfg-mobile →
hfg-report → hfg-tool-ui → this file. Only what is unique to THIS tool
lives here; the report shell, form extras, mobile bubble fields, and share
overlay come verbatim from the bundled hfg-report.css / hfg-tool-ui.css.
Colors only via var(--…) tokens — the --af-* tokens below are this tool's
additions (ported from the original AffordReport palette), defined once
here and consumed via var(). No inline styles anywhere (CSP); dynamic
gauge/segment sizes are applied from JS via the CSSOM. */
:root{
--af-p1:#1f5b86; /* PITI bar — principal & interest */
--af-p2:#3f87b0; /* PITI bar — taxes */
--af-p3:#86b7cf; /* PITI bar — insurance */
--af-p4:#a9c6d9; /* PITI bar — mortgage insurance */
--af-track:#eef0ec;/* DTI gauge track */
--af-mkbg:#dceaf0; /* fine-print marker chip */
--af-mk:#2f6f8a;
}
/* interest-rate field uses the custom .spin chevrons — hide the native
(tiny) number-input spinner so there aren't two sets of arrows */
#rate::-webkit-inner-spin-button,#rate::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#rate{-moz-appearance:textfield;appearance:textfield;}
/* ── REPORT: DTI gauge bars with limit marker (original AffordReport .gau) ── */
.rp .gau{margin-top:10px;}
.rp .gau:first-of-type{margin-top:0;}
.rp .gau .gh{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--rp-ink2);margin-bottom:5px;}
.rp .gau .gh .bindtag{color:var(--rp-red);font-weight:800;}
.rp .gau .gh .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);}
.rp .gau .gt{position:relative;height:19px;border-radius:6px;background:var(--af-track);overflow:visible;}
.rp .gau .gf{height:100%;border-radius:6px;background:var(--rp-chart-own);}
.rp .gau .gf.bind{background:var(--rp-red);}
.rp .gau .gmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--rp-navy);}
.rp .gau .glab{font-size:9px;color:var(--rp-mut);margin-top:5px;}
.rp .gau .glab b{color:var(--rp-ink);}
.rp .gnote{font-size:10.5px;color:var(--rp-ink2);line-height:1.5;margin-top:13px;}
.rp .gnote b{color:var(--rp-ink);}
.rp table.q td .qn{color:var(--rp-mut);font-weight:400;}
/* ── REPORT: PITI breakdown bar (original AffordReport .pbar) ── */
.rp .pbar{border:1px solid var(--rp-line);border-radius:12px;padding:14px 15px;}
.rp .pbar .seg{display:flex;height:26px;border-radius:7px;overflow:hidden;gap:2px;}
.rp .pbar .seg i{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--white);white-space:nowrap;font-style:normal;}
.rp .pbar .seg i.p1,.rp .pbar .leg .d.p1{background:var(--af-p1);}
.rp .pbar .seg i.p2,.rp .pbar .leg .d.p2{background:var(--af-p2);}
.rp .pbar .seg i.p3,.rp .pbar .leg .d.p3{background:var(--af-p3);}
.rp .pbar .seg i.p4,.rp .pbar .leg .d.p4{background:var(--af-p4);}
.rp .pbar .leg{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:11px;color:var(--rp-ink2);font-weight:700;}
.rp .pbar .leg .d{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;}
.rp .pbar .leg b{font-variant-numeric:tabular-nums;color:var(--rp-ink);margin-left:5px;}
.rp .pbar .leg .tot{color:var(--rp-ink);}
.rp .pbar .leg .tot b{margin-left:0;}
/* ── REPORT: levers table (original AffordReport table.lv) ── */
.rp table.lv{width:100%;border-collapse:collapse;font-size:11.5px;}
.rp table.lv th,.rp table.lv td{padding:6px 12px;text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--rp-line);}
.rp table.lv thead th{background:var(--rp-navy);color:var(--white);font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;}
.rp table.lv th.l,.rp table.lv td.l{text-align:left;font-weight:700;color:var(--rp-ink);}
.rp table.lv thead th.l{color:var(--white);}
.rp table.lv tbody tr:nth-child(even) td{background:var(--rp-card);}
.rp table.lv td .up{color:var(--rp-lime-ink);font-weight:800;}
.rp table.lv td .dn{color:var(--rp-red);font-weight:800;}
/* ── REPORT: fine-print list + next steps + assumptions (original .tos/.steps/.irows) ── */
.rp .tos{display:grid;gap:0;border:1px solid var(--rp-line);border-radius:12px;overflow:hidden;}
.rp .toi{display:flex;gap:11px;padding:8px 15px;border-top:1px solid var(--rp-line);font-size:11.5px;line-height:1.45;color:var(--rp-ink2);}
.rp .toi:first-child{border-top:0;}
.rp .toi .mk{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--af-mkbg);color:var(--af-mk);display:grid;place-items:center;font-weight:900;font-size:11px;}
.rp .toi b{color:var(--rp-ink);}
.rp .steps{display:grid;gap:7px;}
.rp .steps.g2{grid-template-columns:1fr 1fr;gap:8px 18px;}
.rp .stp{display:flex;gap:11px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--rp-ink2);}
.rp .stp .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--rp-pill);color:var(--rp-pill-ink);display:grid;place-items:center;font-weight:800;font-size:11px;}
.rp .stp b{color:var(--rp-ink);}
/* ── REPORT: rate-band bar chart (original AFCharts.RateBars, vanilla SVG).
Colors via classes — SVG presentation attributes can't use var(). ── */
.afb-axis{stroke:var(--rp-line);stroke-width:1;}
.afb-bar{fill:var(--rp-chart-own);opacity:.55;}
.afb-bar.cur{fill:var(--rp-lime);opacity:1;}
.afb-val{fill:var(--rp-ink2);font-size:11.5px;font-weight:800;font-family:var(--sans);}
.afb-val.cur{fill:var(--rp-lime-ink);}
.afb-lab{fill:var(--rp-mut);font-size:11px;font-weight:700;font-family:var(--sans);}
.afb-lab.cur{fill:var(--rp-ink2);font-weight:800;}
.afb-tag{fill:var(--rp-lime-ink);font-size:8.5px;font-weight:800;letter-spacing:.4px;font-family:var(--sans);}
@media print{
/* #pg2's screen-only bottom padding would spill a blank third sheet once
page 2 fills the letter page */
#pg2{padding-bottom:0;}
.rp .pbar,.rp table.lv,.rp .tos,.rp .steps,.rp .gau{break-inside:avoid;}
.rp .pbar{padding:11px 14px;}
.rp .pbar .leg{margin-top:9px;}
.rp table.lv th,.rp table.lv td{padding:4px 12px;}
.rp .toi{padding:5px 14px;font-size:10.5px;}
.rp .be{margin-top:11px;padding:10px 14px;}
.rp .stp{font-size:11.5px;}
.rp .cbnote{margin-top:8px;font-size:10px;}
.rp .lo{margin-top:10px;padding-top:10px;}
.rp .comp{margin-top:9px;}
.rp .rfooter{margin-top:12px;}
}
/* ── MOBILE: live buying-power banner (this tool's hero) ── */
#mv .af-banner{margin:6px 0 4px;padding:24px 22px 20px;text-align:center;color:var(--ink);position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:linear-gradient(158deg,var(--panel2),var(--panel) 78%);}
#mv .af-banner .bk{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);}
#mv .af-banner .af-big{font-size:44px;font-weight:800;letter-spacing:-1.6px;line-height:1.02;margin:6px 0 2px;color:var(--lime);font-variant-numeric:tabular-nums;}
#mv .af-stat3{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:14px;margin-top:15px;overflow:hidden;}
#mv .af-stat3 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .af-stat3 .c + .c{border-left:1px solid var(--line);}
#mv .af-stat3 .c .l{font-size:11px;color:var(--ink2);font-weight:700;}
#mv .af-stat3 .c .v{font-size:16px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
/* DTI chips + binding note */
#mv .af-chips{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:14px 0 0;}
#mv .af-chip{border-radius:15px;padding:14px 14px 13px;text-align:center;border:1px solid var(--line);background:var(--panel);}
#mv .af-chip .l{font-size:12px;color:var(--mut);font-weight:700;}
#mv .af-chip .v{font-size:26px;font-weight:800;letter-spacing:-.7px;margin:3px 0 1px;font-variant-numeric:tabular-nums;color:var(--steel);}
#mv .af-chip .s{font-size:12px;font-weight:800;color:var(--steel);}
#mv .af-chip.warn{border-color:var(--red);}
#mv .af-chip.warn .v,#mv .af-chip.warn .s{color:var(--red);}
#mv .binding{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin:12px 0 14px;font-size:12.5px;color:var(--ink2);line-height:1.4;}
#mv .binding b{color:var(--ink);font-weight:800;}
/* label sub-tags in the dark shell use the mobile muted token, not the
light-theme --gray that hfg-tool-ui's desktop .opt-tag rule assumes */
#mv .fl .opt-tag{color:var(--mut);}
/* LO headshot avatar — report PDF + mobile share card.
.av is a fixed circle; with a photo we drop the initials background and let
the image fill it. Falls back to the initials circle when no photo. */
.rp .lo .av.has-photo,
#mv .sheet .lo .av.has-photo{background:none;padding:0;overflow:hidden;}
.rp .lo .av.has-photo img,
#mv .sheet .lo .av.has-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* ── Mobile PDF share pipeline (scripts/report-pdf.js) ──
html2canvas can't render inline SVG under the strict CSP (it loads SVG as a
data: image, which img-src blocks), so report-pdf.js pre-rasterizes each
report SVG onto a sibling