/* business-loan-calculator.html - the easy deal builder (WEB-078, register S411). House variables only (site-v2.css
   rules: no colour values here). On a phone every box and button is 44 pixels or more; nothing scrolls sideways but the
   year table, inside its own box. Printed (or saved as a PDF): only the person's own name, logo and notes, and their
   sums - none of our branding, and no web address in the page margins (@page margin 0). */

.prose .db{margin-block:var(--mcf-s6) var(--mcf-s8)}
.db-form,.db-own{max-width:none;background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s6)}
.db-form h2{margin-top:0}
.db-form .form-row{grid-template-columns:1fr 1fr}
.db-hint{font-size:var(--mcf-size-small);color:var(--mcf-grey);line-height:1.45;margin:0}
.db-seg{display:flex;flex-wrap:wrap;gap:var(--mcf-s2)}
.db-seg label{display:inline-flex;align-items:center;gap:var(--mcf-s2);min-height:44px;padding:0 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);cursor:pointer}
.db-seg label:has(input:checked){border-color:var(--mcf-blue);color:var(--mcf-blue)}
.db-seg input{accent-color:var(--mcf-blue);width:18px;height:18px;margin:0}
.db-msg:empty{display:none}
.db-msg{color:var(--mcf-bad-text);font-weight:600;margin:0}
.db-form .actions .btn[disabled],.db-own .btn[disabled]{opacity:.5;cursor:default}

/* the result: a sheet of paper, the person's own name and logo at its top */
.db-paper{margin-top:var(--mcf-s6);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);background:var(--mcf-card);padding:var(--mcf-s6)}
.db-print-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mcf-s4)}
.db-print-head img{max-width:160px;max-height:72px;width:auto;height:auto;object-fit:contain}
.db-print-head p{margin:0}
.db-p-name{font-size:var(--mcf-size-section);font-weight:600}
.db-p-notes{flex-basis:100%;color:var(--mcf-grey-strong);white-space:pre-wrap}
.db-h{font-size:var(--mcf-size-section);font-weight:600;margin:0}
.db-h:focus{outline:none}
.db-h4{font-size:var(--mcf-size-heading);font-weight:600;margin-top:var(--mcf-s6)}
.db-you,.db-way dl{display:flex;flex-direction:column;gap:var(--mcf-s2);margin-top:var(--mcf-s4);font-variant-numeric:tabular-nums}
.db-you div,.db-way dl div{display:flex;justify-content:space-between;gap:var(--mcf-s4);border-bottom:1px solid var(--mcf-line-soft);padding-bottom:var(--mcf-s1)}
.db-you dt,.db-way dt{color:var(--mcf-grey-strong)}
.db-you dd,.db-way dd{margin:0;font-weight:600;text-align:right;white-space:nowrap}
.db-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mcf-s4);margin-top:var(--mcf-s6)}
.db-way{background:var(--mcf-page);border-radius:var(--mcf-r-inner);padding:var(--mcf-s4);font-size:var(--mcf-size-small)}
.db-way h4{font-size:var(--mcf-size-heading);font-weight:600;margin:0}
.db-way dl{font-size:var(--mcf-size-small)}
.db-way dl div{flex-direction:column;gap:0}
.db-way dd{text-align:left}
.prose .db-small,.db-small{font-size:var(--mcf-size-small);color:var(--mcf-grey-strong);line-height:1.5;margin-top:var(--mcf-s2)}
.db-table-wrap{overflow-x:auto;margin-top:var(--mcf-s3);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-inner)}
.prose .db-table{min-width:520px;font-size:var(--mcf-size-small)}
.db-table th,.db-table td{padding:var(--mcf-s2) var(--mcf-s3);text-align:right;border-bottom:1px solid var(--mcf-line-soft)}
.db-table th[scope="row"],.db-table thead th:first-child{text-align:left}
.db-notes{margin-top:var(--mcf-s5);padding-left:1.2em;font-size:var(--mcf-size-small);color:var(--mcf-grey-strong)}
.db-notes li + li{margin-top:var(--mcf-s2)}
/* round 2 (S411): the quote box, the folded extra options, every rate under each way, the quote checked */
.db-quote{margin-bottom:var(--mcf-s5);padding-bottom:var(--mcf-s5);border-bottom:1px solid var(--mcf-line)}
.db-quote input[type=file]{min-height:44px}
.db-quote-msg:empty{display:none}
.db-quote-msg{color:var(--mcf-grey-strong);margin-top:var(--mcf-s2)}
.db-more{border:1px solid var(--mcf-line);border-radius:var(--mcf-r-inner);background:var(--mcf-card);padding:0 var(--mcf-s4)}
.db-more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s3);min-height:44px;cursor:pointer;font-weight:600;list-style:none}
.db-more summary::-webkit-details-marker{display:none}
.db-more[open] summary .ico{transform:rotate(180deg)}
.db-more[open]{padding-bottom:var(--mcf-s4)}
.db-ways-one{grid-template-columns:minmax(0,1fr)}
.db-way .db-rates{margin-top:var(--mcf-s4);padding-top:var(--mcf-s3);border-top:2px solid var(--mcf-line)}
.db-check{margin-top:var(--mcf-s6);background:var(--mcf-page);border-radius:var(--mcf-r-inner);padding:var(--mcf-s4)}
.db-check h4{font-size:var(--mcf-size-heading);font-weight:600;margin:0}
.db-check dl{display:flex;flex-direction:column;gap:var(--mcf-s2);margin-top:var(--mcf-s3);font-variant-numeric:tabular-nums}
.db-check dl div{display:flex;justify-content:space-between;gap:var(--mcf-s4);border-bottom:1px solid var(--mcf-line-soft);padding-bottom:var(--mcf-s1)}
.db-check dt{color:var(--mcf-grey-strong)}
.db-check dd{margin:0;font-weight:600;text-align:right}
.db-own{margin-top:var(--mcf-s6)}
.db-own legend{font-size:var(--mcf-size-section)}
.db-logo-msg:empty{display:none}
@media (max-width:900px){.db-ways{grid-template-columns:1fr}.db-way dl div{flex-direction:row}.db-way dd{text-align:right}}
@media (max-width:640px){.db-form,.db-own,.db-paper{padding:var(--mcf-s4)}.db-form .form-row{grid-template-columns:1fr}.db-form .actions .btn,.db-own .actions .btn{width:100%}}

@media print{
  @page{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(.db),.db > *:not(.db-paper),.mock{display:none !important}
  .art .wrap,.art .art-body,.prose .db{display:block;margin:0;padding:0;max-width:none}
  .db-paper{border:0;padding:0;margin:0}
  .db-ways{grid-template-columns:repeat(3,minmax(0,1fr))}
  .db-ways-one{grid-template-columns:minmax(0,1fr)}
  .db-way dl div{flex-direction:column}
  .db-way dd{text-align:left}
  .db-way,.db-table-wrap{break-inside:avoid}
  .db-table-wrap{overflow:visible}
  .prose .db-table{min-width:0;width:100%}
}