/* LOS shared styles — ported 1:1 from the Underwriting Hub's
   "Loan Summary, Conditions" design (loan-summary-conditions.html):
   same palette, navy section headers, tags, table treatment, badges. */

:root {
  --bg:           #f8f9fc;
  --surface:      #ffffff;
  --surface2:     #f0f3fa;
  --surface3:     #dde2ee;
  --border:       #c8cedf;
  --border-mid:   #b8bfd4;
  --border-light: #9aa3bc;
  --text:         #1a1f2e;
  --text-sub:     #4a5270;
  --text-dim:     #7a84a0;
  /* row labels / table headings: 8px type needs more contrast than --text-dim (AA 4.5:1) */
  --text-lbl:     #5f6884;
  /* iTrust Mortgage brand: logo blue accent + logo green secondary */
  --accent:       #1a5dad;
  --accent-dim:   rgba(26,93,173,0.08);
  --accent-bg:    rgba(26,93,173,0.08);
  --brand-green:  #2eb552;
  --navy:         #204261;
  --navy-hover:   #2a537a;

  --c-suspend:    #c0392b;  --c-suspend-bg: rgba(192,57,43,0.07);  --c-suspend-br: rgba(192,57,43,0.22);
  --c-app:        #b45309;  --c-app-bg:     rgba(180,83,9,0.07);   --c-app-br:     rgba(180,83,9,0.22);
  --c-misc:       #0369a1;  --c-misc-bg:    rgba(3,105,161,0.07);  --c-misc-br:    rgba(3,105,161,0.22);
  --c-credit:     #7c3aed;  --c-credit-bg:  rgba(124,58,237,0.07); --c-credit-br:  rgba(124,58,237,0.22);
  --c-income:     #166534;  --c-income-bg:  rgba(22,101,52,0.07);  --c-income-br:  rgba(22,101,52,0.22);
  --c-prop:       #9a3412;  --c-prop-bg:    rgba(154,52,18,0.07);  --c-prop-br:    rgba(154,52,18,0.22);
  --c-title:      #0f766e;  --c-title-bg:   rgba(15,118,110,0.07); --c-title-br:   rgba(15,118,110,0.22);
  --c-docs:       #be185d;  --c-docs-bg:    rgba(190,24,93,0.07);  --c-docs-br:    rgba(190,24,93,0.22);
  --c-broker:     #1d4ed8;
  --c-uw:         #6d28d9;

  --danger: #c0392b;
  --danger-bg: rgba(192,57,43,0.07);
  --ok: #166534;
  --ok-bg: rgba(22,101,52,0.07);
  --warn: #b45309;
  --warn-bg: rgba(180,83,9,0.07);

  --r-sm: 5px; --r-md: 8px; --r-lg: 12px;
  --radius-sm: 5px; --radius: 8px; --radius-lg: 12px;
  --font: 'Inter', system-ui, sans-serif;
  /* Numbers use the same face as body text (per request) — every dollar
     amount, date, score, etc. that referenced --mono now renders in Inter.
     Digit alignment in tables comes from tabular-nums on body below.
     Convention for new pages: numbers may be bold but never a larger
     font-size than the text around them. */
  --mono: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums; /* digits align in columns app-wide */
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }

/* section label (Hub .section-label) */
.section-label {
  font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 8px; display: block;
}

/* buttons — Hub .btn-analyze / .btn-clear */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--text-sub);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 13px;
  font-size: 10.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap; line-height: 1.4;
}
.btn:hover { color: var(--text); border-color: var(--border-light); text-decoration: none; }
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; letter-spacing: 0.01em;
}
.btn-primary:hover { opacity: 0.87; color: #fff; border-color: var(--accent); }
.btn-primary:active { transform: scale(0.98); }
.btn-danger { color: var(--c-suspend); border-color: var(--c-suspend-br); }
.btn-danger:hover { background: var(--c-suspend-bg); color: var(--c-suspend); border-color: var(--c-suspend); }
.btn-sm { padding: 4px 11px; font-size: 10px; border-radius: var(--r-sm); font-weight: 500; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface2); border-color: var(--border); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* buttons sitting on a navy header */
.on-navy.btn, .on-navy .btn {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); color: #fff;
}
.on-navy.btn:hover, .on-navy .btn:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: #fff; }

/* form controls (Hub .guide-select) */
label.fld, div.fld { display: block; min-width: 0; }
label.fld > span, div.fld > span {
  display: block; font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border-mid);
  border-radius: var(--radius); background: #fff; color: var(--text);
  font-family: inherit; font-size: 10.5px; outline: none;
}
input.num { font-family: var(--mono); text-align: right; font-size: 10.5px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* a field's save: amber while the write is on the wire, green the moment it
   lands (no slow fade in), then the border eases back */
input, select, textarea { transition: border-color .3s; }
input.saving, select.saving, textarea.saving { border-color: var(--c-app); transition-duration: .1s; }
input.saved, select.saved, textarea.saved { border-color: var(--c-income); transition-duration: .1s; }
input.save-failed, select.save-failed, textarea.save-failed { border-color: var(--c-suspend); background: #fdecec; }
textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
select { cursor: pointer; }

/* cards — Hub .summary-section / .loan-summary */
.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 14px; min-height: 30px;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.card-title {
  font-size: 8px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
}
/* navy variant — Hub .summary-section-header */
.card-header.navy { background: var(--navy); border-bottom: 1px solid var(--border); }
.card-header.navy:hover { background: var(--navy-hover); }
.card-header.navy .card-title { color: #ffffff; }
.card-body { padding: 12px 14px; }

/* tags — Hub .tag family (4px radius, 9px uppercase) */
.tag {
  display: inline-block;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
  background: var(--surface3); color: var(--text-sub);
  border: 1px solid var(--border);
  white-space: nowrap; line-height: 1.5;
}
/* the display above beats the browser's [hidden], so el.hidden = true left the
   tag on screen: the Admin "Paused" badge read PAUSED while Ivo was running
   (2026-10-28). A status badge that cannot be wrong only when the state happens
   to match is worse than none. */
.tag[hidden] { display: none; }
.tag-primary   { background: rgba(29,78,216,0.07); border-color: rgba(29,78,216,0.2); color: var(--c-broker); }
.tag-second    { background: rgba(109,40,217,0.07); border-color: rgba(109,40,217,0.2); color: var(--c-uw); }
.tag-invest    { background: rgba(113,69,24,0.09); border-color: rgba(113,69,24,0.25); color: #714518; }
.tag-nonrental { background: rgba(101,163,13,0.10); border-color: rgba(101,163,13,0.3); color: #65a30d; }
.tag-sold      { background: rgba(192,57,43,0.07); border-color: rgba(192,57,43,0.2); color: var(--c-suspend); }
.tag-pending   { background: rgba(180,83,9,0.07); border-color: rgba(180,83,9,0.2); color: var(--c-app); }
.tag-retained  { background: rgba(15,118,110,0.07); border-color: rgba(15,118,110,0.2); color: var(--c-title); }
.tag-current   { background: rgba(171,139,42,0.12); border-color: rgba(171,139,42,0.4); color: #7a6214; }
/* aliases used across LOS pages */
.tag-blue  { background: rgba(29,78,216,0.07); border-color: rgba(29,78,216,0.2); color: var(--c-broker); }
.tag-green { background: var(--c-income-bg); border-color: var(--c-income-br); color: var(--c-income); }
.tag-red   { background: var(--c-suspend-bg); border-color: var(--c-suspend-br); color: var(--c-suspend); }
.tag-amber { background: var(--c-app-bg); border-color: var(--c-app-br); color: var(--c-app); }
/* barely-there tag for quiet metadata (linked-doc counts etc.) */
.tag-faint { background: var(--surface2); border-color: var(--surface3); color: var(--text-dim); }

/* in-page tabs (Conditions | Delivery) — same sizing as the LE/CD tabs */
.pg-tabs {
  display: flex; flex-wrap: nowrap; gap: 2px;
  background: var(--bg); margin: 0 0 12px; padding-top: 2px;
  /* one row that slides sideways only: vertical overflow is cut off (an
     auto x-overflow otherwise turns y into a scroller too, and the tab
     underline made it wiggle 2px). The baseline is an inset shadow so the
     active underline, painted by the tab itself, is never clipped. */
  box-shadow: inset 0 -2px 0 var(--border-mid);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab {
  border: none; background: none; cursor: pointer; flex-shrink: 0; white-space: nowrap;
  padding: 8px 18px 7px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-sub); border-bottom: 2px solid transparent;
}
.pg-tab:hover { color: var(--text); background: var(--surface2); }
.pg-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* condition type badges — Hub .type-badge */
.type-badge {
  display: inline-flex; align-items: center; border-radius: 4px; padding: 2px 7px;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
  font-family: var(--mono); text-transform: uppercase; line-height: 1.6;
}
.type-SUSPEND { background: var(--c-suspend-bg); border: 1px solid var(--c-suspend-br); color: var(--c-suspend); }
.type-APP     { background: var(--c-app-bg);     border: 1px solid var(--c-app-br);     color: var(--c-app); }
.type-MISC    { background: var(--c-misc-bg);    border: 1px solid var(--c-misc-br);    color: var(--c-misc); }
.type-CREDIT  { background: rgba(180,140,0,0.1); border: 1px solid rgba(180,140,0,0.35); color: #7a5f00; }
.type-INCOME  { background: var(--c-income-bg);  border: 1px solid var(--c-income-br);  color: var(--c-income); }
.type-PROP    { background: var(--c-prop-bg);    border: 1px solid var(--c-prop-br);    color: var(--c-prop); }
.type-TITLE   { background: var(--c-title-bg);   border: 1px solid var(--c-title-br);   color: var(--c-title); }
.type-DOCS    { background: var(--c-docs-bg);    border: 1px solid var(--c-docs-br);    color: var(--c-docs); }
.type-DISC    { background: rgba(13,110,150,0.08); border: 1px solid rgba(13,110,150,0.3); color: #0d6e96; }
.type-REO     { background: rgba(101,163,13,0.10); border: 1px solid rgba(101,163,13,0.3); color: #4d7c0f; }
.type-ASSET   { background: rgba(8,145,178,0.08);  border: 1px solid rgba(8,145,178,0.3);  color: #0e7490; }
.type-QC      { background: rgba(171,139,42,0.12); border: 1px solid rgba(171,139,42,0.4);  color: #ab8b2a; }
.type-INTERNAL { background: rgba(71,85,105,0.10); border: 1px solid rgba(71,85,105,0.35); color: #475569; }

.party-broker {
  display: inline-flex; align-items: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
  background: rgba(29,78,216,0.07); border: 1px solid rgba(29,78,216,0.22);
  color: var(--c-broker); border-radius: 4px; padding: 2px 7px; text-transform: uppercase;
}
.party-underwriter {
  display: inline-flex; align-items: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
  background: rgba(109,40,217,0.07); border: 1px solid rgba(109,40,217,0.22);
  color: var(--c-uw); border-radius: 4px; padding: 2px 7px; text-transform: uppercase;
}
.internal-badge {
  display: inline-flex; align-items: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
  background: rgba(161,128,0,0.07); border: 1px solid rgba(161,128,0,0.22);
  color: #7a6000; border-radius: 4px; padding: 2px 7px; text-transform: uppercase;
}

/* condition cards — Hub .warning-card */
.warning-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: stretch; overflow: hidden; position: relative;
  transition: border-color 0.15s;
}
.warning-card:hover { border-color: var(--border-light); }
.warning-card.is-internal { border-color: rgba(109,40,217,0.2); background: rgba(109,40,217,0.03); }
.warning-card.is-internal:hover { border-color: rgba(109,40,217,0.4); }
/* a cleared / waived card fades its own line only — an Ivo panel opened on it stays readable */
.warning-card.is-cleared .cond-row, .warning-card.is-cleared .cond-dates { opacity: 0.65; }
/* a card that was just cleared / waived: a short tint, then it folds shut so
   the ones below slide up instead of jumping */
.warning-card.cond-leaving {
  transition: height .28s ease, margin .28s ease, opacity .22s ease .06s, border-color .28s ease;
  border-color: transparent;
  pointer-events: none;
}
.warning-card.cond-leaving.cond-ok { background: rgba(22,163,74,0.10); }
.warning-card.cond-leaving.cond-warn { background: rgba(217,119,6,0.10); }
/* Show All on: a card just cleared / waived stays put — a quick diagonal
   sweep runs top-left to bottom-right and leaves it dimmed like the others */
.warning-card.cond-dimming .cond-row, .warning-card.cond-dimming .cond-dates { opacity: 0.65; transition: opacity .45s ease; }
.warning-card.cond-dimming .card-bar { transition: background-color .45s ease; }
.warning-card.cond-dimming::after {
  content: ''; position: absolute; inset: -100%; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, transparent 42%, rgba(255,255,255,0.9) 50%, transparent 58%);
  animation: cond-sweep .5s ease-out forwards;
}
.warning-card.cond-dimming.cond-ok::after { background: linear-gradient(135deg, transparent 42%, rgba(22,163,74,0.28) 50%, transparent 58%); }
.warning-card.cond-dimming.cond-warn::after { background: linear-gradient(135deg, transparent 42%, rgba(217,119,6,0.28) 50%, transparent 58%); }
@keyframes cond-sweep {
  from { transform: translate(-45%, -45%); }
  to   { transform: translate(45%, 45%); }
}
/* first paint of a page (shared/enter.js): blocks settle in, a beat apart
   (opacity / transform only — nothing that costs layout) */
.enter-item {
  animation: cond-in .28s ease-out both;
  animation-delay: calc(min(var(--i, 0), 14) * 22ms);
}
@keyframes cond-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .enter-item { animation: none; } }
/* a card just reopened: starts as dim as a cleared one and brightens back */
.warning-card.cond-waking .cond-row, .warning-card.cond-waking .cond-dates { opacity: 0.65; filter: blur(1px); }
.warning-card.cond-waking.is-awake .cond-row, .warning-card.cond-waking.is-awake .cond-dates { opacity: 1; filter: blur(0); transition: opacity .3s ease, filter .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .warning-card.cond-leaving, .warning-card.cond-waking.is-awake :is(.cond-row, .cond-dates), .warning-card.cond-dimming :is(.cond-row, .cond-dates) { transition: none; }
  .warning-card.cond-dimming::after { animation: none; display: none; }
  .modal-back > .modal, .lp-win.lp-fresh { animation: none; }
}
.card-bar { width: 3px; flex-shrink: 0; background: var(--c-broker); }
.is-internal .card-bar { background: var(--c-uw); }
/* the bar takes the category's badge color (Conditions + Condition Uploads) */
.warning-card.cat-SUSPEND .card-bar { background: var(--c-suspend); }
.warning-card.cat-APP     .card-bar { background: var(--c-app); }
.warning-card.cat-MISC    .card-bar { background: var(--c-misc); }
.warning-card.cat-CREDIT  .card-bar { background: #b48c00; }
.warning-card.cat-INCOME  .card-bar { background: var(--c-income); }
.warning-card.cat-PROP    .card-bar { background: var(--c-prop); }
.warning-card.cat-TITLE   .card-bar { background: var(--c-title); }
.warning-card.cat-DOCS    .card-bar { background: var(--c-docs); }
.warning-card.cat-DISC    .card-bar { background: #0d6e96; }
.warning-card.cat-REO     .card-bar { background: #4d7c0f; }
.warning-card.cat-ASSET   .card-bar { background: #0e7490; }
.warning-card.cat-QC      .card-bar { background: #ab8b2a; }
.warning-card.cat-INTERNAL .card-bar { background: #475569; }
.warning-card.is-cleared  .card-bar { background: var(--border-mid); }
.card-inner { flex: 1; padding: 5px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
/* Conditions tab: the condition's own line (text + date cells), and Ivo's
   panel as a full-width block below it — the dates never stretch with it */
.cond-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cond-line { display: flex; align-items: stretch; min-width: 0; }
.cond-body > .ai-panel { margin: 0; }
/* a card's line 1 is the badges (category, party, docs) with the actions on
   the right, and the condition text starts on its own line below, at one
   consistent left edge — on every card but the Conditions tab's (.cond-line).
   There the category and party badges and the text run as one paragraph:
   the text starts right after them, and its next lines wrap back to the
   card's left edge (the owner, 2026-10-10: what the condition is reads first —
   no empty run beside the badges, no empty column under them). Its files and
   Ivo's verdict are not on the card: they are the condition window's (Files /
   Ivo tabs). Only a file read as another document than the condition asks
   for shows, on a line under the text and only when it happens (.cond-meta,
   inside the row so a cleared card dims it too). Not a slip — keep it so.
   With flex off, the whitespace between the badges in the markup is a real
   space: the gap is the 5px margin plus that collapsed space (~3px). The line
   breaks between the badges in conditions.js conditionRow are part of the
   gap — put those badges on one line there and the cards close up */
.cond-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.cond-row .warning-text { flex: 1 1 100%; order: 10; min-width: 0; }
.cond-line .cond-row { display: block; }
.cond-line .cond-row > * { margin-right: 5px; }
.cond-line .cond-row > .warning-text { display: inline; margin-right: 0; }
.cond-line .cond-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0 0; }
.cond-row .btn-sm { padding: 2px 8px; font-size: 10px; }
.cond-row [data-cond-text] { cursor: pointer; }
/* dated "[MM/DD] …" update lines inside a condition's text */
.cond-upd { color: var(--accent); font-weight: 400; }
.cond-upd.cond-new, .cond-ivo.cond-new { font-weight: 700; }
/* Ivo's line: a "[MM/DD 🤖 Ivo]" box, then the text, both in the outcome's colour */
.cond-ivo { font-weight: 400; background: none !important; border: 0 !important; }
.cond-ivo-box { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; vertical-align: 1px; cursor: default; }
.cond-ivo-box .ai-ico { width: 11px; height: 11px; }
/* earlier Ivo reviews: folded, then shown dimmed */
.cond-ivo-old { display: none; opacity: 0.55; }
.cond-ivo-old .cond-ivo { font-weight: 400; }
.cond-ivo-open .cond-ivo-old { display: inline; }
.cond-ivo-more { border: 1px solid var(--border-mid); background: var(--surface2); color: var(--text-sub); border-radius: 999px; padding: 0 7px; font: inherit; font-size: 9px; font-weight: 600; cursor: pointer; vertical-align: 1px; }
.cond-ivo-more:hover { color: var(--text); background: var(--surface3); }

/* default-conditions picker */
/* clickable category badges: dim the unpicked ones, ring the active one */
.dc-catbtn { cursor: pointer; font-family: inherit; opacity: 0.55; }
.dc-catbtn:hover { opacity: 1; }
.dc-catbtn.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent-bg), 0 0 0 3px currentColor; }
.dc-cat {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface2); border-bottom: 1px solid var(--border);
  padding: 3px 10px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.dc-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 10px; border-bottom: 1px solid var(--surface3);
  font-size: 11px; cursor: pointer;
}
.dc-item:hover { background: var(--surface2); }
.dc-item.on { background: var(--accent-bg); }
.dc-item input { margin: 2px 0 0; flex-shrink: 0; }
.dc-item .tag, .dc-item .party-broker, .dc-item .internal-badge, .dc-item .party-underwriter { flex-shrink: 0; }
.dc-item .dc-text { flex: 1; line-height: 1.45; word-break: break-word; }
.warning-text {
  font-size: 10.5px; font-weight: 400; color: var(--text);
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}

/* condition composer / edit panels — controls sized like the URLA editor (.erow) */
.cond-form select { height: 28px; font-size: 10.5px; padding: 4px 8px; }
.cond-form textarea { font-size: 10.5px; }
.cond-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }

/* condition date columns (Issued / Received / Cleared / Waived) */
.cond-dates { display: flex; align-items: stretch; flex-shrink: 0; border-left: 1px solid var(--border); }
.cond-dates .dcell {
  width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 3px 4px; border-left: 1px dashed var(--border);
}
.cond-dates .dcell:first-child { border-left: none; }
.cond-dates .dlbl {
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}
.cond-dates .dval { font-size: 9px; font-family: var(--mono); color: var(--text); white-space: nowrap; }
.cond-dates .dval.none { color: var(--text-dim); }
.cond-dates .dval.ok { color: var(--c-income); font-weight: 600; }
.cond-dates .dval.warn { color: var(--c-app); font-weight: 600; }
/* Clear/Waive live inside their date cells while the condition is open */
.cond-dates .dbtn { padding: 4px 10px; font-size: 10px; }
.cond-dates .dbtn.dre { padding: 1px 8px; font-size: 9.5px; margin-top: 2px; }

/* narrow / mobile: the one-line card can't fit text + buttons + four date
   columns — stack it: badges & actions on top, text on its own line, the
   date cells as a full-width row along the bottom */
@media (max-width: 760px) {
  /* the card stacks, but the category bar stays on the left edge */
  .warning-card { flex-direction: column; position: relative; padding-left: 3px; }
  .warning-card .card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; height: auto; }
  .cond-line { flex-direction: column; }
  .cond-dates { border-left: none; border-top: 1px solid var(--border); }
  .cond-dates .dcell { flex: 1 1 0; width: auto; }
  /* the New / Edit windows: Stage takes its own row so every value stays readable */
  .cond-meta-grid { grid-template-columns: 1fr 1fr; }
  .cond-meta-grid > :last-child { grid-column: 1 / -1; }
  /* Ivo's tables scroll inside the card instead of being cut off */
  .ai-panel .wv-two { max-width: 100%; overflow-x: auto; }
  .ai-panel .wv-sel { min-width: 78px; }
  .cu-file-row { flex-wrap: wrap; }
  /* (one class deeper than the uploads-list rule further down, which would otherwise win) */
  .cu-files .cu-file .cu-file-more { display: inline; }
}

/* Condition Uploads: big drop zone, file chips, linkable condition cards */
.cu-drop {
  border: 2px dashed var(--border-mid); border-radius: var(--radius-lg);
  padding: 34px 20px; text-align: center; cursor: pointer; margin-bottom: 4px;
  background: var(--surface); transition: border-color 0.15s, background 0.15s;
}
.cu-drop:hover { border-color: var(--border-light); }
.cu-drop.over { border-color: var(--accent); background: var(--accent-bg); }
.cu-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-mid); border-radius: 999px; background: #fff;
  padding: 4px 11px; font-size: 10px; font-weight: 500; font-family: inherit;
  color: var(--text-sub); cursor: pointer; max-width: 320px;
}
.cu-chip:hover { border-color: var(--border-light); color: var(--text); }
.cu-chip.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.cu-chip.unassigned:not(.active) { border-color: var(--c-app-br); background: var(--c-app-bg); }
.cu-chip-meta { font-size: 8.5px; color: var(--text-dim); font-family: var(--mono); flex-shrink: 0; }
.cu-open {
  color: var(--text); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cu-open:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Declarations: URLA Section 5 groups and the detail rows under a Yes */
.decl-group { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 8px 0 3px; }
.decl-group:first-child { margin-top: 0; }
/* the letter sits in its own column, so a wrapped question keeps its left edge */
.decl-qcell { display: flex; align-items: flex-start; gap: 0; min-width: 0; }
.decl-qcell > span { flex: 1 1 auto; min-width: 0; }
.decl-letter { flex: 0 0 26px; font-size: 10px; color: var(--text-dim); font-family: var(--mono); }
.decl-edit .decl-group-row td { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--surface2); text-align: left; padding: 6px 8px 4px; }
/* a group header is not a row to pick: it keeps its tint under the grid's stripe and hover */
table.grid.decl-edit tbody tr.decl-group-row td, table.grid.decl-edit tbody tr.decl-group-row:hover td { background: var(--surface2); }
.decl-edit .decl-sub td { background: #fbfcfe; padding: 4px 8px; text-align: left; }
/* detail rows on the same 26px rhythm as the question rows */
.lp-w600 .lp-body table.grid.decl-edit tr.decl-sub td { padding-top: 1px; padding-bottom: 1px; }
.decl-edit .decl-sub td.decl-pick { width: 132px; white-space: nowrap; }
.decl-edit .decl-sub td.decl-pick select, .decl-edit .decl-sub td.decl-pick input[type=text] { width: 100%; height: 24px; padding: 2px 6px; font-size: 10px; }
.decl-edit .decl-sub td.decl-chapters label { margin-right: 4px; font-size: 10px; gap: 3px; }
.decl-sub-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.decl-sub-row .fld { flex: 1 1 200px; }
.decl-sub-row select, .decl-sub-row input[type=text] { height: 26px; padding: 3px 8px; font-size: 10.5px; }
.decl-chapters label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; margin-right: 6px; }
.decl-sub-cap { font-size: 10.5px; color: var(--text-sub); margin-right: 4px; }
/* a follow-up locked by its parent answer: light grey text, dimmed controls */
.decl-off, .decl-off td, .decl-off .decl-letter, .decl-off label, .decl-off label > span, .decl-off .decl-sub-cap { color: #b3bac8; }
.decl-off input[type=radio], .decl-off input[type=checkbox] { opacity: 0.35; cursor: not-allowed; }
.decl-off select, .decl-off input[type=text] { color: #b3bac8; background: #f6f7fa; border-color: #e6e9f0; }

/* Next Steps walkthrough (after a broker registers a file): a small floating
   card, and a pulsing ring on the button the current step talks about */
.guide-panel { position: fixed; right: 18px; bottom: 18px; z-index: 1050; width: 300px; max-width: calc(100vw - 32px);
  background: rgba(248,250,254,0.97); border: 1px solid rgba(255,255,255,0.7); border-top: 3px solid var(--accent); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(16,24,40,0.28), 0 2px 8px rgba(16,24,40,0.12); padding: 10px 14px 12px; font-size: 11px; }
.guide-head { display: flex; align-items: center; gap: 8px; }
.guide-kicker { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); flex: 1; }
.guide-x { border: 0; background: none; cursor: pointer; color: var(--text-dim); font-size: 12px; padding: 2px 4px; }
.guide-dots { display: flex; gap: 4px; margin: 6px 0 8px; }
.guide-dots span { flex: 1; height: 3px; border-radius: 2px; background: var(--border-mid); }
.guide-dots span.done { background: var(--c-income); }
.guide-dots span.on { background: var(--accent); }
.guide-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.guide-text { color: var(--text-sub); line-height: 1.5; }
.guide-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.guide-spot { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; animation: guidePulse 1.2s ease-in-out infinite; }
@keyframes guidePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,93,173,0.45); } 50% { box-shadow: 0 0 0 8px rgba(26,93,173,0); } }
.st-reg-desc { font-size: 10px; color: var(--text-sub); margin-top: 4px; min-height: 14px; }
.st-reg-desc.bad { color: var(--danger); }
@media (max-width: 760px) { .guide-panel { right: 8px; left: 8px; bottom: 8px; width: auto; } }

/* merge fields in email templates: {loan_number} … in their own color where
   they are typed (see-through box over a painted backdrop) and, as the
   filled-in value, in the preview */
.mf-wrap { position: relative; display: block; width: 100%; }
.mf-back {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-style: solid; border-color: transparent; box-sizing: border-box;
  overflow-wrap: break-word; word-break: normal;
}
.mf-wrap > .mf-input {
  position: relative; display: block; width: 100%;
  background: transparent !important; color: transparent !important;
  -webkit-text-fill-color: transparent; caret-color: var(--text);
}
.mf-wrap > .mf-input::placeholder { -webkit-text-fill-color: var(--text-dim); color: var(--text-dim); }
.mf-wrap > .mf-input::selection { background: rgba(26,93,173,0.22); }
.mf-tok, .mf-val { color: #7c3aed; background: rgba(124,58,237,0.09); border-radius: 3px; }
.mf-bad { color: var(--danger); background: rgba(220,38,38,0.08); border-radius: 3px; }

/* uploaded files: one card per file — the detail row, then the conditions it answers */
.cu-file {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 12px; margin-bottom: 4px; font-size: 10.5px;
  border-left: 3px solid var(--border);
}
.cu-file:hover { border-color: var(--border-light); }
.cu-file-pick { cursor: pointer; }
.cu-file-pick:hover { border-color: var(--accent); border-left-color: var(--accent); }
.cu-file-row { display: flex; align-items: center; gap: 10px; }
.cu-file-meta { font-size: 9.5px; color: var(--text-dim); flex-shrink: 0; }
.cu-file-conds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); }
/* File Uploads: one line a file (uploads.js fileRow) — its conditions open below it from "Linked Conditions" (red when
   one is a link Ivo read as another document); the name gives way to the controls; its size and uploader are in its
   tooltip, and shown on a phone */
.cu-files .cu-file-row .cu-open { flex: 0 1 auto; min-width: 60px; }
.cu-files .cu-file-more { display: none; }
.cu-files .cu-ai-note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-conds-btn.open { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.cu-conds-btn.is-bad { border-color: var(--danger); color: var(--danger); }
.cu-ctag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-size: 9.5px; color: var(--text-sub); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px 1px 3px;
}
.cu-ctag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.cu-ctag-ivo { margin-left: 4px; font-size: 8.5px; padding: 0 6px; line-height: 1.6; flex-shrink: 0; }
.cu-ctag-ivo .ai-ico { width: 10px; height: 10px; }
.cu-ctag.is-cleared { opacity: 0.55; }
.cu-ctag.is-cleared .cu-ctag-text { text-decoration: line-through; }

/* link window: compact file list on the left, the open conditions as toggles on the right */
.modal.cu-lm { max-width: 940px; }
.cu-lm-body { display: flex; flex-direction: column; gap: 10px; }
.lm-tabs { border-bottom: 0; margin: 0 0 0 14px; }
.lm-tabs .ai-p-tab { font-size: 11px; padding: 6px 12px 5px; border-bottom-width: 2px; }
.lm-tabs .ai-ico { width: 11px; height: 11px; margin-right: 3px; }
/* the loan page's Ivo tab carries the same robot as every Ivo badge */
.pg-tab-ivo .ai-ico { width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; stroke-width: 1.6; }
.cu-lm-ivotab { max-height: calc(88vh - 130px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cu-lm-ivo-item { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 8px 10px; }
.cu-lm-ivo-item .ai-panel { margin: 0; border-top: 0; padding: 4px 0 0; }
.cu-lm-panes { display: grid; grid-template-columns: minmax(230px, 330px) minmax(0, 1fr); gap: 10px; }
.cu-lm-pane { display: flex; flex-direction: column; min-width: 0; max-height: calc(88vh - 130px); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.cu-lm-pane-head { display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: var(--surface2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cu-lm-pane-head .cu-lm-box { cursor: pointer; }
.cu-lm-pane-title { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.cu-lm-all { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 9.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.cu-lm-all:hover { text-decoration: underline; }
.cu-lm-q { flex-shrink: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 5px 9px; font-size: 10px; font-family: inherit; outline: none; background: #fff; }
.cu-lm-flist, .cu-lm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cu-lm-file { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 10px; line-height: 1.3; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--surface3, var(--border)); color: var(--text-sub); }
.cu-lm-file:hover { background: var(--accent-bg); }
.cu-lm-file.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.cu-lm-file .cu-lm-box, .cu-lm-pane-head .cu-lm-box { width: 13px; height: 13px; font-size: 9px; border-radius: 3px; }
.cu-lm-file.on .cu-lm-box, .cu-lm-pane-head .cu-lm-box.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cu-lm-file .ft-badge svg { width: 11px; height: 14px; }
.cu-lm-file .ft-badge text { display: none; }
.cu-lm-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cu-lm-ai { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 999px; padding: 0 6px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-lm-ivo { flex-shrink: 0; padding: 0 7px; height: 18px; font-size: 9.5px; }
.cu-lm-ai.busy { color: var(--text-dim); background: var(--surface2); border-color: var(--border); font-weight: 500; }
.cu-lm-ai .ai-ico, .cu-lm-stage .ai-ico { width: 10px; height: 10px; }
.cu-lm-stage.is-ai { color: var(--accent); background: var(--accent-bg); }
.cu-lm-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(88vh - 130px); }
.cu-lm-right .cu-lm-pane { max-height: none; min-height: 0; }
.cu-lm-right .cu-lm-pane:last-child { flex: 1 1 auto; }
.cu-lm-suggpane { flex: 0 0 auto; max-height: 40% !important; }
.cu-lm-suggpane .cu-lm-pane-title { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.cu-lm-suggpane .cu-lm-pane-title .ai-ico { width: 11px; height: 11px; }
.cu-lm-cond.is-sugg { box-shadow: inset 3px 0 0 var(--accent); }
.cu-lm-n { flex-shrink: 0; font-size: 8.5px; font-weight: 700; font-family: var(--mono); color: var(--c-income); background: var(--c-income-bg); border: 1px solid var(--c-income-br); border-radius: 999px; padding: 0 5px; }
.cu-lm-stage { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 5px 9px; background: var(--surface2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.cu-lm-cond { display: flex; align-items: center; gap: 7px; padding: 4px 9px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cu-lm-cond:last-child { border-bottom: 0; }
.cu-lm-cond .warning-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 10px; line-height: 1.35; }
.cu-lm-cond .type-badge { font-size: 7.5px; padding: 1px 5px; line-height: 1.5; }
.cu-lm-cond .cu-lm-box { width: 13px; height: 13px; font-size: 9px; border-radius: 3px; }
.cu-lm-cond:hover { background: var(--accent-bg); }
.cu-lm-cond.is-off { cursor: default; opacity: 0.6; }
.cu-lm-cond.is-locked { cursor: default; opacity: 0.7; background: var(--surface2); }
.cu-lm-cond.is-locked:hover { background: var(--surface2); }
.cu-lm-cond.is-locked .type-badge, .cu-lm-cond.is-locked .tag { font-size: 7.5px; padding: 1px 5px; line-height: 1.5; }
.cu-lm-cond.is-off:hover { background: none; }
.cu-lm-cond.is-all { background: var(--c-income-bg); }
.cu-lm-cond.is-some { background: #fffbeb; }
.cu-lm-cond.is-busy { opacity: 0.5; pointer-events: none; }
/* a link the lender made, seen from the broker side: linked, but not undoable */
.cu-lm-cond.is-held { cursor: default; }
.cu-lm-cond.is-held:hover { background: var(--c-income-bg); }
.cu-lm-lock { display: inline-flex; flex: 0 0 auto; color: var(--text-dim); }
.cu-lm-lock svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-lm-box {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 1px solid var(--border-mid); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--accent);
}
.cu-lm-cond.is-all .cu-lm-box { background: var(--c-income); border-color: var(--c-income); color: #fff; }
.cu-lm-cond.is-some .cu-lm-box { border-color: #f59e0b; color: #b45309; }
.cu-lm-foot { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 760px) {
  .cu-lm-panes { grid-template-columns: minmax(0, 1fr); }
  .cu-lm-pane:first-child { max-height: 27vh; }
  .cu-lm-pane:last-child { max-height: calc(92vh - 27vh - 150px); }
  .cu-ctag-text { max-width: 220px; }
}

/* link window additions: "Link all automatically", a link Ivo read as a
   different document (red count, "wrong file?", Move), the in-window question */
.modal.cu-lm { position: relative; }
.cu-lm-auto { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; height: 17px; padding: 0 7px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-bg); color: var(--accent); cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 700; white-space: nowrap; }
.cu-lm-auto:hover { background: var(--accent); color: #fff; }
.cu-lm-auto:disabled { opacity: 0.5; cursor: default; background: var(--accent-bg); color: var(--accent); }
.cu-lm-auto .ai-ico { width: 10px; height: 10px; }
.cu-lm-file.is-ambig { box-shadow: inset 3px 0 0 var(--c-app-br); }
.cu-lm-n.is-bad { color: var(--c-suspend); background: var(--c-suspend-bg); border-color: var(--c-suspend-br); }
.cu-lm-cond .cu-lm-bad { flex-shrink: 0; font-size: 7.5px; padding: 1px 5px; line-height: 1.5; cursor: help; }
.cu-lm-none { padding: 6px 9px; }
.cu-ctag.is-mismatch { color: var(--c-suspend); background: var(--c-suspend-bg); border-color: var(--c-suspend-br); }
.cu-lm-move { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.cu-lm-move select { width: auto; max-width: 340px; height: 24px; padding: 1px 6px; font-size: 10px; }
.cu-lm-move .btn { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.cu-lm-ask { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(248,250,254,0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cu-lm-ask-card { width: min(380px, 100%); padding: 12px 14px; border-radius: 12px;
  background: rgba(248,250,254,0.97); border: 1px solid rgba(255,255,255,0.7); border-top: 3px solid var(--c-app);
  box-shadow: 0 12px 40px rgba(16,24,40,0.3), 0 2px 8px rgba(16,24,40,0.12); animation: winIn .2s cubic-bezier(.2,.7,.2,1); }
.cu-lm-ask-msg { font-size: 11px; line-height: 1.55; color: var(--text); word-break: break-word; }
.cu-lm-ask-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* File Uploads as one table (the owner, 2026-10-13: the staged pills scattered across the page, and the linking
   needed care). Everything here is scoped to the page (.cu-page, uploads.js render) and to its own Link window
   (.cu-lm-up): the cu- classes the condition, dispute and appraisal windows share keep their rules above.
   The staged queue: one row a file — icon · name · size · ✕ (its state while the upload runs) — and one bar */
.cu-page .cu-q { margin-top: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cu-page .cu-q-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 56px 64px 20px; align-items: center; column-gap: 8px; height: 26px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--surface3); font-size: 10.5px; }
.cu-page .cu-q-row:hover { background: #f6f8fc; }
.cu-page .cu-q .ft-badge svg { width: 13px; height: 16px; }
.cu-page .cu-q-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cu-page .cu-q-size { text-align: right; font-size: 9.5px; color: var(--text-dim); white-space: nowrap; }
.cu-page .cu-q-st { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.cu-page .cu-q-row.is-uploaded .cu-q-name, .cu-page .cu-q-row.is-uploaded .cu-q-size { color: var(--text-dim); }
.cu-page .cu-q-ok { font-size: 10px; font-weight: 700; color: var(--c-income); }
.cu-page .cu-q-bar { width: 56px; height: 4px; border-radius: 2px; background: var(--surface3); overflow: hidden; position: relative; }
.cu-page .cu-q-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--accent); animation: cuQBar 1.1s ease-in-out infinite; }
@keyframes cuQBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cu-page .cu-q-row .cu-doc-x { justify-self: end; font-size: 10px; line-height: 1; }
.cu-page .cu-q-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--surface2); }
.cu-page .cu-q-sum { font-size: 10px; font-weight: 600; color: var(--text-sub); white-space: nowrap; }
/* the uploaded files: one white block, hairline rows, fixed columns under one header line — icon · name · date ·
   Ivo · Viewer · conditions */
.cu-page .cu-files { --cu-cols: 18px minmax(0, 1fr) 104px 178px 118px 196px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cu-page .cu-lh { display: grid; grid-template-columns: var(--cu-cols); column-gap: 10px; padding: 5px 8px 4px 10px; border-bottom: 1px solid var(--border); font-size: 8px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-lbl); }
.cu-page .cu-lh-r { text-align: right; }
.cu-page .cu-files .cu-file { border: 0; border-radius: 0; margin: 0; padding: 0; }
.cu-page .cu-files .cu-file + .cu-file { border-top: 1px solid var(--surface3); }
.cu-page .cu-files .cu-file-pick:hover { border-color: var(--surface3); }
.cu-page .cu-files .cu-file-pick:hover > .cu-file-row { background: #e9f0fa; }
.cu-page .cu-files .cu-file.is-open > .cu-file-row { background: #f3f6fb; }
.cu-page .cu-files .cu-file-row { display: grid; grid-template-columns: var(--cu-cols); grid-template-areas: "ft nm dt ivo vw lk"; align-items: center; column-gap: 10px; min-height: 30px; padding: 2px 8px 2px 10px; }
.cu-page .cu-c-ft { grid-area: ft; display: flex; }
.cu-page .cu-files .ft-badge svg { width: 16px; height: 20px; }
.cu-page .cu-c-nm { grid-area: nm; min-width: 0; display: flex; }
.cu-page .cu-files .cu-file-row .cu-open { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.cu-page .cu-c-meta { display: contents; }
.cu-page .cu-c-dt { grid-area: dt; white-space: nowrap; }
.cu-page .cu-c-ivo { grid-area: ivo; display: flex; align-items: center; gap: 4px; min-width: 0; }
.cu-page .cu-c-ivo > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-page .cu-c-vw { grid-area: vw; display: flex; min-width: 0; }
.cu-page .cu-c-vw > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-page .cu-c-lk { grid-area: lk; justify-self: end; display: flex; justify-content: flex-end; min-width: 0; max-width: 100%; }
.cu-page .cu-c-lk > .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-page .cu-file-row .btn-sm { padding: 2px 8px; }
/* the conditions cell: the linked categories as badges with a count; red where Ivo read the file as another
   document; faded once every link is cleared; a press opens the tags under the row */
.cu-page .cu-lk { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; padding: 0 5px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; font: inherit; color: var(--text-dim); cursor: pointer; white-space: nowrap; overflow: hidden; }
.cu-page .cu-lk:hover { border-color: var(--border); background: #fff; }
.cu-page .cu-lk.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.cu-page .cu-lk.is-bad { color: var(--c-suspend); }
.cu-page .cu-lk.is-bad.on { border-color: var(--c-suspend); background: var(--c-suspend-bg); }
.cu-page .cu-lk .type-badge { padding: 1px 5px; font-size: 7.5px; line-height: 1.5; flex-shrink: 0; }
.cu-page .cu-lk .type-badge i { font-style: normal; font-weight: 800; margin-left: 3px; }
.cu-page .cu-lk .cu-lk-bad { box-shadow: 0 0 0 1.5px var(--c-suspend); }
.cu-page .cu-lk-more { font-size: 8.5px; font-weight: 700; color: var(--text-dim); }
.cu-page .cu-lk .cu-lk-wrong { font-size: 7.5px; padding: 1px 5px; line-height: 1.5; }
.cu-page .cu-lk.is-done .type-badge { opacity: .5; }
.cu-page .cu-lk-chev { font-size: 9px; margin-left: 1px; }
.cu-page .cu-files .cu-file-conds { margin: 0; padding: 2px 10px 7px 38px; border-top: 0; background: #f3f6fb; }
.cu-page .cu-files .cu-file-conds .cu-ctag { background: #fff; }
.cu-page .cu-files .cu-file-conds .cu-ctag.is-mismatch { background: var(--c-suspend-bg); }
.cu-page .cu-files .ai-split { margin: 0 10px 8px 38px; }
.cu-page .cu-files .ai-bk { margin-left: 38px; }
/* a phone: the row keeps one line for icon · name · conditions; the size, uploader and date go on a dim line under
   the name, Ivo and the Viewer on the line after */
@media (max-width: 760px) {
  .cu-page .cu-lh { display: none; }
  .cu-page .cu-files .cu-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 5px 8px 6px 10px; }
  .cu-page .cu-c-nm { flex: 1 1 160px; }
  .cu-page .cu-c-lk { margin-left: auto; max-width: 172px; }
  .cu-page .cu-c-ivo, .cu-page .cu-c-vw { flex: 0 1 auto; }
  .cu-page .cu-files .cu-file-conds { padding-left: 10px; }
  .cu-page .cu-files .ai-split, .cu-page .cu-files .ai-bk { margin-left: 10px; }
  .cu-page .cu-q-row { grid-template-columns: 14px minmax(0, 1fr) 48px 44px 20px; }
  .cu-page .cu-q-foot { flex-wrap: wrap; }
  .cu-page .cu-q-sum { flex-basis: 100%; }
}
/* this page's Link window: Ivo's suggestions as "file → condition" rows with one press; the stage list with
   hairlines, its boxes shown on hover (always, where there is no hover), the stage headers in the page's caps */
.cu-lm-up .cu-lm-suggpane { border-color: rgba(26,93,173,0.28); }
.cu-lm-up .cu-lm-stage { display: flex; align-items: center; gap: 8px; padding: 8px 10px 3px; background: #fff; border-bottom: 0; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cu-lm-up .cu-lm-stage::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cu-lm-up .cu-lm-cond { padding: 3px 10px; border-bottom: 1px solid var(--surface3); }
.cu-lm-up .cu-lm-cond .warning-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Ivo's suggestions are read in full — the pick is made from their wording (the owner, 2026-10-14) */
.cu-lm-up .cu-lm-suggpane .cu-lm-cond .warning-text { display: block; overflow: visible; }
.cu-lm-up .cu-lm-cond .cu-lm-box { opacity: 0; transition: opacity .1s; }
.cu-lm-up .cu-lm-cond:hover .cu-lm-box, .cu-lm-up .cu-lm-cond.is-all .cu-lm-box, .cu-lm-up .cu-lm-cond.is-some .cu-lm-box { opacity: 1; }
.cu-lm-up .cu-lm-cond.is-locked .cu-lm-box { visibility: hidden; }
.cu-lm-up .cu-lm-cond.is-off:hover .cu-lm-box { opacity: 0; }
@media (hover: none) { .cu-lm-up .cu-lm-cond .cu-lm-box { opacity: 1; } }
/* New Condition: the uploaded files that already answer the wording ("On file") */
.cond-onfile { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cond-onfile[hidden] { display: none; }
.cond-onfile-lbl { font-size: 8px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin-right: 2px; }
.cond-onfile-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px 1px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text-sub); font-size: 9.5px; cursor: pointer; }
.cond-onfile-chip.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.cond-onfile-chip input { width: 11px; height: 11px; margin: 0; flex-shrink: 0; }
.cond-onfile-chip:has(input:disabled) { cursor: default; }
.cond-onfile-name { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cond-onfile-type { white-space: nowrap; }

/* file-type pictogram: document icon with a folded corner, colored per type */
.ft-badge { display: inline-flex; flex-shrink: 0; color: var(--text-sub); }
.ft-badge svg { width: 20px; height: 25px; display: block; }
.ft-badge .ft-page { fill: currentColor; fill-opacity: 0.08; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.ft-badge .ft-fold { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.ft-badge text { fill: currentColor; font-family: var(--font); font-size: 6.5px; font-weight: 800; letter-spacing: 0.02em; }
.ft-pdf { color: var(--c-suspend); }
.ft-xls { color: var(--c-income); }
.ft-xml { color: var(--c-uw); }
.ft-doc { color: var(--c-broker); }
.ft-img { color: var(--c-title); }
.ft-zip { color: var(--c-app); }

/* linked-file rows (Conditions page edit window) */
.cu-docs-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 10px; }
.cu-docs-row + .cu-docs-row { border-top: 1px dashed var(--border); }
/* a condition window's file list: numbered, the picked file's review shows below */
.cond-file:hover { background: var(--accent-bg); }
.cond-file.on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.cond-file-n { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--text-dim); min-width: 20px; }
.cond-file.on .cond-file-n { color: var(--accent); }
.cu-doc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-family: var(--mono);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; color: var(--text-sub);
}
.cu-doc-x { border: none; background: none; cursor: pointer; color: var(--text-dim); font-size: 9.5px; padding: 0 1px; }
.cu-doc-x:hover { color: var(--danger); }

/* tables — Hub .ls-table
   Header row: centered labels with an underline. Body rows: no borders —
   each row is a very light grey band separated by white gaps, darkening
   on hover so long tables stay scannable. */
table.grid { width: 100%; border-collapse: collapse; font-size: 10.5px; }
table.grid th {
  position: sticky; top: 0; background: #ffffff; z-index: 2;
  font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-lbl);
  padding: 6px 14px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.grid td {
  padding: 2px 14px; color: var(--text); font-size: 10.5px; line-height: 1.4;
  vertical-align: middle;
}
/* content-sized view tables (1003 assets / liabilities / REO): columns follow
   the words in them; urla.js steps --fit-fs / --fit-pad down when the table
   would overflow its card, and .fit-wrap lets text wrap as a last resort */
table.grid.fit-tbl { table-layout: auto; }
table.grid.fit-tbl th, table.grid.fit-tbl td { white-space: nowrap; padding-left: var(--fit-pad, 14px); padding-right: var(--fit-pad, 14px); }
table.grid.fit-tbl td { font-size: var(--fit-fs, 10.5px); }
table.grid.fit-tbl th { font-size: calc(var(--fit-fs, 10.5px) * 0.76); }
table.grid.fit-tbl .tag { font-size: calc(var(--fit-fs, 10.5px) * 0.8); }
table.grid.fit-tbl.fit-wrap td { white-space: normal; }
table.grid.fit-tbl.fit-wrap td .tag { white-space: nowrap; }
/* uniform row rhythm across the app — matches the 1008's ~26px rows */
table.grid tbody td { background: #f6f6f8; border-bottom: 1px solid #fff; height: 26px; }
table.grid tbody tr:nth-child(even) td { background: #fff; }
table.grid tbody tr:hover td { background: #e9f0fa; }
table.grid tfoot td { border-top: 1px solid var(--border); background: #fff; }
table.grid td.accent { color: var(--accent); }
table.grid td.ctr { text-align: center; }
/* fully centered tables (Liabilities) */
table.ctr-tbl td { text-align: center; }
/* REO table: everything centered except the address column; tighter cell
   padding — 12 columns need the room */
table.reo-tbl td, table.liab-tbl td { text-align: center; font-size: 10px; }
table.reo-tbl td.addr { text-align: left; }
table.reo-tbl th, table.reo-tbl td,
table.liab-tbl th, table.liab-tbl td { padding-left: 6px; padding-right: 6px; }
table.reo-tbl th, table.liab-tbl th { font-size: 8px; }
/* REO read table: fills the card, one step smaller than the other grids;
   status reads as a boxed tag */
table.grid.reo-tbl.fit-tbl { width: 100%; }
/* the address column takes whatever room is left — the figures stay packed
   together at their own width instead of spreading across the card */
table.grid.reo-tbl.fit-tbl th:first-child, table.grid.reo-tbl.fit-tbl td.addr { width: 100%; }
table.grid.reo-tbl.fit-tbl td { font-size: calc(var(--fit-fs, 10.5px) - 1px); padding-top: 4px; padding-bottom: 4px; line-height: 1.35; }
table.grid.reo-tbl.fit-tbl th, table.grid.reo-tbl.fit-tbl td { padding-left: calc(var(--fit-pad, 14px) - 5px); padding-right: calc(var(--fit-pad, 14px) - 5px); }
table.grid.reo-tbl.fit-tbl td .tag { font-size: 8px; padding: 1px 6px; letter-spacing: 0.05em; }
/* REO bulk edit window */
.lp-win.lp-reo { width: 1180px; }
.lp-reo .lp-body { overflow: auto; padding: 4px 10px 6px; }
.lp-reo .lp-body table.reo-edit { min-width: 940px; }
/* add / edit property window: compact rows */
.reo-m .g { gap: 6px 8px; }
.reo-m input[type=text], .reo-m .g select, .reo-m select { height: 26px; padding: 3px 8px; font-size: 10.5px; }
.reo-m-addr { grid-template-columns: 2.2fr 0.6fr 1.3fr 0.7fr 0.8fr; }
.reo-m-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* group heading inside a 1003 add / edit window (the Add Borrower window's .ab-sec too) */
.reo-m-grp, .ab-sec { font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin: 12px 0 5px; display: flex; align-items: center; gap: 8px; }
.reo-m-grp::after, .ab-sec::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.reo-m-grp.first { margin-top: 0; }
.reo-m-start { grid-template-columns: minmax(0, 1fr); margin-bottom: 6px; }
.reo-m-net { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; padding: 5px 9px; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); font-size: 10.5px; color: var(--text-sub); flex-wrap: wrap; }
.reo-m-net b { font-size: 11.5px; color: var(--text); }
.reo-m-net .none { font-size: 9.5px; margin-left: auto; }
.reo-m .mort-row { border-bottom: 1px solid var(--surface3, var(--border)); }
@media (max-width: 680px) {
  .reo-m-addr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reo-m-addr > :first-child { grid-column: 1 / -1; }
  .reo-m-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Subj / Curr flags — worded labels read better than bare S / C */
.reo-tbl .reo-flag {
  display: flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 8px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-sub); white-space: nowrap;
}

/* filter chips — Hub .filter-btn */
.chip {
  border: 1px solid var(--border); background: #fff; color: var(--text-sub);
  border-radius: var(--radius-sm); padding: 4px 11px;
  font-size: 10px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 0.15s;
}
.chip:hover { border-color: var(--border-light); color: var(--text); text-decoration: none; }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* loan summary strip items — Hub .ls-item */
.ls-label {
  font-size: 8px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
}
.ls-value { font-size: 10px; font-weight: 400; color: var(--text); line-height: 1.4; }
/* the three identity fields (loan #, borrower, property) carry the file — they
   print bold so the eye lands on them first */
.ls-value.key { font-weight: 700; }
.ls-value.highlight { color: var(--accent); }
.ls-value.suspend-val { color: var(--c-suspend); }
/* REO edit grid: 12 tight columns — compact controls so option text stays
   legible in the narrow cells */
.reo-tbl td input:not([type=checkbox]), .reo-tbl td select,
.liab-tbl td input:not([type=checkbox]), .liab-tbl td select {
  font-size: 9.5px; padding: 2px 4px; height: 21px; border-radius: 5px;
}
/* paid-off / omitted liabilities: the TEXT dims but the flag tags keep their
   full color and weight (row-level opacity would wash the tags out too) */
table.grid tr.liab-off td { color: var(--text-lbl) !important; }

/* drag-to-reorder grips on entity grid rows */
.row-drag { cursor: grab; touch-action: none; }
.row-drag:active { cursor: grabbing; }

/* row actions (pencil / trash / note chip) stay inside the tight last column */
.reo-tbl td .btn-ico, .reo-tbl td .pn-chip { padding: 2px 3px; }
.reo-tbl td .btn-ico svg, .reo-tbl td .pn-chip svg { width: 11px; height: 11px; }
.reo-tbl .rent-wrap { display: flex; gap: 3px; align-items: center; }
.reo-tbl .rent-wrap input { flex: 1; min-width: 52px; }
.reo-tbl .rent-wrap select { flex: 0 0 46px; padding: 2px 1px; }

/* risk thresholds (DTI > 50, LTV > 97 red; LTV > 80 amber) — any element */
.risk-red { color: var(--c-suspend) !important; font-weight: 700; }
.risk-amber { color: var(--c-app) !important; font-weight: 600; }

/* uniform form/view grids (URLA editor) */
.g { display: grid; gap: 10px 12px; align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.g input, .g select { height: 33px; }
.g .fld > span { height: 14px; }

.view-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.view-grid.vg6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vitem .lbl {
  display: block; font-size: 8px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-lbl); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vitem .val { font-size: 10.5px; color: var(--text); min-height: 18px; word-break: break-word; line-height: 1.4; }
.vitem .val.mono { font-family: var(--mono); font-size: 10.5px; }
.vitem .val .none, .none { color: var(--text-lbl); }

/* stacked label/value rows (URLA read mode) — striped like the tables so
   long blocks stay scannable */
.vrows { display: flex; flex-direction: column; }
/* uniform row rhythm — the 1008's ~26px rows are the reference */
.vrow { display: flex; align-items: center; gap: 12px; padding: 2px 8px; min-width: 0; border-radius: 4px; min-height: 26px; }
.vrows > .vrow:nth-child(odd of .vrow) { background: #f6f6f8; }
/* hover must outrank the stripe rule so grey rows darken too */
.vrows > .vrow:hover, .vrows > .vrow:nth-child(odd of .vrow):hover { background: #e9f0fa; }
.vrow .lbl {
  width: 148px; flex-shrink: 0;
  font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-lbl); line-height: 2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vrow .val { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text); word-break: break-word; }
.vrow .val.mono { font-family: var(--mono); font-size: 10.5px; }
.vrow-sep { border-top: 1px dashed var(--border); margin: 6px 0; }
/* a required value still missing: a 2px red tick on the row's left edge and a
   red label (the value keeps its ink, the row its stripe and hover), the reason
   on hover. Table rows carry the tick on the first cell; the offending cell
   reads red. */
.vrow.req-missing, .erow.req-missing, .decl-missing, .decl-q.decl-req, .inc-line-empty.req-missing,
.reo-flag.reo-flag-req, .reo-card .rc-head.rc-head-req, .reo-card .rc-loan.rc-loan-req, .liab-card.lcd-req,
table.grid tr.req-row > td:first-child { position: relative; }
.vrow.req-missing::before, .erow.req-missing::before, .decl-missing::before, .decl-q.decl-req::before, .inc-line-empty.req-missing::before,
.reo-flag.reo-flag-req::before, .reo-card .rc-head.rc-head-req::before, .reo-card .rc-loan.rc-loan-req::before, .liab-card.lcd-req::before,
table.grid tr.req-row > td:first-child::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--c-suspend); pointer-events: none; }
.vrow.req-missing .lbl { color: var(--c-suspend); }
/* the pipeline's duplicated files stay pink end to end (a file-level alarm, not a missing value) */
.grid-wrap table.grid tr.req-row td, .grid-wrap table.grid tbody tr.req-row:nth-child(even) td { background: #fdecec !important; }
.grid-wrap table.grid tbody tr.req-row:hover td { background: #fadfdf !important; }
.grid-wrap table.grid tr.req-row > td:first-child::before { content: none; }
/* filled by the last save: the tick turns green, holds, then retracts while the
   label settles back to its own colour */
:is(.vrow, .erow, .decl-q, .rc-loan, .rc-head, .liab-card).req-resolved, table.grid tr.req-resolved > td:first-child { position: relative; }
:is(.vrow, .erow, .decl-q, .rc-loan, .rc-head, .liab-card).req-resolved::before, table.grid tr.req-resolved > td:first-child::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 0 2px 2px 0;
  background: #16a34a; pointer-events: none; animation: reqOut .9s cubic-bezier(.2,.7,.2,1) forwards; }
.req-resolved .lbl, .req-resolved .decl-letter, .bname.req-resolved { animation: reqLblOut .9s ease; }
@keyframes reqOut { 0%, 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes reqLblOut { from { color: #16a34a; } }
@media (prefers-reduced-motion: reduce) {
  :is(.vrow, .erow, .decl-q, .rc-loan, .rc-head).req-resolved::before, table.grid tr.req-resolved > td:first-child::before { content: none; }
  .req-resolved .lbl, .req-resolved .decl-letter, .bname.req-resolved { animation: none; }
}
/* concurrent files (same borrower on more than one live file): a quiet green,
   matching the green Concurrent files banner on the loan page */
table.grid tr.conc-row td, table.grid tbody tr.conc-row:nth-child(even) td { background: #ecfdf3 !important; }
table.grid tr.conc-row:hover td { background: #dcfce7 !important; }
tr.conc-row > td { background: #ecfdf3 !important; }
table.grid td.req-cell { color: var(--c-suspend); font-weight: 600; cursor: default; }
/* the red cell outranks the amber (hand-entered) and dimmed (paid off /
   omitted) row text */
table.grid tbody tr td.req-cell { color: var(--c-suspend) !important; }
table.grid td.req-cell .req-tag { border: 0; padding: 0; background: none; }
/* warning chip beside a value (documents the file will need), amber outline */
.warn-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(180,83,9,0.5); background: #fff; color: #b45309; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.warn-tag.bad { border-color: rgba(192,57,43,0.5); color: var(--c-suspend); }
.req-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(192,57,43,0.45); background: #fff; color: var(--c-suspend); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* notice rows: amber — informational, not an error */
.vrows > .vrow.note-row, .vrows > .vrow.note-row:nth-child(odd of .vrow) { background: #fff4e0; }
.vrows > .vrow.note-row:hover { background: #ffeccb; }
.vrow.note-row .lbl { color: #b45309; }
/* REO rules the 1003 addresses set (above the REO table): a missing row reads
   like any required row; a property that looks like the address reads calm
   blue — same tick, accent instead of red */
.reo-gaps { margin-bottom: 8px; }
.reo-gaps .vrow .btn-sm { padding: 2px 8px; flex-shrink: 0; }
/* phones: the value keeps the row, the button drops under it */
@media (max-width: 640px) {
  .reo-gaps .vrow { flex-wrap: wrap; }
  .reo-gaps .vrow .val { flex-basis: calc(100% - 160px); }
  .reo-gaps .vrow .btn-sm { margin: 0 0 3px auto; }
}
.vrow.reo-sugg { position: relative; }
.vrow.reo-sugg::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--accent); pointer-events: none; }
.vrow.reo-sugg .lbl { color: var(--accent); }

/* small label/amount money rows (income breakdown, other income) — same stripes */
.zrows { display: flex; flex-direction: column; }
.zrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 290px;
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px; min-height: 26px;
}
.zrows > .zrow:nth-child(odd) { background: #f6f6f8; }
.zrows > .zrow:hover { background: #e9f0fa; }

/* stacked label/input rows (URLA edit mode) — mirrors .vrow alignment and
   stripes. Edit lists pack into as many ~220px columns as fit (2 in a half-
   width card, 1 on narrow screens) so long editors don't run down the page. */
.erows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 3px 14px; align-items: center;
}
.erows > .erow-wide, .erows > .vrow-sep { grid-column: 1 / -1; }
.erow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px 8px; border-radius: 4px; }
/* packed grid cells: a uniform tint by default (stripes would checkerboard
   across columns); the URLA editor stripes per visual row via JS (.striped +
   .erow-odd on the cells sharing a row) so it reads like view mode */
.erows > .erow { background: #f6f6f8; }
.erows.striped > .erow { background: transparent; }
.erows.striped > .erow.erow-odd { background: #f6f6f8; }
.erows > .erow:hover, .erows.striped > .erow:hover { background: #e9f0fa; }
/* edit rows carry the read rows' states: a required gap's tick and red label, a notice amber */
.erow.req-missing .lbl { color: var(--c-suspend); }
.erows > .erow.note-row, .erows.striped > .erow.note-row { background: #fff4e0; }
.erows > .erow.note-row:hover, .erows.striped > .erow.note-row:hover { background: #ffeccb; }
.erow.note-row .lbl { color: #b45309; }
.erow .lbl {
  width: 148px; flex-shrink: 0;
  font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-lbl);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erow .ctl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
/* inside the packed edit grid the label column narrows so inputs keep room;
   full-width (.erow-wide) rows use the same width so their inputs line up
   with the column beneath them */
.erows > .erow .lbl { width: 96px; }
/* single-column edit lists that mirror a view list row for row (Subject
   PITIA): view-width labels, compact money inputs */
.erows.erows-1col { grid-template-columns: 1fr; }
.erows.erows-1col > .erow .lbl { width: 148px; }
.pitia-edit .ctl input.num { flex: 0 0 120px; }
.pitia-edit .ctl select, .pitia-edit .ctl input[type="text"]:not(.num) { flex: 0 0 120px; }

/* 1008 page: the printed form's labels run long ("Primary Housing Expense /
   Income", "Interested Party Contributions") — widen the label column there */
.t1008 .vrow .lbl, .t1008 .erow .lbl { width: 215px; }
/* 1008 inline form: read-only 1003 facts (.vrow) and always-editable 1008
   fields (.erow) share one striped column — no Edit mode */
.t1008 .frows { display: flex; flex-direction: column; gap: 3px; }
.t1008 .frows > :nth-child(odd of :is(.vrow, .erow)) { background: #f6f6f8; }
.t1008 .frows > .vrow:hover { background: #e9f0fa; }
.t1008 .frows > .vrow { min-height: 26px; align-items: center; }
.erow .ctl input, .erow .ctl select { height: 26px; font-size: 10.5px; padding: 3px 8px; }
/* a select draws its text ~4px further in than an input does — pull it back
   so values line up down the column */
.erow .ctl select { padding-left: 4px; }
.erow .ctl input[type=checkbox] { width: auto; height: auto; }

/* URLA section header: no navy bar — small caps title + rule line */
.sec-head { display: flex; align-items: center; gap: 10px; margin: 20px 0 7px; }
/* phones: a section title's buttons / notes drop under the title instead of
   pushing the page wider than the screen */
@media (max-width: 760px) {
  .sec-head { flex-wrap: wrap; row-gap: 6px; }
  .sec-head > .btn, .sec-head > a.btn, .sec-head > .none, .sec-head > span:not(.sec-title) { max-width: 100%; min-width: 0; }
  .sec-head > .none { white-space: normal; }
}
.urla-section:first-child .sec-head { margin-top: 0; }
/* Declarations (wide) beside Demographics (narrow) — the demographics card
   only holds four short rows per borrower, so it takes about a quarter */
.urla-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 0 12px; align-items: start; }
/* both heads sit on one line: the pair's first section would otherwise take
   the page-top "first section" zero margin */
.urla-pair > .urla-section .sec-head { margin-top: 20px; }
.urla-pair:not(.stack) > .urla-section:last-child .vrow .lbl { width: 72px; }
.urla-pair:not(.stack) > .urla-section:last-child .cols2 { grid-template-columns: 1fr; }
/* two or more borrowers: both cards fill the width, demographics below */
.urla-pair.stack { grid-template-columns: 1fr; }
@media (max-width: 980px) { .urla-pair { grid-template-columns: 1fr; } }
.sec-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
/* invisible spacer — keeps the Edit button pushed right without a rule line */
.sec-line { flex: 1; height: 1px; background: transparent; }

/* merged borrower block: info left, income right */
.bblock { padding: 12px 14px; }
.bblock + .bblock { border-top: 2px solid var(--surface3); }
/* two or more borrowers sit in panes (All: all shown; Tabs: one, under the strip) */
.btab-pane:not(:first-child) > .bblock { border-top: 2px solid var(--surface3); }
.btabs ~ .btab-pane > .bblock { border-top: 0; }
.bblock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bblock-head .bname { font-size: 11px; font-weight: 700; color: var(--text); }
.col-cap {
  font-size: 8px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-lbl);
  border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 7px;
}

/* flat employer/address groups (no nested card borders) — shared by view & edit */
.inc-group + .inc-group,
.erows + .inc-group,
.vrows + .inc-group { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.inc-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600; margin-bottom: 3px;
}

/* side-by-side borrower columns */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 980px) { .cols2 { grid-template-columns: 1fr; } }
/* Internal Team slot table (Assignment page, Status page) */
.asg-cell select { padding: 6px 8px; border: 1px solid var(--border-mid); border-radius: 8px;
  font-size: 11px; font-family: inherit; width: 180px; max-width: 100%; background: var(--surface); }
.asg-team td { padding: 8px 12px; }
.asg-team td:first-child { width: 170px; font-weight: 600; }

/* REO modal flags (Subject / Current): a locked flag is visibly greyed out */
.reo-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; cursor: pointer; padding: 3px 8px 3px 4px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.reo-flag-off { cursor: not-allowed; color: #9aa3b5; background: #f1f3f7; border-color: #e3e7ef; }
.reo-flag-off input { cursor: not-allowed; opacity: 0.45; }
.reo-flag-where { font-size: 9.5px; color: #9aa3b5; }
.reo-flag.reo-flag-req { color: var(--c-suspend); }

/* locked inputs (values copied from elsewhere): greyed out, not just inert;
   the wrapper carries the tooltip because disabled controls eat mouse events */
.fld-locked input, .cell-locked input { background: #f1f3f7 !important; color: #646d82 !important; border-color: #e3e7ef !important; cursor: not-allowed; pointer-events: none; }
.fld-locked { cursor: not-allowed; }
.fld-locked > span { color: #9aa3b5; }
.cell-locked { display: block; cursor: not-allowed; }
.cell-locked select { background: #f1f3f7 !important; color: #646d82 !important; border-color: #e3e7ef !important; cursor: not-allowed; pointer-events: none; }

/* loan calendar (beside the Loan Summary) */
.lc { padding: 5px 8px 4px; font-family: 'Inter', system-ui, sans-serif; }
.lc-head { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.lc-title { flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.lc-nav { border: 1px solid var(--border); background: #fff; border-radius: 5px; width: 20px; height: 20px; line-height: 1; font-size: 13px; color: var(--text-sub); cursor: pointer; padding: 0; }
.lc-nav:hover { background: #eef3fb; border-color: #b9c9e8; color: #2f5fb3; }
.lc-today-btn { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #2f5fb3; background: #fff; cursor: pointer; padding: 0; margin-left: 2px; }
.lc-today-btn:hover { background: #2f5fb3; }
.lc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lc-dow span { text-align: center; font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); padding-bottom: 1px; }
.lc-grid { display: flex; flex-direction: column; gap: 2px; }
/* a week: 7 day cells plus timeline bars laid over them (one 9px lane per
   range that crosses the week); the cells leave room for the lanes */
.lc-week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* bars ride in lanes at the top of the cell; the day number and its
   markers start below them, and the cell grows to keep everything visible */
.lc-day { position: relative; min-height: calc(24px + var(--lanes, 0) * 9px); border-radius: 4px; background: #fff; border: 1px solid #eef0f4; padding: 1px 2px 2px; padding-top: calc(2px + var(--lanes, 0) * 9px); display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.lc-day[data-tip] { cursor: default; }
.lc-num { font-size: 8.5px; color: var(--text-sub); line-height: 1; }
.lc-other { opacity: 0.45; }
.lc-in-lock { background: #fde2e7; border-color: #f8c9d2; }
/* today: a bold border only — the fill stays whatever the day already is
   (white, or the lock tint) */
.lc-today { border: 2px solid #2f5fb3; padding: 0 1px 1px; padding-top: calc(1px + var(--lanes, 0) * 9px); }
.lc-today .lc-num { color: #2f5fb3; font-weight: 700; }
.lc-bar { position: absolute; height: 7px; left: 1px; right: 1px; z-index: 1; font-size: 6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 7px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.lc-bar-lock { background: #ec4899; }
.lc-bar-ctc { background: #22c55e; }
.lc-bar-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.lc-bar-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.lc-week .lc-num { position: relative; z-index: 0; }
/* markers use the status-pill palette: light tint, colored text, thin rule */
.lc-mark { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; padding: 0 3px; border-radius: 3px; border: 1px solid rgba(107,114,128,0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4b5563; background: rgba(107,114,128,0.10); }
.lc-mark.lc-s-primary { background: rgba(29,78,216,0.10); border-color: rgba(29,78,216,0.28); color: #1d4ed8; }
.lc-mark.lc-s-retained { background: rgba(15,118,110,0.10); border-color: rgba(15,118,110,0.28); color: #0f766e; }
.lc-mark.lc-s-second { background: rgba(109,40,217,0.10); border-color: rgba(109,40,217,0.28); color: #6d28d9; }
.lc-mark.lc-s-invest { background: rgba(113,69,24,0.10); border-color: rgba(113,69,24,0.3); color: #714518; }
.lc-mark.lc-s-pending { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.28); color: #b45309; }
.lc-mark.lc-s-sold { background: rgba(192,57,43,0.10); border-color: rgba(192,57,43,0.28); color: #c0392b; }
.lc-mark.lc-disc { background: rgba(67,56,202,0.10); border-color: rgba(67,56,202,0.28); color: #4338ca; }
.lc-mark.lc-lock { background: rgba(219,39,119,0.10); border-color: rgba(219,39,119,0.3); color: #db2777; }
.lc-mark.lc-appr { background: rgba(14,116,144,0.10); border-color: rgba(14,116,144,0.28); color: #0e7490; }
.lc-mark.lc-close { background: rgba(21,128,61,0.10); border-color: rgba(21,128,61,0.28); color: #15803d; }
.lc-mark.lc-more { background: #f3f4f6; border-color: #e5e7eb; color: var(--text-sub); }
.lc-legend { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 8px; color: var(--text-dim); }
.lc-sw { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
.lc-sw-lock { background: #fde2e7; border: 1px solid #f8c9d2; }
.lc-sw-ctc { background: #22c55e; height: 6px; border-radius: 3px; }
.lc-count { margin-left: auto; }
.lc-expand svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; margin: auto; }
.lc-day { cursor: pointer; }
/* large calendar modal */
.pn-modal.lc-modal { width: 980px; max-width: 96vw; }
/* floating large calendar: glass window that blocks nothing behind it */
.modal.lc-float { width: 980px; max-width: 96vw; }
/* a picked day: accent border, list below shows just that day */
.lc-day.lc-selected { border: 1.5px solid var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }

/* team slots still unassigned are tinted amber so the gaps stand out */
select.asg-empty { background: var(--c-app-bg); border-color: var(--c-app-br); color: var(--c-app); }
.lc-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0; max-height: 82vh; overflow: hidden; }
.lc-large { padding: 6px 8px 10px; overflow-y: auto; }
.lc-large .lc-title { font-size: 14px; }
.lc-large .lc-nav { width: 26px; height: 26px; font-size: 16px; }
.lc-large .lc-dow span { font-size: 9px; }
.lc-large .lc-day { min-height: calc(74px + var(--lanes, 0) * 12px); padding: 3px 4px 4px; padding-top: calc(4px + var(--lanes, 0) * 12px); gap: 2px; }
.lc-large .lc-today { padding-top: calc(3px + var(--lanes, 0) * 12px); }
.lc-large .lc-num { font-size: 11px; }
.lc-large .lc-bar { height: 10px; font-size: 8px; line-height: 10px; }
.lc-large .lc-mark { font-size: 9px; line-height: 1.4; padding: 1px 5px; }
.lc-large .lc-legend { font-size: 10px; }
.lc-list { border-left: 1px solid var(--border); padding: 10px 12px; overflow-y: auto; background: #fbfcfe; }
.lc-list-cap { font-size: 8.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin: 6px 0 4px; }
.lc-list-cap:first-child { margin-top: 0; }
.lc-list-row { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 3px 0; border-bottom: 1px solid #eef0f4; }
.lc-list-lbl { flex: 1; min-width: 0; color: var(--text); }
.lc-list-date { font-family: var(--mono); font-size: 10px; color: var(--text-sub); white-space: nowrap; }
.lc-list-none { font-size: 10.5px; color: var(--text-dim); font-style: italic; padding: 2px 0; }
.lc-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex-shrink: 0; }
.lc-dot.lc-s-primary { background: #1d4ed8; } .lc-dot.lc-s-retained { background: #0f766e; } .lc-dot.lc-s-second { background: #6d28d9; } .lc-dot.lc-s-invest { background: #714518; } .lc-dot.lc-s-pending { background: #b45309; } .lc-dot.lc-s-sold { background: #c0392b; }
.lc-dot.lc-disc { background: #4338ca; } .lc-dot.lc-lock { background: #db2777; } .lc-dot.lc-appr { background: #0e7490; } .lc-dot.lc-close { background: #15803d; }
@media (max-width: 900px) { .lc-modal-body { grid-template-columns: 1fr; } .lc-list { border-left: 0; border-top: 1px solid var(--border); } }
.cur-tip { white-space: pre-line; }

/* cursor tooltip ([data-tip]): small dark pill that follows the pointer */
.cur-tip {
  position: fixed; z-index: 2000; pointer-events: none; max-width: 260px;
  padding: 6px 9px; border-radius: 6px; background: #1a1f2e; color: #fff;
  font-size: 10.5px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(2px); transition: opacity 0.1s, transform 0.1s;
}
.cur-tip.on { opacity: 1; transform: none; }

/* REO expanded view: a card per property — address line, figures strip,
   then the mortgage loans on it (1003 Section 3 shape) */
.reo-cards { display: flex; flex-direction: column; gap: 10px; }
.reo-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.reo-card .rc-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #f6f6f8; border-bottom: 1px solid var(--border); }
.reo-card .rc-addr { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.reo-card .rc-street { font-size: 11.5px; font-weight: 700; color: var(--text); }
.reo-card .rc-city { font-size: 10.5px; color: var(--text-sub); }
.reo-card .rc-addr .tag { margin-left: 0; vertical-align: 1px; }
.reo-card .rc-meta { margin-left: auto; font-size: 10px; color: var(--text-sub); white-space: nowrap; }
.reo-card .rc-actions { display: flex; gap: 2px; flex-shrink: 0; }
.reo-card .rc-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px 14px; padding: 8px 12px; }
.reo-card .rc-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reo-card .rc-k { font-size: 7.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-lbl); }
.reo-card .rc-v { font-size: 10.5px; color: var(--text); }
.reo-card .rc-loans { padding: 6px 12px 8px; border-top: 1px dashed var(--border); }
.reo-card .rc-loans-cap { font-size: 8px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; }
.reo-card .rc-loan { display: grid; grid-template-columns: 1.4fr 1.6fr 0.9fr 0.9fr 0.8fr 0.9fr; gap: 12px; align-items: center; padding: 4px 0; border-top: 1px solid #f0f2f6; font-size: 10.5px; }
.reo-card .rc-loan:first-of-type { border-top: 0; }
.reo-card .rc-loan-cred { font-weight: 600; color: var(--text); }
.reo-card .rc-loan-meta { color: var(--text-sub); font-size: 10px; }
.reo-card .rc-loan-amt { display: flex; flex-direction: column; gap: 1px; }
.reo-card .rc-loan-amt .rc-k { font-family: 'Inter', system-ui, sans-serif; }
.reo-card .rc-loan-flags { text-align: right; }
/* a linked lien with a required gap carries the tick, like its Liabilities row;
   a flagged / located lien spans the card so the tick sits on its edge */
.reo-card .rc-loan[data-entity]:is(.rc-loan-req, .req-resolved, .loc-cursor) { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.reo-card .rc-loan .rc-req, .reo-card .rc-loan .rc-req .rc-k { color: var(--c-suspend); font-weight: 600; }
.reo-card .rc-loan-none { display: block; color: var(--text-dim); }
@media (max-width: 900px) { .reo-card .rc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reo-card .rc-loan { grid-template-columns: 1fr 1fr; } }

/* phones: each liability is a card — creditor and type on top, payment and
   balance under it, the REO link and flags last (the table needs a sideways scroll) */
.liab-cards { display: flex; flex-direction: column; gap: 8px; }
.liab-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px 12px; font-size: 10.5px; color: var(--text); }
/* line 1 leads with who owes it and what it is; line 2 the creditor (plain),
   its account right after it; line 3 payment and balance, labelled inline; last
   the REO / flags */
.liab-card .lcd-top { display: flex; align-items: center; gap: 6px; }
.liab-card .lcd-who { font-size: 9px; font-weight: 700; color: var(--accent); background: var(--accent-dim); border-radius: 4px; padding: 1px 5px; }
.liab-card .lcd-type { font-weight: 600; }
.liab-card .lcd-cred-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 3px; color: var(--text-sub); }
.liab-card .lcd-cred { min-width: 0; overflow-wrap: anywhere; }
.liab-card .lcd-acct { white-space: nowrap; font-size: 10px; }
.liab-card .lcd-amts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px 14px; margin-top: 5px; }
.liab-card .lcd-amt { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.liab-card .lcd-k { font-size: 9.5px; color: var(--text-lbl); }
.liab-card .lcd-miss, .liab-card .lcd-miss .lcd-k { color: var(--c-suspend); }
.liab-card .lcd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.liab-card .lcd-tags .tag { margin-left: 0; }
.liab-card.liab-off { opacity: .6; }
.liab-card.liab-manual .lcd-type, .liab-card.liab-manual .lcd-amt { color: var(--c-app); }
.liab-card.uc-pend .lcd-type, .liab-card.uc-pend .lcd-cred, .liab-card.uc-pend .lcd-amt { color: var(--pend-purple) !important; }

/* 1003 section jump bar: pinned under the loan headers; the section in view is
   lit, a red dot marks one with File Health items left */
.ujump { position: sticky; top: var(--hdr-total, 0px); z-index: 30; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: var(--bg); margin: -6px 0 10px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.ujump::-webkit-scrollbar { display: none; }
.ujump-chip { flex: 0 0 auto; border: 0; background: none; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-sub);
  padding: 4px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ujump-chip:hover { background: var(--surface2); color: var(--text); }
.ujump-chip.on { color: var(--accent); background: var(--accent-dim); }
.ujump-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ujump-dot, .btab-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c-suspend); margin-left: 5px; vertical-align: 2px; }
.btab-dot.pend { background: var(--pend-purple); }
.btab-dot[hidden] { display: none; }

/* two or more borrowers: an amber flag by the section title, and the view
   switch (every borrower on the page, or one tab at a time) */
.bmulti { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--c-app); background: var(--c-app-bg); border: 1px solid var(--c-app-br); border-radius: 999px; padding: 2px 8px 2px 6px; white-space: nowrap; }
.bmulti svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bview { display: inline-flex; border: 1px solid var(--border-mid); border-radius: var(--radius); overflow: hidden; flex: none; }
.bview-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: #fff; font: inherit; font-size: 10px; font-weight: 600;
  color: var(--text-sub); padding: 3px 8px; cursor: pointer; }
.bview-btn + .bview-btn { border-left: 1px solid var(--border-mid); }
.bview-btn:hover { color: var(--text); }
.bview-btn.on { background: var(--accent-dim); color: var(--accent); }
.bview-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bview-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* phones: the header wraps, and the flag leads the control row (All / Tabs, + Borrower)
   rather than sitting up by the title */
@media (max-width: 760px) {
  #sec-borrowers .sec-head > .sec-line { order: 1; }
  #sec-borrowers .sec-head::after { content: ''; order: 2; flex-basis: 100%; }
  #sec-borrowers .sec-head > .bmulti { order: 3; }
  #sec-borrowers .sec-head > .bview, #sec-borrowers .sec-head > .btn { order: 4; }
}

/* two or more borrowers: one at a time, a tab each */
.btabs { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.btabs::-webkit-scrollbar { display: none; }
.btab { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 10.5px;
  color: var(--text-sub); padding: 6px 10px 7px; cursor: pointer; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.btab:hover { color: var(--text); }
.btab.on { color: var(--accent); border-bottom-color: var(--accent); }
.btab .btab-n { font-weight: 700; }
.btab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reo-card .rc-meta { display: none; }

/* REO bulk edit: compact inputs in the grid */
.reo-edit td { padding: 4px 4px; vertical-align: top; }
.reo-edit input, .reo-edit select { width: 100%; min-width: 0; font-size: 10.5px; padding: 3px 5px; }
.reo-edit input.num { text-align: right; }
.reo-edit .addr .tag { margin-top: 3px; }
/* a property's Mortgages sub-row: its own tint, and it lights with its row */
table.grid.reo-edit tbody tr.reo-mtg-sub > td { background: var(--surface2); }
table.grid.reo-edit tbody tr.reo-mtg-sub:hover > td,
table.grid.reo-edit tbody tr:hover + tr.reo-mtg-sub > td,
table.grid.reo-edit tbody tr:has(+ tr.reo-mtg-sub:hover) > td { background: #e9f0fa; }

/* 1008 worksheets fold: each is an accordion bar (title, hint, chevron);
   the ledger sheet attaches under the bar when open */
.ratio-ws { margin-top: 10px; }
.ratio-ws:first-child { margin-top: 0; }
.ratio-ws .ws-bar {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border: 1px solid #d9e2f2; border-radius: 8px; background: #fff; cursor: pointer;
  font: inherit; color: var(--text); text-align: left; transition: background 0.12s, border-color 0.12s;
}
.ratio-ws .ws-bar:hover { background: #f4f7fd; border-color: #b9c9e8; }
.ratio-ws .ws-bar-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2f5fb3; }
.ratio-ws .ws-bar-hint { margin-left: auto; font-size: 10px; color: var(--text-dim); }
.ratio-ws .ws-chev { color: #2f5fb3; transition: transform 0.18s; }
.ratio-ws.collapsed .ws-chev { transform: rotate(-90deg); }
.ratio-ws:not(.collapsed) .ws-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: #f4f7fd; }
.ratio-ws.collapsed .ws { display: none; }
.ratio-ws:not(.collapsed) .ws { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* 1008 Ratio Worksheet ledger columns on a plain ruled sheet — quiet lines,
   right-aligned figures, one accent */
.ratio-ws .ws {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
  padding: 14px 18px 10px; border-radius: 8px; background: #fbfcfe;
  border: 1px solid #d9e2f2;
}
@media (max-width: 860px) { .ratio-ws .ws { grid-template-columns: 1fr; } }
.ratio-ws .ws-col { min-width: 0; }
.ratio-ws .ws-title { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #2f5fb3; padding-bottom: 5px; margin-bottom: 4px; border-bottom: 1px solid #2f5fb3; }
.ratio-ws .ws-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0; font-size: 10.5px; line-height: 1.5; }
.ratio-ws .ws-head { margin-top: 8px; font-size: 8px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.ratio-ws .ws-head:first-child { margin-top: 0; }
.ratio-ws .ws-item .ws-l { padding-left: 10px; color: var(--text-sub); min-width: 0; }
.ratio-ws .ws-n { color: var(--text-dim); font-size: 9.5px; }
.ratio-ws .ws-none { font-style: italic; color: var(--text-dim); }
.ratio-ws .ws-a { font-family: var(--mono); white-space: nowrap; color: var(--text); }
.ratio-ws .ws-sub { border-top: 1px solid #d9e2f2; margin-top: 2px; padding-top: 3px; font-weight: 700; }
.ratio-ws .ws-sub .ws-l { color: var(--text); }
.ratio-ws .ws-total { border-top: 2px solid #2f5fb3; margin-top: 6px; padding-top: 4px; font-size: 11px; }
.ratio-ws .ws-total .ws-a { font-size: 12px; }
.ratio-ws .ws-ratio { padding: 5px 8px; margin-top: 4px; border-radius: 5px; background: #eef3fb; font-weight: 700; }
.ratio-ws .ws-ratio .ws-f { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--text-dim); }
.ratio-ws .ws-ratio .ws-a { font-size: 13px; }
.ratio-ws .ws-ok { color: #1a7f4b; }
.ratio-ws .ws-warn { color: #b45309; }
.ratio-ws .ws-bad { color: var(--c-suspend); }

/* Qualifying Ratios strip (1003): DTI / housing / LTV family at a glance */
.qr-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.qr-box { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: #f6f6f8; }
.qr-box .lbl { font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-lbl); }
.qr-box .val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); }
.qr-box .val.warn-val { color: #b45309; }
.qr-box .val.suspend-val { color: var(--c-suspend); }

/* Loan & Property: terms / subject property / PITIA side by side; the label
   column narrows so values keep room in a third of the card */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.cols3 .vrow .lbl, .cols3 .erows.erows-1col > .erow .lbl { width: 112px; }
.cols3 .pitia-edit .ctl { min-width: 0; gap: 5px; }
/* type / description + amount share the row half and half — nothing runs past the card */
.cols3 .pitia-edit .ctl input.num, .cols3 .pitia-edit .ctl select,
.cols3 .pitia-edit .ctl input[type="text"]:not(.num) { flex: 1 1 0; min-width: 0; width: auto; }
/* the three columns hold as long as the section itself is wide enough (the
   card's own width, not the window's — the sidebar takes 180px of it) */
.cols3-host { container-type: inline-size; }
@container (max-width: 780px) {
  .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols3 > :last-child { grid-column: 1 / -1; }
}
@container (max-width: 540px) { .cols3 { grid-template-columns: 1fr; } .cols3 > :last-child { grid-column: auto; } }

/* COC request modal: one box per change item — row 1 the item (+ remove),
   row 2 Current | Requested. Full-width boxes, so nothing scrolls sideways. */
.coc-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.coc-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px 8px; align-items: end;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface2);
}
.coc-item .ci-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coc-item .ci-cell > span { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-sub); }
.coc-item .ci-code { grid-column: 1 / 3; }
.coc-item .ci-del { grid-column: 3; padding: 4px 5px; color: var(--text-dim); justify-self: end; }
.coc-item select, .coc-item input { width: 100%; min-width: 0; box-sizing: border-box; }
.coc-item .ci-cur { display: flex; align-items: center; gap: 4px; min-height: 30px; }
.coc-item .ci-cur-view { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coc-item .ci-cur input { flex: 1; }
.coc-item .ci-cur .btn { padding: 2px 5px; color: var(--text-dim); flex-shrink: 0; }
.coc-item.ci-bad { border-color: #e0a0a0; background: #fdf2f2; }
/* COC request card: item name on its own line, Current → Requested together
   on the line below (keeps phones from orphaning the Requested value) */
.coc-lines { display: flex; flex-direction: column; }
.coc-line { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; font-size: 10.5px; border-top: 1px solid var(--border); }
.coc-line:nth-child(even) { background: var(--surface2); }
.coc-line-name { font-weight: 600; }
.coc-line-vals { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; }
.coc-vp { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.coc-line-k { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.coc-line-arrow { color: var(--text-dim); }
.coc-line .mono { font-weight: 600; } /* Current and Requested at the same weight */
/* card header holds one line: id + status + requester (ellipsized when tight);
   the action buttons may drop to their own line on phones */
.coc-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.coc-head .card-title { white-space: nowrap; }
.coc-head-who { font-size: 10px; margin-left: auto; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.coc-head-btns { display: flex; gap: 6px; flex-shrink: 0; }
/* card body with an impact panel: items + note on the left, impact on the
   right; phones stack the panel under the items */
/* the impact column takes exactly what its figures need; the request side
   gets the rest */
.coc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.coc-body-main { min-width: 0; }
.coc-impact { border-left: 1px solid var(--border); border-top: 1px solid var(--border); background: var(--surface2); padding: 7px 12px; }
@media (max-width: 700px) {
  .coc-body { grid-template-columns: minmax(0, 1fr); }
  .coc-impact { border-left: 0; }
}
.coc-impact-box { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface2); padding: 7px 12px; margin-bottom: 9px; }
.coc-imp-title { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 3px; }
/* figures line up in columns: label · from · → · to · ▲▼ · change — every
   number right-aligned so the $ and % amounts end on the same edge */
.coc-imp-grid { display: grid; grid-template-columns: repeat(6, auto); justify-content: start; column-gap: 8px; row-gap: 4px; align-items: baseline; font-size: 10.5px; }
.coc-imp-row { display: contents; }
.coc-imp-label { font-weight: 600; white-space: nowrap; padding-right: 10px; }
.coc-imp-num { text-align: right; white-space: nowrap; }
.coc-imp-arrow { color: var(--text-dim); }
.coc-imp-delta { font-size: 9.5px; white-space: nowrap; }
.coc-imp-sign { margin-left: 2px; margin-right: -4px; }
/* very narrow phones: the change columns drop so the row stays on the card */
@media (max-width: 380px) { .coc-imp-grid { grid-template-columns: repeat(4, auto); } .coc-imp-delta { display: none; } }
.coc-item.ci-bad input { border-color: #e0a0a0; }

/* Loan Summary quick edit: clickable cells + the edit window with the ratio preview */
.ls-item.ls-editable { cursor: pointer; transition: background .12s; }
.ls-item.ls-editable:hover { background: var(--accent-dim); }
.se-back { position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 7vh 12px 12px; }
.se-box { width: 440px; max-width: 100%; background: #fff; border-radius: var(--radius, 8px); box-shadow: 0 18px 50px rgba(0,0,0,0.25); overflow: hidden; }
.se-head { display: flex; align-items: center; gap: 8px; }
.se-x { margin-left: auto; cursor: pointer; color: var(--text-dim); font-size: 14px; line-height: 1; background: none; border: none; }
.se-body { padding: 12px 14px; max-height: 70vh; overflow-y: auto; }
.se-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.se-fld { display: flex !important; flex-direction: column; gap: 3px; }
.se-fld input, .se-fld select { width: 100%; box-sizing: border-box; }
.se-note { font-size: 10px; color: var(--text-dim); margin-top: 8px; }
.addr-box { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid #86efac;
  background: #ecfdf3; color: #15803d; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.addr-box.ok { border-color: #7dd3fc; background: #e0f2fe; color: #0369a1; }
.addr-box.diff { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.addr-box.bad { border-color: #f3c2c2; background: #fdecec; color: #b91c1c; }
.addr-box.off { border-color: #d5d9e2; background: #f1f3f7; color: #6b7280; }
.se-addr { margin-top: 10px; display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2, #f8fafc); font-size: 11px; }
.se-addr[hidden] { display: none; }
.se-addr.ok { background: #ecfdf3; border-color: #86efac; color: #14532d; }
.se-addr.diff { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.se-addr.bad { background: #fdecec; border-color: #f3c2c2; color: #9b2c2c; align-items: center; }
.se-addr.off, .se-addr.checking { color: var(--text-dim); align-items: center; }
.se-addr-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; margin-top: 1px; }
.se-addr-main { flex: 1; min-width: 0; }
.se-addr-title { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.se-addr-line { margin-top: 2px; font-size: 11.5px; overflow-wrap: anywhere; }
.se-addr-meta { margin-top: 1px; font-size: 10.5px; opacity: .85; }
.se-addr-use { flex-shrink: 0; align-self: center; }
.se-addr-spin { width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--text-dim); border-radius: 50%; animation: se-spin .8s linear infinite; }
@keyframes se-spin { to { transform: rotate(360deg); } }
.se-warn { margin-top: 8px; padding: 6px 9px; border-radius: 6px; background: #fdecec; border: 1px solid #f3c2c2; color: #9b2c2c; font-size: 10.5px; }
.se-preview { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.se-prev-head, .se-prev-row { display: grid; grid-template-columns: 1fr 96px 18px 96px; gap: 6px; align-items: center; padding: 6px 10px; font-size: 10.5px; }
.se-prev-head { background: var(--surface2); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-sub); }
.se-prev-head span:nth-child(n+2), .se-prev-row span:nth-child(n+2) { text-align: right; }
.se-prev-row { border-top: 1px solid var(--border); }
.se-prev-row.changed { background: #fffbeb; }
.se-prev-lbl { font-weight: 600; }
.se-prev-arrow { color: var(--text-dim); text-align: center !important; }
.se-prev-after { font-weight: 700; }
.se-prev-after.up { color: #b45309; }
.se-prev-after.down { color: #166534; }
.se-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
@media (max-width: 480px) { .se-fields { grid-template-columns: 1fr; } .se-prev-head, .se-prev-row { grid-template-columns: 1fr 80px 14px 80px; } }

/* Loan Status progress bar: Registered → … → Funded */
.ms-card { display: flex; flex-direction: column; gap: 14px; }
.ms-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ms-track { position: relative; padding: 6px 0 2px; }
.ms-line { position: absolute; left: calc(100% / var(--n, 7) / 2); right: calc(100% / var(--n, 7) / 2); top: 17px; height: 4px;
  background: var(--border); border-radius: 999px; overflow: hidden; }
.ms-track { --n: 7; }
.ms-fill { height: 100%; background: linear-gradient(90deg, #1a5dad, #2eb552); border-radius: 999px; transition: width .5s ease; }
.ms-steps { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); position: relative; }
.ms-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.ms-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: all .2s; }
.ms-dot svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ms-step.done .ms-dot { background: #1a5dad; border-color: #1a5dad; }
.ms-step.now .ms-dot { border-color: #2eb552; background: #fff; box-shadow: 0 0 0 4px rgba(46,181,82,0.18); }
.ms-step.now .ms-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2eb552; }
.ms-step.stuck .ms-dot { border-color: #b45309; background: #fff; box-shadow: 0 0 0 4px rgba(180,83,9,0.15); }
.ms-step.stuck .ms-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #b45309; }
.ms-off .ms-fill { background: linear-gradient(90deg, #1a5dad, #b45309); }
.ms-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); line-height: 1.2; }
.ms-step.done .ms-lbl, .ms-step.now .ms-lbl { color: var(--text); }
.ms-step.now .ms-lbl { color: #1f7a3a; }
.ms-step.stuck .ms-lbl { color: #b45309; }
.ms-date { font-size: 9px; color: var(--text-dim); min-height: 11px; }
.ms-short { display: none; }
@media (max-width: 640px) {
  .ms-full { display: none; } .ms-short { display: inline; }
  .ms-lbl { font-size: 8px; letter-spacing: 0.02em; }
  /* no room for nine dates in a row — only the step the file is on keeps its date */
  .ms-date { display: none; font-size: 8px; }
  .ms-step.now .ms-date, .ms-step.stuck .ms-date { display: block; white-space: nowrap; }
  .ms-dot { width: 18px; height: 18px; } .ms-line { top: 15px; height: 3px; }
  .ms-step.now .ms-dot::after, .ms-step.stuck .ms-dot::after { width: 6px; height: 6px; }
}

/* gates under the bar: what must clear before CTC / before Funding — a
   checklist per phase with a slim meter, one row per item */
/* travelling light: each milestone the bar reaches switches on in turn, the
   current one flashes as the light arrives */
.ms-step.ms-light .ms-dot { animation: msLightOn 0.32s ease-out both; animation-delay: var(--ld, 0s); }
.ms-step.ms-light .ms-dot svg, .ms-step.ms-light .ms-dot::after { animation: msLightPop 0.3s ease-out both; animation-delay: calc(var(--ld, 0s) + 0.08s); }
.ms-step.ms-light .ms-lbl { animation: msLightLbl 0.32s ease-out both; animation-delay: var(--ld, 0s); }
.ms-step.now.ms-light .ms-dot { animation: msLightOn 0.32s ease-out both, msArrive 0.9s ease-out; animation-delay: var(--ld, 0s), calc(var(--ld, 0s) + 0.2s); }
@keyframes msLightOn { from { background: #fff; border-color: var(--border-mid); box-shadow: none; transform: scale(0.86); } }
@keyframes msLightPop { from { transform: scale(0); opacity: 0; } }
@keyframes msLightLbl { from { color: var(--text-dim); } }
@keyframes msArrive { 0% { box-shadow: 0 0 0 0 rgba(46,181,82,0.55); } 45% { box-shadow: 0 0 0 10px rgba(46,181,82,0.12); } }
.ms-track.ms-at-ctc .ms-step.now.ms-light .ms-dot { animation-name: msLightOn, msArriveCtc; }
.ms-track.ms-at-fund .ms-step.now.ms-light .ms-dot { animation-name: msLightOn, msArriveFund; }
@keyframes msArriveCtc { 0% { box-shadow: 0 0 0 0 rgba(162,28,175,0.5); } 45% { box-shadow: 0 0 0 10px rgba(162,28,175,0.1); } }
@keyframes msArriveFund { 0% { box-shadow: 0 0 0 0 rgba(109,40,217,0.5); } 45% { box-shadow: 0 0 0 10px rgba(109,40,217,0.1); } }
@media (prefers-reduced-motion: reduce) { .ms-step.ms-light .ms-dot, .ms-step.ms-light .ms-dot svg, .ms-step.ms-light .ms-dot::after, .ms-step.ms-light .ms-lbl { animation: none; } }
/* Override Status (lender): red section, red action, red tag in the history */
.st-ovr-title { color: var(--c-suspend); }
.st-ovr-card { border-color: rgba(192,57,43,0.35); }
.st-ovr-btn { background: var(--c-suspend); border-color: var(--c-suspend); color: #fff; }
.st-ovr-btn:hover { background: #a93226; border-color: #a93226; color: #fff; }
.st-ovr-tag { background: var(--c-suspend-bg); color: var(--c-suspend); border: 1px solid var(--c-suspend-br); }
/* ready for the next status: a ring pulses outward around the milestone
   (starts once the travelling light lands) */
.ms-step.ready .ms-dot { animation: msReadyRing 1.6s ease-out 1s infinite; }
@keyframes msReadyRing { 0% { box-shadow: 0 0 0 0 rgba(46,181,82,0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(46,181,82,0); } }
/* Doc Released ready sits in the Cleared-to-Close stretch: magenta ring and pulse */
.ms-step[data-ms="docs_out_at"].ready .ms-dot { border-color: var(--gate-ctc); animation-name: msReadyRingCtc; }
@keyframes msReadyRingCtc { 0% { box-shadow: 0 0 0 0 rgba(162,28,175,0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(162,28,175,0); } }
/* Doc Released ready sits in the Cleared-to-Close stretch: magenta ring and pulse */
.ms-step[data-ms="docs_out_at"].ready .ms-dot { border-color: var(--gate-ctc); animation-name: msReadyRingCtc; }
@keyframes msReadyRingCtc { 0% { box-shadow: 0 0 0 0 rgba(162,28,175,0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(162,28,175,0); } }
.ms-step.ready.ms-go:hover .ms-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .ms-step.ready .ms-dot { animation: none; } }
.ms-step.ms-go { cursor: pointer; }
.ms-step.ms-go .ms-dot { transition: box-shadow 0.15s, border-color 0.15s, background 0.15s, color 0.15s; }
/* hover: previews the current-status light (solid ring, halo, green center) */
.ms-step.ms-go:hover .ms-dot { border-style: solid; border-color: #2eb552; box-shadow: 0 0 0 4px rgba(46,181,82,0.16); }
.ms-step.ms-go:hover .ms-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2eb552; }
/* the preview takes the phase color: magenta Cleared to Close → Doc Received, violet Funded and after */
.ms-step.ms-go:is([data-ms="ctc_at"], [data-ms="docs_out_at"], [data-ms="doc_received_at"]):hover .ms-dot { border-color: var(--gate-ctc); box-shadow: 0 0 0 4px rgba(162,28,175,0.18); }
.ms-step.ms-go:is([data-ms="ctc_at"], [data-ms="docs_out_at"], [data-ms="doc_received_at"]):hover .ms-dot::after { background: var(--gate-ctc); }
.ms-step.ms-go:is([data-ms="funded_at"], [data-ms="post_closing_at"], [data-ms="purchased_at"]):hover .ms-dot { border-color: var(--gate-fund); box-shadow: 0 0 0 4px rgba(109,40,217,0.18); }
.ms-step.ms-go:is([data-ms="funded_at"], [data-ms="post_closing_at"], [data-ms="purchased_at"]):hover .ms-dot::after { background: var(--gate-fund); }
.ms-ready { display: inline-block; margin-left: 4px; font-size: 8px; font-weight: 800; letter-spacing: 0.08em; color: #1f7a3a; text-transform: uppercase; }
.ms-flag { display: inline-block; margin-left: 4px; font-size: 8px; font-weight: 800; letter-spacing: 0.08em; color: #b45309; text-transform: uppercase; cursor: default; }
.ms-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
/* boxes line up under the milestones they sit between; dashed guides drop
   from Registered, Cleared to Close and Funded */
.ms-gates.aligned { position: relative; grid-template-columns: repeat(var(--n2), minmax(0, 1fr)); column-gap: 0; }
.ms-gates.aligned .ms-gates-ctc { grid-row: 1; grid-column: 2 / var(--c); margin: 0 10px; }
.ms-gates.aligned .ms-gates-funding { grid-row: 1; grid-column: var(--c) / var(--f); margin: 0 10px; }
/* Before Submitted sits on its own row above the other two */
.ms-gates.aligned .ms-gates-submitted { grid-row: 1; grid-column: 2 / var(--c); margin: 0 10px 4px; }
/* Prior to Loan Documents: top row between CTC and Funded, above Prior to Funding */
.ms-gates.aligned .ms-gates-docs { grid-row: 1; grid-column: var(--c) / var(--f); margin: 0 10px 4px; }
.ms-gates-docs .ms-phase { color: var(--gate-ctc); }
.ms-gates-docs .ms-meter-fill { background: linear-gradient(90deg, #1a5dad, var(--gate-ctc)); }
.ms-gates.aligned.has-sub .ms-gates-ctc, .ms-gates.aligned.has-sub .ms-gates-funding { grid-row: 2; }
/* borderless boxes: the dashed guides already frame each checklist */
.ms-gates .ms-gates-block, .ms-gates .ms-gates-block.all-clear { box-shadow: none; background: transparent; }
.ms-guide { position: absolute; top: -12px; bottom: 0; width: 0; border-left: 1.5px dashed var(--border-mid); pointer-events: none; transform: translateX(-0.75px); }
.ms-guide.g-ctc { border-left-color: rgba(162,28,175,0.45); }
.ms-guide.g-fund { border-left-color: rgba(109,40,217,0.45); }
@media (max-width: 760px) {
  /* too narrow to sit between milestones — the boxes stack, no guides */
  .ms-gates.aligned { grid-template-columns: 1fr; row-gap: 12px; }
  .ms-gates.aligned .ms-gates-submitted, .ms-gates.aligned .ms-gates-docs, .ms-gates.aligned .ms-gates-ctc, .ms-gates.aligned .ms-gates-funding,
  .ms-gates.aligned.has-sub .ms-gates-ctc, .ms-gates.aligned.has-sub .ms-gates-funding { grid-row: auto; grid-column: auto; margin: 0; }
  .ms-guide { display: none; }
  /* on a phone only the next stage's box shows */
  .ms-gates .ms-gates-block:not(.ms-gates-next) { display: none; }
}
/* the two gated milestones and their boxes share a color: CTC teal, Funding violet */
:root { --gate-ctc: #a21caf; --gate-fund: #6d28d9; }
.ms-step[data-ms="ctc_at"] .ms-lbl, .ms-gates-ctc .ms-phase { color: var(--gate-ctc); }
.ms-step[data-ms="funded_at"] .ms-lbl, .ms-gates-funding .ms-phase { color: var(--gate-fund); }
.ms-step[data-ms="ctc_at"].now .ms-lbl, .ms-step[data-ms="ctc_at"].done .ms-lbl { color: var(--gate-ctc); }
.ms-step[data-ms="funded_at"].now .ms-lbl, .ms-step[data-ms="funded_at"].done .ms-lbl { color: var(--gate-fund); }
/* their dots light up in the same color: the ring and glow while current, a plain ring when ready, filled once passed */
.ms-step[data-ms="ctc_at"].now .ms-dot { border-color: var(--gate-ctc); box-shadow: 0 0 0 4px rgba(162,28,175,0.18); }
.ms-step[data-ms="ctc_at"].now .ms-dot::after { background: var(--gate-ctc); }
.ms-step[data-ms="ctc_at"].ready .ms-dot { border-color: var(--gate-ctc); }
.ms-step[data-ms="ctc_at"].done .ms-dot { background: var(--gate-ctc); border-color: var(--gate-ctc); }
.ms-step[data-ms="funded_at"].now .ms-dot { border-color: var(--gate-fund); box-shadow: 0 0 0 4px rgba(109,40,217,0.18); }
.ms-step[data-ms="funded_at"].now .ms-dot::after { background: var(--gate-fund); }
.ms-step[data-ms="funded_at"].ready .ms-dot { border-color: var(--gate-fund); }
.ms-step[data-ms="funded_at"].done .ms-dot { background: var(--gate-fund); border-color: var(--gate-fund); }
.ms-track.ms-at-ctc .ms-fill { background: linear-gradient(90deg, #1a5dad, var(--gate-ctc)); }
.ms-track.ms-at-fund .ms-fill { background: linear-gradient(90deg, #1a5dad, var(--gate-fund)); }
/* a light runs left → right along the filled bar, over and over, in the current phase's color:
   green up to Approved, magenta from Cleared to Close, violet from Funded */
.ms-track { --ms-sweep: rgba(134,239,172,0.95); }
.ms-track.ms-at-ctc { --ms-sweep: rgba(245,160,255,0.95); }
.ms-track.ms-at-fund { --ms-sweep: rgba(196,181,253,0.95); }
.ms-fill { position: relative; overflow: hidden; }
.ms-fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, var(--ms-sweep), transparent);
  animation: msSweep 2.4s ease-in-out infinite; }
@keyframes msSweep { from { transform: translateX(-100%); } to { transform: translateX(263%); } }
.ms-off .ms-fill::after, .ap-ms .ms-fill::after { display: none; }
@media (prefers-reduced-motion: reduce) { .ms-fill::after { animation: none; display: none; } }
/* the current step's glow follows the phase: magenta CTC → Doc Received, violet Funded and after */
.ms-track.ms-at-ctc .ms-step.now .ms-dot { border-color: var(--gate-ctc); box-shadow: 0 0 0 4px rgba(162,28,175,0.18); }
.ms-track.ms-at-ctc .ms-step.now .ms-dot::after { background: var(--gate-ctc); }
.ms-track.ms-at-ctc .ms-step.now .ms-lbl { color: var(--gate-ctc); }
.ms-track.ms-at-fund .ms-step.now .ms-dot { border-color: var(--gate-fund); box-shadow: 0 0 0 4px rgba(109,40,217,0.18); }
.ms-track.ms-at-fund .ms-step.now .ms-dot::after { background: var(--gate-fund); }
.ms-track.ms-at-fund .ms-step.now .ms-lbl { color: var(--gate-fund); }
.ms-gates-submitted .ms-phase { color: #1a5dad; }
.ms-gates-submitted .ms-meter-fill { background: linear-gradient(90deg, #5b8fd6, #1a5dad); }
.ms-gates-ctc .ms-meter-fill { background: linear-gradient(90deg, #1a5dad, var(--gate-ctc)); }
.ms-gates-funding .ms-meter-fill { background: linear-gradient(90deg, #1a5dad, var(--gate-fund)); }
.ms-gates-ctc.all-clear { box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 0 0 1px rgba(162,28,175,0.45); }
.ms-gates-funding.all-clear { box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 0 0 1px rgba(109,40,217,0.45); }
.ms-gates-block { border-radius: 12px; padding: 12px 14px 6px; background: #fff; min-width: 0;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 0 0 1px rgba(16,24,40,0.06); }
.ms-gates-block.all-clear { box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 0 0 1px rgba(46,181,82,0.45); }
.ms-gates-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sub); }
.ms-gates-n { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0; color: var(--text-dim); }
.ms-gates-block.all-clear .ms-gates-n { color: #1f7a3a; }
.ms-meter { height: 3px; border-radius: 999px; background: var(--border); margin: 8px 0 4px; overflow: hidden; }
.ms-meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1a5dad, #2eb552); transition: width .4s ease; }
.ms-gates-list { display: flex; flex-direction: column; }
.ms-gate { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 2px; border: 0; border-top: 1px solid var(--border);
  background: none; font: inherit; font-size: 11px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; border-radius: 0; }
.ms-gate:first-child { border-top: 0; }
.ms-gate:disabled { cursor: default; }
.ms-gate:not(:disabled):hover { background: var(--surface2); }
.ms-gate-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-mid); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: #fff; flex-shrink: 0; }
.ms-gate-dot svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ms-gate-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-gate-state { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; }
.ms-gate.completed .ms-gate-dot { background: #2eb552; border-color: #2eb552; }
.ms-gate.completed .ms-gate-state { color: #1f7a3a; }
.ms-gate.waived { color: var(--text-dim); }
.ms-gate.waived .ms-gate-lbl { text-decoration: line-through; }
.ms-gate.waived .ms-gate-dot { background: #c9c5bd; border-color: #c9c5bd; }
.ms-gate.pending .ms-gate-dot { border-color: #d6a25a; border-style: dashed; }
.ms-gate.pending .ms-gate-state { color: #b45309; }
.ms-gate-manual { width: 5px; height: 5px; border-radius: 50%; background: #1a5dad; display: inline-block; }
@media (max-width: 760px) { .ms-gates { display: flex; flex-direction: column; } }

/* misc */
.muted { color: var(--text-dim); }
.spacer { flex: 1; }
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 4100;   /* over every pop-up, so a window's own warning is visible */
  background: var(--navy); color: #f8f9fc; padding: 10px 16px; border-radius: var(--radius);
  font-size: 11px; box-shadow: 0 8px 24px rgba(16,24,40,0.25);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; max-width: 380px;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #7f1d1d; }

/* floating glass panel — no blocking backdrop: the page behind stays
   readable, scrollable, and clickable while the panel is open */
.modal-back {
  /* above the loan sidebar (1001) and the header (1000): a wide window must
     never slide under the side menu */
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  pointer-events: none;
}
.modal {
  pointer-events: auto;
  background: rgba(248,250,254,0.93); border-radius: 14px; width: 100%; max-width: 520px;
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(16,24,40,0.35), 0 2px 8px rgba(16,24,40,0.15);
  overflow: hidden;
}
/* every window opens the same way: a short rise and settle (the 1003 edit
   window .lp-win.lp-fresh shares the keyframes) */
.modal-back > .modal { animation: winIn .2s cubic-bezier(.2,.7,.2,1); }
@keyframes winIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
/* add-modal chrome: modern light header — accent hairline on top, no navy bar */
.amodal { border-top: 3px solid var(--accent); }
.prereg-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#stImport.drop-over { border: 2px dashed var(--accent); background: var(--accent-dim); color: var(--accent); }
.prereg-health { --uh: 0%; --uh-fill: #fecaca; --uh-bd: #f3c2c2; --uh-tx: #b91c1c; text-decoration: none;
  font-size: 10px; font-weight: 700; font-family: var(--mono); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--uh-bd); color: var(--uh-tx);
  background: linear-gradient(90deg, var(--uh-fill) var(--uh), #fff var(--uh)); }
.prereg-health[hidden] { display: none; }
.prereg-health.uh-low { --uh-fill: #fca5a5; --uh-bd: #f87171; --uh-tx: #b91c1c; }
.prereg-health.uh-mid { --uh-fill: #fcd34d; --uh-bd: #f59e0b; --uh-tx: #92400e; }
.prereg-health.uh-full { --uh-fill: var(--c-income-bg); --uh-bd: var(--c-income-br); --uh-tx: var(--c-income); }
.prereg-warn { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: 11.5px; line-height: 1.5; }
.coc-need-list { display: flex; flex-direction: column; gap: 6px; }
.coc-need-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fcd34d; font-size: 11.5px; color: #78350f; }
/* broker 1003 edits waiting for the lender */
.uc-wrap { border: 1px solid #c4b5fd; border-left: 4px solid #8b5cf6; background: #f5f3ff; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.uc-wrap[hidden] { display: none; }
.uc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.uc-title { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d28d9; display: inline-flex; align-items: center; gap: 6px; }
.uc-n { font-size: 9.5px; min-width: 18px; text-align: center; padding: 0 6px; border-radius: 999px; background: #8b5cf6; color: #fff; }
.uc-by { font-size: 10px; color: var(--text-sub); }
.uc-list { display: flex; flex-direction: column; }
.uc-row { cursor: pointer; display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 10px; align-items: center; min-height: 26px; padding: 2px 0; box-sizing: border-box; border-top: 1px dashed rgba(0,0,0,.08); font-size: 11px; }
.uc-row:hover { background: #e9f0fa; }
.uc-acts .btn-sm { padding-top: 2px; padding-bottom: 2px; }
.uc-row.uc-err { background: #fdecec; }
.uc-rec { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.uc-f { color: var(--text-sub); min-width: 110px; }
.uc-old { color: #5f6673; text-decoration: line-through; }
.uc-arrow { color: var(--text-dim); }
.uc-new { color: #6d28d9; font-weight: 700; }
.uc-blank { font-style: italic; text-decoration: none; }
.uc-tag { font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-right: 6px; }
.uc-add { background: #ecfdf3; color: #15803d; border: 1px solid #86efac; }
.uc-del { background: #fdecec; color: #b91c1c; border: 1px solid #f3c2c2; }
.uc-sum { color: var(--text-sub); }
.uc-acts { display: flex; gap: 4px; }
.uc-ok, .uc-no { min-width: 30px; justify-content: center; font-weight: 700; }
.uc-ok { color: var(--c-income); border-color: rgba(22,101,52,0.28); background: #e6efe8; }
.uc-ok:hover { background: #d8e7dc; border-color: rgba(22,101,52,0.45); }
.uc-no { color: #b91c1c; border-color: #f3c2c2; background: #fdecec; }
.uc-no:hover { background: #fbd5d5; border-color: #ef4444; }
.uc-all { min-width: 0; padding: 0 10px; }
@media (max-width: 640px) { .uc-row { grid-template-columns: 1fr auto; } .uc-body { grid-column: 1 / -1; grid-row: 2; } }
/* 1003 file health: a white checklist card — the tone on its 3px edge, icon and
   % (red below 80%, amber below 100%, green when complete), then one striped
   row per section listing what is still missing */
.uh-card[hidden] { display: none; }
.uh-card { --uh-c: #d97706; --uh-tx: #b45309; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--uh-c);
  border-radius: 8px; padding: 0 8px 4px 10px; margin-bottom: 12px; }
.uh-card.uh-low { --uh-c: #c0392b; --uh-tx: #c0392b; }
.uh-card.uh-full { --uh-c: #15803d; --uh-tx: #15803d; overflow: hidden; animation: uhPop .35s ease-out;
  transition: opacity .5s, max-height .5s, padding .5s, margin .5s; }
.uh-card.uh-leave { opacity: 0; max-height: 0 !important; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
@keyframes uhPop { from { transform: scale(.97); opacity: .4; } }
.uh-head { display: flex; align-items: center; gap: 10px; min-height: 30px; user-select: none; }
.uh-ico { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--uh-tx); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uh-ico .uh-half { fill: var(--uh-tx); stroke: none; }
.uh-title { font-size: 8px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-lbl); white-space: nowrap; }
.uh-bar { flex: 0 1 120px; min-width: 40px; height: 4px; border-radius: 2px; background: #e3e6ee; overflow: hidden; }
.uh-fill { height: 100%; background: var(--uh-c); transition: width .45s cubic-bezier(.3,.7,.3,1); }
.uh-pct { font-size: 10.5px; font-weight: 600; color: var(--uh-tx); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uh-n { font-size: 10.5px; color: var(--text); white-space: nowrap; }
.uh-chev { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--text-lbl); cursor: pointer; }
.uh-chev:hover { background: #e9f0fa; color: var(--accent); }
/* move the card to the loan page's right rail and back (wide windows only) */
.uh-dock { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--text-lbl); cursor: pointer; }
.uh-dock:hover { background: #e9f0fa; color: var(--accent); }
.uh-dock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uh-dock:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.uh-dock + .uh-chev { margin-left: 0; }
.uh-chev svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.uh-card.uh-collapsed .uh-chev svg { transform: rotate(-90deg); }
.uh-card.uh-collapsed .uh-list { display: none; }
.uh-list { display: flex; flex-direction: column; }
.uh-grp { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: start; padding: 2px 8px; border-radius: 4px; transition: opacity .2s; }
.uh-grp:nth-child(odd) { background: #f6f6f8; }
.uh-g { font-size: 8px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-lbl); line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh-items { display: flex; flex-wrap: wrap; gap: 0 14px; min-width: 0; }
.uh-it { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0; border: 0; background: none; font: inherit; font-size: 10.5px;
  color: var(--text); text-align: left; cursor: pointer; transition: opacity .2s; }
.uh-it::before { content: ''; width: 7px; height: 7px; flex: none; box-sizing: border-box; border: 1.5px solid var(--c-suspend); border-radius: 50%; }
.uh-it:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.uh-it.is-cur { color: var(--c-suspend); }
/* filled: a struck-through check for a moment, then it leaves (an emptied section too) */
.uh-it.is-done { color: var(--text-lbl); text-decoration: line-through; pointer-events: none; }
.uh-it.is-done::before { width: 4px; height: 7px; margin: 0 1.5px; border: solid #15803d; border-width: 0 1.5px 1.5px 0; border-radius: 0; transform: translateY(-1px) rotate(45deg); }
.uh-it.uh-leaving, .uh-grp.uh-leaving { opacity: 0; }
.uh-it:focus-visible, .uh-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* To Review: what the file's documents say the 1003 should read — one line each (a long wording ends in an ellipsis;
   the whole of it and where it came from are the tooltip), the amber warning glyph where a missing item has its red
   ring; put right, it leaves with the same struck-through check */
.uh-rv-items { flex-direction: column; flex-wrap: nowrap; }
.uh-it.uh-rv { display: flex; max-width: 100%; }
.uh-it.uh-rv::before { content: none; }
.uh-rv-ico { width: 10px; height: 10px; flex: none; fill: none; stroke: #d97706; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uh-rv-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uh-it.uh-rv.is-done::before { content: ''; }
.uh-it.uh-rv.is-done .uh-rv-ico { display: none; }
@media (max-width: 640px) {
  .uh-title { display: none; }
  .uh-grp { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .uh-card.uh-full, .uh-fill, .uh-chev svg, .uh-grp, .uh-it { animation: none; transition: none; } }
/* locate: the row an item points at becomes the current row — a full-height bar
   on its left edge (a missing row's tick grows into it) and a hairline frame, red
   on a missing row, purple on a pending change, blue otherwise. It stays until
   the next locate, Esc or a click elsewhere; once filled it turns green and lets go. */
.loc-cursor { --loc: var(--accent); outline: none; }
.loc-cursor:is(.req-missing, .req-row, .decl-missing, .decl-req, .bname-missing, .rc-loan-req, .rc-head-req, .lcd-req) { --loc: var(--c-suspend); }
.loc-cursor.loc-pend { --loc: var(--pend-purple); }
.loc-cursor.cur-resolved { --loc: #16a34a; }
.loc-cursor:not(tr) { position: relative; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--loc) 26%, transparent); }
tr.loc-cursor > td { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--loc) 26%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--loc) 26%, transparent); }
tr.loc-cursor > td:last-child { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--loc) 26%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--loc) 26%, transparent),
  inset -1px 0 0 color-mix(in srgb, var(--loc) 26%, transparent); }
tr.loc-cursor > td:first-child { position: relative; }
.loc-cursor:not(tr)::after, tr.loc-cursor > td:first-child::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: var(--loc); pointer-events: none; animation: locIn .2s cubic-bezier(.2,.7,.2,1); }
.loc-cursor > .lbl, .loc-cursor > .decl-qcell > .decl-letter, .bname.loc-cursor { color: var(--loc) !important; transition: color .15s; }
.bname.loc-cursor { padding: 1px 6px; margin: -1px -6px; border-radius: 4px; }
/* found again after a re-render: no second grow */
.loc-cursor.loc-still::after, tr.loc-cursor.loc-still > td:first-child::after { animation: none; }
.loc-cursor.cur-resolved::after, tr.loc-cursor.cur-resolved > td:first-child::after { animation: locOut .7s .3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes locIn { from { transform: scaleY(0); opacity: 0; } }
@keyframes locOut { to { transform: scaleY(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loc-cursor::after, tr.loc-cursor > td::after { animation: none !important; } }
.bblock-head .bname.uc-pend { color: var(--pend-purple); }
/* a borrower name still missing reads red with the rows' tick in their tick
   column (the name steps in to the labels' line while it is flagged) */
.bblock-head .bname-missing { color: var(--c-suspend); cursor: default; }
.bname-missing, .bname.req-resolved { position: relative; padding-left: 8px; }
.bname-missing::before, .bname.req-resolved::before { content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 14px; margin-top: -7px;
  border-radius: 0 2px 2px 0; background: var(--c-suspend); pointer-events: none; }
.bname.req-resolved::before { background: #16a34a; animation: reqOut .9s cubic-bezier(.2,.7,.2,1) forwards; }
.bname:is(.bname-missing, .req-resolved).loc-cursor { padding-left: 8px; margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .bname.req-resolved::before { content: none; } }
.decl-head { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.decl-toggle { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font-size: 9.5px; font-weight: 700; color: var(--text-sub); }
.decl-head:hover .decl-toggle { border-color: var(--accent); color: var(--accent); }
.decl-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .2s; }
.decl-toggle.open svg { transform: rotate(180deg); }
/* question rows keep the .vrow rhythm: 26px, #f6f6f8 stripe, #e9f0fa hover */
.decl-all { display: flex; flex-direction: column; }
.decl-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10.5px; padding: 2px 8px; border-radius: 4px; min-height: 26px; }
.decl-all > .decl-q:nth-child(odd of .decl-q) { background: #f6f6f8; }
.decl-all > .decl-q:nth-child(n of .decl-q):hover { background: #e9f0fa; }
.decl-q.decl-clear { color: var(--ok); }
.decl-a { font-weight: 700; white-space: nowrap; }
.decl-a.yes { color: var(--c-suspend); }
.decl-a.ok { color: var(--ok); }
.decl-a.info { color: var(--c-broker); }
.decl-a.no { color: var(--text-sub); }
/* unanswered, or a Yes still missing its detail: the tick, the reason on hover;
   the folded summary line reads red, a question row reddens only its letter */
.decl-missing { display: flex; align-items: center; font-size: 10.5px; padding: 2px 8px; border-radius: 4px; min-height: 26px; color: var(--c-suspend); cursor: default; }
.decl-all > .decl-missing:not(.decl-q):hover { background: #e9f0fa; }
.decl-q.decl-missing { color: var(--text); }
.decl-q:is(.decl-missing, .decl-req) .decl-letter, table.grid tr.req-row .decl-letter { color: var(--c-suspend); }
.decl-missing[data-decl-toggle] { cursor: pointer; }
/* Conditions: Show All toggle + Guide window */
.btn.cond-toggle, #condGuideBtn { display: inline-flex; align-items: center; gap: 5px; }
.btn.cond-toggle svg, #condGuideBtn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.cond-toggle .cond-toggle-n { font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border-mid); }
.btn.cond-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.cond-toggle.on .cond-toggle-n { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; }
.cg-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.cg-body { overflow-y: auto; padding: 12px 18px 18px; }
.cg-group + .cg-group { margin-top: 14px; }
.cg-when { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); padding-bottom: 5px; border-bottom: 1.5px solid var(--border); display: flex; align-items: center; gap: 6px; }
.cg-n { font-size: 9px; padding: 0 6px; border-radius: 999px; background: var(--surface2); color: var(--text-sub); border: 1px solid var(--border); }
.cg-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cg-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cg-text { font-weight: 600; color: var(--text); }
.cg-stage { font-size: 9.5px; white-space: nowrap; padding: 1px 7px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-sub); }
.cg-meta { font-size: 10px; color: var(--text-sub); white-space: nowrap; }
.cg-int { font-size: 9px; font-weight: 700; color: #b45309; }
.cg-how { font-size: 10px; color: var(--text-dim); }
@media (max-width: 640px) { .cg-how, .cg-table td:nth-child(3) { display: none; } }
.amodal-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; }
.amodal-head .amodal-ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-dim); color: var(--accent); flex-shrink: 0;
}
.amodal-head .amodal-ico svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.amodal-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.1px; }
.amodal-body { padding: 14px 18px 16px; }

/* ── Credit page: vendor launchpad tiles ── */
.cr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.cr-tile {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 11px; cursor: pointer; font: inherit; min-width: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cr-tile:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(16,24,40,0.10); }
.cr-logo {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--border-mid); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.2px;
}
.cr-logo.has-img {
  width: 112px; height: 42px; background: #fff; border: 1px solid var(--border-light); padding: 4px 6px; overflow: hidden;
  /* every vendor's artwork starts at the same x inside the box */
  justify-content: flex-start;
}
.cr-tile { min-height: 58px; }
.cr-tile .cr-logo:not(.has-img) { width: 42px; height: 42px; font-size: 12px; }
.cr-tile .cr-name { font-size: 11.5px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* fill the box, not the intrinsic size: a small source (CoreLogic's 85px SVG)
   used to draw short and float, while wide ones filled the row — width/height
   100% scales them all to the same area and object-position pins the artwork
   to the left, so every tile's logo starts and ends on the same line */
.cr-logo.has-img img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.cr-tile.off .cr-logo.has-img img { filter: grayscale(1); opacity: 0.5; }
.cr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
/* the status tag under the vendor name (beside it, it drew over the name) */
.cr-text > .tag { align-self: flex-start; margin-top: 3px; }
.cr-name {
  font-size: 11px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-sub {
  font-size: 9.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-tile .tag { flex-shrink: 0; }
.cr-tile.off { background: var(--surface2); cursor: default; }
.cr-tile.off:hover { border-color: var(--border-mid); box-shadow: none; }
.cr-tile.off .cr-name { color: var(--text-dim); }
.cr-group-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-sub); margin: 2px 0 6px;
}

/* Credit page: order history */
.cr-orders { display: flex; flex-direction: column; gap: 7px; }
.cr-order {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 3px;
}
.cr-order-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-order-vendor { font-size: 11px; font-weight: 600; color: var(--text); }
/* the ordering vendor, large at the start of every order row */
.cr-order.cr-order-row { flex-direction: row; align-items: stretch; gap: 14px; }
.cr-order-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* top, not centred: an order box that grows (Record Results form, supplement
   requests) left the logo floating halfway down */
.cr-order-vendorbox { flex: 0 0 150px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
  padding-right: 14px; border-right: 1px solid var(--border); }
.cr-order-logo { width: 116px; height: 40px; border: 1px solid var(--border-light); border-radius: 8px; background: #fff; padding: 4px 6px;
  display: flex; align-items: center; justify-content: flex-start; overflow: hidden; }
.cr-order-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.cr-order-logo.cr-order-initials { color: #fff; font-weight: 800; font-size: 14px; border: 0; justify-content: center; }
.cr-order-vname { font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.2; }
.cr-order-vplat { font-size: 9px; color: var(--text-dim); }
/* stacked card: the badge turns into a row, logo and vendor name side by side
   at the start of the line */
@media (max-width: 700px) { .cr-order.cr-order-row { flex-direction: column; } .cr-order-vendorbox { flex: none; border-right: 0; padding-right: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; } }
.cr-scores { font-size: 10px; color: var(--text-sub); }
.cr-record {
  border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px;
  display: flex; flex-direction: column; gap: 7px;
}

/* ── Appraisal page: order cards, progress stepper, review tables ───────── */
.ap-empty { font-size: 10.5px; color: var(--text-dim); padding: 14px 0 6px; }
.ap-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px 16px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px; }
.ap-card.ap-done { opacity: 0.8; }
.ap-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ap-product { font-size: 10.5px; font-weight: 600; color: var(--text); }
.ap-eta { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--accent); padding: 2px 8px; border-radius: 999px;
  background: var(--accent-dim, rgba(26,93,173,0.08)); border: 1px solid rgba(26,93,173,0.2); }
.ap-eta-soon { color: var(--c-app); background: var(--c-app-bg); border-color: var(--c-app-br); }
.ap-eta-late { color: var(--c-suspend); background: var(--c-suspend-bg); border-color: var(--c-suspend-br); }
/* facts flow like words: each takes the width its value needs, so a short
   value (appraiser + license, effective → expires) stays on one line while
   the row has room, and the free width is shared out; a long one (contact,
   access) gets a row of its own and wraps there */
.ap-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 4px 0; }
.ap-fact { display: flex; gap: 8px; font-size: 10px; flex: 1 1 auto; min-width: min(210px, 100%); max-width: 100%; }
.ap-k { flex-shrink: 0; width: 88px; font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding-top: 1px; }
.ap-v { min-width: 0; color: var(--text); word-break: break-word; }
.ap-note { font-size: 10px; display: flex; gap: 8px; padding: 7px 10px; border-radius: 6px; background: var(--surface2); white-space: pre-line; }
.ap-note.ap-internal { background: rgba(109,40,217,0.05); }
.ap-mlabel { display: block; font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; }
.ap-drop { border: 2px dashed var(--border-mid, #c9cfdb); border-radius: 12px; padding: 34px 20px; text-align: center; cursor: pointer; background: var(--surface2); }
.ap-drop.over, .ap-drop:hover { border-color: var(--accent); background: rgba(26,93,173,0.05); }
.ap-drop-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
/* review */
.ar-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.ar-facts { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
table.ar-alerts td, table.ar-cmp td { vertical-align: top; font-size: 10px; }
table.grid tr.ar-row-red td, table.grid tbody tr.ar-row-red:nth-child(even) td { background: #fdecec !important; }
table.grid tr.ar-row-orange td, table.grid tbody tr.ar-row-orange:nth-child(even) td { background: #fff4e5 !important; }
table.grid tr.ar-row-na td { color: var(--text-dim); }
.ar-comps { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-top: 20px; overflow: hidden; }
.ar-comps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ar-comps-title { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.ar-research { font-size: 10px; color: var(--text); display: flex; flex-direction: column; gap: 1px; font-family: var(--mono); }
.ar-flag { color: var(--c-suspend); font-weight: 700; }
.ar-banner { margin: 8px 14px 0; padding: 7px 10px; border-radius: 7px; font-size: 10px; line-height: 1.45; }
.ar-banner.sev-red { background: var(--c-suspend-bg); border: 1px solid var(--c-suspend-br); color: var(--c-suspend); }
.ar-banner.sev-orange { background: var(--c-app-bg); border: 1px solid var(--c-app-br); color: var(--c-app); }
.ar-scroll { overflow-x: auto; padding: 8px 14px 12px; }
table.ar-table td, table.ar-table th { text-align: center; }
table.ar-table td.feat, table.ar-table th.feat { text-align: left; font-weight: 600; white-space: nowrap; }
.ar-ok { color: var(--c-income); font-weight: 600; }
.ar-bad { color: var(--c-suspend); font-weight: 700; }
.ar-warn { color: var(--c-app); font-weight: 600; }
/* appraisal modals: two-column form grid */
.ap-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
.ap-form .span2 { grid-column: 1 / -1; }
.ap-form textarea { min-height: 52px; }
.ap-types { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ap-sep { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.ap-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ap-check { display: flex; align-items: center; gap: 7px; height: 31px; font-size: 10.5px; color: var(--text); cursor: pointer; user-select: none; }
.ap-check input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
/* staged files (submit window + order card upload area): the name takes the
   width left over and ellipsizes (max-width: 0 lets the auto layout shrink
   it); on a phone the table scrolls sideways inside its wrap, so Type and
   the remove button stay reachable instead of being clipped by the window */
.ap-stage-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ap-stage-wrap > table.ap-stage { min-width: 460px; }
table.ap-stage td { font-size: 10px; vertical-align: middle; }
table.ap-stage td.ap-stage-name { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.ap-stage select { padding: 4px 8px; font-size: 10px; }
/* inline upload area at the foot of an order card */
.ap-ssr { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; }
.ap-ssr-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; }
.ap-ssr-line .ap-k { min-width: 58px; }
.ssr-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.ssr-low { background: #ecfdf3; border-color: #86efac; color: #15803d; }
.ssr-mid { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.ssr-high { background: #fdecec; border-color: #f3c2c2; color: #b91c1c; }
.ssr-na { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.ap-drop.busy { opacity: .6; pointer-events: none; }
.ap-upload { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.ap-drop-inline { flex: 1; padding: 13px 16px; text-align: left; display: flex; align-items: center; min-height: 40px; }
.ap-drop-inline .ap-drop-title { font-size: 10.5px; font-weight: 600; margin: 0; color: var(--text-dim); }
.ap-drop-inline:hover .ap-drop-title, .ap-drop-inline.over .ap-drop-title { color: var(--accent); }
.ap-upload-foot { display: flex; justify-content: flex-end; gap: 6px; }
/* uploaded files list under an order's drop zone */
.ap-docs { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ap-docs-head { font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); background: var(--surface2); padding: 7px 12px; border-bottom: 1px solid var(--border); }
.ap-doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 10px; flex-wrap: nowrap; }
.ap-doc-row .cu-open { flex: 1 1 auto; min-width: 100px; }
.ap-doc-row .spacer { flex: 0 0 4px; }
@media (max-width: 1100px) { .ap-doc-row { flex-wrap: wrap; } .ap-doc-row .spacer { flex: 1; } }
.ap-doc-row + .ap-doc-row { border-top: 1px dashed var(--border); }
.ap-doc-row .cu-open { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ft { font-size: 8px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim); background: #fff; flex-shrink: 0; min-width: 30px; text-align: center; }
.ap-ft-pdf { color: #b91c1c; border-color: #fecaca; background: #fff5f5; }
.ap-ft-xml { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.ap-ft-img { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }

/* ── AI document pre-review (Condition Uploads + AI Review page) ── */
.ai-ico { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -2px; }
.btn.ai-run { display: inline-flex; align-items: center; gap: 5px; }
.tag.ai-busy { display: inline-flex; align-items: center; gap: 5px; }
.tag.ai-busy .ai-ico { animation: ai-pulse 1.2s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.tag.ai-bundle { cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
.tag.ai-bundle.open, .tag.ai-bundle:hover { background: var(--accent-bg); border-color: rgba(26,93,173,0.35); color: var(--accent); }
.tag.ai-bundle.ai-attn { border-color: var(--c-app-br); background: var(--c-app-bg); color: var(--c-app); }
.tag.ai-badge { cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
.tag.ai-badge.decided { opacity: 0.75; }
.tag.ai-badge.open { box-shadow: 0 0 0 2px var(--accent-bg); }
.ai-ok { background: var(--c-income-bg) !important; border-color: var(--c-income-br) !important; color: var(--c-income) !important; }
.ai-more { background: var(--c-app-bg) !important; border-color: var(--c-app-br) !important; color: var(--c-app) !important; }
.ai-bad { background: var(--c-suspend-bg) !important; border-color: var(--c-suspend-br) !important; color: var(--c-suspend) !important; }
.ai-mismatch { background: rgba(124,58,237,0.07) !important; border-color: rgba(124,58,237,0.25) !important; color: var(--c-credit) !important; }
.ai-none { background: var(--surface2) !important; border-color: var(--surface3) !important; color: var(--text-sub) !important; }
.ai-bad-text { color: var(--c-suspend) !important; }
/* split proposal under the file row */
.ai-split { margin: -2px 0 6px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm, 6px); background: var(--surface); padding: 6px 10px; }
.ai-seg { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.ai-seg + .ai-seg { border-top: 1px dashed var(--border); }
.ai-thumb { width: 72px; min-height: 48px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ai-thumb canvas { display: block; width: 72px; height: auto; }
.ai-thumb-x { font-size: 9px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.08em; }
.ai-seg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-seg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; }
.ai-seg-sum { font-size: 10.5px; color: var(--text-sub); }
.ai-seg-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-seg-link select { max-width: 420px; font-size: 10px; }
.ai-split-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; }
/* evidence panel inside a condition card */
.ai-panel { border-top: 1px solid var(--border); background: var(--surface2); margin: 5px -12px -5px; padding: 8px 12px 10px; cursor: default; font-size: 10.5px; display: flex; flex-direction: column; gap: 6px; }
.ai-p-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-p-verdict { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 999px; border: 1px solid; font-weight: 700; font-size: 10px; }
.ai-p-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text); }
.ai-p-line b { font-size: 12px; }
.ai-p-dot { color: var(--text-dim); }
.ai-p-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-mid); margin-top: 2px; }
.ai-p-tab { border: none; background: none; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-sub); padding: 4px 10px 3px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ai-p-tab:hover { color: var(--text); background: var(--surface3); }
.ai-p-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ai-p-body { display: flex; flex-direction: column; gap: 6px; }
.ai-p-more { font-size: 10px; color: var(--text-sub); }
.ai-p-more summary { cursor: pointer; }
.ai-p-more .ai-p-list { margin-top: 4px; }
.wv-two { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.cond-e-tabs { margin: -4px 0 10px; }
/* the Edit Condition window: wide enough for Ivo's tables, never taller than
   the screen — the body scrolls inside */
.modal.cond-edit { max-width: 720px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.cond-edit .amodal-head { flex-shrink: 0; }
.modal.cond-edit .amodal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cond-ai .ai-panel { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px 10px; }
.ai-decided { font-weight: 500; }
.ai-p-sum { color: var(--text); }
.ai-p-sec { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sub); margin-top: 2px; }
.ai-p-list { display: flex; flex-direction: column; gap: 3px; }
.ai-p-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ai-p-lbl { font-weight: 600; }
.ai-cite { color: var(--text-sub); font-style: italic; }
.ai-cite .mono { font-style: normal; color: var(--text-dim); }
.ai-p-note { color: var(--text-sub); flex-basis: 100%; padding-left: 18px; }
.ai-chk { display: inline-flex; width: 13px; height: 13px; border-radius: 50%; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; }
.ai-chk.ok { background: var(--c-income-bg); color: var(--c-income); border: 1px solid var(--c-income-br); }
.ai-chk.bad { background: var(--c-suspend-bg); color: var(--c-suspend); border: 1px solid var(--c-suspend-br); }
.ai-chk.unk { background: var(--c-app-bg); color: var(--c-app); border: 1px solid var(--c-app-br); }
.ai-chk.na { background: var(--surface3); color: var(--text-dim); border: 1px solid var(--border); }
.ai-p-grid { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.ai-p-k { color: var(--text-dim); font-family: var(--mono); font-size: 9.5px; }
.ai-p-v { color: var(--text); }
.ai-p-ul { margin: 0; padding-left: 18px; }
.ai-p-reason { color: var(--text-sub); font-size: 10px; border-left: 2px solid var(--border-mid); padding-left: 8px; }
.ai-p-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ai-p-actions .btn.active { border-color: var(--accent); color: var(--accent); }
.ai-p-ov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-p-ov input[type="text"] { flex: 1; min-width: 200px; }
.ai-p-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-sub); white-space: nowrap; }
@media (max-width: 760px) { .ai-split { margin-left: 0; } .ai-seg-link select { max-width: 100%; } }

/* broker-side AI explanation lines (Condition Uploads) */
.ai-bk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 6px 12px; font-size: 10.5px; color: var(--text-sub); cursor: default; }
.ai-bk-msg { color: var(--text); }
.ai-bk-list { flex-basis: 100%; margin: 0; }
.ai-bk-busy { background: var(--accent-bg); border: 1px solid var(--accent-dim); border-radius: 8px; padding: 5px 8px; margin-left: 12px; }
/* written VOE block in the AI review panel */
.wv-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wv-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid; font-weight: 700; font-size: 10px; }
.wv-pill.wv-ok, .wv-box.wv-ok { background: var(--c-income-bg); color: var(--c-income); border-color: var(--c-income-br); }
.wv-pill.wv-warn { background: var(--c-app-bg); color: var(--c-app); border-color: var(--c-app-br); }
.wv-pill.wv-bad, .wv-box.wv-bad { background: var(--c-suspend-bg); color: var(--c-suspend); border-color: var(--c-suspend-br); }
.wv-pill.wv-na, .wv-box.wv-na { background: var(--surface3); color: var(--text-dim); border-color: var(--border); }
.wv-boxes { display: flex; flex-wrap: wrap; gap: 3px; }
.wv-box { min-width: 22px; text-align: center; padding: 0 4px; border: 1px solid; border-radius: 4px; font-size: 9.5px; font-weight: 700; font-family: var(--mono); cursor: default; }
.wv-tbl { border-collapse: collapse; font-size: 10.5px; align-self: flex-start; }
.wv-tbl th { font-size: 9px; font-weight: 700; color: var(--text-sub); text-align: right; padding: 2px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.wv-tbl th:first-child, .wv-tbl td:first-child { text-align: left; color: var(--text-sub); padding-left: 0; }
.wv-tbl td { text-align: right; padding: 2px 8px; font-family: var(--mono); white-space: nowrap; }
.wv-tbl td:first-child { font-family: inherit; }
.wv-tbl tr.wv-tot td { border-top: 1px solid var(--border-mid); font-weight: 700; }
.wv-tbl td.wv-bad-t { color: var(--c-suspend); background: var(--c-suspend-bg); }
.wv-tbl td.wv-q { font-weight: 700; color: var(--text); }
.wv-sel { font-size: 10px; padding: 1px 4px; height: auto; }
.wv-vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px 14px; }
.wv-val { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 6px; font-size: 10px; color: var(--text-sub); min-width: 0; }
.wv-val span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-val input { font-size: 10.5px; padding: 1px 5px; height: 20px; width: 100%; font-family: var(--mono); }
.wv-val b { font-family: var(--mono); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-val.wv-edited span { color: var(--accent); font-weight: 700; }
.wv-val.wv-edited input { border-color: var(--accent); }
.ai-p-broker { font-size: 10.5px; color: var(--text-sub); border-left: 2px solid var(--c-app-br); padding-left: 8px; }
a.tag.ai-badge { text-decoration: none; }
/* appraisal transfer window */
.ap-tx-box { display: flex; flex-direction: column; min-width: 0; }
.ap-tx-drop { padding: 0 14px; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ap-tx-drop .ap-drop-title { font-size: 10.5px; font-weight: 600; color: var(--text-dim); margin: 0; }
.ap-tx-drop.filled { border-style: solid; border-color: var(--accent); background: rgba(26,93,173,0.04); }
.ap-tx-drop:hover .ap-drop-title, .ap-tx-drop.over .ap-drop-title { color: var(--accent); }
.ap-tx-status { margin-top: 12px; font-size: 10.5px; }
.ap-tx-bad { color: var(--c-suspend); font-weight: 600; }
.ap-tx-check { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ap-tx-check.pass { border-color: var(--c-income-br); }
.ap-tx-check.fail { border-color: var(--c-suspend-br); }
.ap-tx-check-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 10px; flex-wrap: wrap; background: var(--surface2); }
table.ap-tx-table td { font-size: 10.5px; }
table.grid tr.ap-tx-miss td, table.grid tbody tr.ap-tx-miss:nth-child(even) td { background: #fdecec !important; }
.ap-ok { color: var(--c-income); font-weight: 700; }
.ap-bad { color: var(--c-suspend); font-weight: 700; }
.ap-tx-docs { margin-top: 12px; }
/* appraisal waiver banner + window */
.ap-waiver { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--c-income-br); background: var(--c-income-bg); border-radius: 10px; }
.ap-waiver-text { font-size: 10.5px; color: var(--text); }
.ap-waiver-note { flex-basis: 100%; font-size: 10px; color: var(--text-dim); white-space: pre-line; }
.ap-waiver-flags { border: 1px solid var(--c-app-br); background: var(--c-app-bg); color: var(--c-app); border-radius: 8px; padding: 8px 12px; font-size: 10.5px; font-weight: 600; display: flex; flex-direction: column; gap: 3px; }
.ap-waiver-conds { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; overflow-x: hidden; }
.ap-cond-pick { height: auto; align-items: flex-start; gap: 8px; }
.ap-cond-pick input { margin-top: 2px; flex-shrink: 0; }
.ap-cond-pick .tag { flex-shrink: 0; }
.ap-cond-text { font-size: 10px; line-height: 1.45; white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.ap-waiver-conds .ap-cond-pick { display: flex; width: 100%; }

/* Doc Prep attachment picker (modal lives on body) */
.att-pick { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.att-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.att-opt:hover { background: var(--surface2); }
.att-opt.on { border-color: var(--accent); background: rgba(37, 99, 235, 0.05); }
.att-opt input { margin: 0; }
.att-opt .le-pdf { font-size: 8.5px; font-weight: 800; color: #b91c1c; background: rgba(185,28,28,0.08); padding: 3px 5px; border-radius: 4px; }
.att-opt .att-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-opt .att-name { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.att-opt .att-sub { font-size: 9.5px; color: var(--text-sub); }
.ap-seq { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; margin-right: 2px; }
.ap-hist-head { font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin: 22px 0 10px; }
/* "appraisal orders not accepted" warning */
.ap-block { width: 440px; max-width: 94vw; background: #fff; border-radius: 12px; overflow: hidden; border: 2px solid var(--c-suspend); box-shadow: 0 18px 50px rgba(0,0,0,0.3); }
.ap-block-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--c-suspend); color: #fff; font-size: 13px; font-weight: 700; }
.ap-block-ico { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--c-suspend); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.ap-block-body { padding: 16px 18px; font-size: 11.5px; line-height: 1.55; color: var(--text); background: var(--c-suspend-bg); }
.ap-block-foot { display: flex; justify-content: flex-end; padding: 10px 18px 14px; background: var(--c-suspend-bg); }
.ap-block-ok { background: var(--c-suspend); border-color: var(--c-suspend); color: #fff; min-width: 72px; font-weight: 700; }
.ap-block-ok:hover { opacity: .9; color: #fff; border-color: var(--c-suspend); }
table.grid tr.ap-tx-warn td, table.grid tbody tr.ap-tx-warn:nth-child(even) td { background: #fff7e6 !important; }
.ap-warn { color: var(--c-app); font-weight: 800; }
/* Appraisal Orders header: buttons beside the title on wide screens, their own row on phones */
.ap-orders-head { flex-wrap: wrap; row-gap: 10px; }
.ap-orders-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .ap-orders-head .sec-line { display: none; }
  /* equal-size buttons: 3 across (broker), 2 x 2 when the Waiver button shows */
  .ap-orders-actions { flex-basis: 100%; display: grid; grid-template-columns: repeat(var(--ap-cols, 2), minmax(0, 1fr)); gap: 6px; }
  .ap-orders-actions .btn { width: 100%; justify-content: center; text-align: center; padding-left: 4px; padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.ap-tx-one { min-height: 88px; }
/* appraisal order cards reuse the Loan Status bar (.ms-*); a little air around it and the ETA in accent blue */
.ap-ms { margin: 10px 0 6px; }
.ap-ms .ms-date.ap-ms-eta { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .ap-ms .ms-step:last-child .ms-date { display: block; white-space: nowrap; } }

/* appraisal order bar: completed steps' circles green (the Loan Status bar keeps its blue) */
.ap-ms .ms-step.done .ms-dot { background: #2eb552; border-color: #2eb552; }
/* a quieter, smaller bar than Loan Status (which stays the headline one):
   16px circles, 3px line, smaller labels */
.ap-ms { padding-top: 4px; }
.ap-ms .ms-line { top: 10.5px; height: 3px; }
.ap-ms .ms-fill { background: linear-gradient(90deg, #b8c2d0, #2eb552); }
.ap-ms .ms-dot { width: 16px; height: 16px; border-width: 2px; }
.ap-ms .ms-dot svg { width: 9px; height: 9px; stroke-width: 3.2; }
.ap-ms .ms-step { gap: 4px; }
.ap-ms .ms-step.now .ms-dot { box-shadow: 0 0 0 3px rgba(46,181,82,0.18); }
.ap-ms .ms-step.now .ms-dot::after { width: 6px; height: 6px; }
.ap-ms .ms-lbl { font-size: 8px; }
.ap-ms .ms-date { font-size: 8.5px; }
@media (max-width: 640px) { .ap-ms .ms-dot { width: 14px; height: 14px; } .ap-ms .ms-line { top: 9.5px; } }

/* Import Settlement Statement window (Disc/LE/CD → CD worksheet) */
.ss-wrap { max-height: 64vh; overflow-y: auto; overflow-x: hidden; }
.ss-drop { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; margin-bottom: 10px; padding: 12px; border: 1.5px dashed #b6c3d6; border-radius: 10px; background: #f7f9fc; cursor: pointer; transition: background .15s, border-color .15s; }
.ss-drop:hover { border-color: #3b82f6; background: #f0f6ff; }
.ss-drop.over { border-color: #2563eb; background: #e6efff; border-style: solid; }
.ss-drop.has-file { border-style: solid; border-color: #9cc3a8; background: #f1faf4; }
.ss-drop-ico { font-size: 18px; color: #3b82f6; line-height: 1; }
.ss-drop.has-file .ss-drop-ico { color: #1f7a3a; }
.ss-drop-t { font-size: 11px; font-weight: 600; color: var(--text-sub); }
.ss-drop.has-file .ss-drop-t { color: #1f7a3a; }
.ss-src { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ss-src-l { font-size: 10.5px; font-weight: 700; color: var(--text-sub); }
.ss-src select { flex: 1; font-size: 11px; }
.ss-loading, .ss-nobase { font-size: 10.5px; color: var(--text-sub); padding: 8px 2px; }
.ss-err { font-size: 10.5px; color: var(--danger); font-weight: 600; padding: 8px 2px; }
.ss-cap { margin: 12px 0 4px; }
.ss-tbl { table-layout: fixed; width: 100%; }
.ss-tbl td { white-space: normal; overflow-wrap: anywhere; }
.ss-tbl td.num, .ss-imp td.num { text-align: right; white-space: nowrap; }
.ss-tbl td.ss-pay { white-space: normal; }
.ss-tbl th { white-space: normal; padding-left: 6px; padding-right: 6px; }
.ss-tbl td { padding-left: 6px; padding-right: 6px; }
.ss-tbl .ss-fee { font-weight: 600; }
.ss-tbl .ss-sub { font-size: 10px; color: var(--text-dim); }
.ss-tbl .tag, .ss-imp .tag { font-size: 10px; }
.ss-tbl tr.ss-off td { opacity: 0.45; }
.ss-tbl tr.ss-off td:first-child { opacity: 1; }
.ss-tbl .ss-tolcell { font-size: 10px; }
.ss-tbl .ss-tolcell .tag { margin-left: 3px; }
.ss-tbl tfoot td { font-weight: 700; font-size: 10.5px; }
.ss-up { color: #b42318; }
.ss-down { color: #1f7a3a; }
.ss-imp { width: 100%; table-layout: fixed; }
.ss-imp td { font-size: 10.5px; white-space: normal; }
.ss-imp td.ss-bad { color: var(--danger); font-weight: 700; }
.ss-verdict { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.ss-verdict span:first-child { flex: 1; }
.ss-verdict.ok { background: #ecfdf3; color: #1f7a3a; border: 1px solid #b7e4c7; }
.ss-verdict.bad { background: #fef2f2; color: #b42318; border: 1px solid #f5c2c0; }
.ss-vdiff { font-size: 10px; font-weight: 600; opacity: 0.85; }
.ss-tbl td { font-size: 10.5px; vertical-align: middle; }
.ss-tbl tr.ss-same td { color: var(--text-dim); }
.ss-old { color: var(--text-dim); text-decoration: line-through; }
.ss-arrow { color: var(--text-dim); margin: 0 2px; }
.ss-new { color: #1a5dad; }
.ss-miss { margin-top: 8px; font-size: 10px; color: var(--text-sub); line-height: 1.5; }
.ss-ck { margin-bottom: 10px; }
.ss-ck td { font-size: 10.5px; vertical-align: middle; }
.ss-ck .ss-ck-l { font-weight: 700; width: 70px; color: var(--text-sub); }
.ss-confirm { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 10.5px; font-weight: 600; color: var(--c-suspend); }


/* Loan Summary badges (Matched / Mismatched / MI Required / Not Verified …) — one small fixed size for all (the Status pill is a .tag, not affected) */
.ls-value .addr-box { margin-left: 5px; font-size: 8px; padding: 0 5px; letter-spacing: .02em; vertical-align: 1px; }
.addr-box[hidden] { display: none; }
.ap-drop-title.ap-drop-need { color: var(--c-suspend); font-weight: 700; }
.ap-docs-void .ap-doc-row { opacity: .55; } .ap-docs-void .ap-doc-row .cu-open { text-decoration: line-through; }

/* 1003 Loan & Property: a block's edit form in a floating glass window —
   same chrome as New Condition: no dim layer, the page behind stays readable
   and clickable, accent hairline + icon header, dragged by its header */
.lp-back { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
.lp-win { pointer-events: auto; width: 400px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: rgba(248,250,254,0.93); border: 1px solid rgba(255,255,255,0.7); border-top: 3px solid var(--accent); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(16,24,40,0.35), 0 2px 8px rgba(16,24,40,0.15); overflow: hidden; }
.lp-win.lp-fresh { animation: winIn .2s cubic-bezier(.2,.7,.2,1); }
.lp-head { cursor: move; user-select: none; padding: 11px 14px 8px; }
.lp-body { padding: 2px 14px 6px; overflow-y: auto; }
.lp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 14px 12px; }
/* ✕ / Esc with a change made: Save and Cancel pulse */
.lp-foot.lp-nudge [data-win-save], .lp-foot.lp-nudge [data-win-cancel] { animation: lpNudge .7s ease 2; }
@keyframes lpNudge { 50% { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 0 1px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .lp-foot.lp-nudge [data-win-save], .lp-foot.lp-nudge [data-win-cancel] { animation: none; } }
/* inside the window the inputs share the row (type / description + amount)
   and never run past its edge; a phone narrows the label column */
.lp-win .erow .ctl { min-width: 0; gap: 6px; }
.lp-win .pitia-edit .ctl input.num, .lp-win .pitia-edit .ctl select,
.lp-win .pitia-edit .ctl input[type="text"]:not(.num) { flex: 1 1 0; min-width: 0; max-width: 150px; width: auto; }
@media (max-width: 600px) {
  .lp-back { padding: calc(var(--nav-h, 54px) + 10px) 8px 8px; align-items: flex-start; }
  .lp-win { max-height: calc(100vh - var(--nav-h, 54px) - 20px); }
  .lp-body { padding: 4px 10px 8px; }
  .lp-win .erows > .erow .lbl, .lp-win .erows.erows-1col > .erow .lbl { width: 96px; }
}

/* 1003 on a phone: wide grids (assets / liabilities / REO) keep their one-row
   shape at a readable size and scroll sideways inside their card instead of
   being squeezed or cut off */
@media (max-width: 700px) {
  .urla-section .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .urla-section .card-body > table.grid.fit-tbl { width: max-content; min-width: 100%;
    --fit-fs: 10px !important; --fit-pad: 8px !important; }
  .urla-section .card-body > table.grid.fit-tbl.fit-wrap td { white-space: nowrap; }
  .urla-section .card-body > table.reo-edit,
  .urla-section .card-body > table.liab-tbl:not(.fit-tbl),
  .urla-section .card-body > table.ctr-tbl:not(.fit-tbl) { min-width: 860px; }
}
/* desktop: the window centers over the page content, beside the sidebar
   (the fixed sidebar sits above the dim layer and would cover its left edge) */
@media (min-width: 901px) {
  .lp-back { left: var(--side-w, 180px); }
}
/* every Loan & Property window lists its fields top to bottom, one per row,
   in the same order as the page */
.lp-body .erows { grid-template-columns: 1fr !important; }
/* compact: the values are short (amounts, codes, dates), so the window stays
   narrow and the rows sit closer together than on the page */
.lp-body .erows { gap: 2px 0; }
.lp-body .erows > .erow { padding: 1px 8px; gap: 10px; }
/* a checkbox / text-only row keeps the 26px rhythm of the input rows beside it */
.lp-body .erow { min-height: 26px; }
.lp-body .erows > .erow .lbl { width: 118px; }
.lp-body .erow .ctl input, .lp-body .erow .ctl select { height: 24px; }
.lp-body .erows > .erow .ctl > input:not([type=hidden]):not([type=checkbox]),
.lp-body .erows > .erow .ctl > select { max-width: 100%; }
@media (max-width: 600px) { .lp-body .erows > .erow .lbl { width: 96px; } }
/* every 1003 edit opens in this window — sized to what it holds */
.lp-win.lp-w560 { width: 560px; }
.lp-win.lp-w600 { width: 600px; }
.lp-win.lp-w760 { width: 760px; }
.lp-win.lp-w1060 { width: 1060px; }
/* long forms (borrower, employer): two columns keep the window short */
.lp-win.lp-2col { width: 680px; }
.lp-2col .lp-body .erows { grid-template-columns: 1fr 1fr !important; gap: 2px 12px; }
.lp-2col .lp-body .erows > .erow .lbl { width: 104px; }
@media (max-width: 720px) { .lp-2col .lp-body .erows { grid-template-columns: 1fr !important; } }
/* groups inside a form window (an address, the income lines) */
.lp-body .inc-group { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
.lp-body .inc-head { font-size: 10px; font-weight: 700; color: var(--text-sub); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.lp-body .cols2 { display: block; }
.lp-body .cols2 > div + div { margin-top: 10px; }
/* Add Borrower window: a short form with two captions; a field still missing turns red */
.ab-form .g { gap: 8px 10px; margin-top: 8px; }
.ab-form .g:first-child { margin-top: 0; }
.ab-same { display: flex; align-items: center; gap: 7px; font-size: 10.5px; margin-top: 6px; cursor: pointer; }
/* income list in the Add Borrower window: source | name | type | amount | x */
.ab-inc { display: grid; gap: 4px; margin-top: 6px; }
.ab-inc-row { display: grid; grid-template-columns: 138px minmax(0, 1fr) 104px 84px 24px; gap: 6px; align-items: center; }
.ab-inc-row select, .ab-inc-row input[type=text] { height: 26px; font-size: 10.5px; padding: 3px 8px; width: 100%; min-width: 0; }
.ab-inc-row select { padding-left: 4px; }
.ab-inc-row.ab-pay-row { grid-template-columns: minmax(0, 1fr) 120px 24px; }
.ab-pay-row.ab-inc-head > span:nth-child(2) { text-align: right; padding-right: 8px; }
.ab-same[hidden] { display: none; }
.ab-inc-head { font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.ab-inc-head > span:nth-child(4) { text-align: right; padding-right: 8px; }
.ab-inc-head .btn-ico { padding: 1px 4px; height: 20px; }
.ab-inc-x { height: 22px; padding: 0 5px; min-width: 0; }
.ab-ticks { display: flex; align-items: center; gap: 16px; font-size: 10.5px; margin-top: 6px; }
.ab-ticks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ab-ticks label[hidden] { display: none; }
.amodal .ab-bad { border-color: var(--c-suspend) !important; background: rgba(192,57,43,0.05); }
/* 1003 add / edit windows: the same 26px controls as the edit windows */
.urla-m .g input[type=text], .urla-m .g input[type=email], .urla-m .g select { height: 26px; padding: 3px 8px; }
/* phones: an income line wraps to two lines (source · type · x / name · amount) */
@media (max-width: 560px) {
  .ab-inc[data-inc-list] { gap: 10px; }
  .ab-inc-row:not(.ab-pay-row) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; grid-template-areas: "src type x" "name amt ."; row-gap: 4px; }
  .ab-inc-row:not(.ab-pay-row) > [data-k="src"] { grid-area: src; }
  .ab-inc-row:not(.ab-pay-row) > [data-k="type"] { grid-area: type; }
  .ab-inc-row:not(.ab-pay-row) > [data-k="name"] { grid-area: name; }
  .ab-inc-row:not(.ab-pay-row) > [data-k="amt"] { grid-area: amt; }
  .ab-inc-row:not(.ab-pay-row) > .ab-inc-x { grid-area: x; }
  .ab-inc-head:not(.ab-pay-row) { grid-template-areas: "src type x"; }
  .ab-inc-head:not(.ab-pay-row) > span:nth-child(1) { grid-area: src; }
  .ab-inc-head:not(.ab-pay-row) > span:nth-child(3) { grid-area: type; }
  .ab-inc-head:not(.ab-pay-row) > span:nth-child(2), .ab-inc-head:not(.ab-pay-row) > span:nth-child(4) { display: none; }
  .ab-inc-head:not(.ab-pay-row) > .btn-ico { grid-area: x; }
}
/* income lines (an employer's pay, other income): one header, then a row per
   line — the same 24px controls as the form rows, no label repeated per row */
.inc-lines { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); display: grid; gap: 2px; }
.inc-line { display: grid; grid-template-columns: minmax(0, 210px) 120px 26px; gap: 6px; align-items: center; padding: 1px 8px; border-radius: 4px; }
.inc-line.inc-line-4 { grid-template-columns: 170px 100px minmax(0, 1fr) 26px; }
.inc-line:nth-child(even) { background: #f6f6f8; }
.inc-line select, .inc-line input[type=text] { height: 24px; font-size: 10.5px; padding: 2px 8px; width: 100%; min-width: 0; }
.inc-line select { padding-left: 4px; }
.inc-line .inc-x { height: 22px; padding: 0 5px; min-width: 0; }
.inc-line-head { background: transparent !important; font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); padding-top: 0; padding-bottom: 2px; }
.inc-line-head > span:nth-child(2) { text-align: right; padding-right: 8px; }
.inc-line-head .btn-ico { padding: 1px 4px; height: 20px; justify-self: end; }
.inc-line-total { background: transparent !important; font-size: 10.5px; font-weight: 700; border-top: 1px solid var(--border); border-radius: 0; margin-top: 2px; padding-top: 4px; }
.inc-line-total > span:nth-child(2) { text-align: right; padding-right: 8px; }
.inc-line-empty { font-size: 10.5px; color: var(--text-dim); padding: 3px 8px; }
/* a list with nothing in it ("No liabilities") — one look on every 1003 block */
.empty-note { font-size: 10.5px; color: var(--text-dim); padding: 4px 0; }
.inc-line-empty.req-missing { color: var(--c-suspend); border-radius: 4px; }
/* bulk tables: tighter cells, the window scrolls both ways if it has to */
.lp-grid .lp-body { overflow: auto; padding: 4px 10px 6px; }
.lp-grid .lp-body table.grid th { padding: 4px 6px; }
.lp-grid .lp-body table.grid td { padding: 2px 4px; height: 26px; }
.lp-grid .lp-body table.grid td input[type=text], .lp-grid .lp-body table.grid td select { height: 24px; font-size: 10.5px; padding: 2px 6px; width: 100%; }
.lp-grid .lp-body table.grid td select { padding-left: 2px; }
.lp-grid .lp-body table.grid { width: 100%; }
/* the row tools (drag handle + remove) get a fixed slot — a % column is too
   narrow for them in a small window and would push the table sideways */
.lp-grid .lp-body table.grid col:last-child { width: 56px !important; }
.lp-grid .lp-body table.grid td:last-child:not(:first-child) { padding: 2px 2px; text-align: right; }
.lp-grid .lp-body table.grid td:last-child:not(:first-child) .btn { padding: 2px 5px; min-width: 0; height: 22px; }
.lp-reo .lp-body table.grid col:last-child { width: 86px !important; }   /* handle + flags + remove */
.lp-w760 .lp-body table.grid { min-width: 600px; }
.lp-w1060 .lp-body table.grid { min-width: 860px; }
/* a wide table window may use the whole screen width (it sits above the side menu) */
.lp-back:has(.lp-grid) { left: 0; }
/* declarations: the questions read full width, the answers keep their column */
.lp-w600 .lp-body table.grid td { padding: 3px 6px; font-size: 10.5px; }
/* Qualifying Ratios: DTI / Housing / LTV always on one row — on a phone the
   boxes slim down and the numbers scale with the screen */
.qr-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qr-strip.qr-strip-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qr-box { min-width: 0; }
.qr-box .val { white-space: nowrap; }
/* LTV / CLTV / HCLTV: a box too narrow for the three figures wraps after a slash */
.qr-box .val.qr-multi { white-space: normal; }
.qr-box .val .qr-fig { white-space: nowrap; }
@media (max-width: 600px) {
  .qr-strip { gap: 6px; }
  .qr-box { padding: 5px 7px; }
  .qr-box .lbl { font-size: 7px; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qr-box .val { font-size: clamp(9.5px, 3.4vw, 13px); }
}
/* 1003: a value waiting on a COC request (requested value shown until the lender decides) */
.coc-pend { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid #c7d7f5; background: #eef4ff; color: #1a5dad; font-size: 9px; font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; vertical-align: 1px; }
.coc-pend:hover { background: #e0ebff; }
.vrow.coc-pend-row .lbl { color: var(--text-sub); }
input.coc-pend-input::placeholder { color: #1a5dad; opacity: 0.8; }
/* waiting for the lender: every pending value reads in purple (never red —
   nothing is wrong, it just isn't approved yet) */
:root { --pend-purple: #7c3aed; }
.vrow.uc-pend .val, .vrow.uc-pend .val *, tr.uc-pend td, .uc-pend-block .val { color: var(--pend-purple) !important; }
.vrow.uc-pend .lbl { color: var(--pend-purple); }
.reo-card.uc-pend .rc-v, .reo-card.uc-pend .rc-street, .reo-card.uc-pend .rc-city,
.reo-card .rc-loan.uc-pend .rc-loan-cred, .reo-card .rc-loan.uc-pend .rc-loan-amt { color: var(--pend-purple) !important; }
.coc-pend { border-color: #ddd0fb; background: #f3eeff; color: var(--pend-purple); }
.coc-pend:hover { background: #ebe2ff; }
.vrow.coc-pend-row.coc-inplace .val { color: var(--pend-purple); }
.qr-box .val.pend-val { color: var(--pend-purple); }
input.coc-pend-input { color: var(--pend-purple); }
input.coc-pend-input::placeholder { color: var(--pend-purple); }
select.coc-pend-input { color: var(--pend-purple); border-color: #c4b5fd; }
input[type=checkbox].coc-pend-input { accent-color: var(--pend-purple); outline: 1px solid #c4b5fd; outline-offset: 1px; }
/* pending change: the file's value struck through, then the new one in purple */
.pend-old { color: var(--text-dim) !important; text-decoration: line-through; text-decoration-color: rgba(100,116,139,0.7); font-weight: 400; }
.pend-arrow { color: var(--text-dim) !important; margin: 0 5px; font-weight: 400; }
.vrow.uc-pend .val .pend-old, .vrow.uc-pend .val .pend-old *, .vrow.uc-pend .val .pend-arrow { color: var(--text-dim) !important; }
.coc-line-who { font-weight: 400; color: var(--text-sub); }

/* ── credit report data window (credit-report-view.js) ─────────────────── */
.crv { display: flex; flex-direction: column; gap: 10px; }
.amodal-head.crv-head { padding: 12px 18px; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
table.grid.crv-table { font-size: 9.5px; }
table.grid.crv-table td, table.grid.crv-table th { padding: 3px 5px; white-space: nowrap; }
table.grid.crv-table td { font-size: 9.5px; }
/* amounts line up by place value */
table.grid.crv-table td.num, table.grid.crv-table th.num { text-align: right; }
.crv-table tr.crv-closed td { color: var(--text-dim); }
.crv-table tr.crv-bad td { background: var(--danger-bg); }
.crv-inq { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 10.5px; }
.crv-table tr.crv-recent td { font-weight: 600; }
.crv-addrs { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 10.5px; }
.crv-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crv-late { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: 10px; margin: 1px 0; }
.crv-late.mid { background: #fff1e6; border-color: #fdba74; color: #9a3412; }
.crv-late.bad { background: #fdecec; border-color: #f3c2c2; color: #b91c1c; }
.crv-late small { color: inherit; opacity: 0.8; }
.crv-alerts { margin: 0; padding-left: 18px; font-size: 10.5px; line-height: 1.5; }
.crv-alerts li.crv-bad { color: var(--danger); }

/* ── credit report window · score-forward summary (credit-report-view.js, crb-) ──
   import status bar, borrower cards with a qualifying-score gauge, KPI tiles,
   and the report tables below them (scoped under .crb-report, the window body).
   Every box shows a label and its value; details are in the hover tooltip. */

/* the window body. One tone palette, declared once: amber = warn, red = bad.
   Text in a tone is var(--warn) / var(--danger); fills (bars, ring, markers),
   tints (backgrounds) and lines (borders) come from here. --crb-pad-top is the
   body's own top padding, set here so the stuck table header (top: -pad) can
   never drift from it. */
.crb-report {
  --crb-pad-top: 14px;
  --crb-warn-fill: #d97706;  --crb-warn-tint: #fff8ed;  --crb-warn-line: #f2d8b0;
  --crb-bad-fill:  #d9483a;  --crb-bad-tint:  #fdf3f2;  --crb-bad-line:  #f1cdc8;
  --crb-ok-tint:   #f4faf6;  --crb-ok-line:   #d5ebdc;
  --crb-hair: #eef1f6;       /* row hairlines, chip borders */
  padding-top: var(--crb-pad-top);
}
/* the window body is a flex column that scrolls: nothing in it may shrink */
.crb-report > * { flex-shrink: 0; }


/* ── import status ───────────────────────────────────────────────────── */
.crb-ib { flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 6px 5px 9px; border-radius: var(--r-md); background: var(--crb-ok-tint); border: 1px solid var(--crb-ok-line);
  font-size: 10.5px; color: var(--text-sub); animation: crb-fade 0.3s ease-out backwards; }
.crb-ib-ico { display: block; flex-shrink: 0; }
.crb-ib-what { font-weight: 700; color: var(--ok); cursor: default; }
.crb-ib-when { color: var(--text-dim); }
.crb-ib-stats { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.crb-ib-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--crb-ok-line); color: var(--text-sub); white-space: nowrap; cursor: default; line-height: 1.6; }
.crb-ib-stat b { color: var(--text); font-weight: 700; }
/* a zero count steps back so the counts that did something read first */
.crb-ib-stat.crb-zero { border-color: var(--crb-hair); color: var(--text-dim); }
.crb-ib-stat.crb-zero b { color: var(--text-dim); font-weight: 600; }
.crb-ib-stat.crb-warn { border-color: var(--crb-warn-line); background: var(--crb-warn-tint); }
.crb-ib-stat.crb-warn b { color: var(--warn); }

/* ── borrower cards: gauge | name + bureau chips ─────────────────────── */
.crb-bgrid { flex-shrink: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crb-bcard { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0;
  padding: 10px 16px 10px 10px; border: 1px solid var(--surface3); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  animation: crb-rise 0.34s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--crb-i, 0) * 50ms); }
.crb-gauge { width: 100px; height: 82px; cursor: default; }
.crb-gauge svg { display: block; overflow: visible; }
.crb-gnum { font-variant-numeric: tabular-nums; }
/* the arc rises to the score, the knob riding its tip, while the number counts
   up from 300 — crbCountUp() uses the same lead (150ms), stagger (120ms / card),
   length (1100ms) and quartic ease-out */
.crb-sweep { animation: crb-sweep 1.1s cubic-bezier(.25,1,.5,1) backwards; animation-delay: calc(var(--crb-i, 0) * 120ms + 150ms); }
/* the knob is drawn at the score; this group turns it back to the arc's start
   and lets it ride up — the gauge centre (50,50) of the 100×82 viewBox */
.crb-knob-ride { transform-box: view-box; transform-origin: 50% 60.9756%;
  animation: crb-ride 1.1s cubic-bezier(.25,1,.5,1) backwards; animation-delay: calc(var(--crb-i, 0) * 120ms + 150ms); }
.crb-knob { transform-box: fill-box; transform-origin: center;
  animation: crb-pop 0.22s ease-out backwards; animation-delay: calc(var(--crb-i, 0) * 120ms + 150ms); }

.crb-bmain { min-width: 0; }
.crb-bhead { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 9px; }
.crb-bpos { flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--accent); background: var(--accent-dim); border-radius: 6px; padding: 1px 6px; }
.crb-bname { min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--text); overflow-wrap: anywhere; }

.crb-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.crb-chip { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 9px;
  border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--crb-hair); cursor: default; }
.crb-chip-l { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap;
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.crb-chip-v { display: flex; align-items: center; gap: 4px; min-height: 18px;
  font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--text);
  font-variant-numeric: tabular-nums; }
/* no score: a flag (amber dash, dashed amber edge) */
.crb-chip-none { background: transparent; border: 1px dashed var(--crb-warn-line); }
.crb-chip-none .crb-chip-v { color: var(--warn); font-weight: 700; }
/* frozen: filled red tint and a lock */
.crb-chip-frozen { background: var(--crb-bad-tint); border-color: var(--crb-bad-line); }
.crb-chip-frozen .crb-chip-l, .crb-chip-frozen .crb-chip-v { color: var(--danger); }
/* the word Frozen (no score) is set small; a frozen file that still shows a score keeps the number size */
.crb-chip-v.crb-chip-word { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.crb-lock { display: block; flex-shrink: 0; }

/* ── KPI tiles ───────────────────────────────────────────────────────── */
.crb-kpis { flex-shrink: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.crb-kpi { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; width: 100%; margin: 0;
  padding: 8px 12px; border: 1px solid var(--surface3); border-radius: var(--r-lg); background: var(--surface);
  font: inherit; color: var(--text); text-align: left; letter-spacing: normal; text-transform: none;
  -webkit-appearance: none; appearance: none; cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, transform 0.15s;
  animation: crb-rise 0.36s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--crb-i, 0) * 26ms + 70ms); }
.crb-kpi.crb-link { cursor: pointer; }
.crb-kpi.crb-link:hover { border-color: rgba(26,93,173,0.38); box-shadow: 0 4px 14px rgba(16,24,40,0.07); transform: translateY(-1px); }
.crb-kpi.crb-link:active { transform: none; box-shadow: none; }
.crb-kpi:focus-visible { outline: 2px solid rgba(26,93,173,0.55); outline-offset: 2px; }
.crb-kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 20px; }
.crb-kpi-l { min-width: 0; font-size: 8.5px; font-weight: 700; line-height: 1.25; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); }
.crb-go { display: block; flex-shrink: 0; margin-left: auto; opacity: 0; transform: translateX(-3px); transition: opacity 0.15s, transform 0.15s; }
.crb-kpi:hover .crb-go, .crb-kpi:focus-visible .crb-go { opacity: 1; transform: none; }
.crb-kpi-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.crb-kpi-v { min-width: 0; font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* tone: a soft tint and a coloured number */
.crb-kpi.crb-warn { border-color: var(--crb-warn-line); background: var(--crb-warn-tint); }
.crb-kpi.crb-bad { border-color: var(--crb-bad-line); background: var(--crb-bad-tint); }
.crb-kpi.crb-warn .crb-kpi-v { color: var(--warn); }
.crb-kpi.crb-bad .crb-kpi-v { color: var(--danger); }
/* Revolving: the warning is about utilization, so the ring carries it and the account count stays neutral */
.crb-kpi.crb-vtone .crb-kpi-v { color: var(--text); }
.crb-kpi.crb-warn.crb-link:hover { border-color: rgba(180,83,9,0.42); }
.crb-kpi.crb-bad.crb-link:hover { border-color: rgba(192,57,43,0.42); }
.crb-kpi.crb-warn .crb-go path { stroke: var(--warn); }
.crb-kpi.crb-bad .crb-go path { stroke: var(--danger); }

/* revolving: utilization ring, drawn 1:1 (36px) and allowed 2px into the row's padding */
.crb-ring { display: block; flex-shrink: 0; overflow: visible; margin: -2px 0; }
.crb-ring text { font-variant-numeric: tabular-nums; }
.crb-ring-fill { animation: crb-sweep 0.9s cubic-bezier(.25,1,.5,1) 0.3s backwards; }

/* late payments: 30 / 60 / 90, each count over a bar that lights above zero —
   amber for 30, red for 60 and 90 (the tile's own tone rule) */
.crb-lates { display: inline-flex; align-items: flex-start; gap: 5px; }
.crb-lseg { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 18px; text-align: center; }
.crb-lseg b { font-weight: 800; color: var(--text-dim); }
.crb-lseg::after { content: ''; display: block; height: 3px; border-radius: 2px; background: var(--surface3);
  transform-origin: left center; animation: crb-grow 0.3s cubic-bezier(.22,.61,.36,1) 0.3s backwards; }
.crb-lsep { font-size: 15px; font-weight: 400; line-height: 22px; color: var(--surface3); }
.crb-l30.crb-on b { color: var(--warn); }
.crb-l30.crb-on::after { background: var(--crb-warn-fill); }
.crb-l60.crb-on b, .crb-l90.crb-on b { color: var(--danger); }
.crb-l60.crb-on::after, .crb-l90.crb-on::after { background: var(--crb-bad-fill); }

/* ── motion: once, on open — cards and tiles rise within ~0.5s, the score
   gauges rise over 1.1s (last card done by ~1.4s) ─────────────────────── */
@keyframes crb-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes crb-fade { from { opacity: 0; } }
@keyframes crb-sweep { from { stroke-dasharray: 0 200; } }
@keyframes crb-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes crb-ride { from { transform: rotate(var(--crb-rot, 0deg)); } }
@keyframes crb-grow { from { transform: scaleX(0); } }

/* ── the report tables below the summary ─────────────────────────────── */
/* section heads keep the app's look (base.css .sec-line stays an invisible spacer) */
.crb-report .sec-head { margin: 24px 0 4px; }

.crb-report table.grid.crv-table { border-collapse: separate; border-spacing: 0; }
/* header: quiet, sticky, the rule drawn on the cell so it stays when stuck;
   top = minus the body's top padding, so no row shows above a stuck header */
.crb-report table.grid.crv-table th { top: calc(-1 * var(--crb-pad-top)); z-index: 2; background: var(--surface); color: var(--text-dim);
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-align: left;
  padding: 6px 6px 5px; border-bottom: 1px solid var(--surface3); }
.crb-report table.grid.crv-table td { padding: 3px 6px; }
/* rows: white, hairline between; hover lays a light blue over any row tone */
.crb-report table.grid.crv-table tbody td { height: 25px; background: var(--surface); border-bottom: 1px solid var(--crb-hair); }
.crb-report table.grid.crv-table tbody tr:hover td { background-image: linear-gradient(rgba(26,93,173,0.06), rgba(26,93,173,0.06)); }
/* closed / paid history recedes, still readable (--text-dim) */
.crb-report table.grid.crv-table tbody tr.crv-closed td { color: var(--text-dim); }
/* derogatory rows: a soft red band — no red edge or rule (the rows are small) */
.crb-report table.grid.crv-table tbody tr.crv-bad td { background-color: var(--crb-bad-tint); }

/* money reads right-aligned: tradelines Balance · Payment · Limit / High · Past Due */
.crb-report #crv-trades + table.crv-table th:nth-child(8), .crb-report #crv-trades + table.crv-table td:nth-child(8),
.crb-report #crv-trades + table.crv-table th:nth-child(9), .crb-report #crv-trades + table.crv-table td:nth-child(9),
.crb-report #crv-trades + table.crv-table th:nth-child(10), .crb-report #crv-trades + table.crv-table td:nth-child(10),
.crb-report #crv-trades + table.crv-table th:nth-child(13), .crb-report #crv-trades + table.crv-table td:nth-child(13),
/* derogatory Balance · Past Due · Charge-off; public records Amount; inquiries Days before report */
.crb-report #crv-derog + table.crv-table th:nth-child(5), .crb-report #crv-derog + table.crv-table td:nth-child(5),
.crb-report #crv-derog + table.crv-table th:nth-child(6), .crb-report #crv-derog + table.crv-table td:nth-child(6),
.crb-report #crv-derog + table.crv-table th:nth-child(7), .crb-report #crv-derog + table.crv-table td:nth-child(7),
.crb-report #crv-public + table.crv-table th:nth-child(5), .crb-report #crv-public + table.crv-table td:nth-child(5),
.crb-report #crv-inq + table.crv-table th:nth-child(2), .crb-report #crv-inq + table.crv-table td:nth-child(2) { text-align: right; }
/* open balances bold; a closed account's balance does not */
.crb-report #crv-trades + table.crv-table td:nth-child(8) { font-weight: 600; }
.crb-report #crv-trades + table.crv-table tr.crv-closed td:nth-child(8) { font-weight: 400; }
/* a long creditor name wraps instead of pushing the 13 columns past the window */
.crb-report #crv-trades + table.crv-table td:nth-child(3) { white-space: normal; }
/* the short tables pack to their content: the spare width goes to the last
   column (Late Payments: to "When", the column that wraps) */
.crb-report :is(#crv-derog, #crv-public, #crv-inq) + table.crv-table th:last-child,
.crb-report #crv-late + table.crv-table th:nth-child(5) { width: 100%; }

/* late-date chips: 30 amber, 60 red, 90+ red with a firm edge — one family with the Late payments tile */
.crb-report .crv-late { padding: 0 5px; border-radius: 5px; font-size: 9.5px; font-weight: 600; line-height: 16px;
  background: var(--crb-warn-tint); border: 1px solid var(--crb-warn-line); color: var(--warn); }
.crb-report .crv-late.mid { background: var(--crb-bad-tint); border-color: var(--crb-bad-line); color: var(--danger); }
.crb-report .crv-late.bad { background: var(--crb-bad-tint); border-color: var(--crb-bad-fill); color: var(--danger); font-weight: 700; }
.crb-report .crv-late small { font-size: 8px; font-weight: 700; opacity: 0.72; }
.crb-report .crv-late-dates { margin: 3px 0 1px; justify-content: flex-start; gap: 3px; }
.crb-report .crv-late-dates .crv-late { font-size: 8.5px; padding: 0 4px; line-height: 14px; border-radius: 4px; }

/* addresses on file: frameless like the tables — the borrower as a header row,
   then flag | address | source on hairlines */
.crb-report .crv-addrs { gap: 0; margin-top: 0; }
.crb-report .crv-addr-who { display: flex; align-items: center; gap: 6px; padding: 4px 6px 5px; border-bottom: 1px solid var(--surface3); }
.crb-report .crv-addr { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 4px 6px; border-bottom: 1px solid var(--crb-hair); }
.crb-report .crv-addr > .tag { justify-self: start; }
.crb-report .crv-addr > .muted { font-size: 9.5px; text-align: right; }

/* alerts: frameless rows on hairlines, adverse ones in the red band */
.crb-report .crv-alerts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--surface3); }
.crb-report .crv-alerts li { padding: 4px 6px; border-bottom: 1px solid var(--crb-hair); }
.crb-report .crv-alerts li > .muted:first-child { display: inline-block; min-width: 34px; font-size: 9px; font-weight: 700; }
.crb-report .crv-alerts li.crv-bad { background: var(--crb-bad-tint); color: var(--danger); }

/* ── narrow windows ──────────────────────────────────────────────────── */
/* too narrow for the 13 columns: tighter cells, and each table scrolls sideways
   inside itself, so the window body (and the summary above) never does. The
   header then stays at the top of its table instead of sticking to the window. */
@media (max-width: 1000px) {
  .crb-report table.grid.crv-table th, .crb-report table.grid.crv-table td { padding-left: 5px; padding-right: 5px; }
  .crb-report table.grid.crv-table { display: block; overflow-x: auto; }
  .crb-report :is(#crv-derog, #crv-public, #crv-inq) + table.crv-table th:last-child,
  .crb-report #crv-late + table.crv-table th:nth-child(5) { width: auto; }
  /* a content-sized table would squeeze the wrapping Remarks to a word per line */
  .crb-report #crv-derog + table.crv-table td:last-child { min-width: 200px; }
}
@media (max-width: 900px) {
  .crb-bgrid { grid-template-columns: minmax(0, 1fr); }
  .crb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .crb-ib-stats { margin-left: 0; }
  .crb-report .crv-addr { grid-template-columns: auto minmax(0, 1fr); }
  .crb-report .crv-addr > .muted { grid-column: 2; text-align: left; }
}
@media (max-width: 460px) {
  .crb-bcard { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 10px 12px 12px; }
  .crb-bmain { width: 100%; }
  .crb-bhead { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .crb-ib, .crb-bcard, .crb-kpi, .crb-sweep, .crb-knob, .crb-knob-ride, .crb-ring-fill, .crb-lseg::after { animation: none !important; }
  .crb-kpi, .crb-go { transition: none; }
  .crb-kpi.crb-link:hover { transform: none; }
}

/* ── credit refresh window (credit-refresh-view.js) in the same style ──
   8 KPI tiles in 4 columns; its side-by-side table keeps the import-review
   cues, which the .crb-report table rules would otherwise override */
.crb-kpis.crb-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crb-report table.grid.rf-table th.imp-side, .crb-report table.grid.rf-table th.rf-c { text-align: center; }
.crb-report table.grid.rf-table th.rf-r { text-align: right; }
.crb-report table.grid.rf-table th.imp-side { color: var(--accent); font-size: 8.5px; border-bottom: 2px solid var(--accent-dim); }
/* two header rows: only the column row sticks, so the two never stack on each other */
.crb-report table.grid.rf-table thead tr:first-child th { position: static; }
.crb-report table.grid.rf-table tbody td.imp-act { background-color: var(--surface2); }
.crb-report table.grid.rf-table tbody td.imp-chg { background-color: #fffbeb; color: #92400e; font-weight: 700; }
.crb-report table.grid.rf-table tbody tr.rf-new td { background-color: #f6fef9; }
.crb-report table.grid.rf-table tbody td.imp-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(148,163,184,0.10) 6px 12px); }
.crb-report table.grid.rf-table .rf-grp { border-left: 2px solid var(--surface3); }
@media (max-width: 900px) { .crb-kpis.crb-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* borrower matched to the 1003 by order only (credit-result.js matchBorrowers) */
.crb-bcheck { flex-shrink: 0; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5;
  color: var(--warn); background: var(--crb-warn-tint); border: 1px solid var(--crb-warn-line); border-radius: 5px; padding: 0 6px; cursor: default; }

/* Import to 1003 review (credit-report-view.js openImportCompare) */
.imp-table th.imp-side { text-align: center; font-size: 8.5px; color: var(--accent); border-bottom: 2px solid var(--accent-dim); }
.imp-table td.num { text-align: right; }
.imp-table td.imp-cred { text-align: left; }
.imp-table td.imp-act { text-align: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface2); }
.imp-table td.imp-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(148,163,184,0.10) 6px 12px); }
.imp-table td.imp-chg { background: #fffbeb; color: #92400e; font-weight: 700; }
.imp-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; white-space: nowrap; cursor: default; }
.imp-badge.upd { color: #0369a1; border-color: #7dd3fc; background: #e0f2fe; }
.imp-badge.add { color: #15803d; border-color: #86efac; background: #ecfdf3; }
.imp-badge.del { color: #b91c1c; border-color: #f3c2c2; background: #fdecec; }
.imp-badge.nr { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.imp-badge.keep { color: #6b7280; border-color: #d5d9e2; background: #f1f3f7; }
.imp-table tr.imp-keep td { color: var(--text-dim); }
/* credit refresh: before → now */
.rf-table td.num { text-align: right; white-space: nowrap; }
.rf-arrow { color: var(--text-dim); font-size: 9px; margin: 0 1px; }
.rf-d { display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 999px; font-size: 8.5px; font-weight: 700; }
.rf-d.up { color: #b42318; background: #fdecec; }
.rf-d.down { color: #15803d; background: #ecfdf3; }
.rf-table tr.rf-new td { background: #f6fef9; }
.rf-table tr.rf-dropped td, .rf-table tr.rf-same td { color: var(--text-dim); }
.rf-table .rf-grp { border-left: 2px solid var(--border); }
/* the table takes the width its columns need, not the whole window */
table.grid.rf-table { width: auto; }
.rf-table th.rf-c, .rf-table td.rf-c { text-align: center; }
.rf-table th.rf-r { text-align: right; }
.rf-table td.imp-cred { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-skipped { margin-top: 10px; font-size: 10px; color: var(--text-dim); }
.imp-skipped summary { cursor: pointer; }
.cr-tile.cr-orderable { cursor: pointer; }
.cr-tile.cr-orderable:hover { border-color: var(--accent); box-shadow: 0 1px 8px rgba(26,93,173,0.18); }

/* QC sections: vendors stacked on the left, the result on the right */
/* QC page tabs — the same bar as Doc Prep's (.docprep .dtabs), which scopes
   its own copy; the QC page carries its own so the two stay independent */
.qc-page .dtabs {
  display: flex; gap: 2px; box-shadow: inset 0 -2px 0 var(--border-mid);
  background: var(--bg); margin: 0 0 4px; padding-top: 2px;
}
.qc-page .dtab {
  border: none; background: none; cursor: pointer;
  padding: 8px 18px 7px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-sub); border-bottom: 2px solid transparent;
}
.qc-page .dtab:hover { color: var(--text); background: var(--surface2); }
.qc-page .dtab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* phones: the tab row slides sideways (no scrollbar) instead of widening the page */
@media (max-width: 760px) {
  .qc-page .dtabs { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .qc-page .dtabs::-webkit-scrollbar { display: none; }
  .qc-page .dtab { flex-shrink: 0; white-space: nowrap; padding: 8px 12px 7px; font-size: 12px; }
}
/* QC page sections stack: vendors across the top, the recorded result under
   them, the order history last — each row spaced from the next */
.qc-stack { display: flex; flex-direction: column; gap: 20px; margin-top: 14px; }
.qc-stack .qc-row > .card { margin: 0; }
.qc-stack .qc-row .cr-orders { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
/* the tab names the section, so the head row is just its actions */
/* result cards sit full width now: keep each half of the card stacking its
   rows (auto-fill would spread all four onto one line and crowd the badges) */
.qc-stack .qc-row .cols2 .erows { grid-template-columns: minmax(0, 1fr); }
.qc-stack .qc-row .erow .lbl { width: 108px; }
/* a row's own head: title, rule, then whatever actions that row owns */
.qc-stack .qc-row > .sec-head { margin: 0 0 7px; }
.qc-none { border: 1px dashed var(--border-mid); border-radius: var(--radius); padding: 14px; text-align: center; font-size: 10.5px; color: var(--text-dim); }

/* the vendor shown at the top of the Vendor Setup window */
.vs-vendor .cr-order-vendorbox { flex: none; border-right: 0; padding-right: 0; align-items: center; }
/* a received credit order opens its Report Data window from anywhere on the box */
.cr-order.cr-order-open { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cr-order.cr-order-open:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(26,86,160,0.10); }
/* credit report: a tile jump marks its section title with a highlighter stroke
   that sweeps in from the left, holds, then fades */
.crv-flash { position: relative; z-index: 0; }
.crv-type.crv-flash { display: inline-block; }
.crv-flash::before {
  content: ''; position: absolute; z-index: -1; left: -4px; right: -4px; top: 12%; bottom: 8%;
  background: rgba(253, 224, 71, 0.75); border-radius: 3px;
  transform-origin: left center; animation: crv-flash 1.6s ease-out forwards;
}
@keyframes crv-flash {
  0%   { transform: scaleX(0); opacity: 1; }
  30%  { transform: scaleX(1); opacity: 1; }
  65%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .crv-flash::before { animation-duration: .01s; } }
.crv-late-dates { margin: 2px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 104px; white-space: normal; }
.crv-late-dates .crv-late { font-size: 8.5px; padding: 0 4px; border-radius: 4px; }
/* QC order window: drop zone for the signed 4506-C / SSA-89 */
.qc-drop { border: 1.5px dashed var(--border-mid, #cfd6e4); border-radius: 8px; padding: 16px 12px; text-align: center; font-size: 11px; color: var(--text-dim); cursor: pointer; background: #fafbfd; }
.qc-drop:hover, .qc-drop.over { border-color: var(--accent); background: #eef4fc; color: var(--text); }
.qc-drop.has-file { border-style: solid; border-color: #86efac; background: #f6fef9; color: var(--text); padding: 8px 10px; }
.qc-drop .qc-drop-file { display: flex; align-items: center; justify-content: center; gap: 8px; }
.qc-drop .qc-drop-file[hidden], .qc-drop .qc-drop-empty[hidden] { display: none; }
.qc-drop u { color: var(--accent); }

/* credit supplement: the request builder in the order window, and the list on the order */
.supp-box { display: flex; flex-direction: column; gap: 6px; }
.supp-h { font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.supp-item { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); }
.supp-row { display: flex; gap: 6px; align-items: center; }
.supp-row .supp-kind-sel { flex: 0 0 200px; }
.supp-row .supp-trade { flex: 1 1 auto; min-width: 0; }
.supp-free { display: flex; gap: 6px; }
.supp-free input { flex: 1 1 0; min-width: 0; }
.supp-item select, .supp-item input { font-size: 10.5px; }
ol.supp-list { margin: 4px 0 2px; padding-left: 18px; font-size: 10px; color: var(--text-sub); }
ol.supp-list li { margin: 1px 0; }
.supp-kind { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 8.5px; font-weight: 700; color: #0369a1; background: #e0f2fe; }

/* Revised LE dialog (Doc Prep): changed circumstance + charges it resets */
.rle-list { display: flex; flex-direction: column; gap: 4px; }
.rle-basis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.rle-basis .rle-what { color: var(--text-sub); flex: 1; min-width: 120px; }
.rle-basis .none { font-size: 10px; }
.rle-basis.rle-late { opacity: 0.55; cursor: not-allowed; }
.rle-tbl { width: 100%; table-layout: fixed; }
.rle-tbl td { font-size: 10.5px; vertical-align: middle; }
.rle-tbl td.num { text-align: right; }
.rle-tbl .tag { font-size: 9.5px; }
.le-poc { margin-left: 4px; font-size: 9px; white-space: nowrap; flex-shrink: 0; }

/* ── page to page: Pipeline ⇄ a loan (desktop). Only the loan's side menu
   moves: it unfolds from under the logo cell on the way in and folds back up
   into it on the way out. The logo cell — the menu's top, identical to the
   header's logo cell on the other pages (nav.js: 180px, logo centred) — shows
   the whole time, and the page itself swaps at once. nav.js lets only these
   navigations (and one loan to another) animate. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .side { view-transition-name: los-side; }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-new(los-side):only-child { animation: los-side-in .34s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-old(los-side):only-child { animation: los-side-out .28s cubic-bezier(.4,0,.6,1) both; }
@keyframes los-side-in { from { clip-path: inset(0 0 calc(100% - var(--nav-h, 54px)) 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes los-side-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 calc(100% - var(--nav-h, 54px)) 0); } }
/* the loan menu waits for the role (no broker glimpses lender items): once
   pruned it fades in, inside the unfolding panel or after it */
#sideMenu { opacity: 0; }
body.menu-ready #sideMenu { opacity: 1; transition: opacity .22s ease; }