/* Net Proceeds (Seller Net Sheet) — 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). */

/* ── selling-cost palette (original NetReport COLORS map) — the report's
   proportional cost bar + legend swatches; the mobile share-card canvas
   mirrors these hexes because canvas can't read CSS custom properties. ── */
:root{
  --rp-cost-commission:#16486e;
  --rp-cost-closing:#3f7fa0;
  --rp-cost-transfer:#7f9a16;
  --rp-cost-concessions:#c98a2b;
  --rp-cost-repairs:#9a6b3f;
  --rp-cost-other:#9aa6b0;
}
.cb-commission{background:var(--rp-cost-commission);}
.cb-closing{background:var(--rp-cost-closing);}
.cb-transfer{background:var(--rp-cost-transfer);}
.cb-concessions{background:var(--rp-cost-concessions);}
.cb-repairs{background:var(--rp-cost-repairs);}
.cb-other{background:var(--rp-cost-other);}

/* the property-address field spans two grid columns: an address wants the
   extra width, and its label ("PROPERTY ADDRESS OPTIONAL") stays on one line
   so the row's inputs keep a shared top edge */
.fgrid .inp-f-wide{grid-column:span 2;}

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

/* ═══════════ REPORT: seller net sheet pieces (original NetReport shapes,
   recolored onto the canonical --rp-* report palette) ═══════════ */

/* headline sum-band (navy gradient, lime number) */
.rp .sumband{border-radius:14px;padding:16px 18px;color:var(--white);background:linear-gradient(150deg,var(--rp-grad1),var(--rp-grad2) 75%);text-align:center;}
.rp .sumband .k{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--rp-bestsub);}
.rp .sumband .big{font-size:34px;font-weight:800;letter-spacing:-1.2px;color:var(--rp-pill);margin:5px 0 2px;font-variant-numeric:tabular-nums;}
.rp .sumband .sm{font-size:10.5px;color:var(--rp-bestsub);line-height:1.4;}

/* mini stat cards */
.rp .minis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:11px;}
.rp .mini{border:1px solid var(--rp-line);border-radius:11px;padding:10px 12px;background:var(--rp-card);}
.rp .mini .k{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--rp-mut);}
.rp .mini .v{font-size:16px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;color:var(--rp-navy);}

/* net sheet waterfall table */
.rp .nsheet{border:1px solid var(--rp-line);border-radius:13px;overflow:hidden;}
.rp .nsheet .srow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 15px;border-top:1px solid var(--rp-line);font-size:12.5px;font-variant-numeric:tabular-nums;}
.rp .nsheet .srow:first-child{border-top:0;}
.rp .nsheet .srow .l{color:var(--rp-ink2);}
.rp .nsheet .srow .l .d{display:block;font-size:9.5px;color:var(--rp-mut);margin-top:1px;}
.rp .nsheet .srow .v{font-weight:800;flex:0 0 auto;color:var(--rp-ink);}
.rp .nsheet .srow.price{background:var(--off-white);}
.rp .nsheet .srow.price .l{color:var(--rp-navy);font-weight:800;}
.rp .nsheet .srow.price .v{font-size:14px;color:var(--rp-navy);}
.rp .nsheet .srow.minus .v{color:var(--rp-red);}
.rp .nsheet .srow.eq{background:var(--rp-card);}
.rp .nsheet .srow.eq .l{font-weight:800;color:var(--rp-ink);}
.rp .nsheet .srow.eq .v{font-size:13.5px;}
.rp .nsheet .srow.net{background:linear-gradient(120deg,var(--rp-limebg),var(--off-white));border-top:2px solid var(--rp-navy);padding:13px 15px;}
.rp .nsheet .srow.net .l{font-size:13px;font-weight:800;color:var(--rp-lime-ink);text-transform:uppercase;letter-spacing:.4px;}
.rp .nsheet .srow.net .v{font-size:21px;color:var(--rp-navy);letter-spacing:-.6px;}

/* proportional selling-cost bar + legend (segment widths set from JS via
   CSSOM after insertion — the CSP blocks style="" even inside innerHTML) */
.rp .barwrap{border:1px solid var(--rp-line);border-radius:12px;padding:13px 15px;}
.rp .barwrap .bt{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--rp-mut);margin-bottom:9px;}
.rp .bar{display:flex;height:16px;border-radius:5px;overflow:hidden;background:var(--gray-light);}
.rp .bar span{display:block;height:100%;}
.rp .legend{margin-top:10px;display:flex;flex-direction:column;gap:5px;}
.rp .legend .li{display:flex;align-items:center;gap:8px;font-size:11px;}
.rp .legend .li .sw{width:9px;height:9px;border-radius:2px;flex:0 0 auto;}
.rp .legend .li .ll{color:var(--rp-ink2);flex:1;}
.rp .legend .li .lv{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);}
.rp .legend .li .lp{font-size:10px;color:var(--rp-mut);font-variant-numeric:tabular-nums;width:44px;text-align:right;}

/* sale-assumptions rows */
.rp .irows{border:1px solid var(--rp-line);border-radius:12px;overflow:hidden;}
.rp .irow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 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);}

@media print{
  .rp .sumband,.rp .minis,.rp .nsheet,.rp .barwrap,.rp .irows{break-inside:avoid;}
  .rp .sumband{padding:13px 18px;}
  .rp .sumband .big{font-size:30px;}
  .rp .minis{gap:9px;}
  .rp .nsheet .srow{padding:8px 15px;}
}

/* ═══════════ MOBILE: net-to-seller hero + waterfall (this tool's live
   screen, on the dark-shell tokens from hfg-mobile.css) ═══════════ */

#mv .nt-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 var(--line);background:linear-gradient(158deg,var(--panel2),var(--panel) 78%);}
#mv .nt-banner .bl{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);}
#mv .nt-banner .nt-big{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1.02;margin:5px 0 4px;font-variant-numeric:tabular-nums;color:var(--lime);}
#mv .nt-banner .nt-sub{font-size:13px;color:var(--ink2);line-height:1.45;max-width:300px;margin:0 auto;}
#mv .nt-banner .nt-sub b{color:var(--ink);}
#mv .nt-stat3{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:15px;margin-top:17px;overflow:hidden;}
#mv .nt-stat3 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .nt-stat3 .c + .c{border-left:1px solid var(--line);}
#mv .nt-stat3 .c .l{font-size:10.5px;color:var(--ink2);font-weight:700;line-height:1.25;}
#mv .nt-stat3 .c .v{font-size:16px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}

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

/* "where it goes" waterfall card (outputs only — repainted wholesale) */
#mv .flow{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:6px 16px 12px;margin-bottom:14px;}
#mv .frow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;}
#mv .frow:first-child{border-top:0;}
#mv .frow .fl{font-size:14px;color:var(--ink);font-weight:700;}
#mv .frow .fd{font-size:11px;color:var(--mut);font-weight:600;margin-top:2px;}
#mv .frow .fv{font-size:15px;font-weight:800;flex:0 0 auto;}
#mv .frow.head .fl{font-weight:800;font-size:14.5px;}
#mv .frow.head .fv{font-size:16px;}
#mv .frow.fsub .fl{color:var(--ink2);font-weight:600;font-size:13.5px;}
#mv .frow.fsub .fv{color:var(--red);font-weight:700;}
#mv .frow.eq{background:linear-gradient(90deg,rgba(95,168,196,.08),transparent);margin:0 -16px;padding-left:16px;padding-right:16px;border-top:1px dashed var(--line);}
#mv .frow.eq .fl{font-weight:800;}
#mv .frow.net{margin:6px -16px -12px;padding:15px 16px;border-top:2px solid var(--navy);background:linear-gradient(120deg,rgba(188,214,74,.14),rgba(95,168,196,.07));border-radius:0 0 18px 18px;}
#mv .frow.net .fl{font-size:15.5px;font-weight:800;color:var(--ink);}
#mv .frow.net .fv{font-size:23px;font-weight:800;letter-spacing:-.6px;color:var(--lime);}

/* ═══════════ 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.
   Uses the canonical HFG tokens (--hfg-blue-deep / --hfg-teal / --hfg-teal-dark /
   --hfg-teal-pale / --sans) from styles/hfg-base.css. */
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 SHARE OVERLAY — hide the "Print / Save PDF" button (current stance:
   mobile ships only "Share summary"). The [hidden] attribute alone is NOT enough:
   #mv .shov .actions button in hfg-tool-ui.css sets display:flex, which outranks
   the UA [hidden]{display:none} rule. !important wins regardless of load order.
   Re-enabling later = remove the hidden attr in mobile-view.js; this rule then
   becomes a harmless no-op. */
#mv .shov .actions button[hidden]{display:none!important;}