* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* neutral ramp — cool grey, low chroma.
     n-500 is --muted: it sits on --n-100 chips all over the app and measured
     4.26:1 there, i.e. under AA everywhere at once. 4.66 now. */
  --n-0:#ffffff; --n-25:#fcfcfd; --n-50:#f8f8fa; --n-100:#f1f1f4;
  --n-150:#e8e8ed; --n-200:#dedee5; --n-300:#c6c6d0; --n-400:#9a9aa8;
  --n-500:#6b6b78; --n-600:#54545f; --n-700:#3d3d46; --n-900:#1c1c22;

  /* brand — deep steel blue. 6.7:1 against white, so white text on a primary
     button clears AA with room, and it reads financial rather than startup. */
  --brand-50:#eff3fc; --brand-100:#dde6f9; --brand-200:#b9cbf2;
  --brand-500:#2352c9; --brand-600:#1c43a8; --brand-700:#163585;

  --bg: var(--n-50);
  --surface: var(--n-0);
  --border: var(--n-150);
  --border-strong: var(--n-200);
  --text: var(--n-900);
  --muted: var(--n-500);
  --primary: var(--brand-500);
  --primary-dark: var(--brand-700);
  /* Text that sits ON --primary. brand.js recomputes this from the org's
     whitelabel colour; these are the defaults for our own blue. */
  --on-primary: #ffffff;

  --green:#117c59; --green-bg:#e8f5f0;
  --amber:#9a6206; --amber-bg:#fdf3e3;
  --red:#b3261e;   --red-bg:#fdeceb;

  /* Never overridden in dark mode. For bands and chips that are meant to stay
     dark with white text on them — reaching for a text token here is what put
     white on white. */
  --ink-band: #1c1c22;

  --radius: 13px;
  --radius-lg: 20px;
  --radius-sm: 10px;

  /* Signature accent — a vivid teal that picks up the tail of the brand
     gradient, for highlights, active states and personality beyond the blue. */
  --accent:#0d9488; --accent-bg:#d9f2ee;

  /* Layered elevation — a crisp near shadow plus a soft, wider far one, so
     cards read as lifted rather than outlined. */
  --sh-1: 0 1px 2px rgba(20,18,35,.05), 0 1px 3px rgba(20,18,35,.05);
  --sh-2: 0 4px 12px -2px rgba(20,18,35,.10), 0 2px 6px -3px rgba(20,18,35,.07);
  --sh-3: 0 24px 50px -14px rgba(20,18,35,.20), 0 8px 20px -8px rgba(20,18,35,.10);
  /* A 1px top-highlight on card surfaces — subtle 'lit from above' finish. */
  --surface-hi: rgba(255,255,255,.7);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}

body {
  font-family: "Inter", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","tnum";
}

/* type scale — headings get tighter tracking, numbers align */
h1,h2,h3,h4 { line-height: 1.18; letter-spacing: -0.018em; font-weight: 680; }
h1 { letter-spacing: -0.032em; font-weight: 720; }
.num, .stat .value, .kpi .value, .bar-value, .calc-big { font-variant-numeric: tabular-nums; }

/* icons sit on the text baseline instead of floating */
.icn { flex-shrink: 0; vertical-align: -0.18em; }

/* One consistent, visible focus ring for keyboard users — a soft brand halo
   rather than the browser's default outline. Mouse clicks don't trigger it. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
.brand span { color: var(--text); font-weight: 400; }

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.topbar nav a.active, .topbar nav a:hover { color: var(--primary-dark); background: var(--brand-50); }
.topbar nav a { transition: background .12s, color .12s; }

.container { max-width: 1400px; margin: 0 auto; padding: 20px 24px 60px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--sh-1);
}
.stat .label { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.stat .value { font-size: 25px; font-weight: 680; margin-top: 3px; letter-spacing: -0.02em; }

/* View toggle */
.view-toggle { margin-bottom: 14px; }
.toggle {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 8px 15px;
  cursor: pointer;
  font-size: 13px; font-weight: 550;
  color: var(--muted);
}
.toggle:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.toggle:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.toggle.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Board */
.board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}
.column {
  min-width: 240px;
  width: 240px;
  flex-shrink: 0;
  background: var(--n-100);
  border-radius: var(--radius);
  padding: 10px;
}
.column h3 {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--n-600);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.column h3 .count { background: var(--n-0); border: 1px solid var(--border); border-radius: 5px; padding: 1px 7px; font-size: 11px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
/* position: the landed ring is an absolutely-positioned ::after on this. */
.card { position: relative; box-shadow: var(--sh-1); transition: box-shadow .15s, border-color .15s, transform .15s; }
.card:hover { box-shadow: var(--sh-2); border-color: var(--border-strong); transform: translateY(-1px); }
.card .name { font-weight: 600; }
.card .loan-num { color: var(--muted); font-size: 12px; }
.card .amount { font-weight: 600; margin-top: 6px; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.card .badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .005em;
}
.badge.open-cond { background: var(--amber-bg); color: var(--amber); }
.badge.docs { background: var(--brand-50); color: var(--primary-dark); }
.badge.purpose { background: var(--n-100); color: var(--muted); }
/* Unread team-chat messages on this loan — a live green so it reads as "someone
   is waiting on you here", distinct from the neutral count/doc badges. */
.badge.chat-unread {
  background: var(--green-bg, #e7f7ee); color: var(--green, #1a8f4c);
  display: inline-flex; align-items: center; gap: 4px;
}
.badge.chat-unread svg { width: 11px; height: 11px; }

/* The one-thing-to-do banner at the top of an open loan. Colour carries the
   urgency; the button on the right is the fix, one tap away. */
.next-action {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.4;
  border: 1px solid transparent;
}
.next-action .na-ico { display: inline-flex; flex: 0 0 auto; }
.next-action .na-text { flex: 1 1 auto; }
.next-action.overdue { background: var(--red-bg, #fdecec); color: var(--red, #c0392b); border-color: color-mix(in srgb, var(--red, #c0392b) 25%, transparent); }
.next-action.soon    { background: var(--amber-bg, #fff5e6); color: var(--amber, #9a6a00); border-color: color-mix(in srgb, var(--amber, #9a6a00) 25%, transparent); }
.next-action .na-text b { font-weight: 800; }
.next-action-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px;
  text-decoration: none; white-space: nowrap;
  background: var(--primary); color: var(--on-primary, #fff);
}
.next-action-btn:hover { filter: brightness(1.05); }
.next-action-btn svg { width: 14px; height: 14px; }
/* The borrower picked an option from the presentation you shared — a win worth
   surfacing at the top of the file, in the green the pipeline uses for "done". */
.picked-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.4; text-decoration: none;
  background: var(--green-bg, #eafaf0);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green, #16a34a) 28%, transparent);
  transition: filter .12s ease, transform .12s ease;
}
.picked-banner:hover { filter: brightness(1.02); transform: translateY(-1px); }
.picked-banner .pk-ico { display: inline-flex; flex: 0 0 auto; }
.picked-banner .pk-text { flex: 1 1 auto; }
.picked-banner .pk-text b { font-weight: 800; }
.picked-banner svg:last-child { flex: 0 0 auto; opacity: .7; }
[data-theme="dark"] .picked-banner {
  background: color-mix(in srgb, var(--green, #16a34a) 16%, transparent);
  color: #7ee2a8;
}
/* On a phone the reason and the button fight over one row. Let the button drop
   to its own full-width line below the text — a proper tap target, not a sliver. */
@media (max-width: 640px) {
  .next-action { flex-wrap: wrap; }
  .next-action-btn { flex: 1 1 100%; justify-content: center; margin-top: 6px; padding: 10px 14px; }
}

/* Submit-to-lender chooser overlay */
.lender-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 20, .45); padding: 20px;
}
.lender-sheet {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: min(460px, 100%); max-height: 82vh; overflow: auto; box-shadow: var(--sh-3, 0 24px 60px -20px rgba(0,0,0,.4)); padding: 20px 22px;
}
.lender-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lender-head b { font-size: 16px; }
.lender-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.lender-x:hover { background: var(--n-100); color: var(--text); }
.lender-sub { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; }
.lender-list { display: flex; flex-direction: column; gap: 8px; }
.lender-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  cursor: pointer; font-size: 14px; text-align: left; color: var(--text);
}
.lender-row:hover { border-color: var(--primary); background: var(--brand-50, rgba(35,82,201,.06)); }
.lender-row:disabled { opacity: .5; cursor: default; }
.lender-name { font-weight: 650; }
.lender-go { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-weight: 700; font-size: 12.5px; white-space: nowrap; }

/* Filled variant of the pill button, for the primary action in an overlay */
.mini-btn.primary { background: var(--primary); color: #fff; }
.mini-btn.primary:hover { background: var(--primary-dark, var(--primary)); }

/* SmartFees preview — the estimated location fees before they hit the sheet */
.fee-lines { display: flex; flex-direction: column; }
.fee-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.fee-label { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text); }
.fee-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.fee-est { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.fee-amt { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.fee-total { border-bottom: 0; border-top: 2px solid var(--border); margin-top: 2px; padding-top: 11px; font-size: 15px; }
.fee-total .fee-label, .fee-total .fee-amt { font-weight: 800; }
.fee-disc { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; }

/* Automation rule builder (Settings) */
.auto-rule { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.auto-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.auto-rule-head .auto-name { flex: 1 1 160px; min-width: 120px; }
.auto-when { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.auto-active-lbl { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.auto-del { background: none; border: 0; color: var(--red); cursor: pointer; font-size: 12.5px; text-decoration: underline; }
.auto-acts { display: flex; flex-direction: column; gap: 6px; }
.auto-act { display: flex; align-items: center; gap: 6px; }
.auto-act input, .auto-act select { flex: 1 1 auto; }
.auto-act-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); width: 74px; }
.a-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.a-del:hover { color: var(--red); }
.auto-add-acts { display: flex; gap: 6px; margin-top: 8px; }

/* List view */
.list-view table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sh-1); }
.list-view th, .list-view td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.list-view th { background: var(--n-25); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid var(--border-strong); }
.list-view tr:hover td { background: var(--n-25); cursor: pointer; }

/* Drawer */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,18,35,.38); backdrop-filter: blur(2px);
  z-index: 30;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 95vw);
  background: var(--surface);
  z-index: 31;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(20,18,35,.16);
  padding: 24px 28px 60px;
}
.drawer .close-btn {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted);
}
.drawer h2 { font-size: 20px; margin-bottom: 2px; }
.drawer .sub { color: var(--muted); margin-bottom: 16px; }

.milestone-bar {
  display: flex; gap: 4px; margin: 14px 0 22px; flex-wrap: wrap;
  position: relative; align-items: center;
}
/* The rail sits behind the chips and carries the progress. --ms-progress is
   written on the bar in app.js. */
.ms-rail {
  position: absolute; left: 6px; right: 6px; top: 50%;
  height: 3px; transform: translateY(-50%);
  background: var(--n-150); border-radius: 999px; z-index: 0;
}
.ms-rail i {
  display: block; height: 100%; width: var(--ms-progress, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-700), var(--primary));
  transition: width .85s cubic-bezier(.22, 1, .36, 1);
}
/* The head of the fill — a pip that travels to the new stage. */
.ms-rail::after {
  content: ''; position: absolute; top: 50%; left: var(--ms-progress, 0%);
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--brand-50);
  transition: left .85s cubic-bezier(.22, 1, .36, 1);
}
.milestone-step {
  position: relative; z-index: 1;
  font-size: 11.5px; font-weight: 550;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  background: var(--n-100);
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .12s, transform .2s cubic-bezier(.22,1,.36,1);
}
.milestone-step.done { background: var(--green-bg); color: var(--green); }
.milestone-step.current {
  background: var(--primary); color: var(--on-primary); font-weight: 600;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px var(--primary);
}
.milestone-step:hover { border-color: var(--primary); }

/* When a file actually advances, the new stage lands rather than just
   recolouring. Applied by setMilestone, removed when the animation ends. */
.milestone-step.just-moved { animation: ms-land .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes ms-land {
  0%   { transform: translateY(-1px) scale(1); }
  35%  { transform: translateY(-3px) scale(1.09); }
  100% { transform: translateY(-1px) scale(1); }
}

/* A dropped card is a new element in a different column, so it would otherwise
   just blink into existence. This is the only thing on the board that moves,
   which is what makes it findable. */
/* .card already carries `animation: rise` further down the file, and at equal
   specificity the later rule wins — so this has to out-specify it. */
.card.card-landed { animation: card-land .62s cubic-bezier(.22, 1, .36, 1); }
@keyframes card-land {
  0%   { transform: translateY(-9px) scale(1.035); box-shadow: 0 16px 30px -12px rgba(35,82,201,.55); }
  60%  { transform: translateY(1px) scale(.997); }
  100% { transform: none; box-shadow: var(--sh-1); }
}
/* A ring that fades rather than a colour that stays — the highlight should not
   still be there thirty seconds later pretending to be a status. */
.card.card-landed::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  border: 2px solid var(--primary); pointer-events: none;
  animation: card-ring .9s ease-out forwards;
}
@keyframes card-ring {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-rail i, .ms-rail::after { transition: none; }
  .milestone-step.just-moved,
  .card.card-landed, .card.card-landed::after { animation: none; }
}

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.kpi { background: var(--n-25); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
.kpi .label { font-size: 11px; color: var(--muted); font-weight: 600; }
.kpi .value { font-size: 19px; font-weight: 680; margin-top: 3px; letter-spacing: -0.015em; }
.kpi .value.warn { color: var(--amber); }
.kpi .value.bad { color: var(--red); }
.kpi .value.good { color: var(--green); }

/* Every tab stays on screen. A sideways scroll hid the last few behind an
   edge with no affordance, so the strip wraps instead. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 5;
}
.tab {
  background: none; border: none; padding: 9px 13px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.tab .tab-count {
  font-size: 10.5px; font-weight: 800; line-height: 1;
  background: var(--n-150); color: var(--muted); border-radius: 999px; padding: 3px 6px;
}
.tab.active .tab-count { background: var(--primary); color: var(--on-primary); }
.tab .tab-count.alert { background: var(--red-bg); color: var(--red); }
.tab.active .tab-count.alert { background: var(--red); color: #fff; }

/* A bare "needs attention" marker for tabs that have no number to show. */
.tab-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  display: inline-block; flex: none;
}

/* ---------- the "More" tab menu ----------
   Fifteen tabs wrapped onto three rows. Six stay out; the rest live here.
   The row must never wrap again, so it scrolls sideways on a narrow window
   rather than growing a second line. */
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.tab-more { position: relative; flex: none; margin-left: auto; }
.tab-more-btn { gap: 6px; }
.tab-more[data-open="true"] .tab-more-btn { color: var(--text); }
.tab-chev { transition: transform .16s; opacity: .7; }
.tab-more[data-open="true"] .tab-chev { transform: rotate(180deg); }

.tab-menu {
  /* Fixed, not absolute: the parent .tabs has overflow-x:auto (so the tab row
     scrolls instead of wrapping), which also clips an absolute dropdown hanging
     below the row — it opened but never painted. Fixed escapes the clip; JS
     sets top/right from the button on open. Same fix as .nav-more-menu. */
  position: fixed; z-index: 120;
  min-width: 208px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-3);
  display: none; flex-direction: column;
}
.tab-more[data-open="true"] .tab-menu { display: flex; }
.tab-menu-item {
  width: 100%; justify-content: flex-start; border-bottom: 0 !important;
  border-radius: var(--radius-sm); padding: 9px 11px;
}
.tab-menu-item:hover { background: var(--n-50); }
.tab-menu-item.active { background: var(--brand-50); color: var(--primary-dark); }
/* The count sits at the far end of the row, not jammed against the label. */
.tab-menu-item .tab-count,
.tab-menu-item .tab-dot { margin-left: auto; }

/* ---------- the loan-file action overflow ---------- */
.act-more { position: relative; display: inline-flex; }
.act-more[data-open="true"] .tab-chev { transform: rotate(180deg); }
.act-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-3);
  display: none; flex-direction: column;
}
.act-more[data-open="true"] .act-menu { display: flex; }
.act-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer; text-align: left; text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
}
.act-item:hover:not(:disabled) { background: var(--n-50); }
.act-item:disabled { opacity: .45; cursor: not-allowed; }

/* The assignment control is a different kind of thing to the buttons beside
   it, so give it its own end of the row instead of letting it wrap. */
/* This was never a flex row — the buttons were inline-block and simply wrapped
   like text, three lines deep. Making it a real row is what lets the overflow
   menu do its job. */
.drawer-actions {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
}
.drawer-actions > .mini-btn,
.drawer-actions .act-more-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.drawer-actions .assign-label { margin-left: auto; white-space: nowrap; }
@media (max-width: 860px) {
  .drawer-actions { flex-wrap: wrap; }
  .drawer-actions .assign-label { margin-left: 0; }
}

.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.field { padding: 6px 0; border-bottom: 1px dashed var(--n-150); }
.field .label { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.field .value { font-weight: 500; }

.item-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; background: var(--n-25);
}
.item-row .desc { flex: 1; margin-right: 12px; }
.item-row .desc .cat { font-size: 11px; color: var(--muted); }
.status-select { padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font-size: 12px; background: var(--surface); cursor: pointer; }

.status-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.status-pill.Open, .status-pill.Needed { background: var(--red-bg); color: var(--red); }
.status-pill.Submitted, .status-pill.Received { background: var(--amber-bg); color: var(--amber); }
.status-pill.Cleared, .status-pill.Reviewed { background: var(--green-bg); color: var(--green); }

.add-row { display: flex; gap: 8px; margin-top: 12px; }
.add-row input, .add-row select { flex: 1; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); }
.add-row input:focus, .add-row select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-100); }
.add-row select { flex: 0 0 160px; }

button.primary, .primary-pill, .ai-btn, .outline-pill, .cta-primary, .cta-secondary, .cta-light {
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}
button.primary:active, .primary-pill:active, .ai-btn:active, .outline-pill:active { transform: translateY(1px); }
button.primary {
  background: var(--primary); color: #fff; border: none;
  padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 600; font-size: 13px;
  /* A faint top sheen + a soft brand-tinted shadow give the primary action
     real depth instead of a flat fill. */
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  box-shadow: 0 1px 2px rgba(20,18,35,.14), 0 4px 12px -3px color-mix(in srgb, var(--primary) 45%, transparent);
}
button.primary:hover { background-color: var(--brand-600); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20,18,35,.16), 0 8px 18px -4px color-mix(in srgb, var(--primary) 55%, transparent); }

.note { background: var(--n-50); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.note .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

.history-item { padding: 6px 0; border-bottom: 1px dashed var(--n-150); display: flex; justify-content: space-between; }
.history-item .when { color: var(--muted); font-size: 12px; }

/* Application form */
.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  max-width: 860px; margin: 0 auto; padding: 28px 32px;
}
.form-card h1 { font-size: 22px; margin-bottom: 4px; }
.form-card .sub { color: var(--muted); margin-bottom: 24px; }
.form-section { margin-bottom: 26px; }
.form-section h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--primary-dark); border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin-bottom: 14px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.form-grid input, .form-grid select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.form-grid input:focus, .form-grid select:focus { outline: 2px solid var(--brand-200); border-color: var(--primary); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.success-box {
  background: var(--green-bg); border: 1px solid var(--green); color: var(--green);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; font-weight: 600;
}

@media (max-width: 720px) {
  .section-grid, .form-grid, .kpis { grid-template-columns: 1fr; }
}

/* ---------- Borrower POS (wizard + portal) ---------- */
.pos-body { background: linear-gradient(180deg, var(--brand-50) 0%, #f4f6f9 40%); min-height: 100vh; }
.wizard-wrap { display: flex; justify-content: center; padding: 40px 20px 80px; }
.wizard-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 640px; padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(20, 40, 70, 0.06);
}
.wizard-card h1 { font-size: 24px; margin: 18px 0 6px; }
.wizard-card .sub { color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.card-h { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

.progress-track { height: 6px; background: var(--n-150); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s; }
.progress-label { font-size: 12px; color: var(--muted); margin-top: 6px; }

.resume-banner {
  background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: 8px;
  padding: 10px 14px; margin-top: 14px; font-size: 13px; color: var(--primary-dark);
}
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; text-decoration: underline; font-size: 13px; }

.fields { margin-top: 18px; }
.wfield { margin-bottom: 14px; }
.wfield label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.wfield input, .wfield textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 16px;
  background: var(--surface); color: var(--text); font-family: inherit;
}
.wfield textarea { resize: vertical; min-height: 64px; font-size: 14px; }
.wfield input:focus, .wfield textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-200)66;
}

.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.choice {
  text-align: left; padding: 18px 20px; font-size: 17px; background: var(--surface);
  border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.12s;
}
.choice:hover { border-color: var(--primary); background: #f4f8fd; }
.choice.selected { border-color: var(--primary); background: var(--brand-50); font-weight: 600; }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
button.ghost { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 10px; }
button.ghost:hover { color: var(--text); }
button.primary.big { padding: 12px 26px; font-size: 14.5px; border-radius: var(--radius); }
button.primary.sm { padding: 5px 12px; font-size: 12px; }
.btn-link { display: inline-block; text-decoration: none; margin-top: 10px; }

.warn-box {
  background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber);
  border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 13px;
}
.warn-box.ok-box { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.warn-box.ok-box p { margin: 6px 0 10px; color: inherit; opacity: .85; }

/* ---------- document files ---------- */
.doc-block {
  border-bottom: 1px solid var(--border); padding: 12px 8px;
  border-radius: 8px; transition: background .12s, box-shadow .12s;
}
.doc-block.drop-target { background: var(--brand-100); box-shadow: inset 0 0 0 2px var(--primary); }
.file-list { margin-top: 8px; padding-left: 6px; display: flex; flex-direction: column; gap: 4px; }
.file-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--n-50); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px;
}
.file-ico { display: inline-flex; color: var(--muted); flex: 0 0 auto; }
.file-name {
  font-weight: 600; color: var(--primary-dark); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.file-name:hover { text-decoration: underline; }
.file-row .cat { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.link-btn:disabled { opacity: .6; cursor: default; }
.share-doc-wrap + .share-doc-wrap { margin-top: 8px; }

/* ---------- external document sharing ---------- */
.share-form { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--n-50); }
.share-picks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px;
  max-height: 240px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); padding: 6px;
}
.share-pick-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
.share-pick-row:hover { background: var(--n-100); }
.share-pick-row .cat { margin-left: auto; font-size: 11px; color: var(--muted); }
.share-pick-row input { flex: 0 0 auto; }

.val-strip {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--n-50);
}
.val-strip strong { font-size: 17px; }
.val-strip .cat { font-size: 11.5px; color: var(--muted); }
.val-ico { display: inline-flex; padding: 7px; border-radius: 8px; background: var(--brand-100); color: var(--primary-dark); }

/* ---------- equity / refi opportunities ---------- */
.opp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.opp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.opp-nums {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-top: 14px;
}
.opp-nums div {
  background: var(--n-50); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
}
.opp-nums span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.opp-nums strong { font-size: 16px; }
.opp-nums strong.good { color: var(--green); }
.opp-why { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.opp-why li { margin: 3px 0; }

/* ---------- commission reconciliation ---------- */
.fund-grid { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fund-head, .fund-row {
  display: grid; grid-template-columns: minmax(150px, 1.4fr) 1fr 1fr;
  gap: 12px; align-items: center; padding: 9px 14px;
}
.fund-head {
  background: var(--n-100); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.fund-row + .fund-row, .fund-row.total { border-top: 1px solid var(--border); }
.fund-row.total { background: var(--n-50); font-weight: 700; }
.fund-label { font-size: 13px; }
.fund-label em { color: var(--muted); font-size: 11.5px; font-style: normal; }
.fund-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fund-input {
  width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
}
.fund-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.fund-dollars { font-size: 12px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.fund-dollars.neg, .fund-net em.neg { color: var(--red); }
.fund-net { font-size: 14px; }
.fund-net em { display: block; font-size: 11.5px; font-weight: 600; font-style: normal; }

/* the public read-only page */
.share-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.share-doc {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.share-doc-ico { display: inline-flex; border-radius: 8px; padding: 6px; }
.share-doc-ico.ok { background: var(--green-bg); color: var(--green); }
.share-doc-ico.wait { background: var(--amber-bg); color: var(--amber); }
.share-doc-name { font-weight: 600; flex: 1; min-width: 0; }

.trid-box {
  background: var(--amber-bg); border: 1px solid var(--amber); border-radius: 8px;
  padding: 14px 16px; margin-top: 18px; font-size: 13px; line-height: 1.5;
}
.trid-box.complete { background: var(--green-bg); border-color: var(--green); }

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 14px; }

.submit-done { text-align: center; padding: 20px 0; }
.big-check {
  width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%;
  background: var(--green-bg); color: var(--green); font-size: 34px; line-height: 64px; font-weight: 700;
}

/* portal */
.status-now { font-size: 16px; margin: 14px 0 18px; }
.timeline { display: flex; flex-wrap: wrap; gap: 0; }
.tl-step { flex: 1; min-width: 90px; text-align: center; position: relative; padding-top: 4px; }
.tl-step::before {
  content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 3px; background: var(--n-150);
}
.tl-step:first-child::before { display: none; }
.tl-step.done::before, .tl-step.current::before { background: var(--green); }
.tl-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--n-150);
  margin: 0 auto; position: relative; z-index: 1; border: 3px solid var(--surface);
}
.tl-step.done .tl-dot { background: var(--green); }
.tl-step.current .tl-dot { background: var(--primary); box-shadow: 0 0 0 4px var(--brand-200)88; }
.tl-label { font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.25; }
.tl-step.current .tl-label { color: var(--primary-dark); font-weight: 700; }

.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.portal-grid .wizard-card { max-width: none; padding: 22px 24px; }
.task-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--n-150); font-size: 13.5px;
}
.pill-count { background: var(--primary); color: #fff; border-radius: 10px; padding: 1px 9px; font-size: 12px; }

@media (max-width: 720px) {
  .portal-grid, .review-grid { grid-template-columns: 1fr; }
  .wizard-card { padding: 24px 20px; }
}

/* ---------- Homepage ---------- */
.home-body { background: var(--surface); }
.home-topbar { border-bottom: 1px solid var(--border); }
.nav-team { opacity: 0.75; }

.hero { background: linear-gradient(180deg, var(--brand-50) 0%, #ffffff 100%); padding: 72px 24px 80px; }
.hero-inner {
  max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
}
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 14px;
}
.hero-copy h1 { font-size: 46px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; }
.hero-copy p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 480px; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cta-primary {
  display: inline-block; background: var(--primary); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(35, 82, 201, 0.3);
}
.cta-primary:hover { background: var(--primary-dark); }
.cta-primary.xl { font-size: 17px; padding: 18px 34px; border-radius: 999px; }
.cta-secondary {
  display: inline-block; color: var(--primary-dark); text-decoration: none; font-weight: 600;
  font-size: 15px; padding: 14px 24px; border-radius: 999px; border: 2px solid var(--primary); color: var(--primary-dark); background: var(--surface);
}
.cta-secondary:hover { background: var(--brand-50); }
.hero-trust { margin-top: 22px; font-size: 12.5px; color: var(--muted); }

.hero-visual { display: flex; justify-content: center; }
.mock-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 28px; width: 100%; max-width: 400px;
  box-shadow: 0 16px 44px rgba(20, 40, 70, 0.13);
}
.mock-status { font-size: 15px; margin-bottom: 18px; }
.mock-track { display: flex; align-items: center; margin-bottom: 20px; }
.mock-dot { width: 12px; height: 12px; border-radius: 50%; background: #dfe6ee; flex-shrink: 0; }
.mock-dot.done { background: var(--green); }
.mock-dot.current { background: var(--primary); box-shadow: 0 0 0 5px var(--brand-200)77; }
.mock-line { height: 3px; flex: 1; background: #dfe6ee; }
.mock-line.done { background: var(--green); }
.mock-row {
  display: flex; justify-content: space-between; font-size: 13.5px;
  padding: 9px 0; border-bottom: 1px dashed var(--n-150);
}
.mock-row.muted { color: var(--muted); }
.mock-ok { color: var(--green); font-weight: 700; font-size: 12px; }
.mock-todo { color: var(--amber); font-weight: 700; font-size: 12px; }

.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.router { padding: 30px 0 10px; }
.router .section-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.route-card {
  display: block; text-decoration: none; color: var(--text); cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 14px; padding: 26px;
  background: var(--surface); transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.route-card:hover { border-color: var(--primary); }
.route-card:hover { box-shadow: 0 8px 24px rgba(20, 40, 70, 0.1); transform: translateY(-2px); }
.route-icon { font-size: 28px; margin-bottom: 12px; }
.route-card h3 { font-size: 17px; margin-bottom: 8px; }
.route-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.route-link { color: var(--primary); font-weight: 700; text-decoration: none; font-size: 14px; }
.route-link:hover { text-decoration: underline; }

.how { padding: 64px 0 24px; }
.how h2, .why h2 { font-size: 26px; letter-spacing: -0.01em; margin-bottom: 26px; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.how-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand-50); color: var(--primary-dark);
  font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.how-step h4 { font-size: 15px; margin-bottom: 6px; }
.how-step p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.why { padding: 48px 0 24px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why-card { background: var(--n-50); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
.why-card h4 { font-size: 14.5px; margin-bottom: 6px; }
.why-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.bottom-cta { text-align: center; padding: 72px 0; }
.bottom-cta h2 { font-size: 30px; margin-bottom: 10px; }
.bottom-cta p { color: var(--muted); margin-bottom: 24px; }

.home-footer { border-top: 1px solid var(--border); padding: 28px 0 40px; background: var(--n-50); }
.home-footer p { font-size: 12px; color: var(--muted); margin-top: 10px; max-width: 720px; line-height: 1.55; }
.home-footer a { color: var(--muted); }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 34px; }
  .router .section-inner, .how-grid, .why-grid { grid-template-columns: 1fr; }
}

/* ---------- payment calculator ---------- */
.calc { padding: 56px 0 40px; background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%); }
.calc-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.calc-copy h2 { font-size: 26px; margin-bottom: 8px; }
.calc-copy > p { color: var(--muted); margin-bottom: 26px; line-height: 1.55; }
.calc-field { margin-bottom: 20px; }
.calc-label { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.calc-label span { color: var(--muted); font-weight: 600; }
.calc-field input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: var(--n-200); outline: none;
}
.calc-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(20,40,70,0.3); cursor: pointer;
}
.calc-result {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 30px; box-shadow: 0 12px 36px rgba(20, 40, 70, 0.1);
}
.calc-big { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.calc-big span { font-size: 18px; font-weight: 600; color: var(--muted); }
.calc-line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--n-150); font-size: 13.5px; }
.calc-line span { color: var(--muted); }
.calc-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

/* ---------- chat / messages ---------- */
.chat-card { grid-column: 1 / -1; }
.chat-thread { max-height: 300px; overflow-y: auto; padding: 4px 2px; margin-bottom: 12px; }
.bubble-row { display: flex; margin-bottom: 10px; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
  max-width: 75%; background: var(--n-100); border-radius: 14px 14px 14px 4px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.45;
}
.bubble-row.mine .bubble { background: #2352c9; color: #fff; border-radius: 14px 14px 4px 14px; }
.bubble-row.mine .bubble .bubble-meta { color: #dcd2f2; }
.bubble.team { background: #2352c9; color: #fff; }
.bubble.team .bubble-meta { color: #dcd2f2; }
.bubble-meta { font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.chat-send { display: flex; gap: 8px; }
.chat-send input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; }
.chat-send input:focus { outline: none; border-color: var(--primary); }

/* ---------- pipeline bar + search ---------- */
.pipeline-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.pipeline-bar .view-toggle { margin-bottom: 0; }
.search-box {
  flex: 1; max-width: 380px; padding: 9px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 13.5px; background: var(--surface);
}
.search-box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-200)55; }
.stale-days { color: var(--amber); font-weight: 700; }

.drawer-actions { margin-bottom: 14px; }
.mini-btn {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--primary-dark);
  background: var(--surface); border: 2px solid var(--primary); border-radius: 999px;
  padding: 7px 16px; text-decoration: none;
}
.mini-btn:hover { background: var(--brand-100); }

@media (max-width: 860px) {
  .calc-inner { grid-template-columns: 1fr; }
}

/* ---------- auth, team, broker band ---------- */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--n-100); border: 2px solid transparent; border-radius: 999px; color: var(--muted);
}
.auth-tab.active { background: var(--brand-50); border-color: var(--primary); color: var(--primary-dark); }

.user-chip {
  font-size: 12px; font-weight: 700; color: var(--primary-dark);
  background: var(--brand-50); border-radius: 14px; padding: 5px 12px; margin-right: 6px;
}

.danger-btn {
  background: var(--surface); border: 2px solid var(--red-bg); color: var(--red);
  padding: 6px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.danger-btn:hover { background: var(--red-bg); }

.copy-row { display: flex; gap: 8px; }
.copy-row input {
  flex: 1; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 13.5px; background: var(--n-50); color: var(--primary-dark); font-weight: 600;
}

/* --n-900 is the TEXT token: it flips to near-white in dark mode, which turned
   this whole band white-with-white-text on for-borrowers and pricing. --ink-band
   is deliberately never inverted, only lifted a little so it still separates
   from the page. Same trap as --panel-dark on the landing page. */
.broker-band { background: var(--ink-band); color: #fff; padding: 56px 0; }
.broker-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.broker-band h2 { font-size: 28px; margin-bottom: 10px; }
.broker-band p { color: #c6cede; line-height: 1.6; max-width: 560px; }
.cta-light {
  display: inline-block; background: #fff; color: var(--ink-band); text-decoration: none;
  font-weight: 800; font-size: 16px; padding: 16px 30px; border-radius: 999px; white-space: nowrap;
}
.cta-light:hover { background: var(--brand-50); }

.assign-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-left: 12px; }

/* ---------- workspace actions + create modal ---------- */
.actions-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ai-btn {
  background: var(--n-900); color: #fff; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--sh-1);
}
.ai-btn:hover { background: var(--n-700); }
.outline-pill {
  background: var(--surface); color: var(--text); cursor: pointer;
  border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--sh-1);
}
.outline-pill:hover { background: var(--n-50); border-color: var(--n-300); }

.create-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 94vw); background: var(--surface); border-radius: 16px;
  padding: 28px 30px; z-index: 40; box-shadow: 0 20px 60px rgba(20, 10, 50, 0.3);
  /* The manual-entry form is taller than a laptop screen. Without a cap it
     overflows top and bottom and the Create button lands below the fold, out
     of reach. Cap to the viewport and scroll inside. */
  max-height: 90vh; overflow-y: auto;
}
.create-modal h2 { font-size: 20px; margin-bottom: 6px; }
.create-modal .modal-sub { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
.create-modal textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 13.5px; font-family: inherit; resize: vertical;
}
.create-modal textarea:focus { outline: none; border-color: var(--primary); }
.create-modal .close-btn {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted);
}

/* ---------- shared staff chrome ---------- */
.staff-topbar { height: 64px; padding: 0 22px; gap: 16px; }
.nav-left { display: flex; align-items: center; gap: 22px; min-width: 0; flex: 0 1 auto; }
.staff-topbar .brand { text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.staff-nav { display: flex; gap: 2px; flex-shrink: 0; }
.staff-nav a {
  color: var(--muted); text-decoration: none; font-weight: 550; font-size: 14px;
  padding: 7px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; transition: all .12s;
}
.staff-nav a:hover { color: var(--primary-dark); background: var(--brand-50); }
.staff-nav a.active { color: var(--primary-dark); background: var(--brand-50); }

.nav-right { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.nav-search { position: relative; flex: 0 1 300px; min-width: 0; }
.nav-search input {
  width: 100%; padding: 8px 14px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--n-50);
}
.nav-search input:focus { outline: none; border-color: var(--primary); background: #fff; }
.global-results {
  position: absolute; top: 44px; right: 0; width: 340px; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 10, 50, 0.16); overflow: hidden;
}
.gr-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.gr-item:last-child { border-bottom: none; }
.gr-item:hover { background: var(--brand-50); }
.gr-item span { color: var(--muted); font-size: 12px; }
.gr-empty { padding: 14px; color: var(--muted); font-size: 13px; }

.nav-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 700;
}
.nav-icon:hover { background: var(--brand-50); color: var(--primary-dark); }

.org-chip { position: relative; cursor: pointer; min-width: 0; flex-shrink: 1; }
.org-chip > span {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--n-50); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 7px 11px; white-space: nowrap; max-width: 200px; min-width: 0;
}
.org-menu {
  display: none; position: absolute; top: 42px; right: 0; width: 230px; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 10, 50, 0.16); overflow: hidden;
}
.org-chip.open .org-menu { display: block; }
.org-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; }
.org-menu-head span { color: var(--muted); }
.org-menu a {
  display: block; padding: 10px 14px; text-decoration: none; color: var(--text);
  font-size: 13.5px; font-weight: 600;
}
.org-menu a:hover { background: var(--brand-50); color: var(--primary-dark); }

.page-title { font-size: 34px; letter-spacing: -0.035em; font-weight: 740; margin-bottom: 4px; }
.page-sub { color: var(--muted); margin-bottom: 20px; }
.section-h { font-size: 16px; margin-bottom: 10px; }

/* ---------- panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--sh-1), inset 0 1px 0 var(--surface-hi);
}
.panel-h { font-size: 16px; margin-bottom: 4px; }
.panel-sub { color: var(--muted); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.panel-link { display: inline-block; margin-top: 10px; color: var(--primary); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.panel-link:hover { text-decoration: underline; }
.empty-note { color: var(--muted); padding: 16px; text-align: center; }

/* Dashboard nudge: leads the broker promised to call back. Amber so it reads as
   "do this", and it's a whole clickable panel straight to the leads list. */
/* "Example" badge on the seeded onboarding loan */
.example-badge {
  display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 6px; padding: 2px 7px; margin-left: 8px;
}
.example-note {
  font-size: 12.5px; color: var(--muted); margin: 6px 0 0;
}
.example-note .link-btn { background: none; border: 0; color: var(--primary); cursor: pointer; text-decoration: underline; font-size: 12.5px; font-weight: 600; padding: 0; }

/* First-run welcome card (dashboard onboarding) */
.welcome-card {
  position: relative; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--sh-1);
}
.welcome-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.welcome-x:hover { background: var(--n-100); color: var(--text); }
.welcome-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding-right: 24px; }
.welcome-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: var(--grad-brand, var(--primary)); }
.welcome-head h2 { font-size: 19px; letter-spacing: -.01em; margin: 2px 0 4px; }
.welcome-head p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0; }
.welcome-steps { display: grid; gap: 8px; }
.welcome-step {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: var(--surface);
  transition: border-color .15s, transform .15s;
}
.welcome-step:hover { border-color: var(--primary); transform: translateX(2px); }
.welcome-step .ws-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.welcome-step div { flex: 1; min-width: 0; }
.welcome-step strong { display: block; font-size: 14px; }
.welcome-step span { font-size: 12.5px; color: var(--muted); }
.welcome-step svg { flex: 0 0 auto; color: var(--muted); }
.welcome-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.welcome-foot .link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12.5px; text-decoration: underline; padding: 4px; }
.welcome-foot .link-btn:hover { color: var(--text); }

.followups-cta {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  border-color: color-mix(in srgb, var(--amber, #c98a00) 40%, var(--border));
  background: color-mix(in srgb, var(--amber, #c98a00) 8%, var(--surface));
}
.followups-cta:hover { background: color-mix(in srgb, var(--amber, #c98a00) 14%, var(--surface)); }
.followups-cta .fu-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--amber, #c98a00) 18%, transparent); color: var(--amber, #c98a00);
}
.followups-cta .fu-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.followups-cta .fu-body strong { color: var(--text); font-size: 15px; }
.followups-cta .fu-body span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.followups-cta .fu-go { flex: 0 0 auto; color: var(--muted); display: inline-flex; }
.followups-cta:hover .fu-go { color: var(--amber, #c98a00); }

/* ---------- dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.checklist-progress { height: 8px; background: #e6e2f2; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.checklist-progress div { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }
.checklist-count { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.check-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
  text-decoration: none; color: var(--text); font-size: 13.5px;
}
.check-row:hover { border-color: var(--primary); }
.check-row.done { background: var(--green-bg); border-color: var(--green-bg); }
.check-box {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-weight: 800; font-size: 12px; color: #fff;
}
.check-row.done .check-box { background: var(--green); border-color: var(--green); }
.check-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.quick-links { display: flex; flex-direction: column; gap: 8px; }
.ql {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text);
}
.ql:hover { border-color: var(--primary); background: var(--brand-50); }
.ql-icon { font-size: 20px; }
.ql strong { display: block; font-size: 14px; }
.ql span { color: var(--muted); font-size: 12.5px; }

.mini-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-left: 4px solid var(--muted); border-radius: 8px;
  background: var(--n-25); margin-bottom: 6px; text-decoration: none; color: var(--text); font-size: 13.5px;
}
.mini-row.sev3 { border-left-color: var(--red); }
.mini-row.sev2 { border-left-color: var(--amber); }
.mini-row.sev1 { border-left-color: var(--primary); }
.mini-row:hover { background: var(--brand-50); }
.mini-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mini-txt { min-width: 0; }
.mini-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.mini-av.av-sev3 { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.mini-av.av-sev2 { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.mini-av.av-sev1 { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.mini-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.mini-more { color: var(--muted); font-size: 12.5px; padding: 6px 2px; }

.help-list { display: flex; flex-direction: column; gap: 6px; }
.help-list a { color: var(--primary); font-size: 13.5px; text-decoration: none; font-weight: 600; }
.help-list a:hover { text-decoration: underline; }

/* ---------- reports ---------- */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* 120px clipped "Conditional Approval", the longest milestone name. */
.bar-row { display: grid; grid-template-columns: minmax(80px, 152px) minmax(60px, 1fr) minmax(72px, auto); gap: 10px; align-items: center; padding: 5px 0; }
.bar-label { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 18px; background: var(--n-100); border-radius: 5px; overflow: hidden; min-width: 40px; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 5px; transition: width .3s ease-out; }
.bar-value { font-size: 12.5px; font-weight: 650; text-align: right; white-space: nowrap; }
.kv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--n-150); font-size: 13.5px; }
.kv-row span { color: var(--muted); }
.kv-row.total { border-bottom: 2px solid var(--border); }
.kv-row .pos { color: var(--green); }
.kv-row .neg { color: var(--red); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th, .mini-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.mini-table th { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.report-note { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* ---------- settings + help ---------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.steps { margin: 0 0 8px 18px; font-size: 13.5px; line-height: 1.75; }
.steps ul { margin: 4px 0 4px 16px; }
.help-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; background: var(--brand-50); border-radius: 8px; padding: 10px 12px; }
.help-note a { color: var(--primary); }

/* ---------- loan status chips ---------- */
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 4px 10px; border-radius: 6px; border: 1px solid transparent;
}
.status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.st-intake { background: var(--brand-50); color: var(--brand-700); }
.st-processing { background: var(--n-100); color: var(--n-600); }
.st-uw { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bg); }
.st-cond { background: var(--brand-50); color: var(--brand-600); }
.st-ctc { background: var(--green-bg); color: var(--green); }
.st-closing { background: var(--brand-50); color: var(--brand-700); }
.st-funded { background: var(--green-bg); color: var(--green); font-weight: 650; }
.loan-id { font-weight: 700; color: var(--primary-dark); }

/* ---------- filters ---------- */
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer; font-weight: 550;
}
.filter-pill:focus { outline: none; border-color: var(--primary); }
.archived-toggle {
  display: inline-flex; align-items: center; gap: 7px; user-select: none;
}
.archived-toggle input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.primary-pill {
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--sh-1);
}
.primary-pill:hover { background: var(--primary-dark); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

@media (max-width: 1320px) { .nav-search { display: none; } .pal-trigger { width: 160px; } }
@media (max-width: 1150px) {
  .pal-trigger span, .pal-trigger kbd { display: none; }
  .pal-trigger { width: auto; padding: 8px 10px; }
}
@media (max-width: 1150px) {
  .staff-nav a { padding: 7px 9px; font-size: 13.5px; gap: 6px; }
  .nav-left { gap: 14px; }
  .staff-topbar { gap: 10px; padding: 0 16px; }
}
@media (max-width: 980px) {
  .staff-nav a span { display: none; }
  .staff-nav a { padding: 8px 10px; }
  .staff-nav a .icn { color: var(--n-500); }
}
@media (max-width: 900px) {
  .dash-grid, .report-grid, .settings-grid, .help-grid, .form-2col { grid-template-columns: 1fr; }
  .staff-nav a { padding: 8px 9px; font-size: 13px; }
  .org-chip > span { max-width: 130px; }
  .staff-topbar { padding: 0 14px; gap: 8px; }
  .nav-left { gap: 12px; }
}
@media (max-width: 640px) {
  .staff-topbar .brand { display: none; }
  /* Taller tap targets on a phone — vertical padding costs no horizontal room,
     so the icons stay in one row but become a comfortable ~44px to touch. */
  .staff-nav a, .nav-more-btn, .nav-icon { padding-top: 12px; padding-bottom: 12px; }
}
/* The borrower-facing topbar (portal, apply, home) is a fixed 56px row with
   20px margins between links. On a 390px phone that overflows, "My Loan"
   wraps to a second line, and because the row height is fixed the second line
   lands on top of "Home" and "Apply". Tighten the spacing and forbid the wrap
   — these are the pages a borrower actually opens on a phone. */
@media (max-width: 560px) {
  .topbar { padding: 0 14px; }
  .topbar .brand { font-size: 17px; }
  .topbar nav { display: flex; gap: 2px; }
  .topbar nav a {
    margin-left: 0; padding: 6px 8px;
    font-size: 13.5px; white-space: nowrap;
  }
}

/* ---------- multi-company switcher ---------- */
.org-switch-head {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: 10px 14px 4px;
}
.org-switch {
  display: flex !important; flex-direction: column; gap: 2px;
  padding: 8px 14px !important; font-size: 13px !important;
}
.org-switch.current { background: var(--brand-50); }
.org-switch.current span:first-child::after { content: ' ✓'; color: var(--primary); }
.org-switch-role { color: var(--muted); font-size: 11px; font-weight: 500; }
.org-switch-all {
  border-top: 1px solid var(--border); font-size: 12.5px !important;
  color: var(--primary) !important;
}

.broker-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--brand-50); color: var(--primary-dark);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.proc-row { cursor: pointer; }
.proc-row:hover td { background: var(--brand-50); }

/* ---------- toasts: every action says what happened ---------- */
#toast-host {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(420px, calc(100vw - 32px));
}
.toast {
  background: #1d2733; color: #fff; border-radius: 12px;
  padding: 12px 18px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(15, 20, 35, .3);
  display: flex; align-items: center; gap: 10px; width: 100%;
  animation: toast-in .18s ease-out;
}
.toast.err { background: #8f1d1d; }
.toast.ok::before { content: '✓'; font-weight: 800; }
.toast.err::before { content: '!'; font-weight: 800; }
.toast.leaving { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- loading skeletons ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--n-150) 25%, #f6f5f9 50%, var(--n-150) 75%);
  background-size: 200% 100%; animation: sk 1.1s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-row { height: 46px; margin-bottom: 8px; }
.sk-stat { height: 74px; }
.sk-card { height: 120px; margin-bottom: 10px; }

/* ---------- friendlier empty states ---------- */
.empty-state { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty-state .ico { font-size: 30px; display: block; margin-bottom: 10px; opacity: .7; }
.empty-state h4 { font-size: 15px; color: var(--text); margin-bottom: 5px; }
.empty-state p { font-size: 13px; line-height: 1.55; max-width: 340px; margin: 0 auto; }

/* ---------- tables scroll instead of breaking the page ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 620px; }
.list-view { overflow-x: auto; }
.list-view table { min-width: 900px; }

/* ---------- focus visibility for keyboard users ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #bda6f0; outline-offset: 2px; border-radius: 6px;
}

/* ---------- busy buttons ---------- */
button[disabled], .primary[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- signing page ---------- */
.doc-body {
  border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px;
  margin: 16px 0; background: var(--n-25); line-height: 1.7; font-size: 14.5px;
}
.doc-body p { margin-bottom: 12px; }
.doc-body p:last-child { margin-bottom: 0; }
.sign-box { border-top: 2px solid var(--border); padding-top: 18px; }
.sign-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; cursor: pointer; }
.sign-check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
#typed {
  font-family: "Snell Roundhand", "Brush Script MT", cursive;
  font-size: 26px; padding: 12px 14px;
}

/* ---------- whitelabel preview ---------- */
.brand-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.bp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; }
.bp-logo { height: 26px; width: auto; border-radius: 4px; background: #fff; padding: 2px; }
.bp-initials {
  width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}
.bp-name { font-weight: 700; font-size: 14px; }
.bp-body { padding: 16px 14px; background: var(--surface); }
.bp-btn {
  display: inline-block; color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 20px; border-radius: 999px;
}
.bp-note { display: block; color: var(--muted); font-size: 11.5px; margin-top: 10px; }

/* ---------- comp plan tiers ---------- */
.tier-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.tier-row input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px;
}
.tier-row span { color: var(--muted); flex-shrink: 0; }

/* The org's brand colour as *text* on a tinted chip fails as soon as the
   brand is dark. Brand on the chip, derived colour on the text. */
.agent-tag {
  font-size: 12px; font-weight: 700; color: var(--on-primary);
  background: var(--primary); border-radius: 999px; padding: 6px 14px;
}

/* ---------- LO command center ---------- */
.today-section { margin-bottom: 24px; }
.today-section h2 { font-size: 16px; margin-bottom: 10px; }
.today-item {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--n-300);
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 6px; cursor: pointer;
  box-shadow: var(--sh-1); transition: box-shadow .13s, border-color .13s;
}
.today-item:hover { box-shadow: var(--sh-2); }
.today-item.sev3 { border-left-color: var(--red); }
.today-item.sev2 { border-left-color: var(--amber); }
.today-item.sev1 { border-left-color: var(--primary); }
.today-item .who { min-width: 150px; font-weight: 600; }
.today-item .who .ln { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.today-item .act { flex: 1; }
.today-item .owner-pill, .owner-pill {
  font-size: 11px; font-weight: 600; background: var(--n-100); color: var(--n-600);
  border-radius: 5px; padding: 3px 8px; white-space: nowrap;
}
.today-item .due { font-size: 12px; color: var(--muted); min-width: 80px; text-align: right; }
/* On a phone the desktop row squeezes the action into a sliver and clips the
   date. Stack it: name on top, the action full-width below, owner + due sharing
   a bottom row. */
@media (max-width: 640px) {
  .today-item { flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
  .today-item .who { min-width: 0; flex: 1 1 100%; }
  .today-item .act { flex: 1 1 100%; font-size: 13.5px; line-height: 1.45; }
  .today-item .owner-pill { order: 3; }
  .today-item .due { order: 4; min-width: 0; margin-left: auto; }
}
.today-empty { color: var(--green); background: var(--green-bg); border: 1px solid transparent; border-radius: var(--radius); padding: 13px 16px; font-weight: 550; display: flex; align-items: center; gap: 9px; }

/* readiness */
.ready-bar-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ready-bar { flex: 1; height: 10px; background: var(--n-150); border-radius: 5px; overflow: hidden; }
.ready-fill { height: 100%; border-radius: 5px; }
.ready-score { font-size: 20px; font-weight: 700; min-width: 60px; }
.blocker-row {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; background: var(--n-25);
}
.blocker-stage {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 8px; background: var(--n-100); color: var(--muted); white-space: nowrap;
}
.blocker-stage.Application { background: var(--brand-50); color: var(--primary-dark); }
.blocker-stage.Compliance { background: var(--red-bg); color: var(--red); }
.blocker-stage.Approval { background: var(--amber-bg); color: var(--amber); }

/* scenarios */
.scen-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.scen-table th, .scen-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.scen-table th { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.03em; }
.scen-table tr.recommended td { background: #eaf6ef; }
.rec-badge { background: var(--green); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 2px 8px; margin-left: 6px; }
.scen-inel { color: var(--muted); flex-wrap: wrap; }
.scen-inel .reasons { font-size: 12px; color: var(--red); }
.scen-fixes { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-left: auto; }

/* "How to adjust" pricing coach */
.pricing-coach {
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: var(--brand-50); border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px;
}
.coach-head { display: flex; align-items: center; gap: 7px; color: var(--primary-dark); font-size: 13.5px; }
.coach-head svg { color: var(--primary); }
.coach-lead { margin: 6px 0 10px; font-size: 13px; color: var(--text); font-weight: 600; }
.coach-rows { display: flex; flex-direction: column; gap: 6px; }
.coach-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.coach-lender { font-weight: 700; min-width: 130px; }
.coach-fixes { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.coach-rate { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.fix-pill {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary-dark);
}
[data-theme="dark"] .pricing-coach { background: color-mix(in srgb, var(--primary) 14%, transparent); }
[data-theme="dark"] .fix-pill { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.prob-good { color: var(--green); font-weight: 600; }
.prob-warn { color: var(--amber); font-weight: 600; }

/* rate sheets (your own lenders) */
.rs-status { font-size: 13px; margin: 4px 0 12px; color: var(--muted); }
.rs-live { color: var(--green); font-weight: 700; }
.rs-sample { color: var(--amber); font-weight: 700; }
.rs-empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.rs-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--n-25); }
.rs-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.rs-name { flex: 1 1 auto; font-size: 15px; font-weight: 700; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.rs-name:focus { outline: none; border-color: var(--primary); }
.rs-del { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
.rs-del:hover { color: var(--red); border-color: var(--red); }
.rs-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 12px; }
.rs-prog-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.rs-prog-scroll { overflow-x: auto; }
.rs-prog { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 460px; }
.rs-prog th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 6px; font-weight: 700; }
.rs-prog td { padding: 3px 6px; border-top: 1px solid var(--border); }
.rs-prog tr:not(.on) td { opacity: .5; }
.rs-prog-on { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.rs-prog-on input { width: auto; }
.rs-prog input { width: 72px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; text-align: right; background: var(--surface); color: var(--text); font-size: 12.5px; }
.rs-prog input:focus { outline: none; border-color: var(--primary); }
.rs-prog input:disabled { background: transparent; border-color: transparent; }
.rs-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.rs-foot .primary { flex: 1 1 auto; }
.profit { font-weight: 700; color: var(--green); }
.scen-note { font-size: 12px; color: var(--muted); margin-top: 10px; }


/* ---------- icon-aware component polish (design pass) ---------- */
.ql-icon {
  width: 38px; height: 38px; border-radius: 9px; background: var(--brand-50);
  color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.route-icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50);
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; font-size: 0;
}
.empty-state .ico {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 13px;
  background: var(--n-100); color: var(--n-400);
  display: flex; align-items: center; justify-content: center;
}
.tour-card .ico {
  width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50);
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; font-size: 0;
}
.why-card h4 { display: flex; align-items: center; gap: 8px; color: var(--text); }
.why-card h4 .icn { color: var(--primary); }
.mock-row span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.mock-row .icn { color: var(--green); }
.mock-row.muted .icn { color: var(--n-400); }
.nav-icon { color: var(--n-500); }
.actions-row .icn, .primary-pill .icn, .ai-btn .icn, .outline-pill .icn { opacity: .9; }
.section-h { display: flex; align-items: center; gap: 8px; }
.section-h .icn { color: var(--n-400); }
.drawer .close-btn, .create-modal .close-btn {
  font-size: 26px; line-height: 1; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--n-400);
}
.drawer .close-btn:hover, .create-modal .close-btn:hover { background: var(--n-100); color: var(--text); }
.big-check {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green-bg); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 0;
}
.mini-btn { display: inline-flex; align-items: center; gap: 7px; }
.toast .icn { flex-shrink: 0; }
.org-chip > span { gap: 7px; }
.org-chip .icn:last-child { color: var(--n-400); margin-left: 2px; }
.org-switch-all { display: flex !important; align-items: center; gap: 8px; }

/* denser, calmer tables */
.mini-table td, .list-view td { font-size: 13px; }
.list-view th, .list-view td { padding: 11px 14px; }
.list-view tr:hover td { background: var(--brand-50); }
.list-view tbody tr { transition: background .1s; }

/* page headers breathe more */
.page-title { font-size: 26px; margin-bottom: 3px; }
.page-sub { font-size: 14px; margin-bottom: 22px; }
.panel-h { font-size: 15px; font-weight: 640; }
.card-h { font-size: 14.5px; font-weight: 640; }
.actions-row { gap: 10px; margin-bottom: 20px; }


/* org chip: name truncates, icons never squash */
#org-chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nav-right { flex-wrap: nowrap; }
.staff-nav a .icn { color: var(--n-400); transition: color .12s; }
.staff-nav a:hover .icn, .staff-nav a.active .icn { color: var(--primary); }
.staff-nav a.active { color: var(--text); font-weight: 620; background: var(--brand-50); }

/* ================= dark theme ================= */
:root[data-theme="dark"] {
  --n-0:#15151a; --n-25:#191920; --n-50:#121217; --n-100:#212129;
  --n-150:#2b2b35; --n-200:#363642; --n-300:#4a4a59; --n-400:#7b7b8d;
  --n-500:#9d9dae; --n-600:#b8b8c6; --n-700:#d2d2dc; --n-900:#f0f0f4;

  --brand-50:#16203a; --brand-100:#1b2b4d; --brand-200:#263b68;
  --brand-500:#7aa2f0; --brand-600:#94b6f5; --brand-700:#b3cdf9;

  --bg:#0e0e12;
  --surface:#17171d;
  --border:#26262f;
  --border-strong:#33333f;
  --text:#f0f0f4;
  --muted:#9d9dae;
  --primary:#7aa2f0;
  --primary-dark:#b3cdf9;
  /* The dark-mode primary is a light blue, so text on it must be dark. */
  --on-primary:#0b1220;

  --green:#4ecfa0; --green-bg:#14312a;
  --amber:#e0ab5c; --amber-bg:#33270f;
  --red:#f08b84;   --red-bg:#3a1c1c;
  --accent:#3fd0c0; --accent-bg:#0e2e2b;

  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --sh-2: 0 4px 14px -2px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  --sh-3: 0 24px 54px -14px rgba(0,0,0,.7), 0 8px 22px -8px rgba(0,0,0,.5);
  /* A faint top-edge lift on dark card surfaces (see --surface-hi in light). */
  --surface-hi: rgba(255,255,255,.05);

  /* Lifted, not inverted — a dark band still has to read as a band against a
     dark page. White on this is ~13:1. */
  --ink-band: #23232f;
}
:root[data-theme="dark"] body { background: var(--bg); }
:root[data-theme="dark"] .pos-body { background: linear-gradient(180deg,#121218 0%, var(--bg) 40%); }
:root[data-theme="dark"] .home-body { background: var(--bg); }
:root[data-theme="dark"] .hero { background: linear-gradient(180deg,#191922 0%, var(--bg) 100%); }
:root[data-theme="dark"] .calc { background: linear-gradient(180deg, var(--bg) 0%, #191922 100%); }
:root[data-theme="dark"] .column { background: #1b1b22; }
:root[data-theme="dark"] .toast { background: #2c2c38; border: 1px solid var(--border-strong); }
:root[data-theme="dark"] .toast.err { background: #45201f; }
:root[data-theme="dark"] .ai-btn { background: var(--brand-500); color: var(--on-primary); }
:root[data-theme="dark"] .ai-btn:hover { background: var(--brand-600); }
/* Was a hardcoded near-black, which broke the moment a broker set a dark
   whitelabel colour. --on-primary is derived from the actual colour. */
:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] .primary-pill,
:root[data-theme="dark"] .cta-primary { color: var(--on-primary); }
:root[data-theme="dark"] .toggle.active { color: var(--on-primary); }
:root[data-theme="dark"] .milestone-step.current { color: var(--on-primary); }
/* .broker-tag sits on --brand-50, which is dark in dark mode — near-black
   text on it measured 1.16:1. Its own token pair already inverts correctly.
   .rec-badge sits on --green, which is light in dark mode, so it keeps this. */
:root[data-theme="dark"] .rec-badge { color: var(--on-primary); }
:root[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,#1e1e26 25%,#26262f 50%,#1e1e26 75%);
  background-size: 200% 100%;
}
:root[data-theme="dark"] .drawer-backdrop,
:root[data-theme="dark"] .pal-backdrop { background: rgba(0,0,0,.62); }
:root[data-theme="dark"] .bp-body { background: var(--surface); }
:root[data-theme="dark"] img.bp-logo { background: #fff; }

/* theme switch in the nav */
.theme-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--n-500);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.theme-btn:hover { background: var(--n-100); color: var(--text); }

/* ================= command palette ================= */
#pal-host { position: fixed; inset: 0; z-index: 300; display: none; }
#pal-host.open { display: block; }
.pal-backdrop { position: absolute; inset: 0; background: rgba(20,18,35,.42); backdrop-filter: blur(3px); }
.pal {
  position: relative; margin: 12vh auto 0; width: min(620px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--sh-3); overflow: hidden;
  animation: pal-in .14s ease-out;
}
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
.pal-input-row {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px; border-bottom: 1px solid var(--border);
}
.pal-input-row .icn { color: var(--n-400); }
.pal-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15.5px; color: var(--text); font-family: inherit;
}
.pal-input-row input::placeholder { color: var(--n-400); }
.pal-esc {
  font-size: 10.5px; color: var(--n-400); background: var(--n-100);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; font-family: inherit;
}
.pal-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.pal-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--n-400); padding: 10px 11px 5px;
}
.pal-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer;
}
.pal-item.active { background: var(--brand-50); }
.pal-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--n-100); color: var(--n-500);
  display: flex; align-items: center; justify-content: center;
}
.pal-item.active .pal-ico { background: var(--brand-100); color: var(--primary); }
.pal-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pal-text strong { font-size: 14px; font-weight: 600; }
.pal-text span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-kbd, .pal-foot kbd {
  font-size: 10.5px; font-family: inherit; color: var(--n-500);
  background: var(--n-100); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
.pal-item.active .pal-kbd { color: var(--primary); background: var(--brand-100); border-color: var(--brand-200); }
.pal-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px; }
.pal-foot {
  display: flex; gap: 16px; padding: 9px 15px; border-top: 1px solid var(--border);
  background: var(--n-25); font-size: 11.5px; color: var(--n-400);
}
.pal-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* palette hint chip in the nav */
.pal-trigger {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--n-50); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 7px 11px; color: var(--n-400); font-size: 13px; font-family: inherit;
  width: 220px; flex-shrink: 0; white-space: nowrap;
}
.pal-trigger span { overflow: hidden; text-overflow: ellipsis; }
.pal-trigger:hover { border-color: var(--n-300); color: var(--muted); }
.pal-trigger kbd {
  margin-left: auto; font-family: inherit; font-size: 10.5px;
  background: var(--n-100); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px;
}

/* ================= drag and drop ================= */
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: .45; cursor: grabbing; transform: rotate(1.5deg) scale(.98); }
.column.drop-target {
  background: var(--brand-50);
  outline: 2px dashed var(--primary); outline-offset: -3px;
}
.column.drop-target h3 { color: var(--primary); }
.drag-hint { font-size: 11.5px; color: var(--n-400); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

/* ================= inline editing ================= */
.field.editable { cursor: text; border-radius: 6px; padding: 6px 8px; margin: 0 -8px; transition: background .12s; }
.field.editable:hover { background: var(--n-50); }
.field.editable:hover .value::after {
  content: 'edit'; font-size: 10px; color: var(--n-400); margin-left: 8px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.field-input {
  width: 100%; font-size: 14px; font-family: inherit; font-weight: 500;
  padding: 5px 8px; border: 1px solid var(--primary); border-radius: 6px;
  background: var(--surface); color: var(--text); outline: none;
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* ================= motion ================= */
.drawer { animation: drawer-in .2s cubic-bezier(.22,.61,.36,1); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.today-item, .card { animation: rise .22s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.today-item:nth-child(1){animation-delay:0ms}.today-item:nth-child(2){animation-delay:25ms}
.today-item:nth-child(3){animation-delay:50ms}.today-item:nth-child(4){animation-delay:75ms}
.today-item:nth-child(5){animation-delay:100ms}.today-item:nth-child(n+6){animation-delay:120ms}
.stat { animation: rise .22s ease-out both; }
.stats .stat:nth-child(2){animation-delay:30ms}.stats .stat:nth-child(3){animation-delay:60ms}
.stats .stat:nth-child(4){animation-delay:90ms}.stats .stat:nth-child(5){animation-delay:120ms}
.stats .stat:nth-child(6){animation-delay:150ms}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

.saving { color: var(--muted); font-style: italic; font-size: 13px; }
.toast-undo {
  margin-left: auto; background: rgba(255,255,255,.16); border: none; color: inherit;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 4px 11px; border-radius: 6px;
}
.toast-undo:hover { background: rgba(255,255,255,.26); }

/* tour + help callouts must follow the theme, not assume a light page */
.steps-note, .help-note {
  background: var(--brand-50); border-color: var(--brand-200); color: var(--text);
}
.honest { background: var(--amber-bg); border-color: var(--amber-bg); color: var(--text); }
:root[data-theme="dark"] .steps-note,
:root[data-theme="dark"] .help-note { background: var(--brand-50); border: 1px solid var(--brand-200); }
:root[data-theme="dark"] .honest { background: #2a2313; border: 1px solid #4a3d1c; }
:root[data-theme="dark"] .cred,
:root[data-theme="dark"] .count,
:root[data-theme="dark"] .tour-card { background: var(--surface); border-color: var(--border-strong); }
:root[data-theme="dark"] .warn-box { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
:root[data-theme="dark"] .success-box { background: var(--green-bg); border-color: var(--green); color: var(--green); }
:root[data-theme="dark"] .trid-box { background: var(--amber-bg); border-color: var(--amber); color: var(--text); }
:root[data-theme="dark"] .trid-box.complete { background: var(--green-bg); border-color: var(--green); }
:root[data-theme="dark"] .welcome-banner { background: var(--green-bg) !important; border-color: var(--green) !important; }

/* ================= depth, gradient, glass ================= */
:root {
  /* Teal-700, not teal-600, at the tail: .pop-flag and .price-cta put small
     white text on this gradient, and the lighter teal only reached 3.7:1. */
  --grad-brand: linear-gradient(135deg, #163585 0%, #2352c9 48%, #0f766e 100%);
  --grad-mint:  linear-gradient(135deg, #16a37b 0%, #4fc7a1 100%);
  --grad-sun:   linear-gradient(135deg, #d98324 0%, #e5a75c 100%);
  --grad-sky:   linear-gradient(135deg, #2b6fd4 0%, #57a0e8 100%);
  --glass: rgba(255,255,255,.72);
  --glass-brd: rgba(255,255,255,.6);
}
:root[data-theme="dark"] {
  --glass: rgba(28,28,36,.72);
  --glass-brd: rgba(255,255,255,.07);
}

/* frosted app bar that lets content scroll under it */
.staff-topbar {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* soft aurora behind the page, never in the way */
body::before {
  content: ''; position: fixed; inset: -20% -10% auto -10%; height: 60vh; z-index: -1;
  background:
    radial-gradient(48% 55% at 18% 0%, rgba(124,90,224,.16) 0%, transparent 70%),
    radial-gradient(42% 50% at 82% 8%, rgba(224,122,176,.12) 0%, transparent 70%);
  pointer-events: none;
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(48% 55% at 18% 0%, rgba(124,90,224,.26) 0%, transparent 70%),
    radial-gradient(42% 50% at 82% 8%, rgba(224,122,176,.15) 0%, transparent 70%);
}

/* ================= bento dashboard ================= */
.bento {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px;
}
.bento > * { min-width: 0; }
.b-hero   { grid-column: span 3; }
.b-half   { grid-column: span 3; }
.b-third  { grid-column: span 2; }
.b-full   { grid-column: span 6; }

/* the one number that matters, on brand gradient */
.hero-tile {
  position: relative; overflow: hidden; color: #fff;
  background: var(--grad-brand);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(109,79,196,.28);
}
.hero-tile::after {
  content: ''; position: absolute; right: -60px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.hero-tile .h-label { font-size: 12.5px; font-weight: 600; opacity: .88; }
.hero-tile .h-value {
  font-size: 54px; font-weight: 780; letter-spacing: -.04em; margin: 2px 0 2px;
  font-variant-numeric: tabular-nums; line-height: 1.02;
  text-shadow: 0 2px 12px rgba(0,0,0,.14);
}
.hero-tile .h-sub { font-size: 13px; opacity: .85; }
.hero-tile .h-foot {
  display: flex; gap: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.22); font-size: 12.5px;
  position: relative; z-index: 1;
}
.hero-tile .h-foot b { display: block; font-size: 17px; font-weight: 680; }
/* Each stat is a doorway: click it to go where that number lives. */
.hero-tile .h-foot a {
  color: #fff; text-decoration: none; opacity: .85; border-radius: 8px;
  margin: -6px -4px; padding: 6px 10px; transition: background .15s, opacity .15s;
}
.hero-tile .h-foot a:hover { opacity: 1; background: rgba(255,255,255,.16); }

/* accent tiles carry a colour identity instead of all-grey sameness */
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--sh-1), inset 0 1px 0 var(--surface-hi);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2), inset 0 1px 0 var(--surface-hi); }
.tile .t-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile .t-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.tile .t-ico {
  width: 32px; height: 32px; border-radius: 9px; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tile.mint  .t-ico { background: var(--grad-mint); box-shadow: 0 4px 12px -2px color-mix(in srgb, #16a37b 55%, transparent); }
.tile.sun   .t-ico { background: var(--grad-sun);  box-shadow: 0 4px 12px -2px color-mix(in srgb, #d98324 55%, transparent); }
.tile.sky   .t-ico { background: var(--grad-sky);  box-shadow: 0 4px 12px -2px color-mix(in srgb, #2b6fd4 55%, transparent); }
.tile.brand .t-ico { background: var(--grad-brand); box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--primary) 55%, transparent); }
/* Each accent tile now carries a faint wash of its own colour and a matching
   top-edge glow, so the row reads as four distinct cards rather than grey boxes
   with a coloured chip. A big radial bloom sits behind, clipped by overflow. */
.tile.mint  { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,#16a37b 12%,var(--surface)) 0%, var(--surface) 55%); border-color: color-mix(in srgb,#16a37b 28%,var(--border)); }
.tile.sun   { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,#d98324 13%,var(--surface)) 0%, var(--surface) 55%); border-color: color-mix(in srgb,#d98324 30%,var(--border)); }
.tile.sky   { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,#2b6fd4 13%,var(--surface)) 0%, var(--surface) 55%); border-color: color-mix(in srgb,#2b6fd4 28%,var(--border)); }
.tile.brand { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--primary) 13%,var(--surface)) 0%, var(--surface) 55%); border-color: color-mix(in srgb,var(--primary) 28%,var(--border)); }
.tile .t-value {
  font-size: 33px; font-weight: 750; letter-spacing: -.03em; margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.tile .t-trend { font-size: 12px; font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.tile .t-trend.up { color: var(--green); }
.tile .t-trend.down { color: var(--red); }
.tile .t-trend.flat { color: var(--muted); }
.spark { display: block; margin-top: 10px; width: 100%; height: 30px; overflow: visible; }

/* ---------- urgency tabs ---------- */
/* "What is late" is the question this page exists to answer, so it sits above
   the stage/person filters rather than buried among them. */
.urgency-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.urg-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.urg-tab:hover { border-color: var(--n-400, #9a9aae); }
.urg-tab.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.urg-tab.is-empty { opacity: .45; }
.urg-count {
  min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px;
  background: var(--n-100); color: var(--muted); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Inherit the tab's own colour rather than hardcoding white: the active pill
   is dark in light mode and light in dark mode, so a fixed white count
   disappeared entirely against the dark-mode pill. */
.urg-tab.active .urg-count { background: rgba(128, 128, 128, .32); color: inherit; }
.urg-tab.urg-overdue:not(.active) { border-color: rgba(220, 38, 38, .4); color: var(--red); }
.urg-tab.urg-overdue.active { background: var(--red); border-color: var(--red); color: #fff; }
.urg-tab.urg-soon:not(.active) { border-color: rgba(201, 138, 0, .45); color: var(--amber, #c98a00); }
.urg-tab.urg-soon.active { background: var(--amber, #c98a00); border-color: var(--amber, #c98a00); color: #fff; }

/* The reason, on the card itself. */
.card-urg {
  display: block; margin: -2px 0 7px; padding: 4px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 650; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-urg.overdue { background: rgba(220, 38, 38, .1); color: var(--red); }
.card-urg.soon { background: rgba(201, 138, 0, .12); color: var(--amber, #c98a00); }
/* When the reason has a one-click fix the chip is a link straight to it. The
   label pill only shows on hover so the resting card stays calm. */
a.card-urg.has-fix { text-decoration: none; cursor: pointer; }
a.card-urg.has-fix:hover { filter: brightness(1.06); text-decoration: none; }
.card-urg .cu-go { font-weight: 800; opacity: 0; margin-left: 2px; transition: opacity .12s; }
a.card-urg.has-fix:hover .cu-go { opacity: 1; }
.card.card-overdue { border-left: 3px solid var(--red); }
.card.card-soon { border-left: 3px solid var(--amber, #c98a00); }

/* The worst few files, named, inside the "needs attention" tile. */
.tile .t-list { margin-top: 11px; border-top: 1px solid var(--border); padding-top: 8px; }
.tile .t-list-row {
  display: block; text-decoration: none; color: inherit;
  padding: 4px 0 4px 9px; border-left: 2px solid var(--border);
  font-size: 12px; line-height: 1.35;
}
.tile .t-list-row + .t-list-row { margin-top: 3px; }
.tile .t-list-row:hover { background: var(--n-100); }
.tile .t-list-row b { display: block; font-weight: 650; color: var(--text); }
.tile .t-list-row span {
  display: block; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile .t-list-row.sev3 { border-left-color: var(--red); }
.tile .t-list-row.sev2 { border-left-color: var(--amber, #c98a00); }
.tile .t-list-more {
  display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--primary); text-decoration: none;
}

/* progress ring for readiness */
.ring-wrap { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 68px; height: 68px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring-track { stroke: var(--n-150); }
.ring-val { stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22,.61,.36,1); }
.ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-hero, .b-half, .b-full { grid-column: span 2; }
  .b-third { grid-column: span 1; }
}
/* On a phone the two small tiles sit shoulder to shoulder and their headings
   wrap awkwardly — give each the full width so the numbers breathe. */
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .b-hero, .b-half, .b-third, .b-full { grid-column: 1 / -1; }
}

/* page header with a primary action on the right */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.page-head .page-sub { margin-bottom: 18px; }
.page-head .primary-pill { text-decoration: none; margin-top: 4px; }


/* palette trigger responsive widths (declared last so they win the cascade) */
@media (max-width: 1320px) { .pal-trigger { width: 170px; } }
@media (max-width: 1150px) {
  .pal-trigger span, .pal-trigger kbd { display: none; }
  .pal-trigger { width: auto; padding: 8px 10px; }
}

/* ================= pricing ================= */
.price-hero { padding: 60px 0 34px; text-align: center; }
.price-hero h1 { font-size: 40px; line-height: 1.12; margin-bottom: 14px; }
.price-lede { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0 auto 26px; }

.bill-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--n-100); border-radius: 999px; border: 1px solid var(--border);
}
.bill-opt {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  padding: 9px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
}
.bill-opt.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.save {
  font-size: 10.5px; font-weight: 700; color: var(--green);
  background: var(--green-bg); border-radius: 999px; padding: 3px 8px;
}

.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; align-items: start; margin-bottom: 14px;
}
.price-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--sh-1);
  display: flex; flex-direction: column;
}
.price-card.popular {
  border-color: var(--primary); box-shadow: 0 10px 34px rgba(109,79,196,.16);
}
.price-card.accent { background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 42%); }
.pop-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 13px; border-radius: 999px; white-space: nowrap; box-shadow: var(--sh-1);
}
/* Reserve two lines so a wrapping plan name doesn't shove that card's price
   out of line with the others. */
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 46px; }
.pc-head h3 { font-size: 18px; }
.pc-tag { font-size: 11px; color: var(--muted); font-weight: 600; text-align: right; }
.pc-blurb { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 16px; min-height: 38px; }
.pc-price { display: flex; align-items: baseline; gap: 8px; }
.pc-amount { font-size: 40px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pc-per { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.pc-billed { font-size: 11.5px; color: var(--muted); margin: 6px 0 16px; }
.pc-cta { display: block; text-align: center; width: 100%; }
.pc-seats {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  font-size: 11.5px; color: var(--muted); margin: 12px 0 4px;
}
.pc-list { list-style: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pc-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; padding: 5px 0; line-height: 1.45; }
.pc-list li .icn { color: var(--green); margin-top: 2px; }
.price-note { color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 720px; margin-bottom: 34px; }

.addon-panel { margin-bottom: 34px; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 6px; }
.addon { display: flex; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.addon-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--brand-50); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.addon strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.addon span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.cmp-title { font-size: 22px; margin: 8px 0 16px; }
.cmp-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: center; font-size: 13px; }
.cmp-table th { background: var(--n-25); font-size: 12.5px; font-weight: 650; }
.cmp-table th:first-child, .cmp-feat { text-align: left; }
.cmp-feat { color: var(--muted); font-size: 13px; }
.cmp-table .yes .icn { color: var(--green); }
.cmp-table .no { color: var(--n-300); }
.cmp-table .partial { color: var(--muted); font-size: 12px; font-weight: 600; }
.cmp-table tbody tr:hover td { background: var(--n-25); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 40px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 19px; }
.faq-item h4 { font-size: 14.5px; margin-bottom: 6px; }
.faq-item p { font-size: 13px; color: var(--muted); line-height: 1.6; }

.price-cta { background: var(--grad-brand); color: #fff; padding: 54px 0; text-align: center; margin-top: 10px; }
.price-cta h2 { font-size: 30px; margin-bottom: 8px; }
.price-cta p { opacity: .9; margin-bottom: 22px; }
.cta-ghost {
  display: inline-block; margin-left: 10px; color: #fff; text-decoration: none;
  font-weight: 650; font-size: 15px; padding: 15px 26px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
}
.cta-ghost:hover { background: rgba(255,255,255,.12); }

@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; }
  .price-hero h1 { font-size: 30px; }
  .cta-ghost { margin: 10px 0 0; display: block; }
}

/* tasks */
.task-check { display: flex; align-items: center; margin-right: 10px; }
.task-check input { width: 18px; height: 18px; cursor: pointer; }
.item-row.task-done .desc strong { text-decoration: line-through; color: var(--muted); }
.prio { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 3px 8px; margin-right: 10px; white-space: nowrap; }
.prio-high { background: var(--red-bg); color: var(--red); }
.prio-normal { background: var(--n-100); color: var(--muted); }
.prio-low { background: var(--n-100); color: var(--n-400); }
.tpl-apply {
  display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border); font-size: 13px; color: var(--muted); flex-wrap: wrap;
}
.tpl-apply select { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; }

.tpl-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; background: var(--n-25); }
.tpl-card textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; resize: vertical;
  background: var(--surface); color: var(--text);
}

/* Six nav items need to collapse to icons earlier than five did. */
@media (max-width: 1500px) { .pal-trigger { width: 150px; } }
@media (max-width: 1340px) {
  .pal-trigger span, .pal-trigger kbd { display: none; }
  .pal-trigger { width: auto; padding: 8px 10px; }
}
/* Collapsing to icons is driven by measurement in nav.js, not a pixel guess —
   the old fixed breakpoint had to be raised by hand every time a nav item was
   added, and overflowed the moment someone forgot. */
.staff-topbar.measuring, .staff-topbar.measuring * { transition: none !important; }

/* Stage one: the search box gives up its words, the company chip narrows. */
.staff-topbar.tight .pal-trigger span,
.staff-topbar.tight .pal-trigger kbd { display: none; }
.staff-topbar.tight .pal-trigger { width: 40px; padding: 0; justify-content: center; }
.staff-topbar.tight .org-chip > span { max-width: 88px; }
/* Tighter items buy back ~7px each, which is usually the difference between
   keeping the words and dropping to bare icons. */
.staff-topbar.tight .staff-nav a { padding: 7px 8px; gap: 6px; }

/* Stage two, only if that was not enough. */
.staff-topbar.compact .staff-nav a span { display: none; }
.staff-topbar.compact .staff-nav a { padding: 8px 9px; }
.staff-topbar.compact .staff-nav a .icn { color: var(--n-500); }
.staff-topbar.compact .staff-nav a.active .icn { color: var(--primary); }
.staff-topbar.compact .org-chip > span { max-width: 120px; }
@media (max-width: 820px) {
  .staff-topbar .brand { display: none; }
  .org-chip > span { max-width: 88px; }
}
/* page header keeps its action inline until it genuinely can't */
.page-head { align-items: center; }
@media (max-width: 620px) { .page-head { align-items: flex-start; } }


/* Nav must never let the left group overrun the right toolbar. */
.staff-topbar { flex-wrap: nowrap; }
.nav-left { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.staff-nav { flex-shrink: 1; min-width: 0; overflow: hidden; }
.nav-right { flex: 0 0 auto; }

/* ---------- URLA / Form 1003 ---------- */
.urla-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.urla-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.urla-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.urla-progress-bar { width: 160px; height: 8px; border-radius: 999px; background: var(--n-150); overflow: hidden; }
.urla-progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width .3s; }

.urla-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-top: 18px; align-items: start; }
.urla-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 4px; }
.urla-nav-item {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 11px; cursor: pointer;
  font: inherit; color: var(--text); transition: background .12s, border-color .12s;
}
.urla-nav-item:hover { background: var(--n-100); }
.urla-nav-item.active { background: var(--brand-50); border-color: var(--primary); }
.urla-nav-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--n-150); color: var(--muted);
}
.urla-nav-num.done { background: var(--green); color: #fff; }
.urla-nav-num.opt { background: var(--n-100); color: var(--n-400); }
.urla-nav-text { display: flex; flex-direction: column; min-width: 0; }
.urla-nav-text strong { font-size: 13.5px; font-weight: 650; }
.urla-nav-text span { font-size: 11.5px; color: var(--muted); }

.umissing {
  background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber);
  border-radius: 8px; padding: 9px 13px; font-size: 12.5px; margin: 12px 0 4px;
}
.usec { margin-top: 16px; }
.usub { margin: 22px 0 10px; font-size: 15px; letter-spacing: -.01em; }
.ugrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; }
.ufield { display: flex; flex-direction: column; gap: 5px; }
.ufield span { font-size: 12px; font-weight: 600; color: var(--muted); }
.ufield input, .ufield select {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; background: var(--surface); color: var(--text); font-family: inherit;
}
.ufield input:focus, .ufield select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.urla-table-wrap { overflow-x: auto; }
.urla-table td { padding: 5px 6px; }
.urla-table td input, .urla-table td select {
  width: 100%; min-width: 90px; padding: 7px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
}
.urla-table td.num input { text-align: right; }
.urla-table th.num { text-align: right; }
.utotal {
  margin-top: 12px; padding: 11px 14px; background: var(--n-50);
  border: 1px solid var(--border); border-radius: 9px; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.utotal b { font-size: 16px; }

.udecl {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px dashed var(--n-150); font-size: 14px; line-height: 1.45;
}
.udecl:last-child { border-bottom: 0; }
.useg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.useg-btn {
  background: none; border: 0; padding: 7px 18px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--muted);
}
.useg-btn + .useg-btn { border-left: 1px solid var(--border); }
.useg-btn.on { background: var(--primary); color: #fff; }

.uchecks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.ucheck { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.ucheck:hover { background: var(--n-100); }
.ucheck input { width: auto; }

.urla-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }

@media (max-width: 820px) {
  .urla-grid { grid-template-columns: 1fr; }
  .urla-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .urla-nav-item { flex: 0 0 auto; }
  .urla-nav-text { display: none; }
  .udecl { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* co-borrower switcher on per-applicant URLA sections */
.uappbar { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.uappbar-sp { flex: 1 1 auto; }
.uapp {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--muted); cursor: pointer;
}
.uapp:hover { border-color: var(--primary); color: var(--text); }
.uapp.on { background: var(--brand-50); border-color: var(--primary); color: var(--primary-dark); }
.uapp-state {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--n-150); color: var(--muted);
}
.uapp-state.ok { background: var(--green-bg); color: var(--green); }

/* ---------- trial / subscription bar ---------- */
.trial-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 9px 20px;
  background: var(--amber-bg); color: var(--amber);
  border-bottom: 1px solid var(--amber);
  font-size: 13px; font-weight: 650;
}
.trial-bar.urgent { background: var(--red-bg); color: var(--red); border-bottom-color: var(--red); }
.trial-bar a {
  color: inherit; text-decoration: none; font-weight: 750;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px;
  transition: background .12s;
}
.trial-bar a:hover { background: rgba(255, 255, 255, .35); }

/* ---------- Emery ---------- */
.nina-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.nina-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px;
  background: linear-gradient(135deg, var(--primary), #3b6ce0);
  box-shadow: 0 4px 14px rgba(35, 82, 201, .35);
}
.nina-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.nina-side { display: flex; flex-direction: column; gap: 20px; }

.nina-chat-panel { display: flex; flex-direction: column; min-height: 560px; }
.nina-log { flex: 1; overflow-y: auto; max-height: 52vh; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.nina-msg { display: flex; gap: 10px; align-items: flex-start; }
.nina-msg.me { justify-content: flex-end; }
.nina-badge {
  width: 26px; height: 26px; flex: none; border-radius: 50%; margin-top: 2px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary), #3b6ce0);
}
.nina-bubble {
  border-radius: 14px; padding: 11px 15px; max-width: 86%;
  background: var(--n-100); border: 1px solid var(--border);
  font-size: 14px; line-height: 1.5;
}
.nina-msg.me .nina-bubble { background: var(--primary); border-color: var(--primary); color: #fff; }
.nina-bubble p { margin: 0 0 7px; }
.nina-bubble p:last-child { margin-bottom: 0; }
.nina-meta { margin-top: 8px; font-size: 11.5px; opacity: .7; font-style: italic; }

/* What Emery changed. Deliberately loud: a write should never read like prose. */
.nina-did { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.nina-did-row {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--good, #157347);
  padding: 3px 0;
}
.nina-did-row::before { content: '✓'; flex: none; font-weight: 700; }

.nina-suggest { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 10px; }
.nina-suggest .mini-btn { font-size: 12px; padding: 5px 11px; }
.nina-ask { display: flex; gap: 8px; }
.nina-ask input { flex: 1; }

.nina-brief { display: flex; flex-direction: column; }
.nina-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px;
  border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.45;
  color: inherit; text-decoration: none;
}
.nina-item:last-child { border-bottom: 0; }
.nina-item:hover { background: var(--brand-100); border-radius: 8px; }
.nina-item p { margin: 0; }
.nina-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--n-400); }
.nina-item.sev-3 .nina-dot { background: var(--red); }
.nina-item.sev-2 .nina-dot { background: var(--amber); }
.nina-item.sev-1 .nina-dot { background: var(--primary); }

.nina-row { padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.nina-row:last-child { border-bottom: 0; }
.nina-row a { color: inherit; text-decoration: none; }
.nina-row a:hover { text-decoration: underline; }
.nina-age { float: right; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.nina-age.old { color: var(--red); }
.nina-row-sub { clear: both; margin-top: 3px; font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .nina-layout { grid-template-columns: 1fr; }
  .nina-log { max-height: 46vh; }
}

/* ---------- phones ----------
   Even icons-only, eight nav items plus the toolbar are wider than a 375px
   phone. `.staff-nav { flex-shrink: 0 }` meant the overflow pushed the whole
   PAGE sideways, so every screen scrolled horizontally. Let the nav scroll
   inside itself instead — the page never does. */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }

  .staff-nav {
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .staff-nav::-webkit-scrollbar { display: none; }
  .staff-nav a { flex: 0 0 auto; scroll-snap-align: start; }

  /* Thumbs need something to hit. 44px is the accessibility floor. */
  .staff-nav a,
  .pal-trigger,
  .theme-btn,
  .nav-icon { min-height: 40px; }
  .pal-trigger { min-width: 40px; }

  /* The company chip eats the room the nav needs. */
  .org-chip > span { max-width: 76px; }

  /* Wide tables scroll in their own box rather than stretching the page. */
  .table-scroll, .panel table { max-width: 100%; overflow-x: auto; }
}

/* ---------- sample-data warning ----------
   The built-in lenders are invented. This banner is the thing standing between
   a demo and a broker quoting a borrower a rate that does not exist. */
.sample-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--amber-bg); border: 1px solid var(--amber);
  color: var(--amber); border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5;
}
.sample-banner .icn { flex: none; margin-top: 1px; }
.sample-banner strong { font-weight: 750; }
.sample-banner a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* ---------- lead rows carry two lines: the fact, then the detail ---------- */
.lead-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.lead-form-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border);
}
.form-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .form-3col { grid-template-columns: 1fr; } }

/* ---------- lead detail panel ----------
   Clicking a lead's name opens this. The table answers "who is on my list";
   this answers "what is actually going on with them", which is the thing the
   notes field was holding hostage. */
.lead-name {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--primary-dark);
  text-align: left; border-bottom: 1px solid transparent;
}
.lead-name:hover { border-bottom-color: currentColor; }
.lead-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

/* Initials avatar in the leads table, tinted by where the lead sits. */
.lead-person { display: flex; align-items: center; gap: 10px; }
.lead-person-txt { min-width: 0; }
.lead-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.lead-av-good  { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.lead-av-live  { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.lead-av-lead  { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.lead-av-info  { background: color-mix(in srgb, #2563eb 15%, transparent); color: #1d4ed8; }
.lead-av-muted { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
:root[data-theme="dark"] .lead-av-good { color: #4ade80; }
:root[data-theme="dark"] .lead-av-lead { color: #fbbf24; }
:root[data-theme="dark"] .lead-av-info { color: #93b2f5; }

/* An overdue follow-up is the whole point of this page — make it a pill, not
   just red text that blends into the row. */
.fu-due {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, #e0533d 15%, transparent); color: #c2381f;
}
.fu-due::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:root[data-theme="dark"] .fu-due { color: #f7a08c; }
.fu-none { color: var(--muted); }

.lead-detail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(560px, 100%); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -18px 0 46px -22px rgba(20, 18, 35, .38);
  padding: 26px 28px 40px;
  animation: d-in .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes d-in { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lead-detail { animation: none; } }

.d-head h2 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 8px; }
.d-sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; }
.d-sub span:not(.status-chip) { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* Anything the sheet shouted about. */
.d-flags { display: grid; gap: 8px; margin-bottom: 16px; }
.d-flag {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--amber-bg); border: 1px solid var(--amber);
  color: var(--amber); border-radius: var(--radius);
  padding: 11px 13px; font-size: 13.5px; font-weight: 700; line-height: 1.45;
}
.d-flag .icn { flex: none; margin-top: 1px; }

.d-why {
  background: var(--red-bg); border-left: 3px solid var(--red);
  border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 20px;
}
.d-why h4 { margin: 0 0 5px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--red); }
.d-why p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }

.d-money {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 22px;
}
.d-stat {
  background: var(--n-25); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 12px;
}
.d-stat small { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.d-stat b { display: block; font-size: 16.5px; font-weight: 750; margin-top: 3px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d-stat em { font-style: normal; font-size: 11px; color: var(--muted); }
.d-stat.good b { color: var(--green); }

.d-sec { margin-bottom: 20px; }
.d-sec h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 0 0 9px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.d-row { display: flex; gap: 14px; padding: 6px 0; font-size: 14px; align-items: baseline; }
.d-label { flex: 0 0 108px; color: var(--muted); font-weight: 600; font-size: 13px; }
.d-value { flex: 1; font-weight: 600; }
.d-value em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: 6px; }
.d-text { margin: 0; font-size: 13.5px; line-height: 1.62; white-space: pre-wrap; }
.d-text.muted { color: var(--muted); font-size: 12.5px; }
.d-none { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }

.d-actions {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border);
}

@media (max-width: 620px) {
  .lead-detail { width: 100%; padding: 22px 18px 36px; }
  .d-money { grid-template-columns: repeat(2, 1fr); }
  .d-label { flex-basis: 92px; }
}

/* ---------- uploading scanned follow-up sheets ---------- */

.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* The quieter sibling of .primary-pill — same shape, so the two read as a pair,
   but it does not compete with the main action next to it.
   The border is tinted with the brand rather than using --line: at --line the
   button was invisible against the page in dark mode and read as a label, not
   something you could press. Quiet is not the same as absent. */
.ghost-pill {
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  border-radius: 999px; padding: 11px 20px; font-weight: 650; font-size: 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ghost-pill:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

/* Wider than a normal modal: the whole point of the review step is the scan and
   the fields read off it sitting side by side, close enough to compare.

   The height cap is not cosmetic. .create-modal is fixed and centred on the
   viewport, so twelve review cards would run off both ends of the screen with
   the Save button somewhere below the bottom edge and no way to reach it. */
.import-modal {
  width: min(1100px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

.imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 44px 20px; margin-top: 8px;
  border: 2px dashed var(--line); border-radius: 16px;
  color: var(--muted); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.imp-drop b { color: var(--text); font-size: 16px; }
.imp-drop:hover, .imp-drop.is-over { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }

.imp-progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 18px 0 10px; }
.imp-progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--grad-brand); transition: width .3s ease; }
.imp-progress-text { color: var(--muted); font-size: 13px; }

.imp-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: var(--paper); }
.imp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.imp-check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.imp-check input { width: auto; }
.imp-pages { color: var(--muted); font-size: 12px; }
.imp-unclear {
  font-size: 12.5px; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px;
  background: color-mix(in srgb, #d97706 12%, transparent); color: #b45309;
}
:root[data-theme="dark"] .imp-unclear { color: #fbbf24; }

.imp-card-body { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.imp-scan { display: flex; flex-direction: column; gap: 6px; }
.imp-scan img {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; display: block;
  background: #fff;   /* a scan is paper; it must not invert in dark mode */
}
.imp-scan-hint { color: var(--muted); font-size: 11.5px; text-align: center; }

.imp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.imp-f { display: flex; flex-direction: column; gap: 4px; }
.imp-f span { font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.imp-f input, .imp-f textarea { width: 100%; }
.imp-f-wide { grid-column: 1 / -1; }

.imp-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 8px; }
.imp-actions .primary { width: auto; padding-inline: 26px; }

/* Not a warning — this is "here is what happened", e.g. that no AI key is set. */
.info-box {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--text);
}

@media (max-width: 760px) {
  .imp-card-body { grid-template-columns: 1fr; }
  .imp-scan { max-width: 320px; }
}

/* ---------- the "if you wrote it today" quote on a lead ---------- */
.d-quote {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 14px 0; background: var(--paper);
}
.d-quote h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.d-quote-empty { color: var(--muted); font-size: 13px; }

.d-quote-lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.d-quote-lines td { padding: 4px 0; }
/* The figures are meant to be compared down the column, so they line up on the
   decimal rather than sitting ragged against the labels. */
.d-quote-lines td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-quote-total td { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }
.d-quote-pay { margin-top: 14px; }
.d-quote-ltv { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.d-quote-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* The "is that value real?" line under a lead's numbers. */
.d-value-check {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: -4px 0 14px;
  font-size: 12.5px; color: var(--muted);
}
.d-value-check b { color: var(--text); }

/* Status on a search result. A funded file and a live one look identical in a
   list of names, and ringing the wrong one wastes the call. */
.pal-state {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; letter-spacing: .01em;
}
.pal-live  { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.pal-good  { background: color-mix(in srgb, #16a34a 18%, transparent); color: #15803d; }
.pal-lead  { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.pal-muted { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
:root[data-theme="dark"] .pal-good { color: #4ade80; }
:root[data-theme="dark"] .pal-lead { color: #fbbf24; }

/* ---------- Clients: everyone in one list ---------- */
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cl-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.cl-chip .chip-n { color: var(--muted); font-weight: 700; margin-left: 6px; }
.cl-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; flex: none; background: var(--muted); }
.tone-good  .chip-dot { background: #16a34a; }
.tone-live  .chip-dot { background: var(--primary); }
.tone-lead  .chip-dot { background: #d97706; }
.tone-info  .chip-dot { background: #2563eb; }
.tone-muted .chip-dot { background: var(--muted); }
.cl-chip:hover { border-color: var(--primary); }
/* Active chip fills with its own status colour, so the filter tells you what
   you're looking at without reading the label. */
.cl-chip.on { color: #fff; }
.cl-chip.on .chip-n { color: #fff; opacity: .8; }
.cl-chip.on .chip-dot { background: #fff; }
.cl-chip.on { background: var(--primary); border-color: var(--primary); }
.cl-chip.tone-good.on  { background: #16a34a; border-color: #16a34a; }
.cl-chip.tone-lead.on  { background: #d97706; border-color: #d97706; }
.cl-chip.tone-info.on  { background: #2563eb; border-color: #2563eb; }
.cl-chip.tone-muted.on { background: var(--muted); border-color: var(--muted); }

.cl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cl-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.cl-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cl-table tr:last-child td { border-bottom: none; }
.cl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-name { font-weight: 650; color: var(--text); text-decoration: none; }
.cl-name:hover { color: var(--primary); text-decoration: underline; }
.cl-ref, .cl-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cl-count { color: var(--muted); font-size: 12.5px; padding: 12px; }

/* Summary tiles: the value in view, since this is "where the next deal comes
   from". Same tile language as the Loans workspace so the app reads as one. */
.cl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 4px 0 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.cl-tile { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--paper)); }
.cl-tile-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.cl-tile.accent .cl-tile-ico { background: color-mix(in srgb, var(--brand-3, #0d9488) 15%, transparent); color: var(--brand-3, #0d9488); }
.cl-tile-v { font-size: 20px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cl-tile-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* Person cell: initials avatar + name/meta stack. */
.cl-person { display: flex; align-items: center; gap: 11px; }
.cl-person-txt { display: flex; flex-direction: column; min-width: 0; }
.cl-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.cl-av-good  { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.cl-av-live  { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.cl-av-lead  { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.cl-av-muted { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
:root[data-theme="dark"] .cl-av-good { color: #4ade80; }
:root[data-theme="dark"] .cl-av-lead { color: #fbbf24; }

/* The whole row is the target now, not just the links inside it. */
.cl-table tbody tr.cl-row { transition: background .12s ease; cursor: pointer; }
.cl-table tbody tr.cl-row:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.cl-table tbody tr.cl-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cl-table td { vertical-align: middle; }

@media (max-width: 720px) {
  .cl-summary { gap: 10px; }
  .cl-tile-v { font-size: 18px; }
}

@media (max-width: 760px) {
  /* Property and value are the first things to go on a phone — a broker
     looking someone up on the move wants the name and the number to tap. */
  .cl-table th:nth-child(3), .cl-table td:nth-child(3),
  .cl-table th:nth-child(4), .cl-table td:nth-child(4) { display: none; }
}

/* ---------- Calls: one person at a time ---------- */
.call-left { color: var(--muted); font-size: 13px; font-weight: 650; }
.call-card { max-width: 680px; margin: 0 auto; padding: 26px 28px; }

.call-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.call-when {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}
.call-when.late { color: #dc2626; }
:root[data-theme="dark"] .call-when.late { color: #f87171; }
.call-name { font-size: 27px; margin: 4px 0 2px; }
.call-meta { color: var(--muted); font-size: 13px; }
.call-count { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* The number is the point of the screen — big enough to tap on a phone without
   aiming, and obviously a link rather than a label. */
.call-number {
  display: block; text-align: center; margin: 20px 0 6px;
  font-size: 30px; font-weight: 750; letter-spacing: .02em;
  color: var(--primary); text-decoration: none;
  padding: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.call-number:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.call-nonumber { color: var(--muted); background: none; font-size: 16px; font-weight: 600; }

.call-figures { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.call-why, .call-last {
  font-size: 13px; line-height: 1.55; padding: 10px 12px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line); margin-bottom: 10px;
}
.call-last { color: var(--muted); font-size: 12.5px; }

.call-note-label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 650; margin: 14px 0 0; }
.call-note-label textarea { width: 100%; margin-top: 6px; }

.call-prompt { font-weight: 700; margin: 18px 0 10px; }
.call-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
/* Big targets: this gets used one-handed, on a phone, between calls. */
.call-btn {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px; cursor: pointer;
  /* --line is near-invisible against the panel in dark mode, which made these
     read as a list of words rather than eight things you can press. Same trap
     that made .ghost-pill look like a label. */
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  font-size: 14.5px; font-weight: 650; text-align: left;
  transition: border-color .12s, background .12s, transform .08s;
}
.call-btn span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.call-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.call-btn:active { transform: translateY(1px); }
/* The two that end a lead look different from the six that keep it alive, so
   nobody closes someone out by tapping the wrong tile in a hurry. */
.call-wrong-number, .call-not-interested { border-color: color-mix(in srgb, #dc2626 35%, transparent); }
.call-wrong-number:hover, .call-not-interested:hover {
  border-color: #dc2626; background: color-mix(in srgb, #dc2626 8%, transparent);
}
.call-interested { border-color: color-mix(in srgb, #16a34a 40%, transparent); }
.call-interested:hover { border-color: #16a34a; background: color-mix(in srgb, #16a34a 9%, transparent); }

.call-foot { display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; }
.call-done { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 30px; }
.call-done h2 { font-size: 22px; margin-bottom: 8px; }
.call-done .sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

@media (max-width: 560px) {
  .call-actions { grid-template-columns: 1fr 1fr; }
  .call-number { font-size: 26px; }
}

/* Shortcut number on each outcome tile — discoverable, not a secret. */
.call-key {
  position: absolute; top: 8px; right: 10px;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 5px; padding: 1px 5px; line-height: 1.4;
}
.call-btn { position: relative; padding-right: 34px; }
.call-hint { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.call-hint kbd {
  font: inherit; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

/* Skeleton while the queue loads, so the screen has shape before data. */
.sk { border-radius: 10px; background: color-mix(in srgb, var(--text) 8%, transparent);
      animation: skpulse 1.4s ease-in-out infinite; }
.sk-line { height: 18px; margin-bottom: 18px; }
.sk-num { height: 72px; margin-bottom: 18px; }
.sk-tiles { height: 190px; }
@keyframes skpulse { 0%,100% { opacity: .55 } 50% { opacity: .95 } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none } }

/* Bulk actions on leads. Only appears once something is ticked. */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.bulk-count { font-weight: 700; font-size: 13.5px; color: var(--primary); }
.bulk-col { width: 34px; text-align: center; }
.bulk-col input { width: auto; cursor: pointer; }

/* Integrations: credit / AUS / pricing connection cards. */
.integ { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.integ.on { border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.integ-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.integ-head b { font-size: 14.5px; }
.integ-status { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.integ-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); opacity: .4; margin-top: 5px; flex: none; }
.integ-dot.on { background: #16a34a; opacity: 1; }
.integ-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 10px; }
.integ-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.integ-form .integ-key { width: 100%; }
.integ-links { font-size: 11.5px; margin-top: 8px; }
.integ-links a { color: var(--primary); text-decoration: none; }
.integ-links a:hover { text-decoration: underline; }
@media (max-width: 620px) { .integ-form { grid-template-columns: 1fr; } }

/* "More" overflow in the primary nav. Matches the staff-nav link shape so it
   sits in the row as a peer, and drops a menu of the occasional destinations. */
.nav-more { position: relative; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: none; border: none; font: inherit; color: var(--n-500);
  padding: 8px 12px; border-radius: 9px;
}
.nav-more-btn:hover, .nav-more-btn.active { color: var(--primary-dark); background: var(--brand-50); }
.nav-more-menu {
  /* Fixed, not absolute: the nav's ancestors carry overflow:hidden /
     overflow-x:auto (to stop the row overrunning the toolbar), and an absolute
     dropdown that hangs BELOW the row gets clipped by them — so it opened but
     never painted. Fixed escapes every ancestor clip; nav.js sets top/right
     from the button's position on open. */
  position: fixed; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(20, 20, 45, .18); padding: 6px; z-index: 120;
  display: none;
}
.nav-more.open .nav-more-menu { display: block; }
/* In icon-only mode the generic ".staff-nav a span" hide also blanks the
   dropdown's own labels (the menu lives inside .staff-nav), leaving four
   unlabelled icons. The dropdown always has room — keep its words. */
.staff-topbar.tight .nav-more-menu a span,
.staff-topbar.compact .nav-more-menu a span { display: inline; }
.nav-more-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 550;
}
.nav-more-menu a:hover { background: var(--brand-50); color: var(--primary-dark); }
.nav-more-menu a.active { color: var(--primary-dark); font-weight: 700; }
/* When the row goes icon-only, the More label follows the others. */
.staff-topbar.compact .nav-more-btn span { display: none; }

/* Internal team chat on a loan — distinct from the borrower message thread. */
.chat-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted); padding: 8px 12px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 8px;
}
.chat-loading { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }

/* Unread badge on a nav item. */
.staff-nav a { position: relative; }
.nav-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ---------- Direct messages inbox ---------- */
.dm-layout {
  display: grid; grid-template-columns: 300px 1fr; gap: 16px;
  height: calc(100vh - 210px); min-height: 420px;
}
.dm-people {
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
  overflow-y: auto; padding: 6px;
}
.dm-person {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 11px; border: none; background: none; border-radius: 10px; cursor: pointer;
  color: var(--text); transition: background .12s;
}
.dm-person:hover { background: var(--surface-2, var(--brand-50)); }
.dm-person.active { background: var(--brand-50); }
.dm-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--grad-brand); color: #fff;
}
.dm-person-body { min-width: 0; flex: 1; }
.dm-person-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dm-person-top b { font-size: 14px; }
.dm-person-sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; flex: none;
}

.dm-convo {
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
}
.dm-empty { margin: auto; text-align: center; color: var(--muted); }
.dm-open { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dm-convo-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.dm-convo-head b { font-size: 15px; }
.dm-convo-head span { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.dm-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.dm-thread-empty { margin: auto; color: var(--muted); font-size: 13px; }
.dm-row { display: flex; }
.dm-row.mine { justify-content: flex-end; }
.dm-bubble {
  max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  background: var(--surface-2, #eef1f6); color: var(--text); border-bottom-left-radius: 5px;
}
.dm-bubble.mine { background: var(--primary); color: var(--on-primary, #fff); border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.dm-meta { display: block; font-size: 10.5px; opacity: .7; margin-top: 3px; }
.dm-loan { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11.5px; opacity: .9; text-decoration: underline; color: inherit; }
.dm-send { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.dm-send input { flex: 1; }
.dm-send .primary { width: auto; padding-inline: 22px; }

@media (max-width: 720px) {
  .dm-layout { grid-template-columns: 1fr; height: auto; }
  .dm-people { max-height: 40vh; }
  .dm-convo { min-height: 60vh; }
}

/* ---------- slide-out team chat panel (on every screen) ---------- */
.chat-backdrop {
  position: fixed; inset: 0; background: rgba(10,12,20,.35); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.chat-backdrop.open { opacity: 1; pointer-events: auto; }
.chat-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -14px 0 40px rgba(15,20,40,.22); z-index: 91;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.chat-panel.open { transform: translateX(0); }
.chat-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); flex: none;
}
.chat-panel-head b { flex: 1; font-size: 15px; }
.chat-head-actions { display: flex; align-items: center; gap: 4px; }
.chat-back, .chat-close, .chat-expand {
  background: none; border: none; cursor: pointer; color: var(--muted);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; text-decoration: none;
}
.chat-back:hover, .chat-close:hover, .chat-expand:hover { background: var(--brand-50); color: var(--primary-dark); }
.chat-people { flex: 1; overflow-y: auto; padding: 6px; }
.chat-person {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 11px; border: none; background: none; border-radius: 10px; cursor: pointer; color: var(--text);
}
.chat-person:hover { background: var(--brand-50); }
.chat-empty { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }
.chat-convo { flex: 1; min-height: 0; flex-direction: column; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); flex: none; }
.chat-compose input { flex: 1; }
.chat-compose .primary { width: auto; padding-inline: 14px; display: grid; place-items: center; }

/* The envelope badge pulses once when it appears, to catch the eye. */
.chat-pulse { animation: chatpulse 1.6s ease-in-out 2; }
@keyframes chatpulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.25) } }
@media (prefers-reduced-motion: reduce) { .chat-pulse { animation: none } }

/* A distinct, clickable toast when a message lands while you are elsewhere. */
.toast.chat-toast { cursor: pointer; align-items: flex-start; border-left: 3px solid var(--primary); }
.toast.chat-toast b { font-size: 13px; }
.toast.chat-toast span { font-size: 12.5px; line-height: 1.4; }

/* ---------- try-before-signup demo banner ---------- */
#demo-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; font-size: 13.5px; font-weight: 600;
  background: linear-gradient(90deg, var(--primary), var(--brand-3, #0d9488)); color: #fff;
  box-shadow: 0 -6px 24px -12px rgba(20,20,40,.5);
}
#demo-banner .icn { flex: none; }
#demo-banner span { opacity: .95; }
#demo-banner a {
  color: var(--primary); background: #fff; text-decoration: none; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap; transition: transform .12s ease;
}
#demo-banner a:hover { transform: translateY(-1px); }
body.has-demo-banner { padding-bottom: 52px; }
@media (max-width: 600px) { #demo-banner span { display: none; } }

/* ---------- Ask Emery (loan-drawer quick actions) ---------- */
.emery-btn {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--primary); font-weight: 650;
}
.emery-btn:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); }
.emery-sheet { max-width: 520px; }
.emery-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.emery-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .12s ease;
}
.emery-chip:hover { border-color: var(--primary); color: var(--primary); }
.emery-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.emery-out {
  min-height: 96px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 3%, var(--surface)); padding: 14px 16px;
}
.emery-hint { color: var(--muted); font-size: 13.5px; margin: 0; }
.emery-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: 8px; }
.emery-text {
  margin: 0; font: inherit; font-size: 14px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-wrap: break-word;
}

/* ---------- Dashboard: Emery brief strip ---------- */
#emery-brief { margin: 4px 0 18px; }
.emery-brief-card {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--radius-lg, 16px);
  background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), color-mix(in srgb, var(--brand-3, #0d9488) 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.emery-brief-card .eb-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--brand-3, #0d9488));
}
.eb-body { flex: 1; min-width: 0; }
.eb-line { font-size: 15px; font-weight: 650; color: var(--text); }
.eb-line b { font-weight: 800; }
.eb-sum { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.eb-sum b { color: var(--text); font-weight: 750; }
.eb-dot { margin: 0 8px; opacity: .5; }
.eb-cta {
  flex: none; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-decoration: none; background: var(--primary); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 9px 15px; border-radius: 10px; transition: transform .12s ease, filter .12s ease;
}
.eb-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.eb-cta .icn { vertical-align: -2px; margin-left: 4px; }
.eb-cta-sub { font-size: 11px; font-weight: 500; opacity: .85; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .eb-cta-sub, .eb-cta { display: none; } }

/* ---------- Dashboard: pipeline funnel ---------- */
.panel-h-row { display: flex; align-items: baseline; justify-content: space-between; }
.panel-h-link { font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
#funnel { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.fn-row {
  display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 12px;
  padding: 7px 8px; border-radius: 9px; text-decoration: none; transition: background .12s ease;
}
.fn-row:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.fn-stage { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-bar { height: 12px; background: var(--n-100, #eef); border-radius: 999px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.fn-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-count b { color: var(--text); font-weight: 700; font-size: 13.5px; }

/* ---------- Dashboard: collapsed onboarding ---------- */
.setup-done { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.setup-done .icn { color: var(--green); flex: none; }
.setup-done a { color: var(--primary); text-decoration: none; font-weight: 650; }
@media (max-width: 640px) { .fn-row { grid-template-columns: 96px 1fr auto; gap: 8px; } }

/* ---------- Loans workspace: premium stat tiles ---------- */
.wstat {
  display: flex; align-items: center; gap: 12px; padding: 14px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 1px 2px rgba(20,20,40,.04); animation: rise .22s ease-out both;
}
.stats .wstat:nth-child(2){animation-delay:30ms}.stats .wstat:nth-child(3){animation-delay:60ms}
.stats .wstat:nth-child(4){animation-delay:90ms}.stats .wstat:nth-child(5){animation-delay:120ms}
.wstat-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.wstat-value { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wstat-label { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.wstat.warn .wstat-ico { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.wstat.good .wstat-ico { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.wstat.good .wstat-value { color: var(--green); }
.wstat.bad  .wstat-ico { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.wstat.bad  .wstat-value { color: var(--red); }

/* ---------- Loans workspace: stage-coloured board columns ---------- */
.column { border-top: 3px solid var(--stage, var(--primary)); }
.col-head { align-items: center; }
.col-name { display: inline-flex; align-items: center; gap: 7px; }
.col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stage, var(--primary)); flex: none; }
.col-meta { display: inline-flex; align-items: center; gap: 7px; }
.col-vol { font-size: 10.5px; font-weight: 700; color: var(--stage, var(--primary));
  background: color-mix(in srgb, var(--stage) 12%, transparent); border-radius: 5px; padding: 1px 6px; }
.col-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 14px 0; opacity: .7; }