/* business-plan-template.html - the lender-ready plan (WEB-078, register S411). House variables only (site-v2.css
   rules: no colour values here - the person's own colour comes in from lender-plan.js as --lp-c, set on the plan
   itself). On a phone every box and button is 44 pixels or more; nothing scrolls sideways but the tables, each inside
   its own box. Printed (or saved as a PDF): only the plan - the person's own logo, name and colour, none of our
   branding, and no web address in the page margins (@page margin 0), on about 3 or 4 A4 pages. */

.prose .lp{margin-block:var(--mcf-s6) var(--mcf-s8)}
.lp-form{max-width:none;background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s6)}
.lp-form h2{margin-top:0}
.lp-hint{font-size:var(--mcf-size-small);color:var(--mcf-grey);line-height:1.45;margin:0}
.lp-note:empty,.lp-msg:empty{display:none}
.lp-msg{color:var(--mcf-grey-strong);font-weight:600;margin:0}
.lp-form .lp-step legend{font-size:var(--mcf-size-section)}
.lp-step:focus{outline:none}
.lp-label{font-size:var(--mcf-size-table);font-weight:600;margin:0}
.lp-where{font-size:var(--mcf-size-table);font-weight:600;color:var(--mcf-grey-strong);margin:0 0 var(--mcf-s2)}
.lp-track{height:6px;border-radius:var(--mcf-r-pill);background:var(--mcf-fill);overflow:hidden}
.lp-bar{display:block;height:100%;width:20%;background:var(--mcf-blue);border-radius:var(--mcf-r-pill);transition:width .25s}
.lp-opts{display:flex;flex-wrap:wrap;gap:var(--mcf-s2)}
.lp-opts label{display:inline-flex;align-items:center;gap:var(--mcf-s2);min-height:44px;padding:var(--mcf-s2) var(--mcf-s4);border:1px solid var(--mcf-control);border-radius:var(--mcf-r-pill);background:var(--mcf-card);font-size:var(--mcf-size-body);line-height:1.3;cursor:pointer}
.lp-opts label:has(input:checked){border-color:var(--mcf-blue);color:var(--mcf-blue)}
.lp-opts input,.lp-check input{accent-color:var(--mcf-blue);width:18px;height:18px;margin:0;flex-shrink:0}
.lp-check{min-height:44px;font-size:var(--mcf-size-body);color:var(--mcf-ink)}
.lp-form input[type="file"]{padding:9px 12px;font-size:var(--mcf-size-table)}
.lp-form input[type="color"]{padding:4px;cursor:pointer}
.lp-form .btn[disabled]{opacity:.5;cursor:default}
.lp-form .actions{margin-top:var(--mcf-s2)}

/* the rows that can be added: assets, and the finance the business has now */
.lp-rows{display:flex;flex-direction:column;gap:var(--mcf-s4)}
.lp-row{display:flex;flex-direction:column;gap:var(--mcf-s4);background:var(--mcf-card);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-inner);padding:var(--mcf-s4)}
.lp-row-h{font-weight:600;margin:0}
.lp-row > .btn,.lp-step > .btn{align-self:flex-start}
.lp-thumb{max-width:160px;max-height:120px;width:auto;height:auto;border-radius:var(--mcf-r-control);object-fit:cover}

/* the tables: they scroll inside their own box on a small phone, never the page */
.lp-scroll{overflow-x:auto;max-width:100%}
.lp-table{width:100%;border-collapse:collapse;font-size:var(--mcf-size-table);font-variant-numeric:tabular-nums}
.lp-table th,.lp-table td{text-align:left;padding:var(--mcf-s2);border-bottom:1px solid var(--mcf-line);vertical-align:middle}
.lp-table thead th{font-size:var(--mcf-size-caption);font-weight:600;color:var(--mcf-grey-strong)}
.lp-table .n{text-align:right;white-space:nowrap}
.lp-table tfoot th,.lp-table tfoot td{font-weight:600;border-bottom:0}
.lp-table tbody th,.lp-table tfoot th{text-transform:none;letter-spacing:0;font-size:var(--mcf-size-table);color:var(--mcf-ink)}
.lp-mtable{min-width:300px}
.lp-mtable tbody th{font-weight:400;white-space:nowrap}
.lp-mtable td{padding:var(--mcf-s1)}
.lp-mtable input{width:100%;min-width:64px;min-height:44px;padding:8px 10px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-control);background:var(--mcf-card);color:var(--mcf-ink);font-size:var(--mcf-size-body);text-align:right}
.lp-mtable input:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:1px}
.lp-mtable .lp-left,.lp-mtable tfoot td{text-align:right;white-space:nowrap}

/* the plan: a sheet of paper in the person's own colour */
.lp-out{margin-top:var(--mcf-s6)}
.lp-out-head{display:flex;flex-direction:column;gap:var(--mcf-s3);margin-bottom:var(--mcf-s4)}
.prose .lp-out-h{font-size:var(--mcf-size-section);font-weight:600;margin:0}
.lp-out-h:focus{outline:none}
.lp-plan{--lp-c:var(--mcf-ink);border:1px solid var(--mcf-line);border-top:6px solid var(--lp-c);border-radius:var(--mcf-r-card);background:var(--mcf-card);padding:var(--mcf-s6);color:var(--mcf-ink)}
.lp-cover{padding-bottom:var(--mcf-s5);border-bottom:2px solid var(--lp-c)}
.lp-logo{display:block;max-width:200px;max-height:90px;width:auto;height:auto;object-fit:contain;margin-bottom:var(--mcf-s4)}
.prose .lp-kicker{font-size:var(--mcf-size-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mcf-grey-strong);margin:0}
.prose .lp-name{font-size:var(--mcf-size-title);font-weight:600;margin:var(--mcf-s1) 0 var(--mcf-s2)}
.prose .lp-sub{color:var(--mcf-grey-strong);margin:0}
.prose .lp-plan h4{font-size:var(--mcf-size-heading);font-weight:600;margin:var(--mcf-s5) 0 var(--mcf-s2)}
.prose .lp-sec{margin-top:var(--mcf-s6)}
.prose .lp-sec h3{font-size:var(--mcf-size-section);font-weight:600;margin:0;padding-bottom:var(--mcf-s2);border-bottom:2px solid var(--lp-c)}
.prose .lp-p{margin:var(--mcf-s3) 0 0;white-space:pre-wrap}
.prose .lp-ul{margin-top:var(--mcf-s2);padding-left:1.2em}
.lp-dl{display:flex;flex-direction:column;margin:var(--mcf-s3) 0 0}
.lp-dl div{display:grid;grid-template-columns:minmax(110px,30%) 1fr;gap:var(--mcf-s3);padding:var(--mcf-s2) 0;border-bottom:1px solid var(--mcf-line-soft)}
.lp-dl dt{font-weight:600;color:var(--mcf-grey-strong)}
.lp-dl dd{margin:0;white-space:pre-wrap}
.lp-photo{display:block;width:72px;height:54px;object-fit:cover;border-radius:6px}
.lp-plan .lp-scroll{margin-top:var(--mcf-s3)}

@media (max-width:640px){
  .lp-form,.lp-plan{padding:var(--mcf-s4)}
  .lp-form .actions .btn,.lp-out-head .btn{flex:1 1 40%}
  .lp-dl div{grid-template-columns:1fr;gap:var(--mcf-s1)}
}

@media print{
  @page{size:A4;margin:0}
  body.site{background:none;padding:14mm}
  body.site > *:not(main),main > *:not(article),.art .crumbs,.art-top,.art-hero,.art .art-body > *:not(.prose),.prose > *:not(.lp),.lp > *:not(.lp-out),.lp-out > *:not(.lp-plan),.mock{display:none !important}
  .art .wrap,.art .art-body,.prose .lp,.lp-out{display:block;margin:0;padding:0;max-width:none}
  .lp-plan{border:0;border-top:6px solid var(--lp-c);border-radius:0;padding:6mm 0 0;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:12px}
  .lp-cover{break-after:page;padding-top:30mm}
  .prose .lp-name{font-size:34px}
  .prose .lp-sec{margin-top:8mm}
  .prose .lp-sec h3{break-after:avoid}
  .prose .lp-plan h4{break-after:avoid;margin-top:5mm}
  .lp-scroll{overflow:visible}
  .lp-table{font-size:11px}
  .lp-table tr,.lp-dl div{break-inside:avoid}
  .lp-photo{width:30mm;height:22mm}
}