/* 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);}

/* ── AUTH GATE + FAIL-CLOSED FIRST PAINT (MSAL Entra) ──
   The body ships data-auth-state="checking" in static HTML, and every protected
   region stays display:none in ANY state except signed-in — so the tool can never
   flash before auth completes, even if JavaScript fails entirely.
   scripts/auth.js advances the state machine: checking | signed-out | signed-in | error. */
body:not([data-auth-state="signed-in"]) .site-nav,
body:not([data-auth-state="signed-in"]) #pg1,
body:not([data-auth-state="signed-in"]) #pg2,
body:not([data-auth-state="signed-in"]) #mv{display:none!important;}
body[data-auth-state="signed-in"] .auth-gate{display:none;}
.auth-gate{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--hfg-blue-deep);text-align:center;padding:24px;}
.auth-title{font-family:var(--sans);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.01em;}
.auth-msg{font-size:13px;color:rgba(255,255,255,.45);max-width:380px;line-height:1.55;}
.auth-btn{margin-top:8px;padding:10px 22px;border-radius:8px;background:var(--hfg-teal);border:none;color:#fff;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;}
.auth-btn:hover{background:var(--hfg-teal-dark);}
.auth-btn[hidden]{display:none;}

/* LO Graph-autofill note (shown after sign-in when /me populated fields) */
.lo-autofill-note{margin:0 0 14px;padding:9px 13px;border-radius:8px;background:var(--hfg-teal-pale);color:var(--hfg-blue-deep);font-size:12px;line-height:1.5;}
.lo-autofill-note[hidden]{display:none;}

/* LO headshot avatar (Graph /me photo) — 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 <canvas> via a blob: URL and hides the original.
   Both swaps are class-based so they survive html2canvas's DOM clone. */
.pdf-svg-raster{display:block;width:100%;height:auto;}
.pdf-svg-hidden{display:none!important;}

/* Mobile LO Graph-autofill note (dark shell twin of .lo-autofill-note) */
#mv .lo-auto-note{background:rgba(188,214,74,.1);border:1px solid rgba(188,214,74,.32);border-radius:11px;padding:9px 12px;margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--ink2);}
#mv .lo-auto-note[hidden]{display:none;}