/* === bundle-v5pages.css === */
/* Generated 2026-06-23 — DO NOT EDIT DIRECTLY */
/* Wave 16+17 added: v5-cma · v5-transactions · v5-listings · v5-marketing · v5-reports · v5-financials · v5-recruiting · v5-team · v5-crm · v5-market · v5-integrations · v5-tools · v5-showings */

/* --- v5-intelligence.css --- */
/* v5-intelligence.css — Intelligence page: Marketing Pulse · SEO Intelligence ·
 * Business Review · Report Library.
 *
 * DATA INTEGRITY: No hardcoded org names, metrics, or dates. All counts = "—"
 * until live data arrives. Source labels only (Lofty, REOS SEO pipeline, ClickUp).
 *
 * THEME: Colors come entirely from shared token vars (--panel, --border, --text*,
 * --accent, --accent-rgb, --warn, --good, --surface, --ink, --line, --champagne).
 * Both dark + light themes work with zero per-theme special-casing except the
 * explicit [data-theme="light"] block at the bottom.
 *
 * NO-SCROLL: The outer .w424-body already handles scroll. The .intel-layout
 * fills it as a flex child. Only long lists inside cards scroll internally.
 */

/* ── View layout: 2-col main + right sidebar ─────────────────────────── */
.intel-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 12px;
  align-items: start;
  width: 100%;
}
.intel-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.intel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ── Page header (inside .w424-head, overrides .w424-title defaults) ──── */
.intel-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
  display: block;
}
.intel-h1 {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 5px;
  line-height: 1.15;
  letter-spacing: .01em;
}
.intel-subline {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* ── Card shell ──────────────────────────────────────────────────────── */
.intel-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 0;
}
.intel-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.intel-card-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

/* ── Chips ───────────────────────────────────────────────────────────── */
.intel-chip {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
.intel-chip-muted {
  color: var(--text-muted);
  background: rgba(var(--accent-rgb), .05);
  border: 1px solid var(--border2, var(--border));
}
.intel-chip-blue {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .3);
}
.intel-chip-warn {
  color: var(--warn);
  background: rgba(255, 184, 72, .08);
  border: 1px solid rgba(255, 184, 72, .3);
}

/* ── Source / freshness footer ───────────────────────────────────────── */
.intel-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border2, var(--border));
}
.intel-source-badge {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg2, var(--bg));
  border: 1px solid var(--border2, var(--border));
  border-radius: 4px;
  padding: 2px 7px;
}
.intel-source-fresh {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Sparkline (Marketing Pulse) ─────────────────────────────────────── */
.intel-sparkline {
  width: 100%;
  height: 38px;
  display: block;
  margin-bottom: 10px;
}
.intel-spark-fill {
  fill: rgba(var(--accent-rgb), .07);
}
.intel-spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .65;
}
.intel-spark-baseline {
  stroke: rgba(var(--accent-rgb), .2);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* ── KPI mini-tiles row (Marketing Pulse) ────────────────────────────── */
.intel-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 2px;
}
.intel-kpi-tile {
  background: rgba(var(--accent-rgb), .04);
  border: 1px solid var(--border2, var(--border));
  border-radius: 8px;
  padding: 9px 11px;
}
.intel-kpi-val {
  font-family: var(--display, var(--sans));
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.intel-kpi-lab {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  line-height: 1.3;
}

/* ── SEO list items ──────────────────────────────────────────────────── */
.intel-seo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border2, var(--border));
}
.intel-seo-row:last-of-type { border-bottom: 0; }
.intel-seo-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}
.intel-seo-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 10px;
  background: rgba(var(--accent-rgb), .04);
  border-left: 2px solid rgba(var(--accent-rgb), .3);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}

/* ── Business Review insight rows ────────────────────────────────────── */
.intel-insight-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--border2, var(--border));
}
.intel-insight-row:last-of-type { border-bottom: 0; }
.intel-insight-quote {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
  letter-spacing: .01em;
}
.intel-insight-body {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Report Library (sidebar) ────────────────────────────────────────── */
.intel-report-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border2, var(--border));
}
.intel-report-row:last-of-type { border-bottom: 0; }
.intel-report-main { flex: 1; min-width: 0; }
.intel-report-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 3px;
  line-height: 1.2;
}
.intel-report-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  display: block;
  line-height: 1.45;
}
.intel-report-open {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 4px;
  padding: 4px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .14s;
}
.intel-report-open:hover {
  background: rgba(var(--accent-rgb), .2);
}
.intel-report-empty {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 0 2px;
  border-top: 1px dashed var(--border2, var(--border));
  margin-top: 4px;
}

/* ── Rankings · GSC · LLM mentions (T11) ─────────────────────────────── */
.intel-gsc-row {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 10px;
}
.intel-stale-notice {
  padding: 8px 12px;
  background: rgba(214,169,79,.08);
  border-left: 2px solid var(--warn);
  border-radius: 0 4px 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--warn);
  margin-bottom: 12px;
}
.intel-stale-notice[hidden] { display: none; }
.intel-rank-table-wrap { max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.intel-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
}
.intel-rank-table th {
  text-align: left;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 6px 7px;
  border-bottom: 1px solid var(--border2, var(--border));
  position: sticky;
  top: 0;
  background: var(--panel);
}
.intel-rank-table td {
  font-size: 10.5px;
  color: var(--text-dim);
  padding: 7px 6px;
  border-bottom: 1px solid var(--border2, var(--border));
  vertical-align: middle;
}
.intel-rank-table tr:last-child td { border-bottom: 0; }
.intel-rank-num { text-align: right; white-space: nowrap; width: 1%; }
.intel-rank-kw { color: var(--text); text-decoration: none; }
a.intel-rank-kw:hover { color: var(--accent); text-decoration: underline; }
.intel-rank-empty-row td {
  text-align: center;
  color: var(--text-muted);
  font-size: 9.5px;
  padding: 14px 6px;
}
.rank-up   { color: var(--good); font-size: 11px; font-weight: 600; }
.rank-dn   { color: var(--bad);  font-size: 11px; font-weight: 600; }
.rank-flat { color: var(--muted); }
.intel-llm-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border2, var(--border));
}
.intel-llm-head {
  display: block;
  margin-bottom: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.llm-mention-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.llm-mention-row:last-child { border-bottom: 0; }
.llm-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--champagne-soft);
  color: var(--champagne);
  white-space: nowrap;
  flex-shrink: 0;
}
.llm-mention-body { min-width: 0; flex: 1; }
.llm-mention-text {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}
.llm-mention-ctx {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
}
.intel-llm-empty {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* ── Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] .intel-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
[data-theme="light"] .intel-kpi-tile {
  background: rgba(var(--accent-rgb), .04);
  border-color: var(--line);
}
[data-theme="light"] .intel-source-badge {
  background: rgba(var(--accent-rgb), .05);
  border-color: var(--line);
  color: var(--muted);
}
[data-theme="light"] .intel-source-fresh {
  color: var(--muted);
}
[data-theme="light"] .intel-spark-fill {
  fill: rgba(var(--accent-rgb), .06);
}
[data-theme="light"] .intel-spark-line {
  stroke: rgba(var(--accent-rgb), .55);
}
[data-theme="light"] .intel-spark-baseline {
  stroke: rgba(var(--accent-rgb), .18);
}
[data-theme="light"] .intel-seo-note {
  background: rgba(var(--accent-rgb), .04);
  border-left-color: rgba(var(--accent-rgb), .3);
}
[data-theme="light"] .intel-rank-table th {
  background: var(--surface);
  border-bottom-color: var(--line);
}
[data-theme="light"] .intel-rank-table td { border-bottom-color: var(--line); }
[data-theme="light"] .llm-mention-row { border-bottom-color: var(--line); }
[data-theme="light"] .intel-stale-notice { background: rgba(214,169,79,.1); }
[data-theme="light"] .llm-chip {
  background: var(--champagne-soft);
  color: #8a6a1f;
}

/* --- v5-admin.css --- */
/* ── v5-admin.css — Users & Roles + Audit Log (ATLAS V5 Phase 5)
   Enterprise admin surfaces. Uses tokens from jarvis.css:
   --surface/--line/--ink (V5 aliases) + --panel/--panel2/--border/--border2
   --accent/--accent-rgb/--good/--good-rgb/--warn/--bad/--champagne/--champagne-soft
   --text/--text-dim/--text-muted/--mono/--sans/--rad
   Both dark + light themes inherit automatically — zero per-theme overrides here.
   Multi-tenant: no hardcoded names, numbers, or org strings anywhere in this file.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared page chrome ─────────────────────────────────────── */
.adm-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.adm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.adm-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

/* Refine the w424-title for admin pages — sans-serif, heavier, statement size */
.adm-page .w424-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* ── Command bar ─────────────────────────────────────────────── */
.adm-cmdbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 22px; /* optical align with title text */
}

.adm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--rad);
  padding: 7px 14px;
  cursor: pointer;
  transition: all .14s;
  border: 1px solid transparent;
}
.adm-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.adm-btn-primary {
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .35);
}
.adm-btn-primary:hover {
  background: rgba(var(--accent-rgb), .24);
  border-color: rgba(var(--accent-rgb), .55);
}

.adm-btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
}
.adm-btn-secondary:hover {
  color: var(--text);
  background: rgba(var(--accent-rgb), .05);
  border-color: var(--border);
}

/* ── Shared section label ────────────────────────────────────── */
.adm-section-head {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ── Card container ──────────────────────────────────────────── */
.adm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 16px 16px 12px;
}
.adm-card-h {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   USERS & ROLES
   ═══════════════════════════════════════════════════════════════ */

.adm-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.adm-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}

/* ── User roster table ───────────────────────────────────────── */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden;
}

.adm-table thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 12px;
  text-align: left;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.adm-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
}
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), .04);
}

/* Avatar initials bubble */
.adm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .22);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  flex-shrink: 0;
}

.adm-name  { font-family: var(--sans); font-weight: 600; }
.adm-org   { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.adm-ts    { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }

/* ── Role chips ──────────────────────────────────────────────── */
.role-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* ADMIN / OWNER — champagne gold */
.role-admin {
  background: var(--champagne-soft);
  color: var(--champagne);
  border-color: rgba(214, 169, 79, .30);
}

/* BROKER — teal (mapped to --good family; no dedicated teal token) */
.role-broker {
  background: rgba(var(--good-rgb), .12);
  color: var(--good);
  border-color: rgba(var(--good-rgb), .28);
}

/* AGENT — atlas blue */
.role-agent {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .28);
}

/* READ-ONLY / STAFF — muted */
.role-readonly {
  background: rgba(232, 244, 255, .05);
  color: var(--text-muted);
  border-color: var(--border2);
}
:root[data-theme="light"] .role-readonly {
  background: var(--surface-2);
}

/* ── Status chips ────────────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-active {
  background: rgba(58, 255, 173, .09);
  color: var(--good);
  border-color: rgba(58, 255, 173, .24);
}
.status-active::before { background: var(--good); }

.status-inactive {
  background: rgba(232, 244, 255, .04);
  color: var(--text-muted);
  border-color: var(--border2);
}
.status-inactive::before { background: var(--text-muted); }

/* ── Role permission matrix ──────────────────────────────────── */
.adm-perm-table {
  width: 100%;
  border-collapse: collapse;
}

.adm-perm-table thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.adm-perm-table thead th:first-child { text-align: left; }

.adm-perm-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border2);
  text-align: center;
  font-size: 13px;
  vertical-align: middle;
}
.adm-perm-table tbody td:first-child { text-align: left; }
.adm-perm-table tbody tr:last-child td { border-bottom: 0; }
.adm-perm-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), .04);
}

.perm-yes { color: var(--good); font-size: 14px; font-weight: 700; line-height: 1; }
.perm-no  { color: var(--text-muted); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   AUDIT LOG
   ═══════════════════════════════════════════════════════════════ */

/* Filter topbar */
.adm-audit-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.adm-filter-sel {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 6px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.adm-filter-sel:focus { border-color: rgba(var(--accent-rgb), .5); color: var(--text); }

.adm-filter-spacer { flex: 1; }

/* Disabled Export CSV button + tooltip wrapper */
.adm-export-wrap {
  position: relative;
  display: inline-flex;
}
.adm-btn-export {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}
.adm-export-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 7px);
  right: 0;
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 11px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
/* Re-enable hover events on wrapper so tooltip shows */
.adm-export-wrap { pointer-events: auto; }
.adm-export-wrap:hover .adm-export-tip { display: block; }

/* Scrollable audit table wrapper */
.adm-audit-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--rad);
  flex: 1;
  min-height: 0;
}

/* Audit table — Carbon-inspired density */
.adm-audit-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

/* Sticky header */
.adm-audit-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 12px;
  text-align: left;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.adm-audit-table thead th:hover { color: var(--text-dim); }

.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: .35;
  font-size: 10px;
  vertical-align: middle;
}
.adm-audit-table thead th:hover .sort-arrow { opacity: .7; }

/* Body rows */
.adm-audit-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2);
  font-size: 11.5px;
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.adm-audit-table tbody tr:last-child td { border-bottom: 0; }
.adm-audit-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), .04);
}

.adm-audit-ts     { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); }
.adm-audit-actor  { font-family: var(--sans); font-weight: 600; color: var(--text); }
.adm-audit-action { color: var(--text-dim); }
.adm-audit-target { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.adm-audit-org    { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.adm-audit-source {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
}

/* Audit event status chips */
.audit-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.audit-chip-logged {
  background: rgba(58, 255, 173, .09);
  color: var(--good);
  border-color: rgba(58, 255, 173, .24);
}
.audit-chip-auto {
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .24);
}

/* Pagination row */
.adm-audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 2px;
  flex-shrink: 0;
}
.adm-pg-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--rad);
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: default;
  opacity: .42;
}
.adm-pg-cur {
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-radius: var(--rad);
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
}

/* Retention notice */
.adm-audit-notice {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  padding: 8px 0 0;
  text-align: center;
  letter-spacing: .03em;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — V5 enterprise upgrade
   Uses the same token set as the rest of v5-admin.css.
   Chips (.chip .chip-good / .chip-blue / .chip-warn) are in v5-today.css.
   w424-seg / w424-seg-btn / .is-on are in north_star_final.css.
   Multi-tenant: no hardcoded names, org strings, or metrics anywhere here.
   ══════════════════════════════════════════════════════════════════════════ */

/* Gold/champagne "Apply workspace" button */
.adm-btn-gold {
  background: var(--champagne-soft);
  color: var(--champagne);
  border-color: rgba(214, 169, 79, .30);
}
.adm-btn-gold:hover {
  background: color-mix(in srgb, var(--champagne) 20%, transparent);
  border-color: rgba(214, 169, 79, .50);
}

/* Sub-paragraph in adm-head (used by Settings + future pages) */
.adm-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.55;
  max-width: 58ch;
}

/* ── Settings body scroll container ─────────────────────────────────────── */
.stg-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding-bottom: 12px;
}

/* ── 2-column grid: Experience + Data Sources ────────────────────────────── */
.stg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex-shrink: 0;
}

/* ── Card container ──────────────────────────────────────────────────────── */
.stg-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 20px;
}
.stg-card-full {
  flex-shrink: 0;
}

/* ── Card header: uppercase label + chip ─────────────────────────────────── */
.stg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.stg-card-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Control rows (Experience panel) ─────────────────────────────────────── */
.stg-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.stg-control-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Label + description pair ────────────────────────────────────────────── */
.stg-ctrl-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stg-ctrl-label strong {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.stg-ctrl-label span {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── <kbd> shortcut badge ────────────────────────────────────────────────── */
.stg-kbd {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── System / data source rows ───────────────────────────────────────────── */
.stg-sys-list {
  display: flex;
  flex-direction: column;
}
.stg-sys-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.stg-sys-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Disconnected-source note ─────────────────────────────────────────────── */
.stg-note {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}
.stg-note code {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--text-dim);
}

/* ── Multi-tenant binding reminder block ─────────────────────────────────── */
.stg-sample-note {
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--warn);
  border-radius: var(--rad);
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 16px;
}

/* --- v5-clients.css --- */
/* v5-clients.css — V5 PEOPLE group: Clients + Calendar pages.
 *
 * DATA INTEGRITY: No hardcoded names, metrics, or dates. All counts = "—"
 * until live data arrives. Source labels only (Lofty).
 *
 * THEME: Colors come entirely from shared token vars (--panel, --border,
 * --text*, --accent, --accent-rgb, --warn, --good, --bad, --surface, --bg).
 * Both dark + light themes work — only the minimal [data-theme="light"] block
 * at the bottom adds overrides where token swap is not enough.
 *
 * SCROLL: The outer .w424-body handles vertical scroll. Inner tables scroll
 * horizontally if needed; sidebar cards scroll their lists internally.
 *
 * Prefix: .clt-*  → Clients page  (data-view="clientcare")
 *         .cal5-* → Calendar page (data-view="calendar")
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared eyebrow label (used by both pages) ──────────────────────── */
.clt-eyebrow,
.cal5-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

/* ══════════════════════════════════════════════════════════════════════
   CLIENTS PAGE  (data-view="clientcare")
   ══════════════════════════════════════════════════════════════════════ */

/* Page h1 and subtitle */
.clt-h1 {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 5px;
  line-height: 1.15;
  letter-spacing: .01em;
}
.clt-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* 2-column layout: 70% table + 30% sidebar card */
.clt-layout {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 14px;
  align-items: start;
  width: 100%;
}
.clt-main  { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.clt-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* ── Client table ───────────────────────────────────────────────────── */
.clt-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--rad);
  overflow: hidden;
  overflow-x: auto;
  background: var(--panel);
}
.clt-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.clt-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.clt-table thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 12px;
  text-align: left;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.clt-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
}
.clt-table tbody tr:last-child td { border-bottom: 0; }
.clt-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), .04);
}
.clt-name   { font-family: var(--sans); font-weight: 600; white-space: nowrap; }
.clt-stage  { font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.clt-agent  { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.clt-ts     { font-family: var(--mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.clt-action { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

/* ── Status chips ───────────────────────────────────────────────────── */
.clt-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.clt-chip-warn {
  color: var(--warn);
  background: rgba(255, 182, 72, .10);
  border: 1px solid rgba(255, 182, 72, .32);
}
.clt-chip-bad {
  color: var(--bad);
  background: rgba(255, 91, 58, .10);
  border: 1px solid rgba(255, 91, 58, .32);
}
.clt-chip-good {
  color: var(--good);
  background: rgba(58, 255, 173, .08);
  border: 1px solid rgba(58, 255, 173, .28);
}
.clt-chip-blue {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .30);
}

/* ── CRM Pulse card ─────────────────────────────────────────────────── */
.clt-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 14px 16px;
}
.clt-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.clt-card-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
}

/* 3-column mini-stats grid */
.clt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.clt-stat {
  background: rgba(var(--accent-rgb), .04);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clt-stat-val {
  font-family: var(--display, var(--sans));
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.clt-stat-lab {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Source footer */
.clt-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--border2);
  margin-bottom: 12px;
}
.clt-source-badge {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 7px;
}
.clt-source-fresh {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Open CRM button (external link style) */
.clt-open-crm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-radius: var(--rad);
  padding: 7px 12px;
  text-decoration: none;
  transition: background .14s, border-color .14s;
  width: 100%;
  justify-content: center;
}
.clt-open-crm:hover {
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .50);
}
.clt-open-crm svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CALENDAR PAGE  (data-view="calendar")
   ══════════════════════════════════════════════════════════════════════ */

/* Page h1 */
.cal5-h1 {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
  letter-spacing: .01em;
}

/* Layout: wide main + fixed sidebar */
.cal5-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 14px;
  align-items: start;
  width: 100%;
}
.cal5-main    { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cal5-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Toolbar: toggle + optional add button row */
.cal5-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Add-event button (used in toolbar + sidebar) */
.cal5-add-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-radius: var(--rad);
  padding: 6px 12px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
  white-space: nowrap;
}
.cal5-add-btn:hover {
  background: rgba(var(--accent-rgb), .20);
  border-color: rgba(var(--accent-rgb), .50);
}

/* ── Week view table ────────────────────────────────────────────────── */
.cal5-week {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  overflow: hidden;
}
.cal5-week thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.cal5-week tbody td {
  vertical-align: top;
  padding: 8px 8px 10px;
  border-right: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  min-height: 80px;
}
.cal5-week tbody tr:last-child td { border-bottom: 0; }
.cal5-week tbody td:last-child    { border-right: 0; }

/* ── Event card inside a week cell ─────────────────────────────────── */
.cal5-ev {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 7px;
  border-radius: 5px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), .06);
  margin-bottom: 5px;
}
.cal5-ev:last-child { margin-bottom: 0; }
.cal5-ev-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  display: block;
}
.cal5-ev-time {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
  display: block;
}

/* Event type variants — border accent + bg tint */
.cal5-ev[data-type="showing"] {
  border-left-color: var(--warn);
  background: rgba(255, 182, 72, .06);
}
.cal5-ev[data-type="closing"] {
  border-left-color: var(--good);
  background: rgba(58, 255, 173, .05);
}
.cal5-ev[data-type="meeting"] {
  border-left-color: var(--accent);
  background: rgba(var(--accent-rgb), .06);
}

/* ── Calendar type chips ────────────────────────────────────────────── */
.cal5-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  width: fit-content;
}
.cal5-chip-showing {
  color: var(--warn);
  background: rgba(255, 182, 72, .10);
  border: 1px solid rgba(255, 182, 72, .30);
}
.cal5-chip-closing {
  color: var(--good);
  background: rgba(58, 255, 173, .08);
  border: 1px solid rgba(58, 255, 173, .28);
}
.cal5-chip-meeting {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .28);
}

/* ── Sidebar: upcoming card ─────────────────────────────────────────── */
.cal5-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal5-card-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}

.cal5-upcoming {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cal5-up-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
}
.cal5-up-row:last-child { border-bottom: 0; }
.cal5-up-date {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 38px;
  padding-top: 1px;
}
.cal5-up-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal5-up-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  display: block;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════════ */

/* Clients */
[data-theme="light"] .clt-card,
[data-theme="light"] .clt-table-wrap {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
[data-theme="light"] .clt-table thead th {
  background: rgba(var(--accent-rgb), .04);
  border-bottom-color: var(--line);
}
[data-theme="light"] .clt-table tbody td {
  border-bottom-color: var(--line);
}
[data-theme="light"] .clt-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), .04);
}
[data-theme="light"] .clt-stat {
  background: rgba(var(--accent-rgb), .04);
  border-color: var(--line);
}
[data-theme="light"] .clt-source-badge {
  background: rgba(var(--accent-rgb), .05);
  border-color: var(--line);
}

/* Calendar */
[data-theme="light"] .cal5-week {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
[data-theme="light"] .cal5-week thead th {
  background: rgba(var(--accent-rgb), .04);
  border-bottom-color: var(--line);
}
[data-theme="light"] .cal5-week tbody td {
  border-right-color: var(--line);
  border-bottom-color: var(--line);
}
[data-theme="light"] .cal5-ev {
  background: rgba(var(--accent-rgb), .05);
}
[data-theme="light"] .cal5-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
[data-theme="light"] .cal5-up-row {
  border-bottom-color: var(--line);
}

/* --- v5-operations.css --- */
/* ══════════════════════════════════════════════════════════════════════════
   v5-operations.css — Operations Page · V5 Enterprise
   ──────────────────────────────────────────────────────────────────────────
   Tokens consumed from jarvis.css / north_star_final.css:
     --surface / --surface-2 / --line / --line-strong / --ink
     --panel / --panel2 / --border / --border2
     --accent / --accent-rgb
     --good / --good-rgb
     --warn / --bad
     --champagne / --champagne-soft
     --text / --text-dim / --text-muted
     --mono / --sans / --display / --rad

   Both dark + light themes: zero hardcoded colors; all palette refs via vars.
   Light-theme rules isolated to explicit [data-theme="light"] block at bottom.
   DATA INTEGRITY: no hardcoded org names, metrics, dates, or counts anywhere.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Page wrapper ────────────────────────────────────────────── */
.ops-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 0;
}


/* ══════════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════════ */

.ops-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.ops-head-copy {
  min-width: 0;
}

.ops-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.ops-h1 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 7px;
}

.ops-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 540px;
}


/* ── Action buttons ──────────────────────────────────────────── */
.ops-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 22px; /* optical align with title baseline */
}

.ops-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--rad);
  padding: 7px 14px;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  border: 1px solid transparent;
  line-height: 1;
}

/* Ghost / secondary */
.ops-btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--line-strong);
}
.ops-btn-ghost:hover {
  color: var(--text);
  background: rgba(var(--accent-rgb), .06);
  border-color: rgba(var(--accent-rgb), .38);
}

/* Champagne / gold CTA */
.ops-btn-gold {
  background: var(--champagne-soft);
  color: var(--champagne);
  border-color: rgba(214, 169, 79, .32);
}
.ops-btn-gold:hover {
  background: rgba(214, 169, 79, .26);
  border-color: rgba(214, 169, 79, .55);
}


/* ══════════════════════════════════════════════════════════════
   2 × 2 PANEL GRID
   ══════════════════════════════════════════════════════════════ */

.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  flex: 1;
  min-height: 0;
  align-content: start;
}

/* Card */
.ops-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Subtle top accent line (matches system card treatment) */
.ops-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), .18) 30%,
    rgba(var(--accent-rgb), .10) 70%,
    transparent 100%);
  pointer-events: none;
}


/* ── Card header ─────────────────────────────────────────────── */
.ops-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.ops-card-title {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════════
   STATUS CHIPS
   ══════════════════════════════════════════════════════════════ */

.ops-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* Good / green */
.ops-chip-good {
  background: rgba(var(--good-rgb), .10);
  color: var(--good);
  border-color: rgba(var(--good-rgb), .26);
}

/* Warn / amber — uses known RGB of --warn: #ffb648 */
.ops-chip-warn {
  background: rgba(255, 182, 72, .10);
  color: var(--warn);
  border-color: rgba(255, 182, 72, .28);
}

/* Blue / accent */
.ops-chip-blue {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .28);
}

/* Muted / placeholder (em-dash) */
.ops-chip-muted {
  background: rgba(232, 244, 255, .04);
  color: var(--text-muted);
  border-color: var(--border2);
}


/* ══════════════════════════════════════════════════════════════
   PANEL 1 + 4  — SYSTEM LIST
   (Integrations / Admin Queue)
   ══════════════════════════════════════════════════════════════ */

.ops-system-list {
  display: flex;
  flex-direction: column;
}

.ops-system-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border2);
}
.ops-system-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ops-system-row:first-child {
  padding-top: 0;
}

.ops-system-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ops-system-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.ops-system-desc {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-dim);
  line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════════
   PANEL 2  — AUTOMATION EXCEPTIONS / INSIGHT ROWS
   ══════════════════════════════════════════════════════════════ */

.ops-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-insight {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 13px;
  background: rgba(var(--accent-rgb), .04);
  border-left: 2px solid rgba(var(--accent-rgb), .28);
  border-radius: 0 6px 6px 0;
}

.ops-insight-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.ops-insight-body {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-dim);
  line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════
   PANEL 3  — SERVICE UPTIME CHART
   ══════════════════════════════════════════════════════════════ */

.ops-uptime-chart {
  flex: 1;
  min-height: 60px;
  display: flex;
  align-items: stretch;
}

.ops-uptime-svg {
  width: 100%;
  height: 72px;
  overflow: visible;
}


/* ══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════════ */

:root[data-theme="light"] .ops-card {
  background: var(--surface);
  border-color: var(--line);
}

:root[data-theme="light"] .ops-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), .12) 30%,
    rgba(var(--accent-rgb), .06) 70%,
    transparent 100%);
}

:root[data-theme="light"] .ops-chip-muted {
  background: var(--surface-2);
  border-color: var(--line);
}

:root[data-theme="light"] .ops-insight {
  background: rgba(var(--accent-rgb), .05);
  border-color: rgba(var(--accent-rgb), .22);
}

:root[data-theme="light"] .ops-btn-ghost {
  border-color: var(--border);
}

/* --- v5-trust-center.css --- */
/* ── v5-trust-center.css — Trust Center page (ATLAS V5)
   Security posture, data governance, and policy status.
   Tokens from jarvis.css: --surface/--line/--panel/--panel2/--border/--border2
   --accent/--accent-rgb/--good/--warn/--bad/--champagne/--champagne-soft
   --text/--text-dim/--text-muted/--mono/--sans/--rad
   Both themes inherit automatically — zero per-theme overrides here.
   ══════════════════════════════════════════════════════════════════ */

/* ── Page chrome ─────────────────────────────────────────────────── */
.tc-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.tc-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.tc-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}

.tc-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
}

/* ── Command bar ─────────────────────────────────────────────────── */
.tc-cmdbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 22px;
}

.tc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--rad);
  padding: 7px 14px;
  cursor: pointer;
  transition: all .14s;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.tc-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.tc-btn-primary {
  background: var(--champagne-soft);
  color: var(--champagne);
  border-color: rgba(214, 169, 79, .35);
}
.tc-btn-primary:hover {
  background: rgba(214, 169, 79, .22);
  border-color: rgba(214, 169, 79, .58);
}

.tc-btn-secondary {
  background: transparent;
  color: var(--champagne);
  border-color: rgba(214, 169, 79, .28);
}
.tc-btn-secondary:hover {
  background: var(--champagne-soft);
  border-color: rgba(214, 169, 79, .5);
}

/* ── 2×2 panel grid ──────────────────────────────────────────────── */
.tc-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.tc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Shared panel card ───────────────────────────────────────────── */
.tc-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 16px;
}

.tc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.tc-panel-title {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Status chips ────────────────────────────────────────────────── */
.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.tc-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tc-chip-good {
  background: rgba(58, 255, 173, .09);
  color: var(--good);
  border-color: rgba(58, 255, 173, .24);
}
.tc-chip-good::before { background: var(--good); }

.tc-chip-warn {
  background: rgba(255, 182, 72, .10);
  color: var(--warn);
  border-color: rgba(255, 182, 72, .28);
}
.tc-chip-warn::before { background: var(--warn); }

.tc-chip-muted {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border2);
}
.tc-chip-muted::before { background: var(--text-muted); }

.tc-chip-blue {
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .26);
}
.tc-chip-blue::before { background: var(--accent); }

/* ── Security Posture rows ───────────────────────────────────────── */
.tc-security-list { display: flex; flex-direction: column; }

.tc-security-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
}
.tc-security-row:last-child { border-bottom: 0; }

.tc-sec-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.tc-sec-desc {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

/* ── Data Sources table ──────────────────────────────────────────── */
.tc-source-table {
  width: 100%;
  border-collapse: collapse;
}

.tc-source-table thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 8px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tc-source-table thead th:first-child { padding-left: 0; }
.tc-source-table thead th:last-child  { padding-right: 0; text-align: right; }

.tc-source-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border2);
  font-size: 11.5px;
  color: var(--text);
  vertical-align: middle;
}
.tc-source-table tbody td:first-child { padding-left: 0; }
.tc-source-table tbody td:last-child {
  padding-right: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.tc-source-table tbody tr:last-child td { border-bottom: 0; }
.tc-source-table tbody tr:hover td { background: rgba(var(--accent-rgb), .03); }

.tc-src-name  { font-family: var(--sans); font-weight: 600; }
.tc-src-type  { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
.tc-src-scope { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }

/* ── Policy Status rows ──────────────────────────────────────────── */
.tc-policy-list { display: flex; flex-direction: column; }

.tc-policy-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
}
.tc-policy-row:last-child { border-bottom: 0; }

.tc-pol-label { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--text); }
.tc-pol-desc  { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); }

/* ── Compliance Readiness items ──────────────────────────────────── */
.tc-compliance-list { display: flex; flex-direction: column; gap: 10px; }

.tc-compliance-item {
  border-left: 3px solid var(--champagne);
  padding: 7px 0 7px 14px;
}

.tc-comp-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.tc-comp-desc {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .tc-grid { grid-template-columns: 1fr; }
  .tc-head { flex-direction: column; gap: 12px; }
  .tc-cmdbar { padding-top: 0; }
  .tc-security-row,
  .tc-policy-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .tc-sec-desc,
  .tc-pol-desc {
    grid-column: 1 / -1;
    margin-top: -3px;
  }
}

/* --- v5-workspace.css --- */
/* ══════════════════════════════════════════════════════════════════════════
   v5-workspace.css — Workspace Group (06): Documents + Tasks pages
   ──────────────────────────────────────────────────────────────────────────
   Tokens consumed from jarvis.css / north_star_final.css:
     --surface / --surface-2 / --line / --line-strong / --ink
     --panel / --panel2 / --border / --border2
     --accent / --accent-rgb
     --good / --good-rgb
     --warn / --bad
     --text / --text-dim / --text-muted
     --mono / --sans / --display / --rad

   Prefix: .ws-*   (shared)
           .wsd-*  (Documents page  — data-view="documents")
           .wst-*  (Tasks page      — data-view="tasksnative")

   Both dark + light themes. Zero hardcoded colors. All data = {variable} or —.
   ══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   SHARED — page header (eyebrow / h1 / sub)
   ════════════════════════════════════════════════════════════════ */

.ws-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.ws-h1 {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}

.ws-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}


/* ════════════════════════════════════════════════════════════════
   SHARED — status chips  (.ws-chip)
   ════════════════════════════════════════════════════════════════ */

.ws-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.ws-chip-good {
  background: rgba(var(--good-rgb), .10);
  color: var(--good);
  border-color: rgba(var(--good-rgb), .28);
}

.ws-chip-warn {
  background: rgba(255, 182, 72, .10);
  color: var(--warn);
  border-color: rgba(255, 182, 72, .30);
}

.ws-chip-bad {
  background: rgba(255, 91, 58, .10);
  color: var(--bad);
  border-color: rgba(255, 91, 58, .30);
}

.ws-chip-blue {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .30);
}

.ws-chip-muted {
  background: rgba(232, 244, 255, .04);
  color: var(--text-muted);
  border-color: var(--border2);
}


/* ════════════════════════════════════════════════════════════════
   SHARED — panel card  (.ws-card)
   ════════════════════════════════════════════════════════════════ */

.ws-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Subtle gradient accent line at top */
.ws-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), .18) 30%,
    rgba(var(--accent-rgb), .10) 70%,
    transparent 100%);
  pointer-events: none;
}

.ws-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ws-card-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
}

.ws-card-src {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .06em;
}


/* ════════════════════════════════════════════════════════════════
   SHARED — mini-stats grid  (.ws-stats)
   ════════════════════════════════════════════════════════════════ */

.ws-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ws-stat {
  background: rgba(var(--accent-rgb), .04);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-stat-val {
  font-family: var(--display, var(--sans));
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.ws-stat-lab {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════
   SHARED — link button  (.ws-link-btn)
   ════════════════════════════════════════════════════════════════ */

.ws-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: var(--rad);
  padding: 7px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s, border-color .13s;
  align-self: flex-start;
}

.ws-link-btn:hover {
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .46);
}

/* ════════════════════════════════════════════════════════════════
   SHARED — note / disclaimer text
   ════════════════════════════════════════════════════════════════ */

.ws-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb), .03);
  border-left: 2px solid var(--border);
  border-radius: 0 4px 4px 0;
}


/* ════════════════════════════════════════════════════════════════
   DOCUMENTS PAGE  (data-view="documents")
   ════════════════════════════════════════════════════════════════ */

/* 2-column 50/50 layout */
.wsd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
}

/* ── Document queue rows ─────────────────────────────────────── */

.wsd-queue {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wsd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border2);
}

.wsd-row:first-child { padding-top: 0; }
.wsd-row:last-child  { border-bottom: none; padding-bottom: 0; }

.wsd-row-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wsd-doc-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsd-tx-name {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ════════════════════════════════════════════════════════════════
   TASKS PAGE  (data-view="tasksnative")
   ════════════════════════════════════════════════════════════════ */

/* 2-column layout: 65% table + 35% summary */
.wst-layout {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 14px;
  align-items: start;
  width: 100%;
}

/* ── Task table ──────────────────────────────────────────────── */

.wst-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--rad);
  overflow: hidden;
  overflow-x: auto;
  background: var(--panel);
}

.wst-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.wst-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.wst-table thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 12px;
  text-align: left;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.wst-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
}

.wst-table tbody tr:last-child td { border-bottom: 0; }

.wst-table tbody tr:nth-child(even) td {
  background: rgba(var(--accent-rgb), .02);
}

.wst-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), .05);
}

.wst-task-name {
  font-family: var(--sans);
  font-weight: 600;
  min-width: 140px;
}

.wst-owner {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.wst-due {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Priority chips (square, not pill) ───────────────────────── */

.wst-priority {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .07em;
  border-radius: 4px;
  padding: 3px 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.wst-p0 {
  background: rgba(255, 91, 58, .12);
  color: var(--bad);
  border-color: rgba(255, 91, 58, .32);
}

.wst-p1 {
  background: rgba(255, 182, 72, .10);
  color: var(--warn);
  border-color: rgba(255, 182, 72, .30);
}

.wst-p2 {
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .24);
}

.wst-p3 {
  background: rgba(232, 244, 255, .04);
  color: var(--text-muted);
  border-color: var(--border2);
}


/* ════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] .ws-card {
  background: var(--surface);
  border-color: var(--line);
}

:root[data-theme="light"] .ws-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), .10) 30%,
    rgba(var(--accent-rgb), .05) 70%,
    transparent 100%);
}

:root[data-theme="light"] .ws-chip-muted {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-muted);
}

:root[data-theme="light"] .ws-stat {
  background: rgba(var(--accent-rgb), .04);
  border-color: var(--line);
}

:root[data-theme="light"] .ws-note {
  background: var(--surface-2);
  border-color: var(--line);
}

:root[data-theme="light"] .wst-table-wrap {
  background: var(--surface);
  border-color: var(--line);
}

:root[data-theme="light"] .wst-table thead th {
  background: var(--surface-2, var(--panel2));
  border-color: var(--line);
  color: var(--text-muted);
}

:root[data-theme="light"] .wst-table tbody td {
  border-color: var(--line);
}

:root[data-theme="light"] .wst-table tbody tr:nth-child(even) td {
  background: rgba(var(--accent-rgb), .025);
}

:root[data-theme="light"] .wst-priority.wst-p2 {
  background: rgba(var(--accent-rgb), .07);
}

:root[data-theme="light"] .wst-priority.wst-p3 {
  background: var(--surface-2);
  border-color: var(--line);
}

:root[data-theme="light"] .wsd-row {
  border-color: var(--line);
}


/* ════════════════════════════════════════════════════════════════
   TASKS PAGE — live ClickUp task list (T10)
   Grouped Overdue / Today / This Week / Later rows fed from the
   ep_tasks atlas-fetcher endpoint via window.populateWorkspaceTasks().
   Theme-safe tokens only (--ink/--line/--muted/--surface-2/--champagne
   are aliased in jarvis.css for both themes).
   ════════════════════════════════════════════════════════════════ */

.ws-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.ws-task-row:hover { background: var(--surface-2); }

.ws-task-check {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.ws-task-name {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ws-task-name:hover { color: var(--champagne); text-decoration: underline; }

.ws-task-priority {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  flex-shrink: 0;
}
.ws-task-priority--urgent { background: rgba(239, 68, 68, .12); color: var(--bad); }
.ws-task-priority--high   { background: rgba(214, 169, 79, .12); color: var(--champagne); }
.ws-task-priority--normal { background: var(--surface-2); color: var(--muted); }
.ws-task-priority--low    { color: var(--muted); }

.ws-task-due {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.ws-task-assignee {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--champagne-soft);
  color: var(--champagne);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ws-group-header {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.ws-group--overdue .ws-task-name { color: var(--bad); }
.ws-group--muted { opacity: .6; }

.ws-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.ws-empty a { color: var(--champagne); }


/* --- v5-cma.css --- */
/* v5-cma.css — CMA Generator page styles
 * Follows ATLAS design tokens (var(--*)) and the v5-admin / w424-view pattern.
 * No scroll at 1920×1080: the outer frame never scrolls; .cma-body handles
 * internal overflow. Both light and dark themes are covered via CSS variables.
 */

/* ── Page wrapper (matches w424-page/adm-page pattern) ────────────────────── */
.cma-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.cma-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.07));
  flex-shrink: 0;
}
.cma-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne, var(--gold));
  margin-bottom: 4px;
}
.cma-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #e8e6e1);
  margin: 0 0 3px;
  line-height: 1.25;
}
.cma-sub {
  font-size: 12px;
  color: var(--muted, rgba(232,230,225,0.5));
  margin: 0;
}

/* ── Body — scrollable interior ───────────────────────────────────────────── */
.cma-body {
  display: flex;
  gap: 20px;
  padding: 20px 28px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── LEFT COLUMN — form ───────────────────────────────────────────────────── */
.cma-form-col {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.cma-form-col::-webkit-scrollbar { width: 4px; }
.cma-form-col::-webkit-scrollbar-track { background: transparent; }
.cma-form-col::-webkit-scrollbar-thumb { background: var(--line, rgba(255,255,255,0.1)); border-radius: 2px; }

/* ── Form sections ─────────────────────────────────────────────────────────── */
.cma-form-section {
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.07));
  border-left: 3px solid var(--champagne, var(--gold));
  border-radius: 8px;
  padding: 14px 16px;
}
.cma-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne, var(--gold));
  margin: 0 0 12px;
}

/* ── Comparable Sales section head (title + Find Comps action) ───────────── */
.cma-comp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cma-comp-section-head .cma-section-title { margin: 0; }
.cma-find-comps-btn {
  flex: none;
  background: linear-gradient(180deg, var(--champagne, var(--gold)), #c9963a);
  border: none;
  border-radius: 6px;
  color: #1a1200;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  transition: filter 0.15s ease, transform 0.08s ease, opacity 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.cma-find-comps-btn:hover { filter: brightness(1.07); }
.cma-find-comps-btn:active { transform: translateY(1px); }
.cma-find-comps-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.cma-find-comps-btn:disabled,
.cma-find-comps-btn.is-loading { opacity: 0.6; cursor: default; }
.cma-comps-status {
  font-size: 11px;
  color: var(--muted, rgba(232,230,225,0.6));
  margin: 0 0 10px;
  min-height: 14px;
  line-height: 1.4;
}

/* ── Form inputs ───────────────────────────────────────────────────────────── */
.cma-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.cma-field:last-child { margin-bottom: 0; }
.cma-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.5));
}
.cma-input,
.cma-select {
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--ink, #e8e6e1);
  font-size: 13px;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  font-family: inherit;
}
.cma-input::placeholder { color: var(--muted, rgba(232,230,225,0.35)); }
.cma-input:focus,
.cma-select:focus {
  border-color: var(--champagne, var(--gold));
  box-shadow: 0 0 0 2px rgba(232,201,122,0.15);
}
.cma-input--address {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
}

/* ── Property detail grid (beds/baths/sqft etc.) ───────────────────────────── */
.cma-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.cma-detail-grid-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Comp rows ─────────────────────────────────────────────────────────────── */
.cma-comp-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.6fr 0.6fr 0.8fr 1fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.cma-comp-row:last-child { margin-bottom: 0; }
.cma-comp-remove {
  background: none;
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 4px;
  color: var(--muted, rgba(232,230,225,0.4));
  cursor: pointer;
  font-size: 14px;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.cma-comp-remove:hover {
  color: #e85a5a;
  border-color: #e85a5a;
}
.cma-add-comp-btn {
  background: none;
  border: 1px dashed var(--line, rgba(255,255,255,0.15));
  border-radius: 6px;
  color: var(--muted, rgba(232,230,225,0.5));
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 7px 12px;
  width: 100%;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 6px;
}
.cma-add-comp-btn:hover {
  border-color: var(--champagne, var(--gold));
  color: var(--champagne, var(--gold));
}

/* ── Comp column headers ─────────────────────────────────────────────────── */
.cma-comp-headers {
  display: grid;
  grid-template-columns: 2fr 1fr 0.6fr 0.6fr 0.8fr 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}
.cma-comp-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.4));
}

/* ── Price range row ─────────────────────────────────────────────────────── */
.cma-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.cma-recommended-price {
  background: rgba(232,201,122,0.08);
  border: 1px solid rgba(232,201,122,0.3);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cma-rec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--champagne, var(--gold));
}
.cma-rec-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--champagne, var(--gold));
  letter-spacing: 0.02em;
}

/* ── Generate button ─────────────────────────────────────────────────────── */
.cma-generate-btn {
  width: 100%;
  background: linear-gradient(135deg, #d4a843 0%, var(--gold) 50%, #c9963a 100%);
  border: none;
  border-radius: 8px;
  color: #1a1200;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 12px 20px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: opacity 0.18s, box-shadow 0.18s, transform 0.12s;
  box-shadow: 0 4px 16px rgba(232,201,122,0.25);
  flex-shrink: 0;
}
.cma-generate-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.4s ease;
}
.cma-generate-btn:hover::after { left: 150%; }
.cma-generate-btn:hover {
  box-shadow: 0 6px 24px rgba(232,201,122,0.4);
  transform: translateY(-1px);
}
.cma-generate-btn:active { transform: translateY(0); }
.cma-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── RIGHT COLUMN — preview ──────────────────────────────────────────────── */
.cma-preview-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cma-preview-pane {
  flex: 1;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.07));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.cma-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--muted, rgba(232,230,225,0.3));
  text-align: center;
  padding: 32px;
}
.cma-preview-icon {
  opacity: 0.3;
}
.cma-preview-msg {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted, rgba(232,230,225,0.4));
}
.cma-preview-hint {
  font-size: 11px;
  color: var(--muted, rgba(232,230,225,0.25));
}
.cma-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  display: none;
}
.cma-preview-frame.is-visible { display: block; }

.cma-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--champagne, var(--gold));
  font-size: 13px;
  font-weight: 500;
}
.cma-generating::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 2px solid rgba(232,201,122,0.25);
  border-top-color: var(--champagne, var(--gold));
  border-radius: 50%;
  animation: cma-spin 0.8s linear infinite;
}
@keyframes cma-spin { to { transform: rotate(360deg); } }

/* ── Preview action bar ──────────────────────────────────────────────────── */
.cma-preview-actions {
  display: flex;
  gap: 10px;
}
.cma-preview-btn {
  flex: 1;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 7px;
  color: var(--ink, #e8e6e1);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 9px 14px;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.cma-preview-btn:hover:not(:disabled) {
  border-color: var(--champagne, var(--gold));
  color: var(--champagne, var(--gold));
}
.cma-preview-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cma-preview-btn--primary {
  background: rgba(232,201,122,0.08);
  border-color: rgba(232,201,122,0.3);
  color: var(--champagne, var(--gold));
}
.cma-preview-btn--primary:hover:not(:disabled) {
  background: rgba(232,201,122,0.16);
}

/* ── Address autocomplete dropdown ──────────────────────────────────────────── */
.cma-ac-wrap { position: relative; }
#cma-ac {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface, #1a1f2e);
  border: 1px solid var(--champagne, var(--gold));
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 200;
  overflow: hidden;
}
#cma-ac.cma-ac--open { display: block; }
.cma-ac-opt {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink, #e8e6e1);
  transition: background 0.12s;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.06));
}
.cma-ac-opt:last-child { border-bottom: none; }
.cma-ac-opt:hover,
.cma-ac-opt.is-active { background: rgba(232,201,122,0.12); }
.cma-ac-opt b { color: var(--ink, #e8e6e1); }
.cma-ac-opt small { color: var(--muted, rgba(232,230,225,0.5)); margin-left: 4px; }

/* ── Light theme overrides ─────────────────────────────────────────────────── */
[data-theme="light"] .cma-form-section {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .cma-input,
[data-theme="light"] .cma-select {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  color: #1a1a1a;
}
[data-theme="light"] .cma-input::placeholder { color: rgba(0,0,0,0.35); }
[data-theme="light"] .cma-preview-pane {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .cma-preview-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: #1a1a1a;
}
[data-theme="light"] .cma-add-comp-btn {
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.4);
}


/* --- v5-transactions.css --- */
/* === ATLAS V5 Transactions Page ===========================================
 * Live Dotloop transaction pipeline. Scoped to #view-transactions.
 * Token-only → both themes auto-valid. Loads after depts.js view markup.
 * Design language mirrors v5-pipeline.css (header · summary strip · cards).
 * No hardcoded colors — every surface/accent is a CSS custom property so the
 * T-key light/dark toggle + colorblind modes stay valid. (atlas-dashboard.md)
 * ========================================================================= */

/* ── Page header ─────────────────────────────────────────────────────────── */
#view-transactions .tx-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
#view-transactions .tx-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
#view-transactions .tx-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin: 0;
  line-height: 1.1;
}
#view-transactions .tx-org-sub {
  display: block;
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  margin-top: 4px;
}
#view-transactions .tx-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#view-transactions .tx-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--champagne, var(--accent));
  background: var(--champagne-soft, rgba(214,169,79,.18));
  color: var(--champagne, var(--accent));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 120ms;
}
#view-transactions .tx-new-btn:hover {
  background: var(--champagne, var(--accent));
  color: #1a1300;
  box-shadow: 0 4px 16px rgba(214,169,79,.28);
}
#view-transactions .tx-new-btn:active { transform: translateY(1px); }
#view-transactions .tx-new-btn:focus-visible {
  outline: 2px solid var(--champagne, var(--accent));
  outline-offset: 2px;
}
#view-transactions .tx-new-btn svg { width: 14px; height: 14px; }

/* ── Summary strip — 4 stat tiles (matches KPI strip tokens) ────────────── */
#view-transactions .tx-strip {
  display: flex;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
#view-transactions .tx-stat {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--line, var(--border));
}
#view-transactions .tx-stat:last-child { border-right: none; }
#view-transactions .tx-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 5px;
}
#view-transactions .tx-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#view-transactions .tx-stat-val.champagne { color: var(--champagne, var(--accent)); }
#view-transactions .tx-stat-val.good      { color: var(--good, #3affad); }

/* ── Filter + search bar ─────────────────────────────────────────────────── */
#view-transactions .tx-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
#view-transactions .tx-filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
#view-transactions .tx-filters::-webkit-scrollbar { display: none; }
#view-transactions .tx-filter-btn {
  position: relative;
  flex-shrink: 0;
  padding: 7px 14px 9px;
  border: none;
  background: none;
  color: var(--muted, var(--text-dim));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color 140ms;
}
#view-transactions .tx-filter-btn:hover { color: var(--ink, var(--text)); }
#view-transactions .tx-filter-btn::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 140ms;
}
#view-transactions .tx-filter-btn.active {
  color: var(--champagne, var(--accent));
}
#view-transactions .tx-filter-btn.active::after {
  background: var(--champagne, var(--accent));
}
#view-transactions .tx-filter-btn:focus-visible {
  outline: 2px solid var(--champagne, var(--accent));
  outline-offset: 2px;
}
#view-transactions .tx-filter-count {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: inherit;
  vertical-align: middle;
}

/* Search input — matches ATLAS form input style */
#view-transactions .tx-search {
  position: relative;
  flex-shrink: 0;
}
#view-transactions .tx-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted, var(--text-dim));
  pointer-events: none;
}
#view-transactions .tx-search input {
  width: 240px;
  max-width: 38vw;
  padding: 8px 12px 8px 32px;
  border-radius: 8px;
  border: 1px solid var(--line, var(--border));
  background: var(--surface, var(--panel));
  color: var(--ink, var(--text));
  font-size: 12px;
  font-family: inherit;
  transition: border-color 140ms, box-shadow 140ms;
}
#view-transactions .tx-search input::placeholder { color: var(--muted, var(--text-dim)); }
#view-transactions .tx-search input:focus {
  outline: none;
  border-color: var(--champagne, var(--accent));
  box-shadow: 0 0 0 3px var(--champagne-soft, rgba(214,169,79,.18));
}

/* ── Cards grid ──────────────────────────────────────────────────────────── */
#view-transactions .tx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--space-4, 16px);
  padding: 20px 28px 28px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  align-content: start;
}

/* "Dotloop sync pending" / live-state banner above the grid */
#view-transactions .tx-syncbanner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 28px 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--warn, #ffb648);
  background: rgba(255,182,72,.10);
  color: var(--warn, #ffb648);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
#view-transactions .tx-syncbanner svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Transaction card ────────────────────────────────────────────────────── */
#view-transactions .tx-card {
  position: relative;
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-left: 4px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 16px 18px 14px;
  transition: border-color 160ms, box-shadow 160ms, transform 120ms;
}
#view-transactions .tx-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
  transform: translateY(-1px);
}
/* Status-keyed left border */
#view-transactions .tx-card.tx-active        { border-left-color: var(--champagne, var(--accent)); }
#view-transactions .tx-card.tx-closed        { border-left-color: var(--good, #3affad); }
#view-transactions .tx-card.tx-attention     { border-left-color: var(--warn, #ffb648); }

/* Needs-attention: subtle pulsing left border */
#view-transactions .tx-card.tx-attention {
  animation: txAttnPulse 2.4s ease-in-out infinite;
}
@keyframes txAttnPulse {
  0%, 100% { box-shadow: -3px 0 0 -1px rgba(255,182,72,0); }
  50%      { box-shadow: -3px 0 0 -1px rgba(255,182,72,.55); }
}
@media (prefers-reduced-motion: reduce) {
  #view-transactions .tx-card.tx-attention { animation: none; }
}

/* Card top row: status chip + side indicator + days badge */
#view-transactions .tx-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-right: 52px; /* room for the days badge */
}

/* Status chip — readable at a glance, no decoding */
#view-transactions .tx-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 11px;
  line-height: 1.4;
}
#view-transactions .tx-status-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
#view-transactions .tx-status-chip.under-contract {
  color: var(--champagne, var(--accent));
  background: var(--champagne-soft, rgba(214,169,79,.18));
}
#view-transactions .tx-status-chip.pending {
  color: var(--warn, #ffb648);
  background: rgba(255,182,72,.14);
}
#view-transactions .tx-status-chip.attention {
  color: var(--warn, #ffb648);
  background: rgba(255,182,72,.14);
}
#view-transactions .tx-status-chip.closed {
  color: var(--good, #3affad);
  background: rgba(58,255,173,.13);
}

/* Side indicator — listing vs buying */
#view-transactions .tx-side {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 11px;
  border: 1px solid transparent;
}
#view-transactions .tx-side-listing {
  color: var(--champagne, var(--accent));
  border-color: var(--champagne, var(--accent));
}
#view-transactions .tx-side-buying {
  color: var(--accent, #00d6ff);
  border-color: var(--accent, #00d6ff);
}

/* Days-open circular badge — top-right of card */
#view-transactions .tx-days {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line, var(--border));
  background: var(--surface-2, var(--panel2, var(--panel)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#view-transactions .tx-days-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, var(--text));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#view-transactions .tx-days-lab {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, var(--text-dim));
  margin-top: 1px;
}

/* Address */
#view-transactions .tx-address {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, var(--text));
  line-height: 1.3;
  margin-bottom: 6px;
}

/* Parties line (buyer · seller) */
#view-transactions .tx-parties {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  line-height: 1.5;
  margin-bottom: 12px;
}
#view-transactions .tx-parties strong {
  color: var(--ink, var(--text));
  font-weight: 600;
}

/* Price + close-date row */
#view-transactions .tx-figures {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 0;
  margin-bottom: 10px;
  border-top: 1px solid var(--line, var(--border));
  border-bottom: 1px solid var(--line, var(--border));
}
#view-transactions .tx-figure {
  flex: 1;
  padding-right: 14px;
}
#view-transactions .tx-figure + .tx-figure {
  padding-right: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line, var(--border));
}
#view-transactions .tx-figure-lab {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 3px;
}
#view-transactions .tx-figure-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums;
}
#view-transactions .tx-figure-val.price { color: var(--champagne, var(--accent)); }
/* Close date within 7 days → warn-colored with ⚠ */
#view-transactions .tx-figure-val .tx-close-soon {
  color: var(--warn, #ffb648);
  margin-left: 4px;
}
#view-transactions .tx-figure-val.soon { color: var(--warn, #ffb648); }

/* Agent line */
#view-transactions .tx-agent {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  margin-bottom: 12px;
}
#view-transactions .tx-agent-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--champagne-soft, rgba(214,169,79,.18));
  color: var(--champagne, var(--accent));
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#view-transactions .tx-agent strong { color: var(--ink, var(--text)); font-weight: 600; }

/* Card actions */
#view-transactions .tx-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#view-transactions .tx-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--line, var(--border));
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--ink, var(--text));
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
#view-transactions .tx-act:hover {
  border-color: var(--champagne, var(--accent));
  color: var(--champagne, var(--accent));
}
#view-transactions .tx-act:focus-visible {
  outline: 2px solid var(--champagne, var(--accent));
  outline-offset: 2px;
}
#view-transactions .tx-act svg { width: 12px; height: 12px; }
#view-transactions .tx-act.primary {
  border-color: var(--champagne, var(--accent));
  color: var(--champagne, var(--accent));
  background: var(--champagne-soft, rgba(214,169,79,.18));
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
#view-transactions .tx-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--muted, var(--text-dim));
}
#view-transactions .tx-empty-icon {
  width: 56px; height: 56px;
  margin-bottom: 16px;
  color: var(--good, #3affad);
}
#view-transactions .tx-empty-icon svg { width: 100%; height: 100%; }
#view-transactions .tx-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin-bottom: 4px;
}
#view-transactions .tx-empty-sub { font-size: 12px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #view-transactions .tx-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  #view-transactions .tx-strip { flex-wrap: wrap; }
  #view-transactions .tx-stat { flex: 1 1 50%; border-bottom: 1px solid var(--line, var(--border)); }
  #view-transactions .tx-stat:nth-child(odd)  { border-right: 1px solid var(--line, var(--border)); }
  #view-transactions .tx-stat:nth-child(even) { border-right: none; }
  #view-transactions .tx-filterbar { flex-direction: column; align-items: stretch; gap: 12px; }
  #view-transactions .tx-search input { width: 100%; max-width: none; }
  #view-transactions .tx-grid { grid-template-columns: 1fr; padding: 16px; }
}

/* ── Light-theme nudge — card hover shadow softer on cream surface ───────── */
[data-theme="light"] #view-transactions .tx-card:hover,
:root[data-theme="light"] #view-transactions .tx-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}


/* --- v5-listings.css --- */
/* v5-listings.css — V5 Listings page (active GPR portfolio, magazine cards).
 * Follows ATLAS design tokens (var(--*)) and the v5-cma / w424-view pattern.
 * No scroll at 1920×1080: the outer .ls-page never scrolls; .ls-body handles
 * internal overflow. Both light and dark themes covered via CSS variables.
 * Luxury real-estate direction: champagne price numerals, photo-first cards,
 * layered shadow on hover, semantic status color.
 */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.ls-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.ls-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.07));
  flex-shrink: 0;
}
.ls-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne, var(--gold));
  margin-bottom: 4px;
}
.ls-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #e8e6e1);
  margin: 0 0 3px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.ls-sub {
  font-size: 12px;
  color: var(--muted, rgba(232,230,225,0.5));
}
.ls-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ls-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--champagne, var(--gold));
  background: color-mix(in srgb, var(--champagne, var(--gold)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--champagne, var(--gold)) 30%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}
.ls-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #1a1206;
  background: linear-gradient(180deg, var(--champagne, var(--gold)), #c9963a);
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--champagne, var(--gold)) 25%, transparent);
}
.ls-add-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 4px 16px color-mix(in srgb, var(--champagne, var(--gold)) 35%, transparent); }
.ls-add-btn:active { transform: translateY(0); }
.ls-add-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.ls-add-btn svg { width: 15px; height: 15px; }

/* ── Stats strip — 4 tiles ────────────────────────────────────────────────── */
.ls-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 28px 6px;
  flex-shrink: 0;
}
.ls-stat {
  position: relative;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 14px 16px;
  overflow: hidden;
}
.ls-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--champagne, var(--gold));
  opacity: 0.55;
}
.ls-stat-val {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink, #e8e6e1);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ls-stat-lab {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.5));
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.ls-filterbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ls-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ls-chips::-webkit-scrollbar { display: none; }
.ls-chip {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, rgba(232,230,225,0.65));
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ls-chip:hover { color: var(--ink, #e8e6e1); border-color: color-mix(in srgb, var(--champagne, var(--gold)) 40%, transparent); }
.ls-chip:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.ls-chip.is-active {
  color: #1a1206;
  background: var(--champagne, var(--gold));
  border-color: var(--champagne, var(--gold));
  font-weight: 700;
}
.ls-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.ls-sort,
.ls-search {
  font-size: 12px;
  color: var(--ink, #e8e6e1);
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 8px;
  padding: 7px 11px;
  outline: none;
  transition: border-color 120ms ease;
}
.ls-sort:focus,
.ls-search:focus { border-color: var(--champagne, var(--gold)); }
.ls-search { min-width: 210px; }
.ls-search::placeholder { color: var(--muted, rgba(232,230,225,0.35)); }

/* ── Listing grid ─────────────────────────────────────────────────────────── */
.ls-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 28px 28px;
}
.ls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ls-card {
  display: flex;
  flex-direction: column;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 14px;
  overflow: hidden;
  transition: transform 160ms cubic-bezier(.22,.61,.36,1), box-shadow 160ms ease, border-color 160ms ease;
}
.ls-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--champagne, var(--gold)) 35%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42);
}

/* Photo — 16:9, dark luxe placeholder gradient */
.ls-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(232,201,122,0.10), transparent 60%),
    linear-gradient(150deg, #1c2532 0%, #121821 55%, #0c1118 100%);
  overflow: hidden;
}
.ls-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(232,201,122,0.42);
}
.ls-photo-placeholder svg { width: 34px; height: 34px; opacity: 0.7; }
.ls-photo-placeholder span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Status chip — top-left overlay */
.ls-status {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.ls-status-active       { background: rgba(33,160,99,0.9);  color: #fff; }
.ls-status-contract     { background: rgba(232,201,122,0.92); color: #1a1206; }
.ls-status-coming-soon  { background: rgba(76,138,224,0.92); color: #fff; }

/* DOM badge — top-right overlay pill */
.ls-dom-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(6px);
}
.ls-dom-fresh { background: rgba(33,160,99,0.92); }
.ls-dom-warm  { background: rgba(214,158,46,0.94); color: #1a1206; }
.ls-dom-stale { background: rgba(199,68,64,0.94); }

/* Card body */
.ls-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px 14px;
}
.ls-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 24px;
  font-weight: 800;
  color: var(--champagne, var(--gold));
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ls-price-old {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, rgba(232,230,225,0.45));
  text-decoration: line-through;
}
.ls-reduced-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(199,68,64,0.92);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 2px;
}
.ls-addr {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #e8e6e1);
  margin-top: 2px;
}
.ls-city {
  font-size: 12px;
  color: var(--muted, rgba(232,230,225,0.55));
}
.ls-specs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink, #e8e6e1);
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--line, rgba(255,255,255,0.06));
}
.ls-specs .ls-dot { color: var(--muted, rgba(232,230,225,0.35)); }
.ls-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted, rgba(232,230,225,0.5));
}
.ls-meta b { color: var(--ink, rgba(232,230,225,0.78)); font-weight: 600; }

/* Quick-action buttons */
.ls-actions {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}
.ls-act {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #e8e6e1);
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 8px;
  padding: 7px 8px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.ls-act:hover {
  border-color: color-mix(in srgb, var(--champagne, var(--gold)) 50%, transparent);
  color: var(--champagne, var(--gold));
  background: color-mix(in srgb, var(--champagne, var(--gold)) 8%, transparent);
}
.ls-act:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.ls-act-cma {
  color: #1a1206;
  background: linear-gradient(180deg, var(--champagne, var(--gold)), #c9963a);
  border-color: transparent;
}
.ls-act-cma:hover { color: #1a1206; filter: brightness(1.06); }
.ls-act svg { width: 13px; height: 13px; }

/* ── States ───────────────────────────────────────────────────────────────── */
.ls-empty,
.ls-loading {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, rgba(232,230,225,0.5));
  border: 1px dashed var(--line, rgba(255,255,255,0.15));
  border-radius: 12px;
}
.ls-mock-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted, rgba(232,230,225,0.55));
  background: color-mix(in srgb, var(--champagne, var(--gold)) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--champagne, var(--gold)) 20%, transparent);
  border-radius: 8px;
  padding: 9px 13px;
  margin-bottom: 4px;
}
.ls-mock-note b { color: var(--champagne, var(--gold)); font-weight: 700; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ls-head { padding: 16px 16px 12px; flex-wrap: wrap; }
  .ls-stats { grid-template-columns: repeat(2, 1fr); padding: 12px 16px 4px; }
  .ls-filterbar { padding: 10px 16px; }
  .ls-tools { margin-left: 0; width: 100%; }
  .ls-search { min-width: 0; flex: 1 1 auto; }
  .ls-body { padding: 8px 16px 24px; }
  .ls-grid { grid-template-columns: 1fr; }
}


/* --- v5-marketing.css --- */
/* === ATLAS V5 — Marketing / Campaign Hub === */
/* Scoped to #view-marketing. Token-only → both light + dark themes auto-valid.
 * Loads after bundle CSS so it overrides the legacy dept-* marketing layout. */

#view-marketing.atlas-view { display: flex; flex-direction: column; min-height: 0; }
#view-marketing .mk5-page {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 0 28px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.mk5-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
.mk5-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted, var(--text-dim)); margin-bottom: 6px; display: block;
}
.mk5-title { font-size: 24px; font-weight: 700; color: var(--ink, var(--text)); margin: 0; line-height: 1.1; }
.mk5-sub { font-size: 13px; color: var(--muted, var(--text-dim)); margin: 4px 0 0; }
.mk5-new-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--champagne, var(--accent)); color: #1a1407;
  border: none; border-radius: 9px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  box-shadow: 0 2px 10px rgba(214,169,79,.28);
}
.mk5-new-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(214,169,79,.36); }
.mk5-new-btn:active { transform: translateY(0); }
.mk5-new-btn svg { width: 15px; height: 15px; }

/* ── Performance strip ──────────────────────────────────────────────────── */
.mk5-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line, var(--border)); flex-shrink: 0;
}
.mk5-stat { padding: 18px 24px; border-right: 1px solid var(--line, var(--border)); }
.mk5-stat:last-child { border-right: none; }
.mk5-stat-lab {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted, var(--text-dim)); margin-bottom: 6px; display: block;
}
.mk5-stat-val {
  font-size: 26px; font-weight: 700; color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums; line-height: 1;
}
.mk5-stat-val.champagne { color: var(--champagne, var(--accent)); }
.mk5-stat-meta { font-size: 11px; color: var(--muted, var(--text-dim)); margin-top: 5px; display: block; }

/* ── Two-column body ────────────────────────────────────────────────────── */
.mk5-cols {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px;
  padding: 22px 28px 0; align-items: start;
}
.mk5-panel {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px; overflow: hidden;
}
.mk5-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
}
.mk5-panel-title { font-size: 13px; font-weight: 700; color: var(--ink, var(--text)); letter-spacing: .01em; }
.mk5-panel-meta { font-size: 11px; color: var(--muted, var(--text-dim)); }
.mk5-panel-body { padding: 0 18px 18px; }

/* ── Campaign cards ─────────────────────────────────────────────────────── */
.mk5-campaign {
  position: relative;
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 11px; padding: 14px 16px 15px 18px;
  margin-bottom: 12px;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.mk5-campaign:last-child { margin-bottom: 0; }
.mk5-campaign:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
/* channel accent rail (left) */
.mk5-campaign::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 11px 0 0 11px; background: var(--mk-accent, var(--champagne, var(--accent)));
}
.mk5-campaign[data-channel="meta"]   { --mk-accent: #1877f2; }
.mk5-campaign[data-channel="google"] { --mk-accent: linear-gradient(180deg,#4285f4 0%,#ea4335 33%,#fbbc05 66%,#34a853 100%); }
.mk5-campaign[data-channel="email"]  { --mk-accent: #22c55e; }
.mk5-campaign[data-channel="social"] { --mk-accent: #a855f7; }

.mk5-camp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mk5-camp-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk5-camp-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--ink, var(--text));
}
.mk5-camp-icon svg { width: 17px; height: 17px; }
.mk5-campaign[data-channel="meta"]   .mk5-camp-icon { color: #1877f2; background: rgba(24,119,242,.12); }
.mk5-campaign[data-channel="google"] .mk5-camp-icon { color: #ea4335; background: rgba(234,67,53,.10); }
.mk5-campaign[data-channel="email"]  .mk5-camp-icon { color: #22c55e; background: rgba(34,197,94,.12); }
.mk5-campaign[data-channel="social"] .mk5-camp-icon { color: #a855f7; background: rgba(168,85,247,.12); }
.mk5-camp-name { font-size: 14px; font-weight: 700; color: var(--ink, var(--text)); line-height: 1.2; }
.mk5-camp-channel { font-size: 11px; color: var(--muted, var(--text-dim)); margin-top: 1px; }

.mk5-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.mk5-status.active { background: rgba(34,197,94,.14); color: #22c55e; }
.mk5-status.paused { background: rgba(234,179,8,.16);  color: #d4a017; }
.mk5-status.ended  { background: var(--surface-2, var(--panel2, var(--panel))); color: var(--muted, var(--text-dim)); }

.mk5-budget-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.mk5-budget-txt { font-size: 12px; color: var(--ink, var(--text)); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk5-budget-pct { font-size: 11px; color: var(--muted, var(--text-dim)); font-variant-numeric: tabular-nums; }
.mk5-bar {
  height: 7px; border-radius: 6px; background: var(--surface-2, var(--panel2, var(--panel)));
  overflow: hidden; margin-bottom: 11px;
}
.mk5-bar-fill {
  height: 100%; border-radius: 6px; width: 0;
  background: linear-gradient(90deg, var(--champagne, var(--accent)), #f0d9a0);
  transition: width 700ms cubic-bezier(.22,.61,.36,1);
}
.mk5-camp-stats { display: flex; gap: 22px; }
.mk5-camp-stat { display: flex; flex-direction: column; }
.mk5-camp-stat-val { font-size: 15px; font-weight: 700; color: var(--ink, var(--text)); font-variant-numeric: tabular-nums; }
.mk5-camp-stat-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, var(--text-dim)); margin-top: 1px; }
.mk5-camp-dates { margin-left: auto; align-self: flex-end; font-size: 11px; color: var(--muted, var(--text-dim)); }

/* ── Lead source bars (horizontal CSS chart) ────────────────────────────── */
.mk5-source { margin-bottom: 13px; }
.mk5-source:last-child { margin-bottom: 0; }
.mk5-source-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.mk5-source-name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink, var(--text)); font-weight: 600; }
.mk5-source-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--src-color, var(--champagne)); }
.mk5-source-pct { font-size: 12px; font-weight: 700; color: var(--ink, var(--text)); font-variant-numeric: tabular-nums; }
.mk5-source-track { height: 9px; border-radius: 6px; background: var(--surface-2, var(--panel2, var(--panel))); overflow: hidden; }
.mk5-source-bar {
  height: 100%; border-radius: 6px; width: 0;
  background: var(--src-color, var(--champagne, var(--accent)));
  transition: width 800ms cubic-bezier(.22,.61,.36,1);
}
.mk5-source-count { font-size: 10.5px; color: var(--muted, var(--text-dim)); margin-top: 3px; display: block; }

/* ── Promoted listings ──────────────────────────────────────────────────── */
.mk5-listings-wrap { padding: 24px 28px 0; }
.mk5-listings-head {
  font-size: 13px; font-weight: 700; color: var(--ink, var(--text));
  margin-bottom: 14px; display: flex; align-items: center; gap: 9px;
}
.mk5-listings-head::after {
  content: ""; flex: 1; height: 1px; background: var(--line, var(--border));
}
.mk5-listings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk5-listing {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px; overflow: hidden;
  transition: transform 160ms, box-shadow 160ms;
}
.mk5-listing:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.mk5-listing-thumb {
  height: 92px; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(214,169,79,.22), rgba(40,52,70,.4)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px);
  color: var(--muted, var(--text-dim));
}
.mk5-listing-thumb svg { width: 28px; height: 28px; opacity: .55; }
.mk5-listing-body { padding: 11px 13px 13px; }
.mk5-listing-addr { font-size: 12.5px; font-weight: 600; color: var(--ink, var(--text)); line-height: 1.3; margin-bottom: 8px; }
.mk5-boost {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 20px;
}
.mk5-boost.boosted   { background: rgba(168,85,247,.14); color: #a855f7; }
.mk5-boost.scheduled { background: rgba(59,130,246,.14); color: #3b82f6; }
.mk5-boost.organic   { background: var(--surface, var(--panel)); color: var(--muted, var(--text-dim)); border: 1px solid var(--line, var(--border)); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mk5-cols { grid-template-columns: 1fr; }
  .mk5-listings-grid { grid-template-columns: repeat(2, 1fr); }
  .mk5-strip { grid-template-columns: repeat(2, 1fr); }
  .mk5-strip .mk5-stat:nth-child(2) { border-right: none; }
}
@media (max-width: 640px) {
  .mk5-head { flex-direction: column; align-items: flex-start; }
  .mk5-listings-grid { grid-template-columns: 1fr; }
}

/* ── Light-theme nudge ──────────────────────────────────────────────────── */
[data-theme="light"] #view-marketing .mk5-listing:hover,
:root[data-theme="light"] #view-marketing .mk5-listing:hover { box-shadow: 0 6px 16px rgba(0,0,0,.10); }
[data-theme="light"] #view-marketing .mk5-listing-thumb,
:root[data-theme="light"] #view-marketing .mk5-listing-thumb {
  background: linear-gradient(135deg, rgba(214,169,79,.28), rgba(180,195,215,.5));
}


/* --- v5-reports.css --- */
/* === ATLAS V5 — Reports & Analytics === */
/* Scoped to #view-reports. Token-only → both light + dark themes auto-valid.
 * Loads after bundle CSS so it overrides the legacy intel-* reports layout. */

#view-reports.atlas-view { display: flex; flex-direction: column; min-height: 0; }
#view-reports .rpt5-page {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 0 28px;
}

/* ── Header + period picker ─────────────────────────────────────────────── */
.rpt5-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border)); flex-shrink: 0;
}
.rpt5-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted, var(--text-dim)); margin-bottom: 6px; display: block;
}
.rpt5-title { font-size: 24px; font-weight: 700; color: var(--ink, var(--text)); margin: 0; line-height: 1.1; }
.rpt5-sub { font-size: 13px; color: var(--muted, var(--text-dim)); margin: 4px 0 0; }

.rpt5-period {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border)); border-radius: 10px;
  flex-shrink: 0;
}
.rpt5-period-tab {
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--muted, var(--text-dim));
  padding: 7px 14px; border-radius: 7px;
  transition: background 150ms, color 150ms;
}
.rpt5-period-tab:hover { color: var(--ink, var(--text)); }
.rpt5-period-tab.active {
  background: var(--champagne, var(--accent)); color: #1a1407;
  box-shadow: 0 1px 6px rgba(214,169,79,.3);
}

/* ── KPI strip — 6 tiles ────────────────────────────────────────────────── */
.rpt5-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--line, var(--border)); flex-shrink: 0;
}
.rpt5-kpi { padding: 15px 18px; border-right: 1px solid var(--line, var(--border)); }
.rpt5-kpi:last-child { border-right: none; }
.rpt5-kpi-lab {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted, var(--text-dim)); margin-bottom: 5px; display: block;
}
.rpt5-kpi-val {
  font-size: 21px; font-weight: 700; color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rpt5-kpi-val.champagne { color: var(--champagne, var(--accent)); }

/* ── Chart rows ─────────────────────────────────────────────────────────── */
.rpt5-row { display: grid; gap: 18px; padding: 20px 28px 0; align-items: start; }
.rpt5-row-2 { grid-template-columns: 1fr 1fr; }
.rpt5-row-3 { grid-template-columns: repeat(3, 1fr); }

.rpt5-card {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px; padding: 16px 18px 18px;
}
.rpt5-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rpt5-card-title { font-size: 13px; font-weight: 700; color: var(--ink, var(--text)); }
.rpt5-card-meta { font-size: 11px; color: var(--muted, var(--text-dim)); }

/* SVG chart canvas */
.rpt5-chart { width: 100%; height: auto; display: block; }
.rpt5-bar { fill: var(--champagne, var(--accent)); transition: opacity 150ms; }
.rpt5-bar.partial { fill: var(--champagne, var(--accent)); opacity: .55; }
.rpt5-bar-label { fill: var(--ink, var(--text)); font-size: 8px; font-weight: 700; text-anchor: middle; }
.rpt5-bar-axis  { fill: var(--muted, var(--text-dim)); font-size: 7.5px; text-anchor: middle; }
.rpt5-line { fill: none; stroke: var(--champagne, var(--accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rpt5-line-fill { fill: var(--champagne, var(--accent)); opacity: .10; }
.rpt5-line-dot { fill: var(--champagne, var(--accent)); }
.rpt5-grid-line { stroke: var(--line, var(--border)); stroke-width: 1; }

/* ── Donut (price bracket) ──────────────────────────────────────────────── */
.rpt5-donut-wrap { display: flex; align-items: center; gap: 16px; }
.rpt5-donut { flex-shrink: 0; }
.rpt5-donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.rpt5-legend-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.rpt5-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.rpt5-legend-lab { color: var(--ink, var(--text)); flex: 1; min-width: 0; }
.rpt5-legend-val { color: var(--muted, var(--text-dim)); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Lead source attribution bars ───────────────────────────────────────── */
.rpt5-attr { margin-bottom: 11px; }
.rpt5-attr:last-child { margin-bottom: 0; }
.rpt5-attr-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.rpt5-attr-lab { font-size: 11.5px; color: var(--ink, var(--text)); font-weight: 600; }
.rpt5-attr-pct { font-size: 11px; font-weight: 700; color: var(--ink, var(--text)); font-variant-numeric: tabular-nums; }
.rpt5-attr-track { height: 8px; border-radius: 5px; background: var(--surface, var(--panel)); overflow: hidden; }
.rpt5-attr-bar { height: 100%; border-radius: 5px; width: 0; background: var(--attr-color, var(--champagne, var(--accent))); transition: width 800ms cubic-bezier(.22,.61,.36,1); }

/* ── Zip code leaderboard table ─────────────────────────────────────────── */
.rpt5-zip-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rpt5-zip-table thead th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted, var(--text-dim)); font-weight: 700; text-align: left;
  padding: 0 8px 8px; border-bottom: 1px solid var(--line, var(--border));
}
.rpt5-zip-table thead th.num, .rpt5-zip-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rpt5-zip-table tbody td {
  padding: 8px; border-bottom: 1px solid var(--line, var(--border)); color: var(--ink, var(--text));
}
.rpt5-zip-table tbody tr:last-child td { border-bottom: none; }
.rpt5-zip-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; font-size: 10px; font-weight: 700;
  background: var(--surface, var(--panel)); color: var(--muted, var(--text-dim));
}
.rpt5-zip-rank.top { background: var(--champagne, var(--accent)); color: #1a1407; }

/* ── Downloadable reports ───────────────────────────────────────────────── */
.rpt5-reports-wrap { padding: 24px 28px 0; }
.rpt5-reports-head {
  font-size: 13px; font-weight: 700; color: var(--ink, var(--text));
  margin-bottom: 14px; display: flex; align-items: center; gap: 9px;
}
.rpt5-reports-head::after { content: ""; flex: 1; height: 1px; background: var(--line, var(--border)); }
.rpt5-reports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rpt5-report {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 160ms, box-shadow 160ms;
}
.rpt5-report:hover { border-color: var(--champagne, var(--accent)); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.rpt5-report-top { display: flex; align-items: flex-start; gap: 12px; }
.rpt5-report-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--champagne-soft, rgba(214,169,79,.14)); color: var(--champagne, var(--accent));
}
.rpt5-report-icon svg { width: 20px; height: 20px; }
.rpt5-report-name { font-size: 13.5px; font-weight: 700; color: var(--ink, var(--text)); line-height: 1.25; }
.rpt5-report-date { font-size: 11px; color: var(--muted, var(--text-dim)); margin-top: 3px; }
.rpt5-report-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface, var(--panel)); color: var(--ink, var(--text));
  border: 1px solid var(--line, var(--border)); border-radius: 9px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background 150ms, border-color 150ms, transform 120ms;
}
.rpt5-report-btn:hover { border-color: var(--champagne, var(--accent)); color: var(--champagne, var(--accent)); transform: translateY(-1px); }
.rpt5-report-btn svg { width: 15px; height: 15px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rpt5-kpis { grid-template-columns: repeat(3, 1fr); }
  .rpt5-kpi:nth-child(3) { border-right: none; }
  .rpt5-row-2, .rpt5-row-3 { grid-template-columns: 1fr; }
  .rpt5-reports-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rpt5-head { flex-direction: column; align-items: flex-start; }
  .rpt5-kpis { grid-template-columns: repeat(2, 1fr); }
  .rpt5-kpi:nth-child(2) { border-right: none; }
}


/* --- v5-financials.css --- */
/* === ATLAS V5 Financials / Commission Page === */
/* Revenue, commission tracking, agent splits, financial performance.
 * Scoped to #view-financials. Token-only -> both themes auto-valid.
 * No-scroll rule: outer .frame never scrolls; .fin-body scrolls only.
 * Data-integrity: every number JS-populated from fetch or mock; em-dash on absence.
 */

/* ── Page header ───────────────────────────────────────────────────────── */
.fin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
.fin-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
.fin-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin: 0;
}
.fin-subtitle {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  margin-top: 2px;
}
.fin-period-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--champagne, var(--accent));
  background: var(--champagne-soft);
  border: 1px solid var(--champagne, var(--accent));
  border-radius: 20px;
  padding: 5px 14px;
}

/* ── Scroll body (internal scroll only — outer frame stays 1080) ───────── */
.fin-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 28px;
}

/* ── Big numbers strip ─────────────────────────────────────────────────── */
.fin-big-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, var(--panel));
  margin-bottom: 24px;
}
.fin-big-number {
  padding: 18px 20px;
  border-right: 1px solid var(--line, var(--border));
  position: relative;
}
.fin-big-number:last-child { border-right: none; }
.fin-big-number:nth-child(-n+2) { background: linear-gradient(180deg, var(--champagne-soft) 0%, transparent 70%); }
.fin-big-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 6px;
}
.fin-big-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fin-big-value.champagne {
  color: var(--champagne, var(--accent));
  font-size: 27px;
}
.fin-big-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.fin-delta-up   { color: var(--good, #3affad); }
.fin-delta-down { color: var(--bad, #ff5b3a); }

/* ── Two-column row (ledger + breakdown) ───────────────────────────────── */
.fin-two-col {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.fin-card {
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  padding: 18px 20px;
}
.fin-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink, var(--text));
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fin-card-title .fin-card-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted, var(--text-dim));
}

/* ── Commission ledger table ───────────────────────────────────────────── */
.fin-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fin-ledger-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--muted, var(--text-dim));
  padding: 0 10px 9px;
  border-bottom: 1px solid var(--line, var(--border));
}
.fin-ledger-table thead th.num { text-align: right; }
.fin-ledger-table tbody td {
  padding: 11px 10px;
  color: var(--ink, var(--text));
  border-bottom: 1px solid var(--line, var(--border));
  font-variant-numeric: tabular-nums;
}
.fin-ledger-table tbody td.num { text-align: right; }
.fin-ledger-table tbody tr:nth-child(even) { background: var(--champagne-soft); }
.fin-ledger-table tbody tr:last-child td { border-bottom: none; }
.fin-ledger-table .fin-addr { font-weight: 600; }
.fin-ledger-table .fin-commission { color: var(--champagne, var(--accent)); font-weight: 700; }

/* Pending (projected) rows — italic + muted */
.fin-ledger-table tr.fin-pending td {
  font-style: italic;
  opacity: .7;
}
.fin-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  font-style: normal;
}
.fin-status-pill.paid {
  color: var(--good, #3affad);
  background: rgba(58,255,173,.12);
}
.fin-status-pill.pending {
  color: var(--champagne, var(--accent));
  background: var(--champagne-soft);
}

/* ── Revenue breakdown donut (CSS conic-gradient) ──────────────────────── */
.fin-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fin-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    var(--champagne, var(--accent)) 0% 58%,
    var(--good, #3affad) 58% 89%,
    #4a90d9 89% 96%,
    var(--muted, var(--text-dim)) 96% 100%
  );
  position: relative;
  margin: 4px 0 18px;
}
.fin-donut-inner {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: var(--surface, var(--panel));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--line, var(--border));
}
.fin-donut-center-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums;
}
.fin-donut-center-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, var(--text-dim));
}
.fin-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fin-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.fin-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.fin-legend-dot.listing  { background: var(--champagne, var(--accent)); }
.fin-legend-dot.buyer    { background: var(--good, #3affad); }
.fin-legend-dot.referral { background: #4a90d9; }
.fin-legend-dot.other    { background: var(--muted, var(--text-dim)); }
.fin-legend-label { flex: 1; color: var(--ink, var(--text)); }
.fin-legend-pct {
  font-weight: 700;
  color: var(--muted, var(--text-dim));
  font-variant-numeric: tabular-nums;
}

/* ── Agent split summary ───────────────────────────────────────────────── */
.fin-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.fin-agent-card {
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  padding: 16px 18px;
}
.fin-agent-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.fin-agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--champagne-soft);
  color: var(--champagne, var(--accent));
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fin-agent-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, var(--text));
}
.fin-agent-gci {
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
/* Split visualization bar — agent portion (champagne) vs brokerage (muted) */
.fin-split-bar {
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background: var(--surface-2, var(--panel2, var(--panel)));
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px var(--line, var(--border));
}
.fin-split-agent {
  background: var(--champagne, var(--accent));
  height: 100%;
}
.fin-split-brokerage {
  background: var(--muted, var(--text-dim));
  opacity: .45;
  height: 100%;
}
.fin-split-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.fin-split-legend .fin-split-amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fin-split-legend .agent  { color: var(--champagne, var(--accent)); }
.fin-split-legend .broker { color: var(--muted, var(--text-dim)); }

/* ── YTD goal progress ─────────────────────────────────────────────────── */
.fin-goal-card {
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 24px;
}
.fin-goal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fin-goal-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink, var(--text));
}
.fin-goal-figures {
  font-size: 13px;
  color: var(--muted, var(--text-dim));
  font-variant-numeric: tabular-nums;
}
.fin-goal-figures strong {
  color: var(--champagne, var(--accent));
  font-size: 16px;
}
.fin-goal-track {
  position: relative;
  height: 22px;
  border-radius: 12px;
  background: var(--surface-2, var(--panel2, var(--panel)));
  box-shadow: inset 0 0 0 1px var(--line, var(--border));
  overflow: visible;
}
.fin-goal-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--champagne, var(--accent)), color-mix(in srgb, var(--champagne, var(--accent)) 70%, #fff));
  transition: width 900ms cubic-bezier(.2,.7,.2,1);
}
/* Milestone diamond markers at 25 / 50 / 75% */
.fin-goal-milestone {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--surface, var(--panel));
  border: 1.5px solid var(--muted, var(--text-dim));
  z-index: 2;
}
.fin-goal-milestone::after {
  content: attr(data-pct) / ""; /* S12/A4: decorative tick label - a11y-silent (alt text syntax) */
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted, var(--text-dim));
  white-space: nowrap;
}
.fin-goal-note {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  margin-top: 22px;
  font-style: italic;
}

/* ── Export section ────────────────────────────────────────────────────── */
.fin-export {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line, var(--border));
}
.fin-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--line, var(--border));
  background: var(--surface, var(--panel));
  color: var(--ink, var(--text));
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, transform 120ms;
}
.fin-export-btn svg { width: 15px; height: 15px; }
.fin-export-btn:hover {
  border-color: var(--champagne, var(--accent));
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.fin-export-btn:active { transform: translateY(1px); }
.fin-export-btn:focus-visible {
  outline: 2px solid var(--champagne, var(--accent));
  outline-offset: 2px;
}
.fin-export-btn--primary {
  background: var(--champagne, var(--accent));
  color: #1a1407;
  border-color: var(--champagne, var(--accent));
}
.fin-export-btn--primary:hover {
  box-shadow: 0 6px 18px var(--champagne-soft);
}

/* ── Responsive collapse ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fin-big-strip { grid-template-columns: repeat(3, 1fr); }
  .fin-big-number:nth-child(3) { border-right: none; }
  .fin-big-number:nth-child(-n+3) { border-bottom: 1px solid var(--line, var(--border)); }
  .fin-two-col { grid-template-columns: 1fr; }
}

/* ── Light-theme refinement ────────────────────────────────────────────── */
[data-theme="light"] .fin-split-brokerage,
:root[data-theme="light"] .fin-split-brokerage { opacity: .6; }


/* --- v5-recruiting.css --- */
/* === ATLAS V5 · Recruiting Pipeline page ===
 * Scoped to #view-recruiting. Token-only → both light + dark themes auto-valid.
 * Class prefix .rec- (avoids the legacy .ag-* / .at-* Agent Recruiting view).
 * Loads after the CSS bundles. All scrolling happens inside .rec-body; the
 * outer ATLAS frame never scrolls (feedback_dashboard_scroll_rule.md).
 *
 * DATA-INTEGRITY: all candidate data is rendered by js/recruiting.js from a
 * mock stub flagged live:false. No fabricated KPI is presented as live. */

/* ── Page header ───────────────────────────────────────────────────────── */
.rec-page { display: flex; flex-direction: column; min-height: 0; }

.rec-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
  flex-wrap: wrap;
}
.rec-head-titles { min-width: 0; }
.rec-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
.rec-title {
  font-family: var(--display, var(--mono));
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin: 0;
}
.rec-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  margin: 4px 0 0;
}
.rec-head-right { display: flex; align-items: center; gap: 10px; }
.rec-count-chip {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.rec-add-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #0a0e14;
  background: var(--champagne, var(--accent));
  border: 1px solid var(--champagne, var(--accent));
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter .12s, transform .12s;
}
.rec-add-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.rec-add-btn svg { width: 14px; height: 14px; }

/* ── Funnel stats strip ────────────────────────────────────────────────── */
.rec-funnel {
  display: flex;
  align-items: stretch;
  padding: 0 28px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
  overflow-x: auto;
}
.rec-funnel-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px;
  position: relative;
  flex-shrink: 0;
}
.rec-funnel-stage::after {
  content: "›";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--muted, var(--text-dim));
  opacity: .5;
}
.rec-funnel-stage:last-child::after { content: none; }
.rec-funnel-stage.is-ytd { margin-left: auto; }
.rec-funnel-val {
  font-family: var(--display, var(--mono));
  font-size: 20px;
  font-weight: 800;
  color: var(--ink, var(--text));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rec-funnel-val.champagne { color: var(--champagne, var(--accent)); }
.rec-funnel-label {
  font-family: var(--mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, var(--text-dim));
}

/* ── Scrollable body ───────────────────────────────────────────────────── */
.rec-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 28px;
}

/* ── Kanban board ──────────────────────────────────────────────────────── */
.rec-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
.rec-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rec-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 9px 12px;
}
.rec-col-head.prospects { border-left: 3px solid var(--muted, var(--text-dim)); }
.rec-col-head.contacted { border-left: 3px solid #3b82f6; }
.rec-col-head.interview { border-left: 3px solid var(--champagne, var(--accent)); }
.rec-col-head.offer     { border-left: 3px solid var(--good, #3affad); }
.rec-col-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text, var(--ink));
}
.rec-col-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, var(--text-dim));
  background: var(--panel, var(--surface));
  border: 1px solid var(--line, var(--border));
  border-radius: 999px;
  padding: 1px 8px;
}
.rec-col-cards { display: flex; flex-direction: column; gap: 10px; }

/* ── Candidate card ────────────────────────────────────────────────────── */
.rec-card {
  position: relative;
  background: var(--panel, var(--surface));
  border: 1px solid var(--line, var(--border));
  border-left: 3px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 12px 13px 11px;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.13);
  border-color: var(--champagne, var(--accent));
}
.rec-card.is-hot { border-left-color: var(--champagne, var(--accent)); }

.rec-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.rec-drag {
  flex-shrink: 0;
  color: var(--muted, var(--text-dim));
  opacity: .45;
  cursor: grab;
  margin-top: 1px;
  line-height: 0;
}
.rec-drag svg { width: 12px; height: 12px; }
.rec-card-name {
  font-family: var(--display, var(--mono));
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, var(--text));
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.rec-card-exp {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-dim, var(--muted));
  margin: 5px 0 2px;
}
.rec-card-prod {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--champagne, var(--accent));
  font-weight: 700;
  margin-bottom: 4px;
}
.rec-card-prod .rec-prod-lab {
  color: var(--muted, var(--text-dim));
  font-weight: 400;
}
.rec-card-contact {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted, var(--text-dim));
  margin-bottom: 8px;
}

/* stage pill + hot badge */
.rec-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.rec-stage {
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, var(--text-dim));
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 999px;
  padding: 2px 8px;
}
.rec-hot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--champagne, var(--accent));
  background: color-mix(in srgb, var(--champagne, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--champagne, var(--accent)) 38%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}
.rec-hot svg { width: 9px; height: 9px; }

/* card action buttons */
.rec-card-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--line, var(--border));
  padding-top: 9px;
}
.rec-cta {
  flex: 1;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text, var(--ink));
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 7px;
  padding: 5px 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.rec-cta:hover {
  background: var(--panel, var(--surface));
  border-color: var(--champagne, var(--accent));
  color: var(--champagne, var(--accent));
}

/* ── Recently Onboarded section ────────────────────────────────────────── */
.rec-onboarded { margin-top: 26px; }
.rec-section-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, var(--text-dim));
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rec-section-label .rec-section-note {
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted, var(--text-dim));
  opacity: .8;
}
.rec-ob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.rec-ob-card {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--panel, var(--surface));
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 12px 13px;
}
.rec-ob-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: #0a0e14;
  background: linear-gradient(135deg, var(--champagne, var(--accent)), #059669);
}
.rec-ob-body { min-width: 0; flex: 1; }
.rec-ob-name {
  font-family: var(--display, var(--mono));
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, var(--text));
  line-height: 1.2;
}
.rec-ob-meta {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--muted, var(--text-dim));
  margin-top: 4px;
  line-height: 1.5;
}
.rec-ob-target {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--champagne, var(--accent));
  margin-top: 3px;
}

/* ── data source note ──────────────────────────────────────────────────── */
.rec-foot-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted, var(--text-dim));
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--line, var(--border));
  line-height: 1.5;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rec-kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rec-kanban { grid-template-columns: 1fr; }
  .rec-funnel-stage.is-ytd { margin-left: 0; }
}

/* ── Light-theme nicety ────────────────────────────────────────────────── */
[data-theme="light"] .rec-card:hover,
:root[data-theme="light"] .rec-card:hover { box-shadow: 0 5px 14px rgba(0,0,0,.09); }


/* --- v5-team.css --- */
/* === ATLAS V5 · Team Performance page ===
 * Scoped to #view-team. Token-only → both light + dark themes auto-valid.
 * Class prefix .tm- . Loads after the CSS bundles. All scrolling happens
 * inside .tm-body; the outer ATLAS frame never scrolls.
 *
 * DATA-INTEGRITY: agent metrics are rendered by js/team.js from a mock stub
 * flagged live:false. A foot-note marks the data as illustrative until wired.
 * MULTI-TENANT: agent names come from the data feed, never hardcoded in CSS. */

.tm-page { display: flex; flex-direction: column; min-height: 0; }

/* ── Page header ───────────────────────────────────────────────────────── */
.tm-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tm-head-titles { min-width: 0; }
.tm-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
.tm-title {
  font-family: var(--display, var(--mono));
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin: 0;
}
.tm-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  margin: 4px 0 0;
}

/* ── Period selector ───────────────────────────────────────────────────── */
.tm-period {
  display: inline-flex;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.tm-period-btn {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted, var(--text-dim));
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tm-period-btn:hover { color: var(--text, var(--ink)); }
.tm-period-btn.is-on {
  color: #0a0e14;
  background: var(--champagne, var(--accent));
}

/* ── Team summary bar ──────────────────────────────────────────────────── */
.tm-summary {
  display: flex;
  align-items: stretch;
  padding: 0 28px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
  overflow-x: auto;
}
.tm-summary-stat {
  flex: 1;
  min-width: 150px;
  padding: 16px 20px;
  border-right: 1px solid var(--line, var(--border));
}
.tm-summary-stat:last-child { border-right: none; }
.tm-summary-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 5px;
}
.tm-summary-val {
  font-family: var(--display, var(--mono));
  font-size: 20px;
  font-weight: 800;
  color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tm-summary-val.champagne { color: var(--champagne, var(--accent)); }

/* ── Scrollable body ───────────────────────────────────────────────────── */
.tm-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Agent performance card (full width) ───────────────────────────────── */
.tm-agent-card {
  background: var(--panel, var(--surface));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 18px 20px;
  transition: box-shadow .15s, border-color .15s;
}
.tm-agent-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.13);
  border-color: color-mix(in srgb, var(--champagne, var(--accent)) 40%, var(--border));
}

.tm-agent-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, var(--border));
}
.tm-agent-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #0ea5b0, #2563eb);
}
.tm-agent-photo--2 { background: linear-gradient(135deg, #7c3aed, #0ea5b0); }
.tm-agent-id { min-width: 0; flex: 1; }
.tm-agent-name {
  font-family: var(--display, var(--mono));
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, var(--text));
  line-height: 1.2;
}
.tm-agent-role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted, var(--text-dim));
  margin-top: 3px;
  letter-spacing: .03em;
}

/* primary stat row (GCI / Deals / Volume / Avg) */
.tm-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line, var(--border));
}
.tm-stat {
  padding: 0 16px;
  border-right: 1px solid var(--line, var(--border));
}
.tm-stat:first-child { padding-left: 0; }
.tm-stat:last-child { border-right: none; padding-right: 0; }
.tm-stat-val {
  font-family: var(--display, var(--mono));
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, var(--text));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tm-stat-val.champagne { color: var(--champagne, var(--accent)); }
.tm-stat-label {
  font-family: var(--mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, var(--text-dim));
  margin-top: 5px;
}

/* goal progress bar */
.tm-goal {
  padding: 14px 0;
  border-bottom: 1px solid var(--line, var(--border));
}
.tm-goal-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  overflow: hidden;
}
.tm-goal-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--champagne, var(--accent)) 70%, #059669), var(--champagne, var(--accent)));
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}
.tm-goal-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim, var(--muted));
  margin-top: 7px;
}
.tm-goal-label .tm-goal-pct { color: var(--champagne, var(--accent)); }

/* secondary stat grid (listings / under contract / pipeline / DOM / ratio) */
.tm-detail-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line, var(--border));
}
.tm-detail {
  padding: 0 14px;
  border-right: 1px solid var(--line, var(--border));
}
.tm-detail:first-child { padding-left: 0; }
.tm-detail:last-child { border-right: none; padding-right: 0; }
.tm-detail-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text, var(--ink));
  font-variant-numeric: tabular-nums;
}
.tm-detail-label {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted, var(--text-dim));
  margin-top: 4px;
}

/* recent activity line + actions */
.tm-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim, var(--muted));
  line-height: 1.4;
}
.tm-recent-tag {
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--good, #3affad);
  background: color-mix(in srgb, var(--good, #3affad) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--good, #3affad) 35%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.tm-agent-actions {
  display: flex;
  gap: 8px;
}
.tm-cta {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text, var(--ink));
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tm-cta:hover {
  border-color: var(--champagne, var(--accent));
  color: var(--champagne, var(--accent));
}
.tm-cta--primary {
  color: #0a0e14;
  background: var(--champagne, var(--accent));
  border-color: var(--champagne, var(--accent));
}
.tm-cta--primary:hover { filter: brightness(1.07); color: #0a0e14; }

/* ── Activity feed (timeline) ──────────────────────────────────────────── */
.tm-feed-card {
  background: var(--panel, var(--surface));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 18px 20px;
}
.tm-feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tm-feed-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text, var(--ink));
}
.tm-feed-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted, var(--text-dim));
}
.tm-feed-list {
  display: flex;
  flex-direction: column;
}
.tm-feed-item {
  display: grid;
  grid-template-columns: 58px 26px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, var(--border));
}
.tm-feed-item:last-child { border-bottom: none; }
.tm-feed-date {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted, var(--text-dim));
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 999px;
  padding: 2px 0;
  text-align: center;
}
.tm-feed-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted, var(--text-dim));
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
}
.tm-feed-icon svg { width: 13px; height: 13px; }
.tm-feed-icon.closed { color: var(--good, #3affad); border-color: color-mix(in srgb, var(--good, #3affad) 35%, transparent); }
.tm-feed-icon.lead   { color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 35%, transparent); }
.tm-feed-icon.price  { color: var(--champagne, var(--accent)); border-color: color-mix(in srgb, var(--champagne, var(--accent)) 35%, transparent); }
.tm-feed-icon.showing{ color: var(--text-dim, var(--muted)); }
.tm-feed-text {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text, var(--ink));
  line-height: 1.45;
  min-width: 0;
}
.tm-feed-agent { font-weight: 700; color: var(--champagne, var(--accent)); }

/* ── data source note ──────────────────────────────────────────────────── */
.tm-foot-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted, var(--text-dim));
  padding: 4px 2px 0;
  line-height: 1.5;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tm-stat-row   { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
  .tm-detail-row { grid-template-columns: repeat(3, 1fr); gap: 12px 0; }
  .tm-stat, .tm-detail { border-right: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .tm-detail-row { grid-template-columns: repeat(2, 1fr); }
  .tm-feed-item  { grid-template-columns: 52px 24px 1fr; }
}

/* ── Light-theme nicety ────────────────────────────────────────────────── */
[data-theme="light"] .tm-agent-card:hover,
:root[data-theme="light"] .tm-agent-card:hover { box-shadow: 0 5px 14px rgba(0,0,0,.09); }


/* --- v5-crm.css --- */
/* v5-crm.css — V5 CRM & Lead Management surface.
 *
 * Expands the People > Clients page (data-view="clientcare") into a full lead
 * pipeline view: stage tabs, hot-lead score leaderboard, sortable lead table,
 * slide-in lead-detail panel, and a lead-source performance table.
 *
 * DATA INTEGRITY (.claude/rules/data-integrity.md):
 *   The seeded leads in js/crm.js are DEMO data — clearly flagged via a
 *   "Demo data" source badge whenever live Lofty/atlas-fetcher data is absent.
 *   Contact fields (phone/email) in the detail panel render as em-dash
 *   placeholders for live binding; no fabricated PII is shown.
 *
 * THEME: All colors come from shared token vars (--panel, --panel2, --border,
 *   --border2, --text, --text-dim, --text-muted, --accent, --accent-rgb,
 *   --warn, --good, --bad, --surface, --line). A [data-theme="light"] block at
 *   the bottom adds overrides where a token swap is not enough. Both themes
 *   validated.
 *
 * SCROLL: outer .w424-body owns vertical scroll. The lead table scrolls
 *   horizontally on narrow widths; the hot-lead strip scrolls horizontally on
 *   mobile. The detail panel is fixed-position and scrolls internally.
 *
 * Prefix: .crm5-*  (V5 CRM lead management — distinct from .crm-* kanban panel
 *   in crm_panel.js and .clt-* legacy clients table.)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Header actions ─────────────────────────────────────────────────── */
.crm5-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm5-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.crm5-count-chip b { color: var(--text); font-weight: 800; }
.crm5-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: var(--rad);
  padding: 7px 14px;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .12s;
  white-space: nowrap;
}
.crm5-add-btn:hover {
  background: rgba(var(--accent-rgb), .22);
  border-color: rgba(var(--accent-rgb), .55);
  transform: translateY(-1px);
}
.crm5-add-btn:active { transform: translateY(0); }
.crm5-add-btn svg { width: 13px; height: 13px; stroke-width: 2.2; }

/* ── Stage tabs ─────────────────────────────────────────────────────── */
.crm5-stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.crm5-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
  white-space: nowrap;
}
.crm5-tab:hover { color: var(--text); border-color: var(--border); background: var(--panel2); }
.crm5-tab .crm5-tab-n {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-dim);
  background: var(--panel2);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.crm5-tab.is-active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .42);
}
.crm5-tab.is-active .crm5-tab-n {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .18);
}
/* Stage-tinted active tabs */
.crm5-tab.is-active[data-stage="Hot"]           { color: var(--bad);  background: rgba(255,91,58,.12);  border-color: rgba(255,91,58,.40); }
.crm5-tab.is-active[data-stage="Hot"] .crm5-tab-n { color: var(--bad);  background: rgba(255,91,58,.20); }
.crm5-tab.is-active[data-stage="Working"]       { color: var(--warn); background: rgba(255,182,72,.12); border-color: rgba(255,182,72,.40); }
.crm5-tab.is-active[data-stage="Working"] .crm5-tab-n { color: var(--warn); background: rgba(255,182,72,.20); }
.crm5-tab.is-active[data-stage="Under Contract"]      { color: var(--good); background: rgba(58,255,173,.10); border-color: rgba(58,255,173,.36); }
.crm5-tab.is-active[data-stage="Under Contract"] .crm5-tab-n { color: var(--good); background: rgba(58,255,173,.18); }

/* ── Score leaderboard (hot-lead strip) ─────────────────────────────── */
.crm5-board {
  margin-bottom: 16px;
}
.crm5-board-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 9px;
}
.crm5-board-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.crm5-board-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
}
.crm5-board-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.crm5-hot {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 12px 13px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.crm5-hot::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.crm5-hot[data-band="fire"]::before  { background: linear-gradient(180deg, #ff7a45, #ff3b30); }
.crm5-hot[data-band="amber"]::before { background: var(--warn); }
.crm5-hot[data-band="blue"]::before  { background: var(--accent); }
.crm5-hot:hover {
  border-color: rgba(var(--accent-rgb), .45);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.crm5-hot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.crm5-hot-name {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  min-width: 0;
}
.crm5-hot-interest {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.crm5-hot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.crm5-hot-act {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--text-dim);
}

/* ── Score badge (shared: leaderboard + table) ──────────────────────── */
.crm5-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 2px 9px;
  min-width: 38px;
  line-height: 1.5;
  white-space: nowrap;
}
.crm5-score[data-band="fire"] {
  color: #fff;
  background: linear-gradient(135deg, #ff7a45, #ff3b30);
  border: 1px solid rgba(255,59,48,.55);
}
.crm5-score[data-band="amber"] {
  color: var(--warn);
  background: rgba(255,182,72,.14);
  border: 1px solid rgba(255,182,72,.42);
}
.crm5-score[data-band="blue"] {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .14);
  border: 1px solid rgba(var(--accent-rgb), .40);
}
.crm5-score[data-band="gray"] {
  color: var(--text-muted);
  background: var(--panel2);
  border: 1px solid var(--border);
}
.crm5-score .crm5-flame { font-size: 10px; line-height: 1; }

/* ── Stage chip ─────────────────────────────────────────────────────── */
.crm5-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.crm5-chip[data-stage="New"]            { color: var(--accent); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .32); }
.crm5-chip[data-stage="Working"]        { color: var(--warn);   background: rgba(255,182,72,.12); border: 1px solid rgba(255,182,72,.34); }
.crm5-chip[data-stage="Nurturing"]      { color: #9aa7ff;       background: rgba(125,140,255,.12); border: 1px solid rgba(125,140,255,.34); }
.crm5-chip[data-stage="Hot"]            { color: var(--bad);    background: rgba(255,91,58,.12);  border: 1px solid rgba(255,91,58,.36); }
.crm5-chip[data-stage="Under Contract"] { color: var(--good);   background: rgba(58,255,173,.10); border: 1px solid rgba(58,255,173,.30); }
.crm5-chip[data-stage="Dead"]           { color: var(--text-muted); background: var(--panel2); border: 1px solid var(--border); }

/* ── Source icon (letter circle) ────────────────────────────────────── */
.crm5-src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.crm5-src-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.crm5-src-ic[data-src="Zillow"]     { color: #4a9dff; background: rgba(74,157,255,.14);  border-color: rgba(74,157,255,.34); }
.crm5-src-ic[data-src="Realtor.com"]{ color: #ff6a52; background: rgba(255,106,82,.14);  border-color: rgba(255,106,82,.34); }
.crm5-src-ic[data-src="Google"]     { color: #ffc24a; background: rgba(255,194,74,.16);  border-color: rgba(255,194,74,.34); }
.crm5-src-ic[data-src="Referral"]   { color: #3affad; background: rgba(58,255,173,.14);  border-color: rgba(58,255,173,.32); }
.crm5-src-ic[data-src="Social"]     { color: #c084fc; background: rgba(192,132,252,.14); border-color: rgba(192,132,252,.32); }
.crm5-src-ic[data-src="Direct"]     { color: var(--accent); background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .32); }

/* ── Lead table ─────────────────────────────────────────────────────── */
.crm5-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--rad);
  overflow: hidden;
  overflow-x: auto;
  background: var(--panel);
  margin-bottom: 16px;
}
.crm5-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}
.crm5-table thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px;
  text-align: left;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.crm5-table thead th.is-sortable { cursor: pointer; transition: color .12s; }
.crm5-table thead th.is-sortable:hover { color: var(--text); }
.crm5-sort-ind { display: inline-block; margin-left: 4px; opacity: .35; font-size: 8px; }
.crm5-table thead th.is-sorted .crm5-sort-ind { opacity: 1; color: var(--accent); }
.crm5-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
}
.crm5-table tbody tr:last-child td { border-bottom: 0; }
.crm5-table tbody tr { cursor: pointer; transition: background .12s; }
.crm5-table tbody tr:hover td { background: rgba(var(--accent-rgb), .05); }
.crm5-table tbody tr.is-open td { background: rgba(var(--accent-rgb), .08); }
.crm5-row-name { font-family: var(--sans); font-weight: 600; white-space: nowrap; }
.crm5-row-interest { font-size: 11px; color: var(--text-dim); max-width: 200px; }
.crm5-row-act-cell { white-space: nowrap; }
.crm5-row-ts { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.crm5-row-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.crm5-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .28);
  flex-shrink: 0;
}
.crm5-avatar.is-none { color: var(--text-muted); background: var(--panel2); border-color: var(--border); }

/* Inline quick-action buttons */
.crm5-qa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--text-muted);
  background: var(--panel2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
  margin-right: 4px;
}
.crm5-qa:last-child { margin-right: 0; }
.crm5-qa:hover { color: var(--accent); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .34); }
.crm5-qa svg { width: 13px; height: 13px; stroke-width: 1.9; }

.crm5-empty {
  padding: 26px 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Lead-source performance table ──────────────────────────────────── */
.crm5-perf {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  overflow: hidden;
}
.crm5-perf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.crm5-perf-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
}
.crm5-perf-table { width: 100%; border-collapse: collapse; }
.crm5-perf-table thead th {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 14px;
  text-align: left;
  background: var(--panel2);
  border-bottom: 1px solid var(--border2);
}
.crm5-perf-table thead th.num,
.crm5-perf-table tbody td.num { text-align: right; }
.crm5-perf-table tbody td {
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border2);
}
.crm5-perf-table tbody tr:nth-child(even) td { background: rgba(var(--accent-rgb), .025); }
.crm5-perf-table tbody tr:last-child td { border-bottom: 0; }
.crm5-perf-conv {
  font-family: var(--mono);
  font-weight: 700;
}
.crm5-perf-conv.is-high { color: var(--good); }
.crm5-perf-conv.is-mid  { color: var(--warn); }
.crm5-perf-src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

/* ── Lead detail slide-in panel ─────────────────────────────────────── */
.crm5-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 1200;
}
.crm5-scrim.is-open { opacity: 1; pointer-events: auto; }
.crm5-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(0,0,0,.34);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.crm5-detail.is-open { transform: translateX(0); }
.crm5-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.crm5-detail-titles { flex: 1; min-width: 0; }
.crm5-detail-name {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 7px;
}
.crm5-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.crm5-detail-x {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-muted);
  background: var(--panel2);
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.crm5-detail-x:hover { color: var(--text); background: var(--border); }
.crm5-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
}
.crm5-sec {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 9px;
}
.crm5-sec:first-child { margin-top: 0; }

/* Contact grid */
.crm5-kv {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 7px 12px;
  font-size: 12px;
}
.crm5-kv dt { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.crm5-kv dd { margin: 0; color: var(--text); word-break: break-word; }
.crm5-kv dd a { color: var(--accent); text-decoration: none; }
.crm5-kv dd a:hover { text-decoration: underline; }

/* Timeline */
.crm5-timeline { display: flex; flex-direction: column; }
.crm5-tl-row {
  display: flex;
  gap: 10px;
  padding: 0 0 12px;
  position: relative;
}
.crm5-tl-row:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.crm5-tl-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.crm5-tl-main { flex: 1; min-width: 0; }
.crm5-tl-text { font-size: 12px; color: var(--text); line-height: 1.35; }
.crm5-tl-meta { font-family: var(--mono); font-size: 9px; color: var(--text-muted); margin-top: 2px; }

/* AI suggestion card */
.crm5-ai {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .02));
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-radius: var(--rad);
  padding: 12px 13px;
}
.crm5-ai-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.crm5-ai-text { font-size: 12px; color: var(--text); line-height: 1.45; }

/* Detail panel quick actions */
.crm5-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.crm5-detail-actions .crm5-da-full { grid-column: 1 / -1; }
.crm5-da {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  padding: 9px 10px;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.crm5-da:hover { color: var(--accent); background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .32); }
.crm5-da.is-primary { color: var(--accent); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .34); }
.crm5-da svg { width: 13px; height: 13px; stroke-width: 1.9; }

/* Source freshness footer */
.crm5-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border2);
}
.crm5-foot-badge {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
}
.crm5-foot-badge.is-demo { color: var(--warn); border-color: rgba(255,182,72,.34); background: rgba(255,182,72,.08); }
.crm5-foot-badge.is-live { color: var(--good); border-color: rgba(58,255,173,.30); background: rgba(58,255,173,.07); }
.crm5-foot-fresh { font-family: var(--mono); font-size: 8.5px; color: var(--text-muted); margin-left: auto; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .crm5-board-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .crm5-hot { min-width: 200px; scroll-snap-align: start; flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .crm5-table-wrap,
[data-theme="light"] .crm5-perf,
[data-theme="light"] .crm5-hot {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .crm5-table thead th,
[data-theme="light"] .crm5-perf-table thead th {
  background: rgba(var(--accent-rgb), .05);
  border-bottom-color: var(--line);
}
[data-theme="light"] .crm5-table tbody td { border-bottom-color: var(--line); }
[data-theme="light"] .crm5-perf-table tbody td { border-bottom-color: var(--line); }
[data-theme="light"] .crm5-tab { background: var(--surface); border-color: var(--line); }
[data-theme="light"] .crm5-tab:hover { background: rgba(var(--accent-rgb), .05); }
[data-theme="light"] .crm5-tab .crm5-tab-n,
[data-theme="light"] .crm5-count-chip,
[data-theme="light"] .crm5-src-ic,
[data-theme="light"] .crm5-avatar.is-none,
[data-theme="light"] .crm5-qa,
[data-theme="light"] .crm5-da,
[data-theme="light"] .crm5-foot-badge {
  background: rgba(0,0,0,.04);
  border-color: var(--line);
}
[data-theme="light"] .crm5-detail {
  background: var(--surface);
  border-left-color: var(--line);
}
[data-theme="light"] .crm5-detail-head,
[data-theme="light"] .crm5-perf-head { border-bottom-color: var(--line); }
[data-theme="light"] .crm5-tl-dot { border-color: var(--surface); }
[data-theme="light"] .crm5-detail-x { background: rgba(0,0,0,.04); border-color: var(--line); }
[data-theme="light"] .crm5-score[data-band="gray"] { background: rgba(0,0,0,.04); border-color: var(--line); }


/* --- v5-market.css --- */
/* === ATLAS V5 · Market Intelligence page ===
 * Scoped to #view-market. Token-only → both light + dark themes auto-valid.
 * Class prefix .mk- . Loads after the CSS bundles. All scrolling happens
 * inside .mk-page; the outer ATLAS frame never scrolls (no-scroll rule).
 *
 * DATA-INTEGRITY: figures render in js/market.js from the live GAMLS sold-comp
 * endpoint, or a clearly-flagged sample fallback. Trend charts are marked
 * illustrative in markup. No data-integrity claim is encoded in CSS.
 * MULTI-TENANT: city/org names come from the data feed + config, never CSS. */

.mk-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 28px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.mk-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg, var(--panel));
}
.mk-head-titles { min-width: 0; }
.mk-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
.mk-title {
  font-family: var(--display, var(--mono));
  font-size: 23px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin: 0;
  letter-spacing: -.01em;
}
.mk-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  margin: 5px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mk-source {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line, var(--border));
}
.mk-source--live    { color: #2dbd7e; border-color: rgba(45,189,126,.4); background: rgba(45,189,126,.10); }
.mk-source--mock    { color: #d98c2b; border-color: rgba(217,140,43,.4); background: rgba(217,140,43,.10); }
.mk-source--loading { color: var(--muted, var(--text-dim)); }

/* ── Period tabs ───────────────────────────────────────────────────────── */
.mk-period {
  display: inline-flex;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.mk-period-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted, var(--text-dim));
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 15px;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.mk-period-btn:hover { color: var(--text, var(--ink)); }
.mk-period-btn.is-on {
  color: #0a0e14;
  background: var(--champagne, var(--gold));
}

/* ── Loading / empty ───────────────────────────────────────────────────── */
.mk-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 80px 24px; color: var(--muted, var(--text-dim));
  font-family: var(--mono); font-size: 12px; text-align: center;
}
.mk-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--line, var(--border));
  border-top-color: var(--champagne, var(--gold));
  animation: mk-spin .8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ── Market leaders strip ──────────────────────────────────────────────── */
.mk-leaders-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px 28px 6px;
}
.mk-leader {
  position: relative;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 16px 18px;
  overflow: hidden;
}
.mk-leader::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--line, var(--border));
}
.mk-leader--primary { border-color: rgba(214,169,79,.55); }
.mk-leader--primary::before { background: var(--champagne, var(--gold)); }
.mk-leader--primary {
  background:
    linear-gradient(120deg, rgba(214,169,79,.10), transparent 55%),
    var(--surface-2, var(--panel2, var(--panel)));
}
.mk-leader-rank {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--muted, var(--text-dim)); letter-spacing: .06em;
}
.mk-leader-city {
  font-family: var(--display, var(--mono));
  font-size: 16px; font-weight: 700; color: var(--ink, var(--text));
  margin: 2px 0 6px; display: flex; align-items: center; gap: 8px;
}
.mk-leader-badge {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  border: 1px solid rgba(214,169,79,.45);
  border-radius: 999px; padding: 2px 7px;
}
.mk-leader-vol {
  font-family: var(--display, var(--mono));
  font-size: 26px; font-weight: 700; color: var(--champagne, var(--gold));
  line-height: 1;
}
.mk-leader-meta {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted, var(--text-dim));
}
.mk-leader-meta strong { color: var(--text, var(--ink)); font-weight: 700; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.mk-panel {
  margin: 18px 28px 0;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 16px;
  overflow: hidden;
}
.mk-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line, var(--border));
}
.mk-panel-title {
  font-family: var(--display, var(--mono));
  font-size: 14px; font-weight: 700; color: var(--ink, var(--text)); margin: 0;
}
.mk-panel-sub {
  font-family: var(--mono); font-size: 10px; color: var(--muted, var(--text-dim));
}

/* ── Comparison table ──────────────────────────────────────────────────── */
.mk-table-wrap { overflow-x: auto; }
.mk-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 12px;
}
.mk-th {
  text-align: right;
  padding: 11px 16px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, var(--text-dim));
  cursor: pointer; user-select: none; white-space: nowrap;
  border-bottom: 1px solid var(--line, var(--border));
  transition: color .12s, background .12s;
}
.mk-th:hover { color: var(--text, var(--ink)); background: rgba(127,127,127,.06); }
.mk-th:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: -2px; }
.mk-th--text { text-align: left; }
.mk-th.is-sorted { color: var(--champagne, var(--gold)); }
.mk-th-arrow { display: inline-block; width: 11px; font-size: 8px; }
.mk-td {
  text-align: right;
  padding: 11px 16px;
  color: var(--text, var(--ink));
  border-bottom: 1px solid color-mix(in srgb, var(--line, var(--border)) 55%, transparent);
  white-space: nowrap;
}
.mk-td--city { text-align: left; font-weight: 700; }
.mk-th--vol, .mk-td.mk-th--vol { color: var(--text, var(--ink)); }
.mk-td.mk-th--vol { font-weight: 700; }
.mk-row:last-child .mk-td { border-bottom: none; }
.mk-row:hover .mk-td { background: rgba(127,127,127,.05); }
.mk-row--primary .mk-td {
  background: linear-gradient(90deg, rgba(214,169,79,.12), rgba(214,169,79,.04));
}
.mk-row--primary:hover .mk-td { background: rgba(214,169,79,.16); }
.mk-row--primary .mk-td--city { color: var(--champagne, var(--gold)); }

/* ── Trend charts ──────────────────────────────────────────────────────── */
.mk-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 28px 0;
}
.mk-chart-card {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 16px;
  padding: 16px 18px 8px;
}
.mk-chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.mk-chart-title {
  font-family: var(--display, var(--mono));
  font-size: 13px; font-weight: 700; color: var(--ink, var(--text));
}
.mk-chart-flag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em;
  color: var(--muted, var(--text-dim));
  border: 1px dashed var(--line, var(--border));
  border-radius: 6px; padding: 2px 6px; cursor: help;
}
.mk-chart-svg { width: 100%; height: auto; display: block; }
.mk-line {
  stroke: var(--champagne, var(--gold)); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.mk-dot { fill: var(--surface-2, var(--panel)); stroke: var(--champagne, var(--gold)); stroke-width: 2; }
.mk-dot--last { fill: var(--champagne, var(--gold)); }
.mk-bar { fill: color-mix(in srgb, var(--champagne, var(--gold)) 45%, transparent); transition: fill .15s; }
.mk-bar--last { fill: var(--champagne, var(--gold)); }
.mk-chart-svg:hover .mk-bar { fill: color-mix(in srgb, var(--champagne, var(--gold)) 60%, transparent); }
.mk-axis { font-family: var(--mono); font-size: 8.5px; fill: var(--muted, var(--text-dim)); }
.mk-barval, .mk-endlabel { font-family: var(--mono); font-size: 9px; font-weight: 700; fill: var(--text, var(--ink)); }
.mk-endlabel { fill: var(--champagne, var(--gold)); }
.mk-chart-empty {
  font-family: var(--mono); font-size: 11px; color: var(--muted, var(--text-dim));
  padding: 50px 12px; text-align: center;
}

/* ── Hot zips ──────────────────────────────────────────────────────────── */
.mk-zip-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 16px 20px 20px;
}
.mk-zip-card {
  background: var(--bg, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  padding: 13px 14px;
}
.mk-zip-code {
  font-family: var(--display, var(--mono));
  font-size: 18px; font-weight: 700; color: var(--ink, var(--text)); line-height: 1;
}
.mk-zip-city {
  font-family: var(--mono); font-size: 10px; color: var(--muted, var(--text-dim));
  margin: 3px 0 10px;
}
.mk-zip-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; padding: 3px 0;
}
.mk-zip-k { color: var(--muted, var(--text-dim)); }
.mk-zip-v { color: var(--text, var(--ink)); font-weight: 700; }
.mk-zip-empty {
  grid-column: 1 / -1; text-align: center; padding: 26px;
  font-family: var(--mono); font-size: 11px; color: var(--muted, var(--text-dim));
}

/* ── Market health score ───────────────────────────────────────────────── */
.mk-health-card {
  margin: 18px 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--line, var(--border));
  border-radius: 16px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.mk-health-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
}
.mk-health--seller   { background: linear-gradient(110deg, rgba(45,189,126,.10), transparent 60%), var(--surface-2, var(--panel)); border-color: rgba(45,189,126,.4); }
.mk-health--seller::before   { background: #2dbd7e; }
.mk-health--buyer    { background: linear-gradient(110deg, rgba(91,140,224,.10), transparent 60%), var(--surface-2, var(--panel)); border-color: rgba(91,140,224,.4); }
.mk-health--buyer::before    { background: #5b8ce0; }
.mk-health--balanced { background: linear-gradient(110deg, rgba(214,169,79,.10), transparent 60%), var(--surface-2, var(--panel)); border-color: rgba(214,169,79,.4); }
.mk-health--balanced::before { background: var(--champagne, var(--gold)); }
.mk-health--none     { background: var(--surface-2, var(--panel)); }
.mk-health--none::before { background: var(--line, var(--border)); }
.mk-health-left { min-width: 0; max-width: 540px; }
.mk-health-eyebrow {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted, var(--text-dim));
}
.mk-health-score {
  font-family: var(--display, var(--mono));
  font-size: 26px; font-weight: 700; color: var(--ink, var(--text));
  margin: 4px 0 6px; letter-spacing: -.01em;
}
.mk-health--seller .mk-health-score   { color: #2dbd7e; }
.mk-health--buyer .mk-health-score    { color: #5b8ce0; }
.mk-health--balanced .mk-health-score { color: var(--champagne, var(--gold)); }
.mk-health-desc {
  font-family: var(--body, inherit); font-size: 12.5px; line-height: 1.5;
  color: var(--muted, var(--text-dim));
}
.mk-health-gauge { display: flex; gap: 26px; }
.mk-health-stat { text-align: center; }
.mk-health-stat-v {
  display: block; font-family: var(--display, var(--mono));
  font-size: 22px; font-weight: 700; color: var(--ink, var(--text)); line-height: 1;
}
.mk-health-stat-k {
  display: block; font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted, var(--text-dim)); margin-top: 5px;
}

/* ── CMA quick-start ───────────────────────────────────────────────────── */
.mk-cta-card {
  margin: 18px 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-radius: 16px; padding: 20px 24px;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(214,169,79,.16), transparent 60%),
    var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid rgba(214,169,79,.35);
}
.mk-cta-title {
  font-family: var(--display, var(--mono));
  font-size: 16px; font-weight: 700; color: var(--ink, var(--text));
}
.mk-cta-sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted, var(--text-dim)); margin-top: 4px;
}
.mk-cta-btn {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #0a0e14; background: var(--champagne, var(--gold));
  border: none; border-radius: 10px; padding: 12px 20px; cursor: pointer;
  white-space: nowrap; transition: transform .12s, box-shadow .12s, filter .12s;
}
.mk-cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(214,169,79,.28); }
.mk-cta-btn:active { transform: translateY(0); }
.mk-cta-btn:focus-visible { outline: 2px solid var(--ink, #fff); outline-offset: 2px; }

/* ── Foot note ─────────────────────────────────────────────────────────── */
.mk-foot-note {
  margin: 16px 28px 0;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: var(--muted, var(--text-dim));
  padding: 11px 14px;
  border: 1px dashed var(--line, var(--border));
  border-radius: 10px;
}
.mk-foot-note code {
  font-family: var(--mono); background: rgba(127,127,127,.14);
  padding: 1px 5px; border-radius: 4px; color: var(--text, var(--ink));
}

.champagne { color: var(--champagne, var(--gold)); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mk-leaders-strip { grid-template-columns: 1fr; }
  .mk-charts { grid-template-columns: 1fr; }
  .mk-zip-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mk-header, .mk-leaders-strip, .mk-panel, .mk-charts, .mk-health-card, .mk-cta-card, .mk-foot-note {
    margin-left: 14px; margin-right: 14px; padding-left: 16px; padding-right: 16px;
  }
  .mk-header { padding-left: 16px; padding-right: 16px; }
  .mk-zip-strip { grid-template-columns: 1fr; }
  .mk-health-gauge { gap: 16px; }
}


/* --- v5-integrations.css --- */
/* ─────────────────────────────────────────────────────────────────────────
 * v5-integrations.css — ATLAS Integrations page V5 (data-view="integrations")
 *
 * Health of all connected systems + per-connection configure panel.
 * Replaces the legacy .w424-conn stub rendering with a card-grid + health
 * overview strip + events timeline + slide-in configure panel.
 *
 * THEME: every color is a shared token (--panel, --panel2, --border, --border2,
 *   --accent / --accent-rgb, --good / --good-rgb, --warn, --bad, --text /
 *   --text-dim / --text-muted, --mono, --sans, --display, --rad). Light + dark
 *   both work because the tokens swap at :root. No literal theme colors here
 *   except the per-status accent fallbacks (which read fine on both themes).
 *
 * DATA INTEGRITY: status is DERIVED from real probes this session (did the
 *   connector answer?) or honest "—" / "not configured" — never asserted.
 *
 * NO SCROLL RULE: the page body scrolls internally (.w424-body already does);
 *   the outer 1080px frame never scrolls. The configure panel is fixed-position
 *   and scrolls its own content.
 *
 * Prefix: .int5-*   (V5 Integrations — distinct from legacy .w424-conn / .w426-)
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Page body layout ───────────────────────────────────────────────────── */
.int5-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Header health summary chip ─────────────────────────────────────────── */
.int5-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text-dim);
  transition: color .2s, border-color .2s, background .2s;
}
.int5-summary-chip.is-ok {
  color: var(--good);
  border-color: rgba(var(--good-rgb), .4);
  background: rgba(var(--good-rgb), .1);
}
.int5-summary-chip.is-warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.int5-summary-chip .int5-summary-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* ── Health overview strip ──────────────────────────────────────────────── */
.int5-health {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border-radius: var(--rad);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--good) 9%, var(--panel)) 0%,
      var(--panel) 60%);
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.int5-health.is-warn {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--warn) 11%, var(--panel)) 0%,
      var(--panel) 60%);
  border-color: color-mix(in srgb, var(--warn) 32%, var(--border));
}
.int5-health.is-bad {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bad) 11%, var(--panel)) 0%,
      var(--panel) 60%);
  border-color: color-mix(in srgb, var(--bad) 32%, var(--border));
}
/* Faint scanning glow on the left edge */
.int5-health::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--good);
  box-shadow: 0 0 18px 2px rgba(var(--good-rgb), .5);
}
.int5-health.is-warn::before { background: var(--warn); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--warn) 60%, transparent); }
.int5-health.is-bad::before  { background: var(--bad);  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--bad) 60%, transparent); }

.int5-health-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  font-size: 26px;
  color: var(--good);
  background: rgba(var(--good-rgb), .12);
  border: 1px solid rgba(var(--good-rgb), .3);
}
.int5-health.is-warn .int5-health-icon { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.int5-health.is-bad  .int5-health-icon { color: var(--bad);  background: color-mix(in srgb, var(--bad) 14%, transparent);  border-color: color-mix(in srgb, var(--bad) 34%, transparent); }

.int5-health-main { flex: 1; min-width: 0; }
.int5-health-title {
  font-family: var(--display, var(--sans));
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.1;
}
.int5-health-sub {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.int5-health-actions { flex-shrink: 0; }
.int5-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .12s;
}
.int5-refresh-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); transform: translateY(-1px); }
.int5-refresh-btn:active { transform: translateY(0); }
.int5-refresh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.int5-refresh-btn svg { width: 14px; height: 14px; transition: transform .5s ease; }
.int5-refresh-btn.is-spinning svg { transform: rotate(360deg); }

/* ── Section labels ─────────────────────────────────────────────────────── */
.int5-section-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 2px 0;
}

/* ── Integration cards grid ─────────────────────────────────────────────── */
.int5-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.int5-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 16px 14px 18px;
  border-radius: var(--rad);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  background: var(--panel);
  transition: border-color .16s, transform .14s, box-shadow .16s;
}
.int5-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  border-left-color: var(--accent);
}
/* Colored left border by status */
.int5-card[data-status="live"]   { border-left-color: var(--good); }
.int5-card[data-status="warn"]   { border-left-color: var(--warn); }
.int5-card[data-status="error"]  { border-left-color: var(--bad); }
.int5-card[data-status="off"]    { border-left-color: var(--text-muted); }
.int5-card[data-status="check"]  { border-left-color: var(--accent); }

.int5-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
/* Logo placeholder — square colored badge with service initial */
.int5-logo {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  font-family: var(--display, var(--sans));
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .28);
  text-transform: uppercase;
}
.int5-card-titles { flex: 1; min-width: 0; }
.int5-card-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.int5-card-cat {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Status line: pulse dot + label + last ping */
.int5-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.int5-status-label { font-weight: 700; }
.int5-card[data-status="live"]  .int5-status-label { color: var(--good); }
.int5-card[data-status="warn"]  .int5-status-label { color: var(--warn); }
.int5-card[data-status="error"] .int5-status-label { color: var(--bad); }
.int5-card[data-status="off"]   .int5-status-label { color: var(--text-muted); }
.int5-card[data-status="check"] .int5-status-label { color: var(--accent); }
.int5-status-sep { opacity: .4; }
.int5-status-ping { color: var(--text-muted); }

/* Animated pulse dot */
.int-pulse-dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.int-pulse-dot.is-live  { background: var(--good); }
.int-pulse-dot.is-warn  { background: var(--warn); }
.int-pulse-dot.is-error { background: var(--bad); }
.int-pulse-dot.is-off   { background: var(--text-muted); }
.int-pulse-dot.is-check { background: var(--accent); }
/* Pulse ring — only for live + check (active) states */
.int-pulse-dot.is-live::after,
.int-pulse-dot.is-check::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: inherit;
  opacity: .55;
  animation: int5-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.int-pulse-dot.is-check::after { animation-duration: 1.1s; }
@keyframes int5-pulse {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .int-pulse-dot.is-live::after,
  .int-pulse-dot.is-check::after { animation: none; opacity: .35; }
  .int5-refresh-btn svg { transition: none; }
}

.int5-card-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.45;
  min-height: 14px;
}
.int5-card-url {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card action buttons */
.int5-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid var(--border2);
}
.int5-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text-dim);
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color .12s, border-color .12s, background .12s;
}
.int5-act:hover { color: var(--text); border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.int5-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.int5-act.is-primary { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.int5-act svg { width: 11px; height: 11px; }

/* ── Recent events feed (timeline) ──────────────────────────────────────── */
.int5-events {
  border: 1px solid var(--border);
  border-radius: var(--rad);
  background: var(--panel);
  padding: 6px 4px;
}
.int5-event {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2);
}
.int5-event:last-child { border-bottom: 0; }
.int5-event-ico {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 7px;
  font-size: 11px;
  margin-top: 1px;
}
.int5-event-ico.is-ok    { color: var(--good); background: rgba(var(--good-rgb), .13); }
.int5-event-ico.is-info  { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.int5-event-ico.is-warn  { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.int5-event-ico.is-error { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.int5-event-body { flex: 1; min-width: 0; }
.int5-event-line {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.4;
}
.int5-event-src { font-weight: 700; color: var(--text-dim); }
.int5-event-ts {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.int5-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 14px 16px;
  text-align: center;
}

/* ── Configure slide-in panel ───────────────────────────────────────────── */
.int5-cfg-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s;
  z-index: 1200;
}
.int5-cfg-scrim.is-open { opacity: 1; pointer-events: auto; }

.int5-cfg {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 1201;
}
.int5-cfg.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .int5-cfg { transition: none; }
  .int5-cfg-scrim { transition: none; }
}

.int5-cfg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.int5-cfg-head .int5-logo { width: 42px; height: 42px; font-size: 18px; }
.int5-cfg-titles { flex: 1; min-width: 0; }
.int5-cfg-name {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.int5-cfg-cat {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}
.int5-cfg-close {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.int5-cfg-close:hover { color: var(--text); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.int5-cfg-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.int5-cfg-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.int5-cfg-field { display: flex; flex-direction: column; gap: 6px; }
.int5-cfg-flabel {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.int5-cfg-fval {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  word-break: break-all;
}
.int5-cfg-fval.is-dim { color: var(--text-muted); }

/* Status pill in panel */
.int5-cfg-statusrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
}
.int5-cfg-status-txt { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-dim); }

/* Freshness indicator bar */
.int5-fresh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}
.int5-fresh-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--panel2);
  overflow: hidden;
}
.int5-fresh-bar span {
  display: block;
  height: 100%;
  background: var(--good);
  border-radius: 3px;
}
.int5-fresh-bar.is-stale span { background: var(--warn); }
.int5-fresh-bar.is-none span  { background: var(--text-muted); }

.int5-cfg-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .07);
  cursor: pointer;
  transition: background .14s, transform .12s;
}
.int5-cfg-test:hover { background: rgba(var(--accent-rgb), .14); transform: translateY(-1px); }
.int5-cfg-test:active { transform: translateY(0); }
.int5-cfg-test:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.int5-cfg-note {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px dashed var(--border);
  background: var(--panel2);
}
.int5-cfg-note strong { color: var(--text-dim); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .int5-grid { grid-template-columns: 1fr; }
  .int5-health { flex-direction: column; align-items: flex-start; gap: 14px; }
  .int5-health-actions { width: 100%; }
  .int5-refresh-btn { width: 100%; justify-content: center; }
}


/* --- v5-tools.css --- */
/* ════════════════════════════════════════════════════════════════════════
   v5-tools.css — ATLAS Tools: Commission Calculator + Quick Valuation (AVM)
   ────────────────────────────────────────────────────────────────────────
   Two interactive WORKSPACE tools share this stylesheet. Design vocabulary
   is the ATLAS champagne / dark-stone palette (see bundle-base.css tokens:
   --champagne, --surface, --surface-2, --ink, --muted, --bad, --good, --mono).
   Both light + dark themes inherit those tokens, so this file never hardcodes
   theme-specific colors except as var() fallbacks. (atlas-dashboard.md #4)
   ════════════════════════════════════════════════════════════════════════ */

/* ── shared page shell ──────────────────────────────────────────────────── */
.tool-page {
  padding: 28px 32px 40px;
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;          /* inner scroll only — outer frame never scrolls */
}
.tool-head { margin-bottom: 24px; }
.tool-eyebrow {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne, var(--gold));
  margin-bottom: 6px;
}
.tool-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink, #e8e6e1);
  margin: 0;
}
.tool-sub {
  font-size: 13px;
  color: var(--muted, rgba(232,230,225,0.5));
  margin: 6px 0 0;
}
.tool-head-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.tool-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono, monospace);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  background: var(--champagne-soft, rgba(214,169,79,.14));
  border: 1px solid rgba(214,169,79,.32);
  border-radius: 999px;
  padding: 5px 11px;
  align-self: center;
}
.tool-badge .tb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good, #3affad);
  box-shadow: 0 0 6px var(--good, #3affad);
}

/* ════════════════════════════════════════════════════════════════════════
   COMMISSION CALCULATOR
   ════════════════════════════════════════════════════════════════════════ */
.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 20px;
  align-items: start;
}
.cc-col {
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 20px;
}
.cc-col-title {
  font-family: var(--mono, monospace);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.cc-field { margin-bottom: 16px; }
.cc-field:last-child { margin-bottom: 0; }
.cc-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted, rgba(232,230,225,0.6));
  margin-bottom: 6px;
}
.cc-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--mono, monospace);
  color: var(--ink, #e8e6e1);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cc-input::placeholder { color: var(--muted, rgba(232,230,225,0.3)); }
.cc-input:focus {
  outline: none;
  border-color: var(--champagne, var(--gold));
  box-shadow: 0 0 0 3px var(--champagne-soft, rgba(214,169,79,.18));
}
.cc-input--big { font-size: 17px; font-weight: 600; }

/* pill rate / split selectors */
.cc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-pill {
  flex: 1 1 auto;
  min-width: 52px;
  text-align: center;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 12px; font-weight: 600;
  font-family: var(--mono, monospace);
  color: var(--muted, rgba(232,230,225,0.65));
  cursor: pointer;
  transition: all 140ms ease;
}
.cc-pill:hover { border-color: var(--champagne, var(--gold)); color: var(--ink, #e8e6e1); }
.cc-pill:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.cc-pill.active {
  background: var(--champagne, var(--gold));
  border-color: var(--champagne, var(--gold));
  color: #1a1206;
}
.cc-custom-wrap { display: flex; align-items: center; gap: 6px; flex: 1 1 130px; }
.cc-custom-wrap .cc-input { padding: 8px 9px; font-size: 12px; }
.cc-custom-split { display: flex; align-items: center; gap: 4px; }
.cc-custom-split .cc-input { width: 52px; text-align: center; padding: 8px 4px; }
.cc-split-slash { color: var(--muted, rgba(232,230,225,0.5)); font-weight: 700; }

/* computed read-out rows */
.cc-readout { margin-top: 14px; }
.cc-readout-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.cc-readout-row:last-child { border-bottom: none; }
.cc-readout-label { font-size: 12px; color: var(--muted, rgba(232,230,225,0.6)); }
.cc-readout-val {
  font-family: var(--mono, monospace);
  font-size: 14px; font-weight: 600;
  color: var(--ink, #e8e6e1);
}
.cc-readout-val.champagne { color: var(--champagne, var(--gold)); }
.cc-readout-divider { height: 1px; background: var(--border, rgba(255,255,255,0.1)); margin: 12px 0; }

.cc-subhead {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.5));
  margin: 18px 0 10px;
}

/* total seller-costs emphasis row */
.cc-total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 2px solid var(--border, rgba(255,255,255,0.14));
}
.cc-total-row .cc-readout-label { font-weight: 700; color: var(--ink, #e8e6e1); }
.cc-total-row .cc-readout-val { font-size: 16px; color: var(--champagne, var(--gold)); }

/* ── NET PROCEEDS summary card ──────────────────────────────────────────── */
.cc-net-card {
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--champagne, var(--gold));
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.cc-net-title {
  font-family: var(--mono, monospace);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.6));
  margin-bottom: 8px;
}
.cc-net-big {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--champagne, var(--gold));
  font-family: var(--mono, monospace);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.cc-breakdown { margin-top: 4px; }
.cc-bd-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.cc-bd-label { color: var(--muted, rgba(232,230,225,0.6)); }
.cc-bd-val { font-family: var(--mono, monospace); font-weight: 600; color: var(--ink, #e8e6e1); }
.cc-bd-val.neg { color: var(--bad, #ff5b3a); }
.cc-bd-rule { height: 2px; background: var(--champagne, var(--gold)); opacity: 0.5; margin: 10px 0; }
.cc-bd-final { padding-top: 4px; }
.cc-bd-final .cc-bd-label { font-weight: 700; color: var(--ink, #e8e6e1); }
.cc-bd-final .cc-bd-val { font-size: 16px; color: var(--champagne, var(--gold)); }

.cc-mortgage-field { margin-top: 18px; }
.cc-print-btn {
  margin-top: 16px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--champagne, var(--gold));
  color: var(--champagne, var(--gold));
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
.cc-print-btn:hover { background: var(--champagne, var(--gold)); color: #1a1206; }
.cc-print-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   QUICK VALUATION (AVM)
   ════════════════════════════════════════════════════════════════════════ */
.avm-shell { max-width: 760px; margin: 0 auto; }
.avm-card {
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 26px;
}
.avm-field { margin-bottom: 18px; }
.avm-label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--muted, rgba(232,230,225,0.6));
  margin-bottom: 7px;
}
.avm-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--ink, #e8e6e1);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.avm-input::placeholder { color: var(--muted, rgba(232,230,225,0.3)); }
.avm-input:focus {
  outline: none;
  border-color: var(--champagne, var(--gold));
  box-shadow: 0 0 0 3px var(--champagne-soft, rgba(214,169,79,.18));
}
.avm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* bed/bath selector pills */
.avm-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.avm-pill {
  min-width: 42px; text-align: center;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px; font-weight: 600;
  font-family: var(--mono, monospace);
  color: var(--muted, rgba(232,230,225,0.65));
  cursor: pointer;
  transition: all 140ms ease;
}
.avm-pill:hover { border-color: var(--champagne, var(--gold)); color: var(--ink, #e8e6e1); }
.avm-pill:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.avm-pill.active {
  background: var(--champagne, var(--gold));
  border-color: var(--champagne, var(--gold));
  color: #1a1206;
}

.avm-btn {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(180deg, var(--champagne, var(--gold)), #c0922f);
  border: none;
  border-radius: 11px;
  padding: 14px 18px;
  font-size: 15px; font-weight: 700;
  color: #1a1206;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 150ms ease, opacity 150ms ease;
  box-shadow: 0 6px 20px rgba(214,169,79,0.22);
}
.avm-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(214,169,79,0.32); }
.avm-btn:active { transform: translateY(0); }
.avm-btn:focus-visible { outline: 2px solid var(--ink, #e8e6e1); outline-offset: 2px; }
.avm-btn:disabled { opacity: 0.55; cursor: progress; transform: none; }

/* ── result / states ────────────────────────────────────────────────────── */
.avm-result-wrap { margin-top: 24px; }
.avm-result-card {
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--champagne, var(--gold));
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.30);
  animation: avm-reveal 460ms cubic-bezier(.16,.84,.44,1) both;
}
@keyframes avm-reveal {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .avm-result-card { animation: none; }
}
.avm-res-address {
  font-size: 15px; font-weight: 600;
  color: var(--ink, #e8e6e1);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}
.avm-res-label {
  font-family: var(--mono, monospace);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.6));
  margin-bottom: 8px;
}
.avm-res-range {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 700; line-height: 1;
  color: var(--champagne, var(--gold));
  font-family: var(--mono, monospace);
  letter-spacing: -0.01em;
}
.avm-res-point {
  font-size: 14px;
  color: var(--muted, rgba(232,230,225,0.7));
  margin-top: 10px;
}
.avm-res-point strong { color: var(--ink, #e8e6e1); font-family: var(--mono, monospace); }
.avm-res-basis {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  font-size: 13px; color: var(--muted, rgba(232,230,225,0.65));
  line-height: 1.55;
}
.avm-comps-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.55));
  margin: 20px 0 10px;
}
.avm-comp-list { list-style: none; margin: 0; padding: 0; }
.avm-comp-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 13px;
}
.avm-comp-item:last-child { border-bottom: none; }
.avm-comp-addr { color: var(--ink, #e8e6e1); }
.avm-comp-meta { font-family: var(--mono, monospace); color: var(--champagne, var(--gold)); white-space: nowrap; }
.avm-comp-dom { color: var(--muted, rgba(232,230,225,0.5)); font-size: 11px; margin-left: 6px; }

.avm-res-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.avm-res-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
.avm-res-btn--primary {
  background: var(--champagne, var(--gold)); border: 1px solid var(--champagne, var(--gold));
  color: #1a1206;
}
.avm-res-btn--primary:hover { filter: brightness(1.07); }
.avm-res-btn--ghost {
  background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.16));
  color: var(--ink, #e8e6e1);
}
.avm-res-btn--ghost:hover { border-color: var(--champagne, var(--gold)); color: var(--champagne, var(--gold)); }
.avm-res-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }

/* loading / empty / error states */
.avm-state {
  margin-top: 24px;
  text-align: center;
  padding: 36px 24px;
  background: var(--surface, rgba(255,255,255,0.03));
  border: 1px dashed var(--border, rgba(255,255,255,0.12));
  border-radius: 14px;
  color: var(--muted, rgba(232,230,225,0.6));
  font-size: 14px;
}
.avm-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--border, rgba(255,255,255,0.14));
  border-top-color: var(--champagne, var(--gold));
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: avm-spin 0.85s linear infinite;
}
@keyframes avm-spin { to { transform: rotate(360deg); } }
.avm-state--error { border-color: rgba(255,91,58,.4); color: var(--bad, #ff5b3a); }

/* ════════════════════════════════════════════════════════════════════════
   PRINT — isolate the net-proceeds summary card for Commission Calculator
   ════════════════════════════════════════════════════════════════════════ */
.cc-print-summary { /* normally rendered inline; print path hides everything else */ }

@media print {
  body * { visibility: hidden !important; }
  .cc-print-summary, .cc-print-summary * { visibility: visible !important; }
  .cc-print-summary {
    position: absolute; left: 0; top: 0; width: 100%;
    background: #fff !important; color: #111 !important;
    border: 1px solid #ccc !important; box-shadow: none !important;
    padding: 28px !important;
  }
  .cc-print-summary .cc-net-big,
  .cc-print-summary .cc-bd-final .cc-bd-val,
  .cc-print-summary .cc-bd-rule { color: #111 !important; background: #111 !important; }
  .cc-print-summary .cc-net-big,
  .cc-print-summary .cc-bd-final .cc-bd-val { background: transparent !important; }
  .cc-print-btn, .cc-mortgage-field { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — stack columns on tablet / mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cc-grid { grid-template-columns: 1fr; }
  .cc-net-card { position: static; }
}
@media (max-width: 640px) {
  .tool-page { padding: 20px 16px 32px; }
  .avm-row { grid-template-columns: 1fr; }
  .avm-card { padding: 18px; }
  .cc-col { padding: 16px; }
}


/* --- v5-showings.css --- */
/* === ATLAS V5 — Showings & Open Houses page === */
/* Scoped to #view-showings. Token-only → both themes auto-valid.
 * Loads after the V5 page bundle. Companion JS: js/v5-showings.js.
 *
 * HARD RULES honoured (see .claude/rules):
 *  - data-integrity: counts/feedback render from real fetched rows or em-dash.
 *  - no-scroll: outer .frame untouched; only .sh5-body scrolls.
 *  - voice: never touches orb / mic / transcript / theme tokens.
 *  - multi-tenant: no hardcoded org strings here; names come from the feed/JS.
 *
 * NOTE: distinct namespace .sh5-* so this never collides with the legacy
 * Listings-panel showings.js (.sh-* classes) which serves a different feature.
 */

/* ── Page shell ─────────────────────────────────────────────────────────── */
#view-showings { display: flex; flex-direction: column; min-height: 0; }

.sh5-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
.sh5-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
.sh5-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin: 0;
}
.sh5-subtitle {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  margin-top: 2px;
}
.sh5-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--champagne, var(--accent));
  background: var(--champagne, var(--accent));
  color: #161106;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.sh5-btn svg { width: 15px; height: 15px; }
.sh5-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); filter: brightness(1.04); }
.sh5-btn:active { transform: translateY(0); }
.sh5-btn:focus-visible { outline: 2px solid var(--champagne, var(--accent)); outline-offset: 2px; }
.sh5-btn--ghost {
  background: transparent;
  color: var(--ink, var(--text));
  border-color: var(--line, var(--border));
}
.sh5-btn--ghost:hover { border-color: var(--champagne, var(--accent)); box-shadow: none; }

/* ── This-week summary strip ────────────────────────────────────────────── */
.sh5-strip {
  display: flex;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
.sh5-stat {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--line, var(--border));
}
.sh5-stat:last-child { border-right: none; }
.sh5-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 5px;
}
.sh5-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums;
}
.sh5-stat-val.champagne { color: var(--champagne, var(--accent)); }

/* ── Tab bar (matches the .v5-pipeline-tabs pattern) ────────────────────── */
.sh5-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 28px 0;
  flex-shrink: 0;
}
.sh5-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, var(--text-dim));
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.sh5-tab:hover { color: var(--ink, var(--text)); }
.sh5-tab.active {
  color: var(--ink, var(--text));
  border-bottom-color: var(--champagne, var(--accent));
}
.sh5-tab:focus-visible { outline: 2px solid var(--champagne, var(--accent)); outline-offset: 2px; border-radius: 4px; }
.sh5-tab-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--muted, var(--text-dim));
}
.sh5-tab.active .sh5-tab-count {
  background: var(--champagne-soft, rgba(214,169,79,.15));
  color: var(--champagne, var(--accent));
}

/* ── Scroll body ────────────────────────────────────────────────────────── */
.sh5-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 32px;
}
.sh5-pane[hidden] { display: none; }

/* ── Section heads ──────────────────────────────────────────────────────── */
.sh5-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 12px;
}
.sh5-section-head + .sh5-section-head { margin-top: 28px; }
.sh5-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink, var(--text));
}
.sh5-section-sub {
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.sh5-collapse-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line, var(--border));
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, var(--text-dim));
  cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
.sh5-collapse-btn:hover { border-color: var(--champagne, var(--accent)); color: var(--ink, var(--text)); }
.sh5-collapsible[hidden] { display: none; }

.sh5-stack { display: flex; flex-direction: column; gap: 12px; }
.sh5-section + .sh5-section { margin-top: 28px; }

/* ── Showing card (compact horizontal) ──────────────────────────────────── */
.sh5-show-card {
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-left: 3px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 14px 18px;
  transition: border-color 160ms, box-shadow 160ms;
}
.sh5-show-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.sh5-show-card.noshow { border-left-color: var(--bad, #ef5b6e); }

.sh5-show-when {
  font-size: 12px;
  font-weight: 700;
  color: var(--champagne, var(--accent));
  letter-spacing: .02em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.sh5-show-addr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sh5-show-addr-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, var(--text));
}
.sh5-show-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--muted, var(--text-dim));
}
.sh5-show-tag.listing { background: rgba(214,169,79,.12); color: var(--champagne, var(--accent)); }
.sh5-show-tag.buyer-side { background: rgba(59,130,246,.12); color: #3b82f6; }
.sh5-show-people {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  margin-bottom: 12px;
}
.sh5-show-people strong { color: var(--ink, var(--text)); font-weight: 600; }

.sh5-show-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sh5-show-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.sh5-mini-btn {
  appearance: none;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--line, var(--border));
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--ink, var(--text));
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.sh5-mini-btn:hover { border-color: var(--champagne, var(--accent)); }
.sh5-mini-btn.danger:hover { border-color: var(--bad, #ef5b6e); color: var(--bad, #ef5b6e); }
.sh5-mini-btn.primary {
  background: var(--champagne-soft, rgba(214,169,79,.15));
  border-color: var(--champagne, var(--accent));
  color: var(--champagne, var(--accent));
}
.sh5-mini-btn:focus-visible { outline: 2px solid var(--champagne, var(--accent)); outline-offset: 2px; }

/* ── Status dot + pulsing pending animation ─────────────────────────────── */
.sh5-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, var(--text-dim));
  white-space: nowrap;
}
.sh-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted, var(--text-dim));
  flex-shrink: 0;
}
.sh-status-dot.confirmed { background: var(--good, #3affad); }
.sh-status-dot.pending {
  background: var(--warn, #f5b54a);
  animation: sh5-pulse 1.5s ease-in-out infinite;
}
.sh-status-dot.unconfirmed { background: var(--muted, var(--text-dim)); }
.sh-status-dot.noshow { background: var(--bad, #ef5b6e); }
.sh-status-dot.showed { background: var(--good, #3affad); }
@keyframes sh5-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,181,74,.55); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(245,181,74,0); opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-status-dot.pending { animation: none; }
}

/* ── Feedback box (speech-bubble feel) ──────────────────────────────────── */
.sh5-feedback {
  position: relative;
  background: var(--surface-2, var(--panel2, var(--panel)));
  border-radius: 10px;
  padding: 11px 14px;
  margin: 10px 0 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink, var(--text));
  line-height: 1.45;
}
.sh5-feedback::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: var(--surface-2, var(--panel2, var(--panel)));
  transform: rotate(45deg);
  border-radius: 2px;
}
.sh5-feedback-label {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, var(--text-dim));
  margin-bottom: 4px;
}
.sh5-followup {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}
.sh5-followup-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, var(--text-dim));
  margin-right: 2px;
}

/* ── Open house card (full-width, champagne header band) ────────────────── */
.sh5-oh-card {
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 160ms;
}
.sh5-oh-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.sh5-oh-band {
  background: linear-gradient(95deg, var(--champagne, var(--accent)), color-mix(in srgb, var(--champagne, var(--accent)) 78%, #fff));
  color: #1a1305;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sh5-oh-band-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sh5-oh-band-when {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sh5-oh-band.past {
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--muted, var(--text-dim));
}
.sh5-oh-inner { padding: 16px 18px 18px; }
.sh5-oh-addr {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, var(--text));
  margin-bottom: 4px;
}
.sh5-oh-host {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  margin-bottom: 14px;
}
.sh5-oh-host strong { color: var(--ink, var(--text)); font-weight: 600; }

.sh5-oh-signin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line, var(--border));
  border-bottom: 1px solid var(--line, var(--border));
  margin-bottom: 14px;
}
.sh5-oh-counter {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--champagne, var(--accent));
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}
.sh5-oh-counter-label {
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  line-height: 1.4;
}
.sh5-oh-counter-label strong { color: var(--ink, var(--text)); font-weight: 600; }

.sh5-oh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sh5-oh-notes {
  font-size: 12px;
  color: var(--muted, var(--text-dim));
  background: var(--surface-2, var(--panel2, var(--panel)));
  border-radius: 8px;
  padding: 9px 12px;
  line-height: 1.5;
}
.sh5-oh-notes strong { color: var(--ink, var(--text)); font-weight: 600; }

/* ── Empty / footnote ───────────────────────────────────────────────────── */
.sh5-empty {
  font-size: 13px;
  color: var(--muted, var(--text-dim));
  padding: 22px;
  text-align: center;
  border: 1px dashed var(--line, var(--border));
  border-radius: 10px;
}
.sh5-footnote {
  margin-top: 22px;
  font-size: 11px;
  color: var(--muted, var(--text-dim));
  font-style: italic;
}

/* ── Light-theme nudges ─────────────────────────────────────────────────── */
[data-theme="light"] #view-showings .sh5-show-card:hover,
:root[data-theme="light"] #view-showings .sh5-show-card:hover,
[data-theme="light"] #view-showings .sh5-oh-card:hover,
:root[data-theme="light"] #view-showings .sh5-oh-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

/* === v5-deal-analyzer.css (Wave 20) === */
/* ════════════════════════════════════════════════════════════════════════
   v5-deal-analyzer.css — ATLAS Deal Analyzer (data-view="deal-analyzer")
   ────────────────────────────────────────────────────────────────────────
   Investment-property analysis tool. Pure client-side math (js/deal-analyzer.js).
   Design vocabulary = ATLAS champagne / dark-stone palette (bundle-base.css
   tokens: --champagne, --surface, --surface-2, --ink, --muted, --bad, --good,
   --border, --mono). Both light + dark themes inherit those tokens — no
   theme-specific colors hardcoded except as var() fallbacks (atlas-dashboard.md #4).
   MULTI-TENANT: org-agnostic tool; no personalized strings.
   ════════════════════════════════════════════════════════════════════════ */

/* ── header row (title + Save Analysis action) ──────────────────────────── */
.da-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.da-save-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  background: var(--champagne-soft, rgba(214,169,79,.12));
  border: 1px solid rgba(214,169,79,.34);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.da-save-btn:hover { background: rgba(214,169,79,.22); border-color: rgba(214,169,79,.55); }
.da-save-btn:active { transform: translateY(1px); }
.da-save-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }

/* ── overall layout: input columns left, sticky results right ───────────── */
.da-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.95fr);
  gap: 22px;
  align-items: start;
}
.da-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* the expense card spans full width under the two narrower ones */
.da-card--expense { grid-column: 1 / -1; }

@media (max-width: 1200px) {
  .da-layout { grid-template-columns: 1fr; }
  .da-results { position: static !important; }
}
@media (max-width: 880px) {
  .da-inputs { grid-template-columns: 1fr; }
  .da-card--expense { grid-column: auto; }
}

/* ── input cards ────────────────────────────────────────────────────────── */
.da-card {
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 20px;
}
.da-card-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono, monospace);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.da-card-title svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }

/* expense card is wide → put its fields in two columns */
.da-card--expense .da-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
@media (max-width: 700px) { .da-card--expense .da-fields { grid-template-columns: 1fr; } }

/* ── fields ─────────────────────────────────────────────────────────────── */
.da-field { margin-bottom: 16px; }
.da-field:last-child { margin-bottom: 0; }
.da-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted, rgba(232,230,225,0.62));
  margin-bottom: 6px;
}
.da-label .da-hint {
  font-family: var(--mono, monospace);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--champagne, var(--gold));
  opacity: .85;
}
.da-input {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink, #e8e6e1);
  background: var(--surface-2, rgba(0,0,0,0.18));
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 9px;
  padding: 9px 11px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.da-input::placeholder { color: var(--muted, rgba(232,230,225,0.35)); }
.da-input:focus {
  outline: none;
  border-color: var(--champagne, var(--gold));
  box-shadow: 0 0 0 3px rgba(214,169,79,.16);
}
.da-input--big { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }
.da-input-affix { position: relative; }
.da-input-affix .da-affix {
  position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
  font-size: 12px; color: var(--muted, rgba(232,230,225,0.5)); pointer-events: none;
}
.da-input-affix .da-input { padding-right: 30px; }

/* ── pill segmented control ─────────────────────────────────────────────── */
.da-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.da-pill {
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted, rgba(232,230,225,0.7));
  background: var(--surface-2, rgba(0,0,0,0.18));
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  transition: all 140ms ease;
}
.da-pill:hover { border-color: rgba(214,169,79,.45); color: var(--ink, #e8e6e1); }
.da-pill:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.da-pill.active {
  color: var(--champagne, var(--gold));
  background: var(--champagne-soft, rgba(214,169,79,.14));
  border-color: rgba(214,169,79,.55);
}
.da-custom-wrap { margin-top: 8px; }
.da-custom-wrap .da-input { max-width: 120px; }

/* ════════════════════════════════════════════════════════════════════════
   RESULTS PANEL — sticky, champagne hero number
   ════════════════════════════════════════════════════════════════════════ */
.da-results {
  position: sticky;
  top: 12px;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid rgba(214,169,79,.30);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 48px -28px rgba(0,0,0,0.7);
}
.da-results-eyebrow {
  font-family: var(--mono, monospace);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  margin-bottom: 14px;
}

/* hero cash-flow figure */
.da-hero {
  text-align: center;
  padding: 6px 0 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  margin-bottom: 16px;
}
.da-hero-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.6));
  margin-bottom: 4px;
}
.da-hero-num {
  font-size: clamp(34px, 4.5vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--champagne, var(--gold));
  transition: color 200ms ease;
}
.da-hero-num.is-neg { color: var(--bad, #ff6b6b); }
.da-hero-num.is-pos { color: var(--good, #3affad); }
.da-hero-sub {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--muted, rgba(232,230,225,0.6));
  margin-top: 6px;
}

/* metric grid: cap rate / coc / grm / break-even */
.da-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.da-metric {
  background: var(--surface-2, rgba(0,0,0,0.16));
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 11px 12px;
}
.da-metric-label {
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, rgba(232,230,225,0.58));
  margin-bottom: 4px;
}
.da-metric-val {
  font-family: var(--mono, monospace);
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--ink, #e8e6e1);
}
.da-metric-note {
  font-size: 9.5px; color: var(--muted, rgba(232,230,225,0.42)); margin-top: 3px;
}

/* section heading inside results */
.da-section-h {
  font-family: var(--mono, monospace);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--champagne, var(--gold));
  margin-bottom: 10px;
}

/* monthly breakdown table — monospace numbers, border separators */
.da-breakdown { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.da-bd-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ink, #e8e6e1);
}
.da-bd-row .da-bd-label { color: var(--muted, rgba(232,230,225,0.7)); }
.da-bd-row .da-bd-label .da-bd-pct {
  font-family: var(--mono, monospace);
  font-size: 10px; color: var(--muted, rgba(232,230,225,0.45)); margin-left: 5px;
}
.da-bd-val { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-weight: 600; }
.da-bd-val.neg { color: var(--bad, #ff6b6b); }
.da-bd-row.da-bd-sub { border-top: 1px dashed var(--border, rgba(255,255,255,0.10)); margin-top: 4px; padding-top: 8px; }
.da-bd-row.da-bd-final {
  border-top: 1px solid rgba(214,169,79,.40);
  margin-top: 6px; padding-top: 9px;
  font-size: 14px; font-weight: 700;
}
.da-bd-row.da-bd-final .da-bd-label { color: var(--ink, #e8e6e1); font-weight: 700; }
.da-bd-row.da-bd-final .da-bd-val { color: var(--champagne, var(--gold)); font-size: 15px; }
.da-bd-row.da-bd-final .da-bd-val.is-neg { color: var(--bad, #ff6b6b); }

/* 5-year projection — mini bar chart */
.da-proj { margin-bottom: 18px; }
.da-proj-chart { width: 100%; height: 96px; display: block; margin-bottom: 8px; }
.da-proj-legend {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  font-family: var(--mono, monospace);
  font-size: 9.5px; text-align: center;
}
.da-proj-legend .da-pl-yr { color: var(--muted, rgba(232,230,225,0.5)); }
.da-proj-legend .da-pl-val { color: var(--ink, #e8e6e1); font-weight: 600; }

/* action row */
.da-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.da-act-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--mono, monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink, #e8e6e1);
  background: var(--surface-2, rgba(0,0,0,0.18));
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 9px;
  padding: 9px 10px;
  cursor: pointer;
  transition: all 140ms ease;
}
.da-act-btn:hover { border-color: rgba(214,169,79,.5); color: var(--champagne, var(--gold)); }
.da-act-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }
.da-act-btn svg { width: 13px; height: 13px; }

/* ── comparables + GA notes (below the input columns) ───────────────────── */
.da-aux { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
@media (max-width: 880px) { .da-aux { grid-template-columns: 1fr; } }

.da-comps .da-comps-text { font-size: 13px; color: var(--ink, #e8e6e1); line-height: 1.5; margin: 0 0 12px; }
.da-comps .da-comps-text strong { color: var(--champagne, var(--gold)); }
.da-comps .da-comps-empty { font-size: 12.5px; color: var(--muted, rgba(232,230,225,0.55)); line-height: 1.5; margin: 0 0 12px; }
.da-comps-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--champagne, var(--gold));
  background: var(--champagne-soft, rgba(214,169,79,.12));
  border: 1px solid rgba(214,169,79,.34);
  border-radius: 9px; padding: 8px 13px; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.da-comps-btn:hover { background: rgba(214,169,79,.22); border-color: rgba(214,169,79,.55); }
.da-comps-btn:focus-visible { outline: 2px solid var(--champagne, var(--gold)); outline-offset: 2px; }

.da-notes ul { list-style: none; margin: 0; padding: 0; }
.da-notes li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.45;
  color: var(--muted, rgba(232,230,225,0.78));
  padding: 6px 0;
  border-bottom: 1px dashed var(--border, rgba(255,255,255,0.07));
}
.da-notes li:last-child { border-bottom: none; }
.da-notes li .da-note-ico { flex: 0 0 auto; color: var(--champagne, var(--gold)); font-size: 12px; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════════
   PRINT — clean A4 layout: show only the results analysis
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  body * { visibility: hidden !important; }
  .da-results, .da-results * { visibility: visible !important; }
  .da-results {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    box-shadow: none !important;
    border-color: #999 !important;
    color: #000 !important;
    background: #fff !important;
    padding: 24px !important;
  }
  .da-actions { display: none !important; }
  .da-results-eyebrow, .da-section-h, .da-results-eyebrow * { color: #000 !important; }
  .da-hero-num { color: #000 !important; }
  .da-metric-val, .da-bd-val, .da-bd-row.da-bd-final .da-bd-val { color: #000 !important; }
  .da-proj-chart rect { fill: #444 !important; }
}