/* ═══════════════════════════════════════════════════════════════════
   HFG INPUT SCREEN v2 (styles/hfg-input-v2.css)

   The desktop input screen in the same visual language as the v2 client
   report: rounded navy→teal hero tile with the lime rule, rule-divided
   section labels, numbered navy step chips, cream field fills, lime
   callouts, navy submit bar.

   Load LAST — after app.css — so it overrides the v1 input styling:

     use.typekit.net/pon7ryr.css
     hfg-base.css → hfg-mobile.css → hfg-report.css → hfg-report-v2.css
     → hfg-tool-ui.css → app.css → hfg-input-v2.css

   Scoped under #pg1 (plus .site-nav), so the mobile live screen
   (html.mv-mode #mv) and the report are untouched.

   Rules that must survive edits:
     • Every grid track is minmax(0,…) and every control gets
       width:100%;min-width:0;box-sizing:border-box. A bare <input> has a
       ~176px UA intrinsic width, so a plain 1fr track cannot shrink and
       the cards overhang the page.
     • No inline style="" and no inline handlers — the CSP blocks both.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --iv-page:#eef1f4;
  --iv-line:#dfe4e9;
  --iv-line2:#eceff2;
  --iv-fill:#fbfaf7;
  --iv-wrap:1184px;
}

/* ── page shell ─────────────────────────────────────────────────── */
#pg1{background:var(--iv-page);padding-bottom:64px;}
#pg1 .page-body,
#pg1 .hero-wrap{max-width:var(--iv-wrap);margin:0 auto;padding:0 32px;box-sizing:border-box;}
#pg1 .hero-wrap{padding-top:22px;}

/* ── nav ────────────────────────────────────────────────────────── */
.site-nav{background:#fff;border-bottom:1px solid var(--iv-line);}
.site-nav .nav-inner{max-width:var(--iv-wrap);margin:0 auto;padding:13px 32px;display:flex;align-items:center;gap:22px;box-sizing:border-box;}
/* Explicit width AND height — the mark is 5279×1055 (5.004:1) and a
   column-flex parent would otherwise stretch it. */
.site-nav .nav-logo-img{width:130px;height:26px;flex:0 0 auto;object-fit:contain;display:block;}
.site-nav .nav-context{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--rp-line,#e4e0d6);padding-left:22px;}
.site-nav .nav-context .eyebrow{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--rp-lime-ink,#7f9a16);}
.site-nav .nav-context .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--rp-pill,#bcd64a);display:block;}
.site-nav .nc-title{font-size:14px;font-weight:800;color:var(--rp-ink,#10324f);letter-spacing:-.2px;}

/* ── hero tile (rounded, inline with the cards below) ───────────── */
/* The legacy shell hero also carries a hard offset shadow and a 1000px
   max-width; both must be cleared or the v2 tile renders three stacked edges
   and sits narrower than the cards below it. */
#pg1 .hfg-hero{background:none;border:none;padding:0;box-shadow:none;border-radius:0;max-width:none;width:auto;margin:0;
  /* ⚠ overflow AND the two pseudo-elements must change TOGETHER — fixing either
     one alone trades one visual bug for another.
     · hfg-tool-shell.css:87 sets overflow:hidden on this wrapper. With padding:0
       above, the wrapper is exactly .hfg-hero-inner's box, so it was CLIPPING that
       tile's `box-shadow:0 2px 10px` — the soft lift under the hero never rendered.
     · but shell:88/89 also hang a 480px lime ::before and a 320px teal ::after off
       this element, sized for the old full-bleed hero. overflow:hidden was the only
       thing containing them; making it visible on its own would spill two faint
       tinted circles across the page. They are not part of the v2 tile (which
       carries its own gradient), so they go.
     position:relative is deliberately LEFT set: it is harmless on a transparent
     wrapper, and clearing it would re-anchor anything absolutely positioned inside
     to a different containing block.
     UPSTREAM: belongs in the canonical hfg-input-v2.css — every v2 tool on this
     shell clips its hero shadow the same way. */
  overflow:visible;}
#pg1 .hfg-hero::before,#pg1 .hfg-hero::after{content:none;}
#pg1 .hfg-hero-inner{
  background:linear-gradient(105deg,#0e2f4c 0%,#123f61 55%,var(--rp-grad1,#1d5c84) 100%);
  border-bottom:4px solid var(--rp-pill,#bcd64a);border-radius:16px;
  padding:30px 30px 28px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  box-shadow:0 2px 10px rgba(14,47,76,.14);max-width:none;margin:0;
}
#pg1 .hero-copy{display:flex;flex-direction:column;gap:9px;max-width:640px;}
#pg1 .hero-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--rp-pill,#bcd64a);}
#pg1 .hero-title{font-size:34px;font-weight:800;letter-spacing:-1.1px;line-height:1.08;color:#fff;margin:0;}
#pg1 .hero-title span{color:var(--rp-pill,#bcd64a);}
#pg1 .hero-sub{font-size:13px;line-height:1.55;color:#bcd3e0;margin:0;text-wrap:pretty;}

/* "you'll produce" card */
#pg1 .hero-out{display:flex;flex-direction:column;gap:9px;align-items:flex-end;flex:0 0 auto;}
#pg1 .hero-out .lbl{font-size:8.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#7fa7c4;}
#pg1 .hero-out .card{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.09);border:1px solid rgba(188,214,74,.4);border-radius:11px;padding:10px 14px;}
#pg1 .hero-out .sheet{width:26px;height:32px;border-radius:3px;background:#fff;display:flex;flex-direction:column;padding:3px;gap:2px;box-sizing:border-box;flex:0 0 26px;}
#pg1 .hero-out .sheet i{display:block;border-radius:1px;height:2px;background:#cfd6dd;}
#pg1 .hero-out .sheet i.t{height:4px;background:#0e2f4c;}
#pg1 .hero-out .sheet i.a{background:var(--rp-pill,#bcd64a);width:70%;}
#pg1 .hero-out .sheet i.s{width:60%;}
#pg1 .hero-out .txt{font-size:11px;font-weight:800;color:#fff;line-height:1.35;}
#pg1 .hero-out .txt span{font-weight:700;color:#aecade;}

/* ── tutorial link ──────────────────────────────────────────────── */
#pg1 .pg1-tut-btn{
  display:flex;align-items:center;gap:11px;margin:18px 0 0;padding:12px 16px;background:#fff;
  border:1px solid var(--rp-line,#e4e0d6);border-left:4px solid var(--rp-pill,#bcd64a);
  border-radius:11px;text-decoration:none;font-size:12px;font-weight:700;color:var(--rp-ink2,#41607a);
}
#pg1 .pg1-tut-btn .tut-ico{width:22px;height:22px;border-radius:6px;background:var(--rp-limebg,#f2f6df);color:var(--rp-lime-ink,#5f7414);font-size:11px;display:grid;place-items:center;flex:0 0 22px;}
#pg1 .pg1-tut-btn span:not(.tut-ico):not(.tut-arrow){flex:1;}
#pg1 .pg1-tut-btn b{color:var(--rp-ink,#10324f);}
#pg1 .pg1-tut-btn .tut-arrow{color:var(--rp-lime-ink,#7f9a16);font-weight:800;}

/* ── section rule ───────────────────────────────────────────────── */
#pg1 .sect-rule{display:flex;align-items:center;gap:11px;margin:26px 0 12px;}
#pg1 .sect-rule > span:first-child{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--rp-mut,#7a8a98);}
#pg1 .sect-rule i{flex:1;height:1px;background:#dbe1e6;display:block;}
#pg1 .sect-rule .req-tag{font-size:9.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--rp-red,#c4503e);}

/* ── cards ──────────────────────────────────────────────────────── */
#pg1 .fcard{
  background:#fff;border:1px solid var(--rp-line,#e4e0d6);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,50,79,.05);overflow:visible;margin:0;
  display:flex;flex-direction:column;
}
#pg1 .fcard-accent{display:none;}          /* v1 gradient strip retired */
#pg1 .fcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 1 auto;}
#pg1 .fcard-title{
  display:flex;align-items:baseline;gap:11px;padding-bottom:14px;
  border-bottom:1px solid var(--iv-line2);margin-bottom:17px;
  font-size:15px;font-weight:800;color:var(--rp-ink,#10324f);letter-spacing:-.3px;
}
#pg1 .fcard-title .step{width:22px;height:22px;border-radius:50%;background:var(--rp-navy,#103a5c);color:var(--rp-pill,#bcd64a);font-size:11px;font-weight:800;display:grid;place-items:center;flex:0 0 22px;}
#pg1 .fcard-title .why{font-size:11px;font-weight:700;color:var(--rp-mut,#7a8a98);letter-spacing:0;}

/* the assumptions row: two cards, equal height */
#pg1 .frow{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:18px;align-items:stretch;}

/* ── field grids ────────────────────────────────────────────────── */
#pg1 .fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px;}
#pg1 .fgrid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
#pg1 .fgrid-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ── fields ─────────────────────────────────────────────────────── */
#pg1 .inp-f{display:flex;flex-direction:column;gap:6px;min-width:0;}
/* display:flex above outspecifies the UA [hidden] rule — restate it, or the
   Override title field (#lo-title-row, which ships hidden) is visible anyway and
   occupies a grid cell with Override off. */
#pg1 .inp-f[hidden]{display:none;}
#pg1 .inp-f label{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--rp-ink2,#41607a);display:flex;align-items:center;gap:5px;}
/* $ / % switch at the right end of a label (FormKit.moneyOrPercent) */
#pg1 .unit-tog{margin-left:auto;display:inline-flex;border:1px solid var(--iv-line);border-radius:6px;overflow:hidden;flex:0 0 auto;}
#pg1 .unit-tog button{width:21px;height:16px;padding:0;border:none;background:#fff;color:var(--rp-mut,#7a8a98);font-family:inherit;font-size:9.5px;font-weight:800;line-height:1;cursor:pointer;}
#pg1 .unit-tog button + button{border-left:1px solid var(--iv-line);}
#pg1 .unit-tog button.on{background:var(--rp-navy,#103a5c);color:var(--rp-pill,#bcd64a);}
#pg1 .inp-f .req{color:var(--rp-red,#c4503e);}
/* "optional" chip — the neutral twin of .auto-lic, on the one LO field that is
   not required (the Override title). Muted rather than lime: it marks an absence
   of obligation, not an automatic value. */
#pg1 .inp-f .opt{color:var(--rp-mut,#7a8a98);background:#f0f3f5;border-radius:4px;padding:1px 5px;letter-spacing:.6px;}
#pg1 .inp-f .auto-lic{color:var(--rp-lime-ink,#5f7414);background:var(--rp-limebg,#f2f6df);border-radius:4px;padding:1px 5px;letter-spacing:.6px;}
#pg1 .inp-hint{font-size:10px;font-weight:700;color:#8b98a4;line-height:1.4;}

#pg1 input,#pg1 select{
  width:100%;min-width:0;box-sizing:border-box;height:38px;
  border:1px solid var(--iv-line);border-radius:9px;background:var(--iv-fill);
  padding:0 11px;font-family:inherit;font-size:14px;font-weight:800;color:var(--rp-ink,#10324f);
  font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s;
}
#pg1 select{padding:0 9px;font-size:13.5px;}
#pg1 input[type="text"]#clientName,
#pg1 .fgrid-3 input{font-size:13.5px;font-weight:700;}
#pg1 input:focus,#pg1 select:focus{outline:none;border-color:var(--rp-grad1,#1d5c84);box-shadow:0 0 0 3px rgba(29,92,132,.14);}
#pg1 input.bad,#pg1 select.bad{border-color:var(--rp-red,#c4503e);background:#fdf4f2;}
#pg1 input::placeholder{color:#a4b1bc;font-weight:700;}
#pg1 input[readonly]{background:#f4f6f2;color:var(--rp-ink2,#41607a);}

/* $ prefix / % suffix live inside the field */
#pg1 .inp-wrap{display:flex;align-items:center;height:38px;border:1px solid var(--iv-line);border-radius:9px;background:var(--iv-fill);overflow:hidden;transition:border-color .12s,box-shadow .12s;}
#pg1 .inp-wrap:focus-within{border-color:var(--rp-grad1,#1d5c84);box-shadow:0 0 0 3px rgba(29,92,132,.14);}
#pg1 .inp-wrap input{height:100%;border:none;background:transparent;border-radius:0;flex:1;min-width:0;padding:0 10px;}
#pg1 .inp-wrap input:focus{box-shadow:none;}
/* The affix is a real flex cell here, not the shell's absolutely-positioned
   overlay — reset that or the $ sits on top of the value. */
#pg1 .inp-pre,#pg1 .inp-suf{position:static;transform:none;pointer-events:none;}
#pg1 .inp-pre,#pg1 .inp-suf{width:31px;flex:0 0 31px;text-align:center;font-size:13px;font-weight:800;color:var(--rp-mut,#7a8a98);line-height:38px;}
#pg1 .inp-pre{border-right:1px solid var(--iv-line2);}
#pg1 .inp-suf{width:29px;flex:0 0 29px;border-left:1px solid var(--iv-line2);}

/* ± stepper */
#pg1 .spinrow{display:flex;gap:7px;min-width:0;}
#pg1 .spinrow .inp-wrap{flex:1;min-width:0;}
#pg1 .spin{display:flex;flex-direction:column;gap:3px;flex:0 0 29px;}
#pg1 .spin button{width:29px;height:17.5px;padding:0;border:1px solid var(--iv-line);background:#fff;color:var(--rp-navy,#103a5c);display:grid;place-items:center;cursor:pointer;}
#pg1 .spin button:first-child{border-radius:6px 6px 3px 3px;}
#pg1 .spin button:last-child{border-radius:3px 3px 6px 6px;}
#pg1 .spin button:hover{background:var(--rp-limebg,#f2f6df);border-color:#c9d59a;}

/* ── lime callout, bottom-pinned inside a card ──────────────────── */
#pg1 .card-note{margin-top:auto;padding-top:17px;}
#pg1 .card-note > div,
#pg1 .note-box{background:var(--rp-limebg,#f2f6df);border:1px solid #d6e29a;border-left:4px solid var(--rp-lime-ink,#7f9a16);border-radius:10px;padding:11px 12px;font-size:10.5px;line-height:1.5;color:var(--rp-ink2,#41607a);}

/* ── loan officer card ──────────────────────────────────────────── */
#pg1 .fcard.lo-card{border-left:4px solid var(--rp-navy,#103a5c);}
#pg1 .lo-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--iv-line2);margin-bottom:15px;}
#pg1 .lo-head .av{width:38px;height:38px;border-radius:50%;background:var(--rp-navy,#103a5c);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;flex:0 0 38px;}
#pg1 .lo-head .t{flex:1;}
#pg1 .lo-head .t .nm{font-size:15px;font-weight:800;color:var(--rp-ink,#10324f);letter-spacing:-.3px;}
#pg1 .lo-head .t .sub{font-size:11px;font-weight:700;color:var(--rp-mut,#7a8a98);}
#pg1 .lo-head .chip{font-size:9.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--rp-lime-ink,#5f7414);background:var(--rp-limebg,#f2f6df);border:1px solid #d6e29a;border-radius:6px;padding:5px 9px;}

/* ── submit bar ─────────────────────────────────────────────────── */
#pg1 .submit-wrap{
  margin-top:24px;background:linear-gradient(105deg,#0e2f4c 0%,#123f61 60%,var(--rp-grad1,#1d5c84) 100%);
  border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
#pg1 .submit-copy{flex:1;min-width:260px;}
#pg1 .submit-copy .lbl{font-size:8.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--rp-pill,#bcd64a);}
#pg1 .submit-copy .t{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px;margin-top:2px;}
#pg1 .submit-copy .s{font-size:11px;font-weight:700;color:#aecade;margin-top:2px;}
/* ⚠ CHILD COMBINATOR, NOT A DESCENDANT SPACE. The saved-scenario save POPOVER
   lives inside .submit-wrap, and its confirm button is
   class="btn-primary scen-btn-go". Written as `#pg1 .submit-wrap .btn-primary`
   this rule is (1,2,0) and OUTRANKS `#pg1 .scen-btn-go` at (1,1,0), repainting
   that small popover button as a full-size lime Generate button. #generateBtn is
   a direct child of .submit-wrap, so scoping to `>` costs nothing.
   UPSTREAM: the same fix belongs in the canonical hfg-input-v2.css — every v2
   tool that gains saved scenarios hits this. */
#pg1 .submit-wrap > .btn-primary{
  border:none;border-radius:10px;background:var(--rp-pill,#bcd64a);color:#0e2f4c;
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:-.1px;padding:13px 24px;
  display:flex;align-items:center;gap:9px;cursor:pointer;height:auto;box-shadow:none;
}
#pg1 .submit-wrap > .btn-primary:hover{background:#c9e05c;}
#pg1 .submit-wrap > .btn-primary .arrow{font-size:16px;}
#pg1 .lo-error{
  flex:0 0 100%;order:-1;display:none;font-size:11.5px;font-weight:700;line-height:1.45;
  color:#ffd9d1;background:rgba(196,80,62,.22);border:1px solid rgba(255,180,165,.45);
  border-radius:9px;padding:9px 12px;
}
#pg1 .lo-error.show{display:block;}

/* ── narrow desktop / small laptop ──────────────────────────────── */
@media (max-width:1100px){
  #pg1 .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #pg1 .fgrid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  #pg1 .frow{grid-template-columns:minmax(0,1fr);}
  #pg1 .hfg-hero-inner{flex-direction:column;align-items:flex-start;gap:20px;}
  #pg1 .hero-out{align-items:flex-start;}
}

/* Override switch — "entering on behalf of another loan officer" (the Loan
   Officer Assistant flow). Sits between the card header and the autofill note,
   so it is read BEFORE the fields it changes. A real checkbox, visually hidden
   and driven by the adjacent .track: the label stays clickable, the control stays
   keyboard- and screen-reader-native, and no inline style is needed (the CSP
   blocks those). :checked + .track is why the input must precede .track in the
   markup. Logic lives in scripts/lo-override.js. */
#pg1 .lo-ovr{margin:0 0 14px;padding:11px 13px;border:1px solid var(--iv-line,#dfe4e9);border-radius:9px;background:var(--iv-fill,#fbfaf7);}
/* position:relative is required, not cosmetic: it anchors the absolutely
   positioned visually-hidden input, which would otherwise lay itself out against
   whatever distant ancestor happens to be positioned. */
#pg1 .lo-ovr-sw{position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;}
#pg1 .lo-ovr-sw input{position:absolute;width:1px;height:1px;opacity:0;margin:0;}
#pg1 .lo-ovr-sw .track{position:relative;flex:0 0 34px;width:34px;height:19px;border-radius:19px;background:#c6d0d8;transition:background .15s ease;}
#pg1 .lo-ovr-sw .track i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,50,79,.32);transition:transform .15s ease;}
#pg1 .lo-ovr-sw input:checked + .track{background:var(--rp-navy,#103a5c);}
#pg1 .lo-ovr-sw input:checked + .track i{transform:translateX(15px);}
#pg1 .lo-ovr-sw input:focus-visible + .track{outline:2px solid var(--rp-navy,#103a5c);outline-offset:2px;}
#pg1 .lo-ovr-sw .lbl{font-size:12.5px;font-weight:800;color:var(--rp-ink,#10324f);}
#pg1 .lo-ovr-hint{margin-top:5px;padding-left:45px;font-size:11px;font-weight:600;line-height:1.5;color:var(--rp-mut,#7a8a98);}