.loan-editor{min-width:0;max-width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card2);margin:8px 0}
.loan-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);margin:12px 0}
.loan-check input{width:18px;height:18px;flex:0 0 18px}
.loan-note{font-size:12px;line-height:1.6;margin:9px 0}
.loan-advanced{margin:12px 0}.loan-editor summary{cursor:pointer;font-weight:700;padding:8px 0}
.loan-editor select,.loan-editor textarea{width:100%;max-width:100%;box-sizing:border-box}.loan-editor textarea{font:inherit;font-size:12px;resize:vertical}
.loan-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.loan-actions button{min-height:44px;white-space:normal}
.loan-summary{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.loan-summary span{display:block;font-size:11px;color:var(--muted);line-height:1.5}.loan-summary strong{display:block;font-size:14px;margin-top:5px;overflow-wrap:anywhere}
.loan-error{color:var(--red-ink);font-size:13px;line-height:1.6}.loan-error:empty{display:none}
.loan-table-wrap{overflow:auto;max-height:420px;overscroll-behavior:contain}.loan-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.loan-edit-row{margin:12px 0;padding:10px;border:1px solid var(--border);border-radius:10px;min-width:0}.loan-edit-row legend{font-size:12px;font-weight:700;padding:0 5px}
.loan-row-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.loan-row-fields input{min-width:0;width:100%;box-sizing:border-box}.loan-edit-row button{margin-top:8px;min-height:40px}
@media(max-width:600px){.loan-row-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.loan-summary{grid-template-columns:1fr}.loan-summary>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.loan-summary strong{margin:0}.loan-editor{padding:10px}.loan-editor .row2{grid-template-columns:1fr}}
/* two classes: the app's .linkbtn rule loads later and would otherwise make this inline-block, collapsing the icon box */
.loan-guide-wrap .loan-guide-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;font-size:13px;font-weight:600;text-align:left}.loan-guide-wrap .loan-guide-link .ic{display:inline-block;width:16px;height:16px;flex:0 0 16px}
.loan-guide{border:1px solid var(--accent);border-radius:14px;padding:12px 14px;background:var(--card2)}.loan-guide-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.loan-guide-h .linkbtn{min-height:44px}
.loan-guide-title{font-size:15px;line-height:1.4;margin:4px 0 2px}.loan-guide .loan-actions{margin:8px 0 0}
.loan-date-read{font-size:12px;line-height:1.5;margin-top:4px;color:var(--muted)}.loan-date-read:empty{display:none}
.loan-field-error{color:var(--red-ink);font-size:12.5px;line-height:1.5;margin-top:4px}.loan-invalid{border-color:var(--red-ink)!important}
.loan-review{font-size:13.5px;margin-top:0}
/* The preview picks list or table from its own width (the form sheet is narrow even on a computer), never the screen's. */
#lsPreview{container-type:inline-size}
.loan-list{display:none;list-style:none;margin:14px 0;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--card);max-height:420px;overflow:auto;overscroll-behavior:contain}.loan-list:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.loan-list li{padding:10px 12px;border-top:1px solid var(--border)}.loan-list li:first-child{border-top:0}
.loan-list-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}.loan-list-top strong:last-child{white-space:nowrap}
.loan-list-note{font-size:12.5px;color:var(--muted);margin-top:2px}.loan-list-final .loan-list-note{color:var(--text);font-weight:600}
.loan-list-split{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
@container (max-width:620px){#lsPreview .loan-table-wrap{display:none}#lsPreview .loan-list{display:block}}
/* Row fields follow the rows' own width, not the screen's: the sheet stays narrow on a computer, and three columns
   there cut the date box's own date off ("05/20/2..."). */
#lsRows{container-type:inline-size}
@container (max-width:520px){.loan-row-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* each figure stays whole ("Balance after $6,150.25" never splits); the dot is decoration, so screen readers skip it */
.loan-list-split span{white-space:nowrap}.loan-list-split span+span::before,.loan-list-note span+span::before{content:"·"/"";margin:0 6px 0 2px}
/* A saved loan's payment table switches the same way, by its own width. The next payment to make stands out. */
#amortBody{container-type:inline-size}
@container (max-width:620px){#amortBody .loan-table-wrap{display:none}#amortBody .loan-list{display:block}}
.loan-list-next{box-shadow:inset 3px 0 0 var(--accent)}.loan-list-next .loan-list-state{color:var(--accent);font-weight:700}