/* An element the code has hidden stays hidden.
 *
 * The browser's own `[hidden] { display: none }` comes from the user-agent stylesheet, so ANY
 * rule here that sets `display` on the same element beats it — `.filters{display:flex}` kept
 * `#mon-book-filters` on screen after the code had hidden it, leaving a borrower-book filter
 * sitting under a chosen borrower with nothing left to filter. This had already been patched
 * one element at a time, six times over (`.modal`, `.auth-screen`, `.auth-card`, `.auth-error`,
 * `.doc-dropdown`, `.doc-paging`, `#mf-fixed-note`); those are kept, but this is the rule that
 * makes `element.hidden = true` mean what it says everywhere.
 */
[hidden]{display:none!important}

/* ---- Extraction modal + "terms on a date" panel ---------------------------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.55);backdrop-filter:blur(3px);padding:24px}
/**
 * The prompt a modal opens on top of itself sits ABOVE the modal that opened it.
 *
 * Every `.modal` shared one z-index, so two open at once were stacked by document order — and
 * `#ask-modal` is declared before `#assess-modal` in the markup. Pressing "Send back for
 * correction" from inside the assess pane therefore opened the reason form BEHIND the pane the
 * reader was looking at: the click landed, the dialog opened, and nothing appeared to happen.
 *
 * `#ask-modal` is only ever a secondary prompt raised from another screen — asking for a reason,
 * a figure, a date — so it belongs above all of them. Kept below `.auth-screen` (80): being
 * signed out must still cover everything.
 */
#ask-modal{z-index:70}
/* On a short screen the 24px inset is worth more than the extra 12% of height, so the cap is
   whichever is smaller. Without this a laptop at 700px tall loses the footer to the fold. */
@media (max-height:760px){
  .modal{padding:12px}
  .modal-card{max-height:calc(100vh - 24px)}
}
.modal[hidden]{display:none!important}
.modal-card{background:#fff;border-radius:14px;width:min(1080px,100%);max-height:88vh;display:flex;
  flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.28);overflow:hidden}
.modal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 16px;border-bottom:1px solid #e8edf3;flex:none}
.modal-card h2{margin:0;font-size:17px;color:#0f172a}
.modal-card header p{margin:5px 0 0;font-size:12.5px;color:#64748b}
.modal-close{border:0;background:#f1f5f9;color:#475569;width:30px;height:30px;border-radius:8px;
  font-size:17px;line-height:1;cursor:pointer;flex:none}
.modal-close:hover{background:#e2e8f0}
.tabs{display:flex;gap:4px;padding:12px 24px 0;border-bottom:1px solid #e8edf3;background:#fbfcfe}
.tabs button{border:0;background:transparent;padding:9px 14px;font-size:13px;color:#64748b;cursor:pointer;
  border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;font-weight:500}
.tabs button:hover{color:#0f172a}
.tabs button.active{color:#0f766e;border-bottom-color:#0f766e}
.tabs button span{background:#e2e8f0;color:#475569;border-radius:20px;padding:1px 8px;font-size:11px;font-weight:600}
.tabs button.active span{background:#ccfbf1;color:#0f766e}
.modal-body{overflow:auto;padding:0;flex:1;min-height:200px}
.ctable{width:100%;border-collapse:collapse;font-size:12.5px}
.ctable thead th{position:sticky;top:0;background:#f8fafc;text-align:left;padding:10px 14px;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#64748b;border-bottom:1px solid #e8edf3;z-index:1}
.ctable td{padding:11px 14px;border-bottom:1px solid #f1f5f9;vertical-align:top;color:#334155;line-height:1.5}
.ctable tbody tr:hover{background:#fbfdff}
.ctable td.num{color:#94a3b8;width:34px;text-align:right;font-variant-numeric:tabular-nums}
.ctable .clause-text{max-width:520px}
.ctable .name{font-weight:600;color:#0f172a}
.pill{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pill.FIGURE{background:#e0f2fe;color:#0369a1}.pill.DOCUMENT{background:#ede9fe;color:#6d28d9}
.pill.YES_NO{background:#fef3c7;color:#b45309}.pill.EVENT{background:#fee2e2;color:#b91c1c}
.pill.REVIEW{background:#e2e8f0;color:#475569}
.pill.scope{background:#f1f5f9;color:#475569}
.pill.reason{background:#fff7ed;color:#9a3412}
.score{font-variant-numeric:tabular-nums;font-weight:600;color:#0f766e;white-space:nowrap}
.score.low{color:#b45309}
.modal-card>footer{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 24px;border-top:1px solid #e8edf3;background:#fbfcfe;flex:none}
.modal-card>footer .hint{font-size:12px;color:#64748b}
.modal-empty{padding:46px 24px;text-align:center;color:#94a3b8;font-size:13px}
.result-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.result-summary div{flex:1;min-width:110px;background:#f8fafc;border:1px solid #e8edf3;border-radius:10px;padding:11px 13px}
.result-summary strong{display:block;font-size:19px;color:#0f172a;line-height:1.2}
.result-summary span{font-size:11px;color:#64748b}
.link-button{background:none;border:0;color:#0f766e;font-size:13px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}

/* ---- terms on a date ---- */
.asof{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:#f8fafc;border:1px solid #e8edf3;
  border-radius:12px;padding:14px 16px;margin:18px 0 12px}
.asof label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#475569;font-weight:500}
.asof select,.asof input{border:1px solid #d7dfe8;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;background:#fff;min-width:170px}
.asof .grow{flex:1}
#asof-result{margin-top:4px}
.asof-meta{font-size:12px;color:#64748b;margin:0 0 8px}
.asof-warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:9px;padding:9px 12px;font-size:12px;margin-bottom:10px}
.table-wrap{border:1px solid #e8edf3;border-radius:11px;overflow:auto;max-height:420px}
.ctable td.row-action{white-space:nowrap;text-align:right}
.ctable .type-pick{border:1px solid #d7dfe8;border-radius:6px;padding:4px 6px;font:inherit;font-size:11.5px;background:#fff}
.ctable .type-pick:disabled{background:#f1f5f9;color:#94a3b8}
.ctable tr.is-added{background:#f0fdf4}
.ctable tr.is-added:hover{background:#ecfdf5}
.added{font-size:11.5px;font-weight:700;color:#15803d;white-space:nowrap}
.small.add-clause{color:#0f766e;border-color:#99f6e4;background:#f0fdfa}
.small.add-clause:hover{background:#ccfbf1}
.ctable .verbatim{margin-top:3px;color:#334155}
.ctable .lib-cell{max-width:270px}
/* Library metadata the capture did not take. Shown because a checker needs to see what the
   matched entry says; struck through because it used to read as a term the borrower was being
   held to — a reader asked where a "30d buffer" appeared in the letter, and it never did. */
/* Where the testing cycle came from: the letter this borrower agreed to, UCIC's standard
   library, or nowhere yet. A maker cannot tell those apart from the cycle alone. */
.ctable .lib-template.freq-source{font-style:normal;font-weight:600}
.ctable .lib-template.freq-source.letter{color:#15803d}
.ctable .lib-template.freq-source.master{color:#b45309}
.ctable .lib-template.freq-source.unset{color:#b91c1c}

/* Grouped extraction preview. The demo asked for covenants categorised so review is easier;
   the letter already categorises them, so these are its own headings rather than invented ones. */
/* A clause the letter obliges but that is not in the draft yet — found outside the covenant
   sections, so a person confirms it. It sits in the same list as the rest because it is the same
   kind of thing; only its status differs. */
.ctable tr.needs-decision td{background:#fffdf7}
.row-action.decide{white-space:normal;min-width:200px}
.decide-note{font-size:11px;color:#b45309;margin-bottom:6px;font-weight:600}
.row-action.decide select{display:block;width:100%;margin-bottom:5px}
.in-draft{color:#15803d;font-weight:700;font-size:11.5px;white-space:nowrap}
.group-pending{
  background:#fef3c7;color:#92400e;border-radius:20px;padding:1px 9px;
  font-size:10.5px;font-weight:700;margin-left:10px
}

/* Whether the borrower is ever asked about a covenant — UCIC's question at the demo, for the
   ones the letter gives no cycle for. */
.ctable td.confirms{white-space:normal;max-width:150px}
.ctable td.confirms b{font-size:12px}
.ctable td.confirms.yes b{color:#15803d}
.ctable td.confirms.no b{color:#b45309}
.confirms-note{font-size:10.5px;color:#94a3b8;line-height:1.4;margin-top:2px}

.ctable tr.group-row td{background:#f1f5f9;padding:0;border-bottom:1px solid #dbe3ec}
.group-toggle{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:9px 14px;font:inherit;color:var(--navy)
}
.group-toggle:hover{background:#e8eef5}
.group-toggle .chev{color:#94a3b8;font-size:11px;width:10px}
.group-toggle .group-label{
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8
}
.group-toggle b{font-size:12.5px;color:#0f172a}
.group-toggle .group-count{
  margin-left:auto;background:#fff;border:1px solid #dbe3ec;border-radius:20px;
  padding:1px 9px;font-size:11px;font-weight:700;color:#475569;font-variant-numeric:tabular-nums
}

.pill.not-applied{
  background:#f8fafc;color:#94a3b8;border:1px dashed #cbd5e1;
  text-decoration:line-through;text-decoration-color:#cbd5e1;font-weight:600;cursor:help
}
.ctable .lib-template{margin-top:5px;font-size:11px;color:#94a3b8;line-height:1.45;font-style:italic}
.ctable .muted{color:#cbd5e1;font-size:11px}
.score .quality{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;opacity:.85;margin-top:2px}
.score.strong{color:#15803d}.score.likely{color:#b45309}.score.weak{color:#c2410c}
/* ---- read-only capture context ---- */
.capture-context{display:grid;gap:3px;background:#f0fdfa;border:1px solid #99f6e4;border-radius:10px;padding:12px 14px}
.capture-context.empty-context{background:#fff7ed;border-color:#fed7aa}
.capture-context .ctx-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0f766e}
.capture-context.empty-context .ctx-label{color:#9a3412}
.capture-context strong{font-size:15px;color:#0f172a;line-height:1.3}
.capture-context .ctx-meta{font-size:12px;color:#475569}
.capture-context .ctx-lock{font-size:11px;color:#0f766e;margin-top:4px;line-height:1.45}
.capture-context.empty-context span:last-child{font-size:12px;color:#9a3412}
/* ---- borrower mismatch dialog ---- */
.modal-card.narrow{width:min(640px,100%)}
/* Scrolls when the dialog is taller than the screen.
   Reported from the UCIC demo on 7 September 2026: on a shorter screen the Cancel and Save
   buttons were pushed out of sight with no way to reach them. `.modal-card` is a flex column
   capped at 88vh with overflow:hidden, so a body that neither scrolls nor shrinks clips the
   footer away entirely. `.modal-body` already had this; `.mismatch-body` — which eight dialogs
   use, including covenant correction — did not.
   `min-height:0` is the part that matters: a flex item defaults to min-height:auto and refuses
   to shrink below its content, which is what stopped the scrollbar appearing at all. */
.mismatch-body{padding:18px 24px;overflow-y:auto;flex:1 1 auto;min-height:0}
.mismatch-grid{margin:0;display:grid;gap:10px}
.mismatch-grid div{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:baseline}
.mismatch-grid dt{font-size:11.5px;color:#64748b;font-weight:600}
.mismatch-grid dd{margin:0;font-size:13px;color:#0f172a}
.mismatch-grid dd.miss{color:#b91c1c;font-weight:600}
.mismatch-note{margin:16px 0 0;font-size:12px;color:#64748b;background:#f8fafc;border-radius:8px;padding:10px 12px;line-height:1.5}
#mismatch-summary{color:#b91c1c}
/* ---- sign in / change password ---- */
.auth-screen{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--brand-deepest),var(--brand-deep) 55%,var(--brand));padding:24px}
.auth-screen[hidden]{display:none!important}
.auth-card{background:#fff;border-radius:14px;padding:30px 30px 26px;width:min(400px,100%);
  box-shadow:0 26px 60px rgba(8,20,35,.4);display:grid;gap:13px}
.auth-card[hidden]{display:none!important}
.auth-card h1{margin:0;font-size:21px;color:#0f172a;font-weight:700}
.auth-card h1 span{color:#0f766e}
.auth-sub{margin:-6px 0 6px;font-size:12.5px;color:#64748b;line-height:1.5}
.auth-card label{display:grid;gap:5px;font-size:11.5px;font-weight:700;color:#475569}
.auth-card input{border:1px solid #d7dfe8;border-radius:8px;padding:10px 11px;font:inherit;font-size:14px}
.auth-card input:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.13)}
.auth-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:8px;padding:9px 11px;font-size:12.5px}
.auth-error[hidden]{display:none!important}
.linkish{background:none;border:0;color:#0f766e;font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0}
.linkish:hover{text-decoration:underline}
.linkish.center{justify-self:center}
.userbar-spacer{flex:1}
.signed-in{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--brand-deep)}
.role-chips{display:flex;gap:4px;flex-wrap:wrap}
.role-chips span{background:#fff;border:1px solid #cfe0dd;color:#0f766e;border-radius:20px;padding:1px 8px;font-size:10px;font-weight:700}
/* ---- user administration ---- */
.user-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 14px;border-bottom:1px solid #f1f5f9;align-items:start}
.user-row:last-child{border-bottom:0}
.user-row .who{font-weight:600;color:#0f172a;font-size:13px}
.user-row .meta{font-size:11.5px;color:#64748b;margin-top:3px}
.user-row.inactive{opacity:.55}
.user-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.role-picker{display:flex;gap:9px;flex-wrap:wrap;margin-top:7px}
.role-picker label{display:flex;align-items:center;gap:4px;font-size:11px;color:#475569;font-weight:600}
.new-user{display:grid;gap:9px;padding:14px;background:#f8fafc;border-bottom:1px solid #e8edf3}
.new-user input{border:1px solid #d7dfe8;border-radius:7px;padding:8px 10px;font:inherit;font-size:13px}
.new-user .fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
@media(max-width:700px){.new-user .fields{grid-template-columns:1fr}}
/* who prepared a covenant — decides whether you may check it yourself (§4.1, D-10) */
.tags .maker{background:#f1f5f9;color:#475569;font-weight:600}
.tags .maker.by-system{background:#e0f2fe;color:#0369a1}
.tags .maker.by-person{background:#fef3c7;color:#b45309}
/* ---- dashboard shell: left navigation + workspace ------------------------- */
.shell{display:grid;grid-template-columns:236px 1fr;gap:18px;align-items:start}
.sidenav{position:sticky;top:14px;display:grid;gap:6px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px}
.navitem{display:flex;gap:10px;align-items:flex-start;text-align:left;background:none;border:0;border-radius:9px;padding:11px 11px;cursor:pointer;color:var(--muted);font:inherit;width:100%}
.navitem b{display:block;font-size:13px;color:var(--navy);line-height:1.3}
.navitem small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.navitem .ico{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:7px;background:#eef3f7;color:var(--navy);font-size:12px}
.navitem:hover:not(:disabled){background:#f4f8fa}
.navitem.active{background:var(--teal-pale)}
.navitem.active .ico{background:var(--teal);color:#fff}
.navitem.active b{color:var(--navy-dark)}
.navitem.soon{opacity:.5;cursor:default}
.navitem.soon small{font-style:italic}
.workspace{min-width:0}
.view.hidden{display:none!important}
.view-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:20px 22px;margin-bottom:14px}
.view-head h1{font-size:20px;color:var(--navy);margin:4px 0}
.view-head p{margin:0;color:var(--muted);font-size:12.5px;max-width:70ch;line-height:1.5}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.filters input[type=search]{flex:1;min-width:220px}
.filters input,.filters select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;background:#fff}
.filters input:focus,.filters select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--brand)18}
.table-wrap.tall{max-height:min(64vh,660px)}
.ctable tr.clickable{cursor:pointer}
.master-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* Block, not grid. As a grid the label's text, its "*" and its control each became a separate
   row, so every required field showed its asterisk stranded on a line of its own. As a block
   the text and the asterisk are ordinary inline content on one line, and the control below. */
.master-form label{display:block;font-size:11.5px;font-weight:700;color:#475569}
.master-form label.wide{grid-column:1 / -1}
.master-form em{color:var(--red);font-style:normal}
.master-form input,.master-form select,.master-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid #d7dfe8;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;font-weight:400;color:#0f172a;background:#fff}
.master-form textarea{resize:vertical;font-family:inherit}
.master-form input:focus,.master-form select:focus,.master-form textarea:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.13)}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidenav{position:static;display:flex;overflow:auto}.navitem{min-width:190px}.master-form{grid-template-columns:1fr}}
/* ---- monitoring ---- */
.inline-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.filters .grow{flex:1}

/* ---- capture: choosing the letter ----------------------------------------
   A tester clicked "Upload and extract" repeatedly without ever choosing a
   letter, because that button was the loudest thing on the screen and
   "Choose letter" was a quiet outline button beside a line of grey text. The
   emphasis now follows the order of the work: the box is the obvious first
   thing, and the extract button only becomes primary once there is a letter
   for it to act on. */
/* The selector has to out-rank `.upload-box>label{display:block}` in styles.css, which is more
   specific than a bare class and silently won — the flex layout written here first never applied
   at all, and the box came out as stacked blocks with the text running into itself. That rule also
   imposes a muted 11.5px bold on everything inside, so the type is reset here too. */
.upload-box > label.dropzone{
  display:grid;justify-items:center;text-align:center;gap:7px;
  cursor:pointer;border:2px dashed #9ec8d8;border-radius:10px;background:#fff;
  padding:20px 16px;transition:border-color .15s,background .15s;
  font-size:13px;font-weight:400;color:var(--ink)
}
.upload-box > label.dropzone:hover{border-color:var(--teal);background:var(--teal-pale)}
/* A vertical stack, because the column this sits in is 330px wide — icon, then what to do, then
   the detail, then the control. A row of three put the button on top of the hint. */
.dz-text{display:grid;gap:3px;justify-items:center;width:100%}
.dz-step{font-size:13px;font-weight:700;color:var(--navy);line-height:1.35}
.dz-text #file-name{
  font-size:12px;color:var(--muted);line-height:1.4;
  /* Wraps rather than truncating: a long file name is worth reading, and the placeholder told
     people to "click anywhere in this…" with the instruction cut off. */
  overflow-wrap:anywhere
}
.dz-hint{font-size:11px;color:#94a3b8;line-height:1.4}
/* `.button` sets no display, so as a <span> it stayed inline and its vertical padding bled over
   the lines above and below it. */
.dz-browse{display:inline-block;margin-top:5px;pointer-events:none}

/* A letter is chosen: the box goes quiet and confirms, and step 2 takes over. */
.upload-box.chosen > label.dropzone{border-style:solid;border-color:var(--green);background:var(--green-pale)}
.upload-box.chosen .dz-step{color:var(--green)}
.upload-box.chosen .dz-text #file-name{color:#166534;font-weight:700}
.upload-box.chosen .dz-browse{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.upload-box.chosen .dz-hint{display:none}

/* A letter already read: the box states that plainly rather than inviting another upload. It is
   calm rather than green — nothing has just happened, this is simply what is on file. */
.upload-box.on-file > label.dropzone{border-style:solid;border-color:var(--line);background:var(--bg)}
.upload-box.on-file .dz-step{color:var(--muted);font-weight:700}
.upload-box.on-file .dz-text #file-name{color:var(--navy);font-weight:700}
.upload-box.on-file .dz-browse{background:#fff;color:var(--navy);border:1px solid var(--line);font-weight:400}
.upload-box.on-file .dz-hint{display:none}

/* Until then step 2 is plainly not the thing to press, but it stays clickable — pressing it
   opens the picker rather than scolding the person. */
#extract-letter{transition:background .15s,color .15s}
.upload-box:not(.chosen) #extract-letter{opacity:.85}

/* Keeps a destructive link at the far left, away from the primary action. */
.actions{align-items:center;gap:12px}
.actions .grow{flex:1}
.actions .linkish{color:var(--red)}
.status-chip{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700}
.status-chip.PENDING{background:#f1f5f9;color:#475569}
.status-chip.SUBMITTED{background:#e0f2fe;color:#0369a1}
.status-chip.ASSESSED{background:#dcfce7;color:#15803d}
.outcome-chip{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700}
.outcome-chip.COMPLIED{background:#dcfce7;color:#15803d}
.outcome-chip.BREACH{background:#fee2e2;color:#b91c1c}
.outcome-chip.NOT_APPLICABLE{background:#f1f5f9;color:#64748b}
.outcome-chip.DIVERGENCE{background:#fef3c7;color:#92400e}
/* What the engine computed, shown above the person's verdict — machine working, not a decision. */
.finding{border:1px solid #e8edf3;border-left:3px solid #94a3b8;border-radius:9px;background:#fff;padding:11px 13px;margin-bottom:14px}
.finding-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.finding-head strong{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#64748b}
.finding p{margin:0;font-size:12.5px;line-height:1.55;color:#334155}
.finding-meta{margin-top:7px;padding-top:7px;border-top:1px solid #eef2f6;font-size:11px;color:#94a3b8;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.finding-chip{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700;background:#f1f5f9;color:#475569;white-space:nowrap}
.finding.PASSED{border-left-color:#15803d}
.finding.PASSED .finding-chip{background:#dcfce7;color:#15803d}
.finding.FAILED{border-left-color:#b91c1c}
.finding.FAILED .finding-chip{background:#fee2e2;color:#b91c1c}
.finding.INCONCLUSIVE{border-left-color:#b45309}
.finding.INCONCLUSIVE .finding-chip{background:#fef3c7;color:#92400e}
.finding.NOT_EVALUATED p{color:#64748b;font-style:italic}
/* The same finding, one word wide, so a disputed submission is visible without opening it. */
.finding-flag{display:block;margin-top:4px;font-size:10.5px;font-weight:700}
.finding-flag.FAILED{color:#b91c1c}
.finding-flag.INCONCLUSIVE{color:#b45309}
/* ---- compliance record: the borrower's track record, one row per covenant ---- */
.subtabs{display:flex;gap:2px;border-bottom:1px solid #e2e8f0;margin:16px 0 14px}
.subtabs button{border:0;background:none;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs button:hover{color:#0f172a}
.subtabs button.active{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
.scorecard{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.scorecard>div{flex:1;min-width:150px;background:#fff;border:1px solid #e8edf3;border-radius:10px;padding:13px 15px}
.scorecard b{display:block;font-size:26px;line-height:1.15;color:#0f172a;font-variant-numeric:tabular-nums}
.scorecard .label{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#64748b;margin-bottom:3px}
.scorecard small{display:block;font-size:11px;color:#94a3b8;margin-top:3px}
.scorecard>div.good b{color:#15803d}
.scorecard>div.fair b{color:#b45309}
.scorecard>div.poor b{color:#b91c1c}
/* The record itself: one dot per period, oldest first. A drift is meant to be visible at a
   glance, without a chart library and without opening anything. */
.record-dots{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;background:#cbd5e1;border:1px solid transparent}
.dot.COMPLIED{background:#22c55e}
.dot.BREACH{background:#dc2626}
.dot.DIVERGENCE{background:#f59e0b}
.dot.NOT_APPLICABLE{background:#fff;border-color:#cbd5e1}
.dot.open{background:#fff;border-color:#94a3b8;border-style:dashed}
.rec-legend{font-size:11px;color:#64748b;margin-top:10px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.score-cell{font-variant-numeric:tabular-nums;font-weight:700}
.score-cell.good{color:#15803d}
.score-cell.fair{color:#b45309}
.score-cell.poor{color:#b91c1c}
.score-cell.none{color:#94a3b8;font-weight:600}
tr.rec-row{cursor:pointer}
tr.rec-row.open{background:#f8fafc}
tr.rec-row .twist{display:inline-block;width:12px;color:#94a3b8;font-size:10px}
tr.rec-periods>td{background:#f8fafc;padding:0}
.period-list{display:grid;gap:1px;background:#e8edf3}
.period-line{display:grid;grid-template-columns:150px 100px 1fr 110px;gap:12px;align-items:center;background:#fff;padding:8px 14px;font-size:12px;cursor:pointer}
.period-line:hover{background:#f1f5f9}
.period-line .when{color:#475569;font-weight:600}
.period-line .said{color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.period-line .late-tag{color:#b45309;font-size:10.5px;font-weight:700;margin-left:6px}
/* ---- earlier attempts on one period, inside the assess dialog ---- */
.attempts{border:1px solid #e8edf3;border-radius:9px;margin-bottom:14px;overflow:hidden}
.attempts>.head{background:#f8fafc;padding:7px 13px;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#64748b;border-bottom:1px solid #e8edf3}
.attempt{padding:9px 13px;font-size:12px;border-bottom:1px solid #f1f5f9}
.attempt:last-child{border-bottom:0}
.attempt.superseded{background:#fffbf5}
.attempt .who{color:#94a3b8;font-size:11px;margin-top:2px}
.attempt .said{color:#0f172a;font-weight:600}
.attempt .returned{color:#b45309;font-size:11px;margin-top:3px}
/* ---- stepped covenants: one row per period, sharing a key, name and wording ---- */
/* The accent ties the steps of one covenant together, so three rows read as one covenant with
   three periods rather than as three copies of the same covenant. */
.review-row.stepped{border-left:3px solid #7c9cbf;background:#fbfcfe}
.step-tag{background:#e0ecf7!important;color:#1e4a72!important;font-weight:800}
.step-window{font-size:11.5px;color:#475569;background:#eef4fa;border-radius:7px;padding:6px 10px;margin:4px 0 6px;line-height:1.5}
.step-window b{color:var(--brand-deep)}
.overdue-flag{color:#b91c1c;font-weight:700}
.assess-clause{background:#f8fafc;border:1px solid #e8edf3;border-radius:9px;padding:11px 13px;font-size:12.5px;color:#334155;line-height:1.55;margin-bottom:14px}
.assess-clause b{display:block;color:#0f172a;margin-bottom:3px}
.unscheduled{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:9px;padding:10px 13px;font-size:12.5px;margin-bottom:10px;line-height:1.5}
.unscheduled b{display:block;margin-bottom:3px}
.code-chip{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.needs-frequency{color:#b45309;font-size:11px;font-style:italic}
#picker-body table{width:100%}
#picker-body input[type=checkbox]{width:16px;height:16px}
.no-letter{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:9px;padding:10px 13px;font-size:12px;line-height:1.5;margin-top:12px}
.tags .freq-tag{background:#f1f5f9;color:#475569;font-weight:600}
.tags .freq-tag.observed{background:#e0f2fe;color:#0369a1}
.tags .freq-tag.missing{background:#fee2e2;color:#b91c1c}
.freq-pick{margin-top:4px;border:1px solid #d7dfe8;border-radius:6px;padding:3px 5px;font:inherit;font-size:11px;background:#fff}
.freq-pick:disabled{background:#f1f5f9;color:#94a3b8}
#first-amount-hint{color:var(--muted);font-weight:500;min-height:15px}
/* ---- maker-checker list: make progress obvious in a long, repetitive list ---- */
.review-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 12px;font-size:12.5px;color:var(--muted);font-weight:600}
.review-row.resolved{opacity:.62;background:#fbfdfb}
.review-row.resolved h3{color:var(--muted)}
.tags .row-no{background:#eef2f6;color:#64748b;font-weight:700}
.tags .checked-by{background:transparent;color:var(--muted);font-weight:500}
.status-PENDING{background:var(--amber-pale)!important;color:var(--amber)!important}
.status-ACCEPTED{background:var(--green-pale)!important;color:var(--green)!important}
.status-EDITED{background:#e0f2fe!important;color:#0369a1!important}
.status-REMOVED{background:var(--red-pale)!important;color:var(--red)!important}
.removal-reason{color:var(--red);font-size:11.5px;margin:6px 0 0}
.callout.amber{border-left:3px solid var(--amber);background:var(--amber-pale);color:#7c4a03;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.callout.amber .button{margin-left:auto}
.callout.green{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.callout.green .button{margin-left:auto}
/* ---- borrowers: the book of business ---- */
.borrower-card{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:11px;overflow:hidden}
.borrower-head{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer}
.borrower-head:hover{background:#fbfdff}
.borrower-head .who{flex:1;min-width:0}
.borrower-head .who b{display:block;font-size:14px;color:var(--navy)}
.borrower-head .who small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.borrower-stats{display:flex;gap:16px;flex-wrap:wrap}
.borrower-stats div{text-align:right;min-width:56px}
.borrower-stats strong{display:block;font-size:16px;color:#0f172a;line-height:1.2}
.borrower-stats span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.borrower-stats .attention strong{color:#b45309}
.borrower-chevron{color:#94a3b8;font-size:13px;flex:none}
.facility-rows{border-top:1px solid var(--line);background:#fbfcfe}
.facility-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 16px;border-bottom:1px solid #eef2f6;align-items:center}
.facility-row:last-child{border-bottom:0}
.facility-row .loan b{color:var(--navy);font-size:13px}
.facility-row .loan small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.facility-row .marks{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.no-facility{padding:12px 16px;color:var(--amber);font-size:12px;background:var(--amber-pale)}
/* ---- facility detail ---- */
#fac-note .callout{margin-top:0}
.amend-pick{width:100%;border:1px solid #d7dfe8;border-radius:6px;padding:6px 8px;font:inherit;font-size:12px;background:#fff}
.amend-pick:disabled{background:#f5f7f9;color:#94a3b8}
.ctable td.tick{width:34px;text-align:center}
.ctable td.tick input{width:16px;height:16px}
#tr-headroom{color:var(--muted);font-weight:500;min-height:15px}
.version-chip{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;background:#eef2ff;color:#3730a3}
/* ---- audit history ---- */
.hist-when{white-space:nowrap;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.hist-action{display:inline-block;border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700;background:#eef2f6;color:#475569;white-space:nowrap}
.hist-action.APPROVE,.hist-action.ACTIVATE{background:var(--green-pale);color:var(--green)}
.hist-action.REMOVE,.hist-action.SUPERSEDE{background:var(--red-pale);color:var(--red)}
.hist-action.EDIT,.hist-action.UPDATE{background:#e0f2fe;color:#0369a1}
.hist-action.CREATE,.hist-action.UPLOAD{background:#ede9fe;color:#6d28d9}
.hist-entity{font-size:11px;color:var(--muted)}
.hist-entity b{color:#0f172a;font-weight:600}
.hist-change{font-size:11.5px;line-height:1.6;color:#334155}
.hist-change .field{color:#64748b}
.hist-change .was{color:#b91c1c;text-decoration:line-through;opacity:.75}
.hist-change .now{color:#15803d;font-weight:600}
.hist-reason{margin-top:4px;font-size:11.5px;color:#9a3412;background:#fff7ed;border-radius:6px;padding:4px 8px;display:inline-block}

/* Portal-account status chips, shown in the monitoring team's "Portal access" panel. */
.pill.open { background: #eff6ff; color: #1d4ed8; }
.pill.overdue { background: #fee2e2; color: #b91c1c; }
.pill.sent { background: #f1f5f9; color: #475569; }
.pill.done { background: #dcfce7; color: #15803d; }
.pill.returned { background: #fef3c7; color: #b45309; }

/* Two link-buttons in one table cell ran together as "Reset passwordDisable". */
.ctable td.row-actions{white-space:nowrap;text-align:right}
.ctable td.row-actions .linkish + .linkish{margin-left:14px}

/* One left edge inside a modal.
   A modal's header and footer are inset 24px, but .modal-body has no padding and .ctable cells
   only 14px, so a dialog containing a table and a form showed three different left edges and
   two different right edges. These pull the outer columns and any body-level form onto the
   same 24px gutter as the header and footer. Scoped to .modal-body so the dashboard's own
   full-width tables keep their tighter cell padding. */
.modal-body>.ctable th:first-child,
.modal-body>.ctable td:first-child{padding-left:24px}
.modal-body>.ctable th:last-child,
.modal-body>.ctable td:last-child{padding-right:24px}
.modal-body>.master-form{padding:0 24px 20px}

/* A master covenant nobody has classified yet. */
.ctable tr.needs-review td { background: #fffbeb; }
.review-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px;
  background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 700; text-transform: uppercase;
}

/* The list of covenants blocking approval, and shortcuts into each. */
#review-blockers { margin-bottom: 12px; }
#review-blockers .blocker-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
#review-blockers .blocker-list .linkish {
  background: #fff; border: 1px solid #fcd34d; border-radius: 6px;
  padding: 3px 9px; font-size: 12px; font-weight: 600; color: #92400e; cursor: pointer;
}
#review-blockers .blocker-list .linkish:hover { background: #fffbeb; }

/* Fields that do not apply to the borrower currently selected. */
.muted { opacity: .55; }

/* The approve action stays in view. With twenty-six covenants above it, a checker had to scroll
   past all of them to find the button, and could not see why it was disabled. */
.approve-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border-top: 1px solid #e8edf3;
  margin: 16px -24px -20px; padding: 14px 24px;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .06);
}
.approve-bar .hint { font-size: 12.5px; color: #64748b; }

/* ---- Monitoring: borrower picker and details panel ------------------------- */
/* The monitoring table is one row per covenant per period, so a single borrower can fill it
   several hundred rows deep. The team works one borrower at a time, so the borrower is chosen
   first and everything below — the details, the tiles, the table — follows that choice. */
.mon-picker{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:14px 0 0}
/* The spacer that pushes "next due" to the right-hand edge. `.grow` is only ever declared inside
   `.filters`, so here it was an inert empty div and the next-due block sat stranded in the middle
   of the row, reading as a third field rather than as the summary it is. */
.mon-picker .grow{flex:1}
/* The book filters are a row of their own, about the table below, not about the borrower picker
   above — without a gap the two ran together into one block of controls. */
#mon-book-filters{margin-top:14px}
.picker-field{display:flex;flex-direction:column;gap:5px;min-width:230px}
/* The field's caption. `:not(.doc-find)` because the search box is a span too, and without it the
   caption's uppercase, letter-spacing and weight were inherited straight into the box and its
   browse arrow. */
.picker-field>span:not(.doc-find){font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#64748b;font-weight:600}
.picker-field select{appearance:none;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid #dbe3ec;border-radius:10px;padding:9px 34px 9px 12px;font-size:13px;color:#0f172a;
  font-family:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.picker-field select:hover{border-color:#c3cfdd}
.picker-field select:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.picker-field select:disabled{background-color:#f8fafc;color:#94a3b8;cursor:not-allowed}
/* The borrower box lives in a `.picker-field`, not in a `.filters` bar, so none of the filter-bar
   input styling ever reached it: it drew as a raw browser search box beside a rounded Facility
   dropdown. And because the input kept its default width while the wrapper stretched to the
   field, the browse arrow — positioned against the wrapper's right edge — floated away from the
   box it belongs to. Both are the same omission. */
.picker-field .doc-find{display:flex;width:100%}
.picker-field .doc-find input[type=search]{
  flex:1;min-width:0;background:#fff;border:1px solid #dbe3ec;border-radius:10px;
  padding:9px 34px 9px 12px;font-family:inherit;font-size:13px;color:#0f172a;
  text-transform:none;letter-spacing:normal;font-weight:400;
  transition:border-color .15s,box-shadow .15s}
.picker-field .doc-find input[type=search]:hover{border-color:#c3cfdd}
.picker-field .doc-find input[type=search]:focus{
  outline:0;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.picker-field .doc-find input[type=search]::placeholder{color:#94a3b8}
.picker-field .doc-find-open{right:6px}

/* Three lines, stacked: what it is, when, and which covenant. The markup was copied from the
   scorecard tile, where each part is a `div`; here they are spans, so with nothing to stack them
   the whole thing ran together as "Next due15 Sept 2026Book debt ageing". */
.picker-next{font-size:12px;color:#64748b;text-align:right;line-height:1.5;padding-bottom:4px}
.picker-next .label{display:block;font-size:10px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:#94a3b8}
.picker-next b{display:block;color:#0f172a;font-weight:600;font-size:13px}
.picker-next small{display:block;font-size:11.5px;color:#94a3b8}

/* The borrower's standing details, so the team is not switching screens to check a PAN or
   how much has actually gone out before judging a submission. */
.bcard{border:1px solid #e8edf3;border-radius:12px;background:#fff;margin-top:14px;overflow:hidden}
.bcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:15px 18px;background:linear-gradient(180deg,#fbfdff,#f8fafc);border-bottom:1px solid #eef2f7}
.bcard-head h3{margin:0;font-size:15px;color:#0f172a;letter-spacing:-.01em}
.bcard-head .bcard-sub{margin:4px 0 0;font-size:12px;color:#64748b}
.bcard-flags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Separators are drawn on the cells, not bled through a gap: the number of facts rarely fills
   the last row exactly, and a gap-coloured background left a dead grey block sitting there. */
.bfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));background:#fff}
.bfacts div{padding:11px 18px;border-right:1px solid #eef2f7;border-top:1px solid #eef2f7}
.bfacts dt{margin:0;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8;font-weight:600}
.bfacts dd{margin:3px 0 0;font-size:13px;color:#0f172a;font-variant-numeric:tabular-nums;word-break:break-word}
.bfacts dd.muted{color:#94a3b8}
.bcard-facilities{border-top:1px solid #eef2f7}
.bfac{display:flex;align-items:center;gap:12px;padding:10px 18px;font-size:12.5px;border-bottom:1px solid #f5f8fb}
.bfac:last-child{border-bottom:0}
.bfac .bfac-id{font-weight:600;color:#0f172a;min-width:120px}
.bfac .bfac-meta{color:#64748b}
.bfac .grow{flex:1}
.pill.ok{background:#dcfce7;color:#15803d}
.pill.warn{background:#fef3c7;color:#b45309}
.pill.bad{background:#fee2e2;color:#b91c1c}
.mon-empty{border:1px dashed #dbe3ec;border-radius:12px;padding:28px;text-align:center;color:#64748b;
  font-size:13px;margin-top:14px;background:#fbfdff}
/* A due date must never break across lines — "2024-09-" over "30" is unreadable at a glance. */
.ctable td.due-cell{white-space:nowrap;font-variant-numeric:tabular-nums}
.ctable td.due-cell .due-late{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-top:2px}

/* ---- Monitoring: the borrower list ---------------------------------------- */
/* The landing state. A dropdown alone hid the shape of the book — the team could not see who
   was behind without selecting each borrower in turn. Picking one drills into their periods. */
.btable{width:100%;border-collapse:separate;border-spacing:0}
/* Nothing here should wrap except a genuinely long borrower name: a date broken over two lines
   ("2026-" / "09-27") and a name broken over three are what made the list hard to scan. */
.btable th,.btable td{white-space:nowrap}
.btable td:first-child{white-space:normal;min-width:215px}
.btable td:nth-child(2){min-width:175px}
.btable td:nth-child(2) .bmeta{white-space:nowrap}
.btable thead th{text-align:left;padding:9px 14px;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:#64748b;font-weight:600;border-bottom:1px solid #e8edf3;background:#f8fafc}
.btable thead th.right{text-align:right}
.btable td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle;font-size:13px;color:#334155}
.btable tbody tr{cursor:pointer;transition:background .12s}
.btable tbody tr:hover{background:#f6fbfa}
.btable tbody tr:last-child td{border-bottom:0}
.btable .bname{font-weight:600;color:#0f172a;font-size:13.5px}
.btable .bmeta{font-size:11.5px;color:#94a3b8;margin-top:2px}
.btable td.right{text-align:right;font-variant-numeric:tabular-nums}
.btable .big{font-size:15px;font-weight:600;color:#0f172a}
.btable .big.zero{color:#cbd5e1;font-weight:500}
.btable .big.late{color:#b91c1c}
.btable .bportal{margin-top:5px}
.back-link{display:inline-block;margin:16px 0 0;font-size:12.5px}

/* ---- One-time credentials, shown once and meant to be copied ---------------- */
/* These used to appear in a browser alert, where the text cannot practically be copied and
   had to be written down by hand — slow, and easy to get wrong on a generated password. */
.cred-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e8edf3;
  border-radius:10px;background:#f8fafc;margin-bottom:10px}
.cred-row .cred-label{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8;
  font-weight:600;min-width:74px}
.cred-row .cred-value{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  color:#0f172a;word-break:break-all;user-select:all}
.cred-copy{border:1px solid #dbe3ec;background:#fff;color:#0f766e;border-radius:8px;padding:6px 12px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;flex:none;transition:background .12s,border-color .12s}
.cred-copy:hover{background:#f0fdfa;border-color:#0f766e}
.cred-copy.done{background:#dcfce7;border-color:#86efac;color:#15803d}

/* ---- Stepped covenant limits ---------------------------------------------- */
/* A limit that changes by date. Entered as a short schedule rather than two boxes, because
   two boxes cannot express "8% until 31 December, 6% after" without one of them being wrong. */
.steps-block{border-top:1px solid #eef2f7;margin-top:6px;padding-top:12px}
.step-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.step-row input{flex:1;min-width:0;border:1px solid #dbe3ec;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}
.step-row .step-from{flex:0 0 150px}
.step-row .step-drop{border:0;background:#fef2f2;color:#b91c1c;border-radius:8px;width:30px;height:32px;
  font-size:16px;line-height:1;cursor:pointer;flex:none}
.step-row .step-drop:hover{background:#fee2e2}
.step-head{display:flex;gap:8px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:#94a3b8;font-weight:600;margin-bottom:5px}
.step-head span:first-child{flex:0 0 150px}
.step-head span{flex:1}
.step-head span:last-child{flex:0 0 30px}

/* ---- breach remediation, Rev 1.3 Sheet B-2 ---- */
.breach-case{background:#fff;border:1px solid #e8edf3;border-left:4px solid #dc2626;border-radius:10px;padding:14px 16px;margin-bottom:12px}
.breach-case.closed{border-left-color:#94a3b8;background:#fbfcfd}
/* A cure that has run out, or a penalty past its due date — the two states that need chasing
   rather than deciding. C-09: "no open ends". */
.breach-case.attention{border-left-color:#b45309;background:#fffdf7}
.bc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.bc-head b{font-size:14px;color:#0f172a}
.bc-status{border-radius:20px;padding:3px 11px;font-size:10.5px;font-weight:800;white-space:nowrap;background:#f1f5f9;color:#475569}
.bc-status.JUSTIFICATION_SUBMITTED{background:#e0f2fe;color:#0369a1}
.bc-status.AWAITING_REMEDY{background:#fef3c7;color:#92400e}
.bc-status.IN_CURE{background:#ede9fe;color:#5b21b6}
.bc-status.AWAITING_PENALTY{background:#fee2e2;color:#b91c1c}
.bc-status.CLOSED{background:#dcfce7;color:#15803d}
.bc-detail{margin:0 0 7px;font-size:12.5px;color:#334155;line-height:1.55}
.bc-meta{margin:0 0 5px;font-size:11.5px;color:#64748b}
.bc-meta .late{color:#b91c1c}
.bc-quote{background:#f8fafc;border:1px solid #eef2f6;border-radius:8px;padding:9px 12px;margin:6px 0;font-size:12.5px;color:#334155;line-height:1.55}
.bc-quote b{display:block;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#64748b;margin-bottom:3px}
.bc-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}

/* ---- Sheet E: tranche conditions and post-disbursement documents ---- */
.title-note{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#94a3b8;margin-left:8px}
/* The lane's left edge says at a glance whether money can move: blocked, ready, or gone. */
.tranche-lane{background:#fff;border:1px solid #e8edf3;border-left:4px solid #94a3b8;border-radius:10px;padding:13px 15px;margin-bottom:10px}
.tranche-lane.blocked{border-left-color:#b45309;background:#fffdf7}
.tranche-lane.ready{border-left-color:#15803d}
.tranche-lane.cleared{border-left-color:#15803d;background:#f7fdf9}
.tl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.tl-head b{font-size:14px;color:#0f172a}
.tl-status{font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#64748b;white-space:nowrap;padding-top:2px}
.tranche-lane.blocked .tl-status{color:#b45309}
.tranche-lane.cleared .tl-status,.tranche-lane.ready .tl-status{color:#15803d}
.tl-meta{margin:0 0 8px;font-size:11.5px;color:#64748b}
.tl-conditions{display:grid;gap:1px;background:#eef2f6;border:1px solid #eef2f6;border-radius:8px;overflow:hidden}
.tl-condition{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;background:#fff;padding:7px 10px;font-size:12.5px;color:#334155}
.tl-condition.MET{background:#f8fdfa}
.tl-condition.EXCEPTED{background:#fffbf5}
.tl-tick{color:#94a3b8;font-weight:800}
.tl-condition.MET .tl-tick{color:#15803d}
.tl-condition.EXCEPTED .tl-tick{color:#b45309}
.tl-text em{display:block;font-style:normal;font-size:11px;color:#94a3b8;margin-top:2px}
.tl-actions{display:flex;gap:5px}
.tl-foot{margin-top:10px}
/* The checklist. A document past its own due date is the thing to chase, so it is marked. */
.pdd-status{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700;background:#f1f5f9;color:#475569;white-space:nowrap}
.pdd-status.SUBMITTED{background:#e0f2fe;color:#0369a1}
.pdd-status.RECEIVED{background:#dcfce7;color:#15803d}
.pdd-status.DEFICIENT{background:#fee2e2;color:#b91c1c}
.pdd-status.WAIVED{background:#ede9fe;color:#5b21b6}
tr.pdd-late td{background:#fffdf7}
.pdd-returned{color:#b91c1c;font-size:11px;margin-top:3px}

/* ---------------------------------------------------------------------------
   The certification gate (C-18).

   Sits directly above "What Guard found", because it is the thing that decides
   whether there is anything there to find: an uncertified submission is
   received, not verified, and the panel below stays empty until this is
   confirmed. Styled as a step to be completed rather than a finding to be read.
   --------------------------------------------------------------------------- */
.certification {
  border: 1px solid var(--line, #d9dee7);
  border-left: 3px solid #b58900;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: #fffdf5;
}
.certification.CERTIFIED { border-left-color: #2e7d32; background: #f6fbf6; }
.certification p { margin: 6px 0 0; color: #4a5262; font-size: 13px; line-height: 1.5; }
.certification .finding-chip { background: #b58900; color: #fff; }
.certification.CERTIFIED .finding-chip { background: #2e7d32; }
.cert-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.cert-form label { display: block; font-size: 12px; font-weight: 600; color: #4a5262; }
.cert-form label em { color: #c62828; font-style: normal; }
.cert-form input {
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border: 1px solid var(--line, #d9dee7);
  border-radius: 6px;
  font: inherit;
  font-weight: 400;
}
.cert-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cert-hint { font-size: 12px; color: #6b7280; }

/* The outstanding balance a security-cover test cannot conclude without (C-14). Styled as the
   certification panel is — a step to complete, not a finding to read — but in the lender's own
   colour, because unlike certification this figure comes from UCIC rather than the borrower. */
.certification.outstanding { border-left-color: #1565c0; background: #f5f9ff; }
.certification.outstanding .finding-chip { background: #1565c0; }
.certification.outstanding.RECORDED { border-left-color: #2e7d32; background: #f6fbf6; }
.certification.outstanding.RECORDED .finding-chip { background: #2e7d32; }

/* What Guard read from which column (C-22). Sits above the finding because the finding is
   computed from it: a verdict read off the wrong column is worse than no verdict. */
.certification.mapping { border-left-color: #6a1b9a; background: #faf7fc; }
.certification.mapping .finding-chip { background: #6a1b9a; }
.certification.mapping.CONFIRMED { border-left-color: #2e7d32; background: #f6fbf6; }
.certification.mapping.CONFIRMED .finding-chip { background: #2e7d32; }
.map-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.map-role { min-width: 130px; font-size: 12px; font-weight: 600; color: #4a5262; }
.map-row select { flex: 1 1 200px; padding: 6px 8px; border: 1px solid var(--line, #d9dee7); border-radius: 6px; font: inherit; }
.map-flag { font-size: 12px; font-weight: 600; }
.map-flag.ok { color: #2e7d32; }
.map-flag.missing { color: #c62828; }
.map-spare { margin-top: 10px; font-size: 12px; color: #6b7280; }

/* The letter's penal charges, beside the field the team types the amount into (C-20, D-80).
   Collapsed by default: it is a reference, not a finding, and the person raising a penalty
   already knows what they are looking for. */
.bc-rates { margin-top: 8px; font-size: 12px; }
.bc-rates summary { cursor: pointer; color: #4a5262; font-weight: 600; }
.bc-rate { display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line, #e6e9ef); }
.bc-rate span { flex: 1 1 55%; color: #4a5262; }
.bc-rate b { flex: 1 1 45%; color: #222; font-weight: 600; }

/* ---------------------------------------------------------------------------
   UCIC brand — the logo's own palette (#0096E1 azure, near-black, white).

   The header is white because the logo is: the supplied file has an opaque
   white background and no transparency, so on the previous navy bar it would
   have sat in a white box. A white header with a brand rule beneath it reads
   as UCIC's own stationery, and it is what the logo was drawn for.
   --------------------------------------------------------------------------- */
header {
  background: var(--white);
  color: var(--ink);
  border-bottom: 3px solid var(--brand);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(16, 24, 32, .06);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}

/* The portal's own sheet loads after this one and sets a dark slate bar, so these need the
   weight to win. Everything else here is left to cascade normally — `!important` used only
   where a later rule would otherwise override it, not as a habit. */
.pheader {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-bottom: 3px solid var(--brand);
  box-shadow: 0 1px 3px rgba(16, 24, 32, .06);
}
/* `.pheader .brand` stacks its children in a column, which would put the logo above the
   wordmark; and its span is a pale grey drawn for a dark bar, invisible on white. */
.pheader .brand { flex-direction: row !important; align-items: center; }
.pheader .brand-app { flex-direction: column; }
.pheader .brand-app strong { font-size: 16px; color: var(--ink); }
.pheader .brand-app span { font-size: 11px; color: var(--muted); }
.pheader-right .signed-in, .pheader-right .linkish { color: var(--muted); }
.pheader-right .signed-in strong { color: var(--ink); }
.brand { display: flex; align-items: center; gap: 14px; }
.logo { height: 34px; width: auto; display: block; }

/* A hairline between UCIC's mark and the name of the system, so the two read as
   related but distinct — this is UCIC's system, not a co-brand. */
.brand-divider { width: 1px; height: 26px; background: var(--line); display: inline-block; }
.brand-app { display: flex; flex-direction: column; line-height: 1.25; }
.brand-app strong { font-size: 16px; color: var(--ink); font-weight: 700; letter-spacing: .2px; }
.brand-app span { font-size: 11px; color: var(--muted); font-weight: 600; }

/* The reset control was white-on-navy; on a white bar it needs its own outline. */
header .reset {
  background: var(--white); color: var(--brand-deep);
  border: 1px solid var(--line); font-weight: 600;
}
header .reset:hover { border-color: var(--brand); color: var(--brand); }
.pheader .signed-in, .pheader .linkish { color: var(--muted); }
.pheader .linkish:hover { color: var(--brand); }

/* LendShield is credited at the foot, not in the header. To somebody at UCIC
   opening this every morning it is their system; who built it belongs in the
   colophon, the way a printer's mark sits at the back of a book. */
.colophon {
  max-width: 1140px;
  margin: 36px auto 26px;
  padding: 18px 20px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* LendShield's own mark and wordmark, in their teal (#007A6E). Deliberately below UCIC's
   header rule and at a smaller weight: to somebody at UCIC this is their system, and the
   builder's mark belongs at the foot the way a printer's does at the back of a book. */
.ls-lockup { display: inline-flex; align-items: center; gap: 8px; }
.ls-mark { width: 22px; height: 22px; display: block; flex: none; }
.ls-name { font-size: 14px; font-weight: 800; color: #007A6E; letter-spacing: .2px; }
.ls-product { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
.ls-legal { font-size: 11px; color: var(--muted); letter-spacing: .3px; }

@media (max-width: 700px) {
  header, .pheader { padding: 12px 14px !important; }
  .logo { height: 26px; }
  .brand { gap: 10px; }
  .brand-app strong { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   The sign-in screen.

   It is the first thing anybody at UCIC sees, so it carries their mark and not
   ours. "Guard" alone beneath the logo — the product name, not the builder's.
   --------------------------------------------------------------------------- */
.auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.auth-logo { height: 36px; width: auto; display: block; }
.auth-card h1 { font-size: 21px; color: var(--ink); font-weight: 700; margin: 0; letter-spacing: .2px; }

/* LendShield sits at the foot here as it does everywhere else. The overlay is a
   fixed, centred flex row, so the footer is taken out of that flow and pinned
   to the bottom rather than being centred alongside the sign-in card. */
.auth-colophon {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
  pointer-events: none;
}
.auth-colophon .ls-legal { font-size: 10.5px; }

@media (max-height: 620px) { .auth-colophon { display: none; } }

/* ---------------------------------------------------------------------------
   The sign-in colophon sits on the deep blue gradient, not on white.

   The colours below the fold elsewhere — teal wordmark, grey legal line — are
   drawn for a white page and all but disappear here. This is the reversed
   treatment: the mark keeps both brand colours by inverting to a white chip
   with the teal shield inside, and the type goes white.
   --------------------------------------------------------------------------- */
/* The footer sits at the BOTTOM of the gradient, which is its lightest stop (#0096E1) — the
   worst case for white type. Measured: white alone gives 3.26:1 there and the legal line at
   62% gives 2.09:1, which is why it read as invisible. A soft scrim behind the strip takes
   white to 6.0:1 and the legal line to 4.5:1, clearing WCAG AA for normal text. */
.auth-colophon {
  padding: 18px 20px 20px;
  background: linear-gradient(to top, rgba(0, 30, 50, .42), rgba(0, 30, 50, 0));
}
/* The mark is used exactly as LendShield publish it, on both grounds. On the blue it gets a
   light backing plate rather than being recoloured — altering somebody's logo to fit a
   background is the wrong way round, and a white surround is the ordinary treatment. */
.auth-colophon .ls-mark {
  background: #fff; border-radius: 6px; padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 20, 35, .25);
}
.auth-colophon .ls-name { color: #fff; }
.auth-colophon .ls-product { color: rgba(255, 255, 255, .85); }
.auth-colophon .ls-legal { color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------------------
   Top-level tabs.

   Was a 236px sidebar. Seven destinations read better across the top, and it
   gives the tables underneath their full width — which matters on the loan
   book and the compliance record, where columns were being squeezed.
   --------------------------------------------------------------------------- */
/* A vertical tab rail down the left, with the workspace beside it. */
.shell-tabs {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.maintabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Follows the page down, so the tabs stay reachable on a long table without scrolling back. */
  position: sticky;
  top: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  overflow: hidden;
}
.maintabs .navitem {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-width: 0; text-align: left;
  padding: 10px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 0; background: none; cursor: pointer;
  /* The label WRAPS. It was `nowrap`, which is fine while every tab is one short word and
     breaks the moment one is not: "Post-Disbursement Documents" ran straight out of the 236px
     rail and its active background spilled past the rounded edge. The count still sits hard
     right, because it is pushed there by margin rather than by the label ending. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.maintabs .navitem:hover { background: var(--brand-pale); color: var(--brand-deep); }
.maintabs .navitem.active { background: var(--brand); color: #fff; }
.maintabs .navitem.active:hover { background: var(--brand-dark); color: #fff; }

/* A count only where the number changes what you do next. Pushed to the right-hand edge so the
   labels stay left-aligned and the numbers line up as a column of their own. */
.tabcount {
  margin-left: auto;
  flex: none;
  align-self: center;
  min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: var(--line); color: var(--brand-deep);
  font-size: 11px; font-weight: 800; text-align: center;
}
.navitem.active .tabcount { background: rgba(255, 255, 255, .28); color: #fff; }
.tabcount.alarm:not(:empty) { background: var(--red); color: #fff; }
/* An overdue count is a warning, not a tally. */
#nav-monitoring-count:not(:empty) { background: var(--amber-pale); color: var(--amber); }
.navitem.active #nav-monitoring-count:not(:empty) { background: rgba(255,255,255,.28); color: #fff; }
.navitem.active .tabcount.alarm:not(:empty) { background: #fff; color: var(--red); }
.tabcount:empty { display: none; }

/* ---- Alerts --------------------------------------------------------------- */
.alert-card {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 9px;
  padding: 14px 16px; margin-bottom: 10px;
}
.alert-card.warn { border-left-color: var(--amber); }
.alert-card.bad { border-left-color: var(--red); }
.alert-card.ok { border-left-color: var(--green); }
.alert-card.cleared { opacity: .6; }
.alert-card h3 { margin: 8px 0 4px; font-size: 14px; color: var(--ink); }
.alert-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert-days { font-size: 12px; font-weight: 700; color: var(--muted); }
.alert-detail { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ladder-note { flex-basis: 100%; margin-top: 8px; font-size: 11.5px; color: var(--muted); }

/* ---- Reports -------------------------------------------------------------- */
.rate-list { background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 4px 14px 12px; }
.score-note { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.message-body {
  margin: 8px 0 0; padding: 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px;
  font: 12px/1.55 'Courier New', monospace; white-space: pre-wrap; color: var(--ink);
}
.alert-card details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--brand-deep); margin-top: 8px; }

@media (max-width: 700px) {
  /* Below tablet width a rail costs more than it gives, so it lies down and scrolls. */
  .shell-tabs { grid-template-columns: 1fr; }
  .maintabs { position: static; flex-direction: row; overflow-x: auto; padding: 4px; }
  .maintabs .navitem { flex: 0 0 auto; width: auto; padding: 8px 11px; font-size: 12px; }
  .maintabs .tabcount { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAKER-CHECKER REVIEW TABLE
   Rebuilt 11 September 2026 on UCIC's demo feedback: a table with every parameter
   in a column, collapsible under the sanction letter's own headings, so a reviewer
   can run down a column rather than read a stack of cards. The long clause text
   opens on the row instead of squeezing a thirteenth column.
   ───────────────────────────────────────────────────────────────────────────── */

/* The four tabs. A checker asked to see what they had approved and what they had
   removed, not only what was left to do — so each tab carries its own count. */
.review-filters{display:flex;gap:4px;background:#f1f5f9;border-radius:9px;padding:3px}
.rfilter{border:0;background:transparent;border-radius:7px;padding:6px 13px;font:inherit;
  font-size:12px;font-weight:600;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:6px}
.rfilter:hover{color:#0f172a}
.rfilter.active{background:#fff;color:#0b2545;box-shadow:0 1px 2px rgba(15,23,42,.09)}
.rf-count{font-size:10.5px;font-weight:700;background:#e2e8f0;color:#475569;border-radius:20px;padding:1px 7px}
.rfilter.active .rf-count{background:#0b2545;color:#fff}

.review-summary .tally-approved strong{color:#15803d}
.review-summary .tally-removed strong{color:#b91c1c}

.review-table-host{margin-top:2px}
.review-wrap{max-height:none}
.rtable{font-size:12px}
.rtable thead th{white-space:nowrap;padding:9px 10px}
.rtable td{vertical-align:middle}
.rtable .unset{color:#cbd5e1}
.rtable .freq-observed{color:#475569;font-style:italic}
.rtable .freq-missing{color:#b91c1c;font-weight:600}
.rtable .maker{font-size:11px;white-space:nowrap}
.rtable .checked-by{display:block;font-size:10.5px;color:#94a3b8;font-weight:400}
.rtable td.row-action{white-space:nowrap;text-align:right}

/* The covenant name doubles as the control that opens the wording beneath it. */
.row-expand{border:0;background:transparent;padding:0;font:inherit;font-weight:600;color:#0f172a;
  cursor:pointer;text-align:left;display:flex;align-items:center;gap:6px;line-height:1.35}
.row-expand:hover{color:#0b5cad}
.row-expand .chev{color:#94a3b8;font-size:10px}

.rrow.is-open>td{background:#f8fbff}
.rrow.status-row-REMOVED>td{background:#fffafa}
.rrow.status-row-REMOVED .name .row-expand{color:#94a3b8;text-decoration:line-through}
.rrow.status-row-ACCEPTED .num{color:#86c99b}

/* Removed rows are never hidden — the point of the Removed tab is that they stay visible. */
.group-removed{background:#fee2e2;color:#b91c1c;border-radius:20px;padding:1px 9px;
  font-size:10.5px;font-weight:700;margin-left:7px}

.rdetail>td{background:#f8fbff;border-bottom:1px solid #e2e8f0;padding:0 10px 14px 42px}
.rdetail-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}
.rd-label{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:#94a3b8;font-weight:700;margin-bottom:5px}
.rd-text{margin:0;color:#334155;line-height:1.6;font-size:12.5px}
.rd-basis{margin:8px 0 0;font-size:11.5px;color:#6d28d9}
.rd-side{border-left:1px solid #e2e8f0;padding-left:20px}
.rd-list{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 12px;font-size:11.5px}
.rd-list dt{color:#94a3b8}
.rd-list dd{margin:0;color:#334155;font-weight:600}

/* Putting back something removed in error. Deliberately the widest button on the row: it is
   the one a checker reaches for when they have just realised a mistake. */
.small.addback{color:#15803d;border-color:#86efac;background:#f0fdf4;font-weight:600}
.small.addback:hover{background:#dcfce7}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE WIDTH
   The app was capped at 1140px, which after a 236px sidebar left about 850px for
   the panel — not enough for the twelve-column review table, which ran off the
   right edge at "Certification" while the screen sat in a narrow strip with wide
   empty margins either side. The cap is now 1600px.

   Widening the page must not widen the FORMS with it: a text box stretched to
   700px is harder to use, not easier, and long prose lines get hard to follow.
   So anything a person reads or types keeps a sensible measure, and only the
   tables take the extra room.
   ───────────────────────────────────────────────────────────────────────────── */
.grid{max-width:980px}
.panel-head p,.callout,.view-head p{max-width:78ch}

/* ─────────────────────────────────────────────────────────────────────────────
   EDITABLE CELLS
   Every parameter that drives monitoring is filled in on the row itself. A
   reviewer works down a sixty-covenant letter with Tab, so the controls are
   plain, sit flush in the cell, and only show their edges on hover or focus —
   a grid of sixty boxed dropdowns is unreadable.
   ───────────────────────────────────────────────────────────────────────────── */
/* Every control carries its own edge, always.
   These were transparent until hovered, on the theory that sixty boxed dropdowns would be
   noisy. That was wrong in the way that matters: a reviewer opening this screen could not tell
   the table was editable at all, and nobody hovers a cell to find out. A faint, even edge on
   every control reads as a form without shouting. */
/* Two weights, because two different jobs.
   A cell that already holds a value is not the reviewer's problem — it reads almost as text, so
   the eye slides past it. A cell that is MISSING something the approval needs is drawn as a
   real, tinted box. On UCIC's letter that is 42 cells out of roughly 600: the screen now points
   at the work instead of presenting six hundred identical boxes and leaving them to find it. */
.rtable .cell{
  width:100%;min-width:0;box-sizing:border-box;
  border:1px solid transparent;border-radius:5px;background:transparent;
  padding:5px 6px;font:inherit;font-size:12px;color:#0f172a;
}
.rtable .cell-filled{border-bottom-color:#e2e8f0}
.rtable .cell:hover{border-color:#b9c7d4;background:#fff}
/* Missing, and approval is waiting on it. */
.rtable .cell-needed{border-color:#f0b4b4;background:#fff6f6;color:#b91c1c;font-weight:600}
.rtable .cell-needed:hover{border-color:#e08585}
.rtable .cell:focus{outline:0;border-color:var(--brand,#0096E1);background:#fff;
  box-shadow:0 0 0 3px rgba(0,150,225,.15)}
.rtable select.cell{appearance:none;cursor:pointer;padding-right:14px;
  background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
  background-position:calc(100% - 9px) 50%,calc(100% - 5px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.rtable .cell:disabled{color:#94a3b8;cursor:not-allowed;background:transparent}
.rtable .cell-name{font-weight:600}
.rtable .cell-buffer{width:60px}
.rtable td.limit-cell{white-space:nowrap}

/* A value nobody has supplied yet. Not an error — the reviewer is here to supply it — but it
   has to be findable at a glance down a long column. */
.rtable .cell-unset{color:#b91c1c;font-weight:600}
/* Saved, and rejected. The flash matters: a cell that saves with no sign at all leaves the
   reviewer unsure whether Tab committed it. */
.rtable .cell-saved{border-color:#86efac;background:#f0fdf4}
.rtable .cell-bad{border-color:#fca5a5;background:#fef2f2}

/* Where the letter set a cycle, the borrower is asked as a matter of course — there is no
   decision for the monitoring team to make, so the cell states the answer instead of offering
   a choice that only has one valid value. */
.confirm-auto{font-size:11.5px;color:#15803d;font-weight:600}
.rtable td.confirm-cell{min-width:112px}

.rd-textarea{width:100%;border:1px solid #dbe4ea;border-radius:6px;padding:8px 10px;
  font:inherit;font-size:12.5px;line-height:1.6;color:#334155;resize:vertical}
.rd-textarea:focus{outline:0;border-color:var(--brand,#0096E1);box-shadow:0 0 0 3px rgba(0,150,225,.15)}

/* The chevron is out of the tab order, so Tab goes name → type → metric → … → decision. */
.rtable .row-expand{padding:2px 4px;margin-right:2px}

/* ─────────────────────────────────────────────────────────────────────────────
   REVIEW TABLE — LEGIBILITY
   First pass squeezed the covenant NAME into whatever width was left after
   fourteen other columns, so it read "Borrower shall" and "Tangible Net W" —
   the one column a reviewer navigates by, and the one that was unreadable.
   ───────────────────────────────────────────────────────────────────────────── */

/* The name gets real room and is allowed two lines. Everything else gets a floor
   below which it may not be squeezed, so nothing clips to "Figu" or "Revi". */
/* Column order: # · Decision · Covenant · Type · Metric · Limit · Frequency · Buffer ·
   Evidence · Submission · Certification · Confirmation · Prepared by · Status */
.rtable th,.rtable td{white-space:nowrap}
.rtable th:nth-child(2){min-width:78px}
.rtable th:nth-child(3),.rtable td.name{min-width:330px;white-space:normal}
.rtable th:nth-child(4),.rtable th:nth-child(5){min-width:104px}
.rtable th:nth-child(6){min-width:124px}
.rtable th:nth-child(7){min-width:108px}
.rtable th:nth-child(8){min-width:76px}
.rtable th:nth-child(9),.rtable th:nth-child(10),.rtable th:nth-child(11){min-width:112px}
.rtable th:nth-child(12){min-width:134px}

.name-wrap{display:flex;align-items:flex-start;gap:4px}
.name-wrap .cell-name{font-weight:600;line-height:1.35}
.rtable .row-expand{flex:0 0 auto;margin-top:4px;color:#94a3b8}

/* min and max, each labelled, always. A placeholder vanishes the moment a value is typed, so a
   covenant with a minimum of 1.25 rendered as "1.25  max" — which states the opposite. */
.limit-pair{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.limit-pair:last-child{margin-bottom:0}
.limit-pair>span{flex:0 0 22px;font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.03em}
.rtable .cell-limit{width:auto;flex:1 1 auto;min-width:0}

/* The row number and the covenant name stay put when the table is scrolled sideways — without
   them a reviewer three columns in has no idea which covenant they are editing. */
.rtable td.num,.rtable th.num{position:sticky;left:0;z-index:2;background:#fff}
.rtable th:nth-child(2),.rtable td.row-action{position:sticky;left:34px;z-index:2;background:#fff}
.rtable th:nth-child(3),.rtable td.name{position:sticky;left:112px;z-index:2;background:#fff}
.rtable thead th.num,.rtable thead th:nth-child(2),.rtable thead th:nth-child(3){z-index:3;background:#f8fafc}
.rrow.is-open>td.num,.rrow.is-open>td.name,.rrow.is-open>td.row-action{background:#f8fbff}
.rrow.status-row-REMOVED>td.num,.rrow.status-row-REMOVED>td.name,
.rrow.status-row-REMOVED>td.row-action{background:#fffafa}
.rtable td.name{box-shadow:1px 0 0 #eef2f6}
/* The decision buttons sit left now, so they read left-to-right rather than right-aligned. */
.rtable td.row-action{text-align:left}

/* A little more air: this is a form, and the rows were touching. */
.rtable td{padding:8px 9px}
.rtable tbody tr.rrow:hover>td{background:#fbfdff}


/* Says the table is a form. The filled cells are deliberately quiet so the eye finds the
   missing ones, and quiet cells do not announce themselves — so the screen says it in words
   once, rather than drawing six hundred boxes to imply it. */
.edit-hint{font-size:11.5px;color:#64748b;margin-left:14px}
.edit-hint::before{content:"✎";margin-right:5px;color:#94a3b8}

/* The covenant name, shown whole.
   It was an <input>, and an input cannot wrap — a long name simply scrolled out of sight, so
   the column read "Borrower shall maintain a Debt Servi" however wide it got. It is a textarea
   sized to its content: the same field, but the whole name is on screen. */
.rtable textarea.cell-name{
  resize:none;overflow:hidden;line-height:1.4;font-weight:600;
  white-space:pre-wrap;word-break:break-word;min-height:26px;
}
.rtable textarea.cell-name:focus{background:#fff}

/* The clause on hover.
   Opening a row to read it pushed everything below down the page; on sixty covenants that is
   sixty jolts and you lose your place. Fixed-position and parented to the body, because the
   table scrolls inside its own box and anything inside it would be clipped at the edge. */
.clause-pop{
  position:fixed;z-index:60;max-width:620px;
  background:#0b2545;color:#e8eef5;border-radius:8px;
  padding:11px 14px;font-size:12.5px;line-height:1.6;
  box-shadow:0 8px 26px rgba(11,37,69,.28);pointer-events:none;
}
/* The limit in force on the date asked about — the answer the as-at query exists to give. */
.ctable td.asof-limit{font-weight:600;color:#0f172a;white-space:nowrap}

/* What the borrower actually sent, on the row where it is judged. These were returned by the
   API from the start and never drawn, so "Received" — which means verified and in order — was
   a decision about a file nobody could open. */
.pdd-files{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pdd-files-label{font-size:10.5px;font-weight:700;color:#15803d;letter-spacing:.02em}
.pdd-file{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid #cfe6d6;border-radius:6px;background:#f6fdf8;
  padding:4px 9px;font:inherit;font-size:11.5px;font-weight:600;color:#15803d;
  cursor:pointer;text-align:left;max-width:260px}
.pdd-file:hover{background:#ecfdf3;border-color:#86efac}
.pdd-file .meta{font-size:10px;font-weight:400;color:#64748b}

/* The Documents section. Its own tab on UCIC's demo feedback: these were reachable only by
   opening a borrower, then a facility, then scrolling — so "what am I chasing this morning?"
   could not be answered on one screen. */
/* Wider than the correction dialog because the preview table has to be readable inside it. */
.modal-card.wide-card{width:min(860px,100%)}
.grid label.wide{grid-column:1 / -1}
/* The error line sits under the fields rather than beside them, and takes no room until there
   is something to say. */
.modal-error{display:block;color:var(--red,#b23a48);font-size:12px;font-weight:600;margin-top:10px;min-height:0}
#di-preview{margin-top:16px}
#di-preview .ctable{font-size:12px}
#di-preview .table-wrap{max-height:260px}

/* A disabled button must LOOK disabled.
   The only rule for this was scoped to .flow-actions, so "Add them" on the checklist form sat
   there in full primary navy while doing nothing when pressed — indistinguishable from a button
   that was simply broken. */
.button:disabled,.button[disabled]{opacity:.45;cursor:not-allowed}
.button.primary:disabled:hover{background:var(--navy)}
.small:disabled{opacity:.45;cursor:not-allowed}

/* A textarea inside a .grid form.
   The .grid rules style input and select and stop there, so a textarea fell back to the browser
   default: inline, monospace, and a few characters wide, sitting beside its own label instead of
   under it. `.master-form` had always included textarea in its rules; `.grid` had not, and the
   only textarea in a .grid is the one added on 12 September — which is why it had never shown.
   Written to match the inputs beside it exactly. */
.grid textarea{
  display:block;width:100%;box-sizing:border-box;margin-top:6px;
  border:1px solid var(--line);border-radius:6px;padding:9px 10px;
  background:#fff;color:var(--ink);font:13px 'Segoe UI',sans-serif;line-height:1.5;
  resize:vertical;min-height:62px;
}
.grid textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,150,225,.15)}
.grid textarea::placeholder{color:#94a3b8}

/* Searching for a borrower instead of picking one from a list of everybody. A dropdown is
   readable at four borrowers and unusable at four hundred. */
.doc-chosen{margin:-4px 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.doc-chosen:empty{display:none}

/* A dropdown attached to the box — one borrower per row, bounded and scrolling.
   Matches were drawn as chips laid out across the page, which reads at four borrowers and is
   absurd at two hundred: the filter bar became a wall of names. Fifty now look like five. */
.doc-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;min-width:280px;max-width:360px;z-index:40;
  background:#fff;border:1px solid #d7dfe8;border-radius:9px;
  box-shadow:0 12px 30px rgba(15,23,42,.16);
  max-height:280px;overflow-y:auto;padding:4px;
}
.doc-dropdown[hidden]{display:none}
.doc-hit{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
  border:0;background:none;border-radius:6px;padding:8px 10px;
  font:inherit;font-size:12.5px;color:#0f172a;cursor:pointer;text-align:left;
}
.doc-hit:hover{background:var(--brand-pale,#E8F6FE)}
.doc-hit-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-hit-id{font-size:10.5px;color:#94a3b8;flex:none}
.doc-more{padding:8px 10px;font-size:11.5px;color:#94a3b8}
/* The filter in force, always visible — a search box holding a hidden filter is worse than a
   dropdown, because nothing on screen says why the list is short. */
.doc-chip{display:inline-flex;align-items:center;gap:7px;background:#e8f6fe;color:#00568A;
  border-radius:20px;padding:4px 6px 4px 12px;font-size:12px;font-weight:600}
.doc-chip button{border:0;background:#00568A;color:#fff;width:18px;height:18px;border-radius:50%;
  cursor:pointer;font-size:12px;line-height:1;padding:0}
.doc-range{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#64748b}
.doc-range input{border:1px solid #d7dfe8;border-radius:6px;padding:6px 8px;font:inherit;font-size:12px}
.doc-paging{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;
  font-size:12px;color:#64748b}
.doc-paging[hidden]{display:none}

/* Search that also browses. A box you can only type into is no help to somebody who does not
   know what the borrower is called, which is most of the time on a portfolio you have not
   memorised — so the arrow opens the whole list. */
.doc-find{position:relative;display:inline-flex;align-items:center}
.doc-find input{padding-right:30px}
.doc-find-open{position:absolute;right:4px;border:0;background:transparent;color:#64748b;
  cursor:pointer;font-size:13px;line-height:1;padding:4px 6px;border-radius:5px}
.doc-find-open:hover{background:#eef3f7;color:#0f172a}

/* Filing a document that reached the team some other way — by email, by hand, by post. */
.small.upload{color:#00568A;border-color:#b6d9ee;background:#f4fbff;font-weight:700}
.small.upload:hover{background:#e8f6fe}

/* What was asked for, beside the document. `nature` and the signature requirement were both
   collected on the form, stored, returned by the API — and drawn on no screen at all. A field
   people fill in that nobody ever sees is a field that quietly stops being filled in. */
.pdd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.pdd-tags:empty{display:none}
.pdd-nature{background:#eef3f7;color:#475569;border-radius:20px;padding:1px 9px;font-size:10.5px;font-weight:700}
.pdd-sig{background:#fff7ed;color:#9a3412;border-radius:20px;padding:1px 9px;font-size:10.5px;font-weight:700}

/* Long free text must never widen a table.
   A returned-document reason is a Text column and can legitimately be a paragraph. Worse, a long
   value with NO SPACES — a reference number, a URL — cannot wrap at all and pushes the table
   sideways until the action buttons leave the screen. Clamped in the renderer as well; this is
   the belt to that pair of braces. */
.ctable td.clause-text{max-width:420px}
.pdd-returned,.pdd-tags,.ctable td.clause-text .meta{overflow-wrap:anywhere;word-break:break-word}
.pdd-returned{max-height:4.5em;overflow:hidden}

/* ---- borrowers: the portfolio as a table ---------------------------------
   A card per borrower showed eight on a laptop screen and rendered two
   hundred. This is the same information on one line each, so about
   twenty-five are in view and the numbers line up down the page — which is
   what makes "who needs attention" answerable by looking rather than by
   scrolling. The row opens in place; its facilities are fetched then. */
.btable-wrap{border:1px solid #e8edf3;border-radius:11px;overflow:hidden;background:#fff}
.blist{width:100%;border-collapse:collapse;font-size:12.5px}
.blist thead th{background:#f8fafc;text-align:left;padding:9px 14px;font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid #e8edf3;white-space:nowrap}
.blist thead th.n{text-align:right}
.blist td{padding:9px 14px;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:middle}
.blist tbody tr.brow{cursor:pointer}
.blist tbody tr.brow:hover{background:#f4fbff}
.blist tr.brow.open{background:#f4fbff}
.blist .bname{font-weight:600;color:#0f172a}
/* The identifiers are for recognising the right company, not for reading, so they stay on one
   line and are cut rather than wrapped — a borrower with a PAN, CIN and GSTIN would otherwise
   be three lines tall and halve how many rows fit. */
.blist .bmeta{font-size:10.5px;color:#94a3b8;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
/* Tabular figures, so the columns line up down the page and an outlier is visible. */
.blist td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.blist td.n b{font-size:13px;color:#0f172a;font-weight:700}
.blist .warnnum{color:#b45309}
.blist .zero{color:#cbd5e1}
.blist td.bchev{color:#94a3b8;width:28px}
.blist td.empty{text-align:center;color:#94a3b8;padding:28px}
.blist tr.bdetail-row td{background:#fbfcfe;padding:0;border-bottom:1px solid #e8edf3}
.bdetail{padding:4px 0 0}
.bdetail .facility-row{cursor:pointer}
.bdetail-acts{display:flex;gap:8px;padding:10px 16px 12px;border-top:1px solid #eef2f7}

/* ---- onboarding: choosing a client already on file -----------------------
   The search box replaced a <select>, and the form's field styling is written
   as `.grid input, .existing select` — an INPUT inside `.existing` matches
   neither, so it would have rendered as an unstyled browser default beside
   fields that are 100% wide with a border and 38px of height. The same fault
   once shipped an unstyled textarea. These rules put it back in the form.
   `.existing` is capped at 48% width, so the control must fill its label
   rather than shrink to its content the way `.doc-find` does in a filter bar. */
.existing .doc-find{display:flex;width:100%;margin-top:6px}
.existing .doc-find input[type=search]{
  display:block;width:100%;min-height:38px;margin:0;padding:9px 30px 9px 10px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);
  font:13px 'Segoe UI',sans-serif
}
.existing .doc-find input[type=search]:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--brand)18
}
/* The hint under the box is guidance, not the red validation message `.grid small` is. */
.existing label > small{
  display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:400;line-height:1.4
}
/* The dropdown hangs off the box, and the panel below it is narrow — it may be wider than
   its parent without pushing anything sideways. */
.existing .doc-dropdown{min-width:100%;max-width:420px}
/* The chip sits under the box here, not tucked up under a filter bar. */
.existing .doc-chosen{margin:10px 0 0}

/* ---- the master's standard, under the limit read from the letter ---------
   Never applied: the borrower is held to their own letter (D-56). It is shown
   so the checker can judge the figure in front of them against UCIC's own,
   and deliberately quiet — it is context, not a term. Where the two disagree
   it says so, because that is the case worth a second look. */
.limit-standard{
  margin-top:4px;font-size:10px;line-height:1.35;color:#94a3b8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px
}
.limit-standard.differs{color:#b45309;font-weight:600}

/* A field that is fixed rather than merely empty, on the covenant-master form. */
.master-form label.muted{opacity:.55}
.master-form label.muted input,.master-form label.muted select{background:#f1f5f9;cursor:not-allowed}
#mf-fixed-note{display:block;color:var(--muted);font-size:11px;line-height:1.45;font-weight:400;margin-top:2px}
#mf-fixed-note[hidden]{display:none}

/* A submitted attachment, as something to press rather than a name to read. */
.filelink{font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:2px}
.finding-meta .filelink{color:inherit}

/* What the sanction letter's own table gives for this breach. Guard's arithmetic, offered —
   never applied on its own, so it reads as a proposal rather than a decision. */
.meta.proposed{color:var(--navy);background:var(--teal-pale);border-radius:6px;padding:6px 9px;margin-top:5px}

/* ---- the outcome report: one borrower, cycles on a timeline --------------- */
.oc-freq{margin-bottom:22px}
.oc-freq h3{font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.oc-cycle{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px;overflow:hidden}
.oc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid #f1f5f9}
.oc-head b{font-size:13px;color:#0f172a}
.oc-head .meta{font-size:11px;color:var(--muted)}
.oc-totals{display:flex;gap:18px;flex-wrap:wrap;padding:9px 14px;background:#fbfcfe;font-size:12px;color:var(--muted)}
.oc-totals b{color:#0f172a;font-size:13px}
.oc-totals .bad b{color:#b45309}

/* A recorded assessment, read back.
 *
 * Once an outcome is frozen the dialog is a record, not a form: the inputs are all disabled, and
 * drawn as boxes they read as fields somebody forgot to fill rather than as the answer. Flatten
 * them to plain values and keep the caption, so the whole card scans as "this is what happened".
 */
.frozen .master-form input:disabled,
.frozen .master-form select:disabled,
.frozen .master-form textarea:disabled{
  background:transparent;border-color:transparent;padding-left:0;padding-right:0;color:#0f172a;
  font-weight:600;resize:none;opacity:1;-webkit-text-fill-color:#0f172a}
.frozen .master-form label{border-bottom:1px solid #eef2f7;padding-bottom:8px}
.frozen .master-form label:last-child{border-bottom:0}
/* The dropdown arrow, the required asterisk and the "how to fill this in" hints all describe an
   act that is over. On a record they are three kinds of noise. */
.frozen .master-form select:disabled{appearance:none;-webkit-appearance:none;background-image:none}
.frozen .master-form label em,
.frozen .master-form label small{display:none}
.frozen .master-form textarea:disabled{min-height:0;height:auto}


/* The assessment dialog is shaped by `.modal-card` like every other dialog here; the only
   thing it needs of its own is room, because it carries the clause, what arrived, what Guard
   found, the outcome and the period's trail. */
#assess-pane{width:min(980px,100%)}

/* The row the dialog was opened from, so closing it returns you to your place. */
#mon-table tr.open>td{background:var(--brand-pale,#E8F6FE)}
.ctable .pill.act{background:var(--brand-pale,#E8F6FE);color:var(--navy)}
.ctable .pill.bad{background:#fbeeed;color:#b23a48}
.ctable .pill.done{background:#e6f3ec;color:#2e7d5b}
.meta.corrected{color:#b23a48;font-weight:600}

/* The borrower's standing facts, as the header of the screen rather than a caption under it. */
#mon-borrower-card{display:flex;gap:28px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:15px 18px;margin:12px 0 14px}
#mon-borrower-card .f{display:block;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted)}
#mon-borrower-card .v{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-top:1px}
#mon-borrower-card .v.bad{color:var(--red)}
#mon-borrower-card .meta{display:block;font-size:11.5px;color:var(--muted)}
/* A rhythm and the cycles that run on it. */
.rhythm{margin-bottom:6px}
.rhythm-head{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--navy);margin:16px 0 8px;display:flex;align-items:baseline;gap:9px}
.rhythm-head span{font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
/* The right-hand column before anything is chosen. */
#wq-empty{background:#fff;border:1px dashed var(--line);border-radius:11px;color:var(--muted);
  padding:56px 20px;text-align:center;font-size:12.5px}

/* "All borrowers" sits with the card it leaves, not floating above it. */
#mon-back{margin:12px 0 0}
#mon-summary:empty{display:none}

/* Why a figure was corrected, beside the figure. Mandatory in the rules (E-MON7, C-05) and
   shown nowhere until 14 September 2026. */
/* `.master-form label.wide` is scoped to labels, and this is a div — so it took one column and
   sat beside the outcome instead of under the figure it explains. */
.master-form .correction-note{grid-column:1 / -1}
.correction-note{background:var(--amber-pale,#fbf1e0);border-left:3px solid var(--amber,#b26a00);
  border-radius:0 8px 8px 0;padding:9px 12px;font-size:12.5px;color:#4a3a1a}
.correction-note b{display:block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--amber,#b26a00);margin-bottom:2px}
.correction-note .who{font-size:11.5px;color:#7a6a4a;margin-top:3px}

/* The period's own trail. Sealed since the first day and reachable only through the API. */
.trail{border:1px solid var(--line);border-radius:9px;margin-top:14px;overflow:hidden}
.trail>.head{padding:8px 13px;background:#fbfcfe;border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:800}
.trailrow{display:grid;grid-template-columns:150px 1fr 150px;gap:10px;padding:8px 13px;
  border-bottom:1px solid #eef2f7;font-size:12px;align-items:baseline}
.trailrow:last-child{border-bottom:0}
.trailrow .when{color:var(--muted);font-size:11.5px}
.trailrow .who{color:var(--muted);font-size:11.5px;text-align:right}
@media(max-width:900px){.trailrow{grid-template-columns:1fr}.trailrow .who{text-align:left}}

/* What was attached, and what was not. Silence on a compliance record cannot be read: "nothing
   was sent" and "the screen is not showing it" look the same. */
.attempt .no-doc{color:#94a3b8}
.attempt .no-evidence{color:var(--amber,#b26a00);font-weight:700}

/* The senior's reason for closing a period without its certificate. Red rather than amber: a
   correction is ordinary work, waiving a required certificate is an exception. */
.override-note{background:var(--red-pale,#fbeeed);border-left-color:var(--red,#b23a48);color:#5a2b30}
.override-note b{color:var(--red,#b23a48)}
.override-note .who{color:#8a5b60}

/* Breach cases, in the review table's shape. */
#br-list .row-action.decide{min-width:210px;white-space:normal;text-align:left}
#br-list .row-action .small{margin:0 4px 4px 0}
/* Why an action is not offered. A button you may not press reads as permission; a sentence
   saying who may press it reads as a rule. */
#br-list .meta.blocked{color:var(--muted);font-style:italic;max-width:220px}
#br-list tr.attention>td{background:#fffaf2}
#br-list .said{font-size:12.5px;color:var(--ink);margin-bottom:5px}
#br-list .said b{color:var(--navy)}
#br-list .callout{margin:6px 0 0;font-size:12px}
.pill.act{background:var(--brand-pale,#E8F6FE);color:var(--navy)}
.pill.done{background:#e6f3ec;color:#2e7d5b}

/* The case columns have to hold paragraphs — the breach as it was put to the borrower, and the
   borrower's answer — so they wrap to a readable measure instead of running off the table. */
#br-list td{vertical-align:top}
#br-list .clause-text{max-width:380px;white-space:normal}
#br-list td:last-child{max-width:420px;white-space:normal}
#br-list .callout{white-space:normal}

/* ---- Portfolio behaviour (D-90) -----------------------------------------
   Four readings side by side, and a band that is the worst of them. The scores
   carry their own working in the cell rather than behind a click, because this
   page is read in a pack by people who will not click. */
.band {
  display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 4px;
  font-weight: 700; font-size: 13px; text-align: center; letter-spacing: .02em;
}
.band-A { background: #d8f0dd; color: #14532d; }
.band-B { background: #e6f0d8; color: #3f5314; }
.band-C { background: #fdf0d5; color: #7c4a03; }
.band-D { background: #fadcdc; color: #7f1d1d; }
.band-NEW { background: #e8eaed; color: #55585c; font-size: 11px; letter-spacing: 0; }

.band-tile { text-align: center; }
.band-tile .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.band-tile b { display: block; font-size: 24px; line-height: 1.2; }
.band-tile small { opacity: .75; }
.band-tile.band-A { border-top: 3px solid #2f855a; }
.band-tile.band-B { border-top: 3px solid #7aa116; }
.band-tile.band-C { border-top: 3px solid #c07b12; }
.band-tile.band-D { border-top: 3px solid #b23b3b; }
.band-tile.band-NEW { border-top: 3px solid #b4b8bd; }

td.dim { vertical-align: top; min-width: 132px; }
td.dim b { font-size: 15px; }
.dim-good { color: #1d7a45; }
.dim-ok   { color: #5f7a12; }
.dim-warn { color: #a66a08; }
.dim-bad  { color: #a92f2f; }
.dim-none { color: #9aa0a6; }
.dim-vs { display: block; font-size: 10px; opacity: .65; }
.dim-why {
  display: block; font-size: 10.5px; line-height: 1.35; opacity: .8; margin-top: 3px;
  max-width: 230px; white-space: normal;
}
#pf-table th small { display: block; font-weight: 400; font-size: 10px; opacity: .65; }

/* ---- The scoring engine (D-90) -------------------------------------------
   UCIC's policy, edited here. A slider and a number for each setting: the
   slider to explore, the number to be exact, because a credit committee will
   want 40 rather than "about 40". */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin: 12px 0 18px; }
.sc-panel { border: 1px solid #e3e6ea; border-radius: 8px; padding: 14px 16px; background: #fff; }
.sc-panel h3 { margin: 0 0 4px; font-size: 14px; }
.sc-panel .asof-meta { margin: 0 0 10px; }
.sc-row { display: grid; grid-template-columns: 1fr 120px 62px; align-items: center; gap: 10px; margin-bottom: 9px; }
.sc-label { font-size: 13px; font-weight: 600; }
.sc-label small { display: block; font-weight: 400; font-size: 11px; opacity: .7; line-height: 1.3; }
.sc-number { width: 58px; padding: 4px 6px; text-align: right; }
.sc-save { display: flex; align-items: flex-end; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.sc-reason { flex: 1 1 420px; font-size: 12px; font-weight: 600; }
.sc-reason input { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; font-weight: 400; }
#sc-history td small { display: block; opacity: .75; }

/* The explainer at the top of the scoring tab. It exists because the panels alone
   read as four independent settings, and they are four steps of one calculation. */
.sc-explain { border: 1px solid #dfe3e8; border-left: 3px solid #0b5aa2; border-radius: 6px;
  padding: 12px 18px 14px; margin: 12px 0 4px; background: #fbfcfd; }
.sc-explain h3 { margin: 0 0 8px; font-size: 14px; }
.sc-explain ol { margin: 0; padding-left: 20px; }
.sc-explain li { font-size: 12.5px; line-height: 1.55; margin-bottom: 5px; }
.sc-explain p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55;
  padding-top: 9px; border-top: 1px dashed #d8dde3; }

/* ---- Borrower detail: the verdict, the readings, what is wrong now -------
   Rebuilt 15 September 2026. It opened on four percentages above a dot matrix,
   and the honest answer to "what will they understand from this" was: not much. */
.bd-verdict { display: flex; gap: 18px; align-items: flex-start; border: 1px solid #e3e6ea;
  border-left-width: 5px; border-radius: 8px; padding: 14px 18px; margin: 12px 0 4px; background: #fff; }
.bd-verdict.band-A { border-left-color: #2f855a; }
.bd-verdict.band-B { border-left-color: #7aa116; }
.bd-verdict.band-C { border-left-color: #c07b12; }
.bd-verdict.band-D { border-left-color: #b23b3b; }
.bd-verdict.band-NEW { border-left-color: #b4b8bd; }
.bd-band { text-align: center; min-width: 76px; }
.bd-band .band { font-size: 26px; padding: 8px 14px; display: block; }
.bd-band-word { display: block; font-size: 11px; opacity: .7; margin-top: 5px; }
.bd-why { font-size: 13px; line-height: 1.5; }
.bd-why p { margin: 7px 0 0; font-size: 12.5px; opacity: .88; }

.bd-readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.bd-reading { border: 1px solid #e3e6ea; border-radius: 8px; padding: 12px 14px; background: #fff; }
.bd-q { font-size: 12.5px; font-weight: 600; min-height: 32px; }
.bd-a { font-size: 25px; font-weight: 700; line-height: 1.25; margin: 2px 0 4px; }
.bd-detail { font-size: 11.5px; line-height: 1.45; opacity: .8; }

ul.bd-attention { margin: 6px 0 0; padding-left: 20px; }
ul.bd-attention li { font-size: 13px; line-height: 1.7; }
.bd-clear { font-size: 13px; color: #1d7a45; margin: 6px 0 0; }
td.bd-record { font-size: 12.5px; line-height: 1.5; max-width: 320px; }

/* The trend table: overlapping twelve-month windows, an arrow against the one before. */
table.bd-trend td small { display: block; font-size: 10.5px; opacity: .65; }
table.bd-trend th.n small { display: block; font-weight: 400; }

/* How late a submission was. Was clipped to "L…" at the end of the widest column. */
.late-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 3px;
  background: #fadcdc; color: #7f1d1d; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
small.rec-late { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }

/* Nothing chosen on Borrower detail. One prompt, at the top, instead of every
   heading and filter of an empty page. */
.bd-empty { border: 1px dashed #cfd6dd; border-radius: 8px; padding: 22px 24px;
  margin: 10px 0 4px; background: #fbfcfd; }
.bd-empty b { font-size: 14px; }
.bd-empty p { margin: 6px 0 0; font-size: 12.5px; opacity: .8; }

/* ---- One breach case, told in order --------------------------------------
   The register said how many and how old; it gave no way to read what was
   actually asked, what the borrower answered, or why it closed as it did. */
tr.br-row { cursor: pointer; }
tr.br-row:hover { background: #f5f8fb; }
tr.br-row.open { background: #eef4fa; }
tr.br-row .twist { display: inline-block; width: 12px; opacity: .55; }
.br-story { padding: 12px 8px 14px 30px; }
.br-covenant { font-size: 13px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #e3e6ea; }
.br-covenant small { display: block; font-size: 11.5px; opacity: .7; margin-top: 3px; line-height: 1.45; }
.br-step { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 7px 0 7px 12px;
  border-left: 3px solid #d5dae0; margin-left: 4px; }
.br-step.bad { border-left-color: #b23b3b; }
.br-step.late { border-left-color: #c07b12; }
.br-step.waiting { border-left-color: #c07b12; border-left-style: dashed; }
.br-step.done { border-left-color: #2f855a; }
.br-when { font-size: 11.5px; opacity: .7; padding-top: 1px; }
.br-what { font-size: 12.5px; line-height: 1.5; }
.br-what p { margin: 3px 0 0; opacity: .88; }
.br-who { font-size: 11.5px; opacity: .7; }

/* The same covenant breached in more than one period: a pattern, not a duplicate row. */
.repeat-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 3px;
  background: #fdf0d5; color: #7c4a03; font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Contact persons at the borrower — UCIC's task 3 asks for four, so all four are on the face of
   the screen. A <fieldset> groups them semantically; its default border and inset padding would
   make the block look like a different kind of thing from the rest of the form, so both go and a
   rule above the legend does the separating instead. */
fieldset.people{border:0;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
fieldset.people legend{padding:0;font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--teal)}
fieldset.people>p{margin:2px 0 14px;font-size:12px;color:var(--muted)}