/* ============================================================
 * Capitari CRM — Portal stylesheet
 * Phase 1 (shell, tokens, primitives). Class names preserved
 * so existing EJS views keep rendering without changes.
 * ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  color-scheme: light;

  /* Brand */
  --brand-h: 256;
  --brand: oklch(54% 0.17 var(--brand-h));
  --brand-strong: oklch(46% 0.18 var(--brand-h));
  --brand-soft: oklch(96% 0.04 var(--brand-h));
  --brand-soft-2: oklch(92% 0.06 var(--brand-h));
  --brand-ink: oklch(36% 0.16 var(--brand-h));

  /* Surfaces (warm-tinted toward brand for cohesion) */
  --bg: oklch(98.5% 0.006 var(--brand-h));
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97% 0.008 var(--brand-h));
  --surface-3: oklch(94.5% 0.012 var(--brand-h));
  --line: oklch(92% 0.012 var(--brand-h));
  --line-strong: oklch(86% 0.015 var(--brand-h));

  /* Text */
  --ink: oklch(22% 0.025 var(--brand-h));
  --ink-2: oklch(34% 0.02 var(--brand-h));
  --mute: oklch(52% 0.018 var(--brand-h));
  --mute-soft: oklch(64% 0.015 var(--brand-h));

  /* Status (muted, OKLCH; chroma kept low for daylong staring) */
  --ok: oklch(58% 0.13 155);
  --ok-soft: oklch(95% 0.045 155);
  --ok-ink: oklch(36% 0.12 155);

  --warn: oklch(70% 0.14 75);
  --warn-soft: oklch(96% 0.05 75);
  --warn-ink: oklch(42% 0.13 60);

  --danger: oklch(58% 0.18 28);
  --danger-soft: oklch(96% 0.04 28);
  --danger-ink: oklch(42% 0.17 28);

  --info: oklch(60% 0.13 230);
  --info-soft: oklch(96% 0.035 230);
  --info-ink: oklch(38% 0.14 230);

  --violet: oklch(58% 0.16 290);
  --violet-soft: oklch(96% 0.04 290);
  --violet-ink: oklch(38% 0.16 290);

  --teal: oklch(58% 0.11 195);
  --teal-soft: oklch(95% 0.035 195);
  --teal-ink: oklch(36% 0.10 195);

  /* Spacing (4pt) */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;  --s16: 4rem;

  /* Radius / shadow / motion */
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-1: 0 1px 0 oklch(0% 0 0 / 0.04), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-2: 0 1px 2px oklch(0% 0 0 / 0.04), 0 8px 24px -10px oklch(0% 0 0 / 0.10);
  --shadow-pop: 0 12px 36px -16px oklch(0% 0 0 / 0.30), 0 2px 6px oklch(0% 0 0 / 0.08);
  --ring: 0 0 0 3px color-mix(in oklch, var(--brand) 35%, transparent);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --num: tabular-nums lining-nums;

  /* Layout */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --content-max: 1320px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --brand: oklch(70% 0.16 var(--brand-h));
  --brand-strong: oklch(78% 0.14 var(--brand-h));
  --brand-soft: oklch(28% 0.07 var(--brand-h));
  --brand-soft-2: oklch(34% 0.09 var(--brand-h));
  --brand-ink: oklch(82% 0.13 var(--brand-h));

  --bg: oklch(16% 0.018 var(--brand-h));
  --surface: oklch(20% 0.02 var(--brand-h));
  --surface-2: oklch(23% 0.022 var(--brand-h));
  --surface-3: oklch(27% 0.024 var(--brand-h));
  --line: oklch(28% 0.022 var(--brand-h));
  --line-strong: oklch(36% 0.025 var(--brand-h));

  --ink: oklch(96% 0.01 var(--brand-h));
  --ink-2: oklch(86% 0.012 var(--brand-h));
  --mute: oklch(70% 0.018 var(--brand-h));
  --mute-soft: oklch(58% 0.018 var(--brand-h));

  --ok-soft:    oklch(28% 0.06 155);
  --ok-ink:     oklch(82% 0.12 155);
  --warn-soft:  oklch(30% 0.07 75);
  --warn-ink:   oklch(86% 0.13 75);
  --danger-soft: oklch(28% 0.08 28);
  --danger-ink:  oklch(82% 0.14 28);
  --info-soft:  oklch(28% 0.06 230);
  --info-ink:   oklch(82% 0.12 230);
  --violet-soft: oklch(28% 0.07 290);
  --violet-ink:  oklch(82% 0.13 290);
  --teal-soft:  oklch(28% 0.06 195);
  --teal-ink:   oklch(82% 0.10 195);

  --shadow-1: 0 1px 0 oklch(0% 0 0 / 0.4), 0 1px 2px oklch(0% 0 0 / 0.5);
  --shadow-2: 0 1px 2px oklch(0% 0 0 / 0.4), 0 12px 32px -12px oklch(0% 0 0 / 0.55);
  --shadow-pop: 0 16px 48px -16px oklch(0% 0 0 / 0.7), 0 2px 6px oklch(0% 0 0 / 0.4);
}

/* ---------- 2. Reset / base ---------- */

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: 1.0625rem; line-height: 1.3; }
h3 { font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2); }
p  { margin: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

button { font-family: inherit; cursor: pointer; }

code, pre, kbd, samp { font-family: var(--font-mono); }
code {
  background: var(--surface-3);
  color: var(--ink-2);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

::selection { background: color-mix(in oklch, var(--brand) 25%, transparent); }

/* utilities */
.muted { color: var(--mute); }
.muted-soft { color: var(--mute-soft); }
.small { font-size: 0.78rem; }
.num { font-variant-numeric: var(--num); }
.mono { font-family: var(--font-mono); font-variant-numeric: var(--num); }
.inline-form { display: inline; }
.center { text-align: center; }
.spacer { flex: 1; }
.hint { font-size: 0.78rem; color: var(--mute); margin: var(--s1) 0 0; }
.hint a { font-weight: 600; }

/* ---------- 3. App shell ---------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  width: 100%;
}
body.sidebar-collapsed .app-shell {
  grid-template-columns: 1fr;
}
body.sidebar-collapsed .sidebar {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
  flex-shrink: 0;
}
.sidebar-brand-link { display: inline-flex; align-items: center; line-height: 0; }
.sidebar-logo { height: 22px; width: auto; display: block; }
[data-theme="dark"] .sidebar-logo,
[data-theme="dark"] .auth-logo img,
[data-theme="dark"] .landing-logo { filter: brightness(0) invert(1); }
.sidebar-portal-tag { margin-left: auto; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3) var(--s2) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

.sidebar-group { display: flex; flex-direction: column; gap: 0; }
.sidebar-group-label,
.sidebar-section-label {
  padding: var(--s2) var(--s3) var(--s1);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Collapsible group head (uses <details>/<summary>) */
.sidebar-group-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4rem var(--s3);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--r-sm);
  color: var(--mute);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.sidebar-group-head::-webkit-details-marker { display: none; }
.sidebar-group-head::marker { content: ''; }
.sidebar-group-head:hover { background: var(--surface-2); color: var(--ink-2); }
.sidebar-group-head:focus-visible { outline: none; box-shadow: var(--ring); }
.sidebar-group-label-text { flex: 1; min-width: 0; }
.sidebar-group-chevron {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--mute-soft);
  transition: transform 0.18s var(--ease);
}
.sidebar-group[open] > .sidebar-group-head .sidebar-group-chevron { transform: rotate(90deg); }
.sidebar-group-items { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }

/* Solo item (no group wrapper) — minor margin so it sits cleanly */
.sidebar-nav-item.solo { margin: 0; }


.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.4rem var(--s3);
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.sidebar-nav-item.active {
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 600;
}
.sidebar-nav-item .nav-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mute);
  background: var(--surface-2);
  padding: 0 0.4rem;
  height: 18px;
  line-height: 18px;
  border-radius: 999px;
  font-variant-numeric: var(--num);
}
.sidebar-nav-item.active .nav-count { background: var(--surface); color: var(--brand-ink); }

.sidebar-footer {
  border-top: 1px solid var(--line);
  padding: var(--s3);
  background: var(--surface);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r);
}
.sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-weight: 700;
  font-size: 0.72rem;
  display: grid; place-items: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sidebar-user-meta { min-width: 0; flex: 1; }
.sidebar-user-name { font-size: 0.82rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-email { font-size: 0.72rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-user-actions { display: flex; flex-direction: column; gap: 1px; margin-top: var(--s2); }
.sidebar-action {
  display: block;
  padding: 0.4rem var(--s2);
  background: none; border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 0.78rem; font-weight: 500;
  color: var(--mute);
  text-align: left; text-decoration: none; cursor: pointer; width: 100%;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.sidebar-action:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sidebar-signout { color: var(--danger-ink); }
.sidebar-signout:hover { background: var(--danger-soft); color: var(--danger-ink); }

/* (sidebar-collapsed = fully hidden — see grid-template-columns rule above) */

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

/* ---------- 4. Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: var(--topbar-h);
  padding: 0 var(--s5);
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-toggle {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--mute);
}
.topbar-toggle:hover { background: var(--surface-2); color: var(--ink); }
.topbar-toggle svg { width: 18px; height: 18px; }

.topbar-search {
  flex: 1;
  max-width: 460px;
  position: relative;
  display: flex;
  align-items: center;
}
.topbar-search input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.topbar-search input:focus { outline: none; background: var(--surface); border-color: var(--brand); box-shadow: var(--ring); }
.topbar-search input::placeholder { color: var(--mute-soft); }
.topbar-search svg {
  position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--mute);
  pointer-events: none;
}
.topbar-search kbd {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 0.68rem; font-weight: 600; color: var(--mute);
  background: var(--surface); border: 1px solid var(--line);
  padding: 0.05rem 0.35rem; border-radius: 4px;
  pointer-events: none;
}

.topbar-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.topbar-icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid transparent; color: var(--mute);
  border-radius: var(--r-sm);
  text-decoration: none;
  position: relative;
}
.topbar-icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.topbar-icon-btn svg { width: 16px; height: 16px; }
.topbar-icon-btn .dot {
  position: absolute; top: 6px; right: 7px;
  width: 6px; height: 6px;
  border-radius: 999px; background: var(--brand);
  border: 2px solid var(--surface);
}

.topbar-user {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0.25rem 0.4rem 0.25rem 0.25rem;
  background: none; border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink); font-size: 0.78rem; font-weight: 600;
  text-decoration: none;
}
.topbar-user:hover { background: var(--surface-2); text-decoration: none; }
.topbar-user .sidebar-avatar { width: 24px; height: 24px; font-size: 0.62rem; }

/* Breadcrumb (under topbar) */
.crumb {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  font-size: 0.78rem; color: var(--mute);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.crumb a { color: var(--mute); font-weight: 500; }
.crumb a:hover { color: var(--ink); text-decoration: none; }
.crumb .sep { color: var(--mute-soft); opacity: 0.6; }
.crumb .here { color: var(--ink); font-weight: 600; }

.breadcrumb { /* legacy */
  margin: 0 0 var(--s2);
  font-size: 0.78rem;
  color: var(--mute);
}
.breadcrumb a { color: var(--mute); font-weight: 500; }
.breadcrumb a:hover { color: var(--ink); text-decoration: none; }

/* ---------- 5. Main content ---------- */

.app-main {
  flex: 1;
  padding: var(--s6) var(--s5) var(--s10);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
.app-main h1 { margin: 0 0 var(--s1); }

.app-main > .page-head:first-child,
.app-main > h1:first-child { margin-top: 0; }

.app-footer {
  padding: var(--s5);
  text-align: center;
  color: var(--mute);
  font-size: 0.75rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Page header (title row) */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s4);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head h2 { margin: 0; }
.page-head .lede { color: var(--mute); margin-top: var(--s1); font-size: 0.86rem; }
.page-head-actions { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ---------- 6. Cards / panels ---------- */

.panel {
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--s5); }
.panel h2 { margin: 0 0 var(--s4); font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.panel h2 + .panel-sub { margin-top: calc(-1 * var(--s3)); margin-bottom: var(--s4); color: var(--mute); font-size: 0.82rem; }

.panel-flush { padding: 0; }
.panel-flush > .panel-head,
.panel-head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.panel-flush > .panel-body { padding: var(--s5); }
.panel-flush > table.data-table { margin: 0; }

/* Two-column grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}
@media (max-width: 960px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
.grid-2 .panel, .grid-3 .panel { margin-top: 0; }

/* Key-value list */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s2) var(--s5);
  margin: 0;
  font-size: 0.86rem;
}
.kv dt { color: var(--mute); font-weight: 500; }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; font-variant-numeric: var(--num); }

/* ---------- 7. Buttons ---------- */

.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.5rem 0.95rem;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), color 0.12s var(--ease);
  white-space: nowrap;
}

.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-strong); text-decoration: none; }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { background: var(--surface-2); text-decoration: none; }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: oklch(48% 0.18 28); text-decoration: none; }

.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.btn-block { width: 100%; }

.link-btn {
  background: none; border: none; padding: 0;
  color: var(--brand); cursor: pointer; font: inherit; font-weight: 600; font-size: 0.84rem;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--danger-ink); }

/* ---------- 8. Forms ---------- */

input, select, textarea {
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--mute-soft); }

.stacked-form,
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 560px;
}
.stacked-form label,
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}
.stacked-form input,
.stacked-form select,
.stacked-form textarea,
.auth-form input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.stacked-form textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.stacked-form input:focus,
.stacked-form select:focus,
.stacked-form textarea:focus,
.auth-form input:focus,
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.auth-form button[type="submit"] {
  margin-top: var(--s2);
  padding: 0.7rem 1rem;
  background: var(--brand); color: white;
  border: none; border-radius: var(--r);
  font-size: 0.92rem; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.auth-form button[type="submit"]:hover { background: var(--brand-strong); }

.form-actions {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s2);
}
.stacked-form .hint { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
}
.filter-bar input[type="search"],
.filter-bar select {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 0.84rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}
.filter-bar input[type="search"] { flex: 1; min-width: 220px; }
.filter-bar .btn-primary { padding: 0.45rem 0.85rem; font-size: 0.82rem; }

/* Filter chip (saved view) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.filter-chip:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: color-mix(in oklch, var(--brand) 25%, var(--line)); text-decoration: none; }
.saved-filters-pinned {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: var(--s3) var(--s4);
}
.save-filter-form {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line);
}
.save-filter-form input[type="text"] {
  padding: 0.4rem 0.6rem; font-size: 0.82rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
}
.saved-filter-rows { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-direction: column; gap: var(--s2); }
.saved-filter-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: var(--s3); align-items: center;
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 0.82rem;
}
.saved-filter-name { font-weight: 600; color: var(--ink); }

/* ---------- 9. Status + tag pills ---------- */

.status-pill, .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: var(--num);
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.65;
}

/* Status palette — semantic, OKLCH */
.status-pill.status-new,
.status-pill.status-contacted          { background: var(--info-soft);   color: var(--info-ink); }
.status-pill.status-follow_up,
.status-pill.status-requested_statements,
.status-pill.status-requesting_docs,
.status-pill.status-docs_requested     { background: var(--warn-soft);   color: var(--warn-ink); }
.status-pill.status-qualified,
.status-pill.status-ready_to_submit,
.status-pill.status-docs_in            { background: var(--teal-soft);   color: var(--teal-ink); }
.status-pill.status-application_sent,
.status-pill.status-submitted,
.status-pill.status-docs_out,
.status-pill.status-underwriting       { background: var(--violet-soft); color: var(--violet-ink); }
.status-pill.status-offers,
.status-pill.status-funded             { background: var(--ok-soft);     color: var(--ok-ink); }
.status-pill.status-merchant_declined,
.status-pill.status-soft_decline,
.status-pill.status-hard_decline,
.status-pill.status-lost,
.status-pill.status-no_interest,
.status-pill.status-missing_information,
.status-pill.status-deferred           { background: var(--danger-soft); color: var(--danger-ink); }

h1 .status-pill, h2 .status-pill { margin-left: var(--s2); font-size: 0.62rem; vertical-align: middle; }

.tag-admin   { background: var(--brand-soft);  color: var(--brand-ink); }
.tag-lender  { background: var(--teal-soft);   color: var(--teal-ink); }
.tag-client  { background: var(--violet-soft); color: var(--violet-ink); }
.tag-internal { background: var(--warn-soft);  color: var(--warn-ink); }

.flag-warn { background: var(--warn-soft); color: var(--warn-ink); padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.flag-ok   { background: var(--ok-soft);   color: var(--ok-ink);   padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }

/* ---------- 10. Data table ---------- */

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  font-variant-numeric: var(--num);
}
.data-table thead th {
  text-align: left;
  padding: var(--s3);
  color: var(--mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: var(--topbar-h); z-index: 1;
}
.data-table tbody td {
  padding: 0.7rem var(--s3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.08s var(--ease); }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .row-disabled { opacity: 0.55; }
.data-table .center { text-align: center; padding: var(--s10); color: var(--mute); }
.data-table .actions { text-align: right; white-space: nowrap; }
.data-table code { background: transparent; color: var(--mute); padding: 0; font-size: 0.78rem; }
.data-table a { color: var(--ink); font-weight: 600; }
.data-table a:hover { color: var(--brand); text-decoration: none; }
.data-table .sub { display: block; color: var(--mute); font-weight: 400; font-size: 0.78rem; margin-top: 0.1rem; }

body.density-cozy .data-table tbody td { padding: 0.45rem var(--s3); }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  font-size: 0.82rem;
  color: var(--mute);
  border-top: 1px solid var(--line);
}
.pagination a, .pagination .btn-secondary { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* ---------- 11. Stats / dashboard ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
  margin-top: 0;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  position: relative;
}
a.stat-card:hover {
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
  background: var(--surface-2);
  text-decoration: none;
}
.stat-card .stat-label {
  font-size: 0.72rem;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.stat-card .stat-value {
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variant-numeric: var(--num);
}
.stat-card .stat-meta { font-size: 0.78rem; color: var(--mute); }

.stat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); }
.stat-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--s3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.stat-label { font-size: 0.7rem; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.stat-value { font-size: 1.25rem; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); }

.big-stat { font-size: 2.5rem; font-weight: 800; color: var(--brand); margin: 0; letter-spacing: -0.03em; font-variant-numeric: var(--num); }

/* Funnel — solid muted bars, no gradients */
.funnel { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.funnel-stage {
  position: relative;
  padding: 0.5rem var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 36px;
}
.funnel-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in oklch, var(--brand) 14%, transparent);
  transition: width 0.5s var(--ease);
}
.funnel-stage.funnel-funded .funnel-bar { background: color-mix(in oklch, var(--ok) 18%, transparent); }
.funnel-stage.funnel-underwriting .funnel-bar { background: color-mix(in oklch, var(--warn) 18%, transparent); }
.funnel-stage.funnel-lost .funnel-bar { background: color-mix(in oklch, var(--danger) 14%, transparent); }
.funnel-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 600;
}
.funnel-name { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 700; }
.funnel-numbers { color: var(--mute); font-size: 0.8rem; font-weight: 600; font-variant-numeric: var(--num); }

/* ---------- 12. Auth shell (login / forgot / change pwd) ---------- */

.auth-shell {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s8);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in oklch, var(--brand) 7%, transparent), transparent 40%),
    radial-gradient(circle at 100% 100%, color-mix(in oklch, var(--brand) 5%, transparent), transparent 40%),
    var(--bg);
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s8);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-2);
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.auth-logo img { height: 24px; width: auto; display: block; }
.auth-sub { font-size: 0.86rem; font-weight: 500; color: var(--mute); margin: 0 0 var(--s4); text-transform: none; letter-spacing: 0; }
.portal-links { margin-top: var(--s5); font-size: 0.82rem; color: var(--mute); text-align: center; }
.portal-links a { font-weight: 600; }

/* ---------- 13. Landing (public portal picker) ---------- */

.landing { flex: 1; display: grid; place-items: center; padding: var(--s8); background: var(--bg); }
.landing-inner { max-width: 880px; width: 100%; text-align: center; }
.landing-logo { display: block; height: 36px; width: auto; margin: 0 auto var(--s3); }
.landing-sub { color: var(--mute); margin: 0 0 var(--s8); font-size: 1rem; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.portal-card {
  display: block;
  padding: var(--s8) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.portal-card:hover {
  text-decoration: none;
  background: var(--surface-2);
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
}
.portal-card h2 { margin: 0 0 var(--s2); color: var(--ink); font-size: 1.1rem; font-weight: 700; }
.portal-card p { margin: 0; color: var(--mute); font-size: 0.86rem; }

/* ---------- 14. Notifications (notice / success / error) ---------- */

.notice, .success, .error {
  padding: 0.65rem 0.9rem;
  border-radius: var(--r);
  margin-bottom: var(--s4);
  font-size: 0.86rem;
  border: 1px solid;
}
.notice  { background: var(--info-soft);   border-color: color-mix(in oklch, var(--info) 25%, transparent);   color: var(--info-ink); }
.success { background: var(--ok-soft);     border-color: color-mix(in oklch, var(--ok) 25%, transparent);     color: var(--ok-ink); }
.error   { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 25%, transparent); color: var(--danger-ink); }

/* ---------- 15. Lead/record two-pane ---------- */

.lead-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s5);
  align-items: flex-start;
}
.lead-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }
.lead-side { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: calc(var(--topbar-h) + var(--s4)); }
.lead-side .panel { margin-top: 0; }
.lead-side h3 {
  margin: 0 0 var(--s3);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 1100px) {
  .lead-layout { grid-template-columns: 1fr; }
  .lead-side { position: static; }
}

/* ---------- 16. Timeline (no border-stripes) ---------- */

.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.timeline-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px dashed var(--line);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--mute-soft);
}
.timeline-item.timeline-lead-created::before    { background: var(--brand); }
.timeline-item.timeline-status-changed::before  { background: var(--ok); }
.timeline-item.timeline-user-assigned::before   { background: var(--violet); }
.timeline-item.timeline-lender-routed::before   { background: var(--warn); }
.timeline-item.timeline-note::before            { background: var(--mute); }
.timeline-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  font-size: 0.82rem;
}
.timeline-meta strong { font-weight: 700; color: var(--ink); font-size: 0.86rem; }
.timeline-meta .muted { font-size: 0.74rem; flex-shrink: 0; }
.timeline-body {
  margin-top: 0.3rem;
  font-size: 0.86rem;
  color: var(--ink-2);
  white-space: pre-wrap;
  line-height: 1.55;
}

/* ---------- 17. Messages ---------- */

.message-thread { list-style: none; padding: 0; margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.message-bubble {
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  max-width: 90%;
}
.message-bubble.bubble-admin    { background: var(--brand-soft);   border-color: color-mix(in oklch, var(--brand) 18%, var(--line)); }
.message-bubble.bubble-lender   { background: var(--teal-soft);    border-color: color-mix(in oklch, var(--teal) 18%, var(--line)); }
.message-bubble.bubble-client   { background: var(--violet-soft);  border-color: color-mix(in oklch, var(--violet) 18%, var(--line)); align-self: flex-end; }
.message-bubble.bubble-internal { background: var(--warn-soft);    border-color: color-mix(in oklch, var(--warn) 18%, var(--line)); }
.message-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  font-size: 0.76rem; color: var(--mute); margin-bottom: var(--s2);
}
.message-meta strong { color: var(--ink); font-weight: 700; font-size: 0.82rem; }
.message-body { font-size: 0.9rem; color: var(--ink); white-space: pre-wrap; line-height: 1.55; }

.message-form {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.message-form textarea {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font: inherit; font-size: 0.9rem;
  background: var(--surface); color: var(--ink);
  resize: vertical; min-height: 80px; line-height: 1.5;
}
.message-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.message-form-actions { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.audience-toggle { display: flex; align-items: center; gap: var(--s2); font-size: 0.84rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.audience-toggle input { margin: 0; }
.message-form-actions .btn-primary { margin-left: auto; }

/* ---------- 18. Documents / uploads ---------- */

.upload-form {
  display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap;
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}
.upload-field { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--s2); }
.upload-field > span { font-size: 0.74rem; color: var(--mute); font-weight: 600; }
.upload-field input[type="file"] { padding: 0.3rem 0; font-size: 0.84rem; font-family: inherit; color: var(--ink-2); }

.doc-table { margin-top: var(--s4); }
.doc-table th:last-child, .doc-table td:last-child { text-align: right; }

/* Doc preview lightbox */
.doc-preview { position: fixed; inset: 0; z-index: 1000; }
.doc-preview-backdrop { position: absolute; inset: 0; background: oklch(0% 0 0 / 0.65); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.doc-preview-dialog {
  position: absolute; inset: var(--s8);
  background: var(--surface);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.doc-preview-head {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 0.86rem; color: var(--ink); flex-shrink: 0;
}
.doc-preview-head .link-btn { font-size: 1.1rem; font-weight: 700; color: var(--mute); }
.doc-preview-body {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  overflow: auto;
}
.doc-preview-img { max-width: 100%; max-height: 100%; display: block; }
.doc-preview-iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 19. Sensitive PII (no border-stripe) ---------- */

.sensitive-pii {
  background: var(--warn-soft);
  border-color: color-mix(in oklch, var(--warn) 30%, var(--line));
  position: relative;
}
.sensitive-pii::before {
  content: "RESTRICTED";
  position: absolute;
  top: -0.55rem; left: var(--s4);
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--warn-ink);
  color: white;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.sensitive-pii h2 { color: var(--warn-ink); }
.sensitive-pii .kv dd { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sensitive-pii .kv dd code {
  font-size: 0.86rem;
  background: color-mix(in oklch, var(--warn) 15%, transparent);
  color: var(--warn-ink);
  padding: 0.15rem 0.45rem;
  border-radius: 4px; font-weight: 700;
}
.reveal-form { display: inline; }
.reveal-form button { font-size: 0.78rem; font-weight: 700; color: var(--warn-ink); }
.reveal-form button:hover { color: var(--warn-ink); text-decoration: underline; }
.revealed { display: inline-flex; align-items: center; gap: var(--s2); }
.revealed strong {
  background: color-mix(in oklch, var(--warn) 15%, transparent);
  color: var(--warn-ink);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: var(--num);
}

/* ---------- 20. Webhooks / API keys ---------- */

.webhook-row { padding: var(--s4); border-bottom: 1px solid var(--line); }
.webhook-row:last-child { border-bottom: none; }
.webhook-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s2); flex-wrap: wrap; }
.webhook-url {
  font-size: 0.82rem;
  color: var(--ink-2);
  background: var(--surface-3);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  word-break: break-all;
}
.webhook-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s1); }
.event-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 0.2rem;
  font-family: var(--font-mono);
}
.webhook-deliveries { font-size: 0.82rem; }
.delivery-dot {
  display: inline-block;
  min-width: 2.5rem; text-align: center;
  padding: 0.15rem 0.35rem;
  margin-right: 0.2rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: var(--num);
}
.delivery-dot.delivery-ok   { background: var(--ok-soft);     color: var(--ok-ink);     border-color: color-mix(in oklch, var(--ok) 25%, transparent); }
.delivery-dot.delivery-fail { background: var(--danger-soft); color: var(--danger-ink); border-color: color-mix(in oklch, var(--danger) 25%, transparent); }

.event-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  margin: 0;
}
.event-fieldset legend {
  padding: 0 var(--s2);
  font-size: 0.74rem; font-weight: 700; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.checkbox-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0.3rem 0;
  font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 0.86rem; color: var(--ink-2);
}
.checkbox-row input { margin: 0; }

/* ---------- 21. 2FA ---------- */

.totp-qr-row { display: flex; align-items: center; gap: var(--s8); margin: var(--s4) 0; flex-wrap: wrap; }
.totp-qr {
  width: 200px; height: 200px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: white; padding: 8px;
}
.totp-secret { flex: 1; min-width: 240px; }
.totp-secret-code {
  display: inline-block;
  padding: 0.55rem 0.8rem;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-variant-numeric: var(--num);
  word-break: break-all;
  user-select: all;
}
.recovery-codes {
  list-style: decimal;
  padding-left: var(--s5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s2) var(--s5);
}
.recovery-codes code {
  font-size: 0.95rem;
  background: var(--warn-soft);
  color: var(--warn-ink);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  user-select: all;
  font-weight: 700;
  font-variant-numeric: var(--num);
}

/* ---------- 22. Raw payload viewer ---------- */

.raw-payload {
  margin: var(--s2) 0 0;
  padding: var(--s3) var(--s4);
  background: oklch(18% 0.02 var(--brand-h));
  color: oklch(92% 0.01 var(--brand-h));
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow: auto;
}

/* ---------- 23. Audit / details ---------- */

.audit-meta {
  margin: var(--s2) 0 0;
  padding: var(--s2) var(--s3);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  max-width: 480px;
  max-height: 200px;
  overflow: auto;
}
details > summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
details > summary:hover { color: var(--ink); }

/* ---------- 24. Offer countdown ---------- */

.offer-countdown { font-variant-numeric: var(--num); font-weight: 600; color: var(--brand); }
.offer-urgent .offer-countdown { color: var(--danger); }
.offer-expired { opacity: 0.55; }
.offer-expired .offer-countdown { color: var(--mute); font-weight: 400; }

/* ---------- 25. Empty state ---------- */

.empty {
  padding: var(--s10) var(--s5);
  text-align: center;
  color: var(--mute);
}
.empty h3 { font-size: 1rem; color: var(--ink); margin-bottom: var(--s2); font-weight: 700; }
.empty p { font-size: 0.86rem; max-width: 440px; margin: 0 auto var(--s4); }

/* ---------- 26. Responsive ---------- */

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease);
    box-shadow: var(--shadow-pop);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: "";
    position: fixed; inset: 0;
    background: oklch(0% 0 0 / 0.4);
    z-index: 15;
  }
  .topbar-toggle { display: inline-grid; }
  .app-main { padding: var(--s5) var(--s4); }
  .topbar { padding: 0 var(--s4); }
}
@media (min-width: 901px) {
  .topbar-toggle.is-mobile-only { display: none; }
}

/* ---------- 26b. List primitives (Phase 2) ---------- */

.list-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  margin: 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: var(--num);
}
.filter-chip:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
  text-decoration: none;
}
.filter-chip.active {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
}
.filter-chip .muted { color: inherit; opacity: 0.65; font-weight: 600; }

/* Main tab items (Leads / Converted to Application) */
.list-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.list-tab:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.list-tab.active {
  background: var(--brand);
  color: #fff;
}
.list-tab.active .tab-badge { background: rgba(255,255,255,0.25); color: #fff; }

/* Count badge inside tabs */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.35rem;
  height: 1.35rem;
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Status sub-tab bar inside a panel */
.status-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow-x: auto;
}
.status-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}
.status-tab-link:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line-strong); }
.status-tab-link.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.status-tab-link.active .tab-badge {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* Toolbar inside a flush panel: filter bar + actions */
.list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  background: var(--surface);
}
.list-toolbar .filter-bar { flex: 1; min-width: 0; gap: var(--s2); }
.list-toolbar .filter-bar input[type="search"] { min-width: 200px; }

.list-meta {
  padding: var(--s3) var(--s4);
  font-size: 0.78rem; color: var(--mute);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-variant-numeric: var(--num);
}

.actions-row { display: inline-flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.actions-row .sep { color: var(--mute-soft); }

.nowrap { white-space: nowrap; }

/* Empty-state cell inside a table */
.data-table tbody tr.empty-row td {
  padding: var(--s10) var(--s5);
  text-align: center;
  color: var(--mute);
}
.data-table tbody tr.empty-row strong { color: var(--ink); display: block; margin-bottom: var(--s2); font-size: 0.95rem; }
.data-table tbody tr.empty-row p { font-size: 0.84rem; max-width: 460px; margin: 0 auto; }

/* Aggregate / metric bar (funded deals totals row) */
.metric-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s4);
}
.metric { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.metric-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); font-weight: 700; }
.metric-value { font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); letter-spacing: -0.01em; }

/* Misc tags used across list views */
.tag-active   { background: var(--ok-soft);    color: var(--ok-ink); }
.tag-danger   { background: var(--danger-soft); color: var(--danger-ink); }
.tag-whale    { background: var(--violet-soft); color: var(--violet-ink); }
.tag-auto     { background: var(--info-soft);   color: var(--info-ink); }
.tag-manual   { background: var(--surface-3);   color: var(--ink-2); }

/* API key reveal block */
.api-key-display {
  display: block;
  padding: var(--s3) var(--s4);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: var(--num);
  word-break: break-all;
  margin: var(--s2) 0;
  user-select: all;
  color: var(--ink);
}

/* Pipeline wide-table (horizontal scroll) */
.pipeline-grid-wrap {
  margin-top: var(--s4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pipeline-grid-wrap > .pipeline-col-filters {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  background: var(--surface);
}
.pipeline-grid-wrap > .pipeline-col-filters input,
.pipeline-grid-wrap > .pipeline-col-filters select {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}
.pipeline-grid-wrap > .pipeline-col-filters input::placeholder { color: var(--mute-soft); }
.pipeline-grid-wrap > table.pipeline-table { min-width: 100%; width: max-content; }
.pipeline-table thead th { white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.pipeline-table tbody td { white-space: nowrap; }

/* Panel head row variant used by comm-templates */
.panel-head-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s4);
  gap: var(--s3);
}

/* Webhook delivery meta line */
.webhook-deliveries-meta { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.webhook-actions { display: inline-flex; gap: var(--s2); align-items: center; }

/* Saved-filter list (leads page) */
.saved-filters-list { padding: var(--s3) var(--s4); }

/* Ensure code in table cells stays muted */
.data-table .nowrap, .data-table .small { white-space: nowrap; }

/* ---------- 26c. Record detail (Phase 3) ---------- */

/* Record header — big identity block at the top of a record page */
.record-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.record-id { font-size: 0.74rem; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: var(--s1); }
.record-title { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.record-title h1 { margin: 0; }
.record-title .status-pill { vertical-align: baseline; font-size: 0.7rem; }
.record-sub { color: var(--mute); margin-top: var(--s2); font-size: 0.86rem; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.record-sub .sep { color: var(--mute-soft); opacity: 0.5; }
.record-actions { display: inline-flex; gap: var(--s2); align-items: flex-start; flex-wrap: wrap; }

/* Inline metric strip for a record */
.record-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.record-metric {
  background: var(--surface);
  padding: var(--s4);
  display: flex; flex-direction: column; gap: 2px;
}
.record-metric-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); font-weight: 700; }
.record-metric-value { font-size: 1.1rem; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); letter-spacing: -0.01em; }
.record-metric-value.num { font-variant-numeric: var(--num); }

/* Legacy metric-card name (leads/detail used this) */
.metric-card { background: var(--surface); padding: var(--s4); display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); }
.metric-card .metric-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); font-weight: 700; }
.metric-card .metric-value { font-size: 1rem; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); }

/* Tabs */
.record-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.record-tab {
  appearance: none;
  background: none;
  border: none;
  padding: var(--s3) var(--s4);
  color: var(--mute);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
  display: inline-flex; align-items: center; gap: var(--s2);
}
.record-tab:hover { color: var(--ink); text-decoration: none; }
.record-tab.active { color: var(--ink); border-bottom-color: var(--brand); }
.record-tab .count {
  font-size: 0.72rem; font-weight: 600;
  background: var(--surface-2);
  color: var(--mute);
  padding: 0 0.4rem;
  height: 18px; line-height: 18px;
  border-radius: 999px;
  font-variant-numeric: var(--num);
}
.record-tab.active .count { background: var(--brand-soft); color: var(--brand-ink); }

.record-tab-panel[hidden] { display: none; }
.record-tab-panel { display: flex; flex-direction: column; gap: var(--s5); }

/* Section heading inside a panel (groups within a tab) */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s4);
}
.section-head h2 { margin: 0; font-size: 0.95rem; }
.section-head .hint { margin: 0; font-size: 0.78rem; color: var(--mute); }

/* Summary rail (right column on record pages) — denser than main panels */
.summary-rail { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: calc(var(--topbar-h) + var(--s4)); }
.summary-rail .panel { margin: 0; padding: var(--s4); }
.summary-rail .panel h3 { margin: 0 0 var(--s3); font-size: 0.72rem; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; }
.summary-rail .stacked-form { max-width: none; gap: var(--s2); }
.summary-rail .stacked-form select,
.summary-rail .stacked-form input[type="text"] { width: 100%; font-size: 0.84rem; padding: 0.45rem 0.6rem; }
.summary-rail .stacked-form .btn-primary { width: 100%; padding: 0.45rem 0.8rem; font-size: 0.82rem; }
.summary-rail .hint { font-size: 0.74rem; margin-top: var(--s2); }

@media (max-width: 1100px) {
  .summary-rail { position: static; }
}

/* Checkbox labels on flag forms */
.checkbox-label { display: flex; align-items: center; gap: var(--s2); font-size: 0.86rem; font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.checkbox-label input { margin: 0; }

/* Legacy form-row alias (Phase 5 polish) */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.form-row > label { display: flex; flex-direction: column; gap: var(--s2); font-size: 0.78rem; font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.form-row > label input,
.form-row > label select,
.form-row > label textarea {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: inherit; font-size: 0.88rem;
  color: var(--ink); background: var(--surface);
}
.form-row > label input:focus,
.form-row > label select:focus,
.form-row > label textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.form-row > label .required { color: var(--danger); }

.panel-title { margin: 0 0 var(--s4); font-size: 0.95rem; font-weight: 700; color: var(--ink); }

/* Doc checklist pill row */
.doc-checklist {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s4);
}
.doc-checklist > * { padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; }

/* Communications send form collapsible */
.comm-send-form { margin: var(--s2) 0; }
.comm-send-form > summary { font-weight: 600; color: var(--brand); padding: var(--s2) 0; font-size: 0.86rem; }
.comm-send-form[open] > summary { margin-bottom: var(--s3); }

/* ---------- 26d. Pipeline Kanban (Phase 4) ---------- */

/* Pipeline page is its OWN viewport — page never scrolls; columns scroll
   internally. Horizontal scroll happens on the kanban wrapper as a unit. */
.app-main.is-pipeline {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  flex: none;
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.pipeline-head h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.pipeline-head-meta { margin: 0; font-size: 0.82rem; color: var(--mute); font-variant-numeric: var(--num); }
.pipeline-head-actions { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

.app-main.is-pipeline .kanban-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--s2);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s3) var(--s5);
  scroll-padding-inline: var(--s5);
  scrollbar-gutter: stable;
}
.app-main.is-pipeline .kanban-wrap::-webkit-scrollbar { height: 10px; }
.app-main.is-pipeline .kanban-wrap::-webkit-scrollbar-track { background: transparent; }
.app-main.is-pipeline .kanban-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.app-main.is-pipeline .kanban-wrap::-webkit-scrollbar-thumb:hover { background: var(--mute-soft); }

.app-main.is-pipeline .kanban-col {
  height: 100%;
  min-height: 0;
}

/* Fallback for non-pipeline contexts (kept simple) */
.kanban-wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s3);
  align-items: stretch;
}

.kanban-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 280px;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--surface-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  z-index: 1;
}
.kanban-col-head .stage-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--mute-soft); flex-shrink: 0; }
.kanban-col.stage-new .stage-dot                  { background: var(--info); }
.kanban-col.stage-follow_up .stage-dot,
.kanban-col.stage-requested_statements .stage-dot,
.kanban-col.stage-requesting_docs .stage-dot,
.kanban-col.stage-docs_requested .stage-dot,
.kanban-col.stage-missing_information .stage-dot  { background: var(--warn); }
.kanban-col.stage-ready_to_submit .stage-dot,
.kanban-col.stage-docs_in .stage-dot,
.kanban-col.stage-qualified .stage-dot            { background: var(--teal); }
.kanban-col.stage-submitted .stage-dot,
.kanban-col.stage-underwriting .stage-dot,
.kanban-col.stage-application_sent .stage-dot,
.kanban-col.stage-docs_out .stage-dot             { background: var(--violet); }
.kanban-col.stage-offers .stage-dot,
.kanban-col.stage-funded .stage-dot               { background: var(--ok); }
.kanban-col.stage-merchant_declined .stage-dot,
.kanban-col.stage-hard_decline .stage-dot,
.kanban-col.stage-soft_decline .stage-dot,
.kanban-col.stage-lost .stage-dot,
.kanban-col.stage-no_interest .stage-dot,
.kanban-col.stage-deferred .stage-dot             { background: var(--danger); }

.kanban-col-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-col-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mute);
  background: var(--surface);
  padding: 0 0.45rem;
  height: 20px; line-height: 20px;
  border-radius: 999px;
  font-variant-numeric: var(--num);
  flex-shrink: 0;
}
.kanban-col-more {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  flex-shrink: 0;
}
.kanban-col-more:hover { color: var(--brand); text-decoration: none; }

.kanban-body {
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.kanban-card {
  display: block;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.kanban-card:hover { border-color: color-mix(in oklch, var(--brand) 25%, var(--line)); background: var(--surface); text-decoration: none; }

.kanban-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s1);
  line-height: 1.3;
}
.kanban-card-sub { font-size: 0.78rem; color: var(--mute); margin: 0; line-height: 1.3; }
.kanban-card-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: 0.76rem;
  color: var(--mute);
  flex-wrap: wrap;
  font-variant-numeric: var(--num);
}
.kanban-card-row .amount { color: var(--ink); font-weight: 700; }
.kanban-card-row .sep { color: var(--mute-soft); opacity: 0.6; }
.kanban-card-row .stale { color: var(--warn-ink); font-weight: 600; }
.kanban-card .tags { margin-top: var(--s2); display: inline-flex; gap: var(--s1); flex-wrap: wrap; }

.kanban-col-empty {
  padding: var(--s5) var(--s3);
  text-align: center;
  color: var(--mute);
  font-size: 0.78rem;
}

/* ============================================================
 * Customer portal — product shell
 *
 * Distinct from the admin chrome. Customer = SMB owner checking
 * on their application. No sidebar. Single column. Generous
 * whitespace. Status is the hero. Reuses OKLCH tokens.
 * ============================================================ */

.product-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

.product-topbar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.product-brand { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.product-brand img { height: 22px; width: auto; display: block; }
[data-theme="dark"] .product-brand img { filter: brightness(0) invert(1); }

.product-nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1;
  margin-left: var(--s5);
  overflow-x: auto;
}
.product-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.product-nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.product-nav a.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }

.product-topbar-actions { display: inline-flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.product-user {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink); font-size: 0.78rem; font-weight: 600;
  text-decoration: none;
}
.product-user:hover { background: var(--surface-2); text-decoration: none; }
.product-user .sidebar-avatar { width: 24px; height: 24px; font-size: 0.62rem; }

.product-signout {
  background: none; border: 1px solid transparent;
  color: var(--mute); font-size: 0.82rem; font-weight: 500;
  padding: 0.4rem 0.7rem; border-radius: var(--r-sm);
  cursor: pointer; font-family: inherit;
}
.product-signout:hover { color: var(--danger-ink); background: var(--danger-soft); }

.product-main {
  flex: 1;
  padding: var(--s12) var(--s6) var(--s16);
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s12);
}

.product-page-head { display: flex; flex-direction: column; gap: var(--s2); }
.product-page-head h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; margin: 0; }
.product-page-head .lede { font-size: 1.05rem; color: var(--mute); margin: 0; max-width: 65ch; line-height: 1.55; }

/* Status hero block */
.product-hero {
  padding: var(--s10) var(--s8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: relative;
  overflow: hidden;
}
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.product-hero-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  margin: 0;
}
.product-hero-amount {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: var(--num);
  line-height: 1;
  margin: 0;
}
.product-hero-status {
  font-size: 1.1rem;
  color: var(--ink-2);
  margin: 0;
  font-weight: 500;
}
.product-hero-status .status-pill {
  font-size: 0.78rem; padding: 0.25rem 0.7rem;
}
.product-hero-meta {
  font-size: 0.86rem;
  color: var(--mute);
  margin: var(--s2) 0 0;
}
.product-hero-meta a { font-weight: 600; }

/* Big call-to-action banner (you have offers!) */
.product-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  background: var(--brand-soft);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}
.product-cta-text { font-size: 1rem; font-weight: 600; color: var(--brand-ink); }
.product-cta .btn-primary { padding: 0.6rem 1.1rem; font-size: 0.92rem; }

/* Editorial section: not a boxy card, just a thin top divider + label */
.product-section {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding-top: var(--s8);
  border-top: 1px solid var(--line);
}
.product-section:first-of-type { border-top: 0; padding-top: 0; }

.product-section-head { display: flex; flex-direction: column; gap: var(--s2); }
.product-section-head h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.product-section-head .lede { font-size: 0.95rem; color: var(--mute); margin: 0; max-width: 65ch; }
.product-section-head .label {
  font-size: 0.7rem; font-weight: 700; color: var(--brand-ink);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Inline meta grid (replaces stat-grid for product context) */
.product-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s5) var(--s6);
}
.product-meta-item { display: flex; flex-direction: column; gap: var(--s1); }
.product-meta-label { font-size: 0.74rem; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }
.product-meta-value { font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); letter-spacing: -0.005em; }

/* Offer card (premium feel — bigger, more breathing room than admin) */
.product-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s4);
}
.product-offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.product-offer-card.urgent {
  border-color: color-mix(in oklch, var(--warn) 40%, var(--line));
  background: color-mix(in oklch, var(--warn-soft) 50%, var(--surface));
}
.product-offer-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; color: var(--mute); font-weight: 600;
}
.product-offer-card-head .countdown { color: var(--warn-ink); font-variant-numeric: var(--num); }
.product-offer-amount {
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: var(--num);
  color: var(--ink);
  margin: 0;
}
.product-offer-grid-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s3) var(--s4);
}
.product-offer-grid-inline > div { display: flex; flex-direction: column; gap: 2px; }
.product-offer-grid-inline .label { font-size: 0.7rem; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.product-offer-grid-inline span:not(.label) { font-size: 0.95rem; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); }
.product-offer-notes { font-size: 0.86rem; color: var(--ink-2); line-height: 1.55; padding: var(--s3); background: var(--surface-2); border-radius: var(--r); }
.product-offer-card .btn-primary { width: 100%; padding: 0.75rem; font-size: 0.95rem; }

/* Document requests / upload */
.product-doc-requests {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--warn-soft);
  border: 1px solid color-mix(in oklch, var(--warn) 30%, var(--line));
  border-radius: var(--r-lg);
}
.product-doc-requests h3 { font-size: 1.05rem; font-weight: 700; color: var(--warn-ink); margin: 0 0 var(--s2); }
.product-doc-requests ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.product-doc-requests li { font-size: 0.92rem; color: var(--ink); display: flex; gap: var(--s2); align-items: baseline; }
.product-doc-requests li::before { content: "•"; color: var(--warn-ink); font-weight: 700; }
.product-doc-requests .hint { color: var(--warn-ink); margin-top: var(--s3); font-size: 0.82rem; }

.product-upload {
  display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.product-upload .upload-field { flex: 1; min-width: 240px; }

/* Plain document list — no table chrome */
.product-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.product-doc-list li {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.product-doc-list li:last-child { border-bottom: none; }
.product-doc-list .doc-name { flex: 1; min-width: 0; }
.product-doc-list .doc-name a { color: var(--ink); font-weight: 600; }
.product-doc-list .doc-meta { font-size: 0.78rem; color: var(--mute); font-variant-numeric: var(--num); flex-shrink: 0; white-space: nowrap; }

/* Message thread reused but slightly tweaked for product context */
.product-section .message-thread { gap: var(--s3); }

/* Timeline reused but no border-bottom dashed dividers in the product context */
.product-section .timeline { gap: var(--s4); }
.product-section .timeline-item { border-bottom: 0; padding: 0; }

/* Business card (My businesses page) */
.product-business-card {
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.product-business-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.product-business-card-head h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ink); }
.product-business-card-head .meta { font-size: 0.78rem; color: var(--mute); margin-top: var(--s1); }

/* Comm-prefs checkbox group (richer for product feel) */
.product-pref {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
}
.product-pref input { margin-top: 0.2rem; flex-shrink: 0; }
.product-pref:hover { border-color: var(--line-strong); }
.product-pref:has(input:checked) { border-color: color-mix(in oklch, var(--brand) 35%, var(--line)); background: color-mix(in oklch, var(--brand-soft) 40%, var(--surface)); }
.product-pref-text { display: flex; flex-direction: column; gap: 2px; }
.product-pref-text strong { font-size: 0.95rem; color: var(--ink); font-weight: 700; }
.product-pref-text span { font-size: 0.82rem; color: var(--mute); }

@media (max-width: 700px) {
  .product-topbar { padding: var(--s3) var(--s4); gap: var(--s3); }
  .product-nav { margin-left: var(--s2); gap: 0; }
  .product-nav a { padding: 0.35rem 0.5rem; font-size: 0.82rem; }
  .product-main { padding: var(--s6) var(--s4) var(--s10); gap: var(--s8); }
  .product-hero { padding: var(--s6) var(--s5); }
  .product-user span { display: none; }
}

/* ---------- 27. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}