/* Free public loan calculator. Uses the shared theme variables from style.css
   (dark by default, body.light for light) and the public page shell in
   public-site.css. No inline styles: the public CSP is style-src 'self'. */
.loan-calc{--loan-good:#7fe0a6;--loan-warn:var(--chart-gold,#f4c56a);--loan-interest:var(--chart-gold,#f4c56a);--loan-principal:var(--accent);padding:24px;margin-top:0}
body.light .loan-calc{--loan-good:#087046}
.loan-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.loan-heading h2{margin:6px 0 0}
.loan-heading-actions button,.loan-actions button,.loan-view button,.loan-share-actions button,.loan-show-all{font-size:13px;padding:7px 12px;margin:0;min-height:36px}
.loan-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--bg)!important;font-weight:600}
.loan-primary:disabled{opacity:.5}
.loan-layout{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.4fr);gap:28px;align-items:start}

/* Controls */
.loan-controls{display:block;margin:0}
.loan-controls section,.loan-special{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:0 0 12px;background:var(--bg)}
.loan-controls h3{font-size:14px;margin:0 0 6px;color:var(--text)}
.loan-controls h3 small{font-weight:400;font-size:12px}
.loan-field{display:block;margin:12px 0 0;min-width:0}
.loan-field>label,.loan-field-title{display:block;font-size:13px;color:var(--muted);margin:0 0 5px}
.loan-input{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:10px;background:var(--panel);min-width:0;flex:1}
.loan-input:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.loan-input input{flex:1;min-width:0;width:100%;max-width:none;border:0;background:transparent;padding:8px 10px;font-size:15px;font-variant-numeric:tabular-nums;outline:none}
.loan-input input:invalid{color:var(--chart-red)}
.loan-input:has(input:invalid){border-color:var(--chart-red)}
.loan-affix{padding-left:11px;color:var(--muted);font-size:14px}
.loan-suffix{padding:0 10px 0 2px;color:var(--muted);font-size:12px;white-space:nowrap}
.loan-input-pair{display:flex;gap:8px;min-width:0}
.loan-input-pct{flex:0 0 96px}
.loan-input-pair select,.loan-input-pair input[type=date]{flex:0 0 46%;min-width:0;max-width:none;padding:8px 10px;font-size:14px}
.loan-field>select,.loan-field>input[type=date]{width:100%;max-width:none;padding:8px 10px;font-size:15px}
.loan-note{font-size:12px;line-height:1.45;margin:6px 0 0}
.loan-range{appearance:none;-webkit-appearance:none;display:block;width:100%;max-width:none;height:5px;padding:0;margin:12px 0 4px;border:0;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--fill,0%),var(--border) var(--fill,0%));cursor:pointer}
.loan-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent)}
.loan-range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent)}
.loan-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.loan-segment{display:flex;gap:0;border:1px solid var(--border);border-radius:10px;padding:3px;margin:10px 0 0;background:var(--panel)}
.loan-segment legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.loan-segment label{flex:1;display:block;margin:0;color:var(--text);font-size:13px}
.loan-segment input{position:absolute;opacity:0;width:1px;height:1px}
.loan-segment span{display:block;text-align:center;padding:7px 8px;border-radius:7px;cursor:pointer;color:var(--muted)}
.loan-segment input:checked+span{background:var(--accent);color:var(--bg);font-weight:600}
.loan-segment input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.loan-check{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--muted);cursor:pointer}
.loan-check input{width:16px;height:16px;padding:0;margin:0;accent-color:var(--accent)}
.loan-special summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--text)}
.loan-special[open] summary{margin-bottom:4px}

/* Results */
.loan-results{position:sticky;top:16px;min-width:0}
.loan-headline small{font-size:13px;color:var(--muted)}
.loan-headline strong{display:block;font-size:46px;line-height:1.15;letter-spacing:-1.5px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.loan-headline p{font-size:14px;margin:4px 0 14px}
.loan-savings,.loan-notice{border:1px solid var(--loan-good);border-left-width:4px;border-radius:12px;padding:12px 14px;margin:0 0 14px;background:color-mix(in srgb,var(--loan-good) 9%,transparent)}
.loan-savings strong,.loan-notice strong{display:block;font-size:15px;color:var(--text);line-height:1.4}
.loan-savings p,.loan-notice p{margin:4px 0 0;font-size:13px}
.loan-notice-alert{border-color:var(--chart-red);background:color-mix(in srgb,var(--chart-red) 10%,transparent)}
.loan-metrics{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden}
.loan-metrics>div{padding:11px 13px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 -1px -1px 0;min-width:0}
.loan-metrics span{display:block;font-size:12px;color:var(--muted)}
.loan-metrics strong{display:block;font-size:18px;font-weight:550;margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.loan-metric-good strong{color:var(--loan-good)}
.loan-metric-warn strong{color:var(--loan-warn)}
.loan-housing{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:14px}
.loan-housing-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
.loan-housing-head strong{font-size:22px;font-variant-numeric:tabular-nums}
.loan-stack{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:10px 0;gap:2px}
.loan-stack i{flex:1 1 0;min-width:3px}
.loan-stack-0{background:var(--accent)}.loan-stack-1{background:var(--chart-blue)}.loan-stack-2{background:#5fc4b8}.loan-stack-3{background:var(--chart-gold)}.loan-stack-4{background:var(--chart-red)}
body.light .loan-stack-2{background:#11766c}
.loan-housing ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px 18px;font-size:13px;color:var(--muted)}
.loan-housing li{display:flex;align-items:center;gap:6px}
.loan-housing li b{margin-left:auto;color:var(--text);font-weight:550;font-variant-numeric:tabular-nums}
.loan-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.loan-share-bar{margin:16px 0 4px}
.loan-share-track{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--border)}
.loan-share-principal{background:var(--loan-principal)}.loan-share-interest{background:var(--loan-interest)}
.loan-share-bar p{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:13px;margin:6px 0 0}
.loan-key-principal::before,.loan-key-interest::before,.loan-legend span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.loan-key-principal::before{background:var(--loan-principal)}.loan-key-interest::before{background:var(--loan-interest)}
.loan-chart{margin-top:10px;min-height:220px}
.loan-chart svg{display:block;width:100%;height:auto;overflow:visible}
.loan-chart svg:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.loan-chart text{font:11px system-ui,sans-serif;fill:var(--muted)}
.loan-grid{stroke:var(--border);stroke-dasharray:2 4;stroke-width:1}
.loan-notch{stroke:var(--muted);stroke-opacity:.6}
.loan-area{fill:var(--accent);fill-opacity:.12;stroke:none}
.loan-line-balance{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.loan-line-base{fill:none;stroke:var(--muted);stroke-width:1.75;stroke-dasharray:6 5}
.loan-line-interest{fill:none;stroke:var(--loan-interest);stroke-width:2}
.loan-cursor{stroke:var(--muted);stroke-dasharray:3 3}
.loan-cursor-dot{fill:var(--panel);stroke:var(--accent);stroke-width:2.5}
.loan-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted);margin:8px 0 0}
.loan-legend[hidden]{display:none}
.loan-legend-balance::before{background:var(--accent)}
.loan-legend-base::before{background:repeating-linear-gradient(90deg,var(--muted) 0 4px,transparent 4px 7px);height:2px!important;vertical-align:3px!important}
.loan-legend-interest::before{background:var(--loan-interest)}
.loan-readout{min-height:20px;font-size:12px;margin:6px 0 0;font-variant-numeric:tabular-nums}
.loan-error{color:var(--chart-red);font-size:14px;margin:8px 0 0}
.loan-error:empty{display:none}
.loan-invalid .loan-headline,.loan-invalid .loan-metrics,.loan-invalid .loan-chart,.loan-invalid .loan-share-bar,.loan-invalid .loan-savings,.loan-invalid .loan-housing,.loan-invalid.loan-schedule .loan-table-wrap{opacity:.35}

/* Schedule */
.loan-schedule{margin-top:26px;border-top:1px solid var(--border);padding-top:20px}
.loan-schedule-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.loan-schedule-head h3{margin:0;font-size:18px;margin-right:auto}
.loan-view{display:inline-flex;border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;background:var(--bg)}
.loan-view button{border:0;background:transparent;border-radius:7px;min-height:30px;padding:5px 12px;color:var(--muted)}
.loan-view button[aria-pressed=true]{background:var(--accent);color:var(--bg);font-weight:600}
.loan-actions{display:flex;flex-wrap:wrap;gap:6px}
.loan-action-status{font-size:13px;margin:10px 0 0}
.loan-table-wrap{margin-top:12px;overflow:auto;max-height:min(640px,75vh);max-width:100%;border:1px solid var(--border);border-radius:12px;-webkit-overflow-scrolling:touch}
.loan-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.loan-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.loan-table caption{caption-side:top;text-align:left;padding:10px 12px 4px;font-size:12px;color:var(--muted)}
.loan-table th,.loan-table td{padding:7px 12px;border-bottom:1px solid var(--border);white-space:nowrap;text-align:left}
.loan-table thead th{position:sticky;top:0;background:var(--panel);font-size:12px;color:var(--muted);font-weight:600;z-index:1}
.loan-table .num{text-align:right}
.loan-table tbody th{font-weight:500;color:var(--muted)}
.loan-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.loan-table tfoot th,.loan-table tfoot td{font-weight:650;border-bottom:0;border-top:2px solid var(--border)}
.loan-row-balloon td{color:var(--loan-warn);font-weight:600}
.loan-tag{display:inline-block;font-size:10px;letter-spacing:.4px;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:0 6px;margin-left:6px;color:var(--muted)}
.loan-row-balloon .loan-tag{color:var(--loan-warn)}
.loan-empty{padding:18px 12px;color:var(--muted)}
.loan-show-all{display:block;margin:12px auto 0}
.loan-print-terms{display:none}

/* Share panel */
.loan-share{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:14px;padding:16px;border:1px solid var(--accent);border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.loan-share[hidden]{display:none}
.loan-share-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.loan-share-head h3{margin:0;font-size:16px}
.loan-close{width:34px;height:34px;padding:0;border-color:transparent;background:transparent;font-size:20px;color:var(--muted)}
.loan-share canvas{width:100%;height:auto;border-radius:10px;border:1px solid var(--border);display:block}
.loan-share-side{min-width:0}
.loan-share-side .loan-field{display:block;margin:12px 0 5px;font-size:13px}
.loan-share-side input{width:100%;max-width:none;font-size:13px;padding:8px 10px}
.loan-share-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

.loan-mobile-bar{display:none}

@media(max-width:980px){.loan-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:861px) and (max-width:980px){.loan-metrics{grid-template-columns:repeat(min(var(--cols,4),3),minmax(0,1fr))}}
@media(max-width:860px){
 .loan-layout{grid-template-columns:1fr;gap:18px}
 .loan-results{position:static}
 .loan-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .loan-controls section,.loan-special{margin:0}
}
@media(max-width:640px){
 .public-tool>.loan-calc{padding:16px 14px 90px}
 .loan-heading{margin-bottom:12px}
 .loan-controls{grid-template-columns:1fr}
 .loan-headline strong{font-size:38px}
 .loan-metrics strong{font-size:16px}
 .loan-share{grid-template-columns:1fr}
 .loan-schedule-head h3{flex-basis:100%}
 .loan-actions{width:100%}
 .loan-actions button{flex:1 1 auto}
 .loan-table th,.loan-table td{padding:6px 9px}
 .loan-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -4px 20px #0003;font-size:12px;color:var(--muted)}
 .loan-mobile-bar small{display:block;font-size:11px}
 .loan-mobile-bar strong{display:block;font-size:20px;color:var(--text);font-variant-numeric:tabular-nums}
}
@media(pointer:coarse){.loan-actions button,.loan-view button,.loan-share-actions button,.loan-show-all{min-height:44px}}

/* Print / Save as PDF: the terms, the summary and the full schedule. */
@media print{
 body,body.light{--bg:#fff;--panel:#fff;--text:#111;--muted:#444;--border:#bbb;--accent:#195fc8;--chart-gold:#906000;--chart-blue:#6e43bc;--chart-red:#b74332;background:#fff!important;color:#111}
 .loan-calc{--loan-good:#087046}
 body>header,.public-hero .public-lede,.public-hero .eyebrow,.ad-slot,.public-guide,.public-cross,.public-footer,.loan-controls,.loan-heading-actions,.loan-actions,.loan-view,.loan-share,.loan-show-all,.loan-mobile-bar,.loan-readout,.loan-action-status,.loan-cursor,.loan-cursor-dot,.loan-table caption,.public-feedback-panel,.public-feedback-status{display:none!important}
 .public-main{max-width:none;margin:0;padding:0}
 .public-hero{margin:0 0 6px}.public-hero h1{font-size:22px;letter-spacing:0;margin:0}
 .loan-calc{border:0;box-shadow:none;padding:0;margin:0;background:#fff}
 .loan-heading{display:none}
 .loan-layout{display:block}
 .loan-results{position:static}
 .loan-print-terms{display:block;margin:0 0 10px}
 .loan-print-terms h3{font-size:15px;margin:0 0 6px}
 .loan-print-terms dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px;margin:0;font-size:11px}
 .loan-print-terms dt{color:#555}.loan-print-terms dd{margin:0;font-weight:600}
 .loan-print-terms p{font-size:10px;margin:6px 0 0;color:#555}
 .loan-headline strong{font-size:28px}
 .loan-metrics{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
 .loan-chart{min-height:0;max-width:640px}
 .loan-schedule{border-top:1px solid #bbb;margin-top:10px;padding-top:8px;break-before:auto}
 .loan-schedule-head h3{font-size:14px}
 .loan-table-wrap{overflow:visible;border:0;max-height:none}
 .loan-table{font-size:10px}
 .loan-table th,.loan-table td{padding:2px 6px}
 .loan-table thead{display:table-header-group}
 .loan-table tfoot{display:table-row-group}
 .loan-chart,.loan-legend,.loan-housing,.loan-metrics,.loan-print-terms{break-inside:avoid}
 .loan-table thead th{position:static}
 .loan-table tr{break-inside:avoid}
 .loan-calc,.loan-calc *,.loan-calc *::before{print-color-adjust:exact;-webkit-print-color-adjust:exact}
 @page{margin:12mm}
}
/* Phones: the schedule keeps Date (or Year), Principal, Interest and Balance on screen. The row number or payment
   count, the payment (the same every time) and an all-$0 Extra column are left out; the CSV and PDF keep them. */
.loan-total-short{display:none}
@media(max-width:640px){
 .loan-table:not(.loan-yearly) :is(th,td):is(:nth-child(1),:nth-child(3)),.loan-table.loan-yearly :is(th,td):is(:nth-child(2),:nth-child(3)),.loan-table.loan-no-extra :is(th,td):nth-child(6){display:none}
 .loan-table:not(.loan-yearly) .loan-total-short{display:inline}
 .loan-table th,.loan-table td{padding:6px 6px;font-size:12px}
}
/* ▲ ▼ steppers beside a slider's field (as in Wealth-Calc): stacked and small on computers, side by side on touch screens. */
.loan-field:has(>.loan-arrows){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:center}
.loan-field:has(>.loan-arrows)>:not(.loan-input):not(.loan-arrows){grid-column:1/-1}
.loan-arrows{display:grid;gap:1px}
.loan-arrows button{margin:0;padding:1px 3px;min-width:20px;min-height:18px;line-height:12px;font-size:9px;border-radius:3px}
@media(max-width:800px),(any-pointer:coarse){.loan-arrows{display:flex;gap:4px}.loan-arrows button{min-width:30px;min-height:30px;line-height:18px;font-size:11px}}
/* Fields with our own ▲ ▼ buttons hide the browser's number arrows, so each shows one pair. */
.loan-field:has(.loan-arrows) input[type=number]{appearance:textfield;-moz-appearance:textfield}
.loan-field:has(.loan-arrows) input[type=number]::-webkit-inner-spin-button,.loan-field:has(.loan-arrows) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}