/* Refinance — 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. No inline styles anywhere (CSP). */

/* interest-rate fields use the custom .spin chevrons — hide the native
   (tiny) number-input spinner so there aren't two sets of arrows */
#curRate::-webkit-inner-spin-button,#curRate::-webkit-outer-spin-button,
#newRate::-webkit-inner-spin-button,#newRate::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#curRate,#newRate{-moz-appearance:textfield;appearance:textfield;}

/* full-width form cell (roll-in checkbox spans the grid) */
.inp-f-wide{grid-column:1/-1;}

/* ══════════ REPORT: break-even chart colors (SVG classes; attrs can't use var()) ══════════ */
.ln-be{stroke:var(--rp-lime);stroke-width:2.6;}
.area-be{fill:var(--rp-lime);fill-opacity:.12;stroke:none;}
.zero-line{stroke:var(--rp-red);stroke-width:1;stroke-dasharray:3 3;}
.be-dot{fill:var(--rp-navy);}
.rp .lgd .d.be{background:var(--rp-lime);}

/* ══════════ REPORT: current-vs-new comparison table (tool-specific) ══════════ */
.rp .ctab{border:1px solid var(--rp-line);border-radius:12px;overflow:hidden;}
.rp .ctr{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;border-top:1px solid var(--rp-line);font-size:12px;font-variant-numeric:tabular-nums;}
.rp .ctr:first-child{border-top:0;}
.rp .ctr > div{padding:8px 13px;}
.rp .ctr.h{background:var(--off-white);font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--rp-navy);}
.rp .ctr.h > div:not(:first-child),.rp .ctr > div:not(:first-child){text-align:right;}
.rp .ctr .lbl{color:var(--rp-ink2);font-weight:700;}
.rp .ctr .std{font-weight:800;color:var(--rp-ink);}
.rp .ctr .acc{font-weight:800;color:var(--rp-navy);}
.rp .ctr .dif{font-weight:800;color:var(--rp-lime-ink);}
.rp .ctr .dif.neg{color:var(--rp-red);}
.rp .ctr.tot{background:var(--rp-limebg);border-top:2px solid var(--rp-navy);}
.rp .ctr.tot .lbl{color:var(--rp-lime-ink);font-weight:800;text-transform:uppercase;letter-spacing:.3px;font-size:11px;}
.rp .ctr.tot .std,.rp .ctr.tot .acc{font-size:13px;}

/* ══════════ MOBILE: live refinance banner (this tool's hero) ══════════ */
#mv .rf-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 .rf-banner.neg{border-color:rgba(255,106,87,.4);}
#mv .rf-banner .bk{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);}
#mv .rf-banner .rf-big{font-size:44px;font-weight:800;letter-spacing:-1.6px;line-height:1.02;margin:6px 0 4px;color:var(--lime);font-variant-numeric:tabular-nums;}
#mv .rf-banner.neg .rf-big{color:var(--red);}
#mv .rf-banner .rf-sub{font-size:13px;color:var(--ink2);line-height:1.45;max-width:300px;margin:0 auto;}
#mv .rf-banner .rf-sub b{color:var(--ink);}
#mv .rf-stat3{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:15px;margin-top:16px;overflow:hidden;}
#mv .rf-stat3 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .rf-stat3 .c + .c{border-left:1px solid var(--line);}
#mv .rf-stat3 .c .l{font-size:10.5px;color:var(--ink2);font-weight:700;line-height:1.25;}
#mv .rf-stat3 .c .v{font-size:17px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}

/* ══════════ MOBILE: current-vs-new comparison strip ══════════ */
#mv .rf-cmp{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:4px 16px 6px;margin-bottom:14px;}
#mv .rf-cmp .crow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);}
#mv .rf-cmp .crow:first-child{border-top:0;}
#mv .rf-cmp .ch2{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);}
#mv .rf-cmp .ch2 span:nth-child(2),#mv .rf-cmp .crow .a,#mv .rf-cmp .ch2 span:nth-child(3),#mv .rf-cmp .crow .b{min-width:84px;text-align:right;}
#mv .rf-cmp .cl{font-size:13.5px;color:var(--ink2);font-weight:700;}
#mv .rf-cmp .a{font-size:14.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
#mv .rf-cmp .b{font-size:14.5px;font-weight:800;color:var(--steel);font-variant-numeric:tabular-nums;}

/* mobile roll-in toggle reuses the shared #mv .tg switch; section label */
#mv .seclab{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink2);margin:18px 2px 10px;}

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