/* Seller Strategy — 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 SellerReport shell has no matching token.
   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;}

/* ── DESKTOP FORM: live IPC (interested-party contribution) note ──
   ok/over state is classes only; wording comes from app.js */
.ipc-note{margin-top:14px;font-weight:700;}
.ipc-note.ok{background:var(--hfg-teal-pale);border-left-color:var(--hfg-teal);color:var(--hfg-teal-dark);}
.ipc-note.over{background:var(--red-pale);border-left-color:var(--red);color:var(--red);}

/* ═══════════ REPORT — Seller Strategy pieces (namespaced under .rp) ═══════════
   Ported from the original SellerReport shell CSS, re-tokened to --rp-*. */

/* ── strategy comparison grid (divs, not <table> — Safari-print lesson) ── */
.rp .cmpgrid{display:grid;grid-template-columns:27% repeat(3,1fr);border:1px solid var(--rp-line);border-radius:14px;overflow:hidden;background:var(--white);}
.rp .cmpgrid.cols2{grid-template-columns:34% repeat(2,1fr);}
.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.neg .v{color:var(--rp-red);}
/* header cells — display letters A / B / C left-to-right */
.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,var(--rp-grad1),var(--rp-grad2));color:var(--white);}
.rp .cmpgrid .gh.a .tg{color:var(--rp-pill);}
.rp .cmpgrid .gh.b{background:var(--rp-pill);color:var(--rp-pill-ink);}
.rp .cmpgrid .gh.b .tg{color:var(--rp-lime-ink);}
.rp .cmpgrid .gh.c{background:#f1efe9;color:var(--rp-ink);}
.rp .cmpgrid .gh.c .tg{color:var(--rp-red);}
.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:18px;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:18px;color:var(--rp-navy);letter-spacing:-.5px;}
.rp .cmpgrid .net.cut .v{color:var(--rp-red);}

/* ── Strategy B (tiered temp-buydown) schedule strip ── */
.rp .tbsched{margin-top:14px;border:1px solid var(--rp-line);border-radius:12px;overflow:hidden;}
.rp .tbsched .th{display:flex;justify-content:space-between;align-items:baseline;background:var(--rp-pill);color:var(--rp-pill-ink);padding:6px 14px;}
.rp .tbsched .th .nm{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;}
.rp .tbsched .th .pp{font-size:10px;font-weight:700;color:var(--rp-lime-ink);}
.rp .tbsched .yrs{display:flex;}
.rp .tbsched .yc{flex:1;padding:7px 12px;border-left:1px solid var(--rp-line);}
.rp .tbsched .yc:first-child{border-left:0;}
.rp .tbsched .yc .y{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--rp-mut);}
.rp .tbsched .yc .r{font-size:10px;color:var(--rp-ink2);font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px;}
.rp .tbsched .yc .p{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px;color:var(--rp-ink);}
.rp .tbsched .splt{display:flex;border-top:1px solid var(--rp-line);background:#f8fafb;}
.rp .tbsched .splt .s{flex:1;padding:6px 12px;border-left:1px solid var(--rp-line);font-size:11px;display:flex;justify-content:space-between;}
.rp .tbsched .splt .s:first-child{border-left:0;}
.rp .tbsched .splt .s .l{color:var(--rp-ink2);font-weight:600;}
.rp .tbsched .splt .s .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink);}

/* ── seller's-bottom-line navy band ──
   band-specific navy/tint hues from the canonical SellerReport shell —
   no --rp-* equivalents exist for these */
.rp .band{border-radius:16px;padding:20px 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:15px 0 13px;}
.rp .band .bn{flex:0 0 auto;padding:0 52px;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,.rp .band .bn.y .v{color:#cfe35f;}
.rp .band .bn.r .v{color:#ff9d8c;}
.rp .band .bn .l{font-size:12.5px;color:#bcd2e2;margin-top:8px;line-height:1.35;font-weight:600;white-space:pre-line;}
.rp .band .bsent{font-size:14.5px;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.r{color:#ff9d8c;}

/* ── seller-net bar chart (SVG parts — colors via classes, never attributes) ── */
.snb-l{fill:var(--rp-ink2);font-size:13.5px;font-weight:700;font-family:var(--sans);}
.snb-v{fill:var(--rp-ink);font-size:14px;font-weight:800;font-family:var(--sans);font-variant-numeric:tabular-nums;}
.snb-bar.snb-a{fill:var(--rp-chart-own);}
.snb-bar.snb-b{fill:var(--rp-pill);}
.snb-bar.snb-c{fill:var(--rp-red);}

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

/* ── PRINT: compact rhythm so page 2's composition fits one letter sheet
   (hfg-report.css already tightens the shared shell pieces) ── */
@media print{
  /* the on-screen backdrop's bottom padding would spill the last letter
     sheet onto a blank third page — zero it for print */
  #pg2{padding-bottom:0;}
  .rp .cmpgrid,.rp .tbsched,.rp .band,.rp .two,.rp .irows{break-inside:avoid;}
  .rp .tbsched{margin-top:11px;}
  .rp .tbsched .yc{padding:5px 12px;}
  .rp .band{padding:12px 28px;}
  .rp .band .bnums{margin:9px 0 7px;}
  .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;}
}
/* ═══════════════════════════════════════════════════════════════════
   SELLER STRATEGY — 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 only from the dark-shell tokens hfg-mobile.css defines on
   #mv .mapp.dk (--bg2/--panel/--panel2/--line/--ink/--ink2/--mut/--lime/
   --steel/--red). 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 .sls styles in HFG
   tokens (same approach as the Rent vs. Buy / Affordability refactors).
   ═══════════════════════════════════════════════════════════════════ */

/* ── hero banner: "Seller Keeps More" ── */
#mv .sl-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 .sl-banner .bl{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);}
#mv .sl-banner .sl-big{font-size:46px;font-weight:800;letter-spacing:-1.8px;line-height:1.02;margin:6px 0 4px;color:var(--lime);font-variant-numeric:tabular-nums;}
#mv .sl-banner .sl-sub{font-size:13px;color:var(--ink2);line-height:1.45;max-width:300px;margin:0 auto;}
#mv .sl-banner .sl-sub b{color:var(--ink);}
#mv .sl-stat3{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:15px;margin-top:16px;overflow:hidden;}
#mv .sl-stat3 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .sl-stat3 .c + .c{border-left:1px solid var(--line);}
#mv .sl-stat3 .c .l{font-size:10.5px;color:var(--ink2);font-weight:700;line-height:1.25;}
#mv .sl-stat3 .c .v{font-size:16px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.3px;color:var(--ink);}

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

/* ── strategy 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[hidden]{display:none;}
#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;}
#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;}
/* recommended card: navy gradient + lime accents (original dk theme) */
#mv .strat.rec{border-color:var(--lime);background:linear-gradient(160deg,var(--panel2),var(--panel));}
#mv .strat.rec .tag{color:var(--lime);}
#mv .strat.rec .meta{color:var(--ink2);}
#mv .strat.rec .rgt .net{color:var(--lime);}
/* price-cut card: warm warning treatment via the shell red token */
#mv .strat.cut{border-color:var(--red);}
#mv .strat.cut .rgt .net{color:var(--red);}

/* ── temp-buydown schedule card ── */
#mv .sched{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:13px 15px;margin:-2px 0 11px;}
#mv .sched[hidden]{display:none;}
#mv .sched .st{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
#mv .sched .st .nm{font-size:14px;font-weight:800;letter-spacing:-.3px;color:var(--ink);}
#mv .sched .st .pp{font-size:11px;color:var(--mut);font-weight:700;text-align:right;}
#mv .sched .srow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:13px;}
#mv .sched .srow:first-of-type{border-top:0;}
#mv .sched .srow .yr{font-weight:700;color:var(--ink2);}
#mv .sched .srow .rt{color:var(--mut);font-weight:700;font-variant-numeric:tabular-nums;}
#mv .sched .srow .py{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);}
#mv .sched .split{display:flex;gap:8px;margin-top:9px;}
#mv .sched .split .sp{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:7px 10px;}
#mv .sched .split .sp .l{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);}
#mv .sched .split .sp .v{font-size:14px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--ink);}

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

/* ── IPC (interested-party contribution) status pill ── */
#mv .ipc{display:flex;align-items:center;gap:8px;border-radius:12px;padding:10px 13px;margin:12px 0 6px;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 .ic[hidden]{display:none;}
#mv .ipc.ok{background:var(--bg2);border-color:var(--steel);color:var(--steel);}
#mv .ipc.over{background:var(--bg2);border-color:var(--red);color:var(--red);}

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

/* ── %/$ unit toggle INSIDE the input box ──
   Replaces the old label-line .dp-tg pill, which added a second line above
   the field and pushed it below its grid neighbors. 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;}

/* ============================================================================
   Append to the tool's own CSS (e.g. styles/app.css). Uses the canonical HFG
   tokens (--hfg-blue-deep / --hfg-teal / --hfg-teal-dark / --hfg-teal-pale /
   --sans) already defined in styles/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.
   NOTE: extend the selector list below with any OTHER top-level protected regions
   this tool has (the goal: every visible app region except .auth-gate). */
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.
   NOTE: adjust the selectors (.rp .lo .av / #mv .sheet .lo .av) to match this
   tool's actual report + share-sheet avatar selectors. */
.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 "Print / Save PDF" is intentionally hidden for now (on-device PDF still
   being finalized) — only "Share summary" is offered. The share-overlay buttons
   get display:flex from hfg-tool-ui.css, which overrides the plain [hidden]
   attribute, so force it off here. Reversible: remove this rule + the `hidden`
   attribute on #m_shPdf to re-enable. Desktop Print / Save PDF is unaffected. */
#m_shPdf[hidden]{display:none!important;}