/* perf-3: extracted from public/index.html on 2026-06-12
   Three style blocks consolidated in source order:
   - Block A: app-wide tokens, layout, components (was lines 13-1285)
   - Block B: TRS print sheet (#trsSheet, was lines 1286-1340, id=trsStyles)
   - Block C: EFT panel + deal-modal helpers (was lines 2151-2323)
*/

:root{
  --ink:#0d1b2a; --ink-soft:#3d4f63; --muted:#7a8aa0; --faint:#aab6c6;
  --line:#e3e8ef; --line-soft:#eef2f7; --bg:#f6f8fb; --panel:#ffffff;
  --brand:#0a3d62; --brand-2:#1a6fb0; --accent:#e8772e;
  --green:#1c8c5a; --green-bg:#e6f5ee; --amber:#b6851a; --amber-bg:#fbf3df;
  --plum:#7a3e8f; --plum-bg:#f3e8f7;   /* Client Defaulted — the client walked (2026-10-08) */
  --red:#c0392b; --red-bg:#fbeae7; --blue:#1a6fb0; --blue-bg:#e7f1fa; --slate-bg:#eef1f5;
  --surface:var(--panel); --surface-2:var(--bg); --surface-hover:var(--line-soft);
  --border:var(--line); --border-soft:var(--line-soft); --text:var(--ink);
  --brand-50:var(--blue-bg); --brand-100:var(--blue-bg); --accent-soft:var(--amber-bg);
  --ink-400:var(--muted); --line-strong:var(--line);
  --radius:10px; --radius-sm:7px;
  --radius-lg:14px; --radius-pill:999px; --radius-card:12px;
  --shadow-sm:0 1px 3px rgba(13,27,42,.08);
  --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px;
  --btn-height:34px; --input-height:34px;
  --stage-bg:#8a8f98;
  --shadow:0 1px 2px rgba(13,27,42,.06),0 4px 16px rgba(13,27,42,.06);
  --shadow-lg:0 8px 40px rgba(13,27,42,.18);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c8d2de;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b0bdce}

/* ---------- App shell ---------- */
.app{display:flex;flex-direction:column;height:100vh}

/* ---------- Top bar ---------- */
/* Dynamic / responsive header layout:
   The topbar is a flex row with three logical zones: brand (left, fixed),
   actions (middle, allowed to shrink AND scroll horizontally if the buttons
   ever exceed the available room), and profile + hamburger (right, always
   visible). The middle zone uses min-width:0 so flex shrinking actually
   activates instead of overflowing the row. */
.topbar{display:flex;align-items:center;gap:14px;padding:0 22px 0 18px;height:56px;background:var(--brand);color:#fff;flex-shrink:0;box-shadow:0 1px 0 rgba(0,0,0,.1);overflow:visible;min-width:0;width:100%;box-sizing:border-box}
/* Persistent app-wide breadcrumb bar — sits directly under the topbar. */
.app-crumbs{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:7px 22px;background:var(--panel,#fff);border-bottom:1px solid var(--line,#e2e8f0);font-size:13px;color:var(--muted,#64748b);flex-shrink:0}
.app-crumbs[hidden]{display:none}
.app-crumbs .crumb-home{cursor:pointer;color:var(--accent,#1a6fb0);font-weight:600}
.app-crumbs .crumb-home:hover{text-decoration:underline}
.app-crumbs .crumb-sep{color:var(--faint,#94a3b8)}
.app-crumbs .crumb-cur{color:var(--ink,#0f172a);font-weight:600}
/* Feature-permissions grid in the User Management detail dialog. */
.perm-grid{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-soft,#eef2f7);border-radius:8px;padding:8px}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px}
.perm-row+.perm-row{border-top:1px solid var(--line-soft,#eef2f7)}
.perm-label{font-size:13px;color:var(--ink,#0f172a);font-weight:500}
.perm-opts{display:flex;gap:12px;flex-shrink:0}
.perm-radio{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted,#64748b);cursor:pointer;text-transform:capitalize}
/* Pin profile chip + hamburger to the right edge. flex-shrink:0 ensures they
   never compress; margin-left:auto absorbs the gap left of profile. */
.topbar > .profile-menu-wrap{margin-left:auto;flex-shrink:0}
.topbar > .hamburger-btn{flex-shrink:0}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.01em;font-size:15px}
.brand .logo{height:31px;width:auto;display:block;object-fit:contain}
.brand .logo-fallback{height:28px;width:28px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#f0a060);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff}
.brand .sub{font-weight:500;opacity:.6;font-size:12px;border-left:1px solid rgba(255,255,255,.25);padding-left:11px;margin-left:1px}
.topbar .spacer{flex:1}
.sync-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.12);transition:.2s}
.sync-pill .dot{width:7px;height:7px;border-radius:50%;background:#7fd8a8;box-shadow:0 0 0 0 rgba(127,216,168,.6);animation:pulse 2.4s infinite}
.sync-pill.off .dot{background:#f0b860;animation:none}
.sync-pill.syncing .dot{background:#8fd0ff;animation:pulse 1s infinite}
.sync-pill.error .dot{background:#ff8a7a;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,216,168,.5)}70%{box-shadow:0 0 0 6px rgba(127,216,168,0)}100%{box-shadow:0 0 0 0 rgba(127,216,168,0)}}
.tb-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:7px 13px;border-radius:7px;background:rgba(255,255,255,.1);color:#fff;transition:.15s;flex-shrink:0;white-space:nowrap}
.tb-btn:hover{background:rgba(255,255,255,.2)}
.tb-btn svg{width:15px;height:15px}

/* ---------- Topbar groups ---------- */
.topbar-group{display:flex;align-items:center;gap:8px}
.topbar-divider{width:1px;background:rgba(255,255,255,.18);height:28px;margin:0 6px;flex-shrink:0}
@media (min-width:1500px){
  .topbar{gap:22px;padding:0 28px 0 24px}
  .topbar-group{gap:10px}
  .topbar-divider{margin:0 8px}
}
@media (min-width:1700px){
  .topbar{gap:30px;padding:0 34px 0 30px}
  .topbar-group{gap:12px}
  .topbar-divider{margin:0 10px}
}
.topbar-utility .tb-btn span{display:none}
/* Progressive header collapse */
/* Below 1921px: at 1920px external monitors, the full row barely fits with labels.
   Hide the presence avatars (informational only, visible elsewhere via the team chat)
   and the Live pill (decorative sync indicator) to free ~150px so all action buttons
   including the bell stay visible with labels and the profile chip stays on screen. */
@media(max-width:1920px){
  .presence{display:none}
  .presence + .topbar-divider{display:none}
  #rtPill{display:none!important}
  #rtPill + .topbar-divider{display:none!important}
}
/* Below 1700px: drop the profile name so the chip stays compact (avatar + caret only). */
@media(max-width:1699px){
  .pt-name{display:none}
  .profile-trigger{padding:5px 8px 5px 5px;gap:6px}
}
/* Below 1600px: shrink button labels to icons only so the profile chip stays visible. */
@media(max-width:1599px){
  .topbar{gap:8px;padding:0 14px 0 12px}
  .topbar-divider{margin:0 1px;height:24px}
  .tb-btn{padding:7px 8px;gap:0}
  .tb-btn span:not(.chat-badge){display:none}
  .brand .sub{display:none}
  .presence{display:none}
  .presence + .topbar-divider{display:none}
  .rt-pill{padding:5px 9px;font-size:11px}
  .rt-pill + .topbar-divider{display:none}
}
/* Below 1440px: tighten gaps further */
@media(max-width:1439px){
  .topbar{gap:6px;padding:0 10px}
  .topbar-divider{margin:0;height:22px}
  .tb-btn{padding:6px 7px}
  .tb-btn svg{width:16px;height:16px}
}
/* Below 1280px: hide brand subtitle text, tighten further. */
@media(max-width:1279px){
  .topbar{gap:4px;padding:0 8px}
  .brand span{font-size:13px}
  .topbar-divider{margin:0}
  .tb-btn{padding:6px}
}
/* Below 1024px: collapse all action buttons into hamburger menu */
@media(max-width:1023px){
  #tasksBtn,#draftsBtn,#dsBtn,#eftBtn,#acctBtn,#notifBtn,#notifDiv,.topbar [aria-label="Version history"],.topbar-divider,.topbar-group,.who,.presence,#tcfToggleBtn{display:none!important}
  .hamburger-btn{display:flex!important}
}
/* Below 768px: also collapse profile menu and Live pill */
@media(max-width:767px){
  .profile-menu-wrap,#rtPill{display:none!important}
  .topbar{padding:0 8px}
  .brand span{font-size:13px}
}
.hamburger-menu{position:fixed;top:56px;right:8px;left:auto;width:min(280px,calc(100vw - 16px));background:var(--brand);z-index:45;box-shadow:0 8px 24px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;max-height:calc(100vh - 70px);overflow-y:auto}
.hmenu-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;font-size:13px;font-weight:600;color:#fff;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;text-align:left}
.hmenu-item:last-child{border-bottom:none}
.hmenu-item:hover{background:rgba(255,255,255,.1)}
.hmenu-item svg{flex-shrink:0;opacity:.9}


/* ---------- KPI strip ---------- */
.kpis{display:flex;gap:1px;background:var(--line);flex-shrink:0;overflow-x:auto}
.kpi{background:var(--panel);padding:11px 18px;min-width:130px;flex:1;display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:.15s;border-bottom:2px solid transparent;position:relative}
.kpi:hover{background:#fafcfe}
.kpi.active{border-bottom-color:var(--accent);background:#fff}
.kpi .k-val{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.kpi .k-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpi .k-bar{height:3px;border-radius:2px;margin-top:3px;background:var(--line);overflow:hidden}
.kpi .k-bar i{display:block;height:100%;border-radius:2px}
.kpi-div{width:1px;background:var(--line);flex:0 0 1px;margin:0 2px}
.kpi.k-type{min-width:104px;background:#fbfcfe}
.kpi.k-type .k-val{font-size:20px;color:var(--ink-soft)}
.kpi.k-type.active{border-bottom-color:var(--brand-2);background:#fff}
.kpi.k-type.active .k-val{color:var(--brand)}
.kpi.k-type .k-lbl{color:var(--brand-2)}
.kpi.s-open .k-val{color:var(--blue)} .kpi.s-open .k-bar i{background:var(--blue)}
.kpi.s-disbursed .k-val{color:var(--green)} .kpi.s-disbursed .k-bar i{background:var(--green)}
.kpi.s-closed .k-val{color:var(--ink-soft)} .kpi.s-closed .k-bar i{background:var(--ink-soft)}
.kpi.s-fell .k-val{color:var(--red)} .kpi.s-fell .k-bar i{background:var(--red)}
.kpi.s-pcanc .k-val{color:var(--amber)} .kpi.s-pcanc .k-bar i{background:var(--amber)}
.kpi.s-cdef .k-val{color:var(--plum)} .kpi.s-cdef .k-bar i{background:var(--plum)}
.kpi.s-total .k-val{color:var(--brand)} .kpi.s-total .k-bar i{background:var(--brand)}
/* Ledger KPI cards — match the TCF Dashboard's separated rounded-card look
   (Rishi 2026-07-19: "they both should resemble"). Scoped via :has(.kpi-div)
   so ONLY the ledger strip is restyled — app.css is also loaded by the
   dashboard, whose .kpis has no .kpi-div, so its own tiles are untouched. */
.kpis:has(.kpi-div){gap:6px;background:transparent;padding:2px clamp(14px,1.8vw,28px) 3px}
/* Tile sizing = the TCF List dashboard's KPI recipe (Rishi 2026-07-25: "same
   size on every page"): lab 11px / val 21px / pad 11x14 / radius 12 + the
   dashboard's desktop zoom:.85 below. Keep in sync with tcf-dashboard.html's
   --kpi-val/--kpi-pad defaults + its @media(min-width:1025px){.kpis{zoom:.85}}.
   The 8px strip edge padding + 6px gap stay as the safe margin. */
.kpis:has(.kpi-div) .kpi{border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-width:117px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.kpis:has(.kpi-div) .kpi.k-type{min-width:96px}
/* text format = TCF's: LABEL on top, number below, tabular figures */
.kpis:has(.kpi-div) .kpi .k-lbl{order:1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis:has(.kpi-div) .kpi .k-val{order:2;font-size:21px;letter-spacing:0;font-variant-numeric:tabular-nums;margin-top:1px}
/* No bottom progress bar on the ledger cards — the TCF tiles have none, and
   the liquid water already shows the level. The element STAYS in the DOM:
   liquid-kpi.js reads its status colour from `.k-bar i` computed styles,
   which resolve even under display:none. */
.kpis:has(.kpi-div) .kpi .k-bar{display:none}
@media(min-width:1025px){ .kpis:has(.kpi-div){zoom:.85} }
/* mirror the dashboard's responsive KPI ladder so the two strips stay the
   same size at every width band (tcf-dashboard.html @1700/@1400/@1180) */
@media(max-width:1700px){ .kpis:has(.kpi-div) .kpi{padding:9px 11px} .kpis:has(.kpi-div) .kpi .k-val{font-size:20px} }
@media(max-width:1400px){ .kpis:has(.kpi-div){gap:5px} .kpis:has(.kpi-div) .kpi{padding:8px 9px} .kpis:has(.kpi-div) .kpi .k-val{font-size:16px} }
@media(max-width:1180px){ .kpis:has(.kpi-div){gap:4px} .kpis:has(.kpi-div) .kpi{padding:7px 8px;border-radius:9px} .kpis:has(.kpi-div) .kpi .k-val{font-size:13px} }
.kpis:has(.kpi-div) .kpi:hover{background:var(--panel);transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,24,40,.10)}
.kpis:has(.kpi-div) .kpi.active{outline:2px solid var(--accent);outline-offset:-1px;border-bottom-color:var(--line)}
.kpis:has(.kpi-div) .kpi.k-type.active{outline-color:var(--brand-2)}
.kpis:has(.kpi-div) .kpi-div{width:10px;background:transparent;flex:0 0 10px}
/* when the water is on, numbers go dark ink (like the dashboard) — the status
   colour is carried by the water tint, and a dark figure reads better over
   same-hue water than a coloured one */
.kpis:has(.kpi-div) .kpi.lq-on .k-val{color:var(--ink)}

/* ---------- Controls ---------- */
.controls{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;position:relative;z-index:20}
.search{position:relative;flex:1;min-width:240px;max-width:440px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
.search input{width:100%;padding:8px 12px 8px 33px;border:1px solid var(--line);border-radius:8px;background:var(--bg);transition:.15s;font-size:13px}
.search input:focus{outline:none;border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 3px rgba(26,111,176,.1)}
.flt{display:flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.15s;white-space:nowrap}
.flt:hover{border-color:#c8d2de;background:#fafcfe}
.flt.has{border-color:var(--brand-2);color:var(--brand);background:var(--blue-bg)}
.flt svg{width:14px;height:14px;color:var(--muted)}
.flt.has svg{color:var(--brand-2)}
.flt select{border:none;background:none;font-weight:600;cursor:pointer;color:inherit;max-width:150px}
.flt select:focus{outline:none}
.ctrl-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;font-size:13px;font-weight:600;transition:.15s;border:1px solid transparent}
.btn svg{width:14px;height:14px}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink-soft)}
.btn-ghost:hover{border-color:#c8d2de;background:#fafcfe}
.btn-pri{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(232,119,46,.3)}
.btn-pri:hover{background:#d96a22}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:#0c4a78}
/* ⚠ A filled button with no disabled state looks live and silently ignores the
   click. .hr-overlay and .tcf-pager each had their own; this is the global one,
   so a filled .btn anywhere can never lie about being clickable.
   Hover stays REACHABLE on purpose — a disabled button usually carries the
   title= that explains why, and pointer-events:none would kill that tooltip —
   so we strip only what SAYS interactive: the lift and the glow (both added
   far below by the .btn-brand/.btn-pri hover rules). No colour is repeated
   here, so a palette change can never leave this rule behind. */
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn[disabled]:hover{filter:none;transform:none}
.result-count{font-size:12px;color:var(--muted);font-weight:600;padding:0 2px}
.result-count b{color:var(--ink)}

/* ---------- Table ---------- */
.table-wrap{flex:1;overflow:auto;background:var(--panel);position:relative}
.pager{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:var(--panel);border-top:1px solid var(--line);min-height:46px}
.pager .pg-left,.pager .pg-right{display:flex;align-items:center;gap:6px}
.pg-size{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--panel);cursor:pointer}
.pg-size:focus{outline:none;border-color:var(--brand-2)}
.pg-btn{border:1px solid var(--line);border-radius:7px;padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--panel);transition:.12s}
.pg-btn:hover:not(:disabled){border-color:var(--brand-2);color:var(--brand-2);background:var(--blue-bg)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-nums{display:flex;align-items:center;gap:3px;margin:0 4px}
.pg-num{min-width:30px;padding:6px 8px;border:1px solid transparent;border-radius:7px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--panel);transition:.12s}
.pg-num:hover{background:var(--bg)}
.pg-num.on{background:var(--brand-2);color:#fff}
.pg-gap{color:var(--faint);font-size:12px;padding:0 2px}
@media(max-width:600px){.pg-nums .pg-num:not(.on){display:none}.pg-gap{display:none}}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px}
thead th{position:sticky;top:0;z-index:5;background:var(--surface-2);color:var(--ink-soft);font-weight:700;text-align:left;padding:9px 11px;white-space:nowrap;border-bottom:1.5px solid var(--line);border-right:1px solid var(--line-soft);font-size:11px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;user-select:none}
thead th:hover{background:var(--surface-hover)}
thead th .th-in{display:flex;align-items:center;gap:5px}
thead th .sort{opacity:0;font-size:11px;transition:.15s}
thead th.sorted .sort{opacity:1;color:var(--brand-2)}
thead th:hover .sort{opacity:.4}
/* column resize handle (per-user widths) — th is sticky (positioned), so the
   absolute handle anchors to its own header cell */
thead th .th-rs{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;z-index:6}
thead th .th-rs::after{content:"";position:absolute;top:22%;bottom:22%;right:2.5px;width:2px;border-radius:2px;background:transparent;transition:background .12s}
thead th:hover .th-rs::after{background:var(--line)}
thead th .th-rs:hover::after,thead th .th-rs.set::after{background:var(--brand-2)}
body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing *{cursor:col-resize!important}
thead th.col-sel{position:sticky;left:0;z-index:7}
thead th.col-row{position:sticky;left:34px;z-index:7;width:44px;min-width:44px;text-align:center;cursor:default}
thead th.col-trade{position:sticky;left:78px;z-index:7;box-shadow:2px 0 4px -2px rgba(0,0,0,.08)}

/* ---------- Per-column filter row ---------- */
thead tr.filter-row th{position:sticky;top:33px;z-index:6;background:var(--surface-2);padding:4px 6px;border-bottom:1.5px solid var(--line);border-right:1px solid var(--line-soft);cursor:default;text-transform:none;letter-spacing:0}
html[data-density="compact"] thead tr.filter-row th{top:29px}
html[data-density="spacious"] thead tr.filter-row th{top:37px}
thead tr.filter-row th.col-sel{left:0;z-index:8}
thead tr.filter-row th.col-row{left:34px;z-index:8;text-align:center}
thead tr.filter-row th.col-trade{left:78px;z-index:8;box-shadow:2px 0 4px -2px rgba(0,0,0,.08)}
.fcell{display:flex;align-items:center;gap:3px;position:relative}
.fcell input,.fcell select{width:100%;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:11px;background:var(--panel);color:var(--ink);min-width:0;transition:.12s}
.fcell input::placeholder{color:var(--faint)}
.fcell input:focus,.fcell select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 2px rgba(26,111,176,.12)}
.fcell input.act,.fcell select.act,.fcell .date-btn.act{border-color:var(--brand-2);background:var(--blue-bg)}
.fcell .mt{flex-shrink:0;width:22px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.fcell .mt:hover{border-color:var(--brand-2);color:var(--brand-2)}
.fcell .mt.act{background:var(--brand);color:#fff;border-color:var(--brand)}
.fcell .clr{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--muted);color:#fff;font-size:11px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer}
.fcell.has .clr{display:flex}
.fcell.has input,.fcell.has select{padding-right:20px;border-color:var(--brand-2);background:var(--blue-bg)}
.date-btn{width:100%;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:11px;background:var(--panel);color:var(--muted);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.12s}
.date-btn:hover{border-color:var(--brand-2)}
.date-btn.has{border-color:var(--brand-2);background:var(--blue-bg);color:var(--brand);font-weight:600}

/* date filter popup */
.date-pop{position:fixed;z-index:1100;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);width:280px;padding:13px;display:none}
.date-pop.open{display:block}
.date-pop h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.dp-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:11px}
.dp-modes button{padding:6px 4px;font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink-soft);transition:.12s}
.dp-modes button:hover{border-color:var(--brand-2)}
.dp-modes button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.dp-body{display:flex;flex-direction:column;gap:8px}
.dp-body label{font-size:11px;font-weight:600;color:var(--muted)}
.dp-body input,.dp-body select{border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:13px;background:var(--panel);color:var(--ink);width:100%}
.dp-body input:focus,.dp-body select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(26,111,176,.1)}
.dp-row{display:flex;gap:8px}
.dp-row>div{flex:1}
.dp-foot{display:flex;gap:8px;margin-top:12px}
.dp-foot button{flex:1;padding:8px;border-radius:8px;font-size:12px;font-weight:600;transition:.12s}
.dp-foot .clear{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft)}
.dp-foot .clear:hover{background:var(--bg)}
.dp-foot .apply{background:var(--brand);color:#fff}
.dp-foot .apply:hover{background:var(--brand-2)}

.filter-toggle{display:flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.15s}
.filter-toggle:hover{border-color:#c8d2de;background:#fafcfe}
.filter-toggle.on{border-color:var(--brand-2);color:var(--brand);background:var(--blue-bg)}
.filter-toggle svg{width:14px;height:14px}
.filter-toggle .cnt{background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:0 6px;border-radius:10px;min-width:16px;text-align:center}
.clear-all{display:flex;align-items:center;gap:5px;padding:7px 11px;border:1px solid var(--red-bg);border-radius:8px;background:var(--red-bg);color:var(--red);font-size:12px;font-weight:700;transition:.15s;white-space:nowrap}
.clear-all:hover{background:var(--red);color:#fff;border-color:var(--red)}
.clear-all svg{width:13px;height:13px}

/* ---------- Multi-select dropdown ---------- */
.ms{position:relative}
.ms-btn{display:flex;align-items:center;gap:6px;width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 10px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s;white-space:nowrap;min-height:34px}
.ms-btn:hover{border-color:#c8d2de;background:#fafcfe}
.ms-btn.has{border-color:var(--brand-2);color:var(--brand);background:var(--blue-bg)}
.ms-btn .ms-ico{width:14px;height:14px;color:var(--muted);flex-shrink:0}
.ms-btn.has .ms-ico{color:var(--brand-2)}
.ms-btn .ms-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:left}
.ms-btn .ms-cnt{background:var(--brand-2);color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px;flex-shrink:0}
.ms-btn .ms-caret{width:13px;height:13px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.ms.open .ms-caret{transform:rotate(180deg)}
/* compact variant for filter row */
.fcell .ms-btn{padding:4px 7px;font-size:11px;font-weight:500;min-height:0;border-radius:6px}
.fcell .ms-btn .ms-cnt{font-size:11px;padding:0 5px}
.ms-pop{position:fixed;z-index:1100;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);width:240px;display:none;flex-direction:column;max-height:380px}
.ms-foot{display:flex;gap:6px;padding:7px 9px;border-top:1px solid var(--line-soft);flex-shrink:0;background:var(--panel)}
.ms-foot button{flex:1;font-size:11px;font-weight:700;padding:7px;border-radius:6px;cursor:pointer;transition:.12s}
.ms-foot .ms-cancel{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft)}
.ms-foot .ms-cancel:hover{border-color:var(--brand-2);color:var(--brand-2)}
.ms-foot .ms-apply{border:1px solid var(--brand);background:var(--brand);color:#fff}
.ms-foot .ms-apply:hover{filter:brightness(1.05)}
.ms-pop.open{display:flex}
.ms-search{padding:9px;border-bottom:1px solid var(--line-soft);position:relative;flex-shrink:0}
.ms-search input{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px 9px 6px 28px;font-size:12px;background:var(--bg)}
.ms-search input:focus{outline:none;border-color:var(--brand-2);background:#fff}
.ms-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--faint)}
.ms-bulk{display:flex;gap:6px;padding:7px 9px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.ms-bulk button{flex:1;font-size:11px;font-weight:700;padding:5px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);transition:.12s}
.ms-bulk button:hover{border-color:var(--brand-2);color:var(--brand-2)}
.ms-list{overflow-y:auto;padding:5px;flex:1}
.ms-opt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--ink-soft);transition:.1s;white-space:nowrap}
.ms-opt:hover{background:var(--bg)}
.ms-opt .box{width:16px;height:16px;border:1.5px solid var(--line);border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.1s}
.ms-opt.on .box{background:var(--brand);border-color:var(--brand);color:#fff}
.ms-opt.on{color:var(--ink);font-weight:600}
.ms-opt .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
.ms-opt .n{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.ms-empty{padding:18px;text-align:center;font-size:12px;color:var(--muted)}

/* type picker */
.type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.type-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:11px;padding:15px;cursor:pointer;transition:.15s;background:var(--panel);text-align:left}
.type-card:hover{border-color:var(--brand-2);background:var(--blue-bg);transform:translateY(-1px)}
.type-card .ti{width:40px;height:40px;border-radius:10px;background:var(--blue-bg);color:var(--brand-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.type-card:hover .ti{background:var(--brand);color:#fff}
.type-card .ti svg{width:20px;height:20px}
.type-card .tt{font-size:13px;font-weight:700;color:var(--ink)}
.type-card .td{font-size:12px;color:var(--muted);margin-top:1px}
/* Crash-recovery cards in the New Deal type picker (span the 2-col grid). */
.type-recov{grid-column:1/-1;border:1.5px solid var(--warn,#e0a53a);border-radius:11px;padding:10px 12px;background:var(--warn-bg,rgba(224,165,58,.08));display:flex;flex-direction:column;gap:7px}
.type-recov-h{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--warn,#b9791b)}
.type-recov-row{display:flex;align-items:stretch;gap:8px}
.type-recov-open{flex:1;display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--panel);cursor:pointer;transition:.15s}
.type-recov-open:hover{border-color:var(--brand-2);background:var(--blue-bg);transform:translateY(-1px)}
.type-recov-open .tt{font-size:13px;font-weight:700;color:var(--ink)}
.type-recov-open .td{font-size:11.5px;color:var(--muted);margin-top:1px}
.type-recov-x{flex-shrink:0;width:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);cursor:pointer;font-size:14px;transition:.15s}
.type-recov-x:hover{border-color:#d9534f;color:#d9534f;background:rgba(217,83,79,.08)}
/* TRS close prompt — sits ABOVE the TRS editor modal (own overlay, not the
   modal stack, so back-stack restore is never disturbed). */
.trs-close-overlay{position:fixed;inset:0;z-index:100000;background:rgba(10,20,35,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.trs-close-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:20px 20px 16px}
.trs-close-h{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.trs-close-b{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:16px}
.trs-close-f{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.trs-close-discard{color:#c0392b;border-color:#f0c4c0}
.trs-close-discard:hover{background:rgba(217,83,79,.08);border-color:#d9534f}
.cfg-link{display:flex;align-items:center;gap:7px;width:100%;justify-content:center;margin-top:16px;padding:10px;border:1px dashed var(--line);border-radius:9px;background:var(--bg);color:var(--ink-soft);font-size:12px;font-weight:600;transition:.15s}
.cfg-link:hover{border-color:var(--brand-2);color:var(--brand-2);background:var(--blue-bg)}
.cfg-link svg{width:14px;height:14px}
.cfg-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.cfg-tab{padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px;font-weight:600;color:var(--ink-soft);transition:.12s}
.cfg-tab:hover{border-color:var(--brand-2)}
.cfg-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.cfg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 14px}
@media(max-width:600px){.cfg-grid{grid-template-columns:repeat(2,1fr)}}
.cfg-chk{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:12px;cursor:pointer;color:var(--ink-soft);transition:.1s}
.cfg-chk:hover{background:var(--bg)}
.cfg-chk input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.cfg-chk.on{color:var(--ink);font-weight:600}
.cfg-chk.locked{opacity:.6;cursor:not-allowed}
.cfg-chk .grp{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--faint);margin-left:auto;letter-spacing:.04em}
.cfg-sec{grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-2);padding:10px 0 3px;border-bottom:1px solid var(--line-soft);margin-bottom:3px}
.cfg-chk .cfg-rename{margin-left:auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;opacity:0;transition:.12s;flex-shrink:0}
.cfg-chk:hover .cfg-rename{opacity:.7}
.cfg-chk .cfg-rename:hover{opacity:1;color:var(--brand);background:var(--bg);border-color:var(--line)}
.cfg-chk .cfg-rename svg{width:12px;height:12px;display:block}
.cfg-foot-extra{display:flex;justify-content:flex-start;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.cfg-add-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px dashed var(--brand-2);border-radius:8px;background:transparent;color:var(--brand);font-size:13px;font-weight:600;cursor:pointer;transition:.12s}
.cfg-add-btn:hover{background:var(--bg);border-style:solid}
.cfg-add-btn svg{width:13px;height:13px}
.lbl-edit{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;opacity:.5;vertical-align:middle;transition:.12s}
.lbl-edit:hover{opacity:1;color:var(--brand);background:var(--bg)}
.lbl-edit svg{display:block}
/* Drawer drag-and-drop affordances (leader edit mode) */
/* HOTFIX (Ritika smoothness): grip is now the sole drag handle and always visible.
   The row itself stays a normal label so the checkbox/input click works. */
.fld{position:relative}
.fld .fld-grip{position:absolute;top:6px;right:6px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;opacity:.45;transition:.12s;letter-spacing:-2px;line-height:1;user-select:none;cursor:grab;border-radius:5px;border:1px solid transparent;background:transparent}
.fld:hover .fld-grip{opacity:.85;background:var(--bg);border-color:var(--line-soft)}
.fld .fld-grip:hover{opacity:1;color:var(--brand);border-color:var(--line)}
.fld .fld-grip:active{cursor:grabbing}
.fld.drw-drag{opacity:.4}
.fld.drw-row-insert-before{box-shadow:inset 0 3px 0 0 var(--brand)}
.fld.drw-row-insert-after{box-shadow:inset 0 -3px 0 0 var(--brand)}
.dr-sec.drw-drop-target{outline:2px dashed var(--brand);outline-offset:-2px;border-radius:8px;background:rgba(20,107,75,.04)}
.dr-sec h4 .sec-hint{font-size:11px;font-weight:500;color:var(--muted);margin-left:8px;text-transform:none;letter-spacing:0}
/* Customize panel: search + select-all toolbar */
.cfg-tools{display:flex;align-items:center;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.cfg-search{flex:1;min-width:160px;position:relative}
.cfg-search input{width:100%;padding:7px 11px 7px 32px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--panel);color:var(--ink)}
.cfg-search input:focus{outline:none;border-color:var(--brand)}
.cfg-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--muted)}
.cfg-bulk{display:inline-flex;gap:6px}
.cfg-bulk button{padding:6px 11px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.12s}
.cfg-bulk button:hover{border-color:var(--brand);color:var(--brand)}
/* Customize panel drag handle on each row */
/* HOTFIX (Ritika smoothness): the row label stays clickable for the checkbox;
   the grip is the sole drag handle and is clearly visible. */
.cfg-chk .cfg-grip{color:var(--muted);font-size:13px;opacity:.55;letter-spacing:-2px;line-height:1;flex-shrink:0;user-select:none;width:18px;height:22px;display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:grab;border-radius:4px;border:1px solid transparent}
.cfg-chk:hover .cfg-grip{opacity:.9;background:rgba(0,0,0,.04);border-color:var(--line-soft)}
.cfg-chk .cfg-grip:hover{opacity:1;color:var(--brand);border-color:var(--line)}
.cfg-chk .cfg-grip:active{cursor:grabbing}
.cfg-chk.cfg-drag{opacity:.4}
.cfg-sec.cfg-drop-target{background:rgba(20,107,75,.06);border-radius:6px}
.cfg-chk.cfg-hidden,.cfg-sec.cfg-hidden{display:none}
.cfg-sec{display:flex;align-items:center;gap:6px}
.cfg-sec .cfg-sec-name{flex:1;min-width:0}
/* Draggable section headers (leader-only): header itself can be reordered */
/* HOTFIX (Ritika smoothness): grip-only drag; section header is no longer draggable.
   Rename/delete buttons inside the header now reliably receive clicks. */
.cfg-sec{cursor:default}
.cfg-sec.cfg-sec-drag{opacity:.4}
.cfg-sec.cfg-sec-insert-before{box-shadow:inset 0 3px 0 0 var(--brand)}
.cfg-sec.cfg-sec-insert-after{box-shadow:inset 0 -3px 0 0 var(--brand)}
.cfg-sec .cfg-sec-grip{color:var(--muted);font-size:13px;opacity:.65;letter-spacing:-2px;line-height:1;flex-shrink:0;user-select:none;width:20px;height:22px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin-right:4px;cursor:grab;border-radius:4px;border:1px solid transparent}
.cfg-sec:hover .cfg-sec-grip{opacity:.9;background:rgba(0,0,0,.04);border-color:var(--line-soft)}
.cfg-sec .cfg-sec-grip:hover{opacity:1;color:var(--brand);border-color:var(--line)}
.cfg-sec .cfg-sec-grip:active{cursor:grabbing}
/* In-section row drop indicators */
.cfg-chk.cfg-row-insert-before{box-shadow:inset 0 2px 0 0 var(--brand)}
.cfg-chk.cfg-row-insert-after{box-shadow:inset 0 -2px 0 0 var(--brand)}
/* Move-to-section picker shown next to a search result */
.cfg-move-wrap{position:relative;margin-left:auto;flex-shrink:0;white-space:nowrap}
.cfg-move-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line);border-radius:5px;background:var(--panel);font-size:11px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.12s;line-height:1.2}
.cfg-move-btn:hover{border-color:var(--brand);color:var(--brand)}
.cfg-move-btn svg{width:10px;height:10px}
.cfg-move-menu{position:fixed;z-index:9999;min-width:160px;max-height:240px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;display:none}
.cfg-move-menu.open{display:block}
.cfg-move-menu button{display:block;width:100%;text-align:left;padding:6px 9px;border:0;background:transparent;font-size:12px;color:var(--ink-soft);cursor:pointer;border-radius:5px;font-weight:500}
.cfg-move-menu button:hover{background:var(--bg);color:var(--brand)}
.cfg-move-menu button.current{color:var(--muted);cursor:default}
.cfg-move-menu button.current:hover{background:transparent;color:var(--muted)}
.cfg-sec-actions{display:inline-flex;gap:2px;opacity:0;transition:.12s}
.cfg-sec:hover .cfg-sec-actions{opacity:1}
.cfg-sec-btn{padding:3px 5px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:0;transition:.12s}
.cfg-sec-btn:hover{border-color:var(--line);color:var(--brand);background:var(--panel)}
.cfg-sec-btn.cfg-sec-del:hover{color:#b3261e;border-color:#f3c4c0;background:#fdecea}
.col-tools{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.col-tools .col-bulk{display:inline-flex;gap:6px;margin-left:auto}
.col-tools .col-bulk button{padding:6px 11px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.12s}
.col-tools .col-bulk button:hover{border-color:var(--brand);color:var(--brand)}
.col-tools .col-search{flex:1;min-width:160px;position:relative}
.col-tools .col-search input{width:100%;padding:7px 11px 7px 32px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--panel);color:var(--ink)}
.col-tools .col-search input:focus{outline:none;border-color:var(--brand)}
.col-tools .col-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--muted)}
.col-chk.col-hidden{display:none}
tbody td{padding:7px 11px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft);vertical-align:middle}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--brand-50)}
tbody tr.sel td{background:var(--blue-bg)}
td.col-sel{position:sticky;left:0;z-index:3;background:var(--panel)}
td.col-row{position:sticky;left:34px;z-index:3;background:var(--panel);text-align:center;color:var(--faint);font-variant-numeric:tabular-nums;font-size:11px;width:44px;min-width:44px}
tbody tr:hover td.col-row{background:var(--brand-50)}
td.col-trade{position:sticky;left:78px;z-index:3;background:var(--panel);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);box-shadow:2px 0 4px -2px rgba(0,0,0,.08);cursor:pointer}
tbody tr:hover td.col-trade{background:var(--brand-50)}
td.col-trade:hover{color:var(--brand-2)}
td.col-trade:hover .trade-no-text{text-decoration:underline}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-open{background:var(--blue-bg);color:var(--blue)}
.b-disbursed{background:var(--green-bg);color:var(--green)}
.b-closed{background:var(--slate-bg);color:var(--ink-soft)}
.b-fell{background:var(--red-bg);color:var(--red)}
.b-pcanc{background:var(--amber-bg);color:var(--amber)}
.b-cdef{background:var(--plum-bg);color:var(--plum)}
.b-na{background:var(--slate-bg);color:var(--muted)}
.tt-pill{font-size:11px;font-weight:600;color:var(--ink-soft);padding:1px 7px;border-radius:5px;background:var(--slate-bg)}
/* 2026-07-03: plain-text Status (no pill box) for the Ledger table. Colour
   carries the meaning; click-to-edit + pencil are preserved by main.js. */
/* status = plain coloured text, NOT bold (Rishi 2026-07-20);
   Fell Through red, Disbursed + Closed green */
.st-txt{font-weight:400;font-size:12px;letter-spacing:.01em;white-space:nowrap}
.st-open{color:var(--blue)}
.st-disbursed{color:var(--green)}
.st-closed{color:var(--green)}
.st-fell{color:var(--red)}
.st-pcanc{color:var(--amber)}
.st-cdef{color:var(--plum)}
.st-na{color:var(--muted)}

/* empty / loading */
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
.empty>*{pointer-events:none}
.empty .empty-cta{pointer-events:auto}
.empty svg{width:46px;height:46px;opacity:.35}
.empty h3{font-size:15px;color:var(--ink-soft);font-weight:600}

/* ---------- Drawer (detail / edit) ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(13,27,42,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.25s;z-index:40}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,94vw);background:var(--panel);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:41;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.dr-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;flex-shrink:0;justify-content:flex-start;position:relative;padding-right:130px}
.dr-head .dr-back{order:0;flex-shrink:0;display:none;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;align-self:flex-start}
.dr-head .dr-back:hover{border-color:var(--brand-2);color:var(--brand-2);background:var(--blue-bg)}
.dr-head .dr-back.show{display:inline-flex}
.dr-head .win-ctrls,.dr-head .x{order:99;flex-shrink:0}
.dr-head .dr-tcf{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600}
.dr-head h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:2px;line-height:1.25}
.dr-head .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg);flex-shrink:0;transition:.15s}
.dr-head .x:hover{background:var(--line);color:var(--ink)}
.dr-customize{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;flex-shrink:0}
.dr-customize:hover{border-color:var(--brand-2);color:var(--brand-2);background:var(--blue-bg)}
.dr-customize svg{flex-shrink:0}
.drawer.win.minimized .dr-customize{display:none !important}
#drCustomize + .win-ctrls,#drCustomize ~ .x{margin-left:0}
.dr-body{flex:1;overflow-y:auto;padding:6px 22px 22px}
.dr-sec{margin-top:18px}
.dr-sec h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-2);padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.fld{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.fld:last-child{border-bottom:none}
.fld label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.fld .val{font-size:13px;color:var(--ink);min-height:18px;font-weight:500}
.fld .val.locked-fld{background:var(--bg);border:1px dashed var(--line);border-radius:6px;padding:6px 8px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:not-allowed}
.fld .val.locked-fld .lock-ic{font-size:11px;opacity:.7}
.fld .val.empty-v{color:var(--faint);font-style:italic;font-weight:500}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:13px;background:#fff;transition:.15s;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(26,111,176,.1)}
.fld textarea{resize:vertical;min-height:54px}
.fld.invalid input,.fld.invalid select{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.fld .err{font-size:11px;color:var(--red);font-weight:600;display:none}
.fld.invalid .err{display:block}
.fld-req label::after{content:" *";color:var(--red)}
.dr-foot{padding:14px 22px;border-top:none;display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg);box-shadow:0 -1px 0 var(--line)}
.dr-foot .hint{font-size:11px;color:var(--muted);margin-right:auto}
.dr-foot .hint b{color:var(--green)}

/* ---------- Windowed dialog (new-deal full-screen / resizable / minimizable) ---------- */
.drawer.win{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(1100px,94vw);height:min(88vh,900px);max-height:94vh;border-radius:14px;overflow:hidden;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s;box-shadow:var(--shadow-lg);min-width:380px;min-height:200px}
.drawer.win.open{transform:translate(-50%,-50%)}
.drawer.win:not(.open){transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none}
.drawer.win.maximized{top:12px;left:12px;right:12px;bottom:12px;width:auto;height:auto;transform:none;max-height:none}
.drawer.win.maximized.open{transform:none}
.drawer.win.minimized{top:auto;bottom:0;left:50%;transform:translateX(-50%);width:min(440px,92vw);height:50px;min-height:50px;border-radius:12px 12px 0 0;cursor:pointer}
.drawer.win.minimized.open{transform:translateX(-50%)}
.drawer.win.minimized .dr-body,.drawer.win.minimized .dr-foot{display:none}
.drawer.win.minimized .dr-head{border-bottom:none;padding:0 110px 0 14px;height:50px;align-items:center}
.drawer.win.minimized .dr-head h2{font-size:13px;margin-top:0}
.drawer.win.minimized .dr-tcf{display:none}
/* when windowed, the form body uses a responsive 2-col grid for density */
.drawer.win .dr-body .dr-sec{margin-top:14px}
.drawer.win .dr-body .fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media(max-width:680px){.drawer.win .dr-body .fields-grid{grid-template-columns:1fr}}
.drawer.win.minimized + .drawer-scrim,.drawer-scrim.passthrough{background:transparent;backdrop-filter:none;pointer-events:none}
/* window control buttons - pinned to top-right of drawer header */
.win-ctrls{display:flex;align-items:center;gap:4px;flex-shrink:0;position:absolute;top:10px;right:14px;z-index:6}
.drawer.win.minimized .win-ctrls{top:10px;right:10px}
.win-ctrls button{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:transparent;transition:.15s}
.win-ctrls button:hover{background:var(--bg);color:var(--ink)}
.win-ctrls button.close-b:hover{background:var(--red-bg);color:var(--red)}
.win-ctrls svg{width:15px;height:15px}
/* drag handle on header */
.drawer.win .dr-head{cursor:default}
.drawer.win .dr-head.draggable{cursor:move}
/* resize handle */
.win-resize{position:absolute;width:18px;height:18px;right:2px;bottom:2px;cursor:nwse-resize;z-index:5;color:var(--faint)}
.win-resize svg{width:100%;height:100%}
.drawer.win.maximized .win-resize,.drawer.win.minimized .win-resize{display:none}

/* ---------- Modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(13,27,42,.4);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.modal-scrim.open{display:flex}
.modal{background:var(--panel);border-radius:14px;box-shadow:var(--shadow-lg);width:min(620px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;position:relative;resize:both;min-width:320px;min-height:200px;max-width:97vw}
/* Custom resize grip indicator (bottom-right corner) */
.modal::after{content:"";position:absolute;right:2px;bottom:2px;width:14px;height:14px;pointer-events:none;background:linear-gradient(135deg,transparent 0,transparent 45%,var(--line) 45%,var(--line) 55%,transparent 55%,transparent 70%,var(--line) 70%,var(--line) 80%,transparent 80%);opacity:.7;border-radius:0 0 12px 0}
.modal.maxed{resize:none}
.modal.maxed::after{display:none}
.modal.wide{width:min(760px,96vw)}
.modal.xl{width:min(1180px,97vw);max-height:92vh}
/* Maximized state: cover almost the full viewport. Toggled by .max-btn in header. */
.modal.maxed{width:97vw;height:94vh;max-height:94vh}
.modal-head .max-btn{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg);transition:.15s;border:none;cursor:pointer;margin-left:auto}
.modal-head .max-btn:hover{background:var(--line);color:var(--ink)}
.modal-head .max-btn + .x{margin-left:6px}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal-head .modal-back{display:none;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;flex-shrink:0;order:-2}
.modal-head .modal-back:hover{border-color:var(--brand-2);color:var(--brand-2);background:var(--blue-bg)}
.modal-head .modal-back.show{display:inline-flex}
.modal-head .modal-back svg{width:14px;height:14px}
/* Breadcrumb trail — sits right after the Back button, before the title/toolbar */
.modal-head .modal-crumbs{display:none;align-items:center;gap:4px;flex-shrink:1;min-width:0;flex-wrap:nowrap;overflow:hidden;order:-1;font-size:12px}
.modal-head .modal-crumbs.show{display:inline-flex}
.modal-head .modal-crumbs .crumb{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.modal-head .modal-crumbs button.crumb:hover{background:var(--blue-bg);color:var(--brand-2)}
.modal-head .modal-crumbs .crumb-cur{color:var(--ink);cursor:default;font-weight:700}
.modal-head .modal-crumbs .crumb-sep{color:var(--line);font-size:11px;user-select:none;flex-shrink:0}
/* TRS header — single-row layout:
   [back-icon] [breadcrumb (trade# lives here)]  ........  [toolbar buttons] [X]
   Back collapses to an icon-only square (label hidden). Crumbs claim the
   middle space; the toolbar floats right via margin-left:auto. */
.trs-modal-head{flex-wrap:nowrap;gap:8px;padding:10px 14px;align-items:center;justify-content:flex-start;min-height:48px}
.trs-modal-head .modal-back{order:-2;flex:0 0 auto;width:32px;height:32px;padding:0;border:none;background:transparent;color:var(--muted);justify-content:center;border-radius:7px}
.trs-modal-head .modal-back:hover{background:var(--blue-bg);color:var(--brand-2);border-color:transparent}
.trs-modal-head .modal-back .back-lab{display:none}
.trs-modal-head .modal-back svg{width:16px;height:16px}
.trs-modal-head .modal-crumbs{order:-1;flex:1 1 auto;min-width:0;font-size:12px}
.trs-modal-head .trs-toolbar{order:0;flex:0 0 auto;margin-left:auto;max-width:100%;justify-content:flex-end}
@media (max-width:720px){
  .modal-head .modal-crumbs .crumb{max-width:90px;font-size:11px;padding:2px 6px}
}
.modal-head h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.modal-head .x{margin-left:auto;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg);transition:.15s}
.modal-head .x:hover{background:var(--line)}
.modal-body{padding:18px 22px;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2)}

/* version timeline */
.ver-list{display:flex;flex-direction:column;gap:0}
.ver{display:flex;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line-soft);position:relative}
.ver:last-child{border-bottom:none}
.ver .v-dot{width:11px;height:11px;border-radius:50%;background:var(--brand-2);margin-top:4px;flex-shrink:0;box-shadow:0 0 0 3px var(--blue-bg);position:relative;z-index:2}
.ver:not(:last-child)::before{content:"";position:absolute;left:5px;top:18px;bottom:-1px;width:1px;background:var(--line)}
.ver .v-body{flex:1;min-width:0}
.ver .v-act{font-size:13px;font-weight:600;color:var(--ink)}
.ver .v-meta{font-size:11px;color:var(--muted);margin-top:1px}
.ver .v-diff{font-size:12px;color:var(--ink-soft);margin-top:5px;background:var(--bg);border-radius:6px;padding:6px 9px;line-height:1.5}
.ver .v-diff .df{display:block}
.ver .v-diff .o{color:var(--red);text-decoration:line-through;opacity:.8}
.ver .v-diff .n{color:var(--green);font-weight:600}
.ver .v-restore{font-size:11px;font-weight:600;color:var(--green);padding:4px 10px;border-radius:6px;border:1px solid var(--green);background:#fff;align-self:flex-start;margin-top:6px;transition:.15s}
.ver .v-restore:hover{background:var(--green-bg);border-color:var(--green)}

/* columns toggle */
.col-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 18px}
.col-grid .col-sec{grid-column:1/-1;margin-top:10px}
.col-grid .col-sec:first-child{margin-top:0}
.col-grid .col-sec-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:4px 8px 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.col-grid .col-sec .col-chk{display:inline-flex;width:calc(50% - 12px);margin-right:6px;vertical-align:top}
.col-grid .col-sec:has(.col-chk:not(.col-hidden) ~ .col-chk:not(.col-hidden)){}
.col-grid .col-sec.col-sec-empty{display:none}
.col-chk{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;font-size:13px;cursor:pointer;transition:.12s;color:var(--ink-soft)}
.col-chk:hover{background:var(--bg)}
.col-chk input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.col-chk.on{color:var(--ink);font-weight:600}

/* setup steps */
#setupBody{display:block;width:100%}
.setup-step{display:block;position:relative;padding:14px 0 14px 38px;border-bottom:1px solid var(--line-soft);width:100%}
.setup-step:last-child{border-bottom:none}
.setup-step .n{position:absolute;left:0;top:14px;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.setup-step .s-body{display:block;width:100%}
.setup-step h5{font-size:13px;font-weight:700;margin-bottom:4px}
.setup-step p{font-size:13px;color:var(--ink-soft);line-height:1.55}
.setup-step code{font-family:var(--mono);font-size:11px;background:var(--bg);padding:1px 5px;border-radius:4px;color:var(--brand)}
.code-box{position:relative;margin-top:8px;width:100%;max-width:100%}
.code-box pre{background:#0d1b2a;color:#d6e2f0;font-family:var(--mono);font-size:11px;line-height:1.55;padding:13px 14px;border-radius:9px;overflow-x:auto;max-height:200px;white-space:pre;max-width:100%}
.code-box .cp{position:absolute;top:8px;right:8px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;transition:.15s}
.code-box .cp:hover{background:rgba(255,255,255,.24)}
.url-field{display:flex;gap:8px;margin-top:10px}
.url-field input{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;font-family:var(--mono)}
.url-field input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(26,111,176,.1)}

/* toast */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:2147483647;display:flex;flex-direction:column-reverse;gap:8px;align-items:center;pointer-events:none}
.toast-wrap .toast{pointer-events:auto}
.toast{display:flex;align-items:center;gap:9px;padding:11px 17px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);animation:toastIn .3s cubic-bezier(.2,.8,.2,1);max-width:90vw}
.toast svg{width:16px;height:16px;flex-shrink:0}
.toast.ok{background:#0f5132} .toast.ok svg{color:#7fe6a8}
.toast.err{background:#7a1f17} .toast.err svg{color:#ffae9e}
.toast.warn{background:#7a5b12} .toast.warn svg{color:#ffd97a}
.toast .undo{margin-left:6px;font-weight:700;color:#ffdf9f;text-decoration:underline;cursor:pointer}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Skeleton rows */
.skel-row td{background:linear-gradient(90deg,var(--line-soft) 25%,var(--panel) 50%,var(--line-soft) 75%);background-size:200% 100%;animation:skelpulse 1.4s infinite}
@keyframes skelpulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
.toast.dying{animation:toastOut .25s cubic-bezier(.2,.8,.2,1) forwards}

.banner{background:var(--amber-bg);border-bottom:1px solid #f0dca8;padding:7px 18px;font-size:12px;color:var(--amber);display:flex;align-items:center;gap:8px;font-weight:600;flex-shrink:0}
.banner svg{width:15px;height:15px}
.banner .b-act{margin-left:auto;font-weight:700;text-decoration:underline;cursor:pointer}
.banner.hide{display:none}

/* ---------- Theme engine ---------- */
/* Themes override the :root tokens via [data-theme] on <html> */
html[data-theme="t_swiss"]{--bg:#ffffff;--panel:#ffffff;--ink:#111111;--ink-soft:#8a8a8a;--muted:#8a8a8a;--line:#e2e2e2;--line-soft:#e2e2e2;--brand:#111111;--brand-2:#FF5A1F;--accent:#FF5A1F;--blue-bg:#1f6feb1f;--green-bg:#127a3e1f;--red-bg:#d6202c1f;--amber-bg:#b06f001f;--slate-bg:#e2e2e2}
html[data-theme="t_editorial"]{--bg:#F4F1EA;--panel:#fffdf8;--ink:#1A1A17;--ink-soft:#7A746A;--muted:#7A746A;--line:#ded9cc;--line-soft:#ded9cc;--brand:#1A1A17;--brand-2:#2E7D5B;--accent:#C8893A;--blue-bg:#3a6b8a1f;--green-bg:#2E7D5B1f;--red-bg:#B0483F1f;--amber-bg:#C8893A1f;--slate-bg:#ded9cc}
html[data-theme="t_slate"]{--bg:#f1f5f9;--panel:#ffffff;--ink:#1e293b;--ink-soft:#64748b;--muted:#64748b;--line:#dce3ec;--line-soft:#dce3ec;--brand:#1e293b;--brand-2:#2563eb;--accent:#2563eb;--blue-bg:#2563eb1f;--green-bg:#16a34a1f;--red-bg:#dc26261f;--amber-bg:#d977061f;--slate-bg:#dce3ec}
html[data-theme="t_arctic"]{--bg:#fbfdff;--panel:#ffffff;--ink:#0f2235;--ink-soft:#5b7186;--muted:#5b7186;--line:#dde8f1;--line-soft:#dde8f1;--brand:#0f2235;--brand-2:#0ea5e9;--accent:#0284c7;--blue-bg:#0284c71f;--green-bg:#0d94881f;--red-bg:#e11d481f;--amber-bg:#ca8a041f;--slate-bg:#dde8f1}
html[data-theme="t_graphite"]{--bg:#fafafa;--panel:#ffffff;--ink:#222222;--ink-soft:#737373;--muted:#737373;--line:#e4e4e4;--line-soft:#e4e4e4;--brand:#222222;--brand-2:#404040;--accent:#525252;--blue-bg:#1d4ed81f;--green-bg:#15803d1f;--red-bg:#b91c1c1f;--amber-bg:#a162071f;--slate-bg:#e4e4e4}
html[data-theme="t_linen"]{--bg:#faf8f3;--panel:#ffffff;--ink:#33302a;--ink-soft:#8a8478;--muted:#8a8478;--line:#e7e2d6;--line-soft:#e7e2d6;--brand:#33302a;--brand-2:#9a6b3f;--accent:#5f7a6b;--blue-bg:#5a78911f;--green-bg:#5f7a6b1f;--red-bg:#a857511f;--amber-bg:#9a6b3f1f;--slate-bg:#e7e2d6}
html[data-theme="t_mint"]{--bg:#f4fbf8;--panel:#ffffff;--ink:#10302a;--ink-soft:#5d8077;--muted:#5d8077;--line:#d6ece3;--line-soft:#d6ece3;--brand:#10302a;--brand-2:#0f9d72;--accent:#0f9d72;--blue-bg:#0e74901f;--green-bg:#0f9d721f;--red-bg:#dc4d4d1f;--amber-bg:#c2890a1f;--slate-bg:#d6ece3}
html[data-theme="t_sand"]{--bg:#fcfaf6;--panel:#ffffff;--ink:#3a3228;--ink-soft:#8c7f6b;--muted:#8c7f6b;--line:#e8dfce;--line-soft:#e8dfce;--brand:#3a3228;--brand-2:#c2410c;--accent:#92400e;--blue-bg:#1d6a961f;--green-bg:#4d7c0f1f;--red-bg:#b91c1c1f;--amber-bg:#b453091f;--slate-bg:#e8dfce}
html[data-theme="t_royal"]{--bg:#f6f6fc;--panel:#ffffff;--ink:#1e1b4b;--ink-soft:#6b6b9a;--muted:#6b6b9a;--line:#e0e0f2;--line-soft:#e0e0f2;--brand:#1e1b4b;--brand-2:#4f46e5;--accent:#4f46e5;--blue-bg:#4f46e51f;--green-bg:#0596691f;--red-bg:#e11d481f;--amber-bg:#d977061f;--slate-bg:#e0e0f2}
html[data-theme="t_rose"]{--bg:#fdf8f8;--panel:#ffffff;--ink:#3a1f25;--ink-soft:#8a6b70;--muted:#8a6b70;--line:#eedede;--line-soft:#eedede;--brand:#3a1f25;--brand-2:#be123c;--accent:#9f1239;--blue-bg:#2563eb1f;--green-bg:#15803d1f;--red-bg:#be123c1f;--amber-bg:#b453091f;--slate-bg:#eedede}
html[data-theme="t_teal"]{--bg:#f3fafa;--panel:#ffffff;--ink:#0f2d2d;--ink-soft:#5a8080;--muted:#5a8080;--line:#d4ebeb;--line-soft:#d4ebeb;--brand:#0f2d2d;--brand-2:#0d9488;--accent:#0f766e;--blue-bg:#0e74901f;--green-bg:#0d94881f;--red-bg:#dc26261f;--amber-bg:#ca8a041f;--slate-bg:#d4ebeb}
html[data-theme="t_paper"]{--bg:#ffffff;--panel:#ffffff;--ink:#2b2b29;--ink-soft:#7d7d76;--muted:#7d7d76;--line:#ededea;--line-soft:#ededea;--brand:#2b2b29;--brand-2:#1a1a1a;--accent:#444;--blue-bg:#1565c01f;--green-bg:#2f7d321f;--red-bg:#c628281f;--amber-bg:#a171121f;--slate-bg:#ededea}
html[data-theme="t_sky"]{--bg:#f5f9ff;--panel:#ffffff;--ink:#13294a;--ink-soft:#5e7596;--muted:#5e7596;--line:#d8e7f7;--line-soft:#d8e7f7;--brand:#13294a;--brand-2:#1d6fe0;--accent:#1d6fe0;--blue-bg:#1d6fe01f;--green-bg:#1a8a4f1f;--red-bg:#d63a3a1f;--amber-bg:#c8860c1f;--slate-bg:#d8e7f7}
html[data-theme="t_forest"]{--bg:#f5f8f3;--panel:#ffffff;--ink:#1c2e18;--ink-soft:#5f7355;--muted:#5f7355;--line:#dae6d2;--line-soft:#dae6d2;--brand:#1c2e18;--brand-2:#3f7d20;--accent:#2f6314;--blue-bg:#2f6e8f1f;--green-bg:#3f7d201f;--red-bg:#b530301f;--amber-bg:#a8730a1f;--slate-bg:#dae6d2}
html[data-theme="t_mono"]{--bg:#f8f8f8;--panel:#ffffff;--ink:#161616;--ink-soft:#6f6f6f;--muted:#6f6f6f;--line:#e0e0e0;--line-soft:#e0e0e0;--brand:#161616;--brand-2:#000000;--accent:#000;--blue-bg:#1f5fd01f;--green-bg:#0f7a3a1f;--red-bg:#c116161f;--amber-bg:#8a6d001f;--slate-bg:#e0e0e0}
html[data-theme="t_neumorphic"]{--bg:#F0F3F8;--panel:#F0F3F8;--ink:#2B3A55;--ink-soft:#8492AC;--muted:#8492AC;--line:#dde3ec;--line-soft:#dde3ec;--brand:#2B3A55;--brand-2:#5B7CFA;--accent:#5B7CFA;--blue-bg:#5B7CFA1f;--green-bg:#2f9e7d1f;--red-bg:#e2607a1f;--amber-bg:#d99a2b1f;--slate-bg:#dde3ec}
html[data-theme="t_pastel"]{--bg:#FAFAFA;--panel:#ffffff;--ink:#3b3357;--ink-soft:#8b86a3;--muted:#8b86a3;--line:#e7e8ef;--line-soft:#e7e8ef;--brand:#3b3357;--brand-2:#7C5CFC;--accent:#0EA5E9;--blue-bg:#0284C71f;--green-bg:#0d94881f;--red-bg:#DB27771f;--amber-bg:#D977061f;--slate-bg:#e7e8ef}
html[data-theme="t_brutalist"]{--bg:#FFFDF7;--panel:#ffffff;--ink:#1c1c1c;--ink-soft:#555;--muted:#555;--line:#1c1c1c;--line-soft:#1c1c1c;--brand:#1c1c1c;--brand-2:#1c1c1c;--accent:#1c1c1c;--blue-bg:#1f5fd01f;--green-bg:#0f7a3a1f;--red-bg:#cc1f1f1f;--amber-bg:#9a7b001f;--slate-bg:#1c1c1c}
html[data-theme="t_blueprint"]{--bg:#eef3fb;--panel:#ffffff;--ink:#13345e;--ink-soft:#5a779a;--muted:#5a779a;--line:#cddff2;--line-soft:#cddff2;--brand:#13345e;--brand-2:#1b6fc4;--accent:#1b6fc4;--blue-bg:#1b6fc41f;--green-bg:#1a7d5a1f;--red-bg:#c93a3a1f;--amber-bg:#b67a0a1f;--slate-bg:#cddff2}
html[data-theme="t_midnight"]{--bg:#0B1020;--panel:#141B33;--ink:#e7edf7;--ink-soft:#7C89A8;--muted:#7C89A8;--line:#26304f;--line-soft:#26304f;--brand:#141B33;--brand-2:#5EE6C5;--accent:#5EE6C5;--blue-bg:#6aa6ff1f;--green-bg:#5EE6C51f;--red-bg:#FF6B811f;--amber-bg:#FFB4541f;--slate-bg:#26304f}
html[data-theme="t_midnight"] thead th{background:#141B33;color:#7C89A8}
html[data-theme="t_neonglass"]{--bg:#0E0E10;--panel:rgba(255,255,255,.04);--ink:#f3f0ff;--ink-soft:#9b93b8;--muted:#9b93b8;--line:rgba(177,76,255,.28);--line-soft:rgba(177,76,255,.28);--brand:rgba(255,255,255,.04);--brand-2:#B14CFF;--accent:#00E5FF;--blue-bg:#00E5FF1f;--green-bg:#00E5C71f;--red-bg:#FF4D8F1f;--amber-bg:#FFC53D1f;--slate-bg:rgba(177,76,255,.28)}
html[data-theme="t_neonglass"] thead th{background:rgba(255,255,255,.04);color:#9b93b8}
html[data-theme="t_aurora"]{--bg:#101826;--panel:#172033;--ink:#E7EDF5;--ink-soft:#8ea0bd;--muted:#8ea0bd;--line:#27324a;--line-soft:#27324a;--brand:#172033;--brand-2:#12D8B0;--accent:#1FA2FF;--blue-bg:#1FA2FF1f;--green-bg:#12D8B01f;--red-bg:#FF512F1f;--amber-bg:#FFD2001f;--slate-bg:#27324a}
html[data-theme="t_aurora"] thead th{background:#172033;color:#8ea0bd}
html[data-theme="t_emerald"]{--bg:#0A1F1C;--panel:#0F2D28;--ink:#F2E6C8;--ink-soft:#8FB5A9;--muted:#8FB5A9;--line:rgba(200,162,75,.28);--line-soft:rgba(200,162,75,.28);--brand:#0F2D28;--brand-2:#C8A24B;--accent:#C8A24B;--blue-bg:#6fb3c91f;--green-bg:#5fc99e1f;--red-bg:#e08a7a1f;--amber-bg:#C8A24B1f;--slate-bg:rgba(200,162,75,.28)}
html[data-theme="t_emerald"] thead th{background:#0F2D28;color:#8FB5A9}
html[data-theme="t_datadense"]{--bg:#0D1117;--panel:#161B22;--ink:#E6EDF3;--ink-soft:#8B949E;--muted:#8B949E;--line:#30363D;--line-soft:#30363D;--brand:#161B22;--brand-2:#58A6FF;--accent:#58A6FF;--blue-bg:#58A6FF1f;--green-bg:#3FB9501f;--red-bg:#F851491f;--amber-bg:#D299221f;--slate-bg:#30363D}
html[data-theme="t_datadense"] thead th{background:#161B22;color:#8B949E}
html[data-theme="t_carbon"]{--bg:#15171c;--panel:#1d2026;--ink:#e8eaed;--ink-soft:#9aa0a8;--muted:#9aa0a8;--line:#2d323a;--line-soft:#2d323a;--brand:#1d2026;--brand-2:#ff7a18;--accent:#ff7a18;--blue-bg:#5b9bd51f;--green-bg:#4caf721f;--red-bg:#e5604d1f;--amber-bg:#e0a13c1f;--slate-bg:#2d323a}
html[data-theme="t_carbon"] thead th{background:#1d2026;color:#9aa0a8}
html[data-theme="t_navygold"]{--bg:#0c1730;--panel:#13203f;--ink:#eaf0fb;--ink-soft:#8597bd;--muted:#8597bd;--line:#243760;--line-soft:#243760;--brand:#13203f;--brand-2:#e3b341;--accent:#e3b341;--blue-bg:#5b9bf01f;--green-bg:#52c79a1f;--red-bg:#ef6e7b1f;--amber-bg:#e3b3411f;--slate-bg:#243760}
html[data-theme="t_navygold"] thead th{background:#13203f;color:#8597bd}
html[data-theme="t_plum"]{--bg:#1a1126;--panel:#241634;--ink:#f0e9f7;--ink-soft:#a692bd;--muted:#a692bd;--line:#3a2752;--line-soft:#3a2752;--brand:#241634;--brand-2:#c084fc;--accent:#c084fc;--blue-bg:#8b9ef01f;--green-bg:#5dd6a01f;--red-bg:#f06a8f1f;--amber-bg:#f0b9551f;--slate-bg:#3a2752}
html[data-theme="t_plum"] thead th{background:#241634;color:#a692bd}
html[data-theme="t_ocean"]{--bg:#0a1a26;--panel:#102634;--ink:#e3f0f7;--ink-soft:#7fa3b8;--muted:#7fa3b8;--line:#1e3a4d;--line-soft:#1e3a4d;--brand:#102634;--brand-2:#2dd4bf;--accent:#38bdf8;--blue-bg:#38bdf81f;--green-bg:#2dd4bf1f;--red-bg:#fb71851f;--amber-bg:#fbbf241f;--slate-bg:#1e3a4d}
html[data-theme="t_ocean"] thead th{background:#102634;color:#7fa3b8}
html[data-theme="t_terminal"]{--bg:#0a0f0a;--panel:#0f160f;--ink:#c8f7c8;--ink-soft:#6e9a6e;--muted:#6e9a6e;--line:#1c2a1c;--line-soft:#1c2a1c;--brand:#0f160f;--brand-2:#39ff14;--accent:#39ff14;--blue-bg:#5bd6ff1f;--green-bg:#39ff141f;--red-bg:#ff5c5c1f;--amber-bg:#ffe14d1f;--slate-bg:#1c2a1c}
html[data-theme="t_terminal"] thead th{background:#0f160f;color:#6e9a6e}
html[data-theme="t_charcoal"]{--bg:#1f2023;--panel:#27282c;--ink:#e9eaec;--ink-soft:#9b9da3;--muted:#9b9da3;--line:#3a3b40;--line-soft:#3a3b40;--brand:#27282c;--brand-2:#7c9eff;--accent:#7c9eff;--blue-bg:#7c9eff1f;--green-bg:#5cc98a1f;--red-bg:#ec6a6a1f;--amber-bg:#e2b84c1f;--slate-bg:#3a3b40}
html[data-theme="t_charcoal"] thead th{background:#27282c;color:#9b9da3}
/* compact / spacious density */
html[data-density="compact"] tbody td{padding:4px 9px;font-size:11px}
html[data-density="compact"]{font-size:12px}
html[data-density="spacious"] tbody td{padding:11px 14px;font-size:13px}

/* ---------- Theme picker panel ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme-card{border:1.5px solid var(--line);border-radius:10px;padding:11px;cursor:pointer;transition:.15s;background:var(--panel);text-align:left}
.theme-card:hover{border-color:#c8d2de;transform:translateY(-1px)}
.theme-card.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,119,46,.12)}
.theme-card .sw{display:flex;gap:4px;margin-bottom:8px}
.theme-card .sw i{width:100%;height:22px;border-radius:5px;display:block}
.theme-card .t-name{font-size:12px;font-weight:700;color:var(--ink)}
.theme-card .t-desc{font-size:11px;color:var(--muted);margin-top:1px}
.opt-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.opt-group{flex:1;min-width:150px}
.opt-group h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:7px 4px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--panel);transition:.12s;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--brand);color:#fff}

/* ---------- Upload / conflict ---------- */
.drop{border:2px dashed var(--line);border-radius:12px;padding:30px 20px;text-align:center;transition:.15s;cursor:pointer;background:var(--bg)}
.drop:hover,.drop.over{border-color:var(--brand-2);background:var(--blue-bg)}
.drop svg{width:38px;height:38px;color:var(--faint);margin-bottom:8px}
.drop h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px}
.drop p{font-size:12px;color:var(--muted)}
.drop .browse{color:var(--brand-2);font-weight:700;text-decoration:underline}
.up-summary{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.up-stat{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;background:var(--bg);font-size:13px}
.up-stat .ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.up-stat .ic svg{width:15px;height:15px}
.up-stat.new .ic{background:var(--green-bg);color:var(--green)}
.up-stat.upd .ic{background:var(--amber-bg);color:var(--amber)}
.up-stat.same .ic{background:var(--slate-bg);color:var(--muted)}
.up-stat b{color:var(--ink)}
.up-stat .gr{margin-left:auto;color:var(--muted);font-size:12px}

/* conflict review */
.cf-item{border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:11px}
.cf-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.cf-head .tno{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink)}
.cf-head .who{font-size:12px;color:var(--ink-soft)}
.cf-cols{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cf-side{border:1.5px solid var(--line);border-radius:9px;padding:10px;cursor:pointer;transition:.15s;position:relative}
.cf-side:hover{border-color:#c8d2de}
.cf-side.pick{border-color:var(--brand-2);background:var(--blue-bg)}
.cf-side .cf-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.cf-side .cf-lbl .tick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center}
.cf-side.pick .cf-lbl .tick{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.cf-side.pick .cf-lbl{color:var(--brand)}
.cf-field{font-size:12px;padding:2px 0;display:flex;gap:6px}
.cf-field .k{color:var(--muted);min-width:74px}
.cf-field .v{color:var(--ink);font-weight:500}
.cf-field.diff .v{color:var(--accent);font-weight:700}
.cf-allbar{display:flex;gap:8px;align-items:center;padding:10px 13px;background:var(--bg);border-radius:9px;margin-bottom:13px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.cf-allbar .lk{color:var(--brand-2);font-weight:700;cursor:pointer;text-decoration:underline}

.banner.hide{display:none}

@media(max-width:720px){
  .kpi{min-width:108px;padding:9px 13px}
  .kpi .k-val{font-size:16px}
  .controls{gap:7px}
  .ctrl-r .btn span{display:none}
  .col-grid{grid-template-columns:1fr}
}

/* ===== auth / multi-user UI ===== */
/* NOTE: .login-* rules moved to the "LOGIN v2 (Sense redesign)" block at end of file */
.rt-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.12);color:#fff;transition:.3s}
.rt-pill.flash{background:rgba(127,216,168,.5)}
.rt-dot{width:7px;height:7px;border-radius:50%;background:#7fd8a8;box-shadow:0 0 0 0 rgba(127,216,168,.6);animation:rtp 2.4s infinite}
@keyframes rtp{0%{box-shadow:0 0 0 0 rgba(127,216,168,.5)}70%{box-shadow:0 0 0 6px rgba(127,216,168,0)}100%{box-shadow:0 0 0 0 rgba(127,216,168,0)}}
.who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff}
.role-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:20px}
.role-leader{background:#f0a93a;color:#3a2400}.role-edit{background:#7fd8a8;color:#06351f}.role-view{background:rgba(255,255,255,.22);color:#fff}
.acct-row{display:grid;grid-template-columns:1.2fr 1.4fr .9fr .8fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.acct-row .code{font-family:var(--mono);font-weight:700}
.acct-row.blocked{opacity:.5}
.acct-row select{border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12px}

/* ===== Accounts — redesigned (stats + filters + card grid + detail dialog) ===== */
.acct-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.acct-stat{background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;padding:14px}
.acct-stat .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.acct-stat .val{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.acct-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.acct-search{flex:1;min-width:180px;position:relative}
.acct-search input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card)}
.acct-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);width:14px;height:14px}
.acct-filters{display:flex;gap:6px;flex-wrap:wrap}
.acct-pill{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12px;font-weight:600;cursor:pointer;color:var(--ink);transition:all .12s}
.acct-pill:hover{background:var(--bg)}
.acct-pill.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.acct-grid{display:block}
.acct-card{position:relative;border:1px solid var(--line-soft);background:var(--card);border-radius:var(--radius-card);padding:16px;cursor:pointer;transition:all .15s;overflow:hidden}
.acct-card:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(15,42,71,.08);transform:translateY(-1px)}
.acct-card.blocked{opacity:.62}
.acct-card.blocked::before{content:"BLOCKED";position:absolute;top:0;right:0;background:var(--red,#c0392b);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:0 var(--radius-card) 0 var(--radius-sm);letter-spacing:.5px}
.acct-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.acct-card .avatar{width:42px;height:42px;font-size:15px;flex-shrink:0}
.acct-card .ac-name{font-weight:700;font-size:13px;color:var(--ink);line-height:1.2;margin-bottom:3px;word-break:break-word}
.acct-card .ac-role{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.acct-card .ac-role.leader{background:#fef3c7;color:#92400e}
.acct-card .ac-role.edit{background:#dbeafe;color:#1e40af}
.acct-card .ac-role.view{background:#e5e7eb;color:var(--ink-soft)}
.acct-card-meta{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:12px;word-break:break-word}
.acct-card-meta .code{font-family:var(--mono);font-weight:700;color:var(--ink);font-size:12px}
.acct-card-meta .mail{display:block;font-size:12px}
.acct-card-meta .mail.missing{color:var(--red,#c0392b);font-weight:600}
.acct-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.acct-card-actions .mini-btn{flex:1;min-width:0;font-size:11px;padding:5px 8px;text-align:center}
/* User management table */
.acct-table-wrap{border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--card);overflow-x:auto;max-width:100%}
.acct-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
@media (max-width:560px){ .acct-table{min-width:560px} }
.acct-table thead th{background:var(--bg);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.4px;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}
.acct-table thead th:hover{background:var(--line-soft);color:var(--ink)}
.acct-table thead th .sort-ind{display:inline-block;margin-left:4px;opacity:.4;font-size:11px}
.acct-table thead th.sorted .sort-ind{opacity:1;color:var(--brand)}
.acct-table tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.acct-table tbody tr:last-child td{border-bottom:none}
.acct-table tbody tr{cursor:pointer;transition:background .12s}
.acct-table tbody tr:hover{background:var(--bg)}
.acct-table tbody tr.blocked{opacity:.62}
.acct-table td.at-user{display:flex;align-items:center;gap:10px;min-width:0}
.acct-table td.at-user .avatar{width:34px;height:34px;font-size:13px;flex-shrink:0}
.acct-table td.at-user .at-name{font-weight:700;color:var(--ink);line-height:1.25}
.acct-table td.at-user .at-blocked{display:inline-block;margin-left:6px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;letter-spacing:.4px;vertical-align:middle}
.acct-table td.at-code{font-family:var(--mono);font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap}
.acct-table td.at-mail{color:var(--muted);font-size:12px;word-break:break-all}
.acct-table td.at-mail.missing{color:var(--red,#c0392b);font-weight:600}
.acct-table td.at-dept{color:var(--ink-soft);font-size:12.5px;font-weight:600;white-space:nowrap}
.acct-table td.at-dept.missing{color:var(--muted);font-weight:400}
.acct-table .ac-role{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.acct-table .ac-role.leader{background:#fef3c7;color:#92400e}
.acct-table .ac-role.edit{background:#dbeafe;color:#1e40af}
.acct-table .ac-role.view{background:#e5e7eb;color:var(--ink-soft)}
.acct-table td.at-actions{text-align:right;white-space:nowrap}
.acct-table td.at-actions .mini-btn{font-size:11px;padding:5px 10px;margin-left:6px}
.acct-empty-msg{padding:24px;text-align:center;color:var(--muted)}
@media (max-width:720px){
  .acct-table thead{display:none}
  .acct-table tbody td{display:block;border-bottom:none;padding:4px 12px}
  .acct-table tbody tr{display:block;padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .acct-table td.at-actions{text-align:left;padding-top:8px}
  .acct-table td.at-actions .mini-btn{margin-left:0;margin-right:6px}
}

/* Signatures Hub */
.ds-tab{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;padding:5px 12px;border-radius:7px;cursor:pointer;transition:.12s}
.ds-tab:hover{background:var(--bg);color:var(--ink)}
.ds-tab.on{background:var(--brand-bg,var(--blue-bg,#eef4ff));color:var(--brand-2,#1e40af);border-color:var(--brand-2,#1e40af)}
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table thead th{background:var(--bg);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.4px;text-transform:uppercase;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap;position:sticky;top:0;z-index:1;cursor:pointer;user-select:none}
.ds-table thead th:hover{background:var(--line-soft);color:var(--ink)}
.ds-table thead th .sort-ind{display:inline-block;margin-left:4px;opacity:.4;font-size:11px}
.ds-table thead th.sorted .sort-ind{opacity:1;color:var(--brand)}
.ds-table tbody td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.ds-table tbody tr{transition:background .12s}
.ds-table tbody tr:hover{background:var(--bg)}
.ds-table .ds-trade{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--ink);white-space:nowrap}
.ds-table .ds-title{font-weight:600;color:var(--ink);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-table .ds-sender{color:var(--muted);font-size:12px;white-space:nowrap}
.ds-table .ds-date{color:var(--muted);font-size:12px;white-space:nowrap}
.ds-table .ds-signers{color:var(--muted);font-size:12px}
.ds-table .ds-actions{text-align:right;white-space:nowrap}
.ds-table .ds-actions .mini-btn{margin-left:6px}
.ds-status{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.ds-sup-badge{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:#fef3c7;color:#92400e;border:1px solid #fcd34d;line-height:1.4;cursor:help}
.ds-rec-badge{display:inline-block;margin-top:3px;margin-left:4px;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:#e0f2fe;color:#075985;border:1px solid #7dd3fc;line-height:1.4;cursor:help}
.ds-row.ds-superseded td{opacity:.72}
.ds-status.sent,.ds-status.created{background:#fef3c7;color:#92400e}
.ds-status.delivered{background:#dbeafe;color:#1e40af}
.ds-status.completed{background:#d1fae5;color:#065f46}
.ds-status.declined,.ds-status.voided,.ds-status.autoresponded{background:#fee2e2;color:#991b1b}
.ds-status.partial{background:#e0e7ff;color:#3730a3}
.ds-status .ds-status-count{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;background:rgba(0,0,0,.08);color:inherit;vertical-align:1px;cursor:help}
.ds-expand{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--muted);cursor:pointer;transition:transform .15s, background .12s, color .12s}
.ds-expand:hover{background:var(--bg);color:var(--ink);border-color:var(--ink-soft,#94a3b8)}
.ds-expand.on{transform:rotate(90deg);background:var(--brand-bg,#eef4ff);color:var(--brand-2,#1e40af);border-color:var(--brand-2,#1e40af)}
.ds-expand:disabled{opacity:.3;cursor:not-allowed}
.ds-trail-row td{border-bottom:1px solid var(--line)!important}
.ds-trail-row .mng-trail{margin:6px 0}
.ds-empty{padding:48px 24px;text-align:center;color:var(--muted)}
.ds-empty svg{width:48px;height:48px;color:var(--line);margin-bottom:12px}
@media (max-width:720px){
  .ds-table thead{display:none}
  .ds-table tbody td{display:block;border-bottom:none;padding:3px 14px}
  .ds-trail-row td{padding:0!important;background:var(--surface-2,#f7f9fc)!important}
  .ds-table tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .ds-table .ds-actions{text-align:left;padding-top:8px}
  .ds-table .ds-actions .mini-btn{margin-left:0;margin-right:6px}
  .ds-table .ds-title{max-width:none;white-space:normal}
}

/* === Signature Documents Hub v2 === */
.ds-head-search{position:relative;flex:1;max-width:280px;display:flex;align-items:center}
.ds-head-search svg{position:absolute;left:9px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.ds-head-search input{width:100%;padding:7px 10px 7px 28px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;color:var(--ink)}
.ds-head-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.08)}

.ds-toolbar{position:sticky;top:0;z-index:5;background:var(--panel,#fff);padding:12px 16px 14px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px}

.sig-hub-toolbar{display:flex;flex-direction:column;gap:12px}
.sig-hub-switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sig-hub-switch{appearance:none;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px 12px;cursor:pointer;transition:background .12s,border-color .12s,transform .12s;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "metrics";row-gap:12px;align-items:start;min-width:0;text-align:left}
.sig-hub-switch:hover{background:#f8fbff;border-color:var(--line);transform:translateY(-1px)}
.sig-hub-switch.on{background:#f7fbff;border-color:#8dbaf0}
.sig-hub-switch.on::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--brand)}
.sig-hub-switch-main{grid-area:main;display:flex;align-items:flex-start;gap:14px;min-width:0}
.sig-hub-switch-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e8f3ff;color:var(--brand);flex:0 0 auto}
.sig-hub-switch-copy{min-width:0;display:flex;flex-direction:column;align-self:center}
.sig-hub-switch-title{font-size:16px;font-weight:800;line-height:1.2;color:var(--ink);white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sig-hub-switch-sub{margin-top:4px;font-size:12px;font-weight:600;color:var(--muted)}
.sig-hub-switch-metrics{grid-area:metrics;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.sig-hub-metric{border:1px solid var(--line-soft);border-radius:10px;padding:10px 10px 9px;text-align:center;min-width:0;background:#fff}
.sig-hub-metric.ok{background:#eefaf3;border-color:#d9ecdf}
.sig-hub-metric.wait{background:#fff7df;border-color:#f1e5be}
.sig-hub-metric.bad{background:#fff0f2;border-color:#f1d9df}
.sig-hub-metric-val{font-size:22px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.sig-hub-metric.ok .sig-hub-metric-val{color:#16835a}
.sig-hub-metric.wait .sig-hub-metric-val{color:#a46a09}
.sig-hub-metric.bad .sig-hub-metric-val{color:#bc3545}
.sig-hub-metric-lab{margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#667085}

.sig-hub-statusbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
.sig-hub-statuses{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.sig-hub-status{appearance:none;border:1px solid var(--line-soft);border-radius:10px;padding:8px 12px;background:#fff;color:var(--ink-soft);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .12s}
.sig-hub-status:hover{background:#f8fafc;border-color:var(--line);transform:translateY(-1px)}
.sig-hub-status.on{background:#20242b;border-color:#20242b;color:#fff}
.sig-hub-status.on:hover{background:#20242b;border-color:#20242b}
.sig-hub-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;background:#eef2f7;color:#4d596b}
.sig-hub-status-badge.ok{background:#e0f5e9;color:#166534}
.sig-hub-status-badge.go{background:#eaf2ff;color:#1d4ed8}
.sig-hub-status-badge.wait{background:#fff4d6;color:#92670e}
.sig-hub-status-badge.bad{background:#fde2e2;color:#b91c1c}
.sig-hub-status-badge.mute{background:#eef0f4;color:var(--ink-soft)}
.sig-hub-status.on .sig-hub-status-badge{background:rgba(255,255,255,.18);color:#fff}
.sig-hub-status-note{font-size:12px;font-weight:600;color:var(--muted);text-align:right}

.sig-hub-table-wrap{padding:12px 16px 16px}
/* Freeze the hub's toolbar (type cards + status pills): #sigHubBody stops
   scrolling and the table wrap becomes the ONLY scroller (per Rishi
   2026-07-08). ID rules beat the inline overflow:auto on the body div and the
   JS-set --sig-hub-table-top offset (kept harmless for stale tabs). */
#sigHubBody{display:flex!important;flex-direction:column;overflow:hidden!important}
#sigHubBody .sig-hub-toolbar{flex-shrink:0}
#sigHubBody .sig-hub-table-wrap{flex:1 1 auto;min-height:0;overflow-y:auto;padding-top:0}
#sigHubBody .ds-table-v2 thead th{top:0}
@media (max-width:860px){#sigHubBody .ds-table-v2 thead th{top:0}}

.ds-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ds-kpi{appearance:none;background:#f8fafc;border:1px solid var(--line-soft);border-radius:10px;padding:9px 12px;text-align:left;cursor:pointer;transition:background .12s,border-color .12s,transform .12s;display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-kpi:hover{background:#fff;border-color:var(--line);transform:translateY(-1px)}
.ds-kpi.ds-kpi-static{cursor:default}
.ds-kpi.ds-kpi-static:hover{background:#f8fafc;border-color:var(--line-soft);transform:none}
.ds-kpi-val{font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ds-kpi-val.ok{color:#166534}
.ds-kpi-val.go{color:#1d4ed8}
.ds-kpi-val.wait{color:#92670e}
.ds-kpi-val.bad{color:#b91c1c}
.ds-kpi-val.mute{color:var(--muted)}
.ds-kpi-lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

.ds-tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.ds-tab{appearance:none;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .12s,color .12s}
.ds-tab:hover{background:#f1f5f9;color:var(--ink)}
.ds-tab.on{background:var(--brand);color:#fff}
.ds-tab.on .ds-tab-ct{background:rgba(255,255,255,.22);color:#fff}
.ds-tab-ct{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:700;background:#e2e8f0;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ds-tab-ct.ok{background:#e0f5e9;color:#166534}
.ds-tab-ct.go{background:#eaf2ff;color:#1d4ed8}
.ds-tab-ct.wait{background:#fff4d6;color:#92670e}
.ds-tab-ct.bad{background:#fde2e2;color:#b91c1c}
.ds-tab-ct.mute{background:#eef0f4;color:var(--ink-soft)}

.ds-table-v2{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0}
.ds-table-v2 thead th{position:sticky;top:var(--sig-hub-table-top,224px);z-index:3;background:#f8fafc;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
@media (max-width:860px){.ds-table-v2 thead th{top:var(--sig-hub-table-top,286px)}}
.ds-table-v2 tbody td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:12px;color:var(--ink)}
/* Fixed layout (2026-07-09): th widths pin every column except Document,
   which absorbs all remaining width — full property addresses stay visible.
   (Expander column removed the same day — activity history lives in Manage.) */
.ds-table-v2{table-layout:fixed}
.ds-table-v2 thead th.col-sn{width:34px}
.ds-table-v2 thead th.col-sender{width:170px}
.ds-table-v2 thead th.col-signers{width:112px}
.ds-table-v2 thead th.col-status{width:172px}
.ds-table-v2 thead th.col-act{width:230px}
.ds-table-v2 tbody td.col-sender{width:160px}
/* Signers/Progress slimmed 2026-07-09 (per Rishi) — the width went to Document
   so full property addresses fit without truncation. */
.ds-table-v2 tbody td.col-signers{width:112px}
.ds-table-v2 tbody td.col-status{width:172px}
.ds-table-v2 tbody td.col-act{width:230px}
.ds-table-v2 tbody tr:hover td{background:#fafbfc}
.ds-table-v2 .ds-row.ds-terminal td{opacity:.62}
.ds-table-v2 .ds-row.ds-terminal:hover td{opacity:.85}
.ds-table-v2 tbody td.col-rail{padding:0;width:4px}
.ds-table-v2 thead th.col-rail{width:4px;padding:0}
.ds-row-rail{display:block;width:4px;height:100%;min-height:48px}
.ds-row-rail.ok{background:#22c55e}
.ds-row-rail.go{background:#3b82f6}
.ds-row-rail.wait{background:#f59e0b}
.ds-row-rail.bad{background:#ef4444}
.ds-row-rail.mute{background:#cbd5e1}

.ds-doc{display:flex;flex-direction:column;gap:3px;min-width:0}
.ds-doc-l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ds-doc-l2{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-doc-l3{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-trade-chip{font-family:var(--mono,monospace);font-size:11px;font-weight:700;color:#1d4ed8;background:#eaf2ff;border:1px solid #cfddf7;padding:1px 7px;border-radius:5px;letter-spacing:.02em}
.ds-tcf-chip{font-family:var(--mono,monospace);font-size:11px;font-weight:600;color:#4a6070;background:var(--surface-2,#f2f5f6);border:1px solid var(--line);padding:1px 7px;border-radius:5px;letter-spacing:.02em}
.ds-bdg{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:4px;border:1px solid transparent}
.ds-bdg.sup{color:#92670e;background:#fff4d6;border-color:#f1dba4}
.ds-bdg.rec{color:#155e75;background:#cffafe;border-color:#a5f3fc}
.ds-bdg.crn{color:#92670e;background:#fff4d6;border-color:#f1dba4;text-transform:none;letter-spacing:.02em}

.ds-sender-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-sender-l1{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-sender-l2{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.ds-avstack{display:flex;align-items:center}
.ds-av{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line-soft);margin-left:-8px;position:relative;font-family:var(--mono,inherit);letter-spacing:.02em}
.ds-av:first-child{margin-left:0}
.ds-av.ok{box-shadow:0 0 0 1.5px #22c55e}
.ds-av.go{box-shadow:0 0 0 1.5px #3b82f6}
.ds-av.wait{box-shadow:0 0 0 1.5px #f59e0b}
.ds-av.bad{box-shadow:0 0 0 1.5px #ef4444}
.ds-av.mute{box-shadow:0 0 0 1.5px #cbd5e1}
.ds-av-more{background:#e2e8f0!important;color:var(--ink-soft)!important;box-shadow:0 0 0 1.5px var(--line)!important}

.ds-status-block{display:flex;flex-direction:column;gap:5px;min-width:0}
.ds-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid transparent;width:fit-content}
.ds-pill.ok{color:#166534;background:#e0f5e9;border-color:#cce7d6}
.ds-pill.go{color:#1d4ed8;background:#eaf2ff;border-color:#cfddf7}
.ds-pill.wait{color:#92670e;background:#fff4d6;border-color:#f1dba4}
.ds-pill.bad{color:#b91c1c;background:#fde2e2;border-color:#f3c2c2}
.ds-pill.mute{color:#475569;background:#eef0f4;border-color:var(--line)}
.ds-progress{height:4px;background:#eef0f4;border-radius:999px;overflow:hidden;width:100%}
.ds-progress-bar{height:100%;border-radius:999px;transition:width .25s ease}
.ds-progress-bar.ok{background:linear-gradient(90deg,#22c55e,#16a34a)}
.ds-progress-bar.go{background:linear-gradient(90deg,#3b82f6,#2563eb)}
.ds-progress-bar.wait{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.ds-progress-bar.bad{background:#ef4444}
.ds-progress-bar.mute{background:#cbd5e1}
.ds-progress-cap{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px}
.ds-progress-cap b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.ds-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap}
.ds-act{appearance:none;display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.ds-act:hover{background:#f1f5f9;border-color:var(--ink-soft,#94a3b8)}
.ds-act svg{width:12px;height:12px;flex-shrink:0}
.ds-act-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.ds-act-primary:hover{background:var(--brand-2,#1d4ed8);border-color:var(--brand-2,#1d4ed8);color:#fff}
.ds-act-icon{padding:5px 7px}
.ds-act-icon svg{width:13px;height:13px}
.ds-act[disabled]{opacity:.5;cursor:not-allowed}

.ds-muted{color:var(--muted)}

@media (max-width:1100px){
  .sig-hub-switches{grid-template-columns:1fr}
  .sig-hub-statusbar{grid-template-columns:1fr}
  .sig-hub-status-note{text-align:left}
  .ds-table-v2 tbody td.col-signers{width:130px}
  .ds-table-v2 tbody td.col-sender{width:130px}
  .ds-table-v2 tbody td.col-act, .ds-table-v2 thead th.col-act{width:170px}
  .ds-act span.ds-act-lab{display:none}
  .ds-act{padding:5px 7px}
}
@media (max-width:860px){
  .sig-hub-switches{grid-template-columns:1fr}
  .sig-hub-switch{padding:12px}
  .sig-hub-switch-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sig-hub-metric-val{font-size:20px}
  .sig-hub-statuses{width:100%}
}

/* Detail dialog */
.acct-detail{display:flex;flex-direction:column;min-height:380px}
.acct-detail-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.acct-detail-head .avatar{width:56px;height:56px;font-size:20px}
.acct-detail-head h4{margin:0;font-size:16px;color:var(--ink)}
.acct-detail-head .sub{font-size:13px;color:var(--muted);margin-top:3px;font-family:var(--mono)}
.acct-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.acct-tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s}
.acct-tab:hover{color:var(--ink)}
.acct-tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.acct-tab-panel{display:none}
.acct-tab-panel.on{display:block}
.acct-empty-msg{color:var(--muted);font-size:13px;padding:18px 4px;text-align:center}
.mini-btn{font-size:11px;font-weight:700;padding:5px 9px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.mini-btn:hover{border-color:var(--brand-2);color:var(--brand-2)}
.mini-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.tier{display:flex;gap:8px}.tier label{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:9px;font-size:12px;font-weight:600;cursor:pointer;text-align:center;color:var(--ink-soft)}
.tier input{display:none}.tier label:has(input:checked){border-color:var(--brand-2);background:var(--blue-bg);color:var(--brand)}
.form-row{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.form-row label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.form-row input{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px}
.form-row input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(26,111,176,.1)}

/* ===== row selection, drag, expand, export menu ===== */
.col-sel{width:34px;text-align:center;padding:0 4px!important}
.rowchk{width:15px;height:15px;cursor:pointer;accent-color:var(--brand-2)}
tr.row-sel td{background:var(--blue-bg)!important}
.col-row .rownum{display:inline-block}
.row-expand{display:none;border:none;background:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1}
tbody tr:hover .col-row .rownum{display:inline-block}
.th-grip{opacity:0;cursor:move;margin-right:4px;color:var(--faint);font-size:11px}
th:hover .th-grip{opacity:1}
th[draggable=true]{cursor:default}
.cell-txt{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
tr.expanded td{white-space:normal!important}
tr.expanded .cell-txt{max-width:none;white-space:normal;overflow:visible}
/* Inline cell editing (dashboard table) */
td.cell-edit{position:relative}
td.cell-edit.has-draft::before{content:'';position:absolute;top:4px;left:4px;width:7px;height:7px;border-radius:50%;background:#e4a000;box-shadow:0 0 0 2px var(--card);z-index:1;pointer-events:none}
td.cell-edit.has-draft{background:rgba(228,160,0,.06)}
td.cell-edit .cell-pencil{position:absolute;top:3px;right:4px;opacity:0;width:14px;height:14px;color:var(--muted);pointer-events:none;transition:opacity .12s ease}
tr:hover td.cell-edit .cell-pencil{opacity:.5}
td.cell-editing{outline:2px solid var(--accent);outline-offset:-2px;background:var(--panel);white-space:normal!important;padding:2px 6px!important}
td.cell-editing .cell-txt{max-width:none;white-space:normal;overflow:visible}
.cell-input{width:100%;box-sizing:border-box;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:4px 2px;min-height:24px}
.cell-input.cell-textarea{resize:vertical;min-height:48px}
td.cell-saving{opacity:.65}
td.cell-saving::after{content:'';position:absolute;top:50%;right:6px;width:10px;height:10px;margin-top:-5px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:cellspin .7s linear infinite}
@keyframes cellspin{to{transform:rotate(360deg)}}
.sel-bar{display:flex;align-items:center;gap:14px;padding:8px 18px;background:#eef5fb;border-bottom:1px solid var(--line);flex-shrink:0;font-size:13px}
.sel-bar #selCount{font-weight:700;color:var(--brand)}
.sel-bar button{font-size:12px;font-weight:600;color:var(--brand-2);background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:7px;cursor:pointer}
.sel-bar button:hover{border-color:var(--brand-2)}
.sel-bar .sel-hint{margin-left:auto;color:var(--muted);font-size:12px}
.export-wrap{position:relative}
.export-wrap .caret{margin-left:2px}
.export-menu{position:absolute;top:calc(100% + 6px);right:0;width:280px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);z-index:30;display:none;overflow:hidden}
.export-menu.open{display:block}
.exp-head{padding:11px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.exp-head b{color:var(--ink);font-weight:700}
.exp-formats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);padding:1px}
.exp-formats button{background:#fff;border:none;padding:12px 10px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px}
.exp-formats button:hover{background:var(--blue-bg)}
.exp-formats .ef-i{font-size:16px}
.exp-formats .ef-s{font-size:11px;color:var(--muted);font-weight:500}
.exp-colhead{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.exp-reset{font-size:11px;font-weight:600;color:var(--brand-2);background:none;border:none;cursor:pointer;text-transform:none;letter-spacing:0}
.exp-collist{max-height:200px;overflow-y:auto;padding:0 14px 12px}
.exp-col{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;color:var(--ink-soft);cursor:pointer}
.exp-col input{accent-color:var(--brand-2)}
.view-only-tag{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);padding:6px 12px;border-radius:7px;border:1px solid var(--line)}

/* ===== presence + avatars ===== */
.presence{display:flex;align-items:center;padding-left:6px}
.pavatar{position:relative;margin-left:-7px;transition:transform .15s}
.pavatar:hover{transform:translateY(-2px);z-index:5}
.pavatar.more{margin-left:-7px;background:rgba(255,255,255,.2);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid var(--brand)}
.avatar{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;font-size:12px;letter-spacing:.02em}
.avatar.sm{width:26px;height:26px;font-size:11px;border:2px solid var(--brand)}
.pa-badge{position:absolute;bottom:-2px;right:-3px;background:var(--accent);color:#fff;width:13px;height:13px;border-radius:50%;font-size:11px;line-height:13px;text-align:center;font-weight:700;border:1.5px solid var(--brand)}

/* ===== multi-form tab bar ===== */
.form-tabs{position:fixed;bottom:0;left:0;right:0;display:flex;gap:2px;padding:0 10px;background:rgba(13,27,42,.96);z-index:39;height:38px;align-items:flex-end;overflow-x:auto}
.ftab{display:flex;align-items:center;gap:7px;background:#1c3550;color:#cdd8e6;border-radius:8px 8px 0 0;padding:7px 11px;font-size:12px;font-weight:600;cursor:pointer;max-width:200px;white-space:nowrap;border:1px solid transparent;border-bottom:none}
.ftab:hover{background:#26415f}
.ftab.active{background:#fff;color:var(--ink)}
.ft-dot{width:7px;height:7px;border-radius:50%;background:#7fd8a8;flex-shrink:0}
.ft-dot.new{background:var(--accent)}
.ft-label{overflow:hidden;text-overflow:ellipsis}
.ft-x{border:none;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:12px;line-height:1;padding:2px}
.ft-x:hover{opacity:1}
/* drafts modal */
.draft-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-soft)}
.draft-row .dr-main{flex:1;min-width:0}
.dr-trade{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink)}
.dr-trade .dr-type{font-family:var(--font);font-size:11px;font-weight:700;color:var(--brand-2);background:var(--blue-bg);padding:1px 7px;border-radius:10px;margin-left:6px}
.dr-sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
.dr-meta{font-size:11px;color:var(--muted);margin-top:2px}
.dr-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.draft-tabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--line-soft)}
.draft-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.draft-tab:hover{color:var(--ink-soft)}
.draft-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.dr-status{display:inline-block;font-family:var(--font);font-size:11px;font-weight:700;padding:1px 8px;border-radius:10px;margin-left:6px;vertical-align:middle}

/* ===== appearance dropdowns ===== */
.appearance-rows{display:flex;flex-direction:column;gap:16px;padding:4px 2px}
.app-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.app-row>label{font-size:13px;font-weight:600;color:var(--ink-soft);flex-shrink:0}
.app-row select{flex:1;max-width:330px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer}
.theme-pick{display:flex;align-items:center;gap:10px;flex:1;max-width:380px;justify-content:flex-end}
.theme-sw{display:flex;gap:3px;flex-shrink:0}
.theme-sw i{width:16px;height:16px;border-radius:4px;display:block;border:1px solid rgba(0,0,0,.12)}

/* ===== profile photo ===== */
.avatar.xs{width:22px;height:22px;font-size:11px;border:none;margin-right:6px;vertical-align:middle}
.avatar.lg{width:96px;height:96px;font-size:30px;border:3px solid var(--line)}
.profile-photo-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0}
/* Profile photo crop modal */
.crop-stage{position:relative;width:320px;height:320px;margin:0 auto;background:#f3f4f6;border-radius:10px;overflow:hidden;cursor:grab;user-select:none;touch-action:none}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block;width:320px;height:320px}
.crop-mask{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 9999px rgba(0,0,0,.5) inset;border-radius:10px}
.crop-mask::before{content:"";position:absolute;left:32px;top:32px;width:256px;height:256px;border-radius:50%;box-shadow:0 0 0 9999px rgba(0,0,0,.55);border:2px solid #fff}
.crop-controls{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.crop-controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}
.crop-controls input[type=range]{flex:1}
.crop-controls .hint{font-size:12px;color:var(--muted);margin:0;text-align:center}
.profile-actions{display:flex;gap:8px}
#myAvatarBtn{display:inline-flex;vertical-align:middle}

/* ===== Profile dropdown card (header avatar menu) ===== */
.profile-menu-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.profile-trigger{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:24px;background:rgba(255,255,255,.10);transition:.15s;cursor:pointer;color:#fff;font-size:13px;font-weight:600;flex-shrink:0;white-space:nowrap}
.profile-trigger:hover{background:rgba(255,255,255,.18)}
.profile-trigger .pt-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.35);flex-shrink:0}
/* Force the inner avatar to fill the circular frame, regardless of the size class (xs/sm/md) it was rendered with. */
.profile-trigger .pt-avatar .avatar,
.profile-trigger .pt-avatar .avatar.xs,
.profile-trigger .pt-avatar .avatar.sm,
.profile-trigger .pt-avatar .avatar.lg{width:100%;height:100%;border:none;font-size:11px;background-size:cover;background-position:center;margin:0}
.profile-trigger .pt-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-trigger .pt-caret{width:13px;height:13px;opacity:.85;transition:transform .15s}
.profile-menu-wrap.open .profile-trigger{background:rgba(255,255,255,.22)}
.profile-menu-wrap.open .pt-caret{transform:rotate(180deg)}

.profile-card{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:#3a3f47;color:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.18);overflow:hidden;z-index:1200;opacity:0;pointer-events:none;transform:translateY(-6px) scale(.98);transition:opacity .15s,transform .15s}
.profile-menu-wrap.open .profile-card{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.profile-card .pc-hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px 18px;background:linear-gradient(180deg,#3a3f47,#363a41)}
.profile-card .pc-photo{width:108px;height:108px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.10);border:3px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
.profile-card .pc-photo .avatar{width:100%;height:100%;border:none;font-size:30px}
.profile-card .pc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.profile-card .pc-name{font-size:20px;font-weight:700;text-align:center;letter-spacing:-.01em}
.profile-card .pc-date{font-size:13px;color:rgba(255,255,255,.7);font-weight:500}
.profile-card .pc-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:20px;background:var(--accent);color:#fff;margin-top:2px}
.profile-card .pc-rows{padding:6px 8px;background:#2f3239}
.profile-card .pc-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:8px;background:transparent;color:#fff;font-size:13px;font-weight:600;text-align:left;transition:.12s;cursor:pointer;border:none}
.profile-card .pc-row:hover{background:rgba(255,255,255,.08)}
.profile-card .pc-row svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.profile-card .pc-foot{display:flex;gap:10px;padding:13px 16px;background:#2f3239;border-top:1px solid rgba(255,255,255,.08)}
.profile-card .pc-foot .pc-btn{flex:1;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;transition:.12s;border:none;display:flex;align-items:center;justify-content:center;gap:7px}
.profile-card .pc-foot .pc-btn.dark{background:#1a1b1f;color:#fff}
.profile-card .pc-foot .pc-btn.dark:hover{background:#0f1013}
.profile-card .pc-foot .pc-btn.danger{background:#e8332e;color:#fff}
.profile-card .pc-foot .pc-btn.danger:hover{background:#d62a25}
@media (max-width:560px){.profile-card{width:280px;right:-6px}}

/* ===== notification badge (shared by tasks / notifications / signatures) ===== */
.chat-badge{position:absolute;top:-5px;right:-5px;background:#e8332e;color:#fff;min-width:18px;height:18px;border-radius:9px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--brand);box-shadow:0 0 0 0 rgba(232,51,46,.5);animation:chatPulse 2s infinite}
@keyframes chatPulse{0%{box-shadow:0 0 0 0 rgba(232,51,46,.5)}70%{box-shadow:0 0 0 6px rgba(232,51,46,0)}100%{box-shadow:0 0 0 0 rgba(232,51,46,0)}}
.name-edit{border:none;background:none;cursor:pointer;color:var(--muted);font-size:12px;padding:0 2px;opacity:.6}
.name-edit:hover{opacity:1;color:var(--brand-2)}

/* ===== task assignments ===== */
.assign-btn{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;font-weight:700!important}
.task-tabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--line)}
.task-tabs button{border:none;background:none;padding:10px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.task-tabs button.on{color:var(--brand-2);border-bottom-color:var(--brand-2)}
.task-row{display:flex;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.task-row.st-completed{opacity:.72}
.t-pri{width:5px;border-radius:3px;align-self:stretch;flex-shrink:0}
.t-pri.p-high{background:#e8332e}.t-pri.p-normal{background:#e8a23a}.t-pri.p-low{background:#1c8c5a}
.t-main{flex:1;min-width:0}
.t-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t-trade{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--brand-2);cursor:pointer}
.t-trade:hover{text-decoration:underline}
.t-status{font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px}
.t-status.s-open{background:var(--blue-bg);color:var(--brand-2)}
.t-status.s-in_progress{background:var(--amber-bg);color:#b06f00}
.t-status.s-completed{background:var(--green-bg);color:#1c8c5a}
.t-pri-lbl{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.t-pri-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.t-pri-dot.p-high{background:var(--red)}.t-pri-dot.p-normal{background:var(--amber)}.t-pri-dot.p-low{background:var(--green)}
.t-instr{font-size:13px;color:var(--ink);margin-top:4px}
.t-meta{font-size:12px;color:var(--muted);margin-top:3px}
.t-remark{font-size:13px;color:var(--ink-soft);margin-top:5px;background:var(--green-bg);padding:6px 9px;border-radius:8px}
.t-remark .t-when{color:var(--muted);font-size:11px}
.t-actions{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;max-width:220px}
.mini-btn.go{background:var(--green-bg);color:#1c8c5a;border-color:#1c8c5a}
.task-pri{font-size:11px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink)}
/* Claim-flow pills + row states */
.task-pill{font-size:11px;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:9px;text-transform:uppercase;line-height:1.55;white-space:nowrap;border:1px solid transparent}
.task-pill.new{background:#eef6ff;color:#0a58ca;border-color:#bcd9fb}
.task-pill.mine{background:#e8f6ee;color:#1c8c5a;border-color:#b3e0c4}
.task-pill.taken{background:#f3f1ff;color:#5a48b3;border-color:#d4ccfb}
.task-row.is-auto{background:linear-gradient(180deg,rgba(13,110,253,.025) 0%,transparent 38px)}
.task-row.is-taken-other{opacity:.72}
.task-row.is-taken-other .t-actions{filter:saturate(.4)}
.as-deal-count{font-weight:700;font-size:13px;color:var(--ink);margin-bottom:6px}
.as-deal-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.as-chip{font-family:var(--mono);font-size:11px;background:var(--blue-bg);color:var(--brand-2);padding:3px 8px;border-radius:8px;font-weight:600}
.as-chip.more{background:var(--slate-bg);color:var(--muted)}
.as-people{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.as-person{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.as-person input{accent-color:var(--brand-2)}
.as-person .mi-code{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}

.t-pending{color:#b06f00;font-weight:700}
.t-took{color:#1c8c5a;font-weight:700}

/* spinner used for async buttons (Signatures send, etc.) */
@keyframes sy-spin{ to{ transform:rotate(360deg); } }
.sy-spin{ transform-origin:center; }

/* ===== TRS modal chrome ===== */
/* Default width sized to fit the full toolbar (Back + title + 7 buttons + close) on one row. Falls back to 98vw on smaller windows. */
.trs-modal{width:min(1320px,98vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.trs-toolbar{display:flex;gap:0;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.01);flex-wrap:nowrap;min-width:0}
/* Title pill sits inside the toolbar as the first section, divided from action sections. Same height + text size as buttons so the whole bar reads as ONE clean toolbar. */
.trs-toolbar .trs-title-pill{height:32px;display:inline-flex;align-items:center;padding:0 12px;font-size:13px;font-weight:700;letter-spacing:0;color:var(--ink);border-radius:7px;font-family:var(--mono,Menlo,Consolas,monospace);flex-shrink:0}
.trs-toolbar .trs-title-pill #trsTrade{margin-left:4px;font-weight:700;color:var(--ink)}
/* Toolbar floats to right edge; sizing controlled by single-row rule above. */
.trs-toolbar .btn{min-width:0;height:32px;padding:0 10px;font-size:13px;font-weight:600;border-radius:7px;white-space:nowrap;justify-content:center;border:none;box-shadow:none;display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.trs-toolbar .btn-ghost{background:transparent;color:var(--ink)}
.trs-toolbar .btn-ghost:hover{background:var(--blue-bg);color:var(--brand-2)}
/* Letter PDF / Legal PDF download buttons now match Save/Send/Letter/Legal (ghost style) for visual consistency */
.trs-toolbar .btn-brand{background:transparent;color:var(--ink);border:none}
.trs-toolbar .btn-brand:hover{background:var(--blue-bg);color:var(--brand-2)}
.trs-toolbar .trs-divider{width:1px;align-self:stretch;background:var(--line);margin:4px 3px;flex-shrink:0}
.trs-toolbar .trs-paper{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;flex-shrink:0}
.trs-toolbar .trs-paper select{height:24px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:0 6px;cursor:pointer}
.trs-toolbar .x{width:32px;height:32px;border-radius:7px;margin-left:2px;background:transparent;border:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.trs-toolbar .x:hover{background:var(--red-bg);color:var(--red)}
/* Adaptive label collapsing — keeps everything on ONE row even when the modal narrows. */
@media (max-width:1240px){
  .trs-toolbar .btn{padding:0 8px;font-size:12px}
  .trs-toolbar .trs-divider{margin:4px 2px}
  .trs-toolbar .trs-title-pill{padding:0 10px;font-size:12px}
}
@media (max-width:1080px){
  /* Hide dividers — buttons become tighter pills */
  .trs-toolbar .trs-divider{display:none}
  .trs-toolbar{gap:1px}
  .trs-toolbar .btn{padding:0 7px}
}
@media (max-width:960px){
  /* Hide labels on non-primary buttons; keep icon + tooltip. Title pill stays. */
  .trs-toolbar .btn .btn-lab{display:none}
  .trs-toolbar .btn{padding:0 7px;gap:0}
  .trs-toolbar .btn-ghost svg, .trs-toolbar .btn-brand svg{width:16px;height:16px}
}
@media (max-width:560px){
  .trs-toolbar .trs-title-pill{padding:0 6px;font-size:11px}
}
.trs-hint{font-size:12px;color:var(--muted);padding:6px 20px;border-bottom:1px solid var(--line-soft)}
.trs-body{overflow:auto;min-height:0;background:var(--stage-bg);padding:22px;display:flex;justify-content:center;align-items:flex-start}

.trs-title-in{flex:1;border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:13px;background:var(--panel);color:var(--ink);font-weight:600}
.trs-hint{display:flex;align-items:center;gap:10px}
.trs-hint-note{font-size:11px;color:var(--muted);white-space:nowrap}
.trs-page-pad{background:#fff;padding:34px 38px;box-shadow:0 6px 26px rgba(0,0,0,.3)}
.trs-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:.1s;border-radius:6px}
.trs-item:hover{background:var(--bg)}
.trs-item b{font-size:13px;color:var(--ink)}
.trs-item-meta{font-size:12px;color:var(--muted);margin-top:2px}
/* Shown when a capability grant could not be READ — a missing button because
   we don't know, not because the answer was no. See DB.capsNote. */
.trs-caps-warn,.eft-caps-warn{display:block;margin-top:10px;padding:8px 11px;border-radius:8px;
  background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.30);color:#9a5b06;
  font-size:12px;line-height:1.45}
.eft-caps-warn{display:inline-block;margin:0 8px 0 0;white-space:normal;max-width:420px}

.sg-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9px;margin-left:6px;vertical-align:middle}
.sg-sent{background:var(--blue-bg);color:var(--brand-2)}
.sg-partial{background:var(--amber-bg);color:#b06f00}
.sg-done{background:var(--green-bg);color:#1c8c5a}
.sg-bad{background:var(--red-bg);color:#c0392b}
.sign-note{font-size:12px;color:var(--muted);background:var(--blue-bg);padding:9px 12px;border-radius:8px;line-height:1.45}

.ss-row{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.ss-row .ssn{flex:1.1}.ss-row .sse{flex:1.4}
.ss-row input{border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:13px;background:var(--panel);color:var(--ink)}
.ss-num{font-size:11px;font-weight:700;color:var(--muted);width:14px;text-align:center}
.trs-sig-ctl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;border:1px solid transparent;border-radius:8px;padding:2px 4px}
.trs-sig-ctl.active{background:var(--blue-bg);border-color:color-mix(in srgb,var(--brand-2) 22%,transparent);color:var(--brand-2)}
.trs-sig-ctl.active>b{color:var(--brand-2)}
.trs-sig-count{min-width:14px;text-align:center;display:inline-block;color:var(--ink)}
.trs-clause-ctl{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.trs-clause-ctl > b{color:var(--ink)}
.trs-clause-trigger{display:inline-flex;align-items:center;gap:6px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:12px;cursor:pointer;min-width:140px;max-width:260px}
.trs-clause-trigger #trsClauseLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}
.trs-clause-trigger:hover{border-color:var(--brand-2);color:var(--brand-2)}
.trs-clause-trigger[aria-expanded="true"]{border-color:var(--brand-2);color:var(--brand-2)}
.trs-clause-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;min-width:220px;display:flex;flex-direction:column;gap:2px}
.trs-clause-menu[hidden]{display:none}
.trs-clause-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--ink);cursor:pointer}
.trs-clause-opt:hover{background:var(--blue-bg);color:var(--brand-2)}
.trs-clause-opt input[type=checkbox]{margin:0;cursor:pointer}
.trs-clause-block{margin-top:10px}
.trs-clause-block:empty{display:none}
.trs-clause-item{margin:4px 0;page-break-inside:avoid;break-inside:avoid;font-size:11px;line-height:1.45;text-align:justify}
/* T&C block (inside #trsSheet only) reduced to 10px for a compact, readable footer */
#trsSheet .trs-clause-item{font-size:11px;line-height:1.25}
#trsSheet .trs-clause-block{margin-top:14px}
.trs-clause-item + .trs-clause-item{margin-top:6px}
.trs-clause-label{font-weight:700;margin-right:4px}
.trs-clause-p{display:inline;margin:0}

.trs-pop{position:fixed;z-index:100000;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.25);max-height:280px;overflow-y:auto;min-width:210px;padding:4px}
.trs-pop .opt{padding:7px 13px;font-size:13px;color:var(--ink);cursor:pointer;border-radius:7px}
.trs-pop .opt:hover{background:var(--blue-bg);color:var(--brand-2)}
.trs-pop .opt.cur{font-weight:700;color:var(--brand-2)}
.trs-pop .dpop{padding:9px}
.trs-pop .dpop input[type=date]{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:13px;background:var(--panel);color:var(--ink);width:100%}
.trs-pop .dpop-btns{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
/* trs-pdf-hide: applied by trsMakePdf() right before html2canvas capture to drop
   non-essential financial rows when the sheet overflows one page. Removed in
   finally{} so the live editor view is never affected. */
.trs-pdf-hide{display:none !important}
/* "Rows" dropdown in the TRS toolbar (Rishi 2026-07-22): toggle the optional fee
   rows + add custom-named commission rows. Reuses the clause-menu visuals; the
   extra bits are the custom-row list + the name adder. */
.trs-rows-ctl{position:relative;display:inline-flex;align-items:center;gap:6px}
.trs-rows-menu{min-width:210px}
.trs-rows-sep{height:1px;background:var(--line);margin:5px 0}
.trs-rows-custom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 6px;font-size:12px}
.trs-rows-rm{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.trs-rows-rm:hover{color:var(--red)}
.trs-rows-add{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.trs-rows-add input{flex:1;min-width:0;font-size:12px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
/* Autocomplete popup for signer name/email in the Send-for-signature modal.
   Inherits .trs-pop visuals (border, shadow, panel bg) but uses a two-line
   option layout so name and email are both visible. */
.ss-pop{font-size:13px;max-height:300px;min-width:260px}
.ss-pop .opt{padding:8px 12px;display:block}
.ss-pop .opt:hover{background:var(--blue-bg);color:var(--brand-2)}
/* TRS salesperson names are chosen from the Agents Hub (2026-09-17). The pointer,
   the amber "not in the Hub" mark and the popover are editor-only — the PDF clone
   strips .tpick-agent / .tpick-warn, and print hides them. */
#trsSheet table.fin .tpick-agent{cursor:pointer;border-radius:4px;box-shadow:inset 0 -1px 0 var(--line)}
#trsSheet table.fin .tpick-agent:hover,#trsSheet table.fin .tpick-agent:focus-visible{background:var(--blue-bg);outline:none}
#trsSheet table.fin .tpick-agent.tpick-warn{background:#fdf3dc;box-shadow:inset 0 -2px 0 #e0a526}
@media print{ #trsSheet table.fin .tpick-agent{background:none!important;box-shadow:none!important} }
.trs-pop:has(.apick){max-height:none;overflow:visible;padding:0}
.trs-pop .apick{width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column}
.trs-pop .apick-q{margin:8px 8px 4px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--panel);color:var(--ink)}
.trs-pop .apick-list{max-height:240px;overflow-y:auto;padding:2px 4px}
.trs-pop .apick-opt{display:block;padding:7px 10px}
.trs-pop .apick-opt b{display:block;font-weight:600}
.trs-pop .apick-opt span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.trs-pop .apick-inact{color:#b42318;font-style:normal}
.trs-pop .apick-empty{padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.4}
.trs-pop .apick-foot{border-top:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.trs-pop .apick-row{display:flex;gap:6px;align-items:center}
.trs-pop .apick-free{flex:1;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;background:var(--panel);color:var(--ink)}
/* The trust ledger must balance on the TRS (2026-09-17): the in-editor pop-up and
   the Send-for-signature gate. Amber = a gap to fix, never an error colour. */
#trsGapPop{position:fixed;right:20px;bottom:20px;z-index:99990;width:min(380px,calc(100vw - 32px));background:var(--panel);color:var(--ink);border:1px solid #f0c36d;border-left:4px solid #d97706;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:12px 14px;font-size:13px}
#trsGapPop.tgap-in{animation:tgapIn .28s ease-out}
@keyframes tgapIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#trsGapPop.tgap-in{animation:none}}
@media (max-width:560px){#trsGapPop{right:16px;left:16px;bottom:16px;width:auto}}
@media print{#trsGapPop{display:none!important}}
#trsGapPop .tgap-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#trsGapPop .tgap-h b{flex:1;font-size:14px}
.tgap-ic{width:20px;height:20px;border-radius:50%;background:#d97706;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.tgap-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px}
.tgap-row{border-top:1px solid var(--line);padding:8px 0;display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.tgap-acct{font-weight:700}
.tgap-amt{font-weight:800;color:#b45309;font-variant-numeric:tabular-nums;white-space:nowrap}
.tgap-txt,.tgap-sub{grid-column:1/-1;line-height:1.45}
.tgap-sub{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
#trsGapPop .tgap-f{border-top:1px solid var(--line);padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}
#trsGapPop .tgap-f .mini-btn{white-space:nowrap;flex:none}
#trsSheet .tgap-hl{background:#fdecc8!important;box-shadow:inset 0 0 0 1px #e0a526;border-radius:3px}
#trsSheet .tgap-net{margin:6px 0 10px;padding:7px 10px;border:1px solid #f0c36d;border-left:4px solid #d97706;border-radius:8px;background:#fffaf0;color:#7c4a03;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
#trsSheet .tgap-net-n{color:#b45309}
@media print{#trsSheet .tgap-net{display:none!important}#trsSheet .tgap-hl{background:none!important;box-shadow:none!important}}
.tgap-gate{max-width:520px!important}
.tgap-gate .tgap-list{margin:-4px 0 12px}
.tgap-why{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);margin:0 0 14px}
.tgap-why input{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--panel);color:var(--ink)}
/* Ready to pay (2026-09-17): the check before a bank file is generated. */
.rtp-box{max-width:660px!important;max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.rtp-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:0 -4px 14px;padding:0 4px;min-height:0}
.rtp-card{border:1px solid var(--line);border-left:4px solid #16a34a;border-radius:10px;padding:10px 12px;background:var(--panel)}
.rtp-card.rtp-warn{border-left-color:#d97706}
.rtp-card.rtp-bad{border-left-color:#dc2626}
.rtp-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rtp-head b{font-size:14px;color:var(--ink)}
.rtp-badge{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:#dcfce7;color:#166534}
.rtp-warn .rtp-badge{background:#fef3c7;color:#92400e}
.rtp-bad .rtp-badge{background:#fee2e2;color:#991b1b}
.rtp-ref{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rtp-amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.rtp-items{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.rtp-items li{display:grid;grid-template-columns:14px 112px 1fr;gap:4px 8px;align-items:start;font-size:12.5px;line-height:1.45;color:var(--ink)}
.rtp-items li::before{content:'✓';color:#16a34a;font-weight:800}
.rtp-items li.rtp-warn::before{content:'!';color:#d97706}
.rtp-items li.rtp-bad::before{content:'✕';color:#dc2626}
.rtp-items li.rtp-ok{color:var(--muted)}
.rtp-lbl{font-weight:600}
.rtp-items li .mini-btn{grid-column:3;justify-self:start}
.rtp-actions{display:flex;justify-content:flex-end;margin-top:8px}
@media (max-width:560px){.rtp-items li{grid-template-columns:14px 1fr}.rtp-items li .rtp-lbl,.rtp-items li .rtp-txt,.rtp-items li .mini-btn{grid-column:2}}

.mng-sum{font-size:13px;color:var(--ink);padding:10px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f7faff 0%,#fafcfe 100%);border-radius:8px;margin-bottom:14px;position:sticky;top:0;z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.03)}
/* Recipient cards — grid layout that breathes at wider widths and stacks on narrow screens. */
.mng-recipients{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px;margin-bottom:6px}
.mng-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fdfefe;transition:.15s}
.mng-card:hover{border-color:var(--brand-2);box-shadow:0 1px 4px rgba(13,71,161,.06)}
.mng-card.is-signed{background:linear-gradient(180deg,#f4fbf6,#fdfefe);border-color:#cce7d6}
.mng-card.is-declined{background:linear-gradient(180deg,#fef4f4,#fdfefe);border-color:#f3c2c2}
.mng-card.is-pending{background:linear-gradient(180deg,#fffaf0,#fdfefe);border-color:#f1dba4}
/* Recipients TABLE (current layout) — matches audit trail styling */
.mng-recip{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px;table-layout:auto}
.mng-recip th{text-align:left;padding:7px 9px;background:#f7f9fc;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--line);white-space:nowrap}
.mng-recip td{padding:8px 9px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink)}
.mng-recip tr:last-child td{border-bottom:none}
.mng-recip tr.is-signed{background:#f7fbf8}
.mng-recip tr.is-declined{background:#fdf6f6}
.mng-recip tr.is-pending{background:#fffcf4}
.mng-recip .signer{display:flex;align-items:center;gap:9px;min-width:0}
.mng-recip .signer .nm{font-weight:700;color:var(--ink);font-size:13px;line-height:1.25;word-break:break-word}
.mng-recip .mail{font-family:var(--mono);font-size:12px;color:var(--ink-soft);word-break:break-all}
.mng-recip .when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:12px}
.mng-recip .reason{font-size:11px;color:#b91c1c;margin-top:2px;line-height:1.3;word-break:break-word}
.mng-recip col.c-signer{width:28%}
.mng-recip col.c-role{width:80px}
.mng-recip col.c-mail{width:24%}
.mng-recip col.c-stat{width:110px}
.mng-recip col.c-when{width:165px}
.mng-recip col.c-act{width:170px}
.mng-recip .role-pill{display:inline-block;padding:2px 7px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.mng-recip .role-pill.signer{background:#e7eefc;color:#1e40af}
.mng-recip .role-pill.approver{background:#ede9fe;color:#5b21b6}
.mng-recip .role-pill.cc{background:#f1ece4;color:#7a5a18}
.mng-recip .row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-start}
.mng-recip .row-actions .mini-btn{padding:3px 7px;font-size:11px;line-height:1.4}
.mng-recip .row-actions .mini-btn.danger{color:#b91c1c;border-color:#f3c2c2;background:#fef4f4}
.mng-recip .row-actions .mini-btn.danger:hover{background:#fdebeb}
.mng-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;letter-spacing:.02em}
.mng-av.sm{width:28px;height:28px;font-size:11px}
.mng-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mng-card-name{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25;word-break:break-word}
.mng-card-mail{font-size:12px;color:var(--muted);font-family:var(--mono);word-break:break-all;line-height:1.3}
.mng-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;text-align:right;min-width:0}
.mng-card-when{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mng-card-reason{font-size:11px;color:#b91c1c;max-width:200px;line-height:1.3}
.mng-card-actions{margin-top:6px;display:flex;justify-content:flex-end}
/* Legacy mng-row kept for backward compat with any other call sites. */
.mng-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.mng-mail{font-size:12px;color:var(--muted);font-family:var(--mono)}
.mng-st{font-size:13px;text-align:right;color:var(--ink)}
.mng-when{font-size:11px;color:var(--muted)}
/* Signing audit-trail table */
.mng-section-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-2);margin:14px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
.mng-trail{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:6px}
.mng-trail th{text-align:left;padding:7px 9px;background:#f7f9fc;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--line);white-space:nowrap}
.mng-trail td{padding:7px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink)}
.mng-trail tr:last-child td{border-bottom:none}
.mng-trail .when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:12px}
.mng-trail .who{font-weight:600;color:var(--ink);word-break:break-word}
.mng-trail .who-mail{font-size:11px;color:var(--muted);font-family:var(--mono);font-weight:500;margin-top:1px;word-break:break-all}
.mng-trail .detail{color:var(--ink-soft);font-size:12px;word-break:break-word;white-space:normal}
.mng-trail td.detail{color:var(--ink-soft);font-size:12px}
.mng-act{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.mng-act.sent{background:#eaf2ff;color:#1d4ed8}
.mng-act.opened{background:#fff4d6;color:#92670e}
.mng-act.signed{background:#e0f5e9;color:#166534}
.mng-act.declined{background:#fde2e2;color:#b91c1c}
.mng-act.bounced{background:#ffe2cc;color:#a04508}
.mng-act.voided{background:#ede2fb;color:#6b21a8}
.mng-act.completed{background:#d1fae5;color:#065f46;font-weight:700}
.mng-act.registered{background:#e0e7ff;color:#3730a3}
.mng-act.attached{background:#e0f2fe;color:#075985}
.mng-act.other{background:#eef0f4;color:var(--ink-soft)}
/* Make the audit-trail table sized to its container with sensible col widths so nothing clips. */
.mng-trail{table-layout:auto}
.mng-trail col.c-when{width:170px}
.mng-trail col.c-who{width:180px}
.mng-trail col.c-act{width:170px}
.mng-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px;font-style:italic}
.sg-latest{background:transparent;border:1px solid var(--brand-2);color:var(--brand-2)}
/* the Open TRS draft that follows the deal (2026-10-07) — a quiet mark, never a wide pill (Rishi: it widened the row) */
.sg-follow-dot{display:inline-block;font-size:10.5px;font-weight:700;color:#1d4ed8;margin-left:4px;vertical-align:middle;white-space:nowrap;cursor:help}
/* "Drafted by Sense" sticker (Rishi 2026-10-08): anything Sense made by itself wears it — TRS list, the sheet's title bar, Activity rows. */
.by-sense{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5b21b6;background:#f3e8ff;border:1px solid #d8b4fe;border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap;cursor:help}
.dm-act-avatar.by-sense-av{background:#5b21b6!important;color:#fff!important}

/* ===== Signing Status modal: redesigned head, overview, recipients, timeline ===== */
/* Modal-head chip strip: shows trade no + envelope title + status pill next to the H3. */
#trsMngScrim .modal-head h3{flex-shrink:0}
.mng-head-meta{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow:hidden;padding-left:4px}
.mng-h-trade{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand-2);background:var(--blue-bg,#eaf2ff);padding:3px 8px;border-radius:6px;letter-spacing:.02em;flex-shrink:0;white-space:nowrap}
.mng-h-title{font-size:13px;color:var(--ink-soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.mng-h-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;flex-shrink:0;border:1px solid transparent}
.mng-h-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.mng-h-chip.ok  {background:#e0f5e9;color:#166534;border-color:#cce7d6}
.mng-h-chip.go  {background:#eaf2ff;color:#1d4ed8;border-color:#cfddf7}
.mng-h-chip.wait{background:#fff4d6;color:#92670e;border-color:#f1dba4}
.mng-h-chip.bad {background:#fde2e2;color:#b91c1c;border-color:#f3c2c2}
.mng-h-chip.mute{background:#eef0f4;color:#475569;border-color:var(--line)}
.mng-loading{display:flex;align-items:center;gap:12px;padding:24px 18px;color:var(--ink-soft);font-size:13px}
.mng-spinner{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--brand-2);border-radius:50%;animation:mngspin .8s linear infinite}
@keyframes mngspin{to{transform:rotate(360deg)}}

/* Overview: 4 stat tiles + progress bar replace the dense one-line summary. */
.mng-overview{padding:14px 16px 16px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#fbfcfe 0%,#fdfefe 100%);margin-bottom:14px;position:sticky;top:0;z-index:3}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:12px}
.stat-tile{padding:10px 12px;background:#fff;border:1px solid var(--line-soft);border-radius:8px;min-width:0}
.stat-val{font-size:20px;font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-val .of{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.stat-val.ok  {color:#166534}
.stat-val.go  {color:#1d4ed8}
.stat-val.wait{color:#92670e}
.stat-val.bad {color:#b91c1c}
.stat-val.mute{color:var(--muted)}
.stat-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:4px}
.mng-progress{position:relative;height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.mng-progress-bar{height:100%;background:linear-gradient(90deg,var(--brand-2,#1a6fb0),#22a06b);border-radius:999px;transition:width .35s ease}
.mng-progress-cap{position:absolute;right:0;top:12px;font-size:11px;color:var(--muted);font-weight:600}
.mng-banner{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;border:1px solid transparent}
.mng-banner.ok{background:#e0f5e9;color:#065f46;border-color:#cce7d6}
.mng-banner.danger{background:#fde2e2;color:#b91c1c;border-color:#f3c2c2}
.mng-banner.warn{background:#fdf3df;color:#8a5b0e;border-color:#f0dcae}
.mng-section-count{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:600;font-size:11px;margin-left:6px}

/* Recipients table: order #, two-line name+email, dot-based status, monochrome row actions. */
.mng-recip col.c-ord{width:40px}
.mng-recip col.c-signer{width:auto}
.mng-recip col.c-role{width:84px}
.mng-recip col.c-stat{width:170px}
.mng-recip col.c-when{width:140px}
.mng-recip col.c-act{width:200px}
.mng-recip th.th-ord{text-align:center}
.mng-recip td.c-ord{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.ord-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink-soft);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.mng-recip tr.is-signed .ord-num{background:#cce7d6;color:#166534}
.mng-recip tr.is-declined .ord-num{background:#f3c2c2;color:#b91c1c}
.mng-recip tr.is-pending .ord-num{background:#f1dba4;color:#92670e}
.mng-recip .nm-block{min-width:0;display:flex;flex-direction:column;gap:1px}
.mng-recip .nm-l1{font-weight:700;color:var(--ink);font-size:13px;line-height:1.25;word-break:break-word}
.mng-recip .nm-l2{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all;line-height:1.3}
.mng-recip .when-cell{white-space:nowrap;font-variant-numeric:tabular-nums}
.mng-recip .when-main{font-size:12px;color:var(--ink);font-weight:600}
.mng-recip .when-main.mute{color:var(--muted);font-weight:500}
.mng-recip .when-sub{font-size:11px;color:var(--muted);margin-top:1px}
.mng-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);font-weight:600;white-space:nowrap}
.mng-st .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.mng-st.ok  {color:#166534}
.mng-st.go  {color:#1d4ed8}
.mng-st.wait{color:#92670e}
.mng-st.bad {color:#b91c1c}
.mng-st.mute{color:var(--muted)}
.row-act{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-weight:600;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:.12s;white-space:nowrap;line-height:1}
.row-act:hover{color:var(--ink);border-color:var(--ink-soft);background:#fafbfd}
.row-act svg{flex-shrink:0;opacity:.85}
.row-act.danger{color:#b91c1c;border-color:#f3c2c2}
.row-act.danger:hover{background:#fef4f4;border-color:#e8a3a3}
.mng-recip .row-actions{display:flex;gap:5px;flex-wrap:nowrap;justify-content:flex-start}
.mute{color:var(--muted)}

/* Vertical timeline replaces the audit-trail table. Newest event on top. */
.mng-timeline{list-style:none;margin:0;padding:4px 0 6px;position:relative}
.mng-timeline::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--line);border-radius:1px}
.tl-item{position:relative;display:flex;gap:12px;padding:6px 0 12px;align-items:flex-start}
.tl-item:last-child{padding-bottom:2px}
.tl-dot{position:relative;z-index:1;flex-shrink:0;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--line);color:var(--muted)}
.tl-dot svg{width:13px;height:13px}
.tl-dot.ok  {border-color:#22a06b;color:#166534;background:#e0f5e9}
.tl-dot.go  {border-color:#1d4ed8;color:#1d4ed8;background:#eaf2ff}
.tl-dot.wait{border-color:#92670e;color:#92670e;background:#fff4d6}
.tl-dot.bad {border-color:#b91c1c;color:#b91c1c;background:#fde2e2}
.tl-dot.mute{border-color:var(--line);color:var(--muted);background:#fff}
.tl-body{flex:1;min-width:0;padding-top:2px}
.tl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tl-action{font-size:13px;font-weight:700;color:var(--ink)}
.tl-action.signed,.tl-action.completed{color:#166534}
.tl-action.declined,.tl-action.bounced{color:#b91c1c}
.tl-action.voided{color:#6b21a8}
.tl-action.sent{color:#1d4ed8}
.tl-action.opened{color:#92670e}
.tl-when{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
.tl-meta{margin-top:3px;font-size:12px;color:var(--ink-soft)}
.tl-who{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tl-mail{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* Footer: secondary actions group on left, primary Done on right. */
#trsMngFoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mng-foot-secondary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.mng-foot-primary{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.mng-foot-secondary .btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);background:transparent;border-radius:7px;cursor:pointer;transition:.12s;line-height:1.2}
.mng-foot-secondary .btn-ghost:hover{color:var(--ink);border-color:var(--ink-soft);background:#fafbfd}
.mng-foot-secondary .btn-ghost.danger{color:#b91c1c;border-color:#f3c2c2}
.mng-foot-secondary .btn-ghost.danger:hover{background:#fef4f4;border-color:#e8a3a3}
.mng-foot-secondary .btn-ghost svg{flex-shrink:0;opacity:.85}
.mng-foot-primary .btn-pri{padding:7px 16px;font-size:13px;font-weight:700}

.acct-mail{font-size:11px;color:var(--muted);cursor:pointer;margin-top:1px}
.acct-mail:hover{color:var(--brand-2)}

.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{width:100%;padding-right:38px}
.pw-eye{position:absolute;right:7px;background:none;border:none;cursor:pointer;font-size:15px;opacity:.55;padding:2px}
.pw-eye:hover{opacity:1}

/* ===== 5-Tab Deal Modal ===== */
.deal-modal{border-radius:var(--radius-card);overflow:hidden}
.dm-head{padding:20px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dm-head-main{min-width:0;flex:1}
.dm-tcf{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand-2);letter-spacing:.04em;margin-bottom:4px}
.dm-title{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2;margin-bottom:6px}
.dm-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.dm-status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:700}
.dm-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dm-status-firm{background:var(--green-bg);color:var(--green)}
.dm-status-disbursed{background:var(--green-bg);color:var(--green)}
.dm-status-conditional{background:var(--amber-bg);color:var(--amber)}
.dm-status-fell{background:var(--red-bg);color:var(--red)}
.dm-status-closed{background:var(--slate-bg);color:var(--ink-soft)}
.dm-subtitle{font-size:13px;color:var(--muted)}
.dm-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:8px}
.dm-close-btn{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg);transition:.15s}
.dm-close-btn:hover{background:var(--line);color:var(--ink)}
.dm-tabs{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--line);margin-top:12px}
.dm-tab{padding:10px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:all .12s;background:none;border-top:none;border-left:none;border-right:none}
.dm-tab:hover{color:var(--ink);background:var(--bg)}
.dm-tab.on{color:var(--brand-2);border-bottom-color:var(--brand-2)}
.dm-panel{display:none}
.dm-panel.on{display:block}
.dm-body{height:calc(90vh - 160px);overflow-y:scroll;scrollbar-gutter:stable}

/* Overview definition list */
.dm-dlist{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dm-dlist-section{margin-bottom:16px;grid-column:1/-1}
.dm-dlist-section h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-2);padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line-soft);display:flex;align-items:baseline;gap:8px}
.dm-sec-ct{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--muted);text-transform:none}
.dm-dl-row{padding:7px 0;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px}
.dm-dl-row .dl-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dm-dl-row .dl-value{font-size:13px;color:var(--ink);font-weight:500}
.dm-dl-row .dl-value.empty-v{color:var(--faint);font-style:italic;font-weight:500}

/* Deal task rows */
.dm-task-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line-soft)}
.dm-task-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand-2);cursor:pointer;flex-shrink:0}
.dm-task-main{flex:1;min-width:0}
.dm-task-title{font-size:13px;color:var(--ink);font-weight:500}
.dm-task-row.done .dm-task-title{text-decoration:line-through;color:var(--muted)}
.dm-task-row.is-taken-other{opacity:.72}
.dm-task-meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:8px}
.dm-task-trade{font-family:var(--mono);font-weight:700;color:var(--brand-2);font-size:11px}
.dm-task-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9px}
.dm-task-badge.high{background:var(--red-bg);color:var(--red)}
.dm-task-badge.normal{background:var(--amber-bg);color:var(--amber)}
.dm-task-badge.low{background:var(--green-bg);color:var(--green)}

/* Activity feed */
.dm-act-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.dm-act-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}
.dm-act-body{flex:1;min-width:0}
.dm-act-text{font-size:13px;color:var(--ink-soft);line-height:1.4}
.dm-act-text b{color:var(--ink);font-weight:700}
.dm-act-text .dm-act-ref{font-family:var(--mono);font-weight:700;color:var(--brand-2);font-size:12px}
.dm-act-time{font-size:11px;color:var(--muted);margin-top:2px}

/* Attachment rows */
.dm-att-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-soft);border-radius:9px;margin-bottom:8px;transition:.12s}
.dm-att-row:hover{border-color:var(--brand-2);background:var(--blue-bg)}
.dm-att-icon{width:36px;height:36px;border-radius:8px;background:var(--blue-bg);color:var(--brand-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dm-att-icon svg{width:18px;height:18px}
.dm-att-main{flex:1;min-width:0}
.dm-att-name{font-size:13px;font-weight:600;color:var(--ink)}
.dm-att-meta{font-size:11px;color:var(--muted);margin-top:1px}
.dm-att-dl{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg);border:1px solid var(--line);cursor:pointer;transition:.12s;flex-shrink:0}
.dm-att-dl:hover{background:var(--brand-2);color:#fff;border-color:var(--brand-2)}
.dm-att-dl svg{width:15px;height:15px}
/* Delete lives in the class, not an inline style, so the armed state below can
   override it without !important. Two-tap arm (see dmDeleteAttachment): the
   button grows into a labelled confirm, which is why the width is auto here. */
.dm-att-del{color:var(--red);background:var(--red-bg);border-color:var(--red)}
.dm-att-del:hover{background:var(--red);color:#fff;border-color:var(--red)}
.dm-att-del.arm{width:auto;padding:0 10px;background:var(--red);color:#fff;border-color:var(--red);
  font-size:11.5px;font-weight:700;letter-spacing:.01em}
.dm-att-del:disabled{opacity:.55;cursor:not-allowed}
/* Removed documents — collapsed by default so the daily view stays clean, and
   struck through only once you ask to see them. The file is still in Dropbox,
   Google and Supabase, so the name stays clickable: you can read what you took
   out before deciding to put it back. */
.dm-att-gone{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:8px}
.dm-att-gone>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);
  list-style:none;padding:5px 2px;user-select:none}
.dm-att-gone>summary::-webkit-details-marker{display:none}
.dm-att-gone>summary::before{content:'▸ ';color:var(--faint)}
.dm-att-gone[open]>summary::before{content:'▾ '}
.dm-att-gone>summary:hover{color:var(--ink-soft)}
.dm-att-gonetbl{margin-top:4px;opacity:.72}
.dm-att-goneName{text-decoration:line-through;color:var(--muted)!important}
.dm-att-goneName:hover{color:var(--ink-soft)!important}
.dm-att-goneMeta{font-size:11.5px;color:var(--muted)}
.dm-att-restore,.dm-att-purge{width:auto;padding:0 10px;font-size:11.5px;font-weight:600}
.dm-att-purge{color:var(--red);border-color:var(--red-bg)}
.dm-att-purge:hover{background:var(--red);color:#fff;border-color:var(--red)}
.dm-att-purge.arm{background:var(--red);color:#fff;border-color:var(--red)}
/* attachments as a table (Rishi 2026-07-21) */
.dm-att-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dm-att-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:7px 10px;border-bottom:1px solid var(--line)}
.dm-att-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);white-space:nowrap}
.dm-att-table td.dm-att-doc{white-space:normal;min-width:180px}
.dm-att-table tr:hover td{background:var(--blue-bg)}
.dm-att-open{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--brand-2);cursor:pointer;text-align:left}
.dm-att-open:hover{text-decoration:underline}
.dm-att-ext{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-soft);font-size:10.5px;font-weight:600;color:var(--muted)}
.dm-att-acts{display:flex;gap:6px;justify-content:flex-end}
/* drag-drop upload zone (Rishi 2026-07-21) */
.dm-attdrop{margin-top:12px;border:1.5px dashed var(--line);border-radius:12px;background:var(--surface-2);padding:20px 16px;text-align:center;cursor:pointer;transition:.15s}
.dm-attdrop:hover{border-color:var(--brand-2);background:var(--blue-bg)}
.dm-attdrop.drag{border-color:var(--brand-2);background:var(--blue-bg);box-shadow:0 0 0 3px var(--brand-50)}
.dm-attdrop-main{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.dm-attdrop-main svg{width:30px;height:30px;color:var(--brand-2);opacity:.85}
.dm-attdrop-t{font-size:13.5px;color:var(--ink-soft)}
.dm-attdrop-sub{font-size:12px;color:var(--muted)}
.dm-attdrop-link{color:var(--brand-2);font-weight:600;background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;font:inherit}
.dm-attdrop-link:hover{text-decoration:underline}
/* paste-a-link row */
.dm-atturl{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);display:flex;flex-direction:column;gap:9px;max-width:560px}
.dm-atturl[hidden]{display:none!important}
.dm-atturl-row{display:flex;align-items:center;gap:8px}
.dm-atturl-row .dm-atturl-u{flex:1 1 auto;min-width:0}
.dm-atturl-row .dm-atturl-n{flex:0 1 190px;min-width:0}
.dm-atturl-x{flex:none}
/* multi-file naming list */
.dm-attstage{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.dm-attstage[hidden]{display:none!important}
.dm-attstage-hd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dm-attstage-row{display:flex;align-items:center;gap:10px}
.dm-attstage-fmeta{flex:0 1 190px;min-width:0;display:flex;flex-direction:column}
.dm-attstage-fmeta b{font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-attstage-fmeta span{font-size:11px;color:var(--muted)}
.dm-attstage-name{flex:1 1 auto;min-width:0}
/* attach-first naming panel (legacy — kept for any older reference) */
.dm-attpick{margin-top:12px;padding:14px;border:1px dashed var(--line);border-radius:11px;background:var(--surface-2);display:flex;flex-direction:column;gap:9px;max-width:460px}
.dm-attpick[hidden]{display:none!important}
.dm-attpick-file{display:flex;align-items:center;gap:10px}
.dm-attpick-fmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.dm-attpick-fmeta b{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-attpick-fmeta span{font-size:11px;color:var(--muted)}
.dm-attpick-lbl{font-size:11px;font-weight:600;color:var(--muted)}
.dm-attpick-acts{display:flex;gap:8px;justify-content:flex-end}
/* in-app document viewer popup — above every modal */
.docview-scrim{position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px}
.docview-scrim.open{display:flex}
.docview{background:var(--panel);border-radius:14px;box-shadow:var(--shadow-lg);width:min(980px,96vw);height:min(760px,92vh);display:flex;flex-direction:column;overflow:hidden}
.docview-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.docview-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docview-body{flex:1;min-height:0;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:auto}
.docview-frame{width:100%;height:100%;border:none;background:#fff}
.docview-img{max-width:100%;max-height:100%;object-fit:contain}
.docview-wait{color:var(--muted);font-size:13px;padding:40px}
.docview-nopv{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px;text-align:center}
html.phone-mode .docview-scrim{padding:8px}
html.phone-mode .docview{width:100%;height:96vh}

/* Note rows */
.dm-note-row{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft);position:relative}
.dm-note-row:last-child{border-bottom:none}
.dm-note-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;flex-shrink:0}
.dm-note-body{flex:1;min-width:0}
.dm-note-header{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.dm-note-name{font-size:13px;font-weight:700;color:var(--ink)}
.dm-note-time{font-size:11px;color:var(--muted)}
.dm-note-text{font-size:13px;color:var(--ink-soft);line-height:1.5}
.dm-note-del{position:absolute;top:10px;right:0;opacity:0;transition:.12s;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--red);background:var(--red-bg);cursor:pointer;border:none}
.dm-note-row:hover .dm-note-del{opacity:1}


/* ---- TRS print sheet (was id=trsStyles, never referenced via ID) ----
   TYPOGRAPHY SYSTEM (ported from trs-widthfill-mockup iteration 4, 2026-06-26):
     - Single BODY size (11.5px) for all field labels, values, fee cells, section
       headers, footer. Hierarchy comes from WEIGHT and COLOR, not size.
     - Labels: weight 700 (bold). Values (.ti): weight 400 (regular). Same size.
       Only labels carry weight; every filled-in value renders light per client ask.
     - Auto-shrink for fee table is handled by trsAutoFit() ranks (fit-s/xs/xxs)
       which shrink ALL cells in lockstep so the table reads as one size.
     - Trade#/MLS# big-line keeps a small bump (12px) but no longer at 13px which
       was visibly larger than every other label on the sheet.
     - Branded header (square yards logo, company name) stays larger by design.
   Do NOT reintroduce mixed sizes (11.5 / 12 / 13) inside the body region. */
#trsSheet{width:980px;flex-shrink:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.3;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#trsSheet *{box-sizing:border-box}
#trsSheet, #trsSheet *{color:var(--ink)}
/* Values: same size as labels, lighter weight */
#trsSheet .ti{display:inline-block;border-bottom:1px solid #666;font-size:inherit;font-weight:500;color:var(--ink);padding:0 3px;min-width:26px;outline:none;white-space:pre-wrap;word-break:break-word;vertical-align:bottom}
#trsSheet .ti.ti-locked{background:rgba(0,0,0,.04);cursor:not-allowed;color:#333}
#trsSheet .ti:focus{background:#f2f2f2}
#trsSheet .tsel,#trsSheet .tdate{cursor:pointer}
#trsSheet .tsel:hover,#trsSheet .tdate:hover{background:#f2f2f2}
#trsSheet .ta{display:block;width:100%;border:1px solid #555;border-radius:0;min-height:30px;padding:3px 6px;font-size:inherit;font-weight:500;white-space:pre-wrap}
#trsSheet .tc{display:block;width:100%;border-bottom:none;text-align:center;min-width:0;padding:0 2px}
#trsSheet .tck{cursor:pointer;font-size:13px;user-select:none;margin-right:3px}
#trsSheet .trs-hd{display:flex;align-items:center;gap:22px;margin-bottom:4px}
#trsSheet .sylogo{flex-shrink:0;display:flex;align-items:flex-start;gap:7px}
#trsSheet .sylogo .sq{width:15px;height:15px;background:#000;margin-top:5px}
#trsSheet .sylogo .wm{font-weight:700;font-size:30px;line-height:.92;letter-spacing:-.5px;color:var(--ink)}
#trsSheet .trs-titles{flex:1;text-align:center}
#trsSheet .trs-co{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:1.2px}
#trsSheet .trs-doc{font-size:13px;font-weight:700;color:var(--ink);margin-top:1px;letter-spacing:2.5px}
#trsSheet .trs-rule{height:2px;border-top:3px solid #000;border-bottom:1px solid #000;margin:5px 0 8px}
#trsSheet .ln{display:flex;align-items:flex-end;gap:6px;margin:2.6px 0;font-size:12px}
#trsSheet .ln b{font-weight:700;white-space:nowrap;font-size:inherit}
/* Trade#/MLS# get a SMALL prominence bump only — was 13px (visibly larger than
   every other label); now 12px label + value, same as section headers. */
#trsSheet .ln.big-line{margin:4px 0;font-size:12px}
#trsSheet .ln.big-line b{font-size:12px}
#trsSheet .ln.big-line .ti{font-size:12px;font-weight:500}
#trsSheet .grow{flex:1}
#trsSheet .boxes2{display:flex;gap:10px;margin:9px 0}
#trsSheet .pbox{flex:1;border:1.4px solid #000;padding:6px 9px}
/* Section header (SELLER / BUYER / OUTSIDE BROKERAGE / REFERRAL BROKERAGE) */
#trsSheet .pbox h4{margin:0 0 4px;font-size:12px;font-weight:700}
#trsSheet .obox{border:1.4px solid #000;padding:6px 9px;margin:9px 0}
#trsSheet table.fin{width:100%;border-collapse:collapse;margin:9px 0;table-layout:fixed}
/* ── TRS v2 money tables (deposits in / trust disposition & commission in) ──
   Deliberately NOT class .fin — every single-table selector (EFT wiring, fin
   sync, autofit) assumes ONE table.fin per sheet. Same visual language. */
#trsSheet table.trsv2{width:100%;border-collapse:collapse;margin:5px 0 9px;table-layout:fixed}
#trsSheet table.trsv2 th,#trsSheet table.trsv2 td{border:1.2px solid #000;padding:3.2px 5px;font-size:12px;text-align:left;vertical-align:middle;background:#fff;color:var(--ink);word-break:break-word;overflow-wrap:anywhere}
#trsSheet table.trsv2 th{font-weight:700;border-bottom-width:2px;background:#f8f9fa;font-size:11px}
#trsSheet table.trsv2 .ti,#trsSheet table.trsv2 .tdate,#trsSheet table.trsv2 .tsel{font-size:inherit;line-height:1.22;white-space:normal;display:inline-block;width:100%;box-sizing:border-box;border-bottom:none;padding:0}
#trsSheet table.trsv2 .tck{margin-right:2px}
#trsSheet .trsv2-cap{margin-top:11px}
#trsSheet .trsv2-cap b{font-size:11.5px;letter-spacing:.02em}
#trsSheet .trsv2-sub{font-size:10px;color:#777}
/* The instalment number, which is the ONLY thing pairing a COLLECTION line to
   its INVOICED line. It is the row's position, not a stored field — so it must
   not read as something you can type into: no contenteditable, muted, centred,
   and never carrying the ✕ (that lives on the last cell of the collection row,
   where it deletes the whole instalment from both tables). */
#trsSheet table.trsv2 .trsv2-sn{text-align:center;color:#8a8f98;font-variant-numeric:tabular-nums;background:#fbfbfc}
/* Basis cell (pre-con COMMISSION RECEIVED): the number FIRST, then the Flat/%
   picker, so a percentage basis reads "4%" and not "% 4" (Rishi 2026-08-04).
   Both size to content and sit left, so "Flat" and "4%" start at the same edge.
   Laid out as a flex row because the 100%-wide table .ti rule would otherwise
   stack them onto two lines and grow the row for a two-character value. */
#trsSheet .trsv2-basis{display:flex;align-items:center;gap:0;width:100%}
#trsSheet .trsv2-basis>.tsel{flex:0 0 auto;width:auto;min-width:auto}
#trsSheet .trsv2-bval{display:flex;align-items:center;flex:0 0 auto;min-width:0}
/* Hugs its digits so "4%" is one figure with no gap, and starts at the same
   left edge as a "Flat" row. Empty it still needs somewhere to click — but
   only while empty, or the gap comes back. */
#trsSheet .trsv2-bval>.ti{flex:0 0 auto;width:auto;min-width:0;text-align:left}
#trsSheet .trsv2-bval>.ti:empty{min-width:14px}

/* ── ONE alignment for the whole v2 sheet (Rishi 2026-08-04: "some fields are
   showing middle, left or right… in like uniformity"). Every field on a v2
   sheet reads from the left edge of its cell: the two money tables already did,
   the distribution table inherited centring from v1. Scoped to v2 ON PURPOSE —
   v1 sheets are finished documents (many of them signed), and re-aligning them
   would change how an existing record prints. */
#trsSheet[data-layout="v2"] table.fin th,
#trsSheet[data-layout="v2"] table.fin td,
#trsSheet[data-layout="v2"] table.fin td.fin-num,
#trsSheet[data-layout="v2"] table.fin td.fin-num .tc,
#trsSheet[data-layout="v2"] table.fin td.fin-num .tdate,
#trsSheet[data-layout="v2"] table.fin .tcm,
#trsSheet[data-layout="v2"] table.fin .tch,
#trsSheet[data-layout="v2"] table.fin .tcc{text-align:left}
/* ＋ Add deposit / ＋ Add movement — editor-only control, never printed/captured */
#trsSheet tr.addrow td{border:1px dashed #9aa6bb;background:#fbfcfe;color:#1e3a6e;cursor:pointer;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 8px;text-align:left}
#trsSheet tr.addrow td:hover{background:#f2f6fd}
@media print{ #trsSheet tr.addrow{display:none!important} }
/* ✕ delete-row control (v2 money tables) — editor-only; trsMakePdf's capture-hide
   list + the iframe clone strip remove it from every PDF (html2canvas ignores
   @media print, so the print rule below is belt-and-braces only). */
/* ⚠ OUT OF FLOW, deliberately. The `.ti` inside a v2 table cell is width:100%,
   so a floated ✕ has nowhere to sit and drops onto a second line — that one row
   then prints TALLER than its neighbours (the "not in symmetry" fault). Absolute
   also means the PDF is unaffected: the button is hidden for the capture and
   leaves no reserved gap behind it. */
#trsSheet table.trsv2 td{position:relative}
#trsSheet .trsv2-del{position:absolute;right:3px;top:50%;transform:translateY(-50%);padding:0 4px;font-size:10px;font-weight:700;line-height:1.4;color:#b34a4a;border:1px solid #d8b3b3;border-radius:4px;background:#fdf6f6;cursor:pointer;user-select:none}
#trsSheet .trsv2-del:hover{background:#f6dede;color:#8f2f2f}
@media print{ #trsSheet .trsv2-del{display:none!important} }
/* Pre-con Salesperson rows (2026-10-06): the row-1 choice and the "suggested"
   tag and the ✕ all sit in the Description cell (the Cheque # cell belongs to
   the EFT chip). All editor-only — the clone strip and the capture-hide list
   remove them, print CSS is belt-and-braces. */
#trsSheet table.fin td{position:relative}
#trsSheet .trsv2-sp1pick{display:inline-block;margin-left:6px;padding:0 6px;font-size:10px;font-weight:700;line-height:1.5;color:var(--brand,#14315e);border:1px solid #c7d2e6;border-radius:999px;background:#f3f6fc;cursor:pointer;white-space:nowrap;vertical-align:middle}
#trsSheet .trsv2-sp1pick:hover{background:#e6edf9}
#trsSheet .trsv2-sugg{display:inline-block;margin-left:6px;padding:0 6px;font-size:9.5px;font-weight:700;line-height:1.5;color:#8a5a00;border:1px dashed #e0a526;border-radius:999px;background:#fdf3dc;white-space:nowrap;vertical-align:middle}
@media print{ #trsSheet .trsv2-sp1pick,#trsSheet .trsv2-sugg{display:none!important} }
/* Fee-table cells: BODY-size (11.5px) by default, same as the rest of the sheet */
#trsSheet table.fin th,#trsSheet table.fin td{border:1.2px solid #000;padding:2.5px 5px;font-size:12px;text-align:center;vertical-align:middle;background:#fff;color:var(--ink);word-break:break-word;overflow-wrap:anywhere;min-height:0;hyphens:auto}
#trsSheet table.fin td{height:auto}
#trsSheet table.fin .ti, #trsSheet table.fin .tc, #trsSheet table.fin .tdate{font-size:inherit;line-height:1.22;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
/* Per-cell font shrink ranks assigned by trsAutoFit() — baseline-relative (-1, -2, -3 px)
   so the table reads as one size even after auto-shrink. */
#trsSheet table.fin td.fit-s{font-size:11px}
#trsSheet table.fin td.fit-xs{font-size:11px}
#trsSheet table.fin td.fit-xxs{font-size:11px;letter-spacing:-0.1px}
#trsSheet table.fin th{font-weight:700;border-bottom-width:2px;background:#f8f9fa}
#trsSheet table.fin td:first-child{text-align:left;font-weight:700}
#trsSheet table.fin td:nth-child(2) .tc{text-align:left}
#trsSheet table.fin td.fin-num,#trsSheet table.fin td.fin-num .tc,#trsSheet table.fin td.fin-num .tdate{text-align:center}
#trsSheet table.fin td.fin-total .tc{font-weight:500;color:#0c4a78}
#trsSheet table.fin .tcm{text-align:center;font-variant-numeric:tabular-nums}
#trsSheet table.fin .tch{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
#trsSheet table.fin .tch .hst-ph{color:var(--faint);font-weight:500}
#trsSheet table.fin .tch .hst-sep{white-space:pre}
#trsSheet table.fin .tch .hst-rt{color:var(--ink-soft);font-weight:500}
/* Cheque # (last column): keep EFT numbers on ONE line — without this the
   generic break-word rule wraps "EFT00037" mid-token into two rows. nowrap
   makes the overflow measurable so trsAutoFit shrinks the font instead; its
   last-resort inline white-space:normal (set on the td) still wins over this
   and allows a wrap only when even the smallest size can't fit. */
#trsSheet table.fin td:last-child{white-space:nowrap}
#trsSheet table.fin td:last-child .tcc{white-space:inherit}
#trsSheet table.fin .tcc{text-align:center;font-family:var(--mono)}
/* EFT ⇄ TRS: "＋ EFT #" assign chip inside the Cheque # cell (editor only —
   stripped from the signed-PDF clone in trsMakePdf + hidden in print). */
#trsSheet table.fin td:last-child .eft-asgn{display:inline-block;cursor:pointer;font-family:var(--sans,system-ui);
  font-size:9px;font-weight:800;letter-spacing:.02em;color:#1d4ed8;background:#e8f0ff;border:1px solid #b9d0f7;
  border-radius:6px;padding:2px 6px;white-space:nowrap;user-select:none;line-height:1.3}
#trsSheet table.fin td:last-child .eft-asgn:hover{background:#d7e6ff;border-color:#8fb4f0}
/* Pending mark — the number is assigned only when the TRS goes out for signing */
#trsSheet table.fin td:last-child .eft-asgn.eft-asgn-pend{color:#92600a;background:#fdf3dc;border-color:#ecd39a}
#trsSheet table.fin td:last-child .eft-asgn.eft-asgn-pend:hover{background:#fae9c2;border-color:#dfbe75}
@media print{ .eft-asgn{display:none!important} }
/* Assign popover */
.eft-asgn-pop{position:fixed;z-index:100050;min-width:210px;max-width:250px;background:var(--card,#fff);
  border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 34px rgba(13,27,42,.22);padding:10px;font-size:13px}
.eft-asgn-pop .eap-h{font-size:11.5px;color:var(--muted);line-height:1.5;padding:2px 4px 9px;border-bottom:1px solid var(--line);margin-bottom:8px}
.eft-asgn-pop .eap-h b{color:var(--ink)}
.eft-asgn-pop .eap-opt{display:block;width:100%;text-align:left;background:var(--surface-2,#f5f7fb);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;margin-bottom:6px}
.eft-asgn-pop .eap-opt:hover{border-color:var(--brand,#2563eb);background:var(--brand-50,#eef4ff)}
.eft-asgn-pop .eap-new{color:#1d4ed8}
.eft-asgn-pop .eap-sep{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint,#98a2b3);margin:8px 4px 6px;font-weight:800}
.eft-asgn-pop .eap-cancel{display:block;width:100%;text-align:center;background:none;border:0;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:6px;margin-top:2px}
/* EFT tab badge + draft cards */
#eftScrim .eft-tab-badge{display:inline-block;min-width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;font-weight:800;
  color:#fff;background:var(--brand,#2563eb);border-radius:9px;padding:0 4px;margin-left:6px}
#eftScrim .eft-draft-card .eft-draft-table th{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
/* Reserved draft rows: number assigned on a TRS that hasn't been SENT yet */
#eftScrim .eft-res-pill{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:#fdf6e7;border:1px solid #e3c27a;color:#8a5a10;vertical-align:1px}
/* A line added by hand has no trade behind it — say so where the trade would be.
   Slate, not amber: it is a normal payable row, not something waiting. */
#eftScrim .eft-manual-pill{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);vertical-align:1px}
#eftManualForm .eft-manual-note{font-size:11.5px;line-height:1.45;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:2px 0 4px}
#eftManualForm .eft-manual-note b{color:var(--ink)}
/* Draft is split by SETTLEMENT ACCOUNT (Rishi 2026-08-11). The switch reuses
   the Generate tab's originator picker (.orig-grid / .eft-orig) on purpose —
   the operator answers the same question in both places, so it is the same
   control, not a new one. Only the money summary is added here. */
#eftScrim .eft-acct-sw{margin-bottom:16px}
#eftScrim .eft-acct-sw .eft-orig{padding:clamp(8px,1vw,13px) clamp(9px,1.1vw,15px)}
#eftScrim .eft-acct-sw .eft-orig:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#eftScrim .eft-orig .sum{margin-top:clamp(5px,.65vw,9px);padding-top:clamp(5px,.65vw,9px);border-top:1px solid var(--line);font-size:clamp(10px,.85vw,12.5px);color:var(--ink);display:flex;align-items:baseline;gap:clamp(4px,.5vw,8px);flex-wrap:wrap;min-width:0}
#eftScrim .eft-orig .sum b{font-size:clamp(11.5px,1.05vw,15px);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#eftScrim .eft-orig .sum .rows{color:var(--muted);font-size:clamp(9px,.75vw,11.5px)}
/* ⚠ `eft-empty`, NOT `empty`. `.empty` is a GLOBAL empty-state utility
   (position:absolute; inset:0; centred flex) — a bare one on an account card
   tore it out of the grid and centred it, live since the Draft split shipped
   (2026-08-11) and only visible on an account with nothing waiting. Same trap
   as the bare `.who` on the phone: a generic class name is never safe inside
   a component. */
#eftScrim .eft-orig.eft-empty .sum b{color:var(--muted);font-weight:600;font-size:clamp(10px,.85vw,12.5px)}
/* The account these batches will debit, stated once above them. Full border +
   tint, never a side stripe. */
#eftScrim .eft-acct-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;padding:10px 14px;margin-bottom:14px;background:rgba(46,118,93,.05);font-size:12.5px;color:var(--ink)}
#eftScrim .eft-acct-bar .nm{font-weight:700}
#eftScrim .eft-acct-bar .mono{font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted)}
#eftScrim .eft-acct-bar .spacer{flex:1 1 auto;min-width:8px}
#eftScrim .eft-acct-bar .btn{flex:none}
html.lq-glass:not(.phone-mode) #eftScrim .eft-acct-bar{background:color-mix(in srgb,var(--lqa,#16324f) 6%,#fff)}
/* Draft's top line carries the standing Refresh, so it is reachable whichever
   account is open and even when both are empty. */
#eftScrim .eft-draft-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#eftScrim .eft-draft-top > span{flex:1 1 320px;min-width:0}
#eftScrim .eft-refresh{flex:none}
#eftScrim .eft-refresh .g{display:inline-block}
#eftScrim .eft-refresh.spin .g{animation:eft-spin .7s linear infinite}
@keyframes eft-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ #eftScrim .eft-refresh.spin .g{animation:none;opacity:.5} }
/* The batches fade in on an account switch — the cards above stay put, so the
   only thing that moves is the thing that actually changed.
   ⚠ On the class, not the element: the switch replaces the body's innerHTML
   rather than the body itself, and an animation does not restart on a content
   change. renderDraft removes the class, forces a reflow, and re-adds it. */
#eftScrim #eftDraftBody.fadein{animation:eft-body-in .16s ease-out}
@keyframes eft-body-in{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ #eftScrim #eftDraftBody.fadein{animation:none} }
#trsSheet table.fin .ti{display:block;width:100%;min-width:0;border:none}
#trsSheet table.fin .tdate{display:block;width:100%;min-width:0;border:none;cursor:pointer}
/* Signature columns: one flex column per signer (salespeople + Broker of Record).
   This stays a single balanced row on BOTH Letter and Legal — on Legal the extra
   paper height is taken up by the larger .fillpage row spacing / taller boxes
   rather than a 4th column, which keeps the column-to-signer mapping (and the
   Zoho tab order) identical across paper sizes. */
#trsSheet .sig-row{display:flex;gap:26px;margin-top:18px}
#trsSheet .sig{flex:1;text-align:center}
#trsSheet .sig .line{border-top:1.2px solid #000;padding-top:3px;font-size:11px}
/* Footer: slightly smaller than body but consistent within itself (was 10.5/11 mix) */
#trsSheet .trs-foot{margin-top:10px;border-top:2px solid #000;padding-top:6px;display:flex;justify-content:space-between;gap:14px;font-size:11px}
#trsSheet .trs-foot b{font-size:11px}
/* Used by trsMakePdf() for legal-size capture. Two parts:
   1) Layout: column flex with footer pinned to the bottom so the captured
      canvas occupies the full legal aspect (no blank strip on print).
   2) Spacing: a modest line-height bump and section-margin bump so the
      content actually grows into the extra paper, instead of leaving a
      large empty middle. Font sizes are untouched to avoid clipping inside
      fixed-width input boxes. */
#trsSheet.fillpage{display:flex;flex-direction:column;line-height:1.45}
#trsSheet.fillpage .ln{margin:5px 0}
#trsSheet.fillpage .boxes2{margin:10px 0}
#trsSheet.fillpage .obox{margin:10px 0;padding:8px 9px}
#trsSheet.fillpage table.fin{margin:10px 0}
#trsSheet.fillpage table.fin td,#trsSheet.fillpage table.fin th{padding-top:3px;padding-bottom:3px}
#trsSheet.fillpage .sig-row{margin-top:32px}
#trsSheet.fillpage .trs-foot{margin-top:auto}

/* ---- EFT panel + deal modal ---- */
  #eftScrim .modal{ width:min(1180px,98vw); height:min(900px,94vh); display:flex; flex-direction:column; padding:0; overflow:hidden }
  #eftScrim .modal-head{ padding:14px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; flex-shrink:0 }
  #eftScrim .modal-head h3{ margin:0 }
  #eftScrim .eft-tabs{ display:flex; gap:4px; margin-left:auto }
  #eftScrim .eft-tab{ background:none; border:1px solid transparent; padding:7px 14px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-radius:4px }
  #eftScrim .eft-tab.on{ background:var(--card); border-color:var(--line); color:var(--ink) }
  #eftScrim .eft-tab:hover:not(.on){ color:var(--ink) }
  #eftScrim .eft-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 24px 30px; background:var(--bg, #fafaf7) }
  #eftScrim .eft-card{ background:var(--card,#fff); border:1px solid var(--line); border-radius:6px; padding:18px 20px; margin-bottom:14px }
  #eftScrim .eft-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line) }
  #eftScrim .eft-card-head h4{ margin:0; font-size:15px; font-weight:700 }
  #eftScrim .eft-card-head .step{ font-family:monospace; font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase }
  #eftScrim .eft-card-head .desc{ font-size:12px; color:var(--muted); max-width:380px; text-align:right }
  /* Single-line responsive hint variant: lets the line use whatever horizontal room
     the card head has. Falls back to wrapping only when the viewport is truly cramped. */
  #eftScrim .eft-card-head .eft-desc-tight{ max-width:none; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  @media (max-width: 720px){
    #eftScrim .eft-card-head .eft-desc-tight{ white-space:normal; text-overflow:clip; flex:1 1 100%; text-align:left }
    #eftScrim .eft-card-head{ flex-wrap:wrap }
  }
  /* ⚠ ONE ROW, HOWEVER MANY ACCOUNTS THERE ARE (Rishi 2026-08-24). This was
     `1fr 1fr` — hardcoded to two — so the third account wrapped onto its own
     line the moment it arrived, and under 720px all of them stacked.
     `grid-auto-flow:column` + `grid-auto-columns` states the intent instead of
     the count, so a fourth account would still sit in the row rather than
     silently wrapping and needing this rule found again. `minmax(0,1fr)` is
     what lets a track shrink below its content — without the 0 the grid blows
     past the modal instead of the cards getting narrower. */
  #eftScrim .orig-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(6px,.7vw,10px) }
  /* Everything scales with the viewport and bottoms out at a size that still
     reads — the cards get smaller, never a second row. */
  #eftScrim .eft-orig{ border:1.5px solid var(--line); background:var(--card,#fff); padding:clamp(8px,1vw,13px) clamp(9px,1.1vw,15px); cursor:pointer; transition:all .12s; position:relative; border-radius:4px; min-width:0 }
  #eftScrim .eft-orig:hover{ border-color:var(--accent) }
  #eftScrim .eft-orig.on{ border-color:var(--accent); background:rgba(46,118,93,.06) }
  #eftScrim .eft-orig.on::after{ content:'✓'; position:absolute; top:6px; right:8px; color:var(--accent); font-weight:700; font-size:12px; line-height:1 }
  #eftScrim .eft-orig .lbl{ font-size:clamp(8.5px,.62vw,10.5px); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:3px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  #eftScrim .eft-orig .id{ font-family:monospace; font-size:clamp(11px,1vw,15px); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  /* ⚠ The meta WRAPS rather than overflowing. At three-up on a narrow modal a
     card is ~120px, which cannot hold "Real Estate Trust" and "Acct 5278464"
     side by side — wrapping to two lines costs a few pixels of height; letting
     it overflow costs the layout. */
  #eftScrim .eft-orig .meta{ font-size:clamp(9px,.72vw,11px); color:var(--muted); margin-top:clamp(3px,.4vw,6px); display:flex; flex-wrap:wrap; gap:1px clamp(5px,.6vw,12px); min-width:0 }
  #eftScrim .eft-orig .meta span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  #eftScrim .field-grid,
  #eftNocFormScrim .field-grid,
  #eftRetFormScrim .field-grid,
  #eftAdvFormScrim .field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 16px }
  #eftScrim .field-grid.two,
  #eftNocFormScrim .field-grid.two,
  #eftRetFormScrim .field-grid.two,
  #eftAdvFormScrim .field-grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  #eftScrim .field,
  #eftNocFormScrim .field,
  #eftRetFormScrim .field,
  #eftAdvFormScrim .field{ display:flex; flex-direction:column; gap:5px; min-width:0 }
  #eftScrim .field label,
  #eftNocFormScrim .field label,
  #eftRetFormScrim .field label,
  #eftAdvFormScrim .field label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600 }
  #eftScrim .field input,  #eftScrim .field select,  #eftScrim .field textarea,
  #eftNocFormScrim .field input, #eftNocFormScrim .field select, #eftNocFormScrim .field textarea,
  #eftRetFormScrim .field input, #eftRetFormScrim .field select, #eftRetFormScrim .field textarea,
  #eftAdvFormScrim .field input, #eftAdvFormScrim .field select, #eftAdvFormScrim .field textarea{ font-family:inherit; font-size:13px; padding:8px 11px; border:1px solid var(--line); border-radius:6px; background:var(--card,#fff); color:var(--ink); width:100%; box-sizing:border-box; transition:border-color .12s, box-shadow .12s }
  #eftScrim .field input:focus, #eftScrim .field select:focus, #eftScrim .field textarea:focus,
  #eftNocFormScrim .field input:focus, #eftNocFormScrim .field select:focus, #eftNocFormScrim .field textarea:focus,
  #eftRetFormScrim .field input:focus, #eftRetFormScrim .field select:focus, #eftRetFormScrim .field textarea:focus,
  #eftAdvFormScrim .field input:focus, #eftAdvFormScrim .field select:focus, #eftAdvFormScrim .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,107,75,.12) }
  #eftScrim .field .hint{ font-size:11px; color:var(--muted) }
  /* ---- Section-card pattern used inside NOC + Returns + Advice modals ---- */
  #eftNocFormScrim .modal, #eftRetFormScrim .modal, #eftAdvFormScrim .modal{ background:#fafaf7 }
  #eftNocFormScrim .modal-head, #eftRetFormScrim .modal-head, #eftAdvFormScrim .modal-head{ background:#fff; padding:18px 24px; border-bottom:1px solid var(--line) }
  #eftNocFormScrim .modal-head h3, #eftRetFormScrim .modal-head h3, #eftAdvFormScrim .modal-head h3{ font-size:16px; font-weight:700; letter-spacing:-.01em }
  #eftNocFormScrim .modal-head .sub, #eftRetFormScrim .modal-head .sub, #eftAdvFormScrim .modal-head .sub{ margin:3px 0 0; font-size:13px; color:var(--muted); font-weight:500 }
  #eftNocFormScrim .modal-foot, #eftRetFormScrim .modal-foot, #eftAdvFormScrim .modal-foot{ background:#fff; padding:16px 24px }
  #eftAdvFormScrim .modal-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px }
  #eftAdvFormScrim .modal-foot .foot-meta{ font-size:12px; color:var(--muted); line-height:1.4; flex:1 1 auto; min-width:0 }
  #eftAdvFormScrim .modal-foot .foot-btns{ display:flex; gap:8px; flex-shrink:0 }
  #eftNocFormScrim .eft-form-card, #eftRetFormScrim .eft-form-card, #eftAdvFormScrim .eft-form-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.02) }
  #eftNocFormScrim .eft-form-card:last-child, #eftRetFormScrim .eft-form-card:last-child, #eftAdvFormScrim .eft-form-card:last-child{ margin-bottom:0 }
  #eftNocFormScrim .eft-form-card-head, #eftRetFormScrim .eft-form-card-head, #eftAdvFormScrim .eft-form-card-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line) }
  #eftNocFormScrim .eft-form-step, #eftRetFormScrim .eft-form-step, #eftAdvFormScrim .eft-form-step{ flex-shrink:0; width:30px; height:30px; border-radius:8px; background:rgba(20,107,75,.08); color:var(--accent); font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; letter-spacing:.02em }
  #eftNocFormScrim .eft-form-card-head h4, #eftRetFormScrim .eft-form-card-head h4, #eftAdvFormScrim .eft-form-card-head h4{ margin:0 0 3px; font-size:13px; font-weight:700; letter-spacing:-.005em; color:var(--ink) }
  #eftNocFormScrim .eft-form-card-head p, #eftRetFormScrim .eft-form-card-head p, #eftAdvFormScrim .eft-form-card-head p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5; font-family:inherit }
  /* Notes textarea: same font as the rest of the form, generous line-height,
     vertical-only resize so the handle never sits over the text */
  #eftAdvFormScrim .field textarea{ resize:vertical; min-height:96px; line-height:1.55 }
  #eftNocFormScrim .eft-acct-pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
  @media(max-width:720px){ #eftNocFormScrim .eft-acct-pair{ grid-template-columns:1fr } }
  #eftNocFormScrim .eft-acct-col{ background:#fafaf7; border:1px solid var(--line); border-radius:8px; padding:16px 18px }
  #eftNocFormScrim .eft-acct-col-hd{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); font-weight:700; margin-bottom:14px; padding-bottom:10px; border-bottom:1px dashed var(--line) }
  #eftRetFormScrim .eft-checkbox-row{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fafaf7; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0 }
  #eftRetFormScrim .eft-checkbox-row input[type=checkbox]{ width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer }
  #eftRetFormScrim .eft-checkbox-row .eft-checkbox-hint{ font-size:11px; color:#c0392b; font-weight:600; margin-left:auto }
  /* ---- Advice-specific: info banner, invoice table, total row ---- */
  #eftAdvFormScrim .eft-banner{ display:flex; align-items:flex-start; gap:10px; padding:11px 14px; background:rgba(20,107,75,.08); border:1px solid rgba(20,107,75,.18); border-radius:8px; font-size:13px; color:#0f4f37; margin-bottom:16px; line-height:1.45 }
  #eftAdvFormScrim .eft-banner svg{ flex-shrink:0; margin-top:1px }
  #eftAdvFormScrim .eft-banner strong{ font-weight:600 }
  #eftAdvFormScrim .eft-context-chip{ display:flex; flex-wrap:wrap; gap:10px 14px; padding:11px 14px; background:#faf8f3; border:1px solid #e2ddd0; border-radius:8px; font-size:12px; color:#555; margin-bottom:14px; line-height:1.45 }
  #eftAdvFormScrim .eft-context-chip .ctx-label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#1a1814; font-weight:600; width:100%; margin-bottom:-2px }
  #eftAdvFormScrim .eft-inv-tbl{ width:100%; border-collapse:separate; border-spacing:0; background:#fafaf7; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:13px }
  #eftAdvFormScrim .eft-inv-tbl thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); background:#fff }
  #eftAdvFormScrim .eft-inv-tbl thead th.num{ text-align:right }
  #eftAdvFormScrim .eft-inv-tbl tbody td{ padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle }
  #eftAdvFormScrim .eft-inv-tbl tbody tr:last-child td{ border-bottom:0 }
  #eftAdvFormScrim .eft-inv-tbl .col-num{ width:32px; text-align:center; color:var(--muted); font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:12px; padding-left:12px }
  #eftAdvFormScrim .eft-inv-tbl .col-rm{ width:38px; text-align:center }
  #eftAdvFormScrim .eft-inv-tbl input{ width:100%; font-family:inherit; font-size:13px; background:#fff; border:1px solid #d4d4cf; border-radius:6px; padding:7px 10px; outline:none; box-sizing:border-box; transition:border-color .12s, box-shadow .12s }
  #eftAdvFormScrim .eft-inv-tbl input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,107,75,.12) }
  #eftAdvFormScrim .eft-inv-tbl input.amt{ font-family:'SFMono-Regular',Menlo,Consolas,monospace; text-align:right }
  #eftAdvFormScrim .eft-inv-tbl .rm-btn{ width:28px; height:28px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; padding:0 }
  #eftAdvFormScrim .eft-inv-tbl .rm-btn:hover{ color:#c0392b; border-color:#e8b9b3 }
  #eftAdvFormScrim .eft-inv-tbl tfoot td{ padding:12px; background:#fff; border-top:1px solid var(--line) }
  #eftAdvFormScrim .eft-inv-tbl .total-row{ display:flex; justify-content:space-between; align-items:center }
  #eftAdvFormScrim .eft-inv-tbl .total-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600 }
  #eftAdvFormScrim .eft-inv-tbl .total-val{ font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:15px; font-weight:700; color:var(--ink) }
  #eftAdvFormScrim .add-row-btn{ margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13px; color:var(--accent); background:transparent; border:1px dashed var(--accent); padding:7px 14px; border-radius:7px; cursor:pointer; font-weight:600 }
  #eftAdvFormScrim .add-row-btn:hover{ background:rgba(20,107,75,.06) }
  #eftScrim .mono, #eftScrim input.mono,
  #eftNocFormScrim .mono, #eftNocFormScrim input.mono,
  #eftRetFormScrim .mono, #eftRetFormScrim input.mono,
  #eftAdvFormScrim .mono, #eftAdvFormScrim input.mono{ font-family:'SFMono-Regular',Menlo,Consolas,monospace; letter-spacing:.02em }
  #eftScrim .pmt-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden }
  #eftScrim .pmt-toggle button{ background:var(--card,#fff); border:none; padding:7px 14px; font-family:inherit; font-size:12px; cursor:pointer; color:var(--muted); border-right:1px solid var(--line) }
  #eftScrim .pmt-toggle button:last-child{ border-right:none }
  #eftScrim .pmt-toggle button.on{ background:var(--ink); color:#fff }
  #eftScrim .eft-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:13px }
  #eftScrim .eft-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; padding:8px; border-bottom:1.5px solid var(--line); background:rgba(0,0,0,.02); white-space:nowrap }
  #eftScrim .eft-table th.num{ text-align:right }
  #eftScrim .eft-table td{ padding:3px 4px; border-bottom:1px solid var(--line) }
  #eftScrim .eft-table.compact td{ padding:7px 10px }
  #eftScrim .eft-table .num{ text-align:right }
  #eftScrim .eft-in{ width:100%; border:1px solid transparent; background:transparent; padding:6px 8px; font-family:inherit; font-size:13px; color:var(--ink); border-radius:2px; transition:all .12s }
  #eftScrim .eft-in:focus{ outline:none; border-color:var(--accent); background:var(--card,#fff) }
  #eftScrim .eft-del{ background:none; border:none; color:var(--muted); cursor:pointer; padding:4px 8px; font-size:13px; border-radius:2px }
  #eftScrim .eft-del:hover{ color:#c0392b; background:rgba(192,57,43,.08) }
  #eftScrim .eft-btn-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
  #eftScrim .eft-summary{ font-size:13px; color:var(--muted); margin-top:10px }
  #eftScrim .eft-preview{ background:#1a1814; color:#e8e5de; padding:14px 16px; border-radius:3px; font-family:'SFMono-Regular',Menlo,monospace; font-size:12px; line-height:1.6; overflow-x:auto; white-space:pre; border:1px solid #000 }
  #eftScrim .eft-preview .rul{ color:#6a6660; margin-bottom:6px }
  #eftScrim .eft-preview .l-h{ color:#b8d9c7 }
  #eftScrim .eft-preview .l-d{ color:#e8e5de }
  #eftScrim .eft-preview .l-t{ color:#d9cbb8 }
  #eftScrim .eft-valid{ list-style:none; padding:0; margin:8px 0 0; }
  #eftScrim .eft-valid li{ padding:4px 0; font-size:12px; display:flex; align-items:center; gap:8px }
  #eftScrim .eft-valid li::before{ font-family:monospace; font-weight:700; width:14px; flex-shrink:0 }
  #eftScrim .eft-valid li.ok::before{ content:'✓'; color:var(--accent,#2e765d) }
  #eftScrim .eft-valid li.bad::before{ content:'✕'; color:#c0392b }
  #eftScrim .eft-valid li.warn::before{ content:'!'; color:#b8860b }
  #eftScrim .eft-valid li.warn{ color:#7a5a00 }
  #eftScrim .pad-banner{ margin-top:8px; padding:8px 12px; border-radius:4px; font-size:12px; display:flex; align-items:center; gap:8px }
  #eftScrim .pad-banner.ok{ background:#e8f3ee; color:#1d6b50; border:1px solid #b5d9c6 }
  #eftScrim .pad-banner.mismatch{ background:#fdf1e0; color:#7a4a00; border:1px solid #e8c98b }
  #eftScrim .eft-gen{ background:var(--ink,#1a1814); color:#fff; padding:24px 28px; border-radius:4px; margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
  #eftScrim .eft-gen h4{ margin:0 0 4px; font-size:20px; font-weight:600; color:#fff }
  #eftScrim .eft-gen p{ color:var(--faint); font-size:12px; margin:0 }
  #eftScrim #eftGenBtn{ background:#fff; color:#1a1814; padding:12px 24px; font-size:13px; font-weight:700; border:none; cursor:pointer; border-radius:3px; font-family:inherit }
  #eftScrim #eftGenBtn:disabled{ background:#555; color:var(--muted); cursor:not-allowed }
  #eftScrim #eftGenBtn:hover:not(:disabled){ background:#eee }
  #eftScrim .eft-row{ cursor:pointer }
  #eftScrim .eft-row:hover td{ background:rgba(46,118,93,.04) }
  /* ── Row actions in a table ─────────────────────────────────────────────
     ⚠ Deliberately NOT `.btn`: that class is `display:flex; min-height:34px`,
     which is block-level, so two of them in a cell stack and double the row.
     These are inline-flex and sized to sit on one line inside a row. */
  #eftScrim .eft-acts{ display:inline-flex; gap:6px; align-items:center; white-space:nowrap }
  #eftScrim .eft-rowact{ display:inline-flex; align-items:center; min-height:0; padding:3px 9px;
    font:600 11.5px/1.55 inherit; border-radius:6px; cursor:pointer; white-space:nowrap;
    border:1px solid var(--line); background:var(--panel); color:var(--ink); transition:.13s }
  #eftScrim .eft-rowact:hover{ background:var(--surface-hover); border-color:var(--muted) }
  #eftScrim .eft-rowact.pri{ background:var(--brand); border-color:var(--brand); color:#fff }
  #eftScrim .eft-rowact.pri:hover{ filter:brightness(1.07) }
  /* Quiet at rest, red only when reached for — a destructive action repeated
     down every row must not out-shout the one people actually use. */
  #eftScrim .eft-rowact.danger{ background:transparent; border-color:transparent; color:var(--muted) }
  #eftScrim .eft-rowact.danger:hover{ background:#fdeaea; border-color:#f0c4c4; color:#b03024 }
  #eftScrim .eft-when{ font-size:11px; color:var(--muted); white-space:nowrap }
  /* Full width like every sibling table in the drawer; the payee name absorbs
     the slack so the money columns stay aligned at fixed widths.
     (A `max-width` here computes but is ignored for a table's used width, and
     a capped table would read as an island next to the full-width ones.) */
  #eftScrim .eft-advtbl{ width:100%; table-layout:fixed }
  /* ⚠ The global ledger rule `tbody td{white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis}` reaches in here and CLIPS the action buttons —
     every cell must say what it wants. Only the payee name may truncate. */
  #eftScrim .eft-advtbl td{ padding-top:5px; padding-bottom:5px; vertical-align:middle; overflow:visible; text-overflow:clip }
  #eftScrim .eft-advtbl td:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  #eftScrim .eft-st{ white-space:nowrap }
  #eftScrim .eft-pill{ display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; background:#eee; color:#555 }
  #eftScrim .eft-pill.generated{ background:#e9f3ed; color:#2e765d }
  #eftScrim .eft-pill.sent_to_bank{ background:#e6efe9; color:#1e4d3b }
  #eftScrim .eft-pill.rejected{ background:#fdeaea; color:#c0392b }
  #eftScrim .eft-pill.cancelled{ background:#eee; color:#777 }
  #eftScrim .eft-pill.draft{ background:#fff5e0; color:#8a6500 }
  #eftScrim .eft-pill.sent{ background:#e9f3ed; color:#2e765d }
  #eftScrim .eft-pill.void{ background:#fdeaea; color:#c0392b; text-decoration:line-through }
  #eftScrim .eft-alert{ padding:12px 14px; border-left:3px solid var(--accent); background:rgba(46,118,93,.06); font-size:13px; line-height:1.5; margin-bottom:14px; color:var(--ink) }
  #eftScrim .eft-drawer{ position:absolute; top:0; right:0; bottom:0; width:min(640px,95%); background:var(--card,#fff); border-left:1px solid var(--line); box-shadow:-4px 0 24px rgba(0,0,0,.08); transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; z-index:5 }
  #eftScrim .eft-drawer.on{ transform:translateX(0) }
  /* Full-page mode: drawer takes over the whole EFT modal area so the user no longer has to horizontal-scroll inside a narrow right-side panel. */
  #eftScrim .eft-drawer.fullpage{ left:0; right:0; width:auto; max-width:none; border-left:none; box-shadow:none; transform:none; background:var(--bg,#fafbfc) }
  #eftScrim .eft-drawer.fullpage .eft-drawer-head{ background:var(--card,#fff); gap:12px }
  #eftScrim .eft-drawer.fullpage .eft-drawer-body{ padding:20px clamp(20px, 4vw, 48px); max-width:1200px; margin:0 auto; width:100%; box-sizing:border-box }
  #eftScrim .eft-drawer-back{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 8px; border:1px solid var(--line); background:var(--card,#fff); color:var(--ink); border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; transition:background .12s, border-color .12s }
  #eftScrim .eft-drawer-back:hover{ background:var(--panel,#f3f4f6); border-color:#cbd5e0 }
  #eftScrim .eft-drawer-back svg{ width:14px; height:14px }
  /* Drawer action bar: pack into one row, allow horizontal scroll only as a graceful fallback on tiny screens. */
  #eftScrim .eft-action-bar{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; padding:14px 0 4px; overflow-x:auto; -webkit-overflow-scrolling:touch }
  #eftScrim .eft-action-bar .spacer{ flex:1 1 auto }
  #eftScrim .eft-action-bar .btn{ white-space:nowrap; flex:0 0 auto }
  #eftScrim .eft-action-bar .btn-icon{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px }
  #eftScrim .eft-action-bar .btn-icon svg{ width:14px; height:14px }
  /* In fullpage mode, drawer body is the horizontal-scroll boundary so the rest of the page never moves. */
  #eftScrim .eft-drawer.fullpage .eft-drawer-body{ overflow-x:auto }
  #eftScrim .eft-drawer.fullpage .eft-drawer-body table{ width:100% }
  #eftScrim .eft-drawer-head{ padding:14px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-shrink:0 }
  #eftScrim .eft-drawer-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 20px }
  #eftScrim .eft-drawer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px 18px; font-size:12px }
  #eftScrim .eft-drawer-grid strong{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:2px }
  #eftScrim .eft-drawer-grid div > div{ font-size:13px; color:var(--ink); min-width:0; overflow-wrap:break-word; word-break:break-word }
  /* Advice drawer header — payee card + wrapping meta (long emails must never
     overlap the neighbouring column) */
  #eftScrim .eft-adv-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; padding:16px 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); margin-bottom:16px }
  #eftScrim .eft-adv-who{ min-width:0; flex:1 }
  #eftScrim .eft-adv-payee{ font-size:17px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap }
  #eftScrim .eft-adv-email{ font-size:12.5px; color:var(--muted); margin-top:3px; overflow-wrap:break-word; word-break:break-all }
  #eftScrim .eft-adv-total{ text-align:right; flex-shrink:0 }
  #eftScrim .eft-adv-total span{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px }
  #eftScrim .eft-adv-total b{ font-size:21px; font-family:'SFMono-Regular',Menlo,Consolas,monospace; color:var(--ink) }
  #eftScrim .eft-adv-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 18px; font-size:12px }
  #eftScrim .eft-adv-meta strong{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:2px }
  #eftScrim .eft-adv-meta div > div{ font-size:13px; color:var(--ink); min-width:0; overflow-wrap:break-word }
  #eftScrim .modal-foot{ padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; flex-shrink:0; background:var(--card,#fff) }
  /* ---- Date combo: text input + calendar icon (mockup-approved UX) ---- */
  .date-combo{ display:inline-flex; align-items:stretch; gap:0; width:100%; min-width:0 }
  .date-combo > input.date-combo-text{ flex:1 1 auto; min-width:0; border-top-right-radius:0; border-bottom-right-radius:0; margin:0 }
  .date-combo .date-combo-cal{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border:1px solid var(--line); border-left:none; border-radius:0 7px 7px 0; background:var(--bg,#fafbfc); color:var(--muted); cursor:pointer; transition:background .12s, color .12s; min-width:30px }
  .date-combo .date-combo-cal:hover{ background:var(--panel,#f3f4f6); color:var(--ink) }
  .date-combo .date-combo-cal:focus{ outline:2px solid var(--brand,#3b82f6); outline-offset:-2px }
  .cell-date-combo{ display:inline-flex; width:100%; align-items:stretch }
  .cell-date-combo .cell-input.date-combo-text{ border-top-right-radius:0; border-bottom-right-radius:0 }
  .cell-date-combo .cell-date-cal{ border-radius:0; border:1px solid var(--line); border-left:none; background:transparent; color:var(--muted); padding:0 6px; min-width:24px; cursor:pointer }
  .cell-date-combo .cell-date-cal:hover{ color:var(--ink); background:rgba(0,0,0,.04) }
  /* Back button in deal modal head */
  .dm-back-btn{ display:inline-flex; align-items:center; gap:4px }
  /* ===== Commission Invoices tab ===== */
  .inv-gate{border:1px solid var(--amber-line,#e6c98a);background:var(--amber-bg,#fdf6e3);color:var(--ink);border-radius:9px;padding:10px 13px;font-size:12px;line-height:1.5;margin-bottom:12px}
  .inv-summary{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:12px}
  .inv-sum-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  @media (max-width:760px){ .inv-sum-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .inv-sum-grid>div{border:1px solid var(--line-soft);border-radius:8px;background:var(--surface-2);padding:9px 11px}
  .inv-sum-grid>div span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
  .inv-sum-grid>div b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
  .inv-sum-grid>div.net{border-color:var(--brand);background:var(--brand-50,rgba(37,99,235,.06))}
  .inv-sum-grid>div.net b{color:var(--brand)}
  .inv-sum-grid>div.rem b{color:var(--green,#0f8a5f)}
  .inv-note{margin-top:9px;font-size:11.5px;color:var(--muted)}
  .v2-eaacts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  /* Payment milestones table */
  .inv-plan{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:12px}
  .inv-plan-hd{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
  .inv-plan-sub{font-weight:400;color:var(--muted)}
  .inv-plan-copy{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
  .inv-plan-copy b{color:var(--ink)}
  .inv-plan-empty{font-size:12px;color:var(--muted);padding:8px 0}
  /* Approved "Ledger" plan table (Rishi 2026-07-18, Option A): fixed column
     widths (nothing balloons), navy serial chips (gold = Final Instalment),
     %/Fixed segmented toggle, right-aligned money, headers aligned to content. */
  .inv-plan-tblwrap{overflow-x:auto}
  .inv-plan-tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:1314px;table-layout:fixed}
  .inv-plan-tbl col.c-sn{width:430px}.inv-plan-tbl col.c-ds{width:196px}.inv-plan-tbl col.c-bs{width:162px}.inv-plan-tbl col.c-am{width:124px}.inv-plan-tbl col.c-du{width:142px}.inv-plan-tbl col.c-st{width:98px}.inv-plan-tbl col.c-ac{width:162px}
  .inv-plan-tbl th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;padding:0 10px 7px;border-bottom:1.5px solid var(--line)}
  .inv-plan-tbl td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;height:40px;box-sizing:border-box}
  .inv-plan-tbl tbody tr:hover td{background:var(--surface-hover,var(--surface-2))}
  .inv-plan-tbl th.r,.inv-plan-tbl td.r{text-align:right;font-variant-numeric:tabular-nums}
  .inv-plan-tbl th.c,.inv-plan-tbl td.c{text-align:center}
  .inv-plan-tbl tfoot td{border-bottom:0;border-top:1.5px solid var(--line);font-size:11.5px;color:var(--muted);padding-top:9px;height:auto}
  .inv-plan-tbl tfoot .r b{font-size:12.5px;font-weight:800;color:var(--ink)}
  .pl-in{font:inherit;font-size:12px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:4.5px 7px;width:100%;box-sizing:border-box}
  .pl-snc{display:flex;align-items:center;gap:9px;white-space:nowrap;flex-wrap:wrap}
  .pl-snc > b{overflow:hidden;text-overflow:ellipsis;flex:1 0 calc(100% - 31px);max-width:calc(100% - 31px)}
  .pl-snc > i{width:22px;height:22px;border-radius:7px;background:var(--brand,#14315e);color:#fff;font-style:normal;font-weight:800;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .pl-snc.fin > i{background:linear-gradient(135deg,#dfa63c,#b97f22)}
  .pl-snc > b{font-size:12.5px;color:var(--ink);font-weight:650}
  .pl-bs{display:inline-flex;align-items:center;gap:6px}
  .pl-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none}
  .pl-seg b{font-size:10.5px;font-weight:700;padding:4px 9px;cursor:pointer;color:var(--muted);background:var(--panel);user-select:none}
  .pl-seg b.on{background:var(--brand,#14315e);color:#fff}
  .pl-bs .pl-val{width:52px;text-align:center;flex:none}
  .pl-amt-in{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}
  .pl-act{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
  .pl-gen{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--brand,#14315e);border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:4.5px 9px;cursor:pointer}
  .pl-gen:hover{border-color:var(--brand,#14315e)}
  .pl-del{width:24px;height:24px;border-radius:7px;border:1px solid transparent;background:none;color:#b7bfcc;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .pl-del:hover{color:#dc2626;border-color:#f3c9c9;background:#fdf3f3}
  .pl-cov{font-weight:700;color:var(--muted)}
  .pl-cov.ok{color:var(--green,#0f8a5f)}
  .pl-cov.over{color:var(--red,#dc2626)}
  .inv-plan-acts{display:flex;gap:8px;margin-top:11px;align-items:center;flex-wrap:wrap}
  .inv-plan-autosave{font-size:11px;color:var(--muted);margin-left:auto}
  /* Bonus milestone rows (developer mark-up bonus — invoiced separately) */
  .pl-snc.bon > i{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
  /* ⚠ The instrument chip sits INSIDE .pl-snc (2026-10-02): the badge and name
     rules above are child-only (">") so its "CHEQUE" <i> and number <b> are not
     painted as the dark numbered square. The name fills line 1; the invoice
     number and the chip share line 2 (the column is wide enough — Rishi: "rather
     widen it for the available space", not a taller row). */
  .pl-snc .inst-chip{margin-left:0;white-space:normal;flex-wrap:wrap;max-width:calc(100% - 31px)}
  .pl-snc .inst-chip + .inst-ed{margin-left:0}
  .pl-bonus td{background:color-mix(in srgb, #8b5cf6 4%, transparent)}
  .pl-invno{flex:0 1 auto;font-size:10.5px;color:var(--muted);font-style:normal;margin:1px 0 0 31px;overflow:hidden;text-overflow:ellipsis}
  .pl-desc{width:100%;box-sizing:border-box}
  .pl-amt-in.pl-auto{background:var(--surface-2);color:var(--ink-soft,#334155);cursor:default}
  .pl-mk{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .pl-mk:hover{border-color:var(--brand,#14315e);color:var(--brand,#14315e)}
  .pl-mk.inv{color:var(--green,#0f8a5f)}
  .pl-mk.col{color:var(--green,#0f8a5f);border-color:var(--green,#0f8a5f)}
  .pl-addbon{color:#6d28d9;border-color:#ddd3f8}
  .pl-addbon:hover{border-color:#8b5cf6}

  .inv-sum-ms{display:block;font-size:10.5px;color:var(--muted);font-style:normal;margin-top:2px}
  /* Purchase Price Details (deal-level; drives % milestone amounts).
     Same card + tile construction as .inv-summary below it, one colour per
     figure — the two sections must always read as one family. */
  .inv-pp{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:12px}
  .inv-pp-hd{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
  .inv-pp-sub{font-weight:400;color:var(--muted)}
  .inv-pp-lock{font-weight:600;font-size:11px;color:var(--red,#c0392b);background:color-mix(in srgb, var(--red,#c0392b) 10%, #fff);border:1px solid color-mix(in srgb, var(--red,#c0392b) 30%, #fff);border-radius:6px;padding:1px 7px;margin-left:4px;white-space:nowrap}
  .inv-pp.locked .inv-pp-tile{opacity:.85}
  .inv-pp.locked .inv-pp-tile input{cursor:not-allowed}
  .inv-pp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  @media (max-width:760px){ .inv-pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .inv-pp-tile{display:block;border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px;cursor:text;position:relative}
  .inv-pp-tile span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:700}
  .inv-pp-tile i{position:absolute;left:11px;bottom:10px;font-style:normal;font-size:13px;font-weight:700;opacity:.55}
  .inv-pp-tile input{width:100%;border:0;background:none;outline:0;font:inherit;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;padding-left:12px}
  .inv-pp-tile.pp{background:color-mix(in srgb, var(--brand,#14315e) 7%, #fff);border-color:color-mix(in srgb, var(--brand,#14315e) 22%, #fff)}
  .inv-pp-tile.pp span,.inv-pp-tile.pp i{color:var(--brand,#14315e)}
  .inv-pp-tile.net{background:color-mix(in srgb, #b8860b 9%, #fff);border-color:color-mix(in srgb, #b8860b 30%, #fff)}
  .inv-pp-tile.net span,.inv-pp-tile.net i{color:#8a6508}
  .inv-pp-tile:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--brand,#14315e) 25%, transparent)}

  /* Co-op agreement card (two slots: broker referral + bonus commission) */
  .inv-coop{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:11px 14px;margin-bottom:12px}
  .inv-coop.has-file{border-color:var(--green,#0f8a5f)}
  .inv-coop-hd{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .inv-coop-body{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  .inv-coop-body.v2{display:block}
  .inv-coop-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0}
  .inv-coop-row + .inv-coop-row{border-top:1px dashed var(--line-soft)}
  .inv-coop-row.drag{outline:2px dashed var(--brand-2);outline-offset:2px;background:var(--blue-bg);border-radius:8px}
  #eftCsvText.eft-drag{border-color:var(--brand-2)!important;background:var(--blue-bg);box-shadow:0 0 0 3px var(--brand-50)}
  .inv-coop-slot{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);width:128px;flex:none}
  .inv-coop-row .inv-coop-acts{margin-left:auto}
  .inv-coop-none{font-size:12px;color:var(--muted)}
  /* The filename must SHRINK, never push the actions onto a second row: the
     row is flex-wrap, so an intrinsically-sized file span wraps the buttons the
     moment the "N on file" chip appears. Name truncates; chip + actions hold. */
  .inv-coop-file{font-size:12.5px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0}
  .inv-coop-fname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .inv-coop-file em{color:var(--muted);font-weight:400;font-style:normal}

  /* ---- several referrals on one deal (Rishi 2026-07-28) ---- */
  .inv-coop-more{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--brand-2);
    background:var(--brand-50);border:1px solid transparent;border-radius:20px;padding:2px 9px 2px 8px;cursor:pointer;
    flex:none;transition:.12s;line-height:1.5}
  .inv-coop-more:hover{border-color:var(--brand-2)}
  .inv-coop-more svg{width:11px;height:11px;transition:transform .18s}
  .inv-coop-row.open .inv-coop-more svg{transform:rotate(180deg)}
  .inv-coop-list{flex:0 0 100%;margin:8px 0 2px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-2)}
  .inv-coop-list[hidden]{display:none!important}
  .inv-coop-doc{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel);cursor:pointer;transition:.12s}
  .inv-coop-doc + .inv-coop-doc{border-top:1px solid var(--line-soft)}
  .inv-coop-doc:hover{background:var(--surface-hover)}
  .inv-coop-doc.is-def,.inv-coop-doc.is-def:hover{background:var(--green-bg,#eaf7f0);cursor:default}
  .inv-coop-pick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:flex;
    align-items:center;justify-content:center;transition:.12s}
  .inv-coop-doc:hover .inv-coop-pick{border-color:var(--brand-2)}
  .inv-coop-doc.is-def .inv-coop-pick{border-color:var(--green);background:var(--green)}
  .inv-coop-pick i{width:5px;height:5px;border-radius:50%;background:#fff;display:none}
  .inv-coop-doc.is-def .inv-coop-pick i{display:block}
  .inv-coop-dmeta{min-width:0;flex:1}
  .inv-coop-dname{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inv-coop-doc.is-def .inv-coop-dname{font-weight:700}
  .inv-coop-dsub{font-size:11px;color:var(--muted);margin-top:1px;display:flex;align-items:center;gap:6px}
  .inv-coop-badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--green);
    background:var(--panel);border:1px solid var(--green);border-radius:20px;padding:1px 6px;white-space:nowrap}
  .inv-coop-dacts{display:flex;gap:5px;flex:none;align-items:center}
  .inv-coop-dacts .dm-att-dl{width:28px;height:28px;border-radius:6px}
  .inv-coop-dacts .dm-att-dl svg{width:13px;height:13px}
  .inv-coop-dacts .dm-att-del:hover{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
  .inv-coop-hint{padding:7px 11px;font-size:11px;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line-soft)}
  .inv-coop-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .inv-coop-up{cursor:pointer}
  /* Upload progress bar — shared across every document-upload surface
     (Attachments multi-file + link, COOP referral file + link). */
  .dm-uprog-mount{flex:0 0 100%}
  .dm-uprog-mount[hidden]{display:none!important}
  .dm-uprog{display:flex;flex-direction:column;gap:5px;margin:8px 0 2px}
  .dm-uprog-top{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);font-weight:600;gap:10px}
  .dm-uprog-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dm-uprog-pct{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;flex:none}
  .dm-uprog-track{height:7px;border-radius:6px;background:var(--surface-2,#eef1f5);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
  .dm-uprog-track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand,#2563eb),var(--brand-2,#4f46e5));width:2%;transition:width .28s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
  .dm-uprog-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:dmUprogSheen 1.15s ease-in-out infinite}
  .dm-uprog.is-done .dm-uprog-track i{background:linear-gradient(90deg,var(--green,#0f8a5f),var(--green,#0f8a5f))}
  .dm-uprog.is-done .dm-uprog-track i::after,.dm-uprog.is-done .dm-uprog-lbl{opacity:0}
  .dm-uprog.is-done .dm-uprog-track i::after{animation:none}
  @keyframes dmUprogSheen{to{transform:translateX(100%)}}
  @media (prefers-reduced-motion: reduce){ .dm-uprog-track i::after{animation:none;opacity:0} .dm-uprog-track i{transition:none} }
  /* Paste-a-link row (broker referral) — sits full-width under its slot,
     hidden until "🔗 Link" is pressed. The [hidden] guard is required: a
     class's display:flex otherwise beats the UA [hidden]{display:none}. */
  .inv-coop-urlrow{flex:0 0 100%;display:flex;gap:6px;align-items:center;margin-top:6px}
  .inv-coop-urlrow[hidden]{display:none!important}
  .inv-coop-urlrow .inv-coop-url-inp{flex:1;min-width:0;font-size:12.5px}
  .inv-coop-urlrow .inv-coop-url-go{flex:none;cursor:pointer;white-space:nowrap}
  .inv-coop-urlrow .dm-att-dl{flex:none}
  /* Document viewer popup (co-op agreement) */
  .cvw-overlay{position:fixed;inset:0;background:rgba(10,20,35,.62);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
  .cvw-box{background:var(--panel,#fff);border-radius:12px;width:min(980px,96vw);height:min(92vh,1150px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.45)}
  .cvw-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
  .cvw-title{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cvw-tools{display:flex;gap:6px;align-items:center;flex-shrink:0}
  .cvw-b{font:inherit;font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;line-height:1}
  .cvw-b:hover{background:var(--surface-hover)}
  .cvw-x{border-color:transparent;font-size:14px}
  .cvw-stage{flex:1;overflow:auto;background:#525659;text-align:center}
  .cvw-img{display:block;width:100%;height:auto;margin:0 auto}
  .cvw-frame{width:100%;height:100%;border:0;background:#fff}
  .inv-empty{color:var(--muted);font-size:12.5px;padding:14px 0;text-align:center}
  .inv-list-bar{display:flex;justify-content:flex-end;margin-bottom:6px}
  /* What arrived when a collection was recorded — the instrument number and its
     stored copy, shown on the milestone (and the invoice) it belongs to. */
  .inst-chip{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:1px 4px 1px 5px;
    border:1px solid var(--line);border-radius:6px;background:var(--surface-2);
    font-size:11px;color:var(--ink-soft);white-space:nowrap;vertical-align:middle}
  .inst-chip i{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .inst-chip b{font-weight:600;color:var(--ink);font-family:var(--font-num,inherit)}
  .inst-chip.sm{font-size:10.5px}
  .inst-lk{border:0;background:none;padding:0 2px;cursor:pointer;font:inherit;font-size:10.5px;
    color:var(--brand);text-decoration:underline}
  .inst-lk:hover{opacity:.75}
  .inst-nofile{font-style:normal;font-size:10px;color:var(--muted)}
  .inst-ed,.inst-add{border:1px solid var(--line);background:var(--panel);border-radius:6px;
    padding:1px 6px;margin-left:5px;cursor:pointer;font-size:10.5px;color:var(--muted);vertical-align:middle}
  .inst-ed:hover,.inst-add:hover{color:var(--brand);border-color:var(--brand)}
  .inv-inst{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-top:3px}
  /* ── Record-the-collection modal ─────────────────────────────────────────
     ⚠ Every label is exactly ONE line of a FIXED height, whatever it carries.
     The required marker and the "optional" hint ride INSIDE that line — a badge
     on its own line above the field is what made neighbouring fields sit at
     different heights (Rishi 2026-07-29: "fields should not look up and down").
     Keep .inst-lb's height fixed if you add anything to a label. */
  .inst-box{max-width:560px}
  .inst-hd{display:flex;align-items:center;gap:9px;margin-bottom:3px}
  .inst-hd h3{margin:0;font-size:15px;font-weight:800;color:var(--ink)}
  .inst-num{font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;color:var(--brand);
    font-family:var(--font-num,inherit);padding:4px 7px;border-radius:6px;
    background:color-mix(in srgb,var(--brand) 10%,var(--panel));
    border:1px solid color-mix(in srgb,var(--brand) 22%,var(--panel))}
  .inst-sub{margin:0 0 15px;font-size:11.5px;line-height:1.5;font-weight:500;color:var(--muted)}
  .inst-form{display:grid;gap:12px}
  .inst-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .inst-fl{display:flex;flex-direction:column;gap:5px;min-width:0}
  .inst-lb{display:flex;align-items:baseline;gap:6px;height:15px;
    font-size:11px;line-height:15px;font-weight:600;color:var(--muted);white-space:nowrap}
  .inst-req{color:var(--red);font-weight:700;font-size:12px}
  .inst-opt{margin-left:auto;font-style:italic;font-weight:500;font-size:10px;color:var(--muted);opacity:.85}
  .inst-fl input,.inst-fl select{font:inherit;font-size:13px;color:var(--ink);background:var(--panel);
    border:1px solid var(--line);border-radius:8px;padding:0 10px;height:38px;width:100%;box-sizing:border-box}
  .inst-fl input:focus,.inst-fl select:focus{outline:none;border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
  .inst-money{position:relative;display:block}
  .inst-money i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;
    font-size:11px;font-weight:600;color:var(--muted);pointer-events:none}
  .inst-money input{padding-left:38px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
  /* the attach control — same attach-first shape as HR + deal attachments */
  .inst-drop{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
    border:1.5px dashed var(--line);background:var(--surface-2);cursor:pointer}
  .inst-drop:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 4%,var(--panel))}
  .inst-drop.has{border-style:solid;background:var(--panel);cursor:default}
  /* a file is over the dialog — the whole modal accepts the drop, this lights up */
  .inst-drop.drag{border-style:dashed;border-color:var(--brand);
    background:color-mix(in srgb,var(--brand) 9%,var(--panel));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
  .inst-drop .ic{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
    background:color-mix(in srgb,var(--brand) 13%,var(--panel))}
  .inst-drop .ic.ok{background:color-mix(in srgb,var(--green,#0f8a52) 14%,var(--panel))}
  .inst-drop .ic svg{width:17px;height:17px;fill:none;stroke:var(--brand);stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .inst-drop .ic.ok svg{stroke:var(--green,#0f8a52)}
  .inst-drop .tx{min-width:0;flex:1}
  .inst-drop .tx b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inst-drop .tx i{display:block;margin-top:2px;font-style:normal;font-size:11px;color:var(--muted)}
  .inst-plus{margin-left:auto;font-size:17px;font-weight:700;color:var(--brand);opacity:.8}
  .inst-x,.inst-swap{flex:none;border:1px solid var(--line);background:var(--panel);border-radius:7px;
    cursor:pointer;font:inherit;font-size:11px;color:var(--muted);padding:5px 9px}
  .inst-x:hover,.inst-swap:hover{color:var(--brand);border-color:var(--brand)}
  .inv-list{display:grid;gap:8px;margin-bottom:12px}
  .inv-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:11px 13px;flex-wrap:wrap}
  .inv-row-no{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
  .inv-row-sub{font-size:12px;color:var(--ink-soft);margin-top:3px;font-variant-numeric:tabular-nums}
  .inv-row-sub2{font-size:11px;color:var(--muted);margin-top:2px}
  .inv-row-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .inv-pill{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
  .inv-pill.sent{background:#e0ecff;color:#1d4ed8}
  .inv-pill.paid{background:#e6f7ef;color:#0f8a5f}
  .inv-pill.cancelled{background:#fde8e8;color:#b42318;text-decoration:line-through}
  .inv-pill.converted{background:#efeafd;color:#6d28d9}
  .inv-ser{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px}
  .inv-ser.tax{background:#0a2540;color:#fff}
  .inv-ser.pf{background:#fdf3e0;color:#b45309;border:1px dashed #d9a441}
  .inv-link{color:#6d28d9}
  .inv-cxl{color:#b42318}
  .inv-replacing{font-size:10.5px;font-weight:700;color:#b42318;background:#fde8e8;border-radius:99px;padding:1.5px 8px;margin-left:6px}
  .inv-tent{font-size:9.5px;font-weight:700;color:#8a5a10;background:#fdf6e7;border:1px dashed #e3c27a;border-radius:99px;padding:1.5px 8px}
  .invsend-att.warn{color:#8a5a10;background:#fdf6e7;border-color:#e3c27a}
  .mini-btn.danger{color:var(--red);border-color:var(--red)}
  .mini-btn.ghost{opacity:.75}
  .mini-btn.inv-convert{color:#6d28d9;border-color:#c9b8f5}
  .mini-btn.inv-ai{color:#0f8a5f;border-color:#9fdcc3;background:#effaf4;font-weight:700}
  .inv-icon-btn{display:inline-flex;align-items:center;gap:5px}
  .inv-icon-btn svg{flex:none}
  .inv-send-btn{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
  /* Invoice-type segmented control (Tax / Pro-forma) */
  /* Compact segmented Tax/Pro-forma toggle (Option A — the FY/series caption
     is dropped visually; the tentative № beside it already carries the series). */
  .inv-type-seg{display:inline-flex;gap:0;margin-bottom:9px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
  .inv-type-btn{display:inline-flex;align-items:center;font:inherit;text-align:left;padding:6px 14px;border:0;background:var(--panel);cursor:pointer;color:var(--muted)}
  .inv-type-btn + .inv-type-btn{border-left:1px solid var(--line)}
  .inv-type-btn span{display:none}
  .inv-type-btn b{font-size:11.5px;font-weight:700}
  .inv-type-btn.on{background:var(--brand,#14315e);color:#fff}
  .inv-type-btn[data-ser="PRINC"].on{background:#b8860b;color:#fff}
  .inv-type-note{font-size:11.5px;color:#8a5a10;background:#fdf6e7;border:1px dashed #e3c27a;border-radius:8px;padding:7px 11px;margin-bottom:9px}
  /* Append-only trail under an invoice row */
  .inv-trail{margin-top:8px;border-left:2px solid var(--line);padding-left:10px;display:grid;gap:4px}
  .inv-trail-row{display:flex;align-items:baseline;gap:7px;font-size:11.5px;color:var(--ink-soft);flex-wrap:wrap}
  .inv-trail-row .tdot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;position:relative;top:-1px}
  .inv-trail-row .tmeta{font-size:10.5px;color:var(--muted)}
  /* Invoice email conversation — the chase reads as a thread, outbound on the
     left, the client's replies indented and tinted, each with its own stamp. */
  .inv-msg{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:6px 0;background:var(--panel)}
  .inv-msg.in{margin-left:22px;background:var(--surface-2);border-color:var(--brand-50)}
  .inv-msg.draft{border-style:dashed;background:var(--surface-2)}
  .inv-msg-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
  .inv-msg-h .who{font-size:11.5px;font-weight:600;color:var(--ink)}
  .inv-msg-h .when{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .inv-msg-s{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
  .inv-msg-b{font-size:11.5px;color:var(--ink-soft);margin-top:5px;white-space:pre-wrap;
    max-height:190px;overflow:auto;line-height:1.5}
  .inv-msg-f{font-size:10.5px;color:var(--muted);margin-top:5px}
  .inv-trail-row.muted{color:var(--muted)}
  /* Send-to-vendor verify popup (own fixed layer, above the deal modal) */
  .invsend-scrim{position:fixed;inset:0;background:rgba(12,22,38,.55);z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px}
  .invsend-box{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 60px rgba(8,18,36,.35);width:620px;max-width:100%;max-height:92vh;overflow:auto;padding:18px 20px}
  .invsend-hd{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:12px;display:flex;flex-direction:column;gap:3px}
  .invsend-sub{font-size:11.5px;font-weight:500;color:var(--muted)}
  .invsend-form{display:grid;gap:9px}
  .invsend-form input[readonly],.invsend-form textarea[readonly]{background:var(--surface-2);color:var(--ink-soft)}
  .invsend-att{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);background:var(--surface-2);border:1px dashed var(--line);border-radius:8px;padding:7px 10px}
  .invsend-att em{color:var(--muted);font-style:normal}
  /* The open-invoices table a new invoice carries (Rishi 2026-09-28) */
  .invsend-open{font-size:12px;color:var(--ink-soft);background:color-mix(in srgb,var(--green,#1c8c5a) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--green,#1c8c5a) 30%,var(--line));border-radius:8px;padding:8px 10px;display:grid;gap:7px}
  .invsend-open[hidden]{display:none!important}
  .invsend-open-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer}
  .invsend-open-hd input{margin:0;width:15px;height:15px;accent-color:var(--brand)}
  .invsend-open-hd b{color:var(--ink)}
  .invsend-open-hd .mini-btn{margin-left:auto;min-height:26px}
  .invsend-open-note{font-size:11px;color:var(--muted)}
  .invsend-open-list{background:#fff;border:1px solid var(--line);border-radius:7px;max-height:280px;overflow:auto;padding:0 10px}
  .invsend-open-list[hidden]{display:none!important}
  /* Coach-the-AI feedback loop (invoice collections) */
  .invsend-coach{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);background:color-mix(in srgb,var(--brand) 6%,var(--panel));border:1px solid var(--line);border-radius:8px;padding:6px 10px}
  .invsend-coach .mini-btn{min-height:26px}
  .inv-coachseg{display:inline-flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;margin-bottom:4px}
  .inv-coachseg button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:6px 8px;border-radius:7px;cursor:pointer}
  .inv-coachseg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(8,18,36,.12)}
  .invsend-acts{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
  /* Gold "Approve & send" hero inside the verify popup (matches the compose dock) */
  .invsend-acts .inv-approve{display:inline-flex;align-items:center;gap:8px;color:#0a2540;border:0;border-radius:10px;padding:11px 20px;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer;
    background:linear-gradient(160deg,#ffe9b8 0%,#f3c969 45%,#dfa63c 100%);
    box-shadow:0 8px 20px -8px rgba(122,79,10,.5), inset 0 1px 0 rgba(255,255,255,.55);transition:box-shadow .18s, transform .1s}
  .invsend-acts .inv-approve:hover{box-shadow:0 12px 26px -8px rgba(122,79,10,.55), 0 0 0 3px rgba(243,201,105,.32), inset 0 1px 0 rgba(255,255,255,.62)}
  .invsend-acts .inv-approve:active{transform:scale(.97)}
  .invsend-acts .inv-approve:disabled{opacity:.8;cursor:progress;box-shadow:0 4px 12px -8px rgba(122,79,10,.4), inset 0 1px 0 rgba(255,255,255,.4)}
  .inv-gspin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(10,37,64,.25);border-top-color:#0a2540;animation:invgspin .7s linear infinite;flex:none}
  @keyframes invgspin{to{transform:rotate(360deg)}}
  /* ============ Invoice compose action DOCK — 5-Pro "cinema command bar" ============ */
  /* Navy bar (theme-independent, like the app's own navy topbar) with soft ambient
     light: a warm gold pool behind the hero, a cool blue haze far left. */
  .inv-compose-acts.inv-dock{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin:14px -16px -14px;padding:14px 18px;overflow:hidden;
    background:linear-gradient(160deg,#0e3054 0%,#0a2540 55%,#071a30 100%);
    border-bottom-left-radius:10px;border-bottom-right-radius:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
  .inv-dock::before{content:'';position:absolute;right:-40px;top:-70px;width:300px;height:190px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(243,201,105,.26),rgba(243,201,105,0));pointer-events:none;z-index:0}
  .inv-dock::after{content:'';position:absolute;left:-60px;bottom:-100px;width:280px;height:180px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(94,140,255,.15),rgba(94,140,255,0));pointer-events:none;z-index:0}
  .inv-dock > *{position:relative;z-index:1}
  .inv-dock-note{font-size:11.5px;color:#9fb2c8}
  .inv-dock-gap{flex:1}
  .inv-util{display:flex;align-items:stretch;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:11px;overflow:hidden}
  .inv-ub{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;color:#dce6f1;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.1);padding:10px 15px;cursor:pointer;transition:background .15s;white-space:nowrap}
  .inv-ub:last-child{border-right:0}
  .inv-ub:hover{background:rgba(255,255,255,.1)}
  .inv-ub.inv-ub-ic{padding:10px 13px;color:#a2b4ca}
  .inv-ub.is-busy{opacity:.55;cursor:progress}
  .inv-ub svg{flex:none}
  .inv-cancel{font:inherit;font-size:12.5px;font-weight:600;color:#8fa3ba;background:none;border:0;cursor:pointer;padding:10px 6px;white-space:nowrap}
  .inv-cancel:hover{color:#dce6f1}
  .inv-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;text-align:left;cursor:pointer;color:#0a2540;border:0;border-radius:12px;padding:10px 46px 10px 18px;overflow:hidden;
    background:linear-gradient(160deg,#ffe9b8 0%,#f3c969 45%,#dfa63c 100%);
    box-shadow:0 10px 24px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(122,79,10,.25);
    transition:box-shadow .18s, transform .1s}
  .inv-hero .t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;letter-spacing:.01em}
  .inv-hero .no{color:#7a4f0a}
  .inv-hero .s{font-size:10.5px;font-weight:600;color:rgba(10,37,64,.62);font-variant-numeric:tabular-nums}
  .inv-hero .fly{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;background:rgba(10,37,64,.14);display:flex;align-items:center;justify-content:center}
  .inv-hero .inv-gspin{display:none}
  .inv-hero:hover{box-shadow:0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 3px rgba(243,201,105,.3), inset 0 1px 0 rgba(255,255,255,.65)}
  .inv-hero:active{transform:scale(.97)}
  .inv-hero:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(243,201,105,.55), 0 10px 24px -10px rgba(0,0,0,.55)}
  .inv-hero.is-busy{cursor:progress}
  .inv-hero.is-busy .fly{display:none}
  .inv-hero.is-busy .inv-gspin{display:inline-block}
  @media (prefers-reduced-motion:reduce){ .inv-hero,.invsend-acts .inv-approve{transition:none} .inv-gspin{animation:none} }
  .inv-compose{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:14px 16px;margin-top:4px}
  .inv-compose-hd{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
  /* Approved "Ledger sections" compose (Rishi 2026-07-18, Option A) */
  .inv-sec{border-top:1px solid var(--line-soft);padding:12px 0 14px}
  .inv-sec:first-child{border-top:0;padding-top:2px}
  .inv-sect{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
  .inv-sect::before{content:'';width:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,#dfa63c,#b97f22)}
  .inv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px 12px;align-items:start}
  .inv-grid .c2{grid-column:span 2}.inv-grid .c3{grid-column:span 3}.inv-grid .c4{grid-column:span 4}.inv-grid .c6{grid-column:span 6}.inv-grid .c12{grid-column:span 12}
  .inv-fl.money input{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
  @media (max-width:900px){ .inv-grid > .inv-fl{grid-column:span 6} }
  @media (max-width:560px){ .inv-grid > .inv-fl{grid-column:span 12} }
  .inv-nextno{font-size:11.5px;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}
  .inv-nextno em{color:var(--muted);font-weight:400}
  .inv-form{display:grid;gap:10px;margin-bottom:14px}
  .inv-sub{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 -2px;padding-top:6px;border-top:1px solid var(--line-soft)}
  .inv-sub:first-child{border-top:0;padding-top:0}
  .inv-form-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  @media (max-width:640px){ .inv-form-row{grid-template-columns:1fr} }
  .inv-fl{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--muted)}
  .inv-fl input,.inv-fl textarea,.inv-fl select{font:inherit;font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 9px;width:100%;box-sizing:border-box}
  .inv-fl textarea{resize:vertical;min-height:44px}
  /* The preview is a flex column that always centres the letter, whatever the
     modal width (small or expanded to full page). overflow-x guards against any
     unbreakable content; the letter fluidly caps at the panel width below. */
  .inv-preview-wrap{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:16px;display:flex;justify-content:center;align-items:flex-start;overflow-x:auto;min-width:0}
  #dmInvoicePreview{width:100%;min-width:0;display:flex;justify-content:center}
  /* Safe margin on the on-screen preview only (the PDF gets its own 24pt page
     margins in _dmInvoiceBuildPdf), so the letter reads like a finished page and
     the right-hand values never sit flush to the edge. */
  #dmInvoicePreview .ivd{padding:30px 34px}
  .inv-compose-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}

  /* Printable invoice letter (renders on white in every theme).
     Rendered at 752px = the content width between the PDF margins, so what you
     see is what prints (_dmInvoiceBuildPdf fills page width + paginates; the
     page margin comes from MX/MY there, so .ivd itself carries no padding).
     Approved "Refined Classic" design (Rishi 2026-07-17): professional contrast
     (no faded gray-on-gray), balanced Total Due, readable footer. */
  .ivd{width:752px;max-width:100%;margin:0 auto;background:#fff;color:#0f172a;font-size:11.5px;line-height:1.5;padding:0;border-radius:4px;box-shadow:0 2px 14px rgba(16,32,56,.14)}
  /* PDF-only: on a short (single-page) invoice, make the letter one page tall and
     push the footer to the very bottom so it prints at the foot of the page
     instead of floating mid-page. Applied by _dmInvoiceBuildPdf on the off-screen
     clone only (min-height is set inline in JS); never affects the preview. */
  .ivd.ivd-pagefill{display:flex;flex-direction:column}
  .ivd.ivd-pagefill > .ivd-foot{margin-top:auto}
  .ivd.ivd-print{box-shadow:none}
  .ivd *{box-sizing:border-box}
  .ivd .num,.ivd-item span,.ivd-due-r .da,.ivd-top-r .meta b,.ivd-rbox .rb .kv span{font-variant-numeric:tabular-nums}
  .ivd .ivd-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2.5px solid #0a2540;padding-bottom:13px}
  .ivd-logo{display:flex;align-items:flex-start;gap:9px}
  .ivd-logo .sq{width:26px;height:26px;background:#0a2540;margin-top:5px;flex:none}
  .ivd-logo .txt{line-height:.92}
  .ivd-logo .txt .l1{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#0a2540;line-height:.92;display:block}
  .ivd-logo .txt .l2{display:flex;align-items:flex-end;gap:7px;margin-top:1px}
  .ivd-logo .txt .l2 b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#0a2540;line-height:.92}
  .ivd-logo .txt .l2 em{font-style:normal;font-size:10.5px;font-weight:600;color:#0a2540;padding-bottom:3px}
  .ivd-top-r{text-align:right}
  .ivd-top-r .t{font-size:16px;font-weight:800;letter-spacing:.16em;color:#0a2540;text-transform:uppercase}
  .ivd-top-r .meta{margin-top:10px;font-size:11px;color:#475569;line-height:1.85}
  .ivd-top-r .meta b{color:#0f172a;font-weight:700}
  .ivd-st{display:inline-block;margin-top:8px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a5a12;background:#fbf3e0;border:1px solid #ecd9a8;border-radius:6px;padding:4px 11px}
  .ivd-cols{display:flex;gap:30px;margin-top:15px}
  .ivd-col{flex:1;min-width:0}
  .ivd-lbl{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#475569;margin-bottom:7px}
  .ivd-billto{font-size:11.5px;line-height:1.6;color:#0f172a}
  .ivd-billto b{font-weight:700}
  .ivd-re .ivd-re-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #eef2f7;font-size:11px}
  .ivd-re .ivd-re-row i{color:#475569;font-style:normal;white-space:nowrap}
  .ivd-re .ivd-re-row span{color:#0f172a;font-weight:600;text-align:right}
  .ivd-items{margin-top:15px;border:1px solid #dbe3ee;border-radius:9px;overflow:hidden}
  .ivd-item{display:flex;justify-content:space-between;padding:7px 16px;font-size:11.5px;border-bottom:1px solid #eef2f7}
  .ivd-item:last-child{border-bottom:0}
  .ivd-item i{color:#334155;font-style:normal}
  .ivd-item span{font-weight:600;color:#0f172a}
  .ivd-item.sub i{color:#64748b}.ivd-item.sub span{color:#475569}
  .ivd-item.net{background:#f8fafc}.ivd-item.net i,.ivd-item.net span{color:#0a2540;font-weight:700}
  .ivd-item.total{background:#eef3f9}.ivd-item.total i,.ivd-item.total span{color:#0a2540;font-weight:800;font-size:12px}
  /* Total Due band — full-width navy gradient, gold accent, balanced amount. */
  .ivd-due{margin-top:13px}
  .ivd-due-box{width:100%;background:linear-gradient(135deg,#12385f 0%,#0a2540 58%,#071c31 100%);border-radius:12px;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;overflow:hidden;box-shadow:0 8px 22px -10px rgba(10,37,64,.5)}
  .ivd-due-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#f2d288,#c79a3a)}
  .ivd-due-box::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,210,136,.16),rgba(242,210,136,0));pointer-events:none}
  .ivd-due-l{display:flex;flex-direction:column;gap:4px;padding-left:10px;position:relative;z-index:1}
  .ivd-due-l .dl{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#f2d288}
  .ivd-due-l .dsub{font-size:10.5px;color:#dbe4ee;letter-spacing:.01em}
  .ivd-due-l .dsub b{color:#fff;font-weight:600}
  .ivd-due-r{position:relative;z-index:1;text-align:right;white-space:nowrap}
  .ivd-due-r .da{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1}
  .ivd-due-r .dcur{font-size:10px;font-weight:700;color:#f2d288;letter-spacing:.05em;margin-right:5px;vertical-align:2px}
  .ivd-remit{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .ivd-rbox{border:1px solid #dbe3ee;border-radius:10px;padding:12px 15px;background:#fbfcfe}
  .ivd-rbox .rh{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0a2540;margin-bottom:8px}
  .ivd-rbox .rb{font-size:11px;color:#334155;line-height:1.65}
  .ivd-rbox .rb b{color:#0f172a}
  .ivd-rbox .rb .kv{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted #d3dbe6;padding:3px 0}
  .ivd-rbox .rb .kv:last-child{border-bottom:0}
  .ivd-rbox .rb .kv i{color:#64748b;font-style:normal}
  .ivd-rbox .rb .kv span{font-weight:600;color:#0f172a}
  .ivd-thanks{margin-top:11px;font-size:10.5px;color:#475569;font-style:italic}
  .ivd-foot{border-top:1px solid #e2e8f0;margin-top:14px;padding-top:10px;display:flex;justify-content:space-between;align-items:flex-start;font-size:11px;color:#5b6675;letter-spacing:.02em;line-height:1.7}
  .ivd-foot b{display:block;color:#334155;font-weight:700;font-size:11.5px;margin-bottom:1px}
  .ivd-foot .fr{text-align:right}

  /* ---- Template documents (Commercial Lease / Commission Statements) ---- */
  /* Compose "Document" pill row — sits above the Tax/Pro-forma segment. */
  .inv-tmpl-seg{display:flex;align-items:center;gap:7px;margin-bottom:9px;flex-wrap:wrap}
  .inv-tmpl-lbl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .inv-tmpl-btn{border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:650;padding:6px 14px;cursor:pointer}
  .inv-tmpl-btn.on{border-color:var(--brand,#0a2540);background:var(--brand-50,#eef3fa);color:var(--brand,#0a2540);font-weight:750}
  /* The alt templates hide the base tranche fields (they compute their own). */
  #dmInvoiceCompose.tmpl-alt .inv-tr-only{display:none}
  .inv-hint-fl{align-self:end}
  .inv-hint{font-size:11.5px;color:var(--muted);line-height:1.5}
  /* Letter: statement label/value rows */
  .ivd-stmt{margin:4px 0}
  .ivd-sgap{margin-top:13px}
  .ivd-sr{display:grid;grid-template-columns:250px 1fr;gap:12px;padding:5px 0;border-bottom:1px solid #f0f3f7;font-size:11.5px;line-height:1.55}
  .ivd-col .ivd-sr{grid-template-columns:118px 1fr;gap:9px}
  .ivd-sr:last-child{border-bottom:0}
  .ivd-sr i{font-style:normal;font-weight:700;color:#475569;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
  .ivd-sr span{color:#0f172a;font-weight:500}
  .ivd-sr span.b{font-weight:700}
  /* Letter: commercial-lease header (To/Property row → facts band → party cards) */
  .ivd-clh{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;margin:2px 0 0}
  .ivd-fact .fl{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
  .ivd-fact .fv{font-size:11.5px;color:#0f172a;font-weight:600;line-height:1.6}
  .ivd-fact .fv .soft{font-weight:500;color:#475569}
  .ivd-facts{display:grid;grid-template-columns:1fr .9fr .9fr 1.5fr;gap:18px;padding:12px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;margin:14px 0}
  .ivd-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 4px}
  .ivd-party{border:1px solid #dbe3ee;border-radius:10px;padding:11px 15px 12px;background:#fbfcfe}
  .ivd-party .ph{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0a2540;margin-bottom:5px}
  .ivd-party .pn{font-size:12px;font-weight:700;color:#0f172a;line-height:1.5;white-space:nowrap;overflow:hidden}
  .ivd-party .pa{font-size:10.5px;color:#64748b;margin-top:4px}
  .ivd-party .pa b{color:#334155;font-weight:650}
  /* Letter: lease-statement facts band (property gets the room) + brokerage-box rows.
     .ivd-sl scales the whole statement's rhythm up so the single page is used fully. */
  .ivd-facts.sl{grid-template-columns:.85fr 2.05fr 1.15fr .95fr;gap:14px}
  .ivd-facts.sr2{grid-template-columns:2.4fr 1fr;gap:14px}
  .ivd.ivd-sl .ivd-facts{padding:16px 0;margin:18px 0 20px}
  .ivd.ivd-sl .ivd-fact .fl{font-size:10px;margin-bottom:5px}
  .ivd.ivd-sl .ivd-fact .fv{font-size:12px}
  .ivd.ivd-sl .ivd-parties{gap:16px;margin:0 0 10px}
  .ivd.ivd-sl .ivd-party{padding:15px 18px 16px}
  .ivd.ivd-sl .ivd-party .ph{font-size:10px;margin-bottom:8px}
  .ivd.ivd-sl .ivd-party .pr{padding:6px 0;font-size:11.5px;grid-template-columns:112px 1fr;border-bottom:1px solid #f0f3f7}
  .ivd.ivd-sl .ivd-party .pr:last-child{border-bottom:0}
  .ivd.ivd-sl .ivd-items{margin-top:20px}
  .ivd.ivd-sl .ivd-item{padding:10px 16px;font-size:12px}
  .ivd.ivd-sl .ivd-due{margin-top:20px}
  .ivd.ivd-sl .ivd-para{font-size:11.5px;line-height:1.8;margin-top:14px}
  .ivd-party .pr{display:grid;grid-template-columns:104px 1fr;gap:8px;padding:4px 0;font-size:11px;line-height:1.5}
  .ivd-party .pr i{font-style:normal;font-weight:700;color:#64748b;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;padding-top:1px}
  .ivd-party .pr span{color:#0f172a;font-weight:600}
  .ivd-item i em.soft{font-style:normal;font-weight:500;color:#64748b;font-size:10.5px}
  /* Letter: commercial-lease per-year commission table */
  .ivd-yt{margin:14px 0 4px;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
  .ivd-yt-row{display:grid;grid-template-columns:1fr 1fr 1.3fr 1.2fr 1.5fr;gap:0;font-size:11.5px}
  .ivd-yt-row span{padding:7px 12px;border-bottom:1px solid #eef2f6;color:#0f172a}
  .ivd-yt-row span.n{text-align:right;font-variant-numeric:tabular-nums}
  .ivd-yt-row.hd span{background:#f8fafc;color:#475569;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #e2e8f0}
  .ivd-yt-row.sum span{border-bottom:0;color:#334155;font-weight:650}
  .ivd-yt-row:last-child span{border-bottom:0}
  /* Letter: resale-statement recipient + paragraphs */
  .ivd-rcpt{margin:2px 0 4px;font-size:11.5px;line-height:1.7;color:#0f172a}
  .ivd-rcpt b{font-size:12.5px}
  .ivd-refline{margin:14px 0 4px;font-size:11.5px;color:#334155;border-top:2px solid #0a2540;padding-top:10px}
  .ivd-refline b{color:#0f172a}
  .ivd-para{margin-top:11px;font-size:11px;line-height:1.65;color:#475569}
  .ivd-para b{color:#0f172a}
  /* Compose: commercial-lease year rows */
  .inv-clyear-hd{display:grid;grid-template-columns:76px 1fr 1fr 130px;gap:9px;margin:6px 0 3px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .inv-clyear-row{display:grid;grid-template-columns:76px 1fr 1fr 130px;gap:9px;align-items:center;margin-bottom:6px}
  .inv-clyear-row .yl{font-size:12px;font-weight:700;color:var(--ink-soft)}
  .inv-clyear-row input{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;padding:7px 10px;text-align:right;min-width:0}
  .inv-clyear-row .yb{font-size:12px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

  .cn-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cn-summary>div{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 12px}
  .cn-summary b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
  .cn-summary strong{font-size:15px;color:var(--ink)}
  .cn-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cn-workflow>div{display:flex;align-items:center;gap:9px;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface-2);padding:9px 10px;color:var(--ink-soft);font-size:12px}
  .cn-workflow b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand,#146b4b);color:#fff;font-size:11px;flex:0 0 auto}
  .cn-email-card,.cn-wait,.cn-doc{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:14px 16px}
  .cn-card-title{font-weight:700;color:var(--ink);font-size:13px;margin-bottom:10px}
  .cn-email-row{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start;padding:7px 0;border-top:1px solid var(--line-soft);font-size:12.5px}
  .cn-email-row:first-of-type{border-top:0}
  .cn-email-row b{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
  .cn-email-row select{width:max-content;max-width:100%;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);padding:6px 28px 6px 8px;font-size:12px}
  .cn-chips{display:flex;gap:5px;flex-wrap:wrap}
  .cn-chip{display:inline-flex;align-items:center;border:1px solid var(--line-soft);border-radius:999px;background:var(--surface-2);padding:3px 8px;color:var(--ink-soft);font-size:11.5px}
  .cn-email-body{width:100%;min-height:132px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:12.5px;line-height:1.45;padding:10px;margin:10px 0;resize:vertical}
  .cn-doc{max-width:760px;margin:0 auto;color:#1f2933;line-height:1.45;background:#fff}
  /* Square Yards letterhead — mirrors the TRS sheet header/footer */
  .cn-letterhead{display:flex;align-items:center;gap:22px;margin-bottom:4px}
  .cn-letterhead .cn-sylogo{flex-shrink:0;display:flex;align-items:flex-start;gap:7px}
  .cn-letterhead .cn-sylogo .sq{width:15px;height:15px;background:#000;margin-top:5px}
  .cn-letterhead .cn-sylogo .wm{font-weight:700;font-size:30px;line-height:.92;letter-spacing:-.5px;color:#000}
  .cn-letterhead .cn-lh-titles{flex:1;text-align:center}
  .cn-letterhead .cn-lh-co{font-weight:700;font-size:16px;color:#000}
  .cn-letterhead .cn-lh-doc{font-size:12px;letter-spacing:.35em;font-weight:600;color:#222;text-transform:uppercase}
  .cn-lh-rule{border-top:2.5px solid #000;margin:6px 0 14px}
  .cn-doc-foot{margin-top:22px;border-top:2px solid #000;padding-top:8px;display:flex;justify-content:space-between;gap:14px;font-size:11px;color:#1f2933;line-height:1.9}
  .cn-doc-foot b{font-size:11px}
  .cn-doc-top{display:flex;justify-content:space-between;gap:12px;color:#596579;font-size:12px;margin-bottom:8px}
  .cn-crn{font-weight:700;font-size:12px;margin-bottom:18px}
  .cn-crn .cn-crn-pending{font-weight:400;color:#596579}
  .cn-to-input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);padding:6px 8px;font-size:12px;font-family:inherit}
  .cn-to-input.cn-missing,.cn-agent-email.cn-missing{border-color:var(--red,#c4453d)}
  .cn-agent-email{border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);padding:3px 8px;font-size:11.5px;font-family:inherit;min-width:210px}
  .cn-team-list{display:flex;flex-wrap:wrap;gap:4px 12px}
  .cn-team-row{display:inline-flex;align-items:center;gap:6px;margin:2px 0}
  /* Slot covered by the BCC list / another slot — dimmed, no duplicate is sent */
  .cn-agent-email.cn-dup{opacity:.55;border-style:dashed}
  .cn-from-fixed{display:inline-flex;align-items:center;border:1px solid var(--line-soft);border-radius:7px;background:var(--surface-2);padding:6px 8px;font-size:12px;color:var(--ink)}
  .cn-table td[contenteditable]{cursor:text}
  .cn-table td[contenteditable]:hover{background:#fbfcff}
  .cn-table td[contenteditable]:focus{outline:2px solid #9db8e8;outline-offset:-2px;background:#f6f9ff}
  .cn-edit-hint{color:var(--muted);font-size:11px;margin:2px 0 8px}
  /* Print density — applied to .cn-doc only while capturing the signing PDF.
     Tightens type so the letter's aspect approaches US-Letter and renders
     near full-width on the page with safe margins. */
  .cn-doc.cn-print{font-size:12.5px;line-height:1.5;padding:24px 30px}
  .cn-doc.cn-print p{margin:7px 0}
  .cn-doc.cn-print .cn-doc-top{margin-bottom:6px}
  .cn-doc.cn-print .cn-crn{margin-bottom:12px}
  .cn-doc.cn-print .cn-to{margin:0 0 12px}
  .cn-doc.cn-print .cn-table{margin:8px 0 10px;font-size:12px}
  .cn-doc.cn-print .cn-table th,.cn-doc.cn-print .cn-table td{padding:5px 8px}
  .cn-doc.cn-print .cn-terms{font-size:12px;margin:6px 0 10px}
  .cn-doc.cn-print .cn-terms li{margin:3px 0}
  .cn-doc.cn-print h4{margin:10px 0 6px}
  .cn-doc.cn-print .cn-sign-line{margin-top:26px}
  .cn-doc.cn-print .cn-important{margin-top:14px;padding-top:8px;font-size:11px}
  .cn-doc.cn-print .cn-doc-foot{margin-top:14px;font-size:10px;line-height:1.7}
  /* Credit Note signing-state banner (draft ↔ out-for-signing ↔ signed ↔ declined/voided) */
  .cn-status{border-radius:8px;padding:12px 14px;font-size:12.5px;line-height:1.6;margin-bottom:12px;border:1px solid var(--line)}
  .cn-status b{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
  .cn-status.sent{background:rgba(26,111,176,.08);border-color:rgba(26,111,176,.35);color:var(--ink)}
  .cn-status.done{background:rgba(20,107,75,.08);border-color:rgba(20,107,75,.35);color:var(--ink)}
  .cn-status.dead{background:rgba(196,69,61,.08);border-color:rgba(196,69,61,.4);color:var(--ink)}
  /* Credit Note tab header button in its "Void Credit Note" (signed) state */
  .btn.btn-pri.btn-danger{background:var(--red,#c4453d);border-color:var(--red,#c4453d);color:#fff}
  .btn.btn-pri.btn-danger:hover{background:#a93a33;border-color:#a93a33}
  .cn-email-ok{color:#146b4b;font-weight:600}
  .cn-email-bad{color:var(--red,#c4453d);font-weight:600}
  .cn-resend{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
  .cn-resend .cn-to-input{max-width:340px}
  .mini-btn.danger{color:var(--red,#c4453d)}
  .cn-to{margin:0 0 18px}
  .cn-doc h3{text-align:center;letter-spacing:.08em;margin:10px 0 18px;font-size:18px}
  .cn-doc h4{margin:14px 0 8px;font-size:13px}
  .cn-table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:12.5px}
  .cn-table th,.cn-table td{border:1px solid #d8dde6;padding:7px 9px;text-align:left;vertical-align:top}
  .cn-table th{width:34%;background:#f7f9fc;color:#3c4658}
  .cn-terms{padding-left:18px;margin:8px 0 14px;font-size:12.5px}
  .cn-terms li{margin:5px 0}
  .cn-sign-line{margin-top:34px;padding-top:8px;border-top:1px solid #222;width:210px;font-size:12px;color:#394150}
  .cn-important{border-top:1px solid #d8dde6;margin-top:24px;padding-top:10px;font-size:12px}
  .cn-wait p{margin:6px 0 12px;color:var(--muted);font-size:12.5px}
  .cn-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cn-mini-grid span{border:1px solid var(--line-soft);border-radius:8px;background:var(--surface-2);padding:8px 10px;font-size:12px;min-width:0}
  .cn-mini-grid b{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
  @media (max-width:760px){.cn-summary,.cn-workflow,.cn-mini-grid{grid-template-columns:1fr}.cn-email-row{grid-template-columns:1fr;gap:4px}}

/* ============================================================================
 * TCF List + Preview Popover + Sync Banners (added 2026-06-13)
 * ========================================================================== */

/* --- Header toggle button "on" state --- */
.tb-btn.tcf-toggle.on{ background:var(--accent, #2563eb)!important; color:#fff!important; border-color:transparent }
.tb-btn.tcf-toggle.on svg{ stroke:#fff }

/* --- Sync banner --- */
.sync-banner-slot{ margin:0 0 8px 0 }
.sync-banner{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface, #fff); color:var(--muted, #666);
  font-size:12px; line-height:1.4;
}
.sync-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px }
.sync-dot.ok{ background:#10b981 }
.sync-dot.warn{ background:#f59e0b }
.sync-dot.err{ background:#ef4444 }
.sync-title{ font-weight:600; color:var(--ink) }
.sync-sep{ opacity:.4 }
.sync-meta b{ font-weight:500; color:var(--ink); margin-right:3px }
.sync-count{ opacity:.7 }
.sync-cad{ opacity:.6; font-style:italic }
.sync-err{ color:#ef4444; margin-left:auto; font-size:11px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sync-refresh{
  margin-left:auto; background:transparent; border:1px solid var(--line);
  color:var(--muted); cursor:pointer; padding:2px 8px; border-radius:4px; font-size:13px;
}
.sync-refresh:hover{ background:rgba(0,0,0,.04); color:var(--ink) }

/* --- TCF cell link in ledger --- */
.col-tcf .tcf-link{
  color:var(--accent, #2563eb); cursor:pointer; text-decoration:none;
  border-bottom:1px dashed transparent; padding:1px 0;
}
.col-tcf .tcf-link:hover{ border-bottom-color:var(--accent, #2563eb) }

/* --- TCF Preview popover --- */
.tcf-popover{
  position:absolute; z-index:9999;
  background:var(--surface, #fff); border:1px solid var(--line);
  border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,.16);
  padding:0; overflow:hidden;
  animation: tcfPopIn .12s ease-out;
}
@keyframes tcfPopIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:translateY(0) } }
.tcf-pop-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.02);
}
.tcf-pop-title{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); flex:1 }
/* Chat launcher in the card head: compact ghost pill hugging the close × */
.tcf-pop-head .cv2-launch{ padding:3px 10px; font-size:11.5px; border-radius:999px; margin-right:4px }
.tcf-pop-close{ background:transparent; border:none; cursor:pointer; font-size:20px; color:var(--muted); line-height:1; padding:2px 6px }
.tcf-pop-close:hover{ color:var(--ink) }
.tcf-pop-body{ padding:12px 14px }
.tcf-pop-loading{ color:var(--muted); font-size:13px; text-align:center; padding:20px 0 }
.tcf-pop-empty{ text-align:center; padding:10px 0 }
.tcf-pop-empty .tcf-pop-tcf{ font-size:15px; font-weight:600; margin-bottom:6px }
.tcf-pop-empty .tcf-pop-note{ font-size:12px; color:var(--muted); margin-bottom:12px }
.tcf-pop-id{ margin-bottom:8px }
.tcf-pop-tcf{ font-size:13px; font-weight:600; color:var(--ink) }
.tcf-pop-deal{ font-size:12px; color:var(--muted); margin-top:2px }
.tcf-pop-statline{ display:flex; gap:6px; align-items:center; margin-bottom:10px; flex-wrap:wrap }
.tcf-badge{
  display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;
  background:rgba(0,0,0,.08); color:var(--ink); border:1px solid var(--line);
}
.tcf-stat-collected{ background:#dbeafe; color:#1e40af; border-color:#bfdbfe }
.tcf-stat-confirmed{ background:#d1fae5; color:#065f46; border-color:#a7f3d0 }
.tcf-stat-deleted{ background:#f3f4f6; color:#4b5563; border-color:#e5e7eb }
.tcf-stat-loggedin{ background:#fef3c7; color:#92400e; border-color:#fde68a }
.tcf-stat-cancelled{ background:#fee2e2; color:#991b1b; border-color:#fecaca }
.tcf-stat-resubmit{ background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff }
.tcf-stat-preapproval{ background:#cffafe; color:#155e75; border-color:#a5f3fc }
.tcf-stat-unknown{ background:#f3f4f6; color:#9ca3af; border-color:#e5e7eb }
.tcf-bucket{ font-size:11px; color:var(--muted); padding:2px 8px; border:1px dashed var(--line); border-radius:10px }
.tcf-pop-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
  font-size:12px; margin-bottom:12px;
}
.tcf-pop-grid > div{ display:flex; flex-direction:column }
.tcf-pop-grid .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px }
.tcf-pop-grid .val{ font-weight:500; color:var(--ink); margin-top:1px }
.tcf-pop-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-top:10px; border-top:1px solid var(--line);
}
.tcf-pop-synced{ font-size:11px; color:var(--muted) }
/* ---- TCF Preview card v2 (approved mockup v5, 2026-07-07) ----
   Light + colourful: soft weights, pastel tinted panels, colour-dot revenue
   tiles, state-tinted cash-back band with Paid/Not-paid + Credit Note chips.
   The TCF List Dashboard carries a copy of these rules (standalone page) —
   keep both in sync when editing. */
.tcf-popover{border-radius:14px;border:none;box-shadow:0 12px 40px rgba(30,45,80,.14)}
.tcf-popover .tcf-pop-head{border-radius:14px 14px 0 0;background:linear-gradient(90deg,rgba(76,140,205,.08),rgba(238,150,80,.07))}
.tp2-toprow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tp2-ref{font-size:11.5px;font-weight:500;letter-spacing:.5px;color:var(--muted)}
.tp2-badges{display:flex;gap:6px;flex-shrink:0}
/* One line, always: the renderer shrinks the font (16.5 → 12.5px floor) until
   the name fits; extreme names ellipsize with the full name in the title. */
.tp2-client{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.34;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp2-meta{font-size:12.3px;color:var(--muted);margin-top:4px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp2-meta em{font-style:normal;color:var(--ink);opacity:.85;font-weight:500}
.tp2-dot{margin:0 8px;opacity:.55}
.tp2-addr{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:11px 13px;background:linear-gradient(100deg,rgba(76,140,205,.08),rgba(76,140,205,.03));border-radius:11px}
.tp2-pin{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:rgba(76,140,205,.14);color:#3f7fc0;flex-shrink:0}
.tp2-addr1{font-size:13.3px;font-weight:500;color:var(--ink);line-height:1.4;padding-top:3px}
.tp2-addr2{font-size:11.8px;color:var(--muted);margin-top:2px}
.tp2-fin{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.tp2-fin>div{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:10px;background:var(--surface-2,#f8fafc)}
.tp2-fin .d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.tp2-fin .d.gprice{background:#5c6ac4}
.tp2-fin .d.nprice{background:#2fa8a0}
.tp2-fin .d.gross{background:#7c96e8}
.tp2-fin .d.net{background:#4cb8a4}
.tp2-fin .d.inv{background:#eebd66}
.tp2-fin .d.col{background:#79c98b}
.tp2-fin .d.pnl{background:#b48ce0}
.tp2-fin .d.mgmt{background:#e78fb3}
.tp2-fin span:not(.d){display:block;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.55px;color:var(--muted)}
.tp2-fin b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.tp2-cb{margin-top:12px;padding:10px 13px;border-radius:11px;background:linear-gradient(100deg,rgba(126,110,220,.08),rgba(126,110,220,.03))}
.tp2-cb.is-paid{background:linear-gradient(100deg,rgba(48,158,116,.11),rgba(48,158,116,.04))}
.tp2-cb.is-unpaid{background:linear-gradient(100deg,rgba(224,112,100,.1),rgba(224,112,100,.04))}
.tp2-cb.is-part{background:linear-gradient(100deg,rgba(233,168,72,.13),rgba(233,168,72,.04))}
.tp2-cb-part{margin-top:5px;font-size:11px;font-weight:600;color:#a5701c;font-variant-numeric:tabular-nums;text-align:right}
.tp2-cb-row{display:flex;align-items:center;gap:10px}
.tp2-cb-lbl{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.55px;color:var(--muted)}
.tp2-cb-amt{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto}
.tp2-cn-row{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(120,130,160,.3)}
.tp2-cn-status{margin-left:auto;display:inline-flex;align-items:center;gap:7px}
.tp2-crn{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tp2-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:999px;padding:3.5px 11px}
.tp2-chip.paid{background:rgba(48,158,116,.15);color:#1e7d59}
.tp2-chip.unpaid{background:rgba(224,112,100,.14);color:#c05a4e}
.tp2-chip.part{background:rgba(233,168,72,.18);color:#a5701c}
.tp2-chip.cn-issued{background:rgba(48,158,116,.15);color:#1e7d59}
.tp2-chip.cn-signing{background:rgba(233,168,72,.18);color:#a5701c}
.tp2-chip.cn-none{background:rgba(130,140,165,.14);color:var(--muted)}
.tp2-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:11px;border-top:1px solid var(--line,#eef1f6)}
/* Dates must never truncate (Rishi 2026-07-09) — they wrap to a second line
   inside their own flex box; the CTA stays one line on the right. */
.tp2-upd{font-size:11.5px;color:var(--muted);flex:1;min-width:0;line-height:1.5}
.tp2-upd b{color:var(--ink-soft,#5a647d);font-weight:500}
.tcf-pop-cta{
  display:inline-block; padding:5px 12px; border-radius:5px;
  background:var(--accent, #2563eb); color:#fff!important; text-decoration:none;
  font-size:12px; font-weight:500;
  white-space:nowrap; flex-shrink:0; margin-left:10px;
}
.tcf-pop-cta:hover{ filter:brightness(1.1) }

/* --- TCF List panel (full-screen view) --- */
.tcf-list-panel{
  position:fixed; left:0; right:0; top:64px; bottom:0;
  background:var(--bg, #f7f8fa); overflow-y:auto;
  z-index:100; padding:16px 20px 60px;
}
body.tcf-list-on .table-wrap,
body.tcf-list-on .kpis,
body.tcf-list-on .controls,
body.tcf-list-on .sel-bar,
body.tcf-list-on .banner{ display:none!important }

.tcf-list-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:14px; flex-wrap:wrap;
}
.tcf-list-title{ display:flex; align-items:center; gap:10px }
.tcf-list-title h2{ margin:0; font-size:20px; font-weight:600 }
.tcf-list-sub{ color:var(--muted); font-size:12px }
.tcf-list-actions{ display:flex; gap:8px; flex-wrap:wrap }

.tcf-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-bottom:14px;
}
.tcf-kpi{
  background:var(--surface, #fff); border:1px solid var(--line);
  border-radius:8px; padding:10px 14px;
}
.tcf-kpi.wide{ grid-column:span 1 }
.tcf-kpi .kpi-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:4px }
.tcf-kpi .kpi-val{ font-size:20px; font-weight:600; color:var(--ink) }

.tcf-list-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:14px; margin-bottom:14px;
}
@media (max-width:900px){ .tcf-list-grid{ grid-template-columns:1fr } }

.tcf-funnel-card, .tcf-controls-card{
  background:var(--surface, #fff); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px;
}
.tcf-card-head{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); margin-bottom:8px;
}
.tcf-funnel{ display:flex; flex-direction:column; gap:5px }
.funnel-row{
  display:grid; grid-template-columns:90px 1fr 50px; align-items:center; gap:10px;
  font-size:11px; cursor:pointer; padding:3px 0;
}
.funnel-row:hover{ background:rgba(0,0,0,.03); border-radius:4px }
.funnel-lbl{ font-weight:500; color:var(--ink) }
.funnel-bar{ background:rgba(0,0,0,.06); border-radius:4px; height:10px; overflow:hidden }
.funnel-fill{ display:block; height:100%; transition:width .2s ease }
.funnel-cnt{ text-align:right; font-variant-numeric:tabular-nums; color:var(--muted) }

.tcf-controls{ display:flex; flex-direction:column; gap:8px }
.tcf-input{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface, #fff); color:var(--ink); font-size:13px;
}
.tcf-input:focus{ outline:none; border-color:var(--accent, #2563eb) }

.tcf-list-body{
  background:var(--surface, #fff); border:1px solid var(--line); border-radius:8px;
  overflow:hidden;
}
.tcf-empty{ padding:60px 20px; text-align:center; color:var(--muted); font-size:13px }
.tcf-empty small{ color:var(--muted); opacity:.7 }
.tcf-table-wrap{ overflow-x:auto; max-height:calc(100vh - 480px); overflow-y:auto }
.tcf-table{ width:100%; border-collapse:collapse; font-size:12px }
.tcf-table thead th{
  position:sticky; top:0; background:var(--surface, #fff); z-index:2;
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
  font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  white-space:nowrap;
}
.tcf-table th.num, .tcf-table td.num{ text-align:right; font-variant-numeric:tabular-nums }
.tcf-table th.asc::after{ content:" ▲"; opacity:.5 }
.tcf-table th.desc::after{ content:" ▼"; opacity:.5 }
.tcf-table tbody td{ padding:7px 10px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top }
.tcf-table tbody tr:hover{ background:rgba(0,0,0,.02) }
.tcf-cell-id{ font-weight:600; font-family:'SF Mono','Monaco','Menlo',monospace; font-size:11px }
.tcf-pill{ display:inline-block; padding:2px 8px; border-radius:10px; border:1px solid; font-size:11px; font-weight:600; letter-spacing:.3px }
.tcf-beats-link{ color:var(--accent, #2563eb); text-decoration:none; font-size:11px }
.tcf-beats-link:hover{ text-decoration:underline }
.tcf-pager{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted);
}
.tcf-pager .pg-ctrls{ display:flex; gap:6px; align-items:center }
.tcf-pager button{
  background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer;
  padding:3px 10px; border-radius:4px; font-size:12px;
}
.tcf-pager button:disabled{ opacity:.4; cursor:not-allowed }
.tcf-pager button:hover:not(:disabled){ background:rgba(0,0,0,.04) }

/* Dark mode for the new bits relies on the existing CSS vars. */

/* ============================================================
   Breadcrumb bar (Sprint A, QW-1)
   Hidden by default; .show toggled by crumbs.js when trail > 1.
============================================================ */
.crumb-bar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 16px;
  margin:0 0 6px 0;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.2;
  min-height:30px;
  box-sizing:border-box;
}
.crumb-bar.show{ display:flex; }
.crumb-trail{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.crumb{
  display:inline-flex;
  align-items:center;
  padding:2px 6px;
  border-radius:3px;
  font-weight:500;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.crumb-link{
  color:var(--brand-2);
  cursor:pointer;
  text-decoration:none;
  background:transparent;
  transition:background 90ms ease;
  border:1px solid transparent;
}
.crumb-link:hover{
  background:rgba(26,111,176,.08);
  text-decoration:underline;
}
.crumb-link:focus-visible{
  outline:none;
  border-color:var(--brand-2);
}
.crumb-cur{
  color:var(--ink);
  font-weight:600;
  background:rgba(0,0,0,.04);
}
.crumb-sep{
  color:var(--faint);
  margin:0 2px;
  user-select:none;
}
.crumb-close{
  flex:0 0 auto;
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:16px;
  line-height:1;
  width:22px;
  height:22px;
  border-radius:3px;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 90ms ease;
}
.crumb-close:hover{
  background:rgba(204,67,67,.08);
  border-color:rgba(204,67,67,.3);
  color:#c0392b;
}

/* ============================================================
   Keyboard shortcuts overlay (Sprint A, QW-5)
============================================================ */
.kbd-overlay-scrim{
  position:fixed; inset:0;
  background:rgba(13,27,42,.55);
  z-index:9000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.kbd-overlay-scrim.open{ display:flex; }
.kbd-overlay{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  width:min(560px, 100%);
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  font-size:13px;
  color:var(--ink);
}
.kbd-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.kbd-head h3{ margin:0; font-size:15px; font-weight:600; color:var(--ink); }
.kbd-x{
  background:transparent; border:none; color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer; padding:0; width:24px; height:24px;
}
.kbd-x:hover{ color:var(--ink); }
.kbd-body{ padding:14px 18px; overflow:auto; }
.kbd-section{ margin-bottom:16px; }
.kbd-section:last-child{ margin-bottom:0; }
.kbd-section h4{
  margin:0 0 8px 0; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.kbd-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0;
  border-bottom:1px solid var(--line-soft);
}
.kbd-row:last-child{ border-bottom:none; }
.kbd-keys{ display:flex; gap:4px; align-items:center; flex:0 0 auto; }
.kbd-desc{ color:var(--ink-soft); flex:1 1 auto; text-align:right; }
.kbd-overlay kbd{
  background:#f1f4f8;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:4px;
  padding:2px 7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--ink);
  font-weight:600;
  min-width:18px;
  text-align:center;
}
.kbd-foot{
  padding:10px 18px; border-top:1px solid var(--line);
  font-size:11px; color:var(--muted);
}
.kbd-foot code{
  background:#f1f4f8; padding:1px 5px; border-radius:3px; font-size:11px;
}

/* Toast cluster badge (Sprint A, QW-9) */
.toast-cluster-badge{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  background:rgba(255,255,255,.22);
  border-radius:9px;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   Inline row actions (Sprint B, QW-2)
============================================================ */
.row-acts{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:6px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 90ms ease;
}
tbody tr:hover .row-acts{ visibility:visible; opacity:1; pointer-events:auto; }
td.col-trade .row-acts{ margin-left:8px; vertical-align:middle; }
tbody tr:hover .col-row .rownum{ display:inline-block; }
.row-act{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:2px 4px;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:all 90ms ease;
}
.row-act:hover{
  background:rgba(26,111,176,.10);
  border-color:rgba(26,111,176,.25);
  color:var(--brand-2);
}

/* ============================================================
   EFT row actions + Recent files pin (Sprint B, QW-3 & QW-6)
============================================================ */
.eft-row-acts-cell{ white-space:nowrap; }
.eft-row-act{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:3px 5px;
  margin-left:2px;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:all 90ms ease;
  vertical-align:middle;
}
.eft-row-act:hover{
  background:rgba(26,111,176,.10);
  border-color:rgba(26,111,176,.25);
  color:var(--brand-2);
}
.eft-recent{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  margin:0 0 10px 0;
  background:rgba(26,111,176,.04);
  border:1px solid rgba(26,111,176,.12);
  border-radius:6px;
  flex-wrap:wrap;
}
.eft-recent-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  color:var(--muted);
}
.eft-recent-chip{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink-soft);
  padding:3px 9px;
  border-radius:14px;
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  cursor:pointer;
  transition:all 90ms ease;
}
.eft-recent-chip:hover{
  background:rgba(26,111,176,.08);
  border-color:rgba(26,111,176,.25);
  color:var(--brand-2);
}

/* ============================================================
   Saved Views menu (Sprint B, QW-4)
============================================================ */
.views-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  width:300px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  z-index:200;
  overflow:hidden;
  font-size:13px;
  color:var(--ink);
}
.views-head{
  padding:10px 14px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  border-bottom:1px solid var(--line-soft);
  background:rgba(0,0,0,.02);
}
.views-empty{
  padding:14px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
.views-list{
  max-height:300px;
  overflow:auto;
  padding:4px 0;
}
.views-item{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--line-soft);
}
.views-item:last-child{ border-bottom:none; }
.views-item-main{
  flex:1 1 auto;
  text-align:left;
  background:transparent;
  border:none;
  padding:8px 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  transition:background 90ms ease;
}
.views-item-main:hover{ background:rgba(26,111,176,.06); }
.views-name{
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.views-meta{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.views-del{
  flex:0 0 auto;
  background:transparent;
  border:none;
  border-left:1px solid var(--line-soft);
  width:28px;
  font-size:16px;
  color:var(--muted);
  cursor:pointer;
  transition:all 90ms ease;
}
.views-del:hover{
  background:rgba(204,67,67,.10);
  color:#c0392b;
}
.views-foot{
  padding:8px 14px;
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.02);
  display:flex;
  align-items:center;
}

/* ==========================================================================
 * Sprint C — new component styles
 * F1: sync-pill-new (new-since-open pill)
 * F2: activity panel
 * F3: dup-warn panel
 * F4: agent dashboard (in agents.html — mirrored minimal styles here for KPI
 *     cards used inside the main app if needed)
 * F5: mobile/tablet responsive read-only (body.mobile-on guards all rules)
 * ========================================================================== */

/* ---- F1: New-since-open pill ---- */
.sync-pill-new{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(31,111,235,.12);color:var(--brand-2,#1a6fb0);
  border:1px solid rgba(31,111,235,.25);border-radius:20px;
  padding:5px 12px;font-size:12px;font-weight:600;
  margin:4px 0 6px;cursor:default;
}
.sync-pill-new .spn-dismiss{
  background:none;border:none;color:inherit;opacity:.7;cursor:pointer;
  padding:0;display:flex;align-items:center;
}
.sync-pill-new .spn-dismiss:hover{opacity:1}

/* ---- F2: Activity panel ---- */
.activity-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:150;
}
.activity-panel{
  position:fixed;top:0;right:-400px;bottom:0;width:380px;
  background:var(--panel,#fff);border-left:1px solid var(--line,#e5e7eb);
  box-shadow:-4px 0 24px rgba(0,0,0,.12);z-index:151;
  display:flex;flex-direction:column;transition:right .25s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.activity-panel.open{right:0}
.ap-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line,#e5e7eb);
  flex-shrink:0;background:var(--panel,#fff);
}
.ap-title{font-weight:700;font-size:13px;color:var(--txt,#1c2430)}
.ap-close{
  background:none;border:none;color:var(--muted,#6b7280);cursor:pointer;
  padding:4px;border-radius:6px;display:flex;align-items:center;
}
.ap-close:hover{background:var(--panel-2,#f3f4f6);color:var(--txt,#1c2430)}
.ap-body{flex:1;overflow-y:auto;padding:12px 16px}
.ap-loading,.ap-empty{color:var(--muted,#6b7280);font-size:13px;padding:16px 0}

/* Timeline */
.ap-timeline{list-style:none;padding:0;margin:0;position:relative}
.ap-timeline::before{
  content:'';position:absolute;left:7px;top:8px;bottom:0;
  width:2px;background:var(--line,#e5e7eb);
}
.ap-item{
  display:flex;gap:12px;padding:0 0 16px;position:relative;
}
.ap-dot{
  flex-shrink:0;width:14px;height:14px;border-radius:50%;
  background:var(--brand-2,#1a6fb0);border:2px solid var(--panel,#fff);
  margin-top:2px;z-index:1;
}
.ap-content{min-width:0}
.ap-verb{font-weight:600;font-size:13px;color:var(--txt,#1c2430);margin-bottom:2px}
.ap-detail{font-size:13px;color:var(--txt,#1c2430);margin-bottom:4px;
  word-break:break-word;line-height:1.4}
.ap-meta{display:flex;gap:8px;flex-wrap:wrap}
.ap-actor{font-size:12px;font-weight:600;color:var(--accent,#e8841a)}
.ap-when{font-size:11px;color:var(--muted,#6b7280)}

/* F2: activity button in TCF list table */
.tcf-act-btn{
  background:none;border:1px solid var(--line,#e5e7eb);border-radius:6px;
  padding:4px 7px;cursor:pointer;color:var(--muted,#697586);
  display:inline-flex;align-items:center;transition:.14s;
}
.tcf-act-btn:hover{background:var(--blue-bg,rgba(31,111,235,.08));border-color:var(--blue,#1f6feb);color:var(--blue,#1f6feb)}

/* ---- F3: Duplicate-warn panel ---- */
.dup-warn{
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.4);
  border-radius:10px;padding:12px 14px;margin-bottom:12px;
  animation:fadeIn .2s ease;
}
.dup-warn-head{font-weight:700;font-size:13px;color:var(--amber,#b8860b);margin-bottom:8px}
.dup-list{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:5px}
.dup-item{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.dup-trade{font-weight:700;color:var(--txt,#1c2430)}
.dup-client{font-weight:600}
.dup-agent{color:var(--muted,#697586)}
.dup-when{color:var(--muted,#697586)}
.dup-recent{background:rgba(239,68,68,.1);color:var(--red,#cf222e);
  font-size:11px;font-weight:700;padding:1px 5px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.04em}
.dup-view{font-size:11px;padding:3px 8px;margin-left:2px}
.dup-actions{font-size:12px;color:var(--muted,#697586);border-top:1px solid rgba(251,191,36,.3);
  padding-top:7px;margin-top:4px}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ---- F5: Mobile/tablet responsive (body.mobile-on gate) ---- */

/* Tablet 768px–1024px */
@media(min-width:769px) and (max-width:1024px){
  body.mobile-on .kpis{flex-wrap:wrap}
  body.mobile-on .kpi{flex:0 0 calc(33.33% - 6px);min-width:0}
  /* Hide low-priority columns on tablet */
  body.mobile-on table td:nth-child(n+9):not(:last-child),
  body.mobile-on table th:nth-child(n+9):not(:last-child){ display:none }
  body.mobile-on .controls{gap:6px}
  body.mobile-on .btn span{display:none}
  body.mobile-on .btn{padding:7px 8px}
}

/* Phone <=768px */
@media(max-width:768px){
  /* Topbar: hide everything except logo, avatar, hamburger */
  body.mobile-on .topbar-group,
  body.mobile-on .topbar-divider,
  body.mobile-on #newDealBtn,
  body.mobile-on .filter-toggle span,
  body.mobile-on .ctrl-r .btn span,
  body.mobile-on #rtPill{ display:none!important }
  body.mobile-on .hamburger-btn{ display:flex!important }

  /* Hide side nav if present */
  body.mobile-on .side-nav{ display:none }

  /* Hide edit affordances */
  body.mobile-on .lbl-edit,
  body.mobile-on .fld-grip,
  body.mobile-on .dr-customize,
  body.mobile-on #drCustomize,
  body.mobile-on [data-editonly]{ display:none!important }

  /* Hide Add Deal button */
  body.mobile-on #newDealBtn{ display:none!important }

  /* Deal table -> card layout */
  body.mobile-on .table-wrap table,
  body.mobile-on .table-wrap thead,
  body.mobile-on .table-wrap tbody,
  body.mobile-on .table-wrap th,
  body.mobile-on .table-wrap td,
  body.mobile-on .table-wrap tr{ display:block }

  body.mobile-on .table-wrap thead tr{ display:none }

  body.mobile-on .table-wrap tbody tr{
    background:var(--panel,#fff);
    border:1px solid var(--line,#e5e7eb);border-radius:10px;
    margin:0 0 8px;padding:10px 12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 12px;
  }

  /* Show only key columns on mobile cards; hide others */
  body.mobile-on .table-wrap tbody td{ padding:2px 0;font-size:12px }
  body.mobile-on .table-wrap tbody td:nth-child(n+6){ display:none }
  body.mobile-on .table-wrap tbody td:first-child{ grid-column:1/-1;font-weight:700 }

  /* KPI cards: full-width stack */
  body.mobile-on .kpis{ flex-direction:column;gap:4px }
  body.mobile-on .kpi{ min-width:100%;flex:none }

  /* Filters accordion */
  body.mobile-on .filter-row{
    position:relative;overflow:hidden;max-height:0;transition:max-height .25s ease;
  }
  body.mobile-on .filter-row.open{ max-height:600px }

  /* Controls: wrap tighter */
  body.mobile-on .controls{ gap:6px;padding:8px 10px }
  body.mobile-on .search{ min-width:0;flex:1 }

  /* Drawer: full-width with bottom action buttons */
  body.mobile-on .drawer{
    left:0;right:0;bottom:0;width:100%;max-width:100%;top:auto;
    border-radius:16px 16px 0 0;height:85vh;
  }
  body.mobile-on .drawer.open{ transform:none }
  body.mobile-on .dr-foot{
    position:sticky;bottom:0;background:var(--panel,#fff);
    border-top:1px solid var(--line,#e5e7eb);padding:10px 14px;
    display:flex;gap:8px;justify-content:flex-end;
  }

  /* Activity panel: full-width */
  body.mobile-on .activity-panel{ width:100%;right:-100% }
  body.mobile-on .activity-panel.open{ right:0 }

  /* TCF dashboard card layout */
  body.mobile-on .tablecard table,
  body.mobile-on .tablecard thead,
  body.mobile-on .tablecard tbody,
  body.mobile-on .tablecard th,
  body.mobile-on .tablecard td,
  body.mobile-on .tablecard tr{ display:block }
  body.mobile-on .tablecard thead tr{ display:none }
  body.mobile-on .tablecard tbody tr{
    background:var(--panel,#fff);
    border:1px solid var(--line,#e5e7eb);border-radius:10px;
    margin:0 0 8px;padding:10px 12px;
  }
  body.mobile-on .tablecard tbody td{ padding:3px 0;font-size:12px }
  body.mobile-on .tablecard tbody td:nth-child(n+7){ display:none }
}
/* End Sprint C CSS */

/* ============================================================
 * Intake v2 (2026-06-23): notifications drawer + Fell Through pill
 * ============================================================ */

/* Bell pulse — brief glow when a new notification arrives */
@keyframes notifPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,51,46,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(232,51,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,51,46,0); }
}
#notifBtn.notif-pulse { animation: notifPulse 1.1s ease-out; }

/* Drawer */
.notif-drawer{
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px;
  max-width: 92vw; background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e5e7eb);
  box-shadow: -16px 0 32px rgba(0,0,0,.08);
  transform: translateX(100%); transition: transform .2s ease;
  z-index: 4200; display: flex; flex-direction: column;
}
.notif-drawer.open{ transform: translateX(0); }

/* "Clear all" — quiet text button in the drawer header (desktop + phone) */
.notif-clearall{
  border:0; background:none; font:inherit; font-size:12.5px; font-weight:700;
  color:var(--muted,#6b7a90); padding:7px 10px; border-radius:9px; cursor:pointer; margin-left:auto;
}
.notif-clearall:hover{ background:var(--surface-2,#f0f3f7); color:var(--ink,#1c2635); }
html.phone-mode .notif-clearall{ font-size:13px; color:#5b6b80; }
/* Armed state (inline two-tap confirm — window.confirm is unreliable in the
   installed iOS PWA, so the button itself asks "Tap again to clear"). */
.notif-clearall.arm{ background:#fdecec; color:#c0392b; }
.notif-clearall.arm:hover{ background:#fbdcdc; color:#a93226; }
.notif-head-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.notif-title{ font-weight:700; font-size:15px; letter-spacing: .2px; }
.notif-close{
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border,#e5e7eb);
  background: transparent; cursor: pointer; display: inline-flex; align-items:center; justify-content:center;
}
.notif-close svg{ width: 16px; height: 16px; }

.notif-list{ overflow-y: auto; flex: 1 1 auto; padding: 6px 0; }
.notif-empty{ padding: 28px 16px; color: var(--muted, #6b7280); font-size:13px; text-align: center; }

.notif-row{
  display: grid; grid-template-columns: 12px 1fr; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft, #f1f3f5);
  cursor: pointer;
}
.notif-row:hover{ background: var(--surface-hover, #f7f8fa); }
.notif-row.unread{ background: rgba(232,51,46,.04); }
.notif-row .notif-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; margin-top: 7px;
}
.notif-row.unread .notif-dot{ background: #e8332e; }

.notif-head{ display:flex; justify-content:space-between; align-items:baseline; gap: 8px; }
.notif-verb{ font-weight:700; font-size:13px; letter-spacing:.3px; text-transform: uppercase; color: var(--text, #111); }
.notif-time{ font-size:11px; color: var(--muted, #6b7280); white-space: nowrap; }
.notif-sub{ font-size:13px; margin-top: 2px; color: var(--text, #111); }
.notif-meta{ font-size:12px; color: var(--muted, #6b7280); margin-top: 2px; }
.notif-src{ display: inline-block; padding: 1px 6px; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; font-size:11px; margin-left: 4px; }

/* Inline action buttons for task / chat-mention notifications */
.notif-actions{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notif-ariaq{ margin-top: 8px; }
.notif-ariaq .notif-ariaq-in{ width: 100%; box-sizing: border-box; border: 1px solid var(--line, #e5e9f0); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.45; min-height: 60px; resize: vertical; background: var(--panel, #fff); color: var(--ink, #16233b); }
.notif-ariaq .notif-actions{ justify-content: flex-end; }
.notif-btn{
  font: inherit; font-size:12px; font-weight:600; line-height: 1;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); color: var(--text, #111);
}
.notif-btn:hover{ background: var(--surface-hover, #f7f8fa); }
.notif-btn.primary{ background: #e8332e; border-color: #e8332e; color: #fff; }
.notif-btn.primary:hover{ background: #cf2b27; border-color: #cf2b27; }
.notif-btn.ghost{ background: transparent; }

/* Bell drawer filter tabs (All / Mentions / Tasks / Status) */
/* The tab row pans sideways rather than clipping its last tab: the drawer is a
   fixed 380px and the tab set grows (Leads 2026-07-26, Billing 2026-07-27), so
   it stopped fitting. Scrollbar hidden, ends padded so the last tab clears the
   edge, and renderTabs scrolls the active one into view. */
.notif-tabs{
  display:flex; gap:2px; padding: 8px 12px 0; border-bottom: 1px solid var(--border, #e5e7eb);
  overflow-x: auto; overflow-y: hidden; flex: 0 0 auto;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 12px; overscroll-behavior-x: contain;
}
.notif-tabs::-webkit-scrollbar{ display: none; }
.notif-tab{
  font: inherit; font-size:12px; font-weight:600; line-height: 1;
  padding: 7px 8px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted, #6b7280); border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 5px; border-radius: 6px 6px 0 0;
  flex: 0 0 auto; white-space: nowrap;
}
.notif-tab:hover{ color: var(--text, #111); background: var(--surface-hover, #f7f8fa); }
.notif-tab.active{ color: var(--text, #111); border-bottom-color: #e8332e; }
.notif-tab-count{
  font-size:11px; font-weight:700; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #e8332e; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Topbar badge fallback class (spec alias) */
.tb-btn-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:#e8332e; color:#fff; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ============================================================
   CHAT V2 INBOX (Chats + My Tasks drawer)
   Renders inside the .cv2-rail shell (chat-v2.css). Light,
   compact, business look using shared tokens.
   ============================================================ */
.cv2-inbox{ display:flex; flex-direction:column; height:100%; min-height:0; }
.cv2-inbox-tabs{
  display:flex; gap:2px; padding: 6px 10px 0; border-bottom:1px solid var(--border,#e5e7eb);
  flex: 0 0 auto;
}
.cv2-inbox-tabs button{
  font: inherit; font-size:13px; font-weight:600; line-height:1;
  padding: 8px 12px; border:0; background:transparent; cursor:pointer;
  color: var(--muted,#6b7280); border-bottom:2px solid transparent; border-radius:6px 6px 0 0;
}
.cv2-inbox-tabs button:hover{ color: var(--text,#111); background: var(--surface-hover,#f7f8fa); }
.cv2-inbox-tabs button.on{ color: var(--text,#111); border-bottom-color:#e8332e; }
.cv2-inbox-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.cv2-inbox-actions{ padding: 8px 10px; flex:0 0 auto; }
.cv2-inbox-new{
  font: inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding: 7px 12px; border-radius:8px; border:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff); color: var(--text,#111); width:100%;
}
.cv2-inbox-new:hover{ background: var(--surface-hover,#f7f8fa); }
.cv2-inbox-list{ overflow-y:auto; flex:1 1 auto; min-height:0; padding-bottom:8px; }
.cv2-inbox-row{
  display:grid; grid-template-columns: 28px 1fr auto; gap:10px; align-items:center;
  width:100%; text-align:left; padding:10px 12px; border:0; background:transparent;
  border-bottom:1px solid var(--border-soft,#f1f3f5); cursor:pointer; font: inherit;
}
.cv2-inbox-row:hover{ background: var(--surface-hover,#f7f8fa); }
.cv2-inbox-row.unread{ background: rgba(232,51,46,.04); }
.cv2-inbox-ic{
  width:28px; height:28px; border-radius:50%; background: var(--surface-hover,#eef1f5);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
}
.cv2-inbox-main{ display:flex; flex-direction:column; min-width:0; gap:2px; }
.cv2-inbox-title{
  font-size:13px; font-weight:600; color: var(--text,#111);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:6px;
}
.cv2-inbox-row.unread .cv2-inbox-title{ font-weight:700; }
.cv2-inbox-prev{
  font-size:12px; color: var(--muted,#6b7280);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cv2-inbox-time{ font-size:11px; color: var(--muted,#6b7280); white-space:nowrap; align-self:flex-start; }

/* Tasks tab */
.cv2-inbox-filters{ display:flex; flex-wrap:wrap; gap:6px; padding: 8px 10px; flex:0 0 auto; }
.cv2-filter-chip{
  font: inherit; font-size:12px; font-weight:600; cursor:pointer; line-height:1;
  padding: 5px 10px; border-radius:999px; border:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff); color: var(--muted,#6b7280);
}
.cv2-filter-chip:hover{ background: var(--surface-hover,#f7f8fa); }
.cv2-filter-chip.on{ background:#0a3d62; border-color:#0a3d62; color:#fff; }
.cv2-task-group{ padding: 4px 0 8px; }
.cv2-task-grouphead{
  font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color: var(--muted,#6b7280); padding: 8px 12px 4px;
}
.cv2-task-card{
  margin: 4px 10px; padding: 10px 12px; border:1px solid var(--border,#e5e7eb);
  border-radius:10px; background:var(--surface,#fff);
}
.cv2-task-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.cv2-task-trade{ font-size:12px; font-weight:700; color: var(--text,#111); }
.cv2-task-pri{
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px;
}
.cv2-task-pri.high{ background:#fee2e2; color:#b91c1c; }
.cv2-task-pri.normal{ background:#e0edf7; color:#1a6fb0; }
.cv2-task-pri.low{ background:#eef1f5; color:var(--muted); }
.cv2-task-instr{ font-size:13px; color: var(--text,#111); margin: 2px 0 6px; }
.cv2-task-meta{ font-size:12px; color: var(--muted,#6b7280); margin-bottom:8px; }
.cv2-task-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.cv2-task-btn{
  font: inherit; font-size:12px; font-weight:600; cursor:pointer; line-height:1;
  padding: 6px 11px; border-radius:7px; border:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff); color: var(--text,#111);
}
.cv2-task-btn:hover{ background: var(--surface-hover,#f7f8fa); }
.cv2-task-btn.primary{ background:#0a3d62; border-color:#0a3d62; color:#fff; }
.cv2-task-btn.primary:hover{ background:#082f4b; border-color:#082f4b; }

/* Status pill — Fell Through (red) */
.status-pill.fell-through,
.dm-status-pill.fell-through{
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Automation Logs row in History (compact) */
.history-systemrun{
  display: grid; grid-template-columns: 140px 160px 1fr; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft, #f1f3f5);
  font-size:13px;
}
.history-systemrun .hsr-time{ color: var(--muted, #6b7280); }
.history-systemrun .hsr-job{ font-weight:700; }
.history-systemrun .hsr-meta{ color: var(--text, #111); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; white-space: pre-wrap; }
.ver-tab{ padding: 4px 10px !important; font-size:12px !important; font-weight:600; }
.ver-tab.active{ background: var(--brand, #111) !important; color: #fff !important; }
.ver-more{ display:flex; justify-content:center; padding:12px 0 4px; }

/* ============================================================
   HR SIGNING HUB
   Fullscreen overlay. All tokens + component styles are scoped
   under .hr-overlay so they never leak into the main app theme.
   Class names mirror hr-mockups/_shared.css.
   ============================================================ */
.hr-overlay{
  position:fixed; inset:0; z-index:1200; display:none;
  background:var(--hr-bg); overflow:auto;
  /* scoped design tokens (do not pollute global :root) */
  --ink-900:#0b1220; --ink-800:#111827; --ink-700:#1f2937; --ink-600:#374151;
  --ink-500:#4b5563; --ink-400:#6b7280; --ink-300:#9ca3af; --ink-200:#d1d5db;
  --ink-100:#e5e7eb; --ink-50:#f3f4f6;
  --hr-bg:#f7f8fb; --line:#e7eaf0; --line-strong:#d6dbe3;
  --brand:#2563eb; --brand-dark:#1e40af; --brand-50:#eef2ff; --brand-100:#dbe4ff;
  --accent:#7c3aed; --accent-50:#f5f3ff; --accent-100:#ede9fe;
  --good:#059669; --warn:#d97706; --bad:#dc2626;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 4px 10px rgba(15,23,42,.06);
  --r-md:10px; --r-lg:14px;
  font-family:'Inter','SF Pro Text',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink-800);
}
.hr-overlay.open{display:block}
.hr-shell{min-height:100%;display:flex;flex-direction:column}

.hr-overlay .hr-head{
  position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);
  padding:16px 24px;display:flex;align-items:center;gap:16px;
}
.hr-overlay .hr-head h1{margin:0;font-size:20px;letter-spacing:-.2px;color:var(--ink-900)}
.hr-overlay .hr-head .spacer{flex:1}
.hr-overlay .hr-back,.hr-overlay .hr-close{
  width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink-500);cursor:pointer;
}
.hr-overlay .hr-back svg,.hr-overlay .hr-close svg{width:17px;height:17px}
.hr-overlay .hr-back:hover,.hr-overlay .hr-close:hover{background:var(--ink-50);color:var(--ink-800)}
.hr-overlay .confidential-badge{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:11px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--accent);background:var(--accent-50);
  padding:4px 10px;border-radius:999px;border:1px solid var(--accent-100);
}
.hr-overlay .confidential-badge svg{width:13px;height:13px}

.hr-overlay .btn{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:9px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink-700);
  font-weight:600;font-size:13px;cursor:pointer;transition:all 120ms ease;
}
.hr-overlay .btn:hover{border-color:var(--ink-300);background:var(--ink-50)}
.hr-overlay .btn .ic{width:15px;height:15px}
.hr-overlay .btn.sm{height:30px;padding:0 12px;font-size:13px}
.hr-overlay .btn-primary{
  background:linear-gradient(180deg,#2f6bf0,#1e40af);border-color:#1e3a8a;color:#fff;
  box-shadow:0 6px 14px rgba(30,64,175,.22);
}
.hr-overlay .btn-primary:hover{filter:brightness(1.05);background:linear-gradient(180deg,#2f6bf0,#1e40af)}
.hr-overlay .btn-danger{background:#fff;border-color:#fecaca;color:#b91c1c}
.hr-overlay .btn-danger:hover{background:#fef2f2}
.hr-overlay .btn[disabled]{opacity:.55;cursor:not-allowed}

.hr-overlay .page-body{padding:20px 24px 28px}
.hr-overlay .hub-grid{display:grid;grid-template-columns:1.05fr 1.65fr;gap:18px;align-items:flex-start}
.hr-overlay .left-col,.hr-overlay .right-col{display:flex;flex-direction:column;gap:14px}

.hr-overlay .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 24px 0}
.hr-overlay .kpi{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;position:relative;box-shadow:var(--shadow-sm);
}
.hr-overlay .kpi .lab{font-size:11px;letter-spacing:.4px;color:var(--ink-400);text-transform:uppercase;font-weight:600}
.hr-overlay .kpi .val{font-size:24px;font-weight:700;color:var(--ink-900);letter-spacing:-.5px}
.hr-overlay .kpi .accent-bar{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--brand)}
.hr-overlay .kpi.amber .accent-bar{background:#f59e0b}
.hr-overlay .kpi.violet .accent-bar{background:var(--accent)}
.hr-overlay .kpi.green .accent-bar{background:var(--good)}

.hr-overlay .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.hr-overlay .card-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.hr-overlay .card-head h3{margin:0;font-size:13px;font-weight:600;color:var(--ink-800)}
.hr-overlay .card-body{padding:14px 16px}
.hr-overlay .tag{display:inline-flex;align-items:center;gap:6px;background:var(--ink-50);border:1px solid var(--line);
  padding:3px 9px;border-radius:999px;font-size:12px;color:var(--ink-600)}
.hr-overlay .muted{color:var(--ink-400)}

.hr-overlay table.tbl{width:100%;border-collapse:separate;border-spacing:0}
.hr-overlay .tbl thead th{
  font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-400);
  text-align:left;padding:10px 14px;background:#fafbfd;border-bottom:1px solid var(--line);
}
.hr-overlay .tbl tbody td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px;color:var(--ink-700)}
.hr-overlay .tbl tbody tr:hover{background:#fafbff}
.hr-overlay .cell-doc .name{font-weight:600;color:var(--ink-900)}
.hr-overlay .cell-doc .sub{font-size:12px;color:var(--ink-400)}
.hr-overlay .row-actions{display:flex;justify-content:flex-end;gap:6px}

.hr-overlay .pill{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;
  font-weight:600;font-size:12px;letter-spacing:.2px;border:1px solid transparent;white-space:nowrap;
}
.hr-overlay .pill .dot{width:6px;height:6px;border-radius:50%}
.hr-overlay .pill.draft{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.hr-overlay .pill.draft .dot{background:#6b7280}
.hr-overlay .pill.review{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.hr-overlay .pill.review .dot{background:#ea580c}
.hr-overlay .pill.candidate{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.hr-overlay .pill.candidate .dot{background:#4f46e5}
.hr-overlay .pill.executor{background:#ecfeff;color:#155e75;border-color:#a5f3fc}
.hr-overlay .pill.executor .dot{background:#0891b2}
.hr-overlay .pill.completed{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.hr-overlay .pill.completed .dot{background:#059669}
.hr-overlay .pill.declined,.hr-overlay .pill.voided{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.hr-overlay .pill.declined .dot,.hr-overlay .pill.voided .dot{background:#dc2626}

.hr-overlay .tmpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hr-overlay .tmpl{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:all 200ms ease;position:relative;
}
.hr-overlay .tmpl:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#c7d2fe}
.hr-overlay .tmpl .thumb{height:72px;background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-bottom:1px solid var(--line)}
.hr-overlay .tmpl .badge{position:absolute;top:10px;right:10px;background:#fff;border:1px solid var(--line);
  border-radius:6px;font-size:11px;font-weight:600;color:var(--ink-600);padding:3px 7px}
.hr-overlay .tmpl .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.hr-overlay .tmpl .name{font-weight:600;color:var(--ink-900);font-size:13px}
.hr-overlay .tmpl .meta{font-size:12px;color:var(--ink-400)}

.hr-overlay .split{display:grid;grid-template-columns:minmax(420px,1fr) 1.05fr;gap:18px;align-items:flex-start}
.hr-overlay .section-title{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-400);font-weight:700;margin:18px 0 10px}
.hr-overlay .section-title:first-child{margin-top:0}
.hr-overlay .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.hr-overlay .fld label{font-size:12px;color:var(--ink-600);font-weight:600}
.hr-overlay .fld input,.hr-overlay .fld select,.hr-overlay .fld textarea{
  height:36px;border:1px solid var(--line-strong);border-radius:9px;padding:0 12px;font-size:13px;
  background:#fff;color:var(--ink-800);outline:none;font-family:inherit;
}
.hr-overlay .fld textarea{height:70px;padding:9px 12px;resize:vertical}
.hr-overlay .fld input:focus,.hr-overlay .fld select:focus,.hr-overlay .fld textarea:focus{
  border-color:#a5b4fc;box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.hr-overlay .fld.invalid input,.hr-overlay .fld.invalid textarea{border-color:#fca5a5;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.hr-overlay .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.hr-overlay .pdf-frame{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
}
.hr-overlay .pdf-toolbar{height:42px;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:#fafbfd;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-500);font-weight:600}
.hr-overlay .pdf-page{margin:16px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);padding:26px 32px;color:var(--ink);font-size:12px;line-height:1.6}
.hr-overlay .pdf-page .cover-h{font-size:20px;font-weight:700;color:#0b1220;margin:6px 0 2px}
.hr-overlay .pdf-page .cover-sub{color:var(--muted);font-size:12px;margin-bottom:14px}
.hr-overlay .pdf-page .kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:12px}
.hr-overlay .pdf-page .kv .k{color:var(--ink-soft);font-weight:600;text-transform:capitalize}
.hr-overlay .pdf-page .kv .v{color:var(--ink)}

.hr-overlay .rcpt{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.hr-overlay .rcpt:last-child{border-bottom:0}
.hr-overlay .rcpt .av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:11px;background:linear-gradient(135deg,#475569,#0f172a)}
.hr-overlay .rcpt .av.brand{background:linear-gradient(135deg,#2563eb,#7c3aed)}
.hr-overlay .rcpt .who b{display:block;color:var(--ink-800);font-size:13px}
.hr-overlay .rcpt .who span{font-size:12px;color:var(--ink-400)}
.hr-overlay .rcpt .seq{margin-left:auto;font-size:11px;color:var(--ink-400);font-weight:600}

.hr-overlay .timeline{display:flex;flex-direction:column;gap:0}
.hr-overlay .tl{display:flex;gap:12px;padding:10px 0}
.hr-overlay .tl .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--brand);box-shadow:0 0 0 3px var(--brand-50);flex:0 0 auto}
.hr-overlay .tl .ln{font-size:13px;color:var(--ink-800);font-weight:600}
.hr-overlay .tl .meta{font-size:12px;color:var(--ink-400)}
.hr-overlay .steps{display:flex;align-items:center;gap:6px;margin-top:4px}
.hr-overlay .steps .seg{flex:1;height:6px;border-radius:3px;background:#e5e7eb}
.hr-overlay .steps .seg.done{background:linear-gradient(90deg,#10b981,#059669)}
.hr-overlay .steps .seg.active{background:linear-gradient(90deg,#6366f1,#4338ca)}
.hr-overlay .hr-empty{padding:40px 20px;text-align:center;color:var(--ink-400);font-size:13px}
.hr-overlay .lock-row{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#fffaf0,#fff);
  border:1px dashed #fbbf24;border-radius:var(--r-md);padding:10px 12px;color:#92400e;font-size:13px;margin-top:12px}

@media (max-width:980px){
  .hr-overlay .hub-grid,.hr-overlay .split{grid-template-columns:1fr}
  .hr-overlay .kpis{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   HR CANDIDATE PIPELINE — styles added by feat/hr-onboarding-pipeline
   All scoped under .hr-overlay to avoid leaking into main app.
   ============================================================ */

/* Tab bar */
.hr-overlay .hr-tabs{display:flex;gap:0;border-bottom:2px solid var(--line);padding:0 24px;background:#fff;flex-shrink:0}
.hr-overlay .hr-tab{padding:12px 18px;font-size:13px;font-weight:600;color:var(--ink-400);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s}
.hr-overlay .hr-tab:hover{color:var(--ink-800)}
.hr-overlay .hr-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* Candidate pipeline table */
.hr-overlay .cand-table-wrap{overflow-x:auto}
.hr-overlay .cand-stage-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid transparent}
.hr-overlay .cand-stage-chip.s-selected{background:#f0f9ff;color:#0369a1;border-color:#bae6fd}
.hr-overlay .cand-stage-chip.s-offer_sent{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.hr-overlay .cand-stage-chip.s-dl_received{background:#fefce8;color:#a16207;border-color:#fde68a}
.hr-overlay .cand-stage-chip.s-ea_prep{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.hr-overlay .cand-stage-chip.s-ea_signing{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.hr-overlay .cand-stage-chip.s-newhire_docs{background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.hr-overlay .cand-stage-chip.s-review{background:#fef3c7;color:#92400e;border-color:#fde68a}
.hr-overlay .cand-stage-chip.s-completed{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.hr-overlay .cand-stage-chip.s-voided{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* 8-step pipeline bar */
.hr-overlay .pipe-bar{display:flex;gap:3px;margin-top:5px}
.hr-overlay .pipe-bar .ps{flex:1;height:4px;border-radius:2px;background:#e5e7eb;min-width:10px}
.hr-overlay .pipe-bar .ps.done{background:#10b981}
.hr-overlay .pipe-bar .ps.active{background:#6366f1}

/* New Candidate modal */
.hr-overlay .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:flex;align-items:center;justify-content:center}
.hr-overlay .modal-box{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.22);width:480px;max-width:96vw;overflow:hidden;display:flex;flex-direction:column;max-height:92vh}
.hr-overlay .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:#f8fafc}
.hr-overlay .modal-head h3{margin:0;font-size:15px;font-weight:700}
.hr-overlay .modal-body{padding:20px;overflow-y:auto;min-height:0}
.hr-overlay .modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#f8fafc}

/* Candidate detail layout */
.hr-overlay .cand-detail{display:flex;flex-direction:column;gap:0}
.hr-overlay .cand-header{padding:16px 24px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hr-overlay .cand-header .cand-code{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--ink-400);text-transform:uppercase}
.hr-overlay .cand-header .cand-name{font-size:16px;font-weight:700;color:var(--ink-900)}
.hr-overlay .cand-header .cand-meta{font-size:13px;color:var(--ink-400)}
.hr-overlay .cand-header .spacer{flex:1}
.hr-overlay .cand-body{display:grid;grid-template-columns:35% 1fr;gap:0;min-height:0;flex:1}
.hr-overlay .cand-timeline{border-right:1px solid var(--line);padding:20px;overflow-y:auto}
.hr-overlay .cand-stage-panel{padding:20px;overflow-y:auto}

/* Stage action cards */
.hr-overlay .stage-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.hr-overlay .stage-card + .stage-card{margin-top:14px}
.hr-overlay .stage-card-title{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-400);margin-bottom:12px}
.hr-overlay .magic-link-row{display:flex;gap:8px;align-items:center}
.hr-overlay .magic-link-row input{flex:1;height:32px;border:1px solid var(--line-strong);border-radius:7px;padding:0 10px;font-size:12px;color:var(--ink-700);background:var(--ink-50)}

/* Envelope picker (ea_prep) */
.hr-overlay .env-picker{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.hr-overlay .env-picker-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.hr-overlay .env-picker-row:last-child{border-bottom:0}
.hr-overlay .env-picker-row:hover{background:#fafbff}
.hr-overlay .env-picker-row label{flex:1;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink-800)}
.hr-overlay .env-picker-row .badge-code{font-size:11px;background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;border-radius:6px;padding:2px 7px;font-weight:700;flex-shrink:0}

/* Inline sub-form fields in ea_prep */
.hr-overlay .subform-block{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.hr-overlay .subform-block-head{background:#f8fafc;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--ink-600);border-bottom:1px solid var(--line)}
.hr-overlay .subform-block-body{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}

/* New-hire docs checklist */
.hr-overlay .doc-checklist{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hr-overlay .doc-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.hr-overlay .doc-row:last-child{border-bottom:0}
.hr-overlay .doc-row .doc-label{flex:1;font-size:13px;font-weight:500;color:var(--ink-800)}
.hr-overlay .doc-row .doc-date{font-size:11px;color:var(--ink-400)}
.hr-overlay .doc-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid transparent;flex-shrink:0}
.hr-overlay .doc-badge.pending{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.hr-overlay .doc-badge.uploaded{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.hr-overlay .doc-badge.approved{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.hr-overlay .doc-badge.rejected{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* Review screen upload grid */
.hr-overlay .upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hr-overlay .upload-card{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hr-overlay .upload-card-head{padding:10px 12px;background:#f8fafc;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.hr-overlay .upload-card-body{padding:10px 12px}
.hr-overlay .upload-card-actions{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}

/* CC paper received toggle */
.hr-overlay .cc-paper-toggle{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;margin-top:10px}
.hr-overlay .cc-paper-toggle label{flex:1;font-size:13px;font-weight:500;color:#92400e;cursor:pointer}

/* Public portal notice (also used inline) */
.hr-overlay .pci-notice{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;color:#991b1b;font-size:13px;margin-bottom:12px}

@media (max-width:980px){
  .hr-overlay .cand-body{grid-template-columns:1fr}
  .hr-overlay .cand-timeline{border-right:0;border-bottom:1px solid var(--line)}
  .hr-overlay .subform-block-body{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER v2 (issue #47) — scoped to #topbar-new, shown only to emp_code
   SYME004. Everything here is namespaced so the legacy .topbar is untouched.
   ════════════════════════════════════════════════════════════════════════ */
/* Full-width strip: width:100% + max-width:none + margin:0 keep it edge-to-edge
   (defeats any inherited centering). Solid white paints the whole band; the brand
   card and right cluster are inset only by the strip's own padding. Extra right
   padding clears the profile chip's caret.
   HEIGHT CONTRACT: locked at exactly 64px. height + min/max-height all pinned so
   no inner element can push the strip taller; vertical centering does the rest. */
#topbar-new{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;width:100%;max-width:none;margin:0;box-sizing:border-box;flex-shrink:0;padding:0 24px 0 16px;height:64px!important;min-height:64px!important;max-height:64px!important;background:var(--panel);position:sticky;top:0;left:0;right:0;z-index:1000;overflow:visible;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}

/* Left navy brand card — ~240px anchor, 48px tall card centered in the 64px strip */
#topbar-new .tbv2-brand{display:flex;align-items:center;gap:12px;background:var(--brand);color:#fff;border-radius:12px;padding:0 16px;height:48px;min-width:240px;flex-shrink:0;position:relative}
#topbar-new .tbv2-logo{height:26px;width:auto;display:block}
#topbar-new .tbv2-word{display:flex;align-items:center;gap:8px}
#topbar-new .tbv2-mark{width:12px;height:12px;border-radius:3px;background:#fff;flex-shrink:0}
#topbar-new .tbv2-word-stack{display:flex;flex-direction:column;line-height:1.0}
#topbar-new .tbv2-word-stack b{font-weight:700;font-size:13px;letter-spacing:-.01em}
#topbar-new .tbv2-div{width:1px;height:24px;background:rgba(255,255,255,.2);flex-shrink:0}
#topbar-new .tbv2-sense{font-weight:500;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.85);flex-shrink:0}
#topbar-new .rt-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px;background:rgba(255,255,255,.12);color:#fff}
#topbar-new .rt-pill .rt-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2.4s infinite}
#topbar-new .tbv2-who{position:relative;display:flex;align-items:center}
#topbar-new .tbv2-whobtn{width:34px;height:34px;border-radius:50%;background:var(--surface);color:var(--brand);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:.15s}
#topbar-new .tbv2-whobtn:hover{background:var(--brand-50)}
#topbar-new .tbv2-whobtn svg{width:18px;height:18px}

/* Who's online popover */
#whosOnlinePop{position:absolute;top:calc(100% + 12px);left:-6px;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:1100;padding:14px 16px;color:var(--ink,#0f172a)}
#whosOnlinePop .wo-title{font-weight:700;font-size:13px;margin-bottom:8px}
#whosOnlinePop .wo-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
#whosOnlinePop .wo-row{display:flex;align-items:center;gap:11px;padding:7px 0}
#whosOnlinePop .wo-av{position:relative;display:inline-flex;flex-shrink:0}
#whosOnlinePop .wo-av .avatar{width:30px;height:30px}
#whosOnlinePop .wo-dot{position:absolute;left:-3px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--panel)}
#whosOnlinePop .wo-name{font-size:13px;color:var(--ink);font-weight:500}
#whosOnlinePop .wo-empty{font-size:13px;color:var(--muted,#64748b);padding:6px 0}

/* Right actions cluster — sits directly on the white bar (no enclosing card),
   icons evenly spaced to match the reference. */
#topbar-new .tbv2-right{display:flex;align-items:center;gap:22px;margin-left:auto;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;flex-shrink:0;position:relative}

/* Segmented hub pill — the Stitch "Neo-Organic" STRUCTURE (rounded-full
   capsule, icon+label segments, the active segment as a filled glowing pill
   with halo + inner bevel, wider padding, filled wallet glyph) but the COLORS
   FOLLOW THE USER'S PALETTE (2026-08-01 round 3 — Rishi: the fixed carbon
   track "is not going with the theme of the website. i need something changes
   with the change i do in appearences"). Base rules below use the brand vars
   (sy_lqoff fallback); the lq-glass block further down re-tints the active
   pill with the --lqa accent-blend + --lqglow halo, so an Appearance change
   re-paints the pill live. Active fill follows the `.on` class that
   toggleTCFList() keeps on #tcfToggleBtn: frame open = TCF Hub view, closed =
   Deals Hub; `.hr-on` = HR Hub; /HR's static active segment is `.segon`
   (styled here — app.css styles both pages). Hover rules stay BEFORE the
   active rules: equal specificity, the later active declarations must win
   while hovered. */
#topbar-new .tbv2-seg{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px;margin-right:2px;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 4px 14px rgba(20,30,50,.08)}
/* transition = transform ONLY (the press scale). Never transition color/
   background/padding here — a state flip then ANIMATES (the clicked segment is
   hovered, so its accent hover color interpolated to white = "blue first,
   then white" + a sluggish switch, Rishi 2026-08-01). The flip must SNAP. */
#topbar-new .tbv2-seg .seg{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid transparent;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:transform .1s;user-select:none}
#topbar-new .tbv2-seg .seg .seg-ic{width:16px;height:16px;flex:none;display:block}
#topbar-new .tbv2-seg .seg:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
#topbar-new .tbv2-seg .seg:active{transform:scale(.95)}
#topbar-new .tbv2-seg:not(.on) .seg-ledger,
#topbar-new .tbv2-seg.on .seg-list,
#topbar-new .tbv2-seg.hr-on .seg-hrhub,
#topbar-new .tbv2-seg .seg.segon{background:linear-gradient(135deg,var(--brand-2),var(--brand));border-color:transparent;color:#fff;font-weight:700;padding:8px 20px;box-shadow:0 0 22px color-mix(in srgb,var(--brand) 40%,transparent),0 8px 20px color-mix(in srgb,var(--brand) 28%,transparent),inset 0 1px 2px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.12)}
#topbar-new .tbv2-seg:not(.on) .seg-ledger:hover,
#topbar-new .tbv2-seg.on .seg-list:hover,
#topbar-new .tbv2-seg.hr-on .seg-hrhub:hover,
#topbar-new .tbv2-seg .seg.segon:hover{filter:brightness(1.05)}

/* Right-cluster icon buttons (icon 20px + 11px label, 4px gap, neutral slate —
   navy is reserved for the brand card and the active TCF segment only). */
#topbar-new .tbx{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 9px;border-radius:10px;background:transparent;color:var(--ink-soft);font-size:11px;font-weight:600;cursor:pointer;border:none;position:relative;white-space:nowrap}
#topbar-new .tbx:hover{background:var(--surface-hover)}
#topbar-new .tbx .tbx-ico{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
#topbar-new .tbx .tbx-ico svg{width:20px;height:20px;stroke:var(--ink-soft)}
#topbar-new .tbx .tbx-lbl{color:var(--ink-soft)}
#topbar-new .tbx .chat-badge{position:absolute;top:0;right:2px}
/* App launcher: 3x3 dot grid on a neutral-grey square (no navy tint) */
#topbar-new .tbx-apps .tbx-ico{width:34px;height:34px;border-radius:9px;background:var(--surface-2)}
#topbar-new .tbx-apps .tbx-ico svg{width:18px;height:18px;fill:var(--ink-soft)}

/* Profile chip on white — avatar + bold name + caret, no background pill */
#topbar-new .profile-trigger{background:transparent;border:none;color:var(--ink);padding:4px 6px;border-radius:10px}
#topbar-new .profile-trigger:hover{background:var(--surface-hover)}
#topbar-new .profile-trigger .pt-name{color:var(--ink);font-weight:700}
#topbar-new .profile-trigger .pt-caret{opacity:.6}
#topbar-new .profile-trigger .pt-avatar{width:32px;height:32px;border-color:var(--line);background:var(--surface-2)}

/* App Launcher panel — white card, light-blue tiles, navy icons */
#topbar-new .app-launcher-wrap{position:relative;display:flex}
#topbar-new .app-launcher-panel{position:absolute;top:calc(100% + 14px);right:-8px;width:340px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);z-index:1100;padding:18px}
#topbar-new .al-group{margin-bottom:16px}
#topbar-new .al-group:last-child{margin-bottom:0}
#topbar-new .al-group-label{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:11px;padding:0 2px}
#topbar-new .al-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#topbar-new .al-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 2px;border-radius:11px;background:transparent;color:var(--ink-soft);font-size:11px;font-weight:600;cursor:pointer;border:none;position:relative;white-space:nowrap;transition:.12s}
#topbar-new .al-item:hover{background:var(--surface-hover);transform:translateY(-1px)}
#topbar-new .al-icon{width:46px;height:46px;border-radius:13px;background:var(--brand-50);display:flex;align-items:center;justify-content:center}
#topbar-new .al-icon svg{width:20px;height:20px;stroke:var(--brand-2)}
#topbar-new .al-badge{position:absolute;top:2px;right:8px;font-size:11px;min-width:14px;height:14px;padding:0 3px;line-height:14px}
/* DATA SYNC footer strip — spans full panel width, hairline divider above */
#topbar-new .al-sync-strip{display:flex;align-items:center;margin:14px -18px -18px;padding:12px 18px;border-top:1px solid var(--line-soft);background:var(--surface-2);border-radius:0 0 16px 16px}
#topbar-new .al-sync-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;flex:0 0 auto}
#topbar-new .al-sync-text{font-size:12px;color:var(--ink-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar-new .al-sync-strip.warn .al-sync-dot{background:var(--amber)}
#topbar-new .al-sync-strip.err .al-sync-dot{background:var(--red)}

/* Defeat legacy collapse @media rules that hide non-gated shared IDs (#rtPill is
   hidden ≤1920px; .profile-menu-wrap ≤768px). These elements are never toggled
   by feature-gating, so forcing them visible in the v2 header is safe.
   (notifBtn / tcfToggleBtn are intentionally NOT forced — JS gating owns them.) */
#topbar-new #rtPill{display:flex!important}
#topbar-new .profile-menu-wrap{display:flex!important;margin-left:0}

/* ════════════════════════════════════════════════════════════════════════
   v2 header (SYME004) overlay audit — keep the 64px header (z-index:1000)
   clear of every overlay. Two mechanisms, both scoped to body.hdr-v2 so
   legacy (non-SYME004) users are completely unaffected:
     (a) TOP OFFSET — for content "views" that are meant to sit *below* the
         header (TCF List panel/iframe, mobile launcher menu). Pinned to 64px.
     (b) Z-INDEX LIFT — for full-height drawers / scrim dialogs that are meant
         to cover the whole screen (deal drawer, chat rail, EFT, modals). The
         legacy header is static (z-auto) so these naturally paint over it; the
         v2 header is sticky z-index:1000, so without a lift their top row tucks
         behind it. Lifting them above 1000 restores the legacy behaviour.
   Overlays already above 1000 (notif-drawer z4200, hr-overlay z1200) and
   anchored header popovers (app launcher / profile / who's-online z1100) need
   no change.
   ════════════════════════════════════════════════════════════════════════ */
/* (a) TOP OFFSETS — header is 64px tall, so content views start at 64px. */
/* .tcf-list-panel base is top:64px (clears the 56px legacy header); pin it to
   the v2 header height explicitly so the KPI/filter band never tucks under. */
body.hdr-v2 .tcf-list-panel{top:64px}
/* Mobile App-Launcher dropdown (#hamburgerMenu): viewport-anchored at top:56px. */
body.hdr-v2 .hamburger-menu{top:64px}
/* #tcfFrameWrap (TCF iframe full-screen wrap) reads its inline top from
   --topbar-h (fallback 56px); define the var for v2 so it clears the 64px head.
   Legacy users have no --topbar-h, so the inline 56px fallback still applies. */
body.hdr-v2{--topbar-h:64px}

/* (b) Z-INDEX LIFTS — full-height right-side drawers whose top row (title/close)
   sits at top:0 and would otherwise tuck under the sticky header. These use only
   native form controls (or chat UI), so lifting their stacking context above the
   header introduces no popover-layering regressions. The singleton column-filter
   popovers (#datePop z55 / #msPop z56) belong to the table, never to a drawer. */
/* Deal detail + edit drawer and the windowed (incl. maximized) new-deal dialog
   (.drawer / .drawer.win, base z40/41). */
body.hdr-v2 .drawer-scrim{z-index:1001}
body.hdr-v2 .drawer{z-index:1002}
/* "Customize fields" (#typeCfgScrim) is opened FROM the edit-deal drawer, so it
   must sit ABOVE the drawer (z1002) — the base .modal-scrim z200 put it behind
   the form. Scoped to hdr-v2 (legacy drawer is z41, already below modal-scrim). */
body.hdr-v2 #typeCfgScrim{z-index:1100}
/* TRS Preview is opened FROM the deal drawer too — lift it above the drawer. */
body.hdr-v2 #trsScrim.trs-preview{z-index:1100}

/* Read-only TRS preview (opened via "Preview TRS" on the deal form): the sheet
   shows exactly where the deal's fields land, but nothing is editable, saved or
   sent. Only Download / Print / Close stay in the toolbar. */
#trsScrim.trs-preview #trsSheet{pointer-events:none}
#trsScrim.trs-preview .trs-toolbar button[onclick*="trsSave"],
#trsScrim.trs-preview .trs-toolbar button[onclick*="trsSendOpen"]{display:none}
#trsScrim.trs-preview .trs-hint > *{display:none}
#trsScrim.trs-preview .trs-hint{display:block;padding:8px 14px}
#trsScrim.trs-preview .trs-hint::before{
  content:'👁 Preview — read-only. This shows where the deal fields land on the Trade Record Sheet. Use Download or Print to check the PDF; editing, saving and sending are disabled here.';
  display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
/* ChatV2 inbox rail + entity rail (Chat / Chats / My Tasks) and the nested
   start-private-group sheet (base z240 / z260; sheet lifted above the rail). */
body.hdr-v2 .cv2-rail-scrim{z-index:1001}
body.hdr-v2 .cv2-sheet-scrim{z-index:1002}

/* EFT hub: #eftScrim is a .modal-scrim whose centered .modal carries the title +
   tab row ("EFT Payment | Generate · File History · …"). It now gets the SAME
   treatment as every other tall modal-scrim below (padding-top + capped .modal
   height), so the title row clears the 64px header instead of tucking under it.
   The inner right-anchored .eft-drawer (File-History detail slide-over) is
   position:absolute inside the now-offset .modal (inline position:relative), so
   it pins to top:0 of that modal — fully below the header. (The earlier top:64px
   was sized for the legacy 56px header and left zero breathing room under v2.) */
body.hdr-v2 #eftScrim .eft-drawer{top:0!important}

/* (c) MAXIMIZED + TALL MODALS — every maximizable / full-size modal card lives
   inside a .modal-scrim whose z-index (200) sits BELOW the sticky 64px header,
   so a tall or maximized card centers with its title bar tucked under the header
   (issue #47 screenshots: Signatures hub `openSignaturesHub`, User Management
   `openAccounts`, deal/TCF detail `dealModalBox`, TRS manage/pick). #eftScrim is
   included too — its centered .modal title row needs the same clearance; its
   inner .eft-drawer is re-pinned to top:0 of the offset modal above.
   Two parts, both scoped to body.hdr-v2 so legacy users are untouched:
     • drop the scrim's centering box below the header (padding-top) and cap the
       card height so a centered card can never reach back under the header, and
     • pin a maximized card to start exactly at 64px and fill the area below it
       (position:fixed escapes the now-offset flex box; the dark backdrop still
       covers the header, which is normal modal behaviour). */
body.hdr-v2 .modal-scrim{padding-top:calc(64px + 24px)}
body.hdr-v2 .modal-scrim .modal{max-height:calc(100vh - 64px - 48px)!important}
body.hdr-v2 .modal-scrim .modal.maxed{position:fixed;top:64px!important;right:auto;bottom:0;left:50%;transform:translateX(-50%);width:97vw;height:calc(100vh - 64px)!important;max-height:calc(100vh - 64px)!important;margin:0;border-radius:0}

/* HR Signing Hub (.hr-overlay, `openHrHub`) is a full-screen z-1200 overlay that
   paints OVER the header; drop it below the 64px header so the header stays
   visible and the hub's own sticky sub-head isn't fused with the app header. */
body.hdr-v2 .hr-overlay{top:64px;height:calc(100vh - 64px)}

/* Windowed new-deal dialog when maximized (.drawer.win.maximized, base top:12px)
   is z-lifted above the header; pin its top below the 64px header (12px inset
   preserved) so it never covers the header chrome. */
body.hdr-v2 .drawer.win.maximized{top:76px}

/* ── Responsive: the header height is locked at 64px (see #topbar-new above);
   only the inner content adapts. No breakpoint may touch #topbar-new height —
   every `top:64px` overlay/drawer override depends on that contract holding at
   all viewport widths. ── */
@media(max-width:1280px){
  #topbar-new{gap:10px;padding:0 16px}
  #topbar-new .tbv2-right{gap:14px}
  #topbar-new .tbx .tbx-lbl{display:none}            /* icons only — reclaim width */
}
@media(max-width:1024px){
  #topbar-new{padding:0 12px}
  #topbar-new .tbv2-brand{min-width:160px;gap:10px;padding:0 12px}
  #topbar-new .tbv2-seg .seg{padding:6px 11px;font-size:12px;gap:6px}
  #topbar-new .tbv2-seg .seg .seg-ic{display:none}   /* labels only — reclaim width */
}
@media(max-width:768px){
  #topbar-new{gap:8px;padding:0 10px}
  /* brand collapses to mark + Live + people icon; drop the wordmark text */
  #topbar-new .tbv2-brand{min-width:0;gap:8px;padding:0 10px}
  #topbar-new .tbv2-word-stack{display:none}
  #topbar-new .tbv2-sense{display:none}
  #topbar-new .app-launcher-panel{right:-12px;width:300px}
  #whosOnlinePop{width:260px}
}

/* ════════════════════════════════════════════════════════════════════════
   Premium UI refinement pass (2026-07-01)
   Quiet operations polish: clearer elevation, softer surfaces, stronger
   focus states, and calmer dense-data treatment without changing workflows.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --line:#dfe6ee;
  --line-soft:#edf2f7;
  --ink:#111827;
  --ink-soft:#334155;
  --muted:#667085;
  --faint:#98a2b3;
  --brand:#07385b;
  --brand-2:#14679d;
  --accent:#e9752c;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-hover:#eef5fb;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px rgba(16,24,40,.08);
  --shadow-lg:0 20px 48px rgba(16,24,40,.20),0 3px 12px rgba(16,24,40,.10);
}
body{background:linear-gradient(180deg,#f7f9fc 0,#f3f6fa 38%,#f2f5f8 100%);color:var(--ink)}
button,input,select,textarea{letter-spacing:0}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid rgba(20,103,157,.42);outline-offset:2px}
::-webkit-scrollbar-thumb{background:#b9c6d5;border-color:#f4f7fb}

.topbar{height:58px;background:linear-gradient(180deg,var(--brand-2) 0,var(--brand) 100%);box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 10px 24px rgba(7,56,91,.18)}
.tb-btn{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.tb-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.rt-pill,.sync-pill{border:1px solid rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.app-crumbs{padding:8px 22px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(130%) blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}

#topbar-new{background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:saturate(135%) blur(14px);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.82) inset,0 10px 24px rgba(16,24,40,.07)}
#topbar-new .tbv2-brand{background:linear-gradient(180deg,var(--brand-2) 0,var(--brand) 100%);box-shadow:0 9px 20px rgba(7,56,91,.20),0 1px 0 rgba(255,255,255,.12) inset}
#topbar-new .tbx{transition:background .15s,transform .15s,color .15s}
#topbar-new .tbx:hover{background:var(--surface-2);transform:translateY(-1px)}
/* (The segment pill deliberately keeps its own fixed carbon+coral recipe here —
   Rishi's Stitch mock, 2026-08-01 — so the hdr-v2 theme block no longer
   restyles it.) */
#topbar-new .app-launcher-panel,
#whosOnlinePop,
.profile-card{border:1px solid var(--line);box-shadow:0 22px 54px rgba(16,24,40,.18),0 2px 8px rgba(16,24,40,.08)}

.kpis{gap:8px;padding:10px 16px;background:transparent;border-bottom:1px solid var(--line)}
.kpi{border:1px solid var(--line);border-radius:9px;padding:12px 16px;background:var(--panel);box-shadow:var(--shadow-sm)}
.kpi:hover{background:var(--panel);border-color:var(--brand-2);box-shadow:0 8px 18px rgba(16,24,40,.08);transform:translateY(-1px)}
.kpi.active{border-color:rgba(233,117,44,.45);box-shadow:0 10px 22px rgba(233,117,44,.10),var(--shadow-sm)}
.kpi-div{display:none}
.kpi .k-bar{background:var(--line-soft)}

.controls{padding:12px 18px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:saturate(120%) blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.search input,
.flt,
.filter-toggle,
.ms-btn,
.pg-size,
.pg-btn,
.btn-ghost,
.fcell input,
.fcell select,
.date-btn{border-color:var(--line);background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,.72) inset}
.search input:hover,
.flt:hover,
.filter-toggle:hover,
.ms-btn:hover,
.pg-btn:hover:not(:disabled),
.btn-ghost:hover{border-color:var(--brand-2);background:var(--surface-hover)}
.search input:focus,
.fcell input:focus,
.fcell select:focus,
.fld input:focus,
.fld select:focus,
.fld textarea:focus,
.dp-body input:focus,
.dp-body select:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(20,103,157,.12),0 1px 2px rgba(16,24,40,.05)}
.btn{min-height:34px;border-radius:8px}
.btn-brand,.dp-foot .apply{background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 6px 14px rgba(7,56,91,.16)}
.btn-pri{background:var(--accent);box-shadow:0 7px 16px rgba(232,117,44,.22)}
.btn-brand:hover,.btn-pri:hover,.dp-foot .apply:hover{filter:brightness(1.04);transform:translateY(-1px)}

.table-wrap{background:var(--panel);border-top:1px solid var(--line)}
table{font-size:12px}
thead th{background:var(--surface-2);color:var(--ink-soft);border-bottom:1px solid var(--line);border-right-color:var(--line-soft);font-weight:700}
thead th:hover{background:var(--surface-hover);color:var(--ink)}
thead tr.filter-row th{background:var(--surface-2);border-bottom-color:var(--line)}
tbody td{border-bottom-color:var(--line-soft);border-right-color:var(--line-soft);color:var(--ink-soft)}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:hover td{background:var(--brand-50)}
tbody tr.sel td{background:var(--blue-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(20,103,157,.08)}
/* The frozen leftmost columns (checkbox, #, trade) must NEVER be translucent —
   rows scrolling horizontally underneath must not show through them in ANY state.
   The tints --brand-50 (hover) and --blue-bg (selection) are semi-transparent in
   most themes, so they can only be applied as a background-IMAGE gradient layered
   over an opaque background-COLOR base — never as the background-color itself. */
td.col-sel,
td.col-row,
td.col-trade{background-color:var(--panel);background-image:none;opacity:1;z-index:4}
tbody tr:nth-child(even) td.col-sel,
tbody tr:nth-child(even) td.col-row,
tbody tr:nth-child(even) td.col-trade{background-color:var(--surface-2);background-image:none}
tbody tr:hover td.col-sel,
tbody tr:hover td.col-row,
tbody tr:hover td.col-trade{background-color:var(--panel);background-image:linear-gradient(var(--brand-50),var(--brand-50))}
tbody tr:nth-child(even):hover td.col-sel,
tbody tr:nth-child(even):hover td.col-row,
tbody tr:nth-child(even):hover td.col-trade{background-color:var(--surface-2)}
tbody tr.row-sel td.col-sel,
tbody tr.row-sel td.col-row,
tbody tr.row-sel td.col-trade{
  background-color:var(--panel)!important;
  background-image:linear-gradient(var(--blue-bg),var(--blue-bg))!important;
}
body.ledger-touch .table-wrap{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  isolation:isolate;
}
body.ledger-touch tbody tr{transition:none!important}
body.ledger-touch tbody tr:hover td:not(.col-sel):not(.col-row):not(.col-trade){background:transparent}
body.ledger-touch tbody tr:nth-child(even):hover td:not(.col-sel):not(.col-row):not(.col-trade){background:var(--surface-2)}
body.ledger-touch tbody tr.row-sel:hover td:not(.col-sel):not(.col-row):not(.col-trade){background:var(--blue-bg)!important}
body.ledger-touch thead th.col-sel,
body.ledger-touch thead th.col-row,
body.ledger-touch thead th.col-trade,
body.ledger-touch tbody td.col-sel,
body.ledger-touch tbody td.col-row,
body.ledger-touch tbody td.col-trade{
  transform:translateZ(0);
  backface-visibility:hidden;
}
body.ledger-touch tbody tr:hover td.col-sel,
body.ledger-touch tbody tr:hover td.col-row,
body.ledger-touch tbody tr:hover td.col-trade{background-image:none}
body.ledger-touch tbody tr.row-sel:hover td.col-sel,
body.ledger-touch tbody tr.row-sel:hover td.col-row,
body.ledger-touch tbody tr.row-sel:hover td.col-trade{background-image:linear-gradient(var(--blue-bg),var(--blue-bg))!important}
body.ledger-tablet .row-acts{display:none!important}
td.col-trade{font-weight:700;color:var(--ink)}
.badge{border:1px solid currentColor}
.b-open{background:var(--blue-bg);color:var(--blue)}
.b-disbursed{background:var(--green-bg);color:var(--green)}
.b-closed{background:var(--slate-bg);color:var(--ink-soft)}
.b-fell{background:var(--red-bg);color:var(--red)}
.b-pcanc{background:var(--amber-bg);color:var(--amber)}
.b-cdef{background:var(--plum-bg);color:var(--plum)}
.pager{background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 -1px 0 rgba(255,255,255,.7) inset}

.modal-scrim{background:rgba(15,23,42,.42);backdrop-filter:blur(7px) saturate(120%)}
.modal,
.drawer,
.date-pop,
.ms-pop{border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.modal{border-radius:16px}
.modal-head,
.dr-head{background:var(--panel);border-bottom-color:var(--line)}
.modal-head h3,
.dr-head h2{color:var(--ink)}
.modal-head .x,
.dr-head .x,
.win-ctrls button{background:var(--surface-2);color:var(--muted)}
.modal-head .x:hover,
.dr-head .x:hover,
.win-ctrls button:hover{background:var(--line-soft);color:var(--ink)}
.modal-body,
.dr-body{background:var(--panel)}
.modal-foot,
.dr-foot{background:var(--surface-2);border-top:1px solid var(--line)}

.drawer-scrim{background:rgba(15,23,42,.38);backdrop-filter:blur(5px) saturate(115%)}
.drawer{box-shadow:-24px 0 56px rgba(16,24,40,.20),-2px 0 8px rgba(16,24,40,.08)}
.drawer.win{border:1px solid var(--line)}
.dr-sec h4{color:var(--brand-2);border-bottom-color:var(--line-soft)}
.fld{border-bottom-color:var(--line-soft)}
.fld label{color:var(--muted)}
.fld input,.fld select,.fld textarea{border-color:var(--line);background:var(--panel)}

.profile-card{background:#273241}
.profile-card .pc-hero{background:linear-gradient(180deg,#334155,#263140)}
.profile-card .pc-rows,
.profile-card .pc-foot{background:#222b38}
.profile-card .pc-row:hover{background:rgba(255,255,255,.10)}

@media(max-width:767px){
  .kpis{padding:8px;gap:6px}
  .kpi{min-width:116px;padding:10px 12px}
  .controls{padding:10px}
  .modal{border-radius:14px}
}

/* ════════════════════════════════════════════════════════════════════════
   Font picker + motion/polish pass (2026-07-01) — confirmed in SYME004
   preview, now shipped to everyone via html[data-sy-preview="1"] (set for
   any logged-in user in main.js init()).
   ════════════════════════════════════════════════════════════════════════ */
html[data-sy-preview="1"]{
  --sy-ease-out:cubic-bezier(.23,1,.32,1);
}

@media (prefers-reduced-motion:reduce){
  html[data-sy-preview="1"] *,
  html[data-sy-preview="1"] *::before,
  html[data-sy-preview="1"] *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* Modals: fade + scale from centre (was an instant display:none->flex snap).
   :not(.maxed) is required — a maximized modal in the hdr-v2 layout needs
   transform:translateX(-50%) to stay centered (see body.hdr-v2 .modal.maxed
   above), and transform is not additive: transform:scale(1) here would
   silently replace that translateX and shove the modal off to the right
   edge of the screen, with no way to reach it. */
html[data-sy-preview="1"] .modal-scrim{opacity:0;transition:opacity 200ms var(--sy-ease-out)}
html[data-sy-preview="1"] .modal-scrim.open{opacity:1}
html[data-sy-preview="1"] .modal-scrim .modal:not(.maxed){transform:scale(.96);opacity:0;transition:transform 220ms var(--sy-ease-out),opacity 220ms var(--sy-ease-out)}
html[data-sy-preview="1"] .modal-scrim.open .modal:not(.maxed){transform:scale(1);opacity:1}
/* Expanded popups fade in instead of snapping (they open maximized by default
   since 2026-07-27). OPACITY ONLY — see the transform warning above; a scale
   here would replace the hdr-v2 centering translate. */
html[data-sy-preview="1"] .modal-scrim .modal.maxed{opacity:0;transition:opacity 200ms var(--sy-ease-out)}
html[data-sy-preview="1"] .modal-scrim.open .modal.maxed{opacity:1}
/* Phone popups are full-screen by CSS — an expand control there is meaningless. */
html.phone-mode .modal-head .max-btn{display:none}
/* An ID-scoped size rule outranks `.modal.maxed` (0,1,1,0 vs 0,0,2,0), so the
   popup would keep its fixed size while claiming to be expanded. The EFT hub is
   the only one today — a NEW `#someScrim .modal{width/height}` rule needs the
   same escape hatch, or its expand button does nothing.
   `position:fixed` is !important because the EFT modal carries an INLINE
   `position:relative` (index.html), which beats the class rule: the expanded
   modal then stayed in the scrim's flex flow and `top:64px` acted as a RELATIVE
   offset on top of it, opening the hub 128px down instead of flush under the
   64px header. Any modal given an inline `position` needs this override. */
#eftScrim .modal.maxed{ position:fixed!important; width:97vw; height:94vh; max-height:94vh }
body.hdr-v2 #eftScrim .modal.maxed{ position:fixed!important; width:97vw; height:calc(100vh - 64px); max-height:calc(100vh - 64px) }
/* The EFT header already spends its free space on the tab row; a second
   `margin-left:auto` would split it and drag the tabs off centre. */
#eftScrim .modal-head .max-btn{ margin-left:0 }

/* ---- EFT Hub follows the user's palette (Rishi 2026-07-27) ----------------
   The EFT block predates the theme system: it reads `--card` (which the root
   remap does NOT cover, so it stayed plain white while every other surface
   tinted) and carries hardcoded warm greys + the old brand green. Per the
   standing rule, an element-scoped value can only be beaten at the same scope,
   so the vars are re-declared on the scrim and the literal colours overridden.
   SEMANTIC colours are deliberately left alone — the red errors, amber
   warnings, green validation ticks and the dark file-preview panel mean
   something, and repainting them in the palette would destroy the signal. */
html.lq-glass:not(.phone-mode) #eftScrim,
html.lq-glass:not(.phone-mode) #eftCsvScrim,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim,
html.lq-glass:not(.phone-mode) #eftNocFormScrim,
html.lq-glass:not(.phone-mode) #eftRetFormScrim,
html.lq-glass:not(.phone-mode) #fileEditScrim,
html.lq-glass:not(.phone-mode) #sendAdvScrim{
  --card:color-mix(in srgb,var(--lqa,#16324f) 2%,#fff);
  --bg:color-mix(in srgb,var(--lqa,#16324f) 5%,#fff);
}
/* Selected originator + focus rings + step badges: the old brand green. */
html.lq-glass:not(.phone-mode) #eftScrim .eft-orig.on{
  background:color-mix(in srgb,var(--lqa,#16324f) 8%,#fff);
}
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .field input:focus,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .field select:focus,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .field textarea:focus,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lqa,#16324f) 18%,transparent);
}
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-form-step,
html.lq-glass:not(.phone-mode) #eftNocFormScrim .eft-form-step,
html.lq-glass:not(.phone-mode) #eftRetFormScrim .eft-form-step{
  background:color-mix(in srgb,var(--lqa,#16324f) 10%,#fff);
}
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-banner{
  background:color-mix(in srgb,var(--lqa,#16324f) 8%,#fff);
  border-color:color-mix(in srgb,var(--lqa,#16324f) 20%,#fff);
  color:var(--lqt,#16324f);
}
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .add-row-btn:hover{
  background:color-mix(in srgb,var(--lqa,#16324f) 7%,#fff);
}
/* Warm-grey grounds → palette-tinted, so the sub-forms match the hub. */
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .modal,
html.lq-glass:not(.phone-mode) #eftNocFormScrim .modal,
html.lq-glass:not(.phone-mode) #eftRetFormScrim .modal{ background:var(--bg) }
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .modal-head,
html.lq-glass:not(.phone-mode) #eftNocFormScrim .modal-head,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .modal-foot,
html.lq-glass:not(.phone-mode) #eftNocFormScrim .modal-foot,
html.lq-glass:not(.phone-mode) #eftRetFormScrim .modal-head,
html.lq-glass:not(.phone-mode) #eftRetFormScrim .modal-foot,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-form-card,
html.lq-glass:not(.phone-mode) #eftNocFormScrim .eft-form-card,
html.lq-glass:not(.phone-mode) #eftRetFormScrim .eft-form-card{ background:var(--card) }
html.lq-glass:not(.phone-mode) #eftNocFormScrim .eft-acct-col,
html.lq-glass:not(.phone-mode) #eftRetFormScrim .eft-checkbox-row,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-context-chip{
  background:var(--bg); border-color:var(--line);
}
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-context-chip{ color:var(--ink-soft) }
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-context-chip .ctx-label{ color:var(--ink) }
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl thead th,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl tfoot td,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl input,
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl .rm-btn{ background:var(--card) }
html.lq-glass:not(.phone-mode) #eftAdvFormScrim .eft-inv-tbl input{ border-color:var(--line) }
/* The active payment-type segment reads as the app accent, not flat black. */
html.lq-glass:not(.phone-mode) #eftScrim .pmt-toggle button.on{
  background:var(--lqt,#16324f); color:#fff;
}

/* Drawers: fade the scrim only. Do NOT add hide/reveal rules for .drawer.win
   here: #drawer is a SIBLING of #drawerScrim (index.html), so a
   ".drawer-scrim.open .drawer.win" descendant reveal can never match — the
   2026-07-01 pass shipped exactly that pair and every windowed deal form
   (New deal / edit deal) rendered opacity:0 behind the blurred scrim (blank
   sheet, team report 2026-07-08). The base .drawer.win rules already animate
   open/close (scale .96 + fade, see ~line 506), and any translateX reveal
   would clobber the translate(-50%,-50%) centering transform anyway. */
html[data-sy-preview="1"] .drawer-scrim{opacity:0;transition:opacity 200ms var(--sy-ease-out)}
html[data-sy-preview="1"] .drawer-scrim.open{opacity:1}

/* Ghost-card fix: popovers/menus get a border OR a tight shadow, never both.
   These pick shadow-only (drop the 1px border) since they float over content
   without a scrim. Static transform-origin per anchor side (not dynamic —
   full per-click origin tracking is a follow-up). */
html[data-sy-preview="1"] .date-pop,
html[data-sy-preview="1"] .ms-pop,
html[data-sy-preview="1"] .cfg-move-menu{
  border-color:transparent;
  box-shadow:0 8px 20px rgba(16,24,40,.14);
  transform-origin:top left;
  transform:scale(.96);opacity:0;
  transition:transform 150ms var(--sy-ease-out),opacity 150ms var(--sy-ease-out);
}
html[data-sy-preview="1"] .date-pop.open,
html[data-sy-preview="1"] .ms-pop.open,
html[data-sy-preview="1"] .cfg-move-menu.open{transform:scale(1);opacity:1}
html[data-sy-preview="1"] .export-menu{
  border-color:transparent;
  box-shadow:0 8px 20px rgba(16,24,40,.14);
  transform-origin:top right;
  transform:scale(.96);opacity:0;
  transition:transform 150ms var(--sy-ease-out),opacity 150ms var(--sy-ease-out);
}
html[data-sy-preview="1"] .export-menu.open{transform:scale(1);opacity:1}

/* Side-stripe alert fix: tint the surface instead of a coloured left border */
html[data-sy-preview="1"] #eftScrim .eft-alert{border-left:none;border-radius:8px}

/* Button / row press feedback */
html[data-sy-preview="1"] .btn,
html[data-sy-preview="1"] .tb-btn,
html[data-sy-preview="1"] .pg-btn,
html[data-sy-preview="1"] .ms-btn,
html[data-sy-preview="1"] .filter-toggle{
  transition:transform 140ms var(--sy-ease-out),background .15s,border-color .15s,box-shadow .15s;
}
html[data-sy-preview="1"] .btn:active,
html[data-sy-preview="1"] .tb-btn:active,
html[data-sy-preview="1"] .pg-btn:active:not(:disabled),
html[data-sy-preview="1"] .ms-btn:active,
html[data-sy-preview="1"] .filter-toggle:active{transform:scale(.97)}
html[data-sy-preview="1"] tbody tr:active td{background:var(--brand-50);transition:background 80ms linear}

/* Live tables re-render during sync, filtering, and realtime updates. Keep row
   paint static so normal refreshes do not replay as visible flicker. */
html[data-sy-preview="1"] tbody tr{animation:none}

/* ════════════════════════════════════════════════════════════════════════
   Searchable font combobox (2026-07-02) — replaces the plain <select> now
   that the catalogue is 250+ fonts (a native dropdown that long needs
   search, not a giant scroll list). Ships unconditionally: it's an
   enhancement to the font picker already live for everyone, not a new
   risky behaviour, so it isn't behind the SYME004 review gate.
   ════════════════════════════════════════════════════════════════════════ */
.font-combo{position:relative;flex:1;max-width:330px}
.font-combo-btn{width:100%;text-align:left;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.font-combo-btn:hover{border-color:var(--brand-2)}
.font-combo-btn::after{content:'';position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.font-combo-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(16,24,40,.16);overflow:hidden}
.font-combo.open .font-combo-panel{display:block}
.font-combo-search{width:100%;box-sizing:border-box;padding:9px 12px;border:none;border-bottom:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;outline:none}
.font-combo-list{max-height:260px;overflow-y:auto;padding:4px 0}
.font-opt-group{padding:8px 12px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.font-opt{padding:8px 12px;font-size:13px;cursor:pointer;color:var(--ink)}
.font-opt:hover{background:var(--surface-hover,var(--bg))}
.font-opt.sel{background:var(--blue-bg);color:var(--brand-2);font-weight:600}
.font-opt-empty{padding:14px 12px;font-size:13px;color:var(--muted);text-align:center}

/* ============ LOGIN v2 (Sense redesign) ============ */
.login-wrap{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;font-family:'Inter',var(--font)}
.login-hero-bg{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.login-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.login-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.4));z-index:1}
.login-grid{position:relative;z-index:2;width:100%;max-width:1200px;display:grid;grid-template-columns:60% 40%;gap:24px;align-items:stretch}

/* Left branding card (glassmorphic) */
.login-brand-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:64px;border-radius:8px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.3);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.login-brand-inner{display:flex;flex-direction:column;align-items:center;gap:32px}
.login-lockup{display:flex;align-items:center;gap:24px}
.login-logo-img{width:230px;height:auto}
.login-divider{width:1px;height:64px;background:rgba(0,0,0,.2)}
.login-wordmark{font-family:'Manrope','Hanken Grotesk',var(--font);font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.login-brand-text{display:flex;flex-direction:column;gap:16px}
.login-headline{font-family:'Manrope','Hanken Grotesk',var(--font);font-size:30px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;max-width:440px}
.login-tagline{font-family:'Inter',var(--font);font-size:20px;font-weight:500;line-height:1.55;color:#444748;margin:0 auto;max-width:380px}

/* Right form card */
.login-form-card{display:flex;flex-direction:column;justify-content:center;padding:64px;border-radius:8px;background:#fff;border:1px solid rgba(196,199,199,.3);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.login-mobile-lockup{display:none}
.login-mobile-tagline{display:none}
.login-form-head{margin-bottom:32px}
.login-title{font-family:'Manrope','Hanken Grotesk',var(--font);font-size:24px;font-weight:500;color:var(--ink);margin:0 0 8px}
.login-wrap .login-sub{font-family:'Inter',var(--font);font-size:16px;font-weight:500;color:#444748;margin:0}
.login-field{margin-bottom:24px}
.login-field>label,.login-label-row label{display:block;font-family:'Inter',var(--font);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin-bottom:8px}
.login-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.login-label-row label{margin-bottom:0}
.login-forgot-link{font-family:'Inter',var(--font);font-size:12px;font-weight:600;color:var(--brand-2);text-decoration:none}
.login-forgot-link:hover{text-decoration:underline}
.login-input-wrap{position:relative;display:flex;align-items:center}
.login-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;color:#747878;pointer-events:none}
.login-input-wrap input{width:100%;box-sizing:border-box;padding:14px 16px 14px 48px;font-family:'Inter',var(--font);font-size:16px;color:#191c1d;border:1px solid #c4c7c7;border-radius:8px;background:#fff;transition:border-color .2s,box-shadow .2s;outline:none}
.login-input-wrap input::placeholder{color:#c4c7c7}
.login-input-wrap input:focus{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.login-input-wrap:has(.login-eye) input{padding-right:48px}
.login-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:#747878;opacity:.55;transition:opacity .2s,color .2s}
.login-eye:hover{opacity:1;color:var(--ink)}
/* Sign In — fluorescent orange (Rishi 2026-07-28). The label is CARBON, not
   white: white on #ff6a00 measures 2.87:1, under both the 4.5:1 body floor and
   the 3:1 large-text floor, so "SIGN IN" goes hazy. Carbon on the same orange
   is 6.22:1 — and black-on-fluorescent is what hi-vis signage uses precisely
   because it reads MORE intense, not less. Weight 700 carries the darker ink
   at 13px/.1em. The arrow inherits via currentColor. */
.login-go{width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;font-family:'Inter',var(--font);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#111820;background:#ff6a00;border:none;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s}
.login-go:hover{background:#ff7a1a}
.login-go:active{transform:scale(.98)}
.login-go:disabled{opacity:.6;cursor:default}
.login-wrap .login-err{margin-top:16px;padding:10px 12px;font-family:'Inter',var(--font);font-size:13px;font-weight:600;color:var(--red);background:var(--red-bg);border-radius:8px}

/* Fixed copyright footer */
.login-footer{position:fixed;bottom:20px;left:0;right:0;z-index:20;text-align:center;font-family:'Inter',var(--font);font-size:12px;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.7);pointer-events:none}

/* Mobile (≤1023px): single card, hide branding pane */
@media (max-width:1023px){
  .login-grid{grid-template-columns:1fr;max-width:440px;width:90vw}
  .login-brand-card{display:none}
  .login-form-card{padding:32px}
  .login-mobile-lockup{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
  .login-mobile-lockup .login-logo-img{width:auto;height:48px}
  .login-mobile-lockup .login-divider{height:40px}
  .login-mobile-lockup .login-wordmark{font-size:30px}
  .login-mobile-tagline{display:block;font-family:'Inter',var(--font);font-size:13px;font-weight:500;line-height:1.5;color:#444748;text-align:center;margin:0 0 28px}
  .login-footer{color:rgba(255,255,255,.85)}
}

/* Appearance modal v2 — split-pane with live preview (Option B) */
.modal.appearance-v2{width:720px;max-width:720px;padding:0}
.appearance-v2 .modal-head{padding:16px 22px;border-bottom:1px solid var(--line)}
.modal-body.appearance-v2-body{padding:0;display:grid;grid-template-columns:340px 1fr;overflow:visible;min-height:340px}
.appv2-settings{padding:22px 22px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;overflow:visible}
.appv2-row{display:flex;flex-direction:column;gap:8px}
.appv2-row>label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.appv2-row select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;appearance:auto;-webkit-appearance:auto;position:relative;z-index:1}
.appv2-row select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.appv2-theme-pick{display:flex;align-items:center;gap:10px}
.appv2-theme-pick .theme-sw{flex-shrink:0}
.appv2-theme-pick select{flex:1}
.appv2-preview{background:var(--bg);padding:22px;display:flex;flex-direction:column;gap:12px;border-radius:0 0 12px 0}
.appv2-preview-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.appv2-preview-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04);font-family:var(--font)}
.appv2-pv-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.appv2-pv-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;margin-bottom:14px}
.appv2-pv-table{width:100%;border-collapse:collapse;font-size:12px}
.appv2-pv-table th{text-align:left;font-weight:600;color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 0;border-bottom:1px solid var(--line)}
.appv2-pv-table td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.appv2-pv-table tr:last-child td{border-bottom:none}
.appv2-pv-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand);font-size:11px;font-weight:600}

/* 2026-07-04: flicker hardening. Keep the operational shell visually stable
   during realtime syncs, badge polls, table renders, and drawer/header changes. */
.app,
.topbar,
#topbar-new,
.app-crumbs,
.table-wrap,
table,
thead,
tbody,
tr,
th,
td,
.drawer,
.modal,
.badge,
.chat-badge,
.kpi,
.row-acts,
.row-act,
.rt-pill,
.sync-pill,
.sync-banner,
#topbar-new .tbx,
#topbar-new .al-item,
#topbar-new .app-launcher-panel,
#whosOnlinePop,
.profile-card{
  transition:none!important;
  animation:none!important;
}
.appv2-pv-btn{margin-top:14px;display:inline-block;padding:8px 14px;border-radius:8px;background:var(--brand);color:#fff;font-size:12px;font-weight:600;cursor:default}
@media (max-width:700px){
  .modal.appearance-v2{width:calc(100vw - 32px);max-width:520px}
  .modal-body.appearance-v2-body{grid-template-columns:1fr}
  .appv2-settings{border-right:none;border-bottom:1px solid var(--line)}
  .appv2-preview{display:none}
}

/* Signatures Hub: serial number column (2026-07-06) */
.ds-table .col-sn{width:34px;text-align:right;color:var(--faint);font-variant-numeric:tabular-nums;font-size:11px;padding-right:4px}

/* ============ PHONE SHELL (Phase 1, 2026-07-08 — approved mockups) ============
   Activates ONLY when phone.js adds html.phone-mode (viewport ≤700px and the
   user hasn't chosen "Desktop view"). Desktop/tablet layouts are untouched;
   the login page is untouched (shell lives inside #appRoot). Modals, the
   notifications drawer and toasts keep working — they sit above the shell. */
html.phone-mode #topbar-legacy,html.phone-mode #topbar-new,html.phone-mode #appCrumbs,
html.phone-mode #hamburgerMenu,html.phone-mode #breadcrumbBar,html.phone-mode #kpis,
html.phone-mode .controls,html.phone-mode #selBar,html.phone-mode #tableWrap,
html.phone-mode #pager,html.phone-mode #tcfNewPillSlot{display:none!important}
html.phone-mode body{overflow:hidden}
/* Ground fill behind the fixed shell (Rishi 2026-07-21: a white "strip" appears
   below the footer when the display size is reduced). Under the zoom viewport
   meta iOS can leave the fixed shell a hair short of the screen bottom, exposing
   the page background as a white band. Painting html+body the shell's own ground
   tone makes any such gap seamless. */
html.phone-mode, html.phone-mode body{background:var(--bg)}
html.phone-mode .app{display:block;padding:0;max-width:none}
#phoneShell{display:none}
/* Header blur, round 3 (2026-10-20): a fixed, opaque bar at the top edge for iOS to take its colour from
   instead of frosting the top of the home-screen app. Above the shell (30), under every sheet and page. */
#phTopEdge{display:none}
html.phone-mode #phTopEdge{display:block;position:fixed;top:0;left:0;right:0;height:calc(env(safe-area-inset-top,0px) + 8px);background-color:#ffffff;z-index:31}
/* height:calc(100% + --ph-fill) instead of inset:0 — on iOS standalone the
   zoomed-out layout viewport is shorter than the screen; --ph-fill (JS-computed
   in phone.js phFillStrip) extends the shell down to the true screen bottom so
   the footer nav isn't left short (Rishi 2026-07-22). --ph-fill is 0px at 100%
   so this equals inset:0 there. */
html.phone-mode #phoneShell{position:fixed;top:0;left:0;right:0;bottom:auto;height:calc(100% + var(--ph-fill,0px));z-index:30;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top)}
.ph-hd{display:flex;align-items:center;gap:9px;padding:10px 14px}
.ph-brand{display:flex;align-items:center;gap:7px;background:var(--brand,#16342e);border-radius:13px;padding:8px 13px;color:#fff}
.ph-brand .sq{width:9px;height:9px;background:#fff;display:inline-block}
.ph-brand b{font-size:12.5px;font-weight:800;line-height:1}
.ph-brand .sn{font-size:12.5px;font-weight:500;opacity:.85;border-left:1px solid rgba(255,255,255,.35);padding-left:7px}
.ph-sp{flex:1}
.ph-hico{position:relative;width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft,#4a6470);cursor:pointer;flex-shrink:0}
.ph-hico svg{width:17px;height:17px}
/* Unread count on the header bell — notifications.js drives every .notif-badge
   (textContent + display), this class only positions/paints it. */
.ph-hbadge{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#d6202c;color:#fff;font-size:10px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg);box-sizing:border-box;pointer-events:none}
.ph-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent,#e8841a);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.ph-search{margin:2px 14px 0;background:var(--panel);border:1.5px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:9px;padding:2px 14px;color:var(--muted)}
.ph-search input{flex:1;border:none;outline:none;background:transparent;font-size:15px;padding:10px 0;color:var(--ink);min-width:0}
.ph-search input::placeholder{color:var(--muted)}
.ph-search:focus-within{border-color:var(--accent,#e8841a)}
.ph-search button{border:none;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:4px}

/* ===== TCF advanced filter — funnel button, active chips, bottom sheet ===== */
html.phone-mode .ph-searchrow{display:flex;gap:10px;align-items:center;margin:2px 14px 0}
html.phone-mode .ph-searchrow .ph-search{margin:0;flex:1;min-width:0}
.ph-filterbtn{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--brand,#0f2f52);color:#fff;border:none;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.ph-filterbtn svg{width:20px;height:20px}
.ph-fbadge{position:absolute;top:-5px;right:-5px;background:#f0655a;color:#fff;font-weight:800;font-size:11px;min-width:19px;height:19px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg,#f1f5fb)}
.ph-fbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 0}
.ph-fchip{background:var(--brand-50,#eaf0fb);color:var(--brand,#274b7a);border-radius:999px;padding:8px 12px;font-weight:700;font-size:12.5px;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.ph-fchip i{opacity:.5;font-style:normal;font-weight:800}
.ph-fclr{background:none;border:none;color:#c0505a;font-weight:700;font-size:12.5px;padding:8px 4px;cursor:pointer}

.ph-fscrim{position:fixed;inset:0;z-index:6000;background:rgba(15,25,45,.34);opacity:0;pointer-events:none;transition:opacity .2s;display:flex;flex-direction:column;justify-content:flex-end}
.ph-fscrim.open{opacity:1;pointer-events:auto}
.ph-fsheet{background:var(--panel,#fff);border-radius:24px 24px 0 0;max-height:92vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.7,.3,1);padding-bottom:env(safe-area-inset-bottom)}
.ph-fscrim.open .ph-fsheet{transform:translateY(0)}
.ph-fsheet .ph-grab{width:40px;height:5px;border-radius:999px;background:var(--line,#d7deea);margin:10px auto 2px}
.fs-hd{display:flex;align-items:center;padding:8px 16px 6px 20px}
.fs-hd h3{font-size:20px;font-weight:800;color:var(--ink)}
.fs-close{margin-left:auto;width:34px;height:34px;flex:0 0 auto;border:none;background:var(--surface-2,#f2f4f8);border-radius:10px;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fs-reset{margin-left:auto;color:var(--accent,#4a6cf0);font-weight:700;font-size:13.5px;cursor:pointer}
.fs-body{overflow:auto;padding:6px 16px 6px;-webkit-overflow-scrolling:touch}
.fs-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 4px 8px;display:flex;align-items:center;gap:8px}
.fs-n{background:var(--brand-50,#eef0fb);color:var(--accent,#4a4fd0);border-radius:999px;padding:2px 7px;font-size:10.5px}
.fs-opts{display:flex;flex-wrap:wrap;gap:8px}
.fs-opt{background:var(--surface-2,#f4f6fb);border:1.5px solid transparent;border-radius:999px;padding:9px 14px;font-weight:700;font-size:12.5px;color:var(--ink);display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.fs-opt.on{background:var(--brand-50,#eaf0ff);border-color:var(--accent,#4a6cf0);color:var(--brand,#274b7a)}
.fs-opt.no.on{background:#fdeceb;border-color:#e07a72;color:#b03a34}
.fs-opt.pt.on{background:#fff5e6;border-color:#e6a531;color:#9a6410}
.fs-opt.ok.on{background:#eafaf0;border-color:#2fb96a;color:#1f7d47}
.fs-ck{width:15px;height:15px;border-radius:4px;background:var(--accent,#4a6cf0);color:#fff;font-size:11px;font-style:normal;display:inline-flex;align-items:center;justify-content:center}
.fs-opt.no .fs-ck{background:#e07a72}.fs-opt.pt .fs-ck{background:#e6a531}.fs-opt.ok .fs-ck{background:#2fb96a}
.fs-drow{border:1.5px solid var(--line,#e6ebf3);border-radius:14px;overflow:hidden;background:var(--panel,#fff)}
.fs-dhead{display:flex;align-items:center;padding:14px 15px;font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer}
.fs-dsum{margin-left:auto;color:var(--accent,#4a6cf0);font-weight:700;font-size:13px;margin-right:9px}
.fs-dsum.muted{color:var(--muted);font-weight:600}
.fs-dchev{color:var(--muted);font-size:17px;line-height:1;font-weight:700}
/* Picker sub-view: frozen header + sticky search + scrolling FULL list + frozen footer */
.ph-fsheet.picker{height:88vh}
.ph-fsheet.picker .fs-plist{flex:1 1 auto;min-height:0}
.fs-phd{display:flex;align-items:center;gap:10px;padding:6px 14px 8px}
.fs-phd h3{font-size:18px;font-weight:800;color:var(--ink)}
.fs-back{width:34px;height:34px;flex:0 0 auto;border:none;background:var(--surface-2,#f2f4f8);border-radius:10px;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fs-pcount{margin-left:auto;color:var(--muted);font-weight:600;font-size:12.5px}
.fs-clearone{margin-left:10px}
.fs-reset.hide{display:none}
.fs-psearch{display:flex;align-items:center;gap:8px;background:var(--surface-2,#f4f6fb);border-radius:12px;padding:11px 13px;color:var(--muted);margin:2px 16px 8px}
.fs-psearch svg{width:17px;height:17px;flex:0 0 auto}
.fs-psearch input{flex:1;border:none;outline:none;background:transparent;font-size:16px;color:var(--ink);min-width:0}
.fs-plist{overflow:auto;-webkit-overflow-scrolling:touch;padding:0 18px 6px}
.fs-citem{display:flex;align-items:center;gap:12px;padding:13px 4px;font-weight:600;font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--line-soft,#f4f6fa);cursor:pointer}
.fs-citem:last-child{border-bottom:none}
.fs-citem.on{font-weight:700}
.fs-clabel{flex:1;min-width:0}
.fs-cbox{width:21px;height:21px;border-radius:6px;border:2px solid var(--line,#cdd7e6);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.fs-citem.on .fs-cbox{background:var(--accent,#4a6cf0);border-color:var(--accent,#4a6cf0)}
.fs-cempty{padding:16px 6px;color:var(--muted);font-size:13px;text-align:center}
.fs-seg{display:flex;background:var(--surface-2,#f0f3f8);border-radius:12px;padding:4px;gap:4px}
.fs-seg span{flex:1;text-align:center;padding:9px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.fs-seg span.on{background:var(--panel,#fff);color:var(--brand,#0f2f52);box-shadow:0 2px 8px -3px rgba(20,40,70,.3)}
.fs-ft{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line-soft,#f0f2f6);background:var(--panel,#fff)}
.fs-clear{flex:0 0 auto;padding:15px 20px;border-radius:15px;background:var(--surface-2,#f2f4f8);color:var(--ink);font-weight:800;font-size:14px;border:none;cursor:pointer}
.fs-apply{flex:1;padding:15px;border-radius:15px;background:var(--brand,#0f2f52);color:#fff;font-weight:800;font-size:14.5px;border:none;cursor:pointer}
/* Submitted-date picker (5 modes) */
.fsd-modes{display:flex;gap:6px;padding:2px 16px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fsd-modes::-webkit-scrollbar{display:none}
.fsd-mode{flex:0 0 auto;background:var(--surface-2,#f4f6fb);border:1.5px solid transparent;border-radius:999px;padding:9px 15px;font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer}
.fsd-mode.on{background:var(--brand-50,#eaf0ff);border-color:var(--accent,#4a6cf0);color:var(--brand,#274b7a)}
.fsd-scroll{padding:0 16px}
.fsd-body{padding:4px 0 10px}
.fsd-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 12px}
.fsd-arrow{width:38px;height:38px;border:none;background:var(--surface-2,#f2f4f8);border-radius:11px;font-size:20px;line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fsd-arrow.off{opacity:.32;pointer-events:none}
.fsd-lab{font-weight:800;font-size:15.5px;color:var(--ink)}
.fsd-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.fsd-dow span{text-align:center;font-size:11px;font-weight:800;color:var(--muted)}
.fsd-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.fsday{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.fsday.muted{color:var(--muted);opacity:.5}
.fsday.inr{background:var(--brand-50,#eaf0ff);border-radius:0}
.fsday.sel{background:var(--brand,#0f2f52);color:#fff;font-weight:800}
.fsd-grid{display:grid;gap:9px;margin-top:2px}
.fsd-grid.g3{grid-template-columns:repeat(3,1fr)}
.fsd-grid.g2{grid-template-columns:repeat(2,1fr)}
.fsd-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:15px 8px;border-radius:13px;border:1.5px solid var(--line,#e6ebf3);background:var(--panel,#fff);font-weight:800;font-size:14px;color:var(--ink);cursor:pointer}
.fsd-pill small{font-weight:600;font-size:11px;color:var(--muted)}
.fsd-pill.sel{background:var(--brand-50,#eaf0ff);border-color:var(--accent,#4a6cf0);color:var(--brand,#274b7a)}
.fsd-pill.sel small{color:var(--brand,#274b7a)}
.fsd-status{margin-top:14px;padding:11px 13px;border-radius:11px;background:var(--surface-2,#f4f6fb);font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fsd-status .muted{font-weight:600;color:var(--muted)}
.fsdclr{margin-left:auto;color:var(--accent,#4a6cf0);font-weight:800;cursor:pointer}

.ph-chips{display:flex;gap:7px;padding:11px 14px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ph-chips::-webkit-scrollbar{display:none}
.ph-chip{flex-shrink:0;display:flex;align-items:baseline;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6.5px 12px;font-size:11.5px;font-weight:600;color:var(--ink-soft,#5c707c);cursor:pointer}
.ph-chip b{font-size:12px;font-variant-numeric:tabular-nums}
.ph-chip.on{background:var(--brand,#16342e);border-color:var(--brand,#16342e);color:#fff}
.ph-chip.c-open b{color:#2563b8}.ph-chip.c-dis b{color:#0f9b7a}.ph-chip.c-fell b{color:#c05a4e}.ph-chip.c-pcanc b{color:#c2740a}.ph-chip.c-cdef b{color:#7a3e8f}
.ph-chip.on b{color:#ffce9e}
.ph-count{padding:8px 14px 6px 18px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.ph-cnt-sp{flex:1}
.ph-refresh{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:700;color:var(--ink-soft,#5c707c);cursor:pointer;font-family:inherit;letter-spacing:0;text-transform:none;white-space:nowrap}
.ph-refresh:disabled{opacity:.55}
.ph-list{flex:1;overflow-y:auto;padding:0 12px 12px;display:flex;flex-direction:column;gap:9px;-webkit-overflow-scrolling:touch}
.ph-card{background:var(--panel);border-radius:15px;padding:12px 14px;box-shadow:0 2px 10px rgba(20,40,60,.06);cursor:pointer;flex-shrink:0}
.ph-card-top{display:flex;align-items:center;gap:8px}
.ph-trade{font-size:11px;font-weight:700;color:#2563b8;background:rgba(37,99,184,.10);border-radius:6px;padding:3px 8px;font-variant-numeric:tabular-nums}
.ph-pill{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:3.5px 10px;white-space:nowrap}
/* LIVE fluorescent status pills (Rishi 2026-07-24): vivid gradient + glow +
   slow shimmer sweep on every deal-status pill (card, sheet, Full Deal all
   share these classes). Reduced-motion keeps the color, kills the sweep. */
.ph-pill.ph-open,.ph-pill.ph-dis,.ph-pill.ph-closed,.ph-pill.ph-fell,.ph-pill.ph-pcanc,.ph-pill.ph-cdef{
  color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22);
  background-size:220% 100%;animation:phGold 3s linear infinite;
}
.ph-pill.ph-open{background-image:linear-gradient(115deg,#1e40af 0%,#2563eb 40%,#38bdf8 52%,#2563eb 64%,#1e40af 100%);box-shadow:0 0 12px rgba(56,189,248,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.ph-pill.ph-dis{background-image:linear-gradient(115deg,#047857 0%,#059669 40%,#34d399 52%,#059669 64%,#047857 100%);box-shadow:0 0 12px rgba(52,211,153,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
/* Counted lifecycle stage pills (2026-07-09, per Rishi): second pill next to
   the bucket — Logged In blue, Confirmed violet, Collected sparkling gold. */
.ph-pill.ph-sub{margin-left:6px}
.ph-pill.ph-sub-li{background:#dbeafe;color:#1e40af}
.ph-pill.ph-sub-cf{background:#ede9fe;color:#5b21b6}
.ph-pill.ph-sub-col{background:linear-gradient(115deg,#f7d774 0%,#f2b53a 40%,#ffe9a3 52%,#eeb62f 64%,#f7d774 100%);background-size:220% 100%;color:#6b4a00;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(190,140,20,.45),0 1px 3px rgba(190,140,20,.35);animation:phGold 2.6s linear infinite}
@keyframes phGold{0%{background-position:0% 0}100%{background-position:220% 0}}
@media (prefers-reduced-motion: reduce){.ph-pill.ph-sub-col,.ph-pill.ph-open,.ph-pill.ph-dis,.ph-pill.ph-closed,.ph-pill.ph-fell,.ph-pill.ph-pcanc,.ph-pill.ph-cdef{animation:none}}
.ph-pill.ph-closed{background-image:linear-gradient(115deg,#4338ca 0%,#4f46e5 40%,#818cf8 52%,#4f46e5 64%,#4338ca 100%);box-shadow:0 0 12px rgba(129,140,248,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.ph-pill.ph-fell{background-image:linear-gradient(115deg,#b91c1c 0%,#dc2626 40%,#fb7185 52%,#dc2626 64%,#b91c1c 100%);box-shadow:0 0 12px rgba(251,113,133,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.ph-pill.ph-pcanc{background-image:linear-gradient(115deg,#b45309 0%,#d97706 40%,#fbbf24 52%,#d97706 64%,#b45309 100%);box-shadow:0 0 12px rgba(251,191,36,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.ph-pill.ph-cdef{background-image:linear-gradient(115deg,#5b2d6e 0%,#7a3e8f 40%,#c084fc 52%,#7a3e8f 64%,#5b2d6e 100%);box-shadow:0 0 12px rgba(192,132,252,.5),inset 0 0 0 1px rgba(255,255,255,.25)}
.ph-card-name{font-size:15.5px;font-weight:700;color:var(--ink);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-card-sub{font-size:12.5px;color:var(--ink-soft,#5c707c);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-card-meta{font-size:11.5px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-card-foot{display:flex;align-items:center;font-size:11px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft,var(--line))}
.ph-chev{margin-left:auto;font-size:17px;color:var(--muted);line-height:1}
.ph-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
/* Phone skeletons — the same bone and pulse as the ledger .skel-row, cut to
   the shape of the phone card (chip, pill, name, line, footer). Still under
   prefers-reduced-motion. */
.ph-skel{display:flex;flex-direction:column;gap:9px}
.ph-skel-card{background:var(--panel);border-radius:15px;padding:12px 14px;box-shadow:0 2px 10px rgba(20,40,60,.06)}
.ph-skel-hub .ph-skel-card{border-radius:24px;padding:18px;box-shadow:0 12px 32px rgba(23,34,58,.06)}
.ph-skel-row,.ph-skel-foot,.ph-skel-person,.ph-skel-kv,.ph-skel-hubhd{display:flex;align-items:center;gap:8px}
.ph-skel-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft,var(--line))}
.ph-skel-col{flex:1;min-width:0}
.ph-skel-fin,.ph-skel-stats,.ph-skel-kpis,.ph-skel-apps{display:flex;gap:7px;margin-top:9px}
.ph-skel-steps{display:flex;gap:8px;align-items:center;margin-top:10px}
.ph-skel-app{display:flex;flex-direction:column;align-items:center;width:64px}
.ph-bone{display:block;height:10px;border-radius:6px;flex:none;
  background:linear-gradient(90deg,var(--line-soft) 25%,var(--panel) 50%,var(--line-soft) 75%);
  background-size:200% 100%;animation:skelpulse 1.4s ease-in-out infinite}
.ph-bone.w-trade{width:92px;height:18px}
.ph-bone.w-pill,.ph-bone.w-pill2{width:64px;height:18px;border-radius:999px}
.ph-skel-row>.w-pill,.ph-skel-person>.w-pill{margin-left:auto}
.ph-skel-task .ph-skel-row>.w-pill{margin-left:0}
.ph-bone.w-pill2{width:72px;margin-left:6px}
.ph-bone.w-name{width:72%;height:14px;margin-top:8px}
.ph-bone.w-sub{width:88%;height:11px;margin-top:6px}
.ph-bone.w-meta{width:48%;height:10px;margin-top:6px}
.ph-bone.w-foot{width:40%;height:10px}
.ph-bone.w-chev{width:8px;height:14px;margin-left:auto;border-radius:2px}
.ph-bone.w-amt{flex:1;height:36px;border-radius:9px}
.ph-bone.w-prog{height:6px;width:100%;margin-top:8px;border-radius:999px}
.ph-bone.w-btn{width:72px;height:26px;border-radius:8px;margin-left:auto}
.ph-bone.w-av{width:36px;height:36px;border-radius:50%}
.ph-bone.w-dot{width:10px;height:10px;border-radius:50%}
.ph-bone.w-age{width:48px;height:16px;border-radius:999px;margin-left:auto}
.ph-bone.w-pri{width:54px;height:12px}
.ph-bone.w-k{width:34%;height:11px}
.ph-bone.w-v{width:28%;height:11px;margin-left:auto}
.ph-bone.w-hero{width:46%;height:28px;margin:8px 0}
.ph-bone.w-title{width:120px;height:22px;border-radius:8px}
.ph-bone.w-date{width:88px;height:22px;border-radius:999px;margin-left:auto}
.ph-bone.w-stat{flex:1;height:58px;border-radius:16px}
.ph-bone.w-app{width:44px;height:44px;border-radius:15px}
.ph-bone.w-applb{width:48px;height:8px;margin-top:8px}
.ph-bone.w-act{width:28px;height:28px;border-radius:50%}
.ph-bone.w-block{height:64px;width:100%;margin-top:8px;border-radius:12px}
.ph-bone.w-bar{height:8px;width:100%;margin-top:8px;border-radius:999px}
.ph-bone.w-kpi{flex:1;height:52px;border-radius:14px}
.ph-bone.w-cal{height:168px;width:100%;border-radius:16px}
.ph-bone.w-line{height:12px;width:92%;margin-top:8px}
.ph-bone.w-page{height:220px;width:72%;margin:16px auto;border-radius:8px}
.ph-skel-person .ph-bone.w-name,.ph-skel-person .ph-bone.w-sub{margin-top:0}
.ph-skel-person .ph-bone.w-name{width:64%}
.ph-skel-person .ph-bone.w-sub{width:46%;margin-top:6px}
.ph-skel-col .ph-bone.w-name{margin-top:0}
@media (prefers-reduced-motion:reduce){
  .ph-bone{animation:none;background:var(--line-soft)}
}
.ph-more{padding:12px;text-align:center;color:var(--muted);font-size:11.5px}
/* The nav lives at BODY ROOT (2026-07-24, out of the z-30 shell's stacking
   context — see phone.js) — fixed to the viewport bottom in every skin,
   z-40: above the Sourcing host (30), below sheets/modals/drawers (≥60). */
.ph-nav{display:flex;background:var(--panel);border-top:1px solid var(--line);padding:7px 4px calc(8px + env(safe-area-inset-bottom));position:fixed;left:0;right:0;bottom:0;z-index:40}
.ph-bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--muted);border:none;background:none;cursor:pointer;padding:2px 0;font-family:inherit}
/* Active tab reads at a glance (2026-07-09, per Rishi): tinted pill behind the
   icon + brand-colored bold label — the old color-only accent was too subtle. */
.ph-bn svg{width:21px;height:21px;padding:3.5px 15px;border-radius:999px;box-sizing:content-box}
.ph-bn.on{color:var(--brand,#0a3d62);font-weight:800}
.ph-bn.on svg{background:var(--brand-50,rgba(31,111,235,.12))}
.ph-bn.on svg *{stroke-width:2.4}
.ph-sheet-scrim{position:fixed;inset:0;background:rgba(16,30,40,.45);z-index:120;display:none}
.ph-sheet-scrim.open{display:block}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-radius:24px 24px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(10,25,40,.25);max-height:82vh;overflow-y:auto}
.ph-grab{width:40px;height:4.5px;border-radius:3px;background:var(--line);margin:2px auto 13px}
.ph-sheet-name{font-size:17px;font-weight:800;color:var(--ink);margin-top:9px}
.ph-sheet-sub{font-size:12.5px;color:var(--ink-soft,#5c707c);margin-top:3px}
.ph-sheet-kvs{margin-top:6px}
.ph-kv{display:flex;justify-content:space-between;gap:12px;padding:9.5px 2px;border-bottom:1px solid var(--line-soft,var(--line));font-size:13px}
.ph-kv span{color:var(--muted)}
.ph-kv b{font-weight:600;color:var(--ink);text-align:right;max-width:62%}
.ph-kv b.ph-tcf{color:#7c5bd0}
/* ── Onboarding form export + edit (Rishi 2026-07-11, round 5f) ── */
.hrx-bar{display:flex;gap:10px;align-items:stretch;margin-bottom:12px;flex-wrap:wrap}
.hrx-meta{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:160px}
.hrx-meta b{font-size:13.5px;color:var(--ink);letter-spacing:-.1px}
.hrx-meta span{font-size:11.5px;color:var(--muted);margin-top:2px}
.hrx-btn{display:flex;align-items:center;gap:10px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:13px;padding:9px 14px 9px 10px;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 1px 3px rgba(16,34,53,.07);transition:.15s}
.hrx-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(16,34,53,.12)}
.hrx-btn .xi{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hrx-btn.pdf .xi{background:#fbeceb;color:#b3554b}
.hrx-btn.csv .xi{background:#e8f6ef;color:#2e7d5f}
.hrx-btn.edit .xi{background:#edecfb;color:#5850c0}
.hrx-btn .m{display:flex;flex-direction:column}
.hrx-btn .m b{font-size:12.5px;color:var(--ink);letter-spacing:-.1px}
.hrx-btn .m i{font-style:normal;font-size:10.5px;color:var(--muted)}
.hrfe-bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;background:linear-gradient(100deg,rgba(99,102,241,.10),rgba(99,102,241,.03));border:1px solid rgba(99,102,241,.3);border-radius:12px;padding:9px 12px}
.hrfe-bar .t{flex:1;font-size:12px;font-weight:600;color:#4338ca}
.hrfe-row{display:flex;flex-direction:column;gap:3px}
.hrfe-row label{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.hrfe-in{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px;background:var(--panel,#fff);font-family:inherit;width:100%;box-sizing:border-box}
.hrfe-in:focus{outline:none;border-color:var(--brand-2,#1a6fb0);box-shadow:0 0 0 3px rgba(26,111,176,.1)}
/* phone export tiles — ONE ROW of four (PDF/CSV/Edit/Close), soft-pastel
   line icons (approved option 2, Rishi 2026-07-11: the saturated badge
   bubbles "look like signal lights") */
/* Fixed-footer sheet (onboarding): scroll body + the tile row pinned at the
   very bottom of the sheet, so PDF/CSV/Edit/Close never float mid-sheet. */
.ph-sheet.ph-sheet-ff{display:flex;flex-direction:column;padding:10px 0 0;overflow:hidden}
.ph-sheet.ph-sheet-ff > .ph-grab{flex:none}
.ph-sheet.ph-sheet-ff > .ph-ffbody{flex:1 1 auto;overflow-y:auto;min-height:0;padding:0 18px}
.ph-sheet.ph-sheet-ff > .ph-xport{position:static;flex:none;margin:0;border-top:1px solid var(--line);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 16px -12px rgba(10,25,40,.35)}
.ph-sheet.ph-sheet-ff > .ph-xport::after{display:none}
.ph-sheet.ph-sheet-ff > .ph-sheet-acts{flex:none;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
/* Lead detail: the body scrolls, Close stays put, long values wrap, and the
   home indicator is padded. Only this sheet — the shared #phSheet is reused. */
.ph-sheet.ph-sheet-lead{display:flex;flex-direction:column;box-sizing:border-box;padding:8px 0 0;overflow:hidden;max-height:min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px))}
.ph-sheet.ph-sheet-lead > .ph-grab{flex:none}
.ph-sheet.ph-sheet-lead > .ph-lead-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px))}
.ph-sheet.ph-sheet-lead > .ph-lead-dock{flex:none;border-top:1px solid var(--line-soft, var(--line));background:var(--panel, #fff);padding:8px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.ph-sheet.ph-sheet-lead .ph-lead-dock .ph-sheet-acts{margin-top:8px}
.ph-sheet.ph-sheet-lead .ph-lead-dock .ph-sheet-acts:first-child{margin-top:0}
.ph-sheet.ph-sheet-lead .ph-kv b{max-width:none;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.ph-sheet.ph-sheet-lead .ph-card-name,.ph-sheet.ph-sheet-lead .ph-card-sub{white-space:normal;overflow:visible;text-overflow:clip}
section.ph-appt,section.lh-appt{margin:12px 0 4px;padding:12px 12px 8px;border-radius:14px;background:var(--surface-2, #f4f7f8);border:1px solid var(--line-soft, var(--line))}
.ph-appt-h,.lh-appt-h{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.ph-appt-when,.lh-appt-when{font-size:15px;font-weight:700;color:var(--ink);margin:4px 0 6px;line-height:1.35}
.ph-appt-note,.lh-appt-note{font-size:12px;color:var(--muted);padding:4px 2px 2px}
section.ph-appt .ph-kv,section.lh-appt .lh-kv{padding:6px 2px}
.ph-card-sub.ph-lead-appt{color:var(--ink);font-weight:650}
span.lh-t2.lh-appt{display:block;color:var(--ink);font-weight:600;margin-top:2px}
.ph-xport{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:14px;
  /* FROZEN at the sheet bottom (Rishi 2026-07-11): the sheet scrolls, the
     action row stays. Negative side margins bleed over the sheet's 18px
     gutters so content never peeks past the row's background. */
  position:sticky;bottom:env(safe-area-inset-bottom,0px);z-index:5;
  background:var(--panel,#fff);margin-left:-18px;margin-right:-18px;
  padding:10px 18px;box-shadow:0 -10px 18px -14px rgba(10,25,40,.4)}
/* opaque skirt below the pinned row — content must not peek through the
   sheet's bottom-padding strip while scrolling */
.ph-xport::after{content:'';position:absolute;left:0;right:0;top:100%;height:calc(26px + env(safe-area-inset-bottom,0px));background:var(--panel,#fff)}
/* same freeze for the edit sheet's Save/Cancel row */
.ph-sheet-acts.ph-freeze{position:sticky;bottom:env(safe-area-inset-bottom,0px);z-index:5;background:var(--panel,#fff);margin-left:-18px;margin-right:-18px;padding:10px 18px;box-shadow:0 -10px 18px -14px rgba(10,25,40,.4)}
/* In-app document viewer sheet (Rishi 2026-07-14, approved Option B): tapping
   View on a candidate document renders the file in OUR own full-height sheet —
   name + status on top, dark canvas, big Close + Download — never the iOS
   browser sheet. Sits ABOVE the ph-sheet layer (z 120). */
#phDocView{position:fixed;inset:0;z-index:130;background:rgba(12,18,28,.5);display:none}
#phDocView.open{display:block}
.ph-docv{position:absolute;left:0;right:0;bottom:0;top:calc(40px + env(safe-area-inset-top,0px));background:var(--panel,#fff);border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 44px rgba(10,20,40,.4)}
.ph-docv-grab{width:44px;height:5px;border-radius:3px;background:#dfe4ec;margin:9px auto 2px;flex:none}
.ph-docv-top{display:flex;align-items:center;gap:8px;padding:8px 14px 10px;flex:none}
.ph-docv-top b{flex:1;font-size:15px;color:var(--ink,#17233a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-docv-top .st{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#0f8a5f;flex:none}
.ph-docv-top .st.bad{color:#c0392b}
.ph-docv-top .x{width:30px;height:30px;border-radius:50%;background:var(--surface-2,#f0f2f6);border:0;font-size:14px;color:#5b6b7e;flex:none}
.ph-docv-body{flex:1;min-height:0;background:#40444d;display:flex}
.ph-docv-body iframe{flex:1;border:0;background:#fff}
.ph-docv-body .ph-docv-big{margin:auto;color:#fff;text-align:center;font-size:13px;line-height:1.8;padding:24px}
.ph-docv-body .ph-docv-big a{display:inline-block;margin-top:10px;background:#fff;color:var(--ink,#17233a);border-radius:11px;padding:10px 16px;font-weight:700;text-decoration:none}
/* Image documents (item 6, 2026-07-14): fit-to-screen by default, pan when zoomed */
.ph-docv-body .ph-docv-imgwrap{flex:1;min-height:0;overflow:auto;display:flex;-webkit-overflow-scrolling:touch}
.ph-docv-body .ph-docv-img{margin:auto;max-width:100%;max-height:100%;display:block}
/* PDF pages drawn by pdf.js (iOS iframes stop at page 1). Canvases render at
   ~2x and the zoom buttons only change their CSS width, so a zoom step is
   instant and stays sharp. */
.ph-docv-body .ph-docv-pdf{display:block;padding:10px 0 18px;text-align:center}
.ph-docv-pg{display:block;margin:0 auto 10px;width:100%;height:auto;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35);max-width:none}
.ph-docv-load{color:#fff;font-size:13px;padding:26px 16px;opacity:.85}
.ph-docv-zoom{display:inline-flex;gap:2px;flex:none;background:var(--surface-2,#f0f2f6);border-radius:9px;padding:2px}
.ph-docv-zoom button{min-width:30px;height:26px;border:0;background:transparent;color:var(--ink,#17233a);font-size:14px;font-weight:800;border-radius:7px;padding:0 6px}
.ph-docv-zoom button:active{background:rgba(0,0,0,.08)}
/* Desktop doc-viewer zoom controls (item 6) */
.hrdv-zoom{display:inline-flex;gap:2px;align-items:center}
.hrdv-zoom .btn.sm{min-width:30px;padding:3px 8px}
.ph-docv-acts{display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));flex:none;background:var(--panel,#fff)}
.ph-docv-acts .gh{flex:1;height:46px;border-radius:13px;background:var(--panel,#fff);border:1.5px solid var(--line,#e2e7ee);font-size:13.5px;font-weight:700;color:var(--ink,#17233a)}
.ph-docv-acts .pri{flex:1.4;height:46px;border-radius:13px;background:var(--brand,#0a2540);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:700;text-decoration:none}
.ph-sheet-acts.ph-freeze::after{content:'';position:absolute;left:0;right:0;top:100%;height:calc(26px + env(safe-area-inset-bottom,0px));background:var(--panel,#fff)}
.ph-xport .ph-xt{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:14px;padding:11px 4px 9px;cursor:pointer;font-family:inherit;box-shadow:0 1px 3px rgba(16,34,53,.06)}
.ph-xport .ph-xt:active{transform:scale(.96)}
.ph-xport .xi{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-xport .pdf .xi{background:#fbeceb;color:#b3554b}
.ph-xport .csv .xi{background:#e8f6ef;color:#2e7d5f}
.ph-xport .edit .xi{background:#edecfb;color:#5850c0}
.ph-xport .close .xi{background:#f0f2f5;color:#64748b}
.ph-xport .ph-xt b{font-size:10.5px;color:var(--ink);font-weight:700;letter-spacing:-.1px}
.ph-fe{margin-top:8px}
.ph-fe .ph-fl{margin-top:10px}
.ph-sheet-acts{display:flex;gap:8px;margin-top:14px}
.ph-sbtn{flex:1;text-align:center;font-size:12.5px;font-weight:700;border-radius:11px;padding:12px 0;border:none;cursor:pointer;font-family:inherit}
.ph-sbtn.pri{background:var(--accent,#e8841a);color:#fff}
.ph-sbtn.gh{background:var(--surface-2,#f2f5f6);color:var(--ink-soft,#3d5a5a);border:1px solid var(--line)}
.ph-sbtn.danger{background:#fdeaea;color:#b04a40;border:1px solid #f5caca}
/* Phase 2: TCF list strip, fin tiles, cash-back band, signature progress */
/* Full-funnel INR strip (GR → Collected, desktop PR #155 sequence): one row
   that pans sideways like the bucket chips above it — cards keep natural
   width and never wrap or squash. */
.ph-strip{display:flex;gap:7px;margin:10px 14px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ph-strip::-webkit-scrollbar{display:none}
.ph-strip>div{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:7px 10px;display:flex;align-items:baseline;gap:8px}
.ph-strip span{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.ph-strip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.ph-strip b{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-strip em{font-style:normal;font-size:9.5px;color:var(--muted);white-space:nowrap}
.ph-tcfchip{color:#7c5bd0;background:rgba(124,91,208,.10)}
.ph-fin{display:flex;gap:7px;margin-top:9px}
.ph-fin>div{flex:1;background:var(--surface-2,#f7fafb);border-radius:9px;padding:6px 9px;min-width:0}
.ph-fin span{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.ph-fin i{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.ph-fin b{display:block;font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-cb{display:flex;align-items:center;gap:8px;margin-top:8px;border-radius:9px;padding:7px 10px;font-size:9.5px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.ph-cb.unpaid{background:linear-gradient(100deg,rgba(224,112,100,.10),rgba(224,112,100,.04))}
.ph-cb.paid{background:linear-gradient(100deg,rgba(48,158,116,.11),rgba(48,158,116,.04))}
.ph-cb.part{background:linear-gradient(100deg,rgba(233,168,72,.13),rgba(233,168,72,.05))}
.ph-cb i{font-style:normal;font-size:9.5px;border-radius:999px;padding:2.5px 8px;text-transform:none}
.ph-cb.unpaid i{background:rgba(224,112,100,.14);color:#c05a4e}
.ph-cb.paid i{background:rgba(48,158,116,.15);color:#1e7d59}
.ph-cb.part i{background:rgba(233,168,72,.18);color:#a5701c}
.ph-cb b{margin-left:auto;font-size:12.5px;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.ph-pill.ph-wait{background:#fdf3df;color:#a5701c}
.ph-pill.ph-vio{background:#ede9fe;color:#5b21b6}
.ph-prog{height:4px;border-radius:3px;background:var(--surface-2,#eef2f4);margin-top:8px;overflow:hidden}
/* Colorful cards (Rishi 2026-07-11 "it's all orange"): the signing progress is
   a blue→violet sweep — distinct from the amber state pill. */
.ph-prog i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:3px}
.ph-chipdiv{width:1px;background:var(--line);margin:2px 2px;flex-shrink:0}
/* Leads Hub on phone (2026-10-18): the status select in the lead sheet, the card link while its signed URL is fetched */
.ph-lead-proj{max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ph-lead-ps{margin:12px 0 8px}.ph-lead-ps input{width:100%}
.ph-lead-plist{max-height:46vh;overflow:auto;display:grid;gap:4px;margin-bottom:4px}
.ph-lead-popt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;border-radius:12px;background:var(--surface-2,#f2f5f6);font-size:14px;font-weight:600;color:var(--ink)}
.ph-lead-popt.on{background:var(--brand,#16342e);color:#fff}
.ph-lead-popt input{width:20px;height:20px;accent-color:var(--accent,#e8841a);margin:0}
.ph-lead-sel{font:inherit;font-weight:600;color:var(--ink);background:var(--surface-2,#f2f5f6);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.ph-kv a{color:var(--brand,#16342e);text-decoration:underline;text-underline-offset:2px}
.ph-kv a.ph-lead-wait{color:var(--muted);text-decoration:none}
.ph-pill.ph-ok{background:#dcf5ea;color:#1e7d59}
.ph-card-sub .ph-ok{color:#1e7d59}.ph-card-sub .ph-bad{color:#b04a40;font-weight:600}.ph-card-sub .ph-wait{color:#a5701c}
.ph-tcfsheet{padding:4px 0 0}
/* Phase 3: sheet footnote, signer status colors, EFT list */
.ph-footnote{margin-top:11px;font-size:10.5px;color:var(--muted);text-align:center;line-height:1.5}
/* ── Unified TRS envelope sheet (approved mockup 2026-07-08) ── */
.ph-pband{display:flex;align-items:center;gap:10px;margin-top:12px;background:var(--surface-2,#f6f9fa);border:1px solid var(--line-soft,var(--line));border-radius:12px;padding:9px 12px}
.ph-pband b{font-size:12.5px;color:var(--ink);white-space:nowrap}
.ph-pband .ph-pbar{flex:1;height:5px;border-radius:3px;background:#e4ecee;overflow:hidden}
.ph-pband .ph-pbar i{display:block;height:100%;background:#0f9b7a;border-radius:3px;transition:width .3s}
.ph-pband em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.ph-mact{display:flex;gap:7px;margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.ph-mact::-webkit-scrollbar{display:none}
.ph-mact .mc{flex-shrink:0;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7.5px 13px;font-size:11.5px;font-weight:700;color:var(--ink-soft,#5c707c);cursor:pointer;font-family:inherit;white-space:nowrap}
.ph-mact .mc.danger{color:#b04a40;border-color:#f0d9d6}
.ph-sg{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft,var(--line))}
.ph-sg:last-of-type{border-bottom:none}
.ph-sgav{width:31px;height:31px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-sg .ph-who{min-width:0;flex:1}
.ph-sg .ph-nm{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-sg .ph-nm i{font-style:normal;font-weight:600;color:var(--muted)}
.ph-sg .ph-em{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-sg .ph-st{font-size:11.5px;font-weight:700;white-space:nowrap}
.ph-sg .ph-st.ok{color:#1e7d59}.ph-sg .ph-st.wt{color:#a5701c}.ph-sg .ph-st.bd{color:#b04a40}.ph-sg .ph-st.op{color:#2b7fb8}
.ph-bell{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2,#fbfdfd);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.ph-bell svg{width:14px;height:14px;stroke:var(--ink-soft,#5c707c);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-panel{margin-top:12px;border:1.5px dashed var(--line);border-radius:13px;padding:12px;background:var(--surface-2,#fbfdfd)}
.ph-panel h5{font-size:12px;color:var(--ink);margin:0 0 8px}
.ph-panel input,.ph-panel select,.ph-panel textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:13px;margin-bottom:7px;font-family:inherit;background:var(--panel);color:var(--ink)}
.ph-panel .prow{display:flex;gap:8px}
.ph-panel .prow .ph-sbtn{padding:10px 0}
.ph-panel.red{border-color:#ecc8c3;background:#fdf8f7}
.ph-panel.red h5{color:#b04a40}
.ph-sbtn.danger{background:#b04a40;color:#fff}
.ph-tv{display:flex;gap:9px;font-size:12px;padding:5px 2px;color:var(--ink-soft,#5c707c);align-items:flex-start}
.ph-tv i{width:7px;height:7px;border-radius:50%;background:#9db4be;margin-top:5px;flex-shrink:0}
.ph-tv b{color:var(--ink);font-weight:700}
.ph-tv span{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap;padding-left:8px}
.ph-tlmore{font-size:11.5px;font-weight:700;color:#2563b8;padding:6px 2px 0;cursor:pointer}
/* ── Phone toasts: iOS-style banner at the top (desktop's dark bottom pills
   collide with the bottom nav and read as desktop chrome). Light card, colored
   icon bubble, full width, drops in under the notch. CSS-only — the toast()
   JS and its cluster/dismiss logic are untouched. ── */
html.phone-mode .toast-wrap{top:calc(env(safe-area-inset-top) + 10px);bottom:auto;left:12px;right:12px;transform:none;flex-direction:column;align-items:stretch;gap:7px}
html.phone-mode .toast{width:100%;max-width:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 38px rgba(12,28,42,.22);border-radius:14px;padding:11px 14px;font-size:13px;font-weight:600;line-height:1.4;animation:phToastIn .32s cubic-bezier(.2,.8,.2,1)}
html.phone-mode .toast svg{width:26px;height:26px;padding:6px;border-radius:50%;box-sizing:border-box;background:var(--surface-2,#eef2f4);color:var(--ink-soft,#5c707c)}
html.phone-mode .toast.ok{background:var(--panel)} html.phone-mode .toast.ok svg{background:#d9f4e4;color:#0f7a4d}
html.phone-mode .toast.err{background:var(--panel)} html.phone-mode .toast.err svg{background:#fde3df;color:#b3372b}
html.phone-mode .toast.warn{background:var(--panel)} html.phone-mode .toast.warn svg{background:#fcedcf;color:#96690f}
html.phone-mode .toast .undo{color:#2563b8;font-weight:800}
html.phone-mode .toast-cluster-badge{background:var(--brand);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:2px 7px;margin-left:auto}
@keyframes phToastIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* Build banner ("newer version available") as a phone top banner — the desktop
   inline styles pin it bottom-center at content width, which wraps the text
   into a tall column on 390px screens. !important beats the inline styles. */
html.phone-mode #buildBanner{left:12px!important;right:12px!important;top:calc(env(safe-area-inset-top) + 10px)!important;bottom:auto!important;transform:none!important;max-width:none!important;border-radius:14px!important;padding:12px 14px!important;box-shadow:0 14px 38px rgba(12,28,42,.28)!important;animation:phToastIn .32s cubic-bezier(.2,.8,.2,1);line-height:1.45}
html.phone-mode #buildBanner span{flex:1;min-width:0}
html.phone-mode #buildBanner button{white-space:nowrap;flex-shrink:0}
/* ── iOS input zoom guard: Safari auto-zooms any focused input with a font
   below 16px and leaves the page zoomed after the keyboard closes. The
   viewport meta (maximum-scale=1) is the primary stop; this floor is the
   second belt for engines that key off font size. No !important — inline
   font-size writers (e.g. the TRS cell auto-fitter) must keep winning. ── */
html.phone-mode input:not([type=checkbox]):not([type=radio]),
html.phone-mode select,
html.phone-mode textarea{font-size:16px}
/* ── Team tasks (#tasksScrim) as a phone page — approved Option A
   ("deal-card style", 2026-07-08). PhoneShell.renderTasks() emits .ph-task
   cards + a #phTaskChips claim-state row; the desktop .task-tabs are hidden
   (chips carry the filtering). Full-screen, safe-area-aware header. ── */
/* The tasks page ends ABOVE the bottom nav (2026-07-09, per Rishi — the footer
   must never disappear); --ph-navh is set by phone.js from the real nav height. */
html.phone-mode #tasksScrim{padding:0!important;bottom:var(--ph-navh,62px)}
html.phone-mode #tasksScrim .modal{width:100vw!important;max-width:100vw;height:100%!important;max-height:100%!important;border-radius:0;margin:0}
html.phone-mode #tasksScrim .modal-head{padding-top:calc(env(safe-area-inset-top) + 12px)}
html.phone-mode #tasksScrim .task-tabs{display:none}
#phTaskChips{display:none}
html.phone-mode #tasksScrim #phTaskChips{display:flex;gap:7px;padding:4px 14px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0}
html.phone-mode #tasksScrim .modal-head{flex-shrink:0}
html.phone-mode #tasksScrim #phTaskChips::-webkit-scrollbar{display:none}
html.phone-mode #tasksScrim .modal-body{background:var(--bg);padding:10px 12px 14px;display:flex;flex-direction:column;gap:9px}
.ph-task{background:var(--panel);border-radius:15px;padding:12px 14px;box-shadow:0 2px 10px rgba(20,40,60,.06);flex-shrink:0}
.ph-task.done{opacity:.72}
.ph-task .top{display:flex;align-items:center;gap:8px}
.ph-task .top .ph-trade{cursor:pointer}
.ph-task .ttag{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:3.5px 9px;white-space:nowrap}
.ph-task .ttag.new{background:#eef6ff;color:#0a58ca}
.ph-task .ttag.mine{background:#e8f6ee;color:#1c8c5a}
.ph-task .ttag.taken{background:#f3f1ff;color:#5a48b3;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.ph-task .ttag.done{background:#e5e7eb;color:#374151}
.ph-task .age{margin-left:auto;font-size:10px;font-weight:800;border-radius:999px;padding:3.5px 10px;white-space:nowrap}
.ph-task .age.h{background:#fdf2dd;color:#96690f}
.ph-task .age.d{background:#fee2e2;color:#991b1b}
.ph-task .ti{font-size:14px;font-weight:700;color:var(--ink);margin-top:8px}
.ph-task .meta{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.ph-task .foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft,var(--line))}
.ph-task .plabel{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-soft,#5c707c);font-weight:600;white-space:nowrap}
.ph-task .pd{width:8px;height:8px;border-radius:50%;display:inline-block}
.ph-task .pd.high{background:#e8332e}.ph-task .pd.normal{background:#e8a23a}.ph-task .pd.low{background:#1c8c5a}
.ph-task .sp{flex:1}
.ph-task .tpri{border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink-soft,#5c707c);padding:6px 6px;font-size:12px!important;font-family:inherit}
.ph-task .tact{border:none;border-radius:10px;font-size:12.5px;font-weight:800;padding:9px 16px;font-family:inherit;white-space:nowrap;cursor:pointer}
.ph-task .tact.pri{background:var(--accent,#e8841a);color:#fff}
.ph-task .tact.pri.go{background:#1c8c5a}
.ph-task .tact.gh{background:var(--surface-2,#f2f5f6);color:var(--ink-soft,#3d5a5a);border:1px solid var(--line);font-weight:700}
.ph-task .tact.gh.del{padding:9px 11px;color:#8a5a52}
.ph-kv .ph-ok{color:#1e7d59}
.ph-kv .ph-bad{color:#b04a40}
.ph-kv .ph-waitxt{color:#a5701c}
.ph-eftlist{display:flex;flex-direction:column;gap:9px;margin-top:10px;max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* remaining desktop modals get a little more room on phones */
html.phone-mode .modal-scrim{padding:8px}
/* Phone Manage page: the Signing status & actions modal (#trsMngScrim) becomes
   a full-screen page on phones — same markup and behavior as desktop, phone
   presentation only. ID selector beats both the hdr-v2 scrim offsets and the
   generic phone-mode scrim padding above. */
html.phone-mode #trsMngScrim{padding:0!important}
html.phone-mode #trsMngScrim .modal{width:100vw;max-width:100vw;height:100%!important;max-height:100%!important;border-radius:0;margin:0}
html.phone-mode #trsMngScrim .max-btn{display:none}
html.phone-mode #trsMngScrim .mng-head-meta{flex-wrap:wrap;row-gap:3px}
html.phone-mode #trsMngScrim .mng-recipients{grid-template-columns:1fr}
/* Recipients table is #/Recipient/Role/Status/Signed·Last opened/Actions —
   drop Role + the timestamp column on phones (both stay in the timeline). */
html.phone-mode #trsMngScrim .mng-recip th:nth-child(3),html.phone-mode #trsMngScrim .mng-recip td:nth-child(3),
html.phone-mode #trsMngScrim .mng-recip th:nth-child(5),html.phone-mode #trsMngScrim .mng-recip td:nth-child(5){display:none}
html.phone-mode #trsMngScrim #trsMngFoot{flex-direction:column-reverse;align-items:stretch;gap:9px}
html.phone-mode #trsMngScrim .mng-foot-secondary{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
html.phone-mode #trsMngScrim .mng-foot-secondary .btn{justify-content:center;min-height:42px;margin:0}
html.phone-mode #trsMngScrim .mng-foot-primary{width:100%}
html.phone-mode #trsMngScrim .mng-foot-primary .btn{width:100%;min-height:44px;justify-content:center}
html.phone-mode #trsMngScrim #mngAdd>div[style*="grid-template-columns"],
html.phone-mode #trsMngScrim #mngExpiry>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
/* small in-card action buttons (signature cards) */
.ph-card .mini{font-size:10.5px;font-weight:700;color:var(--ink-soft,#3d5a5a);background:var(--surface-2,#f2f5f6);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
/* Sparkling Manage (Rishi 2026-07-11): shimmer sweep, one color per card —
   the mgc0..mgc4 variants cycle down the list (phone.js idx % 5). Text tones
   are picked per gradient for contrast; static on reduced motion. */
.ph-card .mini.pri{background:linear-gradient(115deg,#f7d774 0%,#f2b53a 40%,#ffe9a3 52%,#eeb62f 64%,#f7d774 100%);background-size:220% 100%;border:none;color:#6b4a00;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(190,140,20,.45),0 1px 4px rgba(190,140,20,.4);animation:phGold 2.6s linear infinite}
.ph-card .mini.pri.mgc1{background:linear-gradient(115deg,#60a5fa 0%,#4f46e5 40%,#a5b4fc 52%,#4338ca 64%,#60a5fa 100%);background-size:220% 100%;color:#fff;text-shadow:0 1px 1px rgba(30,27,75,.5);box-shadow:inset 0 0 0 1px rgba(67,56,202,.55),0 1px 4px rgba(79,70,229,.45)}
.ph-card .mini.pri.mgc2{background:linear-gradient(115deg,#6ee7b7 0%,#10b981 40%,#a7f3d0 52%,#059669 64%,#6ee7b7 100%);background-size:220% 100%;color:#064e3b;text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(5,150,105,.5),0 1px 4px rgba(16,185,129,.4)}
.ph-card .mini.pri.mgc3{background:linear-gradient(115deg,#5eead4 0%,#3b82f6 38%,#c4b5fd 52%,#8b5cf6 66%,#5eead4 100%);background-size:220% 100%;color:#fff;text-shadow:0 1px 1px rgba(30,58,138,.45);box-shadow:inset 0 0 0 1px rgba(59,130,246,.5),0 1px 4px rgba(139,92,246,.45)}
.ph-card .mini.pri.mgc4{background:linear-gradient(115deg,#f9c8c0 0%,#e8968a 40%,#ffe4de 52%,#d97f70 64%,#f9c8c0 100%);background-size:220% 100%;color:#7c2d12;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(190,90,70,.45),0 1px 4px rgba(217,127,112,.4)}
@media (prefers-reduced-motion: reduce){.ph-card .mini.pri{animation:none}}
/* Alerts drawer covers the FULL phone screen: inset-based (left+right beat
   any vw quirk under the zoom viewport meta) and the bottom extends by the
   shell's --ph-fill so a sub-100% zoom never leaves a dead strip below. */
html.phone-mode .notif-drawer{
  top:0!important;left:0!important;right:0!important;
  bottom:calc(0px - var(--ph-fill,0px))!important;
  width:auto!important;max-width:none!important;height:auto!important;
}

/* ============================================================
   Phone Notifications — "Soft Daylight" (2026-07-12, approved mockup C)
   Phone-only redesign; desktop notif drawer is untouched. Inner classes are
   nfp-* prefixed so they never collide with desktop .notif-* globals.
   ============================================================ */
html.phone-mode .notif-drawer{
  background:linear-gradient(180deg,#fbfcff 0%,#f1f5fb 100%);
  padding-top:env(safe-area-inset-top);
}
html.phone-mode .notif-head-bar{
  padding:14px 20px 10px; border-bottom:none; align-items:flex-end;
}
html.phone-mode .notif-title{ font-size:24px; font-weight:800; letter-spacing:-.5px; color:#0f1f36; }
html.phone-mode .notif-close{ color:#5b6b80; }
html.phone-mode #notifTabs{ display:none!important; }   /* replaced by nfp-chips */
html.phone-mode .notif-list{ padding:0 0 calc(30px + env(safe-area-inset-bottom)); }
html.phone-mode .notif-empty{ padding:60px 20px; color:#8091a7; font-size:14px; }

/* Filter chips */
html.phone-mode .nfp-chips{
  display:flex; gap:8px; padding:4px 16px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg,#fbfcff 70%,rgba(251,252,255,0));
}
html.phone-mode .nfp-chips::-webkit-scrollbar{ display:none; }
html.phone-mode .nfp-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px;
  background:#eef3fb; color:#4a5c74; border:none; cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s, transform .1s;
}
html.phone-mode .nfp-chip:active{ transform:scale(.96); }
html.phone-mode .nfp-chip.on{ background:#0f2f52; color:#fff; }
html.phone-mode .nfp-chip-n{
  font-size:10.5px; font-weight:800; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(15,47,82,.12); color:#0f2f52;
}
html.phone-mode .nfp-chip.on .nfp-chip-n{ background:rgba(255,255,255,.25); color:#fff; }

/* Section headers (Today / Earlier) */
html.phone-mode .nfp-sec{
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8091a7; padding:14px 22px 6px;
}
html.phone-mode .nfp-group{ display:flex; flex-direction:column; gap:11px; padding:0 14px; }

/* Card — override the desktop .notif-row base entirely on phone */
/* No entrance animation (2026-07-24): the list re-renders on refresh/realtime
   and a replaying opacity rise reads as flicker. No swipe-to-delete either —
   the red delete layer bled through the translucent lq-glass cards, and
   notifications are not deletable from the phone (Rishi). */
html.phone-mode .notif-row.nfp-card{
  display:flex; gap:12px; align-items:flex-start; padding:12px 12px 12px 14px; margin:0;
  background:#fff; border:1px solid #eef1f6; border-radius:18px;
  box-shadow:0 8px 20px -14px rgba(20,40,70,.28);
}
html.phone-mode .notif-row.nfp-card:active{ transform:scale(.99); background:#fbfcff; }
html.phone-mode .notif-row.nfp-card.unread{ background:#fff; }
/* Compact card top row: title + inline time + a quiet per-card ✕ (2026-07-24) */
html.phone-mode .nfp-tt-row{ display:flex; align-items:center; gap:8px; }
html.phone-mode .nfp-tt-row .nfp-tt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.phone-mode .nfp-tm2{ font-size:10.5px; font-weight:700; color:#a5b0c2; white-space:nowrap; flex:none; letter-spacing:.03em; }
html.phone-mode .nfp-x{
  flex:none; width:26px; height:26px; border:0; border-radius:9px; padding:0;
  background:#f1f4f9; color:#93a0b4; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
html.phone-mode .nfp-x svg{ width:12px; height:12px; fill:none; }
html.phone-mode .nfp-x:active{ background:#e6ebf3; color:#5b6b80; }
/* Daily Pulse dismiss: the digest card has no title row, so the ✕ floats
   over its top-right corner; the time-slot pill shifts left to make room. */
html.phone-mode .nfp-pw{ position:relative; }
html.phone-mode .nfp-pw .nfp-x-f{ position:absolute; top:12px; right:12px; z-index:2; }
html.phone-mode .nfp-pw .dgc-slot{ margin-right:34px; }

html.phone-mode .nfp-ic{
  width:44px; height:44px; border-radius:14px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
html.phone-mode .nfp-ic svg{ width:22px; height:22px; }
html.phone-mode .nfp-main{ flex:1; min-width:0; }
html.phone-mode .nfp-tt{ font-size:14.5px; font-weight:700; letter-spacing:-.2px; color:#12233c; line-height:1.25; }
html.phone-mode .nfp-ds{ font-size:12.8px; color:#5b6b80; margin-top:3px; line-height:1.35; word-break:break-word; }
html.phone-mode .nfp-meta{ font-size:11.5px; color:#8091a7; margin-top:4px; }
html.phone-mode .nfp-tm{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#9aa8bd; margin-top:7px; }
html.phone-mode .nfp-card .notif-actions{ margin-top:10px; }
html.phone-mode .nfp-dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:6px;
  box-shadow:0 0 0 3px rgba(0,0,0,.03);
}

/* Type → pastel colours (icon tile + unread dot) */
html.phone-mode .nfp-ic[data-x]{}  /* noop anchor */
html.phone-mode [data-ntype="deal"].nfp-ic,   html.phone-mode .nfp-card[data-ntype="deal"] .nfp-ic{ background:#e7f7ef; color:#17b26a; }
html.phone-mode [data-ntype="tcf"].nfp-ic,    html.phone-mode .nfp-card[data-ntype="tcf"] .nfp-ic{ background:#e8f0fe; color:#3b82f6; }
html.phone-mode [data-ntype="status"].nfp-ic, html.phone-mode .nfp-card[data-ntype="status"] .nfp-ic{ background:#f1ecfe; color:#8b5cf6; }
html.phone-mode [data-ntype="sign"].nfp-ic,   html.phone-mode .nfp-card[data-ntype="sign"] .nfp-ic{ background:#e5f7f5; color:#12b3a6; }
html.phone-mode [data-ntype="hr"].nfp-ic,     html.phone-mode .nfp-card[data-ntype="hr"] .nfp-ic{ background:#fef2e0; color:#f59e0b; }
html.phone-mode [data-ntype="eft"].nfp-ic,    html.phone-mode .nfp-card[data-ntype="eft"] .nfp-ic{ background:#fdeaf1; color:#e0517a; }
html.phone-mode [data-ntype="billing"].nfp-ic,html.phone-mode .nfp-card[data-ntype="billing"] .nfp-ic{ background:#e9f6ee; color:#0f8a52; }
html.phone-mode [data-ntype="task"].nfp-ic,   html.phone-mode .nfp-card[data-ntype="task"] .nfp-ic{ background:#e8f0fe; color:#2563eb; }
html.phone-mode [data-ntype="chat"].nfp-ic,   html.phone-mode .nfp-card[data-ntype="chat"] .nfp-ic{ background:#e6f5fd; color:#0ea5e9; }
html.phone-mode [data-ntype="system"].nfp-ic, html.phone-mode .nfp-card[data-ntype="system"] .nfp-ic{ background:#eef1f5; color:#64748b; }
html.phone-mode .nfp-dot[data-ntype="deal"]{ background:#17b26a } html.phone-mode .nfp-dot[data-ntype="tcf"]{ background:#3b82f6 }
html.phone-mode .nfp-dot[data-ntype="status"]{ background:#8b5cf6 } html.phone-mode .nfp-dot[data-ntype="sign"]{ background:#12b3a6 }
html.phone-mode .nfp-dot[data-ntype="hr"]{ background:#f59e0b } html.phone-mode .nfp-dot[data-ntype="eft"]{ background:#e0517a }
html.phone-mode .nfp-dot[data-ntype="task"]{ background:#2563eb } html.phone-mode .nfp-dot[data-ntype="chat"]{ background:#0ea5e9 }
html.phone-mode .nfp-dot[data-ntype="system"]{ background:#64748b }
html.phone-mode [data-ntype="lead"].nfp-ic,   html.phone-mode .nfp-card[data-ntype="lead"] .nfp-ic{ background:#e6f4fb; color:#2d8fd5; }
html.phone-mode .nfp-dot[data-ntype="lead"]{ background:#2d8fd5 }

/* ===== Live follow-up strip (2026-07-26 — Leads tab "flash"): a ticking
   countdown card at the top of the notification drawer while one of the
   user's leads is inside the 10-minute window. Shared desktop + phone. ===== */
.nf-live{ margin:10px 12px 6px; padding:11px 14px 12px; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand,#2d5df0) 8%, #fff), #fff);
  border:1px solid color-mix(in srgb, var(--brand,#2d5df0) 18%, #fff);
  box-shadow:0 6px 18px rgba(22,35,59,.08); }
.nf-live + .nf-live{ margin-top:8px }
.nf-live .nf-lt{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.nf-live .nf-lt b{ font-size:13px; font-weight:700; color:var(--ink,#16233b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nf-live .nf-eta{ font-size:11.5px; font-weight:800; color:var(--brand,#2d5df0); font-variant-numeric:tabular-nums; flex-shrink:0 }
.nf-live .nf-bar{ height:4px; border-radius:4px; background:color-mix(in srgb, var(--brand,#2d5df0) 12%, #fff); margin-top:8px; overflow:hidden }
.nf-live .nf-bar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, var(--brand,#2d5df0), var(--brand-2,#4f7df9)); transition:width .6s linear }
.nf-live.due{ background:linear-gradient(135deg,#e9f9f1,#fff); border-color:#b7ebd2 }
.nf-live.due .nf-eta{ color:#0ca678 }
.nf-live.due .nf-bar i{ background:linear-gradient(90deg,#12b981,#0ca678) }
html.phone-mode .nf-live{ margin:10px 2px 6px }

/* ===== Daily Pulse digest card (approved Layout 1) — desktop + phone ===== */
.notif-row.dgc{ display:block; padding:0; margin:9px 12px; background:#fff; border:1px solid #eef1f6;
  border-radius:20px; box-shadow:0 10px 26px -16px rgba(20,40,70,.3); overflow:hidden; color:#0f1f36; cursor:pointer; }
.notif-row.dgc:hover{ background:#fff; }
.dgc .dgc-hd{ display:flex; align-items:center; gap:11px; padding:14px 16px 10px; background:linear-gradient(180deg,#f7faff,#fff); }
.dgc-sun{ width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,#ffe3a3,#ffb547);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; box-shadow:0 4px 12px -3px rgba(255,150,20,.5); }
.dgc-tt{ font-size:15.5px; font-weight:800; letter-spacing:-.3px; color:#0f1f36; }
.dgc-dt{ font-size:11px; color:#8091a7; font-weight:600; margin-top:1px; }
.dgc-slot{ margin-left:auto; font-size:11px; font-weight:800; color:#c98a12; background:#fff5e0; padding:5px 10px; border-radius:999px; }
.dgc .dgc-lbl{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#98a5b8; }
.dgc-hero{ padding:12px 16px 4px; }
.dgc-big{ font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1; margin-top:5px; }
.dgc-big.up{ color:#12a150; } .dgc-big.down{ color:#e0483d; } .dgc-ar{ font-size:18px; }
.dgc-gl{ margin-top:9px; display:flex; gap:8px; flex-wrap:wrap; }
.dgc-pill{ font-size:12px; font-weight:700; padding:6px 11px; border-radius:10px; }
.dgc-pill.g{ background:#e7f7ef; color:#12a150; } .dgc-pill.l{ background:#fdeceb; color:#e0483d; }
.dgc-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px; }
.dgc-tile{ background:#fbfcff; border:1px solid #eef1f6; border-radius:13px; padding:11px 12px; }
.dgc-tile .dgc-lbl{ margin-bottom:5px; }
.dgc-v{ font-size:21px; font-weight:800; letter-spacing:-.5px; color:#12233c; }
.dgc-v.up{ color:#12a150; } .dgc-v.down{ color:#e0483d; }
.dgc-mini{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:0 16px 15px; }
.dgc-m{ background:#fbfcff; border:1px solid #eef1f6; border-radius:13px; padding:10px 6px; text-align:center; }
.dgc-mv{ font-size:19px; font-weight:800; } .dgc-m .dgc-lbl{ margin-top:3px; }
/* Return-to-phone pill: shown in DESKTOP mode on a phone-sized screen after
   the user takes the "Desktop view" escape hatch */
.ph-return{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:90;background:var(--brand,#16342e);color:#fff;border:none;border-radius:999px;padding:10px 16px;font-size:12.5px;font-weight:700;box-shadow:0 6px 20px rgba(10,25,40,.3);cursor:pointer;font-family:inherit}

/* ── EA package review & send (Phase 4, 2026-07-10) ─────────────────
   Full-screen review: field column (only VALUES editable) + exact PDF
   preview. Mount inside .hr-overlay (same scoping rule as HR modals). */
.hr-overlay .pkr-wrap{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px}
.hr-overlay .pkr-panel{background:var(--panel,#fff);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.3);width:min(1240px,100%);height:min(860px,100%);display:flex;flex-direction:column;overflow:hidden}
.hr-overlay .pkr-head{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line,#e5e9f0)}
.hr-overlay .pkr-title{font-size:15.5px;font-weight:700;color:var(--ink,#16202c)}
.hr-overlay .pkr-sub{font-size:12px;color:var(--muted,#66707d);margin-top:3px;max-width:820px}
.hr-overlay .pkr-head .btn{margin-left:auto}
.hr-overlay .pkr-body{flex:1;display:grid;grid-template-columns:340px 1fr;min-height:0}
.hr-overlay .pkr-fields{overflow-y:auto;border-right:1px solid var(--line,#e5e9f0);padding:12px 16px}
.hr-overlay .pkr-fields .fld{margin-bottom:9px}
.hr-overlay .pkr-fields .fld label{font-size:11px;color:var(--muted,#66707d);display:block;margin-bottom:3px}
.hr-overlay .pkr-fields .fld input{width:100%;height:30px;border:1px solid var(--line-strong,#cfd6e4);border-radius:7px;padding:0 8px;font-size:12.5px;color:#0a3d61}
.hr-overlay .pkr-fields .fld input:disabled{color:var(--muted,#66707d);background:var(--surface-2,#f5f7fa)}
.hr-overlay .pkr-sec{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#66707d);margin:14px 0 7px;padding-top:10px;border-top:1px solid var(--line-soft,#eef1f6)}
.hr-overlay .pkr-sec:first-child{margin-top:2px;border-top:0;padding-top:0}
.hr-overlay .pkr-doc{font-size:12.5px;color:var(--ink,#16202c);margin:3px 0}
.hr-overlay .pkr-preview{position:relative;background:var(--surface-2,#eceff4);min-width:0}
.hr-overlay .pkr-preview iframe{width:100%;height:100%;border:0}
.hr-overlay .pkr-loading{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--panel,#fff);border:1px solid var(--line,#e5e9f0);border-radius:999px;padding:4px 14px;font-size:12px;color:var(--muted,#66707d);box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:2}
.hr-overlay .pkr-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line,#e5e9f0)}
@media (max-width:900px){ .hr-overlay .pkr-body{grid-template-columns:1fr}
  .hr-overlay .pkr-preview{display:none} }

/* ── New Candidate / Package modal — wide two-column (Rishi 2026-07-10) ── */
.hr-overlay .modal-box.nc-box{width:880px;max-width:96vw}
.hr-overlay .nc-body{display:grid;grid-template-columns:1fr 1fr;padding:0;gap:0}
.hr-overlay .nc-col{padding:16px 20px}
.hr-overlay .nc-col-alt{border-left:1px solid var(--line,#e5e9f0);background:var(--surface-2,#f7f9fc)}
.hr-overlay .nc-sec{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#66707d);margin:0 0 9px}
.hr-overlay .nc-col .nc-sec:not(:first-child){margin-top:16px;padding-top:13px;border-top:1px solid var(--line-soft,#eef1f6)}
.hr-overlay .nc-body .fld{margin-bottom:9px}
.hr-overlay .nc-body .fld label{display:block;font-size:11px;color:var(--muted,#66707d);margin-bottom:3px}
.hr-overlay .nc-body .fld input,.hr-overlay .nc-body .fld select{width:100%;height:32px;border:1px solid var(--line-strong,#cfd6e4);border-radius:8px;padding:0 9px;font-size:13px;background:var(--panel,#fff);color:var(--ink,#16202c)}
.hr-overlay .nc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
/* A field that should span both columns (e.g. the executor dropdown). */
.hr-overlay .nc-grid2 .fld.nc-full{grid-column:1/-1}
/* Money / number fields align their value to the right and drop the number
   spinner so amounts read cleanly against the labels (fixes the lock-in field
   looking out of place). */
/* Hours of work (FTV only) — one row per day: name, Working/Week Off, and the
   two time dropdowns, which grey out the moment a day is a week off. The
   preview underneath is the exact clause the agreement will print. */
/* Hours of work — approved design B, the phone sheet's twin (⚠ SYNC: any
   change here must be mirrored in the .ph-drow / .ph-t* block, and in
   phone.js + hr.js, in the same round — it is ONE design on two surfaces). */
.hr-overlay .nc-hall{width:100%;display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 10px;border:0;border-radius:9px;background:var(--brand-50,#eef3fb);font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-soft,#3d4757);text-align:left;cursor:pointer}
.hr-overlay .nc-hall span{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--brand,#123c63)}
.hr-overlay .nc-dlist{border:1px solid var(--line-soft,#eef1f6);border-radius:10px;overflow:hidden}
.hr-overlay .nc-drow{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--line-soft,#f1f4f9)}
.hr-overlay .nc-drow:last-child{border-bottom:0}
.hr-overlay .nc-drow.off{background:var(--surface-2,#fafbfd)}
.hr-overlay .nc-drow .dn{width:78px;flex:none;font-size:12px;font-weight:650;color:var(--ink,#16202c)}
.hr-overlay .nc-drow.off .dn{color:var(--muted,#66707d);font-weight:500}
.hr-overlay .nc-sw{position:relative;width:38px;height:22px;flex:none;border:0;padding:0;border-radius:12px;background:#dfe5ee;cursor:pointer}
.hr-overlay .nc-sw.on{background:linear-gradient(140deg,var(--brand-2,#1f5f9e),var(--brand,#123c63))}
.hr-overlay .nc-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .16s ease}
.hr-overlay .nc-sw.on i{left:19px}
.hr-overlay .nc-tp{margin-left:auto;border:1px solid var(--line-strong,#cfd6e4);border-radius:8px;background:var(--panel,#fff);padding:6px 10px;font:inherit;font-size:12px;font-weight:650;color:var(--ink,#16202c);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.hr-overlay .nc-tp:hover:not(:disabled){border-color:var(--brand-2,#1f5f9e)}
.hr-overlay .nc-drow.off .nc-tp{border-style:dashed;color:#b6bfcc;font-weight:500;cursor:default}
.hr-overlay .nc-hprev{margin-top:9px;padding:9px 11px;border-radius:9px;background:var(--surface-2,#fafbfd);border:1px solid var(--line-soft,#eef1f6);font-size:11.5px;line-height:1.5;color:var(--ink-soft,#3d4757)}
.hr-overlay .nc-hprev.is-warn{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.hr-overlay .nc-hours.is-bad .nc-dlist{border-color:#fca5a5}
/* The time popover: From/To chips over ONE wheel; whatever RESTS in the band
   is the selection. Mounted inside .hr-overlay per the standing rule. */
.hr-overlay .nc-tpop{position:fixed;display:none;z-index:9999;width:264px;background:var(--panel,#fff);border:1px solid var(--line,#e3e8f0);border-radius:14px;box-shadow:0 18px 44px rgba(20,30,55,.22);padding:12px}
.hr-overlay .nc-tsh{text-align:center;font-size:12px;font-weight:800;color:var(--ink,#16202c);margin-bottom:9px}
.hr-overlay .nc-tedge{display:flex;gap:7px;margin-bottom:9px}
.hr-overlay .nc-tedge button{flex:1;min-width:0;border:1px solid var(--line-strong,#cfd6e4);border-radius:9px;background:var(--panel,#fff);padding:6px 8px;font:inherit;text-align:left;cursor:pointer}
.hr-overlay .nc-tedge button.on{border-color:var(--brand-2,#1f5f9e);box-shadow:0 0 0 2px var(--brand-50,rgba(18,60,99,.12))}
.hr-overlay .nc-tedge span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#66707d)}
.hr-overlay .nc-tedge b{display:block;font-size:13.5px;font-weight:700;color:var(--ink,#16202c);font-variant-numeric:tabular-nums}
.hr-overlay .nc-twrap{position:relative;display:flex;gap:4px;background:var(--surface-2,#fafbfd);border-radius:11px;padding:9px 7px}
.hr-overlay .nc-tband{position:absolute;left:7px;right:7px;top:50%;transform:translateY(-50%);height:30px;border-radius:8px;background:var(--brand-50,#e6edf7)}
.hr-overlay .nc-tcol{flex:1;min-width:0;height:150px;overflow-y:auto;scrollbar-width:none;position:relative;z-index:1;text-align:center}
.hr-overlay .nc-tcol::-webkit-scrollbar{display:none}
.hr-overlay .nc-tcol .sp{display:block;height:60px}
.hr-overlay .nc-tcol button{display:block;width:100%;height:30px;border:0;padding:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:#98a2b4;font-variant-numeric:tabular-nums;cursor:pointer}
.hr-overlay .nc-tcol button.sel{color:var(--ink,#16202c);font-weight:750}
.hr-overlay .nc-tcol.ap button{font-size:11px;letter-spacing:.03em}
.hr-overlay .nc-tacts{display:flex;gap:7px;margin-top:10px}
.hr-overlay .nc-tacts button{flex:1;border:0;border-radius:9px;padding:9px 0;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.hr-overlay .nc-tacts .gh{background:var(--surface-2,#f2f5f9);color:var(--muted,#5a677f)}
.hr-overlay .nc-tacts .pri{background:linear-gradient(140deg,var(--brand-2,#1f5f9e),var(--brand,#123c63));color:#fff}
/* The review screen shows the composed clause read-only — it is set on the
   package form, never retyped here. */
.hr-overlay .pkr-fields .fld.pkr-full{grid-column:1/-1}
.hr-overlay .pkr-ro{border:1px solid var(--line-soft,#eef1f6);border-radius:8px;padding:7px 9px;font-size:12px;line-height:1.5;background:var(--surface-2,#fafbfd);color:var(--ink-soft,#3d4757)}
.hr-overlay .nc-body .fld.nc-money input{text-align:right;font-variant-numeric:tabular-nums}
.hr-overlay .nc-body .fld input[type=number]{-moz-appearance:textfield}
.hr-overlay .nc-body .fld input[type=number]::-webkit-outer-spin-button,
.hr-overlay .nc-body .fld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Header buttons (expand + close) sit together. */
.hr-overlay .nc-head-btns{display:flex;align-items:center;gap:6px}
.hr-overlay .nc-icon-btn{font-size:15px;line-height:1;padding:4px 8px}
/* Expand / collapse the whole form (desktop). Choice is remembered per user. */
.hr-overlay .modal-box.nc-box.nc-max{width:96vw;max-width:96vw;height:94vh;max-height:94vh}
.hr-overlay .modal-box.nc-box.nc-max .nc-body{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start}
.hr-overlay .nc-hint{color:var(--muted,#8a94a3);font-size:12.5px;line-height:1.5;padding:26px 6px;text-align:center}
.hr-overlay .nc-note{font-size:11.5px;color:var(--muted,#667);background:var(--surface-hover,#eef2f8);border-radius:8px;padding:7px 10px;margin-bottom:11px}
.hr-overlay .nc-docs{display:flex;flex-direction:column;gap:2px}
.hr-overlay .nc-doc{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink,#16202c);padding:5px 8px;border-radius:7px}
.hr-overlay .nc-doc:hover{background:var(--surface-hover,#eef2f8)}
.hr-overlay .nc-doc input{width:15px;height:15px;flex:none}
.hr-overlay .nc-doc span{flex:1}
.hr-overlay .nc-doc-off{opacity:.6}
.hr-overlay .nc-doc-off em{font-style:normal;font-size:10.5px;color:var(--muted,#8a94a3)}
@media (max-width:780px){
  .hr-overlay .nc-body{grid-template-columns:1fr}
  .hr-overlay .nc-col-alt{border-left:0;border-top:1px solid var(--line,#e5e9f0)}
  .hr-overlay .nc-grid2{grid-template-columns:1fr}
}

/* ── Phone HR view (2026-07-11, approved Fusion mockups) ──────────────────
   Everything ph-prefixed and used only inside #phoneShell (phone-mode).
   Fusion card = gender-tinted avatar + connected 6-step track + HR owner +
   ONE full-width action; candidate page = hero + done/now/up-next rows;
   New Candidate = numbered cards with per-package reveal. */
.ph-hrow{display:flex;align-items:center;gap:11px}
.ph-bav{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;position:relative;background:var(--surface-2,#eef2f4);color:var(--ink-soft,#3d4f63)}
.ph-bav.m{background:#dbeafe;color:#1d4ed8}
.ph-bav.f{background:#fce7f3;color:#be185d}
.ph-bav.turn::after{content:'';position:absolute;inset:-3.5px;border-radius:16px;border:2px solid var(--accent,#e8772e);opacity:.55}
.ph-bav .ok{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border-radius:50%;background:#34b27a;color:#fff;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)}
.ph-bav.big{width:52px;height:52px;font-size:17px;border-radius:16px}
.ph-bav.big.turn::after{border-radius:19px}
/* Candidate selfie avatars (Rishi 2026-07-26): the onboarding headshot fills
   the tile — cover + top-biased position keeps the HEAD in frame on a normal
   selfie. The img clips itself (border-radius:inherit) so the ✓ badge, which
   sits outside the corner, is never cut; onerror strips .ph-photo → initials. */
.ph-bav.ph-photo{color:transparent}
.ph-bav.ph-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:inherit}
/* No selfie yet → gender-tinted person AVATAR (Rishi 2026-07-26 — no initials).
   The silhouette rides currentColor, so .ph-photo's transparent color hides it
   under a loaded photo and an onerror strip reveals it again. */
.ph-bav .sil{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;opacity:.85}
.ph-bmid{flex:1;min-width:0}
.ph-bnm{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-bsub{font-size:12px;color:var(--ink-soft,#3d4f63);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* connected 6-step track */
.ph-stp{display:flex;align-items:center;margin-top:13px;padding:0 1px}
.ph-stp .o{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0}
.ph-stp .o.on{background:var(--brand-2,#1a6fb0)}
.ph-stp .o.ok{background:#34b27a}
.ph-stp .o.cur{width:11px;height:11px;background:var(--panel);border:2.5px solid var(--accent,#e8772e);box-shadow:0 0 0 3px rgba(232,119,46,.14);box-sizing:border-box}
.ph-stp .c{flex:1;height:2px;background:var(--line);margin:0 3px;border-radius:1px}
.ph-stp .c.on{background:var(--brand-2,#1a6fb0)}
.ph-stp .c.ok{background:#34b27a}
/* step label row + HR-owner chip */
.ph-slr{display:flex;align-items:baseline;gap:6px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.ph-slr b{color:var(--ink-soft,#3d4f63);font-weight:700;white-space:nowrap}
.ph-hrc{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-soft,#3d4f63);white-space:nowrap}
.ph-hrc i{width:17px;height:17px;border-radius:50%;background:var(--surface-2,#eef2f4);border:1px solid var(--line);color:var(--ink-soft,#3d4f63);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;font-style:normal;flex-shrink:0}
.ph-hrc em{font-style:normal;font-weight:500;color:var(--muted)}
/* full-width card action */
.ph-cbtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;border:none;border-radius:12px;padding:11.5px 0;font-size:12.5px;font-weight:800;font-family:inherit;letter-spacing:.1px;cursor:pointer}
.ph-cbtn.amb{background:rgba(232,119,46,.11);color:#c06210;box-shadow:inset 0 0 0 1px rgba(232,119,46,.28)}
.ph-cbtn.blu{background:var(--blue-bg,#1f6feb1f);color:var(--brand-2,#1a6fb0);box-shadow:inset 0 0 0 1px rgba(26,111,176,.28)}
.ph-cbtn.gho{background:var(--surface-2,#eef2f4);color:var(--ink-soft,#3d4f63);box-shadow:inset 0 0 0 1px var(--line);font-weight:700}
/* sticky "+ New Candidate" band (last child of the scrolling list) */
.ph-newband{position:sticky;bottom:0;margin:4px -12px -12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)*0);background:linear-gradient(rgba(246,248,251,0),var(--bg) 40%);z-index:2}
/* HR Hub home (B1, 2026-07-24): stat row + Onboarding/Sourcing chooser tiles.
   Replaces the old .ph-wstoggle workspace toggle (removed). */
html.phone-mode .ph-hubhd{display:flex;align-items:center;gap:10px;margin:6px 4px 13px}
html.phone-mode .ph-hubhd b{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--ink,#141b2a)}
html.phone-mode .ph-hubhd span{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted,#8b93a5);background:rgba(255,255,255,.9);border-radius:999px;padding:6px 12px;box-shadow:0 4px 12px rgba(23,34,58,.06)}
html.phone-mode .ph-hubstats{display:flex;gap:9px;margin:0 0 13px}
html.phone-mode .ph-hubstats .hs{flex:1;min-width:0;background:rgba(255,255,255,.9);border-radius:16px;padding:11px 11px 10px;box-shadow:0 6px 18px rgba(23,34,58,.05)}
html.phone-mode .ph-hubstats .hs b{display:block;font-size:19px;font-weight:800;color:var(--ink,#141b2a);letter-spacing:-.4px}
html.phone-mode .ph-hubstats .hs b.pk{color:var(--lqt,#b81f54)}
html.phone-mode .ph-hubstats .hs b.vl{color:#6a48e8}
html.phone-mode .ph-hubstats .hs span{font-size:10.5px;font-weight:650;color:#8b93a5;white-space:nowrap}
html.phone-mode .ph-hubtile{position:relative;border-radius:24px;padding:18px 52px 18px 18px;margin:0 0 12px;box-shadow:0 12px 32px rgba(23,34,58,.08);cursor:pointer}
html.phone-mode .ph-hubtile.pk{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--lqa,#e2447f) 13%,#fff));border:1px solid color-mix(in srgb,var(--lqa,#e2447f) 20%,#fff)}
html.phone-mode .ph-hubtile.vl{background:linear-gradient(135deg,#fff,#efe9ff);border:1px solid #e6dcff}
html.phone-mode .ph-hubtile .ti{width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;color:var(--lqai,#fff);font-size:19px;font-weight:800}
html.phone-mode .ph-hubtile.pk .ti{background:linear-gradient(135deg,var(--lqa,#e2447f),var(--lqa3,#8f1743));box-shadow:0 8px 18px rgba(20,30,55,.2)}
html.phone-mode .ph-hubtile.vl .ti{background:linear-gradient(135deg,#9070ff,#6a3ac2);color:#fff;box-shadow:0 8px 18px rgba(109,63,192,.26)}
html.phone-mode .ph-hubtile .ti svg{width:21px;height:21px}
html.phone-mode .ph-hubtile .tt{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--ink,#141b2a)}
html.phone-mode .ph-hubtile .ts{font-size:12.8px;color:#77809a;margin-top:4px;line-height:1.45}
html.phone-mode .ph-hubtile.pk .ts b{color:var(--lqt,#b81f54)}
html.phone-mode .ph-hubtile.vl .ts b{color:#6a48e8}
html.phone-mode .ph-hubtile .go{position:absolute;right:16px;top:18px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 5px 14px rgba(23,34,58,.12);display:flex;align-items:center;justify-content:center;color:#3a4256;font-size:17px;font-weight:700}
/* HR Hub app-launcher sections (Rishi 2026-07-26 revamp): each workspace is a
   tinted section card — header (workspace home) + a grid of app tiles. */
html.phone-mode .ph-hubsec{border-radius:24px;padding:15px 15px 14px;margin:0 0 13px;box-shadow:0 12px 32px rgba(23,34,58,.08)}
html.phone-mode .ph-hubsec.pk{background:linear-gradient(150deg,#fff,color-mix(in srgb,var(--lqa,#e2447f) 12%,#fff));border:1px solid color-mix(in srgb,var(--lqa,#e2447f) 20%,#fff)}
html.phone-mode .ph-hubsec.vl{background:linear-gradient(150deg,#fff,#efe9ff);border:1px solid #e6dcff}
html.phone-mode .ph-hubsec .hd{display:flex;align-items:center;gap:12px;margin:2px 2px 13px;cursor:pointer}
html.phone-mode .ph-hubsec .hd .ti{width:44px;height:44px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--lqai,#fff);font-size:19px;font-weight:800}
html.phone-mode .ph-hubsec.pk .hd .ti{background:linear-gradient(135deg,var(--lqa,#e2447f),var(--lqa3,#8f1743));box-shadow:0 8px 18px rgba(20,30,55,.2)}
html.phone-mode .ph-hubsec.vl .hd .ti{background:linear-gradient(135deg,#9070ff,#6a3ac2);color:#fff;box-shadow:0 8px 18px rgba(109,63,192,.26)}
html.phone-mode .ph-hubsec .hd .ti svg{width:21px;height:21px}
html.phone-mode .ph-hubsec .hd .tx{flex:1;min-width:0}
html.phone-mode .ph-hubsec .hd .tt{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--ink,#141b2a)}
html.phone-mode .ph-hubsec .hd .ts{font-size:12px;color:#77809a;margin-top:2px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html.phone-mode .ph-hubsec.pk .hd .ts b{color:var(--lqt,#b81f54)}
html.phone-mode .ph-hubsec.vl .hd .ts b{color:#6a48e8}
html.phone-mode .ph-hubsec .hd .go{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 5px 14px rgba(23,34,58,.12);display:flex;align-items:center;justify-content:center;color:#3a4256;font-size:16px;font-weight:700}
html.phone-mode .ph-hubapps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
html.phone-mode .ph-hubapps .ha{position:relative;border:0;font-family:inherit;background:rgba(255,255,255,.88);border-radius:17px;padding:11px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;box-shadow:0 5px 14px rgba(23,34,58,.06)}
/* PRESS (motion layer 3, Rishi 2026-07-27): the icon depresses into its tile
   and eases back out — grip, so a tap feels like it landed before the page
   opens. Must stay ABOVE the `.lift` drag rule, which outranks it on hold. */
html.phone-mode .ph-hubapps .ha{transition:transform .34s cubic-bezier(.16,1,.3,1)}
html.phone-mode .ph-hubapps .ha .ic{transition:transform .34s cubic-bezier(.16,1,.3,1)}
html.phone-mode .ph-hubapps .ha:active{transform:scale(.975);transition-duration:.08s}
html.phone-mode .ph-hubapps .ha:active .ic{transform:scale(.88);transition-duration:.08s}
/* Icon squircles — OPTION A "tinted wash" (Rishi 2026-07-27: the round-2
   treatment read "very heavy"). Weight came from four things stacked: a
   full-chroma gradient, a hue-matched glow under EVERY tile, a gloss
   highlight, and a drop-shadowed white glyph. Now the squircle is a pale
   wash of its own hue and the glyph takes the colour instead of white —
   same duotone silhouettes (thin strokes still read generic at 21px), a
   fraction of the weight. Each app declares --h1/--h2/--h3 and this one
   rule derives everything, so a hue change is a single line. */
html.phone-mode .ph-hubapps .ha .ic{position:relative;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--h3);background:linear-gradient(150deg,color-mix(in srgb,var(--h1) 20%,#fff),color-mix(in srgb,var(--h2) 17%,#fff))}
html.phone-mode .ph-hubapps .ha .ic svg{width:21px;height:21px;position:relative}
html.phone-mode .ph-hubapps .ha .ic .bk{opacity:.34}
/* Sourcing family — violet range, one hue step per app so the row reads as a
   set, not a repeat. Aria rides her aurora (the AI signature). */
html.phone-mode .ph-hubapps .ha.i-leads{--h1:#9d7bff;--h2:#7a52f0;--h3:#5b34d6}
html.phone-mode .ph-hubapps .ha.i-aria{--h1:#c77bf7;--h2:#8e55ef;--h3:#5d63f2}
html.phone-mode .ph-hubapps .ha.i-adesk{--h1:#e07bf0;--h2:#8b4aea;--h3:#4f2fc8}
/* Claim Bucket — amber, the app's "needs someone" tone (violet stays Aria's).
   --h3 is darkened from the old #d97706 because it is now the GLYPH colour. */
html.phone-mode .ph-hubapps .ha.i-claim{--h1:#ffd08a;--h2:#f0a836;--h3:#c26a06}
html.phone-mode .ph-hubapps .ha.i-ins{--h1:#6d8bff;--h2:#4f63ea;--h3:#3a46cf}
html.phone-mode .ph-hubapps .ha.i-fu{--h1:#e07bd8;--h2:#a855e8;--h3:#7a3fd4}
/* ── ARRIVAL (motion layer 1) ──────────────────────────────────────────
   Tiles rise and fade, icons scale up, 32ms apart. `ph-arrive` is baked
   into the markup by renderHrHub ONLY on the first render after entering
   the hub — a fresh element runs its animation on creation, so a class on
   a persistent parent would replay this on every background stats repaint. */
@keyframes ph-ha-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ph-ic-in{from{transform:scale(.8)}to{transform:scale(1)}}
html.phone-mode .ph-hubapps.ph-arrive .ha{animation:ph-ha-in .42s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 32ms)}
html.phone-mode .ph-hubapps.ph-arrive .ha .ic{animation:ph-ic-in .52s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 32ms + 40ms)}
/* ── LIVE STATE (motion layer 2) ───────────────────────────────────────
   Ambient motion ONLY where something is waiting, so movement itself means
   "this one wants you". renderHrHub adds `.quiet` when the count is 0 (or
   still unknown) and that kills every moving part in the glyph. Each loop
   is motionless for ~75% of its cycle — a periodic nudge, not a wiggle. */
html.phone-mode .ph-hubapps .ic [class*="mo-"]{transform-box:fill-box;transform-origin:center}
@keyframes ph-mo-twinkle{0%,70%{opacity:.55;transform:scale(1) rotate(0deg)}79%{opacity:1;transform:scale(1.3) rotate(14deg)}88%{opacity:.72;transform:scale(1) rotate(0deg)}100%{opacity:.55;transform:scale(1)}}
@keyframes ph-mo-pulse{0%,72%{transform:scale(1)}80%{transform:scale(1.14)}90%,100%{transform:scale(1)}}
@keyframes ph-mo-lift{0%,72%{transform:translateY(0)}81%{transform:translateY(-2.2px)}92%,100%{transform:translateY(0)}}
@keyframes ph-mo-dot{0%,58%{opacity:.45}68%{opacity:1}80%,100%{opacity:.45}}
/* Aria Desk's sparkle IS her mark — scale it, never dim it. */
html.phone-mode .ph-hubapps .ha.i-adesk .mo-spark{animation:ph-mo-pulse 3.4s ease-in-out infinite}
html.phone-mode .ph-hubapps .ha.i-aria .mo-big{animation:ph-mo-pulse 3.4s ease-in-out infinite}
html.phone-mode .ph-hubapps .ha.i-aria .mo-spark{animation:ph-mo-twinkle 3.4s ease-in-out .4s infinite}
html.phone-mode .ph-hubapps .ha.i-claim .mo-arrow{animation:ph-mo-lift 3.2s ease-in-out infinite}
/* A draft link that is still live is a document out with somebody — the share
   arrow lifts. `.quiet` (no live link) stops it, like every other tile. */
html.phone-mode .ph-hubapps .ha.i-eadraft .mo-arrow{animation:ph-mo-lift 3.4s ease-in-out infinite}
html.phone-mode .ph-hubapps .ha.i-fu .mo-d1{animation:ph-mo-dot 2.9s ease-in-out infinite}
html.phone-mode .ph-hubapps .ha.i-fu .mo-d2{animation:ph-mo-dot 2.9s ease-in-out .12s infinite}
html.phone-mode .ph-hubapps .ha.i-fu .mo-d3{animation:ph-mo-dot 2.9s ease-in-out .24s infinite}
html.phone-mode .ph-hubapps .ha.quiet .ic *{animation:none!important}
/* Reduce Motion: everything stops, arrival falls back to a plain fade. */
@media (prefers-reduced-motion:reduce){
  html.phone-mode .ph-hubapps .ha,html.phone-mode .ph-hubapps .ha .ic{transition:none!important}
  html.phone-mode .ph-hubapps .ic *{animation:none!important}
  html.phone-mode .ph-hubapps.ph-arrive .ha{animation:ph-rm-fade .2s ease both!important;animation-delay:0s!important}
  html.phone-mode .ph-hubapps.ph-arrive .ha .ic{animation:none!important}
}
@keyframes ph-rm-fade{from{opacity:0}to{opacity:1}}
/* press-hold drag reorder (within a section only) */
html.phone-mode .ph-hubapps .ha{touch-action:pan-y}
html.phone-mode .ph-hubapps .ha.lift{transform:scale(1.08);box-shadow:0 14px 30px rgba(23,34,58,.22);z-index:5;transition:transform .12s ease}
/* Page header above the search bar (Rishi 2026-07-26 round 4): every in-shell
   app page names itself here with its own ‹ back — the Sourcing pages' pattern,
   never an extra back row inside the list. */
html.phone-mode .ph-pgh{display:flex;align-items:center;gap:11px;margin:2px 14px 0}
html.phone-mode .ph-pgh .bk,html.phone-mode .ph-bkchip{width:36px;height:36px;flex:none;border:0;border-radius:12px;font-family:inherit;background:rgba(255,255,255,.92);box-shadow:0 5px 14px rgba(23,34,58,.1);color:#3a4256;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 0 2px;cursor:pointer}
html.phone-mode .ph-pgh h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--ink,#1d2635)}
/* Onboarding family — the user's theme accent. */
html.phone-mode .ph-hubapps .ha.i-cand{--h1:color-mix(in srgb,var(--lqa,#e2447f) 78%,#fff);--h2:var(--lqa,#e2447f);--h3:var(--lqa3,#8f1743)}
/* Draft EAs — its own STEP within the same accent family, the way the
   Sourcing row steps its violet one hue per app. Deeper than Candidates (which
   sits at 78% of --lqa) so the row reads as a set rather than a repeat, and
   never a foreign hue: this section is the user's accent. */
html.phone-mode .ph-hubapps .ha.i-eadraft{--h1:color-mix(in srgb,var(--lqa3,#8f1743) 30%,#fff);--h2:color-mix(in srgb,var(--lqa3,#8f1743) 72%,var(--lqa,#e2447f));--h3:var(--lqa3,#8f1743)}
/* create-actions ride their section's own hue — the "+" in the glyph is what
   marks them as an action now that every tile is a tinted wash. */
html.phone-mode .ph-hubsec.vl .ha.add{--h1:#b39bff;--h2:#8f6bf0;--h3:#6a3ac2}
html.phone-mode .ph-hubsec.pk .ha.add{--h1:color-mix(in srgb,var(--lqa,#e2447f) 60%,#fff);--h2:var(--lqa,#e2447f);--h3:var(--lqa3,#8f1743)}
html.phone-mode .ph-hubapps .ha .lb{font-size:10.5px;font-weight:700;color:#3a4256;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html.phone-mode .ph-hubapps .ha .bdg{position:absolute;top:5px;right:7px;min-width:19px;height:19px;border-radius:999px;background:#fff;box-shadow:0 4px 10px rgba(23,34,58,.14);display:flex;align-items:center;justify-content:center;padding:0 5px;font-size:10.5px;font-weight:800;color:#3a4256}
html.phone-mode .ph-hubsec.vl .ha .bdg{color:#6a48e8}
html.phone-mode .ph-hubsec.pk .ha .bdg{color:var(--lqt,#b81f54)}
html.phone-mode .ph-hubapps .ha.hot .bdg{background:linear-gradient(135deg,var(--lqa,#e2447f),var(--lqa3,#8f1743));color:var(--lqai,#fff)}
/* Foldable nav (2026-07-24): the edge handle tucks the nav pill off-screen so
   any page gets the full height; --ph-navh shrinks via phone.js setNavH. */
html.phone-mode .ph-navfold{position:fixed;right:-2px;bottom:calc(env(safe-area-inset-bottom) + 168px);z-index:45;width:28px;height:52px;border:0;border-radius:16px 0 0 16px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(23,34,58,.18);color:var(--lqt,#33456a);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0;touch-action:none;transition:opacity .4s ease}
/* AssistiveTouch idle dim (2026-07-24): after a few untouched seconds the
   handle fades so text stays readable beneath it; any touch wakes it. */
html.phone-mode .ph-navfold.ph-idle{opacity:.38}
html:not(.phone-mode) .ph-navfold{display:none}
/* !important: the lq-mini scroll-shrink transform sits LATER in this file at
   equal specificity — without it a scroll while folded re-reveals the pill. */
html.phone-mode.ph-navfolded .ph-nav{transform:translateY(calc(100% + 34px))!important;pointer-events:none}
.ph-pbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:14px;padding:13px 0;font-size:14px;font-weight:800;font-family:inherit;background:var(--brand,#0a3d62);color:#fff;box-shadow:0 4px 14px rgba(10,40,70,.28);cursor:pointer}
.ph-pbtn.dis{background:#b9c6d2;box-shadow:none}
.ph-pbtn svg{width:14px;height:14px}
/* candidate page */
/* Candidate page = FROZEN identity block + scrolling steps (Rishi 2026-07-26).
   #phList stops scrolling; `.ph-candhead` (back bar + hero) is pinned and
   `.ph-candbody` is the ONLY scroller, carrying the nav-pill clearance so the
   last row always clears the floating pill. */
html.phone-mode #phList.ph-candmode{overflow:hidden;gap:0;padding-bottom:0}
html.phone-mode #phList.ph-candmode .ph-candhead{flex:none;display:flex;flex-direction:column;gap:9px;padding-bottom:9px}
html.phone-mode #phList.ph-candmode .ph-candbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:9px;padding-bottom:calc(var(--ph-navh,54px) + 34px)}
.ph-backbar{display:flex;align-items:center;gap:8px;padding:8px 2px 2px}
.ph-bk{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--brand-2,#1a6fb0);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;flex-shrink:0}
.ph-crfr{padding:6px 11px;font-size:15px;line-height:1}
.ph-crfr.spin{animation:phCandSpin .8s linear infinite}
@keyframes phCandSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ph-crfr.spin{animation:none;opacity:.5}}
.ph-hero{background:var(--panel);border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(20,40,60,.06)}
.ph-hero .hrow{display:flex;align-items:center;gap:12px}
.ph-hero .mid{flex:1;min-width:0}
.ph-hero .nm{font-size:17.5px;font-weight:800;color:var(--ink);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-hero .sub{font-size:12.5px;color:var(--ink-soft,#3d4f63);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-hero .cico{width:34px;height:34px;border-radius:50%;background:var(--surface-2,#eef2f4);border:1px solid var(--line);color:var(--ink-soft,#3d4f63);display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none}
.ph-hero .cico svg{width:15px;height:15px}
.ph-strow{background:var(--panel);border-radius:14px;padding:11px 13px;box-shadow:0 2px 8px rgba(20,40,60,.05);display:flex;align-items:center;gap:11px}
.ph-strow .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.ph-strow .ic.ok{background:#d1fae5;color:#065f46}
.ph-strow .ic.fut{background:var(--surface-2,#eef2f4);border:1px solid var(--line);color:var(--muted)}
.ph-strow .m{flex:1;min-width:0}
.ph-strow .t{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.ph-strow .s{display:block;font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-strow .lk{font-size:11.5px;font-weight:800;color:var(--brand-2,#1a6fb0);white-space:nowrap;cursor:pointer}
.ph-strow.fut .t{color:var(--muted);font-weight:600}
.ph-stcur{background:var(--panel);border-radius:14px;padding:13px;box-shadow:0 3px 14px rgba(20,40,60,.09);border:1.5px solid rgba(232,119,46,.35)}
.ph-stcur .head{display:flex;align-items:center;gap:11px}
.ph-stcur .ic{width:26px;height:26px;border-radius:50%;background:var(--panel);border:2.5px solid var(--accent,#e8772e);color:#c06210;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 3px rgba(232,119,46,.12);box-sizing:border-box}
.ph-stcur .t{font-size:14px;font-weight:800;color:var(--ink)}
.ph-stcur .turn{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.3px;color:#c06210;background:rgba(232,119,46,.10);border-radius:999px;padding:2.5px 8px;white-space:nowrap}
.ph-pkg{margin-top:11px;background:var(--surface-2,#eef2f4);border-radius:11px;padding:10px 12px;font-size:12px;color:var(--ink-soft,#3d4f63);line-height:1.55}
.ph-pkg b{color:var(--ink)}
.ph-stcur .alt{display:block;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:9px;cursor:pointer}
/* New Candidate form */
.ph-fcard{background:var(--panel);border-radius:17px;padding:15px;box-shadow:0 2px 10px rgba(20,40,60,.06)}
.ph-fcard .ct{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ph-fcard .ct .n{width:18px;height:18px;border-radius:50%;background:var(--brand-50,rgba(31,111,235,.12));color:var(--brand-2,#1a6fb0);font-size:10px;display:flex;align-items:center;justify-content:center;letter-spacing:0}
.ph-fcard .ct .adapt{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.4px;background:rgba(232,119,46,.10);color:#c06210;border-radius:999px;padding:2.5px 8px;text-transform:uppercase}
.ph-liveav{display:flex;align-items:center;gap:13px;margin:8px 0 3px}
.ph-liveav .t1{font-size:15px;font-weight:800;color:var(--ink)}
.ph-liveav .t2{font-size:10.5px;font-weight:700;margin-top:2px;color:var(--muted)}
.ph-liveav .t2.f{color:#be185d}
.ph-liveav .t2.m{color:#1d4ed8}
.ph-fl{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:13px 0 6px}
.ph-fl .soft{font-weight:500;text-transform:none;letter-spacing:0}
.ph-fi{width:100%;height:45px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font-size:16px;color:var(--ink);background:var(--panel);font-family:inherit;box-sizing:border-box}
.ph-fi:focus{outline:none;border-color:var(--brand-2,#1a6fb0);box-shadow:0 0 0 3px var(--blue-bg,#1f6feb1f)}
select.ph-fi{appearance:auto}

/* ── Phone HR "Add a document" — approved Option A "attach first" (2026-07-20).
   Tap the dashed zone → native picker → picked-file card (chip + name + navy
   Add). Markup built in phone.js hrFormSheet (#phAddDoc). ── */
.ph-adzone[hidden],.ph-adcard[hidden]{display:none!important}
.ph-adzone{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px;border:1.5px dashed #c7d4e4;border-radius:16px;background:linear-gradient(180deg,#fbfdff,#f5f9fd);cursor:pointer}
.ph-adzone:active{transform:scale(.985)}
.ph-adzi{width:42px;height:42px;border-radius:13px;background:#edecfb;color:#5850c0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-adzt{flex:1;min-width:0}
.ph-adzt b{display:block;font-size:13.5px;color:var(--ink,#101828);letter-spacing:-.1px}
.ph-adzt span{display:block;font-size:11.5px;color:var(--muted,#667085);margin-top:2px}
.ph-adplus{width:26px;height:26px;border-radius:50%;background:var(--brand,#123c63);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.ph-adcard{margin-top:10px;border:1px solid var(--line,#e4e7ef);border-radius:16px;padding:12px;background:var(--panel,#fff);box-shadow:0 1px 4px rgba(16,34,53,.06)}
.ph-adchip{display:flex;align-items:center;gap:10px;background:#f2f7fc;border:1px solid #dbe7f3;border-radius:12px;padding:9px 11px;margin-bottom:10px}
.ph-adfi{width:30px;height:30px;border-radius:9px;background:#fbeceb;color:#b3554b;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-adfn{flex:1;min-width:0;font-size:12.5px;font-weight:650;color:var(--ink,#101828);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-adfs{font-size:11px;color:var(--muted,#667085);flex-shrink:0}
.ph-adfx{color:#98a2b3;font-weight:800;padding:2px 4px;cursor:pointer}
.ph-adgo{width:100%;margin-top:10px;background:var(--brand,#123c63);color:#fff;border:none;border-radius:12px;padding:13px 0;font-size:13.5px;font-weight:750;font-family:inherit;letter-spacing:-.1px;cursor:pointer}
.ph-adgo:disabled{opacity:.6}
/* Upload state: the button IS the progress bar (2026-07-29). The fill is a
   lighter wash over the button's own colour, so the control never changes
   size or position — it just fills. --p is the REAL byte percentage. */
.ph-adgo{position:relative;overflow:hidden}
.ph-adgo>span{position:relative;z-index:1}
.ph-adgo>i{position:absolute;top:0;bottom:0;left:0;width:0;display:block;
  background:rgba(255,255,255,.24);transition:width .25s cubic-bezier(.4,0,.2,1)}
.ph-adgo.is-up{opacity:1}                 /* it is working, not unavailable */
.ph-adgo.is-up>i{width:calc(var(--p,0) * 1%)}
/* No percentage exists for shrinking the photo or filing it to Dropbox, so
   sweep instead of inventing progress. */
.ph-adgo.indet>i{width:40%;transition:none;animation:phAdSweep 1.15s ease-in-out infinite}
@keyframes phAdSweep{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
/* The lq-glass skin paints .ph-adgo with an !important palette gradient, so the
   completed state has to out-specify it there or "✓ Added" stays navy. */
.ph-adgo.is-done,
html.phone-mode.lq-glass .ph-adgo.is-done{background:#1f9d5b !important}
.ph-adgo.is-done>i{width:100%;animation:none}
@media (prefers-reduced-motion:reduce){
  .ph-adgo>i{transition:none}
  .ph-adgo.indet>i{animation:none;width:100%;background:rgba(255,255,255,.16)}
}
.ph-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ph-fhint{font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.ph-fhint b{color:var(--ink-soft,#3d4f63)}
/* ── Draft EAs page (Rishi 2026-08-19) ─────────────────────────────
   The phone half of the EA draft-share feature. Package rows to share from,
   then the links already out. Deliberately plain: a slate page for paperwork,
   with the theme accent kept for the send action. */
.ph-eaintro{margin:2px 16px 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.ph-eaintro b{color:var(--ink-soft,#3d4f63);font-weight:800}
.ph-earows{display:flex;flex-direction:column;gap:8px;padding:0 14px}
.ph-earow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 13px;border:0;border-radius:14px;background:var(--panel,#fff);box-shadow:0 4px 14px rgba(23,34,58,.07);font-family:inherit;cursor:pointer}
.ph-earow[disabled]{cursor:default}
.ph-eatx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-eanm{font-size:13px;font-weight:800;color:var(--ink,#1d2635)}
.ph-eamt{font-size:10.5px;color:var(--muted)}
.ph-eago{flex:none;font-size:11px;font-weight:800;color:var(--lqt,#b81f54);padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--lqa,#e2447f) 12%,transparent)}
/* The Switch package is for an EXISTING employee — quieter, because it is not
   something you send a prospective hire. */
.ph-earow.staff{opacity:.62}
.ph-ealk{margin:0 14px 8px;padding:12px 13px;border-radius:14px;background:var(--panel,#fff);box-shadow:0 4px 14px rgba(23,34,58,.07)}
.ph-eahd{display:flex;align-items:center;gap:8px}
.ph-eahd b{flex:1;min-width:0;font-size:12.5px;font-weight:800;color:var(--ink,#1d2635);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-eawho{margin-top:3px;font-size:11.5px;font-weight:700;color:var(--ink-soft,#3d4f63);word-break:break-word}
.ph-easub{margin-top:3px;font-size:10.5px;color:var(--muted);line-height:1.5}
.ph-eaacts{display:flex;gap:8px;margin-top:10px}
.ph-east{flex:none;font-size:10px;font-weight:800;letter-spacing:.2px;padding:4px 9px;border-radius:999px}
.ph-east.live{background:#e6f6ec;color:#1f7a45}
.ph-east.dead{background:#f2f4f7;color:#6b7684}
.ph-east.gone{background:#fdeaea;color:#b04a40}
.ph-eamini{flex:1;font-size:11.5px;font-weight:800;font-family:inherit;padding:9px 0;border-radius:10px;border:1px solid var(--line);background:var(--surface-2,#f2f5f6);color:var(--ink-soft,#3d5a5a);cursor:pointer}
/* Armed = the second tap withdraws. Two-tap, never window.confirm. */
.ph-eamini.armed{background:#b04a40;border-color:#b04a40;color:#fff}
.ph-gseg{display:flex;gap:10px}
.ph-gs{flex:1;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:800;border:1.5px solid var(--line);color:var(--muted);background:var(--panel);font-family:inherit;cursor:pointer}
.ph-gs .dotp{width:9px;height:9px;border-radius:50%}
.ph-gs.f .dotp{background:#ec4899}
.ph-gs.m .dotp{background:#3b82f6}
.ph-gs.f.on{background:#fdf2f8;border-color:#f0abcf;color:#be185d}
.ph-gs.m.on{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.ph-pkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-pkc{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;position:relative;background:var(--panel);text-align:left;font-family:inherit;cursor:pointer}
.ph-pkc .pn{display:block;font-size:12px;font-weight:800;color:var(--ink)}
.ph-pkc .pd{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}
.ph-pkc.on{border-color:var(--brand,#0a3d62);background:var(--brand,#0a3d62);box-shadow:0 3px 10px rgba(10,40,70,.22)}
.ph-pkc.on .pn{color:#fff}
.ph-pkc.on .pd{color:rgba(255,255,255,.72)}
.ph-pkc .ck{position:absolute;top:-6px;right:-5px;width:17px;height:17px;border-radius:50%;background:var(--accent,#e8772e);color:#fff;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)}
.ph-dchips{display:flex;gap:8px}
.ph-dch{flex:1;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--muted);text-align:center;font-family:inherit;cursor:pointer;white-space:nowrap}
.ph-dch.on{border-color:var(--accent,#e8772e);background:rgba(232,119,46,.09);color:#c06210}
.ph-lock{border:1.5px dashed var(--line);border-radius:15px;padding:14px;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);line-height:1.55;background:var(--panel)}
.ph-lock b{color:var(--ink-soft,#3d4f63)}

/* ── Phone EA review (2026-07-11): the desktop pkr overlay rendered as an
   in-shell phone page — full width, ending ABOVE the bottom nav (same rule as
   the tasks page). #hrPhoneHost is created by hr.js hrPhoneOpenReview ONLY on
   the phone and removed on close; it carries .hr-overlay so the pkr-* styles
   (scoped under .hr-overlay) apply. Do NOT rebuild the review phone-native —
   this CSS layer IS the phone version (PR #176 pattern). */
html.phone-mode #hrPhoneHost{top:0 !important;bottom:var(--ph-navh,62px) !important;height:auto !important;z-index:1200}
html.phone-mode #hrPhoneHost .pkr-wrap{position:absolute;inset:0;padding:0;background:transparent}
html.phone-mode #hrPhoneHost .pkr-panel{width:100%;height:100%;border-radius:0;box-shadow:none;background:var(--bg,#f6f8fb);display:flex;flex-direction:column}
/* Option B (approved 2026-07-11): confirm-first checklist */
/* safe-area top: the host is a fixed layer at top:0 — without this the bar
   sat UNDER the iOS status bar and Cancel was untappable (Rishi 2026-07-11) */
html.phone-mode #hrPhoneHost .pkb-top{display:flex;align-items:center;gap:9px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 8px}
html.phone-mode #hrPhoneHost .pkb-back{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--brand-2,#1a6fb0);background:var(--panel,#fff);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:inherit;cursor:pointer}
html.phone-mode #hrPhoneHost .pkb-title{flex:1;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
html.phone-mode #hrPhoneHost .pkb-chip{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;background:#ede9fe;color:#5b21b6;border-radius:999px;padding:3.5px 10px}
html.phone-mode #hrPhoneHost .pkb-list{flex:1;overflow-y:auto;border-right:0;padding:2px 12px 14px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
html.phone-mode #hrPhoneHost .pkb-cand{background:var(--panel,#fff);border-radius:15px;padding:13px 14px;box-shadow:0 2px 8px rgba(20,40,60,.05);display:flex;align-items:center;gap:11px}
html.phone-mode #hrPhoneHost .pkb-cand .av{width:42px;height:42px;border-radius:13px;background:#dbeafe;color:#1d4ed8;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
html.phone-mode #hrPhoneHost .pkb-cand .m{flex:1;min-width:0}
html.phone-mode #hrPhoneHost .pkb-cand .nm{font-size:15px;font-weight:800;color:var(--ink)}
html.phone-mode #hrPhoneHost .pkb-cand .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
html.phone-mode #hrPhoneHost .pkb-pdf{background:linear-gradient(135deg,rgba(26,111,176,.07),rgba(232,119,46,.06));border:1px solid var(--line);border-radius:15px;padding:13px 14px;display:flex;align-items:center;gap:12px;cursor:pointer}
html.phone-mode #hrPhoneHost .pkb-pdf .pg{width:38px;height:48px;border-radius:6px;background:var(--panel,#fff);box-shadow:0 2px 8px rgba(20,40,60,.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
html.phone-mode #hrPhoneHost .pkb-pdf .m{flex:1;min-width:0}
html.phone-mode #hrPhoneHost .pkb-pdf b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
html.phone-mode #hrPhoneHost .pkb-pdf i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone-mode #hrPhoneHost .pkb-pdf .op{font-size:11.5px;font-weight:800;color:#c06210;background:rgba(232,119,46,.10);border:1px solid rgba(232,119,46,.3);border-radius:999px;padding:7px 12px;white-space:nowrap}
html.phone-mode #hrPhoneHost .pkb-row{background:var(--panel,#fff);border-radius:15px;box-shadow:0 2px 8px rgba(20,40,60,.05)}
html.phone-mode #hrPhoneHost .pkb-head{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer}
html.phone-mode #hrPhoneHost .pkb-ic{width:26px;height:26px;border-radius:50%;background:#d1fae5;color:#065f46;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
html.phone-mode #hrPhoneHost .pkb-ic.editing{background:#fdf3df;color:#a5701c}
html.phone-mode #hrPhoneHost .pkb-ic.pend{background:#fdf3df;color:#a5701c}
html.phone-mode #hrPhoneHost .pkb-note{font-size:12px;color:var(--ink-soft,#3d4f63);background:var(--surface-2,#eef2f4);border-radius:11px;padding:10px 12px;line-height:1.55;margin-top:10px}
html.phone-mode #hrPhoneHost .pkb-note b{color:inherit}
html.phone-mode #hrPhoneHost .pkb-act{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;border:none;border-radius:12px;padding:11.5px 0;font-size:12.5px;font-weight:800;font-family:inherit;cursor:pointer}
html.phone-mode #hrPhoneHost .pkb-act.gho{background:var(--surface-2,#eef2f4);color:var(--ink-soft,#3d4f63);box-shadow:inset 0 0 0 1px var(--line);font-weight:700}
html.phone-mode #hrPhoneHost .pkb-act.blu{background:var(--blue-bg,#1f6feb1f);color:var(--brand-2,#1a6fb0);box-shadow:inset 0 0 0 1px rgba(26,111,176,.28)}
html.phone-mode #hrPhoneHost .pkb-m{flex:1;min-width:0}
html.phone-mode #hrPhoneHost .pkb-t{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
html.phone-mode #hrPhoneHost .pkb-s{display:block;font-size:11px;color:var(--muted);margin-top:2px}
html.phone-mode #hrPhoneHost .pkb-lk{font-size:11.5px;font-weight:800;color:var(--brand-2,#1a6fb0);white-space:nowrap}
html.phone-mode #hrPhoneHost .pkb-body{display:none;padding:0 14px 14px}
html.phone-mode #hrPhoneHost .pkb-row.open .pkb-body{display:block}
html.phone-mode #hrPhoneHost .pkb-body .fld{margin-top:10px}
html.phone-mode #hrPhoneHost .pkb-body .fld label{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
html.phone-mode #hrPhoneHost .pkb-body .fld input,html.phone-mode #hrPhoneHost .pkb-body .fld select{width:100%;height:45px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font-size:16px;color:var(--ink);background:var(--panel,#fff);box-sizing:border-box}
html.phone-mode #hrPhoneHost .pkb-body .fld input:disabled{background:var(--surface-2,#eef2f4);color:var(--muted);border-style:dashed}
html.phone-mode #hrPhoneHost .pkb-body .pkr-sec{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:12px 0 2px}
html.phone-mode #hrPhoneHost .pkb-foot{background:var(--panel,#fff);border-top:1px solid var(--line);padding:9px 14px 12px;display:flex;flex-direction:column;gap:7px}
html.phone-mode #hrPhoneHost .pkb-send{display:block;width:100%;border:none;border-radius:14px;padding:13.5px 0;font-size:14.5px;font-weight:800;font-family:inherit;background:var(--brand,#0a3d62);color:#fff;box-shadow:0 4px 14px rgba(10,61,98,.28);cursor:pointer}
html.phone-mode #hrPhoneHost .pkb-send:disabled{background:#b9c6d2;box-shadow:none}

/* ── Beats pill (next to a TCF #) ── */
.ph-beats{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.2px;color:#1a6fb0;background:#e6f1fb;border-radius:999px;padding:2.5px 9px;text-decoration:none;vertical-align:middle;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(26,111,176,.25)}
.ph-beats:active{background:#d6e8f8}
.ph-beats.off{opacity:.42;pointer-events:none}

/* ── Phone-native Full Deal page ── */
.ph-dealpage{position:fixed;inset:0;z-index:130;background:var(--bg,#f4f6f8);display:none;flex-direction:column;transform:translateY(14px);opacity:0;transition:transform .22s ease,opacity .22s ease}
.ph-dealpage.open{display:flex;transform:none;opacity:1}
.phd-top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--brand,#0a3d62);color:#fff;flex-shrink:0}
.phd-bk{border:none;background:rgba(255,255,255,.16);color:#fff;width:34px;height:34px;border-radius:50%;font-size:23px;line-height:1;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;padding-bottom:3px}
.phd-trade{font-size:14.5px;font-weight:800;letter-spacing:.3px}
.phd-body{flex:1;overflow-y:auto;padding:0 0 24px;-webkit-overflow-scrolling:touch}
.phd-hero{background:var(--brand,#0a3d62);color:#fff;padding:4px 18px 20px;border-radius:0 0 22px 22px}
.phd-nm{font-size:20px;font-weight:800;line-height:1.25}
.phd-ad{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:4px;line-height:1.4}
.phd-badge{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:999px;padding:3.5px 11px}
.phd-qa{display:flex;gap:9px;margin-top:16px}
.phd-qc{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(255,255,255,.14);border:none;border-radius:15px;padding:12px 4px;color:#fff;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer}
.phd-qc:active{background:rgba(255,255,255,.24)}
.phd-qc .i{font-size:19px;line-height:1}
.phd-sec{background:var(--panel,#fff);margin:12px 14px 0;border-radius:16px;padding:4px 16px 6px;box-shadow:0 1px 3px rgba(16,30,40,.06)}
.phd-sh{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:11px 0 5px}
.phd-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line-soft,var(--line));font-size:13px}
.phd-sh + .phd-row{border-top:none}
.phd-row .k{color:var(--muted);flex-shrink:0}
.phd-row .v{color:var(--ink);text-align:right;font-weight:600;word-break:break-word}
.phd-row .v.tcf{color:#7c5bd0;display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.phd-remark{font-size:12.5px;color:var(--ink-soft,#42566a);line-height:1.55;padding:6px 0 12px;white-space:pre-wrap;word-break:break-word}
.phd-foot{flex-shrink:0;background:var(--panel,#fff);border-top:1px solid var(--line);padding:9px 16px calc(10px + env(safe-area-inset-bottom))}
.phd-fbtn{width:100%;border:none;border-radius:13px;padding:13px 0;font-size:13.5px;font-weight:800;font-family:inherit;background:var(--surface-2,#eef2f4);color:var(--ink-soft,#3d5a5a);cursor:pointer}

/* ── Phone-native Credit Note view ── */
.ph-cn-scrim{z-index:140}  /* above the Full Deal page (z-130) it opens from */
.ph-cn .ph-cn-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:2px 0 12px}
.ph-cn-title{font-size:18px;font-weight:800;color:var(--ink)}
.ph-cn-crn{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.3px}
.ph-cn-load{padding:24px 0;text-align:center;color:var(--muted);font-size:13px}
.ph-cn-amt{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2,#eef2f4);border-radius:14px;padding:13px 16px;margin-bottom:11px}
.ph-cn-amt span{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.ph-cn-amt b{font-size:20px;font-weight:800;color:var(--ink)}
.ph-cn-pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:4px 11px}
.ph-cn-pill.draft{background:#e5e7eb;color:#374151}
.ph-cn-pill.wait{background:#fdf3df;color:#a5701c}
.ph-cn-pill.done{background:#d1fae5;color:#065f46}
.ph-cn-pill.dead{background:#fee2e2;color:#991b1b}
.ph-cn-status{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--ink-soft,#42566a);background:var(--surface-2,#eef2f4);border-radius:12px;padding:11px 13px}
.ph-cn-status.ok{background:#eafaf1;color:#186a4a}
.ph-cn-status.bad{background:#fdecec;color:#a3403a}
.ph-cn-status b{color:inherit}
.ph-cn-wait{background:var(--surface-2,#eef2f4);border-radius:12px;padding:13px;font-size:13px;color:var(--ink-soft,#42566a)}
.ph-cn-wait p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.ph-cn-wait code{background:rgba(0,0,0,.06);border-radius:5px;padding:1px 5px;font-size:11px}
.ph-cn-acts{display:flex;gap:8px;margin-top:10px}
.ph-cn-btn{flex:1;border:none;border-radius:11px;padding:11px 0;font-size:12.5px;font-weight:700;font-family:inherit;background:var(--brand,#0a3d62);color:#fff;cursor:pointer}
.ph-cn-facts{margin:12px 0 0;box-shadow:none;border:1px solid var(--line-soft,var(--line))}

/* ── Phone New Candidate: Compensation "Calm rows" (approved Option A, Rishi
   2026-07-13 — replaces the cramped two-column grid). Sentence-case quiet
   labels, $-prefixed money boxes, short pairs only via .ph-cduo, and the
   Commission Structure as a framed table that mirrors Schedule A. ───────── */
.ph-cfld{margin-bottom:14px;min-width:0}
.ph-cfld .cl{font-size:12.5px;font-weight:650;color:var(--muted);margin:0 2px 6px;line-height:1.35;text-transform:none;letter-spacing:0}
.ph-cfld .cl small{color:var(--ink-400,#8a97a6);font-weight:500;font-size:11.5px}
.ph-cfld .cin{display:flex;align-items:center;gap:8px;min-height:48px;border:1.5px solid var(--line);border-radius:13px;padding:0 14px;background:var(--panel);box-sizing:border-box}
.ph-cfld .cin:focus-within{border-color:var(--brand-2,var(--brand));box-shadow:0 0 0 3px var(--brand-50,rgba(18,60,99,.12))}
.ph-cfld .cin .pre{color:var(--ink-400,#8a97a6);font-size:15px;font-weight:600}
.ph-cfld .cin .suf{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-400,#8a97a6)}
.ph-cfld .cin input{border:0;outline:0;background:transparent;flex:1;min-width:0;height:46px;font-size:16.5px;font-weight:650;font-family:inherit;color:var(--ink);font-variant-numeric:tabular-nums;padding:0}
.ph-cduo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
/* ── Phone New Candidate: Hours of work (FTV only) — approved design B
   (Rishi 2026-08-02). One row per day: a switch and ONE pill carrying the
   whole range. The pill opens the wheel sheet; three native dropdowns per
   row was the rejected version. ─────────────────────────────────────────── */
.ph-hall{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:11px 13px;border:0;border-radius:13px;background:var(--brand-50,var(--surface-2));font:inherit;font-size:12px;font-weight:600;color:#3d4757;text-align:left}
.ph-hall span{margin-left:auto;font-size:12px;font-weight:800;color:var(--brand)}
.ph-dlist{border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.ph-drow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-soft,#eef1f6)}
.ph-drow:last-child{border-bottom:0}
.ph-drow.off{background:var(--surface-2)}
.ph-drow .dn{width:74px;flex:none;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-drow.off .dn{color:var(--muted);font-weight:600}
.ph-sw{position:relative;width:44px;height:26px;flex:none;border:0;padding:0;border-radius:14px;background:#dfe5ee;-webkit-tap-highlight-color:transparent}
.ph-sw.on{background:linear-gradient(140deg,var(--brand-2,#1f5f9e),var(--brand,#123c63))}
.ph-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .16s ease}
.ph-sw.on i{left:21px}
.ph-tp{margin-left:auto;border:1.5px solid var(--line);border-radius:11px;background:var(--panel);padding:8px 11px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ph-drow.off .ph-tp{border-style:dashed;color:#b6bfcc;font-weight:600}
.ph-hprev{margin-top:12px;padding:11px 13px;border-radius:13px;background:var(--brand-50,var(--surface-2));border:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--ink)}
.ph-hprev.is-warn{background:#fef3c7;border-color:#fcd34d;color:#92400e}
/* The time sheet — the app's wheel. ONE wheel drives both ends; the From/To
   chips say which end is being set. Whatever RESTS in the band is the
   selection, so a value can never look centred yet uncommitted. */
.ph-tscrim{position:fixed;inset:0;background:rgba(16,24,40,.42);display:none;align-items:flex-end;z-index:140}
.ph-tscrim.open{display:flex}
.ph-tsheet{width:100%;background:var(--panel);border-radius:22px 22px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box}
.ph-tsh{text-align:center;font-size:13.5px;font-weight:800;color:var(--ink);margin:2px 0 11px}
.ph-tedge{display:flex;gap:9px;margin-bottom:12px}
.ph-tedge button{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:13px;background:var(--panel);padding:8px 10px;font:inherit;text-align:left}
.ph-tedge button.on{border-color:var(--brand-2,var(--brand));box-shadow:0 0 0 3px var(--brand-50,rgba(18,60,99,.12))}
.ph-tedge span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph-tedge b{display:block;font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ph-twrap{position:relative;display:flex;gap:6px;background:var(--surface-2);border-radius:16px;padding:12px 10px}
.ph-tband{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);height:40px;border-radius:11px;background:var(--brand-50,#e2eaf4)}
.ph-tcol{flex:1;min-width:0;height:200px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:1;text-align:center}
.ph-tcol::-webkit-scrollbar{display:none}
.ph-tcol .sp{display:block;height:80px}
.ph-tcol button{display:block;width:100%;height:40px;border:0;padding:0;background:none;font:inherit;font-size:15px;font-weight:600;color:#98a2b4;font-variant-numeric:tabular-nums}
.ph-tcol button.sel{color:var(--ink);font-weight:750}
.ph-tcol.ap button{font-size:13px;letter-spacing:.03em}
.ph-tacts{display:flex;gap:10px;margin-top:14px}
.ph-tacts button{flex:1;border:0;border-radius:14px;padding:14px 0;font:inherit;font-size:13.5px;font-weight:800}
.ph-tacts .gh{background:var(--surface-2);color:#5a677f}
.ph-tacts .pri{background:linear-gradient(140deg,var(--brand-2,#1f5f9e),var(--brand,#123c63));color:#fff}
.ph-split{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;margin-top:6px}
.ph-split-h{background:var(--brand-50,var(--surface-2));padding:11px 14px}
.ph-split-h b{font-size:13px;color:var(--brand)}
.ph-split-h span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ph-srow{padding:12px 14px 14px;border-top:1px solid var(--line-soft,var(--line))}
.ph-split-h + .ph-srow{border-top:0}
.ph-scat{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:8px;color:var(--ink);text-transform:none;letter-spacing:0}
.ph-sin{width:100%;box-sizing:border-box;height:42px;border:1.5px solid var(--line);border-radius:11px;padding:0 13px;font-size:16px;font-weight:650;font-family:inherit;background:var(--surface-2,var(--bg));color:var(--ink);font-variant-numeric:tabular-nums}
.ph-sin:focus{outline:0;border-color:var(--brand-2,var(--brand));box-shadow:0 0 0 3px var(--brand-50,rgba(18,60,99,.12))}
.ph-sfoot{font-size:11.5px;color:var(--ink-400,#8a97a6);padding:10px 14px;background:var(--surface-2,var(--bg));border-top:1px solid var(--line-soft,var(--line))}

/* ===================== Billing / Revenue hub (bh-*) =====================
 * Data-Dense Dashboard style. Semantic status tokens adapt to light/dark.
 * Money uses tabular figures. Navy brand + paid-green + amber/red states. */
#billingModal{--bh-ok:#0f9d58;--bh-ok-bg:#e6f6ee;--bh-warn:#c47f17;--bh-warn-bg:#fbf1de;
  --bh-crit:#d64545;--bh-crit-bg:#fdecec;--bh-info:#3a5bbf;--bh-info-bg:#eef2fb;
  --bh-est:#7a5aa8;--bh-est-bg:#f1ebfa;--bh-track:var(--surface-hover);
  --bh-card:var(--panel);--bh-card2:var(--surface-2,var(--bg));--bh-line:var(--line);
  --bh-line2:var(--line-soft,var(--line));--bh-ink:var(--ink);--bh-mut:var(--muted)}
@media (prefers-color-scheme:dark){#billingModal:not([data-theme]){
  --bh-ok:#3ddc97;--bh-ok-bg:rgba(15,157,88,.16);--bh-warn:#e6b45c;--bh-warn-bg:rgba(196,127,23,.16);
  --bh-crit:#f08a8a;--bh-crit-bg:rgba(214,69,69,.18);--bh-info:#8aa5f0;--bh-info-bg:rgba(58,91,191,.18);
  --bh-est:#b9a0e0;--bh-est-bg:rgba(122,90,168,.2)}}
:root[data-theme="dark"] #billingModal{--bh-ok:#3ddc97;--bh-ok-bg:rgba(15,157,88,.16);--bh-warn:#e6b45c;
  --bh-warn-bg:rgba(196,127,23,.16);--bh-crit:#f08a8a;--bh-crit-bg:rgba(214,69,69,.18);
  --bh-info:#8aa5f0;--bh-info-bg:rgba(58,91,191,.18);--bh-est:#b9a0e0;--bh-est-bg:rgba(122,90,168,.2)}
#billingBody{background:var(--bh-card2)}
.bh-empty{padding:48px 20px;text-align:center;color:var(--bh-mut);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}
.bh-empty svg{width:34px;height:34px;opacity:.45}
.bh-err{padding:20px;color:var(--bh-crit);font-size:12.5px}
.bh-dash{color:var(--bh-mut);opacity:.55}
/* Tabs */
.bh-tabs{display:flex;gap:2px;padding:14px 18px 0;border-bottom:1px solid var(--bh-line);position:sticky;top:0;background:var(--bh-card);z-index:6}
.bh-tab{appearance:none;border:0;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--bh-mut);padding:9px 15px;border-radius:9px 9px 0 0;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px;transition:color .15s}
.bh-tab:hover{color:var(--bh-ink)}
.bh-tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.bh-tab em{font-style:normal;font-size:11px;font-weight:700;background:var(--bh-track);color:var(--bh-mut);padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
.bh-tab.on em{background:var(--brand);color:#fff}
.bh-pane{padding:18px}
.bh-pane>*+*{margin-top:16px}
/* ---- Hero realization card ---- */
.bh-hero{background:linear-gradient(135deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 82%,#000) 100%);border-radius:18px;padding:20px 22px;color:#fff;display:flex;gap:22px;align-items:center;box-shadow:0 6px 22px -12px rgba(0,0,0,.4)}
.bh-hero-lead{flex:1;min-width:0}
.bh-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.72}
.bh-hero-big{font-size:38px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:3px 0 2px}
.bh-hero-sub{font-size:12.5px;opacity:.82}.bh-hero-sub b{opacity:1;font-weight:700}
.bh-realbar{display:flex;height:13px;border-radius:7px;overflow:hidden;margin:15px 0 9px;background:rgba(255,255,255,.14);gap:2px}
.bh-seg{min-width:3px;transition:flex-basis .5s cubic-bezier(.3,.8,.3,1)}
.bh-seg.col{background:#41e0a3}.bh-seg.out{background:#f4c56b}.bh-seg.over{background:#f28b82}
.bh-seg.pend{background:repeating-linear-gradient(135deg,rgba(255,255,255,.32) 0 5px,rgba(255,255,255,.16) 5px 10px)}
.bh-real-legend{display:flex;flex-wrap:wrap;gap:14px}
.bh-lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;opacity:.9}
.bh-lg b{font-weight:700;font-variant-numeric:tabular-nums}
.bh-lg i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.bh-real-legend .col i{background:#41e0a3}.bh-real-legend .out i{background:#f4c56b}
.bh-real-legend .over i{background:#f28b82}.bh-real-legend .pend i{background:rgba(255,255,255,.55)}
/* collection-rate radial gauge */
.bh-rate{flex-shrink:0}
.bh-ring{--pct:0;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#41e0a3 calc(var(--pct)*1%),rgba(255,255,255,.18) 0)}
.bh-ring-in{width:80px;height:80px;border-radius:50%;background:color-mix(in srgb,var(--brand) 86%,#000);display:grid;place-items:center;text-align:center;line-height:1.1}
.bh-ring-in b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.bh-ring-in span{font-size:9.5px;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
/* ---- KPI tiles ---- */
.bh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px}
.bh-kpis.mi{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.bh-kpi{background:var(--bh-card);border:1px solid var(--bh-line);border-radius:14px;padding:14px 15px 13px}
.bh-kpi-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.bh-kpi-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--bh-track);color:var(--bh-mut);flex-shrink:0}
.bh-kpi.warn .bh-kpi-ic{background:var(--bh-warn-bg);color:var(--bh-warn)}
.bh-kpi.over .bh-kpi-ic{background:var(--bh-crit-bg);color:var(--bh-crit)}
.bh-kpi.pend .bh-kpi-ic{background:var(--brand-50,rgba(18,60,99,.1));color:var(--brand)}
.bh-kpi.ok .bh-kpi-ic{background:var(--bh-ok-bg);color:var(--bh-ok)}
.bh-kpi-l{font-size:11px;font-weight:650;color:var(--bh-mut);text-transform:uppercase;letter-spacing:.04em}
.bh-kpi-v{font-size:24px;font-weight:800;color:var(--bh-ink);font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.01em;display:block;margin:0 0 3px}
.bh-kpi.over .bh-kpi-v{color:var(--bh-crit)}
.bh-kpi-s{font-size:11px;color:var(--bh-mut);display:block}
/* ---- Section wrapper ---- */
.bh-sec{background:var(--bh-card);border:1px solid var(--bh-line);border-radius:16px;padding:16px 18px}
.bh-sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bh-sec-hd h4{margin:0;font-size:13.5px;font-weight:700;color:var(--bh-ink)}
.bh-sec-sub{font-size:11.5px;color:var(--bh-mut)}.bh-sec-sub b{color:var(--bh-ink);font-variant-numeric:tabular-nums}
/* Coach the follow-up AI card (ML training loop) */
.bh-coach .bh-coach-body{display:flex;flex-direction:column;gap:12px}
.bh-coachadd{display:flex;gap:9px;align-items:flex-start}
.bh-coachadd textarea{flex:1;box-sizing:border-box;border:1px solid var(--bh-line);border-radius:10px;padding:9px 11px;font:inherit;font-size:12.5px;line-height:1.5;resize:vertical;min-height:44px;background:var(--bh-card);color:var(--bh-ink)}
.bh-coachadd textarea:focus{outline:none;border-color:var(--brand,#2563eb)}
.bh-coachbtn{flex:none;align-self:stretch;border:0;border-radius:10px;padding:0 16px;font:inherit;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand,#2563eb),var(--brand-2,#1d4ed8));cursor:pointer}
.bh-coachbtn:hover{filter:brightness(1.05)}
.bh-coachlist{display:flex;flex-direction:column;gap:7px}
.bh-coachrow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--bh-ink)}
.bh-coachrow .tg{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:2px 7px}
.bh-coachrow .nt{flex:1;min-width:0;line-height:1.45}
.bh-coachrow .x{flex:none;border:0;background:none;color:var(--bh-mut);font-size:13px;cursor:pointer;padding:2px 5px;border-radius:6px;line-height:1}
.bh-coachrow .x:hover{color:#c0392b;background:var(--bh-track)}
.bh-coach-empty{font-size:12px;color:var(--bh-mut);line-height:1.5}
/* period toggle (segmented) */
.bh-ptoggle{display:inline-flex;background:var(--bh-track);border-radius:9px;padding:3px;gap:2px}
.bh-pbtn{appearance:none;border:0;background:none;font:inherit;font-size:11.5px;font-weight:650;color:var(--bh-mut);padding:5px 12px;border-radius:7px;cursor:pointer;transition:all .15s}
.bh-pbtn:hover{color:var(--bh-ink)}
.bh-pbtn.on{background:var(--bh-card);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* ---- Forecast chart ---- */
.bh-fc-chart{position:relative;height:180px;margin-left:4px}
.bh-fc-gls{position:absolute;inset:0 0 26px 0;pointer-events:none}
.bh-fc-gl{position:absolute;left:0;right:0;border-top:1px dashed var(--bh-line2)}
.bh-fc-gl span{position:absolute;left:0;top:-8px;font-size:9.5px;color:var(--bh-mut);background:var(--bh-card);padding-right:5px;font-variant-numeric:tabular-nums}
.bh-fc-cols{position:absolute;inset:0 0 0 0;display:flex;gap:8px;align-items:stretch}
.bh-fc-col{flex:1;display:flex;flex-direction:column;min-width:0}
.bh-fc-plot{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:0}
.bh-bar-stack{width:64%;max-width:38px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.bh-bar-s{background:var(--brand);border-radius:5px 5px 0 0;min-height:2px}
.bh-bar-e{background:var(--bh-est);border-radius:5px 5px 0 0;min-height:0;opacity:.85}
.bh-bar-stack .bh-bar-s:not(:first-child){border-radius:0}
.bh-fc-actual{position:absolute;left:12%;right:12%;height:0;border-top:2px solid var(--bh-ok);z-index:2}
.bh-fc-actual::after{content:"";position:absolute;right:-1px;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--bh-ok)}
.bh-fc-col .bh-fc-amt{font-size:10px;font-weight:700;color:var(--bh-ink);text-align:center;margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap;height:14px}
.bh-fc-col .bh-fc-lbl{font-size:9.5px;color:var(--bh-mut);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:12px}
.bh-fc-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:13px;align-items:center}
.bh-fc-legend .bh-lg{color:var(--bh-mut)}
.bh-fc-legend .bh-lg i{width:10px;height:10px;border-radius:3px}
.bh-fc-legend .col-s{background:var(--brand)}.bh-fc-legend .col-e{background:var(--bh-est)}
.bh-fc-legend .col-a{background:none;border-top:2px solid var(--bh-ok);border-radius:0;height:2px;width:14px}
.bh-est{margin-left:auto;font-size:11px;color:var(--bh-mut);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.bh-est input{margin:0;accent-color:var(--brand)}
/* ---- Aging bar ---- */
.bh-ag-bar{display:flex;height:15px;border-radius:8px;overflow:hidden;gap:2px;background:var(--bh-track)}
.bh-ag-seg{min-width:4px;transition:flex-basis .4s ease}
.bh-ag-seg.cur{background:var(--bh-ok)}.bh-ag-seg.a0{background:var(--bh-warn)}
.bh-ag-seg.a1{background:#e69138}.bh-ag-seg.a2{background:#e0603a}.bh-ag-seg.a3{background:var(--bh-crit)}
.bh-ag-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px}
.bh-ag-legend .bh-lg{color:var(--bh-mut)}.bh-ag-legend .bh-lg b{color:var(--bh-ink)}
.bh-ag-legend .cur{background:var(--bh-ok)}.bh-ag-legend .a0{background:var(--bh-warn)}
.bh-ag-legend .a1{background:#e69138}.bh-ag-legend .a2{background:#e0603a}.bh-ag-legend .a3{background:var(--bh-crit)}
/* ---- Trigger note ---- */
.bh-trig{display:flex;gap:11px;align-items:center;background:var(--bh-card);border:1px dashed var(--bh-line);border-radius:13px;padding:12px 15px;color:var(--bh-mut)}
.bh-trig svg{color:var(--bh-mut);flex-shrink:0}
.bh-trig b{color:var(--bh-ink);font-size:12.5px;display:block;font-variant-numeric:tabular-nums}
.bh-trig span{font-size:11.5px;display:block;margin-top:1px}
.bh-note{font-size:11px;color:var(--bh-mut);font-style:italic;padding:0 2px}
/* ---- Invoices toolbar + chips ---- */
.bh-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.bh-chips{display:inline-flex;background:var(--bh-track);border-radius:10px;padding:3px;gap:2px}
.bh-chip{appearance:none;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--bh-mut);padding:6px 12px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.bh-chip:hover{color:var(--bh-ink)}
.bh-chip em{font-style:normal;font-weight:700;font-size:10.5px;font-variant-numeric:tabular-nums;opacity:.7}
.bh-chip.on{background:var(--bh-card);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.1)}.bh-chip.on em{opacity:1}
.bh-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--bh-card);border:1.5px solid var(--bh-line);border-radius:10px;padding:0 12px;height:38px}
.bh-search svg{color:var(--bh-mut);flex-shrink:0}
.bh-search input{flex:1;border:0;background:none;font:inherit;font-size:13px;color:var(--bh-ink);outline:0;height:100%}
.bh-search:focus-within{border-color:var(--brand)}
/* ---- Invoices table ---- */
.bh-tblwrap{overflow-x:auto;border:1px solid var(--bh-line);border-radius:14px;background:var(--bh-card)}
.bh-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.bh-tbl thead th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bh-mut);padding:11px 14px;border-bottom:1px solid var(--bh-line);position:sticky;top:0;background:var(--bh-card);white-space:nowrap}
.bh-tbl thead th.r{text-align:right}
.bh-tr{border-bottom:1px solid var(--bh-line2)}
.bh-tr:last-child{border-bottom:0}
.bh-tr.link{cursor:pointer;transition:background .12s}
.bh-tr.link:hover{background:var(--surface-hover)}
.bh-tbl td{padding:11px 14px;color:var(--bh-ink);vertical-align:middle}
.bh-td-no b{font-variant-numeric:tabular-nums;font-weight:700}
.bh-td-deal{max-width:230px}
.bh-td-t1{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-td-t2{display:block;font-size:11px;color:var(--bh-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.bh-td-due{font-variant-numeric:tabular-nums;color:var(--bh-mut);white-space:nowrap}
.bh-td-amt{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.bh-td-amt em{font-style:normal;font-size:9.5px;color:var(--bh-mut);font-weight:600}
.bh-td-act{text-align:right;white-space:nowrap}
.bh-td-age{white-space:nowrap}
.bh-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:capitalize;white-space:nowrap}
.bh-pill.draft{background:var(--bh-track);color:var(--bh-mut)}
.bh-pill.sent{background:var(--bh-warn-bg);color:var(--bh-warn)}
.bh-pill.paid{background:var(--bh-ok-bg);color:var(--bh-ok)}
.bh-pill.cancelled{background:#fde8e8;color:#b42318;text-decoration:line-through}
.bh-pill.converted{background:#efeafd;color:#6d28d9}
.bh-pill.pf{background:#fdf3e0;color:#b45309;border:1px dashed #d9a441;margin-left:4px}
.bh-age{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap}
.bh-age.a0{background:var(--bh-warn-bg);color:var(--bh-warn)}
.bh-age.a1{background:var(--bh-warn-bg);color:#c76b1a}
.bh-age.a2,.bh-age.a3{background:var(--bh-crit-bg);color:var(--bh-crit)}
.bh-flag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;margin-left:7px;text-transform:uppercase;letter-spacing:.03em}
.bh-flag.due{background:var(--bh-info-bg);color:var(--bh-info)}
.bh-ib{appearance:none;border:1px solid var(--bh-line);background:var(--bh-card);font:inherit;font-size:11px;font-weight:600;color:var(--bh-ink);padding:5px 10px;border-radius:8px;cursor:pointer;margin-left:5px;transition:all .12s}
.bh-ib:hover{border-color:var(--brand);color:var(--brand);background:var(--surface-hover)}
/* ---- Milestones ---- */
.bh-mi-list{display:flex;flex-direction:column;border:1px solid var(--bh-line);border-radius:14px;overflow:hidden;background:var(--bh-card)}
.bh-mi-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--bh-line2)}
.bh-mi-row:last-child{border-bottom:0}
.bh-mi-row.soon{background:linear-gradient(90deg,var(--bh-warn-bg),transparent 40%)}
.bh-mi-row.past{background:linear-gradient(90deg,var(--bh-crit-bg),transparent 40%)}
.bh-dchip{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:11px;background:var(--bh-card2);border:1px solid var(--bh-line);flex-shrink:0}
.bh-dchip b{font-size:17px;font-weight:800;line-height:1;color:var(--bh-ink);font-variant-numeric:tabular-nums}
.bh-dchip span{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--bh-mut);margin-top:2px}
.bh-dchip.trig{border-style:dashed}
.bh-row.soon .bh-dchip{border-color:var(--bh-warn)}
.bh-mi-c1{min-width:0}
.bh-mi-c1 b{font-size:13px;color:var(--bh-ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-mi-c1 span{font-size:11px;color:var(--bh-mut);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bh-trigpill{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--bh-track);color:var(--bh-mut);margin-left:6px}
.bh-mi-amt{font-size:14px;font-weight:800;color:var(--bh-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bh-mi-row.est .bh-mi-amt{color:var(--bh-est)}
.bh-gen{appearance:none;border:0;background:var(--brand);color:#fff;font:inherit;font-size:11.5px;font-weight:650;padding:6px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:filter .12s}
.bh-gen:hover{filter:brightness(1.08)}
.bh-gen.ghost{background:var(--bh-card);color:var(--bh-est);border:1px solid var(--bh-est)}
.bh-mi-nodeal{font-size:10.5px;color:var(--bh-mut)}
.bh-mi-div{font-size:11px;color:var(--bh-mut);padding:14px 15px 6px;display:flex;align-items:center;gap:8px}
.bh-mi-div span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bh-est);background:var(--bh-est-bg);padding:2px 9px;border-radius:999px}
/* responsive */
@media (max-width:620px){
  .bh-hero{flex-direction:column;align-items:stretch;gap:16px}
  .bh-rate{align-self:center}
  .bh-hero-big{font-size:32px}
}
/* ---- Billing hub: focus, skeleton, motion (a11y + polish pass) ---- */
#billingModal :is(.bh-tab,.bh-chip,.bh-pbtn,.bh-ib,.bh-gen,.bh-est){outline:none}
#billingModal :is(.bh-tab,.bh-chip,.bh-pbtn,.bh-ib,.bh-gen):focus-visible,
#billingModal .bh-tr.link:focus-visible,
#billingModal .bh-est input:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
#billingModal .bh-tr.link:focus-visible{outline-offset:-2px}
/* comfortable hit areas */
.bh-ib,.bh-gen{min-height:32px}
.bh-chip,.bh-pbtn{min-height:32px}
.bh-tab{min-height:38px}
/* skeleton loading */
.bh-sk{position:relative;overflow:hidden;background:var(--bh-track);border-radius:12px}
.bh-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bh-card) 65%,transparent),transparent);
  animation:bh-shimmer 1.25s ease-in-out infinite}
.bh-sk-tabs{border-bottom:1px solid var(--bh-line)}
.bh-sk-tab{width:84px;height:16px;margin:14px 4px 12px;border-radius:6px}
.bh-sk-hero{height:132px;border-radius:18px}
.bh-sk-kpi{height:86px;border-radius:14px}
.bh-sk-chart{height:250px;border-radius:16px}
@keyframes bh-shimmer{to{transform:translateX(100%)}}
/* gentle content reveal on tab/data change (state feedback, not decoration) */
.bh-pane{animation:bh-fade .18s ease-out}
@keyframes bh-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #billingModal .bh-sk::after{animation:none}
  #billingModal .bh-pane{animation:none}
  #billingModal :is(.bh-seg,.bh-ag-seg,.bh-realbar){transition:none}
}
/* ── Billing rework (Rishi 2026-07-20) ─────────────────────────────────── */
/* Overview: four plain-language story tiles */
.bh-storyrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.bh-story{border:1px solid var(--bh-line);border-radius:14px;background:var(--bh-card);padding:14px 16px}
.bh-story-hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--bh-mut);margin-bottom:6px}
.bh-story-hd svg{width:16px;height:16px}
.bh-story b{display:block;font-size:26px;font-weight:800;color:var(--bh-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bh-story-sub{display:block;margin-top:4px;font-size:12px;color:var(--bh-mut);line-height:1.4}
.bh-story.col b{color:var(--bh-good,#0f8a5f)}
.bh-story.out b{color:#b45309}
.bh-story.pend b{color:var(--brand,#14315e)}
.bh-red{color:var(--bh-crit,#dc2626);font-style:normal;font-weight:700}
/* the money-journey bar */
.bh-journey{border:1px solid var(--bh-line);border-radius:14px;background:var(--bh-card);padding:14px 16px;margin-bottom:16px}
/* the legacy .pend segment is a translucent overlay stripe — on its own bar it
   needs a real colour */
.bh-journey .bh-seg.pend{background:repeating-linear-gradient(135deg,#9db6dd 0 6px,#b9cbe8 6px 12px)}
.bh-journey .bh-real-legend .pend i{background:#9db6dd}
.bh-journey-hd{font-size:13px;color:var(--bh-ink);line-height:1.5;margin-bottom:10px}
.bh-journey-hd b{font-variant-numeric:tabular-nums}
/* attention / upcoming list rows */
.bh-lilist{display:flex;flex-direction:column}
.bh-li{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--bh-line)}
.bh-li:last-child{border-bottom:0}
.bh-li.link{cursor:pointer}
.bh-li.link:hover{background:var(--bh-track)}
.bh-li-age{flex:none;min-width:44px;text-align:center;font-size:11.5px;font-weight:800;border-radius:8px;padding:4px 6px;background:var(--bh-track);color:var(--bh-mut);font-variant-numeric:tabular-nums}
.bh-li-age.warm{background:#fef3c7;color:#b45309}
.bh-li-age.hot{background:#fee2e2;color:#b91c1c}
.bh-li-date{flex:none;min-width:56px;text-align:center;font-size:11.5px;font-weight:800;border-radius:8px;padding:4px 6px;background:var(--bh-track);color:var(--bh-ink)}
.bh-li-date.hot{background:#fee2e2;color:#b91c1c}
.bh-li-c1{flex:1;min-width:0}
.bh-li-c1 b{display:block;font-size:12.5px;color:var(--bh-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-li-c1 span{display:block;font-size:11.5px;color:var(--bh-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-li-amt{flex:none;font-size:12.5px;font-weight:800;color:var(--bh-ink);font-variant-numeric:tabular-nums}
/* KPI tiles that ARE the filters */
.bh-kpibtn{font:inherit;text-align:left;cursor:pointer;border:1px solid var(--bh-line);transition:border-color .12s, box-shadow .12s}
.bh-kpibtn:hover{border-color:var(--brand,#14315e)}
.bh-kpibtn.sel{border-color:var(--brand,#14315e);box-shadow:0 0 0 2px color-mix(in srgb, var(--brand,#14315e) 22%, transparent)}
.bh-kpis.inv{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:12px}
.bh-kpis.mi{margin-bottom:12px}
/* date filter (TCF-Dashboard style: Date / Range / Month / Quarter / FY) */
.bh-datebtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;color:var(--bh-ink);background:var(--bh-card);border:1.5px solid var(--bh-line);border-radius:10px;padding:0 13px;height:38px;cursor:pointer;white-space:nowrap}
.bh-datebtn svg{color:var(--brand,#14315e)}
.bh-datebtn:hover{border-color:var(--brand,#14315e)}
.bh-datebtn.on{border-color:var(--brand,#14315e);color:var(--brand,#14315e);background:color-mix(in srgb, var(--brand,#14315e) 6%, #fff)}
.bh-datepop{z-index:9999;background:var(--panel,#fff);border:1px solid var(--line,#dfe6ee);border-radius:12px;box-shadow:0 14px 44px rgba(20,30,50,.18);padding:13px 14px;width:290px}
.bh-dp-hd{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.bh-dp-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}
.bh-dp-seg button{font:inherit;font-size:11.5px;font-weight:700;padding:7px 4px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer}
.bh-dp-seg button.on{background:var(--brand,#14315e);border-color:var(--brand,#14315e);color:#fff}
.bh-dp-fields{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px;min-height:34px}
.bh-dp-fields input,.bh-dp-fields select{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--panel);color:var(--ink);flex:1;min-width:0;accent-color:var(--brand,#14315e)}
.bh-dp-fields input:focus,.bh-dp-fields select:focus{outline:none;border-color:var(--brand,#14315e)}
.bh-dp-to{font-size:11.5px;color:var(--muted);flex:none}
.bh-dp-note{font-size:12px;color:var(--muted)}
.bh-dp-acts{display:flex;gap:7px}
.bh-dp-acts button{flex:1;font:inherit;font-size:12.5px;font-weight:700;padding:8px 0;border-radius:9px;cursor:pointer;border:1px solid var(--line)}
.bh-dp-clear{background:var(--panel);color:var(--muted)}
.bh-dp-apply{background:var(--brand,#14315e);border-color:var(--brand,#14315e);color:#fff}
/* sortable table headers */
.bh-tbl th.bh-sort{cursor:pointer;user-select:none;white-space:nowrap}
.bh-tbl th.bh-sort:hover{color:var(--bh-ink)}
.bh-tbl th.bh-sort.on{color:var(--brand,#14315e)}
.bh-td-tcf .tcf-link{font-weight:700;cursor:pointer}
.bh-td-trade{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Aging: plain text, red past 30 days (Rishi 2026-07-20 — no pills) */
.bh-agetxt{font-size:12px;font-weight:600;color:var(--bh-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.bh-agetxt.late{color:var(--bh-crit,#dc2626);font-weight:800}
/* Status: plain coloured text; Sent = glittering green (Rishi's word) */
/* Transaction type — Pre-con / Lease / Resale (Rishi 2026-08-21). Tinted
   labels, one hue per kind, deliberately quieter than Status: the type is a
   fact to scan by, not a state to act on. */
.bh-kind{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.bh-kind.precon{background:#f0ebfb;color:#6d3fc0}
.bh-kind.lease{background:#e3f1fa;color:#1f6f9c}
.bh-kind.resale{background:#e7f6ee;color:#177347}
.bh-st{font-weight:800;font-size:12px;letter-spacing:.02em}
.bh-st.draft{color:var(--bh-mut)}
.bh-st.paid{color:#0f8a5f}
.bh-st.cancelled{color:var(--bh-crit,#dc2626)}
.bh-st.converted{color:#7c5ad6}
.bh-st.sent{background:linear-gradient(100deg,#0b7a52 25%,#2fc98d 42%,#b8f7dc 50%,#2fc98d 58%,#0b7a52 75%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bh-glitter 2.6s linear infinite}
@keyframes bh-glitter{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.bh-st.sent{animation:none;background:none;color:#0f8a5f;-webkit-text-fill-color:#0f8a5f}}
.bh-td-mil b{font-size:12.5px;font-variant-numeric:tabular-nums}
.bh-td-due.late{color:#b91c1c;font-weight:700}
.bh-td-due .bh-flag{margin-left:6px}
/* ===== EFT Payee Directory + banking picker ===== */
.pd-head{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.pd-search{flex:1;display:flex;align-items:center;gap:8px;background:var(--panel);border:1.5px solid var(--line);border-radius:10px;padding:0 12px;height:38px}
.pd-search svg{color:var(--muted);flex-shrink:0}
.pd-search input{flex:1;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);outline:0;height:100%}
.pd-search:focus-within{border-color:var(--brand-2,var(--brand))}
.pd-ro{font-size:12px;color:var(--muted)}
.pd-list{display:flex;flex-direction:column;gap:10px}
.pd-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}
.pd-name{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px;margin-bottom:8px}
.pd-count{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface-hover);padding:2px 8px;border-radius:999px}
.pd-set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft,var(--line))}
.pd-set-main{font-size:12.5px;color:var(--ink);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-variant-numeric:tabular-nums}
.pd-set-main b{font-weight:700}
.pd-set-main span{color:var(--muted)}
.pd-set-main .pd-em{color:var(--brand);font-size:11.5px}
/* Void cheque, per banking set. Present = a quiet green fact, not a shout;
   absent = a plain invitation, so a payee missing one is visible at a glance. */
.pd-chq{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  padding:1px 7px;border-radius:999px;white-space:nowrap}
.pd-chq.on{color:#0f8a52;background:#e9f6ee;border:1px solid #bfe3d0}
.pd-chq.none{color:var(--muted);background:transparent;font-weight:400;font-style:italic}
.pd-chq svg{flex:none}
.pd-set-main .mini-btn{padding:1px 7px;font-size:11px;line-height:1.5}
.mini-btn.pd-chq-add{color:var(--brand);border-style:dashed}
.pd-set-act{display:flex;gap:6px;flex-shrink:0}
.pd-addbank{margin-top:9px}
.pd-empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:13px}
/* Void cheque row inside the draft tab's "Add a payee" form. Wraps rather than
   clipping — the controls and the note share one line only when there's room. */
.em-chq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line-soft)}
.em-chq .em-chq-lab{font-size:12px;font-weight:600;color:var(--ink);margin-right:2px}
.em-chq .mini-btn{padding:1px 7px;font-size:11px;line-height:1.5}
.em-chq .pd-note{flex:1 1 100%;margin:0}
/* payee add/edit form (inside .trs-close-box) */
.pd-form{display:flex;flex-direction:column;gap:11px;margin:6px 0 4px;text-align:left}
/* ⚠ BLOCK, not a column flex box. As a flex container the label's own text and
   the "(optional)" span are two separate flex items, so the hint dropped onto
   its own line under every caption (Rishi 2026-08-04). Inline keeps them on one
   row; the full-width input still breaks below on its own. */
.pd-form label{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.pd-form .pd-opt{font-weight:400;text-transform:none}
.pd-form input,.pd-form textarea{font:inherit;font-size:13px;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;box-sizing:border-box;width:100%;margin-top:4px}
.pd-form input:focus,.pd-form textarea:focus{outline:0;border-color:var(--brand-2,var(--brand))}
.pd-form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pd-note{font-size:11px;color:var(--muted);font-style:italic;line-height:1.4}
/* banking chooser at Open-in-Generate */
.ebp-list{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px;text-align:left}
.ebp-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ebp-name{font-size:13px;font-weight:650;color:var(--ink);flex-shrink:0}
.ebp-sel{flex:1;max-width:300px;font:inherit;font-size:12.5px;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;font-variant-numeric:tabular-nums}
.ebp-sel:focus{outline:0;border-color:var(--brand-2,var(--brand))}

/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS phone skin (Rishi approved 2026-07-20)
   White base + per-palette corner blooms + gradient-blend actions.
   Scope: html.phone-mode.lq-glass ONLY — desktop untouched. phone.js
   sets the class + the --lq* palette variables (LQ_THEMES table) and
   owns the theme picker under More. 23 palettes; per-user choice in
   profiles.prefs.lqTheme (mirrored to localStorage sy_lqtheme).
   PERFORMANCE: cards deliberately have NO backdrop-filter — the ground
   behind them is a smooth gradient, so translucent white looks
   identical to real blur at zero GPU cost. Real blur exists ONLY on
   the floating nav pill and the bottom sheet (small, overlay content).
   Do not add backdrop-filter to .ph-card rows.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-500.ttf) format('truetype')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-600.ttf) format('truetype')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-700.ttf) format('truetype')}
/* Manrope — the Sense product face (self-hosted; default across desktop + phone) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-700-normal.woff2) format('woff2')}

html.phone-mode.lq-glass{
  --lqm1:#d8f2ff; --lqm2:#ffedf6; --lqm3:#e5ddff;           /* corner blooms */
  --lqa:#16324f; --lqai:#ffffff; --lqa2:#3f6d9e; --lqa3:#0a1c30; /* accent family */
  --lqglow:rgba(22,50,79,.38);
  --lqt:#16324f; --lqt2:#3f6d9e;                            /* dark-clamped text accents (applyLqTheme) */
}
/* ── Phone-wide theme wiring ─────────────────────────────────────────
   Every phone surface that reads the app's brand variables (filter sheet,
   deal sheet hero, HR steppers/forms, doc viewer, EFT, tasks, ported
   desktop pages…) flips to the palette accent through ONE remap, so no
   surface can be left un-themed. --lqt/--lqt2 are dark-clamped in
   applyLqTheme — accent text can never go fluorescent. Scoped to
   phone-mode: desktop themes are untouched. */
html.phone-mode.lq-glass{
  --brand:var(--lqt);
  --brand-2:var(--lqt2);
  --accent:var(--lqt);
  --brand-50:color-mix(in srgb,var(--lqt) 10%,#fff);
  --blue-bg:color-mix(in srgb,var(--lqt) 12%,#fff);
}
/* Brand pill = treatment B (Rishi 2026-07-20): the theme gradient carries the
   mark. Text uses --lqai (white on 22 palettes, dark ink on Acid Lime), so it
   can never go fluorescent; the ■ and divider follow via currentColor. */
html.phone-mode.lq-glass .ph-brand .sq{background:currentColor}
html.phone-mode.lq-glass .ph-brand .sn{border-color:color-mix(in srgb,currentColor 35%,transparent)}
/* Beats pill follows the accent */
html.phone-mode.lq-glass .ph-beats{
  color:var(--lqt);background:color-mix(in srgb,var(--lqt) 9%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lqt) 28%,#fff);
}
/* filter sheet: rounder top, footer rides the sheet ground (no blur — the
   sheet is transform-animated; blur+transform is the iOS ghost bug) */
html.phone-mode.lq-glass .ph-fsheet{border-radius:30px 30px 0 0}
html.phone-mode.lq-glass .fs-ft{background:transparent}
/* notif-centre chip counters carry the accent (base rule hardcodes navy) */
html.phone-mode.lq-glass .nfp-chip-n{background:color-mix(in srgb,var(--lqt) 12%,#fff);color:var(--lqt)}
html.phone-mode.lq-glass #phoneShell{
  background:
    radial-gradient(62% 40% at 10% 0%,var(--lqm1) 0%,transparent 60%),
    radial-gradient(52% 36% at 96% 14%,var(--lqm2) 0%,transparent 60%),
    radial-gradient(70% 46% at 50% 104%,var(--lqm3) 0%,transparent 64%),
    linear-gradient(180deg,#ffffff,#f5f6f8);
  /* A SOLID colour under the gradient (2026-10-20, Rishi: "on phone the header comes blur" — home-screen
     app, always). The `background:` shorthand above resets background-color to transparent, and iOS's
     newer home-screen apps put a frosted blur over the top of the page wherever the fixed layer touching
     the status bar has no solid colour to tint with — that blur sat over the SENSE pill and the search
     bar. #fff is the gradient's own top tone, so nothing changes to the eye; it only gives iOS a colour. */
  background-color:#ffffff;
  font-family:'Manrope','Hanken Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
/* the lq ground's bottom tone — behind the shell so a zoom gap never flashes white */
html.phone-mode.lq-glass, html.phone-mode.lq-glass body{background:#f5f6f8}
/* the gradient-blend action recipe (the approved "gooey" Figma treatment) */
html.phone-mode.lq-glass .ph-chip.on,
html.phone-mode.lq-glass .ph-bn.on,
html.phone-mode.lq-glass .ph-sbtn.pri,
html.phone-mode.lq-glass .ph-pbtn,
html.phone-mode.lq-glass .ph-filterbtn,
html.phone-mode.lq-glass .ph-brand,
html.phone-mode.lq-glass .fs-apply,
html.phone-mode.lq-glass .ph-docv-acts .pri,
html.phone-mode.lq-glass .ph-adgo,
html.phone-mode.lq-glass .ph-return,
html.phone-mode.lq-glass #hrPhoneHost .pkb-send,
html.phone-mode.lq-glass .lq-grad{
  background:
    radial-gradient(42% 140% at 5% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(42% 140% at 95% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(135% 230% at 50% 8%,var(--lqa2) 0%,var(--lqa) 52%,var(--lqa3) 112%) !important;
  color:var(--lqai) !important;
  border:none !important;
  box-shadow:0 7px 18px var(--lqglow),inset 0 2px 5px rgba(255,255,255,.35),inset 0 -4px 9px rgba(5,5,25,.25) !important;
}
/* Manage pills: the cycled sparkle palette yields to the theme accent */
html.phone-mode.lq-glass .ph-card .mini.pri{
  background:
    radial-gradient(42% 140% at 5% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(42% 140% at 95% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(135% 230% at 50% 8%,var(--lqa2) 0%,var(--lqa) 52%,var(--lqa3) 112%) !important;
  color:var(--lqai) !important;text-shadow:none !important;animation:none !important;
  box-shadow:0 5px 14px var(--lqglow),inset 0 2px 4px rgba(255,255,255,.35),inset 0 -3px 7px rgba(5,5,25,.22) !important;
}
/* header */
html.phone-mode.lq-glass .ph-brand{border-radius:999px;box-shadow:0 4px 14px rgba(15,25,45,.18)}
html.phone-mode.lq-glass .ph-hico{background:#fff;border:none;box-shadow:0 1px 2px rgba(20,30,50,.06),0 6px 16px rgba(20,30,50,.09)}
/* Avatar: gradient WITHOUT !important so an uploaded profile photo (inline
   background-image from renderAvatar) always wins over the accent blob. */
html.phone-mode.lq-glass .ph-avatar{
  border:none;color:var(--lqai);
  background:radial-gradient(135% 230% at 50% 8%,var(--lqa2) 0%,var(--lqa) 52%,var(--lqa3) 112%);
  box-shadow:0 6px 16px var(--lqglow)}
/* search + filter */
html.phone-mode.lq-glass .ph-search{background:#fff;border:none;border-radius:999px;box-shadow:0 1px 2px rgba(20,30,50,.05),0 8px 22px rgba(20,30,50,.08)}
html.phone-mode.lq-glass .ph-filterbtn{border-radius:15px}
/* chips + strip + count */
html.phone-mode.lq-glass .ph-chip{background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,30,50,.05),0 5px 14px rgba(20,30,50,.07)}
html.phone-mode.lq-glass .ph-strip>div{background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,30,50,.04),0 5px 14px rgba(20,30,50,.06)}
html.phone-mode.lq-glass .ph-refresh{background:#fff;border:none;box-shadow:0 1px 2px rgba(20,30,50,.05),0 4px 12px rgba(20,30,50,.07)}
/* cards — translucent white, NO blur (see header note) */
html.phone-mode.lq-glass .ph-card{
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);border-radius:20px;
  box-shadow:0 2px 4px rgba(20,30,50,.04),0 14px 34px rgba(20,30,50,.09);
}
html.phone-mode.lq-glass .ph-fin>div{background:rgba(125,140,165,.08);border-radius:11px}
/* floating pill nav — the one persistent real-glass element */
html.phone-mode.lq-glass .ph-nav{
  /* Sink into the safe area (Rishi: "bring footer more lower") — keep a
     small clearance above the iOS home indicator instead of stacking the
     full inset under the pill. Non-notch devices fall back to 8px. */
  /* The pill FLOATS OVER the list (Instagram model — Rishi 2026-07-20:
     "background should become transparent behind the bar"): out of the flex
     flow, so cards scroll underneath it instead of the layout reserving a
     full-width empty strip. FIXED (not absolute) so it pins to the true
     screen bottom even under the zoom viewport meta — an absolute nav rides
     the fixed shell, which iOS can leave a hair short when zoomed, dropping
     the pill high and exposing a strip below it (Rishi 2026-07-21). At 100%
     the shell is fixed inset:0, so fixed and absolute coincide — no change
     there. The list keeps matching bottom padding so nothing hides at rest. */
  /* FIXED: pins to the VISUAL viewport bottom, where it is always fully
     visible. (An earlier attempt made it absolute inside the --ph-fill-extended
     shell so it would sit at the true screen bottom — but iOS standalone only
     partially renders content in that below-the-visual-viewport strip, hiding
     the nav. So keep the nav at the visible content bottom and let the shell's
     --ph-fill extension fill the strip with the app ground instead, Rishi
     2026-07-22.) */
  position:fixed;left:12px;right:12px;z-index:40;margin:0;
  bottom:max(8px, calc(env(safe-area-inset-bottom) - 14px));border-radius:999px;border-top:none;
  /* NO backdrop-filter here: iOS paints a backdrop-filtered region at the
     UN-scaled rect when the element carries a scale transform (the shrinking
     nav), leaving a full-width ghost strip behind the mini pill. Translucent
     white over the card list reads the same — keep blur off this element. */
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 4px 10px rgba(20,30,50,.08),0 18px 44px rgba(20,30,50,.16);
  padding:7px;
}
html.phone-mode.lq-glass .ph-bn{border-radius:999px;padding:6px 0 5px;gap:2px}
html.phone-mode.lq-glass .ph-bn.on svg{background:transparent;padding:1px;width:20px;box-sizing:content-box;stroke:currentColor}
html.phone-mode.lq-glass .ph-bn.on svg *{stroke-width:2.2}
/* sheets */
html.phone-mode.lq-glass .ph-sheet{
  border-radius:30px 30px 0 0;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
}
@supports not (backdrop-filter:blur(1px)){
  html.phone-mode.lq-glass .ph-sheet{background:#fff}
}
html.phone-mode.lq-glass .ph-sbtn{border-radius:14px}
html.phone-mode.lq-glass .ph-sbtn.danger{
  background:
    radial-gradient(42% 140% at 5% 50%,#8f1e12 0%,transparent 58%),
    radial-gradient(42% 140% at 95% 50%,#8f1e12 0%,transparent 58%),
    radial-gradient(135% 230% at 50% 8%,#ff8a76 0%,#d9402c 52%,#8f1e12 112%);
  color:#fff;border:none;
  box-shadow:0 7px 18px rgba(200,50,40,.35),inset 0 2px 5px rgba(255,255,255,.35),inset 0 -4px 9px rgba(60,5,0,.28);
}

/* ── redesigned More sheet (approved inspiration 2026-07-20) ── */
.lqm-hd{display:flex;align-items:center;gap:13px;margin-top:8px}
.lqm-av{width:56px;height:56px;border-radius:999px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.lqm-av img{width:100%;height:100%;object-fit:cover}
.lqm-nm{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.lqm-sub{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.lqm-x{margin-left:auto;width:36px;height:36px;border-radius:999px;background:#fff;border:1px solid var(--line-soft,#eef2f7);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink-soft);cursor:pointer;flex-shrink:0}
.lqm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.lqm-tile{background:#fff;border:1px solid var(--line-soft,#eef2f7);border-radius:18px;padding:16px 12px 13px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;box-shadow:0 1px 2px rgba(20,30,50,.04),0 6px 16px rgba(20,30,50,.05)}
.lqm-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.lqm-ic svg{width:21px;height:21px;stroke:var(--lqai,#fff);fill:none;stroke-width:2}
.lqm-tile b{font-size:13.5px;font-weight:700;color:var(--ink)}
.lqm-tile i{font-style:normal;font-size:12px;font-weight:700;color:var(--lqa,var(--brand))}
.lqm-group{background:#fff;border:1px solid var(--line-soft,#eef2f7);border-radius:18px;margin-top:12px;padding:2px 14px;box-shadow:0 1px 2px rgba(20,30,50,.04),0 6px 16px rgba(20,30,50,.05)}
.lqm-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--line-soft,#eef2f7);font-size:13.5px;color:var(--ink)}
.lqm-row:last-child{border-bottom:none}
.lqm-row>svg{width:18px;height:18px;stroke:var(--ink-soft);fill:none;stroke-width:1.9;flex-shrink:0}
.lqm-row .v{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-soft);text-align:right;line-height:1.4;font-variant-numeric:tabular-nums}
.lqm-row .chev{color:var(--faint,#aab6c6);font-size:14px;margin-left:2px}
/* Zoom stepper (Rishi 2026-07-20): − 100% + */
.lqm-zoom{display:inline-flex;align-items:center;gap:9px}
.lqm-zoom b{min-width:40px;text-align:center;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lqm-zbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line,#dfe6ee);background:rgba(255,255,255,.9);color:var(--lqt,var(--brand,#16324f));font-size:17px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.lqm-zbtn:active{background:color-mix(in srgb,var(--lqa,#16324f) 12%,#fff)}
/* Phone zoom lives in the VIEWPORT META (phone.js phApplyZoom) — the OS
   scales the whole layout viewport natively, so fixed surfaces need NO CSS
   compensation. The old body-zoom + ph-zoomed size-compensation blocks are
   gone; never reintroduce CSS `zoom` on the phone shell (three iOS bugs:
   bottom gap, drawer peek, calibration overshoot). */

/* ── iPad running as the INSTALLED app (html.ipad-app, set in index.html's
   early boot — Rishi 2026-07-20: "the header is being cut because of iPad
   top strip"). The status strip overlays the page in standalone mode:
   DESKTOP view (landscape) gets a spacer above the app so the topbar clears
   it; the phone shell (portrait) gets a guaranteed non-zero top inset even
   when iPadOS reports env(safe-area-inset-top) as 0. iPad-scoped only. */
html.ipad-app:not(.phone-mode) body::before{
  content:"";display:block;height:max(env(safe-area-inset-top,0px),24px);
  background:var(--panel,#fff);
}
html.ipad-app:not(.phone-mode) .app{
  height:calc(100vh - max(env(safe-area-inset-top,0px),24px));
}
html.ipad-app.phone-mode #phoneShell{
  padding-top:max(env(safe-area-inset-top,0px),24px);
}
/* The body::before spacer pushes the IN-FLOW topbar down, but FIXED overlays
   keyed to the 64px header contract still sat 24px too high — the TCF List
   iframe/panel slid under the topbar and its KPI row was cut (Rishi's
   screenshot). Shift every fixed 64px consumer by the same inset. */
html.ipad-app:not(.phone-mode){--ipad-sa:max(env(safe-area-inset-top,0px),24px)}
html.ipad-app:not(.phone-mode) #tcfFrameWrap{top:calc(var(--topbar-h,56px) + var(--ipad-sa))!important}
html.ipad-app:not(.phone-mode) #leadsFrame{top:calc(var(--topbar-h,56px) + var(--ipad-sa))!important}
html.ipad-app:not(.phone-mode) .tcf-list-panel{top:calc(64px + var(--ipad-sa))!important}
html.ipad-app:not(.phone-mode) body.hdr-v2 .hamburger-menu{top:calc(64px + var(--ipad-sa))}
html.ipad-app:not(.phone-mode) body.hdr-v2 .modal-scrim .modal{max-height:calc(100vh - 64px - 48px - var(--ipad-sa))!important}
html.ipad-app:not(.phone-mode) body.hdr-v2 .modal-scrim .modal.maxed{top:calc(64px + var(--ipad-sa))!important;height:calc(100vh - 64px - var(--ipad-sa))!important;max-height:calc(100vh - 64px - var(--ipad-sa))!important}
html.ipad-app:not(.phone-mode) body.hdr-v2 .hr-overlay{top:calc(64px + var(--ipad-sa));height:calc(100vh - 64px - var(--ipad-sa))}
html.ipad-app:not(.phone-mode) .notif-drawer{padding-top:var(--ipad-sa)}

/* iPad "Display size" row in the profile card (any iPad context, browser or
   installed — main.js reveals it on iPad only). Dark-card styling. */
.ipad-zoom-row{display:none;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:default}
.ipad-zoom-row>svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.ipad-zoom-row .pc-zoom{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.ipad-zoom-row .pc-zoom button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.ipad-zoom-row .pc-zoom button:active{background:rgba(255,255,255,.25)}
.ipad-zoom-row .pc-zoom b{min-width:40px;text-align:center;font-variant-numeric:tabular-nums;font-size:12.5px}
.lq-sw{width:46px;height:27px;border-radius:999px;background:#dfe4ec;position:relative;flex-shrink:0;transition:background .18s ease}
.lq-sw::after{content:"";position:absolute;top:2.5px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(20,30,50,.25);transition:left .18s ease}
.lq-sw.on{background:var(--lqa,#16324f)}
.lq-sw.on::after{left:21px}
.lqm-swatch{width:22px;height:22px;border-radius:999px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line),0 2px 5px rgba(20,30,50,.15);flex-shrink:0}
/* theme picker */
.lqt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.lqt-cell{border:1.5px solid var(--line-soft,#eef2f7);border-radius:15px;background:#fff;padding:10px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.lqt-cell.on{border-color:var(--lqa,#16324f);box-shadow:0 0 0 2.5px var(--lqglow,rgba(22,50,79,.3))}
.lqt-dot{width:34px;height:34px;border-radius:999px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line),0 3px 8px rgba(20,30,50,.14)}
.lqt-cell span{font-size:10px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.2}
@media (prefers-reduced-motion:reduce){
  .lq-sw,.lq-sw::after{transition:none}
}

/* ── TCF preview card inside phone sheets: jell with the glass theme.
   Scoped to .ph-sheet so the desktop tp2 popover keeps its own look. ── */
html.phone-mode.lq-glass .ph-sheet .tp2-fin>div{background:rgba(125,140,165,.08);border-radius:13px}
html.phone-mode.lq-glass .ph-sheet .tp2-addr{
  background:linear-gradient(105deg,var(--lqm1) 0%,rgba(255,255,255,.35) 80%);
  border:1px solid rgba(255,255,255,.9);border-radius:16px}
html.phone-mode.lq-glass .ph-sheet .tp2-pin{background:rgba(255,255,255,.8);color:var(--lqa);border-radius:10px}
html.phone-mode.lq-glass .ph-sheet .tp2-cb{border-radius:14px}
html.phone-mode.lq-glass .ph-sheet .tp2-foot{border-top-color:rgba(125,140,165,.18)}
html.phone-mode.lq-glass .ph-sheet .tcf-pop-cta{
  border-radius:999px;padding:8px 16px;font-weight:600;
  background:
    radial-gradient(42% 140% at 5% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(42% 140% at 95% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(135% 230% at 50% 8%,var(--lqa2) 0%,var(--lqa) 52%,var(--lqa3) 112%);
  color:var(--lqai)!important;
  box-shadow:0 6px 16px var(--lqglow),inset 0 2px 5px rgba(255,255,255,.35),inset 0 -4px 9px rgba(5,5,25,.25)}

/* ── Instagram-style shrinking nav (Rishi 2026-07-20): scroll down → the
   pill scales to 60% and goes icon-only; scroll up → back to 100%.
   phone.js toggles .lq-mini from the #phList scroll direction. ── */
html.phone-mode.lq-glass .ph-nav{transform-origin:50% 100%;transition:transform .3s cubic-bezier(.23,1,.32,1);will-change:transform}
html.phone-mode.lq-glass .ph-nav.lq-mini{transform:scale(.6)}
html.phone-mode.lq-glass .ph-bn span{transition:opacity .16s ease,max-height .16s ease;max-height:14px;overflow:hidden}
html.phone-mode.lq-glass .ph-nav.lq-mini .ph-bn span{opacity:0;max-height:0}
@media (prefers-reduced-motion:reduce){
  html.phone-mode.lq-glass .ph-nav{transition:none}
  html.phone-mode.lq-glass .ph-bn span{transition:none}
}

/* ── Notification centre catches the Liquid Glass theme (Rishi 2026-07-20).
   The drawer is a body-level overlay, so it inherits neither the shell's
   ground nor its font — both are set here, scoped lq-glass + phone. ── */
html.phone-mode.lq-glass .notif-drawer{
  background:
    radial-gradient(62% 30% at 10% 0%,var(--lqm1) 0%,transparent 60%),
    radial-gradient(52% 26% at 96% 8%,var(--lqm2) 0%,transparent 60%),
    radial-gradient(70% 34% at 50% 102%,var(--lqm3) 0%,transparent 64%),
    linear-gradient(180deg,#ffffff,#f5f6f8);
  font-family:'Manrope','Hanken Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html.phone-mode.lq-glass .notif-close{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(20,30,50,.06),0 5px 14px rgba(20,30,50,.08)}
html.phone-mode.lq-glass .nfp-chip{background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,30,50,.05),0 5px 14px rgba(20,30,50,.07)}
html.phone-mode.lq-glass .nfp-chip.on{
  background:
    radial-gradient(42% 140% at 5% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(42% 140% at 95% 50%,var(--lqa3) 0%,transparent 58%),
    radial-gradient(135% 230% at 50% 8%,var(--lqa2) 0%,var(--lqa) 52%,var(--lqa3) 112%);
  color:var(--lqai);border-color:transparent;
  box-shadow:0 6px 16px var(--lqglow),inset 0 2px 5px rgba(255,255,255,.35),inset 0 -4px 9px rgba(5,5,25,.25)}
html.phone-mode.lq-glass .nfp-chip.on .nfp-chip-n{background:rgba(255,255,255,.28);color:var(--lqai)}
html.phone-mode.lq-glass .notif-row.nfp-card{
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);border-radius:20px;
  box-shadow:0 2px 4px rgba(20,30,50,.04),0 12px 30px rgba(20,30,50,.08)}
html.phone-mode.lq-glass .notif-row.nfp-card.unread{background:rgba(255,255,255,.88)}

/* ── One continuous tinted band behind the filter chips + INR strip
   (Rishi 2026-07-20: "the 1st row background should carry on to the
   second row — otherwise it looks white on white"). The white pills of
   both rows now sit on a single soft surface. ── */
html.phone-mode.lq-glass .ph-chips{background:rgba(120,135,160,.09);padding-bottom:10px}
html.phone-mode.lq-glass .ph-strip{background:rgba(120,135,160,.09);margin:0;padding:0 14px 12px}

/* content clears the floating pill at rest; scrolls under it otherwise */
html.phone-mode.lq-glass .ph-list{padding-bottom:calc(var(--ph-navh,54px) + 34px)}
html.phone-mode.lq-glass .ph-newband{bottom:calc(var(--ph-navh,54px) + 16px)}

/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS — DESKTOP (2026-07-20, approved via real-app mockups)
   Scope: html.lq-glass:not(.phone-mode) — the SAME palette variables the
   phone skin uses (--lqm1..3 blooms, --lqa family, --lqt/--lqt2 dark-
   clamped text accents), applied by LQGlass.apply (phone.js — the ONE
   palette table). Escape hatch: localStorage sy_lqoff='1'.
   RULES: frozen ledger columns keep their opaque backgrounds (PR #96) —
   never override td background on .col-sel/.col-row/.col-trade; the
   sticky thead stays effectively solid; no backdrop-filter on scrolling
   table surfaces (blur lives only on the fixed topbar).
   ═══════════════════════════════════════════════════════════════════ */
html.lq-glass:not(.phone-mode){
  /* every desktop component that reads the app brand variables follows
     the palette (the phone #389 remap pattern) */
  --brand:var(--lqt,#16324f);
  --brand-2:var(--lqt2,#3f6d9e);
  --accent:var(--lqt,#16324f);
  --brand-50:color-mix(in srgb,var(--lqt,#16324f) 10%,#fff);
  --blue:var(--lqt,#16324f);
  --blue-bg:color-mix(in srgb,var(--lqt,#16324f) 12%,#fff);
  /* surface family: zebra rows, hovers, hairlines and soft fills all tint
     toward the palette accent — this is what makes the TABLES re-theme.
     color-mix over #fff stays fully opaque, so the frozen-column and
     sticky-header guarantees are untouched. */
  --surface-2:color-mix(in srgb,var(--lqa,#16324f) 4.5%,#fff);
  --surface-hover:color-mix(in srgb,var(--lqa,#16324f) 8%,#fff);
  --line:color-mix(in srgb,var(--lqa,#16324f) 14%,#e4e8ee);
  --line-soft:color-mix(in srgb,var(--lqa,#16324f) 8%,#eef0f5);
}
html.lq-glass:not(.phone-mode) body{
  background:
    radial-gradient(46% 34% at 6% 0%, var(--lqm1,#d8f2ff) 0%, transparent 62%),
    radial-gradient(38% 30% at 97% 6%, var(--lqm2,#ffedf6) 0%, transparent 60%),
    radial-gradient(52% 38% at 50% 106%, var(--lqm3,#e5ddff) 0%, transparent 64%),
    linear-gradient(#ffffff, #f5f6f8) fixed;
}
html.lq-glass:not(.phone-mode) #appRoot{ background:transparent; }

/* ── header ── */
html.lq-glass:not(.phone-mode) #topbar-new{
  background:rgba(255,255,255,.55);
  border-bottom:none;
  box-shadow:0 2px 16px rgba(20,30,50,.07);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
}
/* brand card = treatment B (matches the phone pill) */
html.lq-glass:not(.phone-mode) .tbv2-brand{
  background:
    radial-gradient(42% 140% at 5% 50%, var(--lqa3) 0%, transparent 58%),
    radial-gradient(42% 140% at 95% 50%, var(--lqa3) 0%, transparent 58%),
    radial-gradient(135% 230% at 50% 8%, var(--lqa2) 0%, var(--lqa) 52%, var(--lqa3) 112%) !important;
  border:none; border-radius:999px;
  box-shadow:0 7px 18px var(--lqglow), inset 0 2px 5px rgba(255,255,255,.3), inset 0 -4px 9px rgba(5,5,25,.22);
}
/* Segment pill under Liquid Glass (round 3, 2026-08-01): the Neo-Organic
   structure with the USER'S PALETTE — glass track + the --lqa accent-blend
   active pill with a --lqglow halo, so picking a theme in Appearance re-tints
   the pill live (applyLqTheme rewrites the --lq* vars). Covers all four
   active states incl. /HR's .segon. */
/* NOTE deliberately NO lq track override: the base rule's #topbar-new ID
   out-specifies anything scoped html.lq-glass without it (a white-track rule
   here had been dead since PR #393), and the base var(--surface-2)/var(--line)
   track is exactly right — the lq remap makes those palette tints, so the
   track re-tints with Appearance like the rest of the pill. */
html.lq-glass:not(.phone-mode) #topbar-new .tbv2-seg:not(.on) .seg-ledger,
html.lq-glass:not(.phone-mode) #topbar-new .tbv2-seg.on .seg-list,
html.lq-glass:not(.phone-mode) #topbar-new .tbv2-seg.hr-on .seg-hrhub,
html.lq-glass:not(.phone-mode) #topbar-new .tbv2-seg .seg.segon{
  background:
    radial-gradient(42% 140% at 5% 50%, var(--lqa3) 0%, transparent 58%),
    radial-gradient(42% 140% at 95% 50%, var(--lqa3) 0%, transparent 58%),
    radial-gradient(135% 230% at 50% 8%, var(--lqa2) 0%, var(--lqa) 52%, var(--lqa3) 112%);
  color:var(--lqai,#fff);
  box-shadow:0 0 24px var(--lqglow), 0 8px 20px var(--lqglow), inset 0 1px 2px rgba(255,255,255,.35), inset 0 -2px 6px rgba(5,5,25,.18);
}

/* ── KPI water tiles float as glass cards ── */
html.lq-glass:not(.phone-mode) .kpis{ background:transparent; border-bottom:none; }
html.lq-glass:not(.phone-mode) .kpi{
  border:1px solid rgba(255,255,255,.95);
  border-radius:16px;
  box-shadow:0 2px 5px rgba(20,30,50,.05), 0 10px 26px rgba(20,30,50,.08);
}

/* ── toolbar ── */
html.lq-glass:not(.phone-mode) .controls{ background:transparent; border:none; }
html.lq-glass:not(.phone-mode) .controls .btn,
html.lq-glass:not(.phone-mode) .controls .filter-toggle{
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(20,30,50,.06);
}
html.lq-glass:not(.phone-mode) #search{
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 2px 10px rgba(20,30,50,.06);
}
/* primary actions take the gradient blend */
html.lq-glass:not(.phone-mode) .btn.btn-pri{
  background:
    radial-gradient(42% 140% at 5% 50%, var(--lqa3) 0%, transparent 58%),
    radial-gradient(42% 140% at 95% 50%, var(--lqa3) 0%, transparent 58%),
    radial-gradient(135% 230% at 50% 8%, var(--lqa2) 0%, var(--lqa) 52%, var(--lqa3) 112%) !important;
  color:var(--lqai,#fff) !important; border:none; border-radius:999px;
  box-shadow:0 7px 18px var(--lqglow), inset 0 2px 5px rgba(255,255,255,.35), inset 0 -4px 9px rgba(5,5,25,.25);
}

/* ── the table becomes a floating glass card ── */
html.lq-glass:not(.phone-mode) .table-wrap{
  margin:2px 14px 8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.95);
  background:var(--panel,#fff);
  box-shadow:0 3px 8px rgba(20,30,50,.05), 0 16px 40px rgba(20,30,50,.09);
}
html.lq-glass:not(.phone-mode) .pager{ background:transparent; border-top:none; }
html.lq-glass:not(.phone-mode) #tableWrap thead th{
  /* palette-tinted but OPAQUE (color-mix over solids) — the sticky header
     must never show rows through */
  background:color-mix(in srgb, var(--lqa,#16324f) 5%, #fbfcfe);
  color:color-mix(in srgb, var(--lqt,#16324f) 55%, #7a8494);
  letter-spacing:.08em;
  border-bottom:1px solid color-mix(in srgb, var(--lqa,#16324f) 16%, #e2e6ec);
}
/* trade number = plain palette-coloured text, NOT bold (chip + bold removed
   per Rishi 2026-07-20 — "we don't need these pills… don't want these text
   to be in bold"); TCF links follow the accent at normal weight */
html.lq-glass:not(.phone-mode) .trade-no-text{
  font-weight:400; color:var(--lqt,#3a4453);
}
html.lq-glass:not(.phone-mode) td.col-trade{ font-weight:400; }
html.lq-glass:not(.phone-mode) .tcf-link{ color:var(--lqt,#16324f); font-weight:400; }
/* status = plain coloured text (the base .st-txt/.st-* rules already colour
   it per status) — the soft-pill treatment was removed per the same ask */
/* filter-row inputs go pill */
html.lq-glass:not(.phone-mode) #tableWrap thead input,
html.lq-glass:not(.phone-mode) #tableWrap thead select{
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(120,135,160,.22);
}

/* ── HR overlay (the /HR page AND the phone #hrPhoneHost) ──
   .hr-overlay declares its own SCOPED --brand:#2563eb (blue), which SHADOWS
   the root remap for every HR component — the same local-var trap as the
   dashboard's .datepop. Re-declare at the same scope so the whole HR surface
   follows the palette (Rishi 2026-07-20: "HR HUB is not syncing").
   --accent (violet) is deliberately KEPT — it is the semantic
   machine-verified / confidential colour, not a brand accent. */
html.lq-glass .hr-overlay{
  --brand:var(--lqt,#16324f);
  --brand-dark:var(--lqt2,#3f6d9e);
  --brand-50:color-mix(in srgb, var(--lqa,#16324f) 8%, #fff);
  --brand-100:color-mix(in srgb, var(--lqa,#16324f) 15%, #fff);
  font-family:'Manrope','Inter','SF Pro Text',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* .btn-primary carries a HARDCODED blue gradient — swap it for the palette
   gradient blend under lq (hover keeps the brightness filter) */
html.lq-glass .hr-overlay .btn-primary,
html.lq-glass .hr-overlay .btn-primary:hover{
  background:
    radial-gradient(42% 140% at 5% 50%, var(--lqa3,#0a1c30) 0%, transparent 58%),
    radial-gradient(42% 140% at 95% 50%, var(--lqa3,#0a1c30) 0%, transparent 58%),
    radial-gradient(135% 230% at 50% 8%, var(--lqa2,#3f6d9e) 0%, var(--lqa,#16324f) 52%, var(--lqa3,#0a1c30) 112%);
  border-color:transparent;
  color:var(--lqai,#fff);
  box-shadow:0 6px 14px var(--lqglow,rgba(22,50,79,.3));
}

/* ── HR Hub in-page frame (2026-07-25) ─────────────────────────────────────
   The HR Hub renders in #hrFrameWrap INSIDE index.html (TCF-List pattern) so
   the header never reloads switching TCF List / TCF Ledger / HR Hub.
   .hr-on on the segment pill = third active state: HR Hub segment filled,
   the TCF List / TCF Ledger fills neutralized (the pill is otherwise a
   two-state toggle keyed on .on). */
/* .hr-on's ACTIVE fill lives in the pill's main recipe (the combined active
   selector lists — base + lq) — here only the RESETS: the otherwise-active
   TCF/Deals segment drops back to the ghost styling. These come AFTER the lq
   active rules in the file and out-specify them (.hr-on adds a class). */
#topbar-new .tbv2-seg.hr-on:not(.on) .seg-ledger,
#topbar-new .tbv2-seg.hr-on.on .seg-list{background:transparent;color:var(--ink-soft);box-shadow:none;font-weight:600;filter:none;padding:8px 16px}
#topbar-new .tbv2-seg.hr-on:not(.on) .seg-ledger:hover,
#topbar-new .tbv2-seg.hr-on.on .seg-list:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
/* lq-scoped twin — the lq ACTIVE rule's html.lq-glass prefix out-specifies the
   plain reset above, so without this the Deals/TCF segment would stay tinted
   under .hr-on on every lq palette. */
html.lq-glass:not(.phone-mode) #topbar-new .tbv2-seg.hr-on:not(.on) .seg-ledger,
html.lq-glass:not(.phone-mode) #topbar-new .tbv2-seg.hr-on.on .seg-list{background:transparent;color:var(--ink-soft);box-shadow:none;filter:none}
/* iPad installed-app: every fixed overlay keyed to the 64px header joins the
   --ipad-sa offset list (standing rule) — the HR frame included. */
html.ipad-app:not(.phone-mode) #hrFrameWrap{top:calc(var(--topbar-h,56px) + var(--ipad-sa))!important}

/* ── Trust Ledger (Trust Hub + deal-form tab) — RECO/TRESA record keeping ──
   Screen-side styles only; the printed document carries its own inline CSS
   (docCss() in trust-ledger.js) so the PDF/print never depends on app.css. */
.tl-wait,.tl-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.tl-tabs{display:flex;align-items:center;gap:8px;padding:12px 16px 0;flex-wrap:wrap}
.tl-tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 12.5px/1 inherit;font-family:inherit;padding:8px 14px;border-radius:9px;cursor:pointer}
.tl-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tl-paper{border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12px;padding:6px 8px;border-radius:8px}
.tl-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px 0;flex-wrap:wrap}
.tl-search{flex:1;min-width:220px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;padding:8px 11px;border-radius:9px}
.tl-kpis{display:flex;gap:8px;padding:12px 16px 0;flex-wrap:wrap}
.tl-kpi{border:1px solid var(--line);background:var(--surface-2,var(--panel));border-radius:11px;padding:9px 14px;min-width:118px}
.tl-kpi .v{font-weight:800;font-size:15.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.tl-kpi.in .v{color:var(--green,#0f8a52)}
.tl-kpi.out .v{color:var(--red,#c02626)}
.tl-kpi .l{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:2px}
.tl-list{padding:12px 16px 18px;overflow:auto}
.tl-table{width:100%;border-collapse:collapse;font-size:12px}
.tl-table th{position:sticky;top:0;background:var(--surface-2,var(--panel));color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:7px 9px;border-bottom:1.5px solid var(--line);z-index:2}
.tl-table th.r,.tl-table td.r{text-align:right}
/* the global ledger rule (tbody td nowrap + 320px ellipsis) must not clip
   Particulars — a ledger line has to READ in full */
.tl-table tbody td{padding:6px 9px;border-bottom:1px solid var(--line-soft,var(--line));border-right:0;vertical-align:top;color:var(--ink);white-space:normal;max-width:none;overflow:visible;text-overflow:clip}
.tl-table td.nw{white-space:nowrap}
.tl-table td.r{font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-part b{font-weight:700}
.tl-remark{color:var(--muted);font-size:11px;font-style:italic;margin-top:1px}
.tl-addr{color:var(--muted);font-size:11px;margin-top:1px}
.tl-memo td{color:var(--muted);background:color-mix(in srgb, var(--surface-2,#f6f8fb) 55%, transparent)}
.tl-open td,.tl-total td{font-weight:700;background:var(--surface-2,var(--panel))}
.tl-trade{color:var(--brand);text-decoration:none}
.tl-trade:hover{text-decoration:underline}
.tl-deal-note{font-size:12px;color:var(--muted);margin-bottom:12px}
/* An imported (manual-ledger) trade says so — amber, never the neutral note. */
.tl-legacy-note{background:#fdf1e2;border:1px solid #f0d8b4;border-radius:8px;padding:8px 11px;color:#8a5a10}
.tl-legacy-note b{color:#b45309}
.tl-deal-note a{color:var(--brand);font-weight:600;text-decoration:none}
.tl-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:12px;overflow:hidden}
.tl-card-hd{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line-soft,var(--line));font-size:13px;color:var(--ink)}
.tl-card .tl-table th{position:static}
.tl-card .tl-empty{padding:16px}
.tl-pos{font-size:11.5px;font-weight:700;color:var(--amber,#b45309)}
.tl-pos.ok{color:var(--green,#0f8a52)}

/* ── In-app feedback (Rishi 2026-08-12) ─────────────────────────────────────
   Sent from wherever the person is; the surface they were on is captured for
   them. Uses the global .modal-scrim/.modal shell so it works on index.html
   AND /HR (main.js is not loaded there). */
#fbScrim .fb-modal{width:min(860px,96vw)}
#fbScrim .modal-body{padding:18px 20px 20px}
#fbScrim .fb-ctx{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;margin-bottom:14px;background:var(--surface-2);font-size:13px}
#fbScrim .fb-ctx-lbl{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
#fbScrim .fb-ctx-note{font-size:11.5px;color:var(--muted);flex:1 1 100%}
#fbScrim .fb-ref{font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted)}
#fbScrim .fb-l{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
#fbScrim .fb-ta{width:100%;box-sizing:border-box;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-family:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--panel);resize:vertical}
#fbScrim .fb-ta:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
#fbScrim .fb-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
/* ⚠ `.btn` is display:flex, i.e. BLOCK level — two of them in a plain container
   always stack. The row that holds them must be flex itself. */
#fbScrim .fb-actions-r{display:flex;align-items:center;gap:8px}
#fbScrim .fb-mine-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px}
#fbScrim .fb-mine{border-top:1px solid var(--line);padding:9px 0}
#fbScrim .fb-mine-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#fbScrim .fb-when{font-size:11.5px;color:var(--muted)}
#fbScrim .fb-mine-msg{font-size:13px;margin-top:4px;white-space:pre-wrap;overflow-wrap:break-word}
#fbScrim .fb-mine-note,#fbScrim .fb-note{font-size:12px;color:var(--muted);margin-top:4px;padding-left:10px;border-left:2px solid var(--line)}
#fbScrim .fb-pill{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;border:1px solid}
#fbScrim .fb-new {background:#eef3fb;border-color:#a9c2e6;color:#1d4e89}
#fbScrim .fb-plan{background:#f3eefb;border-color:#c3a9e6;color:#5b2d8a}
#fbScrim .fb-prog{background:#fdf6e7;border-color:#e3c27a;color:#8a5a10}
#fbScrim .fb-done{background:#e8f4ee;border-color:#8fc4aa;color:#1d6a49}
#fbScrim .fb-decl{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
#fbScrim .fb-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
#fbScrim .fb-sp{flex:1 1 auto}
#fbScrim .fb-chip{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 11px;
  font-family:inherit;font-size:12px;color:var(--muted);cursor:pointer}
#fbScrim .fb-chip b{color:var(--ink);font-weight:700;margin-left:3px}
#fbScrim .fb-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
#fbScrim .fb-chip.on b{color:#fff}
#fbScrim .fb-table{width:100%;border-collapse:collapse;font-size:12.5px}
#fbScrim .fb-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:700;padding:7px 9px;border-bottom:1.5px solid var(--line)}
/* ⚠ The global ledger rule truncates every tbody cell — say what these want. */
#fbScrim .fb-table td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top;
  white-space:normal;overflow:visible;text-overflow:clip;max-width:none}
#fbScrim .fb-table td.fb-nw{white-space:nowrap}
#fbScrim .fb-msg{white-space:pre-wrap;overflow-wrap:break-word;min-width:240px}
#fbScrim .fb-sel{font-family:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
#fbScrim .fb-notebtn{margin-left:5px;background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  padding:3px 7px;color:var(--muted);font-family:inherit}
#fbScrim .fb-notebtn:hover{color:var(--ink);border-color:var(--brand)}
#fbScrim .fb-empty,#fbScrim .fb-load{text-align:center;color:var(--muted);padding:26px;font-size:13px}


/* ── Agents Hub ─────────────────────────────────────────────────────────────
   The directory of everyone who trades under the brokerage. Product register:
   it borrows the app's own chrome deliberately — a new visual language for a
   new hub is cost with no benefit. The craft is in the information design:
   which of the three names gets paid, and which licences are about to lapse.

   ⚠ The record is ~80% empty on most agents, so the design leads with what IS
   known (who they are, whether they can trade, whether they can be paid) and
   states what is missing as a sentence rather than printing a column of dashes. */
.ag-wait{padding:34px 18px;color:var(--muted);font-size:13px;text-align:center}
.ag-wait.ag-err{color:var(--red,#c02626)}
.ag-errh{color:var(--muted);font-size:12px;margin:8px 0 10px}

/* Attention band — the five questions a broker actually asks, as the filter. */
.ag-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:14px 16px 0}
.ag-att{appearance:none;text-align:left;font-family:inherit;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);border-radius:11px;padding:10px 12px;
  display:flex;flex-direction:column;gap:3px;transition:border-color .12s,background .12s}
.ag-att .n{font-size:21px;font-weight:700;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.ag-att .l{font-size:11px;line-height:1.3;color:var(--muted)}
.ag-att:hover{background:var(--surface-hover,#f7f9fc)}
.ag-att.ok .n{color:#0f8a52}
.ag-att.due{border-color:#f0d7a4;background:#fffaf0}
.ag-att.due .n{color:#8a5a06}
.ag-att.bad{border-color:#f0c9c9;background:#fdf5f5}
.ag-att.bad .n{color:#a01c1c}
.ag-att.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

.ag-tools{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.ag-search{flex:1;min-width:220px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-family:inherit;padding:8px 11px;border-radius:9px}
.ag-count{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ag-chips{display:flex;gap:7px;padding:11px 16px 0;flex-wrap:wrap}
.ag-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 12px/1 inherit;font-family:inherit;padding:7px 11px;border-radius:8px;cursor:pointer}
.ag-chip i{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--surface-2,#f2f4f7);border-radius:5px;padding:1px 5px}
.ag-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ag-chip.on i{background:rgba(255,255,255,.22);color:#fff}

.ag-listwrap{flex:1;min-width:0;overflow:auto;padding:12px 16px 18px}
/* The table spreads to the page (Rishi 2026-08-13). A Contact column was tried
   for the reclaimed width and dropped: 14 of 284 agents have an email and 3 have
   a phone, so it would have been an em-dash on 95% of rows — the same
   column-of-nothing already removed from Paid As. The name takes the room. */
.ag-table{width:100%;border-collapse:collapse;table-layout:fixed;border-spacing:0}
.ag-table col.c-nm{width:auto}
.ag-table col.c-cd{width:132px}
.ag-table col.c-lic{width:206px}
.ag-table col.c-pay{width:248px}
.ag-table col.c-rec{width:152px}
.ag-table thead th{position:sticky;top:0;z-index:1;background:var(--panel);text-align:left;font:700 10.5px/1 inherit;font-family:inherit;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line)}
.ag-table th.s{cursor:pointer;user-select:none}
.ag-table th.s.sorted{color:var(--ink)}
.ag-table th.s.sorted::after{content:'▲';font-size:8px;margin-left:5px}
.ag-table th.s.sorted.desc::after{content:'▼'}
/* ⚠ The global ledger rule (tbody td{nowrap;overflow:hidden;max-width:320px})
   reaches into any new table and would clip every one of these cells. */
.ag-table tbody td{white-space:normal;overflow:visible;text-overflow:clip;max-width:none;padding:9px 10px;border-bottom:1px solid var(--line-soft,var(--line));font-size:12.5px;vertical-align:middle;color:var(--ink)}
.ag-table tbody tr{cursor:pointer}
.ag-table tbody tr:hover td{background:var(--surface-hover,#f7f9fc)}
.ag-table tbody tr.on td{background:var(--brand-50,#eaf2ff)}

/* Identity: a monogram carries the person at a glance where a column of names
   all blur together, and colours the two facts worth seeing from the row —
   suspended (red) and paid-as-a-company (violet). */
.ag-who{display:flex;align-items:center;gap:9px;min-width:0}
.ag-mono{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font:700 10.5px/1 inherit;font-family:inherit;letter-spacing:.02em}
.ag-whot{min-width:0}
.ag-nm{display:block;font-weight:400;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-sub,.ag-prec{display:block;font-size:11px;color:var(--muted);margin-top:1px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-prec{color:#6d4bb8;font-weight:600}
.ag-code{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);white-space:nowrap}
.ag-lic{white-space:nowrap}
.ag-licno{display:block;font-variant-numeric:tabular-nums;line-height:1.25}
.ag-licdt{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.ag-none{color:var(--muted);opacity:.6}
.ag-pill{display:inline-block;font-style:normal;font-size:9.5px;font-weight:700;border-radius:4px;padding:1px 5px;letter-spacing:.02em;vertical-align:1px}
.ag-pill.warn{background:#fdeccd;color:#8a5a06}
.ag-pill.bad{background:#fbe1e1;color:#a01c1c}
/* A renewal RECO already has. Deliberately not warn or bad: the date is past
   but the person may trade, so it must not read as a problem someone has to
   act on — it is a state we are waiting out. */
.ag-pill.ren{background:#dff0e6;color:#0f6b3d}
.ag-renote{font-size:11.5px;color:#0f6b3d;background:#eef7f1;border:1px solid #cfe6d9;border-radius:5px;padding:1px 6px}
.ag-certok{color:#0f6b3d;font-weight:600}
/* On file, but for a registration that has since renewed — the state this
   change exists to stop being invisible. Amber: not missing, not current. */
.ag-certold{color:#8a5a06;font-weight:600}
.ag-mini.armed{background:#b91c1c;border-color:#b91c1c;color:#fff}
/* ⚠ Names in this table are NOT bold (Rishi 2026-08-13, twice — the agent name
   and then this one). Bold on every row of a column is decoration, not
   emphasis; the ink colour already separates a real payee from "not set up". */
.ag-pay{font-size:12px;font-weight:400;color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-pay em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;background:#efe8fb;color:#6d4bb8;border-radius:4px;padding:1px 4px;margin-left:5px;vertical-align:1px}
.ag-pay.none{color:var(--muted);font-weight:400;opacity:.75}

/* Completeness: how much of this record we hold. A bar reads at a glance where
   a percentage alone does not, and the sentence beneath names the next gap. */
.ag-fill{display:flex;align-items:center;gap:7px}
.ag-bar{flex:1;min-width:52px;max-width:96px;height:5px;border-radius:3px;background:var(--surface-2,#eef1f5);overflow:hidden}
.ag-bar i{display:block;height:100%;background:#0f8a52;border-radius:3px}
.ag-bar.low i{background:#d98324}
.ag-pc{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:30px;text-align:right}
.ag-table th.ag-r,.ag-table td.ag-r{text-align:right}
.ag-table td.ag-r .ag-fill{justify-content:flex-end}
/* The gaps are a campaign, not a per-row fact — said once, over what is on screen. */
.ag-gaps{padding:8px 16px 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.ag-gaps b{font-weight:600;color:var(--ink)}
.ag-gaps .ag-gapok{color:#0f8a52}
.ag-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:12.5px}

/* The record opens as a popup over the hub (Rishi 2026-08-13), not a side panel.
   ⚠ It is mounted on document.body, never inside #agentsScrim: that scrim carries
   backdrop-filter, which makes it the containing block for fixed descendants, and
   .modal is overflow:hidden — a fixed child would be positioned and clipped
   against the wrong box. z-index sits above the modal layer (200). */
.ag-recscrim{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(13,27,42,.42)}
.ag-recscrim.open{display:flex}
@supports (backdrop-filter:blur(1px)){ .ag-recscrim{backdrop-filter:blur(4px)} }
.ag-rec{background:var(--panel);border-radius:14px;box-shadow:var(--shadow-lg,0 18px 50px rgba(13,27,42,.28));
  width:min(460px,96vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.ag-panel{flex:1;min-height:0;overflow:auto;padding:0 18px 20px}
@media (prefers-reduced-motion:no-preference){
  .ag-recscrim.open .ag-rec{animation:ag-rec-in .16s cubic-bezier(.2,.8,.3,1)}
}
@keyframes ag-rec-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
/* ⚠ TWO ROWS BY ARITHMETIC, not taste. In one row the navigation + Ledger +
   Edit + close took 338px of a 460px popup, leaving ~86px for the name, so a
   three-word name wrapped onto three lines and its E-Code onto three more.
   Identity gets the full width; the controls get their own row. */
.ag-phead{display:flex;flex-direction:column;gap:9px;padding:15px 0 11px;position:sticky;top:0;background:var(--panel);z-index:1;border-bottom:1px solid var(--line-soft,var(--line))}
.ag-phrow{display:flex;align-items:center;gap:10px}
.ag-pacts{display:flex;align-items:center;gap:6px}
.ag-pgap{flex:1}
.ag-phead .ag-mono{width:34px;height:34px;font-size:12px}
.ag-pht{flex:1;min-width:0}
/* One line each, ellipsised, with the full name on hover — a name long enough
   to truncate must never push the sub-line into a second column of wrapping. */
.ag-phead h4{margin:0;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-psub{font-size:11px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Stated, never implied — which entity the money goes out to. */
.ag-payline{border:1px solid var(--line);background:var(--surface-2,#f7f9fc);border-radius:9px;padding:10px 12px;font-size:12.5px;color:var(--ink);margin:12px 0 4px}
.ag-payline b{font-weight:700}
.ag-payline span{color:var(--muted)}
.ag-payline.warn{border-color:#f0c9c9;background:#fdf3f3;color:#a01c1c}
/* The ledger chooser opens INLINE in the record — a modal inside a modal is the
   wrong shape, and the options depend on the deals we just read. */
.ag-lgr{border:1px solid var(--brand);border-radius:10px;padding:10px 12px;margin-top:12px;
  background:var(--brand-50,#eaf2ff)}
.ag-lgrh{font:700 10px/1 inherit;font-family:inherit;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}
.ag-lgrn{font-size:12px;color:var(--ink);margin-top:5px}
.ag-lgrc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);margin-top:6px;cursor:pointer}
.ag-lgrc input{margin:0;accent-color:var(--brand)}
.ag-lgra{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ag-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.ag-card h5{margin:0 0 6px;font:700 10px/1 inherit;font-family:inherit;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ag-f{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:12.5px}
.ag-lb{flex:0 0 108px;color:var(--muted);font-size:11.5px}
.ag-v{flex:1;min-width:0;color:var(--ink);word-break:break-word}
.ag-v.miss{color:var(--muted);opacity:.6}
.ag-alts{display:flex;flex-wrap:wrap;gap:5px}
.ag-alt{font-size:11px;background:var(--surface-2,#f2f4f7);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.ag-alt.soft{opacity:.62;border-style:dashed}
.ag-notes{font-size:12px;color:var(--ink);white-space:pre-wrap}
.ag-susp{font-weight:700;color:#a01c1c;background:#fbe1e1;border-radius:4px;padding:1px 6px;font-size:11px;letter-spacing:.02em}
.ag-steps{flex:none;display:flex;align-items:center;gap:2px}
.ag-step{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:7px;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ag-step:hover:not(:disabled){background:var(--surface-hover,#f7f9fc);color:var(--ink);border-color:var(--brand)}
.ag-step:disabled{opacity:.35;cursor:default}
.ag-stepn{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
/* Where a value came from, said once at the top of the card rather than repeated
   on every row. */
.ag-splitsrc{font-size:10.5px;color:var(--muted);line-height:1.45;margin:-2px 0 7px}
/* E-Code history. A row per join/exit, newest first; the code is the identity so
   it leads and is monospaced, the rest is quiet context. */
.ag-tr{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:12px;border-top:1px solid var(--line-soft,#eef1f5)}
.ag-tr:first-of-type{border-top:0}
.ag-trc{flex:0 0 82px;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;color:var(--ink)}
.ag-trk{flex:0 0 68px;font-size:10.5px;color:var(--muted)}
.ag-trw{flex:1;min-width:0;font-size:11px;color:var(--muted)}
.ag-tr.now .ag-trc{font-weight:700}
.ag-trnow{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#0f6b3d;background:#e4f4ea;border-radius:4px;padding:1px 5px}
.ag-trstale{font-size:11px;line-height:1.45;color:#7a4a05;background:#fdf3e0;
  border:1px solid #f0dcb4;border-radius:6px;padding:5px 8px;margin:0 0 7px}
.ag-trsrc{font-size:10px;color:var(--muted);line-height:1.45;margin:7px 0 0;opacity:.85}
.ag-supd{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#7a4a05;background:#fdf3e0;border-radius:4px;padding:1px 5px;margin-left:4px}
.ag-mini{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 11px/1 inherit;font-family:inherit;padding:5px 9px;border-radius:7px;cursor:pointer}
.ag-mini:hover{border-color:var(--brand);color:var(--brand)}
.ag-mini.sm{padding:2px 6px;font-size:10.5px}
.ag-x{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:7px;width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ag-x:hover{background:var(--surface-hover,#f7f9fc);color:var(--ink)}

.ag-ebody{padding-top:10px}
.ag-sec{font:700 10px/1 inherit;font-family:inherit;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line-soft,var(--line))}
.ag-e{display:block;margin:0 0 9px}
.ag-e>span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.ag-e input,.ag-e select,.ag-e textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-family:inherit;padding:7px 9px;border-radius:8px}
.ag-e textarea{resize:vertical}
.ag-note{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 9px;background:var(--surface-2,#f7f9fc);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.ag-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;position:sticky;bottom:0;background:var(--panel);padding:10px 0}
@media (max-width:900px){
  .ag-band{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  /* 738px of the table is fixed columns, so below this the name is crushed to
     nothing. The table scrolls inside its own container instead; the page body
     must never scroll sideways. */
  .ag-table{min-width:860px}
  .ag-recscrim{padding:12px}
  .ag-rec{width:100%;max-height:92vh}
}

/* ── Pre-envelope signing approval (2026-08-22) ─────────────────────────────
   The banner above the TRS sheet while it is WITH RITIKA (pend) or after she
   REJECTED it (rej), and the "With Ritika" pill in the deal-modal TRS list. */
.trs-appr-bar{margin:0 0 10px;padding:10px 14px;border-radius:10px;font-size:12.5px;line-height:1.55}
.trs-appr-bar.pend{background:#fff7e6;border:1px solid #f0dcb0;color:#7a5b12}
.trs-appr-bar.rej{background:#fdecec;border:1px solid #f3c2c2;color:#8d1c1c}
.trs-appr-bar .mini-btn{margin-left:8px;vertical-align:1px}
.sg-pill.sg-appr{background:#fff4dd;color:#9a6b00}

/* Billing Hub: an invoice whose stored property no longer matches its deal's
   current address (Beats corrected the lot after the invoice was raised) —
   hover for both addresses. Material drift only; casing never flags. */
.bh-addr-warn{color:#c07f10;margin-left:5px;cursor:help;font-size:12px;font-weight:700}

/* A void cheque disagreeing with what was typed is the most serious thing the
   reader can report — one of the two numbers is wrong, and a wrong account
   sends the payment to a stranger. It gets a block, not a sentence. */
.chq-clash{margin-top:8px;padding:9px 11px;border:1px solid #f0c36d;border-left:3px solid #e0a020;
  background:#fdf6e6;border-radius:8px;font-style:normal;color:var(--ink)}
.chq-clash>b{display:block;font-size:12px;color:#8a5a00}
.chq-vs{display:flex;gap:18px;flex-wrap:wrap;margin:7px 0 8px}
.chq-vs span{display:flex;flex-direction:column;gap:1px}
.chq-vs i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.chq-vs b{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.chq-clash .pd-note{display:block;margin-top:6px}

/* ══════════════════════════════════════════════════════════════════════════
 * Deal cockpit (deal-cockpit.js, 2026-09-08) — the Overview tab's head on
 * desktop (#dmCockpit) and the phone Full Deal page's first block (#phdCockpit).
 * Tokens only: every colour is the app's status family (green done / amber
 * waiting / grey not yet / red only for money that does not reconcile).
 * ⚠ The global ledger rule `tbody td{white-space:nowrap;overflow:hidden}`
 *   reaches into any new table — .dck-pay re-declares wrapping on purpose.
 * ══════════════════════════════════════════════════════════════════════════ */
.dck{display:grid;gap:14px;margin:0 0 18px}
.dck-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.dck-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.dck-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dck-h h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dck-refresh{border:1px solid var(--line);background:var(--panel);color:var(--muted);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1;font-family:inherit}
.dck-refresh:hover{color:var(--ink);background:var(--bg)}
.dck-link{border:0;background:none;color:var(--brand-2);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0}
.dck-headline{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.15;text-wrap:balance;margin:0 0 4px;color:var(--ink)}
.dck-headline .dim{color:var(--muted);font-weight:600}
.dck-sub{color:var(--muted);margin:0;font-size:12.5px}
/* strip (desktop) */
.dck-strip{display:grid;grid-template-columns:repeat(6,1fr);position:relative;margin-top:14px;--p:0%}
.dck-strip::before{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:13px;height:2px;background:linear-gradient(90deg,var(--green) 0 var(--p),var(--line) var(--p))}
.dck-st{position:relative;text-align:center;padding:0 4px;min-width:0}
.dck-dot{width:28px;height:28px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;background:var(--panel);border:2px solid var(--line);color:var(--muted);font-size:12px;font-weight:800;position:relative;z-index:1;font-family:inherit}
.dck-st.done .dck-dot{background:var(--green);border-color:var(--green);color:#fff}
.dck-st.warn .dck-dot{background:var(--amber-bg);border-color:var(--amber);color:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 18%,transparent)}
.dck-st.na .dck-dot{border-style:dashed}
.dck-l{font-size:12px;font-weight:700;color:var(--ink);line-height:1.2;text-wrap:balance}
.dck-st.warn .dck-l{color:var(--amber)}
.dck-st.todo .dck-l,.dck-st.na .dck-l{color:var(--muted);font-weight:600}
.dck-d{font-size:11px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.2}
.dck-own{font-size:11.5px;color:var(--muted);margin-top:4px;display:block}
.dck-s{display:none}
/* next step */
.dck-block{background:var(--amber-bg);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);border-radius:10px;padding:11px 13px;margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.dck-block.ok{background:var(--green-bg);border-color:color-mix(in srgb,var(--green) 35%,transparent);grid-template-columns:1fr}
.dck-block.ok .dck-tag,.dck-block.ok .dck-tag::before{color:var(--green);background-color:var(--green)}
.dck-block.ok .dck-tag{background:none}
.dck-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:3px}
.dck-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.dck-block b{display:block;font-size:13px;color:var(--ink)}
.dck-block span{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:2px}
.dck-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:9px;white-space:nowrap;cursor:pointer}
.dck-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.dck-btn:focus-visible,.dck-refresh:focus-visible,.dck-link:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.dck-watch{margin-top:10px;font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.dck-watch i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;margin-top:6px}
/* money rail */
.dck-mrows{display:grid}
.dck-mrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.dck-mrow:last-child{border-bottom:0}
.dck-k{font-size:12.5px;color:var(--muted);min-width:0}
.dck-k small{display:block;font-size:11px;color:var(--faint);white-space:normal}
.dck-v{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);white-space:nowrap}
.dck-v small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.dck-v .g{color:var(--green)}
.dck-mrow.hero .dck-v{font-size:20px}
.dck-v.miss{color:var(--amber)}
.dck-add{color:var(--brand-2);font-weight:700;font-size:12px;text-decoration:none;display:block}
.dck-pay{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.dck-pay th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 0;border-bottom:1px solid var(--line)}
.dck-pay th.n{text-align:right}
.dck-pay tbody td{padding:6px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;white-space:normal;overflow:visible;max-width:none;text-overflow:clip}
.dck-pay td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.dck-eft{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.dck-pay tr.short td,.dck-pay tr.short .dck-eft{color:var(--red)}
/* activity */
.dck-tl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dck-tl li{display:grid;grid-template-columns:62px 1fr;gap:10px;font-size:12.5px;align-items:start}
.dck-tl time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;padding-top:1px;white-space:nowrap}
.dck-ev{position:relative;padding-left:14px;min-width:0;overflow-wrap:anywhere}
.dck-ev::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--line)}
.dck-ev.g::before{background:var(--green)}.dck-ev.a::before{background:var(--amber)}.dck-ev.r::before{background:var(--red)}.dck-ev.b::before{background:var(--brand-2)}
.dck-ev b{font-weight:700;color:var(--ink)}.dck-ev span{color:var(--ink-soft)}.dck-ev em{font-style:normal;color:var(--muted);font-size:11.5px}
.dck-empty{color:var(--muted);font-size:12.5px;padding:8px 0}
.dck-skel{height:12px;border-radius:6px;background:var(--line-soft);margin:8px 0;width:70%}.dck-skel.w2{width:45%}.dck-skel.w3{width:85%}
@media (prefers-reduced-motion:no-preference){.dck-st.warn .dck-dot{animation:dck-pulse 2.4s ease-in-out infinite}}
@keyframes dck-pulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 18%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--amber) 8%,transparent)}}
@media (max-width:820px){.dck-grid{grid-template-columns:1fr}}
/* ── phone: the strip becomes a rail; cards match .phd-sec ── */
.dck-phone{margin:12px 14px 0;gap:12px}
.dck-phone .dck-card{border-radius:16px;border:0;box-shadow:0 1px 3px rgba(16,30,40,.06);padding:12px 16px}
.dck-phone .dck-grid{grid-template-columns:1fr;gap:12px}
.dck-phone .dck-headline{font-size:18px}
.dck-phone .dck-strip{display:grid;grid-template-columns:1fr;gap:0;margin-top:10px}
.dck-phone .dck-strip::before{display:none}
.dck-phone .dck-st{display:grid;grid-template-columns:26px 1fr;column-gap:10px;text-align:left;padding:0 0 12px;position:relative}
.dck-phone .dck-st::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--line)}
.dck-phone .dck-st:last-child::before{display:none}
.dck-phone .dck-dot{width:26px;height:26px;margin:0;grid-row:1 / span 3;font-size:11px}
.dck-phone .dck-l{font-size:13px;white-space:normal}
.dck-phone .dck-d{display:inline;margin:0}
.dck-phone .dck-s{display:inline;font-size:11.5px;color:var(--muted)}
.dck-phone .dck-s::before{content:" · "}
.dck-phone .dck-block{grid-template-columns:1fr}
.dck-phone .dck-btn{justify-self:start}
.dck-phone .dck-mrow.hero .dck-v{font-size:19px}
/* the deal modal opened ON A PHONE (the quick actions route into it): the head
   clears the notch and the close is a real tap target — Rishi 2026-09-08 */
html.phone-mode .deal-modal .dm-head{padding-top:calc(14px + env(safe-area-inset-top))}
html.phone-mode .deal-modal .dm-close-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:10px}

/* ── Collections tab (Rishi 2026-09-28; cadence 15/25/35 — see billing.js COL) ── */
#billingModal .bh-colsearch{flex:0 1 320px;min-width:200px}
#billingModal .bh-colgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
#billingModal .bh-colgroup{background:var(--bh-card);border:1px solid var(--bh-line);border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:6px;min-width:0}
#billingModal .bh-colgroup.due{border-color:color-mix(in srgb,var(--bh-warn) 55%,var(--bh-line));background:color-mix(in srgb,var(--bh-warn-bg) 55%,var(--bh-card))}
#billingModal .bh-cg-hd{display:flex;flex-direction:column;gap:1px;min-width:0}
#billingModal .bh-cg-hd b{font-size:13px;color:var(--bh-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#billingModal .bh-cg-hd span{font-size:11px;color:var(--bh-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#billingModal .bh-cg-fig{font-size:12px;color:var(--bh-ink);font-variant-numeric:tabular-nums}
#billingModal .bh-cg-act{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
#billingModal .bh-cg-note{font-size:11px;color:var(--bh-mut)}
#billingModal .bh-colmore{margin-top:10px}
#billingModal .bh-colmore>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--bh-mut);padding:6px 2px}
#billingModal .bh-colmore[open]>summary{margin-bottom:6px}
#billingModal .bh-st-due{font-size:11px;font-weight:700;color:var(--bh-warn)}
#billingModal .bh-btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;border:1px solid var(--bh-line);background:var(--bh-card);color:var(--bh-ink);cursor:pointer;white-space:nowrap}
#billingModal .bh-btn:hover{border-color:var(--brand)}
#billingModal .bh-btn.pri{background:var(--brand,#14315e);border-color:var(--brand,#14315e);color:#fff}
#billingModal .bh-link{font:inherit;font-size:11.5px;font-weight:600;color:var(--brand,#14315e);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
#billingModal .bh-link:hover{text-decoration:underline}
#billingModal .bh-coltbl td{white-space:normal;max-width:none;overflow:visible;vertical-align:top}
#billingModal .bh-coltbl .bh-rank{color:var(--bh-mut);font-variant-numeric:tabular-nums;width:28px}
#billingModal .bh-coltbl .bh-sub{font-size:11px;color:var(--bh-mut)}
#billingModal .bh-coltbl .r{text-align:right;white-space:nowrap}
#billingModal .bh-late{font-weight:700;font-variant-numeric:tabular-nums}
#billingModal .bh-late.m{color:var(--bh-mut);font-weight:600}
#billingModal .bh-late.a{color:var(--bh-warn)}
#billingModal .bh-late.r{color:var(--bh-crit)}
#billingModal .bh-cl{font-size:11.5px;color:var(--bh-mut);white-space:nowrap}
#billingModal .bh-cl-in{color:var(--bh-ok);font-weight:600}
#billingModal .bh-step{font-size:12px;font-weight:700}
#billingModal .bh-step.m{color:var(--bh-mut);font-weight:600}
#billingModal .bh-step.a{color:var(--bh-warn)}
#billingModal .bh-step.r{color:var(--bh-crit)}
#billingModal .bh-step.g{color:var(--bh-ok)}
#billingModal .bh-stepacts{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.bh-datepop .bh-dp-note{margin-bottom:10px}
/* Sense's milestone proposal from the co-op (2026-10-08) — Invoices tab, under the co-op card */
.inv-prop-card{border:1px solid #d8b4fe;background:#fcfaff;border-radius:12px;padding:12px 14px;margin:10px 0 14px}
.inv-prop-card.done{opacity:.85;border-color:var(--line,#e4e7ef);background:var(--panel,#fff)}
.inv-prop-none{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted,#667085)}
.inv-prop-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.inv-prop-head .by-sense{margin-left:0}
.inv-prop-meta{margin-left:auto;font-size:11px;color:var(--muted,#667085)}
.inv-prop-comm{font-size:12.5px;margin:8px 0 6px}
.inv-prop-tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid var(--line,#e4e7ef);border-radius:8px;overflow:hidden}
.inv-prop-tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#667085);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line,#e4e7ef)}
.inv-prop-tbl td{padding:7px 8px;border-bottom:1px solid var(--line-soft,#eef0f4);vertical-align:top}
.inv-prop-tbl td.c{text-align:center;color:var(--muted,#667085);width:28px}
.inv-prop-tbl .n{text-align:right;font-family:var(--font-num,inherit);white-space:nowrap}
.inv-prop-tbl tr.inv-prop-bonus td{background:#fffbeb}
.inv-prop-when{font-size:11px;color:var(--muted,#667085)}
.inv-prop-ev summary{font-size:11px;color:#5b21b6;cursor:pointer}
.inv-prop-ev q{display:block;font-size:11.5px;color:#344054;margin-top:4px;max-width:520px;quotes:"“" "”"}
.inv-prop-warn{font-size:12px;color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:8px;padding:7px 10px;margin:6px 0}
.inv-prop-warn.soft{color:#8a5a00;background:#fffbeb;border-color:#fde68a}
.inv-prop-doubts{font-size:11.5px;color:var(--muted,#667085);margin-top:6px}
.inv-prop-decided{font-size:12px;font-weight:700;color:#027a48;margin-top:8px}
.inv-prop-decided.rejected{color:#b42318}
.inv-prop-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Sense rows on the plan (2026-10-08) */
.pl-sense-banner{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;border:1px solid #d8b4fe;background:#fcfaff;border-radius:10px;padding:8px 12px;margin:8px 0}
.pl-sense-banner .by-sense{margin-left:0}
.pl-sense-actions{margin-left:auto;display:flex;gap:6px}
.pl-sense-chip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5b21b6;background:#f3e8ff;border:1px solid #d8b4fe;border-radius:999px;padding:0 6px;margin-left:6px;vertical-align:middle;white-space:nowrap;cursor:help}
.pl-sense-chip.ok{color:#027a48;background:#ecfdf3;border-color:#a6f4c5}
/* evidence: an ⓘ beside the description, popup on hover — the row never grows */
.pl-desc-wrap{display:flex;align-items:center;gap:4px}
.pl-desc-wrap .pl-desc{flex:1;min-width:0}
.pl-evb{position:relative;flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:#f3e8ff;color:#5b21b6;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:help;outline:none}
.pl-evb.demo{vertical-align:middle}
.pl-evb:hover,.pl-evb:focus{background:#5b21b6;color:#fff}
.pl-tip{display:none;position:absolute;left:50%;top:24px;transform:translateX(-50%);width:360px;max-width:70vw;background:#1f1147;color:#fff;font-size:11.5px;font-weight:400;line-height:1.45;padding:9px 11px;border-radius:9px;z-index:60;box-shadow:0 10px 28px rgba(16,24,40,.35);text-align:left;white-space:normal;cursor:default}
.pl-tip::before{content:'';position:absolute;left:50%;top:-6px;transform:translateX(-50%);border:6px solid transparent;border-top:none;border-bottom-color:#1f1147}
.pl-tip b{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#d8b4fe;margin-bottom:3px}
.pl-tip-when{color:#e9d5ff;margin-bottom:3px}
.pl-tip q{quotes:"“" "”";font-style:italic}
.pl-evb:hover .pl-tip,.pl-evb:focus .pl-tip,.pl-evb:focus-within .pl-tip{display:block}
#dmInvoicePlan table td{overflow:visible}
.inv-prop-line{font-size:12.5px;color:var(--muted,#667085);border:1px dashed #d8b4fe;border-radius:10px;padding:7px 12px;margin:8px 0}
.inv-prop-line.warn{border-color:#fecdca;background:#fef3f2;color:#b42318}
.inv-prop-line summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inv-prop-line summary .mini-btn{margin-left:auto}
.inv-prop-list{margin:8px 0 0 18px;padding:0;font-size:12.5px;color:#344054}
.inv-prop-list li{margin:3px 0}
/* Comm. Rate on the pre-con price line (Rishi 2026-10-08: "35,000 + HST" broke onto two rows) — one line, the box takes the room */
#trsSheet .ln [data-fkey="comm-rate"]{white-space:nowrap;min-width:0}

/* the date an invoice was raised, beside its number on the plan (2026-10-09) */
.pl-invno .pl-invdate{opacity:.75;font-style:normal;white-space:nowrap}

/* Billing Hub: S No. column + 50-row pager (Rishi 2026-10-13) */
.bh-tbl th.bh-th-sno,.bh-tbl td.bh-td-sno{width:44px;text-align:right;color:var(--bh-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.bh-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px 4px;font-size:12.5px;color:var(--bh-mut)}
.bh-pg-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bh-pg-btn{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--bh-line);border-radius:8px;background:var(--bh-card);color:var(--bh-ink);font:inherit;cursor:pointer}
.bh-pg-btn:hover:not([disabled]){border-color:var(--brand,#14315e)}
.bh-pg-btn.on{background:var(--brand,#14315e);border-color:var(--brand,#14315e);color:#fff;cursor:default}
.bh-pg-btn[disabled]:not(.on){opacity:.4;cursor:default}
.bh-pg-gap{padding:0 2px}

/* ── Leads Hub (leads.js) — folders left, rows right; everything else is bh-* ── */
/* ── Leads Hub (2026-10-18): three panes — project rail · leads · the lead's panel ── */
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/literata-latin-500-normal.woff2) format('woff2')}
#leadsFrame{display:none;position:fixed;top:var(--topbar-h,56px);left:0;right:0;bottom:0;z-index:60;background:var(--bg);flex-direction:column;--lh-rail:264px;--lh-panel:352px;--lh-bg:var(--bg);--lh-card:var(--panel);--lh-line:var(--line);--lh-mut:var(--muted);--lh-ink:var(--ink);--lh-ok:#1c8c5a;--lh-ok-bg:#e6f5ee;--lh-bad:#c0392b;--lh-bad-bg:#fbeae7;--lh-new:#1a6fb0;--lh-new-bg:#e7f1fa}
#leadsBody{flex:1;min-height:0;overflow:auto;background:var(--lh-bg)}
body.leads-page-on{overflow:hidden}
.lh-wrap{display:grid;grid-template-columns:var(--lh-rail) minmax(0,1fr) 0;min-height:100%;transition:grid-template-columns .2s}
.lh-wrap.has-panel{grid-template-columns:var(--lh-rail) minmax(0,1fr) var(--lh-panel)}
.lh-err{padding:20px;color:var(--lh-bad);font-size:12.5px}
/* rail */
.lh-folders{--lh-row:32px;border-right:1px solid var(--lh-line);background:var(--lh-card);padding:8px 8px 6px;position:sticky;top:0;align-self:start;max-height:calc(100vh - var(--topbar-h,56px));overflow:auto;display:flex;flex-direction:column;gap:0}
.lh-fsticky{position:sticky;top:0;z-index:2;background:var(--lh-card)}
.lh-fhead{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lh-mut);padding:2px 6px 6px}
.lh-fhead .lh-fheadt{margin-right:auto}
.lh-finfo{flex:none;width:16px;height:16px;margin-left:6px;border:1px solid var(--lh-line);border-radius:50%;background:var(--lh-bg);color:var(--lh-mut);font:inherit;font-size:10px;font-weight:700;font-style:italic;line-height:14px;letter-spacing:0;text-transform:none;cursor:help;padding:0}
.lh-fsearch{display:flex;align-items:center;gap:2px;margin:0 2px 4px;background:var(--lh-bg);border:1px solid var(--lh-line);border-radius:8px;padding:0 6px;min-height:28px}
.lh-fsearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;padding:4px 0;color:var(--lh-ink);outline:0}
.lh-fsearch input::placeholder{color:var(--ink-soft);opacity:1}
.lh-fsearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--lh-new-bg)}
.lh-fx{flex:none;border:0;background:none;color:var(--lh-mut);cursor:pointer;font:inherit;font-size:15px;line-height:1;padding:0 2px}
.lh-fx:hover{color:var(--lh-ink)}
.lh-fx[hidden]{display:none}
.lh-folder{display:flex;align-items:center;gap:0;width:100%;height:var(--lh-row);min-height:var(--lh-row);max-height:var(--lh-row);text-align:left;border:0;background:none;font:inherit;color:var(--lh-ink);padding:0;border-radius:7px;cursor:pointer;position:relative}
.lh-folder:hover{background:var(--surface-hover,var(--lh-bg))}
.lh-folder.all{background:var(--lh-bg)}
.lh-folder.on{background:var(--lh-bg);box-shadow:inset 0 0 0 1px var(--lh-line)}
.lh-folder.all.on{box-shadow:inset 3px 0 0 var(--brand), inset 0 0 0 1px var(--lh-line)}
.lh-folder.on::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--brand)}
.lh-folder::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lh-line);pointer-events:none}
#lhFlist .lh-folder:last-child::after{content:none}
.lh-cover{flex:none;width:20px;height:20px;border-radius:5px;overflow:hidden;position:relative;display:grid;place-items:center;background:hsl(var(--h,200) 38% 32%);color:#fff;font-size:8px;font-weight:700;letter-spacing:.02em}
.lh-cover img{position:absolute;inset:0;width:20px;height:20px;object-fit:cover}
.lh-cover.all{background:var(--brand)}
.lh-fname{flex:1;min-width:0;display:flex;align-items:center}
.lh-ft1{font-size:12.5px;font-weight:400;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-ft2{display:none}
.lh-fcount{display:flex;align-items:center;gap:4px;flex:none;margin:0}
.lh-ftot{font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--lh-mut);min-width:1.4em;text-align:right}
.lh-fdraft{font-size:10px;font-weight:700;color:var(--lh-mut);letter-spacing:.02em}
.lh-fempty{font-size:12px;color:var(--lh-mut);padding:8px 8px;line-height:1.4}
.lh-fnote{display:none}
/* main */
.lh-main{padding:20px 22px 24px;min-width:0}
.lh-main>*+*{margin-top:16px}
.lh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lh-title{margin:0;font-family:'Literata',Georgia,serif;font-weight:500;font-size:26px;letter-spacing:-.01em;line-height:1.15}
.lh-sub{font-size:12.5px;color:var(--lh-mut);margin-top:4px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lh-actions{display:flex;gap:8px}
.lh-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:650;color:var(--lh-ink);background:var(--lh-card);border:1px solid var(--lh-line);border-radius:9px;padding:7px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.lh-btn:hover{border-color:var(--brand);color:var(--brand)}
.lh-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}.lh-btn.pri:hover{filter:brightness(1.08)}
.lh-btn.warn{background:var(--lh-bad-bg);border-color:transparent;color:var(--lh-bad);width:100%;justify-content:center;margin-top:10px}
.lh-btn.lh-again{width:100%;justify-content:center;margin-top:10px}
.lh-btn[disabled]{opacity:.55;cursor:default}
.lh-copy{font:inherit;font-size:11px;font-weight:700;color:var(--brand);background:var(--lh-new-bg);border:0;border-radius:6px;padding:2px 7px;cursor:pointer}
.lh-link{color:var(--brand);text-decoration:none}.lh-link:hover{text-decoration:underline}
.lh-kv b:has(a.lh-page),.ph-kv b:has(a.ph-page){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal}
a.lh-page,a.ph-page{text-decoration:underline;text-underline-offset:2px}
.lh-panel a[href*="LeadDetails.aspx"],.ph-lead-beats a[href*="LeadDetails.aspx"]{text-decoration:underline}
.lh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.lh-stat.pulse{grid-column:span 2;min-width:0}
.lh-stat{background:var(--lh-card);border:1px solid var(--lh-line);border-radius:14px;padding:12px 14px;display:grid;gap:2px;min-width:0}
.lh-stat b{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.lh-stat span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lh-mut)}
.lh-stat small{font-size:11.5px;color:var(--lh-mut)}
.lh-stat.new b{color:var(--lh-new)}
.lh-stat.pulse{grid-template-rows:auto 1fr}
.lh-pulse{width:100%;height:44px;display:block;margin-top:4px}
.lh-pulse rect{fill:var(--lh-line)}.lh-pulse rect.on{fill:var(--brand)}
.lh-alert{display:flex;align-items:center;gap:8px;background:var(--lh-bad-bg);color:var(--lh-bad);border-radius:12px;padding:10px 14px;font-size:12.5px}
.lh-alert .lh-seg{margin-left:auto;background:#fff;color:var(--lh-bad)}
.lh-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;gap:8px 10px;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:14px;padding:10px 12px}
.lh-filters .lh-search{grid-column:span 1;min-width:0;max-width:240px;align-self:stretch}
.lh-fl.lh-dates{grid-column:span 2}.lh-dates>div{display:flex;gap:6px;align-items:center}.lh-dates>div i{font-style:normal;color:var(--lh-mut);font-size:11px;letter-spacing:0;text-transform:none}
.lh-fl{display:grid;gap:3px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lh-mut);min-width:0}
.lh-fl select,.lh-fl input,.lh-fl b{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--lh-ink);background:var(--lh-bg);border:1px solid var(--lh-line);border-radius:9px;padding:6px 9px;min-height:32px;width:100%;min-width:0;box-sizing:border-box}
.lh-menu{position:relative;min-width:0;max-width:100%}
.lh-menu.open{z-index:40}
.lh-menu-btn{position:relative;display:block;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--lh-ink);background:var(--lh-bg);border:1px solid var(--lh-line);border-radius:9px;padding:6px 28px 6px 9px;min-height:32px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-menu-btn::after{content:'';position:absolute;right:10px;top:50%;margin-top:-2px;border:4px solid transparent;border-top-color:var(--lh-mut);pointer-events:none}
.lh-menu-list{position:absolute;z-index:41;top:100%;left:0;margin:4px 0 0;padding:4px;list-style:none;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:10px;box-shadow:0 10px 28px rgba(13,27,42,.16);min-width:100%;width:max-content;max-width:240px;max-height:280px;overflow:auto}
.lh-menu-list button{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--lh-ink);background:none;border:0;border-radius:7px;padding:7px 9px;cursor:pointer;white-space:nowrap}
.lh-menu-list li.on button,.lh-menu-list button:hover{background:var(--lh-bg)}
.lh-fl input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;flex:1;color-scheme:light}
.lh-fl input[type=date]::-webkit-date-and-time-value{text-align:left}
.lh-fclear{align-self:end;min-height:32px;color:var(--lh-bad);justify-content:center}.lh-fclear em{font-style:normal;font-size:11px;background:var(--lh-bad-bg);border-radius:999px;padding:1px 7px}
.lh-multi{position:relative}.lh-multi summary{list-style:none;cursor:pointer}.lh-multi summary::-webkit-details-marker{display:none}
.lh-multi summary b{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-multi summary b::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--lh-mut);border-bottom:1.5px solid var(--lh-mut);transform:rotate(45deg);margin-left:auto;margin-bottom:3px}
.lh-mbox{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:280px;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:12px;box-shadow:0 12px 32px rgba(10,30,50,.16);padding:10px}
.lh-mbox>input{width:100%;font:inherit;font-size:12.5px;padding:7px 10px;border:1px solid var(--lh-line);border-radius:8px;background:var(--lh-bg);color:var(--lh-ink);outline:0}
.lh-mlist{max-height:240px;overflow:auto;margin:8px 0;display:grid}
.lh-mlist label{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:8px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--lh-ink);cursor:pointer}
.lh-mlist label:hover{background:var(--lh-bg)}.lh-mlist input{accent-color:var(--brand)}
.lh-macts{display:flex;gap:8px;justify-content:flex-end}
.lh-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lh-search{flex:1;min-width:240px;display:flex;align-items:center;gap:8px;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:10px;padding:0 12px;color:var(--lh-mut)}
.lh-search input{flex:1;border:0;background:none;font:inherit;font-size:13px;padding:9px 0;color:var(--lh-ink);outline:0}
.lh-segs{display:flex;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:10px;padding:3px}
.lh-seg{font:inherit;font-size:12.5px;font-weight:650;color:var(--lh-mut);background:none;border:0;border-radius:8px;padding:6px 11px;cursor:pointer;display:flex;align-items:center;gap:6px}
.lh-seg em{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;opacity:.8}
.lh-seg.on{background:var(--brand);color:#fff}
/* Buyers / Agents switch over the filters (2026-10-20) */
.lh-whoseg{width:max-content;max-width:100%;margin:14px 0 10px}
/* list */
.lh-tblwrap{background:var(--lh-card);border:1px solid var(--lh-line);border-radius:14px;overflow:auto}
.lh-tbl{width:100%;border-collapse:collapse;min-width:720px}
.lh-tbl thead th{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--lh-mut);text-align:left;padding:10px 12px;border-bottom:1px solid var(--lh-line);white-space:nowrap;background:var(--lh-card);position:sticky;top:0;z-index:1}
.lh-tbl thead th.bh-sort{cursor:pointer}.lh-tbl thead th.bh-sort.on{color:var(--brand)}
.lh-tbl td{padding:10px 12px;border-bottom:1px solid var(--line-soft,var(--lh-line));vertical-align:middle;font-size:12.5px}
.lh-tbl tbody tr:last-child td{border-bottom:0}
.lh-row{cursor:pointer}.lh-row:hover td{background:var(--surface-hover,var(--lh-bg))}
.lh-row.on td{background:var(--lh-new-bg)}
.lh-row.fresh .lh-t1{font-weight:600}
.lh-td-no{color:var(--lh-mut);font-variant-numeric:tabular-nums;width:34px}
.lh-td-who{min-width:220px}.lh-lead{display:flex;align-items:center;gap:10px}
.lh-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;background:hsl(var(--h,200) 42% 42%);letter-spacing:.03em}
.lh-nm{display:grid;min-width:0}
.lh-t1{display:block;font-weight:500;color:var(--lh-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-t2{display:block;font-size:11.5px;color:var(--lh-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lh-noteic{vertical-align:-1px;color:var(--lh-mut);margin-left:3px}
.lh-who{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:1px 6px;background:var(--slate-bg,#eef1f5);color:var(--ink-soft)}
.lh-who.agent{background:var(--plum-bg,#f3e8f7);color:var(--plum,#7a3e8f)}
.lh-who.test{background:var(--amber-bg,#fdf1dc);color:var(--amber-ink,#8a5a00)}
.lh-plat{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--slate-bg,#eef1f5);color:var(--ink-soft)}
.lh-plat.ml{background:#e3f6ea;color:#0d7a3e}.lh-plat.cc{background:#e4efff;color:#1f55b8}.lh-plat.direct{background:var(--slate-bg,#eef1f5);color:var(--lh-mut)}
.lh-td-when{white-space:nowrap;color:var(--lh-mut)}
.lh-td-beats{white-space:nowrap}
.lh-td-assign{min-width:128px;max-width:190px}
.lh-assign{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.lh-assign b{font-weight:650;font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-pill{display:inline-block;font-size:10px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--slate-bg,#eef1f5);color:var(--ink-soft);letter-spacing:.02em}
.lh-assign-wait{color:var(--lh-mut);font-size:12px}
.lh-assign-note{margin:6px 0 8px;font-size:11px;color:var(--lh-mut)}
.ph-lead-beats{display:block;margin:12px 0 4px}
.ph-lead-assign .ph-pill{margin-left:6px;text-transform:none;letter-spacing:.02em;font-size:10px;font-weight:700;vertical-align:1px}
.lh-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--lh-mut)}
.lh-dot.ok{background:var(--lh-ok)}.lh-dot.bad{background:var(--lh-bad);box-shadow:0 0 0 3px var(--lh-bad-bg)}
.lh-status{display:inline-block;font-size:11px;font-weight:700;text-transform:capitalize;border-radius:999px;padding:3px 10px;background:var(--slate-bg,#eef1f5);color:var(--ink-soft)}
.lh-status.new{background:var(--lh-new-bg);color:var(--lh-new)}.lh-status.complete{background:var(--lh-ok-bg);color:var(--lh-ok)}.lh-status.reviewed{background:var(--amber-bg,#fbf3df);color:var(--amber,#b6851a)}
.lh-empty{padding:56px 20px;text-align:center;color:var(--lh-mut);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--lh-card);border:1px dashed var(--lh-line);border-radius:14px}
/* panel */
.lh-panel{border-left:1px solid var(--lh-line);background:var(--lh-card);position:sticky;top:0;align-self:start;max-height:calc(100vh - var(--topbar-h,56px));overflow:auto;padding:18px 18px 24px;display:none}
.lh-wrap.has-panel .lh-panel{display:block}
.lh-phead{display:flex;align-items:center;gap:12px}
.lh-phead .lh-av{width:44px;height:44px;font-size:15px}
.lh-pname{flex:1;min-width:0}.lh-pname h3{margin:0;font-size:17px;font-weight:700;line-height:1.2}
.lh-x{font:inherit;font-size:22px;line-height:1;color:var(--lh-mut);background:none;border:0;cursor:pointer;padding:4px}
.lh-pacts{display:flex;gap:8px;margin-top:14px}.lh-pacts .lh-btn{flex:1;justify-content:center}
.lh-psec{margin-top:18px}
.lh-ph{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lh-mut);margin-bottom:8px}
.lh-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft,var(--lh-line));font-size:12.5px}
.lh-kv span{color:var(--lh-mut);flex:none}.lh-kv b{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.lh-stseg{display:flex;background:var(--lh-bg);border:1px solid var(--lh-line);border-radius:10px;padding:3px}
.lh-stseg button{flex:1;font:inherit;font-size:12.5px;font-weight:650;color:var(--lh-mut);background:none;border:0;border-radius:8px;padding:7px 0;cursor:pointer}
.lh-stseg button.on{background:var(--lh-card);color:var(--lh-ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.lh-stseg button.on.new{color:var(--lh-new)}.lh-stseg button.on.complete{color:var(--lh-ok)}.lh-stseg button.on.reviewed{color:var(--amber,#b6851a)}
.lh-note{margin:0;padding:10px 12px;border-left:3px solid var(--brand);background:var(--lh-bg);border-radius:0 10px 10px 0;font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.lh-home{padding:8px 0;border-top:1px solid var(--line-soft,var(--lh-line));font-size:12.5px;line-height:1.45}
.lh-home:first-child{border-top:0;padding-top:0}
.lh-home b{display:block;font-weight:650}
.lh-home span,.lh-home a{display:block;color:var(--lh-mut);font-size:11.5px;overflow-wrap:anywhere}
.lh-home a{color:var(--brand);text-decoration:none}
.ph-homes{margin:8px 0 4px}
.ph-home-h{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ph-home{padding:8px 0;border-top:1px solid var(--line-soft,var(--line));font-size:13px;line-height:1.4}
.ph-home:first-of-type{border-top:0}
.ph-home b{display:block;font-weight:650;color:var(--ink)}
.ph-home span,.ph-home a{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.ph-home a{color:var(--brand,#0a3d62);text-decoration:none}
.lh-card{display:block;border:1px dashed var(--lh-line);border-radius:12px;padding:10px;text-align:center;font-size:12.5px;font-weight:650;color:var(--brand);text-decoration:none}
.lh-card img{display:block;width:100%;border-radius:8px;margin-bottom:8px}
.lh-trail{list-style:none;margin:0;padding:0}
.lh-trail li{display:flex;gap:10px;padding:6px 0;font-size:12.5px;position:relative}
.lh-trail li i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:4px;background:var(--lh-mut)}
.lh-trail li.ok i{background:var(--lh-ok)}.lh-trail li.bad i{background:var(--lh-bad)}.lh-trail li.mut i{background:var(--lh-line)}
.lh-trail li+li::before{content:'';position:absolute;left:4px;top:-8px;height:12px;width:2px;background:var(--line-soft,var(--lh-line))}
.lh-trail li b{display:block;font-weight:500}.lh-trail li small{display:block;color:var(--lh-mut);font-size:11.5px;line-height:1.4}
.lh-folder{padding:0}.lh-fbtn{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:var(--lh-row);text-align:left;border:0;background:none;font:inherit;color:inherit;padding:0 4px 0 6px;cursor:pointer;border-radius:7px}
.lh-folder{display:flex;align-items:center}.lh-fedit{flex:none;width:0;opacity:0;border:0;background:none;color:var(--lh-mut);padding:0;cursor:pointer;border-radius:6px;overflow:hidden}
.lh-folder:hover .lh-fedit,.lh-folder:focus-within .lh-fedit{width:22px;opacity:1}
.lh-fedit:hover{color:var(--brand)}
@media (hover:none){.lh-fedit{width:22px;opacity:1}}
.lh-fnew{margin:0 0 8px;justify-content:center;width:100%}
/* the page editor */
.lh-wrap.editing .lh-panel{display:none}.lh-wrap.editing{grid-template-columns:var(--lh-rail) minmax(0,1fr) 0}
.lh-ed-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.lh-ed-ttl{flex:1;min-width:200px}.lh-ed-pub{margin-right:6px}
.lh-ed{display:grid;grid-template-columns:minmax(340px,480px) minmax(0,1fr);gap:16px;align-items:start}
.lh-ed-form{display:grid;gap:12px}
.lh-ed-sec{background:var(--lh-card);border:1px solid var(--lh-line);border-radius:14px;padding:12px 14px 14px}
.lh-ed-sec h4{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lh-mut)}
.lh-ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.lh-ed-f{display:grid;gap:4px;min-width:0}.lh-ed-f.wide{grid-column:1/-1}
.lh-ed-f>span{font-size:11.5px;font-weight:650;color:var(--ink-soft)}
.lh-ed-f input,.lh-ed-f textarea,.lh-ed-f select{font:inherit;font-size:12.5px;color:var(--lh-ink);background:var(--lh-bg);border:1px solid var(--lh-line);border-radius:9px;padding:7px 9px;width:100%;box-sizing:border-box}
.lh-ed-f input[readonly]{color:var(--lh-mut)}.lh-ed-f input[type=color]{padding:2px;height:34px}.lh-ed-f textarea{resize:vertical;line-height:1.45}
.lh-ed-f small{font-size:11px;color:var(--lh-mut);line-height:1.4}
.lh-ed-c{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;padding:4px 0}.lh-ed-c input{accent-color:var(--brand);margin-top:2px}.lh-ed-c small{display:block;color:var(--lh-mut);font-size:11px}
.lh-ed-hero{display:flex;gap:12px;align-items:center}.lh-ed-hero img{width:120px;height:72px;object-fit:cover;border-radius:8px;flex:none}.lh-ed-hero i{width:120px;height:72px;display:grid;place-items:center;border:1px dashed var(--lh-line);border-radius:8px;font-size:11px;color:var(--lh-mut);font-style:normal;flex:none}
.lh-ed-hero>div{display:grid;gap:4px;min-width:0}.lh-ed-hero input[type=file]{font-size:12px}
.lh-ed-pts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lh-ed-prev{position:sticky;top:12px}
.lh-ed-bar{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.lh-ed-bar span{display:flex;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:9px;padding:3px}
.lh-ed-bar button{font:inherit;font-size:12px;font-weight:650;color:var(--lh-mut);background:none;border:0;border-radius:7px;padding:5px 10px;cursor:pointer}.lh-ed-bar button.on{background:var(--brand);color:#fff}
.lh-ed-err{background:var(--lh-bad-bg);color:var(--lh-bad);border-radius:10px;padding:8px 12px;font-size:12.5px;margin-bottom:8px}
.lh-ed-frame{background:#888;border-radius:14px;padding:10px;display:flex;justify-content:center}
.lh-ed-frame iframe{width:100%;height:calc(92vh - 190px);min-height:520px;border:0;border-radius:8px;background:#fff;transition:width .2s}
.lh-ed-frame.phone iframe{width:390px;height:780px}
@media(max-width:1300px){.lh-ed{grid-template-columns:1fr}.lh-ed-prev{position:static}}
/* with the panel open the list narrows: contact moves to the panel, the stats wrap */
.lh-wrap.has-panel .lh-stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.lh-wrap.has-panel .lh-td-contact,.lh-wrap.has-panel .lh-th-contact{display:none}.lh-wrap.has-panel .lh-tbl{min-width:560px}
/* large and very large screens: more room, slightly larger type */
@media(min-width:1700px){#leadsFrame{--lh-rail:300px;--lh-panel:420px}.lh-main{padding:26px 30px 30px}.lh-title{font-size:30px}.lh-stat b{font-size:30px}.lh-tbl td{font-size:13.5px;padding:12px 14px}.lh-tbl thead th{font-size:11px;padding:12px 14px}.lh-t2{font-size:12.5px}.lh-av{width:36px;height:36px}.lh-fl select,.lh-fl input,.lh-fl b,.lh-search input,.lh-menu-btn,.lh-menu-list button{font-size:13.5px}}
@media(min-width:2400px){#leadsFrame{--lh-rail:340px;--lh-panel:480px}.lh-tbl td{font-size:15px}.lh-tbl thead th{font-size:12px}.lh-title{font-size:34px}}
@media(max-width:1100px){.lh-stat.pulse{grid-column:1/-1}.lh-wrap.has-panel{grid-template-columns:var(--lh-rail) minmax(0,1fr)}.lh-wrap.has-panel .lh-panel{position:fixed;right:0;top:var(--topbar-h,56px);bottom:0;width:min(360px,92vw);max-height:none;z-index:30;box-shadow:-8px 0 30px rgba(0,0,0,.15)}}
@media(max-width:900px){.lh-wrap{grid-template-columns:1fr}.lh-wrap.has-panel{grid-template-columns:1fr}.lh-folders{position:relative;max-height:240px;border-right:0;border-bottom:1px solid var(--lh-line)}.lh-main{padding:14px}.lh-stats{grid-template-columns:repeat(2,1fr)}}
/* Density (2026-10-22): Comfortable is the layout above. Compact and Dense are this browser's choice. */
.lh-density{display:flex;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:9px;padding:2px}
.lh-density button{font:inherit;font-size:11.5px;font-weight:650;color:var(--lh-mut);background:none;border:0;border-radius:7px;padding:5px 8px;cursor:pointer;white-space:nowrap}
.lh-density button.on{background:var(--brand);color:#fff}
.lh-btn.on{border-color:var(--brand);color:var(--brand)}
.lh-railbtn{flex:none;width:26px;height:26px;border:0;border-radius:8px;background:var(--lh-bg);color:var(--lh-ink);font:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer}
.lh-fhead{align-items:center;gap:6px}
.lh-wrap.rail{--lh-rail:52px}
.lh-wrap.rail .lh-folders{padding:8px 6px;min-width:0;max-width:52px;overflow-x:hidden}
.lh-wrap.rail .lh-fhead{justify-content:center;padding:2px 0 6px}
.lh-wrap.rail .lh-fheadt,.lh-wrap.rail .lh-fhead>span,.lh-wrap.rail .lh-fname,.lh-wrap.rail .lh-fcount,.lh-wrap.rail .lh-fnote,.lh-wrap.rail .lh-fempty,.lh-wrap.rail .lh-fedit,.lh-wrap.rail .lh-fsearch,.lh-wrap.rail .lh-finfo{display:none}
.lh-wrap.rail .lh-btn.lh-fnew{width:36px;height:36px;padding:0;font-size:0;overflow:hidden;min-width:0;position:relative}
.lh-wrap.rail .lh-fnew::before{content:'+';font-size:18px;line-height:36px}
.lh-wrap.rail .lh-fbtn{justify-content:center;padding:4px}
.lh-wrap.rail .lh-cover{width:32px;height:32px}
.lh-wrap.rail .lh-folder.on::before{left:0}
.lh-wrap.compact .lh-main{padding:8px 12px 10px}
.lh-wrap.compact .lh-main>*+*{margin-top:6px}
.lh-wrap.compact .lh-title{font-size:18px}
.lh-wrap.compact .lh-sub{font-size:11.5px;margin-top:1px}
.lh-wrap.compact .lh-stats{display:flex;flex-wrap:nowrap;gap:6px}
.lh-wrap.compact .lh-stat{flex:1;padding:5px 8px;border-radius:8px;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px;row-gap:0}
.lh-wrap.compact .lh-stat b{font-size:15px}
.lh-wrap.compact .lh-stat small,.lh-wrap.compact .lh-stat.pulse span{display:none}
.lh-wrap.compact .lh-stat.pulse{flex:1.3;grid-template-columns:1fr;padding:4px 8px}
.lh-wrap.compact .lh-pulse{height:18px;margin:0}
.lh-wrap.compact .lh-whoseg{margin:0}
.lh-wrap.compact .lh-seg{padding:3px 8px;font-size:12px}
.lh-wrap.compact .lh-filters{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:4px 6px;overflow-x:auto}
.lh-wrap.compact .lh-filters .lh-search{grid-column:auto;flex:0 1 200px;max-width:220px;min-width:120px;padding:0 8px}
.lh-wrap.compact .lh-search input{padding:4px 0;font-size:12.5px}
.lh-wrap.compact .lh-fl{gap:0;flex:0 0 auto}
.lh-wrap.compact .lh-fl>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lh-wrap.compact .lh-fl select,.lh-wrap.compact .lh-fl input,.lh-wrap.compact .lh-fl b,.lh-wrap.compact .lh-menu-btn{min-height:28px;padding:2px 8px;font-size:12px;width:auto;max-width:132px}
.lh-wrap.compact .lh-dates>div{gap:4px}
.lh-wrap.compact .lh-tbl td{padding:3px 8px;font-size:12.5px}
.lh-wrap.compact .lh-tbl thead th{padding:4px 8px}
.lh-wrap.compact .lh-folders{--lh-row:28px}
.lh-wrap.compact .lh-av{width:22px;height:22px;font-size:9px}
.lh-wrap.compact .lh-t2{display:none}
.lh-wrap.compact .lh-lead{gap:6px}
.lh-wrap.compact .lh-assign{flex-direction:row;align-items:center;gap:4px}
.lh-wrap.compact .lh-assign b{font-size:12px;font-weight:600}
.lh-wrap.compact .lh-plat,.lh-wrap.compact .lh-status{padding:1px 6px;font-size:10px}
.lh-wrap.compact .lh-td-who{min-width:120px}
#leadsFrame:has(.lh-wrap.dense:not(.editing)) #leadsBody{overflow:hidden;display:flex;flex-direction:column}
.lh-wrap.dense:not(.editing){flex:1 1 auto;min-height:0;height:auto;overflow:hidden}
.lh-wrap.dense:not(.editing)>.lh-main,.lh-wrap.dense:not(.editing)>.lh-folders,.lh-wrap.dense:not(.editing)>.lh-panel{min-height:0}
.lh-wrap.dense .lh-folders{--lh-row:26px}
.lh-wrap.dense:not(.editing) .lh-folders{max-height:none;height:auto;overflow:auto}
.lh-wrap.rail .lh-folder,.lh-wrap.rail .lh-fbtn,.lh-wrap.compact.rail .lh-folder,.lh-wrap.compact.rail .lh-fbtn,.lh-wrap.dense.rail .lh-folder,.lh-wrap.dense.rail .lh-fbtn{height:40px;min-height:40px;max-height:none}
.lh-wrap.dense.rail:not(.editing) .lh-folders{min-width:0;max-width:52px;overflow-x:hidden;overflow-y:auto}
.lh-toolrow{display:contents}
.lh-wrap.compact .lh-toolrow,.lh-wrap.dense .lh-toolrow{display:flex;align-items:center;gap:6px;min-width:0}
.lh-wrap.compact .lh-toolrow .lh-whoseg,.lh-wrap.dense .lh-toolrow .lh-whoseg{margin:0;flex:none}
.lh-wrap.compact .lh-toolrow .lh-filters,.lh-wrap.dense .lh-toolrow .lh-filters{flex:1;min-width:0}
.lh-wrap.dense:not(.editing) .lh-main{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;min-height:0;overflow:hidden;padding:4px 8px 2px}
.lh-wrap.dense:not(.editing) .lh-main>*+*{margin-top:0}
.lh-wrap.dense .lh-head,.lh-wrap.dense .lh-alert,.lh-wrap.dense .lh-stats{flex:0 0 auto;width:auto}
.lh-wrap.dense .lh-whoseg{margin:0}
.lh-wrap.dense .lh-head{align-items:center;gap:8px}
.lh-wrap.dense .lh-title{font-family:inherit;font-size:15px;font-weight:650}
.lh-wrap.dense .lh-sub{display:none}
.lh-wrap.dense .lh-density button{padding:3px 7px}
.lh-wrap.dense .lh-btn{padding:3px 8px;font-size:12px}
.lh-wrap.dense .lh-stats{display:none}
.lh-wrap.dense.show-stats .lh-stats{display:flex;flex-wrap:nowrap;gap:6px}
.lh-wrap.dense.show-stats .lh-stat{padding:3px 8px;border-radius:8px}
.lh-wrap.dense.show-stats .lh-stat b{font-size:14px}
.lh-wrap.dense.show-stats .lh-stat small{display:none}
.lh-wrap.dense.show-stats .lh-pulse{height:16px}
.lh-wrap.dense .lh-whoseg{margin:0}
.lh-wrap.dense .lh-seg{padding:2px 7px;font-size:11.5px}
.lh-wrap.dense .lh-filters{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:2px 4px;overflow-x:auto}
.lh-wrap.dense .lh-filters .lh-search{grid-column:auto;flex:0 1 180px;max-width:200px;min-width:100px;padding:0 8px}
.lh-wrap.dense .lh-search input{padding:2px 0;font-size:12px}
.lh-wrap.dense .lh-fl{gap:0;flex:0 0 auto}
.lh-wrap.dense .lh-fl>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lh-wrap.dense .lh-fl select,.lh-wrap.dense .lh-fl input,.lh-wrap.dense .lh-fl b,.lh-wrap.dense .lh-menu-btn{min-height:26px;padding:1px 6px;font-size:12px;width:auto;max-width:120px}
.lh-wrap.dense:not(.editing) #lhList{flex:1 1 auto;width:100%;min-height:0;display:flex;flex-direction:column}
.lh-wrap.dense:not(.editing) .lh-tblwrap{flex:1 1 auto;min-height:0;overflow:auto}
.lh-wrap.dense .lh-tbl{min-width:960px}
.lh-wrap.dense .lh-tbl thead th{position:sticky;top:0;padding:2px 6px;font-size:10px;z-index:2}
.lh-wrap.dense .lh-tbl td{height:28px;box-sizing:border-box;padding:0 6px;font-size:12.5px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px}
.lh-wrap.dense .lh-tbl td.lh-td-no{max-width:32px;width:32px}
.lh-wrap.dense .lh-plat,.lh-wrap.dense .lh-status,.lh-wrap.dense .lh-pill{padding:0 6px;font-size:10px;line-height:16px;vertical-align:middle}
.lh-wrap.dense .bh-pager{padding:2px 2px 0}
.lh-wrap .bh-pg-btn{min-width:36px;height:32px;padding:0 8px;box-sizing:border-box}
.lh-wrap.compact .bh-pg-btn,.lh-wrap.dense .bh-pg-btn{min-width:32px;height:32px}
.lh-wrap.dense.has-panel{--lh-panel:280px}
.lh-wrap.dense .lh-panel{padding:8px 10px 12px}
.lh-wrap.dense .lh-phead .lh-av{width:26px;height:26px;font-size:10px}
.lh-wrap.dense .lh-pname h3{font-size:14px}
.lh-wrap.dense .lh-pacts{margin-top:6px}
.lh-wrap.dense .lh-psec{margin-top:6px;display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:baseline}
.lh-wrap.dense .lh-psec>.lh-ph,.lh-wrap.dense .lh-psec>.lh-note,.lh-wrap.dense .lh-psec>.lh-trail,.lh-wrap.dense .lh-psec>.lh-stseg,.lh-wrap.dense .lh-psec>.lh-btn,.lh-wrap.dense .lh-psec>.lh-assign-note,.lh-wrap.dense .lh-psec>.lh-assign-wait,.lh-wrap.dense .lh-psec>.lh-card,.lh-wrap.dense .lh-psec>.lh-home{grid-column:1 / -1}
.lh-wrap.dense .lh-ph{margin-bottom:2px}
.lh-wrap.dense .lh-kv{display:contents}
.lh-wrap.dense .lh-kv span,.lh-wrap.dense .lh-kv b{padding:1px 0;font-size:11.5px;line-height:1.3}
.lh-wrap.dense .lh-kv b{text-align:left;font-weight:500;overflow-wrap:anywhere}
.lh-wrap.editing .lh-main{padding:20px 22px 24px}
html.phone-mode #phoneShell.ph-compact .ph-list{gap:4px}
html.phone-mode #phoneShell.ph-compact .ph-card{padding:7px 10px;border-radius:10px}
html.phone-mode #phoneShell.ph-compact .ph-card-name{margin-top:2px;font-size:14px}
html.phone-mode #phoneShell.ph-compact .ph-card-sub{margin-top:1px}