/* ==========================================================================
   FMS — Financing Management System design system (light mockup theme)
   A modern, professional light UI matching the FMS mockups: white cards
   on a soft blue-gray canvas, #2563eb blue primary, tabular figures.
   Depth is carried by structure and typography, not by glow or glass.
   Self-contained (no CDN). See docs/ui/design-system.md.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Mulish (SIL OFL) — self-hosted, adopted from the Stride reference design.
   Weights 300/400/500 only; emphasis uses Medium + colour, not faux-bold. */
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish/Mulish-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish/Mulish-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish/Mulish-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Native controls (date pickers, selects, scrollbars) follow the light theme */
  color-scheme: light;

  /* Slate scale — bright flat surfaces, no glow */
  --bg-0: #f5f7fa;
  --bg-1: #ffffff;
  --bg-2: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --surface: #f8fafc;
  --surface-strong: #eef2f7;
  --stroke: #e6eaf0;
  --stroke-strong: #d3dbe6;
  --stroke-hairline: rgba(15, 23, 42, 0.07);

  /* Text scale — WCAG 2.1 AA on white */
  --text-0: #111827;
  --text-1: #374151;
  --text-2: #6b7280;

  /* Institutional palette — green primary, blue info, brass detail */
  --accent-0: #2563eb;
  --accent-0-hi: #1d4ed8;
  --accent-1: #2563eb;
  --brass: #2563eb;
  --brass-hi: #1d4ed8;

  /* Traffic-light semantics — the ONLY colours that carry financial meaning:
     green = healthy / paid / current / approved / fully allocated
     amber = watch / pending / due soon / awaiting action
     red   = overdue / NPF / failed / exception
     --good/--warn/--bad alias them, so every existing tone upgrades in place. */
  --tl-green: #16a34a;
  --tl-green-soft: rgba(22, 163, 74, 0.11);
  --tl-green-bd: rgba(22, 163, 74, 0.40);
  --tl-amber: #d97706;
  --tl-amber-soft: rgba(217, 119, 6, 0.12);
  --tl-amber-bd: rgba(217, 119, 6, 0.40);
  --tl-blue: #1e40af;
  --tl-blue-soft: rgba(30, 64, 175, 0.10);
  --tl-blue-bd: rgba(30, 64, 175, 0.38);
  --tl-red: #dc2626;
  --tl-red-soft: rgba(220, 38, 38, 0.10);
  --tl-red-bd: rgba(220, 38, 38, 0.38);
  --tl-gray: #94a3b8;

  --good: var(--tl-green);
  --warn: var(--tl-amber);
  --bad: var(--tl-red);

  /* Legacy tokens kept solid — views reference them inline */
  --grad: var(--accent-0);
  --grad-soft: rgba(37, 99, 235, 0.10);

  /* Geometry — stride-grade soft radii, soft elevation */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-3: 0 2px 8px rgba(16, 24, 40, 0.08);
  --bevel: none;

  --sidebar-w: 250px;
  --topbar-h: 60px;
  --topbar-h-base: 60px;
  --font: "Inter", "Mulish", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  /* Finance-grade figure alignment everywhere */
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(37, 99, 235, 0.18); }

a { color: var(--accent-1); text-decoration: none; }
a:hover { color: var(--brass-hi); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: #1d4ed8;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--stroke-hairline);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c3cdd9 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c3cdd9; border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  padding: 18px 12px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-right: 1px solid var(--stroke);
}

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 10px 18px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 6px;
}
.brand-mark {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--accent-0);
  border: 0;
  display: grid; place-items: center;
  font-family: var(--font);
  font-size: 19px; font-weight: 700; color: #ffffff;
}
.brand-name {
  font-family: var(--font);
  font-size: 15px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-0);
}
.brand-sub {
  font-size: 10px; color: var(--text-2);
  letter-spacing: 1.8px; text-transform: uppercase;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding-right: 2px;
}

/* Sidebar footer — current user + sign out */
.sidebar-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 0; margin-top: 10px;
  border-top: 1px solid var(--stroke);
}
.sidebar-foot .avatar { width: 30px; height: 30px; font-size: 12px; flex: 0 0 30px; }
.sidebar-foot-meta { flex: 1; min-width: 0; }
.sidebar-foot-name {
  font-size: 13px; font-weight: 500; color: var(--text-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-foot-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }
.sidebar-logout {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-md); flex: 0 0 32px;
  border: 1px solid var(--stroke); background: transparent;
  color: var(--text-2); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.sidebar-logout:hover { color: var(--tl-red); border-color: var(--tl-red-bd); background: var(--tl-red-soft); }

.nav-label {
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-2); margin: 16px 12px 6px;
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--text-1); font-weight: 500; font-size: 13.5px;
  transition: background .12s ease, color .12s ease;
}
.nav-item svg { flex: 0 0 18px; opacity: 0.75; }
.nav-item:hover { color: var(--text-0); background: rgba(15, 23, 42, 0.045); }
.nav-item.active {
  color: var(--accent-0);
  background: rgba(37, 99, 235, 0.08);
}
.nav-item.active svg { opacity: 1; color: var(--accent-0); }
.nav-dot { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-0); }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-1);
  border-bottom: 1px solid var(--stroke);
}
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.2px; }
.topbar-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-back {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--stroke); background: var(--panel-2); color: var(--text-2);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.topbar-back:hover { color: var(--accent-0); border-color: var(--accent-0); background: var(--panel); }
.topbar-spacer { flex: 1; }
.topbar-date {
  font-size: 12px; color: var(--text-2); white-space: nowrap;
  padding: 5px 10px; border: 1px solid var(--stroke);
  border-radius: var(--r-sm); background: var(--panel-2);
}

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--stroke);
  border-radius: var(--r-md); padding: 7px 12px; min-width: 240px;
  color: var(--text-2);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.search:focus-within {
  border-color: var(--accent-0);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.search input { background: none; border: 0; outline: 0; color: var(--text-0); width: 100%; font-size: 13.5px; }
.search input::placeholder { color: var(--text-2); }

.avatar {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--accent-0); display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #ffffff;
}
.topbar-user { font-size: 13px; color: var(--text-1); font-weight: 500; }

/* Portal language switcher — compact segmented pill in the topbar */
.lang-switch {
  display: flex; gap: 2px; padding: 2px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2);
}
.lang-switch form { display: flex; }
.lang-btn {
  padding: 4px 10px; border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.3px;
}
.lang-btn:hover:not(.active) { color: var(--text-1); }
.lang-btn.active {
  background: var(--accent-0); color: #fff; cursor: default;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* Mobile navigation — hamburger, backdrop and quick bar are desktop-inert */
.nav-toggle {
  display: none; /* shown ≤980px */
  width: 40px; height: 40px; border-radius: var(--r-md); flex: 0 0 40px;
  border: 1px solid var(--stroke); background: var(--panel-2);
  color: var(--text-1); cursor: pointer;
  place-items: center;
}
.quickbar { display: none; }

/* --content-gap is shared with zero-height rows (.intake-mini) that cancel it */
.content { --content-gap: 20px; padding: 24px 28px 40px; display: flex; flex-direction: column; gap: var(--content-gap); }

/* ---------- Surfaces ---------- */
.card3d {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.card3d .card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--stroke);
  background: var(--panel);
}
.card3d .card-head > strong {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text-0);
}
.card3d .card-body { padding: 20px; }

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.kpi { padding: 18px; }
.kpi .kpi-icon, .kpi-row .kpi-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--accent-1);
}
.kpi .kpi-icon { margin-bottom: 14px; }
.kpi .kpi-value {
  font-size: 25px; font-weight: 500; letter-spacing: 0.2px;
  color: var(--text-0);
}
.kpi .kpi-label { color: var(--text-2); font-size: 12.5px; margin-top: 3px; }
.kpi .kpi-delta { font-size: 12px; margin-top: 8px; color: var(--text-2); }
.kpi .kpi-delta.up { color: var(--good); }
.kpi .kpi-delta.down { color: var(--bad); }
.kpi .kpi-delta.warn { color: var(--warn); }

/* KPI row variant — icon chip left, label + value right (portal dashboard) */
.kpi-row { display: flex; align-items: center; gap: 14px; }
.kpi-row .kpi-icon { margin-bottom: 0; flex: 0 0 36px; }
.kpi-row .kpi-text { display: flex; flex-direction: column; min-width: 0; }
.kpi-row .kpi-label { color: var(--text-2); font-size: 12px; margin-top: 0; }
.kpi-row .kpi-value { font-size: 22px; font-weight: 700; letter-spacing: 0.2px; color: var(--text-0); margin-top: 2px; }
.kpi-icon.tone-good { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.kpi-icon.tone-bad { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }

/* Clickable KPI tile — the whole card deep-links into a filtered list */
a.kpi-drill { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease; }
a.kpi-drill:hover { border-color: var(--accent-1); }
a.kpi-drill:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }

/* Tab bar — underline style */
.tabs3d {
  display: flex; align-items: flex-end; gap: 2px;
  border-bottom: 1px solid var(--stroke);
  padding: 0 6px;
  overflow-x: auto;
}
.tabs3d a {
  padding: 10px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.tabs3d a:hover { color: var(--text-1); background: var(--panel-2); }
.tabs3d a.active {
  color: var(--accent-0);
  border-bottom-color: var(--accent-0);
}

/* Loan stat strip — per-facility figures */
.loan-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: var(--panel-2);
}
.loan-stats span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 3px;
}
.loan-stats strong {
  font-size: 14px; font-weight: 500;
  color: var(--text-0);
}

/* Portal — quick action tiles */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.qa-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  color: var(--text-1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.qa-card svg { color: var(--accent-0); flex-shrink: 0; margin-top: 2px; }
.qa-card:hover {
  border-color: var(--accent-0);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}
.qa-card strong { display: block; font-size: 13.5px; color: var(--text-1); }
.qa-card span { display: block; font-size: 12px; margin-top: 3px; }

/* Portal — product pick cards (radio inputs) */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.pick-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pick-card:hover { border-color: var(--accent-0); }
.pick-card input[type="radio"] { margin-top: 3px; accent-color: var(--accent-0); }
.pick-card:has(input[type="radio"]:checked) {
  border-color: var(--accent-0);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.10);
}
.pick-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pick-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.pick-meta { font-size: 12px; }
.pick-meta strong { color: var(--accent-0); }

/* Buttons — flat, deliberate */
.btn3d {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--stroke-strong);
  background: var(--surface-strong); color: var(--text-0);
  font-family: var(--font);
  font-weight: 500; font-size: 13.5px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn3d:hover { background: #e4e9f0; border-color: #b6c2d2; box-shadow: var(--shadow-1); }
.btn3d:active { background: #dbe2ea; }
.btn3d.primary {
  background: var(--accent-0); border-color: var(--accent-0); color: #fff;
}
.btn3d.primary:hover { background: var(--accent-0-hi); border-color: var(--accent-0-hi); }
.btn3d.ghost { background: #fff; border-color: rgba(37, 99, 235, 0.45); color: var(--accent-0); }
.btn3d.ghost:hover { color: var(--accent-0-hi); border-color: var(--accent-0); background: rgba(37, 99, 235, 0.05); }
.btn3d.sm { padding: 6px 13px; font-size: 12.5px; border-radius: 8px; }
.btn3d:disabled { opacity: 0.55; filter: grayscale(40%); cursor: not-allowed; }
/* Traffic-light action buttons — approve (green) / reject-fail (red) */
.btn3d.good { border-color: var(--tl-green-bd); color: var(--tl-green); background: var(--tl-green-soft); }
.btn3d.good:hover { background: rgba(22, 163, 74, 0.17); border-color: var(--tl-green); }
.btn3d.bad { border-color: var(--tl-red-bd); color: var(--tl-red); background: var(--tl-red-soft); }
.btn3d.bad:hover { background: rgba(220, 38, 38, 0.15); border-color: var(--tl-red); }
.btn3d.warn { border-color: var(--tl-amber-bd); color: var(--tl-amber); background: var(--tl-amber-soft); }
.btn3d.warn:hover { background: rgba(217, 119, 6, 0.18); border-color: var(--tl-amber); }
/* Reference codes (DRQ-…, APP-…) must never break mid-code inside tables */
.table3d td code { white-space: nowrap; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-size: 12.5px; color: var(--text-1); font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.field label .req { color: var(--tl-red); margin-left: 2px; }
/* Controls inside .field inherit the console styling even when the view
   omits the .input3d/.select3d classes */
.input3d, .select3d,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field select,
.field textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--r-md);
  background: #ffffff; color: var(--text-0);
  border: 1px solid #d1d5db;
  outline: none; font-size: 14px; font-family: var(--font);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.input3d:hover, .select3d:hover,
.field input:not([type="checkbox"]):not([type="radio"]):hover,
.field select:hover, .field textarea:hover { border-color: var(--stroke-strong); }
.input3d::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--text-2); }
.input3d:focus, .select3d:focus,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.field select:focus, .field textarea:focus {
  border-color: var(--accent-0);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.select3d, .field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Bare selects (filter bars, toolbars, action forms) wear the same chrome so
   no native-styled dropdown is left anywhere in the console. */
select:not(.select3d):not(.input3d) {
  padding: 9px 34px 9px 12px;
  border: 1px solid #d1d5db; border-radius: var(--r-md);
  background-color: #ffffff; color: var(--text-0);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  outline: none; font-size: 13.5px; font-family: var(--font); cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
select:not(.select3d):not(.input3d):hover { border-color: var(--stroke-strong); }
select:not(.select3d):not(.input3d):focus {
  border-color: var(--accent-0);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
/* Bare text controls (action forms, filter bars, toolbars) wear the same
   chrome as .input3d so no native-styled box is left anywhere in the console.
   :where() keeps specificity at zero, so .field, .input3d, .search and any
   class-based styling always win over this fallback. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.input3d)),
textarea:where(:not(.input3d)) {
  padding: 9px 12px;
  border: 1px solid #d1d5db; border-radius: var(--r-md);
  background-color: #ffffff; color: var(--text-0);
  outline: none; font-size: 13.5px; font-family: var(--font);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.input3d)):hover,
textarea:where(:not(.input3d)):hover { border-color: var(--stroke-strong); }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.input3d)):focus,
textarea:where(:not(.input3d)):focus {
  border-color: var(--accent-0);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.input3d))::placeholder,
textarea:where(:not(.input3d))::placeholder { color: var(--text-2); }
textarea:where(:not(.input3d)) { width: 100%; resize: vertical; min-height: 84px; line-height: 1.5; }
/* A lone action link inside a stacked card body keeps its natural width
   instead of stretching edge-to-edge. */
.card-body > a.btn3d { align-self: flex-start; }
/* Action rows: every control of one action shares a baseline and wraps as
   a unit; secondary utilities sit under a hairline so the current state's
   primary action always reads first. */
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-row form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-row input[type="text"] { flex: 1 1 200px; max-width: 320px; }
.action-secondary { border-top: 1px solid var(--stroke); padding-top: 12px; }
.action-secondary:first-child { border-top: 0; padding-top: 0; }

/* Themed date picker (public/js/app.js upgrades every input[type=date]):
   the field wears a calendar glyph and opens a console-styled calendar
   panel instead of the native browser popover. */
.dp-field {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.dp-pop {
  position: fixed; z-index: 90; width: 264px; padding: 12px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-monthbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; margin-left: -8px; border: 0; border-radius: 8px;
  background: transparent; font-size: 13px; font-weight: 700;
  font-family: var(--font); color: var(--text-0); cursor: pointer;
  transition: background .1s ease;
}
.dp-monthbtn:hover { background: var(--panel-2); }
.dp-monthbtn svg { color: var(--text-2); }
.dp-year { font-size: 13px; font-weight: 700; color: var(--text-0); }
.dp-nav { display: flex; gap: 4px; }
.dp-nav button {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--stroke); background: var(--panel-2);
  color: var(--text-2); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.dp-nav button:hover { color: var(--accent-0); border-color: var(--accent-0); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { font-size: 11px; font-weight: 600; color: var(--text-2); text-align: center; padding: 4px 0; }
.dp-day {
  height: 30px; border: 0; border-radius: 8px; background: transparent;
  font-size: 12.5px; font-family: var(--font); color: var(--text-0); cursor: pointer;
  transition: background .1s ease;
}
.dp-day:hover:not(:disabled) { background: var(--panel-2); }
.dp-day:disabled { opacity: .3; cursor: default; }
.dp-day.out { color: var(--text-2); opacity: .45; }
.dp-day.today { box-shadow: inset 0 0 0 1px var(--accent-0); }
.dp-day.sel { background: var(--accent-0); color: #ffffff; font-weight: 700; }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 0; }
.dp-months button {
  height: 34px; border: 0; border-radius: 8px; background: transparent;
  font-size: 12.5px; font-family: var(--font); color: var(--text-0); cursor: pointer;
  transition: background .1s ease;
}
.dp-months button:hover:not(:disabled) { background: var(--panel-2); }
.dp-months button:disabled { opacity: .3; cursor: default; }
.dp-months button.today { box-shadow: inset 0 0 0 1px var(--accent-0); }
.dp-months button.sel { background: var(--accent-0); color: #ffffff; font-weight: 700; }
.dp-day:focus-visible, .dp-months button:focus-visible,
.dp-monthbtn:focus-visible, .dp-nav button:focus-visible,
.dp-foot button:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 1px; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--stroke); }
.dp-foot button {
  border: 0; background: transparent; color: var(--accent-0);
  font-size: 12.5px; font-weight: 600; font-family: var(--font); cursor: pointer;
}
.dp-foot button:hover { text-decoration: underline; }
.field textarea, textarea.input3d { resize: vertical; min-height: 84px; line-height: 1.5; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; }
/* Action row pinned to the foot of a form card */
.form-foot {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--stroke);
}

/* Inline field validation message (paired with @error in the eKYC/intake forms) */
.field-err { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--tl-red); }

/* Tables — the heart of an operations console */
.table3d { width: 100%; border-collapse: collapse; }
.table3d th {
  text-align: left; font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--accent-1); font-weight: 600;
  padding: 11px 18px; border-bottom: 1px solid var(--stroke);
  background: #f0f4fb;
}
.table3d td {
  padding: 12px 18px; border-bottom: 1px solid var(--stroke-hairline);
  font-size: 13.5px; vertical-align: middle;
}
.table3d tr:last-child td { border-bottom: 0; }
.table3d tbody tr { transition: background .1s ease; }
.table3d tbody tr:hover { background: rgba(37, 99, 235, 0.05); }

/* Tabular figures so every numeric column lines up vertically in listings. */
.table3d { font-variant-numeric: tabular-nums; }
/* Alignment utilities: numeric columns read left with tabular figures, like
   the reference listings; action columns close the row on the right. */
.table3d th.num, .table3d td.num { text-align: left; }
.table3d th.act, .table3d td.act { text-align: right; }
/* Badge/action cluster inside a cell — keeps the <td> a real table cell so
   column widths and row heights stay aligned across the whole listing. */
.cell-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Listing tools — the "Show [N] records" page-size row above a table. */
.table-tools {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px 10px;
  font-size: 12.5px; color: var(--text-2);
}
.table-tools select {
  width: auto; padding: 5px 30px 5px 10px;
  font-size: 12.5px; border-radius: 8px;
  background-position: right 9px center;
}
/* Row-number column — narrow and quiet, like the reference listings. */
.table3d th.no, .table3d td.no { width: 56px; }

/* Badges — compact traffic-light status pills with LED dot */
.badge3d {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.4px;
  border: 1px solid transparent;
  background: #eef1f5; color: var(--text-2);
}
.badge3d.good { color: var(--good); border-color: transparent; background: var(--tl-green-soft); }
.badge3d.warn { color: var(--warn); border-color: transparent; background: var(--tl-amber-soft); }
.badge3d.bad { color: var(--bad); border-color: transparent; background: var(--tl-red-soft); }
.badge3d.info { color: var(--accent-1); border-color: transparent; background: rgba(37, 99, 235, 0.10); }
.badge3d.good::before, .badge3d.warn::before, .badge3d.bad::before, .badge3d.info::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}

/* Flash notices — one component for session status/error (replaces inline styles) */
.flash {
  padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 16px;
  font-size: 13.5px; border: 1px solid var(--stroke);
  background: var(--panel-2); color: var(--text-1);
}
.flash.flash-good { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.flash.flash-bad { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.flash.flash-warn { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); color: var(--tl-amber); }

/* Confirmation popup — a themed, auto-dismissing "saved" toast. Fixed and
   centred so it floats above the wizard and the mobile quickbar (z 50/90). */
.toast-confirm {
  position: fixed; left: 50%; bottom: 32px; z-index: 100;
  transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 460px);
  padding: 14px 20px 14px 15px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: var(--panel-2); color: var(--text-1);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.20);
  font-size: 14px; font-weight: 600; line-height: 1.35;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.toast-confirm.is-visible {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.toast-confirm .toast-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--tl-green-soft); border: 1px solid var(--tl-green-bd); color: var(--tl-green);
}
/* Countdown strip: a green bar under the message that drains across the
   toast's lifetime (3.2s, same as the dismiss timer); when it empties the
   toast disappears. Retriggering restarts the animation from full. */
.toast-confirm .toast-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--tl-green-soft);
}
.toast-confirm .toast-bar-fill {
  display: block; height: 100%; width: 100%;
  background: var(--tl-green); transform-origin: left center;
}
.toast-confirm.is-visible .toast-bar-fill { animation: toast-countdown 3.2s linear forwards; }
@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 720px) { .toast-confirm { bottom: 92px; } }

.toast-receipt {
  pointer-events: auto !important;
  max-width: min(94vw, 540px);
  padding: 12px 18px 12px 14px;
}
.toast-receipt .toast-msg {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-0);
  line-height: 1.4;
}
.toast-receipt .toast-btn {
  pointer-events: auto !important;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.toast-receipt .toast-close {
  pointer-events: auto !important;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease;
}
.toast-receipt .toast-close:hover {
  color: var(--text-0);
}

.toast-ekyc {
  pointer-events: auto !important;
  max-width: min(94vw, 520px);
  padding: 14px 18px 16px 16px;
  align-items: flex-start;
  gap: 13px;
}
.toast-ekyc .toast-ico {
  margin-top: 2px;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
.toast-ekyc .toast-content {
  flex: 1 1 auto;
  min-width: 0;
}
.toast-ekyc .toast-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 3px;
  line-height: 1.35;
}
.toast-ekyc .toast-desc {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.45;
}
.toast-ekyc .toast-close {
  pointer-events: auto !important;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
  margin-right: -4px;
  transition: color .15s ease;
}
.toast-ekyc .toast-close:hover {
  color: var(--text-0);
}
.toast-ekyc.is-visible .toast-bar-fill {
  animation: toast-countdown 5.5s linear forwards;
}
/* Deposit-paid prompt: the bar drains over the 10s auto-continue. */
.toast-deposit { width: min(92vw, 420px); }
.toast-deposit.is-visible .toast-bar-fill { animation-duration: 10s; }
.toast-deposit .toast-btn { margin-top: 10px; }

/* Pre-submission confirmation modal — dimmed overlay + centred card. */
.confirm-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, 0.45); padding: 20px;
}
.confirm-modal-card {
  width: 100%; max-width: 480px;
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); padding: 22px 22px 18px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.22);
}

/* Page header band — replaces the floating hero.
   The band floats: it sticks under the sticky topbar while the page
   scrolls in either direction, so the screen's title and key figures
   stay in view on long consoles. Opaque gradient keeps the content
   sliding underneath from showing through. */
.hero {
  position: sticky; top: var(--topbar-h); z-index: 12;
  overflow: hidden;
  padding: 26px 28px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, #eaf1fe 0%, #eef2ff 60%, #f4f7ff 100%);
  border: 1px solid #dfe8fb;
  box-shadow: none;
}
/* Once the band is actually pinned it takes a shadow, so the rows
   passing under it read as depth instead of a flat seam. */
.hero.is-pinned { box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10); }
/* On narrow screens a pinned band would eat the viewport, so there it
   scrolls away with the page like any other block. */
@media (max-width: 720px) {
  .hero { position: static; }
}
.hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: 0.2px; }
.hero p { margin: 0; color: var(--text-1); max-width: 720px; line-height: 1.55; font-size: 13.5px; }
.hero .orb { display: none; }

/* Motion is decorative here — the gimmick hooks stay inert */
.tilt, .card3d.tilt:hover { transform: none !important; }

/* ---------- Dashboard composition ---------- */
.section-title {
  display: flex; align-items: center; gap: 14px;
  margin: 12px 0 -6px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-2);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }

.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.s3 { grid-column: span 3; }
.s4 { grid-column: span 4; }
.s5 { grid-column: span 5; }
.s6 { grid-column: span 6; }
.s8 { grid-column: span 8; }
.s12 { grid-column: span 12; }
@media (max-width: 1250px) {
  .s3, .s4 { grid-column: span 6; }
  .s5, .s8 { grid-column: span 12; }
  .mid-12 { grid-column: span 12; }
}
@media (max-width: 1100px) { .s6 { grid-column: span 12; } }
@media (max-width: 760px) { .grid12 > * { grid-column: span 12; } }

/* Headline KPI */
.kpi-hero {
  padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid transparent;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-hero:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kpi-hero.tone-good { border-left-color: var(--tl-green); }
.kpi-hero.tone-warn { border-left-color: var(--tl-amber); }
.kpi-hero.tone-bad { border-left-color: var(--tl-red); }
.kpi-hero .kh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-hero .kh-label {
  font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-2);
}
.kpi-hero .kh-icon {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 24px; margin-left: auto;
}
/* Delta chip (KPI slot): directional pill, neutral when there is no prior period. */
.crm-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--stroke); color: var(--text-2);
}
.crm-delta.up { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.crm-delta.down { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.kpi-hero .kh-value { font-size: 30px; font-weight: 500; letter-spacing: 0.2px; line-height: 1.15; }
.kpi-hero .kh-value.good { color: var(--good); }
.kpi-hero .kh-value.warn { color: var(--warn); }
.kpi-hero .kh-value.bad { color: var(--bad); }
.kpi-hero .kh-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* Stat list */
.stat-list { padding: 6px 20px 12px; }
.stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--stroke-hairline); font-size: 13px;
}
.stat-row:last-child { border-bottom: 0; }
.stat-row .sl { color: var(--text-1); display: inline-flex; align-items: center; gap: 8px; }
.stat-row .sv { font-weight: 500; }

/* Traffic-light status dot — the LED that marks finance-critical state */
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-gray); flex: 0 0 8px; }
.tl-dot.tl-green { background: var(--tl-green); box-shadow: 0 0 0 3px var(--tl-green-soft); }
.tl-dot.tl-amber { background: var(--tl-amber); box-shadow: 0 0 0 3px var(--tl-amber-soft); }
.tl-dot.tl-red { background: var(--tl-red); box-shadow: 0 0 0 3px var(--tl-red-soft); }
.stat-row .sv.good { color: var(--good); }
.stat-row .sv.warn { color: var(--warn); }
.stat-row .sv.bad { color: var(--bad); }

/* Progress bars */
.bar-block { padding: 14px 20px 2px; }
.bar-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.bar-head .bl { color: var(--text-1); }
.bar { height: 6px; border-radius: 99px; background: rgba(15, 23, 42, 0.08); overflow: hidden; margin-bottom: 14px; }
.bar > div { height: 100%; background: var(--accent-0); border-radius: 99px; }

/* Work queue */
.queue { padding: 4px 20px 10px; }
.queue-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--stroke-hairline); font-size: 13.5px;
}
.queue-row:last-child { border-bottom: 0; }
.queue-row .ql { flex: 1; color: var(--text-1); }
.queue-row .ql.zero { color: var(--text-2); }
.queue-row a { font-size: 12px; color: var(--text-2); }
.queue-row a:hover { color: var(--accent-1); }

/* Card footer action strip */
.card-foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--stroke); background: var(--panel-2);
}

/* Hero meta block */
.hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hero-meta { text-align: right; flex: 0 0 auto; }
.hero-meta .hm-label { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.hero-meta .hm-value { font-size: 17px; font-weight: 600; }
.hero-meta .hm-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ---------- P-UI01 design-system layer ----------
   Tokens, severity scale and component patterns. See docs/ui/design-system.md.
   Status badges (badge3d, rectangular) describe business state;
   count badges (count-badge, pill) describe attention severity. */
:root {
  /* Typography scale */
  --fs-eyebrow: 11px;  --fw-eyebrow: 600; --ls-eyebrow: 1.8px;
  --fs-label: 12px;    --fw-label: 600;   --ls-label: 0.4px;
  --fs-body: 13.5px;
  --fs-table: 13.5px;
  --fs-kpi: 30px;
  --fs-h1: 22px;
  /* Severity scale for count badges (distinct from status colors) */
  --sev-zero-fg: var(--text-2); --sev-zero-bd: var(--stroke-strong); --sev-zero-bg: transparent;
  --sev-attn-fg: var(--warn);   --sev-attn-bd: rgba(180, 83, 9, 0.40); --sev-attn-bg: rgba(180, 83, 9, 0.10);
  --sev-crit-fg: var(--bad);    --sev-crit-bd: rgba(185, 28, 28, 0.42); --sev-crit-bg: rgba(185, 28, 28, 0.08);
}

/* Count badge — single component for every numeric attention count */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 2px 9px; border-radius: 99px; border: 1px solid;
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.count-badge.cb-zero { color: var(--sev-zero-fg); border-color: var(--sev-zero-bd); background: var(--sev-zero-bg); }
.count-badge.cb-attn { color: var(--sev-attn-fg); border-color: var(--sev-attn-bd); background: var(--sev-attn-bg); }
.count-badge.cb-crit { color: var(--sev-crit-fg); border-color: var(--sev-crit-bd); background: var(--sev-crit-bg); }

/* Queue row — zero rows de-emphasized, never hidden */
.queue-row.is-zero { opacity: 0.72; }
.queue-row .q-open {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.queue-row .q-open:hover { color: var(--accent-1); }
.queue-row.is-zero .q-open { font-weight: 400; }

/* Progress meter caption — bars always carry a stated meaning */
.meter-cap {
  display: flex; align-items: center; gap: 8px;
  margin: 0 20px 14px; font-size: 11px; color: var(--text-2);
}
.meter-cap::before { content: ""; flex: 0 0 14px; height: 4px; border-radius: 99px; background: var(--accent-0); }

/* Grouped, collapsible sidebar navigation */
.nav-group { border: 0; margin: 0; }
.nav-group summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 10px 12px 6px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2);
}
.nav-group summary::-webkit-details-marker { display: none; }
/* A group header carrying a leading icon (Credit assessment) sits in the same
   icon column and text column as the nav rows; the label fills the row so the
   chevron stays at the row edge. */
.nav-group summary > svg:first-child { flex: 0 0 18px; opacity: .75; }
.nav-group summary .nav-text { flex: 1 1 auto; }
.nav-group summary:hover { color: var(--text-1); }
.nav-group summary .chev { transition: transform 0.15s ease; flex: 0 0 auto; }
.nav-group:not([open]) summary .chev { transform: rotate(-90deg); }
.nav-group .nav-item { padding-left: 30px; }
/* A pending-work badge sits at the row edge of its nav item. */
.nav-item .count-badge { margin-left: auto; transform: scale(.85); transform-origin: right center; }

/* Table pattern extensions — density, sticky header in scroll wrapper, empty state */
.table-wrap { overflow: auto; max-height: 560px; }
.table-wrap .table3d thead th { position: sticky; top: 0; z-index: 1; }
.table3d.dense td { padding: 7px 14px; font-size: 12.5px; }
.table3d.dense th { padding: 8px 14px; }
.table-empty { padding: 24px; text-align: center; color: var(--text-2); font-size: 13px; }

/* Pagination — compact institutional pager (custom vendor view) */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
}
.pager-meta { color: var(--text-2); font-size: 12.5px; }
.pager-meta strong { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-links { display: flex; gap: 6px; flex-wrap: wrap; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border: 1px solid var(--stroke); border-radius: 8px;
  background: var(--panel); color: var(--text-1);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
a.page-link:hover { border-color: var(--accent-0); color: var(--accent-0); background: rgba(37, 99, 235, 0.06); }
.page-link.current {
  background: var(--accent-0); border-color: var(--accent-0); color: #fff;
}
.page-link.disabled { opacity: 0.45; pointer-events: none; }

/* Keyboard focus is always visible (WCAG 2.1 AA) */
:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }

/* Utility */
.row { display: flex; gap: 18px; flex-wrap: wrap; }
.col { flex: 1; min-width: 300px; }
/* Stacked boxes inside a column keep the same breathing room as the row gap */
.col > .card3d + .card3d { margin-top: 18px; }
.muted { color: var(--text-2); }
.mt { margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Form grid (portal intake): every field snaps to a 4-track grid so all
   controls share just three widths — quarter, half, full — and every edge
   lines up. Spans are keyed on the field id so markup stays untouched. */
.field-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.field-list > * { grid-column: span 2; margin-top: 0; min-width: 0; }
.field-list > .field:has(textarea),
.field-list > .field:has(.input3d[id$="_address"]),
.field-list > .field:has(#company_number),
.field-list > .field:has(#company_name),
.field-list > .field:has(#awarder_company_number),
.field-list > .field:has(#awarder_company_name),
.field-list > .field.field-full,
.field-list > .field:not(:has(input)):not(:has(select)):not(:has(textarea)) { grid-column: span 4; }
.field-list > .field:has([id$="_postcode"]),
.field-list > .field:has([id$="_city"]),
.field-list > .field:has([id$="_state"]),
.field-list > .field:has([id$="_tel"]),
.field-list > .field:has([id$="_mobile"]),
.field-list > .field:has(.input3d[type="date"]),
.field-list > .field:has(.input3d[type="time"]) { grid-column: span 1; }
.field-list > .btn3d { grid-column: span 4; justify-self: start; }
.field-list .field .input3d,
.field-list .field .select3d,
.field-list .field textarea { width: 100%; max-width: none; }
.field-list .field > .muted { max-width: none; }
@media (max-width: 760px) {
  .field-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-list > .field:has(textarea),
  .field-list > .field:has(.input3d[id$="_address"]),
  .field-list > .field:has(#company_number),
  .field-list > .field:has(#company_name),
  .field-list > .field:has(#awarder_company_number),
  .field-list > .field:has(#awarder_company_name),
  .field-list > .field.field-full,
  .field-list > .field:not(:has(input)):not(:has(select)):not(:has(textarea)) { grid-column: span 2; }
}
@media (max-width: 480px) {
  .field-list { display: flex; flex-direction: column; }
}
/* Repeatable person-in-charge block on the PIC sub-step */
.pic-block { padding: 16px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel); margin-bottom: 16px; }
.pic-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

/* Touch targets — coarse pointers get taller hit areas */
@media (pointer: coarse) {
  .nav-item { min-height: 42px; align-items: center; }
  .nav-group summary { min-height: 40px; }
  .btn3d { min-height: 40px; }
  .btn3d.sm { min-height: 34px; }
}

/* Tablet & phone — the sidebar retires; a grouped tile launcher replaces the drawer */
@media (max-width: 980px) {
  .search, .topbar-user, .topbar-user-stack { display: none; }
  .nav-toggle { display: grid; }
  .sidebar { display: none; }
}

/* Mobile launcher — full-screen, button-based module navigation.
   Level 1 lists module groups as tiles; drilling into a group swaps to
   its module tiles with a back chevron, app-launcher style. */
.launcher { display: none; }
@media (max-width: 980px) {
  .launcher {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg-0);
    opacity: 0; transform: translateY(14px) scale(.995); pointer-events: none;
    transition: opacity .2s ease, transform .26s cubic-bezier(.32, .72, .24, 1);
  }
  body.launch-open .launcher { opacity: 1; transform: none; pointer-events: auto; }
  body.launch-open { overflow: hidden; }

  .launch-head {
    display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 12px 10px;
    background: var(--bg-1); border-bottom: 1px solid var(--stroke);
  }
  .launch-iconbtn {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    border: 0; background: none; color: var(--text-1); cursor: pointer;
  }
  .launch-iconbtn:active { background: var(--surface-strong); }
  .launch-back { visibility: hidden; }
  .launcher.drilled .launch-back { visibility: visible; }
  .launch-title {
    font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    text-align: center; color: var(--text-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .launch-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 16px calc(100px + env(safe-area-inset-bottom));
  }

  .launch-level { display: none; }
  .launch-level.current { display: block; animation: launch-in .24s cubic-bezier(.32, .72, .24, 1); }
  @keyframes launch-in { from { opacity: 0; transform: translateX(16px); } }

  .launch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 380px) { .launch-grid { gap: 9px; } }

  .launch-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
    min-height: 110px; padding: 16px 8px 14px;
    background: var(--panel); border: 1px solid var(--stroke); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 24px -20px rgba(15, 23, 42, .25);
    color: var(--text-1); font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.3;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .launch-tile:active { transform: scale(.96); }
  .launch-tile .tile-ico {
    width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
    background: var(--tl-green-soft); color: var(--accent-0-hi);
  }
  .launch-tile.active {
    border-color: var(--tl-green-bd); background: var(--tl-green-soft); color: var(--accent-0-hi);
  }
  .launch-tile.active .tile-ico { background: var(--panel); }
  .launch-tile.danger { color: var(--tl-red); }
  .launch-tile.danger .tile-ico { background: var(--tl-red-soft); color: var(--tl-red); }
  .launch-grid > form { margin: 0; display: flex; }
  .launch-grid > form .launch-tile { flex: 1; width: 100%; }
}

/* Phone — bottom quick bar, compact topbar/cards/tables, stacked dashboard */
@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
  /* Bottom room = the quick bar (64px + 10px float) plus the home-indicator area */
  .content { --content-gap: 14px; padding: 16px 14px calc(104px + env(safe-area-inset-bottom)); }

  /* Floating pill quick bar — frosted surface, rounded, safe-area aware */
  .quickbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
    height: 64px; padding: 6px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--stroke); border-radius: 22px;
    box-shadow: 0 18px 38px -18px rgba(15, 23, 42, 0.28);
  }
  .qb-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 44px; border-radius: 16px;
    font-family: var(--font); font-size: 10px; font-weight: 500; letter-spacing: 0.3px;
    color: var(--text-2); background: none; border: 0; cursor: pointer;
    transition: transform .12s ease, background .12s ease;
  }
  .qb-item.active { color: var(--accent-0-hi); background: var(--tl-green-soft); }
  .qb-item:active { color: var(--accent-0-hi); transform: scale(.96); }

  /* Topbar compaction — date chip joins the already-hidden search/user */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-date { display: none; }
  .topbar-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Denser cards & tables */
  .card3d .card-head { padding: 12px 14px; }
  .card3d .card-body { padding: 16px 14px; }
  .table3d th { padding: 8px 12px; }
  .table3d td { padding: 10px 12px; font-size: 12.5px; }

  /* 16px inputs prevent iOS auto-zoom on focus. The .field input:not(...)
     selector repeats the base rule's chain: without it the base 14px is
     more specific and wins, and iPhone still zooms in. */
  .input3d, .select3d, .search input, .field input, .field select, .field textarea, input, textarea,
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { font-size: 16px; }

  /* Non-essential columns may bow out on phones */
  .hide-sm { display: none; }

  /* Dashboard hero — stack, shrink, clamp the intro copy */
  .hero { padding: 20px 18px; }
  .hero-row { flex-direction: column; gap: 14px; }
  .hero h1 { font-size: 19px; }
  .hero p {
    font-size: 12.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-meta { text-align: left; }
  .hero-meta .hm-value { font-size: 15px; }

  /* Headline KPIs become a 2x2 block */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-hero { padding: 16px; }
  .kpi-hero .kh-value { font-size: 24px; }
  .kpi-hero .kh-sub { font-size: 11.5px; }
  .kpi-hero .kh-icon { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Intake header ---------- */
/* The hero band + wizard-tabs read as one block. It scrolls away with the
   page on every screen (pinned, it covered half of a 768px-tall laptop);
   the compact header below takes over once it has gone. */
.intake-sticky-header .hero {
  position: static;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.intake-sticky-header .wizard-tabs {
  margin: 0;
  padding: 10px 26px 14px;
  background: linear-gradient(120deg, #eaf1fe 0%, #eef2ff 60%, #f4f7ff 100%);
  border: 1px solid #dfe8fb;
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@media (max-width: 720px) {
  .intake-sticky-header .hero { border-radius: var(--r-lg); }
  .intake-sticky-header .wizard-tabs {
    background: transparent; border: none; padding: 0;
    border-radius: 0;
  }
}

/* ---------- Intake compact header ---------- */
/* Zero-height rows: the sticky anchor of the compact bar and the
   end-of-header marker the IntersectionObserver watches. The negative
   margin cancels the flex gap so neither adds space to the page. */
.intake-mini, .intake-head-end { height: 0; margin-bottom: calc(-1 * var(--content-gap)); }
.intake-mini { position: sticky; top: var(--topbar-h); z-index: 19; }
.intake-mini.is-open { z-index: 96; }
.intake-mini-inner { position: absolute; left: 0; right: 0; top: 8px; }
.intake-mini-bar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  padding: 8px 12px 10px 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--stroke); border-radius: var(--r-lg);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.intake-mini.is-shown .intake-mini-bar {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.intake-mini-toggle {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.mini-line1, .mini-line2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini-deal {
  display: flex; min-width: 0; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.mini-product { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mini-figures { flex: none; }
.mini-status { flex: none; padding: 1px 8px; font-size: 10.5px; }
.mini-step {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-2);
}
.mini-step-short { display: none; }
.mini-details {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: var(--accent-0);
}
.intake-mini-toggle[aria-expanded="true"] .mini-details svg { transform: rotate(180deg); }
.mini-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--stroke);
}
.mini-progress > span {
  display: block; height: 100%; width: 0;
  background: var(--accent-0); transition: width .3s ease;
}

/* Laptop: a small stepper and the open section's pills on the right */
.mini-nav { flex: none; display: flex; align-items: center; gap: 14px; }
.mini-stepper { display: inline-flex; align-items: center; gap: 4px; }
.mini-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: #f1f5f9; border: 1px solid #d3dbe6; color: #64748b;
}
.mini-dot + .mini-dot { position: relative; margin-left: 10px; }
.mini-dot + .mini-dot::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  width: 10px; height: 1px; background: #d3dbe6;
}
.mini-dot.is-done { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.mini-dot.is-current { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.mini-pills { display: inline-flex; align-items: center; gap: 6px; }
.mini-pill {
  height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid #d3dbe6; background: #fff; color: #4b5563;
  font-family: var(--font); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.mini-pill.is-done { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.mini-pill.is-partial { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); color: var(--tl-amber); }
.mini-pill.is-current { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* Details panel: a dropdown under the bar (tablet / laptop), a bottom
   sheet on phone. "Jump to" lists every section; "You are here" marks
   the open one. */
.intake-mini-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: min(420px, 100%); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 14px 16px 16px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.mini-backdrop { display: none; }
.mini-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mini-panel-head strong { font-size: 14px; }
.mini-close {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  border: 0; background: none; color: var(--text-1); cursor: pointer;
}
.mini-close:hover { background: var(--surface-strong); }
.mini-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px;
  padding: 12px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--stroke);
  font-size: 13px;
}
.mini-summary dt { color: var(--text-2); }
.mini-summary dd { margin: 0; color: var(--text-0); font-weight: 600; text-align: right; }
.mini-jump-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 4px;
}
.mini-jump-group { font-size: 12px; font-weight: 700; color: var(--text-1); margin: 10px 0 4px; }
.mini-jump { list-style: none; margin: 0; padding: 0; }
.mini-jump button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 8px 10px; border-radius: 10px;
  border: 0; background: none; color: var(--text-1);
  font-family: var(--font); font-size: 13.5px; text-align: left; cursor: pointer;
}
.mini-jump button:hover { background: var(--panel-2); }
.mini-jump-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid #cbd5e1;
}
.mini-jump-label { flex: 1 1 auto; min-width: 0; }
.mini-here {
  display: none; flex: none;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #1d4ed8; background: rgba(37, 99, 235, 0.10);
}
.mini-jump .is-done .mini-jump-dot { background: var(--tl-green); border-color: var(--tl-green); }
.mini-jump .is-partial .mini-jump-dot { background: var(--tl-amber); border-color: var(--tl-amber); }
.mini-jump .is-current button { background: rgba(37, 99, 235, 0.07); color: #1d4ed8; font-weight: 600; }
.mini-jump .is-current .mini-jump-dot { border-color: #1d4ed8; }
.mini-jump .is-current:not(.is-done):not(.is-partial) .mini-jump-dot { background: #1d4ed8; }
.mini-jump .is-current .mini-here { display: inline-flex; }

/* Tablet: one longer line; the panel drops down under it */
@media (max-width: 980px) {
  .mini-nav { display: none; }
  .intake-mini-toggle { flex-direction: row; align-items: center; gap: 12px; }
  .mini-line1 { flex: 0 1 auto; }
  .mini-line2 { flex: 1 1 auto; }
}

/* Phone: two lines flush under the topbar, panel as a bottom sheet */
@media (max-width: 720px) {
  .intake-mini-inner { top: 0; left: -14px; right: -14px; }
  .intake-mini-bar {
    padding: 7px 14px 9px; border-radius: 0; border-width: 0 0 1px;
    box-shadow: 0 8px 18px -12px rgba(17, 24, 39, 0.35);
  }
  .intake-mini-toggle { flex-direction: column; align-items: stretch; gap: 2px; }
  .mini-line1 { flex: none; justify-content: space-between; }
  .mini-step-short { display: block; }
  .mini-step-full { display: none; }
  .intake-mini-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 82dvh; z-index: 2;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; border-width: 1px 0 0;
  }
  .intake-mini-panel::before {
    content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 10px;
    border-radius: 2px; background: #cbd5e1;
  }
  .mini-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(15, 23, 42, 0.38);
  }
}

/* ---------- Floating Save bar (phone / tablet) ---------- */
/* The wizard foot leaves the end of the form and is fixed to the bottom
   of the screen on stages 1-2 (data-float, set by the intake JS). Laptop
   keeps it in flow. Back stays at the end of the form, except on the
   Deposit sub-step where it is the bar's left button (data-left). */
.wizard-foot .wizard-foot-gap { flex: 1; }
.wizard-back-inline { display: flex; }
.toast-draft { white-space: nowrap; padding-top: 11px; padding-bottom: 11px; }
.btn3d.is-waiting { opacity: 0.55; filter: grayscale(40%); cursor: not-allowed; }
@media (min-width: 981px) {
  .wizard-back-inline { display: none !important; }
}
@media (max-width: 980px) {
  .wizard-foot[data-float="1"] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    margin: 0 !important;
    align-items: center; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--stroke);
    box-shadow: 0 -12px 28px -18px rgba(15, 23, 42, 0.35);
    transition: bottom .25s ease, padding-bottom .25s ease;
  }
  .wizard-foot[data-float="1"] .btn3d { min-height: 50px; justify-content: center; }
  .wizard-foot[data-float="1"][data-left="draft"] #wizard-prev { display: none; }
  .wizard-foot[data-float="1"][data-left="back"] #wizard-draft { display: none; }
  /* Room for the bar under the last field (and the consent checkbox) */
  body:has(.wizard-foot[data-float="1"]) .content { padding-bottom: calc(40px + var(--dock-bar-h, 0px)); }
  body:has(.wizard-foot[data-float="1"]) .toast-confirm { bottom: calc(var(--dock-bar-h, 0px) + 12px); }
}
@media (max-width: 720px) {
  /* Two buttons share the width, Save Draft 1 : primary 1.4 */
  .wizard-foot[data-float="1"] { padding: 8px 12px 10px; gap: 8px; }
  .wizard-foot[data-float="1"] .wizard-foot-gap { display: none; }
  .wizard-foot[data-float="1"] > .btn3d { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 6px 10px; }
  .wizard-foot[data-float="1"] > #wizard-next,
  .wizard-foot[data-float="1"] > #wizard-submit { flex: 1.4 1 0; }
  /* Save bar + menu read as one white panel: the bar sits directly on a
     flush, full-width menu instead of the floating pill. */
  body:has(.wizard-foot[data-float="1"]) .quickbar {
    left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; border-top: 1px solid var(--stroke-hairline); border-radius: 0; box-shadow: none;
  }
  .wizard-foot[data-float="1"] {
    bottom: calc(60px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; border-top: 0;
  }
  body.menu-hidden .wizard-foot[data-float="1"] {
    bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  body:has(.wizard-foot[data-float="1"]) .content {
    padding-bottom: calc(76px + env(safe-area-inset-bottom) + var(--dock-bar-h, 0px));
  }
  body:has(.wizard-foot[data-float="1"]) .toast-confirm {
    bottom: calc(var(--dock-bar-h, 0px) + 72px + env(safe-area-inset-bottom));
  }
  body.menu-hidden:has(.wizard-foot[data-float="1"]) .toast-confirm { bottom: calc(var(--dock-bar-h, 0px) + 12px); }
}

/* ---------- Bottom panel: menu auto-hide, keyboard ---------- */
/* app.js sets body.menu-hidden while scrolling down (only where the quick
   bar is shown) and body.kb-open while the on-screen keyboard is up. */
@media (max-width: 720px) {
  .quickbar { transition: transform .25s ease; }
  body.menu-hidden .quickbar { transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom))); }
}
@media (max-width: 980px) {
  body.kb-open .quickbar,
  body.kb-open .wizard-foot[data-float="1"] { visibility: hidden; transform: translateY(120%); transition: none; }
}

/* ---------- Portal intake wizard ---------- */
/* Journey stepper: numbered stages separated by arrows. Resting stages are
   bare grey numbers; the open stage sits on a white pill with a solid blue
   number; complete stages turn green. */
.wizard-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 18px 0; }
.wizard-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--text-1);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.wizard-tab:hover { background: var(--panel); border-color: var(--stroke); }
/* .active only marks which pane is open; the spec colours come from
   is-todo / is-current / is-done so the three states can never collide. */
.wizard-tab-no {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
}
.wizard-arrow { display: inline-flex; align-items: center; margin: 0 4px; color: var(--text-2); }
.wizard-pane[hidden] { display: none; }

/* A wizard field that passes validation reads green — the !important beats
   the .field input:not(...) base rule, which sits at specificity 0-5-1 */
.input3d.complete, .select3d.complete,
.field input.complete:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field textarea.complete {
  border-color: var(--good) !important;
}
.field input.complete[type="checkbox"] { outline: 2px solid var(--tl-green-bd); outline-offset: 1px; }
/* Locked (read-only) controls — identity and reference values the customer
   can read and copy but never change. They stay read-only (not disabled) so
   the value still submits with the form, yet wear a muted chrome with a
   padlock so "not editable" is visible at a glance and never turns green. */
/* The :not() chain mirrors the 0-5-1 base field rule below so this locked
   chrome outranks it (and the :focus rule) on every non-!important property. */
.field input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field textarea[readonly], .input3d[readonly],
.field input.is-locked, .input3d.is-locked {
  background-color: var(--surface-strong);
  border-color: var(--stroke) !important;
  box-shadow: none !important;
  color: var(--text-1);
  cursor: not-allowed;
  user-select: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.field input[readonly]:hover, .field textarea[readonly]:hover, .input3d[readonly]:hover,
.field input.is-locked:hover, .input3d.is-locked:hover { border-color: var(--stroke) !important; }
.field input[readonly]:focus, .field textarea[readonly]:focus, .input3d[readonly]:focus,
.field input.is-locked:focus, .input3d.is-locked:focus {
  outline: none !important;
  border-color: var(--stroke) !important;
  box-shadow: none !important;
}
.field input[readonly].complete, .field textarea[readonly].complete, .input3d[readonly].complete,
.field input.is-locked.complete, .input3d.is-locked.complete {
  border-color: var(--stroke) !important;
}

/* Apply for Financing landing — page heading above the product grid */
.apply-title { font-size: 24px; font-weight: 700; letter-spacing: -0.2px; color: var(--text-0); }
.apply-sub { margin: 6px 0 20px; font-size: 13px; color: var(--text-2); }

/* Financing details — full-width Step 2 page after a product is chosen */
.fd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-0); margin-bottom: 6px; }
.fd-selected {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-radius: 12px;
  background: #eef4fe; border: 1px solid #dfe8fb;
}
.fd-sel-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.10); color: var(--accent-0);
}
.fd-sel-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); }
.fd-sel-text strong { font-size: 14.5px; font-weight: 700; color: var(--text-0); }
.fd-sel-terms { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.fd-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; margin-top: 22px; }
.fd-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-1); margin: 0 0 6px; }
.fd-label .req { color: var(--tl-red); }
.fd-label-gap { margin-top: 18px; }
.fd-inputwrap { position: relative; }
.fd-inputwrap .input3d { width: 100%; padding-right: 56px; }
.fd-suffix {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 3px 9px; border-radius: 7px;
  background: var(--panel-2); border: 1px solid var(--stroke);
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
}
.fd-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-2); }
.fd-estimate {
  margin-top: 22px; padding: 16px 18px; border-radius: 12px;
  background: #eef4fe; border: 1px solid #dfe8fb;
}
.fd-est-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-0); }
.fd-est-value { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; letter-spacing: 0.2px; color: var(--accent-0); }
.fd-est-note { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-2); }
.fd-summary {
  margin-top: 16px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 12px;
}
.fd-sum-head {
  padding: 10px 16px; font-size: 12.5px; font-weight: 700; color: var(--text-1);
  background: var(--panel-2); border-bottom: 1px solid var(--stroke);
}
.fd-summary .rr { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 12.5px; border-bottom: 1px solid var(--stroke); }
.fd-summary .rr:last-child { border-bottom: 0; }
.fd-summary .rr .k { color: var(--text-2); }
.fd-summary .rr .v { font-weight: 700; color: var(--text-0); }
.fd-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
/* Single-column field stack: RM prefix on money inputs, Months unit on tenure. */
.fd-stack { display: flex; flex-direction: column; gap: 22px; max-width: 420px; margin-top: 22px; }
.fd-group { display: flex; align-items: stretch; }
.fd-group .input3d { flex: 1 1 auto; min-width: 0; }
.fd-prefix {
  display: inline-flex; align-items: center; padding: 0 14px;
  background: var(--panel-2); border: 1px solid var(--stroke); border-right: 0;
  border-radius: 8px 0 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--text-1);
}
.fd-group .fd-prefix + .input3d { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fd-group-unit .input3d { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fd-group-unit .fd-unit {
  flex: 0 0 130px; width: 130px; margin-left: -1px;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.fd-stack .range-slider { margin-top: 16px; }
.fd-hint-tight { margin-top: 2px; }
@media (max-width: 720px) {
  .fd-grid { grid-template-columns: 1fr; gap: 18px; }
  .fd-sel-terms { display: none; }
}

/* ---------- Portal financing product cards ----------
   The Apply for Financing grids on the client dashboard and the apply
   wizard's Choose Item step — one card per offered product. */
.prod-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.prod-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.prod-card:hover {
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 8px 22px rgba(16, 24, 40, .08);
  transform: translateY(-2px);
}
.prod-card.selected {
  border-color: var(--accent-0);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.prod-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.10);
  color: var(--accent-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
/* Reference pastels — one tint per product position in the grid */
.prod-cards .prod-card:nth-child(4n+2) .prod-ico { background: rgba(236, 72, 153, 0.10); color: #db2777; }
.prod-cards .prod-card:nth-child(4n+3) .prod-ico { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.prod-cards .prod-card:nth-child(4n+4) .prod-ico { background: rgba(249, 115, 22, 0.12); color: #ea580c; }
.prod-name { font-size: 14.5px; font-weight: 700; color: var(--text-0); }
.prod-meta { font-size: 12px; line-height: 1.5; }
.prod-cta { margin-top: auto; align-self: stretch; justify-content: center; }
.prod-cards a.prod-cta { box-sizing: border-box; }
button.prod-card { cursor: pointer; font: inherit; }
/* Outlined Apply — white button with a blue outline, like the reference */
button.prod-card .prod-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 9px;
  color: var(--accent-0);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: background .15s ease;
}
button.prod-card:hover .prod-cta { background: rgba(37, 99, 235, 0.06); }
button.prod-card.selected .prod-cta { background: rgba(37, 99, 235, 0.10); }

/* Collateral "None" — dependent fields grey out and lose their required marker. */
.field.dep-off { opacity: .55; }
.field.dep-off .req { display: none; }

/* Appointment details under the eKYC timeline once PMB schedules the visit. */
.appt-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 12.5px;
}

/* ---------- Portfolio overview dashboard ----------
   Hand-rolled charts for the admin home — no chart library. Segment
   colours travel via the --seg custom property so bars, legend dots and
   donut slices stay in sync. */
.s7 { grid-column: span 7; }
@media (max-width: 1250px) { .s7 { grid-column: span 12; } }

.seg-0 { --seg: var(--accent-0); }
.seg-1 { --seg: #eab308; }
.seg-2 { --seg: #9ca3af; }
.seg-3 { --seg: #4ade80; }
.seg-4 { --seg: #0d9488; }
.seg-5 { --seg: #64748b; }

/* KPI tiles — icon chip left, value + label right */
.pf-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pf-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.pf-kpi-icon {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--r-md); display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--accent-1);
}
.pf-kpi.tone-good .pf-kpi-icon { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.pf-kpi.tone-warn .pf-kpi-icon { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); color: var(--tl-amber); }
.pf-kpi.tone-bad .pf-kpi-icon { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.pf-kpi-body { min-width: 0; }
.pf-kpi-value { font-size: 17px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-0); white-space: nowrap; }
.pf-kpi.tone-warn .pf-kpi-value { color: var(--warn); }
.pf-kpi.tone-bad .pf-kpi-value { color: var(--bad); }
.pf-kpi-label { font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }

/* Monthly fund movement — paired CSS bars, heights set inline (0–100%) */
.pf-legend-inline { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.pf-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--seg, var(--accent-0)); }

/* Monthly fund movement — y-axis ticks + gridlines behind paired CSS bars */
.pf-chart { display: flex; gap: 12px; }
.pf-yaxis { flex: 0 0 46px; display: flex; flex-direction: column; }
.pf-ytitle { font-size: 9px; color: var(--text-2); letter-spacing: 0.3px; margin-bottom: 8px; white-space: nowrap; }
.pf-yticks { height: 200px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
.pf-yticks span { font-size: 9px; line-height: 1; color: var(--text-2); transform: translateY(-50%); }
.pf-plot { flex: 1; min-width: 0; }
.pf-plot-bars { position: relative; height: 200px; }
.pf-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.pf-grid i { display: block; border-top: 1px solid var(--stroke); }
.pf-bars { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 100%; }
.pf-bar-pair { flex: 1; min-width: 0; display: flex; height: 100%; }
.pf-bar-cols {
  flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  border-bottom: 1px solid var(--stroke-strong);
}
.pf-bar-col {
  flex: 1; max-width: 26px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.pf-bar-val { font-size: 9px; font-weight: 600; color: var(--text-1); white-space: nowrap; margin-bottom: 3px; }
.pf-bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--seg, var(--accent-0)); }
.pf-xlabels { display: flex; gap: 12px; margin-top: 8px; }
.pf-xlabels span {
  flex: 1; min-width: 0; text-align: center;
  font-size: 10.5px; color: var(--text-2); letter-spacing: 0.4px; white-space: nowrap;
}

/* Financing by product — SVG donut via stroke-dasharray segments */
.pf-mix { display: flex; align-items: center; gap: 22px; }
.pf-donut-wrap { position: relative; width: 176px; flex: 0 0 176px; }
.pf-donut { width: 100%; height: auto; display: block; }
.pf-donut-track { fill: none; stroke: var(--stroke); stroke-width: 14; }
.pf-donut-seg { fill: none; stroke: var(--seg, var(--accent-0)); stroke-width: 14; }
.pf-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: 11px;
}
.pf-donut-center strong { font-size: 16px; font-weight: 600; color: var(--text-0); }
.pf-legend {
  flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.pf-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pf-legend-label { color: var(--text-1); }
.pf-legend-val { margin-left: auto; color: var(--text-2); font-size: 12px; white-space: nowrap; }

/* Collection / aging — five chips, green → red severity gradient */
.aging-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.aging-chip {
  padding: 12px 12px 11px; border-radius: var(--r-md);
  border: 1px solid var(--stroke); background: var(--panel-2);
}
.aging-chip .ac-label { font-size: 10px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; }
.aging-chip .ac-amount { font-size: 13px; font-weight: 600; color: var(--text-0); margin-top: 5px; }
.aging-chip .ac-count { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.aging-chip.t0 { background: var(--tl-green-soft); border-color: var(--tl-green-bd); }
.aging-chip.t0 .ac-label { color: var(--tl-green); }
.aging-chip.t1 { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); }
.aging-chip.t1 .ac-label { color: var(--tl-amber); }
.aging-chip.t2 { background: rgba(234, 88, 12, 0.12); border-color: rgba(234, 88, 12, 0.40); }
.aging-chip.t2 .ac-label { color: #ea580c; }
.aging-chip.t3 { background: var(--tl-red-soft); border-color: var(--tl-red-bd); }
.aging-chip.t3 .ac-label { color: var(--tl-red); }
.aging-chip.t4 { background: rgba(153, 27, 27, 0.13); border-color: rgba(153, 27, 27, 0.45); }
.aging-chip.t4 .ac-label { color: #991b1b; }

/* Application pipeline — icon circles joined by a dotted connector */
.pipeline-steps { display: flex; padding: 8px 0 4px; }
.pipeline-step { position: relative; flex: 1; text-align: center; min-width: 0; }
.pipeline-step::after {
  content: ""; position: absolute; top: 18px;
  left: calc(50% + 24px); width: calc(100% - 48px);
  border-top: 2px dotted var(--stroke-strong);
}
.pipeline-step:last-child::after { display: none; }
.ps-circle {
  width: 36px; height: 36px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--stroke); color: var(--text-2);
}
.ps-count { font-size: 19px; font-weight: 600; color: var(--text-0); margin-top: 8px; line-height: 1.1; }
.ps-label { font-size: 11px; color: var(--text-1); font-weight: 500; letter-spacing: 0.2px; margin-top: 3px; }

/* Post-disbursement journey strip — servicing stages after fund release */
.journey-sub { font-size: 12px; color: var(--text-2); font-weight: 500; }
.journey-steps { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 8px 0 2px; }
.journey-step {
  flex: 1 0 84px; min-width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; padding: 8px 4px 10px; border-radius: 12px;
  border: 1px solid transparent;
}
a.journey-step:hover { background: var(--panel-2); border-color: var(--stroke); }
.js-head { position: relative; display: inline-grid; place-items: center; }
.js-num {
  position: absolute; top: -7px; right: -9px; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-1); color: #fff;
  font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
}
.js-circle {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--stroke); color: var(--text-2);
}
.js-circle.good { color: var(--good); background: var(--tl-green-soft); border-color: transparent; }
.js-circle.warn { color: var(--warn); background: var(--tl-amber-soft); border-color: transparent; }
.js-circle.bad { color: var(--bad); background: var(--tl-red-soft); border-color: transparent; }
.js-circle.info { color: var(--accent-1); background: rgba(37, 99, 235, 0.10); border-color: transparent; }
.js-label { font-size: 10.5px; font-weight: 600; color: var(--text-1); letter-spacing: 0.2px; }
.js-count { font-size: 16px; font-weight: 700; color: var(--text-0); line-height: 1; font-variant-numeric: tabular-nums; }
.js-arrow { align-self: center; flex: 0 0 10px; display: grid; place-items: center; color: var(--stroke-strong); }
.js-arrow svg { width: 12px; height: 12px; }
.journey-step .badge3d { white-space: nowrap; padding: 2px 8px; font-size: 10.5px; }
.journey-hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }

/* Fund summary tiles */
.fund-tiles { display: grid; gap: 10px; }
.fund-tile {
  padding: 13px 16px 12px; border-radius: var(--r-md);
  border: 1px solid var(--stroke); border-left: 3px solid var(--accent-0);
  background: var(--panel-2);
}
.fund-tile.tone-good { border-left-color: var(--tl-green); }
.fund-tile.tone-warn { border-left-color: var(--tl-amber); }
.fund-tile .ft-label { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-2); }
.fund-tile .ft-value { font-size: 17px; font-weight: 600; color: var(--text-0); margin-top: 4px; }
.fund-tile .ft-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* Dashboard drill-downs — summary figures render as links without changing the tile look. */
a.pf-drill { color: inherit; text-decoration: none; cursor: pointer; }
a.pf-drill.pf-kpi:hover,
a.pf-drill.aging-chip:hover,
a.pf-drill.fund-tile:hover { border-color: var(--accent-0); }
a.pf-drill.pipeline-step:hover .ps-label { color: var(--accent-0); }
.pf-legend a.pf-drill { display: flex; align-items: center; gap: 8px; width: 100%; }
.pf-legend a.pf-drill:hover .pf-legend-label { color: var(--accent-0); }
/* Chart drill-downs: fund-movement bars and donut segments are links too. */
a.pf-drill.pf-bar { display: block; }
a.pf-drill.pf-bar:hover { filter: brightness(1.12); }
.pf-donut a.pf-drill:hover .pf-donut-seg { filter: brightness(1.15); }

/* Portfolio overview responsive behaviour */
@media (max-width: 1100px) {
  .pf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .aging-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pf-kpi-grid { gap: 10px; }
  .pf-kpi { padding: 12px; }
  .pf-kpi-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .pf-kpi-value { font-size: 14px; }
  .pf-mix { flex-direction: column; }
  .aging-grid { grid-template-columns: repeat(2, 1fr); }
  .pipeline-steps { overflow-x: auto; }
  .pipeline-step { min-width: 74px; }
  .pf-bars { gap: 6px; }
}
@media (max-width: 560px) {
  .pf-kpi-grid { grid-template-columns: 1fr; }
}

/* ---------- FMS mockup layer ----------
   Components that reproduce the client-portal / staff-console mockups:
   portal sidebar, collapsible staff rail, topbar bell, 3-step
   stepper, wizard status pills, dropzone + file rows, consent fee card,
   gateway tiles, amount slider, apply summary panel, AI help widget, KPI
   icon tiles and module placeholder pages. */

/* Portal sidebar — shares the light console chrome (white rail, blue active
   pill); the modifier class remains a layout hook only. */

/* Collapsible sidebar — icon-only rail, toggled via the Collapse item */
@media (min-width: 981px) {
  .shell.sidebar-collapsed .sidebar { width: 68px; flex: 0 0 68px; padding-left: 10px; padding-right: 10px; }
  .shell.sidebar-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .shell.sidebar-collapsed .brand-text,
  .shell.sidebar-collapsed .nav-text,
  .shell.sidebar-collapsed .nav-label,
  .shell.sidebar-collapsed .nav-group summary .chev,
  .shell.sidebar-collapsed .nav-item .count-badge,
  .shell.sidebar-collapsed .sidebar-foot-meta,
  .shell.sidebar-collapsed .sidebar-logout,
  .shell.sidebar-collapsed .ai-widget { display: none; }
  .shell.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 10px 0; }
  .shell.sidebar-collapsed .nav-item.active { box-shadow: none; }
  .shell.sidebar-collapsed .nav-group summary { justify-content: center; padding: 10px 0 6px; }
  .shell.sidebar-collapsed .nav-group .nav-item { padding-left: 0; }
  .shell.sidebar-collapsed .sidebar-foot { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* Buttons rendered as sidebar items (Collapse toggle, portal Logout) */
button.nav-item {
  background: none; border: 0; width: 100%;
  font-family: var(--font); text-align: left; cursor: pointer;
}

/* Topbar bell with unread badge + user name/role stack */
.topbar-bell {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  border: 1px solid var(--stroke); background: var(--panel-2); color: var(--text-1);
  cursor: pointer; font: inherit; padding: 0;
}
.topbar-bell:hover { background: var(--surface-strong); }
.topbar-bell .bell-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--tl-red); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.bell-wrap { position: relative; }
.bell-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 330px; max-width: 88vw; max-height: min(72vh, 430px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
  z-index: 80;
}
.bell-head {
  padding: 10px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-2);
  background: var(--panel-2); border-bottom: 1px solid var(--stroke);
}
.bell-item {
  display: flex; gap: 10px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--stroke);
  text-decoration: none; color: var(--text-1);
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--panel-2); }
.bell-count {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 99px;
  background: var(--tl-red); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.bell-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 99px; background: var(--tl-green); }
.bell-label { flex: 1; font-size: 12.5px; line-height: 1.45; }
.bell-when { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.bell-chev { color: var(--text-2); font-size: 15px; }
.bell-empty { padding: 16px 14px; font-size: 12.5px; color: var(--text-2); }
.topbar-user-stack { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-user-role { font-size: 11px; color: var(--text-2); }

/* 3-step header — circle + label + sub-label + connecting line */
.stepper { display: flex; align-items: flex-start; margin: 4px 0 18px; }
.stepper .step { flex: 1; min-width: 0; position: relative; text-align: center; }
.stepper .step::before {
  content: ""; position: absolute; top: 15px;
  left: calc(-50% + 22px); right: calc(50% + 22px);
  border-top: 2px solid var(--stroke-strong);
}
.stepper .step:first-child::before { display: none; }
.stepper .step.done::before, .stepper .step.current::before { border-top-color: var(--tl-green); }
.step-dot {
  position: relative; z-index: 1;
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--stroke-strong); color: var(--text-2);
  font-size: 12.5px; font-weight: 700;
}
.step.done .step-dot { background: var(--tl-green); border-color: var(--tl-green); color: #fff; }
.step.current .step-dot {
  border-color: var(--accent-0); color: var(--accent-0);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
.step-label { font-size: 12.5px; font-weight: 600; color: var(--text-1); margin-top: 7px; }
.step-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }
.step.todo .step-label { color: var(--text-2); font-weight: 500; }
.step.current .step-label { color: var(--accent-0); }
.step.done .step-sub { color: var(--tl-green); }

/* Wizard pane status pill — amber In Progress / green Ready to Submit */
.wizard-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
}
.wizard-pill.progress { color: var(--tl-amber); background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd); }
.wizard-pill.ready { color: var(--tl-green); background: var(--tl-green-soft); border: 1px solid var(--tl-green-bd); }

/* Drag-and-drop upload zone */
.dropzone {
  border: 2px dashed var(--stroke-strong); border-radius: var(--r-lg);
  background: var(--panel-2);
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent-0); background: rgba(37, 99, 235, 0.05); }
.dropzone .dz-icon {
  width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.10); color: var(--accent-0);
}
.dropzone .dz-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); margin-top: 10px; }
.dropzone .dz-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Compact upload grid: the wizard's dropzones sit side by side as slim
   horizontal cards instead of full-width banners. */
.dz-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 14px;
}
.dz-grid > .field { margin-top: 0; min-width: 0; }
@media (max-width: 760px) { .dz-grid { grid-template-columns: 1fr; } }
.dz-grid .dropzone {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left;
}
.dz-grid .dropzone .dz-icon { width: 36px; height: 36px; margin: 0; flex: 0 0 36px; }
.dz-grid .dropzone .dz-icon svg { width: 16px; height: 16px; }
.dz-grid .dropzone .dz-title { margin-top: 0; font-size: 12.5px; }
.dz-grid .dropzone .dz-sub { margin-top: 2px; font-size: 11px; }
.dz-grid .file-row { padding: 10px 12px; margin-top: 8px; gap: 10px; }
.dz-grid .file-row .fr-icon { width: 30px; height: 30px; flex-basis: 30px; }
/* A staging attempt that failed: red chip, file rides with the form save. */
.file-row.failed { border-color: var(--bad); background: #fef2f2; }
.file-row.failed .fr-sub { color: var(--bad); font-weight: 600; }

/* Uploaded file row — name, size/date, green success state */
.file-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: #fff; padding: 12px 14px; margin-top: 12px;
}
.file-row .fr-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.08); color: var(--accent-1);
}
.file-row .fr-meta { flex: 1; min-width: 0; }
.file-row .fr-name {
  font-size: 13px; font-weight: 600; color: var(--text-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-row .fr-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.file-row .fr-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--tl-green); white-space: nowrap;
}
.file-row .btn-remove-doc {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; margin-left: auto;
  font-size: 11.5px; font-weight: 600; line-height: 1.2;
  color: var(--bad); background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.28); border-radius: var(--r-xs, 6px);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all 0.15s ease; flex: 0 0 auto;
}
.file-row .btn-remove-doc:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08); border-color: var(--bad); color: var(--bad);
}
.file-row .btn-remove-doc:disabled {
  opacity: 0.5; cursor: not-allowed;
}
/* Pending evidence chips keep a live spinner until the round-trip ends. */
.file-row.pending .fr-icon::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.22); border-top-color: var(--accent-1);
  animation: fr-spin 0.9s linear infinite;
}
.file-row.uploading .fr-sub { color: var(--accent-1); font-weight: 600; }
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* Consent fee summary card */
.fee-card {
  border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
}
.fee-card .fee-head {
  padding: 12px 18px; border-bottom: 1px solid var(--stroke); background: var(--panel-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-1);
}
.fee-card .fee-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 18px; font-size: 13.5px; color: var(--text-1);
  border-bottom: 1px solid var(--stroke-hairline);
}
.fee-card .fee-row strong { font-weight: 500; color: var(--text-0); }
/* A bold rule closes the added fees and sets the computed subtotal apart. */
.fee-card .fee-row.is-last-item { border-bottom: 0; }
.fee-card .fee-row.is-sum { border-top: 2px solid var(--text-2); font-weight: 600; color: var(--text-0); }
.fee-card .fee-row.is-sum strong { font-weight: 600; }
.fee-card .fee-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 14px 14px; padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
  background: var(--tl-green-soft); color: var(--tl-green);
}
.fee-card .fee-total strong { font-size: 16px; }

/* Payment gateway tiles */
.gw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.gw-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 18px 14px; text-align: center;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gw-tile:hover { border-color: var(--accent-0); }
.gw-tile.selected, .gw-tile:has(input:checked) {
  border-color: var(--accent-0); background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.gw-tile input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.gw-tile .gw-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.09); color: var(--accent-0);
}
.gw-tile .gw-name { font-size: 13px; font-weight: 600; color: var(--text-0); }
.gw-tile .gw-sub { font-size: 11.5px; color: var(--text-2); }

/* In-page payment card: the pay form turns into the receipt where it stands
   (portal/payments/show + _paid). The card eases between the two heights;
   receipt rows reveal in sequence, then the actions follow. */
.pay-card { transition: height .42s cubic-bezier(.2, .8, .2, 1); }
.pay-stage { transition: opacity .2s ease, transform .2s ease; }
.pay-stage.is-leaving { opacity: 0; transform: translateY(-4px); }
.pay-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--stroke);
  background: var(--panel-2); font-size: 12px; color: var(--text-2);
}
.pay-crumb strong { color: var(--text-0); font-weight: 600; }
.pay-section-head { border-top: 1px solid var(--stroke); }
.pay-btn { display: inline-flex; align-items: center; gap: 8px; }
.pay-btn .pay-spin {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: fr-spin .7s linear infinite;
}
.pay-btn.is-busy { cursor: progress; }
.pay-btn.is-busy .pay-spin { display: inline-block; }
.pay-error-hint[hidden] { display: none; }
.pay-card.is-shake, .deposit-stage.is-shake { animation: pay-shake .36s ease; }
@keyframes pay-shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.pay-paid-title { display: flex; align-items: center; gap: 12px; padding: 20px 20px 6px; }
.pay-paid-title strong { display: block; font-size: 17px; font-weight: 700; color: var(--text-0); outline: none; }
.pay-paid-title .muted { font-size: 12.5px; }
.pay-tick {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tl-green-soft); color: var(--good);
  animation: pay-pop .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
.pay-rows {
  margin: 12px 20px 0; padding: 4px 14px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2);
}
.pay-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--stroke);
  animation: pay-row-in .32s ease both; animation-delay: calc(.12s + var(--i, 0) * .09s);
}
.pay-row:last-child { border-bottom: 0; }
.pay-row dt { color: var(--text-2); }
.pay-row dd { margin: 0; color: var(--text-0); text-align: right; font-variant-numeric: tabular-nums; }
.pay-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 16px 20px 20px;
  animation: pay-row-in .32s ease both; animation-delay: .78s;
}
.pay-actions .btn3d { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pay-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
/* Wizard Deposit tab: the same flow inside the consent pane. */
.deposit-stage { transition: height .42s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, transform .2s ease; }
.deposit-stage.is-leaving { opacity: 0; transform: translateY(-4px); }
.gw-grid-compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.gw-grid-compact .gw-tile { padding: 12px 10px; gap: 6px; }
.gw-grid-compact .gw-icon { width: 32px; height: 32px; }
.pay-receipt { border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
@keyframes pay-row-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pay-pop { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .pay-card, .pay-stage { transition: none; }
  .deposit-stage { transition: none; }
  .pay-card.is-shake, .deposit-stage.is-shake, .pay-tick, .pay-row, .pay-actions { animation: none; }
}

/* Mockup green range slider — --fill (0–100%) set inline by JS */
.range-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 99px;
  background: linear-gradient(to right, var(--accent-0) var(--fill, 0%), #e5e7eb var(--fill, 0%));
  outline: none; cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent-0);
  box-shadow: var(--shadow-1); cursor: pointer;
}
.range-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent-0); cursor: pointer;
}

/* Apply step-2 summary panel */
.summary-panel {
  border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--panel-2);
}
.summary-panel .sp-head {
  padding: 12px 18px; border-bottom: 1px solid var(--stroke);
  font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-1);
}
.summary-panel .sp-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--stroke-hairline); font-size: 13px;
}
.summary-panel .sp-row:last-child { border-bottom: 0; }
.summary-panel .sp-row .k { color: var(--text-2); }
.summary-panel .sp-row .v { font-weight: 600; color: var(--text-0); text-align: right; }

/* AI help widget — soft blue card pinned to the foot of the portal sidebar */
.ai-widget {
  margin: 12px 6px 0; padding: 14px;
  border-radius: var(--r-lg);
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.16);
  color: var(--text-1);
}
.ai-widget .ai-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-0); }
.ai-widget .ai-text { font-size: 11.5px; color: var(--text-2); margin-top: 5px; line-height: 1.5; }
.ai-widget a.ai-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--accent-0);
}
.ai-widget a.ai-link:hover { color: var(--accent-0-hi); }

/* KPI icon tile — tinted rounded square (dashboard mockup) */
.kpi-icon-tile {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
}
.kpi-icon-tile.tone-green { background: var(--tl-green-soft); color: var(--tl-green); }
.kpi-icon-tile.tone-amber { background: var(--tl-amber-soft); color: var(--tl-amber); }
.kpi-icon-tile.tone-blue { background: rgba(37, 99, 235, 0.09); color: var(--accent-1); }
.kpi-icon-tile.tone-red { background: var(--tl-red-soft); color: var(--tl-red); }

/* Module placeholder page — themed coming-soon card */
.placeholder-page { text-align: center; padding: 56px 24px; }
.placeholder-page .ph-icon {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--tl-green-soft); color: var(--accent-0);
}
.placeholder-page h2 { margin: 18px 0 6px; font-size: 18px; font-weight: 600; color: var(--text-0); }
.placeholder-page p {
  margin: 0 auto; max-width: 430px;
  font-size: 13.5px; color: var(--text-2); line-height: 1.6;
}

/* Dashboard image10 tweaks — tinted pipeline icons, donut % labels */
/* Pipeline stage tones per the mockup: green / amber / slate circles + counts */
.pipeline-step.tone-green .ps-circle { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.pipeline-step.tone-green .ps-count { color: var(--tl-green); }
.pipeline-step.tone-amber .ps-circle { background: var(--tl-amber-soft); border-color: rgba(217, 119, 6, 0.35); color: var(--tl-amber); }
.pipeline-step.tone-amber .ps-count { color: var(--tl-amber); }
.pipeline-step.tone-slate .ps-circle { background: rgba(100, 116, 139, 0.12); border-color: rgba(100, 116, 139, 0.35); color: #64748b; }
.pipeline-step.tone-slate .ps-count { color: #64748b; }
.ps-label { margin-top: 7px; }
.ps-count { margin-top: 2px; }
.pf-donut-pct {
  fill: #ffffff; font-size: 7px; font-weight: 700; pointer-events: none;
  paint-order: stroke; stroke: rgba(17, 24, 39, 0.30); stroke-width: 2px; stroke-linejoin: round;
}

/* Receipt printing — chrome and actions stay on screen only */
@media print {
  .sidebar, .topbar, .quickbar, .launcher, .nav-toggle, .lang-switch, .card-foot { display: none !important; }
  .hero, .card3d { box-shadow: none !important; }
}

/* -- Verification + eKYC & Appointment tabs ------------------------- */
[hidden] { display: none !important; }
.wizard-pill.working { color: var(--accent-1); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.35); }
.verify-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.ekyc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .verify-layout, .ekyc-layout { grid-template-columns: 1fr; } }
.verify-row { border: 1px solid var(--stroke); border-radius: 10px; margin-bottom: 12px; background: #fff; }
.verify-row summary, .verify-row .vr-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.verify-row summary::-webkit-details-marker { display: none; }
.verify-row .vr-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--tl-green-soft); color: var(--tl-green); border: 1px solid var(--tl-green-bd); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.vr-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vr-meta strong { font-size: 13px; color: var(--text-0); }
.vr-meta span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.vr-chev { color: var(--text-2); font-size: 16px; transition: transform .15s ease; }
.verify-row[open] .vr-chev { transform: rotate(90deg); }
.vr-body { border-top: 1px solid var(--stroke); padding: 10px 14px; display: grid; gap: 6px; }
.vr-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.vr-line span { color: var(--text-2); }
.vr-line strong { color: var(--text-0); text-align: right; }
.table-wrap { overflow-x: auto; padding: 0 14px; }
.party-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.party-table th { text-align: left; color: var(--text-2); font-weight: 600; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; padding: 8px; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
.party-table td { padding: 9px 8px; border-bottom: 1px solid var(--stroke); color: var(--text-1); vertical-align: middle; }
.party-table tbody tr:last-child td { border-bottom: 0; }
.party-table .input3d { padding: 7px 10px; font-size: 12.5px; min-width: 160px; }
.ic-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--tl-green-bd); background: var(--tl-green-soft); color: var(--tl-green); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ic-btn.done { background: var(--accent-0); border-color: var(--accent-0); color: #fff; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle; }
.verify-rail { border: 1px solid var(--stroke); border-radius: 10px; padding: 14px; background: #fff; }
.verify-rail > strong { font-size: 13px; color: var(--text-0); display: block; margin-bottom: 12px; }
.rail-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rail-steps li { display: flex; gap: 10px; align-items: flex-start; }
.rail-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--stroke); color: var(--text-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 22px; margin-top: 1px; font-style: normal; }
.rail-dot .dot-ok { display: none; font-style: normal; }
.rail-dot .dot-no { font-style: normal; }
.rail-steps li.done .rail-dot { background: var(--accent-0); border-color: var(--accent-0); color: #fff; }
.rail-steps li.done .dot-no { display: none; }
.rail-steps li.done .dot-ok { display: inline; }
.rail-steps li.current .rail-dot { border-color: var(--accent-0); color: var(--accent-0); }
.rail-steps li > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rail-steps li > div strong { font-size: 12.5px; color: var(--text-0); }
.rail-steps li > div span { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.rail-note { margin-top: 14px; }
.note-amber, .note-blue, .note-green { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; margin-top: 12px; }
.note-amber { background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd); color: var(--tl-amber); font-weight: 500; }
.note-blue { background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.25); color: var(--text-1); }
.note-green { background: var(--tl-green-soft); border: 1px solid var(--tl-green-bd); color: var(--tl-green); font-weight: 500; }
.ekyc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ekyc-no { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-0); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; }
.ekyc-head strong { font-size: 13px; color: var(--text-0); }
.ekyc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
@media (max-width: 700px) { .ekyc-stats { grid-template-columns: repeat(2, 1fr); } }
.stat-box { border: 1px solid var(--stroke); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.stat-box span { font-size: 11px; color: var(--text-2); }
.stat-box strong { font-size: 18px; color: var(--text-0); }
.stat-box.green strong { color: var(--tl-green); }
.stat-box.blue strong { color: var(--accent-1); }
.stat-box.amber strong { color: var(--tl-amber); }
.appt-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--stroke); }
.appt-icon { width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; color: #64748b; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.appt-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.appt-item strong { font-size: 12.5px; color: var(--text-0); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appt-item > div > span { font-size: 12px; color: var(--text-2); line-height: 1.5; }

/* ---------- Standalone director eKYC mobile shell ----------
   Reached only by scanning a QR-coded single-use token link. A director is
   not a portal user, so this is a self-contained mobile page with no sidebar,
   quick bar or authenticated chrome (layouts/ekyc.blade.php). Light theme,
   one card, thumb-reach submit; the subtle top tint echoes the portal apply
   wizard, not the staff console. */
.ek-body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; justify-content: center;
  color: var(--text-0);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(37, 99, 235, 0.10), transparent 62%),
    var(--bg-0);
}
.ek-shell {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}
.ek-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ek-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ek-brand-mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-md);
  background: var(--accent-0); color: #fff;
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
.ek-brand strong { display: block; font-size: 14px; font-weight: 700; color: var(--text-0); letter-spacing: 0.2px; }
.ek-brand em {
  display: block; font-style: normal; margin-top: 1px;
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-2);
}
.ek-main { flex: 1; display: flex; flex-direction: column; }
.ek-foot { margin-top: 18px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--text-2); }
.ek-card {
  padding: 22px 20px; background: var(--panel);
  border: 1px solid var(--stroke); border-radius: 16px; box-shadow: var(--shadow-2);
}
.ek-hero { text-align: center; margin-bottom: 18px; }
.ek-hero-icon {
  width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(37, 99, 235, 0.09); border: 1px solid rgba(37, 99, 235, 0.28); color: var(--accent-1);
}
.ek-hero-icon.ok { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.ek-hero-icon.bad { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.ek-hero h1 { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text-0); }
.ek-hero p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.ek-facts {
  margin: 0 0 18px; padding: 4px 0;
  border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
}
.ek-facts > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 2px; border-bottom: 1px solid var(--stroke-hairline);
}
.ek-facts > div:last-child { border-bottom: 0; }
.ek-facts dt {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-2);
}
.ek-facts dd { margin: 0; text-align: right; font-size: 13px; font-weight: 500; color: var(--text-0); word-break: break-word; }
.ek-form { display: flex; flex-direction: column; }
.ek-declare {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; padding: 12px 14px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2);
}
.ek-declare input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent-0); }
.ek-declare label { font-size: 12.5px; line-height: 1.55; color: var(--text-1); }
.ek-submit { width: 100%; justify-content: center; padding: 12px 18px; font-size: 14px; }
.ek-privacy { margin: 14px 0 0; text-align: center; font-size: 11px; line-height: 1.6; }

/* Staff document-request builder (applications/show): rows are inline-flex and
   wrap on narrow screens; min-width:0 stops the flexed inputs overflowing. */
.doc-req-rows { display: flex; flex-direction: column; gap: 8px; }
.doc-req-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-req-row .input3d { min-width: 0; }

/* ---------- Intake wizard: tab states, sub-steps & journey components ----------
   Extends the portal intake wizard (05092026 Updated PMB) with state-coloured
   tabs/sub-steps, the locked fieldset, director eKYC cards, the QR hand-off,
   the visit gate and the requested-documents checklist. */

/* Three-column field grid (postcode / city / state) */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Wizard tab states — the JS toggles is-todo / is-current / is-done /
   is-locked + .active. Header stage language: incomplete = DEEP BLUE
   (open stage solid deep blue), completed = GREEN, gate-locked = GREY.
   The inner sub-step chips and the pane pill keep the amber "In Progress"
   language. Scoped under .wizard-tabs so these outrank the resting
   is-locked rule declared further down. */
/* Top stepper (Information Submission / Consent & Deposit / eKYC) */
.wizard-tabs {
  background: #eaf0fb;
  border: 1px solid #dbe4f5;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.wizard-arrow {
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  margin: 0 2px;
}
.wizard-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 8px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  color: #374151;
  transition: all 0.15s ease;
}
.wizard-tab:hover {
  background: rgba(255, 255, 255, 0.5);
}
.wizard-tab-no {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: #6b7280;
  flex: none;
  transition: all 0.15s ease;
}
.wizard-tab-label {
  white-space: nowrap;
}

/* 1. Top stepper states:
   - Current, not done: white raised tab, 2px #1E40AF border, navy circle and text */
.wizard-tabs .wizard-tab.active:not(.is-done),
.wizard-tabs .wizard-tab.is-current:not(.is-done) {
  background: #ffffff;
  border: 2px solid #1e40af;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.10);
  padding: 5px 15px 5px 7px;
  color: #1e40af;
}
.wizard-tabs .wizard-tab.active:not(.is-done):hover,
.wizard-tabs .wizard-tab.is-current:not(.is-done):hover {
  background: #ffffff;
  border-color: #1e40af;
  color: #1e40af;
}
.wizard-tabs .wizard-tab.active:not(.is-done) .wizard-tab-no,
.wizard-tabs .wizard-tab.is-current:not(.is-done) .wizard-tab-no {
  background: #1e40af;
  color: #ffffff;
}

/* - Current, done: white raised tab, 2px #16A34A border, green ✓ */
.wizard-tabs .wizard-tab.active.is-done,
.wizard-tabs .wizard-tab.is-current.is-done {
  background: #ffffff;
  border: 2px solid #16a34a;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.10);
  padding: 5px 15px 5px 7px;
  color: #15803d;
}
.wizard-tabs .wizard-tab.active.is-done:hover,
.wizard-tabs .wizard-tab.is-current.is-done:hover {
  background: #ffffff;
  border-color: #16a34a;
  color: #15803d;
}
.wizard-tabs .wizard-tab.active.is-done .wizard-tab-no,
.wizard-tabs .wizard-tab.is-current.is-done .wizard-tab-no {
  background: #16a34a;
  color: #ffffff;
}

/* - Done, not current: no tab, green ✓ and green text */
.wizard-tabs .wizard-tab.is-done:not(.active):not(.is-current) {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: #15803d;
}
.wizard-tabs .wizard-tab.is-done:not(.active):not(.is-current) .wizard-tab-no {
  background: #16a34a;
  color: #ffffff;
}

/* - Not started, not current: no tab, grey number, dark text */
.wizard-tabs .wizard-tab.is-todo:not(.active):not(.is-current):not(.is-done) {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: #374151;
}
.wizard-tabs .wizard-tab.is-todo:not(.active):not(.is-current):not(.is-done) .wizard-tab-no {
  background: transparent;
  color: #6b7280;
}

/* - Locked */
.wizard-tabs .wizard-tab.is-locked {
  color: #9ca3af;
  cursor: not-allowed;
  background: transparent;
  border: 1px solid transparent;
}
.wizard-tabs .wizard-tab.is-locked .wizard-tab-no {
  background: transparent;
  color: #9ca3af;
}

.wizard-lockset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wizard-lockset:disabled { opacity: 1; }

/* 2. Section cards (Company Info / Contract Awarder Info) */
.info-subtabs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.info-subtabs[hidden] { display: none; }
.info-subtab {
  flex: 1 1 300px;
  max-width: 420px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  font: inherit;
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
}
.info-subtab-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  transition: all 0.15s ease;
}
.info-subtab-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-width: 0;
}
.info-subtab-title {
  font-size: 15.5px;
  font-weight: 700;
}
.info-subtab-sub {
  font-size: 12.5px;
}
.info-subtab-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  display: none;
}

/* - Current, not done: solid blue */
.info-subtab.active:not(.is-done) {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border: 1px solid #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
  color: #ffffff;
}
.info-subtab.active:not(.is-done) .info-subtab-ico {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.info-subtab.active:not(.is-done) .info-subtab-title {
  color: #ffffff;
}
.info-subtab.active:not(.is-done) .info-subtab-sub {
  color: rgba(255, 255, 255, 0.86);
}
.info-subtab.active:not(.is-done) .info-subtab-badge {
  display: none !important;
}

/* - Current, done: solid green, white “✓ Complete” badge */
.info-subtab.active.is-done {
  background: #16a34a;
  border: 1px solid #16a34a;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.25);
  color: #ffffff;
}
.info-subtab.active.is-done .info-subtab-ico {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.info-subtab.active.is-done .info-subtab-title {
  color: #ffffff;
}
.info-subtab.active.is-done .info-subtab-sub {
  color: rgba(255, 255, 255, 0.86);
}
.info-subtab.active.is-done .info-subtab-badge {
  display: inline-flex;
  color: #15803d;
  background: #ffffff;
}

/* - Done, not current: pale green, green “✓ Complete” badge */
.info-subtab.is-done:not(.active) {
  background: rgba(22, 163, 74, 0.11);
  border: 1px solid rgba(22, 163, 74, 0.40);
  box-shadow: none;
}
.info-subtab.is-done:not(.active) .info-subtab-ico {
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
}
.info-subtab.is-done:not(.active) .info-subtab-title,
.info-subtab.is-done:not(.active) .info-subtab-sub {
  color: #15803d;
}
.info-subtab.is-done:not(.active) .info-subtab-badge {
  display: inline-flex;
  color: #ffffff;
  background: #16a34a;
}

/* - Not started or partial, not current: pale blue. If partial, add an amber “N left” badge. */
.info-subtab:not(.active):not(.is-done) {
  background: #e4e9f7;
  border: 1px solid #a5b4e6;
  box-shadow: none;
}
.info-subtab:not(.active):not(.is-done) .info-subtab-ico {
  background: #d4dcf3;
  color: #1e40af;
}
.info-subtab:not(.active):not(.is-done) .info-subtab-title {
  color: #1e40af;
}
.info-subtab:not(.active):not(.is-done) .info-subtab-sub {
  color: #3651c4;
}
.info-subtab:not(.active):not(.is-done) .info-subtab-badge.is-partial {
  display: inline-flex;
  color: #d97706;
  background: #ffffff;
  border: 1px solid rgba(217, 119, 6, 0.40);
  padding: 2px 8px;
}
.info-subtab:not(.active):not(.is-done) .info-subtab-badge:not(.is-partial) {
  display: none;
}

/* 3. Sub-step chips and the Consent / Deposit tabs */
.substeps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 20px 0;
}
.consent-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 20px 0;
}
.substep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d3dbe6;
  background: #ffffff;
  color: #4b5563;
  transition: all 0.15s ease;
}
.substep-no {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: #f1f5f9;
  border: 1px solid #d3dbe6;
  color: #4b5563;
  flex: none;
  transition: all 0.15s ease;
}
.substep-label {
  white-space: nowrap;
}
.substep-count {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  display: none;
}

/* - Current, not done: solid blue, white circle with blue number */
.substeps .substep.active:not(.is-partial):not(.is-done),
.substeps .substep.is-current:not(.is-partial):not(.is-done),
.consent-tabs .substep.active:not(.is-partial):not(.is-done),
.consent-tabs .substep.is-current:not(.is-partial):not(.is-done) {
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}
.substeps .substep.active:not(.is-partial):not(.is-done) .substep-no,
.substeps .substep.is-current:not(.is-partial):not(.is-done) .substep-no,
.consent-tabs .substep.active:not(.is-partial):not(.is-done) .substep-no,
.consent-tabs .substep.is-current:not(.is-partial):not(.is-done) .substep-no {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #1d4ed8;
}

/* - Current, partial: same, plus a 3px amber ring (rgba(217,119,6,0.45)). No count. */
.substeps .substep.active.is-partial:not(.is-done),
.substeps .substep.is-current.is-partial:not(.is-done),
.consent-tabs .substep.active.is-partial:not(.is-done),
.consent-tabs .substep.is-current.is-partial:not(.is-done) {
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.45);
}
.substeps .substep.active.is-partial:not(.is-done) .substep-no,
.substeps .substep.is-current.is-partial:not(.is-done) .substep-no {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #1d4ed8;
}
.consent-tabs .substep.active.is-partial:not(.is-done) .substep-no,
.consent-tabs .substep.is-current.is-partial:not(.is-done) .substep-no {
  background: #fef3c7;
  border: 1px solid rgba(217, 119, 6, 0.40);
  color: #b45309;
}
.substep.active .substep-count,
.substep.is-current .substep-count {
  display: none !important;
}

/* - Current, done: solid green, white circle with green ✓ */
.substeps .substep.active.is-done,
.substeps .substep.is-current.is-done,
.consent-tabs .substep.active.is-done,
.consent-tabs .substep.is-current.is-done {
  background: #16a34a;
  border: 1px solid #16a34a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.substeps .substep.active.is-done .substep-no,
.substeps .substep.is-current.is-done .substep-no,
.consent-tabs .substep.active.is-done .substep-no,
.consent-tabs .substep.is-current.is-done .substep-no {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #16a34a;
}

/* - Done, not current: pale green, solid green ✓ circle */
.substeps .substep.is-done:not(.active):not(.is-current),
.consent-tabs .substep.is-done:not(.active):not(.is-current) {
  background: rgba(22, 163, 74, 0.11);
  border: 1px solid rgba(22, 163, 74, 0.40);
  color: #15803d;
  box-shadow: none;
}
.substeps .substep.is-done:not(.active):not(.is-current) .substep-no,
.consent-tabs .substep.is-done:not(.active):not(.is-current) .substep-no {
  background: #16a34a;
  border: 1px solid #16a34a;
  color: #ffffff;
}

/* - Partial, not current: pale amber, with an “N left” count */
.substeps .substep.is-partial:not(.active):not(.is-current),
.consent-tabs .substep.is-partial:not(.active):not(.is-current) {
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.40);
  color: #b45309;
  box-shadow: none;
}
.substeps .substep.is-partial:not(.active):not(.is-current) .substep-no,
.consent-tabs .substep.is-partial:not(.active):not(.is-current) .substep-no {
  background: #ffffff;
  border: 1px solid rgba(217, 119, 6, 0.40);
  color: #b45309;
}
.substeps .substep.is-partial:not(.active):not(.is-current) .substep-count,
.consent-tabs .substep.is-partial:not(.active):not(.is-current) .substep-count {
  display: inline-block;
  color: #b45309;
  background: #ffffff;
  border: 1px solid rgba(217, 119, 6, 0.40);
}

/* - Not started, not current: white, grey border, grey text, no count */
.substeps .substep.is-todo:not(.active):not(.is-current):not(.is-partial):not(.is-done),
.consent-tabs .substep.is-todo:not(.active):not(.is-current):not(.is-partial):not(.is-done) {
  background: #ffffff;
  border: 1px solid #d3dbe6;
  color: #4b5563;
  box-shadow: none;
}
.substeps .substep.is-todo:not(.active):not(.is-current):not(.is-partial):not(.is-done) .substep-no,
.consent-tabs .substep.is-todo:not(.active):not(.is-current):not(.is-partial):not(.is-done) .substep-no {
  background: #f1f5f9;
  border: 1px solid #d3dbe6;
  color: #4b5563;
}
.substep.is-locked { color: #9ca3af; background: var(--panel-2); }
.substep-pane[hidden] { display: none; }
.asubstep-pane[hidden] { display: none; }
/* Pane heading: bold title plus a one-line muted description underneath. */
.pane-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pane-head-sub { font-size: 12px; font-weight: 500; color: var(--text-2); }

/* Small uppercase caption introducing a sub-group of fields */
.section-cap {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-2); margin: 4px 0 12px;
}

/* 5. Fields: keep the green border once a field has a value, grey border when empty */
.input3d.complete,
.select3d.complete,
.field input.complete,
.field select.complete,
.field textarea.complete {
  border-color: #16a34a !important;
}
.input3d:not(.complete):not(:focus):not(.invalid),
.select3d:not(.complete):not(:focus):not(.invalid),
.field input:not(.complete):not(:focus):not(.invalid):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field select:not(.complete):not(:focus):not(.invalid) {
  border-color: #d3dbe6;
}

/* Optional block (collateral) — a <details> that never blocks the journey */
.opt-block { border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2); margin-top: 16px; }
.opt-block > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  list-style: none; font-size: 13px; color: var(--text-1);
}
.opt-block > summary::-webkit-details-marker { display: none; }
.opt-block > summary strong { font-weight: 600; color: var(--text-0); }
.opt-block > summary .badge3d { margin-left: auto; }
.opt-block[open] > summary { border-bottom: 1px solid var(--stroke); }
.opt-body { padding: 14px; }

/* Deposit payment methods — static chips listing the accepted gateways */
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pay-chip {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--panel); color: var(--text-1);
  font-size: 11.5px; font-weight: 600;
}

/* SSM document upload block in Company Info */
.ssm-upload-block {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px dashed var(--stroke-strong, #cbd5e1);
  border-radius: var(--r-md);
  background: var(--panel-2);
}

/* Grey information callouts (neutral, non-semantic) */
.note-grey {
  display: flex; gap: 10px; align-items: flex-start; border-radius: 10px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.55; margin-top: 12px;
  background: var(--surface); border: 1px solid var(--stroke); color: var(--text-1);
}
.notice-grey {
  display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-md);
  padding: 14px; background: var(--surface); border: 1px solid var(--stroke); color: var(--text-1);
}
.notice-grey strong { font-size: 13px; color: var(--text-0); }
.notice-grey span { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

/* A field failing client-side validation reads red (bank a/c, director email) */
.input3d.invalid, .select3d.invalid, .dc-email.invalid,
.field input.invalid:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  border-color: var(--tl-red); background: var(--tl-red-soft);
}
.input3d.invalid:focus, .dc-email.invalid:focus { border-color: var(--tl-red); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14); }

/* eKYC video / tutorial guide — in-page interactive player */
.ekyc-video-section {
  container: ekyc-video / inline-size;
  margin-top: 14px;
  margin-bottom: 24px;
}
.ekyc-video-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ekyc-video-header .evh-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--tl-green, #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.ekyc-video-header .evh-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ekyc-video-header .evh-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0, #1e293b);
}
.ekyc-video-header .evh-sub {
  font-size: 12px;
  color: var(--text-2, #64748b);
}
/* Split: video left (a bit over half), plain-language steps right. */
.ekyc-video-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.ekyc-video-steps {
  min-width: 0;
}
.ekyc-video-steps .evs-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0, #1e293b);
  margin-bottom: 10px;
}
.ekyc-video-steps .evs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ekyc-video-steps .evs-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ekyc-video-steps .evs-num {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--tl-green, #10B981);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ekyc-video-steps .evs-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ekyc-video-steps .evs-text strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-0, #1e293b);
}
.ekyc-video-steps .evs-text span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2, #64748b);
}
/* Stack once the step column itself gets narrow (side panel open, phones). */
@container ekyc-video (max-width: 600px) {
  .ekyc-video-body { grid-template-columns: minmax(0, 1fr); }
}
.ekyc-video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--stroke, #e2e8f0);
}
.ekyc-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: block;
}
.ekyc-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.ekyc-video-cover:hover .ekyc-video-thumb {
  transform: scale(1.02);
}
.ekyc-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.35) 100%);
  pointer-events: none;
}
.ekyc-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.ekyc-video-cover:hover .ekyc-video-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(37, 99, 235, 0.88);
  border-color: rgba(255, 255, 255, 0.6);
}
.ekyc-video-duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 2;
}
.ekyc-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ekyc-video-player iframe,
.ekyc-video-player video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Legacy .video-guide fallback */
.video-guide {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; margin-bottom: 24px; padding: 12px 16px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel);
  transition: border-color .12s ease, box-shadow .12s ease;
  text-decoration: none;
}
.video-guide:hover { border-color: var(--accent-0); box-shadow: var(--shadow-1); }
.vg-play {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tl-green-soft); border: 1px solid var(--tl-green-bd); color: var(--tl-green);
}
.vg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vg-text strong { font-size: 13px; color: var(--text-0); }
.vg-text span { font-size: 11.5px; color: var(--text-2); }
.vg-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
.vg-youtube {
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, filter .15s ease;
}
.video-guide:hover .vg-youtube {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 6px rgba(255, 0, 0, 0.35));
}
.vg-external { flex: 0 0 auto; color: var(--text-2); display: inline-flex; align-items: center; }

/* Director eKYC cards — one per director/shareholder, stacked as a listing */
.director-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.director-card {
  overflow: hidden; border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-1);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.director-card.is-done { border-color: var(--tl-green-bd); }
.dc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel-2); border-bottom: 1px solid var(--stroke); }
.dc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dc-meta strong { font-size: 13px; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-meta span { font-size: 11px; color: var(--text-2); }
.dc-status {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--tl-amber-bd); background: var(--tl-amber-soft); color: var(--tl-amber);
}
.dc-status svg { opacity: 0; }
.dc-status.ok { border-color: var(--tl-green-bd); background: var(--tl-green-soft); color: var(--tl-green); }
.dc-status.ok svg { opacity: 1; }
.dc-status-text { white-space: nowrap; }
.dc-body { display: flex; flex-direction: column; padding: 14px; }
.dc-body .field:last-child { margin-bottom: 0; }
.dc-email-err { margin-top: 4px; }
.dc-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--stroke); background: var(--panel-2);
}
.dc-foot .muted { font-size: 11px; }

/* QR hand-off cards — inline so the link survives a missing email. The card
   sits in the narrow sidebar, so the director's details take the full width
   and the QR code and link share the row below. */
.qr-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px;
  margin-top: 10px; padding: 12px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel);
}
.qr-meta { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qr-meta strong { font-size: 12.5px; line-height: 1.35; color: var(--text-0); }
.qr-meta span { font-size: 11px; color: var(--text-2); overflow-wrap: anywhere; }
.qr-img { width: 76px; height: 76px; border-radius: 8px; border: 1px solid var(--stroke); background: #fff; }
.qr-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.qr-link svg { flex: 0 0 12px; }
.qr-meta .wizard-pill { align-self: flex-start; margin-top: 4px; white-space: nowrap; }
/* Without a QR image the link starts the row. */
.qr-card > .qr-link:nth-child(2) { grid-column: 1 / -1; }
.qr-card.is-verified { border-color: var(--tl-green-bd); }

/* Visit gate — the two conditions that must pass before scheduling opens */
.gate-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; }
.gate-dot {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2);
  font-size: 12.5px; color: var(--text-2);
}
.gd-mark {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--stroke-strong); background: #fff; color: #fff; font-size: 11px; font-weight: 700;
}
.gate-dot.ok { border-color: var(--tl-green-bd); background: var(--tl-green-soft); color: var(--tl-green); }
.gate-dot.ok .gd-mark { border-color: var(--tl-green); background: var(--tl-green); }

/* Visit tab: the date form beside the office notice */
.visit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.visit-note { margin: 0; }
.vn-office { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-1); }

/* Appointments step — First Appointment and Site Visit sub-tabs. The form
   sits beside the "Your appointments" rail; requested/confirmed slots read
   back in a two-column details grid under the form. */
.wizard-tab-lock { margin-left: 2px; opacity: .7; }
.appt-intro { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.appt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appt-office { margin-top: 12px; }
.appt-actions { display: flex; justify-content: flex-start; margin-top: 16px; }
.appt-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.appt-choice-row .appt-choice {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--stroke); border-radius: 10px;
  background: var(--panel); font-size: 13px; font-weight: 500; color: var(--text-1);
}
.appt-choice:has(input:checked) { border-color: var(--tl-blue); background: var(--tl-blue-soft); color: var(--tl-blue); }
.appt-choice input { margin: 0; accent-color: var(--tl-blue); }
.appt-office-line { display: block; margin-top: 6px; font-size: 12px; }
.appt-office-line[hidden], [data-site-address][hidden] { display: none; }
.appt-note-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.appt-go { background: var(--tl-green); border-color: var(--tl-green); color: #fff; }
.appt-go:hover { color: #fff; filter: brightness(.95); }
.appt-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.appt-details > div { padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--surface); min-width: 0; }
.appt-details dt { font-size: 11px; color: var(--text-2); }
.appt-details dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--text-0); overflow-wrap: anywhere; }
.appt-lock {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px dashed var(--stroke-strong); border-radius: var(--r-md); background: var(--panel-2); color: var(--text-2);
}
.appt-lock > div { display: flex; flex-direction: column; gap: 3px; }
.appt-lock strong { font-size: 13px; color: var(--text-0); }
.appt-lock span { font-size: 12.5px; line-height: 1.5; }
.appt-rail { margin: 0; }
.appt-rail-title { font-size: 11px !important; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--tl-blue) !important; }
.appt-rail-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.appt-rail-list li { display: flex; align-items: flex-start; gap: 10px; }
.appt-rail-no {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--tl-blue-soft); color: var(--tl-blue) !important; font-size: 11.5px !important; font-weight: 700;
}
.appt-rail-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.appt-rail-text strong { font-size: 12.5px; }
.appt-rail-text span { font-size: 11.5px !important; }
.appt-rail-list .badge3d { flex: 0 0 auto; font-size: 11px; padding: 2px 9px; }
@media (max-width: 720px) {
  #appt-subtabs { flex-wrap: nowrap; gap: 8px; }
  #appt-subtabs .info-subtab { min-width: 0; flex: 1 1 0; padding: 10px 12px; gap: 8px; }
  #appt-subtabs .info-subtab-sub { display: none; }
  #appt-subtabs .info-subtab-ico { width: 28px; height: 28px; }
  .appt-fields, .appt-details { grid-template-columns: 1fr; }
  .appt-actions .btn3d { width: 100%; justify-content: center; }
}

/* Requested financial documents checklist */
.doc-group { margin-top: 16px; }
.doc-group:first-child { margin-top: 0; }
.doc-item {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 12px 14px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel);
}
.doc-item.is-uploaded { border-color: var(--tl-green-bd); background: var(--tl-green-soft); }
.doc-check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--stroke-strong); background: #fff; color: #fff;
}
.doc-item.is-uploaded .doc-check { border-color: var(--tl-green); background: var(--tl-green); }
.doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-meta strong { font-size: 13px; color: var(--text-0); }
.doc-meta .muted { font-size: 11.5px; }
.doc-done-at { font-size: 11px; font-weight: 600; color: var(--tl-green); }
.doc-upload { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.doc-file {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--stroke-strong); background: var(--panel); color: var(--text-1);
  font-size: 12px; font-weight: 600;
}
.doc-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---------- Styled file picker -------------------------------------------
   Replaces the native "Choose File" control everywhere. The real input is
   visually hidden; the label shows a designed button plus the chosen name,
   turning green once a file is selected. */
.file3d {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 8px 10px; border: 1px dashed var(--stroke-strong); border-radius: var(--r-md);
  background: var(--panel-2); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.file3d:hover { border-color: var(--accent-0); background: var(--tl-green-soft); }
.file3d input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file3d-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--stroke-strong); background: var(--panel); color: var(--text-1);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.file3d-btn svg { width: 14px; height: 14px; flex: none; }
.file3d-name {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file3d.has-file { border-style: solid; border-color: var(--tl-green-bd); background: var(--tl-green-soft); }
.file3d.has-file .file3d-btn { border-color: var(--tl-green-bd); color: var(--good); }
.file3d.has-file .file3d-name { color: var(--good); font-weight: 600; }
.file3d:has(input:disabled) { opacity: .55; pointer-events: none; }
.file3d:has(input.invalid) { border-color: var(--tl-red); background: var(--tl-red-soft); }

/* Safety net: any native file input left un-wrapped still gets a designed
   button instead of the browser default grey control. */
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--stroke-strong); background: var(--panel); color: var(--text-1);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent-0); color: var(--accent-0); }

@media (max-width: 960px) { .visit-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .grid3 { grid-template-columns: 1fr; }
  .director-cards { grid-template-columns: 1fr; }
  .doc-item { flex-wrap: wrap; }
  .doc-upload { width: 100%; justify-content: flex-end; }
}

/* ---------- Portal apply wizard — immersive step wizard ----------
   Mockup-style one-question-per-screen flow for the customer portal,
   presented strictly with design-system tokens (P-UI01): a flat recessed
   stage (--bg-2) carrying a hairline-bordered --panel card at --shadow-1,
   the accent-blue progress meter, option cards, amount/tenure sliders and
   a .btn3d-primary-style full-width NEXT action. No gradients, glows or
   frosted glass (§1.4); traffic-light green stays reserved for financial
   status (§2), so completion/estimate chrome uses the accent, and only the
   validation message uses --tl-red. Web view: centred floating card.
   Mobile view: full-bleed stage behind the floating quick bar with an
   edge-to-edge card and only the current step label shown. */
.qz-stage {
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: 40px 24px 44px;
  display: flex; justify-content: center;
}
.qz-form { display: flex; width: 100%; justify-content: center; position: relative; }
.qz-card {
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 24px 22px;
}
.qz-top { display: flex; align-items: center; min-height: 34px; }
.qz-iconbtn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.qz-iconbtn:hover { background: var(--surface-strong); color: var(--text-0); }
.qz-top .qz-close { margin-left: auto; }
.qz-track { position: relative; height: 4px; border-radius: 99px; background: var(--stroke); margin: 4px 2px 16px; }
.qz-track-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; border-radius: 99px; background: var(--accent-0); transition: width .25s ease; }
.qz-track-dot {
  position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent-0); border: 2px solid var(--panel); box-shadow: var(--shadow-1);
  transform: translate(-50%, -50%); transition: left .25s ease;
}
.qz-steps { list-style: none; display: flex; justify-content: center; gap: 20px; margin: 0 0 4px; padding: 0; }
.qz-steps li {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2);
}
.qz-steps li .no {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal;
}
.qz-steps li.current { color: var(--accent-0-hi); }
.qz-steps li.done { color: var(--accent-0); }
.qz-body { flex: 1; display: flex; flex-direction: column; }
.qz-pane { display: flex; flex-direction: column; flex: 1; }
.qz-title { margin: 14px 0 6px; text-align: center; font-size: var(--fs-h1); line-height: 1.28; font-weight: 700; color: var(--text-0); }
.qz-sub { margin: 0 0 18px; text-align: center; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.qz-opts { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 6px; }
.qz-opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--stroke-strong); border-radius: var(--r-lg);
  background: var(--panel); cursor: pointer; text-align: left; font-family: var(--font);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.qz-opt:hover { border-color: var(--accent-0); box-shadow: var(--shadow-1); }
.qz-opt.selected { border-color: var(--accent-0); background: var(--grad-soft); }
.qz-opt-ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--r-lg);
  background: var(--surface-strong); color: var(--accent-0);
  display: inline-flex; align-items: center; justify-content: center;
}
.qz-opt.selected .qz-opt-ico { background: var(--panel); }
.qz-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-opt-name { font-size: 14px; font-weight: 600; color: var(--text-0); }
.qz-opt-meta { font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; }
.qz-opt-check {
  margin-left: auto; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--stroke-strong); background: var(--panel); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.qz-opt-check svg { opacity: 0; transition: opacity .15s ease; }
.qz-opt.selected .qz-opt-check { background: var(--accent-0); border-color: var(--accent-0); }
.qz-opt.selected .qz-opt-check svg { opacity: 1; }
.qz-amountbox {
  border: 1px solid var(--stroke-strong); border-radius: var(--r-lg);
  padding: 13px 14px; margin: 4px 0 20px; background: var(--panel);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qz-amountbox:focus-within { border-color: var(--accent-0); box-shadow: 0 0 0 3px var(--grad-soft); }
.qz-amountbox input {
  width: 100%; border: 0; outline: none; background: transparent;
  text-align: center; font-family: var(--font); font-size: var(--fs-h1); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent-0-hi);
}
.qz-range-labels { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Contract-value capture (05092026 Updated PMB): a labelled, smaller amount box
   above the main financing amount, with the 80%-cap hint between them. */
.qz-field-label {
  display: block; margin: 2px 0 6px; text-align: center;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2);
}
.qz-amountbox.qz-amountbox-sm { padding: 9px 14px; margin: 4px 0 8px; }
.qz-amountbox.qz-amountbox-sm input { font-size: 18px; }
.qz-hint { margin: 0 0 18px; text-align: center; font-size: var(--fs-label); line-height: 1.5; color: var(--text-2); }
.qz-steps li .lbl { white-space: nowrap; }
.qz-bigrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 22px; }
.qz-big-ico {
  width: 46px; height: 46px; border-radius: var(--r-lg); background: var(--surface-strong);
  color: var(--accent-0); display: inline-flex; align-items: center; justify-content: center;
}
.qz-big { font-size: var(--fs-kpi); font-weight: 700; color: var(--text-0); letter-spacing: .3px; display: inline-flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.qz-big-unit { font-size: 14px; font-weight: 600; color: var(--text-2); }
.qz-review { border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; margin: 2px 0 0; }
.qz-review .rr { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--stroke-hairline); font-size: var(--fs-body); }
.qz-review .rr:last-child { border-bottom: 0; }
.qz-review .k { color: var(--text-2); }
.qz-review .v { font-weight: 600; color: var(--text-0); text-align: right; font-variant-numeric: tabular-nums; }
.qz-estimate {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--stroke);
}
.qz-estimate .k { font-size: var(--fs-label); font-weight: 600; color: var(--text-2); letter-spacing: .4px; text-transform: uppercase; }
.qz-estimate .v { font-size: 18px; font-weight: 700; color: var(--accent-0-hi); font-variant-numeric: tabular-nums; }
.qz-note { margin: 10px 0 0; text-align: center; font-size: var(--fs-eyebrow); color: var(--text-2); line-height: 1.5; }
.qz-err { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--tl-red); }
.qz-actions { margin-top: auto; padding-top: 20px; }
.qz-next {
  width: 100%; border: 1px solid var(--accent-0); border-radius: var(--r-md); padding: 13px 18px;
  background: var(--accent-0); color: #fff; font-family: var(--font);
  font-size: 13.5px; font-weight: 600; letter-spacing: .6px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; box-shadow: var(--shadow-1);
  transition: background .14s ease, border-color .14s ease;
}
.qz-next:hover { background: var(--accent-0-hi); border-color: var(--accent-0-hi); }
.qz-next:active { background: var(--accent-0-hi); }
.qz-foot { margin: 14px 0 0; text-align: center; font-size: var(--fs-eyebrow); line-height: 1.65; color: var(--text-2); }

/* Mobile view — the stage goes full-bleed behind the floating quick bar and
   the card becomes an edge-to-edge sheet, one question per screen. */
@media (max-width: 720px) {
  .qz-stage {
    margin: -16px -14px -104px;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom));
    border: 0; border-radius: 0;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100dvh - var(--topbar-h));
  }
  .qz-card { width: 100%; border-radius: var(--r-lg); padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
  .qz-steps li:not(.current) { display: none; }
  .qz-title { font-size: 20px; margin-top: 10px; }
  .qz-big { font-size: 26px; }
}

/* Portal dashboard welcome banner — soft blue panel with the document &
   plant illustration and the "Financing Made Simple" tagline at the edge. */
.dash-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 20px;
  padding: 26px 30px;
  border-radius: 16px;
  background: linear-gradient(115deg, #e9f0fe 0%, #eef4ff 55%, #e4edff 100%);
}
.dash-hero-text { flex: 1 1 auto; min-width: 0; }
.dash-hero-text h1 {
  margin: 6px 0 0;
  font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-0);
}
.dash-wave { display: inline-block; margin-left: 2px; font-size: 22px; }
.dash-hero-text p { margin: 8px 0 0; max-width: 560px; font-size: 13px; color: var(--text-2); }
.dash-hero-art { flex: 0 0 auto; line-height: 0; }
.dash-hero-tag {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--text-1);
}
.dash-hero-tag::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  margin-top: 8px; background: var(--accent-0);
}
/* Welcome note under the greeting: latest open application, its stage and
   last update, with "here" / "recent application" links. */
.dash-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 14px; padding: 12px 16px; max-width: 640px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(37, 99, 235, 0.18);
  font-size: 13px; color: var(--text-1);
}
.dash-note-text { flex: 1 1 260px; min-width: 0; line-height: 1.6; }
.dash-note-text strong { color: var(--accent-0); margin-right: 2px; }
.dash-note-meta { display: block; color: var(--text-2); }
.dash-note-meta .badge3d { vertical-align: middle; }
.dash-note-links { flex: 0 1 auto; color: var(--text-2); }
.dash-note-links a { font-weight: 700; color: var(--accent-0); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .dash-hero { gap: 18px; padding: 22px; }
  .dash-hero-art, .dash-hero-tag { display: none; }
}

/* Dashboard recent applications — phone card list (hidden on desktop,
   where the table with its page-size selector carries the list). */
.recent-cards { display: none; }
.recent-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 1px solid var(--stroke); border-radius: 14px;
  background: var(--panel); color: var(--text-1);
  transition: border-color .15s ease, transform .12s ease;
}
.recent-card:active { transform: scale(.985); border-color: var(--accent-0); }
.recent-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.recent-card-amt { font-size: 14px; font-weight: 700; color: var(--text-0); white-space: nowrap; }
.recent-card-product { font-size: 13px; font-weight: 600; color: var(--text-0); line-height: 1.4; }
.recent-card .cell-badges { flex-direction: row; flex-wrap: wrap; }
.recent-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.recent-card-cta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--accent-0); }
.recent-empty { margin: 0; text-align: center; padding: 12px 4px; font-size: 13px; }

/* Phone dashboard — big tappable tiles instead of tables and dense copy */
@media (max-width: 720px) {
  .dash-hero { margin-bottom: 14px; padding: 18px; }
  .dash-hero-text h1 { font-size: 19px; }
  .dash-hero-text p { font-size: 12.5px; }

  #apply-products .card-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  #apply-products .prod-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #apply-products .prod-card { padding: 14px; gap: 6px; }
  #apply-products .prod-name { font-size: 13.5px; }
  #apply-products .prod-meta { font-size: 11.5px; }
  #apply-products .prod-cta { min-height: 40px; }

  .dash-recent .table-tools, .dash-recent .recent-table { display: none; }
  .dash-recent .recent-cards { display: flex; flex-direction: column; gap: 10px; padding: 14px; }

  .dash-qa .qa-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-qa .qa-card {
    flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 88px; padding: 14px 10px; text-align: center;
  }
  .dash-qa .qa-card svg { margin-top: 0; }
  .dash-qa .qa-card span { display: none; }
}

/* ---------------------------------------------------------------------------
   Credit assessment wizard (M09) — stepper, pillar grid, gauge, framework
   reference matrix and formula panel. app.js decides which panel is visible;
   the [hidden] rule has to out-specify .card3d or a hidden panel still shows.
--------------------------------------------------------------------------- */
.wizard-panel[hidden] { display: none; }
/* Auxiliary forms only exist so buttons inside the wizard can submit them
   without nesting a form inside a form. */
.wizard-aux { display: none; }

.wizard-steps {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 20px 0; padding: 0;
  overflow-x: auto;
  /* Hash links and reloads must land below the sticky topbar. */
  scroll-margin-top: 84px;
}
.wizard-panel { scroll-margin-top: 84px; }
.ws-item { display: flex; align-items: center; flex: 0 0 auto; }
/* Connector between steps — the same arrow glyph the dashboard journey uses,
   inked a shade darker than the border tint so it reads at a glance. */
.ws-arrow { display: grid; place-items: center; flex: 0 0 auto; padding: 0 4px; color: var(--text-2); }
.ws-arrow svg { width: 13px; height: 13px; }
.ws-step {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-family: var(--font); color: var(--text-2);
  transition: background .12s ease, color .12s ease;
}
.ws-step:hover { background: var(--panel-2); }
.ws-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--stroke-strong);
  background: var(--panel); color: var(--text-2);
  font-size: 12px; font-weight: 700;
}
.ws-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ws-step.done { color: var(--text-1); }
.ws-step.done .ws-dot { border-color: var(--tl-green-bd); background: var(--tl-green-soft); color: var(--tl-green); }
.ws-step.active { color: var(--text-0); background: var(--grad-soft); }
.ws-step.active .ws-dot { border-color: var(--accent-0); background: var(--accent-0); color: #ffffff; }
.ws-step:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 2px; }
/* A step holding a validation error carries a small bad-tone dot so a refused
   submission points the officer at every step that needs attention. */
.ws-alert {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 auto; margin-left: 2px;
  border-radius: 50%; background: var(--tl-red); color: #ffffff;
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* Grouped stepper (credit assessment console): Overview and Summary ride as
   pills either side of a collapsible amber group box whose steps stay inline
   beneath its header, so the whole journey reads on one row. The header
   toggle only hides the step row; navigation lives on the step buttons. */
.wizard-stepper-grouped { margin: 20px 0; }
.wizard-stepper-grouped > .wizard-steps { margin: 0; }
.ws-group {
  border: 1px solid rgba(217, 119, 6, .25);
  background: var(--tl-amber-soft);
  border-radius: var(--r-md);
  padding: 8px 12px 10px;
  min-width: 0; max-width: 100%;
}
.ws-group.active { border-color: var(--tl-amber); }
.ws-group-head { display: flex; align-items: center; gap: 7px; }
.ws-group-icon { display: inline-flex; color: var(--tl-amber); }
.ws-group-icon svg { width: 14px; height: 14px; }
.ws-group-title { font-size: 12px; font-weight: 700; color: var(--tl-amber); }
.ws-group.done .ws-group-icon,
.ws-group.done .ws-group-title { color: var(--tl-green); }
.ws-group-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--tl-amber);
  cursor: pointer; padding: 2px; border-radius: 6px;
}
.ws-group-toggle:hover { background: rgba(217, 119, 6, .14); }
.ws-group-toggle:focus-visible { outline: 2px solid var(--tl-amber); outline-offset: 1px; }
.ws-group-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.ws-group.collapsed .ws-group-toggle svg { transform: rotate(180deg); }
.ws-group.collapsed .ws-group-steps { display: none; }
.ws-group-steps { margin: 4px 0 0 !important; padding: 0; }
.ws-group-steps .ws-dot {
  width: 22px; height: 22px; font-size: 11px;
  border-color: var(--tl-amber-bd); background: var(--panel); color: var(--tl-amber);
}
.ws-group-steps .ws-label { font-size: 12px; }
.ws-group-steps .ws-step.active { background: var(--panel); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); color: var(--text-0); }
.ws-group-steps .ws-step.active .ws-dot { border-color: var(--tl-amber); background: var(--tl-amber); color: #ffffff; }
/* Slim chevron connector between the grouped layout's journey items. */
.ws-arrow.ws-chevron svg { width: 12px; height: 12px; }

/* Category-grouped credit-stage stepper (Summary & Rating). The stages sit in
   three side-by-side bands — Credit Assessment / Risk Assessment /
   Approval & Governance — each headed by an icon, a label and a display-only
   weight chip. A single rail runs behind every numbered dot across all bands;
   a done stage fills green with a check, the active stage rings in accent, and
   the band that owns the active stage is tinted amber. View only: selecting a
   node posts nothing and recalculates no score. */
.stage-cats {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--stroke); border-radius: var(--r-lg);
  overflow: hidden; background: var(--panel);
}
.stage-cat {
  flex: 1 1 0; min-width: 0;
  padding: 12px 16px 14px;
  border-right: 1px solid var(--stroke);
  transition: background .15s ease;
}
.stage-cat:last-child { border-right: 0; }
.stage-cat.is-active { background: var(--tl-amber-soft); }
.sc-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.sc-head strong { font-size: 13px; font-weight: 700; color: var(--text-1); }
.sc-ico { display: inline-flex; align-items: center; color: var(--tl-blue); }
.stage-cat:nth-child(1) .sc-ico { color: var(--tl-blue); }
.stage-cat:nth-child(2) .sc-ico { color: var(--tl-amber); }
.stage-cat:nth-child(3) .sc-ico { color: #7c3aed; }
.sc-weight {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 9px; border-radius: 999px;
  background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd);
  color: var(--tl-amber);
}
.sc-track {
  display: flex; align-items: flex-start;
  position: relative;
  /* Bleed into the band padding so the rail is continuous across bands. */
  margin: 0 -16px; padding: 0 16px;
}
.sc-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 14px;
  height: 2px; background: var(--stroke-strong); z-index: 0;
}
.sc-node {
  flex: 1 1 0; min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font);
}
.sc-node:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 2px; border-radius: 8px; }
.sc-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; border: 2px solid var(--stroke-strong);
  background: var(--panel); color: var(--text-2);
  font-size: 12.5px; font-weight: 700; line-height: 1;
  position: relative; z-index: 1;
  transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.sc-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  text-align: center; line-height: 1.25;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-node:hover .sc-dot { border-color: var(--accent-0); }
.sc-node.done .sc-dot { border-color: var(--tl-green); background: var(--tl-green); color: #ffffff; }
.sc-node.done .sc-label { color: var(--text-1); }
.sc-node.active .sc-dot {
  border-color: var(--accent-0); background: #ffffff; color: var(--accent-0);
  box-shadow: 0 0 0 3px var(--tl-blue-soft);
}
.sc-node.active .sc-label { color: var(--text-0); }
@media (max-width: 900px) {
  .stage-cats { flex-direction: column; }
  .stage-cat { border-right: 0; border-bottom: 1px solid var(--stroke); }
  .stage-cat:last-child { border-bottom: 0; }
}

/* Repeatable capture rows (CIF wizard directors / shareholders): one grid row
   per entry with a trailing remove control; stacks on narrow consoles. */
.repeat-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
  gap: 10px; align-items: end; margin-bottom: 10px;
}
.repeat-row .field { margin: 0; }
.repeat-remove { margin-bottom: 2px; min-width: 34px; }
@media (max-width: 720px) {
  .repeat-row { grid-template-columns: 1fr; }
  .repeat-remove { justify-self: end; }
}

/* CIF creation wizard: every step pairs its capture fields with a side panel
   (SSM upload, guidance, review) so the right-hand space carries content
   instead of sitting empty beside a narrow card. */
.wizard-shell { max-width: 1280px; }
.wizard-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.wizard-main { min-width: 0; }
.wizard-side {
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--panel-2); padding: 16px;
}
.wizard-side > strong { display: block; font-size: 13px; color: var(--text-1); }
.wizard-side .muted { font-size: 12px; }
.wizard-side ol { margin: 10px 0; padding-left: 18px; display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.wizard-side .file3d { margin: 10px 0 8px; }
.wizard-side .flash { margin: 0 0 8px; }
.wizard-side .table3d { margin: 10px 0 0; }
@media (max-width: 1000px) {
  .wizard-cols { grid-template-columns: 1fr; }
}

/* Pillar step: factor table beside a rail; stacks when the console is narrow. */
.pillar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.pillar-main { min-width: 0; overflow-x: auto; }
.pillar-rail { border-left: 1px solid var(--stroke); padding-left: 20px; }
.rail-facts { margin: 14px 0 0; display: grid; gap: 10px; }
.rail-facts dt { font-size: 11.5px; color: var(--text-2); }
.rail-facts dd { margin: 2px 0 0; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: minmax(0, 1fr); }
  .pillar-rail { border-left: 0; border-top: 1px solid var(--stroke); padding: 16px 0 0; }
}

/* Totals row reads as a total on every table that has one. */
.table3d tfoot td {
  border-top: 1px solid var(--stroke); background: var(--panel-2);
  font-size: 13px; border-bottom: 0;
}

/* Compact controls that live inside a factor-table cell. */
.cell-input {
  width: 100%; min-width: 92px; padding: 6px 8px;
  border: 1px solid #d1d5db; border-radius: var(--r-sm);
  background: #ffffff; color: var(--text-0);
  font-size: 13px; font-family: var(--font); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cell-input:hover:not(:disabled) { border-color: var(--stroke-strong); }
.cell-input:focus { border-color: var(--accent-0); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.cell-input:disabled { background: var(--panel-2); color: var(--text-2); cursor: not-allowed; }
/* Remarks boxes grow with their content (auto-sized by app.js) so the
   officer's whole sentence stays visible instead of clipping to one line;
   they can still be stretched by hand afterwards. */
textarea.cell-input.remark-input {
  display: block; min-width: 160px; min-height: 32px; height: auto;
  resize: vertical; line-height: 1.45; overflow-wrap: break-word;
}
select.cell-input {
  appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.factor-table th, .factor-table td { padding: 10px 12px; }

/* Semicircle gauge on the 1–5 risk scale; tone is set by the caller from the
   configured version thresholds. */
.score-gauge { position: relative; max-width: 190px; margin: 0 auto; text-align: center; }
.score-gauge svg { width: 100%; height: auto; display: block; }
.sg-arc { position: relative; }
.sg-track { fill: none; stroke: var(--stroke); stroke-width: 9; stroke-linecap: round; }
.sg-fill { fill: none; stroke: var(--tl-gray); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .25s ease; }
.score-gauge.tone-good .sg-fill { stroke: var(--tl-green); }
.score-gauge.tone-warn .sg-fill { stroke: var(--tl-amber); }
.score-gauge.tone-bad .sg-fill { stroke: var(--tl-red); }
.sg-readout {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
}
.sg-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--text-0); line-height: 1; }
.sg-max { font-size: 12px; color: var(--text-2); }
.sg-label { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.sg-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-2); }

/* Stage-based credit grade gauge: letter readout on the same arc as the
   score gauge, an A–E rail marking where the grade sits, and the risk level
   with its plain-language description underneath. */
.grade-gauge { max-width: 230px; }
.gg-letter { font-size: 34px; letter-spacing: 0; }
.gg-rail { position: relative; display: flex; justify-content: space-between; margin: 12px 4px 0; }
.gg-rail::before { content: ''; position: absolute; left: 8px; right: 8px; top: 5px; height: 2px; background: var(--stroke); }
.gg-dot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gg-dot i { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--stroke); }
.gg-dot em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-2); }
.gg-dot.on i { background: var(--tl-gray); border-color: var(--tl-gray); }
.gg-dot.on em { color: var(--text-1); }
.grade-gauge.tone-good .gg-dot.on i { background: var(--tl-green); border-color: var(--tl-green); }
.grade-gauge.tone-warn .gg-dot.on i { background: var(--tl-amber); border-color: var(--tl-amber); }
.grade-gauge.tone-bad .gg-dot.on i { background: var(--tl-red); border-color: var(--tl-red); }
.gg-risk { margin-top: 14px; border-radius: 10px; padding: 10px 12px; text-align: left; }
.gg-risk strong { display: block; font-size: 13px; }
.gg-risk span { display: block; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.gg-risk.tone-good { background: #e6f4ea; color: #137333; }
.gg-risk.tone-warn { background: #fcf1d0; color: #b47c00; }
.gg-risk.tone-bad { background: #fdecea; color: #c5221f; }
.gg-risk.tone-muted { background: #f1f3f4; color: #5f6368; }

/* Stage-based scoring layout: stage panel beside the grade gauge, collapsing
   to a single column on narrow screens. */
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.stage-grid.ra-fullwidth { display: block !important; }
.stage-grid.ra-fullwidth > div:first-child { width: 100% !important; }
@media (max-width: 980px) { .stage-grid { grid-template-columns: 1fr; } }
.stage-strip { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 20px; }
.stage-strip > div { flex: 1; min-width: 140px; border-right: 1px solid var(--stroke); }
.stage-strip > div:last-child { border-right: 0; }
.table3d tr.stage-active td { background: #f0f4fb; }
.kpi-delta.tone-good { color: var(--good); }
.kpi-delta.tone-warn { color: var(--warn); }
.kpi-delta.tone-bad { color: var(--bad); }

/* Framework threshold extract and the formula behind the numbers on screen. */
.ref-scroll { overflow-x: auto; }
.ref-matrix th, .ref-matrix td { padding: 9px 12px; font-size: 12.5px; }
.ref-matrix td.ref-indicator,
.ref-matrix td:first-child:not(.muted) { font-weight: 600; color: var(--text-1); white-space: nowrap; }
/* The column holding the factor's current mark is tinted so the officer sees
   at a glance which band the score on the select came from. */
.ref-matrix td.ref-hit { background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--accent-0); }
/* Red Flag Record warning: critical external records (blacklist, AMLA,
   fraud, legal, terrorism, outstanding claims) lock the assessment, so the
   box reads as an alert, never as ordinary card chrome. */
.redflag-box { border-color: var(--tl-red-bd); background: var(--tl-red-soft); }
.redflag-box .card-head strong { color: var(--tl-red); }
.redflag-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--text-0); }
.redflag-list strong { color: var(--tl-red); }

/* Financial Risk year tabs: one pill per financial period the data offers
   (audited years held by CTOS plus the management-account month). */
.fin-panel { border-bottom: 1px solid var(--stroke); }
.fin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-tabs[hidden] { display: none; }
/* In the sticky header band the period tabs sit under the title row,
   on a white pill so they read against the gradient. */
.hero-fin-tabs { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #dfe8fb; }
/* Credit assessment header: the financing illustration strip. */
.fin-illus { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #dfe8fb; }
.fin-illus-head { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.fin-illus-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; }
.fin-illus-grid > div { padding: 8px 12px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.75); border: 1px solid #dfe8fb; min-width: 0; }
.fin-illus-grid dt { font-size: 11.5px; color: var(--text-2); margin-bottom: 2px; }
.fin-illus-grid dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-0); white-space: nowrap; }
.fin-illus-grid small { display: block; font-size: 11px; color: var(--text-2); margin-top: 1px; }
.fin-illus-grid .fin-illus-total { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.25); }
.fin-illus-grid .fin-illus-total dd { color: var(--accent-0); }
.fin-illus-note { font-size: 11.5px; color: var(--text-2); margin-top: 6px; }
@media (max-width: 1200px) { .fin-illus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fin-illus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-fin-tabs .fin-tab { background: #ffffff; }
.hero-fin-tabs .fin-tab.active { background: var(--accent-0); }
.fin-tab {
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--panel-2);
  font-size: 12px; font-weight: 700; color: var(--text-2); text-decoration: none;
}
.fin-tab:hover { border-color: var(--accent-0); color: var(--accent-0); }
.fin-tab.active { border-color: var(--accent-0); background: var(--accent-0); color: #ffffff; }
.fin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.fin-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fin-figure { display: grid; gap: 4px; font-size: 11.5px; }
.fin-template {
  margin-top: 14px; padding: 12px 14px;
  border: 1px dashed var(--stroke); border-radius: var(--r-md); background: var(--panel-2);
  font-size: 13px;
}
/* Overall Analyst Remark: full-width block under the factor table so the
   assessment-wide comment is always in view, never squeezed into a column. */
.overall-remark { margin-top: 14px; display: grid; gap: 6px; font-size: 12.5px; }
.overall-remark textarea { width: 100%; min-height: 56px; font-size: 13px; }
.formula-panel { display: grid; gap: 8px; }
.formula-panel > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.formula-tab {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--panel-2);
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.formula-panel code {
  padding: 6px 10px; border: 1px solid var(--stroke); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--text-0);
  font-family: var(--font-mono); font-size: 12.5px;
}

/* Step 1 — CTOS external assessment (evidence only, never the internal rating). */
.ctos-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ctos-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 136px; padding: 14px 18px;
  border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--grad-soft);
}
.ctos-score-value { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--accent-0); }
.ctos-score-label { margin-top: 6px; font-size: 11.5px; color: var(--text-2); text-align: center; }
.ctos-facts { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13.5px; }
.ctos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ctos-cell { padding: 10px 12px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2); }
.ctos-cell span { display: block; margin-bottom: 3px; font-size: 11.5px; }
.ctos-cell strong { font-size: 13.5px; color: var(--text-0); word-break: break-word; }

/* Final step — CTOS and the internal assessment side by side. */
.summary-grid { align-items: start; }
.summary-rating { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.rating-chip {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 4px;
  padding: 6px 14px; border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--panel-2); font-size: 22px; font-weight: 800; color: var(--text-0);
}
.rating-chip span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.rating-chip.tone-good { border-color: var(--tl-green-bd); background: var(--tl-green-soft); }
.rating-chip.tone-warn { border-color: var(--tl-amber-bd); background: var(--tl-amber-soft); }
.rating-chip.tone-bad { border-color: var(--tl-red-bd); background: var(--tl-red-soft); }

.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wizard-subhead { margin: 0 0 8px; font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; }
/* Revealed by app.js once an entry changes: the numbers on screen come from
   the engine, so they refresh on save/calculate rather than on every keystroke. */
.wizard-dirty-note {
  margin: -6px 0 14px; padding: 7px 12px;
  border: 1px solid var(--tl-amber-bd); border-radius: var(--r-sm);
  background: var(--tl-amber-soft); color: var(--text-1);
  font-size: 12px;
}
.wizard-dirty-note[hidden] { display: none; }

/* ---------- Risk-distribution dashboard (M09 §11) ----------
   Tiles are links, so the whole card is the drill-down target, and each one
   carries its own formula caption so no figure is undeclared. */
.risk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.risk-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel);
  transition: border-color .12s ease, background .12s ease;
}
.risk-tile:hover { border-color: var(--stroke-strong); background: var(--panel-2); }
.risk-tile:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 2px; }
.rt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rt-grade { font-size: 19px; font-weight: 800; letter-spacing: .4px; color: var(--accent-0); }
.rt-label { font-size: 13px; font-weight: 600; color: var(--text-0); }
.rt-count { font-size: 24px; font-weight: 700; color: var(--text-0); font-variant-numeric: tabular-nums; }
.rt-band { font-size: 12.5px; color: var(--text-1); }
.rt-range { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rt-formula {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--stroke);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.45;
  color: var(--text-2); word-break: break-word;
}
.risk-tile.is-empty .rt-count { color: var(--text-2); }
.risk-tile.tone-good .rt-count { color: var(--good); }
.risk-tile.tone-warn .rt-count { color: var(--warn); }
.risk-tile.tone-bad .rt-count { color: var(--bad); }
.risk-tile.tone-info .rt-count { color: var(--accent-0); }

/* Card head carrying a filter form: it wraps rather than squeezing controls. */
.card-head.stack-head { align-items: flex-start; flex-wrap: wrap; }
.head-note { font-size: 12px; font-weight: 400; }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-bar input[type="search"] { min-width: 210px; }
.filter-bar select { min-width: 140px; }
.filter-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.filter-date input { width: 150px; }

/* Metric definitions — collapsed by default, one row per declared figure. */
.metric-defs {
  margin-top: 20px; border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--panel);
}
.metric-defs > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text-1);
}
.metric-defs > summary::-webkit-details-marker { display: none; }
.metric-defs > summary::before { content: "▸ "; color: var(--text-2); }
.metric-defs[open] > summary::before { content: "▾ "; }
.metric-defs .md-body { padding: 0 16px 16px; border-top: 1px solid var(--stroke); }
.metric-defs .md-body > p { margin: 12px 0; font-size: 12.5px; }
.metric-defs code { font-family: var(--font-mono); font-size: 11.5px; word-break: break-word; }

/* Override approval worklist — the change requested and its decision actions. */
.ov-change { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-0); }
.ov-change .ov-arrow { color: var(--text-2); font-weight: 400; }
.ov-evidence { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.ov-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* Advisory surfaces — a simulation is never an assessment of record. */
.advisory-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 11px 16px;
  border: 1px solid var(--tl-amber-bd); border-radius: var(--r-md);
  background: var(--tl-amber-soft); color: var(--text-1); font-size: 13px;
}

/* Simulator result — one gauge per configured pillar, sized to sit side by side. */
.sim-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.sim-gauges .score-gauge { margin: 0; }

/* ---------- Customer 360 (CIF admin) panels ---------- */
/* Delinquency ageing tile amount — red only when the bucket holds a balance. */
.aging-amount { font-size: 18px; font-weight: 700; color: var(--text-0); }
.aging-amount.is-bad { color: var(--bad); }

/* Document-category completeness bar. */
.doc-cat { display: flex; flex-direction: column; gap: 6px; }
.doc-cat .doc-cat-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-1); }
.progress3d { height: 8px; border-radius: 999px; background: var(--stroke); overflow: hidden; }
.progress3d > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-0); width: var(--pct, 0%); }
.progress3d.tone-good > span { background: var(--tl-green); }
.progress3d.tone-warn > span { background: var(--tl-amber); }
.progress3d.tone-bad > span { background: var(--tl-red); }

/* Screening / KYC status stepper reuses .stepper; the caption under each dot. */
.step-caption { font-size: 11.5px; color: var(--text-2); margin-top: 6px; line-height: 1.3; }

/* Credit-limit utilisation readout. */
.util-row { display: flex; align-items: center; gap: 12px; }
.util-row .progress3d { flex: 1; }

/* ==========================================================================
   CRM & Sales module — lead acquisition, pipeline board, referral QR and
   management KPIs. Built entirely on the FMS tokens above so the screens
   read as one console: white cards, traffic-light semantics, tabular
   figures, #2563eb accent. See docs/modules and the CRM requirements.
   ========================================================================== */

/* --- Shared helpers ------------------------------------------------------- */
.hero-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.queue-row .queue-label { flex: 1; color: var(--text-1); }
.tl-bad { color: var(--bad); }
.tl-info { color: var(--accent-1); }
.crm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* Small pill used for lead source / owner chips inside cards and tables. */
.crm-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.2px;
  background: var(--surface-strong); color: var(--text-1);
  border: 1px solid var(--stroke);
}
.crm-chip.owner { background: var(--tl-blue-soft); border-color: var(--tl-blue-bd); color: var(--tl-blue); }
.crm-chip.off { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); text-decoration: line-through; }

/* Delta chip shown on the KPI hero cards (vs previous period). */
.crm-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; }
.crm-delta.up { color: var(--good); }
.crm-delta.down { color: var(--bad); }
.crm-delta.flat { color: var(--text-2); font-weight: 400; }

/* Mini KPI cluster (referral stats, own-referral dashboard tile). */
.crm-mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.crm-mini { display: flex; flex-direction: column; gap: 3px; }
.crm-mini-val { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text-0); }
.crm-mini-val.good { color: var(--good); }
.crm-mini-val.info { color: var(--accent-1); }
.crm-mini-label { font-size: 11.5px; color: var(--text-2); letter-spacing: 0.2px; }

/* Work-queue tile on the lead register (clickable KPI). */
.crm-queue-tile { display: block; text-decoration: none; color: inherit; transition: box-shadow .14s ease, border-color .14s ease; }
.crm-queue-tile:hover { border-color: var(--stroke-strong); box-shadow: var(--shadow-2); }
.crm-queue-tile .kpi-value { font-size: 26px; }

/* --- Filter bar ----------------------------------------------------------- */
.crm-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-filters select { width: auto; }
.crm-filter-search { flex: 1 1 220px; min-width: 200px; }

/* --- Conversion funnel ---------------------------------------------------- */
.crm-funnel { display: flex; flex-direction: column; gap: 12px; }
.crm-funnel-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 44px 52px; align-items: center; gap: 10px; }
.crm-funnel-label { font-size: 12.5px; color: var(--text-1); }
.crm-funnel-track { height: 12px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.crm-funnel-bar {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-0), #4f83f1);
  transition: width .3s ease;
}
.crm-funnel-count { font-size: 13px; font-weight: 600; text-align: right; color: var(--text-0); }
.crm-funnel-rate { font-size: 12px; text-align: right; color: var(--text-2); }

/* --- Leads-by-source donut (conic-gradient) ------------------------------- */
.crm-donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.crm-donut {
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  flex: 0 0 auto;
}
.crm-donut-hole {
  position: absolute; inset: 26px; border-radius: 50%;
  background: var(--panel); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--shadow-1);
}
.crm-donut-total { font-size: 26px; font-weight: 600; line-height: 1; color: var(--text-0); }
.crm-donut-cap { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-2); }
/* Legend stays a compact column beside the ring even in wide cards, so the
   numbers never drift to the far edge of the page. */
.crm-legend { list-style: none; margin: 0; padding: 0; flex: 0 1 260px; min-width: 210px; display: flex; flex-direction: column; gap: 8px; }
.crm-legend li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 2px 6px; margin: 0 -6px; border-radius: 6px; }
.crm-legend li.hover { background: rgba(37, 99, 235, .08); }
.crm-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.crm-legend-label { color: var(--text-1); flex: 1 1 auto; min-width: 0; }
/* Lead total sits right beside the source name; the rate follows the count
   in a fixed column instead of stretching to the row end. */
.crm-legend-count { font-weight: 600; color: var(--text-0); font-variant-numeric: tabular-nums; }
.crm-legend-val { margin-left: 10px; flex: 0 0 48px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Hover tooltip answering a pointer over the donut ring */
.crm-donut-tip {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 5px 9px; font-size: 12px; color: var(--text-0);
}

/* --- Financing value strip ------------------------------------------------ */
.crm-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.crm-amount { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2); }
.crm-amount-label { font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); }
.crm-amount-val { font-size: 21px; font-weight: 600; color: var(--text-0); }
.crm-amount-val.good { color: var(--good); }
.crm-amount-val.info { color: var(--accent-1); }

/* --- My Performance panel (salesperson's own KPI + rank) ------------------ */
.crm-mine { border-color: var(--stroke-strong); }
.crm-mine-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-mine-id { display: flex; flex-direction: column; gap: 2px; }
.crm-mine-name { font-size: 16px; font-weight: 600; color: var(--text-0); }
.crm-rank-badge { display: flex; align-items: baseline; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd); }
.crm-rank-pos { font-size: 20px; font-weight: 700; color: var(--tl-amber); line-height: 1; }
.crm-rank-of { font-size: 11.5px; color: var(--text-2); }

/* --- Top Performer podium ------------------------------------------------- */
.crm-head-note { font-size: 11.5px; color: var(--text-2); font-weight: 400; }
.crm-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-podium-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 62px 92px; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2); }
.crm-podium-row.rank-1 { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); }
.crm-podium-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; font-weight: 700; background: var(--surface-strong); color: var(--text-1); }
.crm-podium-row.rank-1 .crm-podium-rank { background: var(--tl-amber); color: #fff; }
.crm-podium-row.rank-2 .crm-podium-rank { background: #94a3b8; color: #fff; }
.crm-podium-row.rank-3 .crm-podium-rank { background: #b08d57; color: #fff; }
.crm-podium-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm-podium-name a { font-size: 13.5px; font-weight: 600; color: var(--text-0); text-decoration: none; }
.crm-podium-name a:hover { text-decoration: underline; }
.crm-podium-name .muted { font-size: 11px; }
.crm-podium-conv { font-size: 12.5px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm-podium-metric { font-size: 14px; font-weight: 600; text-align: right; color: var(--good); font-variant-numeric: tabular-nums; }
.crm-podium-empty { padding: 18px; text-align: center; }

/* --- Leads by region ------------------------------------------------------ */
.crm-region-head, .crm-region-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 44px 74px 56px; align-items: center; gap: 10px; }
.crm-region-head { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); padding-bottom: 6px; border-bottom: 1px solid var(--stroke); margin-bottom: 8px; }
.crm-region-head .num { text-align: right; }
.crm-region { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.crm-region-name { font-size: 12.5px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-region-track { height: 10px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.crm-region-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tl-green), #34d399); }
.crm-region-row .num { font-size: 12.5px; text-align: right; color: var(--text-0); font-variant-numeric: tabular-nums; }

/* --- Next action list ----------------------------------------------------- */
.crm-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm-next-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--stroke); }
.crm-next-row:last-child { border-bottom: 0; }
.crm-next-row.overdue { background: rgba(220, 38, 38, 0.05); }
.crm-next-when { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.crm-next-when.bad { color: var(--bad, #dc2626); }
.crm-next-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-next-subject { font-size: 13px; color: var(--text-0); font-weight: 500; }
.crm-next-main a { font-size: 11.5px; text-decoration: none; }
.crm-next-main a:hover { text-decoration: underline; }

/* --- Top leads / top conversions list ------------------------------------- */
.crm-toplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm-toplist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--stroke); }
.crm-toplist li:last-child { border-bottom: 0; }
.crm-toplist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; }
.crm-toplist-name { font-size: 13px; font-weight: 600; color: var(--text-0); }
.crm-toplist-main:hover .crm-toplist-name { text-decoration: underline; }
.crm-toplist-main .muted { font-size: 11.5px; }
.crm-toplist-val { font-size: 13.5px; font-weight: 600; color: var(--text-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-toplist-val.good { color: var(--good); }

@media (max-width: 900px) {
  .crm-podium-row { grid-template-columns: 28px minmax(0, 1fr) 88px; }
  .crm-podium-conv { display: none; }
  .crm-region-head, .crm-region-row { grid-template-columns: minmax(0, 1fr) 40px 70px; }
  .crm-region-track, .crm-region-head span:nth-child(2), .crm-region-row .num:last-child { display: none; }
}

/* --- Kanban pipeline board ------------------------------------------------ */
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.crm-col { flex: 0 0 268px; display: flex; flex-direction: column; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--panel-2); max-height: calc(100vh - 210px); }
.crm-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--stroke);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.crm-col-head .crm-col-title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; }
.crm-col-head .crm-col-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.7);
}
.crm-col-head.tint-info { background: var(--tl-blue-soft); color: var(--tl-blue); }
.crm-col-head.tint-warn { background: var(--tl-amber-soft); color: var(--tl-amber); }
.crm-col-head.tint-good { background: var(--tl-green-soft); color: var(--tl-green); }
.crm-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.crm-col-empty { padding: 22px 12px; text-align: center; font-size: 12.5px; color: var(--text-2); border: 1px dashed var(--stroke-strong); border-radius: var(--r-md); }

.crm-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 13px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.crm-card:hover { border-color: var(--stroke-strong); box-shadow: var(--shadow-3); transform: translateY(-1px); }
.crm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.crm-card-company { font-size: 13.5px; font-weight: 600; color: var(--text-0); line-height: 1.3; }
.crm-card-product { font-size: 12px; color: var(--text-1); }
.crm-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid var(--stroke-hairline); }
.crm-card-no { font-size: 11px; }
.crm-card-date { font-size: 11.5px; color: var(--text-2); }

/* --- Lead detail: two-pane layout ----------------------------------------- */
.crm-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 16px; align-items: start; }
.crm-detail-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crm-detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crm-sticky { position: sticky; top: calc(var(--topbar-h) + 16px); }

.crm-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-quick-actions .btn3d { flex: 1 1 auto; justify-content: center; }

.crm-side-form { padding: 14px 20px; border-top: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 8px; }
.crm-side-label { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.crm-side-row { display: flex; gap: 8px; align-items: center; }
.crm-side-row > * { flex: 1; }
.crm-side-form select, .crm-side-form input, .crm-side-form textarea { width: 100%; }

.crm-open-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--stroke-hairline); }
.crm-open-item:last-child { border-bottom: 0; }
.crm-open-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.crm-open-text .muted { font-size: 11.5px; }

/* Activity timeline inside the lead detail. */
.crm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-tl-item { position: relative; display: flex; gap: 12px; padding: 10px 0 10px 2px; }
.crm-tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 34px; bottom: -2px;
  width: 2px; background: var(--stroke);
}
.crm-tl-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-strong); border: 1px solid var(--stroke); color: var(--text-2);
  z-index: 1;
}
.crm-tl-item.open .crm-tl-ico { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); color: var(--tl-amber); }
.crm-tl-item.done .crm-tl-ico { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.crm-tl-body { flex: 1; min-width: 0; }
.crm-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-tl-head strong { font-size: 13.5px; color: var(--text-0); }
.crm-tl-text { font-size: 13px; color: var(--text-1); margin-top: 3px; line-height: 1.45; }
.crm-tl-meta { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }

/* --- Sales activity work queues ------------------------------------------- */
.crm-queues-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.crm-activity-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.crm-activity-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--stroke-hairline); text-decoration: none; color: inherit; }
.crm-activity-row:last-child { border-bottom: 0; }
.crm-activity-row:hover .crm-act-main strong { color: var(--accent-1); }
.crm-act-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--tl-gray); }
.crm-act-dot.bad { background: var(--tl-red); }
.crm-act-dot.info { background: var(--tl-blue); }
.crm-act-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-act-main strong { font-size: 13px; color: var(--text-0); }
.crm-act-main .muted { font-size: 11.5px; }
.crm-act-due { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* --- My Referral / QR page ------------------------------------------------ */
.crm-referral-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.crm-referral-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crm-qr-frame {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; margin-bottom: 16px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--stroke);
}
.crm-qr-frame svg { width: 100%; height: auto; max-width: 220px; }
.crm-qr-off { flex-direction: column; gap: 10px; min-height: 200px; color: var(--text-2); text-align: center; background: var(--panel-2); }
.crm-qr-off span { font-size: 12.5px; max-width: 200px; }
.crm-url-row { display: flex; gap: 8px; align-items: center; }
.crm-url-row input { flex: 1; font-family: var(--font-mono); font-size: 12.5px; }
.crm-url-row .btn3d { flex: 0 0 auto; }
.crm-share-row { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.crm-share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-share-btns .btn3d { flex: 1 1 auto; justify-content: center; }
.crm-how { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.crm-how li { font-size: 13px; color: var(--text-1); line-height: 1.5; }
.crm-admin-actions { display: flex; flex-direction: column; gap: 10px; }
.crm-admin-actions form { display: flex; }
.crm-admin-actions .btn3d { width: 100%; justify-content: center; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .crm-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-sticky { position: static; }
  .crm-referral-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .crm-split, .crm-form-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-queues-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-amounts { grid-template-columns: minmax(0, 1fr); }
  .crm-funnel-row { grid-template-columns: 104px minmax(0, 1fr) 40px; }
  .crm-funnel-rate { display: none; }
}

/* ---------- Design-system reference board (/admin/design-system) ----------
   The board renders every token and component class of this sheet as a live
   specimen, UI-library style. The .ds-* classes below only compose the board
   itself — panels, swatch grids and type rows; every specimen inside them
   wears the production classes unchanged. */
.ds-shell { display: grid; grid-template-columns: 198px minmax(0, 1fr); gap: 20px; align-items: start; }
.ds-rail { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.ds-rail a {
  padding: 8px 12px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--text-1);
  transition: background .12s ease, color .12s ease;
}
.ds-rail a:hover { background: rgba(15, 23, 42, 0.045); color: var(--text-0); }
.ds-rail-label {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-2); margin: 14px 12px 6px;
}
.ds-rail-label:first-child { margin-top: 0; }

.ds-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.ds-grid > .ds-panel { grid-column: span 4; display: flex; flex-direction: column; }
.ds-grid > .ds-panel.ds-span-6 { grid-column: span 6; }
.ds-grid > .ds-panel.ds-span-8 { grid-column: span 8; }
.ds-grid > .ds-panel.ds-span-12 { grid-column: span 12; }

.ds-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--stroke); }
.ds-head .ds-ico {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--accent-1);
}
.ds-head strong { font-size: 13.5px; font-weight: 600; color: var(--text-0); }
.ds-head code { margin-left: auto; }
.ds-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ds-body.ds-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.ds-note { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.55; }

.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; }
.ds-swatch { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-swatch .ds-chip { height: 42px; border-radius: 8px; border: 1px solid var(--stroke-hairline); }
.ds-swatch code { align-self: flex-start; }
.ds-swatch .ds-hex { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-1); }
.ds-swatch .ds-use { font-size: 10.5px; color: var(--text-2); line-height: 1.4; }

.ds-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-row-label {
  flex: 0 0 84px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-2);
}
.ds-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ds-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-1); }
.ds-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-0); }

/* Fixed-position feedback components render inline inside a board stage */
.ds-stage {
  position: relative; padding: 14px;
  border: 1px dashed var(--stroke-strong); border-radius: var(--r-md);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 10px;
}
.ds-stage .toast-confirm {
  position: relative; transform: none; opacity: 1; visibility: visible;
  max-width: none; pointer-events: auto; transition: none;
}
.ds-stage .toast-confirm .toast-bar-fill { animation: none; }
.ds-stage .confirm-modal { position: static; background: transparent; padding: 0; display: block; }

.ds-type-row { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--stroke-hairline); }
.ds-type-row:last-of-type { border-bottom: 0; }
.ds-type-sample { flex: 0 0 190px; white-space: nowrap; color: var(--text-0); }
.ds-type-meta { font-size: 11.5px; color: var(--text-2); }

.ds-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-token {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 8px;
  border-radius: 6px; background: var(--panel-2); border: 1px solid var(--stroke);
  color: var(--text-1);
}
.ds-radius { display: flex; gap: 12px; align-items: flex-end; }
.ds-radius > div { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 10.5px; color: var(--text-2); }
.ds-radius span { width: 44px; height: 44px; background: rgba(37, 99, 235, 0.10); border: 1px solid rgba(37, 99, 235, 0.35); }
.ds-shadows { display: flex; gap: 10px; }
.ds-shadow {
  flex: 1; min-width: 110px; padding: 12px 6px; text-align: center;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  font-size: 10.5px; color: var(--text-2);
}

.ds-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--text-1); line-height: 1.55; }
.ds-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-do, .ds-dont { border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; line-height: 1.5; border: 1px solid; }
.ds-do { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.ds-dont { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.ds-do strong, .ds-dont strong { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; }
.ds-map { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ds-map th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-2);
  padding: 6px 8px; border-bottom: 1px solid var(--stroke);
}
.ds-map td { padding: 7px 8px; border-bottom: 1px solid var(--stroke-hairline); vertical-align: top; color: var(--text-1); }
.ds-map tr:last-child td { border-bottom: 0; }

@media (max-width: 1250px) {
  .ds-grid > .ds-panel, .ds-grid > .ds-panel.ds-span-8 { grid-column: span 6; }
  .ds-body.ds-cols { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .ds-shell { grid-template-columns: 1fr; }
  .ds-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ds-rail-label { display: none; }
  .ds-rail a { border: 1px solid var(--stroke); background: var(--panel); }
}
@media (max-width: 760px) {
  .ds-grid > .ds-panel, .ds-grid > .ds-panel.ds-span-6, .ds-grid > .ds-panel.ds-span-8 { grid-column: span 12; }
  .ds-duo { grid-template-columns: 1fr; }
  .ds-type-sample { flex-basis: 130px; }
}

/* Save Draft carries the last autosave on a small line under its label
   ("Autosaved 11:41 am"); the state tints it while saving or on trouble. */
.draft-btn { flex-direction: column; justify-content: center; gap: 1px; line-height: 1.15; }
.draft-btn-meta { font-size: 10.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.draft-btn-meta:has(.autosave-label:empty) { display: none; }
.draft-btn-meta.is-saving { color: var(--accent-1); }
.draft-btn-meta.is-dirty { color: var(--warn); }
.draft-btn-meta.is-failed { color: var(--bad); }

/* ---------- Financial Performance & Trend Analysis (credit assessment) ----
   Hand-rolled bars/line in the same idiom as the portfolio charts: hairline
   gridlines on the ticks, slim rounded bars, compact value labels without an
   RM prefix. Depth comes from hairlines and shadow only; the amber tint is
   reserved for dummy/estimated periods and comparability warnings. */
.fta-card { margin-top: 20px; scroll-margin-top: 84px; }
.fta-sub { margin: 0 0 14px; font-size: 12.5px; }
.fta-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fta-pill {
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--stroke); background: var(--panel);
  font-size: 12px; color: var(--text-1);
}
.fta-pill.active {
  background: rgba(37, 99, 235, 0.10); border-color: rgba(37, 99, 235, 0.45);
  color: var(--accent-0); font-weight: 600;
}
.fta-filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.fta-filter { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.fta-filter > .muted { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }
.fta-filter .select3d { min-width: 170px; }
.fta-checks { display: flex; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2); }
.fta-filter-graph { min-width: auto; }
.fta-graph-toggle { display: inline-flex; align-self: flex-start; width: fit-content; border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; }
.fta-toggle { padding: 6px 16px; cursor: pointer; border: 0; background: var(--panel); font-size: 12px; color: var(--text-1); flex: 1; text-align: center; white-space: nowrap; }
.fta-toggle.active { background: var(--accent-0); color: #fff; font-weight: 600; }
.fta-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.fta-period {
  padding: 12px 14px; border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 4px;
}
.fta-period.dummy { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); }
.fta-period-label { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.fta-period-value { font-size: 20px; font-weight: 700; color: var(--accent-0); font-variant-numeric: tabular-nums; }
.fta-period.dummy .fta-period-value { color: var(--tl-amber); }
.fta-period-sub { font-size: 11.5px; }
.fta-changes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fta-chip {
  display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--stroke); background: var(--panel-2); color: var(--text-1);
}
.fta-chip-increasing { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.fta-chip-decreasing { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.fta-chip-stable { background: var(--surface-strong); border-color: var(--stroke-strong); color: var(--text-1); }
.fta-note {
  margin: 0 0 8px; padding: 9px 12px; border-radius: var(--r-md); font-size: 12.5px;
  background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd); color: var(--tl-amber);
}
.fta-chart-wrap { margin: 6px 0 14px; }
.fta-chart-title { display: block; font-size: 13.5px; margin-bottom: 10px; }
.fta-empty { font-size: 12.5px; margin: 4px 0; }
.fta-chart { display: flex; gap: 10px; }
.fta-yaxis { flex: 0 0 62px; display: flex; flex-direction: column; }
.fta-ytitle { font-size: 9px; color: var(--text-2); margin-bottom: 8px; white-space: nowrap; }
.fta-yticks { height: 220px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
.fta-yticks span { font-size: 9px; line-height: 1; color: var(--text-2); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.fta-plot { flex: 1; min-width: 0; position: relative; height: 220px; }
.fta-grid { position: absolute; inset: 0; pointer-events: none; }
.fta-grid i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--stroke); }
.fta-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 18px; }
.fta-bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.fta-bar-val { font-size: 9.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.fta-bar { width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; background: var(--accent-0); }
.fta-bar.dummy { background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd); border-bottom: 0; }
.fta-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fta-svg polyline { fill: none; stroke: var(--accent-0); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fta-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent-0); border: 2px solid var(--panel); box-shadow: var(--shadow-1); }
.fta-dot-val { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.fta-xlabels { display: flex; gap: 18px; margin: 8px 0 0 72px; }
.fta-xlabels span { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.fta-read { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.fta-interp { margin: 0 0 4px; font-size: 12.5px; }
.fta-hint { font-size: 12px; margin: 0; }
.fta-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fta-table caption { caption-side: top; text-align: left; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px; }
.fta-table th, .fta-table td { padding: 7px 10px; border-bottom: 1px solid var(--stroke); text-align: right; font-variant-numeric: tabular-nums; }
.fta-table th:first-child, .fta-table td:first-child { text-align: left; }
.fta-table thead th { color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
@media (max-width: 720px) {
  .fta-filter { min-width: 100%; }
  .fta-xlabels { margin-left: 0; }
}


/* ===========================================================================
   Access administration (docs/18-dynamic-access-roles.md): officer roster,
   access profile, role catalogue, Role & Permission Matrix, departments and
   access audit. Built on the console tokens; no new colours.
   =========================================================================== */
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--surface-strong); border: 1px solid var(--stroke); color: var(--text-1);
  white-space: nowrap;
}
.acc-role-chip .acc-dept { color: var(--text-2); font-weight: 600; letter-spacing: 0.2px; }
.acc-role-chip.general { background: var(--tl-blue-soft); border-color: var(--tl-blue-bd); color: var(--tl-blue); }
.acc-role-chip.platform { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.35); color: var(--accent-0); }
.acc-role-chip.legacy { background: var(--panel); border-style: dashed; color: var(--text-2); }
.acc-officer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-officer a { font-weight: 600; font-size: 13px; color: var(--text-0); text-decoration: none; }
.acc-officer a:hover { color: var(--accent-0); text-decoration: underline; }
.acc-officer .muted { font-size: 12px; }
.acc-avatar {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(37, 99, 235, 0.10); color: var(--accent-0);
}
.acc-avatar.lg { width: 48px; height: 48px; font-size: 17px; }
.acc-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--stroke); }
.acc-filter .input3d { flex: 1 1 240px; min-width: 200px; }
.acc-filter .select3d { flex: 0 1 190px; }
.acc-count { font-size: 12.5px; color: var(--text-2); margin-left: auto; }

.acc-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.acc-stack { display: grid; gap: 16px; }
@media (max-width: 1100px) { .acc-split { grid-template-columns: 1fr; } }

.acc-profile-facts { display: grid; gap: 0; }
.acc-fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--stroke); font-size: 13px; }
.acc-fact:last-child { border-bottom: 0; }
.acc-fact .k { color: var(--text-2); }
.acc-fact .v { font-weight: 500; color: var(--text-0); text-align: right; }

.acc-checks { display: grid; gap: 8px; }
.acc-check-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--stroke); background: var(--surface); color: var(--text-1); }
.acc-check-item.warning { background: var(--tl-amber-soft); border-color: var(--tl-amber-bd); }
.acc-check-item.info { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.22); }
.acc-check-item .ico { flex: 0 0 auto; margin-top: 1px; }
.acc-check-item.warning .ico { color: var(--tl-amber); }
.acc-check-item.info .ico { color: var(--accent-0); }
.acc-check-item.clear { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); font-weight: 500; }

.acc-perm-role { border: 1px solid var(--stroke); border-radius: var(--r-md); margin-bottom: 10px; background: var(--panel); }
.acc-perm-role:last-child { margin-bottom: 0; }
.acc-perm-role > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13px; }
.acc-perm-role > summary::-webkit-details-marker { display: none; }
.acc-perm-role > summary .chev { margin-left: auto; transition: transform 0.15s ease; color: var(--text-2); }
.acc-perm-role[open] > summary .chev { transform: rotate(180deg); }
.acc-perm-role .acc-perm-body { padding: 0 14px 14px; }
.acc-perm-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; background: var(--surface-strong); color: var(--text-1); margin: 0 4px 4px 0; }
.acc-perm-code.manage { background: rgba(37, 99, 235, 0.08); color: var(--accent-0); }
.acc-perm-code.approve { background: var(--tl-green-soft); color: var(--tl-green); }

.acc-inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.acc-inline-form .span-all { grid-column: 1 / -1; }

/* Role catalogue */
.acc-section { margin-top: 18px; }
.acc-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.acc-section-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-0); }
.acc-section-head .muted { font-size: 12.5px; }
.acc-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.acc-role-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acc-role-card:hover { border-color: var(--accent-0); box-shadow: var(--shadow-3); }
.acc-role-card:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 2px; }
.acc-role-card.is-inactive { background: var(--surface); }
.acc-role-card.is-inactive .acc-role-name { color: var(--text-2); }
.acc-role-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.acc-role-name { font-size: 13.5px; font-weight: 600; color: var(--text-0); }
.acc-role-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-2); }
.acc-role-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); margin-top: auto; }
.acc-tier-pill { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--surface-strong); color: var(--text-1); }
.acc-tier-pill.DIRECTOR { background: rgba(37, 99, 235, 0.10); color: var(--accent-0); }
.acc-tier-pill.MANAGER { background: var(--tl-green-soft); color: var(--tl-green); }
.acc-tier-pill.EXECUTIVE { background: var(--tl-amber-soft); color: var(--tl-amber); }
.acc-empty { padding: 18px; border: 1px dashed var(--stroke-strong); border-radius: var(--r-lg); color: var(--text-2); font-size: 13px; text-align: center; }

/* Role & Permission Matrix */
.acc-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-matrix th, .acc-matrix td { padding: 10px 14px; border-bottom: 1px solid var(--stroke); text-align: left; vertical-align: middle; }
.acc-matrix thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-2); background: var(--panel-2); }
.acc-matrix th.cell, .acc-matrix td.cell { width: 92px; text-align: center; }
.acc-matrix .acc-group-row td { background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-1); padding: 9px 14px; }
.acc-matrix .acc-group-row .muted { font-weight: 400; margin-left: 6px; }
.acc-matrix tr.is-outside td:first-child { box-shadow: inset 3px 0 0 var(--tl-amber-bd); }
.acc-matrix tbody tr:not(.acc-group-row):hover td { background: rgba(37, 99, 235, 0.03); }
.acc-matrix .acc-module { font-weight: 500; color: var(--text-0); }
.acc-matrix .acc-module-code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-2); font-weight: 400; }
.acc-matrix .acc-none { color: var(--stroke-strong); }
.acc-tick { width: 17px; height: 17px; accent-color: var(--accent-0); cursor: pointer; }
.acc-tick:disabled { cursor: not-allowed; }
.acc-tick.changed { outline: 2px solid var(--tl-amber); outline-offset: 2px; border-radius: 3px; }
.acc-other { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.acc-other label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-1); cursor: pointer; }
.acc-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); }
.acc-legend b { color: var(--text-1); font-weight: 600; }
.acc-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px 20px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--stroke);
  box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.06);
}
.acc-savebar .field { flex: 1 1 320px; margin: 0; }
.acc-unsaved { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding-bottom: 10px; }
.acc-unsaved.dirty { color: var(--tl-amber); }

/* Departments */
.acc-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-tier-slot { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--panel); color: var(--text-1); text-decoration: none; }
a.acc-tier-slot:hover { border-color: var(--accent-0); color: var(--accent-0); }
.acc-tier-slot.filled::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--tl-green); }
.acc-tier-slot.vacant { border-style: dashed; color: var(--text-2); }
.acc-dept-name { font-weight: 600; color: var(--text-0); }
.acc-modules { font-size: 12px; color: var(--text-2); line-height: 1.5; min-width: 220px; }
.acc-edit-row > td { background: var(--surface); }

/* Access audit */
.acc-diff { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.acc-diff .lbl { color: var(--text-2); margin-right: 2px; }
.acc-diff .add { background: var(--tl-green-soft); color: var(--tl-green); }
.acc-diff .rem { background: var(--tl-red-soft); color: var(--tl-red); text-decoration: line-through; }
.acc-kv { font-size: 12px; color: var(--text-1); line-height: 1.55; }
.acc-kv span { color: var(--text-2); }
.acc-when { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* Visually hidden, still announced by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Keep the matrix save bar above the phone quick bar (same breakpoint). */
@media (max-width: 720px) {
  .acc-savebar { bottom: calc(82px + env(safe-area-inset-bottom)); border-radius: var(--r-lg); border: 1px solid var(--stroke); }
  .acc-savebar .field { flex-basis: 100%; }
}

/* ===========================================================================
   CRM pages & actions (docs/19-crm-pages-and-actions.md): modal forms, record
   drawer, tabs, key/value grids, customer-journey timeline, pipeline board,
   scope banner. Console tokens only.
   =========================================================================== */
.crm-scope {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r-lg); margin-bottom: 16px;
  background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.22);
}
.crm-scope b { display: block; font-size: 13.5px; color: var(--text-0); }
.crm-scope p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.crm-scope .crm-scope-tag { font-size: 12px; font-weight: 700; color: var(--accent-0); letter-spacing: 0.3px; }
.crm-period { display: flex; gap: 6px; flex-wrap: wrap; }

.crm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1100px) { .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-kpi { padding: 16px 18px; }
.crm-kpi .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-2); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.crm-kpi .val { font-size: 25px; font-weight: 700; color: var(--text-0); margin-top: 10px; font-variant-numeric: tabular-nums; line-height: 1.15; word-break: break-word; }
.crm-kpi .val.blue { color: var(--accent-0); }
.crm-kpi .val.green { color: var(--tl-green); }
.crm-kpi .val.orange { color: var(--tl-amber); }
.crm-kpi .sub { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.crm-kpi a.val { text-decoration: none; display: block; }
.crm-kpi a.val:hover { text-decoration: underline; }
.crm-delta-chip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--tl-green-soft); color: var(--tl-green); letter-spacing: 0; text-transform: none; }
.crm-delta-chip.down { background: var(--tl-red-soft); color: var(--tl-red); }

.crm-grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .crm-grid-2 { grid-template-columns: 1fr; } }

.crm-bars { display: flex; align-items: flex-end; gap: 14px; height: 170px; padding: 8px 4px 0; border-bottom: 1px solid var(--stroke); }
.crm-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.crm-bar-col i { display: block; width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px; background: rgba(37, 99, 235, 0.55); min-height: 3px; transition: background 0.15s ease; }
.crm-bar-col:hover i { background: var(--accent-0); }
.crm-bar-col .v { font-size: 11px; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-bar-labels { display: flex; gap: 14px; padding: 6px 4px 0; }
.crm-bar-labels span { flex: 1 1 0; text-align: center; font-size: 11px; color: var(--text-2); }

.crm-progress { height: 10px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.crm-progress i { display: block; height: 100%; border-radius: 999px; background: var(--accent-0); }

/* Table rows that open a drawer */
.table3d tr.crm-row { cursor: pointer; }
.table3d tr.crm-row:hover td { background: rgba(37, 99, 235, 0.035); }
.crm-who b { display: block; font-size: 13px; color: var(--text-0); font-weight: 600; }
.crm-who b a { color: inherit; text-decoration: none; }
.crm-who b a:hover { color: var(--accent-0); text-decoration: underline; }
.crm-who span { display: block; font-size: 12px; color: var(--text-2); margin-top: 1px; }

/* Modal (native <dialog>) */
dialog.crm-modal {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--stroke); border-radius: 16px; background: var(--panel); color: var(--text-0);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.24);
}
dialog.crm-modal.sm { width: min(520px, calc(100vw - 32px)); }
dialog.crm-modal::backdrop, dialog.crm-drawer::backdrop { background: rgba(17, 24, 39, 0.42); }
.crm-modal-form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.crm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--stroke); }
.crm-modal-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.crm-modal-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.crm-modal-body { padding: 18px 22px; overflow-y: auto; }
.crm-modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--stroke); background: var(--panel-2); border-radius: 0 0 16px 16px; }
.crm-close {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--stroke); background: var(--panel-2); color: var(--text-1); cursor: pointer;
}
.crm-close:hover { border-color: var(--accent-0); color: var(--accent-0); }
.crm-form-section { font-size: 12px; font-weight: 600; color: var(--accent-0); padding-bottom: 8px; margin: 4px 0 14px; border-bottom: 1px solid var(--stroke); }
.crm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.crm-form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .crm-form-grid { grid-template-columns: 1fr; } }
.crm-callout { padding: 12px 14px; border-radius: var(--r-md); background: rgba(37, 99, 235, 0.05); border: 1px solid rgba(37, 99, 235, 0.18); font-size: 12.5px; color: var(--text-1); line-height: 1.5; }
.crm-error-summary { padding: 10px 14px; border-radius: var(--r-md); background: var(--tl-red-soft); border: 1px solid var(--tl-red-bd); color: var(--tl-red); font-size: 12.5px; margin-bottom: 14px; }
.crm-error-summary ul { margin: 6px 0 0; padding-left: 18px; }

/* Drawer (native <dialog> pinned right) */
dialog.crm-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100vh; max-height: 100vh;
  width: min(680px, 100vw); max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--stroke);
  background: var(--panel); color: var(--text-0); box-shadow: -18px 0 48px rgba(17, 24, 39, 0.18);
}
dialog.crm-drawer[open] { animation: crm-slide-in 0.18s ease-out; }
@keyframes crm-slide-in { from { transform: translateX(32px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.crm-drawer[open] { animation: none; } }
.crm-drawer-inner { display: flex; flex-direction: column; height: 100%; }
.crm-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--stroke); }
.crm-drawer-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.crm-drawer-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.crm-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 24px; }
.crm-drawer-body[aria-busy="true"] { opacity: 0.55; }

/* Lead header + tabs + key/value cards (drawer and full page share them) */
.crm-person { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.crm-person .crm-avatar { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 16px; background: rgba(37, 99, 235, 0.10); color: var(--accent-0); flex: 0 0 auto; }
.crm-person h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-0); }
.crm-person p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.crm-person .badge3d { margin-left: auto; }
.crm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--stroke); margin-bottom: 16px; overflow-x: auto; }
.crm-tabs a { padding: 9px 0 10px; font-size: 13px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.crm-tabs a:hover { color: var(--text-0); }
.crm-tabs a.active { color: var(--accent-0); border-bottom-color: var(--accent-0); font-weight: 600; }
.crm-panel { border: 1px solid var(--stroke); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; background: var(--panel); }
.crm-panel > h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text-0); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.crm-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.crm-kv .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-2); }
.crm-kv .v { font-size: 13.5px; font-weight: 500; color: var(--text-0); margin-top: 3px; word-break: break-word; }
.crm-kv .v a { color: var(--accent-0); text-decoration: none; }
.crm-kv .v a:hover { text-decoration: underline; }
@media (max-width: 520px) { .crm-kv { grid-template-columns: 1fr; } }
.crm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Customer journey timeline */
.crm-journey { list-style: none; margin: 0; padding: 0; }
.crm-journey li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.crm-journey li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--stroke); }
.crm-journey li:last-child::before { display: none; }
.crm-journey li.done::before { background: var(--tl-green-bd); }
.crm-step-dot { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--stroke-strong); background: var(--panel); color: var(--text-2); font-size: 12px; font-weight: 700; position: relative; z-index: 1; }
.crm-journey li.done .crm-step-dot { border-color: transparent; background: var(--tl-green-soft); color: var(--tl-green); }
.crm-journey li.current .crm-step-dot { border-color: var(--accent-0); color: var(--accent-0); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.crm-journey li.failed .crm-step-dot { border-color: transparent; background: var(--tl-red-soft); color: var(--tl-red); }
.crm-journey li.skipped .crm-step-dot { border-style: dashed; }
.crm-journey b { display: block; font-size: 13.5px; color: var(--text-0); }
.crm-journey li.pending b, .crm-journey li.skipped b { color: var(--text-2); font-weight: 500; }
.crm-journey p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-1); }
.crm-journey small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.crm-journey .crm-src { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-2); background: var(--surface-strong); padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; }

/* Activity / note feed */
.crm-feed { display: grid; gap: 10px; }
.crm-feed-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--stroke); border-radius: var(--r-md); }
.crm-feed-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(37, 99, 235, 0.08); color: var(--accent-0); }
.crm-feed-item b { font-size: 13px; color: var(--text-0); }
.crm-feed-item p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-1); white-space: pre-line; }
.crm-feed-item small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-2); }
.crm-feed-item.overdue { border-color: var(--tl-red-bd); }

/* Pipeline board */
.crm-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .crm-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .crm-kanban { grid-template-columns: 1fr; } }
.crm-kcol { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.crm-kcol h3 { margin: 2px 4px 2px; font-size: 13px; font-weight: 600; color: var(--text-0); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crm-kcol h3 .n { font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--panel); border: 1px solid var(--stroke); padding: 1px 8px; border-radius: 999px; }
.crm-kcard { display: block; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.crm-kcard:hover { border-color: var(--accent-0); box-shadow: var(--shadow-3); }
.crm-kcard:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 2px; }
.crm-kcard b { display: block; font-size: 13px; color: var(--text-0); }
.crm-kcard .co { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.crm-kcard .amt { font-size: 15px; font-weight: 700; color: var(--accent-0); margin-top: 8px; font-variant-numeric: tabular-nums; }
.crm-kcard .meta { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }
.crm-kcol .more { font-size: 12px; color: var(--accent-0); text-decoration: none; padding: 2px 4px; }
.crm-kcol .empty { font-size: 12px; color: var(--text-2); padding: 14px 4px; text-align: center; }

.crm-viewtoggle { display: inline-flex; border: 1px solid var(--stroke); border-radius: 10px; overflow: hidden; }
.crm-viewtoggle a { padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-1); text-decoration: none; background: var(--panel); white-space: nowrap; }
.crm-viewtoggle a.active { background: var(--accent-0); color: #fff; }
.crm-rank { width: 26px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-strong); color: var(--text-1); }
.crm-rank.top { background: rgba(37, 99, 235, 0.12); color: var(--accent-0); }

/* CRM tracking links (docs/19 CRM-2) */
.crm-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .crm-share-grid { grid-template-columns: 1fr; } }
.crm-preview { font-size: 12.5px; line-height: 1.55; color: var(--text-1); background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; white-space: pre-line; word-break: break-word; }
.crm-preview.wa { background: rgba(22, 163, 74, 0.07); border-color: var(--tl-green-bd); }
.crm-success-mark { width: 56px; height: 56px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; font-size: 26px; font-weight: 700; background: var(--tl-green-soft); color: var(--tl-green); }
.crm-copy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-copy-row .input3d { flex: 1 1 220px; min-width: 0; }

/* CRM teams & notifications (docs/19 CRM-4) */
.crm-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.crm-team-card { display: block; padding: 18px 20px; text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.crm-team-card:hover { border-color: var(--accent-0); box-shadow: var(--shadow-3); }
.crm-team-card:focus-visible { outline: 2px solid var(--accent-0); outline-offset: 2px; }
.crm-team-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.crm-team-name { font-size: 15px; font-weight: 600; color: var(--text-0); }
button.crm-note-item { width: 100%; font: inherit; color: inherit; background: var(--panel); cursor: pointer; text-align: left; }
button.crm-note-item:hover { border-color: var(--accent-0); }
button.crm-note-item:not(.is-read) { background: rgba(37, 99, 235, 0.04); border-color: rgba(37, 99, 235, 0.25); }
button.crm-note-item.is-read b { font-weight: 500; }
@media (max-width: 560px) {
  .crm-feed-item { grid-template-columns: 34px minmax(0, 1fr); }
  .crm-feed-item > :nth-child(3) { grid-column: 2; justify-self: start; align-items: flex-start !important; }
}

/* ── CRM Business Card Scanner (docs/19 CRM-6) ─────────────────────── */
.crm-scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .crm-scan-grid { grid-template-columns: 1fr; } }
.crm-scan-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crm-scan-modes .btn3d { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.crm-scan-stage { position: relative; border: 1.5px dashed var(--tl-blue-bd); border-radius: var(--r-lg); background: var(--tl-blue-soft); min-height: 240px; display: grid; place-items: center; overflow: hidden; transition: border-color .15s, background .15s; }
.crm-scan-stage.is-drop { border-color: var(--accent-0); background: rgba(37, 99, 235, 0.12); }
.crm-scan-stage.is-live, .crm-scan-stage.has-image { border-style: solid; border-color: var(--stroke); background: #0f172a; }
.crm-scan-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 20px; cursor: pointer; width: 100%; }
.crm-scan-empty b { font-size: 15px; color: var(--text-0); }
.crm-scan-empty span { font-size: 13px; color: var(--text-1); }
.crm-scan-empty small { font-size: 12px; color: var(--text-2); }
.crm-scan-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--panel); color: var(--accent-0); border: 1px solid var(--tl-blue-bd); margin-bottom: 6px; }
.crm-scan-stage video, .crm-scan-stage img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.crm-scan-stage video[hidden], .crm-scan-stage img[hidden], .crm-scan-frame[hidden] { display: none; }
.crm-scan-frame { position: absolute; inset: 14% 10%; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.35); pointer-events: none; }
.crm-scan-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.crm-scan-actions [hidden] { display: none; }
.crm-scan-actions .btn3d.is-busy { opacity: .7; cursor: progress; }
.crm-scan-status { padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--tl-blue-bd); background: var(--tl-blue-soft); color: var(--text-0); font-size: 13px; margin-bottom: 16px; }
.crm-scan-status[hidden] { display: none; }
.crm-scan-status.is-good { border-color: var(--tl-green-bd); background: var(--tl-green-soft); color: var(--tl-green); }
.crm-scan-status.is-warn { border-color: var(--tl-amber-bd); background: var(--tl-amber-soft); color: var(--tl-amber); }
.crm-scan-status.is-bad { border-color: var(--tl-red-bd); background: var(--tl-red-soft); color: var(--tl-red); }

/* ── CRM Integrations (docs/19 CRM-6) ──────────────────────────────── */
.crm-int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .crm-int-grid { grid-template-columns: 1fr; } }
.crm-int-card { display: block; padding: 18px 20px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.crm-int-card:hover { border-color: var(--tl-blue-bd); transform: translateY(-1px); }
.crm-int-card.is-active { border-color: var(--accent-0); box-shadow: 0 0 0 3px var(--tl-blue-soft); }
.crm-int-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.crm-int-head strong { font-size: 15px; color: var(--text-0); }
.crm-int-card > p { font-size: 12.5px; margin: 6px 0 14px; }
.crm-int-note { font-size: 12px; margin: 10px 2px 18px; }
.crm-int-loghead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-int-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.crm-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-fchip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--panel); color: var(--text-1); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.crm-fchip:hover { border-color: var(--tl-blue-bd); color: var(--accent-0); }
.crm-fchip.active { background: var(--tl-blue-soft); border-color: var(--tl-blue-bd); color: var(--accent-0); }
.crm-mono { font-family: var(--font-mono); font-size: 12.5px; }
.table3d tr.crm-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--tl-red); }
.table3d td.crm-mono { white-space: nowrap; }
.crm-audit-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 10px; padding: 14px; margin-bottom: 18px; align-items: center; }
@media (max-width: 860px) { .crm-audit-filters { grid-template-columns: 1fr 1fr; } .crm-audit-filters .input3d { grid-column: 1 / -1; } }
.crm-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .crm-tier-grid { grid-template-columns: 1fr; } }
.crm-tier-grid .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.crm-tier-role { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--stroke); }
.crm-preview-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.crm-preview { margin-top: 18px; }
@media (max-width: 760px) { .crm-preview .crm-kv { grid-template-columns: 1fr 1fr !important; } }
.table3d tr.crm-row-link { cursor: pointer; }
.table3d tr.crm-row-link:hover td { background: var(--tl-blue-soft); }
#preview { scroll-margin-top: 150px; }

/* --- Deal Journey (docs/20): journey bar, Next step, stage tracker --------- */
.deal-journey { margin-bottom: 18px; }
.dj-bar { list-style: none; margin: 0; padding: 14px 16px 6px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.dj-stage { display: flex; gap: 8px; align-items: flex-start; min-width: 0; padding: 8px 8px 10px; border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--panel); }
.dj-marker { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--stroke); }
.dj-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dj-label { font-size: 12.5px; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.dj-detail { font-size: 11.5px; color: var(--text-2); line-height: 1.35; overflow-wrap: anywhere; }
.dj-link { font-size: 11.5px; font-weight: 600; color: var(--accent-0); text-decoration: none; }
.dj-link:hover { text-decoration: underline; }
.dj-done .dj-marker { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.dj-current { border-color: var(--tl-blue-bd); background: var(--tl-blue-soft); }
.dj-current .dj-marker { background: var(--accent-0); border-color: var(--accent-0); color: #fff; }
.dj-current .dj-label { color: var(--accent-0); }
.dj-stopped .dj-marker { background: var(--tl-red-soft); border-color: var(--tl-red-bd); color: var(--tl-red); }
.dj-upcoming .dj-label { color: var(--text-2); font-weight: 500; }
.dj-next { margin: 8px 16px 16px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; }
.dj-next-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dj-next-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-2); }
.dj-next-title { font-size: 15px; font-weight: 600; color: var(--text-0); }
.dj-next-body { font-size: 13px; color: var(--text-1); }
.dj-next .note-amber { margin-top: 4px; }
.dj-blockers { font-size: 12.5px; color: var(--tl-red); border: 1px solid var(--tl-red-bd); background: var(--tl-red-soft); border-radius: var(--r-sm); padding: 8px 12px; }
.dj-blockers-head { font-weight: 600; margin-bottom: 2px; }
.dj-blockers ul { margin: 0; padding-left: 18px; }
.dj-next-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.dj-next-actions form { margin: 0; }
.dj-you-can { font-size: 12px; color: var(--tl-green); font-weight: 500; }
.dj-not-you { font-size: 12.5px; font-weight: 600; color: var(--tl-amber); background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 4px; }
@media (max-width: 1100px) { .dj-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .dj-bar { grid-template-columns: 1fr; gap: 6px; padding: 12px 12px 4px; }
  .dj-stage { padding: 8px 10px; }
  .dj-next { margin: 8px 12px 12px; }
}

.stage-tracker .card-body { padding-top: 6px; }
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.st-step { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dashed var(--stroke); }
.st-step:last-child { border-bottom: 0; }
.st-marker { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; border: 1px solid var(--stroke); color: var(--text-2); background: var(--panel); }
.st-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; font-size: 13px; color: var(--text-1); line-height: 1.45; }
.st-role { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--stroke); border-radius: 999px; padding: 1px 7px; }
.st-here { font-size: 12px; font-weight: 700; color: var(--accent-0); }
.st-note { flex-basis: 100%; font-size: 12px; color: var(--text-1); }
.st-link { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--accent-0); text-decoration: none; }
.st-done .st-marker { background: var(--tl-green-soft); border-color: var(--tl-green-bd); color: var(--tl-green); }
.st-current .st-marker { background: var(--accent-0); border-color: var(--accent-0); color: #fff; }
.st-current .st-label { font-weight: 700; color: var(--accent-0); }
.st-skipped .st-label { color: var(--text-2); text-decoration: line-through; }
.st-skipped .st-note { color: var(--text-2); }
.st-upcoming .st-label { color: var(--text-2); }
.st-foot { font-size: 12px; margin-top: 8px; }
.st-remedial { font-size: 12px; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--tl-red-bd); color: var(--text-2); }
.st-remedial.is-active { color: var(--tl-red); font-weight: 600; border-left-color: var(--tl-red); }
.st-remedial a { margin-left: 6px; color: inherit; }
.st-complete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.st-stopped { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tl-red); }

.dj-terms { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; margin: 0 0 14px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--stroke); font-size: 12.5px; color: var(--text-1); }
.dj-chip { margin-left: 8px; }
.dj-part { border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 12px 14px; }
.dj-part > summary, .dj-part-head { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; cursor: default; }
details.dj-part > summary { cursor: pointer; margin-bottom: 0; }
details.dj-part[open] > summary { margin-bottom: 8px; }
.dj-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dj-checklist li { display: flex; gap: 8px; align-items: center; }
.dj-checklist .ok { color: var(--tl-green); font-weight: 700; }
.dj-checklist .wait { color: var(--tl-amber); font-weight: 700; }
.pay-progress { height: 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--stroke); overflow: hidden; }
.pay-progress > span { display: block; height: 100%; background: var(--tl-green); }
.trade-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trade-steps li { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--stroke); color: var(--text-2); }
.trade-steps li.done { color: var(--tl-green); border-color: var(--tl-green-bd); background: var(--tl-green-soft); }
.trade-steps li.current { color: var(--accent-0); border-color: var(--tl-blue-bd); background: var(--tl-blue-soft); }
.handoff-row.unread td:first-child { box-shadow: inset 3px 0 0 var(--accent-0); }
.handoff-row.unread .handoff-title { font-weight: 700; }

/* ---------- Customer portal: phone fixes ---------- */
/* Amounts stay on one line: "RM" never wraps away from its figure, and
   tabular digits keep columns steady. Big tiles cap their size on phones
   and set RM smaller. */
.amount, .fee-row strong, .fee-total strong, .loan-stats strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount .cur { font-size: 0.6em; font-weight: 600; }
.amount-xl { font-size: 24px; font-weight: 700; line-height: 1.2; }
.amount-lg { font-size: 20px; font-weight: 700; line-height: 1.2; }
@media (max-width: 720px) {
  .amount-xl { font-size: 22px; }
}

/* Tables become cards under 640px: "#2 · 23 Dec 2026" and the status chip
   on top, the amount in large type, then the secondary figures as
   label / value lines. The cells' tc-* classes place them; tc-only cells
   exist for the card alone. */
.tc-only { display: none; }
@media (max-width: 640px) {
  .table-cards, .table-cards tbody { display: block; width: 100%; }
  .table-cards thead { display: none; }
  .table-cards tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 10px 12px; padding: 12px 14px;
    border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel);
  }
  .table-cards td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: 13px; }
  .table-cards td.tc-only { display: block; }
  .table-cards span.tc-only { display: inline; }
  .table-cards .tc-no { order: 1; font-weight: 700; color: var(--text-0); }
  .table-cards .tc-no::before { content: "#"; }
  .table-cards .tc-head { order: 2; font-weight: 600; color: var(--text-0); }
  .table-cards .tc-head::before { content: "·"; margin-right: 8px; color: var(--text-2); }
  .table-cards .tc-status { order: 3; margin-left: auto; }
  .table-cards .tc-status .cell-badges { justify-content: flex-end; }
  .table-cards .tc-amount { order: 4; flex: 0 0 100%; font-size: 21px; font-weight: 700; color: var(--text-0); }
  .table-cards .tc-sub {
    order: 5; flex: 0 0 100%;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 12.5px; color: var(--text-1); text-align: right !important;
  }
  .table-cards .tc-sub::before { content: attr(data-label); flex: none; color: var(--text-2); text-align: left; }
  .table-cards .tc-act { order: 6; flex: 0 0 100%; margin-top: 4px; }
  .table-cards .tc-act:not(:has(*)) { display: none; }
  .table-cards .tc-act .btn3d { width: 100%; justify-content: center; }
  .table-cards tr.tc-empty { display: block; }
  .table-cards tr.tc-empty td { text-align: center !important; padding: 12px !important; }
}

/* Touch screens get 44px targets; mouse users keep the compact sizes. */
@media (pointer: coarse) {
  .portal .btn3d, .portal .btn3d.sm { min-height: 44px; }
  .portal .substep, .portal .wizard-tab, .portal .info-subtab { min-height: 44px; }
  .portal .doc-file, .portal .consent-check { min-height: 44px; }
  .portal .mini-pill, .portal .mini-jump button { min-height: 44px; }
  .portal .mini-close { width: 44px; height: 44px; }
  .portal .dropzone { min-height: 64px; }
}

/* Landscape phones with a notch: viewport-fit=cover lets the page run
   under it, so the main column keeps clear of the sides. */
@media (max-width: 980px) {
  .portal .main { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ---------- Sandbox simulation (sandbox/index, x-sandbox-indicator) ----------
   Built from the console tokens: amber marks the sandbox environment (a
   warning state), everything else is the standard card / table / badge set. */
.sbx-env {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--tl-amber-soft); border: 1px solid var(--tl-amber-bd);
  border-left: 4px solid var(--tl-amber); border-radius: var(--r-lg);
  font-size: 12.5px; color: var(--text-1);
}
.sbx-env-group { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.sbx-env-mark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-sm);
  background: #b45309; color: #ffffff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; white-space: nowrap;
}
.sbx-env-mark:hover { color: #ffffff; background: #92400e; }
.sbx-env-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sbx-env-item code { font-family: var(--font-mono); font-size: 12px; color: var(--text-0); }
.sbx-env-group > form { margin: 0; }
.sbx-env-problem { color: var(--bad); font-weight: 600; white-space: normal; }
/* Sandbox session: the bar floats under the topbar on wider screens, on an opaque
   amber so content scrolls behind it. Its height is added to --topbar-h for the
   page content (sandbox-indicator script), so sticky panels sit below it. */
@media (min-width: 900px) {
  .sbx-env.is-floating {
    position: sticky; top: calc(var(--topbar-h-base, 60px) + 8px); z-index: 19;
    background: linear-gradient(var(--tl-amber-soft), var(--tl-amber-soft)), var(--bg-0);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
  }
}
.sbx-env-role { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.sbx-env-role label { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.sbx-env-role select:not(.select3d) { padding: 5px 30px 5px 10px; font-size: 12.5px; max-width: 280px; min-width: 0; background-position: right 9px center; }
.sbx-env-group .btn3d.sm { padding: 5px 11px; }

.sbx-eyebrow {
  display: block; margin-bottom: 2px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-2);
}
.sbx-label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--text-1);
}
.sbx-title { display: block; font-size: 15px; font-weight: 600; color: var(--text-0); }
.sbx-head-sub, .sbx-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.sbx-small { font-size: 12px; }
.sbx-nowrap { white-space: nowrap; }
.sbx-mono, .sbx-ref { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.sbx-ref { font-weight: 600; color: var(--text-0); }
.sbx-text { margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.55; color: var(--text-1); }

.card3d .card-head.sbx-head { flex-wrap: wrap; align-items: flex-start; }
.card3d .card-head.sbx-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.sbx-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbx-head-actions form, .sbx-head > form { margin: 0; }

/* Figures strip: .loan-stats with a sub-line and tone colours */
.sbx-stats strong, .sbx-stats .sbx-sub { display: block; white-space: normal; overflow-wrap: anywhere; }
.sbx-stats strong.tl-good { color: var(--good); }
.sbx-stats strong.tl-warn { color: var(--warn); }
.sbx-stats strong.tl-bad { color: var(--bad); }
.sbx-stats.sbx-boxed { border: 1px solid var(--stroke); border-radius: var(--r-md); margin-top: 14px; }

/* Lifecycle stepper: the active stage is the only coloured one */
.sbx-steps {
  list-style: none; margin: 4px 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
.sbx-steps li {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--stroke); background: var(--panel-2);
  font-size: 12px; color: var(--text-2); line-height: 1.3;
}
.sbx-steps li.is-active { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.06); color: var(--accent-0); font-weight: 600; }
.sbx-step-no {
  flex: 0 0 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-strong); color: var(--text-2); font-size: 11px; font-weight: 600;
}
.sbx-steps li.is-active .sbx-step-no { background: var(--accent-0); color: #ffffff; }

/* Sub-sections inside one card, divided by a hairline */
.sbx-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--stroke); }
.sbx-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sbx-section-head > div:first-child { min-width: 0; }
.sbx-section-head strong { font-size: 13.5px; font-weight: 600; color: var(--text-0); }
.sbx-section-head .action-row form { margin: 0; }

.sbx-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sbx-compare-cell {
  padding: 12px 14px; border: 1px solid var(--stroke); border-left: 3px solid var(--stroke-strong);
  border-radius: var(--r-md); background: var(--panel-2);
}
.sbx-compare-cell.tone-good { border-left-color: var(--tl-green); }
.sbx-compare-cell.tone-warn { border-left-color: var(--tl-amber); }
.sbx-compare-cell.tone-bad { border-left-color: var(--tl-red); }
.sbx-compare-cell .sbx-label { justify-content: space-between; }
.sbx-compare-cell p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-0); }

/* Collapsible blocks (event log, mock integrations) */
.sbx-collapse { border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; }
.sbx-collapse > summary {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 14px; cursor: pointer; list-style: none;
  background: var(--panel-2); font-size: 13px;
}
.sbx-collapse > summary::-webkit-details-marker { display: none; }
.sbx-collapse > summary::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.sbx-collapse[open] > summary::before { transform: rotate(45deg); }
.sbx-collapse[open] > summary { border-bottom: 1px solid var(--stroke); }
.sbx-card-collapse { border-radius: var(--r-lg); }
.sbx-card-collapse > summary { padding: 14px 20px; background: var(--panel); }
.sbx-card-collapse > summary .badge3d { margin-left: auto; }
.sbx-log { max-height: 280px; }

/* Context line (application / facility in focus) */
.sbx-context {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 18px;
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2);
}
.sbx-context-line { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-1); }
.sbx-context-line .sbx-title { display: inline; }
.flash.sbx-flat { margin-bottom: 18px; font-size: 13px; }

/* Row lists (roles, payment options) stack their actions on phones */
.sbx-group-title {
  margin: 18px 0 2px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-2);
}
.sbx-group-title:first-child, .flash.sbx-flat + .sbx-group-title, .sbx-context + .sbx-group-title { margin-top: 0; }
.sbx-list { list-style: none; margin: 0; padding: 0; }
.sbx-row {
  display: flex; align-items: center; gap: 10px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--stroke-hairline);
}
.sbx-row:last-child { border-bottom: 0; }
.sbx-row.is-active { background: rgba(37, 99, 235, 0.04); box-shadow: inset 3px 0 0 var(--accent-0); padding-left: 12px; padding-right: 8px; border-radius: var(--r-sm); }
.sbx-row-main { flex: 1; min-width: 0; }
.sbx-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--text-0); }
.sbx-row-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.sbx-row-desc { font-size: 12.5px; color: var(--text-1); line-height: 1.5; margin: 3px 0 0; }
.sbx-row-act { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.sbx-row-act form { margin: 0; }
@media (min-width: 1280px) {
  .sbx-list-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .sbx-list-cols .sbx-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .sbx-list-cols .sbx-row { flex-wrap: wrap; align-items: flex-start; }
  .sbx-list-cols .sbx-row-main { flex: 1 1 300px; }
}
.sbx-amount { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Permitted / blocked capability lists */
.sbx-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.sbx-cap-list { list-style: none; margin: 0; padding: 0; }
.sbx-cap-list li { padding: 9px 0; border-bottom: 1px solid var(--stroke-hairline); font-size: 13px; }
.sbx-cap-list li:last-child { border-bottom: 0; }
.sbx-cap-title { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; color: var(--text-0); }
.sbx-cap-title a { font-size: 12px; font-weight: 500; white-space: nowrap; }

/* Virtual time controls */
.sbx-time { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.sbx-time .sbx-label { margin: 0; }
.sbx-time .action-row form { margin: 0; }
.sbx-time input[type="date"] { width: 170px; padding-top: 6px; padding-bottom: 6px; }
.sbx-start { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.sbx-start > div { flex: 1 1 320px; }
.sbx-start strong { font-size: 13.5px; color: var(--text-0); }
.sbx-start form { margin: 0; }

/* Two equal columns (payments / GL) and the scenario selector split */
.sbx-split-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--stroke); }
.sbx-table { border: 1px solid var(--stroke); border-radius: var(--r-md); max-height: 340px; }
.sbx-gl-event td { background: var(--panel-2); font-size: 12px; color: var(--text-1); }
.sbx-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }

/* Scenario groups and their scenario links */
.sbx-group { border: 1px solid var(--stroke); border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden; }
.sbx-group > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; list-style: none; background: var(--panel-2);
}
.sbx-group > summary::-webkit-details-marker { display: none; }
.sbx-group[open] > summary { border-bottom: 1px solid var(--stroke); }
.sbx-group-name { font-size: 13.5px; font-weight: 600; color: var(--text-0); white-space: nowrap; }
.sbx-group > summary .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbx-count { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sbx-scn { list-style: none; margin: 0; padding: 4px; }
.sbx-scn a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm); color: var(--text-1);
  border-left: 3px solid transparent;
}
.sbx-scn a:hover { background: var(--panel-2); }
.sbx-scn a.is-selected { background: rgba(37, 99, 235, 0.06); border-left-color: var(--accent-0); }
.sbx-scn-main { display: flex; flex-direction: column; min-width: 0; }
.sbx-scn-name { font-size: 13px; font-weight: 500; color: var(--text-0); }
.sbx-scn a .badge3d { flex: 0 0 auto; white-space: nowrap; }
.sbx-inline { display: flex; gap: 8px; align-items: center; }

/* Scenario detail */
.stat-list.sbx-flush { padding: 0; margin: 0 0 16px; }
.sbx-flush .stat-row .sv { text-align: right; overflow-wrap: anywhere; }
.sbx-data .stat-row { align-items: flex-start; }
.sbx-expected { padding: 10px 12px; border-left: 3px solid var(--tl-green); background: var(--tl-green-soft); border-radius: var(--r-sm); color: var(--text-0); margin-bottom: 0; }
.sbx-start-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.sbx-progress { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.sbx-progress .bar { flex: 1; margin: 0; }
.sbx-progress span { font-size: 12px; color: var(--text-2); }

@media (max-width: 1100px) {
  .sbx-split, .sbx-split-even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sbx-compare, .sbx-caps { grid-template-columns: minmax(0, 1fr); }
  .sbx-steps { grid-template-columns: minmax(0, 1fr); }
  .sbx-row { flex-wrap: wrap; }
  .sbx-row-act { flex: 1 1 100%; justify-content: flex-start; }
  .sbx-env-role { flex-wrap: wrap; }
  .sbx-env-role select:not(.select3d) { max-width: 100%; }
  .sbx-time input[type="date"] { width: auto; flex: 1 1 150px; }
}

/* ---------- Financial statement capture (scoring/partials/financial_capture) ---------- */
.fsc-card { margin-bottom: 20px; scroll-margin-top: 84px; }
.fsc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fsc-asof { font-size: 11.5px; }
.fsc-docs-btn { margin-left: auto; }
.fsc-sub { margin: 0 0 12px; font-size: 12.5px; }
.fsc-span { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fsc-span .fin-figure { min-width: 180px; }
.fsc-span-note { font-size: 12px; padding-bottom: 8px; }
.fsc-statements { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-bottom: 12px; }
.fsc-statement { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--panel-2); min-width: 0; }
.fsc-statement legend { padding: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-1); }
.fsc-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 46%); align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.fsc-line .cell-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.fsc-derived { border-top: 1px dashed var(--stroke-strong); margin-bottom: 4px; color: var(--text-0); font-weight: 600; cursor: help; }
.fsc-derived output { text-align: right; font-variant-numeric: tabular-nums; padding-right: 8px; }
.fsc-check { font-size: 12.5px; margin: 0 0 8px; padding: 7px 10px; border-radius: var(--r-md); border: 1px solid; }
.fsc-check.bad { color: var(--tl-red); background: var(--tl-red-soft); border-color: var(--tl-red-bd); }
.fsc-check.good { color: var(--tl-green); background: var(--tl-green-soft); border-color: var(--tl-green-bd); }
.fsc-note { font-size: 11.5px; margin: 0 0 10px; }
.fsc-bank { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.fsc-bank-scroll { overflow-x: auto; }
.fsc-bank-table .cell-input { width: 100%; min-width: 104px; text-align: right; }
.fsc-bank-table td:first-child { white-space: nowrap; }
.fsc-recon { white-space: nowrap; font-size: 11.5px; }
.fsc-ok { color: var(--tl-green); font-weight: 600; }
.fsc-bad { color: var(--tl-red); font-weight: 600; }

/* ---------- Key trends grid + declarations (financial_trend) ---------- */
.fta-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.fta-mini { border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 10px 12px; background: var(--panel); min-width: 0; }
.fta-mini-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--text-0); }
.fta-mini-change { font-size: 11px; font-weight: 600; white-space: nowrap; }
.fta-mini-change.increasing { color: var(--tl-green); }
.fta-mini-change.decreasing { color: var(--tl-red); }
.fta-mini-change.stable, .fta-mini-change.na { color: var(--text-2); }
.fta-mini-plot { position: relative; height: 92px; margin: 16px 0 4px; display: flex; gap: 8px; align-items: stretch; }
.fta-mini-col { flex: 1; min-width: 0; position: relative; }
.fta-mini-bar { position: absolute; left: 12%; right: 12%; border-radius: 3px 3px 0 0; background: var(--accent-0); }
.fta-mini-bar.mgmt { background: repeating-linear-gradient(135deg, var(--accent-0) 0 4px, rgba(37, 99, 235, 0.45) 4px 8px); }
.fta-mini-bar.neg { background: var(--tl-red); border-radius: 0 0 3px 3px; }
.fta-mini-val { position: absolute; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 600; color: var(--text-1); white-space: nowrap; transform: translateY(-120%); }
.fta-mini-zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--stroke-strong); }
.fta-mini-x { display: flex; gap: 8px; }
.fta-mini-x span { flex: 1; min-width: 0; text-align: center; font-size: 9.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fta-mini-formula { margin: 6px 0 0; font-size: 10.5px; color: var(--text-2); }
.fta-subhead { font-size: 13px; margin: 6px 0 8px; display: block; }
.fta-decl { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--accent-0); background: var(--panel-2); font-size: 11.5px; color: var(--text-1); border-radius: 0 var(--r-md) var(--r-md) 0; }
.fta-decl dt { font-weight: 600; display: inline; }
.fta-decl dd { display: inline; margin: 0 10px 0 4px; }
.fta-defs { margin-top: 12px; font-size: 12px; }
.fta-defs summary { cursor: pointer; font-weight: 600; font-size: 12px; color: var(--text-1); }
.fta-defs table { margin-top: 8px; }
.fta-defs td { text-align: left !important; }

/* ---------- Bank statement analysis (scoring/partials/bank_analysis) ---------- */
.bsa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bsa-kpi { border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 9px 12px; background: var(--panel); }
.bsa-kpi-label { display: block; font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.bsa-kpi-value { display: block; font-size: 17px; font-weight: 700; color: var(--accent-0); font-variant-numeric: tabular-nums; margin: 2px 0; }
.bsa-kpi-value.bad { color: var(--tl-red); }
.bsa-kpi-formula { display: block; font-size: 10.5px; color: var(--text-2); }
.bsa-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-2); margin-bottom: 6px; }
.bsa-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.bsa-c { background: var(--tl-green); }
.bsa-d { background: var(--tl-red); }
.bsa-b { background: var(--accent-0); border-radius: 50% !important; }
.bsa-months { position: absolute; inset: 0; display: flex; gap: 10px; }
.bsa-month { flex: 1; min-width: 0; height: 100%; position: relative; }
.bsa-bar { position: absolute; width: 30%; max-width: 22px; }
.bsa-bar.c { background: var(--tl-green); right: 51%; }
.bsa-bar.d { background: var(--tl-red); left: 51%; }
.bsa-dot { position: absolute; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent-0); border: 2px solid var(--panel); }

/* ---------- Source-document side panel (scoring/partials/documents_panel) ---------- */
body { --doc-panel-w: 42vw; }
.doc-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--doc-panel-w); max-width: calc(100vw - 360px); z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--panel); border-left: 1px solid var(--stroke-strong); box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08); }
.doc-panel[hidden] { display: none; }
.doc-panel-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.doc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.doc-panel-pick { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.doc-panel-pick .select3d { width: 100%; }
.doc-panel-actions { display: flex; gap: 8px; }
.doc-panel-frame { flex: 1; min-height: 0; border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.doc-panel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.doc-panel-note, .doc-panel-empty { font-size: 11px; margin: 0; }
.doc-panel-upload { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--stroke); font-size: 12px; }
.doc-panel-fab { position: fixed; right: 18px; bottom: 18px; z-index: 59; box-shadow: var(--shadow-1); }
body.doc-panel-open .doc-panel-fab { display: none; }
body.doc-panel-open .main { margin-right: min(var(--doc-panel-w), calc(100vw - 360px)); }
/* With the panel docked the column is narrow: the header band scrolls away
   instead of pinning, leaving the height for the statement lines. */
body.doc-panel-open .hero { position: static; }
body.doc-panel-resizing { user-select: none; cursor: col-resize; }
body.doc-panel-resizing iframe { pointer-events: none; }
@media (max-width: 900px) {
  .doc-panel { width: 100vw; max-width: 100vw; }
  body.doc-panel-open .main { margin-right: 0; }
}

/* CTOS (SSM-filed accounts) read-through on the capture panel */
.fsc-ctos { display: grid; gap: 3px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--tl-blue-soft); border-left: 3px solid var(--accent-0); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--tl-blue-soft); font-size: 12px; }
.fsc-ctos .muted { font-size: 11.5px; }
.fsc-ctos-none { font-size: 12px; margin: 0 0 12px; }
.fsc-ctos-tag { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--tl-blue-soft); color: var(--accent-0); white-space: nowrap; cursor: help; }
.fsc-ctos-tag.differs { background: var(--tl-amber-soft); color: var(--tl-amber); }