/* ============================================================================
   Bylt Capital CRM — styles
   Royal blue chrome, cool paper canvas, serif for names and money, sans for
   everything else. Borders carry the structure; shadows only lift sheets.
   ========================================================================== */
:root {
  --blue:        #0B5CB5;   /* chrome, primary buttons */
  --blue-deep:   #083E80;   /* pressed, gradient end */
  --blue-bright: #117ACA;   /* links, active tab, focus */
  --blue-tint:   #E3ECF8;   /* chips, selected row */
  --canvas:      #F2F6FB;
  --canvas-2:    #E8EFF8;
  --paper:       #FFFFFF;
  --rule:        #D3DEEE;
  --rule-soft:   #E4EBF5;
  --ink:         #0A2342;
  --ink-dim:     #415575;
  --ink-mute:    #71839F;

  --st-new:       #1563C2;  --st-new-bg:       #E2EDFB;
  --st-submitted: #8A5A00;  --st-submitted-bg: #FCF0D4;
  --st-review:    #6240B5;  --st-review-bg:    #EEE8FA;
  --st-funded:    #0C7044;  --st-funded-bg:    #DFF3E8;
  --st-declined:  #AE2018;  --st-declined-bg:  #FAE4E2;
  --st-neutral:   #415575;  --st-neutral-bg:   #E8EDF4;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --topbar-h: 56px;
  --r: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--sans); font-size: 14px; line-height: 1.45;
  color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#root { height: 100%; }
@supports (height: 100dvh) { html, body, #root { height: 100dvh; } }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
.serif { font-family: var(--serif); font-feature-settings: "lnum"; }
.tnum  { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; border-radius: 4px; }

.boot { height: 100%; display: grid; place-items: center; color: var(--ink-mute); font-size: 13px; }

/* ── Small parts ─────────────────────────────────────────────────────────── */
.label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.muted { color: var(--ink-mute); }
.dim   { color: var(--ink-dim); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { border-color: #B5C6DE; background: #FAFCFE; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-danger { color: var(--st-declined); }
.btn-danger:hover { background: var(--st-declined-bg); border-color: #E9B8B4; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-dim); }
.btn-quiet:hover { background: var(--canvas-2); border-color: transparent; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r); display: inline-grid; place-items: center;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-dim); flex-shrink: 0;
}
.icon-btn:hover { background: var(--canvas); color: var(--ink); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--st-neutral); background: var(--st-neutral-bg);
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
.pill.plain::before { display: none; }
.pill.s-new,       .pill.s-offer    { color: var(--st-new);       background: var(--st-new-bg); }
.pill.s-submitted, .pill.s-pending  { color: var(--st-submitted); background: var(--st-submitted-bg); }
.pill.s-review,    .pill.s-counter  { color: var(--st-review);    background: var(--st-review-bg); }
.pill.s-funded,    .pill.s-approved, .pill.s-active { color: var(--st-funded); background: var(--st-funded-bg); }
.pill.s-declined,  .pill.s-off      { color: var(--st-declined);  background: var(--st-declined-bg); }

.avatar {
  width: 36px; height: 36px; border-radius: 99px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--blue-tint); color: var(--blue-deep);
}
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 48px; height: 48px; font-size: 15px; }
.avatar.square { border-radius: var(--r); }

.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule-soft);
}
.card-body { padding: 16px; }
.card-flush > .row:last-child { border-bottom: 0; }

.empty { text-align: center; padding: 44px 24px; color: var(--ink-dim); }
.empty h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 40ch; margin: 0 auto 16px; font-size: 13.5px; }

.banner {
  padding: 10px 14px; border-radius: var(--r); font-size: 13px;
  background: var(--st-declined-bg); color: var(--st-declined); border: 1px solid #EDC2BE;
}
.banner.info { background: var(--blue-tint); color: var(--blue-deep); border-color: #C5D7EF; }

/* ── Sign-in ─────────────────────────────────────────────────────────────── */
.login { min-height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-brand {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(155deg, #1D74CF 0%, var(--blue) 55%, var(--blue-deep) 115%);
  padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.login-brand .monogram {
  position: absolute; right: -60px; bottom: -110px; font-family: var(--serif);
  font-size: 520px; line-height: 1; letter-spacing: -24px; opacity: 0.05; user-select: none;
}
.login-brand h1 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; max-width: 13ch; }
.login-brand p  { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.76); max-width: 44ch; margin-top: 20px; }
.login-brand .foot { font-size: 12px; color: rgba(255,255,255,0.6); position: relative; }
.login-form-side { display: grid; place-items: center; padding: 40px 24px; background: var(--canvas); }
.login-form { width: 100%; max-width: 400px; }
.login-form h2 { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; margin: 6px 0 4px; }
.login-form .sub { color: var(--ink-dim); margin-bottom: 24px; }
.login-form .field { margin-bottom: 16px; }
.login-form .foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-mute); text-align: center; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px; background: #fff; color: var(--blue);
  display: grid; place-items: center; font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em;
}
.brand-word { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.brand.lg .brand-mark { width: 38px; height: 38px; border-radius: 9px; font-size: 16px; }
.brand.lg .brand-word { font-size: 32px; }
.brand.on-light { color: var(--ink); }
.brand.on-light .brand-mark { background: var(--blue); color: #fff; }
.brand-logo { display: block; height: 28px; width: auto; }
.brand.lg .brand-logo { height: 40px; }

/* ── App shell ───────────────────────────────────────────────────────────── */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0; background: var(--blue); color: #fff;
  display: flex; align-items: center; gap: 20px; padding: 0 18px; position: relative; z-index: 20;
}
.topbar .brand-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); border-left: 1px solid rgba(255,255,255,0.25); padding-left: 10px; margin-left: 2px;
}
.nav { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); }
.nav button {
  padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,0.86); white-space: nowrap;
}
.nav button:hover { background: rgba(255,255,255,0.10); }
.nav button[aria-current="page"] { background: #fff; color: var(--blue); }
.topbar .spacer { flex: 1; }
.userchip { display: flex; align-items: center; gap: 9px; text-align: left; color: #fff; border-radius: var(--r); padding: 3px 4px; }
.userchip:hover { background: rgba(255,255,255,0.10); }
.userchip .avatar { background: #fff; color: var(--blue); }
.userchip .who { line-height: 1.15; display: block; }
.userchip .who b { display: block; font-size: 12.5px; font-weight: 600; }
.userchip .who span { display: block; font-size: 10.5px; color: rgba(255,255,255,0.68); }
.signout {
  height: 32px; padding: 0 12px; border-radius: var(--r); font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
}
.signout:hover { background: rgba(255,255,255,0.18); }
.bell {
  position: relative; width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; flex-shrink: 0;
  color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
}
.bell:hover { background: rgba(255,255,255,0.18); }
.bell .badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
  background: #F2B01E; color: #3A2A00; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--blue);
}
.tabbar, .subnav, .nav .more-btn { display: none; }
.more-page { max-width: 560px; }
.more-page > * + * { margin-top: 16px; }
.account { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.more-row { width: 100%; text-align: left; align-items: center; }
.more-row:hover { background: var(--canvas); }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 336px minmax(0, 1fr) 324px; }
.workspace.single { display: block; overflow-y: auto; }
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(10,35,66,0.2) transparent; }

/* ── Left rail: deal list ────────────────────────────────────────────────── */
.rail { background: var(--paper); border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; }
.rail-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--rule-soft); }
.rail-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.rail-title h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; }
.search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--canvas); font-size: 13px;
}
.search input:focus { outline: none; border-color: var(--blue-bright); background: #fff; box-shadow: 0 0 0 3px rgba(17,122,202,0.14); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--rule); color: var(--ink-dim); background: var(--paper);
}
.filter .n { font-size: 10.5px; font-weight: 600; color: var(--ink-mute); }
.filter[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter[aria-pressed="true"] .n { color: rgba(255,255,255,0.75); }
.rail-list { flex: 1; min-height: 0; }
.deal-row {
  display: flex; gap: 12px; width: 100%; text-align: left; padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft); border-left: 3px solid transparent;
}
.deal-row:hover { background: var(--canvas); }
.deal-row[aria-current="true"] { background: var(--blue-tint); border-left-color: var(--blue); }
.deal-row .main { flex: 1; min-width: 0; }
.deal-row .name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-row .sub  { font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-row .meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.deal-row .amt  { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }

/* ── Center: deal file ───────────────────────────────────────────────────── */
.file { display: flex; flex-direction: column; min-width: 0; min-height: 0; container: file / inline-size; }
.file-head { background: var(--paper); padding: 18px 24px 16px; border-bottom: 1px solid var(--rule); }
.back { display: none; }
.file-top { display: flex; justify-content: space-between; gap: 24px; }
.file-id { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.file-name { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.12; overflow-wrap: anywhere; }
.file-contact { margin-top: 6px; color: var(--ink-dim); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.file-money { text-align: right; flex-shrink: 0; }
.file-money .amount { font-family: var(--serif); font-weight: 500; font-size: 34px; letter-spacing: -0.02em; line-height: 1.05; }
.file-money .amount .cur { color: var(--ink-mute); font-size: 0.7em; margin-right: 1px; }
.file-money .facts { margin-top: 6px; font-size: 12.5px; color: var(--ink-dim); display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.file-money .facts b { color: var(--ink); font-weight: 600; }
.file-actions { display: none; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.tabs { display: flex; gap: 4px; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0 16px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 13px 12px 11px; font-size: 13.5px; font-weight: 600; color: var(--ink-dim);
  border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.tab .sm, .file-actions .sm { display: none; }
.tab .n { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--canvas-2); color: var(--ink-dim); font-weight: 600; }
.tab-body { flex: 1; min-height: 0; padding: 20px 24px 40px; }
.tab-body > * + * { margin-top: 16px; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Each cell draws its own right and bottom hairline; the card clips the outer ones. */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; }
.stat { padding: 14px 16px; min-width: 0; box-shadow: 1px 0 0 var(--rule-soft), 0 1px 0 var(--rule-soft); }
.stat .v { font-family: var(--serif); font-weight: 500; font-size: 22px; margin-top: 4px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { height: 8px; border-radius: 99px; background: var(--canvas-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--st-funded); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 12px; padding: 10px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-mute); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
dl { margin: 0; }
.notes { white-space: pre-wrap; font-size: 13.5px; color: var(--ink-dim); }

/* rows used by submissions / activity / documents / lists */
.row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); align-items: flex-start; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .line { font-size: 13px; color: var(--ink-dim); margin-top: 2px; overflow-wrap: anywhere; }
.row .when { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.row .right { text-align: right; flex-shrink: 0; }
.row .big { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.1; }
.row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.terms { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-dim); margin-top: 4px; }
.terms b { color: var(--ink); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--canvas-2); color: var(--ink-dim); }
.detail { margin-top: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--canvas); font-size: 13px; color: var(--ink-dim); }
.detail pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: 12.5px; max-height: 220px; overflow: auto; }
.link-btn { color: var(--blue-bright); font-weight: 600; font-size: 12.5px; }
.link-btn:hover { text-decoration: underline; }
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px;
  background: var(--canvas-2); color: var(--ink-dim); text-transform: uppercase;
}
.tag.t-grok { background: var(--st-review-bg); color: var(--st-review); }
.tag.t-mile { background: var(--st-funded-bg); color: var(--st-funded); }
.act-icon { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; background: var(--blue-tint); color: var(--blue-deep); flex-shrink: 0; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.slot { border: 1px dashed #B9C9DF; border-radius: 12px; padding: 14px; background: var(--paper); min-width: 0; }
.slot.filled { border-style: solid; border-color: var(--rule); }
.slot .name { font-weight: 600; font-size: 13px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.doc-icon { width: 34px; height: 42px; border-radius: 6px; background: var(--canvas-2); border: 1px solid var(--rule); display: grid; place-items: end center; padding-bottom: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); flex-shrink: 0; }

/* ── Right rail ──────────────────────────────────────────────────────────── */
.context { background: var(--paper); border-left: 1px solid var(--rule); padding: 18px 16px 32px; min-height: 0; }
.context > * + * { margin-top: 20px; }
.context .label { margin-bottom: 8px; display: block; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action {
  display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--canvas); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap;
}
.action:hover { background: var(--blue-tint); border-color: #BCD0EC; }
.action svg { color: var(--blue); flex-shrink: 0; }
.action.wide { grid-column: 1 / -1; }
.mini { border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); }
.mini-row { padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); font-size: 12.5px; }
.mini-row:last-child { border-bottom: 0; }
.mini-row .when { font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }
.offer-card { border: 1px solid #BFD9C9; background: var(--st-funded-bg); border-radius: 10px; padding: 12px; }
.offer-card .amt { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.1; margin: 2px 0; }

/* ── Full-width pages (leads, clients, team, partners, settings) ─────────── */
.page { max-width: 1120px; margin: 0 auto; padding: 24px 24px 56px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.page-head p { color: var(--ink-dim); margin-top: 4px; max-width: 62ch; }
.page-tools { display: flex; gap: 8px; align-items: center; }
.page-tools .search { width: 260px; }
.page-tools .search input { background: var(--paper); }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); padding: 10px 16px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.list td { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list td.num, table.list th.num { text-align: right; }
table.list .who { display: flex; align-items: center; gap: 10px; min-width: 180px; }
table.list .who b { font-weight: 600; display: block; }
table.list .who span { font-size: 12.5px; color: var(--ink-dim); }
table.list .who > div > span { display: block; }
table.list td.acts { text-align: right; white-space: nowrap; }
table.list td.acts .btn + .btn { margin-left: 6px; }
.token { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-dim); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .t { font-weight: 600; }
.switch-row .d { font-size: 12.5px; color: var(--ink-dim); }
.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: #C3CEDD; transition: background 120ms ease; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: #fff; transition: transform 120ms ease; }
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field { display: block; min-width: 0; }
.field > label { display: block; }
.field .label { display: block; margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--ink-mute); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--paper); font-size: 14px;
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23415575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(17,122,202,0.14); }
.input::placeholder, .textarea::placeholder { color: #9AA9BF; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { padding: 18px 24px; border-bottom: 1px solid var(--rule-soft); }
.form-section:last-child { border-bottom: 0; }
.form-section > .label { display: block; margin-bottom: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--canvas-2); border: 1px solid var(--rule); max-width: 100%; }
.seg button { padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--blue); margin: 0; }
.drop { border: 1.5px dashed #B3C5DE; border-radius: 12px; padding: 22px 16px; text-align: center; background: var(--canvas); color: var(--ink-dim); font-size: 13.5px; }
.drop.over { background: var(--blue-tint); border-color: var(--blue-bright); }
.drop b { color: var(--ink); }

/* ── Sheets (slide in from the right; rise from the bottom on phones) ────── */
.scrim { position: fixed; inset: 0; background: rgba(8,30,62,0.42); z-index: 50; animation: fade 140ms ease-out; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 51;
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: -18px 0 48px rgba(8,30,62,0.22); animation: slide-in 200ms cubic-bezier(.2,.8,.2,1);
}
.sheet-head { padding: 18px 24px 16px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; background: var(--canvas); }
.sheet-head h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; line-height: 1.15; margin-top: 3px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; }
.sheet-foot { padding: 14px 24px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 10px; align-items: center; background: var(--paper); }
.sheet-foot .err { margin-right: auto; color: var(--st-declined); font-size: 13px; }
.dialog {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); background: var(--paper); border-radius: 14px; padding: 22px;
  box-shadow: 0 24px 64px rgba(8,30,62,0.3);
}
.dialog h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin-bottom: 8px; }
.dialog p { color: var(--ink-dim); }
.dialog .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.scrim.top { z-index: 60; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 99px; font-size: 13px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(8,30,62,0.3); max-width: calc(100vw - 32px);
}
.toast.bad { background: var(--st-declined); }
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise     { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade     { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Home ────────────────────────────────────────────────────────────────── */
/* Wide: figures across the top, lists in a grid, updates down the right — one screen, no page scroll. */
.home.dash { max-width: 1600px; margin: 0 auto; padding: 14px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.dash-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 24px; }
.home-head > div:first-child { min-width: 0; }
.home-head h1 { font-family: var(--serif); font-weight: 500; font-size: 27px; letter-spacing: -0.02em; line-height: 1.1; margin-top: 1px; }
.home-head p { color: var(--ink-dim); margin-top: 3px; font-size: 13.5px; }
.home-tools { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.home-tools .seg button { padding: 5px 11px; font-size: 12.5px; }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left; padding: 10px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); min-width: 0; }
.kpi:hover { border-color: #B5C6DE; }
.kpi .k { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.kpi .k, .kpi .s { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-weight: 500; font-size: 26px; line-height: 1.1; }
.kpi .s { font-size: 12px; color: var(--ink-mute); }
.kpi.t-bad { background: var(--st-declined-bg); border-color: #EDC2BE; } .kpi.t-bad .k, .kpi.t-bad .v { color: var(--st-declined); }

.pipe-card { padding: 9px 16px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.pipe-card h2, .hsec-head h2 { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pipe-card h2 .n, .hsec-head h2 .n { font-family: var(--sans); font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--blue-tint); color: var(--blue-deep); }
.pipe { flex: 1 1 140px; display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; background: var(--canvas-2); min-width: 120px; }
.pipe i { display: block; min-width: 10px; }
.pipe i.s-other { background: var(--ink-mute); }
.pipe i.s-new { background: var(--st-new); } .pipe i.s-submitted { background: #D69A1C; } .pipe i.s-review { background: var(--st-review); }
.pipe-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--ink-dim); }
.pipe-legend .pl { display: inline-flex; align-items: center; gap: 7px; }
.pipe-legend b { color: var(--ink); font-weight: 600; }
.pipe-legend .pl > b { font-size: 14px; }
.pipe-legend .closed { display: inline; padding-left: 14px; border-left: 1px solid var(--rule); }

/* The lists. Each is a card whose rows scroll inside it. */
.dash-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dash-cards > #h-attention, .dash-cards > #h-offers { grid-column: span 3; }
.dash-cards > #h-renewals, .dash-cards > #h-funded, .dash-cards > #h-birthdays { grid-column: span 2; }
.hsec { overflow: hidden; display: flex; flex-direction: column; min-height: 0; transition: box-shadow .25s, border-color .25s; }
.hsec.t-bad { border-color: #E5B4B0; }
.hsec.flash { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(17,122,202,0.22); }
.hsec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 0; flex-shrink: 0; }
.hsec.t-bad .hsec-head h2 .n { background: var(--st-declined-bg); color: var(--st-declined); }
.hsec-hint { padding: 2px 14px 0; font-size: 12.5px; color: var(--ink-mute); flex-shrink: 0; }
.hsec-body { margin-top: 8px; max-height: 330px; overflow-y: auto; }
.hrow { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 8px 14px; border-top: 1px solid var(--rule-soft); }
.hrow:hover { background: var(--canvas); }
.hrow .grow { flex: 1; min-width: 0; display: block; }
.hrow .t { display: block; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.hrow .t .dot { display: inline-block; margin-right: 7px; vertical-align: 2px; }
.hrow .t .pill { margin-left: 4px; vertical-align: 1px; }
.hrow .d { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; overflow-wrap: anywhere; }
.hrow .r { text-align: right; flex-shrink: 0; display: block; }
.hrow .r b { display: block; font-weight: 500; font-size: 17px; line-height: 1.15; white-space: nowrap; }
.hrow .r span { display: block; font-size: 12px; color: var(--ink-mute); }
.hrow .chev { color: #A9B7CC; flex-shrink: 0; display: grid; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: var(--blue-bright); flex-shrink: 0; }
.hicon { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; flex-shrink: 0; background: var(--blue-tint); color: var(--blue-deep); }
.hicon.t-bad  { background: var(--st-declined-bg); color: var(--st-declined); }
.hicon.t-warn { background: var(--st-submitted-bg); color: var(--st-submitted); }
.hicon.t-good { background: var(--st-funded-bg); color: var(--st-funded); }
.hicon.t-grok { background: var(--st-review-bg); color: var(--st-review); }
.hicon.t-quiet { background: var(--canvas-2); color: var(--ink-dim); }
.hnone { padding: 12px 14px 14px; font-size: 13.5px; color: var(--ink-dim); border-top: 1px solid var(--rule-soft); }
.hfoot { padding: 7px 14px 8px; font-size: 12.5px; color: var(--ink-dim); border-top: 1px solid var(--rule-soft); background: var(--canvas); flex-shrink: 0; }
.hfoot b { color: var(--ink); font-weight: 600; }
/* repayment meter: filled part on a lighter step of the same green */
.meter { display: block; height: 6px; border-radius: 99px; background: #CFEBDB; overflow: hidden; margin: 5px 0 3px; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--st-funded); }

/* Updates: Grok's changes and other notifications, down the right side */
.upd { position: sticky; top: 0; max-height: calc(100vh - var(--topbar-h) - 36px); }
.upd .hsec-body { max-height: none; flex: 1; min-height: 0; }
.updates { padding: 0 8px 10px; }
.updates .seg { margin: 0 8px 4px; }
.updates .seg button { padding: 5px 11px; font-size: 12.5px; }
.updates .hnone { border-top: 0; padding: 12px 8px; }
.ulabel { padding: 12px 8px 4px; display: block; }
.urow { display: flex; gap: 10px; width: 100%; text-align: left; padding: 9px 8px; border-radius: var(--r); align-items: flex-start; }
.urow:hover { background: var(--canvas); }
.urow .grow { flex: 1; min-width: 0; display: block; }
.urow .t { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.urow .d { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.urow .hicon { width: 26px; height: 26px; }

/* The row of counts that picks a list on phones and tablets (hidden on wide screens, where every list is showing) */
.hchips { display: none; }

/* Wide and tall enough: the whole of Home fits the window, and only the cards scroll. */
/* ── Offer links ─────────────────────────────────────────────────────────── */
.tag.t-offer { background: var(--blue-tint); color: var(--blue-deep); }
.offer-accepted { margin-top: 8px; padding: 10px 12px; border: 1px solid #BFD9C9; border-radius: var(--r); background: var(--st-funded-bg); font-size: 13.5px; }
.offer-accepted .when { margin-top: 2px; }
.offer-row { align-items: flex-start; }
.offer-row .title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.offer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.offer-url { margin-top: 8px; overflow-wrap: anywhere; user-select: all; }
.offer-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 10px; align-items: end; margin-bottom: 10px; }
.offer-line .icon-btn { margin-bottom: 4px; }
.offer-pkg { padding: 12px; margin-bottom: 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); }
.offer-pkg-head { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin-bottom: 8px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-row label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.form-section .detail b { display: block; margin-bottom: 2px; color: var(--ink); }

@media (min-width: 1181px) and (min-height: 700px) {
  .workspace.single.fit { overflow: hidden; }
  .home.dash { height: 100%; align-items: stretch; }
  .dash-main { min-height: 0; }
  .dash-cards { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .hsec-body { max-height: none; flex: 1; min-height: 0; }
  .upd { position: static; max-height: none; }
}

/* ── Commissions ─────────────────────────────────────────────────────────── */
.page.wide { max-width: 1280px; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fig { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); min-width: 0; }
.fig .k { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.fig .v { font-weight: 500; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.fig .s { font-size: 12px; color: var(--ink-mute); }
.fig.t-bad { background: var(--st-declined-bg); border-color: #EDC2BE; } .fig.t-bad .k, .fig.t-bad .v { color: var(--st-declined); }
.comm-tabs { margin: 16px 0 12px; }
.seg button .n { margin-left: 6px; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: rgba(11,92,181,0.12); color: var(--blue-deep); }
.seg button[aria-pressed="true"] .n { background: rgba(255,255,255,0.22); color: #fff; }
.monthpick { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.monthpick b { min-width: 126px; text-align: center; font-size: 13.5px; }
.monthpick .icon-btn:disabled { opacity: 0.35; cursor: default; }
.card-foot { padding: 10px 16px; font-size: 12.5px; color: var(--ink-dim); border-top: 1px solid var(--rule-soft); background: var(--canvas); border-radius: 0 0 12px 12px; }
.card-foot b { color: var(--ink); font-weight: 600; }
.card-flush > .row:has(+ .card-foot) { border-bottom: 0; }
.row-btn { width: 100%; text-align: left; align-items: center; }
.row-btn:hover { background: var(--canvas); }
.row-btn .grow, .row-btn .line, .row-btn .right, .row-btn .big { display: block; }
.comm-card .row, .page .card-flush > .row { align-items: center; }
.who-line { display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.link-btn.strong { font-size: 13.5px; color: var(--ink); text-align: left; }
table.list .who .link-btn.strong { display: block; }
.link-btn.strong:hover { color: var(--blue-bright); }
.row .title .link-btn { font-size: inherit; color: var(--ink); text-align: left; }
.row .title .link-btn:hover { color: var(--blue-bright); }
table.list td .sub { display: block; font-size: 12px; color: var(--ink-mute); font-weight: 400; }
.sheet.wide { width: min(780px, 100vw); }
.comm-top { display: flex; justify-content: space-between; gap: 14px 24px; padding: 14px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-soft); }
.comm-big { font-size: 28px; font-weight: 500; line-height: 1.15; }
.comm-top .line { font-size: 13px; color: var(--ink-dim); margin-top: 2px; overflow-wrap: anywhere; }
.comm-lender { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; max-width: 100%; }
.comm-amount { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.comm-amount .seg { margin-top: 21px; }
.line-edit { display: grid; grid-template-columns: minmax(0, 1fr) 104px auto; gap: 10px; align-items: end; margin-top: 12px; }
.line-edit.split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 96px auto; }
.line-out { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 40px; height: 42px; font-weight: 600; white-space: nowrap; }
.comm-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--ink-dim); }
.comm-sum b { color: var(--ink); }
.comm-sum .bad, .comm-sum .bad b { color: var(--st-declined); }

/* ── Lenders, statements, sending ────────────────────────────────────────── */
.contact-card { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--canvas); font-size: 13.5px; }
table.list .who span.clip { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }
.stat .s { font-size: 12px; color: var(--ink-mute); margin-top: 3px; line-height: 1.35; }
.stat .v.bad { color: var(--st-declined); }
.st-row { border-bottom: 1px solid var(--rule-soft); }
.st-row:last-child { border-bottom: 0; }
.st-row > .row { align-items: flex-start; border-bottom: 0; }
.st-row .title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.st-row > .st-detail { margin: 0 16px 14px; }
.chip.flag-bad  { background: var(--st-declined-bg); color: var(--st-declined); }
.chip.flag-warn { background: var(--st-submitted-bg); color: var(--st-submitted); }
.st-detail b { display: block; color: var(--ink); }
.st-kv { margin: 0 0 12px; }
.st-kv > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2px 12px; padding: 4px 0; border-bottom: 1px solid var(--rule-soft); }
.st-kv > div:last-child { border-bottom: 0; }
.st-kv dt { color: var(--ink-mute); }
.st-kv dd { margin: 0; color: var(--ink); }
.txn-wrap { margin-top: 8px; max-height: 420px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
table.txn { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.txn th { position: sticky; top: 0; background: var(--canvas-2); text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding: 6px 10px; white-space: nowrap; }
table.txn td { padding: 5px 10px; border-top: 1px solid var(--rule-soft); white-space: nowrap; color: var(--ink); }
table.txn td.desc { white-space: normal; overflow-wrap: anywhere; min-width: 180px; }
table.txn td.num, table.txn th.num { text-align: right; }
.st-row .title, .st-row .when, .st-row .line { overflow-wrap: anywhere; }
.linkpic-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.linkpic { display: block; padding: 4px; border: 2px solid var(--rule); border-radius: 10px; background: var(--paper); text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-dim); }
.linkpic img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 6px; margin-bottom: 4px; background: var(--canvas-2); }
.linkpic[aria-checked="true"] { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-tint); }

/* ── Narrower desktops / tablets: fold the right rails away ──────────────── */
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 320px minmax(0, 1fr); }
  .context { display: none; }
  .file-actions { display: flex; }
  .topbar .brand-tag, .userchip .who { display: none; }
  /* An Admin's extra sections fold into More, and show as a second row when one of them is open. */
  .nav .sec { display: none; }
  .nav .more-btn { display: block; }
  .subnav { display: flex; gap: 4px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--rule); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
  .subnav button { padding: 12px 12px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-dim); border-bottom: 2px solid transparent; white-space: nowrap; }
  .subnav button[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
  /* Home: one list at a time, picked from the row of counts; updates stay down the right. */
  .home.dash { grid-template-columns: minmax(0, 1fr) 300px; max-width: 1180px; }
  .home-head { flex-wrap: wrap; } .home-tools { flex-wrap: wrap; }
  .kpis { gap: 8px; } .kpi { padding: 10px 12px; } .kpi .k, .kpi .s { white-space: normal; }
  .hchips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .hchips button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 6px 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
  .hchips button[data-id="updates"] { display: none; }
  .hchips b { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.1; }
  .hchips span { font-size: 12px; font-weight: 600; color: var(--ink-dim); }
  .hchips button.t-bad b { color: var(--st-declined); } .hchips button.t-grok b { color: var(--st-review); }
  .hchips button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }
  .hchips button[aria-pressed="true"] b, .hchips button[aria-pressed="true"] span { color: #fff; }
  .dash-cards { display: block; }
  .dash-cards > .hsec:not(.on) { display: none; }
  .dash-cards:not(:has(> .on)) > #h-attention { display: flex; }   /* Updates was picked on a phone, then the window got wider */
  .hsec-body { max-height: none; overflow: visible; }
  .upd .hsec-body { overflow-y: auto; }
  .hsec.flash { box-shadow: none; border-color: var(--rule); } .hsec.t-bad.flash { border-color: #E5B4B0; }
  .hrow { padding: 12px 14px; } .hrow .t { font-size: 14px; }
}

/* ── Phones and small tablets: one column, bottom tab bar, bottom sheets ─── */
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; background: linear-gradient(165deg, #1D74CF 0%, var(--blue) 50%, var(--blue-deep) 115%); }
  .login-brand { background: none; padding: 28px 20px 8px; gap: 0; }
  .login-brand .pitch, .login-brand .foot, .login-brand .monogram { display: none; }
  .login-form-side { background: none; padding: 16px 16px 40px; place-items: start center; }
  .login-form { background: var(--paper); border-radius: 16px; padding: 24px 20px; box-shadow: 0 20px 50px rgba(4,24,54,0.3); }

  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .nav { display: none; }
  /* Bottom tab bar: the main sections sit under the thumb; the header keeps brand, updates and account. */
  .signout { display: none; }
  .app { padding-bottom: calc(59px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--paper); border-top: 1px solid var(--rule);
    padding: 4px 0 max(6px, env(safe-area-inset-bottom));
  }
  .tabbar button {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 48px; padding: 6px 0 2px; font-size: 10.5px; font-weight: 700; color: var(--ink-mute);
  }
  .tabbar button[aria-current="page"] { color: var(--blue); }
  .subnav { justify-content: stretch; padding: 0 8px; }
  .subnav button { flex: 1 0 auto; padding: 13px 6px 11px; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }

  .workspace { display: block; overflow: hidden; }
  .workspace.single { overflow-y: auto; }
  .workspace .rail { height: 100%; border-right: 0; }
  .workspace .file { height: 100%; }
  .workspace[data-view="list"] .file,
  .workspace[data-view="file"] .rail { display: none; }

  .file-head { padding: 12px 16px 14px; }
  .back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--blue-bright); margin-bottom: 10px; }
  .file-name { font-size: 25px; }
  .file-money .amount { font-size: 28px; }
  .tab-body { padding: 14px 14px 48px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .linkpic-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page { padding: 16px 14px 56px; }
  .page-head h1 { font-size: 26px; }
  .page-tools { width: 100%; }
  .page-tools .search { flex: 1; width: auto; }
  /* tables become stacked cards */
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tr { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
  table.list tr:last-child { border-bottom: 0; }
  table.list td { padding: 3px 0; border: 0; text-align: left !important; }
  table.list td[data-label]::before { content: attr(data-label) "  "; color: var(--ink-mute); font-size: 12px; }
  table.list td:empty { display: none; }
  table.list td.acts { padding-top: 10px; white-space: normal; }

  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fig { padding: 10px 12px; } .fig .v { font-size: 22px; }
  .comm-tabs { display: flex; }
  .comm-tabs button { flex: 1 1 auto; padding: 8px 10px; }
  .page-head .page-tools { width: 100%; }
  .monthpick { width: 100%; justify-content: space-between; }
  .comm-card .row, .page .card-flush > .row { flex-wrap: wrap; }
  .comm-card .row .row-actions, .page .card-flush > .row .row-actions { flex-basis: 100%; justify-content: flex-end; }
  .comm-lender { align-items: flex-start; text-align: left; }
  .comm-amount { grid-template-columns: minmax(0, 1fr); } .comm-amount .seg { margin-top: 0; }
  .line-edit, .line-edit.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .line-edit > .field:first-child { grid-column: 1 / -1; }
  .line-edit:not(.split) > .field:nth-child(2) { grid-column: 1 / 3; }
  .sheet.wide { width: 100%; }

  /* Phones: one column. Updates becomes one of the lists you can pick. */
  .home.dash { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 14px 28px; }
  .dash-main { display: contents; }
  .home-head { order: 0; } .kpis { order: 1; } .hchips { order: 2; } .dash-cards, .upd { order: 3; } .pipe-card { order: 4; }
  .hchips button[data-id="updates"] { display: flex; }
  .dash-cards:not(:has(> .on)) > #h-attention { display: none; }
  .upd { position: static; max-height: none; }
  .upd:not(.on) { display: none; }
  .upd .hsec-body { overflow: visible; }
  .kpi .s { white-space: normal; }
  .home-head h1 { font-size: 25px; }
  .home-tools { width: 100%; justify-content: space-between; }
  /* Phones: the two money figures stay; the counts are already in the row of lists below them. */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi:not(.money) { display: none; }
  .kpi { padding: 10px 12px; } .kpi .v { font-size: 24px; }
  .hchips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hchips button { flex-direction: row; gap: 6px; min-height: 44px; }
  .hchips b { font-size: 17px; }
  .hrow { padding: 12px 14px; gap: 10px; }
  .hrow .chev { display: none; }
  .hsec-head { padding: 13px 14px 0; } .hsec-hint { padding: 2px 14px 0; } .hnone, .hfoot { padding-left: 14px; padding-right: 14px; }
  .pipe-card { padding: 12px 14px; }
  .pipe-legend .closed { padding-left: 0; border-left: 0; flex-basis: 100%; }

  .sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92dvh;
    border-radius: 18px 18px 0 0; box-shadow: 0 -18px 48px rgba(8,30,62,0.25); animation-name: rise;
  }
  .sheet-head { border-radius: 18px 18px 0 0; padding: 16px 18px 14px; position: relative; }
  .sheet-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 99px; background: #C3CEDD; }
  .form-section { padding: 16px 18px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .sheet-foot .btn { flex: 1; }
  .sheet-foot .err { flex-basis: 100%; }
  .input, .select, .textarea { font-size: 16px; } /* stops iOS zooming on focus */
}

/* ── The deal file adapts to the width it is given, whatever the screen ──── */
@container file (max-width: 760px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container file (max-width: 620px) {
  .file-top { flex-direction: column; gap: 12px; }
  .file-money { text-align: left; }
  .file-money .facts { justify-content: flex-start; }
  /* five actions, equal width, icon over word: nothing scrolls off the edge */
  .file-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .file-actions .btn { flex-direction: column; height: auto; min-width: 0; padding: 9px 1px 7px; gap: 4px; font-size: 11px; white-space: nowrap; }
  .offer-acts .btn { min-height: 38px; }
  .file-actions .lg { display: none; } .file-actions .sm { display: inline; }
  /* five tabs, equal width, short names: all visible at once */
  .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 4px; gap: 0; overflow: visible; }
  .tab { justify-content: center; padding: 12px 2px 10px; font-size: 12.5px; gap: 4px; min-width: 0; }
  .tab .lg { display: none; } .tab .sm { display: inline; }
  .tab .n { font-size: 10px; padding: 0 5px; }
  .grid-2, .slots { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: 108px minmax(0, 1fr); }
  .sub-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .sub-row > .avatar { display: none; }
  .sub-row .grow { grid-column: 1; grid-row: 1 / span 2; }
  .sub-row .right { grid-column: 2; grid-row: 1; }
  .sub-row .row-actions { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
  .section-bar { flex-wrap: wrap; }
  /* a statement's buttons go under its figures rather than squeezing them */
  .st-row > .row { flex-wrap: wrap; }
  .st-row > .row .row-actions { flex-basis: 100%; justify-content: flex-end; }
}
@container file (max-width: 460px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-kv > div { grid-template-columns: minmax(0, 1fr); }
  .st-row > .st-detail { margin: 0 12px 12px; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container file (max-width: 380px) {
  .tab .n { display: none; }
}

/* ── Lenders: rolodex filters, requirements, import ─────────────────────── */
.lender-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.lender-filters .filters { margin-top: 0; }
.toggle-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-dim); cursor: pointer; }
table.list.lenders td { vertical-align: top; }
table.list.lenders .who a.sub { font-size: 12px; }
.chips.tight { margin-top: 0; gap: 4px; max-width: 360px; }
.chips.tight .chip { font-size: 11.5px; padding: 2px 8px; white-space: nowrap; }
.chip.ours { background: var(--blue-tint); color: var(--blue-deep); box-shadow: inset 0 0 0 1px #BCD0EC; }
.switch-row.boxed { border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); }
.lender-status { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.req-group + .req-group { margin-top: 18px; }
.req-group-head { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: 6px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 10px; }
.req-row { display: grid; gap: 5px; margin-bottom: 12px; }
.hint.lh, .req-row .hint { font-size: 12px; color: var(--ink-mute); line-height: 1.45; }
.req-row .hint { margin-top: 0; overflow-wrap: anywhere; }
.req-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.textarea.req-text { min-height: 56px; }
.req-table .kv { padding-left: 0; padding-right: 0; }
.req-table dd .sub { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
.req-src { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: var(--canvas-2); color: var(--ink-mute); vertical-align: 1px; }
.req-src.ours { background: var(--blue-tint); color: var(--blue-deep); }
.profile { border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); }
.profile summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13.5px; }
.profile[open] summary { border-bottom: 1px solid var(--rule-soft); }
.profile .kv { padding-left: 14px; padding-right: 14px; }
.form-section .kv { padding-left: 0; padding-right: 0; }
.form-section .kv dd .sub { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
table.list.compact th, table.list.compact td { padding: 6px 8px; }
@media (max-width: 900px) {
  table.list.compact thead { display: table-header-group; }
  table.list.compact { display: table; }
  table.list.compact tbody { display: table-row-group; }
  table.list.compact tr { display: table-row; padding: 0; }
  table.list.compact td { display: table-cell; width: auto; padding: 6px 8px; border-bottom: 1px solid var(--rule-soft); }
  table.list.compact td.num { text-align: right !important; }
  .chips.tight { max-width: none; }
  .lender-tools { flex-wrap: wrap; }
  .lender-tools .search { flex: 1 1 100%; }
  .lender-filters { align-items: flex-start; }
}

/* ── Find a lender ─────────────────────────────────────────────────────── */
.tib-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.find-toggles { display: grid; gap: 10px; margin-top: 16px; }
.match-summary { font-size: 14px; }
.match-row { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.match-row:last-child { border-bottom: 0; }
.match-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.match-pills { display: inline-flex; gap: 6px; }
.match-row > .sub { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; }
.match-checks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.mchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--canvas-2); color: var(--ink-dim); }
.mchip b { font-weight: 700; }
.mchip.pass { color: var(--st-funded); background: var(--st-funded-bg); }
.mchip.fail { color: var(--st-declined); background: var(--st-declined-bg); }
.mchip.warn { color: var(--st-submitted); background: var(--st-submitted-bg); }
.term-input { display: flex; gap: 6px; }
.term-input .input { flex: 1; min-width: 0; }
.term-input .select { flex: 0 0 104px; }

/* ── Wide monitors: the app stays a readable width, centred ─────────────── */
.workspace, .subnav { max-width: 1600px; margin-left: auto; margin-right: auto; width: 100%; }
.topbar { padding-left: max(18px, calc((100% - 1600px) / 2 + 18px)); padding-right: max(18px, calc((100% - 1600px) / 2 + 18px)); }
@media (min-width: 1601px) { .workspace { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); } }

/* ── Deals rail: one row per business, opening to its deals ─────────────── */
.deal-group { border-bottom: 1px solid var(--rule-soft); }
.deal-group > .deal-row { border-bottom: 0; }
.deal-row.group { align-items: center; }
.deal-row .chev { color: var(--ink-mute); flex-shrink: 0; transition: transform .15s; }
.deal-group.open > .deal-row.group .chev { transform: rotate(90deg); }
.deal-row.sub { padding-left: 62px; background: var(--canvas); border-bottom: 1px solid var(--rule-soft); }
.deal-row.sub .name { font-weight: 500; font-size: 13.5px; }
.deal-row.sub[aria-current="true"] { background: var(--blue-tint); }
.renew-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st-submitted); flex-shrink: 0; align-self: center; }
.client-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

/* ── Client file ─────────────────────────────────────────────────────────── */
.cfile-mobile { display: none; }
.deskonly { display: block; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.balance-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.balance-card .amt { font-size: 26px; font-weight: 500; line-height: 1.1; }
.context .balance-card { background: var(--canvas); }
.donut { border-radius: 50%; background: conic-gradient(var(--fill, var(--st-funded)) 0 var(--pct), var(--canvas-2) var(--pct) 100%); display: grid; place-items: center; flex-shrink: 0; }
.donut > span { border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.donut.sm { width: 54px; height: 54px; } .donut.sm > span { width: 40px; height: 40px; font-size: 12px; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule-soft); border-radius: 10px; margin-bottom: 14px; }
.chart-card .card-head { flex-wrap: wrap; gap: 8px; }
.chart { display: grid; gap: 14px; align-items: end; height: 180px; padding: 0 6px; }
.chart .m { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.chart .lbl { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.chart .bars { display: flex; align-items: flex-end; gap: 5px; width: 100%; max-width: 150px; }
.chart .dep { flex: 1; height: 100%; border-radius: 5px 5px 0 0; background: #00D800; min-width: 10px; }
.chart .dep.low { background: #F2B544; }
.chart .dep.manual { outline: 2px dashed rgba(10,35,66,0.35); outline-offset: -2px; }
.chart .pos { width: 22px; border-radius: 4px 4px 0 0; background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; flex-shrink: 0; }
.chart-months { display: grid; gap: 14px; font-size: 12px; color: var(--ink-dim); text-align: center; padding: 6px 6px 0; }
.chart-timeline { position: relative; height: 36px; border-top: 1px dashed var(--rule); margin: 8px 6px 0; }
.chart-timeline .ev { position: absolute; top: -7px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.chart-timeline .ev.r1 .chip { margin-top: 22px; } .chart-timeline .ev.r2 .chip { margin-top: 44px; }
.chart-timeline .ev.r1::before, .chart-timeline .ev.r2::before { content: ""; position: absolute; top: 12px; width: 1px; background: var(--rule); }
.chart-timeline .ev.r1::before { height: 22px; } .chart-timeline .ev.r2::before { height: 44px; }
.chart-timeline .ev i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--st-funded); border: 2px solid var(--paper); box-sizing: border-box; }
.chart-timeline .ev i.end { background: var(--ink-mute); }
.chart-timeline .chip { font-size: 10.5px; font-weight: 600; background: var(--st-funded-bg); color: var(--st-funded); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.chart-timeline .chip.end { background: transparent; color: var(--ink-mute); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-dim); margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .chart-legend i.dot { border-radius: 50%; }
.row.renew { background: #FFF8EC; }
.renew-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF4E5; border-color: #FAC775; color: #633806; }
.context .renew-banner { flex-direction: column; align-items: stretch; }
.ledger .list th, .ledger .list td { white-space: nowrap; }
.ledger .list td:first-child { white-space: normal; min-width: 160px; }
.ledger .list tr.renew td { background: #FFF8EC; }
.ledger .list tr.paid td { color: var(--ink-mute); }
.ledger .prog { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.ledger .prog .progress { flex: 1; height: 6px; min-width: 70px; }
.ledger-foot { display: flex; justify-content: space-between; padding: 10px 16px; background: var(--canvas); font-weight: 600; font-size: 13px; border-top: 1px solid var(--rule-soft); }
.ledger-cards { display: none; flex-direction: column; gap: 10px; padding: 12px; }
.lc { border: 1px solid var(--rule); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.lc.renew { background: #FFF8EC; border-color: #FAC775; } .lc.paid { color: var(--ink-mute); }
.lc-top { display: flex; gap: 12px; align-items: center; }
.lc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .lc-head b { font-size: 14px; } .lc-head > span { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 13px; }
.kv-grid .k { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.lc-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.cfile .file-top > div:first-child { align-items: center; }
@media (max-width: 1180px) { .chart { height: 150px; gap: 10px; } .chart-months { gap: 10px; } }
@media (max-width: 900px) {
  .workspace.clients-ws[data-view="list"] .file, .workspace.clients-ws[data-view="file"] .rail { display: none; }
  .cfile-head { background: var(--blue); color: #fff; border-bottom: 0; }
  .cfile-head .back, .cfile-head .label, .cfile-head .file-contact, .cfile-head .file-contact a, .cfile-head .muted { color: rgba(255,255,255,0.85); }
  .cfile-head .avatar { background: rgba(255,255,255,0.18); color: #fff; }
  .cfile-head .pill.plain { background: rgba(255,255,255,0.16); color: #fff; }
  .cfile-head .file-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cfile-head .file-actions .btn { background: rgba(255,255,255,0.14); border-color: transparent; color: #fff; justify-content: center; padding: 9px 4px; font-size: 11.5px; }
  .cfile-head .file-actions .btn.btn-primary { background: #fff; color: var(--blue); }
  .deskonly { display: none; }
  .cfile-mobile { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 0; }
  .cfile-mobile > .banner { margin: 0; }
  .ledger-table { display: none; } .ledger-cards { display: flex; }
  .chart { height: 140px; gap: 6px; padding: 0; } .chart .pos { width: 14px; font-size: 10px; } .chart-months { gap: 6px; padding: 6px 0 0; } .chart-timeline { margin: 8px 0 0; }
  .chart .bars { max-width: none; }
  .stats.three .stat { padding: 10px 8px; } .stats.three .stat .v { font-size: 16px; }
  .chart-card .card-head .seg button { padding: 5px 8px; font-size: 12px; }
  .kv-grid { font-size: 13px; }
}
@container file (max-width: 620px) {
  /* the client file has six tabs and four actions */
  .cfile .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); position: sticky; top: 0; z-index: 2; }
  .cfile .tab { font-size: 11.5px; padding: 12px 0 10px; }
  .cfile .file-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cfile .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfile .stats.three .stat:last-child:nth-child(odd) { grid-column: auto; }
}

/* Phones: the whole client file scrolls as one page, so the header and balance
   move out of the way. This has to be a media query: a container query can't
   style the container (.cfile is the "file" container) itself. */
@media (max-width: 900px) {
  .workspace.clients-ws .cfile { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .workspace.clients-ws .cfile .tab-body { flex: none; overflow: visible; min-height: 0; }
}

/* ── Client portal tab (portal.jsx) ───────────────────────────────────────── */
.pmsgs { display: grid; gap: 10px; padding: 14px 16px; max-height: 420px; overflow-y: auto; }
.pmsg { max-width: 80%; padding: 9px 13px; border-radius: 12px; background: var(--canvas-2); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pmsg.ours { justify-self: end; background: var(--blue-tint); }
.pmsg .who { font-size: 11.5px; font-weight: 700; color: var(--ink-mute); margin-bottom: 2px; white-space: normal; }
.pcompose { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rule-soft); align-items: flex-end; }
.pcompose textarea { flex: 1; min-width: 0; min-height: 44px; resize: vertical; }
@media (max-width: 900px) { .pmsg { max-width: 92%; } .pcompose { flex-wrap: wrap; } .pcompose .btn { width: 100%; } }

/* ── Round 9: leads, import, export ─────────────────────────────────────── */
.rail-acts { display: inline-flex; align-items: center; gap: 4px; }
.select.sm, .input.sm { height: 34px; padding: 0 10px; font-size: 13px; width: auto; }
.lead-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.lead-filters .select.sm { max-width: 220px; }
.tagpick { position: relative; min-width: 0; }
.tagpick-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); font-size: 13px; color: var(--ink); text-align: left; }
.tagpick-btn:hover { border-color: #B5C6DE; }
.tagpick-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tagpick-chosen .chip { background: var(--blue-tint); color: var(--blue-deep); font-weight: 600; }
.field .tagpick-btn, .form-section .tagpick-btn { width: 100%; }
.tagpick-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 14px 36px rgba(8,30,62,0.18); padding: 8px; }
.tagpick-pop > .input { height: 36px; }
.tagpick-list { max-height: 260px; overflow-y: auto; margin-top: 6px; }
.tagpick-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; text-align: left; }
.tagpick-item:hover { background: var(--canvas); }
.tagpick-item input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.tagpick-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tagpick-item.create { color: var(--blue-bright); font-weight: 600; }
.tagpick-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule-soft); margin-top: 6px; padding-top: 8px; }
.offer-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; margin-bottom: 12px; font-size: 13px; }
.offer-strip b { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-right: 4px; }
.offer-strip .grow { flex: 1; }
.bulk-bar { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: 0 10px 28px rgba(8,30,62,0.22); }
.bulk-bar b { margin-right: 6px; }
.bulk-bar .btn:not(.btn-primary):not(.btn-danger) { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.bulk-bar .btn-danger { background: transparent; border-color: rgba(255,255,255,0.25); color: #FFB4AE; }
.bulk-bar .link-btn { color: #CFE0F6; }
table.list th.pick, table.list td.pick { width: 36px; padding-right: 0; }
table.list .pick input { width: 16px; height: 16px; accent-color: var(--blue); margin: 0; }
table.list tr.picked td { background: var(--blue-tint); }
.re-badge { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--st-review); }
.stage-line { display: flex; align-items: center; gap: 6px; color: var(--ink-mute); margin-bottom: 4px; }
.muted-pill { opacity: 0.55; }
.note-add { display: flex; gap: 8px; }
.range-row { border: 1px solid var(--rule-soft); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--canvas); }
.range-amt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.range-amt .input { max-width: 140px; }
.range-save { display: flex; gap: 8px; margin-top: 14px; }
.chip.as-btn { cursor: pointer; border: 1px solid var(--rule); }
.chip.as-btn:hover { background: var(--blue-tint); }
.input.tf { width: 70px; height: 32px; padding: 0 8px; text-align: right; }
.map-table td { vertical-align: top; }
.map-table .samples { max-width: 360px; font-size: 12.5px; color: var(--ink-dim); }
.map-table .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.map-table tr.unused td { background: var(--canvas); }
.map-table tr.unused td:first-child b { color: var(--ink-mute); }
.map-table .select.sm { min-width: 190px; }
.import-opts .tagpick-btn { width: 100%; }
.import-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 18px 0 8px; }
.import-foot .err { margin-right: auto; color: var(--st-declined); font-size: 13px; }
.import-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--rule-soft); border-radius: 10px; }
.stat .v.bad { color: var(--st-declined); }
.working { display: flex; align-items: center; gap: 12px; color: var(--ink-dim); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--blue); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.folder-row .select.sm { max-width: 240px; }
.row.check { cursor: pointer; }
@media (max-width: 900px) {
  .import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-bar { top: 4px; }
  .map-table .select.sm { min-width: 150px; }
  .map-table .samples, .map-table .clip { max-width: 160px; }
  .folder-row { flex-wrap: wrap; }
  .folder-row .select.sm { max-width: 100%; width: 100%; }
}

.files-cell { white-space: nowrap; }
.warn-text { color: var(--st-submitted); font-weight: 600; font-size: 12.5px; }
.lead-reapplied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lead-filters .select.sm { min-width: 120px; }
.analyze-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--st-review-bg); color: var(--ink); font-size: 13px; }
.analyze-bar b { font-weight: 600; }
.pick-all-m { display: none; }
@media (max-width: 900px) {
  .leads-tools { flex-wrap: wrap; }
  .leads-tools .search { flex: 1 1 100%; }
  .pick-all-m { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
  table.list tr.picked { background: var(--blue-tint); }
  table.list tr.picked td { background: transparent; }
  table.list td.pick { width: auto; padding-bottom: 6px; }
  .leads-tools .search input { width: 100%; }
  .analyze-bar { flex-direction: column; align-items: flex-start; }
}

/* Leads: the list uses the width a big monitor has (up to 1600px, like the deal workspace),
   so all the columns fit without sliding sideways; narrower screens still scroll inside the card. */
.page.leads-page { max-width: 1600px; }
table.leads-table th, table.leads-table td { padding-left: 12px; padding-right: 12px; }
table.leads-table .contact-cell { max-width: 260px; }
table.leads-table .contact-cell .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 12.5px; }
table.leads-table td.nowrap, table.leads-table th { white-space: nowrap; }
@media (max-width: 900px) {
  table.leads-table .contact-cell { max-width: none; }
  table.leads-table .contact-cell div { display: inline; }
  table.leads-table .contact-cell div + div::before { content: " · "; }
}
.bulk-note { font-size: 13px; opacity: 0.9; }

/* Needs attention: each row has a Clear button beside it (DEC-083). */
.hrow-wrap { display: flex; align-items: center; border-top: 1px solid var(--rule-soft); }
.hrow-wrap:hover { background: var(--canvas); }
.hrow-wrap .hrow { border-top: 0; flex: 1; min-width: 0; }
.hrow-wrap .hrow:hover { background: transparent; }
.hrow-wrap .hclear { flex-shrink: 0; margin-right: 8px; color: var(--ink-mute); }
.hrow-wrap .hclear:hover { color: var(--blue-deep); }

/* Leads: an open lead sits beside the list folded to a rail (business, owner, revenue), laid out like the
   client file. On a wide screen the list's other columns fade off to the right as it folds, and back in after. */
.lead-tr { cursor: pointer; }
.lead-tr:hover td { background: var(--canvas); }
.lead-tr.picked:hover td { background: var(--blue-tint); }
table.leads-table th:not(.keep), table.leads-table td:not(.keep) { transition: opacity .22s ease, transform .22s ease; }
table.leads-table.leaving th:not(.keep), table.leads-table.leaving td:not(.keep) { opacity: 0; transform: translateX(36px); }
table.leads-table.returning th:not(.keep), table.leads-table.returning td:not(.keep) { animation: lead-cols-in .34s ease both; }
@keyframes lead-cols-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes lead-rail-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes lead-file-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.leads-ws > .rail { animation: lead-rail-in .26s ease both; }
.leads-ws > .lfile { animation: lead-file-in .3s ease both; }
.leads-ws > .context { animation: lead-file-in .38s ease both; }
.lead-row { align-items: center; }
.lead-row .rev { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); flex-shrink: 0; }
.lead-rail .filters { align-items: center; }
.lfile .file-top > div:first-child { align-items: center; }
.context .stage-line { margin-bottom: 6px; }
.banner.working { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
  .leads-ws > .lfile, .leads-ws > .context, .leads-ws > .rail { animation: none; }
  .lfile .file-actions { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
}

/* Monthly remit beside the business name: a green–orange–red scale with a marker, and the figure. */
.name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.remit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.remit b { font-weight: 700; }
.remit em { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; padding-left: 6px; border-left: 1px solid currentColor; }
.remit-scale { position: relative; width: 46px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #1E9E4A 0 33.3%, #F08A1C 33.3% 66.6%, #D93025 66.6% 100%); flex: none; }
.remit-scale i { position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px; transform: translateY(-50%); border-radius: 50%; background: #fff; border: 2px solid currentColor; box-shadow: 0 1px 2px rgba(10,35,66,0.25); }
.remit-green  { color: #13723A; background: #E6F6EC; border-color: #BFE6CC; }
.remit-orange { color: #A85300; background: #FFF1E0; border-color: #FBD3A6; }
.remit-red    { color: #B3261E; background: #FDECEA; border-color: #F5C2BD; }
.remit-over   { color: #fff; background: #C5221F; border-color: #C5221F; }
.remit-over .remit-scale i { border-color: #7A0F0B; }
.cfile-head .remit-over { border-color: #fff; }

/* Leads list: sortable headings, the sort picker, and leverage. */
table.list th.sortable { padding: 0; }
table.list th .th-sort { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
table.list th.num .th-sort { justify-content: flex-end; }
table.list th .th-sort:hover { color: var(--ink); }
table.list th .th-sort:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; border-radius: 4px; }
table.list th[aria-sort="ascending"] .th-sort, table.list th[aria-sort="descending"] .th-sort { color: var(--blue); }
.sort-arrow { font-size: 9px; min-width: 9px; }
.sort-pick { display: inline-flex; align-items: center; gap: 4px; }
.sort-pick .btn { min-width: 32px; padding: 0 8px; font-size: 11px; }
.rev-st { font-size: 11.5px; color: var(--ink-mute); font-weight: 500; white-space: nowrap; }
.lev-cell { white-space: nowrap; }
.remit.sm { padding: 2px 8px; font-size: 11.5px; gap: 5px; }
.remit.sm em { font-size: 10px; padding-left: 5px; }
.lead-row .rev { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rail-remit { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; border: 1px solid transparent; }
.sort-pick .select.sm { min-width: 160px; }
.table-wrap.fading { overflow-x: hidden; }

/* Fundings on the statements: the chip on the chart's timeline, and the line under a position it started. */
.chart-timeline .ev i.funded { background: #0E7A3A; box-shadow: 0 0 0 2px #BFE6CC; }
.chart-timeline .chip.funded { background: #0E7A3A; color: #fff; }
.fund-line { color: var(--st-funded); font-weight: 600; font-size: 12.5px; }

/* The chart's timeline: dots on the line, labels laid out in rows beneath (clients.jsx ChartTimeline). */
.chart-timeline .tl-dot { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--st-funded); border: 2px solid var(--paper); box-sizing: border-box; z-index: 2; }
.chart-timeline .tl-dot.end { background: var(--ink-mute); }
.chart-timeline .tl-dot.funded { background: #0E7A3A; box-shadow: 0 0 0 2px #BFE6CC; }
.chart-timeline .tl-stem { position: absolute; top: 0; width: 1px; background: var(--rule); z-index: 0; }
.chart-timeline .tl-chip { position: absolute; z-index: 1; margin: 0; line-height: 16px; }
.chart-timeline .tl-chip.end { background: var(--paper); border: 1px solid var(--rule-soft); }
.chart-timeline.empty { height: 8px; }

/* Platform financing (PayPal, Square, DoorDash…): shown apart, in violet, and not counted as a position. */
.chart-timeline .tl-dot.platform { background: #6B4FBB; }
.chart-timeline .tl-dot.funded.platform { background: #6B4FBB; box-shadow: 0 0 0 2px #DDD3F5; }
.chart-timeline .tl-chip.platform { background: #F1ECFB; color: #5B3FA8; }
.chart-timeline .tl-chip.funded.platform { background: #6B4FBB; color: #fff; }
.chart-timeline .tl-chip.end.platform { background: var(--paper); color: #7B68B8; }
.remit-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.remit-alt { font-size: 12px; font-weight: 600; white-space: nowrap; background: none !important; border: 0 !important; padding: 0; }
.remit-alt.remit-over { color: #C5221F; }
.lev-cell .remit-wrap { flex-direction: column; align-items: flex-start; gap: 2px; }
.lev-cell .remit-alt { font-size: 11px; }
.row.sub-head { background: var(--canvas); padding-top: 8px; padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.row.platform-row .title { color: var(--ink-dim); }

/* Leads: "Not analyzed" / "Reading…" labels and the range filters (revenue, positions) */
.st-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--canvas); color: var(--ink-dim); border: 1px solid var(--rule); }
.st-chip.reading { background: var(--blue-tint); color: var(--blue-deep); border-color: transparent; }
.st-chip.small { font-size: 10.5px; padding: 1px 6px; }
.rangepick .tagpick-btn.on { border-color: var(--blue); background: var(--blue-tint); }
.rangepick .tagpick-btn b { font-weight: 600; }
.range-pop { width: min(300px, calc(100vw - 32px)); padding: 12px; }
.minmax-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.minmax-row .input { height: 36px; min-width: 0; }
.range-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.range-quick .chip { cursor: pointer; border: 1px solid var(--rule); background: var(--paper); }
.range-quick .chip:hover { border-color: #B5C6DE; }
.range-pop .tagpick-foot { margin-top: 12px; }

/* ── Settings: one section at a time. Desktop = icon rail · section list · section; phones = folding list ── */
.workspace.settings-ws { grid-template-columns: 88px 272px minmax(0, 1fr); }
.set-rail { background: var(--ink); padding: 14px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.set-rail button { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 11px 4px 9px; border-radius: 10px; color: #B7C5DA; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; }
.set-rail button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.set-rail button[aria-current] { background: var(--blue); color: #fff; }
.set-rail button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.set-sub { background: var(--paper); border-right: 1px solid var(--rule); padding: 22px 12px; display: flex; flex-direction: column; gap: 4px; }
.set-sub h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; padding: 0 10px 10px; }
.set-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; }
.set-item:hover { background: var(--canvas); }
.set-item .t { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.set-item .d { font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
.set-item[aria-current="page"] { background: var(--blue-tint); border-color: #B9CFEC; }
.set-item[aria-current="page"] .t { color: var(--blue); }
.set-dot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; }
.set-dot.ok { background: var(--st-funded); }
.set-dot.off { background: var(--ink-mute); }
.set-main { padding: 30px 40px 56px; }
.set-page { max-width: 820px; }
.set-page.wide { max-width: none; }   /* a section whose table needs the room (Portal accounts) */
.set-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-dim); }
.set-title { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; }
.set-desc { color: var(--ink-dim); margin: 6px 0 18px; max-width: 62ch; }
.set-body > .card + .card { margin-top: 16px; }
@media (max-width: 1180px) {
  .workspace.settings-ws { grid-template-columns: 80px 232px minmax(0, 1fr); }
  .set-main { padding: 24px 24px 56px; }
}
/* Phones */
.set-search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-bottom: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink-mute); }
.set-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.set-search:focus-within { border-color: var(--blue-bright); box-shadow: 0 0 0 3px var(--blue-tint); }
.set-mlist { overflow: hidden; }
.set-mgroup + .set-mgroup { border-top: 1px solid var(--rule-soft); }
.set-mhead { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; text-align: left; color: var(--blue); }
.set-mhead .t { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); }
.set-mhead .n { font-size: 13px; color: var(--ink-mute); }
.set-mhead .chev { display: inline-flex; color: var(--ink-mute); transition: transform 0.15s; }
.set-mhead .chev.open { transform: rotate(90deg); }
.set-mitems { background: var(--canvas); border-top: 1px solid var(--rule-soft); padding: 4px 0; }
.set-mrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 14px 6px 45px; text-align: left; color: var(--ink-mute); }
.set-mlist > .set-mrow { padding-left: 14px; }
.set-mlist > .set-mrow + .set-mrow { border-top: 1px solid var(--rule-soft); }
.set-mrow .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-mrow .t { font-size: 15px; font-weight: 500; color: var(--ink); }
.set-mrow .d { font-size: 12.5px; color: var(--ink-dim); }
.settings-phone .set-title { font-size: 26px; }
.settings-phone .back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--blue-bright); margin-bottom: 10px; }

/* ── Round 14: clawbacks on a deal's commission, five figures on Commissions ── */
.figs:has(> .fig:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .figs:has(> .fig:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .figs:has(> .fig:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comm-claw { border-top: 1px solid var(--rule-soft); }
.comm-claw .card-head { border-bottom: 0; }
.comm-claw .claw { border-top: 1px solid var(--rule-soft); }
.comm-claw .claw .row.sub-row { padding-left: 28px; background: var(--paper-2, rgba(0,0,0,.015)); }
.comm-card .row .right .line { font-size: 12px; color: var(--ink-dim); text-align: right; }
td b.bad, .list b.bad { color: var(--st-declined); }

/* When the client last opened their offer link (DEC-094): blue = the texted link, purple = the offer email;
   solid for the last 24 hours, tinted after that. */
.seen { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.seen.v-text { background: var(--st-new-bg); color: var(--st-new); }
.seen.v-email { background: var(--st-review-bg); color: var(--st-review); }
.seen.fresh.v-text { background: var(--st-new); color: #fff; }
.seen.fresh.v-email { background: var(--st-review); color: #fff; }
.seen.fresh::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7CF0B0; box-shadow: 0 0 0 2px rgba(124, 240, 176, 0.35); }
.offer-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.deal-row .meta .seen { font-size: 11px; padding: 2px 8px 2px 6px; }
.lead-row .meta { display: flex; margin-top: 5px; }
.seen-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 2px; }
.seen-line .seen { font-size: 13px; padding: 5px 12px 5px 9px; }

/* Labels from the statements (statements.jsx BankLabels): DEBT SETTLEMENT (black, not fundable) and IN REVERSE. */
.bank-labels { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: 2px; flex-wrap: wrap; }
.bank-label { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; line-height: 1.2; white-space: nowrap; }
.bank-label.ds { background: #111; color: #fff; }
.bank-label.rev { background: #FCE7D6; color: #9A3D0A; border: 1px solid #F3C29F; }
.rail-labels { display: block; margin-top: 3px; }
.rail-labels .bank-labels { margin-left: 0; }
.rail-labels .bank-label { font-size: 9.5px; padding: 2px 6px; }
.card-head .bank-label { margin-left: auto; }
.bank-label.risk { background: var(--st-declined); color: #fff; }

/* Before you call (statements.jsx CallNotesCard): the talking point and the red flags. */
.call-notes .call-tp, .call-notes .call-rf { padding: 14px 18px; }
.call-notes .call-tp { border-bottom: 1px solid var(--rule-soft); }
.call-notes .call-k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.call-notes .call-say { font-family: var(--serif); font-size: 20px; line-height: 1.3; margin-bottom: 4px; }
.call-notes .call-risk { background: var(--st-declined-bg); color: var(--st-declined); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.call-notes .call-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.call-notes .call-cat { border: 1px solid var(--rule-soft); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.call-notes .call-cat .t { font-size: 11.5px; color: var(--ink-dim); }
.call-notes .call-cat .v { font-weight: 700; font-size: 15px; margin-top: 2px; color: var(--ink-mute); }
.call-notes .call-cat.on { border-color: #F2B8B5; background: #FFF6F5; }
.call-notes .call-cat.on .v { color: var(--st-declined); }
.call-notes .call-cat .s { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.35; }
@media (max-width: 760px) { .call-notes .call-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .call-notes .call-say { font-size: 18px; } }

/* Before you call, layout B (statements.jsx CallNotesPanel / CallNotesStrip). */
.cn-panel { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper); }
.cn-panel.risk { border-color: #F2B8B5; }
.cn-head { background: var(--st-declined-bg); padding: 6px 10px; display: flex; justify-content: flex-end; }
.cn-body { padding: 10px 12px; display: grid; gap: 12px; }
.cn-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.cn-say { font-family: var(--serif); font-size: 16px; line-height: 1.3; margin-bottom: 2px; }
.cn-why { color: var(--st-declined); font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.cn-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 0; color: var(--ink-dim); }
.cn-row b { color: var(--ink-mute); font-weight: 600; }
.cn-row.on b { color: var(--st-declined); }
.cn-body .link-btn { margin-top: 4px; }
.cn-strip { display: none; margin-top: 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.cn-strip.risk { border-color: #F2B8B5; }
.cn-strip-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; text-align: left; flex-wrap: wrap; }
.cn-strip-head .cn-strip-sum { font-size: 12.5px; font-weight: 600; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.cn-strip[class] .cn-body { border-top: 1px solid var(--rule-soft); }
@media (max-width: 1180px) { .cn-strip { display: block; } }

/* Map (map.jsx) */
.map-page { max-width: 1400px; }
.map-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; margin-bottom: 14px; }
.map-bar .map-search { flex: 1 1 180px; min-width: 0; }
.map-bar .select { width: auto; min-width: 130px; padding-right: 30px; }
.map-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.map-box { position: relative; overflow: hidden; padding: 0; }
.map-svg { display: block; width: 100%; height: auto; background: var(--canvas); touch-action: none; cursor: grab; }
.map-svg:active { cursor: grabbing; }
.map-state { fill: var(--canvas-2); stroke: var(--paper); stroke-width: .8; cursor: pointer; }
.map-state:hover { fill: var(--blue-tint); }
.map-state.on { fill: var(--blue-tint); }
.map-pt { cursor: pointer; }
.map-cl circle { fill: var(--blue); fill-opacity: .9; stroke: var(--paper); cursor: pointer; }
.map-cl text { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map-ring { fill: var(--blue); fill-opacity: .07; stroke: var(--blue); pointer-events: none; }
.map-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; }
.map-zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 16px; }
.map-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 12px; padding: 5px 8px; border-radius: 7px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 2; }
.map-loading { position: absolute; inset: 0 0 auto; padding: 16px; font-size: 13px; }
.map-legend { border-top: 1px solid var(--rule-soft); padding: 9px 12px; font-size: 11.5px; color: var(--ink-dim); display: grid; gap: 4px; }
.map-legend > div { display: flex; gap: 10px; flex-wrap: wrap; }
.map-legend span { display: inline-flex; gap: 5px; align-items: center; }
.map-sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: 0; flex: none; }
.map-legend .map-sw { margin-right: 0; }
.map-sym { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 2px solid var(--ink-dim); }
.map-sym.client { background: var(--ink-dim); } .map-sym.deal { background: var(--ink-dim); box-shadow: inset 0 0 0 2px var(--paper); } .map-sym.approx { border-style: dashed; }
.map-panel { padding: 14px 16px; display: grid; gap: 12px; }
.map-panel .label { display: block; margin-bottom: 4px; }
.map-biz { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0 0 2px; }
.map-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--rule); color: var(--ink-dim); }
.map-tag.approx { border-style: dashed; }
.map-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-facts > div { background: var(--canvas); border-radius: 9px; padding: 7px 9px; }
.map-facts b { display: block; }
.map-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.map-near { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; margin: 0 -6px; }
.map-near button { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 7px 6px; border-radius: 8px; text-align: left; }
.map-near button:hover { background: var(--canvas); }
.map-near .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-near .ds { font-size: 12px; color: var(--ink-dim); }
.map-near .why { font-size: 11.5px; color: var(--ink-mute); grid-column: 2 / 4; margin-top: -3px; }
.map-fit { color: var(--st-funded); }
.map-admin { border-top: 1px solid var(--rule-soft); padding-top: 12px; display: grid; gap: 8px; justify-items: start; }
.map-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; }
.map-stats > div { padding: 12px 16px; box-shadow: 1px 0 0 var(--rule-soft); min-width: 0; }
.map-stats span { font-size: 12px; color: var(--ink-dim); }
.map-stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: 24px; }
.map-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.map-cols .card { padding: 14px 16px; }
.map-bars { display: grid; gap: 6px; margin-top: 8px; }
.map-brow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; gap: 8px; align-items: center; font-size: 12.5px; }
.map-brow button { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.map-brow button:hover { text-decoration: underline; }
.map-brow .tnum { text-align: right; color: var(--ink-dim); }
.map-track { height: 8px; background: var(--canvas); border-radius: 99px; overflow: hidden; }
.map-fill { height: 100%; border-radius: 99px; }
.map-link { display: inline-flex; align-items: center; gap: 4px; }
/* Lunch nearby (map.jsx) */
.lunch-list { display: grid; gap: 10px; }
.lunch-row { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); font-size: 13px; }
.lunch-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.lunch-top > span { white-space: nowrap; }
.lunch-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 2px; }
.lunch-meta a { display: inline-flex; align-items: center; gap: 4px; }
.lunch-src { font-size: 11.5px; margin-top: 10px; }
.lunch-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #D9480F; color: #fff; font-size: 11.5px; font-weight: 700; margin-right: 8px; vertical-align: 1px; }
.file-map { display: grid; gap: 14px; }
.lunch-n.rival { background: #5F3DC4; }
.file-map-rival-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .file-map-rival-list { grid-template-columns: minmax(0, 1fr); } }
.file-map-rivals-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.file-map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.file-map-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 15px; }
.file-map-street { margin-top: 2px; font-size: 13.5px; color: var(--ink-dim); }
.file-map-listing { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 6px; font-size: 13px; }
.file-map-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.file-map-box { padding: 0; overflow: hidden; }
.file-map-canvas { height: 420px; width: 100%; }
.file-map-msg { padding: 18px; font-size: 13.5px; }
@media (max-width: 1100px) { .file-map-grid { grid-template-columns: minmax(0, 1fr); } .file-map-canvas { height: 320px; } }
.map-acts .btn .icon, .map-acts .btn svg { margin-right: 4px; }
@media (max-width: 1000px) { .map-main { grid-template-columns: minmax(0, 1fr); } .map-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .map-stats { grid-template-columns: 1fr 1fr; } .map-brow { grid-template-columns: 110px minmax(0, 1fr) 40px; } }