:root{
  --navy:#1f4068; --navy-dk:#173053; --accent:#2f80ed;
  --bg:#f4f6fa; --card:#fff; --line:#e5e9f0; --line-md:#d1d8e0;
  --text:#2c3e50; --head:#1f2d3d; --muted:#6b7785;
  --err:#e74c3c; --warn:#f39c12; --ok:#27ae60;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}
/* Wide enough that the destination columns show a full value without truncating and the
   derivation still reads as a sentence. Capped rather than full-bleed: a table running the
   width of a 32" monitor makes the eye travel further than the figures are worth. */
.wrap{max-width:1440px;margin:0 auto;padding:0 24px}
header{background:linear-gradient(180deg,var(--navy),var(--navy-dk));color:#fff;padding:16px 0;
  box-shadow:0 2px 6px rgba(15,30,60,.12)}
header .brand{font-weight:700;font-size:19px;letter-spacing:-.02em}
main{padding:28px 24px 40px}
footer{color:#8a93a0;font-size:12px;padding:0 24px 32px}
h1{font-size:24px;color:var(--head);margin:0 0 6px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:14px;margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:22px 24px;margin-bottom:22px;box-shadow:0 1px 2px rgba(15,30,60,.05)}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
label.inline{display:inline;font-weight:400;font-size:12px;cursor:pointer}
label.inline input{margin-right:5px;vertical-align:middle}
.hint{font-size:12px;color:var(--muted);margin:4px 0 0}
input[type=file],input[type=text],textarea{width:100%;padding:9px 11px;border:1px solid var(--line-md);
  border-radius:4px;font-size:14px;font-family:inherit;background:#fff;color:var(--text)}
input[type=checkbox]{width:auto;padding:0;border:0}
textarea{min-height:150px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.row{display:flex;gap:20px;flex-wrap:wrap}.row>div{flex:1 1 300px}
.field{margin-bottom:18px}
button{background:var(--navy);color:#fff;border:0;border-radius:4px;padding:10px 22px;
  font-size:14px;font-weight:600;cursor:pointer}
button:hover{background:var(--navy-dk)}
table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:#fff}
th{background:#fafbfd;color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-md)}
td{padding:10px 14px;border-top:1px solid var(--line);font-size:13.5px;vertical-align:top}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.Error{background:#fdecea;color:#a4271c}
.Warning{background:#fef3c7;color:#92400e}
.Info{background:#e8f0fe;color:#1a4fa0}
.clean{background:#e8f7ee;border:1px solid #b7e4c7;color:#1e7a45;padding:14px 18px;border-radius:8px}
.err{background:#fdecea;border:1px solid #f5c6c2;color:#a4271c;padding:14px 18px;border-radius:8px;
  white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  line-height:1.5;overflow-x:auto}
.meta{color:var(--muted);font-size:13px;margin:0 0 16px}
.meta b{color:var(--head)}
.trace{padding:16px 24px}
.trace summary{font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;outline:none}
.trace ol{margin:12px 0 0;padding-left:22px;color:var(--text);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7}
.trace li{padding-left:4px}

h2.panel{font-size:15px;color:var(--head);margin:0 0 4px;letter-spacing:-.01em}
td.key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:600;
  color:var(--head);user-select:all}
td.derive{font-size:12px;color:var(--muted)}
tr.off td{background:#fdf3f2}
tfoot td{border-top:2px solid var(--line-md);background:#fafbfd}
.hint.warn{color:#92400e;background:#fef8ec;border:1px solid #f5e2b8;border-radius:6px;
  padding:8px 12px;margin-top:10px}

select{width:100%;padding:9px 11px;border:1px solid var(--line-md);border-radius:4px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--text)}
.modes{display:flex;gap:14px;flex-wrap:wrap}
.mode{flex:1 1 260px;display:block;border:1px solid var(--line-md);border-radius:6px;
  padding:12px 14px;cursor:pointer;font-weight:400;margin:0;background:#fff}
.mode:hover{border-color:var(--accent)}
.mode:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 2px rgba(31,64,104,.12);background:#fbfcfe}
.mode input{width:auto;margin-right:8px;vertical-align:middle}
.mode-title{font-weight:600;font-size:14px;color:var(--head)}
.mode-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;margin-left:22px}
textarea.paste{min-height:120px}
.inline-file{width:auto;display:inline-block;padding:3px 6px;font-size:12px;vertical-align:middle}
details.advanced{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
details.advanced summary{font-size:12px;color:var(--muted);cursor:pointer;outline:none}
details.advanced textarea{margin-top:8px;min-height:120px}

.err.mismatch{font-family:inherit;font-size:14px}
.err.mismatch ul{margin:10px 0 8px;padding-left:20px}
.err.mismatch li{margin-bottom:5px}

/* Login / first-run: a single narrow card, centred, so the page reads as a door
   rather than as a form somebody forgot to finish. */
.login{max-width:420px;margin:56px auto}
.login h1{font-size:20px;margin:0 0 6px}
.login .sub{margin:0 0 18px}
.login code{background:#f4f6fa;border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
input[type=password]{width:100%;padding:9px 11px;border:1px solid var(--line-md);
  border-radius:4px;font-size:14px;font-family:inherit;background:#fff;color:var(--text)}
header .signout{float:right;color:rgba(255,255,255,.72);font-size:12px}
header .signout button{background:none;border:0;color:rgba(255,255,255,.72);
  font-size:12px;cursor:pointer;padding:0;font-weight:400;text-decoration:underline}
header .signout button:hover{color:#fff;background:none}

/* Scan panel: shown before anything is proposed, so it has to read as a report on the
   certificate rather than as an answer. Deliberately plainer than the proposal card. */
.actions{display:flex;gap:10px;align-items:center}
button.secondary{background:#fff;color:var(--navy);border:1px solid var(--line-md)}
button.secondary:hover{background:#f4f6fa}
#scanout{margin-top:18px}
.scan{border:1px solid var(--line-md);border-radius:8px;padding:18px 20px;background:#fbfcfe}
.scan h3{margin:0 0 4px;font-size:15px}
.scan .scanmeta{font-size:12px;color:var(--muted);margin:0 0 14px}
.scan table{margin-top:6px}
.scan .attention{background:#fff8e6;border:1px solid #f0d488;border-radius:6px;
  padding:10px 12px;margin:0 0 14px;font-size:13px}
.scan .allgood{background:#f0f8f2;border:1px solid #b9dfc4;border-radius:6px;
  padding:10px 12px;margin:0 0 14px;font-size:13px}
.scan input[type=text],.scan select{padding:5px 8px;font-size:12.5px;width:100%}
tr.needs td{background:#fffdf5}

/* The workings download sits with the figures it documents, not in a corner. */
.auditsave{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;gap:12px;align-items:flex-start}
.auditsave .hint{margin:0;flex:1}

/* The derivation of the booked payor figures - collapsed, because most runs nobody
   needs it and the run where somebody does is the run where they need all of it. */
.derivation{margin:14px 0 0;border:1px solid var(--line-md);border-radius:6px;
  background:#fff;padding:0}
.derivation>summary{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:600;
  list-style:none;color:#334155}
.derivation>summary::-webkit-details-marker{display:none}
.derivation>summary::before{content:"\25b8";display:inline-block;margin-right:8px;
  transition:transform .12s ease;color:var(--muted)}
.derivation[open]>summary::before{transform:rotate(90deg)}
.derivation[open]>summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.derivation table{margin:8px 12px;width:calc(100% - 24px);font-size:12.5px}
.derivation tfoot th{border-top:2px solid var(--line-md);font-weight:600}
.derivation .hint{margin:8px 12px}
.derivation p.hint:last-child{padding-bottom:10px}
.scan tfoot th{border-top:2px solid var(--line-md);font-weight:600;padding-top:7px;
  font-size:13px;color:var(--head);text-transform:none;letter-spacing:normal}
/* The note under the grand total is a sentence now - "less 7,000,000.00 not booked,
   plus 2,137,630.51 read from its own row" - and a sentence set in small caps is
   read as a label and skipped. */
.scan tfoot .foot-note{font-weight:400;font-size:12px;color:var(--muted);
  text-transform:none;letter-spacing:normal}

/* Collateral read from its own row - inventory, and on Virtus the A/R line as well.
   Rows in the table, not a footnote under it: a reader who cannot see the inventory
   in the same column as the receivables concludes it was not read at all. The rule
   above them closes off the payor columns and their subtotal. */
.scan tr.subtotal td{border-top:1px solid var(--line-md);font-weight:600;
  background:#f7f9fc;padding-top:7px}
.scan tr.subtotal .foot-note{font-weight:400;font-size:12px;color:var(--muted)}
.scan tr.directrow td{background:#fdfdfb}
.scan tr.directrow td:nth-child(3){font-size:12px;color:var(--muted)}

/* The add-a-borrower grouping column. Two columns booked as one line is typed here, so
   the box has to be wide enough to read "Medicare + Medicare Managed Care" without
   scrolling inside it - a name you cannot see is a name you cannot check. */
#payortable td:last-child,#payortable th:last-child{width:32%}
#payortable input.lineas{width:100%;padding:6px 8px;font-size:13px}
#linepreview{margin-top:14px}
#linepreview table{margin-top:6px}

/* The hand-off from step 1 to step 2. Saving used to empty the screen and say nothing
   about the half of the job still outstanding. */
.nextstep{border-left:4px solid var(--navy)}
a.btnlink{display:inline-block;margin-top:6px;padding:9px 14px;border-radius:4px;
  background:var(--navy);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600}
a.btnlink:hover{filter:brightness(1.12)}
#payortable select.groupwith{width:100%;padding:6px 8px;font-size:13px}
#payortable select.groupwith:disabled{background:#f4f6fa;color:var(--muted)}

/* Deleting a borrower. Destructive, so it never looks like the primary action and is
   never one click from a list. */
button.linkbtn{background:none;border:0;padding:0;color:#b42318;font-size:13px;
  font-weight:600;cursor:pointer;text-decoration:underline}
button.linkbtn:hover{color:#8a1811}
button.danger{background:#b42318}
button.danger:hover{background:#8a1811}

/* A mapping for a line the borrower no longer produces. Still shown, because it is still
   stored - but visibly not one of the live ones, with its own way out. */
tr.gone>td{background:#fafafa;color:var(--muted)}
tr.gone>td:first-child{font-style:italic}
td.rowaction{white-space:nowrap;text-align:right}

/* Numbered steps on the add-a-borrower screen. The whole page used to sit under one
   heading, which is legible to whoever built it and a wall to somebody seeing it for the
   first time. Big, numbered, and step 3 is visible - greyed - before it can be done, so
   the shape of the job is clear from the first screen. */
.step{display:flex;gap:15px;align-items:flex-start;margin:0 0 16px}
.stepnum{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;line-height:1}
.step h2{font-size:23px;line-height:1.2;margin:5px 0 3px;letter-spacing:-.015em;
  color:var(--head);font-weight:650}
.step .steplead{font-size:14px;color:var(--muted);margin:0;max-width:70ch}
.step.pending .stepnum{background:#cbd5e3}
.step.pending h2{color:#94a3b8}
.step.pending .steplead{color:#a9b4c4}
.stepsdone{margin:0 0 10px;font-size:12px;font-weight:600;color:#1a7f45;
  text-transform:uppercase;letter-spacing:.05em}
h3.stepsub{font-size:15px;color:var(--head);margin:22px 0 6px}

/* What step 2 is about to produce. This is the grid somebody checks against the
   certificate before committing, so it reads as a result rather than another input. */
.outcome{margin-top:20px;border:2px solid var(--navy);border-radius:8px;
  background:#fbfcfe;padding:14px 16px 16px}
.outcome>.hint:first-child{margin:0 0 10px;font-size:14.5px;color:var(--head)}
.outcome table{margin:0;background:#fff}
.outcome thead th{background:#eef2f8;color:var(--head)}
.outcome tbody td{font-size:14px;padding:10px}
.outcome tbody td:first-child{font-weight:600;color:var(--head)}
.outcome tbody td.num{font-size:15px;font-variant-numeric:tabular-nums}
.outcome tfoot th{border-top:2px solid var(--line-md);font-size:15px;font-weight:700;
  color:var(--head);text-transform:none;letter-spacing:normal;padding-top:10px}

/* Reference panels on the add-a-borrower screen - the other sheets, the aging tabs.
   Worth having, not worth reading every time, and open by default they read as two more
   steps between step 2 and step 3. */
details.foldaway{padding:0}
details.foldaway>summary{cursor:pointer;padding:15px 18px;font-size:15px;font-weight:600;
  color:var(--head);list-style:none}
details.foldaway>summary::-webkit-details-marker{display:none}
details.foldaway>summary::before{content:"\25b8";display:inline-block;margin-right:9px;
  color:var(--muted);transition:transform .12s ease}
details.foldaway[open]>summary::before{transform:rotate(90deg)}
details.foldaway[open]>summary{border-bottom:1px solid var(--line)}
details.foldaway>*:not(summary){margin-left:18px;margin-right:18px}
details.foldaway>table{width:calc(100% - 36px)}
details.foldaway>*:last-child{margin-bottom:16px}

/* A fold inside a card rather than being the card itself. */
details.foldaway.plain{border:1px solid var(--line);border-radius:6px;background:#fff;
  margin:0 0 12px}
details.foldaway.plain>summary{padding:9px 12px;font-size:13px;font-weight:600;
  color:var(--muted)}
details.foldaway.plain>*:not(summary){margin-left:12px;margin-right:12px}
details.foldaway.plain>table{width:calc(100% - 24px);margin-bottom:12px}
/* It has to look like something you can click. A caret alone did not read as one. */
details.foldaway.plain>summary:hover{background:#f4f6fa}
details.foldaway.plain>summary::before{font-size:14px;color:var(--navy)}
.foldcue{color:var(--navy);text-decoration:underline}
.foldcue::after{content:"Show"}
details[open] .foldcue::after{content:"Hide"}

/* A section heading with no number - same weight as a step, used where the page is not
   part of a numbered flow. */
.step>div:only-child h2{margin-top:0}
/* Payors nothing has classified yet - the chore, moved here from the loan system. */
.unclassified{margin:16px 0 0;border:1px solid #f0d488;border-radius:8px;background:#fffdf7;
  padding:14px 16px}
.unclassified h4{margin:0 0 2px;font-size:13.5px;color:#7a5c12}
.unclassified table{margin-top:10px;font-size:12.5px;table-layout:fixed;width:100%}
.unclassified td,.unclassified th{vertical-align:top}
.unclassified td.why{font-size:11.5px;color:var(--muted);line-height:1.45}
.unclassified .sub{font-size:11.5px;color:var(--muted)}
.unclassified select.accept{width:100%;padding:5px 6px;font-size:12px}
.unclassified .conf{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;padding:1px 6px;border-radius:3px}
.unclassified .cHigh{background:#e3f3e8;color:#215c33}
.unclassified .cMedium{background:#fdf0d8;color:#7a5c12}
.unclassified .cLow,.unclassified .cNone{background:#eceff3;color:#4a5568}
.unclassified .savebar{display:flex;align-items:center;gap:12px;margin-top:12px}
.unclassified .savebar .hint{margin:0}

/* The classification table has nine columns and the one that matters most is the reason.
   Left to itself the browser gives 'Why' whatever is left over - about eight characters -
   and the evidence somebody is meant to read before accepting becomes a vertical ribbon.
   Fixed layout, and the reason gets the room. */
table.maptable{table-layout:fixed;width:100%;font-size:12px}
table.maptable th,table.maptable td{vertical-align:top;padding:7px 8px}
/* Only BODY cells may break inside a word - a long payor name has to go somewhere. Applying
   it to headers turned 'BALANCE' into 'BALANC E' and 'CONFIDENCE' into 'CONF IDEN CE'. */
table.maptable td{overflow-wrap:anywhere}
table.maptable th{white-space:nowrap}
table.maptable td .badge{white-space:nowrap}
/* Widths by COLUMN ROLE, not by position. The accept column only appears when there is
   somewhere to save a decision, so a position-based rule silently mis-sizes every column
   on the runs that lack it - which is how 'STATE' and 'BALANCE' ended up overlapping. */
table.maptable .c-payor{width:18%}
table.maptable .c-class{width:9%}
table.maptable .c-state{width:6%}
table.maptable .c-amount{width:9%}
table.maptable .c-line{width:13%}
table.maptable .c-group{width:12%}
table.maptable .c-conf{width:9%}
table.maptable .c-why{width:24%}
table.maptable .c-accept{width:13%}
table.maptable td.derive{font-size:11.5px;line-height:1.5;color:var(--muted)}
table.maptable select{width:100%;padding:5px 6px;font-size:11.5px}

/* Same treatment for the scan's copy - its 'Why' was competing with a wide payor name. */
.unclassified table th:nth-child(1),.unclassified table td:nth-child(1){width:20%}
.unclassified table th:nth-child(2),.unclassified table td:nth-child(2){width:11%}
.unclassified table th:nth-child(3),.unclassified table td:nth-child(3){width:10%}
.unclassified table th:nth-child(4),.unclassified table td:nth-child(4){width:16%}
.unclassified table th:nth-child(5),.unclassified table td:nth-child(5){width:27%}
.unclassified table th:nth-child(6),.unclassified table td:nth-child(6){width:16%}

/* The whole classification list - collapsed, filterable, and scrollable rather than
   500 rows pushing everything else off the page. */
.maplist>summary{font-size:13px;font-weight:600}
.maplist #mapfilter{width:100%;max-width:340px;padding:6px 9px;font-size:12.5px;margin:8px 0 4px}
.maplist-table{font-size:12px;display:block;max-height:420px;overflow-y:auto;width:100%}
.maplist-table thead th{position:sticky;top:0;background:#fff;z-index:1}
.maplist-table td.src{font-size:11px;color:var(--muted)}

/* Standalone classification editor. */
/* Nav sits on the navy header, so it takes the header's palette. It was originally given
   the body's slate (#5b6b80 on hover #1f2937) - dark text on a dark bar, which is why it
   read as barely there. */
header nav{margin-left:26px;display:inline-flex;gap:4px;vertical-align:middle}
header nav a{font-size:13px;color:rgba(255,255,255,.72);text-decoration:none;
  padding:5px 11px;border-radius:5px;transition:background .12s ease,color .12s ease}
header nav a:hover{color:#fff;background:rgba(255,255,255,.10);text-decoration:none}
/* The page you are on, said plainly rather than left to be inferred from the heading. */
header nav a.on{color:#fff;background:rgba(255,255,255,.16);font-weight:600}
.ok{background:#f0f8f2;border:1px solid #b9dfc4;border-radius:6px;padding:10px 13px;
  font-size:13px;color:#215c33;margin-bottom:14px}
.maptools{display:flex;align-items:center;gap:16px;margin:10px 0 4px}
.maptools #filter{width:320px;padding:6px 9px;font-size:12.5px}
table.editmap{table-layout:fixed;width:100%;font-size:12px;display:block;
  max-height:600px;overflow-y:auto}
table.editmap thead th{position:sticky;top:0;background:#fff;z-index:1;white-space:nowrap}
table.editmap td,table.editmap th{vertical-align:top;padding:5px 7px}
table.editmap td{overflow-wrap:anywhere}
/* All nine columns in one place and summing to 100. A rating column was added in August
   and the two px-width rules that used to live further down were then fighting these
   percentages for the same space, which squeezed the rating select down to three
   characters. Percentages only, and they add up. */
table.editmap .c-payor{width:21%}
table.editmap .c-class{width:8%}
table.editmap .c-state{width:5%}
table.editmap .c-rating{width:9%}
table.editmap .c-type{width:10%}
table.editmap .c-group{width:15%}
table.editmap .c-line{width:18%}
table.editmap .c-src{width:10%}
table.editmap .c-del{width:4%}
table.editmap input[type=text]{width:100%;padding:4px 6px;font-size:12px}
table.editmap td.src{font-size:10.5px;color:var(--muted);line-height:1.35}
table.editmap td.src .when{font-size:10px}
table.editmap td.del{text-align:center}
/* An edited row is marked before it is saved, so "save" is never a leap of faith. */
table.editmap tr.edited{background:#fffbef}
table.editmap tr.edited input[type=text]{border-color:#e0b93c;background:#fffdf6}
table.editmap tr.newrow input{background:#fbfcfe}
.savebar{display:flex;align-items:center;gap:14px;margin-top:14px}
.savebar .hint{margin:0}
table.editmap select{width:100%;padding:4px 6px;font-size:12px}
table.editmap input.typed{margin-top:4px}
table.editmap tr.edited select{border-color:#e0b93c;background:#fffdf6}
.persistbar{display:flex;align-items:center;gap:14px;margin:10px 0 4px;
  background:#fff8e6;border:1px solid #f0d488;border-radius:6px;padding:10px 12px}
.persistbar .hint{margin:0}

/* Collateral splits. */
.split{margin:16px 0;padding:14px 16px;border-radius:8px;border:1px solid var(--line-md)}
.split.handkept{background:#fffdf7;border-color:#f0d488}
.split.derived{background:#fbfcfe}
.split h3{margin:0 0 2px;font-size:14px;display:flex;align-items:center;gap:10px}
.splittable{margin-top:10px;width:100%;max-width:760px;font-size:12.5px}
.splittable input.pct{width:92px;text-align:right;padding:4px 6px;font-size:12.5px}
.splittable .pctsign{margin-left:4px;color:var(--muted)}
.splittable tfoot th{border-top:2px solid var(--line-md)}
.splittable tr.unused td{color:var(--muted)}
.splittable tr.unused .sub{font-size:11px;margin-left:6px}
.runningtotal.off{color:#92400e;font-weight:700}
.portbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 4px;
  padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fbfcfe}
.portbar .importform{display:flex;align-items:center;gap:8px;margin:0}
.portbar .hint{margin:0;flex:1;min-width:260px}
a.button{display:inline-block;text-decoration:none;padding:7px 13px;border-radius:6px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line-md);color:#334155;background:#fff}
a.button:hover{background:#f4f7fb}
.split .revertbar{margin:8px 0 2px;padding:7px 10px;border-radius:5px;background:#fff4f4;
  border:1px solid #e9bcbc;font-size:12.5px;color:#7f1d1d}
.split .whybox{margin:9px 0 4px;display:block}
.split .whybox label{display:block;margin-bottom:3px}
.split .whybox input{display:block;width:100%;max-width:660px}
.split .whybox .hint{display:block;margin:4px 0 0;max-width:660px}
.editmap tr.grouphead th{background:#f2f5fa;border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.06em;color:#7b8798;padding:7px 10px 5px}
.editmap tr.grouphead th.c-dest{border-left:1px solid var(--line-md);
  border-right:1px solid var(--line-md);color:var(--navy)}
.splittable td.sub,.splittable th.sub{color:var(--muted);font-weight:400}
/* Destination columns. Narrow enough that the amount stays the thing the eye lands on,
   wide enough that "Non Rated Comm. Payors - Multi" is readable without a tooltip. */
/* The last destination field is the one that names the line, so it gets the room. The
   derivation column is capped rather than left greedy - it is the longest text on the row
   and would otherwise squeeze the three columns somebody has to read a value out of. */
/* The grouping row: quieter than the column headings under it, so it reads as a label
   over a region rather than as another row of headings competing with them. */
.proposal tr.grouphead th{background:#f2f5fa;border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.06em;color:#7b8798;padding:7px 14px 5px}
.proposal tr.grouphead th.c-dest{border-left:1px solid var(--line-md);
  border-right:1px solid var(--line-md);color:var(--navy)}
/* The bracketed half names the source. Lighter and not uppercased, so the eye reads the
   heading first and the provenance second rather than tripping over one long shout. */
tr.grouphead th span{text-transform:none;letter-spacing:0;font-weight:400;color:#8a94a3}
tr.grouphead th.c-src{color:#4a5a70}
/* The borrower's own columns are tinted so the two halves of the table are separable at a
   glance. Faint on purpose: it should register as "these belong together", not as a
   highlight demanding attention - the warm tint on a row still needing work has to stay the
   loudest thing on screen, which is why the needs rule follows this one. */
.proposal td.c-own,.editmap td.c-own{background:#f3f7fb}
.proposal th.c-own,.editmap th.c-own,tr.grouphead th.c-src{background:#e9f0f8}
.proposal tfoot td.c-own{background:#e9f0f8}
tr.needs>td,tr.needs>td.c-own{background:#fffaf2}
tr.edited>td,tr.edited>td.c-own{background:#f2f8f4}
.proposal th.c-dest,.proposal td.c-dest{width:206px}
.proposal th.c-dest-last,.proposal td.c-dest-last{width:246px}
.proposal td.derive{max-width:430px}
select.dest{width:100%;font-size:12px;padding:4px 5px}
tr.needs>td{background:#fffaf2}
.splittable td.differs{color:#92400e;font-weight:600}
.badge.Error{background:#fdecec;color:#7f1d1d}

/* What the classification screen is actually FOR, stated above the grid.
   Deliberately not a warning colour: nothing is wrong, and a yellow panel would make an
   orientation note read as an exception. Left rule and a bold first line so it is read
   before the eye reaches five hundred rows and draws its own conclusion. */
.jobnote{background:#f4f8fd;border:1px solid #cfe0f2;border-left:4px solid var(--accent);
  border-radius:6px;padding:14px 16px;margin:16px 0 14px}
.jobnote p{margin:0 0 8px;font-size:13px;color:var(--text);line-height:1.55}
.jobnote p:last-child{margin-bottom:0}
.jobnote p.lead{font-size:15.5px;font-weight:700;color:var(--head);margin-bottom:9px}

/* The rating sits with the payor, not with the destination fields - it is a fact about who
   the payor is, not a decision about where this deal books them. Narrow: every value is a
   short code and a wide column would push the destination selects off a laptop screen. */
.editmap select.rate{width:100%;font-size:12px;padding:4px 5px}

/* What "download both files" actually gets you, named one per row.

   The first version of this was a paragraph, and it read as a wall - the two files, what
   each is for, the browser caveat and two alternative links all in one run of prose. A
   person about to click a button wants to know what lands on their disk, so the filenames
   lead and everything else is subordinate to them. */
.dlwhat{flex:1;margin:0}
.dlrow{display:grid;grid-template-columns:minmax(230px,330px) 1fr;gap:16px;
  padding:8px 0;border-top:1px solid var(--line);align-items:baseline}
.dlrow:first-child{border-top:none;padding-top:0}
.dlname{font-size:12px;font-weight:600;color:var(--head);word-break:break-word}
.dldesc{font-size:12px;color:var(--muted);line-height:1.55}
.dlfrom{display:block;font-size:11px;color:var(--muted);opacity:.8;margin-top:2px}
.dlnote{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.55;
  border-top:1px solid var(--line);padding-top:9px}
.dlnote .sep{margin:0 6px;color:var(--line-md)}
button.plainlink{background:none;border:0;padding:0;font-size:11.5px;font-weight:600;
  color:var(--accent);cursor:pointer;text-decoration:underline;font-family:inherit}
button.plainlink:hover{color:var(--navy)}
@media (max-width:820px){.dlrow{grid-template-columns:1fr;gap:2px}}

/* Run is the point of this screen. Both buttons were the same size, which left a first-time
   user reading two equal options and picking whichever was on the left. Scan stays first
   because that is the order somebody actually works in - look, then commit - but Run is now
   plainly the larger of the two. */
.actions{gap:14px}
.actions button.go{font-size:16px;padding:13px 34px;
  box-shadow:0 1px 3px rgba(31,64,104,.28)}
.actions button.go:hover{box-shadow:0 2px 5px rgba(31,64,104,.34)}

/* One proposed split on the Collateral splits screen. Several stack up, and without a rule
   between them they read as one long undifferentiated list.

   NOT .proposal - that is already the run screen's proposal table, and a bare rule on it
   would put a border across the middle of a working page. */
.splitproposal{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.splitproposal:first-of-type{border-top:0;padding-top:0;margin-top:12px}
.splitproposal .stepsub{margin-bottom:6px}
.warnline{color:#8a5a00;background:#fffbeb;border:1px solid #f0d190;border-radius:5px;
  padding:8px 11px;font-size:13px;margin:8px 0}
ul.plain{margin:6px 0 0 18px;font-size:12.5px;color:var(--muted);line-height:1.7}

/* The wizard's finish panel now carries two numbered steps rather than one plus a footnote.
   The rule separates them so step 4 reads as the next thing, not more of step 3. */
.nextstep .nexthead{margin:-4px 0 18px}
.nextstep .nextstepgap{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

/* Said while the name can still be fixed in a keystroke, rather than after save.
   NOT .err - that is the page-level banner, and sharing the class means any selector for one
   also finds the other. */
.fieldwarn{margin:6px 0 0;font-size:12.5px;color:#a12622;font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}

/* The lesser of the two ways onward after a split is accepted. */
.splitnextalt{margin-top:12px}

/* Renaming a borrower in place in the list, rather than on a screen of its own. */
.renamebox{display:flex;align-items:center;gap:8px}
.renamebox input[type=text]{flex:1;min-width:180px;padding:5px 8px;font-size:14px}
.renamebox button{padding:5px 12px;font-size:13px}

/* The note under a payor column - why it is not ticked. Its own line, and empty when the
   column carries money, so the script can rewrite it as the booked line changes. */
.payorhint{display:block}

/* Splitting a line by hand, where nothing can compute it. */
.handsplitrow{display:flex;align-items:center;gap:12px;margin:14px 0}
.handsplitrow label{min-width:170px;font-weight:600;font-size:13.5px}
.handsplitrow select,.handsplitrow input[type=text]{flex:1;padding:6px 8px;font-size:14px}
.handsplit select{width:100%;padding:5px 8px}
.handsplit input.pct{width:90px;text-align:right}

/* The payor-column subtotal inside the line preview, where a borrower also books a line
   read from a row. It is the figure that ties to the booked line; the foot is everything. */
.subtotalrow td{border-top:1px solid #d7dde5;font-weight:600}

/* Rebuilding a payor split for a booked line that has none. */
#reservepanel .field{margin:12px 0}
#reservepanel select{min-width:340px;padding:6px 8px}
#reserverows td{padding:5px 8px}
#reservecheck{margin-top:10px}
#reservecheck.off{color:#92400e;font-weight:600}

/* The two file boxes on "Add a split to a line" - the certificate, and the extract where the
   certificate does not carry the detail. Labelled rather than left as two bare file inputs,
   because an unlabelled pair invites putting the certificate in both. */
.filelabel{min-width:210px;font-weight:600;font-size:13.5px}
.cv2row{display:flex;align-items:center;gap:12px;margin:12px 0}

/* The alternative naming for a proposed split - onto another split's lines. Boxed so it reads
   as a second choice beside the first, and tinted when it is the one that lands somewhere real. */
.foldoffer{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:14px 0}
.foldoffer.preferred{border-color:#9bbf9b;background:#f4faf4}
.foldoffer p{margin:0 0 8px}

/* A radio with its label on one line, used where a form asks a yes/no about the files. */
label.radio { display: inline-flex; align-items: center; gap: .5rem; font-weight: normal; cursor: pointer; }

/* Payor review: the yes/no list behind a split by rating. */
.payorreview{max-width:none;width:100%}
.payorreview th:nth-child(1){width:30%}
.payorreview th:nth-child(2){width:13%}
.payorreview th:nth-child(3){width:5%}
.payorreview th:nth-child(4){width:15%}
.payorreview td.why{font-size:11.5px;color:var(--muted)}
.payorreview td.verdict{white-space:nowrap}
.payorreview td.verdict label.radio{margin-right:12px}
.payorreview tr.basis-suggested td{background:#f3f8ff}
.payorreview tr.basis-decided td{background:#f6fbf7}
.payorreview tr.edited td{background:#fffdf5}

/* A card that opens on demand - the by-hand split, which almost no loan needs. */
details.card > summary.panel{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details.card > summary.panel::before{content:"\25B8";font-size:12px;color:var(--muted)}
details.card[open] > summary.panel::before{content:"\25BE"}
details.card > summary.panel::-webkit-details-marker{display:none}
tr.payorhead td{background:#f3f6fa;padding-top:8px}
tr.payorsub td{border-bottom:2px solid #e3e8ef}
input.newtext{display:block;margin-top:6px;width:100%;max-width:260px;padding:5px 8px;font-size:12.5px}

/* ---- one loan, in the header; the tabs work on it. See LoanContext. ---- */
header .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header .loanpick{display:inline-flex;align-items:center;gap:8px;margin-left:8px}
header .loanpick label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.62)}
header .loanpick select{font-size:14px;font-weight:600;padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;min-width:240px}
header .loanpick select option{color:#1b2432}
header nav.tabs{margin-left:6px}
header .rightnav{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:12px}
header .rightnav a{color:rgba(255,255,255,.85);text-decoration:none;padding:5px 11px;border-radius:5px;border:1px solid rgba(255,255,255,.28)}
header .rightnav a:hover,header .rightnav a.on{background:rgba(255,255,255,.16);color:#fff}
header .rightnav button{background:none;border:0;color:rgba(255,255,255,.72);cursor:pointer;font-size:12px}
header .rightnav button:hover{color:#fff;background:none}

/* Save buttons under a long grid were off the bottom of the screen; the bar now stays in
   view while the grid scrolls under it. */
.savebar.sticky{position:sticky;bottom:0;background:#fff;padding:12px 0;margin-top:0;border-top:1px solid #e3e8ef;z-index:5}

/* Folded setup the daily run never needs. */
details.advanced > summary{cursor:pointer;color:var(--navy);font-weight:600;font-size:14px;padding:6px 0}

/* The loan a screen is on, after its title. The header picker says it too; this is for the
   eye that goes to the heading first. */
h1 .forloan{font-weight:400;color:var(--muted);font-size:.72em}
/* A fold used as a card: the summary line is the whole card until it is opened. */
details.card.foldaway>summary{padding:14px 18px}
details.card.foldaway>summary b{color:var(--head)}

/* Room between the header and the page title; the title was sitting on the header's shadow. */
main.wrap{padding-top:36px}
h1{margin-bottom:8px}

/* The date box, styled like the other inputs instead of the browser's bare default. */
input[type=date]{width:100%;padding:8px 11px;border:1px solid var(--line-md);border-radius:4px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--text);min-height:40px;box-sizing:border-box}
input[type=date]:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,92,.12)}
.row>div.field.narrow{flex:0 0 220px}
header a.brand{color:#fff;text-decoration:none}
/* The way out of a form that is not wanted after all - next to the button that commits it. */
a.cancel{margin-left:14px;font-size:13px;color:var(--muted)}
/* A column the certificate has grown: where it goes, decided on the check. A panel of its
   own, because it is the one thing on the page that needs an answer before the total is right. */
.newcol{border:1px solid #f0d488;border-left:4px solid #d99a12;background:#fffbeb;border-radius:8px;
  padding:16px 20px;margin:16px 0}
.newcol-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.newcol-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a5a00;
  background:#fde9b8;border-radius:4px;padding:2px 7px}
.newcol-name{font-size:17px;font-weight:700;color:var(--head)}
.newcol-amt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;color:var(--head);margin-left:auto}
.newcol-why{margin:6px 0 12px;font-size:13px;color:var(--muted)}
.newcol-opts{display:flex;flex-direction:column;gap:8px}
.newcol-opt{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:var(--text);
  cursor:pointer;margin:0;padding:8px 12px;border:1px solid transparent;border-radius:6px;background:#fff}
.newcol-opt:hover{border-color:#e3c979}
.newcol-opt:has(input:checked){border-color:#d99a12;box-shadow:0 0 0 2px rgba(217,154,18,.15)}
.newcol-opt input[type=radio]{margin:0}
.newcol-opt span{min-width:150px}
.newcol-opt select{width:auto;min-width:280px;max-width:520px;padding:6px 9px;font-size:13.5px}
.newcol-opt input[type=text]{width:280px;padding:6px 9px;font-size:13.5px}
.newcol-act{display:flex;align-items:center;gap:12px;margin-top:4px}
.newcols{margin:16px 0}
.newcols .newcol{margin:0 0 10px}
/* A certificate column on the line that reads it, with its "take off" cross. */
.colchip{display:inline-flex;align-items:center;gap:4px;background:#f1f4f8;border:1px solid var(--line);
  border-radius:12px;padding:2px 8px 2px 10px;margin:2px 6px 2px 0;font-size:12.5px}
.colchip .linkbtn{font-size:14px;line-height:1;padding:0 2px;color:var(--muted);text-decoration:none}
.colchip .linkbtn:hover{color:#a12622}
/* Renaming a line in place on the Certificate-columns card. */
details.renameline>summary{cursor:pointer;list-style:none}
details.renameline>summary::-webkit-details-marker{display:none}
details.renameline>summary .sub{font-size:11px;color:var(--navy);text-decoration:underline;margin-left:6px;opacity:0}
details.renameline>summary:hover .sub{opacity:1}
details.renameline[open]>summary .sub{display:none}
details.renameline .renamebox{display:flex;gap:8px;margin-top:6px}
details.renameline .renamebox input[type=text]{width:260px;padding:5px 8px;font-size:13px}