/* app.css — "Manage Mortgage" wide modal. Theme-aware: every colour keys off
   :root[data-theme="light|dark"], set by app.js from the Pipedrive user setting. */

:root[data-theme="light"] {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border: #dce1e6;
  --text: #1a232b;
  --text-dim: #5a6b78;
  --primary: #2b6cb0;
  --primary-ink: #ffffff;
  --primary-hover: #245a94;
  --ok-bg: #e5f5ec; --ok-fg: #1c7a45; --ok-bd: #b6e2c8;
  --bad-bg: #fdecec; --bad-fg: #b42323; --bad-bd: #f4c4c4;
  --warn-bg: #fff5e0; --warn-fg: #9a6a00; --warn-bd: #f2dca6;
  --busy-bg: #eef3f8; --busy-fg: #3a5a76;
  --field-bd: #c3ccd5; --field-bd-hov: #98a6b2;
  --shadow: 0 1px 2px rgba(16,32,48,.06), 0 2px 8px rgba(16,32,48,.05);
}
:root[data-theme="dark"] {
  --bg: #14191f;
  --surface: #1c232b;
  --surface-2: #222b34;
  --border: #313c47;
  --text: #e7edf2;
  --text-dim: #9db0bf;
  --primary: #4a9eea;
  --primary-ink: #08121c;
  --primary-hover: #6bb2f0;
  --ok-bg: #16342440; --ok-fg: #5fd39a; --ok-bd: #2c5a42;
  --bad-bg: #3a1c1c40; --bad-fg: #f19a9a; --bad-bd: #6a3232;
  --warn-bg: #3a2e0f40; --warn-fg: #f0cf7f; --warn-bd: #6a5a2a;
  --busy-bg: #22303c; --busy-fg: #a8c4dc;
  --field-bd: #63727f; --field-bd-hov: #8a99a7;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mm {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3vw, 32px) 40px;
}

/* Header */
.mm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mm-title { margin: 0 0 2px; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.mm-context { color: var(--text-dim); font-size: 13.5px; }
.mm-context .mm-ifms { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.mm-owner {
  flex: none;
  color: var(--text-dim);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* The whole header block sticks, not just the tabs: breadcrumb + client + tabs stay
   put while a tab scrolls. The Finmo ratio strip sticks just BELOW it, so its offset
   is driven off the same --mm-stick-h rather than a second hardcoded number. */
.mm-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding-top: 4px;
  /* Bleed to the shell's horizontal padding so the backdrop covers edge to edge. */
  margin: 0 calc(-1 * clamp(16px, 3vw, 32px));
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}
/* Only once stuck: a hairline + shadow so content scrolling under it reads as under. */
.mm-sticky.is-stuck { border-bottom: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
:root[data-theme="dark"] .mm-sticky.is-stuck { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.mm-sticky .mm-head { border-bottom: none; padding-bottom: 6px; }

/* Section nav (tabs). */
.mm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg);
  padding: 4px 0 8px;
  margin: 0;
}

/* Breadcrumb — the way back to the dashboard, and whose file this is. */
.mm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.mm-crumb-link { color: var(--text-dim); text-decoration: none; font-weight: 550; }
.mm-crumb-link:hover { color: var(--primary); text-decoration: underline; }
.mm-crumb-sep { color: var(--text-dim); opacity: .6; }
.mm-crumb-here { color: var(--text); font-weight: 650; }
.mm-crumb-here .mm-ifms { font-variant-numeric: tabular-nums; color: var(--text-dim); font-weight: 600; margin-left: 6px; }

.mm-theme { display: inline-flex; align-items: center; margin-left: 6px; }
/* On the dashboard there are no cross-system links to sit beside, so the toggle
   pushes itself to the right edge of the header on its own. */
body.is-board .mm-theme { margin-left: auto; }

/* "Open this file over there" — Pipedrive / Finmo / GHL / Inbox, all new tabs. */
.mm-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.mm-link {
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--text-dim); border: 1px solid var(--border); background: var(--surface);
  border-radius: 7px; padding: 4px 9px;
}
.mm-link:hover { color: var(--text); border-color: var(--field-bd-hov); background: var(--surface-2); }
.mm-link[aria-disabled="true"] { opacity: .4; pointer-events: none; }
@media (max-width: 700px) {
  .mm-links { margin-left: 0; width: 100%; }
  .mm-link { flex: 1 1 auto; text-align: center; }
}
.mm-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 550;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mm-tab:hover { background: var(--surface-2); color: var(--text); }
.mm-tab.is-active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }

/* "Open in new tab" — opens the modal standalone so it can sit side-by-side with
   the Pipedrive deal instead of covering it. Hidden until the deal context loads. */
.mm-newtab {
  flex: none;
  align-self: center;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 4px 11px;
  white-space: nowrap;
  cursor: pointer;
}
.mm-newtab:hover { background: var(--surface-2); }

/* Body / panes — min-width:0 lets flex/grid children shrink to the modal width
   instead of forcing horizontal overflow (Documents/Finmo content stays in-bounds). */
.mm-body { min-height: 200px; min-width: 0; }
.mm-pane { animation: mm-fade .15s ease; min-width: 0; max-width: 100%; }
.docs-body, .finmo-app { min-width: 0; }
@keyframes mm-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ── Documents section (class names shared with documents-core.js) ─────────── */
.docs-state { color: var(--text-dim); padding: 24px 4px; }
.docs-state .err { color: var(--bad-fg); }
.docs-empty { color: var(--text-dim); padding: 20px 4px; }

.docs-head { margin-bottom: 14px; }
.docs-title { font-size: 16px; font-weight: 650; }
.docs-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }

.doc-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.doc-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.doc-item:first-child { border-top: none; }
.doc-name { font-weight: 500; word-break: break-word; }
.doc-meta { flex: none; color: var(--text-dim); font-size: 12px; text-transform: capitalize; }
.doc-empty { color: var(--text-dim); justify-content: flex-start; }

.docs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.docs-btn {
  appearance: none;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
  font: inherit;
  font-weight: 560;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
.docs-btn:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.docs-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-note { font-weight: 400; opacity: .85; }

/* Progress line */
.docs-progress {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--busy-bg);
  color: var(--busy-fg);
  border: 1px solid var(--border);
}
.docs-progress a { color: inherit; font-weight: 600; }
.docs-progress.is-done { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.docs-progress.is-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.docs-progress.is-error { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }

/* ID badge */
.id-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
}
.id-badge .id-mark { font-weight: 800; }
.id-badge.is-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.id-badge.is-bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.id-badge.is-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.id-badge.is-busy { background: var(--busy-bg); color: var(--busy-fg); }
.id-badge .id-recheck { color: inherit; opacity: .85; }
.id-badge .id-note { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; cursor: help; }

/* Per-borrower ID/KYC verification (L9/L10) — one row per borrower */
.id-verify { margin-top: 10px; display: block; }
.id-verify-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.id-verify-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.id-verify-head .id-recheck { font-size: 12px; color: inherit; opacity: .85; }
.id-verify-head .id-note { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; cursor: help; }
.id-verify-rows { display: flex; flex-direction: column; gap: 5px; }
.id-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 12px; border-radius: 8px; font-size: 12.5px; flex-wrap: wrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
}
.id-row-name { font-weight: 600; color: var(--text); }
.id-row-verdict { display: inline-flex; align-items: center; gap: 6px; }
.id-row .id-mark { font-weight: 800; }
.id-row.is-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.id-row.is-ok .id-row-name { color: var(--ok-fg); }
.id-row.is-bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.id-row.is-bad .id-row-name { color: var(--bad-fg); }
.id-row.is-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.id-row.is-warn .id-row-name { color: var(--warn-fg); }
.id-row.is-busy { background: var(--busy-bg); color: var(--busy-fg); }
.id-row-act { margin-left: 8px; white-space: nowrap; }
.id-row-act a { font-size: 12px; color: inherit; opacity: .8; text-decoration: underline; cursor: pointer; }
.id-row-act a:hover { opacity: 1; }

.err { color: var(--bad-fg); }

/* ── Grouped documents (borrower/DP collapsible cards + sub-headers) ─────────── */
.mdoc-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 4px 0 10px; font-size: 11.5px; color: var(--text-dim); }
.mdoc-legend-k { display: inline-flex; align-items: center; gap: 6px; }
.mdoc-legend .mdoc-woff { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 6px; padding: 2px 8px; }

.mgrp-list { margin-bottom: 14px; }
.mgrp { border: 1px solid var(--border); border-radius: 11px; margin: 9px 0; overflow: hidden; background: var(--surface); }
.mgrp-bar { display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; background: color-mix(in srgb, var(--surface) 90%, var(--bg)); }
.mgrp-chev { color: var(--text-dim); font-size: 11px; width: 11px; flex: none; }
.mgrp-title { font-weight: 700; font-size: 13.5px; }
.mgrp-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.mgrp-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.mgrp-sum { font-size: 11px; color: var(--text-dim); }
.mgrp-count { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; }
.mgrp-body { border-top: 1px solid var(--border); }
.mgrp.is-collapsed .mgrp-body { display: none; }

.msub { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: 8px 13px 2px; }
.msub-n { opacity: .7; }

.mdoc-row { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-top: 1px solid var(--border); }
.msub + .mdoc-row { border-top: none; }
.mdoc-row.is-busy { opacity: .55; }
.mdoc-cloud { flex: none; width: 18px; text-align: center; cursor: help; font-size: 14px; line-height: 1; }
.mdoc-cloud.is-in { color: var(--ok-fg); }
.mdoc-cloud.is-out { color: var(--text-dim); opacity: .5; }
.mdoc-name { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdoc-right { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.mdoc-status { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.mdoc-status.s-ok { color: var(--ok-fg); background: var(--ok-bg); }
.mdoc-status.s-attn { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.mdoc-status.s-review { color: var(--busy-fg); background: var(--busy-bg); }
.mdoc-actions { display: flex; align-items: center; gap: 6px; }
.mdoc-mini { font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.mdoc-mini:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.mdoc-mini.ok:hover:not(:disabled) { border-color: var(--ok-bd); color: var(--ok-fg); }
.mdoc-mini.attn:hover:not(:disabled) { border-color: var(--warn-bd); color: var(--warn-fg); }
.mdoc-mini.bad:hover:not(:disabled) { border-color: var(--bad-bd); color: var(--bad-fg); }
.mm-ic-ok { color: var(--ok-fg); font-weight: 800; }
.mm-ic-bad { color: var(--bad-fg); font-weight: 800; }
.mdoc-mini:disabled { opacity: .45; cursor: not-allowed; }
.mdoc-move { font-size: 11.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; max-width: 150px; cursor: pointer; }
.mdoc-move:disabled { opacity: .45; cursor: not-allowed; }
.mdoc-empty { padding: 10px 14px; font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.mdoc-comment { display: flex; align-items: center; gap: 6px; }
.mdoc-comment-in { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); min-width: 200px; }

/* In-modal document viewer ("looker window") */
/* Darker scrim so the modal behind clearly recedes, and a bold high-contrast
   border so the preview reads as a SEPARATE floating window (was blending into
   the dark modal → staff kept hitting the modal's ✕ and closing everything). */
.mdoc-viewer { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(6,10,16,.74); padding: 24px; }
.mdoc-viewer .mv-panel { width: min(1000px, 100%); height: min(90vh, 100%); background: var(--surface); border: 2px solid var(--field-bd); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 55px rgba(0,0,0,.32); display: flex; flex-direction: column; overflow: hidden; }
:root[data-theme="dark"] .mdoc-viewer .mv-panel { border-color: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.7); }
.mdoc-viewer .mv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mdoc-viewer .mv-title { font-weight: 650; font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdoc-viewer .mv-open { flex: none; font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; padding: 4px 8px; border-radius: 7px; }
.mdoc-viewer .mv-open:hover { background: var(--bg); text-decoration: underline; }
/* Distinct, labelled close button so it's not confused with the modal's own ✕. */
.mdoc-viewer .mv-close { flex: none; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--field-bd); cursor: pointer; padding: 5px 10px; border-radius: 7px; }
.mdoc-viewer .mv-close:hover { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.mdoc-viewer .mv-body { flex: 1; min-height: 0; background: var(--bg); overflow: auto; }
.mdoc-viewer .mv-frame { width: 100%; height: 100%; border: none; }
.mdoc-viewer .mv-zoom, .mdoc-viewer .mv-rot { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.mdoc-viewer .mv-zbtn { width: 26px; height: 26px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.mdoc-viewer .mv-zbtn:hover { border-color: var(--primary); color: var(--primary); }
.mdoc-viewer .mv-zlabel { font-size: 12px; color: var(--text-dim); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.mdoc-viewer .mv-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; }
.mdoc-viewer .mv-page { box-shadow: var(--shadow); background: #fff; max-width: none; }
.mdoc-viewer .mv-img { display: block; margin: 14px auto; max-width: 100%; box-shadow: var(--shadow); transform-origin: center center; transition: transform .15s ease; }
.mdoc-viewer .mv-loading { padding: 30px; text-align: center; color: var(--text-dim); font-size: 13px; }
.mdoc-viewer .mv-loading.err { color: var(--bad-fg); }

/* ── Category-centric Documents tab (dgrp / dcat / dfile) ───────────────────── */
.mdoc-legend .mdoc-hint { color: var(--text-dim); font-style: italic; }

.dtoolbar { display: flex; gap: 8px; margin: 2px 0 10px; }

/* Add-request picker */
.addreq {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  padding: 12px 14px; margin-bottom: 14px;
}
.addreq-loading, .addreq-err { font-size: 12.5px; color: var(--text-dim); }
.addreq-err { color: var(--bad-fg); }
.addreq-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.addreq-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); min-width: 240px; }
.addreq-combo { position: relative; width: 340px; max-width: 100%; }
.addreq-search { font: inherit; width: 100%; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.addreq-search:focus { outline: none; border-color: var(--primary); }
.addreq-results {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
.addreq-opt { padding: 7px 10px; font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--border); }
.addreq-opt:first-child { border-top: none; }
.addreq-opt:hover, .addreq-opt.is-active { background: var(--surface-2); }
.addreq-opt.is-none { color: var(--text-dim); font-style: italic; cursor: default; }
.addreq-bs { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 2px; }
.addreq-b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.addreq-nob { font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.addreq-actions { display: flex; align-items: center; gap: 8px; }
.addreq-flash { font-size: 12px; color: var(--text-dim); }
.addreq-flash.err { color: var(--bad-fg); }

/* Group band (borrower income / down payment / identity / other) */
.dgrp { margin: 0 0 16px; }
.dgrp-head { display: flex; align-items: baseline; gap: 9px; padding: 2px 2px 8px; }
.dgrp-title { font-weight: 700; font-size: 13.5px; }
.dgrp-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.dgrp-roll { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }
.dgrp-review { display: inline-flex; gap: 6px; align-items: center; align-self: center; }
.dgrp-review > button { font-size: 12px; padding: 4px 10px; white-space: nowrap; }
.dgrp-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 2px 2px 8px; }

/* Category card (the collapsible slot) */
.dcat {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow); margin: 8px 0; overflow: hidden;
  transition: box-shadow .12s, border-color .12s, opacity .12s;
}
.dcat.is-s-ok { border-left-color: var(--ok-fg); }
.dcat.is-s-attn { border-left-color: var(--warn-fg); }
.dcat.is-s-review { border-left-color: var(--primary); }
.dcat.is-s-req { border-left-color: var(--text-dim); }
.dcat.is-busy { opacity: .55; }
.dcat.is-drop { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }

.dcat-bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px; flex-wrap: wrap; cursor: pointer; user-select: none; }
.dcat-bar:hover { background: color-mix(in srgb, var(--surface) 90%, var(--bg)); }
.dcat-bar:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dcat-chev { display: inline-block; font-size: 11px; width: 12px; color: var(--text-dim); flex: none; }
.dcat-actions, .dcat-commentbox { cursor: default; }
.dcat-name { font-weight: 650; font-size: 13.5px; }
.dcat-pill { font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.dcat-pill.s-ok { color: var(--ok-fg); background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.dcat-pill.s-attn { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.dcat-pill.s-review { color: var(--busy-fg); background: var(--busy-bg); border: 1px solid var(--border); }
.dcat-pill.s-req { color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); }
.dcat-who { font-size: 10.5px; font-weight: 700; color: var(--primary); background: var(--busy-bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.dcat-count { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; }
.dcat-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dcat-del { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); width: 28px; height: 27px; border-radius: 7px; cursor: pointer; line-height: 1; flex: none; }
.dcat-del:hover:not(:disabled) { border-color: var(--bad-bd); color: var(--bad-fg); }
.dcat-del:disabled { opacity: .45; cursor: not-allowed; }
.dcat-commentbox { display: flex; align-items: center; gap: 6px; flex-basis: 100%; margin-top: 6px; }

.dcat-body { border-top: 1px solid var(--border); }
.dcat.is-collapsed .dcat-body { display: none; }
.dcat-comment { font-size: 12px; color: var(--warn-fg); background: var(--warn-bg); border-bottom: 1px solid var(--warn-bd); padding: 6px 13px; }
.dcat-comment .dcat-cn { opacity: .75; }
.dcat-files { display: flex; flex-direction: column; }
.dcat-empty { padding: 10px 14px; font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.dcat-foot { padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dcat-hidden-toggle { appearance: none; border: none; background: none; color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px 14px; }
.dcat-hidden-toggle:hover { text-decoration: underline; }
/* Per-category upload affordance (file-picker + OS file-drop target) */
.dcat-upload { margin-left: auto; padding: 6px 14px; }
.dcat-upbtn { appearance: none; border: 1px dashed var(--border); background: none; color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 7px; }
.dcat-upbtn:hover { background: var(--surface-2); border-color: var(--primary); }
.dcat-upbtn:disabled { opacity: .5; cursor: default; }
.dcat.is-dropover { outline: 2px dashed var(--primary); outline-offset: -2px; }
.dcat.is-dropover .dcat-body { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.dcat-hiddenlist { border-top: 1px dashed var(--border); background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }
.dcat-hiddenhead { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: 8px 14px 2px; }

/* File row inside a category (draggable to move) */
.dfile { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-top: 1px solid var(--border); }
.dcat-files .dfile:first-child { border-top: none; }
.dfile[draggable="true"] { cursor: grab; }
.dfile.is-dragging { opacity: .45; }
.dfile.is-hidden { opacity: .8; }
.dfile.is-viewable .mdoc-name { cursor: pointer; }
.dfile.is-viewable:hover .mdoc-name { text-decoration: underline; color: var(--text); }
.dfile-actions { position: relative; margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.dmove-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 20; min-width: 210px; max-width: 320px;
  max-height: 280px; overflow: auto; padding: 4px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: left;
}
.dmove-head { font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 4px 8px; }
.dmove-empty { font-size: 12px; color: var(--text-dim); padding: 6px 8px; }
.dmove-item {
  display: block; width: 100%; text-align: left; cursor: pointer; font-size: 12.5px;
  padding: 6px 8px; border-radius: 6px; background: transparent; border: 0; color: var(--text);
}
.dmove-item:hover { background: var(--surface-2); }

/* Reviews & download row (plain; rendered both above and below the documents) */
.dreviews .docs-actions { margin-bottom: 0; }
.dreviews-top { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.dreviews-bottom { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); }

/* Spinner */
.spinner, .spinner-sm {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: mm-spin .7s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* ── Finmo section (class names shared with finmo-core.js) ─────────────────── */
.fm-state { color: var(--text-dim); padding: 24px 4px; }
.fm-state.error { color: var(--bad-fg); }

.fm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fm-section { grid-column: 1 / -1; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }

.finmo-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.finmo-card.is-headline { border-color: var(--primary); }

.fm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.fm-title { font-weight: 620; font-size: 14px; }
.fm-badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.fm-badge.green { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.fm-badge.red { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.fm-badge.blue { background: var(--busy-bg); color: var(--primary); border-color: var(--border); }

.fm-body { padding: 6px 14px 12px; }
.fm-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--border); }
.fm-row:first-child { border-top: none; }
.fm-label { color: var(--text-dim); font-size: 12.5px; flex: none; }
.fm-value { text-align: right; word-break: break-word; }

.fm-foot { padding: 0 14px 12px; }
.fm-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.fm-link:hover { text-decoration: underline; }

/* ── Files section (class names shared with files-core.js) ─────────────────── */
.files-intro { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin: 0 2px 12px; }
.files-intro b { color: var(--text); font-weight: 600; }
.files-zone {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  outline: none;
}
.files-zone:hover, .files-zone:focus-visible { border-color: var(--primary); }
.files-zone.is-over { border-color: var(--primary); background: var(--busy-bg); }
.files-zone-title { font-weight: 600; font-size: 15px; }
.files-zone-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; }
.files-browse { color: var(--primary); font-weight: 600; }

.files-flash {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--busy-bg);
  color: var(--busy-fg);
}
.files-flash a { color: inherit; font-weight: 600; }
.files-flash.is-done { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.files-flash.is-error { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.files-flash.is-ask { background: var(--surface); }
.files-ask-title { margin-bottom: 8px; }
.files-ask-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.files-ask-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.files-ask-row select {
  font: inherit; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.files-ask-actions { display: flex; gap: 8px; }

.files-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 20px 0 8px;
}
.files-head-title { font-weight: 620; font-size: 14px; }
.files-head-actions { display: flex; align-items: center; gap: 10px; }
.files-scanned { color: var(--text-dim); font-size: 11.5px; }
.mm-btn-ghost {
  appearance: none; font: inherit; font-weight: 550;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.mm-btn-ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.mm-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

.files-list { display: flex; flex-direction: column; gap: 12px; }
.files-empty { color: var(--text-dim); padding: 14px 4px; }
.files-empty.err { color: var(--bad-fg); }
.files-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.files-group-head {
  padding: 9px 14px; font-weight: 600; font-size: 12.5px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.files-group-count { color: var(--text-dim); font-weight: 500; margin-left: 4px; }
.files-group-list { list-style: none; margin: 0; padding: 0; }
.files-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--border);
}
.files-item:first-child { border-top: none; }
.files-name { word-break: break-word; }
.files-cat { flex: none; color: var(--text-dim); font-size: 11.5px; }

/* ── Conditions section (class names shared with conditions-core.js) ────────── */
.cond-state { color: var(--text-dim); padding: 24px 4px; }
.cond-state.err { color: var(--bad-fg); }

.cond-lenderbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.cond-lenderbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.cond-lenderbar input {
  font: inherit; padding: 7px 9px; border-radius: 7px; min-width: 180px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.cond-flash { font-size: 12px; color: var(--text-dim); }
.cond-flash.is-done { color: var(--ok-fg); }
.cond-flash.is-error { color: var(--bad-fg); }

.cond-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cond-head-title { font-weight: 620; font-size: 14px; }
.cond-summary { color: var(--text-dim); font-size: 12.5px; }

.cond-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cond-add input[type="text"] { flex: 1 1 320px; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.cond-add select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* Two-pane: conditions (drop targets) | files (draggable) */
.cond-panes { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cond-col-head { font-weight: 620; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 8px; }
.cond-col-hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

.cond-list { display: flex; flex-direction: column; gap: 8px; }
.cond-empty { color: var(--text-dim); padding: 10px 4px; }
.cond-item {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 9px;
  background: var(--surface); box-shadow: var(--shadow); padding: 11px 13px;
  transition: opacity .12s, box-shadow .12s, border-color .12s;
}
.cond-item.is-saving { opacity: .55; }
.cond-item.is-drop { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.cond-item.is-outstanding { border-left-color: var(--warn-fg); }
.cond-item.is-broker_complete { border-left-color: var(--primary); }
.cond-item.is-lender_complete { border-left-color: var(--ok-fg); }
.cond-item.is-waived { border-left-color: var(--text-dim); }

.cond-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cond-text { font-weight: 500; }
.cond-meta { display: flex; gap: 8px; margin-top: 3px; }
.cond-tag { font-size: 11px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.cond-lender { font-size: 11.5px; color: var(--text-dim); }

/* Segmented status control (Outstanding · Broker ✓ · Lender ✓ · Waived) */
.cond-seg { display: inline-flex; margin: 9px 0 2px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cond-seg-btn {
  appearance: none; border: none; border-left: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 550; padding: 5px 10px; cursor: pointer;
}
.cond-seg-btn:first-child { border-left: none; }
.cond-seg-btn:hover { background: var(--surface-2); color: var(--text); }
.cond-seg-btn.is-on { background: var(--primary); color: var(--primary-ink); }

.cond-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.cond-docs-empty { color: var(--text-dim); font-size: 12px; font-style: italic; margin: 9px 0; }
.cond-doc-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-bd); border-radius: 999px; padding: 2px 6px 2px 10px;
}
.cond-doc-x { appearance: none; border: none; background: transparent; color: inherit; cursor: pointer; font-size: 11px; opacity: .75; padding: 0 2px; }
.cond-doc-x:hover { opacity: 1; }

.cond-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.cond-due-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.cond-controls input[type="date"] {
  font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.cond-del {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; line-height: 1; flex: none;
}
.cond-del:hover { border-color: var(--bad-bd); color: var(--bad-fg); }
.cond-notes {
  width: 100%; margin-top: 8px; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}

/* Files pane (draggable source) */
.cond-files { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 10px; max-height: 520px; overflow: auto; }
.cond-files-empty { color: var(--text-dim); font-size: 12.5px; padding: 8px; }
.cond-file-group-head { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.cond-file {
  position: relative; display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 6px 9px; margin-bottom: 4px; border-radius: 7px; cursor: grab;
  background: var(--surface); border: 1px solid var(--border);
}
.cond-file:hover { border-color: var(--primary); }
.cond-file.is-dragging { opacity: .5; }
.cond-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cond-file-link {
  flex: none; cursor: pointer; font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.cond-file-link:hover { border-color: var(--primary); color: var(--text); }
.cond-linkmenu {
  position: absolute; top: 100%; right: 0; margin-top: 3px; z-index: 20; min-width: 220px; max-width: 320px;
  max-height: 260px; overflow: auto; padding: 4px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.cond-linkmenu-head { font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 4px 8px; }
.cond-linkmenu-empty { font-size: 12px; color: var(--text-dim); padding: 6px 8px; }
.cond-linkmenu-item {
  display: block; width: 100%; text-align: left; cursor: pointer; font-size: 12.5px;
  padding: 6px 8px; border-radius: 6px; background: transparent; border: 0; color: var(--text);
}
.cond-linkmenu-item:hover { background: var(--surface-2); }
.cond-linkmenu-item.is-linked { color: var(--text-dim); cursor: default; }

@media (max-width: 720px) { .cond-panes { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .mm-head { flex-direction: column; }
  .mm-owner { align-self: flex-start; }
}

/* ── L5: Download-to-Dropbox picker ──────────────────────────────────────────── */
.dlpick {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow); margin: 6px 0 12px; overflow: hidden;
}
.dlp-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.dlp-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.dlp-sub2 { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dlp-scope { display: flex; gap: 8px; margin-top: 12px; }
.dlp-seg {
  flex: 1; text-align: left; cursor: pointer; border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.dlp-seg b { color: var(--primary); }
.dlp-seg small { display: block; font-weight: 500; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.dlp-seg.on { border-color: var(--primary); background: var(--busy-bg); box-shadow: 0 0 0 1px var(--primary) inset; }
.dlp-selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 16px 2px; font-size: 12px; color: var(--text-dim); }
.dlp-link { border: 0; background: transparent; color: var(--primary); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px; }
.dlp-selnote { margin-left: auto; }
.dlp-body { padding: 6px 12px 8px; max-height: 46vh; overflow-y: auto; }
.dlp-grp { border: 1px solid var(--border); border-radius: 10px; margin: 8px 2px; overflow: hidden; }
.dlp-gbar { padding: 9px 12px; background: var(--surface-2); font-size: 13px; font-weight: 800; }
.dlp-gkind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.dlp-sub { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: 8px 13px 2px; }
.dlp-row { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-top: 1px solid var(--border); }
.dlp-cb { width: 16px; height: 16px; flex: none; accent-color: var(--primary); cursor: pointer; }
.dlp-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlp-rr { display: flex; align-items: center; gap: 7px; flex: none; }
.dlp-tag { font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.dlp-tag.appr { color: var(--ok-fg); background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.dlp-tag.rev { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.dlp-tag.indb { color: var(--ok-fg); background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.dlp-eye { width: 26px; height: 24px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--surface); cursor: pointer; }
.dlp-eye:hover { border-color: var(--primary); }
.dlp-row.is-done { opacity: .68; }
.dlp-row.is-done .dlp-nm { font-weight: 500; color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--border); }
.dlp-row.rev, .dlp-row.is-ask { box-shadow: inset 3px 0 0 var(--warn-bd); }
.dlp-row.is-ask { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-fg); align-items: flex-start; }
.dlp-ask { flex: 1; min-width: 0; }
.dlp-q { font-size: 11.5px; color: var(--warn-fg); font-weight: 600; margin-top: 2px; }
.dlp-pills { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.dlp-pill { font-size: 11.5px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 20px; padding: 4px 11px; cursor: pointer; }
.dlp-pill.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.dlp-empty { padding: 20px 14px; text-align: center; color: var(--text-dim); font-size: 13px; }
.dlp-foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.dlp-sum { font-size: 12.5px; color: var(--text-dim); }
.dlp-sum b { color: var(--text); }
.dlp-skip { color: var(--ok-fg); }
.dlp-warn { color: var(--warn-fg); font-weight: 600; }
.dlp-btns { margin-left: auto; display: flex; gap: 9px; }

/* ============================================================================
   Finmo tab — full application (F8, Stage 1, read-only). Ported from the approved
   mockup (manage-mortgage-mockups/finmo-application-mockup.html), scoped under
   .finmo-app so nothing leaks into the other panes. Read-only: fields render as
   static "value boxes" (.fv) that look like the mockup's inputs; Stage 2 swaps
   them for real inputs behind a write gate.
   ============================================================================ */
.finmo-app { padding-bottom: 24px; }
.finmo-app .fa-top { display: flex; justify-content: flex-end; margin: 2px 0 10px; }
.finmo-app .fa-finmo { color: var(--primary); font-weight: 600; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.finmo-app .fa-finmo:hover { text-decoration: underline; }

/* sticky snapshot / ratio strip — pins just UNDER the sticky tab nav (top: 52px)
   so the tabs stay visible above the ratios while the modal body scrolls */
.finmo-app .snap { display: flex; flex-wrap: wrap; gap: 10px; position: sticky; top: var(--mm-stick-h, 52px); z-index: 20;
  background: var(--bg); padding: 8px 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.finmo-app .metric { flex: 1 1 120px; min-width: 118px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); box-shadow: var(--shadow); padding: 9px 12px; }
.finmo-app .metric .m-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.finmo-app .metric .m-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.finmo-app .metric .m-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.finmo-app .metric.key { background: linear-gradient(0deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface)); }

/* sections + accordion */
.finmo-app .sec { margin-bottom: 18px; scroll-margin-top: 64px; }
.finmo-app .sec-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 2px 2px 8px;
  border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
.finmo-app .sec-ic { font-size: 15px; }
.finmo-app .sec-t { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.finmo-app .sec-sum { margin-left: auto; font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.finmo-app .sec-chev { width: 12px; flex: none; color: var(--text-dim); font-size: 11px; transition: transform .15s; }
.finmo-app .sec.collapsed .sec-chev { transform: rotate(-90deg); }
.finmo-app .sec.collapsed .sec-body { display: none; }

/* cards */
.finmo-app .card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 12px; }
.finmo-app .card-h { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.finmo-app .card-t { font-weight: 650; font-size: 13.5px; }
.finmo-app .card-h .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.finmo-app .card-body { padding: 12px 14px; }
.finmo-app .sub-h { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 8px; }
.finmo-app .sub-h:first-child { margin-top: 2px; }
.finmo-app .note { font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 6px; }
.finmo-app .dim { color: var(--text-dim); }

/* badges */
.finmo-app .badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.finmo-app .badge.ok { color: var(--ok-fg); background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.finmo-app .badge.warn { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.finmo-app .badge.bad { color: var(--bad-fg); background: var(--bad-bg); border: 1px solid var(--bad-bd); }
.finmo-app .badge.info { color: var(--primary); background: var(--busy-bg); border: 1px solid var(--border); }
.finmo-app .badge.dim { color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); }

/* read-only field grid + value boxes (mirror the mockup's .fi look) */
.finmo-app .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 11px 14px; }
.finmo-app .f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.finmo-app .f.full { grid-column: 1 / -1; }
.finmo-app .f label { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.finmo-app .fv { font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--field-bd);
  border-radius: 7px; padding: 5px 8px; min-height: 30px; word-break: break-word; }

/* applicant layout */
.finmo-app .applicants { display: grid; gap: 12px; }
/* Responsive: two side-by-side columns when there's room, auto-stacking to one when
   the modal is narrow — instead of a hard 1fr 1fr that overflows a small modal. */
.finmo-app .applicants.app-side { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.finmo-app .applicants.app-stack { grid-template-columns: 1fr; }
/* Grid items must be allowed to shrink below their content's intrinsic width, or the
   card headers (name + ID/PSA/Main badges) force the columns wider than the modal. */
.finmo-app .applicants > .card { min-width: 0; }
.finmo-app .card-h { flex-wrap: wrap; }
.finmo-app .card-t { min-width: 0; overflow-wrap: anywhere; }

/* employment / mortgage sub-entries */
.finmo-app .emp, .finmo-app .mtg { border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px; margin-bottom: 9px; background: var(--surface-2); }
.finmo-app .emp-h, .finmo-app .mtg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.finmo-app .emp-t, .finmo-app .mtg-t { font-weight: 650; font-size: 12.5px; }

/* tables */
.finmo-app table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 2px; }
.finmo-app table.t th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.finmo-app table.t.ctr th { text-align: center; }
.finmo-app table.t.ctr th:nth-child(1), .finmo-app table.t.ctr th:nth-child(3) { text-align: left; }
.finmo-app table.t td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.finmo-app table.t tr:last-child td { border-bottom: none; }
.finmo-app .t-num { text-align: right; font-variant-numeric: tabular-nums; }

/* down-payment tally */
.finmo-app .dptally { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 12px; padding: 10px 13px;
  border-radius: 10px; background: var(--busy-bg); border: 1px solid var(--border); font-size: 12.5px; }
.finmo-app .dptally .d-k { color: var(--text-dim); }
.finmo-app .dptally .d-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.finmo-app .dptally .d-v.ok { color: var(--ok-fg); }
.finmo-app .dptally .d-v.bad { color: var(--bad-fg); }

/* mortgage scenarios */
.finmo-app .scen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .finmo-app .scen { grid-template-columns: 1fr; } }
.finmo-app .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; align-items: center; }
.finmo-app .kv:first-child { border-top: none; }
.finmo-app .kv .k { color: var(--text-dim); }
.finmo-app .kv .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.finmo-app .kv .v.big { font-size: 17px; }

/* ── F8 Stage 2 — editable Goal + Mortgage sections ──────────────────────────── */
.finmo-app .sec-ctrls { margin-left: 10px; display: flex; gap: 8px; flex: none; }
.finmo-app .fa-btn { font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--surface); border: 1px solid var(--field-bd); border-radius: 7px; padding: 6px 11px; }
.finmo-app .fa-btn:hover { background: var(--surface-2); }
.finmo-app .fa-btn.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.finmo-app .fa-btn.primary:hover { filter: brightness(1.06); }
.finmo-app .fa-btn.primary:disabled { opacity: .6; cursor: default; filter: none; }
.finmo-app .fa-btn.ghost { color: var(--text-dim); }
.finmo-app .sec.editing > .sec-h { border-bottom-color: var(--primary); }
/* edit form: reuse the read-view fgrid; inputs replace the static .fv boxes */
.finmo-app .fa-form { border: 1px solid var(--field-bd); border-radius: 12px; background: var(--surface); padding: 14px; }
.finmo-app .fa-form.saving { opacity: .6; pointer-events: none; }
.finmo-app .fa-formerr { color: var(--bad-fg); background: var(--bad-bg); border: 1px solid var(--bad-bd);
  border-radius: 8px; padding: 8px 11px; font-size: 12.5px; margin-bottom: 12px; }
.finmo-app .fgrid.edit { gap: 12px 14px; }
.finmo-app .fa-in { font: inherit; font-size: 13px; color: var(--text); background: var(--surface);
  border: 1px solid var(--field-bd); border-radius: 7px; padding: 6px 9px; width: 100%; }
.finmo-app .fa-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent); }
.finmo-app select.fa-in { cursor: pointer; }
.finmo-app .fa-in.sm { width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.finmo-app .fa-yrmo { display: flex; align-items: center; gap: 6px; }
.finmo-app .fa-yrmo .u { font-size: 11.5px; color: var(--text-dim); }
.finmo-app .fa-hint { font-size: 10.5px; color: var(--text-dim); }

/* Slice 2 — inline entity editing (assets/liabilities/income/borrower) */
.finmo-app .fa-btn.sm { padding: 3px 9px; font-size: 11px; }
.finmo-app th.row-act-h { width: 1%; }
/* Sortable asset/liability column headers (click to re-sort). */
.finmo-app th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.finmo-app th.sortable:hover { color: var(--text); }
.finmo-app th.sortable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.finmo-app .sort-ar { font-size: 9px; margin-left: 3px; color: var(--primary); vertical-align: middle; }
.finmo-app td.row-act { white-space: nowrap; text-align: right; width: 1%; }
/* Liability payoff — editable straight from the read row (saves on change). Sized to
   the text so it reads as a value, not a form field, until you hover it. */
.finmo-app td.payoff-c { padding: 3px 8px; }
.finmo-app .fa-in.po-sel { width: auto; max-width: 100%; font-size: 12.5px; padding: 4px 6px;
  border-color: transparent; background: transparent; }
.finmo-app .fa-in.po-sel:hover { border-color: var(--field-bd); background: var(--surface); }
.finmo-app .fa-in.po-sel:disabled { opacity: .55; cursor: progress; }
.finmo-app .fa-in.po-sel.po-err { border-color: var(--bad-bd); background: var(--bad-bg); color: var(--bad-fg); }
.finmo-app .ic-btn { font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer; color: var(--text-dim);
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; }
.finmo-app .ic-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--field-bd); }
.finmo-app .ic-btn.del:hover { color: var(--bad-fg); border-color: var(--bad-bd); background: var(--bad-bg); }
.finmo-app .emp-h .emp-act { margin-left: auto; display: flex; gap: 4px; }
.finmo-app tr.erow > td { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); padding: 12px 12px 14px; }
.finmo-app .erow-block { border: 1px solid var(--field-bd); border-radius: 10px; padding: 12px; margin: 9px 0;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.finmo-app .erow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px 12px; text-align: left; }
.finmo-app .erow-act { display: flex; gap: 8px; margin-top: 12px; }
.finmo-app .erow-add { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Slice 3b — property-mortgage edit affordance (mirrors .emp-act) + add-borrower invite row. */
.finmo-app .mtg-h .mtg-act { margin-left: auto; display: flex; gap: 4px; }
.finmo-app .mtg-list:empty { display: none; }
.finmo-app .binvite { margin-top: 2px; }
.finmo-app .own-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 3px; }
.finmo-app .own-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); font-weight: 400; cursor: pointer; }
.finmo-app .own-chk input { accent-color: var(--primary); width: 14px; height: 14px; }
.finmo-app .own-single { font-size: 13px; color: var(--text); padding-top: 5px; }

/* ── Non-blocking confirm dialog (confirmBox) — used for destructive actions in
   the sandboxed modal iframe where window.confirm() is blocked. ─────────────── */
.mm-confirm { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(6,10,16,.6); padding: 24px; }
.mm-confirm .mc-box { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 55px rgba(0,0,0,.34); padding: 18px 20px; }
:root[data-theme="dark"] .mm-confirm .mc-box { border-color: rgba(255,255,255,.28); }
.mm-confirm .mc-title { font-weight: 650; font-size: 15px; margin-bottom: 6px; }
.mm-confirm .mc-body { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.mm-confirm .mc-btns { display: flex; justify-content: flex-end; gap: 9px; }
.mm-confirm button { font: inherit; font-weight: 600; font-size: 13px; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.mm-confirm .mc-cancel:hover { background: var(--surface-2); }
.mm-confirm .mc-ok { background: var(--bad-fg); border-color: var(--bad-fg); color: #fff; }
.mm-confirm .mc-ok:hover { filter: brightness(1.06); }

/* ── Credit bureau block (finmo-core.js) — per-borrower score/history + gated pull ── */
.finmo-app .credit { margin-top: 4px; }
.finmo-app .credit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.finmo-app .credit-none { font-size: 12.5px; color: var(--text-dim); padding: 4px 0 2px; }
.finmo-app .credit-histbtn { margin-top: 10px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: none; border: none; padding: 0; cursor: pointer; }
.finmo-app .credit-histbtn:hover { text-decoration: underline; }
.finmo-app .credit-hist { margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.finmo-app .credit-hrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 12.5px; border-top: 1px solid var(--border); }
.finmo-app .credit-hrow:first-child { border-top: none; }
.finmo-app .credit-hdate { min-width: 96px; color: var(--text-dim); }
.finmo-app .credit-hscore { font-weight: 700; min-width: 40px; }
.finmo-app .credit-hrow .fa-btn { margin-left: auto; }
.finmo-app .credit-pullbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px;
  padding-top: 11px; border-top: 1px dashed var(--border); }
.finmo-app .credit-gates { display: flex; flex-wrap: wrap; gap: 6px; }
.finmo-app .credit-pullbar .fa-btn.primary { margin-left: auto; }
.finmo-app .gpill { font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.finmo-app .gpill.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.finmo-app .gpill.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.finmo-app .gpill.bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }

/* Gated pull dialog (reuses .mm-confirm shell, wider + form controls) */
.mm-confirm .mc-box.pull-box { width: min(540px, 100%); }
.mm-confirm .pull-box .mc-ok { background: var(--primary); border-color: var(--primary); }
.mm-confirm .pull-warn { color: var(--text); font-size: 13px; margin: 0 0 12px; }
.mm-confirm .pull-gates { display: flex; flex-direction: column; gap: 10px; }
.mm-confirm .pg-row { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; }
.mm-confirm .pg-row.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.mm-confirm .pg-row.ok .pg-detail { color: var(--ok-fg); opacity: .85; margin-left: 4px; }
.mm-confirm .pg-row.need { background: var(--warn-bg); border-color: var(--warn-bd); }
.mm-confirm .pg-label { font-weight: 650; color: var(--warn-fg); margin-bottom: 7px; }
.mm-confirm .pg-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.mm-confirm .pg-check input { accent-color: var(--primary); width: 15px; height: 15px; }
.mm-confirm .pg-row .fa-in, .mm-confirm .pg-row select, .mm-confirm .pg-row input[type="text"] {
  width: 100%; font: inherit; font-size: 12.5px; padding: 6px 8px; margin-top: 6px;
  border: 1px solid var(--field-bd); border-radius: 7px; background: var(--surface); color: var(--text); }
.mm-confirm .pg-row select { margin-top: 0; }
.mm-confirm .pull-err { color: var(--bad-fg); font-size: 12px; font-weight: 600; margin-top: 10px; }

/* ── F5: "documents still needed" email composer (documents-core.js) ─────────── */
.mm-email { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(6,10,16,.7); padding: 22px; }
.mm-email .me-box { width: min(980px, 100%); height: min(88vh, 100%); background: var(--surface); border: 2px solid var(--field-bd); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; }
:root[data-theme="dark"] .mm-email .me-box { border-color: rgba(255,255,255,.9); }
.mm-email .me-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mm-email .me-title { font-weight: 650; font-size: 14px; flex: 1; min-width: 0; }
.mm-email .me-close { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--field-bd); border-radius: 7px; padding: 5px 10px; cursor: pointer; flex: none; }
.mm-email .me-close:hover { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.mm-email .me-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
@media (max-width: 780px) { .mm-email .me-main { grid-template-columns: 1fr; } .mm-email .me-items { max-height: 34%; } }
.mm-email .me-items { border-right: 1px solid var(--border); padding: 12px 14px; overflow: auto; display: flex; flex-direction: column; }
.mm-email .me-sub { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 8px; }
.mm-email .me-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.mm-email .me-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; background: var(--surface); border-radius: 6px; }
.mm-email .me-grip { flex: none; margin-top: 1px; padding: 0 2px; color: var(--text-dim); font-size: 14px; line-height: 1.2; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.mm-email .me-grip:active { cursor: grabbing; }
.mm-email .me-item.me-dragging { opacity: .9; background: var(--surface-2); box-shadow: 0 6px 18px rgba(0,0,0,.28); position: relative; z-index: 2; }
.mm-email .me-chk input { accent-color: var(--primary); width: 15px; height: 15px; margin-top: 2px; }
.mm-email .me-lbl { flex: 1; }
.mm-email .me-for { color: var(--text-dim); }
.mm-email .me-inote { display: block; color: var(--warn-fg); font-size: 11px; margin-top: 2px; }
.mm-email .me-none { color: var(--text-dim); padding: 8px 4px; list-style: none; }
.mm-email .me-genrow { padding-top: 12px; }
.mm-email .me-editor { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; }
/* The email preview is deliberately LIGHT ("paper") in both themes: the email is
   copied out of here, and if this rendered dark the clipboard's computed styles
   would ride along and paste white-on-black into Gmail. Fixing the colours here
   makes the source safe for a manual ⌘C too, not just the Copy button. */
.mm-email .me-doc { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--field-bd); border-radius: 8px; background: #ffffff; color: #111111; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; }
.mm-email .me-doc:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.mm-email .me-doc a { color: #1155cc; }
.mm-email .me-doc ul { padding-left: 20px; margin: 8px 0; }
.mm-email .me-doc p { margin: 8px 0; }
.mm-email .me-empty { color: #667085; }
.mm-email .me-empty.err { color: #b42318; }
.mm-email .me-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mm-email .me-note { flex: 1; font-size: 11px; color: var(--text-dim); }

/* HF: "hold-off / not urgent" flag on a document request. */
.dcat.is-held { opacity: .78; }
.dcat.is-held .dcat-bar { background: repeating-linear-gradient(135deg, transparent, transparent 8px, color-mix(in srgb, var(--warn-fg) 6%, transparent) 8px, color-mix(in srgb, var(--warn-fg) 6%, transparent) 16px); }
.dcat-hold-chip { font-size: 10.5px; font-weight: 700; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.dcat-hold-btn.is-on { color: var(--warn-fg); border-color: var(--warn-bd); background: var(--warn-bg); }

/* ⑥ At-a-glance cross-reference on the Income/DP group headers. */
.dgrp-xref { margin: 2px 2px 10px; padding: 7px 11px; border-radius: 8px; background: var(--busy-bg); border: 1px solid var(--border); color: var(--text); font-size: 12px; line-height: 1.45; }
.dgrp-xref .xr-ic { color: var(--primary); font-weight: 800; margin-right: 5px; }
.dgrp-xref b { color: var(--text); font-variant-numeric: tabular-nums; }
.dgrp-xref .xr-dim { color: var(--text-dim); }
.dgrp-xref .xr-src { margin-top: 3px; color: var(--text-dim); font-size: 11.5px; }
.dgrp-xref .xr-item { margin: 3px 0 0 18px; font-variant-numeric: tabular-nums; }
.dgrp-xref .xr-total { margin: 4px 0 0 18px; color: var(--text-dim); font-size: 11.5px; }

/* ── Forms tab — lender-forms hub + ATB 7475 editor (F4) ─────────────────────── */
.forms-hub { padding: 2px 0; }
.forms-intro { font-size: 13px; color: var(--text-dim); margin: 4px 2px 14px; }
.form-card { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; margin: 10px 0; box-shadow: var(--shadow); }
.form-card-h { padding: 12px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, var(--bg)); }
.form-card-t { font-weight: 700; font-size: 14.5px; }
.form-card-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.form-card-body { padding: 12px 14px; }
.atb-borrowers { display: flex; flex-wrap: wrap; gap: 10px; }
.forms-hub .dim { color: var(--text-dim); }

/* editable pop-up — a clearly-separate floating window (mirrors .mdoc-viewer) */
.atb-editor { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(6,10,16,.74); padding: 24px; }
.atb-editor .atb-panel { width: min(860px, 100%); height: min(92vh, 100%); display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--field-bd); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.4); overflow: hidden; }
:root[data-theme="dark"] .atb-editor .atb-panel { border-color: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.7); }
.atb-editor .atb-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, var(--bg)); }
.atb-editor .atb-title { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atb-editor .atb-close { flex: none; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--text); background: var(--surface-2); border: 1px solid var(--field-bd); cursor: pointer; padding: 6px 11px; border-radius: 7px; }
.atb-editor .atb-close:hover { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.atb-editor .atb-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px; background: var(--bg); }
.atb-scrape { font-size: 12px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; margin-bottom: 12px; }
.atb-scrape.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.atb-sec { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin: 0 0 12px; overflow: hidden; }
.atb-sec-h { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 9px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }
.atb-sec-note { font-size: 11.5px; color: var(--text-dim); padding: 7px 12px 0; }
.atb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px; }
.atb-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atb-f.wide { grid-column: 1 / -1; }
.atb-f label { font-size: 11.5px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.atb-f input, .atb-f select { font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--field-bd); border-radius: 7px; padding: 6px 9px; width: 100%; }
.atb-f input:focus, .atb-f select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.atb-hint { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 0 6px; }
.atb-hint.id { color: var(--ok-fg); border-color: var(--ok-bd); background: var(--ok-bg); }
.atb-checkline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.atb-editor .atb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, var(--bg)); }
.atb-editor .atb-actions { display: flex; gap: 10px; }
.atb-status { padding: 9px 14px; font-size: 12.5px; border-top: 1px solid var(--border); background: var(--busy-bg); color: var(--busy-fg); }
.atb-status.ok { background: var(--ok-bg); color: var(--ok-fg); }
.atb-status.err { background: var(--bad-bg); color: var(--bad-fg); }
.atb-status .warn { color: var(--warn-fg); }
.atb-status .mono, .atb-status b { font-weight: 700; }
@media (max-width: 620px) { .atb-grid { grid-template-columns: 1fr; } }

/* ── Stage-1 income ACCEPT GATE (read-only recommender) ─────────────────────── */
/* Per-borrower summary block on an income group. */
.dgrp-gate { margin: 6px 0 10px; padding: 9px 11px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 6px; background: var(--surface-2); }
.dgrp-gate.is-done { border-left-color: var(--primary); }
.dgrp-gate-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dgrp-gate-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.dgrp-gate-when { font-size: 11.5px; color: var(--text-dim); }
.dgrp-gate-head .dgrp-gate-run { margin-left: auto; }
.dgrp-gate-hint { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.gate-bl { margin-top: 7px; font-size: 12.5px; }
.gate-bl-k { font-weight: 700; }
.gate-bl-ok .gate-bl-k { color: var(--ok-fg); }
.gate-bl-attn .gate-bl-k { color: var(--bad-fg); }
.gate-bl ul { margin: 3px 0 0; padding-left: 18px; }
.gate-bl li { margin: 1px 0; color: var(--text); }
.gate-bl-why { color: var(--text-dim); }

/* Per-category verdict badge inside a category card body. */
.dcat-gate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 6px 9px; border-radius: 5px; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.dcat-gate .dcat-gate-v { font-weight: 700; white-space: nowrap; }
.dcat-gate .dcat-gate-r { color: var(--text); }
.dcat-gate .dcat-gate-req { color: var(--bad-fg); font-weight: 600; }
.dcat-gate.gv-ok { background: var(--ok-bg); border-color: var(--ok-bd); }
.dcat-gate.gv-ok .dcat-gate-v { color: var(--ok-fg); }
.dcat-gate.gv-note { background: var(--warn-bg); border-color: var(--warn-bd); }
.dcat-gate.gv-note .dcat-gate-v { color: var(--warn-fg); }
.dcat-gate.gv-bad { background: var(--bad-bg); border-color: var(--bad-bd); }
.dcat-gate.gv-bad .dcat-gate-v { color: var(--bad-fg); }
.dcat-gate.gv-miss { background: var(--busy-bg); border-color: var(--border); }
.dcat-gate.gv-miss .dcat-gate-v { color: var(--busy-fg); }

/* Pre-set (recommended) Accept / Needs-attention control — highlight only; never
   auto-applied. The broker still clicks. */
.mdoc-mini.is-rec { box-shadow: 0 0 0 2px var(--primary); position: relative; }
.mdoc-mini.ok.is-rec { box-shadow: 0 0 0 2px var(--ok-fg); }
.mdoc-mini.bad.is-rec { box-shadow: 0 0 0 2px var(--bad-fg); }

/* ── F9 — "Fill from purchase documents" review card ──────────────────────────
   The diff the broker approves before anything is written. Reuses the .mm-confirm
   shell, much wider (six columns incl. the verbatim document snippet). Visual
   language is deliberate: an OVERWRITE row is amber and unticked, a LOW-confidence
   row is tinted and unticked — the two states a broker must not skim past. */
.pf-launch { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pf-launch-n { color: var(--text-dim); font-size: 12px; }
.mm-confirm .mc-box.pf-box { width: min(1020px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.mm-confirm .pf-box .mc-body { flex: 1; overflow: auto; color: var(--text); }
.mm-confirm .pf-box .mc-ok { background: var(--primary); border-color: var(--primary); }
.mm-confirm .pf-box .mc-ok:disabled { opacity: .5; cursor: not-allowed; }
.pf-loading { color: var(--text-dim); }
.pf-docs { margin-bottom: 12px; }
.pf-docs-t, .pf-ctx-t { font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 4px; }
.pf-docs ul, .pf-ctx ul, .pf-notes, .pf-same ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.pf-kind { display: inline-block; min-width: 74px; font-weight: 650; color: var(--text-dim); }
.pf-stop { background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 9px; padding: 12px 14px; }
.pf-stop-t { font-weight: 650; color: var(--warn-fg); margin-bottom: 5px; }
.pf-snip, .pf-doc { color: var(--text-dim); font-size: 12px; font-style: italic; }
.pf-replace { background: var(--bad-bg); border: 1px solid var(--bad-bd); color: var(--bad-fg);
  border-radius: 9px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
.pf-money { background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 9px; padding: 11px 13px; margin-bottom: 12px; }
.pf-money-t { font-weight: 650; color: var(--warn-fg); margin-bottom: 7px; font-size: 13px; }
.pf-money-tbl { border-collapse: collapse; font-size: 12.5px; }
.pf-money-tbl td { padding: 2px 10px 2px 0; }
.pf-money-n { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }
.pf-notes { margin-bottom: 12px; color: var(--text-dim); }
.pf-notes li { margin-bottom: 3px; }
.pf-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pf-tbl th { text-align: left; font-weight: 650; color: var(--text-dim); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em; padding: 0 8px 5px 0; border-bottom: 1px solid var(--border); }
.pf-grp-h td { padding: 11px 0 4px; font-weight: 650; color: var(--text-dim); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.pf-row td { padding: 4px 8px 4px 0; border-top: 1px solid var(--border); vertical-align: top; }
.pf-row.low { background: var(--warn-bg); }
.pf-row.ow .pf-new { color: var(--warn-fg); font-weight: 650; }
.pf-c { width: 26px; }
.pf-l { font-weight: 600; white-space: nowrap; }
.pf-cur { color: var(--text-dim); }
.pf-arr { color: var(--text-dim); width: 16px; }
.pf-new { font-weight: 600; }
.pf-src { color: var(--text-dim); font-size: 11.5px; line-height: 1.4; }
.pf-flagnote { color: var(--warn-fg); }
.pf-flag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 650; padding: 1px 6px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.pf-flag.warn { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bd); }
.pf-flag.low { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.pf-same { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); }
.pf-same summary { cursor: pointer; }
.pf-ctx { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.pf-none { color: var(--text-dim); }
.pf-done { background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok-fg);
  border-radius: 9px; padding: 9px 12px; font-weight: 650; font-size: 13px; margin-bottom: 12px; }
.pf-err { background: var(--bad-bg); border: 1px solid var(--bad-bd); color: var(--bad-fg);
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
/* An ASSUMED row (municipal services in a major city; existing construction on an
   AREA resale) — not read off a document, so it reads differently from a sourced row
   without looking like a warning. It is still ticked by default when the field is empty. */
.pf-flag.assumed { background: var(--surface-2); color: var(--text-dim); border: 1px dashed var(--border); }

/* ── Standalone Underwriting page: the SSO sign-in gate ──────────────────────
   Rendered by app.js (ensureStandaloneAuth) only in standalone mode, before the
   tabs boot, when there is no usable token yet. Full-viewport, theme-aware. */
.mm-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.mm-gate-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: 28px 26px; text-align: center;
}
.mm-gate-brand { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.mm-gate-note { margin: 10px 0 20px; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.mm-gsi { display: flex; justify-content: center; min-height: 44px; }
.mm-gate-msg { margin: 14px 0 0; color: #c0392b; font-size: 13px; min-height: 1em; }

.atb-req { color: var(--bad-fg); font-weight: 800; margin-left: -3px; }
.atb-f.atb-missing label { color: var(--bad-fg); }
.atb-f.atb-missing input, .atb-f.atb-missing select { border-color: var(--bad-fg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad-fg) 22%, transparent); }

/* ── Underwriting HOME board (board-core.js) ──────────────────────────────────
   Trello-style columns on desktop, stacked on mobile. The board is the only thing
   on the page, so `body.is-board` widens the normally 1100px-capped shell. */
body.is-board .mm { max-width: 1500px; }
body.is-board .mm-head { border-bottom: none; padding-bottom: 8px; }

.ub-loading, .ub-empty { color: var(--text-dim); font-size: 13px; padding: 8px 2px; }

/* Filter bar */
.ub-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 12px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.ub-filters-label { color: var(--text-dim); font-size: 12.5px; margin-right: 2px; }
.ub-filter {
  font: inherit; font-size: 12.5px; line-height: 1;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--field-bd);
}
.ub-filter:hover { border-color: var(--field-bd-hov); color: var(--text); }
.ub-filter.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
.ub-refresh {
  margin-left: auto; font: inherit; font-size: 12.5px; padding: 6px 11px;
  border-radius: 6px; cursor: pointer;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.ub-refresh:hover { color: var(--text); border-color: var(--field-bd-hov); }

/* Columns */
.ub-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ub-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.ub-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.ub-col-head h2 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .01em; text-transform: uppercase; color: var(--text-dim); }
.ub-count {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.ub-col-body { display: flex; flex-direction: column; gap: 10px; }

/* Card */
.ub-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid transparent; border-radius: 8px;
  padding: 10px 11px; box-shadow: var(--shadow);
}
.ub-card[data-rail="red"]   { border-left-color: var(--bad-fg); }
.ub-card[data-rail="amber"] { border-left-color: var(--warn-fg); }

.ub-card-top { display: flex; align-items: baseline; gap: 8px; }
.ub-name { font-size: 14px; font-weight: 650; color: var(--text); text-decoration: none; letter-spacing: -.005em; }
.ub-name:hover { color: var(--primary); text-decoration: underline; }
.ub-name-dead { color: var(--text); cursor: help; }
.ub-avatar {
  margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 6px;
}
.ub-lender { margin-top: 2px; font-size: 12.5px; color: var(--text-dim); }
.ub-lender b { color: var(--text); font-variant-numeric: tabular-nums; }

.ub-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ub-chip {
  font-size: 11.5px; line-height: 1.4; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  white-space: nowrap;
}
.ub-chip.is-red   { background: var(--bad-bg);  color: var(--bad-fg);  border-color: var(--bad-bd);  font-weight: 650; }
.ub-chip.is-amber { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); font-weight: 600; }
.ub-chip.is-done  { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-bd); }
a.ub-link { text-decoration: none; }
a.ub-link:hover { border-color: var(--field-bd-hov); color: var(--text); }

.ub-age  { margin-top: 7px; font-size: 12px; color: var(--text-dim); }
.ub-fine { margin-top: 2px; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ub-next {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-dim);
}
.ub-next b { color: var(--text); }
.ub-next.is-late b { color: var(--warn-fg); }

.ub-actions { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.ub-act { font-size: 11.5px; color: var(--primary); text-decoration: none; }
.ub-act:hover { text-decoration: underline; }
.ub-ifms { margin-left: auto; font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.ub-foot { margin: 16px 0 0; font-size: 12px; color: var(--text-dim); }

/* A detected-but-unimported lender approval — the most actionable card state. */
.ub-card[data-rail="appr"] { border-left-color: var(--ok-fg); }
.ub-appr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: -10px -11px 9px; padding: 7px 11px;
  background: var(--ok-bg); border-bottom: 1px solid var(--ok-bd);
  border-radius: 5px 5px 0 0;
}
.ub-appr-t { font-size: 11.5px; font-weight: 650; color: var(--ok-fg); }
.ub-appr-go { margin-left: auto; font-size: 11.5px; font-weight: 650; color: var(--ok-fg); text-decoration: none; white-space: nowrap; }
.ub-appr-go:hover { text-decoration: underline; }

/* Mobile: one column per stage, stacked. */
@media (max-width: 900px) {
  .ub-board { grid-template-columns: 1fr; }
  .ub-col { background: transparent; border: none; border-radius: 0; padding: 0 0 6px; }
  .ub-col-head { border-bottom: 1px solid var(--border); }
  .ub-refresh { margin-left: 0; }
}