/* Builder Incentive — 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.
   Report colors come from the --rp-* palette (hfg-report.css) — hex appears
   only where the canonical BuilderReport shell has no matching token
   (header-cell gradients, band tint hues).
   Colors only via var(--…) tokens. No inline styles anywhere (CSP).
   NO italics in report styles — the Dunbar kit has no italic face. */

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

/* ── %/$ unit toggle INSIDE the input box (seller-strategy pattern) ──
   The segment sits where a suffix adornment would; the highlighted unit IS
   the adornment, and the .inp-hint below shows the live equivalent in the
   other unit. */
.inp-wrap .unit-tg{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;background:var(--gray-light);border-radius:8px;padding:2px;gap:1px;}
.inp-wrap .unit-tg button{border:none;background:transparent;color:var(--gray);font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;cursor:pointer;font-family:inherit;line-height:1.2;}
.inp-wrap .unit-tg button.on{background:var(--white);color:var(--hfg-blue);box-shadow:0 1px 2px rgba(7,36,56,.18);}
.has-unit-tg input{padding-right:72px;}

/* ═══════════ REPORT — Builder Incentive pieces (namespaced under .rp) ═══════════
   Ported from the original BuilderReport shell CSS, re-tokened to --rp-*.
   The original's green "good" hue is re-mapped to the report lime ink —
   the HFG palette carries no green (brand rule). */

/* ── scenario comparison grid (divs, not <table> — Safari-print lesson) ── */
.rp .cmpgrid{display:grid;grid-template-columns:30% repeat(3,1fr);border:1px solid var(--rp-line);border-radius:14px;overflow:hidden;background:var(--white);}
.rp .cmpgrid > div{padding:3px 13px;border-bottom:1px solid var(--rp-line);border-left:1px solid var(--rp-line);font-size:12px;display:flex;flex-direction:column;justify-content:center;}
.rp .cmpgrid .corner{border-left:0;border-bottom:0;}
.rp .cmpgrid .lab{border-left:0;color:var(--rp-ink2);font-weight:600;}
.rp .cmpgrid .val{text-align:right;font-variant-numeric:tabular-nums;align-items:flex-end;}
.rp .cmpgrid .val .v{font-weight:800;}
.rp .cmpgrid .val .sub{font-size:9.5px;color:var(--rp-mut);font-weight:600;margin-top:1px;}
.rp .cmpgrid .val.pos .v{color:var(--rp-lime-ink);}
.rp .cmpgrid .val.neg .v{color:var(--rp-red);}
/* header cells — A 2/1 temp (dark slate, gold tag) · B perm (navy gradient,
   lime tag) · C price cut (light). Slate/gold hues come from the canonical
   BuilderReport shell — no --rp-* equivalents exist for these. */
.rp .cmpgrid .gh{padding:7px 13px;border-bottom:0;text-align:right;align-items:flex-end;border-left:1px solid rgba(0,0,0,.06);}
.rp .cmpgrid .gh .tg{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
.rp .cmpgrid .gh .nm{font-size:12.5px;font-weight:800;letter-spacing:-.3px;line-height:1.18;margin-top:4px;white-space:pre-line;}
.rp .cmpgrid .gh.a{background:linear-gradient(160deg,#243042,#0e2030);color:var(--white);}
.rp .cmpgrid .gh.a .tg{color:#e3c452;}
.rp .cmpgrid .gh.b{background:linear-gradient(160deg,var(--rp-grad1),var(--rp-grad2));color:var(--white);}
.rp .cmpgrid .gh.b .tg{color:var(--rp-pill);}
.rp .cmpgrid .gh.c{background:#f1efe9;color:var(--rp-ink);}
.rp .cmpgrid .gh.c .tg{color:var(--rp-ink2);}
.rp .cmpgrid .sh{background:#f8fafb;}
.rp .cmpgrid .big{background:#eef3f8;}
.rp .cmpgrid .big.lab{color:var(--rp-navy);font-weight:800;}
.rp .cmpgrid .big .v{font-size:17px;color:var(--rp-navy);letter-spacing:-.5px;}
.rp .cmpgrid .net{background:var(--rp-limebg);border-bottom:0;}
.rp .cmpgrid .net.lab{color:var(--rp-lime-ink);font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.4px;}
.rp .cmpgrid .net .v{font-size:16px;color:var(--rp-navy);letter-spacing:-.5px;}
.rp .cmpgrid .win .v{color:var(--rp-lime-ink);}

/* ── which-option-fits-the-buyer navy band ──
   band-specific navy/tint hues from the canonical BuilderReport shell —
   no --rp-* equivalents exist for these */
.rp .band{border-radius:16px;padding:22px 34px;color:var(--white);background:linear-gradient(135deg,#16486e,#0a223a 72%);text-align:center;}
.rp .band .bk{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7fb0cf;}
.rp .band .bnums{display:flex;justify-content:center;align-items:flex-start;gap:0;margin:16px 0 14px;}
.rp .band .bn{flex:0 0 auto;padding:0 44px;border-left:1px solid rgba(255,255,255,.18);}
.rp .band .bn:first-child{border-left:0;}
.rp .band .bn .v{font-size:32px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;}
.rp .band .bn.g .v{color:#cfe35f;}
.rp .band .bn.y .v{color:#f0d97a;}
.rp .band .bn .l{font-size:12.5px;color:#bcd2e2;margin-top:9px;line-height:1.35;font-weight:600;white-space:pre-line;}
.rp .band .bsent{font-size:15px;font-weight:700;line-height:1.5;max-width:760px;margin:8px auto 0;}
.rp .band .bsent b.g{color:#cfe35f;}
.rp .band .bsent b.y{color:#f0d97a;}
/* 2/1 funding meter (inside the band) — the fill width is set from JS via
   the CSSOM (data-w), never an inline style attribute */
.rp .fundbar{max-width:520px;margin:9px auto 2px;}
.rp .fundbar .fl{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#bcd2e2;margin-bottom:4px;}
.rp .fundbar .fl .fp{font-size:11px;}
.rp .fundbar .fl .fp.ok{color:#cfe35f;}
.rp .fundbar .fl .fp.short{color:#f0a78f;}
.rp .fundbar .track{height:7px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.rp .fundbar .track i{display:block;height:100%;border-radius:999px;font-style:normal;}
.rp .fundbar .track i.ok{background:#cfe35f;}
.rp .fundbar .track i.short{background:#f0a78f;}
.rp .fundbar .fnote{font-size:10px;font-weight:700;margin-top:4px;text-align:center;}
.rp .fundbar .fnote.ok{color:#cfe35f;}
.rp .fundbar .fnote.short{color:#f0a78f;}

/* ── deal-assumptions rows (two-column .two comes from hfg-report.css) ── */
.rp .irows{border:1px solid var(--rp-line);border-radius:12px;overflow:hidden;}
.rp .irow{display:flex;justify-content:space-between;align-items:baseline;padding:6px 15px;border-top:1px solid var(--rp-line);font-size:12px;}
.rp .irow:first-child{border-top:0;}
.rp .irow .l{color:var(--rp-ink2);}
.rp .irow .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);}

/* Logo on dark: never a pill/box behind a logo on a dark surface — the white
   logo variant sits directly on the navy rfooter (brand rule, 2026-07). */
.rp .rfooter .logo-chip.sm{background:transparent;padding:0;border-radius:0;}

/* ── PRINT: compact rhythm so each page's composition fits one letter sheet
   (hfg-report.css already tightens the shared shell pieces), and the screen
   backdrop's bottom padding must not spill a blank third sheet ── */
@media print{
  #pg2{padding-bottom:0!important;min-height:0!important;}
  .report-shell{overflow:visible;}
  .rp .cmpgrid,.rp .band,.rp .two,.rp .irows,.rp .fundbar{break-inside:avoid;}
  .rp .cmpgrid > div{padding:2.5px 13px;}
  .rp .band{padding:14px 28px;}
  .rp .band .bnums{margin:10px 0 8px;}
  .rp .band .bn .v{font-size:28px;}
  .rp .band .bn .l{font-size:11.5px;margin-top:6px;}
  .rp .band .bsent{font-size:13px;}
  .rp .irow{padding:4px 15px;}
}
/* ══ MOBILE: live screen ══
   BUILDER INCENTIVE — MOBILE LIVE SCREEN (#mv) TOOL-SPECIFIC STYLES
   Appendable block: the orchestrator merges this file into styles/app.css
   after the desktop styles. Everything is namespaced under #mv and colors
   come from the dark-shell tokens hfg-mobile.css defines on #mv .mapp.dk
   (--bg2/--panel/--panel2/--line/--ink/--ink2/--mut/--lime/--steel/--red/
   --navy). Bubble fields, LO section, and the share overlay come from
   hfg-tool-ui.css — nothing here restyles those.
   Visual intent restated from the original bundle .bds styles in HFG
   tokens (same approach as the Seller Strategy / Debt Consolidation
   refactors). The original JSX glow spans and funding-bar width used
   inline style={{}} — the glows are the .glow.g1/.g2 classes below and
   the bar width is set from JS via el.style.width (CSSOM). */

/* ── hero banner: the incentive, deployed three ways (navy gradient,
      lime big number — original .bd-banner dk treatment) ── */
#mv .bd-banner{margin:6px 0 4px;padding:24px 22px 22px;text-align:center;color:var(--ink);position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(188,214,74,.45);background:linear-gradient(158deg,var(--navy),var(--panel) 78%);box-shadow:0 16px 34px rgba(0,0,0,.34);}
#mv .bd-banner .glow{position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none;}
#mv .bd-banner .glow.g1{width:230px;height:230px;top:-70px;right:-60px;}
#mv .bd-banner .glow.g2{width:150px;height:150px;bottom:-60px;left:-30px;}
#mv .bd-banner .bl{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2);}
#mv .bd-banner .bd-big{font-size:48px;font-weight:800;letter-spacing:-2px;line-height:1.02;margin:5px 0 4px;color:var(--lime);font-variant-numeric:tabular-nums;}
#mv .bd-banner .bd-sub{font-size:13px;color:var(--ink2);line-height:1.45;max-width:300px;margin:0 auto;}
#mv .bd-banner .bd-sub b{color:var(--ink);}
#mv .bd-stat3{display:flex;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:15px;margin-top:17px;overflow:hidden;}
#mv .bd-stat3 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .bd-stat3 .c + .c{border-left:1px solid rgba(255,255,255,.16);}
#mv .bd-stat3 .c .l{font-size:10.5px;color:var(--ink2);font-weight:700;line-height:1.25;}
#mv .bd-stat3 .c .v{font-size:18px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;color:var(--ink);}
#mv .bd-stat3 .c .vs{font-size:10px;color:var(--mut);font-weight:600;margin-top:2px;}

/* ── section label ── */
#mv .seclab{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin:20px 2px 11px;}

/* ── scenario compare cards ── */
#mv .strat{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px 15px;margin-bottom:11px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
#mv .strat .tag{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);}
#mv .strat .nm{font-size:15.5px;font-weight:800;letter-spacing:-.3px;margin-top:3px;line-height:1.2;color:var(--ink);}
#mv .strat .meta{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:4px;line-height:1.35;}
#mv .strat .rgt{text-align:right;flex:0 0 auto;}
#mv .strat .rgt .net{font-size:23px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:var(--ink);}
#mv .strat .rgt .nl{font-size:10px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
#mv .strat .pill{display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:999px;padding:3px 8px;margin-top:6px;}
/* recommended (2/1 temp) card — navy gradient with the original dk GOLD
   accent (border/tag/pill); no gold token exists in the shell palette, so
   these literals carry the original .bds .strat.rec dark-theme values.
   The big year-1 payment stays on the shell lime token. */
#mv .strat.rec{border-color:rgba(212,175,55,.55);background:linear-gradient(160deg,var(--panel2),var(--panel));}
#mv .strat.rec .tag{color:#e3c452;}
#mv .strat.rec .meta{color:var(--ink2);}
#mv .strat.rec .rgt .net{color:var(--lime);}
#mv .strat.rec .rgt .nl{color:var(--mut);}
#mv .strat.rec .pill{background:rgba(227,196,82,.22);color:#f0d97a;}
/* long-term winner (perm buydown) — lime-tint treatment on the dark shell */
#mv .strat.lt2{border-color:rgba(188,214,74,.35);background:linear-gradient(135deg,rgba(188,214,74,.16),rgba(188,214,74,.05));}
#mv .strat.lt2 .tag{color:var(--lime);}
#mv .strat.lt2 .meta{color:var(--ink2);}
#mv .strat.lt2 .rgt .net{color:var(--lime);}
#mv .strat.lt2 .pill{background:rgba(188,214,74,.16);color:var(--lime);}

/* ── 5-year total P&I cost compare (lowest cell wins) ── */
#mv .fyc{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;}
#mv .fyc .c{flex:1;padding:12px 8px;text-align:center;}
#mv .fyc .c + .c{border-left:1px solid var(--line);}
#mv .fyc .c .l{font-size:10px;color:var(--mut);font-weight:800;text-transform:uppercase;letter-spacing:.4px;line-height:1.25;}
#mv .fyc .c .v{font-size:17px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;color:var(--ink);}
#mv .fyc .c.win{background:rgba(188,214,74,.10);}
#mv .fyc .c.win .l{color:var(--lime);}
#mv .fyc .c.win .v{color:var(--lime);}

/* ── 2/1 buydown funding meter (ok = lime, short = shell red; bar width
      is set from JS via el.style.width) ── */
#mv .fund{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:14px;}
#mv .fund .fh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;}
#mv .fund .fh .ft{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.2px;}
#mv .fund .fh .fp{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}
#mv .fund.ok .fh .fp{color:var(--lime);}
#mv .fund.short .fh .fp{color:var(--red);}
#mv .fund .bar{height:9px;border-radius:999px;background:var(--bg2);overflow:hidden;border:1px solid var(--line);}
#mv .fund .bar i{display:block;height:100%;border-radius:999px;}
#mv .fund.ok .bar i{background:var(--lime);}
#mv .fund.short .bar i{background:var(--red);}
#mv .fund .fmsg{font-size:12px;font-weight:700;line-height:1.35;margin-top:9px;}
#mv .fund.ok .fmsg{color:var(--lime);}
#mv .fund.short .fmsg{color:var(--red);}

/* ── field sub-label (under the uppercase label, above the bubble) ── */
#mv .fsub{font-size:12px;color:var(--mut);font-weight:600;line-height:1.3;margin:-3px 0 7px;}

/* ── incentive %-of-loan note (original .ipc.ok info chip) ── */
#mv .ipc{display:flex;align-items:center;gap:8px;border-radius:12px;padding:10px 13px;margin:2px 0 12px;font-size:12.5px;font-weight:700;line-height:1.35;border:1px solid var(--line);}
#mv .ipc .ic{flex:0 0 auto;display:flex;}
#mv .ipc.ok{background:var(--bg2);border-color:var(--steel);color:var(--steel);}

/* ── derived strip (2×2: base loan / base P&I / buydown cost / left-short) ── */
#mv .deriv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;}
#mv .deriv .d{background:var(--panel);padding:11px 14px;}
#mv .deriv .d .k{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);}
#mv .deriv .d .v{font-size:17px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;color:var(--ink);}
#mv .deriv .d .v.good{color:var(--lime);}
#mv .deriv .d .v.warn{color:var(--red);}

/* ════════════════════════════════════════════════════════════════════════
   AUTH PHASE additions (MSAL Entra + Graph /me). Tokens from hfg-base.css.
   ════════════════════════════════════════════════════════════════════════ */

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

/* Share-overlay action buttons set display:flex (hfg-tool-ui.css), which outranks
   the UA [hidden] rule — restate it so a hidden action (Print/Save PDF, disabled
   on mobile for now) actually stays hidden. */
#mv .shov .actions button[hidden]{display:none!important;}