/* Rent vs. Buy — 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 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;}

/* ── input fields: stand out from the card like a standard form field
   (the base theme's cream-on-cream is too faint). White fill, visible
   border, hover darkens; the teal focus ring comes from the base.
   House pattern from offer-advantage (sample); :not([type=checkbox])
   keeps hfg-tool-ui's native-checkbox restore intact. ── */
#pg1 .inp-f input:not([type=checkbox]),#pg1 .inp-f select{background:var(--white);border:1.5px solid var(--gray);border-radius:11px;box-shadow:inset 0 1px 2px rgba(7,36,56,.06);}
#pg1 .inp-f input:not([type=checkbox]):not(:disabled):hover,#pg1 .inp-f select:hover{border-color:var(--hfg-blue);}
#pg1 .inp-f input:not([type=checkbox]):focus,#pg1 .inp-f select:focus{border-color:var(--hfg-teal);box-shadow:0 0 0 3px rgba(73,159,190,.13);}
#pg1 .inp-f input::placeholder{color:var(--gray);}
#pg1 .inp-pre,#pg1 .inp-suf{color:var(--gray);}
/* disabled fields (auto-MI, invest return while off) recede instead of
   reading as active white fields */
#pg1 .inp-f input:disabled{background:var(--cream);border-color:var(--gray-light);color:var(--gray);box-shadow:none;}

/* ── MOBILE: live wealth-gap banner (this tool's hero) ── */
#mv .rv-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 .rv-banner .bk{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);}
#mv .rv-banner .rvgap{font-size:44px;font-weight:800;letter-spacing:-1.6px;line-height:1.02;margin:6px 0 2px;color:var(--lime);font-variant-numeric:tabular-nums;}
#mv .rv-banner .rvtag{font-size:13px;color:var(--ink2);font-weight:600;}
#mv .rv-banner .rvwin{display:inline-block;margin-top:12px;background:var(--lime);color:#06243c;font-weight:800;font-size:12px;border-radius:30px;padding:7px 15px;}
#mv .rv-banner .rvwin.lose{background:var(--bg2);color:var(--ink);}
#mv .rv-stat2{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:14px;margin-top:15px;overflow:hidden;}
#mv .rv-stat2 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .rv-stat2 .c + .c{border-left:1px solid var(--line);}
#mv .rv-stat2 .c .l{font-size:11px;color:var(--ink2);font-weight:700;}
#mv .rv-stat2 .c .v{font-size:17px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}
#mv .rv-stat2 .c.rent .v{color:var(--red);}
#mv .rv-stat2 .c.buy .v{color:var(--lime);}