/* DESIGN SYSTEM LOCKED - 2026-05-19 - Type-6.5 Foundry edition.
   Mirrored from prototype/_design-system-type6-5.html.

   Carries everything from Type-6 forward and adds a desktop-class
   interaction layer. Spring motion + soft focus ring (DS-35),
   iPadOS-style segmented control (DS-36), switch / stepper / slider
   (DS-37), Spotlight-style command palette (DS-38), contextual menu
   with keyboard hints (DS-39), inspector rail with detents (DS-40),
   notification stack (DS-41), live-activity pill (DS-42), sectioned
   list rows (DS-43), avatar stack + tooltip (DS-44).

   Calm liquid-glass shell, industrial palette, Manrope sole typeface,
   warm off-white canvas, construction-orange accent, persona-identity
   navy, gold restored from Type-3 for ratings and contractor chips.
   Light is default. Dark is reachable via :root[data-theme="dark"].
   Copy follows the project text rules. No emdashes, no contrarian
   phrasing.

   2026-05-19 patch: added drawer/slideout, approval-timeline, kanban,
   filter-bar, radio-tile, form-row cols, FAB, bubble, photo-grid,
   doc/contract/loan/source/co badge variants, peer-chart nesting fix,
   persona-aware bottom-nav, and `--client` token (plus dark-theme
   parity). */

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

/* ============================================================
   TYPE-6.5 TOKENS
   ============================================================ */
:root {
  /* Canvas + glass surfaces */
  --canvas-1:    #f5f4f0;
  --canvas-2:    #ece9e2;
  --tint-warm:   rgba(232,104,51,0.10);
  --tint-cool:   rgba(29,78,216,0.07);
  --tint-mauve:  rgba(124,58,237,0.06);

  --glass:        rgba(255,255,255,0.66);
  --glass-strong: rgba(255,255,255,0.82);
  --glass-deep:   rgba(255,255,255,0.94);
  --glass-stroke: rgba(26,31,46,0.07);
  --glass-stroke-strong: rgba(26,31,46,0.12);
  --inner-rim:    inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.04);

  /* Ink ramp */
  --ink-1: #1c1c1c;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;
  --ink-5: #d1d5db;
  --ink-6: #e5e7eb;

  /* Brand + state */
  --accent:       #e86833;
  --accent-soft:  #f3884f;
  --accent-tint:  rgba(232,104,51,0.10);
  --accent-line:  rgba(232,104,51,0.26);

  --success:      #2d8a4e;
  --success-tint: rgba(45,138,78,0.10);
  --warning:      #d4a017;
  --warning-tint: rgba(212,160,23,0.13);
  --danger:       #c0392b;
  --danger-tint:  rgba(192,57,43,0.10);
  --info:         #1d4ed8;
  --info-tint:    rgba(29,78,216,0.10);
  --purple:       #7c3aed;
  --purple-tint:  rgba(124,58,237,0.10);

  --gold:         #f5b94a;
  --gold-tint:    rgba(245,185,74,0.14);
  --gold-line:    rgba(245,185,74,0.32);

  /* Client persona accent (teal). Matches the client-portal rail
     gradient and bottom-nav active state on mobile client surfaces. */
  --client:       #0891b2;
  --client-tint:  rgba(8,145,178,0.12);
  --client-line:  rgba(8,145,178,0.30);

  --identity-navy: #1a1f2e;

  /* Radii */
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    26px;
  --r-2xl:   32px;
  --r-pill:  999px;

  /* Elevation */
  --shadow-1: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(20,22,24,0.04), 0 8px 22px rgba(20,22,24,0.05);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(20,22,24,0.06), 0 16px 38px rgba(20,22,24,0.08);
  --shadow-pop: 0 0 0 1px var(--accent-line), 0 14px 36px rgba(232,104,51,0.18);

  /* Type stack. Manrope only, on UI and on data. */
  --font-ui:   'Manrope', system-ui, -apple-system, 'SF Pro Text', sans-serif;
  --font-data: 'Manrope', system-ui, -apple-system, 'SF Pro Text', sans-serif;

  /* Motion. Default ease, spring for overshoot, soft out for press. */
  --ease:           cubic-bezier(0.32, 0.72, 0.22, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-soft:  cubic-bezier(0.22, 0.68, 0.16, 1);

  /* Focus ring. Three-layer halo for legibility on both glass and
     opaque surfaces. The "info" variant is used on controls that
     already carry the accent color, so focus remains distinguishable. */
  --focus-ring:      0 0 0 2px var(--canvas-1), 0 0 0 4px rgba(232,104,51,0.55);
  --focus-ring-info: 0 0 0 2px var(--canvas-1), 0 0 0 4px rgba(29,78,216,0.55);

  /* Backward-compat aliases for legacy --color-* tokens used inline in
     existing prototypes. New code should use the Type-6.5 tokens above. */
  --color-sidebar:        var(--identity-navy);
  --color-bg:             var(--canvas-1);
  --color-surface:        #ffffff;
  --color-accent:         var(--accent);
  --color-accent-dim:     var(--accent-tint);
  --color-success:        var(--success);
  --color-success-dim:    var(--success-tint);
  --color-warning:        var(--warning);
  --color-warning-dim:    var(--warning-tint);
  --color-danger:         var(--danger);
  --color-danger-dim:     var(--danger-tint);
  --color-info:           var(--info);
  --color-info-dim:       var(--info-tint);
  --color-purple:         var(--purple);
  --color-purple-dim:     var(--purple-tint);
  --color-text:           var(--ink-1);
  --color-muted:          var(--ink-3);
  --color-border:         var(--glass-stroke);
  --color-hover:          var(--glass-strong);
  --color-sidebar-text:   rgba(255,255,255,0.65);
  --color-sidebar-hover:  rgba(255,255,255,0.08);
  --color-sidebar-active: var(--accent);
  --sidebar-width:        252px;
  --header-height:        56px;
  --radius-sm:            var(--r-sm);
  --radius-md:            var(--r-md);
  --radius-lg:            var(--r-lg);
  --shadow-sm:            var(--shadow-1);
  --shadow-md:            var(--shadow-1);
  --shadow-lg:            var(--shadow-2);
  --shadow-xl:            var(--shadow-2);
}

:root[data-theme="dark"] {
  --canvas-1: #0f1420;
  --canvas-2: #161c2a;
  --tint-warm:  rgba(232,104,51,0.13);
  --tint-cool:  rgba(29,78,216,0.13);
  --tint-mauve: rgba(124,58,237,0.10);

  --glass:        rgba(28,34,49,0.62);
  --glass-strong: rgba(34,40,56,0.78);
  --glass-deep:   rgba(40,46,63,0.92);
  --glass-stroke: rgba(255,255,255,0.06);
  --glass-stroke-strong: rgba(255,255,255,0.10);
  --inner-rim:    inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.20);

  --ink-1: #f1f3f6;
  --ink-2: #c8cdd6;
  --ink-3: #9aa3b3;
  --ink-4: #6c7384;
  --ink-5: #3a4254;
  --ink-6: #2a3144;

  --accent-tint: rgba(232,104,51,0.18);
  --accent-line: rgba(232,104,51,0.34);
  --success-tint: rgba(45,138,78,0.16);
  --warning-tint: rgba(212,160,23,0.18);
  --danger-tint:  rgba(192,57,43,0.18);
  --info-tint:    rgba(29,78,216,0.20);
  --purple-tint:  rgba(124,58,237,0.18);
  --client-tint:  rgba(8,145,178,0.20);
  --client-line:  rgba(8,145,178,0.38);

  --shadow-1: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.35);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.40), 0 18px 44px rgba(0,0,0,0.50);

  --focus-ring:      0 0 0 2px var(--canvas-1), 0 0 0 4px rgba(232,104,51,0.65);
  --focus-ring-info: 0 0 0 2px var(--canvas-1), 0 0 0 4px rgba(96,140,232,0.65);

  --color-surface: #1c2230;
  --color-hover:   var(--glass-strong);
}

/* ============================================================
   BASE + TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
  background: var(--canvas-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(1100px 700px at 88% -10%, var(--tint-warm), transparent 60%),
    radial-gradient(900px 600px at -8% 35%, var(--tint-cool), transparent 60%),
    radial-gradient(700px 600px at 60% 110%, var(--tint-mauve), transparent 60%);
  background-attachment: fixed;
  transition: background-color 0.18s, color 0.18s;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-ui); }
code, kbd { font-family: var(--font-data); font-size: 0.92em; color: var(--ink-2); }
small { font-size: 11px; color: var(--ink-3); }

/* Tabular figures on every numeric surface called out by DS 6.5. The
   selector list is wider than the design system file because production
   HTML carries a few extra hooks (stat-value, .num, .mono, etc.). */
.num,
.mono,
.font-data,
.donut-center,
.donut-legend-row .num,
.progress-num,
.row-disclose summary .num,
.compare-grid .num,
.rating-tile-score,
.shell-card .meta,
.ds5-search,
.ds5-search kbd,
.stat-value,
.project-stat-value,
.benchmark-cell,
.peer-chart-value,
td.num,
th.num,
code,
kbd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================
   TYPE-6.5 SHELL
   ============================================================ */
.ds5-shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }

.ds5-rail {
  position: sticky; top: 18px; align-self: start;
  height: calc(100vh - 36px);
  margin: 18px 0 0 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-2xl);
  padding: 18px 12px 14px;
  overflow-y: auto;
  box-shadow: var(--shadow-1);
}
.ds5-rail::-webkit-scrollbar { width: 6px; }
.ds5-rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 4px; }

.ds5-rail-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--glass-stroke);
  margin-bottom: 8px;
}
.ds5-rail-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 6px 14px rgba(232,104,51,0.32);
  flex: 0 0 auto;
}
.ds5-rail-title { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.ds5-rail-sub   { font-size: 11px; color: var(--ink-3); }

.ds5-rail .group-label,
.ds5-rail .nav-section-label {
  padding: 14px 12px 4px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.ds5-rail a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  border-radius: 8px;
  margin: 1px 4px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.ds5-rail a:hover { background: var(--glass-strong); color: var(--ink-1); }
.ds5-rail a.is-active,
.ds5-rail a.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.ds5-rail a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.ds5-rail a .ds5-rail-id {
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  width: 38px;
}

.ds5-rail-foot {
  margin-top: auto;
  padding: 10px 4px 0;
  border-top: 1px solid var(--glass-stroke);
}
.ds5-rail-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.ds5-rail-user:hover { background: var(--glass-strong); }
.ds5-rail-user .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 600;
}
.ds5-rail-user .who { font-size: 12.5px; font-weight: 600; color: var(--ink-1); }
.ds5-rail-user .role { font-size: 11px; color: var(--ink-3); }

.ds5-main { padding: 28px 36px 96px; max-width: 1280px; }

/* ============================================================
   FLOATING TOPBAR
   ============================================================ */
.ds5-topbar {
  position: sticky; top: 18px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  margin-bottom: 22px;
}
.ds5-topbar .crumb { font-size: 12.5px; color: var(--ink-3); }
.ds5-topbar .crumb strong { color: var(--ink-1); font-weight: 600; }
.ds5-topbar .spacer { flex: 1; }
.ds5-topbar .icon-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.ds5-topbar .icon-btn:hover { background: var(--glass-strong); border-color: var(--glass-stroke); }
.ds5-topbar .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds5-topbar .icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.ds5-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--ink-3);
  min-width: 220px;
  cursor: pointer;
}
.ds5-search:hover { background: var(--glass-deep); }
.ds5-search kbd { background: rgba(0,0,0,0.04); border: none; padding: 1px 6px; }
:root[data-theme="dark"] .ds5-search kbd { background: rgba(255,255,255,0.06); }

.theme-toggle {
  display: inline-flex; align-items: center;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
  font-family: var(--font-data);
  font-size: 11px;
}
:root[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.05); }
.theme-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.theme-toggle svg { width: 12px; height: 12px; }

/* ============================================================
   PAGE HERO + SECTION
   ============================================================ */
.ds5-hero {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-2xl);
  padding: 28px 30px;
  box-shadow: var(--shadow-2);
  margin-bottom: 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.ds5-hero-eyebrow {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ds5-hero h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 10px;
}
.ds5-hero p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 680px;
  margin: 0;
}

.ds5-section { margin-bottom: 28px; scroll-margin-top: 16px; }
.ds5-section-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 6px;
  margin-bottom: 12px;
}
.ds5-section-head h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0;
}
.ds5-section-head .id {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.ds5-section-head .tag {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.ds5-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 0 6px;
  margin: 0 0 16px;
  max-width: 720px;
}

/* ============================================================
   GLASS CARD PRIMITIVE
   ============================================================ */
.glass-card {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-1);
}
.glass-card + .glass-card { margin-top: 12px; }
.glass-card-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 160ms var(--ease), box-shadow 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn:hover { background: var(--glass-deep); border-color: var(--glass-stroke-strong); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  color: #fff;
  background: linear-gradient(170deg, var(--accent-soft), var(--accent));
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(232,104,51,0.22);
}
.btn-primary:hover {
  background: linear-gradient(170deg, #f59964, #d4592a);
  box-shadow: 0 6px 16px rgba(232,104,51,0.30);
  border-color: transparent;
}
.btn-secondary { color: var(--ink-1); background: var(--glass-strong); border-color: var(--glass-stroke); }
.btn-success { color: var(--success); background: var(--success-tint); border-color: rgba(45,138,78,0.24); }
.btn-danger  { color: var(--danger);  background: var(--danger-tint);  border-color: rgba(192,57,43,0.26); }
.btn-warning { color: var(--warning); background: var(--warning-tint); border-color: rgba(212,160,23,0.30); }
.btn-info    { color: var(--info);    background: var(--info-tint);    border-color: rgba(29,78,216,0.30); }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--glass-strong); }
.btn-link { background: transparent; border: none; color: var(--accent); padding: 0; }
.btn-link:hover { color: var(--accent-soft); background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 12px 20px; font-size: 14px; }
.btn-xl { padding: 15px 26px; font-size: 15.5px; }
.btn-icon { padding: 6px; width: 32px; height: 32px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-row, .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 0; line-height: 1.3; }
.form-required { color: var(--danger); }
.form-hint, .form-help { font-size: 11.5px; color: var(--ink-3); }
.form-error { font-size: 11.5px; color: var(--danger); }
.form-input,
.form-select,
.form-textarea,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="date"].form-control,
select.form-control,
textarea.form-control {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 10px 13px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-1);
  transition: border-color 160ms var(--ease), box-shadow 200ms var(--ease), background 160ms var(--ease);
  width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  outline: none;
  background: var(--glass-deep);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px rgba(232,104,51,0.12);
}
.form-input.is-error, .form-control.is-error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(192,57,43,0.10); }
.form-check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-1); }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-size: 10.5px; font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--glass-strong);
  color: var(--ink-2);
  line-height: 1.4;
}
.badge::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge.no-dot::before { display: none; }
/* Extra-small badge modifier (DS 6.5 micro stamp).
   Used for inline IDs, percentages, short codes, table-cell flags.
   Replaces the dozens of inline font-size:10px;padding:2px 6px overrides
   that appear throughout the prototype. */
.badge.badge-xs {
  font-size: 10px;
  padding: 2px 6px;
  line-height: 1;
}
.badge.badge-xs::before { width: 4px; height: 4px; }
.badge-accent  { color: var(--accent);  background: var(--accent-tint);  border-color: var(--accent-line); }
.badge-success { color: var(--success); background: var(--success-tint); border-color: rgba(45,138,78,0.24); }
.badge-warning { color: var(--warning); background: var(--warning-tint); border-color: rgba(212,160,23,0.30); }
.badge-danger  { color: var(--danger);  background: var(--danger-tint);  border-color: rgba(192,57,43,0.26); }
.badge-info    { color: var(--info);    background: var(--info-tint);    border-color: rgba(29,78,216,0.30); }
.badge-purple  { color: var(--purple);  background: var(--purple-tint);  border-color: rgba(124,58,237,0.30); }
.badge-gold    { color: #b8851b;        background: var(--gold-tint);    border-color: var(--gold-line); }
.badge-neutral { color: var(--ink-2);   background: rgba(0,0,0,0.04);    border-color: var(--glass-stroke); }
:root[data-theme="dark"] .badge-neutral { background: rgba(255,255,255,0.06); }

/* Specific named badges used across prototypes. Map them onto the
   semantic tint families so future state additions just inherit. */
.badge-listing-draft                 { color: var(--ink-2);    background: rgba(0,0,0,0.05);     border-color: var(--glass-stroke); }
.badge-listing-active                { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-listing-paused                { color: var(--warning);  background: var(--warning-tint);  border-color: rgba(212,160,23,0.30); }
.badge-source-bid-pending            { color: var(--warning);  background: var(--warning-tint);  border-color: rgba(212,160,23,0.30); }
.badge-source-marketplace-contracted { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-source-open-to-bid            { color: var(--info);     background: var(--info-tint);     border-color: rgba(29,78,216,0.30); }
.badge-source-direct                 { color: var(--accent);   background: var(--accent-tint);   border-color: var(--accent-line); }
.badge-visibility-standard           { color: var(--ink-2);    background: rgba(0,0,0,0.04);     border-color: var(--glass-stroke); }
.badge-visibility-private            { color: var(--purple);   background: var(--purple-tint);   border-color: rgba(124,58,237,0.30); }
.badge-draw-pending                  { color: var(--warning);  background: var(--warning-tint);  border-color: rgba(212,160,23,0.30); }
.badge-draw-approved                 { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-draw-rejected                 { color: var(--danger);   background: var(--danger-tint);   border-color: rgba(192,57,43,0.26); }

/* Document state */
.badge-doc-current                   { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-doc-expiring                  { color: var(--warning);  background: var(--warning-tint);  border-color: rgba(212,160,23,0.30); }
.badge-doc-expired                   { color: var(--danger);   background: var(--danger-tint);   border-color: rgba(192,57,43,0.26); }

/* Contract state */
.badge-contract-active               { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-contract-signed               { color: var(--info);     background: var(--info-tint);     border-color: rgba(29,78,216,0.30); }
.badge-contract-draft                { color: var(--ink-2);    background: rgba(0,0,0,0.04);     border-color: var(--glass-stroke); }

/* Loan offer state */
.badge-loan-sent                     { color: var(--info);     background: var(--info-tint);     border-color: rgba(29,78,216,0.30); }
.badge-loan-accepted                 { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-loan-declined                 { color: var(--danger);   background: var(--danger-tint);   border-color: rgba(192,57,43,0.26); }
.badge-loan-expired                  { color: var(--ink-2);    background: rgba(0,0,0,0.04);     border-color: var(--glass-stroke); }

/* Source family (project / lead origin). Existing .badge-source-* keys
   above stay untouched; these are the canonical three the page agents
   asked for. */
.badge-source-internal               { color: var(--purple);   background: var(--purple-tint);   border-color: rgba(124,58,237,0.30); }
.badge-source-marketplace            { color: var(--accent);   background: var(--accent-tint);   border-color: var(--accent-line); }
.badge-source-import                 { color: var(--info);     background: var(--info-tint);     border-color: rgba(29,78,216,0.30); }

/* Change order state */
.badge-co-signed                     { color: var(--purple);   background: var(--purple-tint);   border-color: rgba(124,58,237,0.30); }
.badge-co-pending                    { color: var(--warning);  background: var(--warning-tint);  border-color: rgba(212,160,23,0.30); }
.badge-co-approved                   { color: var(--success);  background: var(--success-tint);  border-color: rgba(45,138,78,0.24); }
.badge-co-rejected                   { color: var(--danger);   background: var(--danger-tint);   border-color: rgba(192,57,43,0.26); }

:root[data-theme="dark"] .badge-contract-draft,
:root[data-theme="dark"] .badge-loan-expired { background: rgba(255,255,255,0.06); }

.badge-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 18px;
  align-items: center;
}
.badge-grid .machine { font-size: 12.5px; font-weight: 600; color: var(--ink-1); }
.badge-grid .machine small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.badge-grid .states { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   TABLES
   The .data-table / .ds5-table selectors style a typed table. Bare
   <table> elements inside .card or .table-wrap also pick up the same
   visual treatment so prototype HTML that drops a <table> straight
   into a card still renders columnar and aligned.
   ============================================================ */
.ds5-table,
.data-table,
.table-wrap > table,
.card .table-wrap > table,
.card > table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.ds5-table thead th,
.data-table thead th,
.table-wrap > table thead th,
.card .table-wrap > table thead th,
.card > table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 16px;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid var(--glass-stroke);
  white-space: nowrap;
}
:root[data-theme="dark"] .ds5-table thead th,
:root[data-theme="dark"] .data-table thead th,
:root[data-theme="dark"] .table-wrap > table thead th,
:root[data-theme="dark"] .card .table-wrap > table thead th,
:root[data-theme="dark"] .card > table thead th { background: rgba(255,255,255,0.03); }

.ds5-table tbody td,
.data-table tbody td,
.table-wrap > table tbody td,
.card .table-wrap > table tbody td,
.card > table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-stroke);
  color: var(--ink-1);
  vertical-align: top;
  line-height: 1.5;
}
.ds5-table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.table-wrap > table tbody tr:last-child td,
.card .table-wrap > table tbody tr:last-child td,
.card > table tbody tr:last-child td { border-bottom: none; }

.ds5-table tbody tr,
.data-table tbody tr,
.table-wrap > table tbody tr,
.card .table-wrap > table tbody tr,
.card > table tbody tr { transition: background 160ms var(--ease); }
.ds5-table tbody tr:hover,
.data-table tbody tr:hover,
.table-wrap > table tbody tr:hover,
.card .table-wrap > table tbody tr:hover,
.card > table tbody tr:hover { background: var(--glass-strong); }

/* Numeric cells. Right-aligned with tabular figures. Reserve enough
   character width that secondary text in a sibling cell (e.g., a
   project address under a borrower name) cannot collapse the column
   width down to its content. */
.ds5-table .num,
.data-table .num,
.table-wrap > table .num,
.card > table .num,
td.num,
th.num {
  text-align: right;
  font-family: var(--font-data);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 80px;
}
.ds5-table .num.up,
.data-table .num.up,
.positive { color: var(--success); }
.ds5-table .num.down,
.data-table .num.down,
.negative { color: var(--danger); }
.danger { color: var(--danger); }
.warning { color: var(--warning); }

/* Secondary text inside cells (project address under borrower name).
   Rendered small and muted; cannot widen the row above the parent. */
.table-wrap > table td .text-muted,
.card > table td .text-muted,
.ds5-table td .text-muted,
.data-table td .text-muted { display: inline-block; line-height: 1.45; margin-top: 2px; }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bulk-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 14px;
  padding: 10px 16px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  font-size: 12px;
}
.bulk-toolbar .count,
.bulk-toolbar .bulk-count { font-weight: 600; color: var(--accent); }
.bulk-toolbar .spacer,
.bulk-toolbar .bulk-spacer { flex: 1; }
.bulk-toolbar button {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  color: var(--ink-1);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.bulk-toolbar button:hover { background: var(--glass-deep); }
.bulk-toolbar .bulk-clear {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  padding: 5px 9px;
}
.bulk-toolbar .bulk-clear:hover { background: rgba(0,0,0,0.04); color: var(--ink-1); }
:root[data-theme="dark"] .bulk-toolbar .bulk-clear:hover { background: rgba(255,255,255,0.06); }
/* Visibility modifier. Default `.bulk-toolbar` stays visible so existing
   pages that render it inline keep their behavior. Add `.is-hidden` to
   suppress, or pair `.bulk-toolbar.is-collapsible` with `.is-visible`
   for opt-in show/hide. */
.bulk-toolbar.is-hidden { display: none; }
.bulk-toolbar.is-collapsible { display: none; }
.bulk-toolbar.is-collapsible.is-visible {
  display: flex; align-items: center; gap: 10px;
}

/* ============================================================
   PILLS, TABS
   ============================================================ */
.pill-row, .filter-pills {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke);
  flex-wrap: wrap;
}
:root[data-theme="dark"] .pill-row,
:root[data-theme="dark"] .filter-pills { background: rgba(255,255,255,0.05); }
.pill, .filter-pill {
  background: transparent;
  color: var(--ink-2);
  border: none;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
  text-decoration: none;
}
.pill:hover, .filter-pill:hover { color: var(--ink-1); }
.pill.is-active, .pill.active,
.filter-pill.is-active, .filter-pill.active {
  background: var(--glass-deep);
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
}
.pill .count, .filter-pill .count {
  font-family: var(--font-data);
  font-size: 10.5px;
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
}
:root[data-theme="dark"] .pill .count,
:root[data-theme="dark"] .filter-pill .count { background: rgba(255,255,255,0.10); }

.tab-row, .tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--glass-stroke);
}
.tab {
  background: transparent;
  color: var(--ink-3);
  border: none;
  padding: 11px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--ink-1); }
.tab.is-active, .tab.active { color: var(--ink-1); font-weight: 600; }
.tab.is-active::after, .tab.active::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ============================================================
   STATE CARDS (empty / loading / error)
   ============================================================ */
.state-stack {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.state-card, .empty-state {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  padding: 28px 20px 22px;
  text-align: center;
}
.state-icon, .empty-icon {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  display: grid; place-items: center;
  color: var(--ink-2);
}
:root[data-theme="dark"] .state-icon,
:root[data-theme="dark"] .empty-icon { background: rgba(255,255,255,0.05); }
.state-icon svg, .empty-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.state-card.loading .state-icon { color: var(--accent); }
.state-card.loading .state-icon svg { animation: spin 1.4s linear infinite; }
.state-card.error .state-icon { color: var(--danger); }
.state-title, .empty-title { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; color: var(--ink-1); }
.state-desc, .empty-desc { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin-bottom: 14px; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============================================================
   BANNERS
   Banners read at full ink-1 contrast in both themes. Semantic
   identity comes from the tint background alone, no colored left
   stripe, no AI-trope reverse banner.
   ============================================================ */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--ink-1);
  border: 1px solid var(--glass-stroke);
}
.banner + .banner { margin-top: 8px; }
.banner-success { background: rgba(45,138,78,0.18); }
.banner-warning { background: rgba(212,160,23,0.22); }
.banner-info    { background: rgba(29,78,216,0.16); }
.banner-danger  { background: rgba(192,57,43,0.18); }
.banner-impersonation {
  background: linear-gradient(90deg, rgba(212,160,23,0.26), rgba(212,160,23,0.10));
}
:root[data-theme="dark"] .banner-success { background: rgba(45,138,78,0.28); }
:root[data-theme="dark"] .banner-warning { background: rgba(212,160,23,0.28); }
:root[data-theme="dark"] .banner-info    { background: rgba(29,78,216,0.30); }
:root[data-theme="dark"] .banner-danger  { background: rgba(192,57,43,0.30); }
:root[data-theme="dark"] .banner-impersonation {
  background: linear-gradient(90deg, rgba(212,160,23,0.34), rgba(212,160,23,0.14));
}

/* ============================================================
   PERSONA CHIPS + SHELL CARDS + SWITCHER
   ============================================================ */
.persona-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-strong);
}
.persona-chip .dot { width: 6px; height: 6px; border-radius: 50%; }

/* Persona chips are redundant inside a page header, since the sidebar
   identity block already carries the persona. Hide them only when they
   appear in a header container — chips inside deal cards, list rows,
   and the multi-persona switcher modal must still render. */
.page-header .persona-chip,
.ds5-topbar .persona-chip {
  display: none;
}
.chip-builder    { color: var(--accent); }   .chip-builder    .dot { background: var(--accent); }
.chip-lender     { color: var(--info); }     .chip-lender     .dot { background: var(--info); }
.chip-contractor { color: var(--gold); }     .chip-contractor .dot { background: var(--gold); }
.chip-platform   { color: var(--purple); }   .chip-platform   .dot { background: var(--purple); }
.chip-client     { color: #0891b2; }         .chip-client     .dot { background: #0891b2; }
.chip-investor   { color: var(--purple); }   .chip-investor   .dot { background: var(--purple); }

.persona-switcher {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  color: var(--ink-1);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.persona-switcher:hover { background: var(--glass-deep); }
.persona-switcher .caret { font-size: 10px; color: var(--ink-3); margin-left: 2px; }

.persona-switch-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.persona-switch-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  text-decoration: none;
  color: var(--ink-1);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.persona-switch-item:hover { background: var(--glass-deep); border-color: var(--glass-stroke-strong); }
.persona-switch-item.is-active {
  background: var(--accent-tint);
  border-color: var(--accent-line);
}
.persona-switch-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex: 0 0 auto;
}
.persona-switch-label { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.persona-switch-org   { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* DS shell card primitive (used in the "Persona shells" gallery
   section of the design system). */
.shell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shell-card {
  display: block;
  padding: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  transition: transform 240ms var(--ease), box-shadow 280ms var(--ease), border-color 220ms var(--ease);
  text-decoration: none;
  color: inherit;
}
.shell-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent-line);
}
.shell-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.shell-card .nav  { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.shell-card .meta { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }

/* ============================================================
   CHARTS
   ============================================================ */
.spark {
  height: 84px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, var(--accent-tint) 100%);
  margin-top: 12px;
  position: relative;
}
.spark svg { width: 100%; height: 100%; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark .area { fill: var(--accent-tint); stroke: none; }

.donut-row { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.donut-svg { width: 200px; height: 200px; }
.donut-svg .track { fill: none; stroke: rgba(0,0,0,0.07); stroke-width: 16; }
:root[data-theme="dark"] .donut-svg .track { stroke: rgba(255,255,255,0.08); }
.donut-svg .arc {
  fill: none; stroke-width: 16; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.donut-svg .arc-accent  { stroke: var(--accent); }
.donut-svg .arc-warning { stroke: var(--warning); }
.donut-svg .arc-gold    { stroke: var(--gold); }
.donut-svg .arc-info    { stroke: var(--info); }
.donut-center { text-anchor: middle; fill: var(--ink-1); font-family: var(--font-data); }
.donut-legend { display: flex; flex-direction: column; gap: 9px; }
.donut-legend-row {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
  font-size: 12.5px;
}
.donut-legend-row .swatch { width: 12px; height: 12px; border-radius: 3px; }
.donut-legend-row .num { font-family: var(--font-data); color: var(--ink-2); }

.progress-row { display: grid; grid-template-columns: 120px 1fr 80px; gap: 14px; align-items: center; margin-bottom: 12px; }
.progress-label { font-size: 12.5px; color: var(--ink-1); }
.progress-track, .progress-bar {
  height: 6px; background: rgba(0,0,0,0.05);
  border-radius: var(--r-pill); overflow: hidden;
}
:root[data-theme="dark"] .progress-track,
:root[data-theme="dark"] .progress-bar { background: rgba(255,255,255,0.06); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: var(--r-pill); }
.progress-num { text-align: right; font-family: var(--font-data); font-size: 12px; color: var(--ink-2); }

/* ============================================================
   PEER DISTRIBUTION CHART (lender BI)
   Used on lender/bi.html. The distribution curve is a translucent
   ink fill that rises from the baseline, the percentile marker is a
   vertical accent line, axis labels space-between, and the "You · N%
   ile" label sits in the data font on the accent line.
   ============================================================ */
.peer-chart {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
}
.peer-chart + .peer-chart { margin-top: 10px; }
.peer-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.peer-chart-summary {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.peer-chart-value {
  font-family: var(--font-data);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink-1);
}
.peer-chart-position {
  font-size: 12px;
  color: var(--ink-3);
}
.peer-chart-position .you-are,
.you-are {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.peer-chart-stage {
  position: relative;
}
.peer-chart-svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: visible;
}
/* The distribution curve. Translucent ink fill rising from the
   baseline. Slight stroke on the top edge so the silhouette reads
   even on darker glass surfaces. */
.peer-chart-svg .peer-curve,
.peer-curve {
  fill: rgba(28,28,28,0.06);
  stroke: rgba(28,28,28,0.16);
  stroke-width: 1.2;
}
:root[data-theme="dark"] .peer-chart-svg .peer-curve,
:root[data-theme="dark"] .peer-curve {
  fill: rgba(255,255,255,0.08);
  stroke: rgba(255,255,255,0.20);
}
/* Vertical percentile marker. Construction-orange accent line so the
   "you are here" position reads at a glance. */
.peer-chart-svg .peer-marker,
.peer-marker {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
}
/* The "You · 84%ile" callout sitting at the top of the marker line.
   Rendered as an HTML element positioned over the SVG (inside a
   .peer-chart-stage wrapper) so the label is not stretched by
   preserveAspectRatio="none" on the parent chart. SVG <text> with
   the same class is kept as a fallback for legacy markup that has
   not been migrated yet, but new pages should use the HTML pattern. */
.peer-marker-label {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.peer-chart-svg .peer-marker-label,
text.peer-marker-label {
  position: static;
  transform: none;
  font-size: 9px;
  fill: var(--accent);
}
.peer-chart-axis,
.peer-chart-quartiles {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding: 0 2px;
}
.peer-chart-quartiles { font-size: 10px; color: var(--ink-4); }

/* ============================================================
   ROW DISCLOSURE
   ============================================================ */
.row-disclose {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 200ms var(--ease);
}
.row-disclose + .row-disclose { margin-top: 8px; }
.row-disclose[open] { border-color: var(--accent-line); }
.row-disclose summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto 16px;
  gap: 16px; align-items: center;
  padding: 12px 16px;
  font-size: 13px;
}
.row-disclose summary::-webkit-details-marker { display: none; }
.row-disclose summary:hover { background: var(--glass-deep); }
.row-disclose summary .title { font-weight: 600; color: var(--ink-1); }
.row-disclose summary .meta { color: var(--ink-3); font-size: 12px; }
.row-disclose summary .num { font-family: var(--font-data); font-feature-settings: 'tnum' 1; color: var(--ink-2); }
.row-disclose summary .chev {
  width: 14px; height: 14px;
  color: var(--ink-3);
  transition: transform 220ms var(--ease);
}
.row-disclose[open] summary .chev { transform: rotate(90deg); }
.row-disclose-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--glass-stroke);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.row-disclose-body .grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  margin-top: 10px;
}
.row-disclose-body .grid .k { color: var(--ink-3); font-size: 11.5px; }
.row-disclose-body .grid .v { color: var(--ink-1); font-size: 12.5px; }

/* ============================================================
   COMPARISON GRID
   ============================================================ */
.compare-grid, .compare-table {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 1px;
  background: var(--glass-stroke);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compare-grid > div {
  background: var(--glass-strong);
  padding: 0 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-1);
  line-height: 1.2;
}
.compare-grid .crit, .compare-criterion { color: var(--ink-3); font-size: 11.5px; }
.compare-grid .head-cell, .compare-candidate-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 38px 14px 14px;
  min-height: 92px;
  position: relative;
}
.compare-grid .name, .compare-candidate-name { font-size: 14px; font-weight: 600; }
.compare-grid .meta, .compare-candidate-meta { font-size: 11px; color: var(--ink-3); }
.compare-grid .best, .compare-best { background: var(--accent-tint); color: var(--ink-1); }
.compare-grid .best.num,
.compare-grid .best .name { color: var(--ink-1); }
.compare-grid .best-tag, .compare-best-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  color: var(--accent);
  background: var(--glass-deep);
  border: 1px solid var(--accent-line);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0;
  width: fit-content;
}
.compare-grid .num { font-family: var(--font-data); }
.compare-grid > div > .badge { line-height: 1; }

/* ============================================================
   RATING TILES (multi-source rating)
   ============================================================ */
.rating-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rating-tile {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.rating-tile-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rating-tile-row { display: flex; align-items: baseline; gap: 10px; }
.rating-tile-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.rating-tile-stars .empty { color: var(--ink-5); }
.rating-tile-score { font-family: var(--font-data); font-size: 18px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.2px; }
.rating-tile-meta  { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.rating-tile-quote { font-size: 12px; color: var(--ink-2); margin-top: 8px; line-height: 1.55; font-style: italic; }
.rating-tile.empty-state .rating-tile-stars { color: var(--ink-5); }

/* ============================================================
   SCHEDULE CARD
   ============================================================ */
.sched {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 16px;
}
.sched-cal {
  text-align: center;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 10px 0 12px;
}
.sched-cal .month { font-size: 10.5px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.sched-cal .day   { font-size: 26px; font-weight: 700; line-height: 1.05; margin-top: 2px; color: var(--ink-1); }
.sched-cal .dow   { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.sched-title { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.sched-meta  { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.sched-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-stub,
.modal-content,
.modal-container {
  background: var(--glass-deep);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.modal-container.modal-sm { max-width: 420px; }
.modal-container.modal-lg { max-width: 760px; }
.modal-container.modal-xl { max-width: 960px; }
.modal-container > .modal-header,
.modal-container > .modal-foot,
.modal-container > .modal-footer { flex: 0 0 auto; }
.modal-container > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.modal-stub .modal-head, .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-stroke);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.modal-stub .modal-title, .modal-title { font-size: 14.5px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.modal-subtitle { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.modal-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.modal-close:hover { background: var(--glass-strong); color: var(--ink-1); }
.modal-stub .modal-body, .modal-body  { padding: 18px 20px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.modal-stub .modal-foot, .modal-footer  {
  padding: 14px 20px;
  background: rgba(0,0,0,0.02);
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--glass-stroke);
}
:root[data-theme="dark"] .modal-stub .modal-foot,
:root[data-theme="dark"] .modal-footer { background: rgba(255,255,255,0.03); }

.modal-overlay, .modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,20,32,0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.top-aligned, .modal-backdrop.top-aligned { align-items: flex-start; }
.modal-overlay.is-open, .modal-backdrop.is-open,
.modal-overlay[style*="display:flex"], .modal-overlay[style*="display: flex"] { display: flex; }

/* ============================================================
   MAP STAGE
   ============================================================ */
.map-stub, .map-container {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.map-toolbar {
  display: flex; gap: 4px;
  padding: 10px;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid var(--glass-stroke);
}
:root[data-theme="dark"] .map-toolbar { background: rgba(255,255,255,0.03); }
.map-toolbar button {
  background: transparent;
  border: 1px solid var(--glass-stroke);
  color: var(--ink-2);
  font-size: 11.5px; font-weight: 500;
  padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer;
}
.map-toolbar button.is-active { background: var(--accent); color: #fff; border-color: transparent; }
.map-stage {
  height: 240px;
  background: linear-gradient(135deg, rgba(29,78,216,0.10), rgba(232,104,51,0.10));
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
}
:root[data-theme="dark"] .map-stage {
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(29,78,216,0.18), rgba(232,104,51,0.18));
  background-size: 40px 40px, 40px 40px, 100% 100%;
}
.map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-stage polygon { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.map-stage circle { fill: var(--accent); }
.map-legend {
  background: rgba(0,0,0,0.02);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-2);
  border-top: 1px solid var(--glass-stroke);
}
:root[data-theme="dark"] .map-legend { background: rgba(255,255,255,0.03); }
.map-legend strong { color: var(--ink-1); font-weight: 600; }

/* ============================================================
   FLOORPLAN PINS
   ============================================================ */
.pdf-stage {
  background: var(--glass-deep);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  aspect-ratio: 11/8.5;
  position: relative;
  overflow: hidden;
}
.pdf-pin {
  position: absolute;
  width: 22px; height: 28px;
  transform: translate(-50%, -100%);
  cursor: pointer;
  transition: transform 200ms var(--ease);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
}
.pdf-pin:hover { transform: translate(-50%, -106%); }
.pdf-pin svg { width: 100%; height: 100%; }
.pdf-pin.open      .fill { fill: var(--warning); }
.pdf-pin.assigned  .fill { fill: var(--info); }
.pdf-pin.progress  .fill { fill: var(--accent); }
.pdf-pin.verified  .fill { fill: var(--success); }

/* ============================================================
   DS-35  FOCUS RING + PRESS SCALE
   ============================================================ */
.focus-demo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  font-size: 13px; font-weight: 500;
  color: var(--ink-1);
}
.focus-demo.is-focused,
.focus-demo:focus { outline: none; box-shadow: var(--focus-ring); }
.focus-demo.is-focused-info { box-shadow: var(--focus-ring-info); }
.press-demo {
  transition: transform 120ms var(--ease-out-soft);
}
.press-demo:active { transform: scale(0.96); }

/* Scroll-fade utility. Top and bottom mask so contents fall away
   into the surface rather than slicing off mid-line. */
.scroll-fade {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* ============================================================
   DS-36  SEGMENTED CONTROL
   iPadOS-style. The track is relative, the indicator is positioned
   absolutely and animated between segments via CSS variables --seg-x
   and --seg-w set by application JS.
   ============================================================ */
.seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  overflow: hidden;
}
:root[data-theme="dark"] .seg { background: rgba(255,255,255,0.06); }
.seg-indicator {
  position: absolute;
  top: 3px; left: 0;
  transform: translateX(var(--seg-x, 0));
  width: var(--seg-w, 0);
  height: var(--seg-h, 30px);
  background: var(--glass-deep);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  transition: transform 340ms var(--ease-spring), width 340ms var(--ease-spring);
  z-index: 0;
  pointer-events: none;
}
.seg button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 7px 16px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-pill);
  transition: color 220ms var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button.is-active { color: var(--ink-1); }
.seg button:hover:not(.is-active) { color: var(--ink-2); }
.seg button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================================
   DS-37  SWITCH, STEPPER, SLIDER
   ============================================================ */
.switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 26px;
  background: rgba(0,0,0,0.18);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 260ms var(--ease);
  flex: 0 0 auto;
}
:root[data-theme="dark"] .switch { background: rgba(255,255,255,0.18); }
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.05);
  transition: transform 340ms var(--ease-spring), background 220ms var(--ease);
}
.switch.is-on { background: var(--success); }
.switch.is-on::after { transform: translateX(18px); }
.switch.is-accent.is-on { background: var(--accent); }
.switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.stepper {
  display: inline-flex; align-items: stretch;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.stepper button {
  background: transparent;
  border: none;
  width: 30px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
  display: grid; place-items: center;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.stepper button:hover { background: var(--glass-deep); color: var(--ink-1); }
.stepper button:disabled { color: var(--ink-4); cursor: not-allowed; }
.stepper .val {
  min-width: 44px;
  padding: 6px 10px;
  font-family: var(--font-data);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-1);
  text-align: center;
  border-left: 1px solid var(--glass-stroke);
  border-right: 1px solid var(--glass-stroke);
  display: grid; place-items: center;
}

.slider {
  position: relative;
  width: 100%;
  padding: 26px 0 6px;
}
.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 var(--slider-pct, 50%), rgba(0,0,0,0.08) var(--slider-pct, 50%) 100%);
  border-radius: var(--r-pill);
  outline: none;
}
:root[data-theme="dark"] .slider input[type="range"] {
  background: linear-gradient(90deg, var(--accent) 0 var(--slider-pct, 50%), rgba(255,255,255,0.10) var(--slider-pct, 50%) 100%);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(0,0,0,0.06);
  cursor: grab;
  transition: transform 120ms var(--ease);
}
.slider input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.08); cursor: grabbing; }
.slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: #fff; border: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  cursor: grab;
}
.slider .bubble {
  position: absolute;
  top: 0;
  left: var(--slider-pct, 50%);
  transform: translateX(-50%);
  padding: 3px 9px;
  background: var(--glass-deep);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
  pointer-events: none;
  white-space: nowrap;
}
.slider .bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px;
  background: var(--glass-deep);
  border-right: 1px solid var(--glass-stroke);
  border-bottom: 1px solid var(--glass-stroke);
}

/* ============================================================
   DS-38  COMMAND PALETTE  (Spotlight-style)
   ============================================================ */
.cmdk {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--glass-deep);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  backdrop-filter: saturate(180%) blur(32px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-stroke);
}
.cmdk-input-row svg { width: 16px; height: 16px; color: var(--ink-3); stroke: currentColor; fill: none; stroke-width: 1.8; }
.cmdk-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink-1);
}
.cmdk-input::placeholder { color: var(--ink-3); }
.cmdk-input-row kbd {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--glass-stroke);
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
}
:root[data-theme="dark"] .cmdk-input-row kbd { background: rgba(255,255,255,0.07); }
.cmdk-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px 6px 10px;
}
.cmdk-group-label {
  padding: 10px 12px 4px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-1);
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.cmdk-item:hover,
.cmdk-item.is-active {
  background: var(--accent-tint);
}
.cmdk-item-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(0,0,0,0.05);
  color: var(--ink-2);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
:root[data-theme="dark"] .cmdk-item-icon { background: rgba(255,255,255,0.06); }
.cmdk-item.is-active .cmdk-item-icon { background: rgba(232,104,51,0.18); color: var(--accent); }
.cmdk-item-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cmdk-item-body { flex: 1; min-width: 0; }
.cmdk-item-title { font-weight: 500; }
.cmdk-item-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.cmdk-item-kbd { font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3); }
.cmdk-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.03);
  border-top: 1px solid var(--glass-stroke);
  font-size: 11px;
  color: var(--ink-3);
}
:root[data-theme="dark"] .cmdk-foot { background: rgba(255,255,255,0.03); }
.cmdk-foot kbd {
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--glass-stroke);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 10px;
  margin-right: 4px;
  color: var(--ink-3);
}
:root[data-theme="dark"] .cmdk-foot kbd { background: rgba(255,255,255,0.05); }

/* ============================================================
   DS-39  CONTEXTUAL MENU
   ============================================================ */
.ctx-menu {
  display: inline-block;
  min-width: 240px;
  padding: 6px;
  background: var(--glass-deep);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.ctx-menu-section + .ctx-menu-section {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--glass-stroke);
}
.ctx-menu-label {
  padding: 6px 10px 4px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ctx-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.ctx-menu-item:hover {
  background: var(--accent);
  color: #fff;
}
.ctx-menu-item:hover .ctx-menu-kbd,
.ctx-menu-item:hover .ctx-menu-icon { color: rgba(255,255,255,0.85); }
.ctx-menu-item.is-danger { color: var(--danger); }
.ctx-menu-item.is-danger:hover { background: var(--danger); color: #fff; }
.ctx-menu-item.is-disabled { color: var(--ink-4); cursor: not-allowed; }
.ctx-menu-item.is-disabled:hover { background: transparent; color: var(--ink-4); }
.ctx-menu-icon {
  width: 14px; height: 14px;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.ctx-menu-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ctx-menu-body { flex: 1; }
.ctx-menu-kbd {
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.ctx-menu-chev {
  width: 10px; height: 10px;
  color: var(--ink-3);
}

/* ============================================================
   DS-40  INSPECTOR RAIL  (with detents)
   ============================================================ */
.inspector-demo {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: stretch;
}
.inspector-stage {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  padding: 20px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.6;
  min-height: 380px;
}
.inspector {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.inspector-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-stroke);
}
.inspector-head .title { font-size: 13px; font-weight: 600; color: var(--ink-1); flex: 1; }
.inspector-detents {
  display: inline-flex;
  background: rgba(0,0,0,0.05);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 1px;
}
:root[data-theme="dark"] .inspector-detents { background: rgba(255,255,255,0.06); }
.inspector-detents button {
  background: transparent;
  border: none;
  width: 24px; height: 22px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.inspector-detents button.is-active {
  background: var(--glass-deep);
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
}
.inspector-detents button svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 4px;
}
.inspector-section { padding: 6px 14px 12px; }
.inspector-section + .inspector-section { border-top: 1px solid var(--glass-stroke); padding-top: 12px; }
.inspector-section-label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.inspector-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  font-size: 12px;
}
.inspector-kv .k { color: var(--ink-3); }
.inspector-kv .v { color: var(--ink-1); font-weight: 500; }

/* ============================================================
   DS-41  NOTIFICATION STACK
   ============================================================ */
.notif-center {
  width: 360px;
  background: var(--glass-deep);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-stroke);
}
.notif-head .title { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.notif-head .meta { font-size: 11.5px; color: var(--ink-3); }
.notif-group { padding: 8px 8px 12px; }
.notif-group-label {
  padding: 6px 10px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.notif {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background 140ms var(--ease);
  cursor: pointer;
}
.notif + .notif { margin-top: 2px; }
.notif:hover { background: var(--glass-strong); }
.notif-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.notif-icon.info    { background: var(--info-tint);    color: var(--info); }
.notif-icon.success { background: var(--success-tint); color: var(--success); }
.notif-icon.warning { background: var(--warning-tint); color: var(--warning); }
.notif-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.notif-body { min-width: 0; }
.notif-title { font-size: 12.5px; font-weight: 600; color: var(--ink-1); line-height: 1.35; }
.notif-desc { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.notif-time {
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap;
  align-self: start;
  margin-top: 4px;
}

/* Notification list item (topbar dropdown variant).
   Aliases the .notif primitive used inside the modal-notifications
   popover injected by proto.js. Forces flex-row so the icon, body,
   and unread dot sit inline instead of stacking. */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-stroke);
  transition: background 140ms var(--ease);
  text-decoration: none;
  color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--glass-strong); }
.notif-item .notif-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.notif-item .notif-icon.alert  { background: var(--warning-tint); color: var(--warning); }
.notif-item .notif-icon.draw   { background: var(--success-tint); color: var(--success); }
.notif-item .notif-icon.task   { background: var(--info-tint);    color: var(--info); }
.notif-item .notif-icon.budget { background: var(--purple-tint);  color: var(--purple); }
.notif-item .notif-icon.system { background: var(--accent-tint);  color: var(--accent); }
.notif-item .notif-body { flex: 1 1 auto; min-width: 0; }
.notif-item .notif-title { font-size: 13px; font-weight: 600; color: var(--ink-1); line-height: 1.4; }
.notif-item .notif-desc {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-item .notif-time {
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 3px;
  padding-top: 0;
  align-self: auto;
}
.notif-item .notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  margin-top: 8px;
  align-self: flex-start;
}
.notif-item:not(.unread) .notif-dot { display: none; }
.notif-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(0,0,0,0.03);
  border-top: 1px solid var(--glass-stroke);
  font-size: 11.5px;
  color: var(--ink-3);
}
:root[data-theme="dark"] .notif-foot { background: rgba(255,255,255,0.03); }
.notif-foot button {
  background: transparent; border: none; color: var(--accent);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}

/* ============================================================
   DS-42  LIVE ACTIVITY PILL
   Lives inside the topbar between the breadcrumb and the spacer.
   ============================================================ */
.live-activity {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  background: linear-gradient(90deg, rgba(45,138,78,0.12), rgba(45,138,78,0.04));
  border: 1px solid rgba(45,138,78,0.20);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--ink-1);
  transition: background 200ms var(--ease);
}
.live-activity:hover { background: linear-gradient(90deg, rgba(45,138,78,0.18), rgba(45,138,78,0.06)); }
.live-activity .glyph {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.live-activity .glyph svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.live-activity .label { font-weight: 500; }
.live-activity .meta {
  color: var(--ink-3);
  font-family: var(--font-data);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.live-activity.is-warning {
  background: linear-gradient(90deg, rgba(212,160,23,0.16), rgba(212,160,23,0.06));
  border-color: rgba(212,160,23,0.28);
}
.live-activity.is-warning .glyph { background: var(--warning); }
.live-activity.is-accent {
  background: linear-gradient(90deg, rgba(232,104,51,0.16), rgba(232,104,51,0.06));
  border-color: var(--accent-line);
}
.live-activity.is-accent .glyph { background: var(--accent); }
.live-activity .progress-ring {
  width: 22px; height: 22px;
  transform: rotate(-90deg);
}
.live-activity .progress-ring circle.track { fill: none; stroke: rgba(255,255,255,0.30); stroke-width: 3; }
.live-activity .progress-ring circle.arc   { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.live-activity-demo-row { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ============================================================
   DS-43  SECTIONED LIST ROWS
   ============================================================ */
.list-section {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.list-section + .list-section { margin-top: 12px; }
.list-section-head {
  padding: 10px 16px 4px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.list-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--glass-stroke);
  transition: background 140ms var(--ease);
  cursor: pointer;
}
/* When a list-row has no leading icon, drop the 36px reserved column
   so .list-row-body gets the full width and text wraps naturally. */
.list-row:not(:has(.list-row-leading)) {
  grid-template-columns: 1fr auto;
}
.list-section-head + .list-row { border-top: 1px solid var(--glass-stroke); }
.list-row:hover { background: var(--glass-deep); }
.list-row-leading {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
  color: var(--ink-2);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
:root[data-theme="dark"] .list-row-leading { background: rgba(255,255,255,0.05); }
.list-row-leading svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.list-row-leading.accent  { background: var(--accent-tint);  color: var(--accent); }
.list-row-leading.info    { background: var(--info-tint);    color: var(--info); }
.list-row-leading.success { background: var(--success-tint); color: var(--success); }
.list-row-leading.gold    { background: var(--gold-tint);    color: var(--gold); }
.list-row-body { min-width: 0; }
.list-row-title { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.list-row-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.list-row-trailing {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.list-row-trailing .chev {
  width: 12px; height: 12px;
  color: var(--ink-4);
}
.list-row-trailing .chev svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============================================================
   DS-44  AVATAR STACK + TOOLTIP
   ============================================================ */
.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--glass-deep);
  border: 2px solid var(--canvas-1);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-1);
  margin-left: -8px;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar.a-1 { background: linear-gradient(150deg, #f3884f, #e86833); color: #fff; }
.avatar-stack .avatar.a-2 { background: linear-gradient(150deg, #4f86e8, #1d4ed8); color: #fff; }
.avatar-stack .avatar.a-3 { background: linear-gradient(150deg, #5fb87a, #2d8a4e); color: #fff; }
.avatar-stack .avatar.a-4 { background: linear-gradient(150deg, #f5cb6a, #f5b94a); color: #4b3a08; }
.avatar-stack .avatar.more {
  background: var(--glass-deep);
  color: var(--ink-2);
  font-family: var(--font-data);
  font-size: 10.5px;
}
:root[data-theme="dark"] .avatar-stack .avatar { border-color: var(--canvas-1); }

.tt {
  position: relative;
  display: inline-block;
}
.tt-trigger {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  color: var(--ink-2);
}
.tt-bubble {
  position: fixed;
  left: var(--tt-x, 0);
  top: var(--tt-y, 0);
  transform: translate(-50%, calc(-100% - 12px));
  padding: 6px 10px;
  background: #1a1f2e;
  color: #f1f3f6;
  font-size: 11.5px;
  line-height: 1.45;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease);
  z-index: 1500;
}
.tt-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1f2e;
}
.tt:hover .tt-bubble,
.tt:focus-within .tt-bubble {
  opacity: 1;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-center  { display: flex; align-items: center; justify-content: center; gap: 12px; }
.flex-end     { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.text-muted   { color: var(--ink-3); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info    { color: var(--info); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-lg { font-size: 15px; }
.text-xl { font-size: 18px; }
.text-bold { font-weight: 600; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mono, .font-data { font-family: var(--font-data); font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.divider   { height: 1px; background: var(--glass-stroke); border: 0; margin: 16px 0; }
.divider-v { width: 1px; height: 16px; background: var(--glass-stroke); display: inline-block; margin: 0 8px; }

/* ============================================================
   BACKWARD-COMPAT  ("legacy" non-prefixed shell selectors)
   These keep prototype HTML rendering with the Type-6.5 language.
   New code should adopt the .ds5-* classes above where possible.
   ============================================================ */

/* ----- Legacy app shell ----- */
.app-layout {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: 100vh;
}
.sidebar {
  position: sticky; top: 18px; align-self: start;
  height: calc(100vh - 36px);
  margin: 18px 0 0 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-2xl);
  padding: 18px 12px 14px;
  overflow-y: auto;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  width: auto;
  color: var(--ink-1);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 4px; }

.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--glass-stroke);
  margin-bottom: 8px;
}
.sidebar-logo a { color: var(--ink-1); }
.sidebar-logo-text {
  font-size: 14px; font-weight: 700; color: var(--ink-1);
  letter-spacing: -0.2px;
}
.sidebar-logo-text span { color: var(--accent); }

/* Sidebar search trigger. Sits just below the logo, above the
   project/institution block. Acts as the launcher for the global
   search modal (data-modal-trigger="modal-search"), freeing the
   right side of the page-header for page-specific controls. */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 4px 6px 8px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
  color: var(--ink-3);
  font-size: 12.5px;
}
.sidebar-search:hover {
  background: var(--glass-deep);
  border-color: var(--glass-stroke-strong);
  color: var(--ink-1);
}
.sidebar-search svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex: 0 0 auto;
}
.sidebar-search .label { flex: 1; }
.sidebar-search kbd {
  font-family: var(--font-data);
  font-size: 10.5px;
  background: rgba(0,0,0,0.04);
  border: none;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-3);
}
:root[data-theme="dark"] .sidebar-search kbd { background: rgba(255,255,255,0.06); }

/* Sidebar project / institution / portfolio block. Used by every
   persona shell. Three rows of text in a bordered block, separated
   from the nav. Patterned on .ds5-rail-brand but for a three-line
   text shape with no logo glyph. */
.sidebar-project {
  padding: 10px 12px 12px;
  margin: 0 4px 8px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  gap: 2px;
}
.sidebar-project-label {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.sidebar-project-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.1px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-project-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.35;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sidebar-project-switcher {
  margin-top: 8px;
  padding: 5px 8px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  text-align: center;
  cursor: pointer;
  transition: background 140ms var(--ease);
  letter-spacing: 0.02em;
}
.sidebar-project-switcher:hover { background: rgba(232,104,51,0.18); }

.sidebar-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sidebar-nav .nav-section-label,
.nav-section-label {
  padding: 14px 12px 4px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.sidebar-nav .nav-item,
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  border-radius: 8px;
  margin: 1px 4px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
  text-decoration: none;
  position: relative;
}
.sidebar-nav .nav-item:hover,
.nav-item:hover { background: var(--glass-strong); color: var(--ink-1); }
.sidebar-nav .nav-item.active,
.nav-item.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-nav .nav-item svg,
.nav-item svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  flex: 0 0 auto;
}
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 4px 0;
  border-top: 1px solid var(--glass-stroke);
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 160ms var(--ease);
  text-decoration: none;
}
.sidebar-user:hover { background: var(--glass-strong); }
.user-avatar, .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 600;
  flex: 0 0 auto;
}
.user-name { font-size: 12.5px; font-weight: 600; color: var(--ink-1); }
.user-role { font-size: 11px; color: var(--ink-3); }
.caret { color: var(--ink-3); font-size: 10px; }

/* ----- Legacy main area ----- */
.main-content { padding: 28px 36px 96px; max-width: 1280px; }

.page-header {
  position: sticky; top: 18px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  margin-bottom: 22px;
}
.page-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin: 0;
}
.page-subtitle, .page-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}
/* When a breadcrumb is stacked above a page-title (rather than living
   inline in the topbar), give it 4px of breathing room below. */
.breadcrumb + .page-title,
.crumb + .page-title { margin-top: 4px; }
.breadcrumb { margin-bottom: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Topbar icon button (bell, avatar). Inline flex so the unread badge
   sits as a small overlapping pill in the upper-right of the bell
   instead of stacking below it. */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.topbar-btn:hover { background: var(--glass-strong); border-color: var(--glass-stroke); color: var(--ink-1); }
.topbar-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.topbar-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.topbar-btn .topbar-unread,
.topbar-unread {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
  border: 2px solid var(--canvas-1);
  pointer-events: none;
}

.page-body { display: flex; flex-direction: column; gap: 16px; }

/* ----- Cards ----- */
.card, .surface {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.card-header, .surface-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-stroke);
  gap: 12px;
}
.card-title, .surface-title {
  font-size: 14px; font-weight: 600; color: var(--ink-1);
  margin: 0;
  letter-spacing: -0.1px;
  line-height: 1.25;
}
.card-body, .surface-body { padding: 16px 20px; }
.card-footer, .surface-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--glass-stroke);
  background: rgba(0,0,0,0.02);
  display: flex; justify-content: flex-end; gap: 8px;
}
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .surface-footer { background: rgba(255,255,255,0.03); }

/* ----- Stat bar / KPI ----- */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-block, .stat-card, .kpi-card {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 200ms var(--ease), box-shadow 220ms var(--ease), border-color 200ms var(--ease);
  text-decoration: none;
  color: inherit;
}
a.stat-block:hover, a.stat-card:hover, a.kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--glass-stroke-strong);
}
.stat-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.2;
}
.stat-value {
  font-size: 24px; font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.4px;
  line-height: 1.05;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.stat-value.positive { color: var(--success); }
.stat-value.danger   { color: var(--danger); }
.stat-value.warning  { color: var(--warning); }
.stat-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

/* ----- Breadcrumb ----- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink-1); }
.breadcrumb-sep { color: var(--ink-4); }
.breadcrumb-current { color: var(--ink-1); font-weight: 600; }

/* ----- Activity / list rows ----- */
.activity-item, .list-item {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-stroke);
  transition: background 160ms var(--ease);
}
.activity-item:hover, .list-item:hover { background: var(--glass-strong); }
.activity-item:last-child, .list-item:last-child { border-bottom: none; }
.activity-avatar, .list-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  flex: 0 0 auto;
}
.activity-body, .list-body { flex: 1; min-width: 0; }
.activity-text, .list-text { font-size: 13px; color: var(--ink-1); line-height: 1.5; }
.activity-time, .list-time { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ----- Alerts ----- */
.alert-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.alert-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  flex: 0 0 auto;
}
.alert-icon.success { background: var(--success-tint); color: var(--success); }
.alert-icon.warning { background: var(--warning-tint); color: var(--warning); }
.alert-icon.danger  { background: var(--danger-tint);  color: var(--danger); }
.alert-icon.info    { background: var(--info-tint);    color: var(--info); }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.alert-desc { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
.alert-meta { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ----- Mobile companion frame ----- */
.mobile-frame {
  max-width: 420px;
  margin: 24px auto;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  min-height: 720px;
  position: relative;
}
.mobile-status-bar {
  height: 28px;
  background: var(--glass-deep);
  border-bottom: 1px solid var(--glass-stroke);
}
.mobile-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-stroke);
}
.mobile-content { padding: 16px; padding-bottom: 88px; }

.bottom-nav {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 360px;
  background: var(--glass-deep);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  display: flex;
  padding: 6px;
  gap: 2px;
}
.bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  padding: 8px 4px;
  font-size: 10.5px;
  color: var(--ink-3);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.bottom-nav a.active,
.bottom-nav a.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.bottom-nav a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Persona-aware active tinting. Pages set data-persona on <body> or
   <html>; the active bottom-nav pill picks up the persona accent. */
body[data-persona="lender"]     .bottom-nav a.active,
body[data-persona="lender"]     .bottom-nav a.is-active,
[data-persona="lender"]         .bottom-nav a.active,
[data-persona="lender"]         .bottom-nav a.is-active {
  background: var(--info-tint); color: var(--info);
}
body[data-persona="client"]     .bottom-nav a.active,
body[data-persona="client"]     .bottom-nav a.is-active,
[data-persona="client"]         .bottom-nav a.active,
[data-persona="client"]         .bottom-nav a.is-active {
  background: var(--client-tint); color: var(--client);
}
body[data-persona="contractor"] .bottom-nav a.active,
body[data-persona="contractor"] .bottom-nav a.is-active,
[data-persona="contractor"]     .bottom-nav a.active,
[data-persona="contractor"]     .bottom-nav a.is-active {
  background: var(--gold-tint); color: #b8851b;
}
body[data-persona="investor"]   .bottom-nav a.active,
body[data-persona="investor"]   .bottom-nav a.is-active,
[data-persona="investor"]       .bottom-nav a.active,
[data-persona="investor"]       .bottom-nav a.is-active {
  background: var(--purple-tint); color: var(--purple);
}

/* ----- Misc legacy ----- */
.skip-to-main {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-to-main:focus {
  position: fixed;
  left: 12px; top: 12px;
  width: auto; height: auto;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-md);
  z-index: 1000;
  font-size: 13px;
  font-weight: 600;
}

.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-1);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 160ms var(--ease);
  text-decoration: none;
}
.dropdown-item:hover { background: var(--glass-strong); }
.dropdown-item.danger { color: var(--danger); }

/* Benchmark cells (pricing intelligence) */
.benchmark-cell {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  font-family: var(--font-data);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.benchmark-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-4);
  flex: 0 0 auto;
}
.benchmark-in .benchmark-dot { background: var(--success); }
.benchmark-out .benchmark-dot { background: var(--warning); }
.benchmark-range { color: var(--ink-3); font-size: 11.5px; }

/* Persona shell color overrides. Pages set data-persona on <html>
   or <body> to opt in. The brand mark on the rail picks up the
   persona-tinted gradient; the active nav-item retains the accent
   color regardless of persona to keep the wayfinding consistent. */
[data-persona="lender"]     .ds5-rail-mark { background: linear-gradient(150deg, #4d7ce8, var(--info)); box-shadow: 0 6px 14px rgba(29,78,216,0.32); }
[data-persona="contractor"] .ds5-rail-mark { background: linear-gradient(150deg, #f7d28a, var(--gold)); box-shadow: 0 6px 14px rgba(245,185,74,0.32); color: #4a3a10; }
[data-persona="platform"]   .ds5-rail-mark { background: linear-gradient(150deg, #a574f0, var(--purple)); box-shadow: 0 6px 14px rgba(124,58,237,0.32); }
[data-persona="client"]     .ds5-rail-mark { background: linear-gradient(150deg, #4ec0d6, #0891b2); box-shadow: 0 6px 14px rgba(8,145,178,0.32); }
[data-persona="investor"]   .ds5-rail-mark { background: linear-gradient(150deg, #a574f0, var(--purple)); box-shadow: 0 6px 14px rgba(124,58,237,0.32); }

/* ============================================================
   PROJECT CARDS  (portfolio dashboard)
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.project-card {
  position: relative;
  display: block;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 180ms var(--ease), transform 120ms var(--ease), border-color 180ms var(--ease);
}
.project-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--glass-stroke-strong);
  transform: translateY(-1px);
}
.project-card-thumb { height: 6px; width: 100%; }
.project-card-body  { padding: 14px 16px 12px; }
.project-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.project-card-location {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.project-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.project-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.project-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  font-family: var(--font-data);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--glass-stroke);
}
:root[data-theme="dark"] .project-card-footer {
  background: rgba(255, 255, 255, 0.03);
}
.health-bar {
  height: 4px;
  background: var(--ink-6);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 4px;
}
.health-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 300ms var(--ease);
}
.health-bar-fill.health-green  { background: var(--success); }
.health-bar-fill.health-yellow { background: var(--warning); }
.health-bar-fill.health-red    { background: var(--danger); }

/* ============================================================
   SLIDEOUT / DRAWER  (right-anchored detail panel)
   Two page-rebuild agents independently inlined `.drawer*` primitives
   for draws and lender deals. The canonical name is `.slideout`; the
   `.drawer*` aliases share the same rule sets so older pages keep
   working unchanged. Open state is toggled with `.is-open` on both
   `.slideout-backdrop` and `.slideout`.
   ============================================================ */
.slideout-backdrop,
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,20,32,0.40);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out-soft);
}
.slideout-backdrop.is-open,
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
:root[data-theme="dark"] .slideout-backdrop,
:root[data-theme="dark"] .drawer-backdrop {
  background: rgba(0,0,0,0.55);
}

.slideout,
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 96vw;
  background: var(--glass-deep);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border-left: 1px solid var(--glass-stroke-strong);
  box-shadow: var(--shadow-2);
  z-index: 85;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms var(--ease-out-soft);
}
.slideout.is-open,
.drawer.is-open { transform: translateX(0); }
.slideout-sm,
.drawer-sm { width: 360px; }
.slideout-lg,
.drawer-lg { width: 640px; }

.slideout-header,
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--glass-stroke);
  gap: 12px;
  font-weight: 600;
}
.slideout-title,
.drawer-title { font-size: 15px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.1px; }
.slideout-sub,
.drawer-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; font-weight: 400; }

.slideout-body,
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.slideout-footer,
.drawer-foot {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--glass-stroke);
  background: rgba(0,0,0,0.02);
  gap: 8px;
}
:root[data-theme="dark"] .slideout-footer,
:root[data-theme="dark"] .drawer-foot { background: rgba(255,255,255,0.03); }

.slideout-close,
.drawer-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.slideout-close:hover,
.drawer-close:hover {
  background: var(--glass-strong);
  color: var(--ink-1);
}
.slideout-close svg,
.drawer-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ============================================================
   APPROVAL / DECISION TIMELINE  (vertical milestone list)
   The connector is drawn as an absolutely-positioned line on each
   step, suppressed on the last step. States: default (pending),
   .is-done, .is-active (with pulse halo), .is-rejected. Legacy
   modifiers from the inlined version (`.done`, `.active`, `.rejected`)
   are aliased to the same rules.
   ============================================================ */
.approval-timeline {
  display: flex; flex-direction: column; gap: 0;
  padding-left: 4px;
}
.approval-step {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.approval-step .approval-dot,
.approval-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--canvas-1);
  border: 2px solid var(--ink-5);
  position: relative;
  top: 4px;
  flex: 0 0 auto;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.approval-step.is-done .approval-dot,
.approval-step.done .approval-dot {
  background: var(--success);
  border-color: var(--success);
}
.approval-step.is-done .approval-dot::after,
.approval-step.done .approval-dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
}
.approval-step.is-active .approval-dot,
.approval-step.active .approval-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.approval-step.is-active .approval-dot::before,
.approval-step.active .approval-dot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0.5;
  animation: approval-pulse 1800ms var(--ease-spring) infinite;
}
@keyframes approval-pulse {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.30); opacity: 0;    }
  100% { transform: scale(1.30); opacity: 0;    }
}
.approval-step.is-pending .approval-dot { background: var(--canvas-1); border-color: var(--ink-5); }
.approval-step.is-rejected .approval-dot,
.approval-step.rejected .approval-dot {
  background: var(--danger);
  border-color: var(--danger);
}

.approval-step .approval-line,
.approval-line {
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: -10px;
  width: 2px;
  background: var(--ink-6);
}
.approval-step.is-done .approval-line,
.approval-step.done .approval-line { background: var(--success); }
.approval-step:last-child .approval-line,
.approval-step.is-last .approval-line { display: none; }

.approval-step .approval-body,
.approval-body { flex: 1; min-width: 0; }
.approval-step .approval-title,
.approval-title,
.approval-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
}
.approval-step .approval-meta,
.approval-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--font-data);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   KANBAN  (deal / task pipeline)
   Promoted from the inlined `.deal-board` / `.deal-col` / `.deal-card`
   used on lender deals. Canonical name is `.kanban-*`; the deal-*
   aliases share the same rules. Use a fixed track count (e.g. 5)
   by adding `.kanban-board.cols-N` if needed; default flexes.
   ============================================================ */
.kanban-board,
.deal-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: start;
}
.kanban-board.cols-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.kanban-board.cols-4 { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
.kanban-board.cols-5 { grid-template-columns: repeat(5, minmax(220px, 1fr)); }
.kanban-board.cols-6 { grid-template-columns: repeat(6, minmax(220px, 1fr)); }

.kanban-col,
.deal-col {
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  min-height: 200px;
}
.kanban-col-head,
.deal-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--glass-stroke);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.kanban-col-title,
.deal-col-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kanban-col-count,
.deal-col-count {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(0,0,0,0.05);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .kanban-col-count,
:root[data-theme="dark"] .deal-col-count { background: rgba(255,255,255,0.06); }

.kanban-card,
.deal-card {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: box-shadow 180ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.kanban-card:hover,
.deal-card:hover {
  background: var(--glass-deep);
  border-color: var(--glass-stroke-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.kanban-card .amt,
.deal-card .amt {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.2px;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.kanban-card .sub,
.deal-card .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.kanban-card .meta,
.deal-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FILTER BAR  (label + spacer + action pills)
   Sits above tables and boards. Pairs with the existing `.filter-pill`
   rules; the bar provides the surrounding chrome, label, and spacer.
   ============================================================ */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-bar-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.filter-spacer { flex: 1; min-width: 0; }

/* ============================================================
   RADIO TILE / METHOD CARD  (selectable card-style radio option)
   Inlined on lender draw-rejection and a few payment-method pages.
   The two names share the same rule set.
   ============================================================ */
.radio-tile,
.method-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 200ms var(--ease);
}
.radio-tile:hover,
.method-card:hover {
  border-color: var(--glass-stroke-strong);
  background: var(--glass-deep);
}
.radio-tile.is-selected,
.radio-tile.selected,
.method-card.is-selected,
.method-card.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--accent-line), 0 6px 14px rgba(232,104,51,0.10);
}
.radio-tile .label,
.method-card .label { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.radio-tile .desc,
.method-card .desc {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ============================================================
   FORM GRID COLUMNS
   The base `.form-row` (declared in the FORMS section) is a flex
   column. The `.cols-N` modifier promotes it to a grid that collapses
   at narrow widths.
   ============================================================ */
.form-row.cols-2,
.form-row.cols-3,
.form-row.cols-4 {
  display: grid;
  flex-direction: row;
  gap: 12px;
  margin-bottom: 12px;
}
.form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   FAB  (floating action button)
   Mobile primary action, anchored above the bottom-nav. When placed
   inside `.mobile-frame`, the FAB switches to absolute positioning so
   it stays inside the device frame.
   ============================================================ */
.fab {
  position: fixed;
  right: 16px;
  bottom: 88px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(232,104,51,0.32);
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease);
  z-index: 60;
}
.fab svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(232,104,51,0.36);
}
.fab:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(232,104,51,0.30);
}
.fab.is-accent { background: var(--accent); box-shadow: 0 6px 16px rgba(232,104,51,0.32); }
.fab.is-info {
  background: var(--info);
  box-shadow: 0 6px 16px rgba(29,78,216,0.32);
}
.fab.is-info:hover  { box-shadow: 0 10px 22px rgba(29,78,216,0.38); }
.fab.is-client {
  background: var(--client);
  box-shadow: 0 6px 16px rgba(8,145,178,0.32);
}
.fab.is-client:hover { box-shadow: 0 10px 22px rgba(8,145,178,0.38); }
.fab.is-gold {
  background: var(--gold);
  color: #4a3a10;
  box-shadow: 0 6px 16px rgba(245,185,74,0.36);
}
.fab.is-gold svg { stroke: #4a3a10; }
.fab.is-gold:hover { box-shadow: 0 10px 22px rgba(245,185,74,0.42); }
.fab.is-purple {
  background: var(--purple);
  box-shadow: 0 6px 16px rgba(124,58,237,0.32);
}
.fab.is-purple:hover { box-shadow: 0 10px 22px rgba(124,58,237,0.38); }
.fab.is-success {
  background: var(--success);
  box-shadow: 0 6px 16px rgba(45,138,78,0.32);
}
.fab.is-success:hover { box-shadow: 0 10px 22px rgba(45,138,78,0.38); }

.mobile-frame .fab {
  position: absolute;
}

/* ============================================================
   MESSAGE BUBBLE  (chat thread)
   Used on client / contractor / lender / investor messages.
   `.is-self` is the speaker (right-aligned), `.is-them` is the other
   party (left-aligned). Persona variants retint the self-bubble.
   ============================================================ */
.bubble-thread {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.bubble.is-them {
  background: var(--glass-strong);
  color: var(--ink-1);
  align-self: flex-start;
  border: 1px solid var(--glass-stroke);
  border-bottom-left-radius: 4px;
}
.bubble.is-self {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
body[data-persona="lender"]     .bubble.is-self,
[data-persona="lender"]         .bubble.is-self { background: var(--info); }
body[data-persona="client"]     .bubble.is-self,
[data-persona="client"]         .bubble.is-self { background: var(--client); }
body[data-persona="contractor"] .bubble.is-self,
[data-persona="contractor"]     .bubble.is-self { background: var(--gold); color: #4a3a10; }
body[data-persona="investor"]   .bubble.is-self,
[data-persona="investor"]       .bubble.is-self { background: var(--purple); }

.bubble-meta,
.bubble-time {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.bubble-meta.is-self,
.bubble-time.is-self { align-self: flex-end; }
.bubble-meta.is-them,
.bubble-time.is-them { align-self: flex-start; }

/* ============================================================
   PHOTO GRID  (uniform aspect-square thumbnails)
   Inlined on punchlist, daily-log, marketing-listing, and a few
   client pages. The auto-fill default reflows by viewport; the
   `.photo-grid-N` modifiers pin a fixed column count.
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.photo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.photo-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.photo-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  position: relative;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 220ms var(--ease), border-color 200ms var(--ease);
}
.photo-tile:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-2);
  border-color: var(--glass-stroke-strong);
}
.photo-tile img,
.photo-tile picture,
.photo-tile > svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-tile-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color: #fff;
  font-size: 10.5px;
  line-height: 1.35;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   PEER-CHART NESTING FIX
   When a peer-chart is dropped inside a `.card`, `.card-body`, or
   `.inspector`, the chart should not stack its own glass shell on
   top of the parent surface. Clear the redundant chrome.
   ============================================================ */
.card .peer-chart,
.card-body .peer-chart,
.surface .peer-chart,
.surface-body .peer-chart,
.inspector .peer-chart {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* ============================================================
   Z-INDEX HIERARCHY
   Constrain Leaflet to its own stacking context so its internal
   panes (200-800) only stack relative to the map container, not
   the page. UI overlays then sit cleanly above any map.
   Layer order (low to high):
     0-10   page content, sticky chrome
     400-800 Leaflet internals (inside .leaflet-container only)
     1500   dropdowns, tooltips, context menus
     2000   modal overlays, command palette, notification popovers
     2100   slideouts / drawers (above modals so they sit on top of any open modal)
     2200   toasts (always on top)
   ============================================================ */
.leaflet-container {
  z-index: 0 !important;
  isolation: isolate;
}
.dropdown,
.ctx-menu,
.tt-bubble { z-index: 1500; }
.cmdk,
.notif-center.is-popover { z-index: 2000; }
.slideout,
.slideout-backdrop,
.drawer,
.drawer-backdrop { z-index: 2100; }
.toast,
.toast-stack { z-index: 2200; }

/* ============================================================
   SEARCH MODAL
   Used by the auto-injected #modal-search (proto.js topbarSearchHtml).
   The markup uses a parallel naming to .cmdk (.search-modal-* and
   .search-result-*) because the search-modal predates DS-38; the
   styling here mirrors the cmdk visual language.
   ============================================================ */
.search-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-stroke);
}
.search-modal-input-wrap svg {
  width: 18px; height: 18px;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.search-modal-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--ink-1);
  padding: 4px 0;
}
.search-modal-input::placeholder { color: var(--ink-3); }
.search-result-kbd {
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--ink-3);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--glass-stroke);
  border-radius: 4px;
  padding: 1px 6px;
  flex: 0 0 auto;
  font-feature-settings: 'tnum' 1;
}
:root[data-theme="dark"] .search-result-kbd { background: rgba(255,255,255,0.06); }
.search-result-group {
  padding: 6px 4px;
  border-bottom: 1px solid var(--glass-stroke);
}
.search-result-group:last-child { border-bottom: 0; }
.search-result-label {
  padding: 6px 14px 4px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 1px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 160ms var(--ease);
  font-size: 13px;
  color: var(--ink-1);
}
.search-result-item:hover,
.search-result-item.highlighted {
  background: var(--accent-tint);
  color: var(--accent);
}
.search-result-icon {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.search-result-item.highlighted .search-result-icon {
  background: rgba(232,104,51,0.18);
  border-color: var(--accent-line);
  color: var(--accent);
}
:root[data-theme="dark"] .search-result-icon { background: rgba(255,255,255,0.06); }
.search-result-icon svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.search-result-text {
  flex: 1;
  min-width: 0;
}
.search-result-name {
  font-weight: 500;
  font-size: 13px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: 'tnum' 1;
}
.search-result-item.highlighted .search-result-meta { color: var(--accent); opacity: 0.85; }
#modal-search .modal-container,
#modal-search .modal-container.modal-md {
  width: 640px;
  max-width: calc(100vw - 40px);
  padding: 0;
}

/* ============================================================
   CARD CLIP FIX
   When a `.card` has both backdrop-filter and border-radius +
   overflow:hidden, Chromium and Safari can fail to clip nested
   tables and surfaces at the rounded corner. The result is a
   table footer row (totals) whose background bleeds past the
   card's bottom corners. Forcing the card to be its own stacking
   context restores correct clipping. Also: ensure tfoot/total
   rows use the same horizontal padding as body rows so the first
   character of "12-month total" clears the corner curve.
   ============================================================ */
.card,
.surface,
.kpi-card,
.stat-card,
.stat-block {
  isolation: isolate;
}
.card > table,
.card > .table-wrap > table,
.surface > table,
.surface > .table-wrap > table {
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}
.data-table tfoot td,
.ds5-table tfoot td,
.card table tfoot td,
.surface table tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--glass-stroke);
  background: rgba(0,0,0,0.02);
  font-weight: 600;
}
:root[data-theme="dark"] .data-table tfoot td,
:root[data-theme="dark"] .ds5-table tfoot td,
:root[data-theme="dark"] .card table tfoot td,
:root[data-theme="dark"] .surface table tfoot td { background: rgba(255,255,255,0.03); }
.data-table tfoot tr:last-child td:first-child,
.ds5-table tfoot tr:last-child td:first-child,
.card table tfoot tr:last-child td:first-child,
.surface table tfoot tr:last-child td:first-child {
  border-bottom-left-radius: var(--r-xl);
}
.data-table tfoot tr:last-child td:last-child,
.ds5-table tfoot tr:last-child td:last-child,
.card table tfoot tr:last-child td:last-child,
.surface table tfoot tr:last-child td:last-child {
  border-bottom-right-radius: var(--r-xl);
}
.data-table tbody tr:last-child td,
.ds5-table tbody tr:last-child td,
.card table tbody tr:last-child:not(:has(~ tfoot)) td,
.surface table tbody tr:last-child:not(:has(~ tfoot)) td {
  border-bottom: 0;
}

/* ============================================================
   HORIZONTAL BAR CHART
   For "spend by trade", "cost by category", "revenue by source"
   layouts. CSS-only flex/grid composition so each row gets a
   label / proportional bar / value triplet aligned cleanly.
   Adopted by vendors.html, warranty.html, and similar pages.
   ============================================================ */
.h-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.h-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  gap: 12px;
  align-items: center;
  font-size: 10.5px;
}
.h-bar-label {
  color: var(--ink-2);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-bar-track {
  height: 14px;
  background: var(--ink-6);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.h-bar-fill {
  height: 100%;
  background: var(--ink-3);
  border-radius: var(--r-pill);
  transition: width 320ms var(--ease);
  min-width: 2px;
}
.h-bar-fill.is-marketplace { background: var(--purple); }
.h-bar-fill.is-accent      { background: var(--accent); }
.h-bar-fill.is-info        { background: var(--info); }
.h-bar-fill.is-success     { background: var(--success); }
.h-bar-fill.is-warning     { background: var(--warning); }
.h-bar-fill.is-danger      { background: var(--danger); }
.h-bar-fill.is-gold        { background: var(--gold); }
.h-bar-value {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-1);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.h-bar-row.is-muted .h-bar-label,
.h-bar-row.is-muted .h-bar-value { color: var(--ink-3); }

/* ============================================================
   LTC METER  (loan-to-cost utilization band)
   Five-segment gradient track with a position marker. Used on the
   lender dashboard, dashboard-mobile, ltc-tracker, and draws pages.
   Default marker color is --info (lender persona); other personas
   may override with .ltc-meter-marker.is-accent / is-warning.
   ============================================================ */
.ltc-meter {
  position: relative;
  height: 8px;
  background: var(--glass-stroke);
  border-radius: var(--r-pill);
  overflow: visible;
  margin-bottom: 6px;
}
.ltc-meter-track {
  position: relative;
  height: 8px;
  background: var(--glass-stroke);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ltc-meter-band {
  position: absolute;
  top: 0;
  bottom: 0;
}
.ltc-meter-band.band-floor    { background: rgba(45,138,78,0.15); }
.ltc-meter-band.band-target   { background: rgba(45,138,78,0.30); }
.ltc-meter-band.band-stretch  { background: rgba(212,160,23,0.30); }
.ltc-meter-band.band-critical { background: rgba(192,57,43,0.30); }
.ltc-meter-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--info);
  z-index: 2;
  border-radius: 1px;
}
.ltc-meter-marker.is-accent  { background: var(--accent); }
.ltc-meter-marker.is-warning { background: var(--warning); }
.ltc-meter-marker.is-danger  { background: var(--danger); }
.ltc-meter-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ink-3);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SPARKLINE TREND DOT
   Small colored endpoint that signals the trend direction at the
   tail of a sparkline. Pairs with the existing .spark primitive.
   Use as <circle class="spark-dot up" .../> inside a sparkline SVG.
   ============================================================ */
.spark-dot      { fill: var(--ink-3); r: 2.5; }
.spark-dot.up   { fill: var(--success); }
.spark-dot.down { fill: var(--danger); }
.spark-dot.flat { fill: var(--ink-3); }
.spark-dot.warn { fill: var(--warning); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ds5-shell, .app-layout { grid-template-columns: 1fr; }
  .ds5-rail, .sidebar { display: none; }
  .ds5-main, .main-content { padding: 16px 14px 80px; }
  .stat-bar { grid-template-columns: 1fr 1fr; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .inspector-demo { grid-template-columns: 1fr; }
  .state-stack { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stat-bar, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .ds5-hero { flex-direction: column; }
  .ds5-hero h1 { font-size: 22px; }
  .notif-center { width: 100%; }
}