/* ═══════════════════════════════════════════════════════════════════
   HFG TUTORIAL v2 (styles/hfg-tutorial-v2.css)

   The loan-officer tutorial screen, in the same visual language as the v2
   input screen and client report: rounded navy hero tile with the lime
   rule, one step card at a time, numbered navy step chips, the four
   callout treatments, and a print-only one-page cheat sheet built on the
   report's page geometry.

   Load after hfg-input-v2.css:

     use.typekit.net/pon7ryr.css
     → hfg-tokens.css → hfg-tool-shell.css → hfg-report-v2.css
     → hfg-input-v2.css → hfg-tutorial-v2.css

   Scoped under #tut-app and #tut-print. Markup is produced by
   TutorialKit (scripts/tutorial-kit.js) — do not hand-write it.

   Rules that must survive edits:
     • The cheat sheet is ONE 8.5×11in box with overflow:hidden. Content
       budget 10.04in (the box is 10.94in) — and it must FILL that budget. .cs-comp carries
       margin-top:auto, which silently absorbs leftover space, so an
       under-filled sheet still measures a perfect 11.00in. assertFit()
       reports BOTH overflow and under-fill; treat >0.4in of slack as a
       content problem, never something to pad.
     • No inline style="" and no inline handlers — the CSP blocks both.
       TutorialKit wires its own listeners.
   ═══════════════════════════════════════════════════════════════════ */

/* ── shell ──────────────────────────────────────────────────────── */
#tut-app{background:var(--iv-page);min-height:100vh;padding-bottom:104px;}
#tut-app .tut-wrap{max-width:1000px;margin:0 auto;padding:0 32px;box-sizing:border-box;}
#tut-app .tut-herowrap{max-width:1000px;margin:0 auto;padding:22px 32px 0;box-sizing:border-box;}

/* ── nav (same object as the input screen) ──────────────────────── */
#tut-app .site-nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--iv-line);}
#tut-app .nav-inner{max-width:1000px;margin:0 auto;padding:13px 32px;display:flex;align-items:center;gap:22px;box-sizing:border-box;}
/* Logos carry an EXPLICIT width AND height. The HFG mark is 5279×1055
   (5.004:1); with only a height set, a column-flex parent
   (align-items:stretch) blows the width out to the column and the mark
   renders stretched. align-self:flex-start + object-fit are the guards. */
#tut-app .nav-logo-img{width:130px;height:26px;flex:0 0 auto;align-self:center;object-fit:contain;display:block;}
#tut-app .nav-context{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--rp-line);padding-left:22px;}
#tut-app .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);}
#tut-app .nav-context .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--rp-pill);display:block;}
#tut-app .nav-context .nc-title{font-size:14px;font-weight:800;color:var(--rp-ink);letter-spacing:-.2px;}
#tut-app .nav-actions{margin-left:auto;display:flex;align-items:center;gap:9px;}
#tut-app .nav-back{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--rp-navy);background:var(--white);border:1px solid var(--iv-line);border-radius:9px;padding:9px 15px;text-decoration:none;white-space:nowrap;}
#tut-app .nav-back{font-family:inherit;cursor:pointer;}
#tut-app .nav-back:hover{background:var(--rp-limebg);border-color:var(--rp-limeline);}

/* ── hero tile ──────────────────────────────────────────────────── */
#tut-app .tut-hero{background:linear-gradient(105deg,var(--rp-grad2) 0%,#123f61 55%,var(--rp-grad1) 100%);border-bottom:4px solid var(--rp-pill);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);}
#tut-app .tut-hcopy{display:flex;flex-direction:column;gap:9px;max-width:620px;}
#tut-app .tut-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--rp-pill);}
#tut-app .tut-title{margin:0;font-size:32px;font-weight:800;letter-spacing:-1.1px;line-height:1.08;color:var(--white);}
#tut-app .tut-title span{color:var(--rp-pill);}
#tut-app .tut-sub{margin:0;font-size:13px;line-height:1.55;color:#bcd3e0;text-wrap:pretty;}
#tut-app .tut-hout{display:flex;flex-direction:column;gap:9px;align-items:flex-end;flex:0 0 auto;}
#tut-app .tut-hout .lbl{font-size:8.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#7fa7c4;}
#tut-app .tut-hout .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;}
#tut-app .tut-hout .sheet{width:26px;height:32px;border-radius:3px;background:var(--white);display:flex;flex-direction:column;padding:3px;gap:2px;box-sizing:border-box;flex:0 0 26px;}
#tut-app .tut-hout .sheet i{display:block;border-radius:1px;height:2px;background:#cfd6dd;}
#tut-app .tut-hout .sheet i.t{height:4px;background:var(--rp-grad2);}
#tut-app .tut-hout .sheet i.a{background:var(--rp-pill);width:70%;}
#tut-app .tut-hout .sheet i.s{width:60%;}
#tut-app .tut-hout .txt{font-size:11px;font-weight:800;color:var(--white);line-height:1.35;}
#tut-app .tut-hout .txt span{font-weight:700;color:var(--rp-bestsub);}

/* ── progress ───────────────────────────────────────────────────── */
#tut-app .tut-prog{display:flex;align-items:center;gap:11px;margin:24px 0 9px;}
#tut-app .tut-prog .pstep{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--rp-mut);}
#tut-app .tut-prog i{flex:1;height:1px;background:#dbe1e6;display:block;}
#tut-app .tut-prog .ppct{font-size:10px;font-weight:800;letter-spacing:1.1px;color:var(--rp-lime-ink);font-variant-numeric:tabular-nums;}
#tut-app .tut-track{height:7px;border-radius:5px;background:#e2e7ea;overflow:hidden;}
#tut-app .tut-fill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--rp-grad1),var(--rp-pill));transition:width .28s cubic-bezier(.2,.7,.2,1);}

/* ── step card ──────────────────────────────────────────────────── */
#tut-app .tut-step{display:none;background:var(--white);border:1px solid var(--rp-line);border-radius:14px;box-shadow:0 1px 2px rgba(16,50,79,.05);padding:24px 26px 26px;margin-top:18px;}
#tut-app .tut-step.active{display:block;}
#tut-app .tut-step.req{border-left:4px solid var(--rp-navy);}
#tut-app .tut-shead{display:flex;align-items:center;gap:11px;padding-bottom:15px;border-bottom:1px solid var(--iv-line2);margin-bottom:17px;flex-wrap:wrap;}
#tut-app .tut-n{width:26px;height:26px;border-radius:50%;background:var(--rp-navy);color:var(--rp-pill);font-size:12px;font-weight:800;display:grid;place-items:center;flex:0 0 26px;}
#tut-app .tut-step.finish .tut-n{background:var(--rp-pill);color:var(--rp-pill-ink);}
#tut-app .tut-headline{font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--rp-ink);line-height:1.2;}

/* tag chips — one per step, naming what kind of step it is */
#tut-app .tut-tag{font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;border-radius:6px;padding:5px 9px;}
#tut-app .tut-tag.lime{color:var(--rp-lime-ink);background:var(--rp-limebg);border:1px solid var(--rp-limeline);}
#tut-app .tut-tag.blue{color:var(--rp-ink2);background:#eff4f8;border:1px solid #d3e0ea;}
#tut-app .tut-tag.red{color:var(--rp-redink);background:var(--rp-redpale1);border:1px solid var(--rp-redline);}
#tut-app .tut-tag.navy{color:var(--white);background:var(--rp-navy);}

/* ── body copy ──────────────────────────────────────────────────── */
#tut-app .tut-p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--rp-ink2);text-wrap:pretty;}
#tut-app .tut-p b{color:var(--rp-ink);}
#tut-app .tut-list{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}
#tut-app .tut-li{display:flex;gap:10px;font-size:13px;line-height:1.55;color:var(--rp-ink2);}
#tut-app .tut-li > i{flex:0 0 7px;height:7px;border-radius:2px;background:var(--rp-grad1);margin-top:7px;display:block;}
#tut-app .tut-li b{color:var(--rp-ink);}
#tut-app .field-pill{font-size:11.5px;font-weight:800;background:var(--rp-card);border:1px solid var(--rp-line);border-radius:6px;padding:1px 7px;color:var(--rp-ink);white-space:nowrap;}
#tut-app .tut-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px;}
#tut-app .tut-pills .field-pill{padding:4px 9px;}

/* fact cards — a 2-up grid of short labelled blocks */
#tut-app .tut-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:14px;}
#tut-app .tut-card{border:1px solid var(--rp-line);background:var(--rp-card);border-radius:11px;padding:12px 14px;}
#tut-app .tut-card .k{font-size:8px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--rp-mut);}
#tut-app .tut-card .t{font-size:13.5px;font-weight:800;color:var(--rp-ink);letter-spacing:-.2px;margin:1px 0 3px;}
#tut-app .tut-card .d{font-size:12px;line-height:1.5;color:var(--rp-ink2);}
#tut-app .tut-card .d b{color:var(--rp-ink);}
#tut-app .tut-card .num{font-size:16px;font-weight:800;color:var(--rp-navy);letter-spacing:-.4px;}
#tut-app .tut-card.hi{border-color:var(--rp-navy);background:linear-gradient(160deg,var(--rp-grad1),var(--rp-grad2));color:var(--white);}
#tut-app .tut-card.hi .k{color:var(--rp-pill);}
#tut-app .tut-card.hi .t{color:var(--white);}
#tut-app .tut-card.hi .d{color:#cfe0ea;}
#tut-app .tut-card.hi .d b{color:var(--white);}
#tut-app .tut-card .row{display:flex;justify-content:space-between;align-items:baseline;}

/* ── callouts: kicker word, never an icon or emoji ──────────────── */
#tut-app .tut-note{display:flex;gap:12px;border-radius:10px;padding:12px 14px;margin-bottom:10px;}
#tut-app .tut-note .kick{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding-top:2px;}
#tut-app .tut-note .body{flex:1;font-size:12.5px;line-height:1.55;color:var(--rp-ink2);}
#tut-app .tut-note .body b{color:var(--rp-ink);}
#tut-app .tut-note.tip{background:var(--rp-limebg);border:1px solid var(--rp-limeline);border-left:4px solid var(--rp-lime);}
#tut-app .tut-note.tip .kick{color:var(--rp-lime-ink);}
#tut-app .tut-note.tip .body b{color:var(--rp-lime-ink);}
#tut-app .tut-note.info{background:#eff4f8;border:1px solid #d3e0ea;border-left:4px solid var(--rp-grad1);}
#tut-app .tut-note.info .kick{color:#2f6f8a;}
#tut-app .tut-note.warn{background:var(--rp-redpale1);border:1px solid var(--rp-redline);border-left:4px solid var(--rp-red);}
#tut-app .tut-note.warn .kick{color:var(--rp-redink);}
/* the one navy "where this lands" moment — max one per tutorial */
#tut-app .tut-key{background:linear-gradient(160deg,var(--rp-grad1),var(--rp-grad2));border-radius:11px;padding:13px 15px;margin-bottom:10px;}
#tut-app .tut-key .k{font-size:8.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--rp-pill);}
#tut-app .tut-key .d{font-size:12.5px;line-height:1.55;color:#cfe0ea;margin-top:3px;}
#tut-app .tut-key .d b{color:var(--white);}

/* ── closing CTA (last step) ────────────────────────────────────── */
#tut-app .tut-cta{background:linear-gradient(105deg,var(--rp-grad2) 0%,#123f61 60%,var(--rp-grad1) 100%);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
#tut-app .tut-cta .copy{flex:1;min-width:240px;}
#tut-app .tut-cta .lbl{font-size:8.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--rp-pill);}
#tut-app .tut-cta .t{font-size:13.5px;font-weight:800;color:var(--white);letter-spacing:-.2px;margin-top:2px;}
#tut-app .tut-cta .s{font-size:11.5px;font-weight:700;color:var(--rp-bestsub);margin-top:2px;}

/* ── sticky controls ────────────────────────────────────────────── */
#tut-app .tut-ctrl{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--iv-line);z-index:40;box-shadow:0 -1px 3px rgba(16,50,79,.06);}
#tut-app .tut-ctrl-inner{max-width:1000px;margin:0 auto;padding:13px 32px;display:flex;align-items:center;gap:16px;box-sizing:border-box;}
#tut-app .tut-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;flex:1;}
#tut-app .tut-dot{width:10px;height:10px;border-radius:3px;border:1px solid #cfd8de;background:var(--white);padding:0;cursor:pointer;transition:background .15s,transform .15s;}
#tut-app .tut-dot.done{background:#7fa7c4;border-color:#7fa7c4;}
#tut-app .tut-dot.active{background:var(--rp-pill);border-color:var(--rp-lime);transform:scale(1.25);}
#tut-app .tut-btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:800;padding:11px 20px;cursor:pointer;border:none;white-space:nowrap;text-decoration:none;}
#tut-app .tut-btn.prev{border:1px solid var(--iv-line);background:var(--white);color:var(--rp-navy);padding:11px 18px;}
#tut-app .tut-btn.next{background:var(--rp-navy);color:var(--white);}
#tut-app .tut-btn.tool{background:var(--rp-pill);color:var(--rp-grad2);}
#tut-app .tut-btn[disabled]{opacity:.35;pointer-events:none;}

/* ── narrow ─────────────────────────────────────────────────────── */
@media (max-width:820px){
  #tut-app .tut-hero{flex-direction:column;align-items:flex-start;gap:20px;}
  #tut-app .tut-hout{align-items:flex-start;}
  #tut-app .tut-title{font-size:26px;}
  #tut-app .tut-cards{grid-template-columns:minmax(0,1fr);}
}

/* ── print: the one-page cheat sheet ────────────────────────────── */
#tut-print{display:none;}
#tut-print .cheat{width:8.5in;height:10.94in;box-sizing:border-box;background:var(--white);padding:0 .5in .4in;display:flex;flex-direction:column;color:var(--rp-ink);margin:0 auto;overflow:hidden;}
#tut-print .cheat > *{flex:0 0 auto;}
#tut-print .cs-band{margin:0 -.5in;background:linear-gradient(105deg,var(--rp-grad2) 0%,#123f61 55%,var(--rp-grad1) 100%);padding:.3in .5in .24in;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:4px solid var(--rp-pill);}
#tut-print .cs-band img{width:125px;height:25px;flex:0 0 auto;align-self:flex-start;object-fit:contain;display:block;}
#tut-print .cs-bl{display:flex;flex-direction:column;gap:9px;}
#tut-print .cs-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--rp-pill);}
#tut-print .cs-br{text-align:right;color:var(--rp-bestsub);font-size:10px;line-height:1.6;}
#tut-print .cs-br .lbl{font-size:8.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#7fa7c4;}
#tut-print .cs-br .nm{color:var(--white);font-size:14px;font-weight:800;letter-spacing:-.2px;}
#tut-print .cs-h1row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:15px;}
#tut-print .cs-h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1.06;max-width:5.4in;text-wrap:pretty;}
#tut-print .cs-ptag{font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--rp-mut);text-align:right;}
#tut-print .cs-lede{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--rp-ink2);max-width:6.8in;}
#tut-print .cs-sect{display:flex;align-items:center;gap:9px;font-size:9.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--rp-mut);margin:11px 0 7px;}
#tut-print .cs-sect i{flex:1;height:1px;background:var(--rp-line);display:block;}
#tut-print .cs-2up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px;}
#tut-print .cs-row{display:flex;gap:9px;font-size:10.5px;line-height:1.45;color:var(--rp-ink2);}
#tut-print .cs-row b{color:var(--rp-ink);}
#tut-print .cs-n{flex:0 0 17px;width:17px;height:17px;box-sizing:border-box;border-radius:50%;background:var(--rp-navy);color:var(--rp-pill);font-size:9.5px;font-weight:800;display:grid;place-items:center;}
/* In the table the chip is not a flex item, so the flex-basis above does not
   apply: without an explicit width it stretches to the cell and renders as an
   oval. Keep it an inline square. */
#tut-print table.cs-t td.n .cs-n{display:inline-grid;}
#tut-print .cs-n.lime{background:var(--rp-pill);color:var(--rp-pill-ink);}
#tut-print .cs-n.red{background:var(--rp-red);color:var(--white);}
#tut-print table.cs-t{width:100%;border-collapse:collapse;font-size:10.5px;}
#tut-print table.cs-t td{padding:6.5px 0;border-bottom:1px solid var(--rp-line);vertical-align:top;}
#tut-print table.cs-t td.n{width:.3in;}
#tut-print table.cs-t td.l{padding-right:10px;font-weight:800;color:var(--rp-ink);width:1.55in;}
#tut-print table.cs-t td.l span{display:block;font-size:8.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;}
#tut-print table.cs-t td.l span.lime{color:var(--rp-lime-ink);}
#tut-print table.cs-t td.l span.red{color:var(--rp-redink);}
#tut-print table.cs-t td.d{color:var(--rp-ink2);line-height:1.45;}
#tut-print table.cs-t td.d b{color:var(--rp-ink);}
#tut-print .cs-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
#tut-print .cs-panel{border:1px solid var(--rp-line);border-radius:13px;padding:12px 14px;}
#tut-print .cs-panel .pt{font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--rp-navy);margin-bottom:7px;}
#tut-print .cs-panel .pd{font-size:10.5px;line-height:1.5;color:var(--rp-ink2);}
#tut-print .cs-panel .pd b{color:var(--rp-ink);}
#tut-print .cs-note{margin-top:8px;background:var(--rp-limebg);border:1px solid var(--rp-limeline);border-left:4px solid var(--rp-lime);border-radius:10px;padding:11px 13px;font-size:10.5px;line-height:1.5;color:var(--rp-ink2);}
#tut-print .cs-note b{color:var(--rp-lime-ink);}
#tut-print .cs-comp{margin-top:auto;padding-top:6px;font-size:8.2px;line-height:1.5;color:var(--rp-comp);}
#tut-print .cs-foot{margin-top:9px;background:var(--rp-footnavy);border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:14px;}
#tut-print .cs-foot img{width:80px;height:16px;flex:0 0 auto;object-fit:contain;display:block;}
#tut-print .cs-foot span{flex:1;text-align:center;color:rgba(255,255,255,.82);font-size:8.2px;line-height:1.5;letter-spacing:.2px;}

@media print{
  /* The sheet IS the page: margin:0 on @page, and the box is 10.94in — a
     hair under 11in. At exactly 11in, sub-pixel rounding in the print
     engine spills one row onto a second sheet. Content is budgeted to
     10.94in, not 11in. */
  @page{size:letter portrait;margin:0;}
  html,body{background:#fff!important;margin:0!important;padding:0!important;height:auto!important;}
  body *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #tut-app{display:none!important;}
  #tut-print{display:block!important;margin:0!important;}
  #tut-print .cheat{margin:0!important;box-shadow:none!important;break-inside:avoid;page-break-inside:avoid;}
}