/* ═══════════════════════════════════════════════════════════════════
   WHY NOW ANALYSIS — tool-specific layer (styles/app.css)

   Layer 6 of the v2 theme contract:
     fonts → hfg-tokens → hfg-tool-shell → hfg-report-v2 → hfg-input-v2
     → THIS FILE → auth-gate.css → embed.css

   Only what is unique to THIS tool lives here; every input, card, report and
   mobile shape comes from the kit. The auth gate lives in styles/auth-gate.css
   and the portal-embed overrides in styles/embed.css, because tutorial.html
   needs both and does NOT load this file.

   Colors only via var(--…) tokens. No inline styles anywhere (CSP).
   ═══════════════════════════════════════════════════════════════════ */

/* The rate fields use the kit's .spin chevrons — hide the native (tiny) number
   spinner on those two so there aren't two sets of arrows. The shell ships this
   for a field literally named #rate (hfg-tool-shell.css:593), which this tool
   does not have; its rate field is #rateToday. */
#rateToday::-webkit-inner-spin-button,#rateToday::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#rateToday{-moz-appearance:textfield;appearance:textfield;}

/* ═══════════ PDF CAPTURE GUARD ═══════════
   The v1 layer pinned `html.pdf-capture .report{width:1000px!important}` because
   the v1 report shell was fluid, so a phone-width capture produced a skinny PDF
   (device QA, 2026-07-13). Under v2 that pin is unnecessary: hfg-report-v2.css:10
   sets `.rp .page{width:8.5in!important}` unconditionally, so the sheet cannot
   collapse to the viewport. What DOES still need neutralizing is the mobile
   `overflow-x:auto` the shell puts on .report-shell — during a capture it turns
   the 8.5in sheet into a scroll container. */
html.pdf-capture .report-shell{overflow:visible!important;}
html.pdf-capture body{overflow-x:hidden;}

/* ═══════════ HERO ACTION PILLS (tutorial + saved scenarios) ═══════════
   Both entry points live at the bottom of .hero-copy, inside the navy hero tile,
   as translucent outlined pills — never a full-width strip under the hero, and
   never two strips stacked. (The designer's copy shipped the tutorial as a
   .pg1-tut-btn strip; that is the shape the v2 kit replaced. The kit's
   .pg1-tut-btn rules are left alone — they are shared, and other tools may still
   be on the old shape.) The kit does not own these; they are the tool's layer.

   .hero-btn styles BOTH an <a> and a <button>, so every default either element
   brings has to be reset explicitly (text-decoration, font-family, cursor). */
#pg1 .hero-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
#pg1 .hero-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 15px;box-sizing:border-box;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.26);border-radius:10px;
  color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:-.1px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
#pg1 .hero-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(188,214,74,.6);}
/* .on is the pressed look scenarios.js toggles while the panel is open */
#pg1 .hero-btn.on{background:rgba(188,214,74,.16);border-color:var(--rp-pill,#bcd64a);}
#pg1 .hero-btn .hb-ico{display:flex;align-items:center;color:var(--rp-pill,#bcd64a);font-size:13px;font-weight:800;}
#pg1 .hero-btn .scen-count{
  font-size:9.5px;font-weight:800;letter-spacing:.6px;
  color:var(--rp-pill-ink,#16290a);background:var(--rp-pill,#bcd64a);
  border-radius:5px;padding:2px 6px;margin-left:2px;
}
#pg1 .scen-count[hidden]{display:none;}
@media print{ #pg1 .hero-acts{display:none!important;} }

/* ═══════════════════════════════════════════════════════════════════
   SAVED SCENARIOS (scripts/scenarios.js)

   Ported from rent-vs-own (feat/rent-vs-own-v2-reskin, 2026-07-27 — the head of
   the net-proceeds → refinance → rent-vs-own lineage). The hero pill + count chip
   are in the HERO ACTION PILLS block above; what follows is the panel, the rows,
   the buttons, the toasts and the popover.

   §1c-ii KIT-VERSION NOTE — .scen-btn ships as class="btn-secondary scen-btn",
   so part of its look arrives from whichever hfg-tool-shell.css the tool carries.
   THIS tool's shell DOES include the later "command-center" layer (--cc-ink at
   :727, .btn-secondary{border:2px solid var(--cc-ink);border-radius:12px;
   box-shadow:3px 3px 0 var(--cc-ink)} at :762 and the translate-on-hover press-in
   at :763), so the hard offset shadow would arrive by inheritance here. It is
   restated below anyway — with the ink as a literal fallback so no kit token is
   redefined in a tool stylesheet — because the compact metrics have to be
   restated regardless, and a component whose look depends on an un-restated
   inherited property is exactly the silent kit-version dependency that rule
   exists to prevent.

   NOTE: this tool has NO mobile scenarios drawer. why-now's mobile screen reads
   and writes the desktop DOM as the single source of truth (there is no second
   input model), so the reference's #mv .scen-* block is deliberately not ported.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the panel the hero button toggles ──
   A plain card in the form flow, directly above "The property" so it sits next
   to the fields a Load writes into. No header of its own: the hero button IS
   the header. */
#pg1 .scen-panel{
  margin:18px 0 0;padding:15px 17px 16px;
  background:#fff;border:1px solid var(--rp-line,#e4e0d6);
  border-left:4px solid var(--rp-pill,#bcd64a);border-radius:11px;
  box-shadow:0 2px 8px rgba(16,50,79,.07);
}
/* The panel's children are display:flex, which outranks the UA [hidden] rule —
   restate it or the collapsed panel renders wide open. */
#pg1 .scen-panel[hidden]{display:none;}
#pg1 .scen-hint{
  margin:0 0 13px;padding:10px 13px;border-radius:9px;
  background:var(--rp-card,#fbfaf7);border:1px solid var(--rp-line,#e4e0d6);
  border-left:3px solid var(--rp-lime,#7f9a16);
  font-size:11px;font-weight:700;line-height:1.5;color:var(--rp-ink2,#41607a);
}

/* ── load confirmation: one-shot highlight on the first card ──
   After a Load the panel's own note is scrolled off above, so this is what
   confirms the values changed at the place the officer is now looking. A brief
   lime ring, then back to normal. `forwards` is deliberately NOT used: the card
   must end on its own styling. */
@keyframes scenFlash{
  0%  {box-shadow:0 0 0 0 rgba(188,214,74,0);    border-color:var(--rp-line,#e4e0d6);}
  18% {box-shadow:0 0 0 4px rgba(188,214,74,.45);border-color:var(--rp-lime,#7f9a16);}
  100%{box-shadow:0 0 0 0 rgba(188,214,74,0);    border-color:var(--rp-line,#e4e0d6);}
}
#pg1 .fcard.scen-flash{animation:scenFlash 1.15s ease-out;}
@media (prefers-reduced-motion:reduce){ #pg1 .fcard.scen-flash{animation:none;} }
/* revealDeal() focuses #dealSection programmatically — no ring for that, but a
   keyboard user keeps their indicator. #pg1Heading / #pg2Heading get the same
   treatment in styles/embed.css, where the framed focus-scroll lives. */
#pg1 #dealSection:focus:not(:focus-visible){outline:none;}

/* ── the list ── */
#pg1 .scen-list{display:flex;flex-direction:column;gap:8px;}
#pg1 .scen-empty{
  padding:16px 14px;border:1px dashed var(--iv-line,#dfe4e9);border-radius:10px;
  font-size:11.5px;font-weight:700;color:var(--rp-mut,#7a8a98);text-align:center;
}
#pg1 .scen-empty b{color:var(--rp-ink2,#41607a);}
#pg1 .scen-row{
  display:flex;align-items:center;gap:14px;padding:11px 14px;
  background:var(--rp-card,#fbfaf7);border:1px solid var(--iv-line,#dfe4e9);
  border-radius:10px;
}
#pg1 .scen-meta{flex:1;min-width:0;}
#pg1 .scen-nm{
  font-size:12.5px;font-weight:800;color:var(--rp-ink,#10324f);letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pg1 .scen-sub{font-size:10px;font-weight:700;color:var(--rp-mut,#7a8a98);margin-top:2px;font-variant-numeric:tabular-nums;}
#pg1 .scen-acts{display:flex;gap:7px;flex:0 0 auto;}

/* ── buttons: a compact variant of .btn-secondary, with the layered look ──
   border-radius IS restated (what would otherwise arrive from the shell's
   .btn-secondary is a 12px command-center rect at 2px border); box-shadow is
   restated to REPRODUCE the shell's offset rather than to remove it. See the
   kit-version note at the top of this block. */
#pg1 .scen-btn,#pg2 .scen-btn{
  padding:7px 13px;font-size:11px;font-weight:800;border-radius:8px;
  letter-spacing:.2px;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--iv-line,#dfe4e9);color:var(--rp-ink2,#41607a);
  box-shadow:3px 3px 0 var(--cc-ink,#13283a);
  transition:background .15s,border-color .15s,color .15s,box-shadow .16s,transform .14s;
}
#pg1 .scen-btn:hover,#pg2 .scen-btn:hover{background:#fff;border-color:var(--rp-grad1,#1d5c84);color:var(--rp-ink,#10324f);}

/* THE PRESS-IN, scoped to the two places that carry the compact metrics: the
   panel rows on page 1, and the popover pair on either page. Deliberately NOT
   written as a bare `#pg2 .scen-btn:hover` — the results-bar TRIGGER is restyled
   to match #backBtn further down, and a broad press-in would fight that rule on
   a specificity tie. Scoping keeps the outcome independent of source order. */
#pg1 .scen-btn:hover,#pg2 .scen-pop .scen-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cc-ink,#13283a);}
#pg1 .scen-btn:active,#pg2 .scen-pop .scen-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cc-ink,#13283a);}
/* A disabled trigger must not look pressable — but must not look flat either. */
#pg1 .scen-btn:disabled,#pg2 .scen-btn:disabled{opacity:.5;cursor:not-allowed;}
#pg1 .scen-btn:disabled{transform:none;box-shadow:3px 3px 0 var(--cc-ink,#13283a);}
@media (prefers-reduced-motion:reduce){
  #pg1 .scen-btn,#pg1 .scen-btn:hover,#pg1 .scen-btn:active,
  #pg2 .scen-pop .scen-btn:hover,#pg2 .scen-pop .scen-btn:active{transform:none;transition:none;}
}
/* Destructive actions take the one red — never a second warning hue. The offset
   shadow stays navy (inherited from the rule above). */
#pg1 .scen-btn.danger,#pg2 .scen-btn.danger{color:var(--rp-red,#c4503e);border-color:var(--rp-redline,#e6c4bd);}
#pg1 .scen-btn.danger:hover,#pg2 .scen-btn.danger:hover{background:var(--rp-redpale1,#fbeeea);border-color:var(--rp-red,#c4503e);color:var(--rp-red,#c4503e);}

/* The popover's own primary. Restates geometry so it does not inherit a slab
   inside a 290px popover, and carries the same offset shadow so the popover
   reads as one pair rather than one raised + one flat.

   ⚠ Specificity, both pages. On page 1 the kit's `#pg1 .submit-wrap > .btn-primary`
   (1,2,0) sits between this rule and the button — that selector was a plain
   descendant space until this merge, which made it match the popover's Save and
   repaint it as the full lime Generate button; the child combinator is what
   confines it to #generateBtn. On page 2 the shell's `.pg2-actions .btn-primary`
   (0,2,0) loses to the (1,1,0) below, so no change was needed there. */
#pg1 .scen-btn-go,#pg2 .scen-btn-go{
  padding:7px 15px;font-size:11px;font-weight:800;border-radius:8px;
  border:1px solid var(--rp-navy,#103a5c);background:var(--rp-navy,#103a5c);color:#fff;
  box-shadow:3px 3px 0 var(--cc-ink,#13283a);cursor:pointer;font-family:inherit;letter-spacing:.2px;
  transition:background .15s,border-color .15s,box-shadow .16s,transform .14s;
}
#pg1 .scen-btn-go:hover,#pg2 .scen-btn-go:hover{
  background:var(--rp-grad1,#1d5c84);border-color:var(--rp-grad1,#1d5c84);
  transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cc-ink,#13283a);
}
#pg1 .scen-btn-go:active,#pg2 .scen-btn-go:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cc-ink,#13283a);}
@media (prefers-reduced-motion:reduce){
  #pg1 .scen-btn-go,#pg1 .scen-btn-go:hover,#pg1 .scen-btn-go:active,
  #pg2 .scen-btn-go,#pg2 .scen-btn-go:hover,#pg2 .scen-btn-go:active{transform:none;transition:none;}
}

/* ── results bar: the TRIGGER matches "Edit Inputs" ──
   This tool's results bar comes from the shell's command-center layer: #backBtn
   is a .btn-secondary at 9px/18px, 13px label, 12px radius, 2px --cc-ink border
   and a 3px offset shadow. The Save-scenario trigger is the same rank, so it
   reproduces exactly that computed result rather than the compact #pg1 metrics
   above. (Reproducing it here is deliberate — importing a newer shell would also
   repaint the report and the cards, per §1c-ii.)

   ⚠ THE FULL CHILD PATH IS LOAD-BEARING, not tidiness. `.scen-save-wrap` holds
   BOTH the trigger and the popover, and every button in that popover is also a
   `.scen-btn`. Written as the obvious `#pg2 .pg2-actions .scen-btn` this rule is
   (1,2,0), so it would match the popover's Cancel as well and beat the compact
   `#pg1 .scen-btn,#pg2 .scen-btn` at (1,1,0) — giving a full-size Cancel next to
   a compact Save inside a 290px popover. Spelling out `> .scen-save-wrap >`
   confines it to the trigger. (1,3,0) also beats (1,1,0) OUTRIGHT rather than
   tying — a tie resolved by source order is the trap. */
#pg2 .pg2-actions > .scen-save-wrap > .scen-btn{
  padding:9px 18px;font-size:13px;border-radius:12px;letter-spacing:.2px;
  background:transparent;border:2px solid var(--cc-ink,#13283a);color:var(--cc-ink,#13283a);
  box-shadow:3px 3px 0 var(--cc-ink,#13283a);
}
#pg2 .pg2-actions > .scen-save-wrap > .scen-btn:hover{
  background:var(--hfg-blue,#0f4369);color:#fff;border-color:var(--cc-ink,#13283a);
  transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cc-ink,#13283a);
}
#pg2 .pg2-actions > .scen-save-wrap > .scen-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cc-ink,#13283a);}
@media (prefers-reduced-motion:reduce){
  #pg2 .pg2-actions > .scen-save-wrap > .scen-btn,
  #pg2 .pg2-actions > .scen-save-wrap > .scen-btn:hover,
  #pg2 .pg2-actions > .scen-save-wrap > .scen-btn:active{transform:none;transition:none;}
}
#pg2 .pg2-actions .scen-save-wrap{flex:0 0 auto;}
/* This bar carries FOUR controls once the Save trigger lands (Edit Inputs, Save
   scenario, Print/Save PDF, and the mutually-exclusive Share PDF), so a narrow
   viewport otherwise crushes them onto stacked lines. */
#pg2 .pg2-actions{flex-wrap:wrap;}

/* ── footer: clear-all + its two-step inline confirm ── */
#pg1 .scen-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--iv-line2,#eceff2);}
#pg1 .scen-foot[hidden]{display:none;}
#pg1 .scen-confirm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:13px;font-size:11.5px;font-weight:800;color:var(--rp-red,#c4503e);}
#pg1 .scen-confirm[hidden]{display:none;}
#pg1 .scen-confirm .ct{flex:1 1 100%;line-height:1.4;}

/* ── status line, shared by the panel and both save popovers ──
   Transient: scenarios.js clears it after ~5s, and a pg1 ⇄ pg2 switch clears it
   immediately (showPage() calls Scenarios.dismissNotes()), so a confirmation can
   never sit on a view it does not belong to. Warnings are sticky and exempt.
   Removal is instant, because `hidden` is binary and cannot be transitioned. */
@keyframes scenNoteIn{
  from{opacity:0;transform:translateY(-4px);}
  to  {opacity:1;transform:translateY(0);}
}
#pg1 .scen-msg,#pg1 .scen-save-msg,#pg2 .scen-save-msg{
  margin-top:11px;padding:8px 12px;border-radius:8px;
  background:var(--rp-limebg,#f2f6df);border:1px solid var(--rp-limeline,#d6e29a);
  font-size:11px;font-weight:700;line-height:1.5;color:var(--rp-lime-ink,#5f7414);
  animation:scenNoteIn .18s cubic-bezier(.2,.7,.2,1);
}
/* flex:0 0 100% only means "own row" inside a parent that WRAPS. Both of these
   sit in a wrapping parent on purpose — #scenSaveMsg in .submit-wrap (which is
   display:flex;flex-wrap:wrap at hfg-input-v2.css:187) and #scenSaveMsg2 in
   .pg2-bar, never inside the button rows. Put either in .pg2-actions and it
   becomes an unshrinkable full-width item that collapses the buttons onto two
   and three lines for as long as the message shows. */
#pg1 .scen-save-msg,#pg2 .scen-save-msg{flex:0 0 100%;}
@media (prefers-reduced-motion:reduce){
  #pg1 .scen-msg,#pg1 .scen-save-msg,#pg2 .scen-save-msg{animation:none;}
}
#pg1 .scen-msg.warn,#pg1 .scen-save-msg.warn,#pg2 .scen-save-msg.warn{
  background:var(--rp-redpale1,#fbeeea);border-color:var(--rp-redline,#e6c4bd);color:var(--rp-redink,#9a5448);
}
#pg1 .scen-msg[hidden],#pg1 .scen-save-msg[hidden],#pg2 .scen-save-msg[hidden]{display:none;}

/* ── the naming popover ──
   Anchored absolutely to its trigger, NOT position:fixed: framed in the portal
   there is no local viewport, so a fixed overlay centres against the entire
   document height and can land off-screen. Default opens upward (the submit bar
   is at the page bottom); .scen-pop--below flips it for the results-page bar. */
#pg1 .scen-save-wrap,#pg2 .scen-save-wrap{position:relative;display:flex;flex:0 0 auto;}
#pg1 .scen-pop,#pg2 .scen-pop{
  position:absolute;bottom:calc(100% + 9px);right:0;z-index:60;width:290px;
  display:flex;flex-direction:column;gap:7px;padding:15px 16px 14px;
  background:#fff;border:1px solid var(--iv-line,#dfe4e9);border-radius:12px;
  box-shadow:0 10px 28px rgba(16,50,79,.16);text-align:left;
}
#pg1 .scen-pop--below,#pg2 .scen-pop--below{bottom:auto;top:calc(100% + 9px);}
#pg1 .scen-pop[hidden],#pg2 .scen-pop[hidden]{display:none;}
#pg1 .scen-pop .scen-pl,#pg2 .scen-pop .scen-pl{
  font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--rp-mut,#7a8a98);
}
/* The page-1 popover's input is inside #pg1, so #pg1 input{…} from
   hfg-input-v2.css at (1,0,1) applies. These restate what differs at (1,2,1)
   so they win. */
#pg1 .scen-pop input,#pg2 .scen-pop input{
  width:100%;box-sizing:border-box;height:36px;padding:0 11px;
  border:1px solid var(--iv-line,#dfe4e9);border-radius:9px;background:var(--iv-fill,#fbfaf7);
  font-family:inherit;font-size:13px;font-weight:700;color:var(--rp-ink,#10324f);
}
#pg1 .scen-pop input:focus,#pg2 .scen-pop input:focus{
  outline:none;border-color:var(--rp-grad1,#1d5c84);box-shadow:0 0 0 3px rgba(29,92,132,.14);
}
#pg1 .scen-pop-acts,#pg2 .scen-pop-acts{display:flex;justify-content:flex-end;gap:7px;margin-top:4px;}

/* ── PRINT: the panel and both save controls are screen-only chrome ── */
@media print{
  #pg1 .scen-panel,#pg1 .scen-save-wrap,#pg2 .scen-save-wrap,
  #pg1 .scen-save-msg,#pg2 .scen-save-msg{display:none!important;}
}