/* 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;
  /* 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 { display: block; min-width: 0; }
label.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); }
input.saving { border-color: var(--c-app); }
input.saved, select.saved, textarea.saved { border-color: var(--c-income); transition: border-color 1.2s; }
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;
}
.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: #ab8b2a; }
/* 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); }
.warning-card.is-cleared { 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 { 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 { opacity: 0.65; filter: blur(1px); }
.warning-card.cond-waking.is-awake { 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, .warning-card.cond-dimming { 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; }
/* every card reads the same on any screen: line 1 is the badges (category,
   party, docs) with the actions on the right; the condition text always
   starts on its own line below, at one consistent left edge */
.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-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; }

/* 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; }

/* 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-dates { border-left: none; border-top: 1px solid var(--border); }
  .cond-dates .dcell { flex: 1 1 0; width: auto; }
  .cu-file-row { flex-wrap: wrap; }
}

/* 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; }
.decl-edit .decl-sub td { background: #fbfcfe; padding: 4px 8px; text-align: left; }
.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); }
.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; }
.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; }
.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; }
}

/* 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-dim);
  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)); }
.reo-m-grp { font-size: 9px; 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 { content: ''; flex: 1; height: 1px; background: var(--border); }
.reo-m-grp.first { margin-top: 0; }
.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-dim) !important; }

/* drag-to-reorder grips on entity grid rows */
.row-drag { cursor: grab; }
.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-dim); 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-dim); }

/* 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-dim); 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; }
/* required-but-missing view rows: light red, red label, reason on hover;
   outranks the stripe and the hover tint */
.vrows > .vrow.req-missing, .vrows > .vrow.req-missing:nth-child(odd of .vrow) { background: #fdecec; }
.vrows > .vrow.req-missing:hover { background: #fadfdf; }
.vrow.req-missing .lbl { color: var(--c-suspend); }
.vrow.req-missing .val { color: var(--c-suspend); }
/* required-but-missing table rows (liabilities: payment, REO link): the whole
   row is pink, the offending cell carries the reason on hover */
table.grid tr.req-row td, table.grid tbody tr.req-row:nth-child(even) td { background: #fdecec !important; }
/* 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: 700; cursor: help; }
/* 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; }

/* 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; }
.erow .lbl {
  width: 148px; flex-shrink: 0;
  font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-dim);
  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); }
.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-dim);
  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; }

/* 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: #9aa3b5 !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: #9aa3b5 !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: help; }
.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: help; }
.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-dim); }
.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; }
.reo-card .rc-loan-none { display: block; color: var(--text-dim); font-style: italic; }
@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; } }
.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; }

/* 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-dim); }
.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; }
.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-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; padding: 5px 0; border-top: 1px dashed rgba(0,0,0,.08); font-size: 11px; }
.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: #9ca3af; 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 gauge */
/* red box like the violet Broker Changes box; green once the 1003 is complete */
.uh-card[hidden] { display: none; }
.uh-done { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: #15803d;
  max-height: 60px; overflow: hidden; transition: opacity .5s, max-height .5s, padding .5s, margin .5s; animation: uhPop .35s ease-out; }
.uh-done svg { width: 16px; height: 16px; fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.uh-done.uh-leave { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
@keyframes uhPop { from { transform: scale(.97); opacity: .4; } }
.uh-card { --uh-c: #d97706; --uh-bg: #fef3c7; border: 1px solid #fbbf24; border-left: 4px solid #d97706; border-radius: 10px; background: #fef3c7; padding: 10px 14px; margin-bottom: 12px; }
.uh-card.uh-full { --uh-c: #22c55e; --uh-bg: #f0fdf4; border-color: #86efac; border-left-color: #22c55e; background: #f0fdf4; }
.uh-card .uh-title { color: #92400e; }
.uh-card.uh-full .uh-title { color: #15803d; }
.uh-card .uh-bar { background: #fff; box-shadow: inset 0 0 0 1px #fbbf24; }
.uh-card:not(.uh-full) .uh-fill { background: linear-gradient(90deg, #fbbf24, #d97706); }
.uh-card.uh-low .uh-fill { background: linear-gradient(90deg, #f87171, #dc2626); }
/* below 80%: the pink box (not ready to register) */
.uh-card.uh-low { background: #fdecec; border-color: #f3c2c2; border-left-color: #ef4444; }
.uh-card.uh-low .uh-title, .uh-card.uh-low .uh-pct { color: #b91c1c; }
.uh-card.uh-low .uh-bar { box-shadow: inset 0 0 0 1px #f3c2c2; }
.uh-card.uh-low .uh-miss { color: #b91c1c; border-color: #f87171; }
.uh-card.uh-low .uh-miss:hover { background: #fbd5d5; border-color: #ef4444; }
.uh-card .uh-miss { background: #fff; }
.uh-top { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.uh-title { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.uh-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.uh-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--uh-c) 55%, #fff), var(--uh-c)); transition: width .6s cubic-bezier(.3,.7,.3,1); }
.uh-pct { font-size: 15px; font-weight: 800; color: #92400e; min-width: 44px; text-align: right; }
.uh-count { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.uh-missing { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.uh-miss { font: inherit; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; cursor: pointer; background: #fffbeb; color: #92400e; border: 1px solid #f59e0b; }
.uh-miss:hover { background: #fde68a; border-color: #d97706; }
/* the row a missing item points at: darker red edge, pink running through it */
.uh-focus, .vrows > .vrow.uh-focus, .vrows > .vrow.req-missing.uh-focus, .decl-missing.uh-focus, tr.uh-focus > td {
  box-shadow: inset 0 0 0 1.5px #ef4444; border-radius: 6px;
  background-color: #fdecec !important;
  background-image: linear-gradient(90deg, rgba(252,165,165,0) 0%, rgba(252,165,165,0) 25%, rgba(252,165,165,.55) 50%, rgba(252,165,165,0) 75%, rgba(252,165,165,0) 100%) !important;
  background-size: 250% 100% !important; background-repeat: no-repeat !important;
  animation: uhSweep 2.4s ease-in-out 2; }
tr.uh-focus > td { border-radius: 0; box-shadow: inset 0 1.5px 0 #dc2626, inset 0 -1.5px 0 #dc2626; }
@keyframes uhSweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .uh-focus { animation: none; } }
/* declarations the borrower has not answered */
.bname-missing { background: #fdecec; color: var(--c-suspend); padding: 1px 6px; border-radius: 5px; cursor: help; }
.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); }
.decl-all { display: flex; flex-direction: column; gap: 2px; }
.decl-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10.5px; padding: 4px 8px; border-radius: 5px; }
.decl-all .decl-q:nth-child(odd):not(.decl-missing) { background: var(--surface2); }
.decl-a { font-weight: 700; white-space: nowrap; }
.decl-a.yes { color: var(--c-suspend); }
.decl-a.no { color: var(--text-sub); }
.decl-missing-list { display: flex; flex-direction: column; gap: 2px; }
.decl-missing { font-size: 10.5px; padding: 4px 8px; border-radius: 5px; background: #fdecec; color: var(--c-suspend); cursor: help; }
@media (max-width: 640px) { .uh-title { display: none; } }
/* 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-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.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); }
.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-subject { font-size: 10px; margin: -2px 0 14px; }
.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); }
.ap-steps { display: flex; align-items: flex-start; margin: 10px 0 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.ap-step { flex: 1; min-width: 78px; position: relative; text-align: center; padding-top: 2px; }
.ap-step::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--surface3); }
.ap-step:first-child::before { left: 50%; }
.ap-step:last-child::before { right: 50%; }
.ap-step.done::before { background: var(--brand-green, #2eb552); }
.ap-step.cur::before { background: linear-gradient(90deg, var(--brand-green, #2eb552) 50%, var(--surface3) 50%); }
.ap-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; margin: 0 auto; border: 2px solid var(--surface3); background: #fff;
  font-size: 9px; line-height: 12px; color: #fff; font-weight: 700; z-index: 1; }
.ap-step.done .ap-dot { background: var(--brand-green, #2eb552); border-color: var(--brand-green, #2eb552); }
.ap-step.cur .ap-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(26,93,173,0.18); }
.ap-lbl { font-size: 9px; font-weight: 600; color: var(--text-dim); margin-top: 4px; line-height: 1.2; }
.ap-step.cur .ap-lbl { color: var(--accent); }
.ap-step.done .ap-lbl { color: var(--text); }
.ap-sub { font-size: 8.5px; color: var(--text-dim); margin-top: 1px; min-height: 11px; }
.ap-step.cur .ap-sub, .ap-step.todo .ap-sub { color: var(--accent); font-weight: 600; }
.ap-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 16px; padding: 4px 0; }
.ap-fact { display: flex; gap: 8px; font-size: 10px; min-width: 0; }
.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 { 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-files { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-file { font-size: 9.5px; font-weight: 600; color: var(--accent); background: rgba(26,93,173,0.07); border: 1px solid rgba(26,93,173,0.2);
  border-radius: 999px; padding: 2px 9px; text-decoration: none; }
.ap-file:hover { background: rgba(26,93,173,0.14); text-decoration: none; }
.ap-attach { display: inline-flex; gap: 2px; margin-left: auto; }
.ap-tl-toggle { border: 0; background: transparent; color: var(--text-dim); font: 600 9.5px 'Inter', system-ui, sans-serif; cursor: pointer; padding: 6px 0; text-align: left; }
.ap-tl-toggle:hover { color: var(--accent); }
.ap-tl-row { display: flex; gap: 8px; align-items: baseline; font-size: 10px; flex-wrap: wrap; }
.ap-tl-when { font-size: 9px; color: var(--text-dim); flex-shrink: 0; width: 118px; }
.ap-tl-what { flex: 1; min-width: 160px; white-space: pre-line; }
.ap-tl-by { font-size: 9px; flex-shrink: 0; }
.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-typedesc { font-size: 9.5px; margin-top: 6px; min-height: 13px; }
.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); }
/* appraisal upload window */
.ap-drop-sm { padding: 18px 16px; margin-bottom: 10px; }
table.ap-stage td { font-size: 10px; vertical-align: middle; }
table.ap-stage td.ap-stage-name { max-width: 240px; 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-upload-row { display: flex; align-items: flex-end; gap: 10px; }
.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-kind { width: 190px; flex-shrink: 0; }
.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-doc-folder { width: 190px; padding: 3px 8px; font-size: 10px; }
.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-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.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-name { font-size: 10.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.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; }
@media (max-width: 640px) { .ap-tx-grid { grid-template-columns: 1fr; } }
/* 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 timeline: the Disc/LE/CD timeline's line and circles —
   a grey rail with a blue→green fill, 15px check circles (iTrust blue,
   broker green); rows drop in and the line grows each time it's opened */
.ap-tl { position: relative; margin: 6px 0 8px 2px; padding: 2px 0 2px 26px; display: flex; flex-direction: column; gap: 4px; }
.ap-tl::before { content: ''; position: absolute; left: 6.5px; top: 10px; bottom: 10px; width: 2px; background: var(--border-mid); border-radius: 999px; }
.ap-tl-fill { position: absolute; left: 6.5px; width: 2px; height: 0; border-radius: 999px; z-index: 0; background: #22c55e; }
.ap-tl-row { position: relative; min-height: 26px; align-items: center; }
.ap-tl-dot { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border-mid); background: #fff;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.ap-tl-dot svg { width: 8px; height: 8px; stroke: #fff; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ap-tl-dot.lender { background: #22c55e; border-color: #22c55e; }
.ap-tl-dot.broker { background: #22c55e; border-color: #22c55e; }
.ap-tl.ap-tl-anim::before { transform-origin: top; animation: apTlLine calc(var(--n, 10) * 70ms + 250ms) cubic-bezier(.4,0,.2,1) both; }
.ap-tl.ap-tl-anim .ap-tl-row { animation: apTlRow 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
.ap-tl.ap-tl-anim .ap-tl-dot { animation: apTlPop 0.3s ease-out both; animation-delay: calc(var(--i, 0) * 70ms + 90ms); }
@keyframes apTlLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes apTlRow { from { opacity: 0; transform: translateY(-8px); } }
@keyframes apTlPop { from { opacity: 0; transform: translateY(-50%) scale(0.3); } to { transform: translateY(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ap-tl.ap-tl-anim::before, .ap-tl.ap-tl-anim .ap-tl-row, .ap-tl.ap-tl-anim .ap-tl-dot { animation: none; } }
/* 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-seller { 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; }
/* 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; }
.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-sec { margin: 12px 0 2px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.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; }
.ab-form .ab-bad { border-color: var(--c-suspend) !important; background: rgba(192,57,43,0.05); }
/* 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: 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; }
/* 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-box { min-width: 0; }
.qr-box .val { 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); }
.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); }
/* 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); }