/* Mortgage Calculator — 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).
   No italics anywhere in report output — the Dunbar kit has no italic face
   (the original's em rate notes render as weight/color instead). */

/* chart + report accent palette — the original CalcReport hexes, print-safe.
   Mirrored here as tool tokens so every SVG color comes from a class. */
:root{
  --mc-pi:#7f9a16;      /* breakdown — principal & interest (report lime) */
  --mc-tax:#4d8aa8;     /* breakdown — real estate taxes (steel)          */
  --mc-ins:#3d8f93;     /* breakdown — homeowners insurance (teal)        */
  --mc-mi:#c9962f;      /* breakdown — mortgage insurance (sand)          */
  --mc-hoa:#103a5c;     /* breakdown — HOA dues (navy)                    */
  --mc-bar:#1f5b86;     /* combo chart — cumulative principal bars        */
  --mc-barink:#7fb0d6;  /* combo chart — left (bar) axis labels           */
  --mc-line:#9bb22f;    /* combo chart — cumulative interest line         */
  --mc-good:#2f7d4f;    /* report "good" tone (original report shell)     */
  --mc-warn:#c9962f;    /* report/form "warn" tone (sand)                 */
  --mc-warnbg:#faf3e2;  /* VA-exemption warning note background           */
  --mc-warnline:#e8d7a9;/* VA-exemption warning note border               */
}

/* the custom .spin chevrons own the rate field — 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;}

.opt-lbl{color:var(--gray);font-weight:600;text-transform:none;}

/* ── DESKTOP: loan-program segment + program notes (pg1) ── */
.prog-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.prog-seg button{padding:13px 10px;border-radius:12px;border:1.5px solid var(--gray-light);background:var(--cream);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s,box-shadow .15s;}
.prog-seg button.on{border-color:var(--hfg-teal);background:var(--white);color:var(--hfg-blue);box-shadow:0 0 0 3px rgba(73,159,190,.13);}
.pnotes{background:var(--cream);border-radius:12px;padding:12px 15px;margin-top:14px;}
.pnotes .li{position:relative;padding:3px 0 3px 22px;font-size:13px;color:var(--text);font-weight:600;line-height:1.45;}
.pnotes .li::before{content:'\2713';position:absolute;left:2px;top:3px;color:var(--hfg-teal-dark);font-weight:800;}
.prog-info{margin-top:12px;}

/* display:flex on these would otherwise beat the [hidden] attribute the
   JS toggles (VA-only rows: exemption toggle, MI field) */
.vatog[hidden],.inp-f[hidden]{display:none!important;}

/* VA funding-fee exemption row + switch + verbatim warning note */
.vatog{display:flex;align-items:center;gap:14px;border-top:1px solid var(--gray-light);margin-top:16px;padding-top:16px;}
.vatog .tx{flex:1;}
.vatog .t{font-size:14px;font-weight:800;color:var(--text);}
.vatog .s{font-size:12px;color:var(--gray);line-height:1.35;margin-top:2px;}
.dsw{width:52px;height:30px;border-radius:16px;background:var(--gray-light);border:none;position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s;padding:0;}
.dsw.on{background:var(--hfg-teal-dark);}
.dsw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(7,36,56,.3);transition:left .15s;}
.dsw.on i{left:25px;}
.vaexnote{background:var(--mc-warnbg);border:1px solid var(--mc-warnline);border-left:4px solid var(--mc-warn);border-radius:12px;padding:13px 15px;margin-top:13px;font-size:12.5px;line-height:1.55;color:var(--text);}

/* %⇄$ unit toggle INSIDE the input box (seller-strategy reference pattern —
   the field keeps the same height as its neighbors; never on the label line) */
.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;}

/* generic segmented pill (loan term / buydown type) */
.dseg{display:flex;background:var(--cream);border:1.5px solid var(--gray-light);border-radius:12px;padding:3px;gap:2px;}
.dseg button{flex:1;border:none;background:transparent;color:var(--gray);font-size:13px;font-weight:800;padding:9px 4px;border-radius:9px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.dseg button.on{background:var(--white);color:var(--hfg-blue);box-shadow:0 1px 3px rgba(7,36,56,.15);}
.dseg-bd{max-width:360px;}

/* live loan/LTV readout chips + PMI warning */
.loan-read{display:flex;gap:12px;margin-top:16px;}
.loan-read .rc{flex:1;border:1.5px solid var(--gray-light);border-radius:12px;padding:12px 14px;background:var(--cream);}
.loan-read .rc .v{font-size:19px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--text);}
.loan-read .rc .v.warn{color:var(--mc-warn);}
.loan-read .rc .v.good{color:var(--hfg-teal-dark);}
.loan-read .rc .l{font-size:11px;color:var(--gray);font-weight:700;margin-top:2px;}
.pmiwarn{font-size:12px;color:var(--mc-warn);font-weight:700;margin-top:9px;}

/* MI custom-amount reset affordance */
.mi-rst{border:none;background:transparent;color:var(--hfg-teal-dark);font-weight:800;font-family:inherit;font-size:10px;cursor:pointer;padding:0;text-decoration:underline;}

/* buydown schedule (pg1) — light-theme port of the original bysched */
.bdsched{margin-top:16px;border:1.5px solid var(--gray-light);border-radius:12px;overflow:hidden;}
.bdsched .byr{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto auto;gap:14px;align-items:center;padding:10px 14px;border-top:1px solid var(--gray-light);font-size:13px;}
.bdsched .byr:first-child{border-top:0;}
.bdsched .yl{font-weight:800;color:var(--text);}
.bdsched .rt{color:var(--gray);font-weight:700;font-variant-numeric:tabular-nums;}
.bdsched .rt em{font-style:normal;color:var(--hfg-teal-dark);}
.bdsched .sv{font-size:11.5px;color:var(--hfg-teal-dark);font-weight:800;text-align:right;}
.bdsched .pay{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;color:var(--text);}
.bdsched .byr.full{background:var(--cream);}
.bdsched .byc{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--gray-light);background:var(--cream);font-size:12px;color:var(--gray);font-weight:700;}
.bdsched .byc b{color:var(--text);font-weight:800;}

/* ══════════ REPORT EXTRAS (inside .rp — print-faithful) ══════════ */

/* hero: navy total-payment card + year-1/P&I companion card */
.rp .hero{display:grid;grid-template-columns:1.15fr 1fr;gap:0;margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--rp-line);}
.rp .hero .big{background:linear-gradient(160deg,var(--rp-grad1),var(--rp-grad2));color:var(--white);padding:18px 20px;}
.rp .hero .big .k{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--rp-pill);}
.rp .hero .big .n{font-size:42px;font-weight:800;letter-spacing:-1.8px;line-height:1;margin:7px 0 3px;font-variant-numeric:tabular-nums;}
.rp .hero .big .nm{font-size:11.5px;color:var(--rp-bestsub);}
.rp .hero .big .nm b{color:var(--white);}
.rp .hero .y1{padding:18px 20px;background:var(--rp-card);display:flex;flex-direction:column;justify-content:center;gap:3px;}
.rp .hero .y1 .k{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--rp-mut);}
.rp .hero .y1 .n{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--rp-navy);font-variant-numeric:tabular-nums;}
.rp .hero .y1 .nm{font-size:10.5px;color:var(--rp-ink2);line-height:1.4;}

/* payment-breakdown panel: stacked segment bar + legend rows */
.rp .two.two-bd{grid-template-columns:1.25fr 1fr;}
.rp .pbar{display:flex;height:11px;border-radius:6px;overflow:hidden;margin-bottom:10px;}
.rp .pbar i{display:block;height:100%;}
.sg-pi{background:var(--mc-pi);} .sg-tax{background:var(--mc-tax);} .sg-ins{background:var(--mc-ins);}
.sg-mi{background:var(--mc-mi);} .sg-hoa{background:var(--mc-hoa);}
.rp .bk{display:flex;align-items:center;gap:9px;font-size:11.5px;padding:6px 0;border-top:1px solid var(--rp-line);}
.rp .pbar + .bk{border-top:0;}
.rp .bk .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.dt-pi{background:var(--mc-pi);} .dt-tax{background:var(--mc-tax);} .dt-ins{background:var(--mc-ins);}
.dt-mi{background:var(--mc-mi);} .dt-hoa{background:var(--mc-hoa);} .dt-none{background:transparent;}
.rp .bk .nm{flex:1;color:var(--rp-ink2);}
.rp .bk .vv{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);}
.rp .bk.tot{border-top:2px solid var(--rp-navy);margin-top:3px;padding-top:9px;}
.rp .bk.tot .nm{color:var(--rp-ink);font-weight:800;}
.rp .bk.tot .vv{font-size:14px;}

/* loan-snapshot / lifetime-totals rows */
.rp .pr2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11.5px;padding:6px 0;border-top:1px solid var(--rp-line);}
.rp .panel .pr2:first-of-type{border-top:0;}
.rp .pr2 .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);white-space:nowrap;}
.rp .pr2 .v.warn{color:var(--mc-warn);}
.rp .pr2 .v.good{color:var(--mc-good);}
.rp .pr2 .v .fee{font-weight:700;font-size:9.5px;color:var(--rp-mut);white-space:nowrap;}

/* temporary buydown schedule block */
.rp .by{border:1px solid var(--rp-line);border-radius:12px;overflow:hidden;}
.rp .by .byhd{background:var(--paper);padding:8px 14px;font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--rp-lime-ink);}
.rp .by .byr{display:grid;grid-template-columns:minmax(70px,auto) 1fr auto;align-items:center;gap:12px;padding:7px 14px;border-top:1px solid var(--rp-line);font-size:11.5px;}
.rp .by .byr .yl{font-weight:800;color:var(--rp-ink);}
.rp .by .byr .rt{color:var(--rp-mut);font-weight:700;font-variant-numeric:tabular-nums;}
/* no italics in report output — the original em is tone, not slant */
.rp .by .byr .rt em{font-style:normal;color:var(--rp-chart-own);font-weight:700;}
.rp .by .byr .pay{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);}
.rp .by .byc{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--rp-line);background:var(--rp-card);font-size:11px;color:var(--rp-ink2);}
.rp .by .byc b{color:var(--rp-ink);font-weight:800;}

/* charts row */
.rp .charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.mc-chart{display:block;width:100%;height:auto;}
.rp .mcg{stroke:var(--rp-line);stroke-width:1;}
.rp .mct{fill:var(--rp-mut);font-size:8.5px;font-weight:700;font-family:var(--sans);}
.rp .mct.bar{fill:var(--mc-barink);}
.rp .mct.line{fill:var(--mc-line);}
.mcln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
.mcln.bal{stroke:var(--rp-chart-own);}
.mcln.int{stroke:var(--mc-line);}
.mcdot{fill:var(--rp-pill);stroke:var(--rp-navy);stroke-width:1.1;}
.mcdot2{fill:var(--mc-line);stroke:var(--white);stroke-width:1.1;}
.mcbar{fill:var(--mc-bar);opacity:.9;}
.grad-bal stop:first-child{stop-color:var(--rp-chart-own);stop-opacity:.24;}
.grad-bal stop:last-child{stop-color:var(--rp-chart-own);stop-opacity:.02;}
/* legend keys (the shell's .lgd .d default background must be out-specified) */
.rp .lgd .d.k-prin{background:var(--mc-bar);}
.rp .lgd .d.k-int{background:var(--mc-line);}

/* yearly milestone table */
.rp table.cmp{width:100%;border-collapse:collapse;font-size:11px;}
.rp table.cmp th,.rp table.cmp td{padding:6px 11px;text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--rp-line);}
.rp table.cmp thead th{background:var(--rp-navy);color:var(--white);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;}
.rp table.cmp th.l,.rp table.cmp td.l{text-align:left;font-weight:700;color:var(--rp-ink);}
.rp table.cmp thead th.l{color:var(--white);}
.rp table.cmp tbody tr:nth-child(even) td{background:var(--rp-card);}
.rp table.cmp tr.tot td{background:var(--rp-navy)!important;color:var(--white);font-weight:800;border-bottom:none;}
.rp table.cmp tr.tot td.l{color:var(--white);}
.rp table.cmp td.em{color:var(--rp-chart-own);font-weight:800;}

/* ── tight mode: the buydown schedule shares page 1, so the whole page-1
   composition compacts to keep two letter sheets (screen matches print —
   the on-screen page IS the print preview) ── */
.rp.tight .rhead{padding-bottom:11px;}
.rp.tight .rclient{margin:10px 0 2px;padding-bottom:10px;}
.rp.tight .htitle{margin:10px 0 3px;font-size:23px;}
.rp.tight .sectt{margin:9px 0 7px;}
.rp.tight .hero{margin-top:10px;}
.rp.tight .hero .big{padding:13px 18px;}
.rp.tight .hero .big .n{font-size:34px;margin:5px 0 2px;}
.rp.tight .hero .y1{padding:13px 18px;}
.rp.tight .hero .y1 .n{font-size:24px;}
.rp.tight .bk{padding:4px 0;}
.rp.tight .bk.tot{padding-top:7px;}
.rp.tight .pr2{padding:4px 0;}
.rp.tight .pbar{margin-bottom:8px;}
.rp.tight .by .byhd{padding:6px 14px;}
.rp.tight .by .byr{padding:4px 14px;}
.rp.tight .by .byc{padding:6px 14px;}
.rp.tight .chartbox{padding:10px 15px 4px;}
.rp.tight .panel{padding:11px 15px;}

/* footer logo chip: never a pill around a logo on a dark background —
   fully transparent, just the white brand logo (overrides hfg-report) */
.rp .rfooter .logo-chip.sm{background:transparent;padding:0;border-radius:0;}

/* ── PRINT: keep the calc blocks intact and the backdrop from spilling a
   third sheet after the report's second letter page ── */
@media print{
  #pg2{padding-bottom:0!important;min-height:0!important;}
  .report-shell{overflow:visible;}
  .rp .hero,.rp .by,.rp table.cmp,.rp .charts{break-inside:avoid;}
}

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

/* Hide the mobile "Print / Save PDF" share action (current stance: mobile ships
   only "Share summary"). The bundled hfg-tool-ui.css sets
   #mv .shov .actions button{display:flex}, which outranks the UA [hidden] rule —
   so !important is required, not merely the hidden attribute. Re-enabling later
   is just removing the hidden attr in mobile-view.js; this rule then no-ops. */
#mv .shov .actions button[hidden]{display:none!important;}