:root {
    /* THREE-GREEN SYSTEM (Designer 7/13) — law: one hue per surface, never mix.
       canopy  = sidebar/rail chrome only (recedes, blue-lean)
       signal  = healthy-state only: progress bars, done states, ok dots
       action  = needs-craig only: inline board, desk badge, CTA (vivid yellow-lean)
       Audit: 141 refs converted → 32 chrome→canopy · 78 state→signal · 31 hover→grey. */
    --canopy: #1e3b2f;
    --canopy-deep: #152b22;
    --canopy-line: #2c4f3e;
    --signal: #3e7d5c;
    --signal-tint: #eaf3ec;
    --action: #15a850;
    --action-deep: #0c7a38;
    --action-tint: #e4f9e8;
    --action-line: #8fdba8;
    /* BRAND TIER (Phase 2, 7/16) — the widget-surface green family. Defaults are the
       EXACT hexes the widgets shipped with; firm.json's palette may override every one
       (shell _PAL_MAP), so with MOTM's manifest nothing moves — the brand-layer invariant. */
    --brand-deep: #1f4a2d;
    --brand-ok: #15803d;
    --brand-ok-deep: #166534;
    --brand-mid: #306844;
    --brand-dim: #1f6f54;
    --brand-grass: #2f7d46;
    --brand-leaf: #3fae52;
    --brand-ink-green: #1a2e20;
    --brand-paper: #f4f1e8;
    --brand-line: #b9d8b4;
    --brand-line-soft: #79b489;
    --brand-line-pale: #cfe3d3;
    --brand-tint: #dfeee4;
    --brand-tint-cool: #dbeee0;
    --brand-wash: #eaf5ef;
    --brand-mint: #d6f2e0;
    --brand-mist: #eef3ee;
    --brand-haze: #eef6ef;
    --brand-frost: #e8ede6;
    --brand-deep-hover: #2a5f3c;
    /* Legacy aliases — map to canonical tokens so existing code picks up new values */
    --motm-green: var(--canopy);
    --motm-green-dark: var(--canopy-deep);
    --motm-green-light: var(--signal);
    --motm-green-tint: var(--signal-tint);
    --motm-charcoal: #1a1d1c;
    --motm-grey-900: #2c302e;
    --motm-grey-700: #525854;
    --motm-grey-500: #8a918d;
    --motm-grey-300: #d4d8d6;
    --motm-grey-100: #f1f3f2;
    --motm-grey-50: #f8faf9;
    --motm-cream: #faf7f2;
    --motm-success: #2e7d4f;
    --motm-warning: #b87a14;
    --motm-danger: #a53939;
    --motm-info: #2c5e8f;
    /* Status palette — --st-needsyou is now ACTION-GREEN (vivid, needs-craig only).
       --st-success = completed/reconciled STATE only — never chrome/nav. */
    --st-needsyou: var(--action);
    --st-success: var(--signal);
    --shadow-sm: 0 1px 2px rgba(26, 29, 28, 0.04);
    --shadow-md: 0 1px 3px rgba(26, 29, 28, 0.06), 0 4px 12px rgba(26, 29, 28, 0.04);
    --shadow-lg: 0 4px 20px rgba(26, 29, 28, 0.08);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    /* Designer type scale tokens (7/12) — convert prose/label clusters to these */
    --fs-num: 24px;      /* tile primary numbers, Inter w700, lh 1.0 */
    --fs-num-sm: 17px;   /* popout chips, Inter w700 */
    --fs-body: 13.5px;   /* all prose/feed lines/card text, Inter w400, lh 1.45 */
    --fs-label: 11px;    /* ALL tile/section labels, Inter w600 caps .08em, lh 1.2 */
    --fs-micro: 10px;    /* chips/badges ONLY, never sentences */
  }

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

  html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--motm-cream);
    color: var(--motm-charcoal);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Classic (non-overlay) scrollbars must never change layout width when a modal or moved
     pane alters page height — the header chips are pinned to identical positions in all
     states, and a gutter that comes and goes slides the whole title row. */
  html { scrollbar-gutter: stable; }

  /* ── Layout shell ─────────────────────────────── */
  .app {
    display: grid;
    /* rail widened 300→340 (Craig 7/23) to buy row compression for the redesigned FleetView
       rail (The Study + working-only fleet) — chips-on-one-rail without a scrollbar. */
    grid-template-columns: 340px 1fr;
    min-height: 100vh;
  }

  /* ── Sidebar ──────────────────────────────────── */
  .sidebar {
    background: var(--motm-green);
    color: #fff;
    padding: 24px 0 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  /* MOVE THE RAIL UP (Craig 8/5 7:50p, floor sidebar video: "move this up a good bit").
     The fleet rail did not start until y=343 on a 900px viewport — 343px of chrome above the
     first seat, of which this block was 52px of pure empty space under a two-line lockup.
     Trimmed, not redesigned: the mark, the tag and the rule below them are untouched, and the
     rail simply starts higher. See widgets/fleet-strip/styles.css for the in-rail half. */
  .brand {
    padding: 0 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
  }
  .brand-mark {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #fff;
  }
  .brand-mark span { opacity: 0.9; }
  .brand-tag {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* Firm-HQ client search — lives in the sidebar where the client rail used to */
  .sidebar #cli-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
  .sidebar .cli-search-box:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .nav-section { margin-bottom: 24px; }
  .nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0 20px;
    margin-bottom: 8px;
    font-weight: 500;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    user-select: none;
  }
  .nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
  .nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-left-color: #fff;
    font-weight: 500;
  }
  /* "← Firm HQ" bridge — the persistent return affordance at the top of the client rail. */
  .nav-back-firm {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px 18px;
    padding: 9px 12px;
    background: rgba(184, 122, 20, 0.12);
    border: 1px solid rgba(184, 122, 20, 0.45);
    border-radius: 9px;
    color: #e7c178;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .nav-back-firm:hover {
    background: rgba(184, 122, 20, 0.22);
    color: #fff;
  }
  .nav-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
  }
  .nav-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: auto;
  }
  .nav-badge.dot {
    width: 7px; height: 7px;
    padding: 0;
    background: #f6c14a;
    border-radius: 50%;
  }

  /* Client ticker rail (firm mode) */
  #ownerClientSearch::placeholder { color: rgba(255,255,255,.38); }
  #ownerClientSearch:focus { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); }
  .oc-row { transition: background .12s; }
  .oc-row.oc-active, .oc-row[data-active="1"] { background: rgba(255,255,255,.14) !important; }

  .sidebar-footer {
    margin-top: auto;
    padding: 7px 20px;       /* rail-lift trim (Craig 8/5) — see .brand above */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--motm-green-light);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
  }
  .user-name { font-size: 13px; font-weight: 500; }
  .user-co { font-size: 11px; color: rgba(255,255,255,0.55); }

  /* ── THE USER DOOR (Craig 8/18 7:01a) ─────────────────────────────
     "Normally, settings are hidden in a dashboard view. You want to put them behind the user.
      I should be able to click Craig at the bottom left and get to a popout like that."
     The footer identity block IS the control now, and Settings lives in the popout it opens —
     the ⚙ header button came off in the same change (one door, never two). The popout wears the
     same white card as the client switcher directly above it, so the rail has one popout language. */
  .sidebar-footer { position: relative; }
  .user-door {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 6px;
    margin: 0 -6px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .user-door:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
  .user-door[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
  .user-door-id { flex: 1; min-width: 0; overflow: hidden; }
  .user-door-chev {
    flex-shrink: 0;
    font-size: var(--fs-micro);
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.18s ease;
  }
  .user-door[aria-expanded="true"] .user-door-chev { transform: rotate(180deg); }

  /* FIXED, not absolute: .sidebar is overflow-y:auto, which clips and scrolls an absolutely
     positioned child. Coordinates are read off the door's own rect when it opens. */
  .user-menu {
    position: fixed;
    width: 232px;
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1002;
  }
  .user-menu[hidden] { display: none; }
  .user-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  #user-menu-who { font-size: 13px; font-weight: 600; color: var(--motm-charcoal); }
  #user-menu-co { font-size: var(--fs-label); color: var(--motm-grey-500); }
  .user-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--motm-charcoal);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
  }
  .user-menu-item:hover { background: var(--motm-grey-50); }
  /* Opening the popout focuses its first row, so the ring is SEEN — it wears the brand's signal
     green rather than the browser's blue. */
  .user-menu-item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
  .umi-ico { width: 16px; flex-shrink: 0; text-align: center; color: var(--motm-grey-500); }

  /* ── Main content ─────────────────────────────── */
  .main {
    padding: 28px 36px 60px;
    max-width: 1280px;
    width: 100%;
  }
  /* Firm-ops / owner dashboard fills the full viewport width next to the sidebar.
     The 1280px readable cap stays for the client-facing Cornerstone portal views. */
  .main:has(#view-ops.active) { max-width: none; }

  .topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--motm-grey-300);
    gap: 24px;
  }
  .page-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .page-sub {
    font-size: 13px;
    color: var(--motm-grey-700);
    margin-top: 4px;
  }

  .breadcrumb {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .breadcrumb a {
    color: var(--motm-green);
    text-decoration: none;
    cursor: pointer;
  }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb-sep { color: var(--motm-grey-500); }

  .period-picker {
    display: flex;
    gap: 0;
    background: var(--motm-grey-100);
    border-radius: var(--radius-md);
    padding: 3px;
    flex-shrink: 0;
  }
  .period-btn {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--motm-grey-700);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-family: inherit;
  }
  .period-btn.active {
    background: #fff;
    color: var(--motm-charcoal);
    box-shadow: var(--shadow-sm);
  }
  .period-btn:not(.active):hover { color: var(--motm-charcoal); }

  /* ── Status banner ────────────────────────────── */
  .status-banner {
    background: linear-gradient(135deg, var(--motm-green) 0%, var(--motm-green-dark) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .status-banner-text { flex: 1; }
  .status-banner-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .status-banner-sub {
    font-size: 13px;
    opacity: 0.85;
  }
  .status-pill {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  .status-dot {
    width: 8px; height: 8px;
    background: #7dd394;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(125, 211, 148, 0.25);
  }

  /* ── Metric grid ──────────────────────────────── */
  .metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .metric {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    transition: border-color 0.15s;
  }
  .metric:hover { border-color: var(--motm-grey-300); }
  .metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-700);
    font-weight: 500;
    margin-bottom: 8px;
  }
  .metric-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .metric-delta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
  }
  .metric-delta.up { color: var(--motm-success); }
  .metric-delta.down { color: var(--motm-danger); }
  .metric-delta-arrow { font-size: 10px; }

  /* ── 2-col content row ────────────────────────── */
  .row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
  }
  .row.full { grid-template-columns: 1fr; }
  .row.equal { grid-template-columns: 1fr 1fr; }

  .card {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
  }
  .card-tight { padding: 0; }
  .card-tight .card-header { padding: 22px 24px 18px; margin: 0; }
  .card-tight .card-body { padding: 0 24px 22px; }

  .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 16px;
  }
  .card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.01em;
  }
  .card-sub {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }
  .card-link {
    font-size: 12px;
    color: var(--motm-green);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }
  .card-link:hover { text-decoration: underline; }

  /* ── Buttons ─────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--motm-grey-300);
    background: #fff;
    color: var(--motm-charcoal);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-decoration: none;
  }
  .btn:hover { border-color: var(--motm-grey-500); color: var(--motm-charcoal); }
  .btn-primary {
    background: var(--motm-green);
    color: #fff;
    border-color: var(--motm-green);
  }
  .btn-primary:hover { background: var(--motm-green-dark); border-color: var(--motm-green-dark); color: #fff; }
  .btn-icon { width: 14px; height: 14px; }

  /* ── Chart ────────────────────────────────────── */
  .chart-wrap {
    position: relative;
    height: 260px;
    margin-top: 8px;
  }

  /* ── Tables ─────────────────────────────────── */
  .table {
    width: 100%;
    border-collapse: collapse;
  }
  .table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--motm-grey-700);
    font-weight: 500;
    padding: 10px 12px;
    border-bottom: 1px solid var(--motm-grey-300);
  }
  .table th.right, .table td.right { text-align: right; }
  .table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--motm-grey-100);
    font-size: 13px;
    color: var(--motm-charcoal);
    vertical-align: middle;
  }
  .table tr:last-child td { border-bottom: none; }
  .table tr.clickable { cursor: pointer; }
  .table tr.clickable:hover td { background: var(--motm-grey-50); }

  .property-name { font-weight: 500; color: var(--motm-charcoal); }
  .property-addr { font-size: 11px; color: var(--motm-grey-700); margin-top: 2px; }
  .num { font-variant-numeric: tabular-nums; font-weight: 500; }
  .num.pos { color: var(--motm-success); }
  .num.neg { color: var(--motm-danger); }

  .occ-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
  .occ-bar { width: 50px; height: 4px; background: var(--motm-grey-100); border-radius: 2px; overflow: hidden; }
  .occ-fill { height: 100%; background: var(--signal); border-radius: 2px; }

  /* ── Activity ─────────────────────────────────── */
  .activity-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .activity-item:last-child { border-bottom: none; padding-bottom: 0; }
  .activity-item:first-child { padding-top: 0; }
  .activity-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
  }
  .activity-icon.green { background: var(--signal-tint); color: var(--signal); }
  .activity-icon.amber { background: #fdf3e0; color: var(--motm-warning); }
  .activity-icon.blue { background: #e6eff7; color: var(--motm-info); }
  .activity-text { flex: 1; }
  .activity-title { font-size: 13px; font-weight: 500; color: var(--motm-charcoal); }
  .activity-sub { font-size: 12px; color: var(--motm-grey-700); margin-top: 2px; }
  .activity-time { font-size: 11px; color: var(--motm-grey-500); margin-top: 4px; }

  /* ── P&L mini ─────────────────────────────────── */
  .pnl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--motm-grey-100);
    font-size: 13px;
  }
  .pnl-row.total {
    border-top: 1px solid var(--motm-grey-300);
    border-bottom: none;
    margin-top: 4px;
    padding-top: 14px;
    font-weight: 600;
  }
  .pnl-label { color: var(--motm-grey-700); }
  .pnl-row.total .pnl-label { color: var(--motm-charcoal); font-weight: 600; }
  .pnl-value { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--motm-charcoal); }
  .pnl-row.total .pnl-value { font-family: 'Fraunces', Georgia, serif; font-size: 18px; color: var(--motm-green); }

  /* ── Delivery card ────────────────────────────── */
  .delivery-card {
    background: var(--motm-green-tint);
    border: 1px solid #c5dccd;
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .delivery-icon {
    width: 40px; height: 40px;
    background: var(--motm-green);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
  }
  .delivery-text { flex: 1; }
  .delivery-title { font-size: 14px; font-weight: 600; color: var(--motm-green-dark); }
  .delivery-sub { font-size: 12px; color: var(--motm-grey-700); margin-top: 2px; }

  /* ── Reports page ─────────────────────────────── */
  .reports-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 24px;
  }
  .report-card {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    transition: all 0.15s;
    cursor: pointer;
  }
  .report-card:hover {
    border-color: var(--motm-green-light);
    box-shadow: var(--shadow-md);
  }
  /* Transactions table affordances. Same reason as the P&L rows below: these were set
     per-element at bind time, so they only existed for as long as the original nodes did. */
  #txnTableBody tr { cursor: pointer; }
  #txn-card thead th { cursor: pointer; user-select: none; }

  /* Clickable P&L lines (Dashboard + Property Detail). Was applied per-element at bind
     time; moved here so the affordance survives restoreDemo()'s innerHTML rebuild and
     applies to live-rendered rows as well as the demo's baked markup. */
  #view-dashboard .pnl-row:not(.total),
  #view-property .pnl-row:not(.total) {
    cursor: pointer;
    transition: background 0.12s;
  }
  #view-dashboard .pnl-row:not(.total):hover,
  #view-property .pnl-row:not(.total):hover {
    background: var(--motm-grey-50);
  }
  .report-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .report-icon {
    width: 38px; height: 38px;
    background: var(--motm-green-tint);
    color: var(--motm-green);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .report-icon svg { width: 20px; height: 20px; }
  .report-pill {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--motm-success);
    background: var(--motm-green-tint);
    padding: 4px 10px;
    border-radius: 100px;
    font-weight: 600;
  }
  .report-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--motm-charcoal);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .report-meta {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-bottom: 14px;
  }
  .report-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }

  /* ── Message thread ───────────────────────────── */
  .message-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .message {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    background: var(--motm-grey-50);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--motm-grey-300);
  }
  .message.from-team {
    background: var(--motm-green-tint);
    border-left-color: var(--motm-green);
  }
  .message.from-me {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-left: 3px solid var(--motm-info);
  }
  .message-body { flex: 1; }
  .message-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
  }
  .message-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--motm-charcoal);
  }
  .message-role {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-left: 6px;
    font-weight: 400;
  }
  .message-time {
    font-size: 11px;
    color: var(--motm-grey-500);
  }
  .message-text {
    font-size: 13.5px;
    color: var(--motm-grey-900);
    line-height: 1.55;
  }
  .message-tag {
    display: inline-block;
    font-size: 11px;
    background: rgba(48, 104, 68, 0.1);
    color: var(--motm-green-dark);
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
    font-weight: 500;
  }

  .compose {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-top: 18px;
  }
  .compose textarea {
    width: 100%;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
    color: var(--motm-charcoal);
    background: transparent;
  }
  .compose textarea::placeholder { color: var(--motm-grey-500); }
  .compose-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--motm-grey-100);
  }
  .compose-hint { font-size: 12px; color: var(--motm-grey-500); }

  /* ── Property detail ─────────────────────────── */
  .property-hero {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
  }
  .property-hero-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.02em;
  }
  .property-hero-meta {
    font-size: 13px;
    color: var(--motm-grey-700);
    margin-top: 6px;
  }
  .property-hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 18px;
  }
  .stat {
    display: flex;
    flex-direction: column;
  }
  .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--motm-grey-700);
    font-weight: 500;
  }
  .stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--motm-charcoal);
    margin-top: 4px;
    letter-spacing: -0.01em;
  }

  .txn-row { font-size: 13px; }
  .txn-date { color: var(--motm-grey-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .txn-cat-pill {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
  }
  .txn-cat-pill.income { background: #e0f0e6; color: var(--brand-deep,#1f4a2d); }
  .txn-cat-pill.expense { background: #f4e6e0; color: #7a3a1f; }
  .txn-cat-pill.capex { background: #e0e8f4; color: #1d3f6b; }

  /* ── View switcher ─────────────────────────── */
  .view { display: none; }
  .view.active { display: block; }

  /* ── Helpers ───────────────────────────────── */
  .filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .filter-pill {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--motm-grey-700);
    cursor: pointer;
    transition: all 0.15s;
  }
  .filter-pill:hover { border-color: var(--motm-grey-500); color: var(--motm-charcoal); }
  .filter-pill.active {
    background: var(--motm-green);
    border-color: var(--motm-green);
    color: #fff;
  }

  .empty-hint {
    font-size: 12px;
    color: var(--motm-grey-500);
    margin-top: 12px;
    font-style: italic;
  }

  /* ── Onboarding flow ─────────────────────────── */
  .onboard-hero {
    background: linear-gradient(135deg, var(--motm-green) 0%, var(--motm-green-dark) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
  }
  .onboard-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
  }
  .onboard-hero::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 80px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
  }
  .onboard-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .onboard-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
    max-width: 640px;
    position: relative;
    z-index: 1;
  }
  .onboard-title em { font-style: italic; }
  .onboard-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    max-width: 560px;
    position: relative;
    z-index: 1;
  }

  .onboard-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 22px;
  }
  .onboard-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--motm-grey-100);
    border-radius: 3px;
    overflow: hidden;
  }
  .onboard-progress-fill {
    height: 100%;
    background: var(--motm-green);
    border-radius: 3px;
    transition: width 0.4s ease;
  }
  .onboard-progress-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--motm-charcoal);
    white-space: nowrap;
  }

  .onboard-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
  .onboard-step {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    transition: all 0.15s;
  }
  .onboard-step:hover { border-color: var(--motm-grey-300); }
  .onboard-step.done { background: var(--signal-tint); border-color: #c5dccd; }
  .onboard-step.active {
    border-color: var(--signal);
    border-width: 2px;
    padding: 21px 25px;
    box-shadow: var(--shadow-md);
  }

  .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--motm-grey-100);
    color: var(--motm-grey-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Fraunces', Georgia, serif;
    flex-shrink: 0;
  }
  .onboard-step.done .step-num {
    background: var(--signal);
    color: #fff;
  }
  .onboard-step.active .step-num {
    background: var(--signal);
    color: #fff;
  }

  .step-body { flex: 1; }
  .step-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--motm-charcoal);
    margin-bottom: 4px;
  }
  .step-desc {
    font-size: 13px;
    color: var(--motm-grey-700);
    line-height: 1.5;
  }
  .step-meta {
    font-size: 11px;
    color: var(--motm-grey-500);
    margin-top: 6px;
  }

  .onboard-team {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    margin-bottom: 22px;
  }
  .onboard-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 18px;
  }
  .team-card {
    text-align: center;
    padding: 18px 14px;
    border-radius: var(--radius-md);
    background: var(--motm-grey-50);
    border: 1px solid var(--motm-grey-100);
  }
  .team-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--motm-green);
    color: #fff;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
  }
  .team-avatar.alt { background: var(--motm-green-light); }
  .team-avatar.alt2 { background: var(--motm-charcoal); }
  .team-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--motm-charcoal);
  }
  .team-role {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }
  .team-bio {
    font-size: 12px;
    color: var(--motm-grey-700);
    line-height: 1.45;
    margin-top: 10px;
  }

  /* ── Documents view ──────────────────────────── */
  .doc-folders {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .doc-folder {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .doc-folder:hover {
    border-color: var(--motm-green-light);
    box-shadow: var(--shadow-sm);
  }
  .doc-folder.active {
    border-color: var(--motm-green);
    background: var(--motm-green-tint);
  }
  .doc-folder-icon {
    width: 32px; height: 32px;
    background: var(--motm-green-tint);
    color: var(--motm-green);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  .doc-folder-icon svg { width: 18px; height: 18px; }
  .doc-folder.active .doc-folder-icon { background: #fff; }
  .doc-folder-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--motm-charcoal);
  }
  .doc-folder-count {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }

  .doc-list-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--motm-grey-100);
    font-size: 13px;
    cursor: pointer;
  }
  .doc-list-row:last-child { border-bottom: none; }
  .doc-list-row:hover { background: var(--motm-grey-50); }
  /* LIVE DOCUMENT ROWS (Documents room, 2026-08-13) — a real client's filed documents.
     Six columns, not the demo's five: the extra one carries the row's only affordance.
     `cursor: default` on the row is deliberate — the demo's rows are clickable because a
     click opens a mock preview, and a mock preview of a document we actually hold would be
     a fabricated view of real paperwork. Live rows open their real bytes through the Open
     link or they do nothing at all. */
  .doc-list-row[data-doc-live] {
    grid-template-columns: auto 1fr auto auto auto auto;
    cursor: default;
  }
  .doc-open {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--fs-label, 11px);
    font-weight: 600;
    text-decoration: none;
    color: var(--action-deep, #0c7a38);
    background: var(--action-tint, #e4f9e8);
    border: 1px solid var(--action-line, #8fdba8);
    white-space: nowrap;
  }
  .doc-open:hover { background: #d3f3da; }
  /* "Filed" is a STATE, not a button — no border, no fill, nothing that invites a click.
     These are the documents we hold and cannot serve bytes for yet; dressing that up as an
     affordance is how a surface teaches a client its buttons are decorative. */
  .doc-filed {
    font-size: var(--fs-micro, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--motm-grey-500);
    white-space: nowrap;
  }
  /* [hidden] must win over the display:grid above — otherwise the empty-state row
     ("No documents match…") renders UNDER real results instead of staying hidden. */
  .doc-list-row[hidden] { display: none !important; }
  .doc-icon-sm {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--motm-grey-100);
    color: var(--motm-grey-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .doc-icon-sm.pdf { background: #fce8e8; color: #8a2929; }
  .doc-icon-sm.xls { background: #e0f0e6; color: var(--brand-deep,#1f4a2d); }
  .doc-icon-sm.img { background: #e6eff7; color: #1d3f6b; }
  .doc-name { font-weight: 500; color: var(--motm-charcoal); }
  .doc-meta { font-size: 11px; color: var(--motm-grey-700); margin-top: 2px; }
  .doc-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    background: var(--motm-grey-100);
    color: var(--motm-grey-700);
  }
  .doc-size { font-size: 12px; color: var(--motm-grey-500); font-variant-numeric: tabular-nums; }
  .doc-date { font-size: 12px; color: var(--motm-grey-700); white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* ── Tax pack view ───────────────────────────── */
  .tax-timeline {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    margin-bottom: 22px;
  }
  .timeline-track {
    position: relative;
    margin: 24px 0 8px;
    padding-left: 28px;
  }
  .timeline-track::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--motm-grey-100);
  }
  .timeline-item {
    position: relative;
    padding: 0 0 22px;
  }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-dot {
    position: absolute;
    left: -28px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--motm-grey-100);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--motm-grey-700);
    box-shadow: 0 0 0 2px var(--motm-grey-100);
  }
  .timeline-item.done .timeline-dot {
    background: var(--motm-green);
    color: #fff;
    box-shadow: 0 0 0 2px var(--motm-green-tint);
  }
  .timeline-item.active .timeline-dot {
    background: var(--motm-warning);
    color: #fff;
    box-shadow: 0 0 0 2px #fdf3e0;
  }
  .timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--motm-charcoal);
    margin-bottom: 2px;
  }
  .timeline-meta {
    font-size: 12px;
    color: var(--motm-grey-700);
    line-height: 1.5;
  }
  .timeline-date {
    font-size: 11px;
    color: var(--motm-grey-500);
    margin-top: 4px;
  }

  .tax-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
  }
  .tax-doc {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .tax-doc:hover { border-color: var(--motm-grey-300); }
  .tax-doc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .tax-doc-icon {
    width: 32px; height: 32px;
    background: var(--motm-green-tint);
    color: var(--motm-green);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.04em;
  }
  .tax-doc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--motm-charcoal);
    line-height: 1.3;
  }
  .tax-doc-meta { font-size: 11px; color: var(--motm-grey-700); margin-top: 8px; }

  /* ── Settings view ───────────────────────────── */
  .settings-section {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
  }
  .setting-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .setting-row:last-child { border-bottom: none; padding-bottom: 0; }
  .setting-row:first-child { padding-top: 0; }
  .setting-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--motm-charcoal);
  }
  .setting-desc {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 2px;
    line-height: 1.45;
  }
  .toggle {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--motm-grey-300);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .toggle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .toggle.on { background: var(--motm-green); }
  .toggle.on::after { left: 19px; }

  .input-text {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--motm-charcoal);
    font-family: inherit;
    min-width: 200px;
  }
  .input-text:focus {
    outline: none;
    border-color: var(--motm-green);
    box-shadow: 0 0 0 3px rgba(48, 104, 68, 0.1);
  }

  .integration-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .integration-row:last-child { border-bottom: none; padding-bottom: 0; }
  .integration-row:first-child { padding-top: 0; }
  .integration-logo {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--motm-grey-100);
    color: var(--motm-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }
  .integration-logo.qbo { background: #2ca01c; color: #fff; }
  .integration-logo.relay { background: #1e3a5f; color: #fff; }
  .integration-logo.gusto { background: #f45d22; color: #fff; }
  .integration-name { font-size: 14px; font-weight: 600; color: var(--motm-charcoal); }
  .integration-status { font-size: 12px; color: var(--motm-grey-700); margin-top: 2px; }
  .integration-status.connected { color: var(--motm-success); }

  .danger-zone {
    background: #fdf3f3;
    border: 1px solid #f0caca;
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-top: 22px;
  }
  .danger-zone .card-title { color: var(--motm-danger); }
  .danger-zone .btn-danger {
    background: #fff;
    color: var(--motm-danger);
    border-color: #f0caca;
  }
  .danger-zone .btn-danger:hover {
    background: var(--motm-danger);
    color: #fff;
    border-color: var(--motm-danger);
  }

  /* ── Statement of Cash Flows ─────────────────── */
  .cf-statement {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .cf-section-head {
    background: var(--motm-grey-50);
    padding: 12px 24px;
    border-bottom: 1px solid var(--motm-grey-300);
    border-top: 1px solid var(--motm-grey-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cf-section-head:first-child { border-top: none; }
  .cf-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--motm-grey-700);
  }
  .cf-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 24px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--motm-grey-100);
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
  }
  .cf-line:hover { background: var(--motm-grey-50); }
  .cf-line.has-comment {
    background: rgba(48, 104, 68, 0.04);
  }
  .cf-line.has-comment:hover { background: rgba(48, 104, 68, 0.08); }
  .cf-line:last-child { border-bottom: none; }
  .cf-line.subtotal {
    background: var(--motm-grey-50);
    font-weight: 600;
    border-top: 1px solid var(--motm-grey-300);
    border-bottom: 1px solid var(--motm-grey-300);
  }
  .cf-line.subtotal:hover { background: #ecf0ed; }
  .cf-line.total {
    background: var(--motm-green-tint);
    font-weight: 700;
    border-top: 2px solid var(--motm-green);
    cursor: default;
  }
  .cf-line.total .cf-amount { color: var(--motm-green-dark); font-family: 'Fraunces', Georgia, serif; font-size: 16px; }
  .cf-line.total:hover { background: var(--motm-green-tint); }

  .cf-label-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .cf-label {
    color: var(--motm-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cf-line.subtotal .cf-label, .cf-line.total .cf-label { color: var(--motm-charcoal); font-weight: 600; }
  .cf-comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--motm-green-tint);
    color: var(--motm-green-dark);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid #c5dccd;
    flex-shrink: 0;
  }
  .cf-comment-badge .dot { width: 6px; height: 6px; background: var(--motm-green); border-radius: 50%; }
  .cf-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--motm-charcoal);
    text-align: right;
    min-width: 90px;
  }
  .cf-prior {
    font-variant-numeric: tabular-nums;
    color: var(--motm-grey-500);
    text-align: right;
    min-width: 90px;
    font-size: 12px;
  }
  .cf-delta {
    font-size: 12px;
    text-align: right;
    min-width: 80px;
    font-variant-numeric: tabular-nums;
  }
  .cf-delta.up { color: var(--motm-success); }
  .cf-delta.down { color: var(--motm-danger); }
  .cf-action-hint {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--motm-grey-500);
    background: #fff;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--motm-grey-300);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    box-shadow: var(--shadow-sm);
  }
  .cf-line:hover .cf-action-hint { opacity: 1; }
  .cf-line.subtotal:hover .cf-action-hint, .cf-line.total .cf-action-hint { display: none; }

  /* ── DSCR widget ────────────────────────────── */
  .dscr-card {
    background: linear-gradient(135deg, var(--brand-deep,#1f4a2d) 0%, var(--brand-mid,#306844) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
  }
  .dscr-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
  }
  .dscr-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .dscr-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
  }
  .dscr-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 14px 0 8px;
    position: relative;
    z-index: 1;
  }
  .dscr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(125, 211, 148, 0.2);
    border: 1px solid rgba(125, 211, 148, 0.4);
    color: #c4f0d2;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
  }
  .dscr-status .dot { width: 8px; height: 8px; background: #7dd394; border-radius: 50%; box-shadow: 0 0 0 3px rgba(125, 211, 148, 0.25); }
  .dscr-formula {
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 12px;
    font-family: 'Fraunces', Georgia, serif;
    line-height: 1.6;
  }
  .dscr-formula-row {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.85);
  }
  .dscr-formula-row .num { color: #fff; font-weight: 500; }
  .dscr-formula-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 6px 0;
  }
  .dscr-target {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
  }
  .dscr-target-bar {
    flex: 1;
    margin: 0 12px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .dscr-target-fill {
    height: 100%;
    background: #7dd394;
    border-radius: 2px;
  }
  .dscr-target-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 12px;
    background: #fff;
  }

  /* ── Comment popover (for @mention demo) ─────── */
  .popover-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 29, 28, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .popover-overlay.active { display: flex; }
  .popover {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    border: 1px solid var(--motm-grey-300);
  }
  .popover-head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .popover-context-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--motm-grey-700);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .popover-context-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.01em;
  }
  .popover-context-meta {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .popover-body { padding: 18px 22px; }
  .popover-existing {
    background: var(--motm-grey-50);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--motm-grey-900);
  }
  .popover-existing-meta {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .popover-textarea {
    width: 100%;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--motm-charcoal);
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s;
  }
  .popover-textarea:focus {
    outline: none;
    border-color: var(--motm-green);
    box-shadow: 0 0 0 3px rgba(48, 104, 68, 0.1);
  }
  .popover-mention-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--motm-green-tint);
    border-radius: var(--radius-md);
    border: 1px solid #c5dccd;
    font-size: 12px;
    color: var(--motm-green-dark);
  }
  .mention-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--motm-green);
    color: #fff;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
  }
  .popover-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--motm-grey-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--motm-grey-50);
  }
  .popover-foot-hint {
    font-size: 11px;
    color: var(--motm-grey-700);
  }
  .popover-foot-actions { display: flex; gap: 8px; }
  .popover-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--motm-grey-700);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
  }
  .popover-close:hover { background: var(--motm-grey-100); color: var(--motm-charcoal); }

  /* ── Cash flow chart on statement page ───────── */
  .cf-chart-wrap {
    position: relative;
    height: 220px;
    margin-top: 8px;
  }

  /* ── Loan cards ──────────────────────────────── */
  .loan-card {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
    transition: border-color 0.15s;
  }
  .loan-card:hover { border-color: var(--motm-grey-300); }

  /* ── Amortization schedule (loan card expand) ── */
  .loan-card { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
  .loan-card.expanded { border-color: var(--motm-green); box-shadow: 0 4px 16px rgba(48, 104, 68, 0.08); cursor: default; }
  .loan-card.expanded .loan-card-head::after {
    content: "▾"; margin-left: 10px; color: var(--motm-green); font-size: 14px;
  }
  .loan-card:not(.expanded):hover .loan-card-head::after {
    content: "▸"; margin-left: 10px; color: var(--motm-grey-500); font-size: 14px;
  }
  .amort-schedule { margin-top: 18px; }
  .amort-divider { border-top: 1px dashed var(--motm-grey-200); margin: 4px 0 16px; }
  .amort-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
  }
  .amort-title { font-size: 14px; font-weight: 600; color: var(--motm-charcoal); }
  .amort-sub { font-size: 12px; color: var(--motm-grey-500); margin-top: 2px; }
  .amort-close {
    background: var(--motm-grey-50); border: 1px solid var(--motm-grey-100); color: var(--motm-grey-700);
    font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 500;
  }
  .amort-close:hover { background: var(--motm-grey-100); }
  .amort-summary {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    background: var(--motm-grey-50); border-radius: var(--radius-lg);
    padding: 14px 18px; margin-bottom: 14px;
  }
  .amort-summary-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--motm-grey-500); font-weight: 500; margin-bottom: 4px;
  }
  .amort-summary-value { font-size: 16px; font-weight: 600; color: var(--motm-charcoal); }
  .amort-summary-of { font-size: 12px; color: var(--motm-grey-500); font-weight: 400; }
  .amort-controls {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
  }
  .amort-btn {
    background: #fff; border: 1px solid var(--motm-grey-100); color: var(--motm-grey-700);
    font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: 500;
  }
  .amort-btn:hover { background: var(--motm-grey-50); border-color: var(--motm-grey-300); color: var(--motm-charcoal); }
  .amort-scroll {
    max-height: 360px; overflow-y: auto; border: 1px solid var(--motm-grey-100); border-radius: var(--radius-lg);
  }
  .amort-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
  }
  .amort-table thead {
    position: sticky; top: 0; background: var(--motm-grey-50); z-index: 2;
  }
  .amort-table th {
    text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--motm-grey-500); font-weight: 500;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .amort-table th.right, .amort-table td.right { text-align: right; }
  .amort-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--motm-grey-50); color: var(--motm-charcoal);
  }
  .amort-table tr.amort-paid td { color: var(--motm-grey-500); text-decoration: line-through; }
  .amort-table tr.amort-paid td.amort-status { text-decoration: none; color: var(--motm-success); font-weight: 500; }
  .amort-table tr.amort-future td.amort-status { color: var(--motm-grey-500); font-weight: 400; }
  .amort-table tr.amort-next-payment td {
    background: var(--motm-green-tint); font-weight: 500;
  }
  .amort-table tr.amort-next-payment td.amort-status { color: var(--motm-green); }

  .loan-card-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
  }
  .loan-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.01em;
  }
  .loan-property {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }
  .loan-rate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--motm-grey-100);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--motm-grey-700);
    font-variant-numeric: tabular-nums;
  }
  .loan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--motm-grey-100);
    border-bottom: 1px solid var(--motm-grey-100);
    margin-bottom: 14px;
  }
  .loan-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-700);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .loan-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--motm-charcoal);
    font-variant-numeric: tabular-nums;
  }
  .loan-stat-sub {
    font-size: 11px;
    color: var(--motm-grey-500);
    margin-top: 2px;
  }
  .loan-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--motm-grey-700);
  }
  .loan-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--motm-grey-100);
    border-radius: 3px;
    overflow: hidden;
  }
  .loan-progress-fill {
    height: 100%;
    background: var(--motm-green);
    border-radius: 3px;
  }
  .loan-equity-bar {
    height: 6px;
    background: var(--motm-grey-100);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
  }
  .loan-equity-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--motm-green) 0%, var(--motm-green-light) 100%);
    border-radius: 3px;
  }

  /* ── Strategy pills ──────────────────────────── */
  .strategy-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .strategy-pill.ltr { background: #e0f0e6; color: var(--brand-deep,#1f4a2d); }
  .strategy-pill.str { background: #fdf3e0; color: #6b4710; }
  .strategy-pill.mtr { background: #e6eff7; color: #1d3f6b; }
  .strategy-pill.flip { background: #f4e6e0; color: #7a3a1f; }
  .strategy-pill.brrrr { background: #efe3f4; color: #4a1d6b; }
  .strategy-pill.reno { background: #fce8e8; color: #8a2929; }

  /* ── Stack (banks/cards/loans/tech) ──────────── */
  .stack-section-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .stack-section-sub {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-bottom: 14px;
  }
  .stack-list { margin-bottom: 24px; }
  .stack-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    font-size: 13px;
  }
  .stack-row:hover { border-color: var(--motm-grey-300); }
  .stack-logo {
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    color: #fff;
  }
  .stack-bank-1 { background: #1e3a5f; }
  .stack-bank-2 { background: #2c7044; }
  .stack-bank-3 { background: #5d4a2a; }
  .stack-card-1 { background: #1a1d1c; }
  .stack-card-2 { background: #2c5e8f; }
  .stack-tech-qbo { background: #2ca01c; }
  .stack-tech-double { background: #6c4dde; color: #fff; }
  .stack-tech-relay { background: #1e3a5f; }
  .stack-tech-other { background: var(--motm-grey-700); }

  .stack-name {
    font-weight: 600;
    color: var(--motm-charcoal);
  }
  .stack-purpose {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }
  .stack-detail {
    font-size: 12px;
    color: var(--motm-grey-700);
    font-variant-numeric: tabular-nums;
  }
  .stack-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
  }
  .stack-status.connected { background: var(--motm-green-tint); color: var(--motm-green-dark); }
  .stack-status.manual { background: var(--motm-grey-100); color: var(--motm-grey-700); }

  /* ── Professional team ───────────────────────── */
  .pro-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
  }
  .pro-card {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
  }
  .pro-card.empty {
    background: var(--motm-grey-50);
    border-style: dashed;
  }
  .pro-card.motm-pitch {
    background: linear-gradient(135deg, var(--motm-green-tint) 0%, #fff 100%);
    border-color: var(--motm-green-light);
  }
  .pro-role-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--motm-grey-700);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .pro-card.motm-pitch .pro-role-label { color: var(--motm-green); }
  .pro-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .pro-name-empty {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--motm-grey-500);
    font-style: italic;
    margin-bottom: 4px;
  }
  .pro-firm {
    font-size: 13px;
    color: var(--motm-grey-700);
    margin-bottom: 8px;
  }
  .pro-contact {
    font-size: 12px;
    color: var(--motm-grey-700);
    line-height: 1.5;
  }
  .pro-pitch-text {
    font-size: 13px;
    color: var(--motm-grey-900);
    line-height: 1.55;
    margin: 10px 0 14px;
  }
  .pro-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }

  /* ── 1099 service block ──────────────────────── */
  .nines-block {
    background: linear-gradient(135deg, #fff 0%, var(--motm-grey-50) 100%);
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: 22px;
    overflow: hidden;
  }
  .nines-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 26px 18px;
  }
  .nines-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--motm-green);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .nines-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .nines-sub {
    font-size: 13px;
    color: var(--motm-grey-700);
    line-height: 1.5;
  }
  .nines-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: var(--motm-green-tint);
    color: var(--motm-green-dark);
    border: 1px solid #c5dccd;
    white-space: nowrap;
  }
  .nines-pricing {
    background: #fff;
    border-top: 1px solid var(--motm-grey-100);
    padding: 18px 26px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    align-items: center;
  }
  .nines-price-cell {
    text-align: center;
  }
  .nines-price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-700);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .nines-price-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.02em;
  }
  .nines-price-sub {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }
  .nines-included {
    background: var(--motm-grey-50);
    border-top: 1px solid var(--motm-grey-100);
    padding: 18px 26px;
  }
  .nines-included-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-700);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .nines-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .nines-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--motm-grey-900);
    line-height: 1.45;
  }
  .nines-check::before {
    content: '✓';
    color: var(--motm-green);
    font-weight: 700;
    flex-shrink: 0;
  }
  .nines-foot {
    background: #fff;
    border-top: 1px solid var(--motm-grey-100);
    padding: 16px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .nines-foot-text {
    font-size: 12px;
    color: var(--motm-grey-700);
    line-height: 1.5;
  }
  .nines-actions { display: flex; gap: 8px; }

  /* ── Projects view ───────────────────────────── */
  .project-card {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 16px;
    transition: border-color 0.15s;
  }
  .project-card:hover { border-color: var(--motm-grey-300); }
  .project-card.over-budget { border-color: #f0caca; background: #fdfafa; }
  .project-card.completed { background: var(--motm-green-tint); border-color: #c5dccd; }

  .project-expand-section {
    display: none;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--motm-grey-100);
  }
  .project-card.expanded .project-expand-section {
    display: block;
  }
  .project-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--motm-grey-50);
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--motm-grey-900);
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s;
    font-family: inherit;
  }
  .project-expand-toggle:hover { background: var(--motm-grey-100); }
  .project-expand-toggle .arrow { transition: transform 0.2s; display: inline-block; }
  .project-card.expanded .project-expand-toggle .arrow { transform: rotate(180deg); }

  .project-txn-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .project-txn-mini th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--motm-grey-700);
    font-weight: 600;
    border-bottom: 1px solid var(--motm-grey-200);
  }
  .project-txn-mini td {
    padding: 10px;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .project-txn-mini tr.clickable { cursor: pointer; }
  .project-txn-mini tr.clickable:hover { background: var(--motm-grey-50); }
  .project-txn-mini .right { text-align: right; }

  /* Budget vs Actuals */
  .budget-toggle-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .budget-tab-btn {
    padding: 7px 14px;
    border: 1px solid var(--motm-grey-300);
    background: #fff;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--motm-grey-700);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
  }
  .budget-tab-btn.active {
    background: var(--motm-green);
    color: #fff;
    border-color: var(--motm-green);
  }
  .budget-tab-btn:hover:not(.active) { border-color: var(--motm-grey-500); color: var(--motm-charcoal); }

  .budget-vs-actual {
    display: none;
  }
  .budget-vs-actual.active { display: block; }
  .bva-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
  }
  .bva-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--motm-grey-700);
    font-weight: 600;
    background: var(--motm-grey-50);
    border-bottom: 1px solid var(--motm-grey-300);
  }
  .bva-table th.right { text-align: right; }
  .bva-table td {
    padding: 12px;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .bva-table td.right { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
  .bva-table tr:hover td { background: var(--motm-grey-50); }
  .bva-table tr.totals-row td {
    background: var(--motm-grey-50);
    border-top: 2px solid var(--motm-grey-300);
    border-bottom: 1px solid var(--motm-grey-300);
    font-weight: 600;
  }
  .bva-budget-input {
    width: 90px;
    padding: 4px 8px;
    border: 1px solid var(--motm-grey-300);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .bva-budget-input:focus {
    outline: none;
    border-color: var(--motm-green);
    background: var(--motm-green-tint);
  }
  .bva-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
  }
  .bva-status.on-budget { background: #e8f1ec; color: var(--motm-green-dark); }
  .bva-status.over { background: #fde2e2; color: var(--motm-danger); }
  .bva-status.pending { background: var(--motm-grey-100); color: var(--motm-grey-700); }
  .bva-status.under { background: #fff3cd; color: #856404; }
  .bva-variance.over { color: var(--motm-danger); }
  .bva-variance.under { color: var(--motm-success); }
  .bva-add-line-btn {
    padding: 8px 14px;
    border: 1px dashed var(--motm-grey-300);
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--motm-grey-700);
    cursor: pointer;
    width: 100%;
    transition: all 0.12s;
    font-family: inherit;
    margin-bottom: 12px;
  }
  .bva-add-line-btn:hover {
    border-color: var(--motm-green);
    color: var(--motm-green);
    background: var(--motm-green-tint);
  }
  .bva-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px;
    background: var(--motm-grey-50);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
  }
  .bva-summary-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--motm-grey-700);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .bva-summary-stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
  }
  .bva-summary-stat-value.pos { color: var(--motm-success); }
  .bva-summary-stat-value.neg { color: var(--motm-danger); }

  .project-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
  }
  .project-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--motm-charcoal);
    letter-spacing: -0.01em;
  }
  .project-meta {
    font-size: 12px;
    color: var(--motm-grey-700);
    margin-top: 4px;
  }
  .project-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .project-status-pill.active { background: var(--motm-green-tint); color: var(--motm-green-dark); border: 1px solid #c5dccd; }
  .project-status-pill.warn { background: #fdf3e0; color: #6b4710; border: 1px solid #f0d59a; }
  .project-status-pill.danger { background: #fdf3f3; color: var(--motm-danger); border: 1px solid #f0caca; }
  .project-status-pill.done { background: #fff; color: var(--motm-success); border: 1px solid var(--motm-green-light); }
  .project-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
  .project-status-pill.active .dot { background: var(--motm-green); }
  .project-status-pill.warn .dot { background: var(--motm-warning); }
  .project-status-pill.danger .dot { background: var(--motm-danger); }
  .project-status-pill.done .dot { background: var(--motm-success); }

  .project-budget {
    background: var(--motm-grey-50);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 16px;
  }
  .project-budget-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .project-budget-row:last-of-type { margin-bottom: 12px; }
  .project-budget-label { color: var(--motm-grey-700); display: flex; align-items: center; gap: 8px; }
  .project-budget-value { font-weight: 600; color: var(--motm-charcoal); font-variant-numeric: tabular-nums; cursor: pointer; padding: 2px 8px; border-radius: 4px; transition: background 0.12s; }
  .project-budget-value:hover { background: var(--motm-green-tint); }
  .project-budget-value::after { content: " ✎"; font-size: 11px; color: var(--motm-grey-500); margin-left: 4px; }
  .project-budget-value:hover::after { color: var(--motm-green); }
  .project-budget-value.editing::after { display: none; }
  .project-budget-value.editing { background: var(--motm-grey-50); cursor: default; }
  .project-budget-bar {
    height: 8px;
    background: var(--motm-grey-100);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
  .project-budget-fill {
    height: 100%;
    background: var(--motm-green);
    border-radius: 4px;
    transition: width 0.3s ease;
  }
  .project-budget-fill.over { background: var(--motm-danger); }
  .project-budget-fill.warn { background: var(--motm-warning); }
  .project-budget-pct {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
  }

  .project-financials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--motm-grey-100);
    border-bottom: 1px solid var(--motm-grey-100);
    margin-bottom: 16px;
  }
  .project-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-700);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .project-stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--motm-charcoal);
    font-variant-numeric: tabular-nums;
  }
  .project-stat-sub {
    font-size: 11px;
    color: var(--motm-grey-500);
    margin-top: 2px;
  }

  .project-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--motm-grey-700);
    flex-wrap: wrap;
  }
  .project-foot strong { color: var(--motm-charcoal); }
  .project-foot-divider { color: var(--motm-grey-500); opacity: 0.6; }

  /* ── Project hero stat (for ROI display) ─────── */
  .roi-stat {
    background: linear-gradient(135deg, var(--motm-green-tint) 0%, #fff 100%);
    border: 1px solid #c5dccd;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    text-align: right;
    min-width: 140px;
  }
  .roi-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-green);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .roi-stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--motm-green-dark);
    letter-spacing: -0.02em;
  }
  .roi-stat-sub {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }

  /* ── Stacked filter rows (transactions) ──────── */
  .filter-stack {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    padding: 4px 0;
    margin-bottom: 18px;
    overflow: hidden;
  }
  .filter-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .filter-row:last-child { border-bottom: none; }
  .filter-row-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-700);
    font-weight: 600;
    text-align: right;
    padding-right: 6px;
  }
  .filter-pills-scroll {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  .filter-pill-sm {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--motm-grey-700);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
  }
  .filter-pill-sm:hover {
    border-color: var(--motm-green);
    color: var(--motm-green);
  }
  .filter-pill-sm.active {
    background: var(--motm-green);
    border-color: var(--motm-green);
    color: #fff;
  }
  .filter-pill-sm .pill-count {
    font-size: 10px;
    color: var(--motm-grey-500);
    font-weight: 500;
  }
  .filter-pill-sm.active .pill-count {
    color: rgba(255, 255, 255, 0.75);
  }
  .filter-pill-sm .pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .filter-pill-sm.has-warning {
    background: #fdf3e0;
    border-color: #f0d59a;
    color: #6b4710;
  }
  .filter-pill-sm.has-warning:hover {
    background: var(--motm-warning);
    border-color: var(--motm-warning);
    color: #fff;
  }

  .filter-active-summary {
    background: var(--motm-green-tint);
    border: 1px solid #c5dccd;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--motm-green-dark);
  }
  .filter-active-summary strong { color: var(--motm-charcoal); font-weight: 600; }
  .filter-clear-link {
    margin-left: auto;
    color: var(--motm-green);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    font-size: 12px;
  }
  .filter-clear-link:hover { text-decoration: underline; }

  /* ── Collapsible filter panel ────────────────── */
  .filter-stack-wrap {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    overflow: hidden;
  }
  .filter-stack-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
  }
  .filter-stack-header:hover { background: var(--motm-grey-50); }
  .filter-stack-wrap.expanded .filter-stack-header {
    border-bottom: 1px solid var(--motm-grey-100);
    background: var(--motm-grey-50);
  }
  .filter-chevron {
    width: 18px;
    height: 18px;
    color: var(--motm-grey-700);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .filter-stack-wrap.expanded .filter-chevron {
    transform: rotate(90deg);
  }
  .filter-stack-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--motm-charcoal);
    white-space: nowrap;
  }
  .filter-summary-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    overflow: hidden;
  }
  .filter-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--motm-grey-100);
    color: var(--motm-grey-700);
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
  }
  .filter-summary-chip.active-filter {
    background: var(--motm-green-tint);
    color: var(--motm-green-dark);
    border: 1px solid #c5dccd;
  }
  .filter-summary-chip-label {
    color: var(--motm-grey-500);
    font-weight: 500;
  }
  .filter-summary-chip.active-filter .filter-summary-chip-label {
    color: var(--motm-green);
  }
  .filter-stack-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .filter-result-count {
    font-size: 12px;
    color: var(--motm-grey-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .filter-result-count strong { color: var(--motm-charcoal); font-weight: 600; }
  .filter-reset-btn {
    background: none;
    border: none;
    color: var(--motm-green);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
  }
  .filter-reset-btn:hover { background: var(--motm-green-tint); }
  .filter-reset-btn:disabled {
    color: var(--motm-grey-500);
    cursor: not-allowed;
  }
  .filter-reset-btn:disabled:hover { background: none; }

  .filter-stack-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .filter-stack-wrap.expanded .filter-stack-body {
    max-height: 800px;
  }
  /* Override the original .filter-stack since it's now nested */
  .filter-stack-wrap .filter-stack {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
  }

  /* Empty state when no rows match filters */
  .table-empty-state {
    padding: 60px 24px;
    text-align: center;
    color: var(--motm-grey-700);
  }
  .table-empty-state-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
  }
  .table-empty-state-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--motm-charcoal);
    margin-bottom: 6px;
  }
  .table-empty-state-sub {
    font-size: 13px;
    color: var(--motm-grey-700);
  }

  /* ── Business switcher (sidebar) ─────────────── */
  .biz-switcher {
    margin: 6px 16px 8px;    /* rail-lift trim (Craig 8/5) — see .brand above */
    position: relative;
  }
  .biz-switcher-button {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.12s;
    color: #fff;
    font-family: inherit;
    text-align: left;
  }
  .biz-switcher-button:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .biz-switcher.open .biz-switcher-button {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
  }
  .biz-switcher-icon {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .biz-switcher-text { flex: 1; min-width: 0; overflow: hidden; }
  .biz-switcher-eyebrow {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 3px;
  }
  .biz-switcher-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .biz-switcher-chevron {
    width: 14px; height: 14px;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .biz-switcher.open .biz-switcher-chevron { transform: rotate(180deg); }

  .biz-switcher-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
    display: none;
    max-height: 380px;
    overflow-y: auto;
  }
  .biz-switcher.open .biz-switcher-dropdown { display: block; }
  .biz-dropdown-search {
    width: 100%;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 12px;
    color: var(--motm-charcoal);
    font-family: inherit;
    margin-bottom: 6px;
  }
  .biz-dropdown-search:focus {
    outline: none;
    border-color: var(--motm-green);
  }
  .biz-dropdown-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--motm-grey-500);
    font-weight: 600;
    padding: 6px 10px 4px;
  }
  .biz-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s;
    color: var(--motm-charcoal);
    text-align: left;
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
  }
  .biz-dropdown-item:hover { background: var(--motm-grey-50); }
  .biz-dropdown-item.current { background: var(--motm-green-tint); }
  .biz-dropdown-item.current:hover { background: var(--motm-green-tint); }
  .biz-dropdown-icon {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    background: var(--motm-grey-100);
    color: var(--motm-grey-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .biz-dropdown-item.current .biz-dropdown-icon {
    background: var(--motm-green);
    color: #fff;
  }
  .biz-dropdown-text { flex: 1; min-width: 0; }
  .biz-dropdown-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--motm-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .biz-dropdown-meta {
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-top: 2px;
  }
  .biz-dropdown-check {
    width: 14px; height: 14px;
    color: var(--motm-green);
    flex-shrink: 0;
  }
  .biz-dropdown-divider {
    height: 1px;
    background: var(--motm-grey-100);
    margin: 6px 4px;
  }
  .biz-dropdown-footer {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--motm-grey-700);
    border-top: 1px solid var(--motm-grey-100);
    margin-top: 4px;
  }
  .biz-dropdown-footer-link {
    color: var(--motm-green);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
  }
  .biz-dropdown-footer-link:hover { text-decoration: underline; }

  /* ── Floating chat widget ────────────────────── */
  .chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    background: var(--motm-green);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(48, 104, 68, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: inherit;
  }
  .chat-fab:hover {
    background: var(--motm-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(48, 104, 68, 0.45), 0 2px 4px rgba(0, 0, 0, 0.12);
  }
  .chat-fab svg {
    width: 26px;
    height: 26px;
  }
  .chat-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #f6c14a;
    color: #5a4408;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border: 2px solid #fff;
    min-width: 18px;
    text-align: center;
  }
  .chat-fab.hidden { display: none; }

  .chat-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 580px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(26, 29, 28, 0.15), 0 2px 8px rgba(26, 29, 28, 0.06);
    border: 1px solid var(--motm-grey-300);
    z-index: 95;
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-panel.open { display: flex; }

  .chat-panel-header {
    background: linear-gradient(135deg, var(--motm-green) 0%, var(--motm-green-dark) 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .chat-panel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .chat-panel-title-wrap { flex: 1; min-width: 0; }
  .chat-panel-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }
  .chat-panel-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .chat-status-dot {
    width: 7px;
    height: 7px;
    background: #7dd394;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(125, 211, 148, 0.3);
  }
  .chat-panel-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background 0.12s;
  }
  .chat-panel-close:hover { background: rgba(255, 255, 255, 0.18); }

  .chat-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--motm-grey-50);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .chat-msg {
    max-width: 80%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--motm-charcoal);
  }
  .chat-msg.from-team {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
  }
  .chat-msg.from-me {
    background: var(--motm-green);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
  }
  .chat-msg-meta {
    font-size: 10px;
    color: var(--motm-grey-500);
    margin-top: 4px;
    padding: 0 4px;
  }
  .chat-msg.from-me + .chat-msg-meta { text-align: right; align-self: flex-end; }
  .chat-msg.from-team + .chat-msg-meta { align-self: flex-start; }

  .chat-day-divider {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--motm-grey-500);
    font-weight: 600;
    margin: 8px 0;
    position: relative;
  }
  .chat-day-divider::before, .chat-day-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--motm-grey-300);
  }
  .chat-day-divider::before { left: 0; }
  .chat-day-divider::after { right: 0; }

  .chat-quick-reply-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 18px 4px;
    background: var(--motm-grey-50);
    border-top: 1px solid var(--motm-grey-100);
  }
  .chat-quick-reply {
    background: #fff;
    border: 1px solid var(--motm-grey-300);
    color: var(--motm-grey-700);
    padding: 6px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    white-space: nowrap;
  }
  .chat-quick-reply:hover {
    border-color: var(--motm-green);
    color: var(--motm-green);
  }

  .chat-panel-input {
    border-top: 1px solid var(--motm-grey-100);
    padding: 12px 14px;
    background: #fff;
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }
  .chat-input-textarea {
    flex: 1;
    border: 1px solid var(--motm-grey-300);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--motm-charcoal);
    line-height: 1.4;
    resize: none;
    min-height: 36px;
    max-height: 100px;
    overflow-y: auto;
  }
  .chat-input-textarea:focus {
    outline: none;
    border-color: var(--motm-green);
    box-shadow: 0 0 0 3px rgba(48, 104, 68, 0.1);
  }
  .chat-input-send {
    background: var(--motm-green);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
  }
  .chat-input-send:hover { background: var(--motm-green-dark); }
  .chat-input-send svg { width: 16px; height: 16px; }
  .chat-input-send:disabled {
    background: var(--motm-grey-300);
    cursor: not-allowed;
  }

  .chat-panel-footer {
    padding: 8px 14px;
    background: var(--motm-grey-50);
    border-top: 1px solid var(--motm-grey-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--motm-grey-700);
  }
  .chat-panel-footer-link {
    color: var(--motm-green);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
  }
  .chat-panel-footer-link:hover { text-decoration: underline; }

  @media (max-width: 600px) {
    .chat-panel {
      right: 12px;
      left: 12px;
      bottom: 84px;
      width: auto;
      max-width: none;
    }
    .chat-fab {
      bottom: 16px;
      right: 16px;
    }
  }


  /* Mobile hamburger menu */
  .mobile-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    background: var(--motm-green);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    align-items: center;
    justify-content: center;
  }
  .mobile-hamburger svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2.5;
  }
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
  }
  .mobile-overlay.active { display: block; }

  @media (max-width: 900px) {
    .mobile-hamburger { display: flex; }

    .app {
      grid-template-columns: 1fr;
    }

    /* Sidebar slides in from the left instead of stacking on top */
    .sidebar {
      position: fixed !important;
      top: 0;
      left: 0;
      bottom: 0;
      width: 280px;
      max-width: 85vw;
      height: 100vh !important;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      z-index: 1000;
      box-shadow: 2px 0 16px rgba(0,0,0,0.15);
    }
    .sidebar.open {
      transform: translateX(0);
    }

    /* Push main content down so hamburger doesn't overlap topbar */
    .main {
      padding-top: 56px;
    }
    .topbar {
      padding-left: 56px;
    }
  }

  /* ── Responsive ───────────────────────────────── */
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .row, .row.equal { grid-template-columns: 1fr; }
    .reports-grid { grid-template-columns: 1fr; }
    .property-hero { grid-template-columns: 1fr; }
    .property-hero-stats { flex-wrap: wrap; }
    .onboard-team-grid { grid-template-columns: 1fr; }
    .onboard-step { grid-template-columns: auto 1fr; }
    .onboard-step .btn { grid-column: 2; justify-self: start; }
    .doc-folders { grid-template-columns: repeat(2, 1fr); }
    .tax-pack-grid { grid-template-columns: 1fr; }
    .loan-grid { grid-template-columns: repeat(2, 1fr); }
    .stack-row { grid-template-columns: auto 1fr; }
    .pro-team-grid { grid-template-columns: 1fr; }
    .nines-pricing { grid-template-columns: 1fr; gap: 16px; }
    .nines-checks { grid-template-columns: 1fr; }
    .project-financials { grid-template-columns: repeat(2, 1fr); }
    .project-head { grid-template-columns: 1fr; }
    .filter-row { grid-template-columns: 1fr; gap: 6px; }
    .filter-row-label { text-align: left; padding-right: 0; }
  }  .demo-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #856404;
    font-weight: 500;
  }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  .inline-editable {
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 3px;
    transition: background 0.12s;
    border-bottom: 1px dashed var(--motm-grey-300);
  }
  .inline-editable:hover {
    background: var(--motm-green-tint);
    border-bottom-color: var(--motm-green);
  }
  .inline-editable.editing {
    border-bottom-color: transparent;
    background: transparent;
  }


/* Transaction Action Sheet */
.tx-action-grid { display: grid; gap: 8px; padding: 4px 0; }
.tx-action-btn {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px;
  align-items: start; padding: 12px 14px; border: 1px solid var(--motm-grey-300);
  background: white; border-radius: 8px; cursor: pointer; text-align: left;
  transition: all 0.12s; font-family: inherit;
}
.tx-action-btn:hover { border-color: var(--motm-green); background: var(--motm-grey-50); }
.tx-action-icon {
  grid-row: 1 / 3; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--motm-grey-100); border-radius: 8px; color: var(--motm-green);
  font-size: 18px; font-weight: 600;
}
.tx-action-label { font-size: 14px; font-weight: 600; color: var(--motm-grey-900); }
.tx-action-sub { font-size: 12px; color: var(--motm-grey-700); line-height: 1.35; }

/* Transaction Detail */
.tx-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 16px; }
.tx-detail-row { display: flex; flex-direction: column; gap: 2px; }
.tx-detail-row-label { font-size: 11px; color: var(--motm-grey-700); text-transform: uppercase; letter-spacing: 0.04em; }
.tx-detail-row-value { font-size: 13px; color: var(--motm-grey-900); font-weight: 500; }
.tx-detail-row-value.num { font-variant-numeric: tabular-nums; }
.tx-detail-row.full { grid-column: 1 / -1; }
.tx-detail-section { border-top: 1px solid var(--motm-grey-200); padding-top: 12px; margin-top: 12px; }
.tx-detail-section-title { font-size: 11px; font-weight: 600; color: var(--motm-grey-700); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.tx-detail-doc {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--motm-grey-50); border-radius: 6px; border: 1px solid var(--motm-grey-200);
}
.tx-detail-history { display: flex; flex-direction: column; gap: 8px; }
.tx-detail-history-row { display: flex; align-items: start; gap: 10px; }
.tx-detail-history-dot {
  width: 8px; height: 8px; background: var(--motm-green); border-radius: 50%;
  margin-top: 4px; flex-shrink: 0;
}

/* Transaction Edit */
.tx-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tx-edit-field { display: flex; flex-direction: column; gap: 4px; }
.tx-edit-field.tx-edit-full { grid-column: 1 / -1; }
.tx-edit-label { font-size: 11px; font-weight: 600; color: var(--motm-grey-700); text-transform: uppercase; letter-spacing: 0.04em; }
.tx-edit-input {
  font-family: inherit; font-size: 13px; color: var(--motm-grey-900);
  padding: 8px 10px; border: 1px solid var(--motm-grey-300); border-radius: 6px;
  background: white; width: 100%; box-sizing: border-box; resize: vertical;
}
.tx-edit-input:focus { outline: none; border-color: var(--motm-green); box-shadow: 0 0 0 3px rgba(48, 104, 68, 0.12); }


  /* Refi readiness card */
  .refi-card { padding: 0; }
  .refi-card-head {
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--motm-grey-100);
  }
  .refi-card-summary {
    display: flex; align-items: center; gap: 14px;
    margin-top: 10px;
  }
  .refi-summary-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
    font-family: 'Inter', sans-serif;
  }
  .refi-pill-good { background: #e8f4ec; color: var(--brand-deep,#1f4a2d); }
  .refi-pill-watch { background: #fdf3e0; color: #8a5410; }
  .refi-pill-act { background: #fde4e0; color: #8a2929; }
  .refi-context {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--motm-grey-700);
    margin-top: 6px;
  }
  .refi-rows {
    padding: 6px 0;
  }
  .refi-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 14px;
    padding: 12px 22px;
    border-top: 1px solid var(--motm-grey-100);
    align-items: center;
    cursor: pointer;
    transition: background 0.12s;
  }
  .refi-row:first-child { border-top: none; }
  .refi-row:hover { background: var(--motm-grey-50); }
  .refi-row-prop {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif;
  }
  .refi-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
  }
  .refi-status-dot.good { background: #2e7d3f; }
  .refi-status-dot.watch { background: #d68a2c; }
  .refi-status-dot.act { background: #c14040; }
  .refi-prop-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--motm-charcoal);
  }
  .refi-prop-meta {
    font-size: 11px;
    color: var(--motm-grey-700);
  }
  .refi-stat {
    font-family: 'Inter', sans-serif;
    text-align: right;
    min-width: 64px;
  }
  .refi-stat-label {
    font-size: 10px;
    color: var(--motm-grey-700);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .refi-stat-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--motm-charcoal);
    margin-top: 2px;
  }
  .refi-stat-value.delta-pos { color: #2e7d3f; }
  .refi-stat-value.delta-neg { color: #c14040; }
  .refi-disclaimer {
    padding: 12px 22px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: var(--motm-grey-700);
    line-height: 1.5;
    border-top: 1px solid var(--motm-grey-100);
    background: var(--motm-grey-50);
  }


  /* View toggle (Cards ↔ List) */
  .view-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: var(--motm-grey-50);
    border: 1px solid var(--motm-grey-200);
    border-radius: 6px;
    margin-left: auto;
  }
  .view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--motm-grey-700);
    cursor: pointer;
    transition: all 0.15s;
  }
  .view-toggle-btn:hover { color: var(--motm-charcoal); }
  .view-toggle-btn.active {
    background: #fff;
    color: var(--motm-charcoal);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-weight: 500;
  }
  .view-toggle-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* List mode — clean table-like rows. Fully reset card styling, then build a
     compact grid: [title+meta] [meta-summary] [actions] in a single row. */
  [data-toggleable-grid][data-mode="list"] {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    background: #fff;
    border: 1px solid var(--motm-grey-200);
    border-radius: 8px;
    overflow: hidden;
  }

  [data-toggleable-grid][data-mode="list"] .report-card {
    /* Reset card chrome + display as compact horizontal row */
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 18px;
    padding: 10px 18px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--motm-grey-100) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.12s;
  }
  [data-toggleable-grid][data-mode="list"] .report-card:last-child {
    border-bottom: none !important;
  }
  [data-toggleable-grid][data-mode="list"] .report-card:hover {
    background: var(--motm-grey-50);
  }

  /* Hide ALL the card-mode visual chrome that doesn't belong in a row */
  [data-toggleable-grid][data-mode="list"] .report-card .report-card-head,
  [data-toggleable-grid][data-mode="list"] .report-card .strategy-pill,
  [data-toggleable-grid][data-mode="list"] .report-card > div[style] {
    display: none !important;
  }

  /* Column 1: title + meta stacked tight */
  [data-toggleable-grid][data-mode="list"] .report-card .report-title {
    display: block !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--motm-charcoal);
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 1 !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-toggleable-grid][data-mode="list"] .report-card .report-meta {
    display: block !important;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--motm-grey-700);
    margin: 2px 0 0 !important;
    padding: 0 !important;
    grid-column: 1 !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Place title above meta in column 1 */
  [data-toggleable-grid][data-mode="list"] .report-card .report-title {
    grid-row: 1;
  }
  [data-toggleable-grid][data-mode="list"] .report-card .report-meta {
    grid-row: 2;
  }

  /* Column 2: data-list-meta summary string */
  [data-toggleable-grid][data-mode="list"] .report-card::after {
    content: attr(data-list-meta);
    grid-column: 2;
    grid-row: 1 / span 2;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--motm-grey-700);
    text-align: right;
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Column 3: action buttons (compact, inline) */
  [data-toggleable-grid][data-mode="list"] .report-card .report-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  [data-toggleable-grid][data-mode="list"] .report-card .report-actions .btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  /* Hide button icons in list view to save space */
  [data-toggleable-grid][data-mode="list"] .report-card .report-actions .btn svg {
    display: none !important;
  }

  /* Properties cards don't have report-actions buttons — they use cards as
     property links. Make the meta column wider when no actions. */
  [data-toggleable-grid="properties-grid"][data-mode="list"] .report-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
  }

  /* Mobile list view: stack the meta summary below title to avoid horizontal squish */
  @media (max-width: 700px) {
    [data-toggleable-grid][data-mode="list"] .report-card {
      grid-template-columns: 1fr auto !important;
    }
    [data-toggleable-grid][data-mode="list"] .report-card::after {
      grid-column: 1 / -1;
      grid-row: 3;
      text-align: left;
      margin-top: 4px;
    }
  }

  /* Heartbeat Cards pulse animation */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(184,122,20,.45); }
    70% { box-shadow: 0 0 0 8px rgba(184,122,20,0); }
    100% { box-shadow: 0 0 0 0 rgba(184,122,20,0); }
  }

  /* ═══ New Sidebar - Triage Rail ═══ */
  #ownerClientsNav { width: 330px; }
  #ownerClientsNav::-webkit-scrollbar { width: 8px; }
  #ownerClientsNav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 9px; }

  /* Widened shell when the firm triage rail is live (330px rail per the sidebar handoff); 72px icon rail collapsed. */
  .app.firm-wide { grid-template-columns: 366px 1fr; }
  .app.firm-wide.firm-collapsed { grid-template-columns: 106px 1fr; }
  #ownerClientsNav { width: 330px; }   /* width lives HERE (not inline) so the collapsed rule can win */
  #firm-rail.collapsed #ownerClientsNav { width: 72px; }
  /* keep #sb-railhead visible when collapsed — it holds the » expand button (hiding it made collapse one-way) */
  #firm-rail.collapsed #ownerClientsNav > div:not(#ownerClientList):not(#sb-railhead) { display: none; }
  #firm-rail.collapsed #sb-railhead > div { display: none; }
  #firm-rail.collapsed #sb-railhead { justify-content: center; margin: 12px 6px; }
  #firm-rail.collapsed #ownerClientList { padding: 0 8px 14px; }

  /* Group styling */
  .sb-grp { margin-bottom: 3px; }
  .sb-ghead { display: flex; align-items: center; gap: 7px; padding: 8px 8px; cursor: pointer; border-radius: 8px; transition: background .12s; }
  .sb-ghead:hover { background: #faf8f1; }
  .sb-ghead .sb-chv { font-size: 10px; color: #9aa39b; transition: transform .18s; width: 10px; }
  .sb-grp.sb-closed .sb-chv { transform: rotate(-90deg); }
  .sb-ghead .sb-gname { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #9aa39b; }
  /* Court-honest pass (Craig 7/3): the workload figure is the FLEET's pile, not Craig's — quiet
     muted text, no pill, no saturation. Zero-count rows render no figure at all. */
  .sb-ghead .sb-roll, .sb-ent .sb-roll { margin-left: auto; font-size: 11px; font-weight: 600; color: #9fbcaa; background: none; border-radius: 0; padding: 0; min-width: 0; text-align: right; }
  .sb-ghead .sb-roll.sb-zero, .sb-ent .sb-roll.sb-zero { background: none; color: #7fd6a0; }

  .sb-gbody { overflow: hidden; transition: max-height .18s ease; }
  .sb-grp.sb-closed .sb-gbody { max-height: 0; }

  /* Entity row styling */
  .sb-ent { display: flex; align-items: flex-start; gap: 9px; padding: 8px 8px; border-radius: 9px; cursor: pointer; margin-left: 6px; transition: background .12s; background: transparent; border: none; color: inherit; width: calc(100% - 6px); text-align: left; font: inherit; }
  .sb-ent:hover { background: rgba(255,255,255,.07); }
  .sb-ent.sb-active { background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 #7fd6a0; }

  .sb-ent .sb-ini { width: 26px; height: 26px; border-radius: 7px; background: #f6f3ec; color: var(--brand-mid,#306844); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; position: relative; }
  .sb-ent.sb-haswork .sb-ini::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 99px; background: #f0a94a; border: 2px solid #fff; }

  .sb-ent .sb-body { flex: 1; min-width: 0; }
  .sb-ent .sb-nm { font-size: 13.5px; font-weight: 600; color: #eef4ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-ent .sb-own { font-size: 11px; color: #9fbcaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .sb-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .sb-b { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 6px; line-height: 1.5; }
  .sb-b i { font-style: normal; font-size: 9px; opacity: .9; }

  .sb-b.sb-x { background: rgba(232,116,106,.26); color: #f6b0a8; }
  .sb-b.sb-t { background: rgba(240,169,74,.20); color: #f6c37f; }
  .sb-b.sb-q { background: rgba(87,184,224,.20); color: #8fd3ef; }
  .sb-b.sb-u { background: rgba(92,207,143,.20); color: #93e3b6; }
  .sb-b.sb-r { background: rgba(232,116,106,.20); color: #f2a49b; }
  .sb-b.sb-r.sb-rmid { background: rgba(235,178,74,.20); color: #f3cd86; }
  .sb-b.sb-r.sb-rok { background: rgba(92,207,143,.18); color: #93e3b6; }

  .sb-ent .sb-allclear { font-size: 10.5px; color: #9aa39b; margin-top: 5px; }
  .sb-ent .sb-allclear b { color: var(--brand-ok,#15803d); }

  /* Collapsed rail */
  #firm-rail.collapsed #ownerClientsNav .sb-ghead { justify-content: center; padding: 6px; }
  #firm-rail.collapsed #ownerClientsNav .sb-ent { justify-content: center; margin-left: 0; padding: 7px 0; }
  #firm-rail.collapsed #ownerClientsNav .sb-gname { display: none; }
  #firm-rail.collapsed #ownerClientsNav .sb-roll { display: none; }
  #firm-rail.collapsed #ownerClientsNav .sb-body { display: none; }
  #firm-rail.collapsed #ownerClientsNav .sb-chv { display: none; }


/* ── BRIDGE UNREACHABLE, ON THE CARD (Craig 7/27, 8:27a) ──────────────────────────────────────
   "Silent-dead buttons are how Craig loses trust in the glass." A click whose write never landed
   used to speak only through opsToast — bottom of the viewport, gone in 5.2s, nowhere near the
   button. This panel mounts on the card itself and stays until it is dismissed or repainted.
   Amber, not alarm: the bridge being down is a machine problem, not a Craig-court decision
   (court-honest color law). Palette matches the established .nu-fixstrip[data-phase="degraded"]
   and .abw-ap-malformed amber used across the widgets. */
.bridge-down{margin:9px 0 2px;padding:10px 12px;border:1px solid #e6cf94;border-left:3px solid #e0a92e;
  border-radius:9px;background:#fdf6e4;color:#7a4a06;cursor:default}
.bridge-down .bd-line{display:flex;align-items:flex-start;gap:8px}
.bridge-down .bd-dot{flex:0 0 auto;width:8px;height:8px;margin-top:5px;border-radius:50%;
  background:var(--motm-warning,#b87a14);animation:bdpulse 1.6s infinite}
@keyframes bdpulse{0%,100%{opacity:1}50%{opacity:.35}}
.bridge-down .bd-msg{font:500 var(--fs-body,12px)/1.5 Inter;color:#7a4a06}
.bridge-down .bd-msg b{font-weight:800}
.bridge-down .bd-why{margin:6px 0 0 16px;font:500 var(--fs-micro,10.5px)/1.45 Inter;color:#8a7038}
.bridge-down .bd-why b{font-weight:800;color:#7a4a06}
.bridge-down .bd-acts{display:flex;gap:8px;margin:9px 0 0 16px}
.bridge-down .bd-btn{font:700 var(--fs-label,11px) Inter;letter-spacing:.04em;padding:6px 13px;
  border-radius:8px;cursor:pointer;border:1px solid var(--motm-warning,#b87a14);
  background:var(--motm-warning,#b87a14);color:#fffdf6}
.bridge-down .bd-btn:hover{background:#a06a10;border-color:#a06a10}
.bridge-down .bd-btn.ghost{background:transparent;color:#7a4a06;border-color:#e0a92e}
.bridge-down .bd-btn.ghost:hover{background:#f7ead0}
.bridge-down .bd-ping{margin:8px 0 0 16px;font:500 var(--fs-micro,10.5px)/1.45 Inter;color:#8a7038}
.bridge-down .bd-ping.ok{color:var(--action-deep,#0c7a38)}
.bridge-down .bd-ping.bad{font-weight:800;color:#8a2822}