/* ===========================================================================
   DealIQ — design tokens
   Palette retuned 2026-05-18 to the Apache-Junction dashboard scheme
   (navy + terracotta + gold). Variable names kept stable so all existing
   class references continue to work — only the values shift.
   =========================================================================== */

:root {
  /* THEME BRIDGE — these app-facing tokens DERIVE from the active theme's tokens
     (defined per-theme in themes.css as html.theme-*). Fallbacks are the navy
     defaults so the app still renders if no theme class is present. This is what
     makes every theme in the picker re-skin the WHOLE UI (text, accent, borders,
     tints), not just the page background. Navy values are unchanged. */
  --bg-0: #0F1A2E;          /* page bg — also set per-theme in themes.css */
  --bg-1: #1B2A48;          /* card bg — also set per-theme */
  --bg-2: #243558;          /* deeper bg — also set per-theme */
  --border: var(--line, #2A3A55);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text — derive from the theme text ramp */
  --text-primary: var(--text-0, #E8ECF5);
  --text-secondary: var(--text-2, #93A1B8);
  --text-tertiary: var(--text-3, #8A96AD); /* a11y: lighter fallback meets WCAG AA on bg-0/bg-1 (was #6B7892, ~3.2:1 fail) */

  /* Accents — derive from theme accent / gold / info */
  --accent-blue: var(--accent, #C26B4A);       /* PRIMARY — old var name kept for compat */
  --accent-amber: var(--gold, #D4A14A);
  --accent-terra-2: var(--info, #D98664);
  --positive: #6FB98F;      /* also set per-theme (same name) */
  --negative: #D76B6B;      /* also set per-theme (same name) */
  --warning:  var(--warn, #E2B85B);

  --accent-blue-tint: color-mix(in srgb, var(--accent, #C26B4A) 14%, transparent);
  --accent-blue-edge: color-mix(in srgb, var(--accent, #C26B4A) 40%, transparent);
  --positive-tint: color-mix(in srgb, var(--positive, #6FB98F) 16%, transparent);
  --negative-tint: color-mix(in srgb, var(--negative, #D76B6B) 16%, transparent);
  --warning-tint:  color-mix(in srgb, var(--warn, #E2B85B) 16%, transparent);
  --soft:          rgba(255, 255, 255, 0.04);

  --font-serif: 'Fraunces', 'Iowan Old Style', 'Palatino', serif;
  --font-mono:  'Berkeley Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
}

/* ===========================================================================
   Base
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--text-tertiary); }

/* ===========================================================================
   Small-caps utility
   =========================================================================== */

.label,
.section-label,
.kpi-label,
.sidebar-label,
.toolbar label,
.category-tag,
th {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* ===========================================================================
   Top bar
   =========================================================================== */

.topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* One-row layout: brand fixed · IQ-family pills fill the middle & scroll if too many ·
   ticker fixed (hides on narrow) · controls pinned right. Nothing wraps to a 2nd row. */
.topbar > .brand { flex: 0 0 auto; }
/* IQ nav grows to fill but yields HARD (high shrink) so the ticker keeps its pills;
   ticker shrinks only as a last resort + scrolls internally — so it never overflows. */
.topbar > .iq-family-inline { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.topbar > .reit-earnings { flex: 0 1 auto; min-width: 0; }
.topbar > .reit-ticker { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }  /* grow:1 fills the bar on wide monitors; shrink:1 + min-width:0 + internal scroll so it NEVER forces page-wide overflow on a 15.6" laptop (all pills still reachable via internal scroll, not clipped) */
.topbar > .topbar-right { flex: 0 0 auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
}
.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 12px rgba(74, 140, 247, 0.6);
}
/* DealIQ Cobalt Radar mark — fixed brand color, independent of the active UI theme */
.brand-mark {
  width: 22px;
  height: 22px;
  display: inline-flex;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 7px rgba(30, 80, 200, 0.45));
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* ── Email panel rows + in-app reader ─────────────────────────────────── */
.email-row { line-height: 1.5; }
.email-open {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--text-0); font: inherit; text-align: left;
}
.email-open strong { font-weight: 600; }
.email-open:hover strong { color: var(--accent); text-decoration: underline; }
.email-detach {
  background: none; border: none; cursor: pointer; color: var(--text-3);
  padding: 0 4px; font-size: 12px; line-height: 1;
}
.email-detach:hover { color: var(--negative); }

.email-reader-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 4vh 3vw;
}
.email-reader {
  background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 12px;
  width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.email-reader-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.email-reader-subject { font-size: 16px; font-weight: 700; color: var(--text-0); flex: 1; line-height: 1.35; }
.email-reader-close {
  background: none; border: none; cursor: pointer; color: var(--text-2);
  font-size: 18px; line-height: 1; padding: 2px 6px; flex: 0 0 auto;
}
.email-reader-close:hover { color: var(--text-0); }
.email-reader-meta {
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-1); display: grid; gap: 3px;
}
.email-reader-meta .erm-label {
  display: inline-block; min-width: 46px; color: var(--text-3);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
}
.email-reader-atts {
  padding: 8px 18px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--text-2);
}
.email-reader-toggle { display: flex; gap: 2px; padding: 10px 18px 0; }
.email-reader-toggle button {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
  font-size: 12px; font-weight: 600; padding: 4px 12px; cursor: pointer;
}
.email-reader-toggle button:first-child { border-radius: 6px 0 0 6px; }
.email-reader-toggle button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.email-reader-toggle button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.email-reader-frame {
  flex: 1; width: 100%; min-height: 320px; border: none; background: #fff;
  margin: 12px 0 0;
}
.email-reader-body.email-reader-text {
  flex: 1; overflow: auto; padding: 16px 18px; margin: 0;
  white-space: pre-wrap; word-wrap: break-word;
  font: 13px/1.6 var(--font-mono); color: var(--text-1);
}
.email-reader-foot { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; display: flex; align-items: center; gap: 10px; }
.email-reader-foot a { color: var(--accent); }
.email-reply-btn { background: var(--accent); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.email-reply-btn:hover { filter: brightness(1.08); }
.email-reply-btn[data-mode="reply-all"] { background: var(--bg-3); color: var(--text-0); }
.erf-link { margin-left: auto; color: var(--accent); }
.email-composer { border-top: 1px solid var(--line); padding: 12px 16px; background: var(--bg-1); flex: 0 0 auto; }
.ec-row { font-size: 12.5px; color: var(--text-1); margin-bottom: 8px; }
.ec-row .erm-label { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.ec-body { width: 100%; min-height: 88px; resize: vertical; padding: 9px 11px; border-radius: 8px; background: var(--bg-0); border: 1px solid var(--line); color: var(--text-0); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; box-sizing: border-box; }
.ec-body:focus { outline: none; border-color: var(--accent); }
.ec-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ec-send { background: var(--accent); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer; }
.ec-send:disabled { opacity: 0.6; cursor: default; }
.ec-cancel { background: none; border: 1px solid var(--line); color: var(--text-2); border-radius: 7px; font-size: 12px; padding: 6px 12px; cursor: pointer; }
.ec-status { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }

/* ── Two-pane "Deal Inbox" (Outlook-style) ────────────────────────────── */
.ov-inbox-btn {
  margin-left: auto; align-self: flex-start;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-1);
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer;
}
.ov-inbox-btn:hover { border-color: var(--accent); color: var(--accent); }
.email-inbox-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.email-inbox {
  background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 12px;
  width: min(1180px, 97vw); height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.eib-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.eib-title { font-size: 14px; font-weight: 700; color: var(--text-0); }
.eib-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-2); font-size: 18px; line-height: 1; padding: 2px 6px;
}
.eib-close:hover { color: var(--text-0); }
.eib-body { flex: 1; display: flex; min-height: 0; }
.eib-list {
  flex: 0 0 320px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg-0);
}
.eib-empty { padding: 40px 18px; text-align: center; color: var(--text-3); font-size: 13px; }
.eib-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent; padding: 11px 14px; color: var(--text-1);
}
.eib-item:hover { background: var(--bg-1); }
.eib-item.active { background: var(--bg-2); border-left-color: var(--accent); }
.eib-item-top { display: flex; align-items: baseline; gap: 8px; }
.eib-from { font-weight: 600; font-size: 13px; color: var(--text-0); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eib-date { font-size: 12px; color: var(--text-3); flex: 0 0 auto; font-family: var(--font-mono); }
.eib-subj { font-size: 12.5px; color: var(--text-1); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eib-prev { font-size: 12px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eib-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Reading pane: subject must NOT grow (it inherits flex:1 from the modal
   header where it pushed the close button); in the column pane that ate all
   the height and squashed the iframe. Pin it, tighten chrome, maximize body. */
.eib-pane .pane-subject { flex: 0 0 auto; font-size: 15px; line-height: 1.3; padding: 12px 16px 4px; }
.eib-pane .email-reader-meta { flex: 0 0 auto; border-top: none; padding: 6px 16px 8px; gap: 2px; }
.eib-pane .email-reader-atts { flex: 0 0 auto; padding: 6px 16px; }
.eib-pane .email-reader-toggle { flex: 0 0 auto; padding: 8px 16px 0; }
.eib-pane .email-reader-frame { flex: 1 1 auto; min-height: 260px; margin: 8px 0 0; }
.eib-pane .email-reader-text { flex: 1 1 auto; }
.eib-pane .email-reader-foot { flex: 0 0 auto; padding: 8px 16px; }

/* Embedded Deal Inbox (inline in the deal-detail Emails section) */
.eib-embed { display: flex; height: min(72vh, 680px); border-top: 1px solid var(--line); }
.eib-embed .eib-list { flex: 0 0 300px; }
.eib-embed .eib-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.eib-item-detach { margin-left: 6px; color: var(--text-3); cursor: pointer; font-size: 12px; opacity: 0; flex: 0 0 auto; }
.eib-item:hover .eib-item-detach { opacity: 1; }
.eib-item-detach:hover { color: var(--negative); }
@media (max-width: 760px) {
  .eib-embed { flex-direction: column; height: auto; }
  .eib-embed .eib-list { flex: none; max-height: 220px; border-right: none; border-bottom: 1px solid var(--line); }
  .eib-embed .eib-pane { min-height: 360px; }
}

/* Notes & Email subview — notes panel */
.ne-wrap { display: flex; flex-direction: column; gap: 14px; }
.ne-note-add { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.ne-note-input {
  flex: 1; resize: vertical; min-height: 54px; padding: 8px 10px; border-radius: 8px;
  background: var(--bg-0); border: 1px solid var(--line); color: var(--text-0);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
}
.ne-note-input:focus { outline: none; border-color: var(--accent); }
.ne-note-save { flex: 0 0 auto; }
.ne-note-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ne-note-empty { list-style: none; color: var(--text-3); font-size: 12.5px; padding: 6px 2px; }
.ne-note { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 11px; }
.ne-note-body { font-size: 13px; line-height: 1.45; color: var(--text-0); white-space: pre-wrap; word-wrap: break-word; }
.ne-note-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.ne-note-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 12px; opacity: 0; }
.ne-note:hover .ne-note-del { opacity: 1; }
.ne-note-del:hover { color: var(--negative); }

/* Deal Pulse — heartbeat dot + summary card */
.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--positive);
  position: relative; margin-right: 7px; vertical-align: middle; flex: 0 0 auto; }
.pulse-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--positive);
  opacity: 0; animation: pulseRing 2s ease-out infinite; }
@keyframes pulseRing { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse-dot::after { animation: none; } }
.subtab .pulse-dot { width: 7px; height: 7px; }
.dp-section .ov-section-title { display: flex; align-items: center; }
.dp-current { font-size: 13.5px; line-height: 1.55; color: var(--text-0); }
.dp-text { white-space: normal; word-wrap: break-word; }
.dp-meta { margin-top: 8px; font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.dp-sync-status { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-2, rgba(255,255,255,0.03)); }
.dp-sync-status.is-ok { border-color: var(--positive-tint); background: var(--positive-tint); }
.dp-sync-status.is-warn { border-color: var(--warning-tint); background: var(--warning-tint); }
.dp-sync-status.is-err { border-color: var(--negative-tint); background: var(--negative-tint); }
.dp-sync-status.is-pending { border-color: var(--accent-blue-edge); background: var(--accent-blue-tint); }
.dp-sync-status.is-pending .muted { color: var(--accent); }
.dp-sync-status .positive { color: var(--positive); }
.dp-sync-status .warn { color: var(--warning); }
.dp-sync-status .negative { color: var(--negative); }
.dp-archive { margin-top: 12px; }
.dp-archive summary { cursor: pointer; font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
.dp-archive-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dp-arch-item { border-left: 2px solid var(--line-strong); padding: 4px 0 4px 10px; }
.dp-arch-meta { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); margin-bottom: 3px; }
.dp-arch-text { font-size: 12.5px; color: var(--text-1); line-height: 1.5; white-space: normal; }
.dp-pulsing .pulse-dot { background: var(--warn); }
.dp-pulsing .pulse-dot::after { border-color: var(--warn); animation-duration: 0.8s; }
/* Summary header — "open communication" radar broadcast. A live green core
   glows while two staggered cobalt signal rings ripple outward (on-brand: the
   DealIQ mark is a radar sweep). Signals the deal's comms channel is open/live. */
.dp-section .pulse-dot { animation: dp-signal-core 2.4s ease-in-out infinite; }
.dp-section .pulse-dot::after { border-color: var(--accent); animation-duration: 2.4s; }
.dp-section .pulse-dot::before { content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: pulseRing 2.4s ease-out infinite; animation-delay: 1.2s; }
@keyframes dp-signal-core {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 7px 1px var(--positive); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-section .pulse-dot, .dp-section .pulse-dot::before { animation: none; }
}
.ui-reduce-motion .dp-section .pulse-dot,
.ui-reduce-motion .dp-section .pulse-dot::before { animation: none; }
/* Sync Outlook "transmission received" burst — one-shot signal rings ping out of
   the button on a successful sync (rings injected by syncBurst(), self-cleaning). */
.dp-sync-burst-host { position: relative; }
.dp-sync-burst-ring { position: absolute; inset: -1px; border-radius: 999px; border: 2px solid var(--positive);
  pointer-events: none; opacity: 0; transform-origin: center; animation: dp-sync-burst 0.7s ease-out forwards; }
@keyframes dp-sync-burst { 0% { transform: scale(0.92); opacity: 0.85; } 100% { transform: scale(1.65); opacity: 0; } }
.brand-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.brand-sep { color: var(--text-tertiary); margin: 0 4px; }

.kpi-strip {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: nowrap;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.kpi-label {
  font-size: 12px;
  letter-spacing: 0.14em;
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.topbar-right {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.date-range {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-1);
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.ghost-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Smart "Refresh DealIQ" header control. Quiet by default (icon only); flips to
   an accent "Update available — Refresh" state when the served release token
   diverges from the one this page loaded with. Theme-token styled, unobtrusive. */
.dealiq-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dealiq-refresh-icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}
.dealiq-refresh-label { display: none; }
.dealiq-refresh-btn.update-available {
  color: var(--accent-blue);
  border-color: color-mix(in srgb, var(--accent-blue) 55%, transparent);
  background: var(--accent-blue-tint);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 22%, transparent),
              0 0 10px color-mix(in srgb, var(--accent-blue) 28%, transparent);
  animation: dealiq-refresh-pulse 2.4s ease-in-out infinite;
}
.dealiq-refresh-btn.update-available:hover {
  color: var(--text-primary);
  border-color: var(--accent-blue);
}
.dealiq-refresh-btn.update-available .dealiq-refresh-label { display: inline; }
.dealiq-refresh-btn.update-available .dealiq-refresh-icon { animation: dealiq-refresh-spin 3.2s linear infinite; }
@keyframes dealiq-refresh-pulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 22%, transparent), 0 0 6px color-mix(in srgb, var(--accent-blue) 18%, transparent); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 35%, transparent), 0 0 14px color-mix(in srgb, var(--accent-blue) 40%, transparent); }
}
@keyframes dealiq-refresh-spin { to { transform: rotate(360deg); } }
/* Honor the reduce-motion UI pref (set by ui-prefs.js on <html>). */
.ui-reduce-motion .dealiq-refresh-btn.update-available,
.ui-reduce-motion .dealiq-refresh-btn.update-available .dealiq-refresh-icon { animation: none; }

/* ===========================================================================
   App shell
   =========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 57px - 32px);
}

.sidebar {
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  background: var(--bg-0);
}

.search {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 7px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  margin-bottom: 14px;
}
.search::placeholder { color: var(--text-tertiary); }
.search:focus {
  outline: none;
  border-color: var(--accent-blue-edge);
  background: var(--bg-2);
}

.pills {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
}
.pill:hover { color: var(--text-secondary); border-color: var(--border-strong); }
.pill.active {
  background: var(--accent-blue-tint);
  border-color: var(--accent-blue-edge);
  color: var(--accent-blue);
}

.sidebar-label {
  padding: 0 4px 8px;
}

.deal-nav { list-style: none; padding: 0; margin: 0; }
.deal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
}
.deal-item:hover { background: var(--bg-1); color: var(--text-primary); }
.deal-item.active {
  background: var(--bg-1);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--accent-blue);
}
.deal-item .deal-name { font-size: 13px; }
.deal-item .deal-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-empty {
  padding: 14px 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: 4px;
}

/* ===========================================================================
   Main + tabs
   =========================================================================== */

.main { padding: 20px 28px 40px; min-width: 0; }

.tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* ===========================================================================
   Async chain status banner on Deal Detail. Shows OM Extract / TractIQ
   Enrich / Auto UW status as small colored chips. Hidden when chain is
   settled and no failures.
   =========================================================================== */
/* 2026-05-12 — now lives at the bottom of Overview (.ov-section-async),
   inline as a normal banner row. Compact font + padding so it reads as a
   debug strip, not a hero. */
.chain-status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 14px 0 0;
  border-radius: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  font-size: 12px;
}
.chain-status-banner.has-failure {
  border-color: color-mix(in srgb, var(--negative, #B45309) 40%, var(--border));
  background: color-mix(in srgb, var(--negative, #B45309) 6%, var(--bg-1));
}
.chain-status-banner-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-right: 4px;
}
.chain-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--info)) 30%, var(--border));
  background: color-mix(in srgb, var(--chip-color, var(--info)) 8%, var(--bg-0));
  color: var(--text-0);
  cursor: default;
}
.chain-status-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--chip-color, var(--info));
  flex: none;
}
.chain-status-chip.status-pending { --chip-color: var(--text-2); }
.chain-status-chip.status-running { --chip-color: var(--info); }
.chain-status-chip.status-running .chain-status-chip-dot {
  animation: chain-pulse 1.4s ease-in-out infinite;
}
.chain-status-chip.status-done    { --chip-color: var(--positive); }
.chain-status-chip.status-failed  { --chip-color: var(--negative, #DC2626); cursor: help; }
.chain-status-chip.status-skipped { --chip-color: var(--text-3, #94A3B8); opacity: 0.6; }
.chain-status-retry {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--info)) 50%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--info)) 18%, transparent);
  color: var(--text-0);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.chain-status-retry:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chip-color, var(--info)) 32%, transparent);
}
.chain-status-retry:disabled { opacity: 0.6; cursor: wait; }
.chain-status-banner-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
@keyframes chain-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ===========================================================================
   In-flight deal status strip (.tabs-status-strip) — sits in the tabs row,
   right-aligned, showing one chip per deal in LOI Out → Closed. Each chip
   is clickable and opens that deal's detail. Hidden when empty.
   =========================================================================== */
.tabs-status-strip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;          /* never scroll — fits-or-truncates */
  max-width: 62%;
  padding-bottom: 4px;       /* keep chips above the .tabs border-bottom */
}
.tabs-status-strip:empty { display: none; }

/* ===========================================================================
   Self-storage news ticker (.tabs-status-strip.news-ticker) — replaces the old
   "On the Clock" chips. A continuously-scrolling marquee of industry headlines
   from /api/storage-news. Fixed "Storage News" label + a clipped track that
   animates two duplicated runs end-to-end for a seamless loop. Hover pauses.
   =========================================================================== */
.tabs-status-strip.news-ticker {
  max-width: 64%;  /* more real estate for storage news; tabs stay priority (content-sized, left) — strip is right-aligned and clips gracefully if width is tight */
  min-width: 0;
  gap: 8px;
  overflow: hidden;
}
.news-ticker-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.news-track-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.news-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: news-scroll 60s linear infinite;
}
.news-track-wrap:hover .news-track { animation-play-state: paused; }
@keyframes news-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .news-track { animation: none; }
  .news-track-wrap { overflow-x: auto; }
}
.news-run {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-right: 0;
}
.news-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  text-decoration: none;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1;
}
a.news-item:hover .news-title { text-decoration: underline; }
.news-title {
  font-weight: 600;
  color: var(--text-1);
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-src {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}
.news-sep {
  color: var(--text-tertiary);
  opacity: .5;
  font-size: 12px;
}
.news-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--info);
}
.news-kind {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
}
.news-dot.news-trade,  .news-kind-trade  { background: var(--info); }
.news-dot.news-news,   .news-kind-news   { background: var(--positive); }
.news-dot.news-filing, .news-kind-filing { background: var(--warn); }
/* a11y: dark ink on light fills — white failed AA (trade 2.8:1, news 2.3:1). Matches filing. */
.news-kind-trade  { color: #2a1206; }
.news-kind-news   { color: #06160c; }
.news-kind-filing { color: #1a1206; }

.tabs-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 8px;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--info)) 30%, var(--border));
  background: color-mix(in srgb, var(--chip-color, var(--info)) 8%, var(--bg-1));
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;             /* bigger text, no extra box height → header stays put */
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: border-color 120ms ease, transform 120ms ease;
}
.tabs-status-chip:hover {
  border-color: var(--chip-color, var(--info));
  transform: translateY(-1px);
}
.tabs-status-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-color, var(--info));
  flex: none;
}
/* Urgency pulse — overdue + warn dots pulse softly so the eye snaps to them.
   Info / neutral dots stay static. */
@keyframes cd-dot-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--chip-color, var(--info)) 70%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--chip-color, var(--info)) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--chip-color, var(--info)) 0%,  transparent); }
}
.tabs-status-chip.cd-overdue .tabs-status-chip-dot,
.tabs-status-chip.cd-warn    .tabs-status-chip-dot {
  animation: cd-dot-pulse 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tabs-status-chip.cd-overdue .tabs-status-chip-dot,
  .tabs-status-chip.cd-warn    .tabs-status-chip-dot { animation: none; }
}
.tabs-status-chip-name {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-0);
}
.tabs-status-chip-age {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Stage colors mirror the existing stage-pill psychology */
.tabs-status-chip.stage-loi      { --chip-color: var(--purple); }
.tabs-status-chip.stage-uc       { --chip-color: var(--positive); }
.tabs-status-chip.stage-closing  { --chip-color: var(--info); }
.tabs-status-chip.stage-closed   { --chip-color: var(--stage-closed); }

/* Critical-dates ticker — urgency tints. cd-* classes are mutually exclusive */
.tabs-status-chip.cd-overdue { --chip-color: var(--negative); }
.tabs-status-chip.cd-warn    { --chip-color: var(--warn); }
.tabs-status-chip.cd-info    { --chip-color: var(--info); }
.tabs-status-chip.cd-neutral { --chip-color: var(--text-2); }
.cd-chip-kind {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 400;
  border-left: 1px solid color-mix(in srgb, var(--chip-color, var(--info)) 25%, var(--border));
  padding-left: 6px;
}

.tab {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  padding: 10px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: 0.01em;
  transition: color 120ms ease;
  flex: 0 0 auto;        /* tabs never shrink — they take priority over the news ticker */
  white-space: nowrap;   /* never wrap/clip a tab label */
}
.tab:hover { color: var(--text-secondary); }
.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-blue);
}

.view { display: none; }
.view.active { display: block; }

/* ===========================================================================
   Hero card
   =========================================================================== */

.hero-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 22px 26px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 22px;
}
.hero-head {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.hero-head em {
  font-style: italic;
  color: var(--accent-blue);
  font-weight: 400;
}
.hero-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0;
}
.hero-cta { display: flex; justify-content: flex-end; }

.primary-btn {
  background: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  color: var(--bg-0);
  padding: 8px 16px;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 120ms ease;
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.1); }
.primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===========================================================================
   Section label
   =========================================================================== */

.section-label {
  margin: 22px 0 10px;
  display: block;
}

/* ===========================================================================
   Tables
   =========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
thead th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: transparent;
  position: sticky;
  top: 0;
}
tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
  font-size: 13px;
}
tbody tr:hover td { background: var(--bg-1); }

th.num, td.num {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
td.mono { font-family: var(--font-mono); color: var(--text-primary); }

td.positive { color: var(--positive); }
td.negative { color: var(--negative); }
td.warning  { color: var(--warning); }

/* ===========================================================================
   Badges
   =========================================================================== */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-secondary);
}
.badge.accent   { color: var(--accent-blue);  border-color: var(--accent-blue-edge);  background: var(--accent-blue-tint); }
.badge.positive { color: var(--positive);     border-color: rgba(62,183,120,0.35);    background: var(--positive-tint); }
.badge.negative { color: var(--negative);     border-color: rgba(232,74,95,0.35);     background: var(--negative-tint); }
.badge.warning  { color: var(--warning);      border-color: rgba(232,163,92,0.35);    background: var(--warning-tint); }

/* ===========================================================================
   Forms
   =========================================================================== */

input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 9px;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
input::placeholder,
textarea::placeholder { color: var(--text-tertiary); }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-blue-edge);
  background: var(--bg-2);
}
textarea { width: 100%; min-height: 70px; resize: vertical; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ===========================================================================
   Empty state
   =========================================================================== */

.empty {
  padding: 32px;
  border: 1px dashed var(--border);
  color: var(--text-tertiary);
  text-align: center;
  background: var(--bg-1);
  border-radius: 6px;
  font-size: 12px;
}

/* When #deal-empty actually contains the rendered deal detail, strip the
   .empty placeholder styling so the inner cards (bg-1) sit on the page bg
   (bg-0 / #1E2330 in Midnight Navy) with proper contrast. Without this
   override, the deal detail container is bg-1 — same color as its child
   .ov-section cards — so everything blends into one flat slab. */
#deal-empty:has(.deal-detail-v2),
#deal-empty.has-content {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-align: left;
}

/* ===========================================================================
   Footer
   =========================================================================== */

.app-footer {
  padding: 10px 24px;
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: var(--font-sans);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-footer .status { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.app-footer .status.ok   { color: var(--positive); }
.app-footer .status.bad  { color: var(--negative); }

/* ────────────────────────────────────────────────────────────────
   Deal Detail (Tier 1 wiring, 2026-04-27)
   ──────────────────────────────────────────────────────────────── */
.deal-detail { padding: 8px 0; }
.deal-header { margin-bottom: 16px; }
.deal-title { margin: 0 0 6px 0; font-family: 'Fraunces', serif; font-size: 24px; }
.deal-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.deal-sub .muted { color: #888; }
.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.deal-card {
  background: #ffffff05;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  padding: 14px 16px;
}
.deal-card.deal-card-wide { grid-column: 1 / -1; }
.deal-card h3 {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
}
.deal-dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0;
  margin: 0;
  font-size: 12px;
  border-top: 1px solid var(--line-soft);
}
.deal-dl dt {
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 9px 0 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  display: flex;
  align-items: center;
}
.deal-dl dd {
  margin: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-0);
  font-size: 12px;
  display: flex;
  align-items: center;
}
.deal-dl dt:nth-of-type(odd), .deal-dl dt:nth-of-type(odd) + dd { background: color-mix(in srgb, var(--bg-2) 50%, var(--bg-1)); }
.deal-contacts, .deal-docs, .deal-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.deal-contacts li, .deal-docs li, .deal-activity li {
  padding: 6px 0;
  border-bottom: 1px dashed #ffffff10;
}
.deal-contacts li:last-child, .deal-docs li:last-child, .deal-activity li:last-child { border-bottom: none; }
.deal-activity li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* Confidence as colored-dot pills (Northspyre/IntApp pattern).
   Used inline on extracted-field values + audit table. */
.conf-high, .conf-medium, .conf-low, .conf-unknown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px 1px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  border: 1px solid var(--border);
  background: var(--bg-1);
}
.conf-high   { color: #5ee0a0; }
.conf-medium { color: #f5b942; }
.conf-low    { color: #ff8888; }
.conf-unknown { color: var(--text-tertiary); }
.conf-high::before, .conf-medium::before, .conf-low::before, .conf-unknown::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* When the pill wraps a numeric/string value (in Overview cards), tone it
   down to just-the-dot so the value reads cleanly. */
.conf-as-value { padding: 0; border: 0; background: transparent; gap: 4px; }
.conf-as-value::before { width: 6px; height: 6px; }

/* Status pill — same shape, used for stage / task statuses. */
.pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-primary);
}
.pill-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}
.pill-status.ok::before        { background: var(--positive); }
.pill-status.warn::before      { background: var(--warning); }
.pill-status.neg::before       { background: var(--negative); }
.pill-status.info::before      { background: var(--accent-blue); }
.pill-status.muted::before     { background: var(--text-tertiary); }

/* Extraction audit table */
.extract-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.extract-table th, .extract-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #ffffff08;
  text-align: left;
  vertical-align: top;
}
.extract-table th {
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
.extract-table td.mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

.muted { color: var(--text-tertiary); }

/* ────────────────────────────────────────────────────────────────
   Deal Detail Tier 1.5 — declutter (2026-04-27)
   KPI hero strip · sub-tabs · photos · 2-column rows
   ──────────────────────────────────────────────────────────────── */
.deal-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ffffff10;
}
.deal-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.dk {
  background: #ffffff05;
  border: 1px solid #ffffff10;
  border-radius: 6px;
  padding: 10px 12px;
}
.dk-l {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.dk-v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: #e8edf5;
}

/* Sub-tabs inside Deal Detail */
.subtabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 14px 0;
  border-bottom: 1px solid #ffffff10;
}
.subtab {
  background: none;
  border: none;
  padding: 8px 14px;
  color: #888;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.subtab:hover { color: #ccc; }
.subtab.active {
  color: #e8edf5;
  border-bottom-color: #c9a24b;
}
.subview { display: none; }
.subview.active { display: block; }

/* DD rows + cards (replaces busy 6-card grid) */
.dd-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dd-row-2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .dd-row-2 { grid-template-columns: 1fr; } }
.dd-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.dd-card h3 {
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dd-card h3 .muted { font-size: 12px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; }
/* Inside dd-card the dl loses its top border (the h3 already provides separation). */
.dd-card .deal-dl { border-top: 0; }
.dd-card .deal-dl dt { font-size: 12px; }
.dd-card .deal-dl dd { font-size: 12px; }

.dd-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dd-section-head h3 { margin: 0; flex: 1; }

/* Photos */
.dd-photos {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.dd-photos .dd-section-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.dd-photos h3 { padding: 0; background: transparent; border: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-1); }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.photo-thumb {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #ffffff10;
  /* Now a button — kill the default chrome */
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  width: 100%;
  font: inherit;
  color: inherit;
}
.photo-thumb:hover { border-color: var(--accent); }
.photo-thumb.is-primary { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Star icon shown on the primary photo + hover-only on others */
.photo-primary-star {
  position: absolute; top: 6px; left: 6px;
  font-size: 16px; line-height: 1;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
/* Hoverable set-default button overlay (top-left) */
.photo-set-default {
  position: absolute; top: 4px; left: 4px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  z-index: 2;
}
.photo-thumb:hover .photo-set-default { opacity: 1; }
.photo-set-default:hover { background: var(--gold); color: #1a1208; }
.photo-set-default.is-current { opacity: 1; color: var(--gold); background: rgba(0,0,0,0.5); }
.photo-thumb.is-primary .photo-primary-star { display: none; }  /* set-default star already shows when is_primary */

/* Delete × button — top-right of each thumb, hover-revealed, no confirm */
.photo-delete {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  z-index: 3;
}
.photo-thumb:hover .photo-delete { opacity: 1; }
.photo-delete:hover { background: var(--negative); color: #fff; }

/* ── Lightbox modal ─────────────────────────────────────────────────────── */
.photo-lightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.photo-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);
}
.photo-lightbox-shell {
  position: relative;
  z-index: 1;
  width: min(94vw, 1400px);
  height: min(92vh, 920px);
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "prev stage next"
    "actions actions actions";
  gap: 12px;
  padding: 16px;
}
.photo-lightbox-stage {
  grid-area: stage;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
}
.photo-lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 120px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  background: var(--bg-1);
}
.photo-lightbox-meta {
  margin-top: 10px;
  display: flex; gap: 14px; align-items: baseline;
  color: var(--text-2);
}
.photo-lightbox-caption { font-size: 13px; }
.photo-lightbox-counter { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-3); }

.photo-lightbox-nav {
  width: 56px; height: 56px;
  align-self: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--bg-1);
  color: var(--text-0);
  font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.photo-lightbox-nav:hover:not([disabled]) { background: var(--bg-2); border-color: var(--accent); }
.photo-lightbox-nav[disabled] { opacity: 0.3; cursor: not-allowed; }
.photo-lightbox-prev { grid-area: prev; }
.photo-lightbox-next { grid-area: next; }

.photo-lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 24px; line-height: 1;
  cursor: pointer;
}
.photo-lightbox-close:hover { background: rgba(255,255,255,0.18); }

.photo-lightbox-actions {
  grid-area: actions;
  display: flex; justify-content: center;
}
.photo-lightbox-setdefault {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  color: var(--text-0);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.photo-lightbox-setdefault:hover:not([disabled]) {
  background: var(--gold);
  color: #1a1208;
  border-color: var(--gold);
}
.photo-lightbox-setdefault.is-current,
.photo-lightbox-setdefault[disabled] {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  cursor: default;
}
.photo-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 24px;
  color: #888;
  font-style: italic;
  font-size: 13px;
  border: 2px dashed #ffffff10;
  border-radius: 6px;
}

/* Compact button */
.ghost-btn-sm {
  background: none;
  border: 1px solid #ffffff20;
  color: #ccc;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.ghost-btn-sm:hover { background: #ffffff08; color: #fff; }

/* Smaller text helpers */
.small { font-size: 12px; }

/* Square Footage block — visual grouping with hierarchy */
.sf-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ffffff15;
}
.sf-block-head {
  font-size: 12px;
  font-weight: 700;
  color: #c9a24b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.sf-dl dt.sf-sub, .sf-dl dd.sf-sub {
  font-size: 12px;
  color: #888;
  padding-left: 2px;
}
.sf-dl dd.sf-primary {
  color: #e8c876;
  font-weight: 600;
}

/* Stage transition action bar */
.deal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.primary-btn-sm {
  background: #c9a24b;
  color: #1a1d28;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.primary-btn-sm:hover { background: #d8b15c; }

/* Modal overlay (Pass reason) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.modal {
  background: #1a1d28;
  border: 1px solid #ffffff15;
  border-radius: 8px;
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;                /* never extend past viewport */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow-y: auto;                /* the modal itself scrolls top-to-bottom */
  display: block;
  padding: 18px 20px 0;            /* bottom padding handled by sticky footer */
}
/* Pin the Cancel/Create row to the bottom of the visible modal so the user
   can always reach it even when content scrolls. */
.modal-buttons {
  position: sticky;
  bottom: 0;
  margin: 14px -20px 0;            /* break out of modal padding */
  padding: 12px 20px;
  background: #1a1d28;
  border-top: 1px solid #ffffff20;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  z-index: 2;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #ffffff10;
}
.modal-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.modal-body {
  padding: 16px 18px;
}
.modal-foot {
  padding: 12px 18px;
  border-top: 1px solid #ffffff10;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.field-select, .field-textarea {
  width: 100%;
  background: #0e1118;
  border: 1px solid #ffffff15;
  color: #e8edf5;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  resize: vertical;
}
.field-select:focus, .field-textarea:focus {
  outline: none;
  border-color: #c9a24b;
}

/* ===========================================================================
   UW Lite dashboard (Demos-stage triage) — Northspyre-inspired
   =========================================================================== */
.uwlite-error { padding: 24px; color: var(--negative); background: var(--negative-tint); border-radius: 8px; }

.badge-mini {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  /* Locked brand cobalt + white = AA-safe (5.9:1) on EVERY theme. NOT var(--accent):
     accent is light in many themes (terracotta, light-blue, sage), where white would
     fail AA. The old gradient also failed on its light (#6aa3ff) end. (UIiq critical) */
  background: #1E50C8;
  color: #fff;
  vertical-align: middle;
}

/* Provenance chip — current-status fact resolved from the UW model vs the OM.
   Mirrors site-visit.css .sv-prov. Theme-token styled (light + dark safe). */
.prov-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.4px;
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
  font-variant-numeric: normal;
}
.prov-chip.prov-uw {
  color: #fff;
  background: color-mix(in srgb, var(--accent, #1E50C8) 80%, #000);
}
.prov-chip.prov-om {
  color: var(--text-secondary, #93A1B8);
  background: color-mix(in srgb, var(--text-secondary, #93A1B8) 22%, transparent);
}
.prov-chip.prov-deal {
  color: var(--text-tertiary, #6B7892);
  background: color-mix(in srgb, var(--text-tertiary, #6B7892) 20%, transparent);
}

.uwlite-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin: 0 0 16px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-1);
}
.uwlite-banner-icon { font-size: 20px; flex: none; }
.uwlite-banner-text { flex: 1; min-width: 0; }
.uwlite-banner-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.uwlite-rec-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.uwlite-rec-sub { font-size: 12px; margin-top: 2px; }
.uwlite-banner.rec-go      { background: linear-gradient(0deg, rgba(62,183,120,.10), rgba(62,183,120,.04)); border-color: rgba(62,183,120,.30); }
.uwlite-banner.rec-go .uwlite-banner-icon { color: var(--positive); }
.uwlite-banner.rec-go .uwlite-rec-title    { color: var(--positive); }
.uwlite-banner.rec-pass    { background: linear-gradient(0deg, rgba(232,74,95,.10), rgba(232,74,95,.04)); border-color: rgba(232,74,95,.30); }
.uwlite-banner.rec-pass .uwlite-banner-icon, .uwlite-banner.rec-pass .uwlite-rec-title { color: var(--negative); }
.uwlite-banner.rec-review  { background: linear-gradient(0deg, rgba(232,163,92,.10), rgba(232,163,92,.04)); border-color: rgba(232,163,92,.30); }
.uwlite-banner.rec-review .uwlite-banner-icon, .uwlite-banner.rec-review .uwlite-rec-title { color: var(--warning); }
.uwlite-banner.rec-pending { background: var(--bg-1); border-style: dashed; }
.uwlite-banner.rec-pending .uwlite-banner-icon, .uwlite-banner.rec-pending .uwlite-rec-title { color: var(--text-secondary); }

.uwlite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .uwlite-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .uwlite-grid { grid-template-columns: 1fr; } }

.uwlite-tile {
  position: relative;
  padding: 14px 16px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  overflow: hidden;
}
.uwlite-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--text-tertiary);
}
.uwlite-tile.uwlite-green::before   { background: var(--positive); }
.uwlite-tile.uwlite-yellow::before  { background: var(--warning); }
.uwlite-tile.uwlite-red::before     { background: var(--negative); }
.uwlite-tile.uwlite-pending::before { background: var(--text-tertiary); opacity: .4; }

.uwlite-tile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.uwlite-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex: none;
}
.uwlite-tile.uwlite-green   .uwlite-dot { background: var(--positive); box-shadow: 0 0 0 3px rgba(62,183,120,.18); }
.uwlite-tile.uwlite-yellow  .uwlite-dot { background: var(--warning);  box-shadow: 0 0 0 3px rgba(232,163,92,.18); }
.uwlite-tile.uwlite-red     .uwlite-dot { background: var(--negative); box-shadow: 0 0 0 3px rgba(232,74,95,.18); }
.uwlite-tile.uwlite-pending .uwlite-dot { background: var(--text-tertiary); opacity: .5; }

.uwlite-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-serif);
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.uwlite-tile.uwlite-pending .uwlite-value { color: var(--text-tertiary); font-weight: 400; }

.uwlite-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.uwlite-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  margin-top: 8px;
}
.uwlite-go { background: var(--positive) !important; border-color: var(--positive) !important; color: #06160c !important; font-weight: 700; }
.uwlite-go:hover { filter: brightness(1.08); }
.uwlite-pass { color: var(--negative) !important; border-color: rgba(232,74,95,.4) !important; }

/* ===========================================================================
   Deal Detail v2 — numbered stepper + left rail with KPI bricks (Northspyre)
   =========================================================================== */
.deal-detail-v2 { display: flex; flex-direction: column; gap: 18px; }

/* ── Numbered top stepper ── */
.stage-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.stage-stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.stage-stepper .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
}
.stage-stepper .step.step-done {
  color: var(--positive);
}
.stage-stepper .step.step-done .step-num {
  background: var(--positive);
  color: #06160c;
  border-color: var(--positive);
}
.stage-stepper .step.step-active {
  color: var(--accent-blue);
  background: var(--accent-blue-tint);
  border: 1px solid var(--accent-blue-edge);
  padding: 5px 11px;
}
.stage-stepper .step.step-active .step-num {
  background: var(--accent-blue);
  color: #050d1c;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(74,140,247,.18);
}
.stage-stepper .step.step-upcoming {
  color: var(--text-tertiary);
  opacity: .55;
}
.stage-stepper .step-sep {
  flex: 1 1 18px;
  min-width: 18px;
  height: 1px;
  background: var(--border-strong);
  opacity: .55;
}
.stage-stepper.is-passed .step-active,
.stage-stepper.is-dead .step-active {
  color: var(--negative);
  background: rgba(232,74,95,.10);
  border-color: rgba(232,74,95,.30);
}
.stage-stepper.is-passed .step-active .step-num,
.stage-stepper.is-dead .step-active .step-num {
  background: var(--negative);
  color: #160508;
  border-color: var(--negative);
  box-shadow: 0 0 0 3px rgba(232,74,95,.18);
}
.step-terminal {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(232,74,95,.12);
  border: 1px solid rgba(232,74,95,.35);
  color: var(--negative);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Two-column shell: left rail + main ── */
.dd-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-height: calc(100vh - 220px);
}
@media (max-width: 1100px) {
  .dd-shell { grid-template-columns: 1fr; }
}

/* ── Left rail ── */
.dd-rail {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;                         /* consistent breathing room between rail sections */
  padding: 18px 16px 16px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  min-height: 600px;
}
.dd-rail-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.dd-rail-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
}
.dd-rail-meta {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.dd-rail-flag { margin-top: 8px; }

/* Subtabs become a vertical list inside the rail */
.dd-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  margin-bottom: 0;
}
.dd-rail-nav .subtab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  border-bottom: none;
  margin-bottom: 0;
}
.dd-rail-nav .subtab:hover { background: var(--bg-2); color: var(--text-primary); }
.dd-rail-nav .subtab.active {
  background: var(--accent-blue-tint);
  color: var(--accent-blue);
  border-bottom: none;
  box-shadow: inset 2px 0 0 var(--accent-blue);
}

.dd-rail-spacer { flex: 1; min-height: 16px; }

/* KPI bricks anchored at the bottom of the rail */
.kpi-bricks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
  margin-top: 12px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  margin-bottom: 12px;
}
.kbrick {
  padding: 11px 12px 12px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kbrick.accent {
  border-color: color-mix(in srgb, var(--accent-blue) 40%, transparent);
  background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-1));
}
.kbrick-l {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  line-height: 1;
}
.kbrick-v {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kbrick-v.empty { color: var(--text-tertiary); font-weight: 400; }

.dd-rail-cta { display: flex; flex-direction: column; gap: 6px; }
/* End-user stage picker — set any stage (forward or back). */
.dd-stage-pick { display: flex; flex-direction: column; gap: 3px; }
.dd-stage-pick-l {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.dd-stage-select {
  width: 100%;
  padding: 7px 9px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-0);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.dd-stage-select:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.dd-stage-select:focus { outline: none; border-color: var(--accent); }
.dd-cta-primary { width: 100%; }
.dd-cta-row { display: flex; gap: 6px; }
.dd-cta-row .ghost-btn-sm { flex: 1; }

/* Main pane */
.dd-main {
  min-width: 0;
  /* 19px = 1px (rail outer border) + 18px (rail padding-top). The rail has
     a 1px border so its content starts at +19px from the grid cell top; the
     main pane has no border, so we pad to match. 2026-05-12 perfection pass. */
  padding-top: 19px;
}
.dd-main .subview { display: none; }
.dd-main .subview.active { display: block; }

/* ===========================================================================
   Pipeline — Cards/Map/Table 3-way switch (Northspyre Reports + IntApp Cards)
   =========================================================================== */
.pipeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

/* Compact lifecycle in deal-detail rail — single horizontal row of dots
   connected by a thin line, with the active stage label shown to the right.
   Replaces the original vertical 5-row stack to free up sidebar real-estate.
   2026-04-28 redesign per Matt feedback: "vertical so it takes up less UI". */
.lifecycle-v {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin-bottom: 0;                   /* dd-rail flex gap handles spacing */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lifecycle-v-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0;
  line-height: 1;
}
.lifecycle-v-h::after {
  /* The active stage label tagged onto the header row — populated via CSS
     attr() trick below. Default empty if no active step found. */
  content: attr(data-stage);
  color: var(--accent-blue);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lifecycle-v .lcv-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px;
  position: relative;
}
.lifecycle-v .lcv-row::before {
  /* horizontal connector line spanning behind the dots */
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  height: 1.5px; background: var(--border-strong);
  z-index: 0;
}
.lcv-step {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.lcv-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-1); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.lcv-label {
  /* Hide the inline labels — use header attr() instead */
  display: none;
}
.lcv-done .lcv-icon {
  background: var(--bg-2); border-color: var(--text-tertiary); color: var(--text-secondary);
}
.lcv-active .lcv-icon {
  background: var(--accent-blue); border-color: var(--accent-blue); color: var(--bg-0);
  box-shadow: 0 0 0 3px rgba(74,140,247,0.20);
}
.lcv-active.stage-demos .lcv-icon          { background: var(--warning); border-color: var(--warning); box-shadow: 0 0 0 3px rgba(232,163,92,0.20); }
.lcv-active.stage-underwriting .lcv-icon   { background: var(--stage-uw); border-color: var(--stage-uw); box-shadow: 0 0 0 3px rgba(107,125,163,0.20); }
.lcv-active.stage-loi-out .lcv-icon        { background: #A78BFA; border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167,139,250,0.20); }
.lcv-active.stage-under-contract .lcv-icon { background: var(--positive); border-color: var(--positive); box-shadow: 0 0 0 3px rgba(62,183,120,0.20); }
.lcv-active.stage-closed .lcv-icon         { background: var(--stage-closed); border-color: var(--stage-closed); box-shadow: 0 0 0 3px rgba(245,200,66,0.20); }
.lcv-terminal {
  font-size: 12px; font-weight: 700; color: var(--negative);
  text-align: center;
}
.lifecycle-v.is-dead .lcv-step { opacity: 0.4; }

/* Hide the horizontal stepper on Deal Detail when the vertical one renders.
   Vertical is the canonical lifecycle now — horizontal stepper code retained
   in case we need to flip back. Comment out this rule to restore. */
.deal-detail-v2 > .stage-stepper { display: none; }

/* Pipeline multi-select column + selection toolbar (P3 polish) */
.pl-check-th, .pl-check-td {
  width: 28px;
  padding-left: 10px !important;
  padding-right: 0 !important;
  vertical-align: middle;
}
.pl-row-check, #pl-check-all {
  cursor: pointer;
  accent-color: var(--accent-blue);
  width: 14px; height: 14px;
  vertical-align: middle;
  margin: 0;
}
.pipeline-table tr.is-selected {
  background: var(--accent-blue-tint) !important;
}
.pipeline-table tr.is-selected td {
  background: transparent;
}

.pl-sel-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, var(--accent-blue-tint), rgba(74,140,247,0.04));
  border: 1px solid var(--accent-blue-edge);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.pl-sel-toolbar.busy { opacity: 0.55; pointer-events: none; }
.pl-sel-toolbar .pl-sel-count {
  font-weight: 700;
  color: var(--accent-blue);
  font-family: var(--font-mono);
  margin-right: 6px;
}
.pl-sel-toolbar .pl-sel-spacer { flex: 1; }
.pl-sel-toolbar .pl-sel-clear {
  color: var(--text-tertiary);
}

.pl-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-2);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 999;
  max-width: 80vw;
}
.pl-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Reports surface — Northspyre v2 promotion.
   Two-column Report Builder: left = deal picker, right = templates + Generate. */
.reports-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.reports-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.rpt-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}
.rpt-deals-card,
.rpt-templates-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.rpt-card-h {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.rpt-deals-card .search {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text-primary);
  font-family: inherit; font-size: 13px;
  margin-bottom: 10px;
}
.rpt-deals-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
}
.rpt-deal-row {
  display: grid;
  grid-template-columns: 22px 90px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.rpt-deal-row:last-child { border-bottom: none; }
.rpt-deal-row:hover { background: rgba(255,255,255,0.02); }
.rpt-deal-row.is-checked { background: var(--accent-blue-tint); }
.rpt-deal-row input { accent-color: var(--accent-blue); cursor: pointer; }
.rpt-deal-name { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-deal-loc { font-size: 12px; }
.rpt-deal-stage { font-size: 12px !important; padding: 1px 7px !important; }

.rpt-templates { display: flex; flex-direction: column; gap: 8px; }
.rpt-tmpl {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  position: relative;
  transition: border-color 0.1s, background 0.1s;
}
.rpt-tmpl:hover:not([disabled]) { background: rgba(74, 140, 247, 0.04); border-color: var(--accent-blue-edge); }
.rpt-tmpl.active {
  border-color: var(--accent-blue);
  background: var(--accent-blue-tint);
}
.rpt-tmpl-disabled,
.rpt-tmpl[disabled] { opacity: 0.5; cursor: not-allowed; }
.rpt-tmpl-pages {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.rpt-tmpl-name { font-size: 14px; font-weight: 600; }
.rpt-tmpl-ds { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.rpt-tmpl-ds em { color: var(--text-tertiary); font-style: italic; }

.rpt-generate-btn {
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  font-size: 14px;
  justify-content: center;
}
.rpt-generate-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.rpt-hint {
  text-align: center;
  margin-top: 8px;
  font-size: 12px !important;
}

/* DD Milestone table — Northspyre v2 promotion.
   Replaces the 5-tile critical-dates grid with a structured table
   (computed status badges, days-delta vs today). */
.dd-milestone-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dd-milestone-tbl th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.dd-milestone-tbl th.num { text-align: right; }
.dd-milestone-tbl td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.dd-milestone-tbl tr:last-child td { border-bottom: none; }
.dd-milestone-tbl .num { text-align: right; font-family: var(--font-mono); }
.dd-milestone-tbl .dd-ms-name { font-weight: 500; }
.dd-milestone-tbl .dd-ms-delta { color: var(--text-tertiary); font-size: 12px; }
.dd-milestone-tbl tr.dd-ms-pending td { color: var(--text-tertiary); }
.dd-milestone-tbl tr:hover td { background: rgba(255,255,255,0.02); }

.dd-ms-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-2);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.dd-ms-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.dd-ms-pill-complete {
  color: var(--positive);
  background: var(--positive-tint);
  border-color: rgba(62, 183, 120, 0.30);
}
.dd-ms-pill-open {
  color: var(--warning);
  background: var(--warning-tint);
  border-color: rgba(232, 163, 92, 0.30);
}
.dd-ms-pill-overdue {
  color: var(--negative);
  background: var(--negative-tint);
  border-color: rgba(232, 74, 95, 0.30);
}
.dd-ms-pill-pending {
  color: var(--text-tertiary);
  background: transparent;
}

/* Filter-aware Pipeline KPI strip — Northspyre v2.
   Sits between toolbar and table. Tile-style, recomputes from filtered set. */
.pl-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.pl-kpi {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.pl-kpi.pl-kpi-uc {
  background: color-mix(in srgb, var(--positive, #1f9d55) 10%, var(--bg-1));
  border-color: color-mix(in srgb, var(--positive, #1f9d55) 45%, var(--border));
}
.pl-kpi.pl-kpi-uc .lbl { color: color-mix(in srgb, var(--positive, #1f9d55) 75%, var(--text-tertiary)); }
.pl-kpi.pl-kpi-uc .val { color: var(--positive, #1f9d55); }
.pl-kpi .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pl-kpi .val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.pl-kpi .val .of {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 400;
  margin-left: 3px;
}
.pl-kpi .sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.pl-kpi .stages {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.pl-kpi .stages .sp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--bg-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.pl-kpi .stages .sp .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pl-kpi .stages .sp.demos  { color: var(--warning); }
.pl-kpi .stages .sp.uw     { color: var(--stage-uw); }
.pl-kpi .stages .sp.loi    { color: #A78BFA; }
.pl-kpi .stages .sp.uc     { color: var(--positive); }
.pl-kpi .stages .sp.closed { color: var(--stage-closed); }
.pl-kpi .stages .sp.dead   { color: var(--negative); }
.pl-kpi.is-filtered { border-color: var(--accent-blue-edge); }
.pl-kpi.is-filtered .lbl::after {
  content: 'FILTERED';
  margin-left: 6px;
  font-size: 12px;
  padding: 1px 5px;
  background: var(--accent-blue-tint);
  color: var(--accent-blue);
  border-radius: 999px;
  letter-spacing: 0.06em;
}
@media (max-width: 1100px) {
  .pl-kpis { grid-template-columns: repeat(3, 1fr); }
  .pl-kpi:nth-child(n+4) { display: none; }
}
.pipeline-view-switch {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
}
.pvs-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 5px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
  transition: all 120ms ease;
}
.pvs-btn:hover { color: var(--text-primary); }
.pvs-btn.active {
  background: var(--accent-blue-tint);
  color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue-edge);
}

.pipeline-view { display: none; }
.pipeline-view.active { display: block; }

/* Sortable table header */
.pipeline-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.pipeline-table th[data-sort]:hover { color: var(--text-secondary); }
.pipeline-table th[data-sort-active="asc"]::after,
.pipeline-table th[data-sort-active="desc"]::after {
  content: "▲";
  font-size: 12px;
  margin-left: 4px;
  color: var(--accent-blue);
}
.pipeline-table th[data-sort-active="desc"]::after { content: "▼"; }

/* Cards view */
.deal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.deal-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.deal-card:hover {
  border-color: var(--accent-blue-edge);
  transform: translateY(-1px);
  text-decoration: none;
}
.deal-card-photo {
  height: 140px;
  background: linear-gradient(135deg, #19243d, #0e1729);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.deal-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.deal-card-photo-fallback {
  font-family: var(--font-serif);
  font-size: 64px;
  color: rgba(232,236,244,0.10);
  font-weight: 700;
  line-height: 1;
}
.deal-card-body { padding: 12px 14px 14px; }
.deal-card-stage { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.deal-card-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.deal-card-meta { margin-bottom: 10px; }

/* Option C — phase chip + next-deadline subtitle on deal cards */
.phase-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: rgba(232,236,244,0.06);
  color: var(--text-secondary);
  border-color: rgba(232,236,244,0.10);
}
.phase-chip.phase-sourcing { background: rgba(247,184,1,0.10);   color: #f7b801; border-color: rgba(247,184,1,0.25); }
.phase-chip.phase-loi      { background: rgba(160,116,242,0.12); color: #c5acff; border-color: rgba(160,116,242,0.30); }
.phase-chip.phase-uc       { background: rgba(64,196,99,0.10);   color: #40c463; border-color: rgba(64,196,99,0.30); }
.phase-chip.phase-dd       { background: rgba(95,158,255,0.10);  color: #5f9eff; border-color: rgba(95,158,255,0.30); }
.phase-chip.phase-ic       { background: rgba(208,160,80,0.10);  color: #d0a050; border-color: rgba(208,160,80,0.30); }
.phase-chip.phase-closing  { background: rgba(212,175,55,0.10);  color: #d4af37; border-color: rgba(212,175,55,0.35); }
.phase-chip.phase-postclose{ background: rgba(120,134,153,0.12); color: #aab2c0; border-color: rgba(120,134,153,0.30); }
.badge.subtle { opacity: 0.65; }

/* Workflow type chip — acquisition vs development.
   Anchor for cross-IQ routing: development deals drive BuildIQ at close,
   acquisition deals stay DealIQ → AssetIQ. Visible on every card + header. */
.workflow-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  margin-right: 4px;
  vertical-align: 2px;
}
.workflow-chip.workflow-acquisition {
  background: rgba(74,140,247,0.10);
  color: #8eb6ff;
  border-color: rgba(74,140,247,0.36);
}
.workflow-chip.workflow-development {
  background: rgba(232,116,63,0.12);
  color: #f3a173;
  border-color: rgba(232,116,63,0.40);
}

/* BuildIQ phase chip (small, on top of card) — when a deal has a paired
   BuildIQ project. Color tracks construction lifecycle. */
.build-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid;
  background: rgba(232,116,63,0.12);
  color: #f3a173;
  border-color: rgba(232,116,63,0.36);
  cursor: help;
}
.build-chip.build-phase-feasibility   { background: rgba(232,236,244,0.05); color: var(--text-tertiary); border-color: rgba(232,236,244,0.18); }
.build-chip.build-phase-design        { background: rgba(74,140,247,0.10);  color: #8eb6ff; border-color: rgba(74,140,247,0.34); }
.build-chip.build-phase-entitlements  { background: rgba(168,123,196,0.10); color: #c5acff; border-color: rgba(168,123,196,0.34); }
.build-chip.build-phase-construction  { background: rgba(232,116,63,0.12);  color: #f3a173; border-color: rgba(232,116,63,0.40); }
.build-chip.build-phase-closeout      { background: rgba(212,160,23,0.10);  color: #f0c75a; border-color: rgba(212,160,23,0.36); }
.build-chip.build-phase-stabilized    { background: rgba(62,183,120,0.10);  color: #6fdca0; border-color: rgba(62,183,120,0.36); }
.build-chip.build-phase-handedoff     { background: rgba(120,134,153,0.12); color: #aab2c0; border-color: rgba(120,134,153,0.30); }

/* BuildIQ progress strip on the deal card (under stats) */
.build-progress-strip {
  margin-top: 10px;
  padding: 9px 10px;
  background: linear-gradient(180deg, rgba(232,116,63,0.10) 0%, rgba(232,116,63,0.04) 100%);
  border: 1px solid rgba(232,116,63,0.32);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.build-progress-strip:hover {
  border-color: rgba(232,116,63,0.55);
  transform: translateY(-1px);
}
.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.bp-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f3a173;
  font-weight: 600;
}
.bp-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.bp-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.bp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c2571a 0%, #f3a173 100%);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}
.bp-milestone {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
}
.bp-milestone strong { color: var(--text-primary); font-weight: 500; }
.bp-milestone.muted { color: var(--text-tertiary); }
.ov-deal-name .workflow-chip {
  font-size: 12px;
  letter-spacing: 0.10em;
  vertical-align: middle;
  margin-right: 8px;
}

.deal-card-deadline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: -2px 0 10px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid transparent;
}
.deal-card-deadline .dcd-kind {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.deal-card-deadline .dcd-rel {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: 0.85;
}
.deal-card-deadline.urg-neutral  { background: rgba(232,236,244,0.04); border-color: rgba(232,236,244,0.08); color: var(--text-secondary); }
.deal-card-deadline.urg-info     { background: rgba(95,158,255,0.08);  border-color: rgba(95,158,255,0.22);  color: #b9d3ff; }
.deal-card-deadline.urg-warn     { background: rgba(247,184,1,0.10);   border-color: rgba(247,184,1,0.30);   color: #ffd76b; }
.deal-card-deadline.urg-negative { background: rgba(255,90,90,0.10);   border-color: rgba(255,90,90,0.32);   color: #ff9a9a; }

/* ── Critical Dates panel (Overview, /api/critical-dates) ─────────────── */
.cd-section {
  border-top: 1px solid var(--border);
}
.cd-section:first-of-type { border-top: 0; }
.cd-section > summary {
  cursor: pointer;
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.cd-section > summary::-webkit-details-marker { display: none; }
.cd-section > summary::before {
  content: '▸';
  display: inline-block;
  font-size: 12px;
  opacity: 0.5;
  transition: transform 0.15s;
}
.cd-section[open] > summary::before { transform: rotate(90deg); }
.cd-section-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.cd-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cd-tbl th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.cd-tbl td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(232,236,244,0.04);
  vertical-align: middle;
}
.cd-tbl .cd-name { font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.cd-tbl .cd-rel  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.cd-tbl .cd-rel.urg-info     { color: #b9d3ff; }
.cd-tbl .cd-rel.urg-warn     { color: #ffd76b; }
.cd-tbl .cd-rel.urg-negative { color: #ff9a9a; }

/* ── SolarIQ mandate alert block ───────────────────────────────────── */
.solar-mandate-block {
  border: 1px solid rgba(232,236,244,0.10);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(232,236,244,0.02);
}
.solar-mandate-block.has-high {
  border-color: rgba(255,167,38,0.45);
  background: rgba(255,167,38,0.06);
}
.solar-mandate-block.has-critical {
  border-color: rgba(255,90,90,0.55);
  background: rgba(255,90,90,0.08);
  animation: smbPulse 2.4s ease-in-out infinite;
}
@keyframes smbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(255,90,90,0.00); }
}
.solar-mandate-block .smb-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.solar-mandate-block .smb-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.solar-mandate-block .smb-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  background: rgba(255,90,90,0.18);
  color: #ff9a9a;
  border: 1px solid rgba(255,90,90,0.35);
}
.solar-mandate-block:not(.has-critical):not(.has-high) .smb-count {
  background: rgba(232,236,244,0.06);
  color: var(--text-secondary);
  border-color: rgba(232,236,244,0.14);
}
.solar-mandate-block .smb-count-zero {
  background: rgba(10,124,47,0.14);
  color: #7ddc9a;
  border-color: rgba(10,124,47,0.32);
}
.solar-mandate-block .smb-pips {
  display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto;
}
.solar-mandate-block .smb-pip {
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.solar-mandate-block .smb-pip-critical { color: #ff5a5a;  background: rgba(255,90,90,0.12); }
.solar-mandate-block .smb-pip-high     { color: #ffa726;  background: rgba(255,167,38,0.12); }
.solar-mandate-block .smb-pip-medium   { color: #ffd76b;  background: rgba(247,184,1,0.10); }
.solar-mandate-block .smb-pip-info     { color: #b9d3ff;  background: rgba(95,158,255,0.10); }

.solar-mandate-block .smb-list {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solar-mandate-block .smb-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  background: rgba(232,236,244,0.03);
  border: 1px solid rgba(232,236,244,0.06);
}
.solar-mandate-block .smb-item-critical {
  background: rgba(255,90,90,0.08);
  border-color: rgba(255,90,90,0.28);
}
.solar-mandate-block .smb-item-high {
  background: rgba(255,167,38,0.06);
  border-color: rgba(255,167,38,0.22);
}
.solar-mandate-block .smb-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  box-shadow: 0 0 6px currentColor;
}
.solar-mandate-block .smb-body {
  flex: 1 1 auto;
  min-width: 0;
}
.solar-mandate-block .smb-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.solar-mandate-block .smb-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}
.solar-mandate-block .smb-juris {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(232,236,244,0.05);
}
.solar-mandate-block .smb-link {
  margin-left: auto;
  text-decoration: none;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid rgba(232,236,244,0.12);
}
.solar-mandate-block .smb-link:hover {
  color: var(--text-primary);
  border-color: rgba(232,236,244,0.32);
}
.solar-mandate-block .smb-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.solar-mandate-block .smb-actby-na { opacity: 0.55; font-style: italic; }
.solar-mandate-block .smb-summary { margin-top: 4px; }

/* ── SolarIQ host-lease friendliness scorecard ─────────────────────── */
.solar-host-block {
  border: 1px solid rgba(232,236,244,0.10);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(232,236,244,0.02);
}
.solar-host-block .shb-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.solar-host-block .shb-title {
  font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  color: var(--text-primary);
}
.solar-host-block .shb-locality {
  font-size: 12px; padding: 1px 6px; border-radius: 3px;
  background: rgba(232,236,244,0.08); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em; margin-left: 4px;
}
.solar-host-block .shb-overall {
  font-size: 28px; font-weight: 700; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; margin-left: auto;
  line-height: 1;
}
.solar-host-block .shb-overall-of {
  font-size: 13px; opacity: 0.55; font-weight: 500;
}
.solar-host-block .shb-grade-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; border-radius: 8px;
  font-size: 22px; font-weight: 700;
  border: 2px solid;
  font-family: var(--font-mono);
}
.solar-host-block .shb-outlook {
  margin-top: 10px; font-size: 12px; line-height: 1.5;
  color: var(--text-secondary);
  border-left: 2px solid rgba(232,236,244,0.18);
  padding: 2px 0 2px 10px;
  font-style: italic;
}
.solar-host-block .shb-banner {
  margin-top: 10px; padding: 8px 10px; border-radius: 5px;
  background: rgba(255,90,90,0.10);
  border: 1px solid rgba(255,90,90,0.45);
  color: #ff9a9a; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
}
.solar-host-block .shb-details {
  margin-top: 10px;
}
.solar-host-block .shb-details > summary {
  cursor: pointer; font-size: 12px; color: var(--text-secondary);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 0;
  user-select: none;
}
.solar-host-block .shb-details > summary:hover {
  color: var(--text-primary);
}
.solar-host-block .shb-levers {
  margin-top: 8px; display: flex; flex-direction: column; gap: 10px;
}
.solar-host-block .shb-lever-row {
  padding: 6px 0;
}
.solar-host-block .shb-lever-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
}
.solar-host-block .shb-lever-label {
  font-weight: 600; color: var(--text-primary); font-size: 12px;
}
.solar-host-block .shb-lever-weight {
  font-family: var(--font-mono);
}
.solar-host-block .shb-lever-score {
  margin-left: auto; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 12px; color: var(--text-primary);
  min-width: 28px; text-align: right;
}
.solar-host-block .shb-src-tag {
  font-size: 12px; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.solar-host-block .shb-src-state {
  background: rgba(232,236,244,0.06); color: var(--text-tertiary);
  border: 1px solid rgba(232,236,244,0.12);
}
.solar-host-block .shb-src-locality {
  background: rgba(95,158,255,0.14); color: #b9d3ff;
  border: 1px solid rgba(95,158,255,0.40);
}
.solar-host-block .shb-bar {
  margin-top: 4px; height: 5px; border-radius: 3px;
  background: rgba(232,236,244,0.06); overflow: hidden;
}
.solar-host-block .shb-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.4s ease-out;
}
.solar-host-block .shb-lever-note {
  margin-top: 4px; font-size: 12px; line-height: 1.45;
}
.solar-host-block .shb-src-link {
  text-decoration: none; padding: 0 4px; border-radius: 2px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary);
  border: 1px solid rgba(232,236,244,0.15);
  margin-left: 4px;
}
.solar-host-block .shb-src-link:hover {
  color: var(--text-primary);
  border-color: rgba(232,236,244,0.32);
}
.solar-host-block .shb-footer {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(232,236,244,0.06);
  font-family: var(--font-mono);
}
.cd-tbl input[type=date],
.cd-tbl input[type=text],
.cd-tbl select {
  background: rgba(232,236,244,0.04);
  border: 1px solid rgba(232,236,244,0.08);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.cd-tbl input[type=date]:focus,
.cd-tbl input[type=text]:focus,
.cd-tbl select:focus {
  outline: 1px solid var(--accent);
}
.cd-tbl .cd-row-met { opacity: 0.65; }

/* Critical Dates — completion checkbox + dropdown live in one cell. */
.cd-status-cell { display: flex; align-items: center; gap: 8px; }
.cd-check { position: relative; display: inline-flex; cursor: pointer; }
.cd-check input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--text-3);
  background: var(--bg-2);
  cursor: pointer;
  margin: 0;
  transition: background 100ms, border-color 100ms;
}
.cd-check input[type="checkbox"]:hover {
  border-color: var(--accent);
}
.cd-check input[type="checkbox"]:checked {
  background: var(--positive, #34d399);
  border-color: var(--positive, #34d399);
}
.cd-check-tick {
  pointer-events: none;
  position: absolute;
  left: 4px; top: 1px;
  width: 10px; height: 14px;
  border-right: 2px solid #0a1a2e;
  border-bottom: 2px solid #0a1a2e;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}
.cd-check input[type="checkbox"]:checked + .cd-check-tick {
  transform: rotate(45deg) scale(1);
}
.cd-tbl .cd-row-na, .cd-tbl .cd-row-cancelled { opacity: 0.45; }

.cd-src {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: var(--font-mono);
  border-radius: 3px;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  vertical-align: 1px;
}
.cd-src-dealpath { background: rgba(95,158,255,0.12);  color: #b9d3ff; border-color: rgba(95,158,255,0.30); }
.cd-src-derived  { background: rgba(232,236,244,0.06); color: var(--text-tertiary); border-color: rgba(232,236,244,0.10); }
.cd-src-tractiq  { background: rgba(247,184,1,0.10);   color: #f7b801; border-color: rgba(247,184,1,0.25); }

.cd-form-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.cd-form-row > span {
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cd-form-row > select,
.cd-form-row > input {
  background: rgba(232,236,244,0.04);
  border: 1px solid rgba(232,236,244,0.10);
  color: var(--text-primary);
  border-radius: 5px;
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  width: 100%;
}

/* ── IQ-jump row (cross-module deep links on shared deal_id) ─────────── */
.iq-jump-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.iq-jump-label { letter-spacing: 0.05em; }
.iq-jump {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid rgba(232,236,244,0.10);
  background: rgba(232,236,244,0.04);
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.iq-jump:hover { background: rgba(232,236,244,0.08); color: var(--text-primary); border-color: rgba(232,236,244,0.18); }
.iq-jump.iq-jump-legaliq:hover { color: #b9d3ff; border-color: rgba(95,158,255,0.40); background: rgba(95,158,255,0.08); }
.iq-jump.iq-jump-buildiq:hover { color: #f3a173; border-color: rgba(232,163,92,0.40); background: rgba(232,163,92,0.08); }
.iq-jump.iq-jump-assetiq:hover { color: #ffd76b; border-color: rgba(247,184,1,0.40);  background: rgba(247,184,1,0.08); }
.iq-jump.iq-jump-promote {
  cursor: pointer;
  background: rgba(212,160,23,0.10);
  color: #f0c75a;
  border-color: rgba(212,160,23,0.36);
  font-family: var(--font-mono);
}
.iq-jump.iq-jump-promote:hover { background: rgba(212,160,23,0.18); }
.iq-jump.iq-jump-promote:disabled { opacity: 0.5; cursor: not-allowed; }
.iq-jump-deal-id {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.deal-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
}
.deal-card-stats > div { display: flex; flex-direction: column; gap: 1px; }
.deal-card-stats dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.deal-card-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Map stub */
.map-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-secondary);
}
.map-stub-icon {
  font-size: 48px;
  color: var(--text-tertiary);
  opacity: .4;
}

/* ===========================================================================
   Pipeline Map (Leaflet) — dark tile theme + custom popover
   =========================================================================== */
.pipeline-map {
  height: calc(100vh - 200px);
  min-height: 720px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  overflow: hidden;
}
.leaflet-popup-content-wrapper {
  background: var(--bg-1);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--font-sans);
}
.leaflet-popup-tip { background: var(--bg-1); border-color: var(--border-strong); }
.leaflet-popup-content { margin: 12px 14px; min-width: 200px; }
/* MyPlace asset popup is a branded WHITE card (its text colors are dark) — force
   the Leaflet wrapper white so it stays legible on any theme (Matt 2026-06-22). */
.leaflet-popup.mp-popup .leaflet-popup-content-wrapper { background: #ffffff; color: #0f172a; border-color: rgba(0,0,0,0.15); }
.leaflet-popup.mp-popup .leaflet-popup-tip { background: #ffffff; border-color: rgba(0,0,0,0.15); }
.leaflet-popup-close-button { color: var(--text-tertiary) !important; }
.pin-popover .pin-stage { margin-bottom: 6px; }
.pin-popover .pin-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.pin-popover .pin-meta { margin-bottom: 8px; }
.pin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pin-stats > div { display: flex; flex-direction: column; }
.pin-stats dt {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pin-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}
.pin-cta {
  display: inline-block;
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
}
.pin-cta:hover { text-decoration: underline; }

/* ---- v2 deal-pin popover — CRM-card layout (head row + stats grid + foot) */
.pin-popover { font-family: var(--font-sans); }
.pin-popover .pin-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pin-stage-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.pin-stage-dot-demos  { background: #d6a200; }
.pin-stage-dot-uw     { background: var(--stage-uw); }
.pin-stage-dot-loi    { background: #8B5CF6; }
.pin-stage-dot-uc     { background: #16A34A; }
.pin-stage-dot-closed { background: var(--stage-closed); }
.pin-stage-dot-dead   { background: #DC2626; }
.pin-stage-dot-all    { background: #6B7280; }
.pin-stage-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pin-chip {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
}
.pin-chip-acq  { color: #2D8FCC; border-color: rgba(45,143,204,0.45); background: rgba(45,143,204,0.10); }
.pin-chip-dev  { color: #d97706; border-color: rgba(217,119,6,0.45);  background: rgba(217,119,6,0.10);  }
.pin-chip-fund {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--bg-2);
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
}
.pin-projnum {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}
.pin-popover .pin-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 3px;
}
.pin-popover .pin-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.pin-msa { color: var(--accent-blue); font-weight: 600; }
.pin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pin-stat { display: flex; flex-direction: column; min-width: 0; }
.pin-stat-l {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1px;
}
.pin-stat-v {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pin-foot {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pin-foot-ico {
  font-size: 13px;
  line-height: 1;
}

/* ===========================================================================
   MyPlace asset popover (mapiq-myplace-popover-*) — popup that appears when a
   MyPlace pin on the DealIQ Pipeline > Map view is clicked. Compact data card
   with header (logo + name + address), tight icon-rows for facility metrics,
   optional 3-mi market sub-section, and footer (store_id + flood + yardi).

   Color values are explicit (not theme tokens) because Leaflet popups always
   render on a white background — the dark-theme --text-primary etc. produce
   near-invisible text here.
   =========================================================================== */
.mapiq-myplace-popover {
  width: 280px;
  font-family: var(--font-sans);
  color: #0f172a;
  font-size: 12px;
  /* Self-contained WHITE card — the popover's text colors are dark, and the
     Leaflet wrapper is dark in the dark theme, so fill the content box white
     edge-to-edge regardless of the wrapper (Matt 2026-06-22). */
  background: #ffffff;
  margin: -12px -14px;
  padding: 12px 14px;
  border-radius: 8px;
}
.mapiq-myplace-popover-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #E2E8F0;
}
.mapiq-myplace-popover-mark {
  flex: none;
}
.mapiq-myplace-popover-mark img {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.mapiq-myplace-popover-headline {
  flex: 1 1 auto;
  min-width: 0;
}
.mapiq-myplace-popover-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #0B4A5C;
  background: rgba(99, 192, 218, 0.20);
  border: 1px solid rgba(99, 192, 218, 0.45);
  border-radius: 3px;
  padding: 2px 6px;
  margin-bottom: 4px;
}
.mapiq-myplace-popover-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.mapiq-myplace-popover-address {
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}

.mapiq-myplace-popover-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin: 0 0 4px;
}
.mapiq-myplace-popover-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mapiq-myplace-popover-row svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: #64748B;
  stroke-width: 1.6;
}
.mapiq-myplace-popover-row .stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.mapiq-myplace-popover-row .stack .lbl {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 600;
}
.mapiq-myplace-popover-row .stack .v {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapiq-myplace-popover-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 5px;
  padding-top: 8px;
  border-top: 1px solid #E2E8F0;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 700;
}
.mapiq-myplace-popover-section-title svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.7;
  color: #64748B;
}

.mapiq-myplace-popover-akabq {
  font-size: 12px;
  font-style: italic;
  color: #64748B;
  margin-top: 1px;
}
.mapiq-myplace-popover-hero {
  display: flex;
  gap: 10px;
  margin: 10px 0 4px;
}
.mapiq-myplace-hero-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30,80,200,0.08), rgba(30,80,200,0.03));
  border: 1px solid rgba(30,80,200,0.18);
}
.mapiq-myplace-hero-stat .hv { font-size: 18px; font-weight: 800; color: #1E50C8; line-height: 1.05; letter-spacing: -0.01em; }
.mapiq-myplace-hero-stat .hl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748B; }
.mapiq-myplace-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
}
.mapiq-myplace-popover-assetiq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #1E50C8;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.12s ease;
}
.mapiq-myplace-popover-assetiq:hover { background: #1A45AE; }
.mapiq-myplace-popover-assetiq svg { width: 13px; height: 13px; stroke: currentColor; }
.mapiq-myplace-popover-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #E2E8F0;
  font-size: 12px;
  color: #64748B;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.mapiq-myplace-popover-footer .code {
  color: #334155;
  font-weight: 600;
}
.mapiq-myplace-popover-flood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(74, 140, 247, 0.10);
  color: #1E40AF;
  border: 1px solid rgba(74, 140, 247, 0.25);
}
.mapiq-myplace-popover-flood.is-hazard {
  background: rgba(232, 163, 92, 0.15);
  color: #92400E;
  border-color: rgba(232, 163, 92, 0.45);
}
.mapiq-myplace-popover-flood svg {
  width: 10px;
  height: 10px;
  stroke-width: 1.8;
}

.map-empty-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 400;
}
.map-empty-card {
  pointer-events: auto;
  padding: 20px 24px;
  border-radius: 10px;
  background: rgba(11, 18, 32, 0.92);
  border: 1px solid var(--border-strong);
  max-width: 380px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.map-empty-title { font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.pipeline-map { position: relative; }

/* ===========================================================================
   Filter chip rack (Northspyre attribute builder)
   =========================================================================== */
.filter-rack {
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--border);
}
.filter-rack-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.filter-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.filter-empty { padding: 6px 2px; }

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  gap: 4px;
  align-items: center;
}
.filter-row > .filter-val,
.filter-row > .filter-num {
  grid-column: 1 / span 2;
}
.filter-row > .filter-num + .filter-num {
  grid-column: 2 / span 1;
}
.filter-row > .filter-num:not(:last-of-type) {
  grid-column: 1 / span 1;
}

.filter-row select,
.filter-row input,
.filter-val,
.filter-num {
  background: var(--bg-0);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
  min-width: 0;
  width: 100%;
}
.filter-row select:focus,
.filter-row input:focus {
  outline: none;
  border-color: var(--accent-blue-edge);
}
.filter-val[multiple] { height: 60px; }
.filter-val-empty { padding: 4px 6px; }

.filter-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.filter-remove:hover {
  color: var(--negative);
  border-color: rgba(232,74,95,0.4);
}

.filter-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
}

/* ===========================================================================
   Reports module
   =========================================================================== */
.reports-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
}
.reports-title {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.reports-table tbody tr:hover { background: var(--bg-1); }

/* ===========================================================================
   Photo-led rail card + City/State + MSA location pattern
   =========================================================================== */
.dd-rail-card {
  /* Full-bleed sides only — no longer pulls the photo up over content above it,
     since the lifecycle row now sits above the card. Bottom margin removed in
     favor of the .dd-rail flex gap. */
  margin: 0 -16px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.dd-rail-photo {
  position: relative;
  height: 110px;
  background: linear-gradient(135deg, #19243d 0%, #0e1729 60%, #0b1220 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dd-rail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dd-rail-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dd-rail-photo-fallback span {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 700;
  color: rgba(232, 200, 120, 0.55);   /* gold-tinted monogram — 0.18→0.55 for WCAG AA large-text contrast (UIiq crit) */
  line-height: 1;
  letter-spacing: -0.02em;
}
.dd-rail-photo-state {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(232, 200, 120, 0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.dd-rail-photo-stage {
  position: absolute;
  top: 10px;
  left: 12px;
}
.dd-rail-card-body { padding: 12px 16px 8px; }

.dd-rail-loc { margin: 4px 0 8px; }

/* The location pattern — used in rail head, cards, table, pin popovers */
.loc, .loc-compact {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  line-height: 1.4;
}
.loc .loc-cs           { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.loc .loc-sep          { color: var(--text-tertiary); }
.loc .loc-msa          { font-size: 12px; color: var(--text-2); letter-spacing: 0.02em; } /* Loop 2: 11px tertiary -> 12px text-2 (AA) */

.loc-compact .loc-cs   { font-size: 12px; color: var(--text-primary); }
.loc-compact .loc-sep  { color: var(--text-tertiary); font-size: 12px; }
.loc-compact .loc-msa  { font-size: 12px; color: var(--text-2); }   /* Loop 2 */

/* Tighten the rail's title now that we have a hero photo above */
.dd-rail-title {
  margin: 0 0 2px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* TractIQ source-tagged columns: visually distinct so analysts know
   the rate is market-truth, not OM-claim. */
.pipeline-table th.tractiq-col {
  border-bottom: 2px solid var(--accent-amber);     /* upgraded from 1px so the column visibly groups */
  color: var(--accent-amber);                        /* tint the title text amber to reinforce */
}
.pipeline-table td.tractiq-col {
  background: rgba(232, 163, 92, 0.06);              /* slightly stronger row tint */
}
.tractiq-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 12px;            /* Loop 2: was 8px (illegible micro source-tag) */
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 3px;
  background: rgba(232, 163, 92, 0.15);
  color: var(--accent-amber);
  vertical-align: middle;
  text-transform: uppercase;
}

/* Quick-filter chip rack — sits between "Active Pipeline" label and the
   right-side controls. Each chip is a button that pops a checkbox list
   below it for multi-select. Chips that have an active selection get an
   accent ring + accent text + a small count badge. */
.pipeline-quick-filters {
  display: flex; gap: 6px; align-items: center;
  flex: 1;                 /* fills the empty space between label + controls */
  margin: 0 16px;
  flex-wrap: wrap;
}
/* Top-level Stage selector pills — each tinted with its standard stage token
   (Demos=warn, UW=info, LOI=purple, UC=positive, Closed=gold, Dead=negative). */
.pipeline-stage-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-right: 6px; }
.stage-seg { --seg: var(--text-2); font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--seg) 40%, transparent); background: var(--bg-2); color: color-mix(in srgb, var(--seg) 72%, var(--text-0)); cursor: pointer; white-space: nowrap; transition: border-color .12s, background .12s, color .12s; }
.stage-seg.seg-demos  { --seg: var(--warn,     #E08A2B); }
.stage-seg.seg-uw     { --seg: var(--stage-uw); }
.stage-seg.seg-loi    { --seg: var(--purple,   #B07CD6); }
.stage-seg.seg-uc     { --seg: var(--positive, #3FB179); }
.stage-seg.seg-closed { --seg: var(--stage-closed); }
.stage-seg.seg-dead   { --seg: var(--negative, #E0524A); }
.stage-seg.seg-all    { --seg: var(--text-2); }
.stage-seg:hover { border-color: var(--seg); }
/* Active (filled): UNIFORM white text on a darkened stage fill + bright stage border.
   Every stage matches AND meets WCAG AA — bright amber/green/cyan can't carry white
   text at full saturation, so the fill is darkened ~42% while the border keeps the
   stage hue for identity. */
.stage-seg.active { color: #fff; background: color-mix(in srgb, var(--seg) 58%, #000); border-color: var(--seg); font-weight: 600; }
.quick-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.quick-filter-chip:hover { border-color: var(--accent); color: var(--text-0); }
.quick-filter-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
  color: var(--accent);
}
.quick-filter-summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-2);
}
.quick-filter-chip.is-active .quick-filter-summary { color: var(--accent); }
.quick-filter-chev { font-size: 12px; color: var(--text-2); }

.quick-filter-popover {
  position: fixed;
  z-index: 200;
  min-width: 220px;
  max-width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.quick-filter-popover-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.quick-filter-clear {
  background: transparent; border: 0; color: var(--accent);
  cursor: pointer; font-size: 12px; padding: 2px 6px;
  border-radius: 3px;
}
.quick-filter-clear:hover:not([disabled]) { background: var(--bg-2); }
.quick-filter-clear[disabled] { opacity: 0.3; cursor: default; }
.quick-filter-popover-list {
  display: flex; flex-direction: column;
  padding: 4px;
}
.quick-filter-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-1);
}
.quick-filter-item:hover { background: var(--bg-2); color: var(--text-0); }
.quick-filter-item input { cursor: pointer; }

/* Group-by chip — visually paired with the filter chips but functionally
   distinct (changes table structure rather than narrowing rows). Sits to
   the right of the chips with a thin divider so the eye reads them as
   separate concepts. */
.pipeline-groupby {
  display: inline-flex; align-items: center;
  margin-right: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}
.groupby-chip { font-weight: 500; }

/* Collapsible group header row in the pipeline table */
.deal-group-row {
  background: var(--bg-2);
  cursor: pointer;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.deal-group-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.deal-group-row > td {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-1);
}
.dgr-chev {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin-right: 6px;
  transition: transform 0.12s;
}
.deal-group-row.is-collapsed .dgr-chev { transform: rotate(-90deg); }
.dgr-label {
  font-weight: 600;
  color: var(--text-0);
  margin-right: 8px;
}
.dgr-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}
.dgr-aggs {
  display: inline-flex;
  gap: 14px;
  margin-left: 16px;
}
.dgr-agg {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px;
}
.dgr-agg-l {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.dgr-agg-v {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-1);
}

/* View preset dropdown — curated column sets */
.view-preset-wrap { position: relative; }
.view-preset-panel {
  position: absolute; top: 100%; right: 0;
  margin-top: 4px;
  z-index: 200;
  min-width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  padding: 4px;
  display: flex; flex-direction: column;
}
.view-preset-item {
  background: transparent; border: 0;
  text-align: left;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-1);
}
.view-preset-item:hover { background: var(--bg-2); color: var(--text-0); }
.view-preset-item.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.view-preset-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.view-preset-desc { font-size: 12px; line-height: 1.4; }
.view-preset-section {
  font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-3); padding: 8px 12px 4px;
}
.view-preset-row {
  display: flex; align-items: stretch;
  border-radius: 5px;
}
.view-preset-row:hover { background: var(--bg-2); }
.view-preset-row .view-preset-item { background: transparent; }
.view-preset-row .view-preset-item:hover { background: transparent; }
.view-preset-del {
  background: transparent; border: 0;
  padding: 0 12px;
  color: var(--text-3); font-size: 14px; cursor: pointer;
  border-radius: 5px;
  font-family: inherit;
}
.view-preset-del:hover { color: var(--negative); background: color-mix(in srgb, var(--negative) 10%, transparent); }
.view-preset-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 4px;
}
.view-preset-save {
  width: 100%;
  background: transparent; border: 0;
  padding: 10px 12px;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  color: var(--accent-blue);
}
.view-preset-save:hover { background: var(--accent-blue-tint); }

/* Pipeline thead — two rows. Row 1 spans groups via colspan (e.g., "Web $/NRSF"
   over the CC + NCC sub-cols) and rowspan=2 for ungrouped columns. Row 2 has
   only the sub-col labels under each group. Each value lives in its own
   single-value column so header right-edge naturally aligns with value right-edge. */
.pipeline-table thead .thead-r1 th {
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1);
  border-bottom: 1px solid var(--line-soft);
}
.pipeline-table thead .thead-r1 th[colspan] {
  text-align: center;       /* group titles center over their child columns */
}
.pipeline-table thead .thead-r1 th.tractiq-group-th {
  color: var(--accent-amber);
  border-bottom: 2px solid var(--accent-amber);
}
.pipeline-table thead .thead-r2 th {
  padding: 4px 12px 8px;
  font-size: 12.5px;                 /* UIiq: bumped a step for legibility (NRSF/PHYS/ASKING/GOING-IN) */
  font-weight: 700;                 /* heavier so the sub-column labels read clearly */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);       /* stronger contrast than text-2 for the small sub-header row */
  background: transparent;
}
/* Tractiq sub-column titles in row 2 keep the amber accent so the column tint stays linked */
.pipeline-table thead .thead-r2 th.tractiq-col {
  color: color-mix(in srgb, var(--accent-amber) 70%, var(--text-2)); /* Loop 2: AA-safe amber-tinted */
  border-bottom: 1px solid color-mix(in srgb, var(--accent-amber) 60%, transparent);
}
/* Numeric (rowspan=2 ungrouped) headers right-align over their values */
.pipeline-table thead .thead-r1 th.num,
.pipeline-table thead .thead-r2 th.num {
  text-align: right;
}

/* ===========================================================================
   Pro Forma 5-year grid (Underwriting subview) — Northspyre dense table
   =========================================================================== */
.pf-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pf-banner-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.pf-banner-tag { white-space: nowrap; }

.pf-grid-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  background: var(--bg-1);
}
.pf-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-sans);
}
.pf-grid thead th {
  position: sticky;
  top: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-strong);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  z-index: 2;
  text-align: right;
}
.pf-grid thead th.pf-label-h {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-1);
  z-index: 3;
  min-width: 240px;
}
.pf-section { border-top: 1px solid var(--border); }
.pf-section-head td {
  background: var(--bg-2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.pf-row td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.pf-row td.pf-label {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 500;
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-1);
  z-index: 1;
}
.pf-row td.pf-y0 { color: var(--accent-blue); }   /* current/known year is the editable anchor */
.pf-row.pf-indent-1 td.pf-label { padding-left: 28px; color: var(--text-secondary); font-weight: 400; }
.pf-row.pf-indent-2 td.pf-label { padding-left: 44px; color: var(--text-tertiary); font-weight: 400; }

.pf-row.pf-subtotal td {
  background: rgba(74,140,247,0.04);
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.pf-row.pf-subtotal td.pf-label { background: rgba(74,140,247,0.04); }
.pf-row.pf-total td {
  background: rgba(232, 200, 120, 0.06);
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.pf-row.pf-total td.pf-label { background: rgba(232, 200, 120, 0.06); color: var(--text-primary); }

.pf-grid td.tractiq-col { background: rgba(232, 163, 92, 0.04); }

/* ===========================================================================
   Pipeline column picker + combined cells + population thresholds
   =========================================================================== */
.pipeline-toolbar-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.col-picker-wrap { position: relative; }
.col-picker-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: 280px;
  max-height: 460px;
  overflow: auto;
  padding: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.col-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.col-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.col-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.col-picker-item:hover { background: var(--bg-2); }
.col-picker-item input { accent-color: var(--accent-blue); }

/* Combined-value cells (e.g., "Phys | Econ Occ", "CC | NCC Web") */
.combined-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.combined-sep {
  color: var(--text-tertiary);
  opacity: 0.5;
  font-weight: 300;
}

/* Population threshold colors (MyPlace Buy Box: 30k @ 3mi, 80k @ 5mi) */
.pop-pass {
  color: var(--positive);
  font-weight: 600;
}
.pop-fail {
  color: var(--text-secondary);
}

/* Audit Deal Metadata block — where project_number / workflow_type / IDs live */
.audit-meta {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--border);
}
.audit-meta h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ===========================================================================
   Seller-doc upload zone (Demos UW Lite dashboard)
   =========================================================================== */
.sd-zone {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
}
.sd-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sd-zone-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.sd-run-uw.is-disabled { opacity: 0.45; cursor: not-allowed; }
.sd-run-uw:not(.is-disabled) {
  background: var(--positive);
  border-color: var(--positive);
  color: #061612;
  cursor: pointer;
}

.sd-cat {
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  background: var(--bg-0);
}
.sd-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sd-cat-head::-webkit-details-marker { display: none; }
.sd-cat[open] .sd-cat-head { border-bottom: 1px solid var(--border); }
.sd-cat-head::before {
  content: "▸";
  margin-right: 6px;
  color: var(--text-tertiary);
  transition: transform 120ms ease;
}
.sd-cat[open] .sd-cat-head::before { content: "▾"; }
.sd-cat-progress {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--positive);
  font-weight: 600;
}
.sd-cat-body {
  display: flex;
  flex-direction: column;
}

.sd-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sd-row:last-child { border-bottom: none; }
.sd-row.sd-uw { background: rgba(74,140,247,0.025); }
.sd-row.sd-has-files { background: rgba(62,183,120,0.025); }
.sd-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.sd-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.sd-row-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 5px;
  height: 16px;
  border-radius: 999px;
  background: var(--positive);
  color: #061612;
  font-size: 12px;
  font-weight: 700;
}
.sd-row-files { display: flex; flex-direction: column; gap: 4px; }
.sd-empty {
  font-style: italic;
  padding: 2px 0;
}
.sd-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sd-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.sd-file-size { white-space: nowrap; }
.sd-file-del {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.sd-file-del:hover { color: var(--negative); }

/* Workbook download modal + source picker */
.wb-modal { min-width: 460px; max-width: 540px; }
.wb-source-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}
.wb-source {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  cursor: pointer;
  align-items: flex-start;
}
.wb-source:hover { border-color: var(--accent-blue-edge); }
.wb-source input[type="checkbox"] { accent-color: var(--accent-blue); margin-top: 3px; }
.wb-source > div { flex: 1; min-width: 0; }
.pf-banner-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pf-download-btn { white-space: nowrap; }

/* New Deal modal */
.nd-modal { min-width: 540px; max-width: 720px; width: 720px; }
/* Compact broker rows so 5+ matches don't dominate the modal */
.nd-broker-row {
  padding: 6px 10px !important;
  gap: 8px !important;
}
.nd-broker-extracted { font-size: 12px !important; }
.nd-broker-match { font-size: 12px !important; flex-wrap: wrap; }
.nd-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.nd-field { display: flex; flex-direction: column; gap: 4px; grid-column: span 2; }
.nd-field.nd-full { grid-column: 1 / -1; }
.nd-field.nd-narrow { grid-column: span 1; }
.nd-field > span:first-child {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.nd-field input,
.nd-field select,
.nd-field textarea {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
}
.nd-field input:focus,
.nd-field select:focus,
.nd-field textarea:focus {
  outline: none;
  border-color: var(--accent-blue-edge);
  background: var(--bg-1);
}
.nd-req { color: var(--negative); }
.nd-hint { font-size: 12px; color: var(--text-tertiary); font-style: italic; }

/* OM upload card (shown when source_om_document_id is null) */
.om-upload-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin: 0 0 16px;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(74,140,247,0.10), rgba(74,140,247,0.04));
  border: 1px dashed var(--accent-blue-edge);
}
.om-upload-icon { font-size: 28px; flex: none; }
.om-upload-body { flex: 1; min-width: 0; }
.om-upload-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-blue);
}
.om-upload-card code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-0);
  padding: 1px 4px;
  border-radius: 3px;
}

/* The HTML `hidden` attribute must beat any `display: flex/grid` rule defined
   for the same class — without this, every stage of the New Deal modal renders
   stacked at open instead of progressing one stage at a time. */
[hidden] { display: none !important; }

/* New Deal modal — AI file import + manual fallback */
.nd-import-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  margin: 14px 0 18px;
  border-radius: 10px;
  border: 1px dashed var(--accent-blue-edge);
  background: linear-gradient(0deg, rgba(74,140,247,0.06), rgba(74,140,247,0.02));
}
.nd-import-icon { font-size: 32px; flex: none; }
.nd-import-body { flex: 1; min-width: 0; }
.nd-import-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.nd-import-sub { margin-bottom: 10px; }
.nd-import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nd-extracting {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  margin: 14px 0;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--accent-blue-edge);
}
.nd-extracting-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(74,140,247,0.25);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: nd-spin 0.9s linear infinite;
  flex: none;
}
@keyframes nd-spin { to { transform: rotate(360deg); } }

.nd-form-banner {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.nd-form-banner code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-1);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ===========================================================================
   Pipeline rows — single-line enforcement (no wrapping at any column count)
   =========================================================================== */
.pipeline-view[data-pview="table"] {
  overflow-x: auto;          /* fallback scroll if user adds many optional columns */
}
.pipeline-table {
  width: 100%;               /* default columns now fit via combined NRSF|Units + Asking|Going-In */
  min-width: 100%;
  table-layout: auto;
}
/* Fund color accent — canonical MyPlace fund palette (mirrors active-tracker.html).
   The per-deal hex is set inline on the row as --fund-accent; this class paints a
   3px inset left edge on the row's first cell (works on <td>, unlike border-left
   which collapses on table rows). Brand hexes are theme-independent by design. */
.pipeline-table td.fund-accent {
  box-shadow: inset 3px 0 0 0 var(--fund-accent, transparent);
}
/* Fund pill in the Fund column — white text on the fund color, small rounded
   pill, matching active-tracker's `.fund` chip treatment. */
.fund-chip {
  display: inline-block;
  font-size: 12px;            /* Loop 2: was 10px (sub-12 in default pipeline Fund column) */
  font-weight: 700;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: .01em;
}
.pipeline-table tbody td,
.pipeline-table thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;          /* per-cell ellipsis cap; prevents one giant column from blowing up */
}
/* Numeric column min-widths so combined "X | Y" cells don't squeeze the
   value flush against the header. Header right-aligns to meet the value.
   Specificity bumped (.pipeline-table thead th.num) to defeat the global
   `thead th { text-align: left }` rule above. */
.pipeline-table thead th.num,
.pipeline-table tbody td.num {
  text-align: right;
  min-width: 110px;
  padding-left: 14px;
  padding-right: 14px;
}
/* Combined cells: pack children to the right so empty/dash states line up
   with numeric values in the same column. */
.pipeline-table .combined-cell {
  white-space: nowrap;       /* "Phys | Econ Occ" never wraps */
  justify-content: flex-end;
}
/* Compact TractIQ tag in the column header so it doesn't dominate width.
   Stacks above the label as a tiny accent so the actual header stays narrow. */
.pipeline-table thead th .tractiq-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 12px;            /* Loop 2: was 7.5px (illegible micro-tag) */
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

/* Sub-label under the column title (e.g. "CC | NCC", "3-mi | 5-mi").
   Block-level so it stacks under the title — keeps header right-edge clean
   and aligned with right-aligned value cells. */
.pipeline-table thead th .th-sublabel {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;            /* Loop 2: was 9px */
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-2);       /* Loop 2: was text-3 (failed AA on light) */
  margin-top: 3px;
  line-height: 1.2;
}
/* Tinted to match the TractIQ amber accent on TractIQ columns */
.pipeline-table thead th.tractiq-col .th-sublabel {
  color: color-mix(in srgb, var(--accent-amber) 70%, var(--text-3));
}
.pipeline-table .loc, .pipeline-table .loc-compact {
  flex-wrap: nowrap;          /* "City, ST · MSA" stays on one line */
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipeline-table .loc-msa, .pipeline-table .loc-compact .loc-msa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

/* ===========================================================================
   OM Viewer — PDF.js inline + provenance highlights
   =========================================================================== */
.om-viewer-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  height: calc(100vh - 220px);
  min-height: 600px;
}
@media (max-width: 1100px) {
  .om-viewer-shell { grid-template-columns: 1fr; height: auto; }
}
.om-fields-rail {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  overflow-y: auto;
}
.om-fields-head {
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.om-fields-title {
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.om-fields-list { list-style: none; margin: 0; padding: 0; }
.om-field-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'label page' 'value page';
  gap: 0 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  border-left: 2px solid transparent;
  margin-bottom: 2px;
  font-size: 12px;
}
.om-field-item:hover { background: var(--bg-2); border-left-color: var(--accent); }
.om-field-item.active {
  background: var(--bg-2);
  border-left-color: var(--gold);
}
.om-field-label { grid-area: label; color: var(--text-1); font-weight: 500; }
.om-field-value { grid-area: value; color: var(--text-2); font-family: var(--f-m); font-size: 12px; }
.om-field-page {
  grid-area: page;
  align-self: center;
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-0);
  padding: 2px 6px;
  border-radius: 3px;
}

.om-pdf-host {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.om-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.om-pdf-page-indicator {
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--text-1);
  padding: 0 8px;
}
.om-pdf-canvas-wrap {
  position: relative;
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* never vertically stretch the canvas */
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}
/* Canvas + overlay share ONE stage sized exactly to the canvas, so the overlay
   origin == the canvas origin (no top/left guesswork, no stretch drift). */
.om-pdf-stage {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}
#om-pdf-canvas {
  display: block;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.om-pdf-highlight-overlay {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 10;
}
.om-pdf-highlight {
  position: absolute;
  background: rgba(232, 200, 118, 0.18);
  border: 1px solid rgba(232, 200, 118, 0.40);
  border-radius: 2px;
  pointer-events: none;
  transition: background 0.18s ease;
}
/* Confidence tint: high=green, medium=amber, low=red, unknown=neutral. */
.om-pdf-highlight.conf-high   { background: rgba(106, 191, 138, 0.18); border-color: rgba(106, 191, 138, 0.45); }
.om-pdf-highlight.conf-medium { background: rgba(232, 200, 118, 0.18); border-color: rgba(232, 200, 118, 0.45); }
.om-pdf-highlight.conf-low    { background: rgba(217, 115, 115, 0.18); border-color: rgba(217, 115, 115, 0.45); }
/* Active (clicked) field — brighter, thicker, pulsing, above the rest. */
.om-pdf-highlight.is-active {
  background: rgba(232, 200, 118, 0.48);
  border: 2px solid rgba(232, 200, 118, 0.95);
  box-shadow: 0 0 0 2px rgba(232, 200, 118, 0.30);
  z-index: 2;
  animation: omHighlightPulse 1.2s ease-out;
}
.om-pdf-highlight.is-active.conf-high { background: rgba(106, 191, 138, 0.48); border-color: rgba(106, 191, 138, 0.95); box-shadow: 0 0 0 2px rgba(106, 191, 138, 0.30); }
.om-pdf-highlight.is-active.conf-low  { background: rgba(217, 115, 115, 0.48); border-color: rgba(217, 115, 115, 0.95); box-shadow: 0 0 0 2px rgba(217, 115, 115, 0.30); }
.om-pdf-hl-label {
  position: absolute;
  transform: translateY(-100%);
  background: #0f1830;
  color: #e8ecf4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px 5px 5px 0;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
@keyframes omHighlightPulse {
  0%   { box-shadow: 0 0 0 6px rgba(232, 200, 118, 0.45); }
  100% { box-shadow: 0 0 0 2px rgba(232, 200, 118, 0.30); }
}
.om-hl-key { font-weight: 700; padding: 0 4px; border-radius: 3px; }
.om-hl-key-high   { color: #6abf8a; background: rgba(106, 191, 138, 0.16); }
.om-hl-key-medium { color: #e8c876; background: rgba(232, 200, 118, 0.16); }
.om-hl-key-low    { color: #d97373; background: rgba(217, 115, 115, 0.16); }
.om-pdf-page-flash {
  position: absolute;
  inset: 0;
  background: rgba(232, 200, 118, 0.12);
  animation: omPageFlash 1.6s ease-out;
  pointer-events: none;
}
@keyframes omPageFlash {
  0%   { background: rgba(232, 200, 118, 0.4); }
  100% { background: rgba(232, 200, 118, 0); }
}

/* ===========================================================================
   Sidebar collapse — toggle button + collapsed state (~52px wide)
   =========================================================================== */
.sidebar { position: relative; transition: padding 220ms ease; }
.sidebar-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-2);
  font-family: var(--f-u);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 150ms ease;
}
.sidebar-toggle:hover {
  color: var(--text-0);
  background: var(--bg-2);
  border-color: var(--line-strong);
}

/* Animate the grid track itself */
.app-shell {
  transition: grid-template-columns 220ms ease;
}
.app-shell.sidebar-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.app-shell.sidebar-collapsed .sidebar { padding: 8px 6px; overflow: hidden; }

/* When collapsed, hide every interactive child except the toggle + a stub icon column */
.app-shell.sidebar-collapsed .search,
.app-shell.sidebar-collapsed .pills,
.app-shell.sidebar-collapsed .filter-rack,
.app-shell.sidebar-collapsed .sidebar-label,
.app-shell.sidebar-collapsed .deal-nav,
.app-shell.sidebar-collapsed .sidebar-empty {
  display: none;
}
.app-shell.sidebar-collapsed .sidebar::before {
  content: "≡";
  display: block;
  font-size: 18px;
  color: var(--text-3);
  text-align: center;
  margin-top: 36px;
  letter-spacing: 0;
}
.app-shell.sidebar-collapsed .sidebar-toggle {
  top: 6px;
  right: 50%;
  transform: translateX(50%);
}

/* UW Lite tile inline action (Sophistication URL probe) */
.uwlite-action {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.uwlite-action input.uwlite-soph-url {
  flex: 1;
  min-width: 0;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--text-1);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
}
.uwlite-action input.uwlite-soph-url:focus {
  outline: none;
  border-color: var(--accent);
}

/* Inline-edit cells on Overview — click any value to edit in place */
.editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 1px;
  transition: background 120ms, border-color 120ms;
}
.editable:hover {
  background: var(--bg-2);
  border-bottom-color: var(--accent);
}
.editable.empty { color: var(--text-3); font-style: italic; }
.editable:focus { outline: 1px solid var(--accent); outline-offset: 2px; }
.editable-input {
  background: var(--bg-0);
  border: 1px solid var(--accent);
  color: var(--text-0);
  border-radius: 3px;
  padding: 2px 6px;
  font: inherit;
  font-size: inherit;
  min-width: 60px;
}
.editable-input:focus { outline: none; }
.editable-saving { color: var(--text-3); font-style: italic; font-size: 0.9em; }
.editable-saved { color: var(--positive); font-weight: 600; }

/* Inline CRM-style field — click-to-edit, blur-saves direct PATCH.
   No modal, no audit row. Used for native deal scalars on the Deal Info
   panel (workflow, fund, sizing, dates, county, description). */
.inline-field {
  cursor: pointer;
  border-bottom: 1px dashed var(--line);
  padding: 1px 4px;
  border-radius: 3px;
  transition: background 120ms, border-color 120ms, color 120ms;
  display: inline-block;
  min-width: 40px;
}
.inline-field:hover { background: var(--bg-2); border-bottom-color: var(--accent); }
.inline-field:focus { outline: 1px solid var(--accent); outline-offset: 2px; }
.inline-field.inline-empty { color: var(--text-3); font-style: italic; }
.inline-field.inline-saving { color: var(--text-3); }
.inline-field.inline-saved { background: color-mix(in srgb, var(--positive) 20%, transparent); border-bottom-color: var(--positive); }
.inline-field.inline-error { background: color-mix(in srgb, var(--negative) 25%, transparent); border-bottom-color: var(--negative); }
.inline-field.inline-editing { padding: 0; border-bottom-color: transparent; }
.inline-input {
  background: var(--bg-0);
  border: 1px solid var(--accent);
  color: var(--text-0);
  border-radius: 3px;
  padding: 2px 6px;
  font: inherit;
  font-size: inherit;
  min-width: 80px;
  width: 100%;
  box-sizing: border-box;
}
.inline-input:focus { outline: none; }
.inline-textarea { min-height: 60px; resize: vertical; }

/* Deal Info panel — 4-group grid (Identity / Location / Sizing / Dates) */
.deal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 0;
  padding: 16px;
}
@media (max-width: 920px) { .deal-info-grid { grid-template-columns: 1fr; } }
.dig-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 8px;
  column-gap: 12px;
  align-items: baseline;
}
.dig-group-h {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.dig-group dt {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.dig-group dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-0);
  min-width: 0;
}
.dig-group dd.dig-wide { grid-column: 2 / -1; }
.dig-group dd.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-2); }

/* ── DEAL INFO — redesigned 2026-06-21 (merged Property + Financials in).
   KPI tile strip on top, then accent-headed cards (Identity / Location /
   Sizing / Financials / Dates). Branded with --accent (cobalt) accent bars,
   tabular-nums on every number, matching the .ov-section visual language. */
.di-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 920px) { .di-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .di-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.di-kpi-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  border-top: 2px solid var(--accent);
}
.di-kpi-tile.is-empty { border-top-color: var(--line); opacity: 0.8; }
.di-kpi-v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.di-kpi-tile.is-empty .di-kpi-v { color: var(--text-3); font-weight: 400; }
.di-kpi-c {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Card grid — responsive 2–3 cards per row, matching .ov-row-2 cadence. */
.di-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.di-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  padding: 12px 14px 14px;
}
.di-card-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.di-rows {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 8px;
  column-gap: 12px;
  align-items: baseline;
  margin: 0;
}
.di-rows dt {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.di-rows dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.di-rows dd.di-wide { grid-column: 2 / -1; }
.di-rows dd.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-2); }
/* Read-only OM-derived rows render in mono with tabular figures to set them
   apart from the click-to-edit CRM values. */
.di-rows dd.di-ro {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-2);
}

/* Pipeline-map deal pins — small color-only dots, intentionally smaller
   than the 36px MyPlace asset markers so the portfolio reads as the
   permanent layer and deals as the transient pipeline.
   UC + LOI gently pulse to draw the eye to active-action stages. */
.dealpin {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dealpin-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  display: block;
  transition: transform 140ms ease-out;
  transform-origin: center;
}
/* IMPORTANT: hover/pulse scale only the inner .dealpin-dot — NEVER the
   .dealpin root. Leaflet positions the root via transform: translate3d(),
   so a transform animation there overrides positioning and stacks every
   animated pin at the map origin (this was hiding all UC + LOI pins). */
.dealpin:hover { z-index: 1000 !important; }
.dealpin:hover .dealpin-dot { transform: scale(1.3); }
.dealpin-uc .dealpin-dot, .dealpin-loi .dealpin-dot { animation: dealpin-pulse 2.4s ease-in-out infinite; }
@keyframes dealpin-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.dealpin-uc:hover .dealpin-dot, .dealpin-loi:hover .dealpin-dot { animation: none; }
/* Portfolio pins — extra white ring so users see "these N pins belong to one deal" */
.dealpin-portfolio .dealpin-dot {
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(67,97,238,0.85), 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Activity timeline — grouped by day */
.activity-timeline { padding: 4px 2px 30px; }
.activity-empty { padding: 24px; text-align: center; }
.activity-day { margin-bottom: 18px; }
.activity-day-label {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.activity-day-list { list-style: none; margin: 0; padding: 0; }
.activity-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 6px;
}
.activity-item:hover { background: var(--bg-1); }
.activity-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-size: 14px;
}
.activity-pass .activity-icon, .activity-dead .activity-icon {
  background: rgba(232, 74, 95, 0.10);
  border-color: rgba(232, 74, 95, 0.35);
  color: var(--negative);
}
.activity-stage_advance .activity-icon, .activity-closed .activity-icon {
  background: rgba(62, 183, 120, 0.10);
  border-color: rgba(62, 183, 120, 0.35);
  color: var(--positive);
}
.activity-ai_run .activity-icon, .activity-quick_uw .activity-icon {
  background: rgba(74, 140, 247, 0.10);
  border-color: rgba(74, 140, 247, 0.35);
  color: var(--accent);
}
.activity-upload .activity-icon, .activity-om_upload .activity-icon, .activity-seller_doc .activity-icon, .activity-photo .activity-icon {
  background: rgba(232, 200, 118, 0.08);
  border-color: rgba(232, 200, 118, 0.35);
  color: var(--gold);
}
.activity-line {
  display: flex; gap: 10px; align-items: baseline;
}
.activity-kind {
  font-weight: 600;
  color: var(--text-0);
  font-size: 13px;
}
.activity-rel { white-space: nowrap; }
.activity-detail { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.activity-stamp { font-size: 12px; margin-top: 2px; }

/* ===========================================================================
   Stage filter bar — replaces old aside sidebar (2026-04-27)
   Each pill takes its psychologically-mapped color from
   memory: project_dealiq_stage_colors.md
   =========================================================================== */
.app-shell {
  grid-template-columns: 1fr !important;        /* sidebar gone — single column */
}

.stage-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 57px;                /* below the topbar */
  z-index: 20;
}
.stage-bar .search {
  flex: 0 0 280px;
  margin-bottom: 0;
}
.stage-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-1);
  font-family: var(--f-u);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.stage-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  transition: box-shadow 200ms;
}
.stage-pill:hover { color: var(--text-0); border-color: var(--line-strong); }
.stage-pill.active {
  background: color-mix(in srgb, currentColor 14%, var(--bg-1));
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  color: var(--pill-color, var(--text-0));
}
.stage-pill.active .stage-pill-dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }

/* Per-stage colors — sourced from theme tokens so they shift across themes */
.stage-pill.stage-all      { --pill-color: var(--text-2); color: var(--text-2); }
.stage-pill.stage-all.active { color: var(--text-1); --pill-color: var(--text-1); }
.stage-pill.stage-demos    { --pill-color: var(--warn); color: var(--warn); }
.stage-pill.stage-uw       { --pill-color: var(--stage-uw); color: var(--stage-uw); }
.stage-pill.stage-loi      { --pill-color: var(--purple); color: var(--purple); }
.stage-pill.stage-uc       { --pill-color: var(--positive); color: var(--positive); }
.stage-pill.stage-closed   { --pill-color: var(--stage-closed); color: var(--stage-closed); }
.stage-pill.stage-dead     { --pill-color: var(--negative); color: var(--negative); }

.stage-bar-filters-btn { white-space: nowrap; }
.stage-bar-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-0);
  font-size: 12px;
  font-weight: 700;
}

/* Filter rack as a dropdown popover anchored under the stage bar */
.filter-rack-popover {
  position: absolute;
  top: calc(57px + 56px + 4px); /* topbar + stage-bar + gap */
  right: 24px;
  width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 30;
  margin-bottom: 0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}

/* ===========================================================================
   MapIQ control panel (basemap + layer toggles) — floats top-right of map
   =========================================================================== */
.mapiq-ctrl {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 240px;
  max-width: 260px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  font-family: var(--f-u);
  font-size: 12px;
  color: var(--text-1);
}
.mapiq-ctrl::-webkit-scrollbar { width: 6px; }
.mapiq-ctrl::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.mapiq-section { margin-bottom: 10px; }
.mapiq-section:last-child { margin-bottom: 0; }
.mapiq-label {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
/* MyPlace Assets layer — per-fund + HQ visibility toggles (extras panel) */
.mp-fund-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-1); padding: 2px 0; cursor: pointer; }
.mp-fund-toggle input { margin: 0; cursor: pointer; }
.mp-fund-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; }
.mapiq-ctrl select {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--text-1);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
}
.mapiq-ctrl select:focus { outline: none; border-color: var(--accent); }
.mapiq-ctrl label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
}
.mapiq-ctrl label.mapiq-disabled { cursor: not-allowed; opacity: 0.55; }
.mapiq-ctrl input[type="checkbox"] { accent-color: var(--accent); }

/* Photo monogram in pin popover */
.pin-thumb {
  width: 56px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  border: 1px solid var(--line);
}
.pin-thumb span {
  font-family: var(--f-d);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.55;
}

/* ===========================================================================
   Stage badges — colored by acquisition stage (single source of truth)
   memory: project_dealiq_stage_colors.md
   =========================================================================== */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--f-u);
  color: var(--text-2);
  background: color-mix(in srgb, var(--text-2) 12%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--text-2) 30%, transparent);
  white-space: nowrap;
}
.stage-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.stage-badge-demos  { color: var(--warn);     background: color-mix(in srgb, var(--warn) 10%, var(--bg-1));     border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.stage-badge-uw     { color: var(--info);     background: color-mix(in srgb, var(--info) 10%, var(--bg-1));     border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.stage-badge-loi    { color: var(--purple);   background: color-mix(in srgb, var(--purple) 10%, var(--bg-1));   border-color: color-mix(in srgb, var(--purple) 30%, transparent); }
.stage-badge-uc     { color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, var(--bg-1)); border-color: color-mix(in srgb, var(--positive) 35%, transparent); }
.stage-badge-closed { color: var(--gold);     background: color-mix(in srgb, var(--gold) 14%, var(--bg-1));     border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.stage-badge-dead   { color: var(--negative); background: color-mix(in srgb, var(--negative) 10%, var(--bg-1)); border-color: color-mix(in srgb, var(--negative) 35%, transparent); }

/* ===========================================================================
   Stepper active step — color by stage bucket (data-stage attribute)
   Override the generic-blue active state with the stage-specific token
   =========================================================================== */
.stage-stepper .step[data-stage="demos"].step-active           { color: var(--warn);     background: color-mix(in srgb, var(--warn) 12%, var(--bg-1));     border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.stage-stepper .step[data-stage="demos"].step-active .step-num { background: var(--warn); color: #1a1300; border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }

.stage-stepper .step[data-stage="underwriting"].step-active           { color: var(--stage-uw);  background: color-mix(in srgb, var(--stage-uw) 12%, var(--bg-1)); border-color: color-mix(in srgb, var(--stage-uw) 35%, transparent); }
.stage-stepper .step[data-stage="underwriting"].step-active .step-num { background: var(--stage-uw); color: #02101e; border-color: var(--stage-uw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-uw) 20%, transparent); }

.stage-stepper .step[data-stage="loi_out"].step-active           { color: var(--purple);  background: color-mix(in srgb, var(--purple) 12%, var(--bg-1)); border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.stage-stepper .step[data-stage="loi_out"].step-active .step-num { background: var(--purple); color: #150528; border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 20%, transparent); }

.stage-stepper .step[data-stage="under_contract"].step-active           { color: var(--positive); background: color-mix(in srgb, var(--positive) 14%, var(--bg-1)); border-color: color-mix(in srgb, var(--positive) 38%, transparent); }
.stage-stepper .step[data-stage="under_contract"].step-active .step-num { background: var(--positive); color: #04150d; border-color: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 22%, transparent); }

.stage-stepper .step[data-stage="closed"].step-active           { color: var(--stage-closed);   background: color-mix(in srgb, var(--stage-closed) 14%, var(--bg-1)); border-color: color-mix(in srgb, var(--stage-closed) 40%, transparent); }
.stage-stepper .step[data-stage="closed"].step-active .step-num { background: var(--stage-closed); color: #1a1505; border-color: var(--stage-closed); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-closed) 25%, transparent); }

/* ===========================================================================
   Map pins — stage-colored divIcon
   =========================================================================== */
.mapiq-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapiq-pin-inner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid currentColor;
  background: var(--bg-0);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 120ms;
}
.mapiq-pin:hover .mapiq-pin-inner { transform: scale(1.2); }
.mapiq-pin-demos    { color: var(--warn); }
.mapiq-pin-uw       { color: var(--info); }
.mapiq-pin-loi      { color: var(--purple); }
.mapiq-pin-uc       { color: var(--positive); }
.mapiq-pin-closed   { color: var(--gold); }
.mapiq-pin-dead     { color: var(--negative); }
.mapiq-pin-all      { color: var(--accent); }

/* ===========================================================================
   Topbar v3 (2026-04-27) — thin primary header + combined secondary row
   =========================================================================== */
.topbar-thin {
  /* 3 columns: brand (auto), inline IQ-family quick-jump (flex 1fr), topbar-right (auto).
     The IQ nav was added 2026-04-28; without the third column the right side wraps
     to a second row and appears to "scroll independently" of the brand. */
  grid-template-columns: auto 1fr auto !important;
  padding: 8px 20px !important;
  min-height: 44px !important;
  /* Drop hard height + don't allow row wrap */
  grid-auto-rows: 1fr !important;
  align-items: center !important;
}
.topbar-thin > * { min-width: 0; }  /* let the IQ nav shrink instead of forcing a wrap */
.topbar-thin .brand-text { font-size: 13px; }

/* Secondary row: KPIs (left) · spacer · stage filter bar collapses into here */
.topbar-secondary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 44px;
  z-index: 19;
}
.topbar-secondary .kpi {
  flex-direction: row;
  gap: 6px;
  align-items: baseline;
}
.topbar-secondary .kpi-label {
  font-size: 12px;
  letter-spacing: 0.10em;
}
.topbar-secondary .kpi-value {
  font-size: 14px;
}

/* Pull the stage filter bar UP into this row instead of separate strip */
.stage-bar {
  position: static !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  flex: 1;
  min-width: 0;
}
.stage-bar .search { flex: 0 0 200px; }
.stage-pills { gap: 4px; }
.stage-pill {
  font-size: 12px;
  padding: 4px 10px;
}

/* Move stage-bar inside topbar-secondary visually using order */
.topbar-secondary .stage-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Recompute filter-rack position now that stage bar moved */
.filter-rack-popover {
  top: calc(44px + 50px + 4px);  /* thin-topbar + secondary + gap */
}

/* ===========================================================================
   Vitals pill (2026-04-29) — single rotating insight pill that rides inside
   the tabs row, right-aligned in the empty space after the last tab. Cross-
   fades through 5–6 client-computed stats every ~6s. Pulse dot is a calm,
   non-noisy "alive" cue. No new row — uses existing real estate.
   =========================================================================== */
.vitals-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-1);
  background: color-mix(in srgb, var(--bg-0) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--info)) 30%, var(--line));
  border-radius: 999px;
  cursor: default;
  user-select: none;
  transition: opacity 280ms ease, transform 280ms ease, border-color 200ms;
}
.vitals-pill.swapping { opacity: 0; transform: translateY(-2px); }
.vitals-pill:hover { border-color: var(--line-strong); }
.vitals-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent, var(--info));
  flex: none;
  position: relative;
}
.vitals-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--accent, var(--info));
  opacity: 0.55;
  animation: vitals-pulse 2.4s ease-out infinite;
}
@keyframes vitals-pulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(2.2); opacity: 0;    }
  100% { transform: scale(2.2); opacity: 0;    }
}
.vitals-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-2);
  text-transform: uppercase;
}
.vitals-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-0);
  white-space: nowrap;
}

/* Per-insight accent colors — drive the dot via --accent on each insight */
.vitals-pill.accent-positive { --accent: var(--positive); }
.vitals-pill.accent-info     { --accent: var(--info); }
.vitals-pill.accent-warn     { --accent: var(--warn); }
.vitals-pill.accent-purple   { --accent: var(--purple); }
.vitals-pill.accent-gold     { --accent: var(--gold); }
.vitals-pill.accent-text     { --accent: var(--text-2); }

/* Hide on Deal Detail (matches secondary topbar's behavior) */
body.on-deal-detail .vitals-pill { display: none; }

/* On Deal Detail: hide the secondary KPI/filter row only (pipeline-scoped).
   Tabs (Pipeline / Reports / Deal Detail / Milestones / Tasks / Handoff) stay
   visible — they're the primary nav back to Pipeline + sibling views.
   (Matt 2026-04-27 — clarifies earlier "duplicate toolbar" guidance: tabs
   stay; only the redundant deal-selector toolbar inside view-deal is hidden.) */
body.on-deal-detail .topbar-secondary { display: none; }
body.on-deal-detail .main { padding-top: 14px; }

/* ===========================================================================
   Topbar v4 (2026-04-27) — single secondary row with KPIs + search + pills
   =========================================================================== */
.topbar-secondary-spacer { flex: 0 0 12px; }
.topbar-secondary .stage-pills {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
}
.topbar-secondary .search {
  flex: 0 0 180px;
  margin-bottom: 0;
}
.topbar-secondary .stage-bar-filters-btn {
  margin-left: auto;
  white-space: nowrap;
}

/* External photos strip (Google Places, display-only) — Demos UW Lite */
.ext-photos-panel {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.ext-photos-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.ext-photos-title {
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.ext-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.ext-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.ext-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms;
}
.ext-photo:hover img { transform: scale(1.04); }
.ext-photos-meta code {
  font-family: var(--f-m);
  font-size: 12px;
  background: var(--bg-0);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ===========================================================================
   IQ-family pill row — cross-module navigation above the topbar
   =========================================================================== */
.iq-family {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 21;
}
.iq-family::-webkit-scrollbar { height: 4px; }
.iq-family::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.iq-pill {
  --iq-color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: var(--f-u);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.iq-pill:hover {
  background: var(--bg-1);
  color: var(--iq-color);
  border-color: color-mix(in srgb, var(--iq-color) 30%, transparent);
  text-decoration: none;
}
.iq-pill.active {
  background: color-mix(in srgb, var(--iq-color) 16%, var(--bg-1));
  color: var(--iq-color);
  border-color: color-mix(in srgb, var(--iq-color) 50%, transparent);
}
.iq-pill.iq-pill-concept { opacity: 0.55; }
.iq-pill.iq-pill-concept:hover { opacity: 1; }
.iq-pill-icon {
  width: 16px; height: 16px;
  flex: none;
  display: inline-block;
}
.iq-pill img.iq-pill-icon {
  filter: brightness(1.15);  /* SVG icons need a touch of brightness on dark themes */
}
.iq-pill-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--iq-color);
  color: var(--bg-0);
  font-family: var(--f-d);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
}
.iq-pill-label { white-space: nowrap; }

/* Inline variant — when the IQ family row sits inside the topbar instead of
   above it. Strips the standalone-row chrome (border-bottom, sticky position,
   horizontal-scroll padding) and centers the pills against the topbar. */
.iq-family-inline {
  /* Lives in the topbar's middle grid column (auto 1fr auto). Centered + can
     shrink without forcing the topbar to wrap to a second row. */
  background: transparent;
  border-bottom: 0;
  padding: 0 12px;
  position: static;
  margin: 0;
  gap: 2px;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
}
.iq-family-inline .iq-pill {
  padding: 3px 9px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.iq-family-inline .iq-pill-label {
  display: none;
}
.iq-family-inline .iq-pill:hover .iq-pill-label,
.iq-family-inline .iq-pill.active .iq-pill-label {
  display: inline;
}
.iq-family-inline .iq-pill-icon { width: 14px; height: 14px; }
.iq-family-inline .iq-pill-mono { width: 16px; height: 16px; font-size: 12px; }
@media (max-width: 1280px) {
  .iq-family-inline .iq-pill { padding: 3px 6px; }
}

/* IQ-family row was inlined into the topbar 2026-04-28 — no longer a standalone
   row above. Topbar is now top:0; secondary sits directly under it. */
.topbar {
  top: 0;
}
.topbar-secondary {
  top: 50px;       /* topbar height (44px min + 6px padding) */
}
.filter-rack-popover {
  top: calc(50px + 50px + 4px); /* topbar + secondary + gap */
}

/* BrokerIQ contact-context inline display (Deal Detail Overview) */
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-name-line { display: flex; align-items: baseline; gap: 8px; }
.contact-broker-slot:empty { display: none; }
.broker-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  margin-top: 6px;
  font-size: 12px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.broker-context-row1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.broker-context-edits {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 4px 10px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent);
  font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 700px) { .broker-context-edits { grid-template-columns: auto 1fr; } }
.broker-context-l {
  font-family: var(--font-sans, ui-sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
}

/* Inline-editable broker field — click value to edit, blur/Enter to save */
.broker-edit {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-1);
  transition: background 0.12s, color 0.12s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.broker-edit:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-0); }
.broker-edit.empty { color: var(--text-3); font-style: italic; }
.broker-edit-input {
  font: inherit;
  background: var(--bg-1);
  border: 1px solid var(--accent);
  color: var(--text-0);
  padding: 1px 5px;
  border-radius: 3px;
  outline: none;
  min-width: 80px;
}
.broker-edit-saving { color: var(--text-3); font-style: italic; font-size: 12px; }
.broker-edit-saved { color: var(--positive); font-weight: 700; }

/* Other-deals reveal */
.broker-other-deals {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent);
}
.broker-other-deals-toggle {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 0;
  font-weight: 600;
}
.broker-other-deals-toggle:hover { color: var(--text-0); }
.broker-other-deals-chev {
  display: inline-block;
  width: 10px; text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.broker-other-deals-toggle:hover .broker-other-deals-chev { color: var(--accent); }
.broker-other-deals-panel {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.broker-other-deals-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.broker-other-deals-list a {
  color: var(--text-1);
  text-decoration: none;
  font-size: 12px;
  display: inline-block;
  padding: 3px 0;
}
.broker-other-deals-list a:hover { color: var(--accent); }
.priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.priority::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.priority-H { color: var(--positive); }
.priority-M { color: var(--warn); }
.priority-L { color: var(--text-3); }
.priority-C { color: var(--info); }

.warmth {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.warmth-hot     { background: rgba(232, 74, 95, 0.15);   color: var(--negative); }
.warmth-warm    { background: rgba(232, 163, 92, 0.15);  color: var(--warn); }
.warmth-cold    { background: rgba(91, 156, 246, 0.12);  color: var(--info); }
.warmth-dormant { background: rgba(122, 122, 122, 0.12); color: var(--text-3); }

/* Brokers subtab — flagged-broker manager + master picker */
.brokers-shell { padding: 18px 20px; }
.brokers-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1100px) { .brokers-layout { grid-template-columns: 1.4fr 1fr; } }

.brokers-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.brokers-section-head h3 {
  font-family: var(--f-d); font-size: 14px; font-weight: 600;
  color: var(--text-0); margin: 0;
}
.warn-pill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(251, 191, 36, 0.15); color: var(--warn);
  border: 1px solid var(--warn);
}

.brokers-flagged-list { display: flex; flex-direction: column; gap: 10px; }
.brokers-empty { padding: 22px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }

.broker-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  position: relative;
}
.broker-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.broker-card-name { font-size: 14px; color: var(--text-0); margin-right: 6px; }
.broker-card-actions { display: flex; align-items: center; gap: 6px; }
.broker-card-body { display: flex; flex-direction: column; gap: 8px; }
.broker-card-row {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  align-items: center; gap: 6px 12px;
  font-size: 12px;
}
.broker-card-row-contact {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.broker-notes {
  width: 100%;
  resize: vertical;
  font-size: 12px;
  font-family: var(--f-u);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--text-1);
}
.text-input-sm { padding: 2px 6px; font-size: 12px; }

.ghost-btn-sm.danger { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 40%, transparent); }
.ghost-btn-sm.danger:hover { background: color-mix(in srgb, var(--negative) 10%, transparent); }

.broker-flash-ok {
  position: absolute; top: 6px; right: 8px;
  background: var(--positive); color: var(--bg-0);
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  animation: brokerFlash 1.6s ease-out;
}
@keyframes brokerFlash { 0% { opacity: 0; transform: translateY(-4px); } 15%, 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* Picker */
.brokers-picker-controls {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  margin-bottom: 10px;
}
.brokers-picker-results { max-height: 480px; overflow-y: auto; }
.broker-picker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.broker-picker-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--bg-1);
  font-size: 12px;
}
.broker-picker-row:hover { background: var(--bg-2); }
.broker-picker-row.is-flagged { opacity: 0.55; }
.broker-picker-name strong { color: var(--text-0); }

/* Files bulk-upload progress banner */
.files-upload-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--info) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--info) 40%, var(--line));
  border-radius: 6px;
  font-size: 12px;
}
.files-upload-progress.has-errors {
  background: color-mix(in srgb, var(--negative) 10%, var(--bg-2));
  border-color: color-mix(in srgb, var(--negative) 40%, var(--line));
}
.files-upload-progress-msg { font-weight: 600; color: var(--text-0); }
.files-upload-progress-name { font-family: var(--f-m); font-size: 12px; }

/* New Deal modal — extracted broker matching block */
.nd-brokers {
  margin-top: 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}
.nd-brokers-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.nd-brokers-head strong { font-family: var(--f-d); font-size: 13px; color: var(--text-0); }
.nd-brokers-list { display: flex; flex-direction: column; gap: 6px; }
.nd-broker-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  align-items: center;
}
.nd-broker-extracted { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.nd-broker-extracted strong { color: var(--text-0); }
.nd-broker-match {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.nd-broker-pick { width: 100%; }
.nd-broker-merge-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.nd-broker-merge-toggle input { margin: 0; cursor: pointer; }

/* Destructive Delete Deal CTA in the rail */
.dd-cta-delete {
  margin-top: 14px;
  color: var(--negative) !important;
  border-color: color-mix(in srgb, var(--negative) 40%, transparent) !important;
  background: transparent;
}
.dd-cta-delete:hover {
  background: color-mix(in srgb, var(--negative) 12%, transparent);
  border-color: var(--negative) !important;
}

/* Live AI Quick-UW progress panel — replaces the old alert popup */
.uw-run-progress {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 8px;
}
.uw-run-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.uw-run-head strong { color: var(--text-0); font-family: var(--f-d); }
.uw-run-phase { margin-top: 2px; }
.uw-run-elapsed { color: var(--text-2); }
.uw-run-track {
  height: 6px;
  background: var(--bg-1);
  border-radius: 3px;
  overflow: hidden;
}
.uw-run-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--positive));
  border-radius: 3px;
  transition: width 600ms ease-out;
}
.uw-run-detail { margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════════
   UW Lite Dashboard — single-property underwriting workspace.
   Mirrors NRE Acquisition Model structure. DealIQ tokens only.
   ════════════════════════════════════════════════════════════════════ */
.uwd-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.uwd-deal-name {
  font-family: var(--f-d);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.uwd-deal-summary { line-height: 1.5; }

.uwd-section {
  margin-bottom: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.uwd-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
}
.uwd-section-head h3 {
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0;
  letter-spacing: -0.005em;
}
.uwd-section-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* Pricing & Returns KPI grid (8 tiles, 2 rows of 4) */
.uwd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 1100px) { .uwd-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.uwd-kpi {
  background: var(--bg-1);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.uwd-kpi-label {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.uwd-kpi-value {
  font-family: var(--f-m);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.uwd-kpi-sub { font-size: 12px; line-height: 1.3; }
.uwd-kpi.tone-positive .uwd-kpi-value { color: var(--positive); }
.uwd-kpi.tone-warn .uwd-kpi-value     { color: var(--warn); }
.uwd-kpi.tone-negative .uwd-kpi-value { color: var(--negative); }

/* Buy Box compliance list */
.uwd-bb-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.uwd-bb-row {
  display: grid;
  grid-template-columns: 24px 1.5fr 1fr 2fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-1);
  padding: 10px 14px;
  font-size: 12px;
}
.uwd-bb-icon { font-size: 14px; text-align: center; font-weight: 700; }
.uwd-bb-label { color: var(--text-1); font-weight: 500; }
.uwd-bb-value { color: var(--text-0); font-family: var(--f-m); font-variant-numeric: tabular-nums; }
.uwd-bb-row.tone-green   .uwd-bb-icon { color: var(--positive); }
.uwd-bb-row.tone-yellow  .uwd-bb-icon { color: var(--warn); }
.uwd-bb-row.tone-red     .uwd-bb-icon { color: var(--negative); }
.uwd-bb-row.tone-pending .uwd-bb-icon { color: var(--text-3); }
.uwd-bb-action { display: flex; gap: 6px; align-items: center; }
.uwd-bb-action input { padding: 4px 8px; font-size: 12px; min-width: 180px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text-0); }

.uwd-rec {
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.uwd-rec.rec-go      { background: rgba(95,200,154,0.15); color: var(--positive); }
.uwd-rec.rec-pass    { background: rgba(232,100,100,0.15); color: var(--negative); }
.uwd-rec.rec-review  { background: rgba(245,185,66,0.15);  color: var(--warn); }
.uwd-rec.rec-pending { background: var(--bg-2); color: var(--text-3); }

/* 5-Year Pro Forma table */
.uwd-pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.uwd-pf-table th, .uwd-pf-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
}
.uwd-pf-table thead th {
  font-family: var(--f-m); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.uwd-pf-table .row-label {
  text-align: left;
  color: var(--text-1);
  font-weight: 500;
  font-family: var(--f-u);
  letter-spacing: 0;
  text-transform: none;
}
.uwd-pf-table tr.emph-total { background: var(--bg-2); font-weight: 600; }
.uwd-pf-table tr.emph-total .row-label { color: var(--text-0); }
.uwd-pf-table td.neg { color: var(--negative); }

/* Static / Current / Pro-Forma rollup table (extends .uwd-pf-table) */
.uw-rollup-scroll { overflow-x: auto; }
.uw-rollup-table { min-width: 640px; }
.uw-rollup-table .col-static { color: var(--text-1); }
.uw-rollup-table th.col-static { color: var(--text-3); }
/* Visual divider between the Current column and the forward Pro-Forma years */
.uw-rollup-table th.col-current,
.uw-rollup-table td.col-current {
  border-right: 2px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-0);
  font-weight: 600;
}
.uw-rollup-table tr.emph-sub { font-weight: 600; }
.uw-rollup-table tr.emph-sub .row-label { color: var(--text-0); }
.uw-rollup-empty {
  font-size: 13px;
  color: var(--text-2);
  padding: 18px 14px;
  text-align: center;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 6px;
}

/* Operations grid */
.uwd-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 1100px) { .uwd-ops-grid { grid-template-columns: repeat(2, 1fr); } }
.uwd-ops-cell {
  background: var(--bg-1);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.uwd-ops-label {
  font-family: var(--f-m); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}
.uwd-ops-value {
  font-family: var(--f-m); font-size: 16px; font-weight: 500;
  color: var(--text-0); font-variant-numeric: tabular-nums;
}
.uwd-ops-hint { font-size: 12px; line-height: 1.3; }

/* Embedded UW Dashboard iframe — full-bleed, matches the deal-detail content area */
.uw-dashboard-frame {
  width: 100%;
  height: calc(100vh - 240px);  /* leave room for topbar + tabs + a bit of scroll */
  min-height: 800px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-0);
  display: block;
}
.uw-dashboard-legacy summary { background: var(--bg-2); border-radius: 6px; }
.uw-dashboard-legacy[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }

/* UWiq per-property / deal-rollup scope toggle (portfolio deals) */
.uwiq-scope-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #9fb0c8);
  background: var(--bg-2, #15223C);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.uwiq-scope-btn:hover { color: var(--text-primary, #EAF0F8); border-color: var(--accent, #1E50C8); }
.uwiq-scope-btn.active {
  color: #fff;
  background: var(--accent, #1E50C8);
  border-color: var(--accent, #1E50C8);
}

/* Unified Photos gallery — manual / OM / Google all in one grid with a source pill */
.photo-grid-unified .photo-thumb { position: relative; }
.photo-src-pill {
  position: absolute; bottom: 6px; right: 6px;   /* moved from top-right to dodge × delete */
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.pill-manual { background: #475569; } /* slate-600: white text passes AA (was --text-2, too light) */
.pill-om     { background: var(--accent); }
.pill-google { background: #4285f4; }
.pill-streetview { background: #34a853; }

/* Google Business profile card */
.biz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.biz-tile { background: var(--bg-1); border: 1px solid var(--line-soft, var(--border)); border-radius: 8px; padding: 8px 10px; }
.biz-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 3px; }
.biz-val { font-size: 13px; color: var(--text-0); word-break: break-word; }
.biz-val a { color: var(--accent); text-decoration: none; }
.biz-val a:hover { text-decoration: underline; }
.biz-muted { color: var(--text-2); font-size: 12px; }
.biz-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.biz-status-ok   { background: color-mix(in srgb, var(--positive, #34a853) 18%, transparent); color: var(--positive, #34a853); }
.biz-status-warn { background: color-mix(in srgb, var(--warn, #e0a23b) 18%, transparent); color: var(--warn, #e0a23b); }
.biz-status-bad  { background: color-mix(in srgb, var(--negative, #e0524b) 18%, transparent); color: var(--negative, #e0524b); }
.biz-hours { margin-top: 10px; font-size: 13px; }
.biz-hours summary { cursor: pointer; color: var(--text-1); }
.biz-hours ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-1); }
.biz-hours li { margin: 1px 0; }

/* Expansion potential card */
.exp-row + .exp-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft, var(--border)); }
.exp-name { font-weight: 600; color: var(--text-0); margin-bottom: 8px; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.exp-tile { background: var(--bg-1); border: 1px solid var(--line-soft, var(--border)); border-radius: 8px; padding: 8px 10px; }
.exp-hero { grid-column: span 2; }
.exp-hero.exp-yes { border-color: color-mix(in srgb, var(--positive, #34a853) 50%, transparent); background: color-mix(in srgb, var(--positive, #34a853) 8%, var(--bg-1)); }
.exp-big { font-size: 24px; font-weight: 700; color: var(--text-0); line-height: 1.1; margin: 2px 0; }
.exp-unit { font-size: 13px; font-weight: 500; color: var(--text-2); }
.exp-flag { font-size: 12px; font-weight: 600; }
.exp-yes .exp-flag { color: var(--positive, #34a853); }
.exp-no .exp-flag { color: var(--text-2); }
.exp-source { font-size: 12px; color: var(--text-2); margin-top: 8px; }

/* DD board — Under Contract default pipeline view */
#dd-board { padding: 4px 2px 12px; }
.dd-board-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 4px 10px; }
.dd-board-title { font-size: 15px; font-weight: 700; color: var(--text-0); }
.dd-table th.ddc, .dd-table td.ddc { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 4px; padding-right: 4px; font-size: 12px; }
/* DD board column optimization — tighten the date + numeric columns so the MSA
   (and other text) columns get the freed width (Matt 2026-06-22). Scoped to
   .dd-table only; the main pipeline table is unaffected. */
.dd-table th, .dd-table td { padding-top: 5px; padding-bottom: 5px; }
.dd-table th.num, .dd-table td.num { min-width: 0; padding-left: 8px; padding-right: 8px; }
/* MSA column: use the recovered space, never hard-truncate to "..."; the full
   value is also in the title tooltip. */
.dd-table th.pl-col-market, .dd-table td.pl-col-market { white-space: nowrap; padding-right: 12px; }
/* Excel-style column resize: grip on each header's right edge + clip body cells
   to the (user-set) column width. The full value stays in the title tooltip. */
.pl-col-resizer { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
.pl-col-resizer:hover, .pl-col-resizer.is-resizing { background: var(--accent); opacity: 0.5; }
.dd-table.has-colsizing td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-table.has-colsizing { width: 100%; }
.dd-table td.dd-name { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--text-2); }
.dd-table td.ddc-empty { color: var(--text-2); }
.dd-table td.ddc-done { color: var(--positive, #34a853); font-weight: 600; }
.dd-table td.ddc-overdue, .dd-board-head .ddc-overdue { color: var(--negative, #e0524b); font-weight: 600; }
.dd-table td.ddc-soon, .dd-board-head .ddc-soon { color: var(--warn, #e0a23b); font-weight: 600; }
/* Only the next-due milestone is red (.ddc-overdue); earlier passed dates are
   neutral — a passed sequence point is not a missed deadline. */
.dd-table td.ddc-passed { color: var(--text-2); }
.dd-table td.ddc-next { color: var(--negative, #e0524b); font-weight: 600; }
/* Closing date: always bold white so it stands out as the target date. When it
   is ALSO the next-up date, .ddc-overdue already makes it red and .ddc-bold
   keeps it heavy (Matt 2026-06-22). */
.dd-table td.ddc-closing { color: var(--text-primary, #fff) !important; font-weight: 800; }
.dd-table td.ddc-bold { font-weight: 800; }

/* Portfolio flag — a deal holding >1 property (Matt 2026-06-22). */
.portfolio-badge {
  display: inline-block; margin-left: 6px; vertical-align: middle; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  color: var(--accent, #1E50C8);
  background: color-mix(in srgb, var(--accent, #1E50C8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #1E50C8) 40%, var(--border));
}
.dd-prog { display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line-soft, var(--border)); font-size: 12px; }
.dd-row:hover td { background: var(--bg-2, rgba(255,255,255,0.03)); }
/* The pipeline DD board reuses tr.dd-row inside a REAL <table>, but .dd-row
   (line ~1190) is a deal-detail grid class — scope-override it back to table
   layout so the closing board renders as proper rows/columns, not stacked. */
.dd-table tr.dd-row { display: table-row; grid-template-columns: none; gap: 0; margin: 0; }
.dd-table tr.dd-row > td { display: table-cell; }

/* Pipeline inline-edit cells (fund / workflow / stage) — the original colored
   pill/badge/chip renders unchanged; a transparent native <select> is overlaid
   on top to keep the cell editable in place. */
/* Persistent editable affordance — wrap the colored pill in a visible control
   outline + an accent caret so it's obvious the cell is an editable dropdown.
   The inner pill (.pl-disp) colors are never touched. */
.pl-edit-wrap { position: relative; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line, var(--border)); border-radius: 999px; padding: 1px 8px 1px 3px; background: var(--bg-1); transition: border-color .12s, box-shadow .12s; }
.pl-edit-wrap > .pl-disp { pointer-events: none; display: inline-flex; align-items: center; }
.pl-edit-wrap::after { content: "\25BE"; font-size: 12px; line-height: 1; color: var(--accent); opacity: 0.9; pointer-events: none; }
.pl-edit-wrap:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pl-edit-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pl-edit-wrap > .pl-inline-sel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  /* The native dropdown popup inherits the SELECT's own color/background, so set
     them readable (dark on light). opacity:0 hides the closed box so the colored
     pill shows through; the OPEN popup ignores opacity and stays readable. */
  background: #ffffff; color: #14181f;
  opacity: 0; cursor: pointer; appearance: auto; font: inherit;
}
.pl-inline-sel option { color: #14181f; background: #ffffff; }
/* Save / error feedback — on the wrapper so the colored pill is never restyled. */
.pl-edit-wrap.pl-saved { border-color: var(--positive, #34a853); box-shadow: 0 0 0 1px var(--positive, #34a853); }
.pl-edit-wrap.pl-err { border-color: var(--negative, #e0524b); box-shadow: 0 0 0 1px var(--negative, #e0524b); }

/* Deal Summary — Visual Brief */
.ds-brief { margin-bottom: 16px; }
/* Investment Memo dashboard cards (deal-detail Overview) */
.im-dash { margin: 14px 0 4px; }
.im-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.im-card { background: var(--bg-1); border: 1px solid var(--line, var(--border)); border-radius: 12px; padding: 12px 14px; }
.im-card-head { font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.im-val { grid-column: 1 / -1; }
.im-val-big { font-size: 26px; font-weight: 700; color: var(--text-0); line-height: 1.1; }
.im-val-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; font-size: 13px; color: var(--text-1); }
.im-val-why { line-height: 1.5; margin-top: 4px; }
.im-mini { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.im-mini td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft, var(--border)); }
.im-mini td.num { text-align: right; white-space: nowrap; }
.badge.im-na { background: color-mix(in srgb, var(--text-tertiary) 22%, transparent); color: var(--text-secondary); }
.im-complete { grid-column: 1 / -1; }
.im-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.im-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line, var(--border)); white-space: nowrap; }
.im-chip.on { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 40%, var(--border)); background: color-mix(in srgb, var(--positive) 9%, transparent); }
.im-chip.off { color: var(--text-tertiary); }

/* ── DEAL DASHBOARD (rebuilt 2026-06-22) — one cohesive IC-grade one-pager.
   Replaces the old ds-brief gauges/facts + im-grid card pile + di-kpi-strip.
   Reuses .im-mini / .im-chip / .ds-read / .ds-exec from above. */
.dd { display: flex; flex-direction: column; gap: 16px; margin-bottom: 4px; }
/* 1 · HERO */
.dd-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.dd-hero-media { display: flex; gap: 8px; min-width: 0; }
.dd-hero-media img { border-radius: 10px; object-fit: cover; height: 150px; border: 1px solid var(--line-soft, var(--border)); }
.dd-hero-map { flex: 1 1 60%; min-width: 0; width: 100%; }
.dd-hero-facade { flex: 0 0 38%; max-width: 200px; }
.dd-hero-id { min-width: 0; }
.dd-hero-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-hero-title { font-size: 22px; font-weight: 800; color: var(--text-0); line-height: 1.15; }
.dd-hero-meta { font-size: 12.5px; color: var(--text-2); margin-top: 6px; text-transform: capitalize; }
.dd-hero-addr { font-size: 13.5px; color: var(--text-1); margin-top: 3px; }
/* 2 · KPI BAND — the one authoritative headline strip */
.dd-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 920px) { .dd-kpis { grid-template-columns: repeat(3, 1fr); } .dd-hero { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .dd-kpis { grid-template-columns: repeat(2, 1fr); } }
.dd-kpi { background: var(--bg-1); border: 1px solid var(--line, var(--border)); border-top: 2px solid var(--accent); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.dd-kpi-hero { border-top-color: var(--positive); }
.dd-kpi.is-empty { border-top-color: var(--line, var(--border)); opacity: .78; }
.dd-kpi-v { font-size: 19px; font-weight: 800; color: var(--text-0); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-kpi.is-empty .dd-kpi-v { color: var(--text-3, var(--text-tertiary)); font-weight: 400; }
.dd-kpi-l { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-top: 5px; }
/* 3-9 · BLOCKS */
.dd-block { background: var(--bg-1); border: 1px solid var(--line, var(--border)); border-radius: 12px; padding: 14px 16px; }
.dd-block:empty { display: none; }
.dd-block-head { font-size: 12px; font-weight: 700; color: var(--text-1); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; }
.dd-sub-head { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.dd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.dd-col { min-width: 0; }
.dd-val-big { font-size: 24px; font-weight: 800; color: var(--text-0); line-height: 1.1; }
.dd-val-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; font-size: 13px; color: var(--text-1); }
.dd-note { line-height: 1.5; margin-top: 4px; }
/* 6 · PHYSICAL / UNIT MIX */
.dd-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 18px; }
.dd-mini { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-soft, var(--border)); font-size: 13px; }
.dd-mini-l { color: var(--text-2); }
.dd-mini-v { color: var(--text-0); font-weight: 600; text-align: right; }
/* 9 · COMPLETENESS + ACTIONS */
.dd-foot .dd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ds-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 16px; align-items: center; }
.ds-hero-media { display: flex; gap: 8px; min-width: 0; }
.ds-hero-media img { border-radius: 10px; object-fit: cover; height: 150px; border: 1px solid var(--line-soft, var(--border)); }
.ds-map { flex: 1 1 60%; min-width: 0; width: 100%; }
.ds-facade { flex: 0 0 38%; max-width: 200px; }
.ds-gauges { display: flex; gap: 14px; }
.ds-gauge { text-align: center; }
.ds-gauge-ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gc) var(--g), var(--bg-1) 0); }
.ds-gauge-ring::before { content: ''; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-0, var(--bg-1)); }
.ds-gauge-v { position: relative; font-size: 15px; font-weight: 700; color: var(--text-0); }
.ds-gauge-l { font-size: 12px; color: var(--text-2); margin-top: 5px; }
.ds-facts { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 2px 10px; padding: 10px 12px; background: var(--bg-1); border-radius: 8px; border: 1px solid var(--line-soft, var(--border)); }
.ds-fact { display: flex; flex-direction: column; }
.ds-fact-l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.ds-fact-v { font-size: 16px; font-weight: 700; color: var(--text-0); }
.ds-read { font-size: 14px; line-height: 1.55; color: var(--text-1); margin: 6px 2px 12px; }
.ds-read-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
/* AI-generated-content provenance tag — institutional "verify before relying" cue.
   Amber/warn token so it reads as a caution, not a verified-source chip. */
.ai-prov-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--warn, #b7791f); background: color-mix(in srgb, var(--warn, #f59e0b) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 38%, transparent); padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: middle; cursor: help; white-space: nowrap; }
.ai-prov-banner { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; font-size: 12px; line-height: 1.5; color: var(--text-2, var(--muted)); margin: 0 0 10px; padding: 6px 10px; background: color-mix(in srgb, var(--warn, #f59e0b) 7%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 22%, transparent); border-radius: 8px; }
.ds-actions { display: flex; align-items: center; gap: 10px; margin: 4px 2px; }
.ds-exec { margin: 12px 2px 4px; padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--line-soft, var(--border)); border-radius: 10px; font-size: 14px; line-height: 1.6; }
.ds-exec h2 { font-size: 15px; margin: 14px 0 6px; color: var(--text-0); }
.ds-exec h2:first-child { margin-top: 0; }
.ds-exec ul { margin: 6px 0; padding-left: 20px; }
@media (max-width: 860px) { .ds-hero { grid-template-columns: 1fr; } .ds-gauges { justify-content: flex-start; } }

.photo-source-filter { display: inline-flex; gap: 4px; margin-left: 8px; }
.photo-src-btn { display: inline-flex; align-items: center; gap: 5px; }
.photo-src-btn.active { background: var(--bg-3); color: var(--text-0); }
.photo-src-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.photo-src-dot.src-manual { background: var(--text-2); }
.photo-src-dot.src-om     { background: var(--accent); }
.photo-src-dot.src-google { background: #4285f4; }
.photo-src-dot.src-streetview { background: #34a853; }
.photo-empty-hint { margin-top: 6px; }

/* Multi-file classify list during AI extraction */
.nd-classify-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.nd-classify-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: var(--bg-2);
  border-radius: 4px;
  font-size: 12px;
}
.nd-classify-name { color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-classify-status { flex: none; }

/* Per-file spinner — shown while is-running, hidden once done */
.nd-classify-spinner {
  width: 12px; height: 12px; flex: none;
  border: 2px solid var(--bg-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: nd-spin 0.8s linear infinite;
  visibility: hidden;
}
.nd-classify-row.is-running .nd-classify-spinner { visibility: visible; }
.nd-classify-row.is-done .nd-classify-spinner { display: none; }
.nd-classify-row.is-done::before { content: '✓'; color: var(--positive); font-weight: 700; flex: none; width: 12px; text-align: center; }
.nd-classify-row.is-failed .nd-classify-spinner { display: none; }
.nd-classify-row.is-failed::before { content: '✗'; color: var(--negative); font-weight: 700; flex: none; width: 12px; text-align: center; }
@keyframes nd-spin { to { transform: rotate(360deg); } }

/* Top progress bar in extraction overlay */
.nd-progress-wrap { margin: 12px 0; }
.nd-progress-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.nd-progress-counter { color: var(--text-1); font-weight: 600; }
.nd-progress-track {
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.nd-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--positive));
  border-radius: 3px;
  transition: width 250ms ease-out;
}

/* Deal switcher — clicking the rail title opens a searchable deal list */
.dd-deal-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.dd-deal-switcher .dd-rail-title { margin: 0; flex: 1; min-width: 0; }
.dd-deal-switcher-chev {
  font-size: 12px;
  color: var(--text-3);
  transition: color 120ms;
}
.dd-deal-switcher:hover .dd-deal-switcher-chev,
.dd-deal-switcher:hover .dd-rail-title { color: var(--accent); }
.dd-deal-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  padding: 8px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.dd-rail-card-body { position: relative; }
.dd-deal-switcher-search {
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--text-0);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  margin-bottom: 6px;
}
.dd-deal-switcher-search:focus { outline: none; border-color: var(--accent); }
.dd-deal-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.dd-deal-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.dd-deal-switcher-item:hover { background: var(--bg-2); }
.dd-deal-switcher-name { flex: 1; min-width: 0; color: var(--text-0); font-weight: 500; }
.dd-deal-switcher-empty { padding: 14px; text-align: center; }

/* MapIQ Phase 2 — grouped layer panel + legend + HQ pin + deal-map */
/* Drag-to-reorder handle on each group summary (matches vendor styles.css). */
.mapiq-drag { cursor: grab; user-select: none; opacity: 0.4; font-size: 12px; line-height: 1; padding: 0 1px; transition: opacity 120ms; }
.mapiq-group .mapiq-label:hover .mapiq-drag { opacity: 0.8; }
.mapiq-drag:active { cursor: grabbing; }
.mapiq-group-dragging { opacity: 0.5; outline: 1px dashed currentColor; }
.mapiq-group { padding: 0 !important; }
.mapiq-group .mapiq-label {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 4px;
  margin: 0;
}
.mapiq-group .mapiq-label::-webkit-details-marker { display: none; }
.mapiq-group .mapiq-label::before {
  content: '▾';
  font-size: 12px;
  color: var(--text-3);
  transition: transform 120ms;
}
.mapiq-group:not([open]) .mapiq-label::before { transform: rotate(-90deg); }
.mapiq-group-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }

.mapiq-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  flex: none;
}

/* Legend (bottom-left) */
.mapiq-legend {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  max-width: 220px;
  font-family: var(--f-u);
  font-size: 12px;
  color: var(--text-1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  max-height: 50vh;
  overflow-y: auto;
}
.mapiq-legend-block { margin-bottom: 6px; }
.mapiq-legend-block:last-child { margin-bottom: 0; }
.mapiq-legend-block-title {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}
.mapiq-legend-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.mapiq-legend-swatch { width: 12px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.2); flex: none; }

/* HQ pin */
.mapiq-pin-hq-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-0);
  font-size: 14px;
  font-weight: 900;
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(0,0,0,0.5);
}

/* Deal Detail map */
.deal-map {
  height: calc(100vh - 220px);
  min-height: 700px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
  overflow: hidden;
}

/* OM Viewer fields rail — sections grouped + page-scoped */
.om-fields-list { padding: 0; margin: 0; list-style: none; }
.om-section { margin-bottom: 6px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-0); }
.om-section[open] { border-color: var(--line); }
.om-section-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}
.om-section-head::-webkit-details-marker { display: none; }
.om-section-head::before {
  content: '▾';
  font-size: 12px;
  color: var(--text-3);
  margin-right: 6px;
}
.om-section:not([open]) .om-section-head::before { transform: rotate(-90deg); display: inline-block; }
.om-section-label {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  flex: 1;
}
.om-section-count {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
}
.om-section-items { list-style: none; padding: 4px 6px 6px; margin: 0; }
.om-fields-empty { padding: 14px 8px; text-align: center; }

/* MyPlace owned-portfolio pins — small gold dots */
.mapiq-pin-myplace-inner {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 2px var(--gold), 0 1px 4px rgba(0,0,0,0.5);
}

/* ===========================================================================
   Files subtab — folder tree + per-folder file rows
   =========================================================================== */
.files-shell { padding: 4px 0; }
.files-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.files-title {
  font-family: var(--f-d);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 2px;
}
.files-tree { padding: 0 0 30px; }
.files-folder { margin-bottom: 2px; }
.files-folder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.files-folder-head::-webkit-details-marker { display: none; }
.files-folder-head:hover { background: var(--bg-2); }
.files-folder-head::before {
  content: '▾';
  font-size: 12px;
  color: var(--text-3);
  margin-right: 2px;
  transition: transform 120ms;
}
.files-folder:not([open]) .files-folder-head::before { transform: rotate(-90deg); }
.files-folder-icon { font-size: 13px; }
.files-folder-name {
  flex: 1;
  font-family: var(--f-u);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}
.files-folder-count {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
}
.files-folder-files {
  list-style: none;
  margin: 0 0 0 26px;
  padding: 0;
}
.files-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.files-file-row:hover { background: var(--bg-2); }
.files-file-icon { font-size: 12px; }
.files-file-name { flex: 1; color: var(--text-1); }
.files-sp-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
}
.files-sp-link:hover { text-decoration: underline; }
.files-empty {
  padding: 14px;
  text-align: left;
}
.files-empty code {
  font-family: var(--f-m);
  font-size: 12px;
  background: var(--bg-0);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ────────────────────────────────────────────────────────────────
   Deal Detail Overview — true dashboard (mirrors /uw-dashboard
   visual primitives so Overview reads as the same product surface
   as UW Lite Dashboard rather than a dl-list view). 2026-04-28.
   ──────────────────────────────────────────────────────────────── */
.ov {
  display: flex; flex-direction: column;
  gap: 18px;
  /* Top edge alignment: .dd-main owns the 18px top inset (matches the rail's
     padding-top of 18px). .ov contributes zero on top so the right column's
     first row sits at the same y as the rail's photo card. 2026-05-12 fix
     after sibling-IQs row was removed — its 28px tax used to mask the bug. */
  padding: 0 24px 64px;
}

/* — DEAL HEADER STRIP — */
.ov-deal-header {
  display: flex; align-items: center; gap: 10px 22px;
  /* Compact header — tight padding to minimize height. */
  padding: 10px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  /* Wrap the stat pills onto a second line when the viewport is narrow —
     never show a horizontal scrollbar. */
  flex-wrap: wrap;
}
/* Keep the name/address column wide enough that the deal name never collapses
   into a one-word-per-line stack; pills scroll horizontally instead. */
.ov-deal-id { flex: 1 0 240px; min-width: 240px; }
.ov-deal-header .ov-deal-stat,
.ov-deal-header .ov-uc-price { flex: 0 0 auto; }

/* Geographic call-out — every deal gets one. MSA gets the accent treatment
   (urban core ≥50k pop). County is muted info (smaller market). City is
   the most muted (no MSA / county defined). All pop against the dark page bg. */
.ov-msa-badge {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px;
  margin-right: 4px;
}
/* Property Dossier — comprehensive per-property data view.
   Each <details> card is one source (DealIQ record, TractIQ MCP, OM extract, etc.). */
.dossier-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg-0);
}
.dossier-card.is-empty { opacity: 0.7; }
.dossier-card[open] { background: var(--bg-1); }
.dossier-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.dossier-summary::-webkit-details-marker { display: none; }
.dossier-summary::before {
  content: '▸';
  font-size: 12px;
  color: var(--text-tertiary);
  transition: transform 120ms ease-out;
}
.dossier-card[open] .dossier-summary::before { transform: rotate(90deg); }
.dossier-label { font-size: 13px; }
.dossier-provider { font-size: 12px; }
.dossier-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.dossier-chip-on  { background: color-mix(in srgb, var(--positive,#1f9d55) 14%, transparent); color: var(--positive,#1f9d55); border: 1px solid color-mix(in srgb, var(--positive,#1f9d55) 45%, transparent); }
.dossier-chip-off { background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); color: var(--text-tertiary); border: 1px solid var(--border); }
.dossier-refresh { font-size: 12px; padding: 3px 8px; }
.dossier-body { padding: 4px 12px 12px; }
.dossier-fields {
  display: grid; grid-template-columns: max-content 1fr auto auto auto; gap: 4px 12px;
  font-size: 12px;
  padding: 4px 0;
}
.dossier-field-row {
  display: contents;
}
.dossier-field-row > * {
  padding: 4px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.dossier-field-k { color: var(--text-secondary); font-weight: 600; }
.dossier-field-v { font-variant-numeric: tabular-nums; word-break: break-word; }
.conf-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.conf-pill.conf-high   { background: color-mix(in srgb, var(--positive,#1f9d55) 14%, transparent); color: var(--positive,#1f9d55); }
.conf-pill.conf-medium { background: color-mix(in srgb, var(--warn,#d6a200)    14%, transparent); color: var(--warn,#d6a200); }
.conf-pill.conf-low    { background: color-mix(in srgb, var(--negative,#dc2626) 14%, transparent); color: var(--negative,#dc2626); }
.dossier-source-tag {
  font-size: 12px; font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-1);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Portfolio property selector — sits above the Overview header strip on
   multi-property deals. Lets the user switch which property's data is shown. */
.pp-selector {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent, #4361ee) 6%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent, #4361ee) 25%, var(--border));
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.pp-tab.is-active {
  background: var(--accent, #4361ee);
  color: #fff;
  border-color: var(--accent, #4361ee);
}
.pp-tab-mark { font-size: 12px; }
.pp-tab-pos { margin-left: 4px; opacity: 0.7; }
.pp-tab-select {
  flex: 1; min-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  font-size: 13px;
  color: var(--text-primary);
}
.pp-tab-count { margin-left: auto; }
.portfolio-props-table tbody tr:hover:not([style*="background:var(--bg-1)"]) {
  background: color-mix(in srgb, var(--accent, #4361ee) 4%, transparent);
}

/* UC Price — standalone highlight near the property name, left side */
.ov-uc-price {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  margin-left: 18px; margin-right: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--positive, #1f9d55) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--positive, #1f9d55) 45%, transparent);
  line-height: 1.1;
  white-space: nowrap;
}
.ov-uc-price-l {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--positive, #1f9d55) 80%, var(--text, #0f172a));
}
.ov-uc-price-v {
  font-size: 18px; font-weight: 700;
  color: var(--positive, #1f9d55);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
/* Under-Contract price is BLURRED by default on every deal so it never shows on a
   shared / projected screen. The 👁 button (top-right of the pill) toggles
   .revealed to un-blur. Permanent — not tied to any demo mode. */
.ov-uc-price { position: relative; overflow: hidden; padding-right: 34px; }
.ov-uc-price-v, .ov-deal-stat.ov-stat-sensitive .ov-deal-stat-v { transition: filter 0.15s ease; }
/* Price-derived fields (UC pill + UC $/NRSF). Blur is now OPT-IN via Settings →
   Privacy ("Blur Under-Contract pricing on shared screens"), which sets
   html.ui-blur-uc. Default OFF (no blur). When on, the 👁 on the UC pill toggles
   .prices-revealed on the header to reveal both at once; the eye is hidden when
   blur isn't enabled. */
html.ui-blur-uc .ov-deal-header:not(.prices-revealed) .ov-uc-price-v,
html.ui-blur-uc .ov-deal-header:not(.prices-revealed) .ov-deal-stat.ov-stat-sensitive .ov-deal-stat-v { filter: blur(7px); pointer-events: none; user-select: none; }
html:not(.ui-blur-uc) .ov-uc-reveal { display: none; }
.ov-uc-reveal {
  position: absolute; top: 5px; right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 20px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--positive, #1f9d55) 40%, transparent);
  border-radius: 6px; background: transparent; cursor: pointer;
  font-size: 12px; line-height: 1; opacity: 0.72;
}
.ov-uc-reveal:hover { opacity: 1; border-color: var(--positive, #1f9d55); }
.ov-msa-badge.ov-geo-msa {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ov-msa-badge.ov-geo-county {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
}
.ov-msa-badge.ov-geo-city {
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}

/* Editable spans inside the deal-header address row should sit naturally
   alongside the punctuation and not break the flow. */
.ov-deal-addr .editable {
  font-size: 12px;
  color: var(--text-2);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 1px;
}
.ov-deal-addr .editable:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-0);
}
.ov-deal-addr .editable.empty { color: var(--text-3); font-style: italic; }
.ov-deal-name {
  font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 600; line-height: 1.12;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.ov-deal-addr {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 1px;
}
.ov-deal-divider {
  width: 1px; height: 36px;
  background: var(--line-soft);
}
.ov-deal-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 80px;
  cursor: grab; border-radius: 6px; padding: 2px 6px; margin: -2px -6px;
  transition: background 0.12s;
}
.ov-deal-stat:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ov-deal-stat.ov-stat-dragging { opacity: 0.4; cursor: grabbing; }
.ov-deal-stat-l {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ov-deal-stat-v {
  font-size: 14px; font-weight: 600;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}

/* — KPI HERO GRID — */
.ov-kpi-grid {
  display: grid;
  /* Adapts to however many KPI cards the layout pins (was hard-coded to 5). */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) { .ov-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.ov-kpi {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.ov-kpi-l {
  font-size: 12px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ov-kpi-v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px; font-weight: 500;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.ov-kpi-d {
  font-size: 12px;
  color: var(--text-2);
}
.ov-kpi-d.up { color: var(--positive); }
.ov-kpi-d.dn { color: var(--negative); }
/* Headline KPI accent — same intensity as UW Lite Dashboard's primary
   card. Border tint + accent value color. The hue lift makes the accent
   tile readable even when the value is a short string like "TBD". */
.ov-kpi.accent {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-1));
}
.ov-kpi.accent .ov-kpi-v { color: var(--accent); }
.ov-kpi.accent .ov-kpi-l { color: color-mix(in srgb, var(--accent) 70%, var(--text-3)); }

/* — SECTION CHROME — */
.ov-section {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.ov-section-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;          /* whole head row is the toggle target */
  user-select: none;
}
.ov-section-head:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* Collapse chevron — far-right of section head */
.ov-section-chev {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: transform 0.15s, color 0.15s, background 0.15s;
}
.ov-section-chev:hover { color: var(--text-0); background: var(--bg-2); }

/* Collapsed state — hide body, rotate chevron, drop the head's bottom border */
.ov-section.collapsed .ov-section-body { display: none; }
.ov-section.collapsed .ov-section-head { border-bottom: 0; }
.ov-section.collapsed .ov-section-chev { transform: rotate(-90deg); color: var(--accent); }

/* Reusable collapsible-section pattern (Property Dossier / Contacts /
   Documents). These default-collapsed and lazy-load on first expand. The
   ov-collapsed class is applied in lockstep with .collapsed by the toggle, so
   the rules below mirror the .collapsed behavior and keep the pattern
   self-contained. The whole head reads as clickable. */
.ov-collapsible .ov-section-head { cursor: pointer; }
.ov-collapsible.ov-collapsed .ov-section-body { display: none; }
.ov-collapsible.ov-collapsed .ov-section-head { border-bottom: 0; }
.ov-collapsible.ov-collapsed .ov-section-chev { transform: rotate(-90deg); color: var(--accent); }
.ov-section-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-0);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ov-section-sub {
  font-size: 12px;
  color: var(--text-2);
}
.ov-section-body { padding: 16px; }

/* — DRAG-TO-REORDER — grip handle on each top-level Overview block; order
   persists per browser. Sections drag from the grip in their head; the
   Property/Financials pair drags from a full-width grip bar above the row. */
.ov-drag-grip {
  background: transparent; border: 0;
  color: var(--text-3);
  font-size: 14px; line-height: 1;
  cursor: grab;
  padding: 4px 6px; margin-right: 2px;
  border-radius: 4px;
  flex: 0 0 auto;
  transition: color 0.15s, background 0.15s;
}
.ov-drag-grip:hover { color: var(--text-0); background: var(--bg-2); }
.ov-drag-grip:active { cursor: grabbing; }
/* Keep the title block left-aligned next to the grip; push actions + chevron
   to the right (the head is justify-content: space-between). */
.ov-section-head > div { margin-right: auto; }
.ov-row-grip-bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: -6px;
}
.ov-row-grip-bar-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
}
.ov-block-dragging {
  opacity: 0.55;
  outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}
/* Async-chain banner wrapper — drag grip sits left of the (JS-rewritten)
   banner so it survives the 6s poll re-render. Hide the whole block when the
   banner has nothing to show. */
.ov-async-block { display: flex; align-items: center; gap: 6px; }
.ov-async-block > .chain-status-banner { flex: 1 1 auto; margin: 0; }
.ov-async-block:has(> .chain-status-banner[hidden]) { display: none; }

/* — TWO-COLUMN ROW — */
.ov-row-2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 1100px) { .ov-row-2 { grid-template-columns: 1fr; } }

/* — MINI KPI TILES (Property / Financials / Market) — */
.ov-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .ov-mini-grid { grid-template-columns: repeat(2, 1fr); } }
.ov-mini {
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 6px;
  border: 1px solid var(--line-soft);
}
.ov-mini-l {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.ov-mini-v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 400;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.ov-mini-v.up { color: var(--positive); }
.ov-mini-v.dn { color: var(--negative); }
.ov-mini-v.muted { color: var(--text-3); font-weight: 400; }

/* — PROVENANCE STRIP — */
.ov-prov-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ov-prov {
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.ov-prov.ok { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 30%, transparent); }
.ov-prov.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

/* TractIQ Market section — compact comparison table (rows = metric,
   columns = 1mi/3mi/5mi). Replaces 3 stacked grids of mini-tiles with
   one dense table — same data, ~70% less vertical space. */
.ov-tractiq-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ov-tractiq-table thead th {
  text-align: right;
  padding: 6px 12px;
  font-family: var(--font-sans, ui-sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line-soft);
}
.ov-tractiq-table thead th:first-child { text-align: left; }
.ov-tractiq-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent);
  color: var(--text-1);
}
.ov-tractiq-table tbody td.num { text-align: right; }
.ov-tractiq-table tbody tr:last-child td { border-bottom: 0; }
.ov-tractiq-table tbody td.up { color: var(--positive); }
.ov-tractiq-table tbody td.dn { color: var(--negative); }
.ov-tractiq-table .ov-tractiq-l {
  font-family: var(--font-sans, ui-sans-serif);
  color: var(--text-2);
  font-size: 12px;
}
.ov-tractiq-bb {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  letter-spacing: 0.06em;
  vertical-align: middle;
}
/* Tier badges (primary/secondary/tertiary) on radius headers */
.ov-tractiq-tier {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-sans, ui-sans-serif);
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ov-tractiq-tier-primary   { color: var(--accent);   background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ov-tractiq-tier-secondary { color: var(--info);     background: color-mix(in srgb, var(--info) 15%, transparent); }
.ov-tractiq-tier-tertiary  { color: var(--text-3);   background: var(--bg-2); }

/* Web-rates nested table (3-row header, CC | NCC inside each data cell) */
.ov-tractiq-rates thead .ov-tractiq-radius-cell {
  border-left: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  padding: 8px 12px;
  font-family: var(--font-sans, ui-sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-1);
}
.ov-tractiq-rates thead .ov-tractiq-radius-cell .ov-tractiq-fac {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.ov-tractiq-rates thead .ov-tractiq-metric-row th {
  border-left: 1px solid var(--line-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 4px 12px;
  text-align: center;
  white-space: nowrap;
}
.ov-tractiq-rates thead .ov-tractiq-metric-row th:nth-child(2n+1) { border-left: 1px solid var(--line-soft); }   /* divider before each Web rate column */
.ov-tractiq-rates thead .ov-tractiq-metric-row th:nth-child(2n)   { border-left: 1px dashed color-mix(in srgb, var(--line-soft) 50%, transparent); }   /* lighter divider before YoY */
.ov-tractiq-rates thead .ov-tractiq-ccncc-row th {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  padding: 2px 12px 6px;
  text-align: center;
  white-space: nowrap;
}
.ov-tractiq-ccncc { white-space: nowrap; }
/* Body cells nowrap + use same 12px horizontal padding as header rows so
   column edges line up perfectly head-to-body. Borders also unified to
   left-on-every-cell to match the metric-row header pattern. */
.ov-tractiq-rates tbody td.num {
  white-space: nowrap;
  padding: 6px 12px;
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.ov-tractiq-rates tbody td.num:nth-child(2n+1) {
  border-left: 1px dashed color-mix(in srgb, var(--line-soft) 50%, transparent);
}
/* Radius column tinting — subtle bg distinguishes 1mi (primary, warmest)
   from 3mi (neutral) and 5mi (coolest). Applied to both header tier cells
   (radius-cell colspan=2) and body data cells (2 cells per radius). The
   th + body td nth-child math: child 1 = Size; 2-3 = 1mi pair; 4-5 = 3mi
   pair; 6-7 = 5mi pair. */
/* Radius bands get a clear warm→cool gradient so 1 / 3 / 5-mi groups are easy to
   tell apart at a glance (gold → neutral → blue). Kept light enough that the
   blue-CC / orange-NCC rate values still read cleanly. */
.ov-tractiq-rates tbody td:nth-child(2),
.ov-tractiq-rates tbody td:nth-child(3) {
  background: color-mix(in srgb, var(--gold, #e8c876) 13%, transparent);
}
.ov-tractiq-rates tbody td:nth-child(4),
.ov-tractiq-rates tbody td:nth-child(5) {
  background: color-mix(in srgb, var(--text-2) 9%, transparent);
}
.ov-tractiq-rates tbody td:nth-child(6),
.ov-tractiq-rates tbody td:nth-child(7) {
  background: color-mix(in srgb, var(--info, #6da9e0) 15%, transparent);
}
/* Header radius cells (each colspan=2) — slightly stronger than the body. */
.ov-tractiq-rates thead .ov-tractiq-radius-row th:nth-child(2) {
  background: color-mix(in srgb, var(--gold, #e8c876) 20%, transparent);
}
.ov-tractiq-rates thead .ov-tractiq-radius-row th:nth-child(3) {
  background: color-mix(in srgb, var(--text-2) 14%, transparent);
}
.ov-tractiq-rates thead .ov-tractiq-radius-row th:nth-child(4) {
  background: color-mix(in srgb, var(--info, #6da9e0) 22%, transparent);
}
/* Bold divider at the start of each radius group (Size|1mi|3mi|5mi). */
.ov-tractiq-rates tbody td:nth-child(2),
.ov-tractiq-rates tbody td:nth-child(4),
.ov-tractiq-rates tbody td:nth-child(6),
.ov-tractiq-rates thead th:nth-child(2),
.ov-tractiq-rates thead th:nth-child(4),
.ov-tractiq-rates thead th:nth-child(6) {
  border-left: 2px solid color-mix(in srgb, var(--text-2) 35%, transparent) !important;
}
.ov-tractiq-ccncc { display: inline-flex; gap: 4px; align-items: baseline; justify-content: center; }
.ov-tractiq-sep { color: var(--text-3); opacity: 0.5; margin: 0 4px; font-weight: 300; }
.ov-tractiq-cell {
  /* Fixed-width CC | NCC columns, centered in the td. Because every cell is
     the exact same width, the "|" lands on one vertical line down the column
     and CC (right-aligned) / NCC (left-aligned) stay put whether or not a
     size has a rate — a missing "—" occupies the same slot as "$1.92". */
  display: inline-grid;
  grid-template-columns: 4.6em auto 4.6em;
  column-gap: 2px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ov-tractiq-cell > .rate-cc { text-align: right; }
.ov-tractiq-cell > .rate-ncc { text-align: left; }
.ov-tractiq-cell.muted { color: var(--text-3); }
/* Inline YoY color spans nested inside .ov-tractiq-cell (Web rates table).
   Mirrors .ov-tractiq-table td.up rules so child spans pick up the same
   green/red treatment without leaning on the cell-level class. */
.ov-tractiq-cell .up { color: var(--positive); }
.ov-tractiq-cell .dn { color: var(--negative); }
.ov-tractiq-rates tbody td:nth-child(2n) { border-left: 1px solid var(--line-soft); }    /* every Web column gets a left divider */
/* ── Market demographics summary table: compact + packed left so the
   metric labels and their 1/3/5-mi values sit in one tight block instead
   of spreading across the full width with a big empty middle. Scoped with
   :not(.ov-tractiq-rates) so the wide web-rates table is untouched. */
.ov-tractiq-table:not(.ov-tractiq-rates) { width: auto; }
.ov-tractiq-table:not(.ov-tractiq-rates) thead th { padding: 4px 16px; }
.ov-tractiq-table:not(.ov-tractiq-rates) tbody td { padding: 4px 16px; }
.ov-tractiq-table:not(.ov-tractiq-rates) thead th.num,
.ov-tractiq-table:not(.ov-tractiq-rates) tbody td.num { min-width: 104px; }
.ov-tractiq-table:not(.ov-tractiq-rates) .ov-tractiq-l { min-width: 148px; }

/* ── Trade-area demographics as KPI cards (replaces the dense summary table).
   Big, high-contrast numbers that read across a large projected room. ── */
.ov-mkt-cardrow-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); margin: 2px 0 10px; }
.ov-mkt-cardrow-h .muted { text-transform: none; font-weight: 500; letter-spacing: 0; }
/* Primary-radius segmented toggle (1 / 3 / 5 mi). */
.ov-mkt-radius-toggle { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.ov-mkt-radius-toggle button { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 11px; background: transparent; color: var(--text-3); border: none; border-left: 1px solid var(--line-soft); cursor: pointer; transition: background 0.12s, color 0.12s; }
.ov-mkt-radius-toggle button:first-child { border-left: none; }
.ov-mkt-radius-toggle button:hover { color: var(--text-1); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ov-mkt-radius-toggle button.is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
/* Radius ↔ Drive-time view toggle */
.ov-mkt-toolbar { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ov-mkt-mode-toggle { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.ov-mkt-mode-toggle button { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; background: transparent; color: var(--text-3); border: none; border-left: 1px solid var(--line-soft); cursor: pointer; transition: background 0.12s, color 0.12s; }
.ov-mkt-mode-toggle button:first-child { border-left: none; }
.ov-mkt-mode-toggle button:hover { color: var(--text-1); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ov-mkt-mode-toggle button.is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
/* Comp-set-derived web-rate table (blended from selected comps). */
.ov-cwr-table { width: 100%; }
.ov-cwr-table thead th { text-align: center; padding: 6px 12px; }
.ov-cwr-table thead th.ov-tractiq-l { text-align: left; }
.ov-cwr-table tbody td { text-align: center; border-left: 1px solid var(--line-soft); }
.ov-cwr-table tbody td.ov-tractiq-l { text-align: left; border-left: none; }
.ov-cwr-n { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* Header-layout reorder modal */
.ov-order-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-order-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; cursor: grab; }
.ov-order-row.is-dragging { opacity: 0.45; }
.ov-order-grip { color: var(--text-3); cursor: grab; font-size: 13px; }
.ov-order-label { flex: 1 1 auto; font-size: 13px; color: var(--text-1); font-weight: 600; }
.ov-order-actions { display: inline-flex; gap: 4px; }
.ov-order-actions .ghost-btn-sm { padding: 2px 8px; min-width: 28px; }
.ov-order-actions .ghost-btn-sm:disabled { opacity: 0.3; cursor: not-allowed; }
.ov-order-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Partner TractIQ wordmark — navy logo on a white chip so it reads on dark UI. */
.tractiq-logo { height: 15px; width: auto; margin-left: 8px; padding: 3px 7px; background: #fff; border-radius: 5px; vertical-align: middle; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

/* Competitive-set drill-down (Market section) — toggle comps in/out of the rollup. */
.ov-comp-drilldown { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.ov-cs-head { margin-bottom: 10px; }
/* One row — each stat flexes to equal width and shrinks to fit (handles 7-8 stats). */
.ov-cs-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ov-cs-stats .ov-cs-stat { flex: 1 1 0; min-width: 92px; }
.ov-cs-stat { padding: 9px 11px; }
.ov-cs-stat-v { font-size: 18px; }
.ov-cs-stat { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 13px; }
.ov-cs-stat-v { font-size: 20px; font-weight: 700; color: var(--text-0); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ov-cs-stat.pos .ov-cs-stat-v { color: var(--positive); }
.ov-cs-stat.neg .ov-cs-stat-v { color: var(--negative); }
.ov-cs-of { font-size: 13px; font-weight: 500; color: var(--text-3); }
.ov-cs-stat-l { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.ov-cs-tablewrap { overflow-x: auto; }
.ov-cs-table { width: 100%; }
.ov-cs-table tbody tr.is-off { opacity: 0.42; }
.ov-cs-table tbody tr.is-off strong { text-decoration: line-through; }
.ov-cs-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.ov-cs-head-actions { display: inline-flex; gap: 8px; align-items: center; flex: 0 0 auto; }
/* Competitive-set map modal (iframe). */
.comp-map-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.comp-map-box { width: 82vw; height: 76vh; max-width: 1150px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,0.55); }
.comp-map-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-weight: 700; font-size: 13px; color: var(--text-1); border-bottom: 1px solid var(--line-soft); }
.comp-map-close { background: transparent; border: none; color: var(--text-2); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 7px; border-radius: 6px; }
.comp-map-close:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-0); }
.comp-map-frame { flex: 1; width: 100%; border: none; }

/* Rate Trends interactive chart */
.ov-rate-trends { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.ov-rt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ov-rt-controls { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rt-seg { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.rt-seg button { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; background: transparent; color: var(--text-3); border: none; border-left: 1px solid var(--line-soft); cursor: pointer; }
.rt-seg button:first-child { border-left: none; }
.rt-seg button.is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.rt-seg button:disabled { opacity: 0.32; cursor: not-allowed; }
.ov-rt-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rt-sz { font-family: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--text-3); border: 1px solid var(--line-soft); }
.rt-sz.is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.rt-subject.is-on { background: rgba(255,255,255,0.2) !important; color: #f0f3fa !important; }
.ov-rt-hint { margin: -4px 0 10px; }
.ov-rt-canvas-wrap { height: 340px; position: relative; }
/* Rate Analysis — second graph (per-size web rate + market avg) + data table. */
.ov-rate-analysis { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.ov-ra-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.ov-ra-table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-ra-table th, .ov-ra-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.ov-ra-table thead th { position: sticky; top: 0; background: var(--bg-1); color: var(--text-3); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; }
.ov-ra-table th.ra-series, .ov-ra-table td.ra-series { position: sticky; left: 0; z-index: 1; background: var(--bg-1); text-align: left; font-weight: 600; color: var(--text-1); min-width: 168px; }
.ov-ra-table tbody tr:last-child td { border-bottom: none; font-weight: 700; }
.ov-ra-table tbody tr:last-child td.ra-series { color: var(--text-1); }
.ra-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.ov-cs-stat.rate { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--bg-1)); }
.ov-cs-stat.rate .ov-cs-stat-v { color: var(--accent); }
/* Fixed-width CC | NCC grid so a populated cell takes the EXACT same space as
   an empty "·" cell — the table never reflows when live rates are pulled in. */
.ov-cs-rate { display: inline-grid; grid-template-columns: 3.4em auto 3.4em; column-gap: 3px; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ov-cs-rate .rate-cc { text-align: right; }
.ov-cs-rate .rate-ncc { text-align: left; }
.ov-cs-rate .ov-tractiq-sep { margin: 0; }
/* Every size column is a constant width whether it has data or not (the fixed
   grid above gives each cell the same footprint). */
.ov-cs-ratecell { text-align: center; padding-left: 6px !important; padding-right: 6px !important; }
#ov-cs-pull { white-space: nowrap; }
.ov-cs-ratehdr { text-align: center !important; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.ov-cs-sizehdr { text-align: center !important; font-size: 12px; }
.ov-cs-table th { vertical-align: bottom; }
/* Pinned subject row — accent-tinted, no checkbox, "Subject" badge in col 1. */
.ov-cs-table tbody tr.ov-cs-subject-row { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ov-cs-table tbody tr.ov-cs-subject-row td { border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ov-cs-table tbody tr.ov-cs-subject-row:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ov-cs-subject-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); white-space: nowrap; }
/* Full-width ring-band separator rows (≤1 / >1–3 / >3–5 / >5 mi). */
.ov-cs-table tbody tr.ov-cs-ring-divider td { background: var(--bg-2); padding: 5px 12px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ov-cs-table tbody tr.ov-cs-ring-divider:hover td { background: var(--bg-2); }
.ov-cs-ring-label { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.ov-cs-ring-count { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 8px; }
/* Buy Box scorecard merged into the comp-set header — pass/fail badge strip. */
.ov-cs-bb { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.ov-cs-bb-title { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.ov-cs-bb-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.ov-cs-bb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-soft); background: var(--bg-1); }
.ov-cs-bb-ic { font-weight: 800; font-size: 12px; line-height: 1; }
.ov-cs-bb-lbl { color: var(--text-1); }
.ov-cs-bb-val { color: var(--text-0); font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-cs-bb-badge.bb-pass { border-color: color-mix(in srgb, var(--positive) 45%, transparent); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.ov-cs-bb-badge.bb-pass .ov-cs-bb-ic { color: var(--positive); }
.ov-cs-bb-badge.bb-fail { border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.ov-cs-bb-badge.bb-fail .ov-cs-bb-ic { color: var(--warning); }
.ov-cs-bb-badge.bb-info .ov-cs-bb-ic { color: var(--text-3); }
.ov-mkt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 980px) { .ov-mkt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ov-mkt-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 65%, transparent), var(--bg-1));
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 16px 13px;
  position: relative;
  overflow: hidden;
}
.ov-mkt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); }
.ov-mkt-card.pos::before { background: linear-gradient(180deg, var(--positive), color-mix(in srgb, var(--positive) 30%, transparent)); }
.ov-mkt-card.neg::before { background: linear-gradient(180deg, var(--negative), color-mix(in srgb, var(--negative) 30%, transparent)); }
.ov-mkt-card-l { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; }
.ov-mkt-card-uc { font-size: 12px; font-weight: 600; color: var(--accent); margin-left: 6px; }
/* Three radii side by side — 3-mile is the emphasized hero. Color-graded
   1mi (warm) → 3mi (primary) → 5mi (cool) with a tinted, boxed hero. */
.ov-mkt-card-radii { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; align-items: stretch; }
.ov-mkt-radius { text-align: center; padding: 5px 2px 4px; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; }
.ov-mkt-radius.is-hero { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.ov-mkt-radius-v { font-size: 15px; line-height: 1.1; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ov-mkt-radius.is-hero .ov-mkt-radius-v { font-size: 24px; font-weight: 800; color: var(--text-0); letter-spacing: -0.01em; }
.ov-mkt-radius-v.pos { color: var(--positive) !important; }
.ov-mkt-radius-v.neg { color: var(--negative) !important; }
.ov-mkt-radius-l { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }
.ov-mkt-radius:nth-child(1) .ov-mkt-radius-l { color: color-mix(in srgb, var(--gold, #e8c876) 85%, var(--text-2)); }
.ov-mkt-radius:nth-child(2) .ov-mkt-radius-l { color: var(--accent); }
.ov-mkt-radius:nth-child(3) .ov-mkt-radius-l { color: var(--info, #6da9e0); }

.ov-tractiq-weighted td {
  border-top: 2px solid var(--line-soft);
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
}

/* — CONTACT / DOCUMENT ROWS, condensed inside section-body — */
.ov-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ov-list li {
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 12px;
}
.ov-list li.muted { color: var(--text-3); text-align: center; padding: 14px; }

/* — Address sub-block (editable property identity below the mini grid) — */
.ov-addr-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ov-addr-block dl {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 6px 12px; margin: 0;
}
.ov-addr-block dt {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  align-self: center;
}
.ov-addr-block dd {
  font-size: 12px; margin: 0;
  color: var(--text-0);
}

/* ────────────────────────────────────────────────────────────────
   Seller-doc smart-drop zone (Overview Seller Documents section).
   Replaces the per-doc-type catalog UI with a single drag-drop area
   that AI-classifies + auto-routes uploads. 2026-04-28.
   ──────────────────────────────────────────────────────────────── */
.sd-zone { display: flex; flex-direction: column; gap: 16px; }

/* Drop card — accent-tinted border so it reads as a "do something here" target */
.sd-smart-drop {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
}
.sd-smart-icon { font-size: 28px; line-height: 1; }
.sd-smart-body { flex: 1; }
.sd-smart-title { font-size: 13px; font-weight: 600; color: var(--text-0); margin-bottom: 2px; }
.sd-smart-sub { line-height: 1.5; }

/* Suggestions row — descriptive checklist + Run Quick UW button */
.sd-suggestions-row {
  display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.sd-suggestions-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.sd-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
@media (max-width: 700px) { .sd-checklist { grid-template-columns: 1fr; } }
.sd-checklist-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
}
.sd-checklist-item.is-done { color: var(--positive); }
.sd-checklist-tick { font-family: 'JetBrains Mono', monospace; font-size: 13px; width: 14px; text-align: center; color: var(--text-3); }
.sd-checklist-item.is-done .sd-checklist-tick { color: var(--positive); }

.sd-run-uw {
  white-space: nowrap;
  align-self: flex-start;
}
.sd-run-uw.is-disabled,
.sd-run-uw[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Recent uploaded files — flat list, AI-detected category as badge */
.sd-recent { display: flex; flex-direction: column; gap: 8px; }
.sd-recent-head { display: flex; align-items: baseline; justify-content: space-between; }
.sd-recent-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sd-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sd-recent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 12px;
}
.sd-recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.sd-recent-meta { white-space: nowrap; }
.sd-recent-empty { padding: 12px; text-align: center; }
.sd-file-del {
  background: transparent; border: 0; color: var(--text-3);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px;
  border-radius: 4px;
}
.sd-file-del:hover { color: var(--negative); background: color-mix(in srgb, var(--negative) 12%, transparent); }

/* Awaiting-OM banner inside UW Lite Dashboard iframe — defined here too so
   it inherits the same accent treatment if the iframe somehow imports styles. */
.awaiting-om-banner { padding: 0 24px; }

/* ─────────────────────────────────────────────────────────────────────
   Comp Rates subtab — TractIQ + Radius+ + StorTrack side-by-side per
   unit-size. Surface lives at /index.html → Demos → Comp Rates subview;
   fetches /api/deals/:id/market-rates.
   ───────────────────────────────────────────────────────────────────── */
.cr-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.cr-title-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-1); }
.cr-title-row code { font-size: 12px; padding: 1px 6px; border-radius: 3px; background: var(--bg-2); color: var(--text-2); }

.cr-provider-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
@media (max-width: 900px) { .cr-provider-strip { grid-template-columns: 1fr 1fr; } }
.cr-prov {
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px;
  background: var(--bg-2);
}
.cr-prov.is-loaded { border-color: color-mix(in srgb, var(--positive) 35%, var(--line-soft)); }
.cr-prov.is-empty  { opacity: 0.6; }
.cr-prov-name { font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.cr-prov-meta { font-size: 12px; color: var(--text-3); }
.cr-prov-status { padding: 1px 7px; border-radius: 3px; background: var(--bg-3); font-family: var(--f-m); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.cr-prov-status.ok { background: color-mix(in srgb, var(--positive) 22%, var(--bg-3)); color: var(--positive); }

.cr-subject { padding: 4px 0; }

.cr-empty {
  padding: 32px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: 10px; margin: 16px 20px;
  background: var(--bg-2);
}
.cr-empty-h { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }

.cr-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.cr-grid thead th {
  padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.cr-grid tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.cr-grid tbody tr:last-child td { border-bottom: 0; }
.cr-grid-size { width: 92px; color: var(--text-2); }
.cr-grid-subject { font-weight: 600; color: var(--text-1); width: 130px; }
.cr-grid-subject.cr-gap-up    { color: var(--positive); }   /* subject above blend = pricing power */
.cr-grid-subject.cr-gap-down  { color: var(--negative); }   /* subject below blend = under-priced */
.cr-grid-subject.cr-gap-flat  { color: var(--text-1); }
.cr-gap-badge {
  display: inline-block; margin-left: 8px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg-3); color: var(--text-3);
  font-family: var(--f-m); font-size: 12px; font-weight: 500;
}
.cr-gap-up   .cr-gap-badge { background: color-mix(in srgb, var(--positive) 22%, var(--bg-3)); color: var(--positive); }
.cr-gap-down .cr-gap-badge { background: color-mix(in srgb, var(--negative) 22%, var(--bg-3)); color: var(--negative); }

.cr-grid-prov, .cr-grid-blend { width: 130px; }
.cr-grid-cell, .cr-cell-blend { font-family: var(--f-m); }
.cr-cell-avg { font-size: 13px; color: var(--text-1); font-weight: 600; }
.cr-cell-meta { margin-top: 2px; }
.cr-cell-empty { color: var(--text-3); font-style: italic; text-align: center; }
.cr-cell-blend strong { color: var(--info, #5b9dff); font-size: 13px; }

.cr-weighting {
  margin: 16px 20px 24px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--bg-2);
}
.cr-weighting > summary {
  padding: 10px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; user-select: none;
  list-style: none;
}
.cr-weighting > summary::-webkit-details-marker { display: none; }
.cr-weighting > summary::before { content: '▸'; display: inline-block; margin-right: 8px; transition: transform 120ms; color: var(--text-3); }
.cr-weighting[open] > summary::before { transform: rotate(90deg); }
.cr-weight-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) { .cr-weight-row { grid-template-columns: 1fr 1fr; } }
.cr-weight-cell { display: flex; flex-direction: column; gap: 4px; }
.cr-weight-cell.is-empty { opacity: 0.45; }
.cr-weight-label { font-size: 12px; color: var(--text-2); }
.cr-weight-slider { width: 100%; }

/* Phase 2/3 deep market-data panels — profile cards, trend, concessions */
.cr-profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-soft);
}
.cr-profile-card {
  border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--bg-1); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.cr-profile-card.is-subject {
  border-color: #1f5d2a; box-shadow: 0 0 0 1px rgba(31,93,42,0.25);
  background: linear-gradient(180deg, rgba(31,93,42,0.06), transparent);
}
.cr-profile-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cr-profile-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.cr-profile-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 12px; font-size: 12px; font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.cr-profile-stats > div { display: flex; justify-content: space-between; }
.cr-profile-stats .muted { color: var(--text-3); }
.cr-weight-val { font-size: 12px; color: var(--text-3); text-align: right; }
.cr-weight-foot { padding: 0 14px 12px; line-height: 1.5; }
.cr-weight-rate { color: var(--text-2); font-size: 12px; text-align: right; }
.cr-blended-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.cr-blended-label { font-size: 12px; font-weight: 600; color: var(--text-1); }
.cr-blended-v { font-size: 18px; color: var(--accent); font-weight: 600; flex: 1; }

/* ──────────────────────────────────────────────────────────────────────
   Comp Facilities — per-ring drilldown for the institutional view.
   Each ring is its own <details>; 3-mile opens by default. Rows show
   distance/NRSF/CC/sophistication. Subject row pinned with a star.
   ────────────────────────────────────────────────────────────────────── */
.cr-facilities { margin: 16px 20px 24px; }
.cr-section-head h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-1); }
.cr-ring {
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--bg-2);
  margin-bottom: 10px; overflow: hidden;
}
.cr-ring > summary {
  padding: 10px 14px; font-size: 12.5px;
  cursor: pointer; user-select: none;
  list-style: none;
  background: color-mix(in srgb, var(--bg-1) 60%, transparent);
}
.cr-ring > summary::-webkit-details-marker { display: none; }
.cr-ring > summary::before {
  content: '▸'; display: inline-block; margin-right: 8px;
  transition: transform 120ms; color: var(--text-3);
}
.cr-ring[open] > summary::before { transform: rotate(90deg); }

.cf-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.cf-table thead th {
  text-align: left; padding: 8px 12px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cf-table thead th.num, .cf-table tbody td.num { text-align: right; }
.cf-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cf-table tbody tr:last-child td { border-bottom: none; }
.cf-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cf-table tbody tr.is-subject { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.cf-star { color: var(--accent); font-weight: 700; }
/* Climate convention: CC = blue (cooling), NCC = orange. */
.cf-cc {
  display: inline-block; padding: 1px 6px;
  background: color-mix(in srgb, #5aa9e6 18%, transparent);
  color: #5aa9e6;
  border-radius: 4px; font-size: 12px; font-weight: 600;
}
.cf-ncc {
  display: inline-block; padding: 1px 6px;
  background: color-mix(in srgb, #e0884a 18%, transparent);
  color: #e0884a;
  border-radius: 4px; font-size: 12px; font-weight: 600;
}
/* Per-comp rate numbers follow the same convention: CC value blue, NCC orange. */
.ov-cs-rate .rate-cc { color: #5aa9e6; }
.ov-cs-rate .rate-ncc { color: #e0884a; }
/* Main web-rate table: same convention. Scoped to the web-rate VALUE cell
   (.ov-tqc-rate) so the YoY-change cells keep their green/red. Header CC|NCC
   becomes a colored legend. */
.ov-tqc-rate .rate-cc { color: #5aa9e6; }
.ov-tqc-rate .rate-ncc { color: #e0884a; }
.ov-tractiq-ccncc .cc-lbl { color: #5aa9e6; font-weight: 700; }
.ov-tractiq-ccncc .ncc-lbl { color: #e0884a; font-weight: 700; }

/* Drive-time isochrone control on the deal map (white card on the light basemap). */
.dt-ctrl { background: #fff; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.3); padding: 8px 11px; font-size: 12px; color: #1c2230; line-height: 1.3; }
.dt-toggle { display: flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; user-select: none; }
.dt-toggle input { cursor: pointer; }
.dt-legend { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.dt-leg-row { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; color: #333; }
.dt-leg-row strong { color: #1c2230; }
.dt-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.cf-uc {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: color-mix(in srgb, var(--warning, #d6a200) 18%, transparent);
  color: var(--warning, #d6a200);
  border-radius: 4px; font-size: 12px; font-weight: 600;
}
.cf-soph {
  display: inline-block; padding: 2px 7px;
  border-radius: 4px; font-size: 12px; font-weight: 600;
}
.cf-soph.soph-reit  { background: color-mix(in srgb, var(--accent) 18%, transparent);   color: var(--accent); }
.cf-soph.soph-yes   { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
.cf-soph.soph-no    { background: color-mix(in srgb, var(--text-3) 15%, transparent);   color: var(--text-2); }
.cf-soph.soph-unk   { background: transparent; color: var(--text-3); }

/* Deal-scoped Reports subtab — card-grid of templates auto-bound to the
   current subject. Lighter than the global rpt-grid (no deal picker). */
.rpt-deal-shell { padding: 22px 24px; }
.rpt-deal-head { margin-bottom: 16px; }
.rpt-deal-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text-0); }
.rpt-deal-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.rpt-deal-tmpl {
  text-align: left;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  cursor: pointer;
  color: var(--text-0);
  font: inherit;
  transition: border-color 120ms, transform 120ms;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.rpt-deal-tmpl:hover:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-soft));
  transform: translateY(-1px);
}
.rpt-deal-tmpl-pages {
  position: absolute; top: 12px; right: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.rpt-deal-tmpl-name { font-size: 13.5px; font-weight: 600; color: var(--text-0); padding-right: 60px; }
.rpt-deal-tmpl-ds { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.rpt-deal-tmpl-cta {
  margin-top: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--accent);
}
.rpt-deal-tmpl.is-disabled { opacity: 0.45; cursor: not-allowed; }
.rpt-deal-tmpl.is-disabled .rpt-deal-tmpl-cta { color: var(--text-3); }

/* Closest MyPlace pills — rendered into the LEFT rail card so they're
   visible on every subtab (Overview, Comp Rates, UW Lite, etc.). The
   pills below are also reused inside the Closest MyPlace section table. */
.dd-rail-cmp-host:empty { display: none; }
.dd-rail-cmp-host { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.dd-rail-cmp-pills-l {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.dd-rail-cmp-pills {
  display: flex; gap: 5px; flex-wrap: wrap;
}
/* MyPlace brand-tinted pills — uses --myplace-blue + --myplace-yellow from
   themes.css so the pills read as "this is MyPlace data" at a glance. */
.dd-rail-cmp-pills .cmp-pill {
  padding: 3px 8px 3px 4px;
  font-size: 12px;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--myplace-blue) 55%, transparent);
  background: color-mix(in srgb, var(--myplace-blue) 12%, var(--bg-2));
}
.dd-rail-cmp-pills .cmp-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--myplace-yellow);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--myplace-blue) 70%, transparent);
  flex: none;
}
.dd-rail-cmp-pills .cmp-pill-name { font-weight: 600; color: var(--myplace-blue); }
.dd-rail-cmp-pills .cmp-pill-dist { color: var(--text-2); font-variant-numeric: tabular-nums; }
.dd-rail-cmp-pills-l { color: var(--myplace-blue); }
/* Clickable pill variant — links the closest MyPlace property to its Closed deal. */
.dd-rail-cmp-pills a.cmp-pill-link { text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; }
.dd-rail-cmp-pills a.cmp-pill-link:hover {
  background: color-mix(in srgb, var(--myplace-blue) 22%, var(--bg-2));
  border-color: var(--myplace-blue);
}
.cmp-table a, .im-mini a { color: var(--myplace-blue); text-decoration: none; }
.cmp-table a:hover, .im-mini a:hover { text-decoration: underline; }

/* MyPlace brand callout — applied wherever the word "MyPlace" appears as
   a labeled section. Uses --myplace-blue + --myplace-yellow tokens from
   themes.css so the visual language stays consistent across themes. */
.mp-brand .ov-section-title {
  color: var(--myplace-blue);
}
.mp-brand-mark {
  display: inline-block;
  padding: 1px 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.92em;
  color: #0a1a2e;
  background: var(--myplace-yellow);
  border-radius: 4px;
  margin-right: 6px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--myplace-blue) 60%, transparent);
}
/* Closest MyPlace table — when rendered inside a .mp-brand section, the
   subject-style accent uses the MyPlace blue. */
.mp-brand .cmp-table thead th {
  color: color-mix(in srgb, var(--myplace-blue) 80%, var(--text-3));
  border-bottom-color: color-mix(in srgb, var(--myplace-blue) 25%, var(--line-soft));
}
.mp-brand .cmp-table tbody tr:hover {
  background: color-mix(in srgb, var(--myplace-blue) 7%, transparent);
}

/* Legacy .cmp-pills strip in the section body — kept for reference; no
   longer used since the pills moved to the rail. */
.cmp-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.cmp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
  font-size: 12px;
}
.cmp-pill-rank {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 2px 6px;
  border-radius: 999px;
}
.cmp-pill-name {
  font-weight: 600;
  color: var(--text-0);
}
.cmp-pill-dist {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Closest MyPlace table — Overview section. Compact, distance-first. */
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp-table thead th {
  text-align: left; padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3);
  border-bottom: 1px solid var(--line-soft);
}
.cmp-table thead th.num, .cmp-table tbody td.num { text-align: right; }
.cmp-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* ===========================================================================
   Sticky OM ingest progress toast (.om-ingest-toast)
   Bottom-right floating panel that follows user across views during OM
   extraction. Stacks multiple cards if multiple OMs are mid-ingest.
   Hidden when empty.
   =========================================================================== */
.om-ingest-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;                        /* above modals' backdrop, below modal */
  display: flex;
  flex-direction: column-reverse;       /* newest on top */
  gap: 10px;
  pointer-events: none;                 /* let clicks pass through gaps */
  max-width: 320px;
}
.om-ingest-toast[hidden] { display: none; }

.om-toast-card {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line, var(--border));
  border-left: 3px solid var(--info);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.18);
  font-family: inherit;
  color: var(--text-1);
  animation: om-toast-slide-in 220ms ease-out;
}
.om-toast-card.is-running { border-left-color: var(--info); }
.om-toast-card.is-done    { border-left-color: var(--positive); }
.om-toast-card.is-failed  { border-left-color: var(--negative); }

@keyframes om-toast-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.om-toast-dismiss {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.om-toast-dismiss:hover { background: var(--bg-2); color: var(--text-1); }

.om-toast-body {
  background: transparent; border: none; padding: 0;
  text-align: left; cursor: pointer; color: inherit;
  font: inherit;
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
}
.om-toast-body:hover .om-toast-name { color: var(--accent, var(--info)); }

.om-toast-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
}
.om-toast-phase {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.om-toast-phase::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.om-toast-phase.phase-running { color: var(--info);     background: color-mix(in srgb, var(--info) 14%, transparent); }
.om-toast-phase.phase-done    { color: var(--positive); background: color-mix(in srgb, var(--positive) 14%, transparent); }
.om-toast-phase.phase-failed  { color: var(--negative); background: color-mix(in srgb, var(--negative) 14%, transparent); }

.om-toast-elapsed { color: var(--text-2); }

.om-toast-name {
  font-size: 13px; font-weight: 600; color: var(--text-0);
  line-height: 1.25;
  transition: color 120ms ease;
  /* Wrap on long names rather than truncating — sticky toast should be readable */
  word-break: break-word;
}
.om-toast-where { font-size: 12px; }
.om-toast-sub   { font-size: 12px; }

/* Indeterminate progress bar — soft sweep while extraction is running */
.om-toast-bar {
  margin-top: 4px;
  height: 3px;
  background: color-mix(in srgb, var(--info) 18%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.om-toast-bar-fill {
  position: absolute; top: 0; bottom: 0;
  width: 38%;
  background: var(--info);
  border-radius: 999px;
  animation: om-toast-bar-sweep 1.4s ease-in-out infinite;
}
@keyframes om-toast-bar-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .om-toast-card { animation: none; }
  .om-toast-bar-fill { animation: none; left: 0; width: 100%; opacity: 0.55; }
}

.om-toast-cta {
  align-self: stretch;
  width: 100%;
  margin-top: 4px;
}

/* ===========================================================================
   DealIQ AI chat — global slide-out panel + deal-detail subtab.
   Both surfaces share the .dealiq-chat-host shell.
   =========================================================================== */
.dealiq-chat-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(440px, 100vw);
  z-index: 1300;                      /* above OM toast */
  background: var(--bg-1);
  border-left: 1px solid var(--line, var(--border));
  box-shadow: -12px 0 32px rgba(0,0,0,0.35);
  display: flex;
  animation: chat-panel-in 220ms ease-out;
}
.dealiq-chat-panel[hidden] { display: none; }
@keyframes chat-panel-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* REIT Intel deep-dive drawer (REITiq) — slides in from the right when a
   league-table row is clicked. Mirrors the chat-panel slide-in idiom but uses
   an explicit .open class so JS can animate close as well. */
.reit-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(560px, 100vw);
  z-index: 1300;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(40px);
  opacity: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.reit-drawer.open { transform: translateX(0); opacity: 1; }
.reit-drawer[hidden] { display: none; }
.reit-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1299;
  background: rgba(0,0,0,0.32);
}
.reit-drawer-scrim[hidden] { display: none; }
.reit-league-row:hover { background: var(--bg-2); }
.reit-league-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dealiq-chat-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;                       /* allow inner stream to scroll */
  background: var(--bg-1);
  color: var(--text-1);
}
/* Deal-detail subtab variant — fills the subview */
.subview[data-sub="ask-ai"] {
  height: 100%;
}
.subview[data-sub="ask-ai"] .dealiq-chat-host {
  height: 100%;
  min-height: 540px;
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
}

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, var(--border));
  flex: none;
}
.chat-head-title { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.chat-head-actions { display: flex; gap: 6px; }
.chat-context-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--info);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.chat-context-pill.chat-context-global {
  background: color-mix(in srgb, var(--text-2) 14%, transparent);
  color: var(--text-2);
}

.chat-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}

.chat-empty { padding: 24px 8px; color: var(--text-2); font-size: 13px; }
.chat-empty-h { font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.chat-empty-suggestions { margin: 0; padding: 0 0 0 18px; }
.chat-empty-suggestions li { margin: 4px 0; line-height: 1.4; }

.chat-msg { display: flex; flex-direction: column; gap: 6px; }
.chat-msg.chat-user { align-items: flex-end; }
.chat-msg.chat-assistant { align-items: flex-start; }

.chat-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px; line-height: 1.5;
  word-wrap: break-word;
  white-space: normal;
}
.chat-user .chat-bubble {
  background: color-mix(in srgb, var(--info) 18%, var(--bg-2));
  color: var(--text-0);
  border: 1px solid color-mix(in srgb, var(--info) 32%, var(--border));
  border-bottom-right-radius: 4px;
}
.chat-bubble-assistant {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--line-soft, var(--border));
  border-bottom-left-radius: 4px;
}
.chat-bubble code {
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.chat-code {
  background: var(--bg-1);
  padding: 8px 10px; border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
}
.chat-md-table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.chat-md-table th, .chat-md-table td {
  border: 1px solid var(--line-soft, var(--border));
  padding: 4px 8px; text-align: left;
}
.chat-md-table th { background: var(--bg-1); font-weight: 600; }

/* Tool-call chip — small, sits above the assistant bubble */
.chat-tool {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--positive) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--positive) 30%, var(--border));
  border-radius: 999px;
  font-size: 12px;
  align-self: flex-start;
}
.chat-tool.is-failed {
  background: color-mix(in srgb, var(--negative) 10%, transparent);
  border-color: color-mix(in srgb, var(--negative) 30%, var(--border));
}
.chat-tool-name { font-weight: 600; }

.chat-thinking {
  align-self: flex-start;
  font-size: 12px;
  margin-bottom: 4px;
}
.chat-thinking summary { cursor: pointer; user-select: none; }
.chat-thinking-body {
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-left: 2px solid var(--text-3);
  color: var(--text-2);
  white-space: pre-wrap;
  border-radius: 4px;
}

.chat-form {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line, var(--border));
  flex: none;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft, var(--border));
  border-radius: 8px;
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  line-height: 1.5;
}
.chat-input:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent);
}
.chat-form-foot {
  display: flex; align-items: center; justify-content: space-between;
}

/* ===========================================================================
   Buy Box scorecard + Top Comps table — Deal Detail Overview.
   Sources: GET /api/deals/:id/buybox.
   =========================================================================== */
.bb-checks {
  display: grid;
  /* 4 checks on one row when there's room (each min 180px). Narrower min
     than the old 260px so the Overview Buy Box (4 checks) doesn't wrap to
     a second row on standard widths. 2026-05-12 per Matt. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.bb-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft, var(--border));
  border-radius: 8px;
  background: var(--bg-2);
  font-size: 12.5px;
}
.bb-check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  flex: none;
}
.bb-pass .bb-check-icon { background: color-mix(in srgb, var(--positive) 18%, transparent); color: var(--positive); }
.bb-fail .bb-check-icon { background: color-mix(in srgb, var(--negative) 18%, transparent); color: var(--negative); }
.bb-info .bb-check-icon { background: color-mix(in srgb, var(--text-3) 18%, transparent); color: var(--text-2); }
.bb-pass { border-left: 3px solid var(--positive); }
.bb-fail { border-left: 3px solid var(--negative); }
.bb-info { border-left: 3px solid var(--text-3); }
.bb-check-label { flex: 1 1 auto; color: var(--text-1); }
.bb-check-val { color: var(--text-0); font-weight: 600; }

.bb-comps { margin-top: 6px; }
.bb-comps > summary { cursor: pointer; color: var(--text-2); font-size: 12px; padding: 6px 0; user-select: none; }
.bb-comps[open] > summary { color: var(--text-1); }
.bb-comps-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; margin-top: 4px;
}
.bb-comps-table th {
  font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft, var(--border));
  text-align: left; background: var(--bg-2);
  position: sticky; top: 0;
}
.bb-comps-table td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft, var(--border)) 60%, transparent);
  vertical-align: top;
}
.bb-comps-table tr.is-subject { background: color-mix(in srgb, var(--info) 10%, transparent); }
.bb-comps-table tr.is-uc      { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.bb-comps-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bb-comps-table .cell-cc { text-align: center; }
.bb-cc-yes {
  display: inline-block;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--info) 18%, transparent);
  color: var(--info);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.bb-soph-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.bb-soph-tag.soph-yes { background: color-mix(in srgb, var(--positive) 18%, transparent); color: var(--positive); }
.bb-soph-tag.soph-no  { background: color-mix(in srgb, var(--text-3) 18%, transparent);  color: var(--text-2); }
.bb-soph-tag.soph-unk { background: var(--bg-1); color: var(--text-3); }

/* ===========================================================================
   Field-lock editing — locked-by-default values on Overview with audit trail.
   GET /api/deals/:id/overrides + POST /:id/override.
   =========================================================================== */
.editable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms ease;
  border: 1px solid transparent;
}
.editable:hover { background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.editable.empty .editable-text { color: var(--text-3); font-style: italic; }
.editable-lock {
  font-size: 12px; opacity: 0.55;
  transition: opacity 100ms ease;
  flex: none;
}
.editable:hover .editable-lock { opacity: 1; }
.editable-text { font-variant-numeric: tabular-nums; }

/* Override modal */
.override-modal { width: 460px; max-width: 92vw; }
.ovr-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  margin: 6px 0;
  font-size: 12px;
  align-items: center;
}
.ovr-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  font-weight: 500;
}
.ovr-current { font-family: var(--font-mono, 'JetBrains Mono', monospace); color: var(--text-1); }
.ovr-source-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ovr-source-tag.src-om       { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ovr-source-tag.src-tractiq  { background: color-mix(in srgb, var(--info) 16%, transparent);   color: var(--info); }
.ovr-source-tag.src-storedge { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); }
.ovr-source-tag.src-override { background: color-mix(in srgb, var(--warn) 16%, transparent);   color: var(--warn); }
.ovr-source-tag.src-manual   { background: var(--bg-1); color: var(--text-2); border: 1px solid var(--line-soft, var(--border)); }

.ovr-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px;
  font-size: 12px;
}
.ovr-req { color: var(--negative); font-weight: 700; margin-left: 2px; }
.ovr-input, .ovr-textarea {
  background: var(--bg-2);
  border: 1px solid var(--line-soft, var(--border));
  border-radius: 6px;
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
}
.ovr-textarea { font-family: inherit; resize: vertical; min-height: 70px; }
.ovr-input:focus, .ovr-textarea:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent);
}

/* Override-history table on Audit subtab */
.ovr-history {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}
.ovr-history th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft, var(--border));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.ovr-history td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft, var(--border)) 50%, transparent);
  vertical-align: top;
}
.ovr-history-old { color: var(--text-3); text-decoration: line-through; }
.ovr-history-new { color: var(--text-0); font-weight: 600; }

/* Overview layout customizer — pinned-vs-empty styling + ⚙ trigger button. */
.ov-layout-btn {
  margin-left: auto;
  align-self: center;
  padding: 2px 8px;
  font-size: 12px;
  opacity: 0.55;
  transition: opacity 100ms;
}
.ov-layout-btn:hover { opacity: 1; }

.ov-deal-stat.is-empty .ov-deal-stat-v,
.ov-kpi.is-empty .ov-kpi-v {
  color: var(--text-3);
  font-style: italic;
  opacity: 0.7;
}

/* Deal Detail header density + empty-state polish (2026-06-30 overhaul).
   Tighter header rhythm; the muted "—" reads as data (not italic emphasis)
   so empty values land consistently across the KPI strip. Data unchanged. */
.ov-deal-header { gap: 8px 20px; }
.ov-deal-stat.is-empty .ov-deal-stat-v {
  font-style: normal;
  letter-spacing: 0.01em;
}
.ov-deal-stat-l { font-size: 11px; letter-spacing: 0.07em; }
.ov-prov-strip { margin-top: 14px; }

.ov-layout-section { margin-top: 16px; }
.ov-layout-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  font-weight: 600;
}
.ov-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}
.ov-layout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1);
}
.ov-layout-row:hover { background: var(--bg-2); }
.ov-layout-row input[type="checkbox"] { margin: 0; cursor: pointer; }

/* =====================================================
   Macro Overlay (IndicatorIQ panel inside deal Overview)
   ===================================================== */
.ov-iq-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: rgba(217, 119, 87, 0.12);
  color: var(--terra, #d97757);
  border: 1px solid rgba(217, 119, 87, 0.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}

.mo-ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 14px;
}
.mo-ind {
  background: var(--bg-2, #f5f5f4);
  border: 1px solid var(--border, #e5e5e3);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--coincident, #f5b942);
}
.mo-ind.mo-leading    { border-left-color: var(--leading, #38bdf8); }
.mo-ind.mo-coincident { border-left-color: var(--coincident, #f5b942); }
.mo-ind.mo-lagging    { border-left-color: var(--lagging, #c084fc); }

.mo-ind-l {
  font-size: 12px;
  color: var(--muted, #888);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mo-ind-v {
  font-size: 18px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mo-ind-yoy {
  font-size: 12px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.mo-ind-yoy.pos { color: #16a34a; }
.mo-ind-yoy.neg { color: #dc2626; }

.mo-spark {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 6px;
  opacity: 0.85;
}

.mo-ind-date {
  font-size: 12px;
  color: var(--muted, #888);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  margin-top: 4px;
}

.mo-divider {
  border-top: 1px solid var(--border, #e5e5e3);
  margin: 4px 14px 0;
}

.mo-reit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 14px 8px;
}
.mo-reit-head h4 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #888);
  font-weight: 600;
}

.mo-reit-table {
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  border-collapse: collapse;
  font-size: 13px;
}
.mo-reit-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #6B7892);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.mo-reit-table thead th.num { text-align: right; }
.mo-reit-table tbody tr { border-top: 1px solid var(--border); }
.mo-reit-table tbody tr:first-child { border-top: 0; }
.mo-reit-table tbody tr:hover { background: color-mix(in srgb, var(--accent, #C26B4A) 9%, transparent); }
.mo-reit-table td { padding: 9px 10px; vertical-align: middle; color: var(--text-primary, #E8ECF5); }
.mo-reit-table td.num { text-align: right; font-family: ui-monospace, "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.mo-reit-table td.num.pos { color: #34D399; }
.mo-reit-table td.num.neg { color: #F87171; }

.mo-macro-name {
  font-size: 12.5px;
  color: var(--text-primary, #E8ECF5);
}
.mo-arrow {
  color: var(--accent, #C26B4A);
  font-family: ui-monospace, monospace;
  margin: 0 4px;
}
.mo-reit-tk {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
  background: var(--bg-1);
  color: var(--text-primary, #E8ECF5);
}
.reit-tk-psa  { background: rgba(56,189,248,0.18);  color: #7DD3FC; }
.reit-tk-exr  { background: rgba(52,211,153,0.18);  color: #6EE7B7; }
.reit-tk-cube { background: rgba(192,132,252,0.20); color: #D8B4FE; }
.reit-tk-nsa  { background: rgba(245,185,66,0.18);  color: #FCD34D; }
.reit-tk-sma  { background: rgba(251,113,133,0.18); color: #FDA4AF; }
.reit-tk-self { background: rgba(45,212,191,0.18);  color: #5EEAD4; }
.reit-tk-lsi  { background: rgba(232,121,166,0.20); color: #F5A8C9; }
.reit-tk-sst1 { background: rgba(148,163,184,0.22); color: #CBD5E1; }
.mo-reit-metric {
  font-size: 12px;
  color: var(--text-secondary, #93A1B8);
  font-family: ui-monospace, monospace;
}

.mo-lag-pill {
  display: inline-block;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--accent, #C26B4A) 14%, transparent);
  color: #E8B4A0;
  border: 1px solid color-mix(in srgb, var(--accent, #C26B4A) 35%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
}

.mo-foot {
  padding: 0 14px 14px;
  line-height: 1.55;
}

/* Macro Overlay - localized (MSA + county) sub-section */
.mo-section-head, .mo-local-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 14px 4px;
}
.mo-section-head h4, .mo-local-head h4 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #888);
  font-weight: 600;
}
.mo-ind.mo-local { border-left-color: var(--terra, #d97757); }
.mo-local-geo {
  display: block;
  font-size: 12px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: var(--terra, #d97757);
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-transform: none;
  font-weight: 500;
}
.mo-local-empty { padding: 12px 14px; }

/* Migration net direction + IRS sub-line */
.mo-ind-v.pos { color: #34D399; }
.mo-ind-v.neg { color: #F87171; }
.mo-mig-irs { margin-top: 4px; }

/* FEMA insurance / cat-risk callout */
.mo-fema {
  margin: 0 14px 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-2, #f5f5f4); border: 1px solid var(--border, #e5e5e3);
  border-left: 3px solid var(--text-tertiary, #6B7892);
}
.mo-fema-elevated { border-left-color: #F87171; background: color-mix(in srgb, #F87171 9%, var(--bg-2, #f5f5f4)); }
.mo-fema-moderate { border-left-color: #FBBF24; background: color-mix(in srgb, #FBBF24 9%, var(--bg-2, #f5f5f4)); }
.mo-fema-low      { border-left-color: #34D399; background: color-mix(in srgb, #34D399 8%, var(--bg-2, #f5f5f4)); }
.mo-fema-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mo-fema-badge {
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.mo-fema-badge.mo-tone-caution     { color: #FCA5A5; background: rgba(248,113,113,0.18); }
.mo-fema-badge.mo-tone-watch       { color: #FCD34D; background: rgba(251,191,36,0.18); }
.mo-fema-badge.mo-tone-opportunity { color: #6EE7B7; background: rgba(52,211,153,0.18); }
.mo-fema-stat { font-size: 12.5px; color: var(--text-primary, #E8ECF5); font-variant-numeric: tabular-nums; }
.mo-fema-stat strong { font-weight: 700; }
.mo-fema-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.mo-fema-chip {
  font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-1, #fff); color: var(--text-secondary, #93A1B8);
  border: 1px solid var(--border, #e5e5e3); font-family: ui-monospace, monospace;
}
.mo-fema-do { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-primary, #E8ECF5); }

/* ===== Market Signals — readable dark-theme treatment ===== */
/* Grain badges */
.mo-grain {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
  vertical-align: middle; border: 1px solid transparent; line-height: 1.5;
}
.mo-grain.g-local      { color: #F0B49A; background: color-mix(in srgb, var(--accent, #C26B4A) 22%, transparent); border-color: color-mix(in srgb, var(--accent, #C26B4A) 48%, transparent); }
.mo-grain.g-national   { color: var(--text-secondary, #93A1B8); background: rgba(147,161,184,0.14); border-color: rgba(147,161,184,0.30); }
.mo-grain.g-leading    { color: #7DD3FC; background: rgba(56,189,248,0.16); }
.mo-grain.g-coincident { color: #FCD34D; background: rgba(245,185,66,0.16); }
.mo-grain.g-lagging    { color: #D8B4FE; background: rgba(192,132,252,0.18); }

/* Section frames: This Market / Industry-Wide */
.mo-frame { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: var(--bg-1); }
.mo-frame-local    { border-left: 3px solid var(--accent, #C26B4A); }
.mo-frame-national { border-left: 3px solid var(--text-tertiary, #6B7892); }
details.mo-frame[open] > summary.mo-frame-head { margin-bottom: 12px; }
summary.mo-frame-head { cursor: pointer; list-style: none; }
summary.mo-frame-head::-webkit-details-marker { display: none; }
.mo-frame-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mo-frame-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary, #E8ECF5); display: flex; align-items: center; gap: 9px; }
.mo-frame-head .muted, .mo-frame-head .small { color: var(--text-tertiary, #6B7892); }

/* Per-indicator "what it means" expander */
.mo-why { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.mo-why > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-secondary, #93A1B8); padding: 2px 0;
}
.mo-why > summary:hover { color: var(--text-primary, #E8ECF5); }
.mo-why > summary::-webkit-details-marker { display: none; }
.mo-why > summary::before { content: "ⓘ "; }
.mo-why[open] > summary { color: var(--accent, #C26B4A); }
.mo-what { font-size: 12.5px; line-height: 1.55; color: var(--text-primary, #E8ECF5); margin: 8px 0; }
.mo-do {
  font-size: 12.5px; line-height: 1.5; color: var(--text-primary, #E8ECF5);
  margin: 8px 0; padding: 10px 12px; border-radius: 8px; border-left: 3px solid;
}
.mo-do b { font-weight: 700; }
.mo-do.mo-tone-opportunity { border-color: #34D399; background: rgba(52,211,153,0.12); }
.mo-do.mo-tone-caution     { border-color: #F87171; background: rgba(248,113,113,0.12); }
.mo-do.mo-tone-watch       { border-color: #FBBF24; background: rgba(251,191,36,0.12); }
.mo-watch-line { font-size: 12px; line-height: 1.5; color: var(--text-secondary, #93A1B8); margin-top: 7px; }
.mo-when {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: #FCD34D; background: rgba(251,191,36,0.16); border-radius: 5px; padding: 2px 7px; margin-left: 5px;
  white-space: nowrap;
}

/* Action Read — the hero recommendation panel */
.mo-action {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
  background: var(--bg-1); box-shadow: inset 3px 0 0 var(--accent, #C26B4A);
}
.mo-action-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.mo-action-hd h4 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary, #E8ECF5); }
.mo-action-hd .muted, .mo-action-hd .small { color: var(--text-tertiary, #6B7892); }
.mo-act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mo-act-item {
  display: grid; grid-template-columns: 84px 1fr; gap: 13px; align-items: start;
  padding: 12px 14px; border-radius: 10px; background: var(--bg-2); border-left: 3px solid var(--border);
}
.mo-act-item.mo-tone-opportunity { border-left-color: #34D399; }
.mo-act-item.mo-tone-caution     { border-left-color: #F87171; }
.mo-act-item.mo-tone-watch       { border-left-color: #FBBF24; }
.mo-act-tag {
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 6px; text-align: center; margin-top: 1px; white-space: nowrap;
}
.mo-act-item.mo-tone-opportunity .mo-act-tag { color: #6EE7B7; background: rgba(52,211,153,0.18); }
.mo-act-item.mo-tone-caution     .mo-act-tag { color: #FCA5A5; background: rgba(248,113,113,0.18); }
.mo-act-item.mo-tone-watch       .mo-act-tag { color: #FCD34D; background: rgba(251,191,36,0.18); }
.mo-act-body { min-width: 0; }
.mo-act-hd { font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-primary, #E8ECF5); }
.mo-act-hd b { font-weight: 700; }
.mo-act-val { font-family: ui-monospace, "JetBrains Mono", monospace; font-weight: 700; color: var(--text-primary, #E8ECF5); }
.mo-act-yoy { font-size: 12px; font-family: ui-monospace, monospace; font-weight: 600; }
.mo-act-yoy.pos { color: #34D399; }
.mo-act-yoy.neg { color: #F87171; }
.mo-act-do { font-size: 13px; line-height: 1.55; color: var(--text-primary, #E8ECF5); margin-top: 6px; }

/* ===== Signal Board — pipeline market-signal roll-up ===== */
.signal-board { padding: 18px 22px; }
.sb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sb-head h2 { margin: 0 0 4px; font-size: 18px; color: var(--text-primary, #E8ECF5); letter-spacing: -0.01em; }
.sb-avg { text-align: center; padding: 8px 18px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; }
.sb-avg-num { font-size: 26px; font-weight: 800; color: var(--accent, #C26B4A); line-height: 1.1; }
.sb-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb-table thead th { text-align: left; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary, #6B7892); background: var(--bg-2); border-bottom: 1px solid var(--border); font-weight: 700; }
.sb-table thead th.num { text-align: right; }
.sb-table td { padding: 11px 14px; color: var(--text-primary, #E8ECF5); border-top: 1px solid var(--border); vertical-align: middle; }
.sb-table tbody tr:first-child td { border-top: 0; }
.sb-table td.num { text-align: right; font-family: ui-monospace, "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.sb-table td.num.pos { color: #34D399; }
.sb-table td.num.neg { color: #F87171; }
.sb-row { cursor: pointer; transition: background 100ms; }
.sb-row:hover { background: color-mix(in srgb, var(--accent, #C26B4A) 9%, transparent); }
.sb-row:focus-visible { outline: 2px solid var(--accent, #C26B4A); outline-offset: -2px; }
.sb-name { font-weight: 600; }
.sb-stage { display: block; font-size: 12px; color: var(--text-tertiary, #6B7892); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.sb-market { color: var(--text-secondary, #93A1B8); font-size: 12.5px; }
.sb-topsig { font-size: 12px; white-space: nowrap; }
.sb-score-cell { white-space: nowrap; text-align: right; }
.sb-score { display: inline-block; width: 64px; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; vertical-align: middle; margin-right: 9px; }
.sb-score-bar { height: 100%; border-radius: 999px; }
.sb-score.sb-strong .sb-score-bar { background: #34D399; }
.sb-score.sb-mid    .sb-score-bar { background: #FBBF24; }
.sb-score.sb-weak   .sb-score-bar { background: #F87171; }
.sb-score-num { font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; }

/* Market Signals — concrete timing chips (act-by + impact date) */
.mo-act-when, .mo-when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.mo-when.mo-when-act    { color: #FCD34D; background: rgba(251,191,36,0.18); border: 1px solid rgba(251,191,36,0.30); }
.mo-when.mo-when-effect { color: #7DD3FC; background: rgba(56,189,248,0.16); border: 1px solid rgba(56,189,248,0.28); }
.mo-when-note { font-size: 12px; color: var(--text-tertiary, #6B7892); font-style: italic; }

/* Signal Board — freshness badge, filter controls, sortable headers */
.sb-fresh-wrap { text-align: right; max-width: 420px; }
.sb-fresh-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-tertiary, #6B7892); margin-bottom: 5px; }
.sb-fresh-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.sb-fresh { font-size: 12px; padding: 2px 7px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-secondary, #93A1B8); }
.sb-fresh b { color: var(--text-primary, #E8ECF5); font-weight: 700; }
.sb-fresh.is-stale { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.35); color: #FCA5A5; }
.sb-fresh.is-stale b { color: #FCA5A5; }
.sb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 12px; }
.sb-input { background: var(--bg-1); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; font-size: 13px; color: var(--text-primary, #E8ECF5); }
.sb-input::placeholder { color: var(--text-tertiary, #6B7892); }
.sb-min { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary, #93A1B8); }
.sb-min input[type=range] { accent-color: var(--accent, #C26B4A); }
.sb-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.sb-th-sort:hover { color: var(--text-primary, #E8ECF5); }
.sb-table thead th.sb-sorted { color: var(--accent, #C26B4A); }
.sb-sort-caret { font-size: 12px; }

/* MapIQ — net-migration choropleth legend */
.mig-legend { background: var(--bg-1, #1B2A48); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text-primary, #E8ECF5); font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.mig-legend-t { font-weight: 700; font-size: 12px; letter-spacing: 0.03em; margin-bottom: 5px; color: var(--text-secondary, #93A1B8); }
.mig-legend-row { display: flex; height: 10px; width: 150px; border-radius: 3px; overflow: hidden; }
.mig-legend-row span { flex: 1; }
.mig-legend-ax { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-tertiary, #6B7892); margin-top: 3px; }

/* === IA Phase 4: pipeline-table hierarchy & scannability ================== */
.pipeline-table thead th { background: var(--bg-1); font-weight: 700; }
.pipeline-table thead tr:last-child th { border-bottom: 2px solid var(--border-strong); }
/* Demo-prep readability (UIiq): default (cozy) rows were too dense + low-contrast.
   Bump data cells to >=36px row height, >=13px font, full-strength text color for
   AA contrast, and theme-aware zebra/hover that works in BOTH light + dark themes
   (color-mix off --text-0 → subtle light stripe on dark, subtle dark stripe on light). */
.pipeline-table tbody td {
  color: var(--text-primary);
  font-size: 13px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.5;            /* 10 + 10 + ~19.5 ≈ 39px row height */
  vertical-align: middle;
}
.pipeline-table tbody .muted,
.pipeline-table tbody .muted.small { color: var(--text-tertiary); }
/* Zebra striping + hover to track wide rows (never overrides selected rows). */
.pipeline-table tbody tr:not(.is-selected):nth-child(even) td { background: color-mix(in srgb, var(--text-0) 4%, transparent); }
.pipeline-table tbody tr:not(.is-selected):hover td { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* === IA Phase 2 (spine): stage-aware Overview focus banner =============== */
.stage-focus-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 9px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.stage-focus-banner .sfb-icon { font-size: 14px; line-height: 1; }
.stage-focus-banner .sfb-text { font-size: 12.5px; color: var(--text-1); }
.stage-focus-banner .sfb-showall {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent); background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 8px; padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.stage-focus-banner .sfb-showall:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ov-section.stage-muted > .ov-section-head .ov-section-title { opacity: 0.72; }

/* === IA Phase 3: stage legend popover ==================================== */
.stage-legend-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 4px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-3); font-size: 12px; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.stage-legend-btn:hover { color: var(--text-1); border-color: var(--border-strong); }
.stage-legend-pop {
  position: fixed; z-index: 9500; min-width: 290px; max-width: 360px;
  padding: 10px 12px; background: var(--bg-1);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.stage-legend-pop .slp-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 8px; }
.stage-legend-pop .slp-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.stage-legend-pop .slp-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.stage-legend-pop .slp-label { font-weight: 600; color: var(--text-1); min-width: 100px; }
.stage-legend-pop .slp-def { color: var(--text-2); font-size: 12px; }

/* === IA Phase 5: active-filter indicator / clear-all ===================== */
.qf-clear-all {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: var(--negative);
  background: var(--negative-tint, color-mix(in srgb, var(--negative) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--negative) 35%, transparent);
}
.qf-clear-all:hover { background: color-mix(in srgb, var(--negative) 24%, transparent); }

/* === IA Phase 9: themed .text-input (was unstyled native — design-system mismatch) === */
.text-input {
  background: var(--bg-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font: inherit; font-size: 13px;
  transition: border-color .12s;
}
.text-input::placeholder { color: var(--text-tertiary); }
.text-input:focus { outline: none; border-color: var(--accent); }
select.text-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2393A1B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}

/* === DealPath-sourced (un-overridden) deal name — keyed off API flag name_from_dealpath === */
.name-from-dealpath { box-shadow: inset 2px 0 0 var(--accent); padding-left: 7px; }
.dealpath-name-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; vertical-align: middle;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* === Table density toggle — .ui-density-compact tightens dense data tables === */
/* Default (cozy) keeps the comfortable 9px rows; compact ~halves row height for
   power-scanning. Applies to the pipeline + broker-style data tables. Fonts stay
   >=12px so readability holds. */
html.ui-density-compact .pipeline-table tbody td,
html.ui-density-compact .pipeline-table thead .thead-r2 th,
html.ui-density-compact .brokers-table tbody td,
html.ui-density-compact .brokers-table thead th {
  padding-top: 3px; padding-bottom: 3px;
}
html.ui-density-compact .pipeline-table tbody tr,
html.ui-density-compact .brokers-table tbody tr { line-height: 1.25; }
/* Toolbar density toggle */
.density-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.density-toggle button {
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px;
  background: transparent; color: var(--text-2); border: 0; cursor: pointer; white-space: nowrap;
}
.density-toggle button.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.density-toggle button:not(.active):hover { color: var(--text-0); background: var(--bg-2); }

/* === Live self-storage REIT ticker (top header) ========================== */
.reit-ticker {
  display: flex; align-items: center; gap: 5px;
  overflow-x: auto; overflow-y: hidden; min-width: 0; margin: 0 8px; scrollbar-width: none;   /* internal scroll on narrow (15.6") screens instead of forcing page overflow; all pills reachable, none clipped */
}
.reit-ticker::-webkit-scrollbar { display: none; }  /* hide the internal-scroll bar (only appears on narrow screens) */
/* leading stocks glyph so it reads as a market ticker (mirrors the 📅 earnings glyph) */
.reit-ticker::before {
  content: '\1F4C8'; font-size: 12px; line-height: 1; opacity: .8;
  margin-right: 2px; filter: grayscale(.15); flex: 0 0 auto;
}
.reit-pill {
  position: relative; overflow: hidden; flex: 0 0 auto;   /* flex:0 0 auto → pill is content-sized so $xxx.xx never clips; overflow:hidden just contains the sheen */
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 5px; font-size: 12px; white-space: nowrap;
  border: 1px solid transparent; transition: box-shadow .2s;
}
.reit-pill .rp-sym { font-weight: 800; }
.reit-pill .rp-price { font-variant-numeric: tabular-nums; color: var(--text-0); }
.reit-pill .rp-chg { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; }
.reit-pill.up   { background: color-mix(in srgb, var(--positive) 24%, transparent); border-color: color-mix(in srgb, var(--positive) 55%, transparent); }
.reit-pill.up   .rp-sym, .reit-pill.up   .rp-chg { color: var(--positive); }
.reit-pill.down { background: color-mix(in srgb, var(--negative) 24%, transparent); border-color: color-mix(in srgb, var(--negative) 55%, transparent); }
.reit-pill.down .rp-sym, .reit-pill.down .rp-chg { color: var(--negative); }
/* animated sheen sweep — subtle "live" shimmer */
.reit-pill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  transform: translateX(-130%); animation: reit-sheen 7s ease-in-out infinite;
}
.reit-pill.up::after  { animation-delay: 0s; }
.reit-pill.down::after { animation-delay: .8s; }
@keyframes reit-sheen { 0%, 60%, 100% { transform: translateX(-130%); } 30% { transform: translateX(130%); } }

/* === Upcoming REIT earnings-call pills (sits right of the price ticker) ==== */
.reit-earnings { display: flex; align-items: center; gap: 6px; overflow: hidden; flex: 0 0 auto; margin: 0 6px 0 10px; }
/* tiny leading affordance so it reads as a calendar, distinct from price pills */
.reit-earnings::before {
  content: '\1F4C5'; font-size: 12px; line-height: 1; opacity: .75;
  margin-right: 1px; filter: grayscale(.2);
}
.reit-earn-pill {
  display: inline-flex; align-items: stretch; line-height: 1;
  border-radius: 7px; font-size: 12px; white-space: nowrap; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-blue, var(--accent)) 32%, transparent);
  background: color-mix(in srgb, var(--accent-blue, var(--accent)) 9%, var(--bg-1, transparent));
  text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
a.reit-earn-pill:hover {
  border-color: color-mix(in srgb, var(--accent-blue, var(--accent)) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue, var(--accent)) 18%, transparent);
}
/* ticker as a filled badge on the left */
.reit-earn-pill .re-sym {
  display: inline-flex; align-items: center;
  font-weight: 800; font-size: 12px; letter-spacing: .05em;
  color: #fff; background: var(--accent-blue, var(--accent));
  padding: 4px 7px;
}
/* date on the right, readable + tabular */
.reit-earn-pill .re-date {
  display: inline-flex; align-items: center;
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text-1);
  padding: 4px 8px;
}
/* estimated (not yet 8-K-confirmed): dashed + muted badge + trailing ~ */
.reit-earn-pill.is-est { border-style: dashed; opacity: .85; }
.reit-earn-pill.is-est .re-sym { background: color-mix(in srgb, var(--accent-blue, var(--accent)) 52%, var(--bg-2, #555)); }
.reit-earn-pill.is-est .re-date { color: var(--text-2); }
.reit-earn-pill.is-est .re-date::after { content: ' ~'; opacity: .6; font-weight: 700; }
/* flash when the price ticks */
.reit-pill.rp-flash { animation: reit-flash 1.1s ease-out; }
@keyframes reit-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
/* Clickable price pills → IR confirm popup */
.reit-pill.rp-click { cursor: pointer; }
.reit-pill.rp-click:hover { box-shadow: 0 0 0 1px var(--accent); }
.reit-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.reit-modal-backdrop[hidden] { display: none; }
.reit-modal { position: relative; background: var(--bg-1); color: var(--text-primary); border: 1px solid var(--border, var(--line)); border-radius: 12px; padding: 20px 22px; min-width: 280px; max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.reit-modal-x { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; }
.reit-modal-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 4px; }
.reit-modal-name { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.reit-modal-price { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.reit-modal-price.up { color: var(--positive, #2f9e44); }
.reit-modal-price.down { color: var(--negative, #e03131); }
.reit-modal-ir { display: inline-block; background: #1E50C8; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; }
.reit-modal-ir:hover { filter: brightness(1.08); }
.reit-modal-call { background: rgba(30,80,200,.12); border: 1px solid rgba(30,80,200,.35); color: var(--text-primary); border-radius: 8px; padding: 7px 10px; font-size: 13px; margin-bottom: 14px; }
.reit-modal-call b { color: var(--accent); }
.reit-call-est { color: var(--text-2); font-weight: 400; }
.reit-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reit-modal-ics { display: inline-block; background: transparent; color: var(--text-primary); border: 1px solid var(--accent); text-decoration: none; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.reit-modal-ics:hover { background: rgba(30,80,200,.1); }

@media (max-width: 1200px) { .reit-ticker { display: none; } }


/* === Active Pipeline toolbar — clean 2-row layout (stages / controls) ===== */
.pipeline-toolbar { flex-direction: column; align-items: stretch; gap: 8px; justify-content: flex-start; }
.ptb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ptb-row-stages { gap: 8px; }
.ptb-row-stages .section-label { margin-right: 2px; }
/* controls row: filters inline (never stack vertically), controls pinned right */
.ptb-row-controls .pipeline-quick-filters { flex: 0 1 auto; flex-wrap: wrap; margin: 0; }
.ptb-row-controls .qf-search { flex: 0 1 240px; }
.ptb-row-controls .pipeline-toolbar-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* ── Dead Deal Reason panel (deal-detail, Dead stage only) ─────────────────── */
.ddr-section .ov-section-title { display: flex; align-items: center; gap: 8px; }
.ddr-field { display: flex; flex-direction: column; gap: 4px; }
.ddr-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ddr-input {
  background: var(--bg-2, #ffffff08); color: var(--text-primary);
  border: 1px solid var(--border, #ffffff1a); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px; width: 100%; box-sizing: border-box;
}
.ddr-input:focus { outline: none; border-color: var(--accent); }
textarea.ddr-input { resize: vertical; min-height: 60px; }
.ddr-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; line-height: 1;
}
.ddr-badge-ai {
  color: var(--negative);
  background: color-mix(in srgb, var(--negative) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--negative) 45%, transparent);
}
.ddr-badge-ok {
  color: var(--positive, #34a853);
  background: color-mix(in srgb, var(--positive, #34a853) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--positive, #34a853) 45%, transparent);
}
.ddr-badge-empty { color: var(--text-secondary); background: var(--bg-2, #ffffff08); border: 1px solid var(--border, #ffffff1a); }

/* ── Prior-UW Dead Deal Flags ─────────────────────────────────────────────
   Surfaces our PROPRIETARY history: when an asset we're looking at was
   previously underwritten on a deal that died, flag it on the map + in the
   deal header. Amber-accented so it reads as "heads up, context" not error. */

/* Map marker badge — small ⟲ glyph in the corner of a stage pin. */
.dealpin-prior {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #F2A33C;
  color: #20140a;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  z-index: 2;
  pointer-events: auto;
}
.dealpin-has-prior { overflow: visible; position: relative; }

/* Pin popup "prior on file" line. */
.pin-prior {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #8a5a16;
  background: color-mix(in srgb, #F2A33C 16%, transparent);
  border: 1px solid color-mix(in srgb, #F2A33C 40%, transparent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pin-prior-ico { font-size: 12px; }

/* Deal-detail "We've seen this before" banner. */
.prior-history-banner {
  margin: 0 0 14px;
  border-radius: 10px;
  background: color-mix(in srgb, #F2A33C 12%, var(--bg-2, #15223C));
  border: 1px solid color-mix(in srgb, #F2A33C 42%, transparent);
  overflow: hidden;
}
.prior-history-banner[hidden] { display: none; }
.ph-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.ph-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F2A33C;
  color: #20140a;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.ph-text { flex: 1 1 auto; min-width: 0; }
.ph-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary, #EAF0F8);
}
.ph-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary, #9fb0c8);
}
.ph-toggle {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #8a5a16;
  background: color-mix(in srgb, #F2A33C 18%, transparent);
  border: 1px solid color-mix(in srgb, #F2A33C 45%, transparent);
}
.ph-toggle:hover { background: color-mix(in srgb, #F2A33C 28%, transparent); }
.ph-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ph-list[hidden] { display: none; }
.ph-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--bg-2, #ffffff0a);
  border: 1px solid var(--border, #ffffff14);
  font-size: 12px;
}
.ph-item-name {
  font-weight: 700;
  color: var(--accent, #4361ee);
  text-decoration: none;
}
.ph-item-name:hover { text-decoration: underline; }
.ph-match {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-secondary, #9fb0c8);
  background: var(--bg-1, #ffffff10);
  border: 1px solid var(--border, #ffffff1a);
}
.ph-item-meta { color: var(--text-secondary, #9fb0c8); flex: 1 1 auto; min-width: 0; }
.ph-verified { color: var(--positive, #34a853); font-weight: 700; }
.ph-item-counts {
  font-weight: 600;
  color: var(--text-primary, #EAF0F8);
  background: color-mix(in srgb, #F2A33C 14%, transparent);
  padding: 2px 8px;
  border-radius: 5px;
}

/* drop the ticker/earnings emoji glyphs — cleaner + frees header width */
.reit-ticker::before, .reit-earnings::before { content: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   TASK LENSES — intent-driven Overview composition (added 2026-06-26).
   A small lens bar at the top of the Overview subtab; picking a lens shows
   only the sections relevant to that task. Theme-token driven (works in
   light + dark). Sections not in the active lens get .lens-hidden.
   ───────────────────────────────────────────────────────────────────── */
.deal-lens-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px 0;
  padding: 7px 9px;
  background: var(--bg-1);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.deal-lens-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--text-secondary));
  padding-left: 4px;
}
.deal-lens-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg-2, rgba(0,0,0,0.18));
  border-radius: 8px;
  padding: 3px;
}
.deal-lens {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
  white-space: nowrap;
}
.deal-lens:hover { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.deal-lens.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Per-lens count chip — subtle "screens not yet pulled this session" badge. */
.deal-lens-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  height: 15px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.deal-lens.active .deal-lens-badge {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.deal-lens-badge[hidden] { display: none; }
.deal-lens-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.deal-lens-link {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.deal-lens-link:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}
/* Lens filter: hide sections not in the active lens. !important so it wins
   over inline display rules; sections with their own display:none (Expansion,
   Google Business) stay correctly hidden until their loader reveals them. */
.lens-hidden { display: none !important; }

/* MarketIQ inline host (Market lens). The MarketIQ subtab's section nodes are
   relocated into this plain block container on Market-lens activation, so their
   native .ov-section margins lay them out exactly as in the subtab. Hide when no
   sections are currently mounted here (they're over in the MarketIQ subtab). */
.ov-marketiq-inline:empty { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   UC view: Closing Calendar + Closing Timeline (2026-06-27). Theme-token
   styled, light + dark. Sits above the DD board in the Under Contract view.
   ───────────────────────────────────────────────────────────────────── */
.uc-cal, .uc-tl {
  background: var(--bg-1);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px 0;
}
.uc-cal-head, .uc-tl-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.uc-cal-title, .uc-tl-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.uc-cal-nav { display: flex; align-items: center; gap: 6px; }
.uc-cal-month { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); min-width: 128px; text-align: center; }
.uc-cal-btn {
  appearance: none; cursor: pointer;
  background: var(--bg-2, rgba(0,0,0,0.18)); color: var(--text-secondary);
  border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 7px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; line-height: 1;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.uc-cal-btn:hover { color: var(--text-primary); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.uc-cal-today { font-size: 12px; }

.uc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 8px; overflow: hidden; }
.uc-cal-dow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary, var(--text-secondary)); text-align: center; padding: 6px 0;
  background: var(--bg-2, rgba(0,0,0,0.18)); border-bottom: 1px solid var(--border, rgba(255,255,255,0.10));
}
.uc-cal-cell {
  min-height: 92px; padding: 4px 5px;
  border-right: 1px solid var(--border, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.uc-cal-cell:nth-child(7n+7) { border-right: 0; }
.uc-cal-cell.weekend { background: color-mix(in srgb, var(--bg-0, #000) 30%, transparent); }
.uc-cal-cell.othermonth { background: color-mix(in srgb, var(--bg-0, #000) 16%, transparent); }
.uc-cal-cell.othermonth .uc-cal-daynum { opacity: 0.45; }
.uc-cal-cell.today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.uc-cal-daynum { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.uc-cal-cell.today .uc-cal-daynum {
  display: inline-block; background: var(--accent); color: #fff;
  border-radius: 10px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px;
}
.uc-cal-daynum .mo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; margin-right: 2px; }

.uc-chip {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 12px; line-height: 1.25; padding: 2px 5px; border-radius: 5px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text-primary); overflow: hidden;
}
.uc-chip:hover { filter: brightness(1.08); }
.uc-chip .uc-chip-ic { flex: none; font-size: 12px; }
.uc-chip .uc-chip-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-chip.k-closing { border-left-color: var(--negative); background: var(--negative-tint, color-mix(in srgb, var(--negative) 16%, transparent)); }
.uc-chip.k-dd      { border-left-color: var(--warning); background: var(--warning-tint, color-mix(in srgb, var(--warning) 16%, transparent)); }
.uc-chip.k-earnest { border-left-color: var(--info, #4f86b8); background: color-mix(in srgb, var(--info, #4f86b8) 16%, transparent); }
.uc-chip.overdue   { border-left-color: var(--negative); background: var(--negative-tint, color-mix(in srgb, var(--negative) 18%, transparent)); font-weight: 600; }
.uc-chip.done      { opacity: 0.6; text-decoration: line-through; }
.uc-cal-more { font-size: 12px; color: var(--text-tertiary, var(--text-secondary)); padding-left: 3px; }

/* Closing Timeline */
.uc-tl-key { font-weight: 700; padding: 0 4px; border-radius: 4px; }
.uc-tl-key.overdue { color: var(--negative); }
.uc-tl-key.soon { color: var(--warning); }
.uc-tl-rows { display: flex; flex-direction: column; }
.uc-tl-row {
  display: grid; grid-template-columns: 200px 1fr 132px; align-items: center; gap: 12px;
  padding: 8px 6px; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); cursor: pointer;
}
.uc-tl-row:first-child { border-top: 0; }
.uc-tl-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.uc-tl-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-tl-dname { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-tl-fund { font-size: 12px; font-weight: 600; color: var(--text-tertiary, var(--text-secondary)); }
.uc-tl-track { position: relative; height: 12px; background: var(--bg-2, rgba(0,0,0,0.18)); border-radius: 999px; }
.uc-tl-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--accent); opacity: 0.85; }
.uc-tl-fill.ok { background: var(--positive); }
.uc-tl-fill.soon { background: var(--warning); }
.uc-tl-fill.overdue { background: var(--negative); width: 100% !important; }
.uc-tl-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--border, rgba(0,0,0,0.2)); }
.uc-tl-dot.ok { background: var(--positive); }
.uc-tl-dot.soon { background: var(--warning); }
.uc-tl-dot.overdue { background: var(--negative); left: 100% !important; }
.uc-tl-tbd { font-size: 12px; color: var(--text-tertiary, var(--text-secondary)); font-style: italic; padding-left: 4px; line-height: 12px; }
.uc-tl-meta { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.uc-tl-date { font-size: 12px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.uc-tl-dtc { font-size: 12px; color: var(--text-secondary); }
.uc-tl-meta.overdue .uc-tl-dtc, .uc-tl-meta.overdue .uc-tl-date { color: var(--negative); }
.uc-tl-meta.soon .uc-tl-dtc { color: var(--warning); }

/* ── DEMAND PULSE card (Overview · Market lens) — id #ov-dpulse-body-*.
   Per-deal leading demand read (gauge + driver chips + free-source signal
   cards). Theme-token styled; works light + dark. Ported from
   demand-pulse-demo.html, restyled to canonical DealIQ tokens. */
.ov-demand-pulse .dpulse-gaugeRow { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.dpulse-gauge {
  --v: 0; position: relative; width: 116px; height: 116px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--v) * 1%), var(--bg-2) 0);
  display: grid; place-items: center; flex: 0 0 auto;
}
.dpulse-gauge::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg-1); }
.dpulse-gauge .num { position: relative; z-index: 1; text-align: center; }
.dpulse-gauge .num b { font-size: 32px; font-weight: 700; display: block; line-height: 1; color: var(--text-primary); }
.dpulse-gauge .num span { font-size: 12px; color: var(--text-tertiary); letter-spacing: .5px; }
.dpulse-drivers { flex: 1 1 280px; min-width: 240px; }
.dpulse-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dpulse-chip { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; min-width: 112px; }
.dpulse-chip .k { color: var(--text-tertiary); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; display: block; }
.dpulse-chip .v { font-size: 15px; font-weight: 650; color: var(--text-primary); }
.dpulse-chip .v.up, .dpulse-sig .yoy.up { color: var(--positive); }
.dpulse-chip .v.down, .dpulse-sig .yoy.down { color: var(--negative); }
.dpulse-chip .v.flat, .dpulse-sig .yoy.flat { color: var(--text-secondary); }
.dpulse-note { font-size: 12px; color: var(--text-secondary); margin-top: 10px; line-height: 1.5; }
.dpulse-src { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
.dpulse-sig-head { font-weight: 650; font-size: 12px; color: var(--text-primary); margin: 16px 0 8px; }
.dpulse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dpulse-sig { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px; }
.dpulse-sig .t { font-weight: 650; font-size: 12.5px; color: var(--text-primary); }
.dpulse-sig .g { color: var(--text-tertiary); font-size: 12px; margin: 2px 0 7px; }
.dpulse-sig .val { font-size: 19px; font-weight: 700; color: var(--text-primary); }
.dpulse-sig .yoy { font-size: 12px; margin-left: 6px; }
.dpulse-ll { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-tertiary); float: right; }
.dpulse-ll.leading { color: var(--accent); border-color: var(--accent); }
.dpulse-spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: 8px; }
.dpulse-spark i { flex: 1; background: var(--accent); opacity: .55; border-radius: 1px; min-height: 2px; }

/* ── MARKET RANK card (Overview · Market lens) — id #ov-mrank-body-*.
   MarketIQ market-ranking composite (public.marketiq_market_score) at the
   deal's county/MSA/ZIP tiers. County + MSA lead; ZIP is a de-emphasized
   footnote. Theme-token styled (--text-primary/--accent/--bg-2/--border). */
.mrank-open { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mrank-open:hover { text-decoration: underline; }
.mrank-tiers { display: flex; flex-direction: column; gap: 8px; }
.mrank-tier {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.mrank-kind {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-tertiary); flex: 0 0 52px;
}
.mrank-geo { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.mrank-rank { font-size: 13px; color: var(--text-secondary); }
.mrank-rank b { color: var(--text-primary); font-weight: 700; }
.mrank-scorepill {
  margin-left: auto; font-size: 12px; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.mrank-scorepill b { color: var(--accent); font-weight: 700; }
.mrank-nodata { font-style: italic; color: var(--text-tertiary); }
.mrank-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; max-width: 420px; }
.mrank-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mrank-bar .k { flex: 0 0 72px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.mrank-bar .track { flex: 1; height: 7px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.mrank-bar .track i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.mrank-bar .v { flex: 0 0 34px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mrank-zip { margin-top: 10px; font-size: 12px; color: var(--text-tertiary); }
.mrank-zipnote { font-size: 11px; }

/* ── DEMAND CONTEXT card (Overview · Market lens) — id #ov-dctx-body-*.
   Synthesizes the residential (demand-positive) / industrial (caution) OSM
   landuse layers into a one-line verdict + two chips. Theme-token styled. */
.dctx-verdict {
  font-weight: 700; font-size: 14px; color: var(--text-primary);
  border: 1px solid var(--border); border-left: 3px solid var(--text-tertiary);
  border-radius: 8px; padding: 8px 11px; margin-bottom: 10px; background: var(--bg-2);
}
.dctx-verdict.good { border-left-color: var(--positive); background: var(--positive-tint); }
.dctx-verdict.warn { border-left-color: var(--warning); background: var(--warning-tint); }
.dctx-verdict.caution { border-left-color: var(--warning); }
.dctx-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dctx-chip {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.dctx-chip .dctx-ico { font-size: 15px; line-height: 1.2; color: var(--text-tertiary); }
.dctx-chip.good { border-color: color-mix(in srgb, var(--positive) 45%, var(--border)); }
.dctx-chip.good .dctx-ico { color: var(--positive); }
.dctx-chip.warn { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.dctx-chip.warn .dctx-ico, .dctx-chip.caution .dctx-ico { color: var(--warning); }
.dctx-chip.caution { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.dctx-chip-head { font-weight: 650; font-size: 12.5px; color: var(--text-primary); }
.dctx-chip-sub { color: var(--text-tertiary); font-size: 12px; margin-top: 2px; }
.dctx-src { margin-top: 9px; }

/* ── PRIOR DEAD-DEAL FLAGS card (Overview · Diligence lens) — id
   #ov-deadflags-body-*. Headline + per-match flag cards (prior killed deal,
   shared dimensions, confidence). Theme-token styled; works light + dark.
   Ported from dead-flags-demo.html. */
.pdflag {
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid var(--warning); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px;
}
.pdflag.high { border-left-color: var(--negative); }
.pdflag-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pdflag-name { font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.pdflag-reason { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-top: 2px; }
.pdflag-conf { font-weight: 700; font-size: 17px; color: var(--text-primary); }
.pdflag-conf small { font-size: 12px; font-weight: 400; color: var(--text-tertiary); }
.pdflag-summary { color: var(--text-secondary); margin: 7px 0 9px; font-size: 12px; line-height: 1.45; }
.pdflag-dims { display: flex; flex-wrap: wrap; gap: 6px; }
.pdflag-dim { font-size: 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; color: var(--text-secondary); }
.pdflag-dim.aligned { border-color: var(--accent); color: var(--text-primary); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ===========================================================================
   UIiq demo-prep additions (2026-06-29) — loading skeletons, KPI hierarchy,
   sticky pipeline toolbar, Deal Detail picker bar, market-ticker label,
   empty-state onboarding. All theme-token styled; works light + dark.
   =========================================================================== */

/* ── Loading skeletons (shimmer) ─────────────────────────────────────────── */
.skel {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border-radius: 6px;
}
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text-0) 8%, transparent) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skel-shimmer 1.35s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-line { height: 11px; margin: 5px 0; display: inline-block; width: 100%; }
.skel-pill { height: 22px; width: 78px; border-radius: 999px; display: inline-block; }
.skel-kpi  { height: 64px; border-radius: 8px; }
.skel-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.skel-table { width: 100%; border-collapse: collapse; }
.skel-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); }

/* Friendly "taking longer than expected" timeout / error notice + Retry */
.view-timeout {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0; padding: 13px 16px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
  border-radius: 10px;
  color: var(--text-primary); font-size: 13px;
}
.view-timeout .vt-icon { font-size: 16px; line-height: 1; }
.view-timeout .vt-msg { flex: 1 1 auto; min-width: 160px; }
.view-timeout .vt-retry {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 8px; padding: 6px 14px;
}
.view-timeout .vt-retry:hover { filter: brightness(1.08); }

/* Skeleton overlay (iframe-backed views, e.g. IndicatorIQ) */
#view-reit { position: relative; }
.view-skel-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg-1); overflow: auto; padding: 18px 20px;
}

/* ── KPI hierarchy: primary money cards larger/bolder ────────────────────── */
.pl-kpi.pl-kpi-primary { padding: 14px 16px; border-width: 1.5px; }
.pl-kpi.pl-kpi-primary .lbl { font-size: 12px; color: var(--text-secondary); }
.pl-kpi.pl-kpi-primary .val { font-size: 28px; font-weight: 700; }
.pl-kpi.pl-kpi-primary .sub { font-size: 12.5px; }
/* Secondary cards read lighter so the two money headlines dominate */
.pl-kpi:not(.pl-kpi-primary) .val { font-size: 18px; color: var(--text-secondary); }

/* ── Sticky pipeline filter/sort toolbar ─────────────────────────────────── */
/* Topbar is sticky at top:0 and ~57px tall (see .app-shell min-height calc),
   so the toolbar pins just beneath it. Stays accessible while scrolling a long
   pipeline. (The column thead keeps its own sticky behavior — unchanged.) */
.pipeline-toolbar {
  position: sticky; top: 57px; z-index: 4;
  background: var(--bg-0);
  padding-top: 8px; padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Deal Detail: persistent Select Deal picker bar ──────────────────────── */
.deal-picker-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px;
  position: sticky; top: 0; z-index: 15;
}
.deal-picker-bar .dpb-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.deal-picker-bar input {
  flex: 1 1 280px; min-width: 200px; max-width: 460px;
  background: var(--bg-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font: inherit; font-size: 13px;
}
.deal-picker-bar input:focus { outline: none; border-color: var(--accent); }
.deal-picker-bar .dpb-count { font-size: 12px; color: var(--text-tertiary); }

/* ── Empty-state onboarding (empty pipeline) ─────────────────────────────── */
.pl-onboard {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 24px; text-align: center; color: var(--text-secondary);
}
.pl-onboard .plo-icon { font-size: 40px; line-height: 1; opacity: .85; }
.pl-onboard .plo-head { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pl-onboard .plo-sub { font-size: 13px; color: var(--text-secondary); max-width: 420px; }
.pl-onboard .plo-actions { margin-top: 8px; display: flex; gap: 10px; }
.pl-empty-filtered { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.pl-empty-filtered .plo-sub { color: var(--text-secondary); font-size: 13px; }

/* ── Pipeline name cell: keep PORTFOLIO badge visible while the name truncates
   (the cell-level ellipsis was clipping the badge off long portfolio names). ── */
.pipeline-table td .pl-name-cell { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pipeline-table td .pl-name-text { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pipeline-table td .pl-name-cell .portfolio-badge { flex: 0 0 auto; margin-left: 0; }

/* ── Market ticker label ─────────────────────────────────────────────────── */
.reit-ticker .ticker-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); margin-right: 6px; white-space: nowrap; flex: 0 0 auto;
}
.pdflag-dim .w { color: var(--text-tertiary); }

/* ===========================================================================
   UIiq demo-prep Loop 2 — readability + empty/timeout states (Wednesday demo)
   Theme-token styled; works in light (clarity) + dark. No layout regressions.
   =========================================================================== */

/* — Pipeline stage filter: clear "Filter by stage" lead + stronger selected — */
.stage-bar-lead {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2); margin-right: 4px; align-self: center; white-space: nowrap;
}
.stage-seg.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--seg) 30%, transparent);
}

/* — Visible/labeled pipeline sort indicator — */
.pl-sort-note {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 8px 0 2px; font-size: 12px; color: var(--text-2);
}
.pl-sort-note b { color: var(--text-primary); font-weight: 700; }
.pl-sort-note .pls-lbl { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pl-sort-note .pls-hint { color: var(--text-3); }
.pl-sort-note .pls-reset {
  font: inherit; font-size: 12px; color: var(--accent); background: transparent;
  border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline;
}

/* — Deal Detail empty state: recent / active deal shortlist chips — */
.deal-empty-inner { max-width: 760px; margin: 8px 0; }
.deal-empty-inner .dei-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.deal-empty-inner .dei-head { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.deal-empty-inner .dei-sub { font-size: 13px; color: var(--text-2); margin: 4px 0 14px; }
.deal-empty-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.deal-empty-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 320px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 13px 5px 8px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-primary);
  transition: border-color .12s, background .12s;
}
.deal-empty-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.deal-empty-chip .dec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* — Signal Board: pending freshness chip + empty states + slider labels — */
.sb-fresh.is-pending { opacity: 0.8; }
.sb-fresh.is-pending b { color: var(--text-3); }
.sb-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 48px 24px; color: var(--text-2);
}
.sb-empty .sbe-icon { font-size: 32px; line-height: 1; }
.sb-empty .sbe-head { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.sb-empty .sbe-sub { font-size: 13px; color: var(--text-2); max-width: 460px; margin-bottom: 8px; }
.sb-empty-row { text-align: center; padding: 28px 16px !important; }
.sb-empty-row .sbe-row-msg { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.sb-min .sb-min-end { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sb-min .sb-min-cur { font-size: 12px; color: var(--text-primary); margin-left: 4px; white-space: nowrap; }
.sb-min .sb-min-cur b { color: var(--accent); font-weight: 700; }

/* — ReportIQ: weighted "New Report" primary action beside the subtabs — */
.riq-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.riq-new-report { white-space: nowrap; }

/* ===========================================================================
   UIiq demo-prep Loop 3 — organization / consistency / workflow (Wed demo)
   Theme-token styled; light (clarity) + dark. Surgical; no Loop 1-2 regressions.
   =========================================================================== */

/* ── 1. KPI bar hierarchy: two money headlines dominate + grouped, with a clear
      bottom anchor separating the bar from the table header below ─────────── */
.pl-kpis {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-strong, var(--border));
}
.pl-kpis-primary { display: flex; gap: 12px; flex: 1 1 380px; min-width: 0; }
.pl-kpis-primary .pl-kpi { flex: 1 1 0; min-width: 0; }
.pl-kpis-secondary {
  display: flex; gap: 10px; flex: 1 1 360px; min-width: 0;
  padding-left: 16px; border-left: 1px solid var(--border);
}
.pl-kpis-secondary .pl-kpi { flex: 1 1 0; min-width: 0; }
/* Primary money cards: larger value type + accent anchor stripe so they read as
   the headline. The UC card keeps its positive tint (scoped :not below). */
.pl-kpi.pl-kpi-primary { padding: 16px 18px; border-width: 1.5px; position: relative; overflow: hidden; }
.pl-kpi.pl-kpi-primary::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent); border-radius: 8px 0 0 8px;
}
.pl-kpi.pl-kpi-primary.pl-kpi-uc::before { background: var(--positive, #1f9d55); }
.pl-kpi.pl-kpi-primary:not(.pl-kpi-uc) {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-1));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.pl-kpi.pl-kpi-primary .lbl { font-size: 12px; color: var(--text-secondary); }
.pl-kpi.pl-kpi-primary .val { font-size: 30px; font-weight: 700; line-height: 1.1; }
.pl-kpi.pl-kpi-primary .sub { font-size: 12.5px; }
.pl-kpi:not(.pl-kpi-primary) { padding: 11px 13px; }
.pl-kpi:not(.pl-kpi-primary) .val { font-size: 17px; color: var(--text-secondary); }
@media (max-width: 1100px) {
  .pl-kpis-secondary { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .pl-kpis-primary, .pl-kpis-secondary { flex: 1 1 100%; flex-wrap: wrap; }
}

/* ── 2. Filter row lead label — makes the quick-filter chips read unambiguously
      as FILTERS (vs the view-toggles on the right of the toolbar) ─────────── */
.qf-lead {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2); margin-right: 2px; align-self: center; white-space: nowrap;
}

/* ── 3. Toolbar consistency — unify the two segmented controls (density +
      Table/Cards/Map) to ONE pattern: same shell, height, radius, selected state.
      The ghost dropdowns (View / Columns) get a matching height + radius. ──── */
.density-toggle, .pipeline-view-switch {
  display: inline-flex; align-items: stretch;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; overflow: hidden;
}
.density-toggle button, .pvs-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; background: transparent; color: var(--text-secondary);
  border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}
.density-toggle button:not(.active):hover, .pvs-btn:not(.active):hover {
  color: var(--text-primary); background: var(--bg-2);
}
.density-toggle button.active, .pvs-btn.active {
  background: var(--accent-blue-tint); color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue-edge);
}
/* Dropdown buttons align to the segmented-control height (~31px) + radius. */
.pipeline-toolbar-right .ghost-btn-sm {
  border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: var(--bg-1);
}
.pipeline-toolbar-right .ghost-btn-sm:hover { background: var(--bg-2); color: var(--text-primary); }
.pipeline-toolbar-right { align-items: center; gap: 8px; }

/* ── 4. ReportIQ: fill the empty canvas with a prominent Builder CTA ──────── */
.riq-build-cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding: 22px 24px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-1));
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 14px;
}
.riq-build-cta .rbc-icon { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.riq-build-cta .rbc-body { flex: 1 1 320px; min-width: 0; }
.riq-build-cta .rbc-h { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.riq-build-cta .rbc-sub { font-size: 13px; color: var(--text-secondary); margin: 4px 0 10px; max-width: 620px; }
.riq-build-cta .rbc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.riq-build-cta .rbc-tag {
  font-size: 12px; color: var(--text-secondary);
  background: var(--bg-1); border: 1px solid var(--border-strong, var(--border));
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
.riq-build-cta .rbc-open { flex: 0 0 auto; white-space: nowrap; align-self: center; }

/* ── 5. TaxIQ: collapsible map (~140px default), legend, mapped drill-down ── */
#view-taxiq .tx-map-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#view-taxiq .tx-map-tools { display: inline-flex; align-items: center; gap: 14px; }
#view-taxiq .tx-map { height: 380px; border-radius: 10px; overflow: hidden; transition: height .2s ease; }
#view-taxiq .tx-map.is-collapsed { height: 140px; }
#view-taxiq .tx-legend { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2); }
#view-taxiq .tx-legend .txl-cap { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
#view-taxiq .tx-legend .txl-item { display: inline-flex; align-items: center; gap: 4px; }
#view-taxiq .tx-legend .txl-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
#view-taxiq .tx-map-toggle { font-weight: 600; }
#view-taxiq .tx-kpi-btn { font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--line); transition: border-color .12s, background .12s; }
#view-taxiq .tx-kpi-btn:hover { border-color: var(--accent); }
#view-taxiq .tx-kpi-btn.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-1)); }
#view-taxiq .tx-kpi-cta { display: block; color: var(--accent); font-weight: 700; margin-top: 1px; }
#view-taxiq .tx-unmapped-flag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--warning, #b8860b); background: color-mix(in srgb, var(--warning, #b8860b) 14%, transparent); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
#view-taxiq .tx-unmapped-note { font-size: 12px; color: var(--accent); }
#view-taxiq .tx-unmapped-clear { font: inherit; font-size: 12px; color: var(--accent); background: transparent; border: 0; text-decoration: underline; cursor: pointer; padding: 0 2px; }

/* ── 6. FuelPoint: per-row overflow menu so Promote isn't the only action ── */
#view-fuelpoint .fp-actions-cell { white-space: nowrap; text-align: right; }
.fp-more {
  font: inherit; font-size: 15px; line-height: 1; color: var(--text-2);
  background: transparent; border: 1px solid var(--border-strong, var(--border));
  border-radius: 7px; padding: 3px 8px; margin-left: 6px; cursor: pointer; vertical-align: middle;
}
.fp-more:hover { color: var(--accent); border-color: var(--accent); }
.fp-row-menu {
  position: fixed; z-index: 300; min-width: 210px;
  background: var(--bg-1); border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px; padding: 5px; box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.fp-row-menu .fp-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; text-align: left; text-decoration: none;
  color: var(--text-primary); background: transparent; border: 0;
  border-radius: 7px; padding: 8px 11px; cursor: pointer; white-space: nowrap;
}
.fp-row-menu .fp-menu-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

/* ── OUR PORTFOLIO IN THIS MARKET (deal-detail · MyPlace-owned in-market comps) ── */
.pfc-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.pfc-empty { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; align-items: flex-start; }
.pfc-headline { font-size: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pfc-headline b { color: var(--accent); }
.pfc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pfc-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.pfc-stat-v { font-size: 16px; font-weight: 650; color: var(--text-primary); }
.pfc-stat-k { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); margin-top: 2px; }
.pfc-funds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pfc-fund-chip { font-size: 12px; color: var(--text-secondary); background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; }
.pfc-fund-chip b { color: var(--text-primary); margin-left: 6px; }
.pfc-compare { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; margin-bottom: 14px; }
.pfc-compare-head { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); margin-bottom: 11px; }
.pfc-bar-row { display: grid; grid-template-columns: 168px 1fr 96px; align-items: center; gap: 10px; margin-bottom: 8px; }
.pfc-bar-lab { font-size: 12px; color: var(--text-secondary); }
.pfc-bar-track { height: 12px; background: color-mix(in srgb, var(--border) 60%, transparent); border-radius: 6px; overflow: hidden; }
.pfc-bar-fill { display: block; height: 100%; border-radius: 6px; }
.pfc-bar-fill.subj { background: var(--info); }
.pfc-bar-fill.uc { background: var(--warn); }
.pfc-bar-fill.owned { background: var(--accent); }
.pfc-bar-val { font-size: 12.5px; font-weight: 650; color: var(--text-primary); text-align: right; }
.pfc-delta { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.pfc-delta b { color: var(--text-primary); }
.pfc-delta.neg b { color: var(--negative); }
.pfc-delta.pos b { color: var(--positive); }
.pfc-table-wrap { overflow-x: auto; }
.pfc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pfc-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); padding: 6px 9px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pfc-table td { padding: 7px 9px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); color: var(--text-primary); white-space: nowrap; }
.pfc-table th.num, .pfc-table td.num { text-align: right; }
.pfc-table tbody tr:last-child td { border-bottom: 0; }
.pfc-src { margin-top: 11px; font-size: 12px; color: var(--text-secondary); }

/* ===========================================================================
   Loop 4 — Pipeline readability + workflow redesign (Wednesday demo)
   Default view = collapsible STAGE groups; roomy rows; strong name hierarchy;
   sticky two-row header + frozen name column; per-row Open + overflow actions.
   100% theme tokens — holds in clarity (light), navy (dark), instlight/instdark.
   Appended last so it wins over the Loop 1-3 / IA-Phase rules above.
   =========================================================================== */

/* — 1. Roomy rows: real vertical breathing room at the cozy default. The
      compact density toggle (html.ui-density-compact, defined earlier) still
      tightens these for power-scanning. — */
.pipeline-table tbody td {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.45;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
html.ui-density-compact .pipeline-table tbody td { padding-top: 6px; padding-bottom: 6px; }

/* — 2. Type hierarchy: the deal NAME is the anchor (larger + heavier); all
      secondary data sits one notch lighter/smaller (but stays >=12.5px). — */
.pipeline-table td .pl-name-text {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.pipeline-table tbody td { font-size: 12.5px; color: var(--text-secondary); }
.pipeline-table tbody td.num { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* — 3. Zebra + hover, theme-safe (subtle stripe off --text-0 reads on both
      light and dark; hover tints with the accent). — */
.pipeline-table tbody tr.deal-row:not(.is-selected):nth-child(even) td {
  background: color-mix(in srgb, var(--text-0) 3.5%, transparent);
}
.pipeline-table tbody tr.deal-row:not(.is-selected):hover td {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* — 4. Sticky two-row header. The table view is its own scroll region (it already
      carries overflow-x:auto, which makes it the scroll container; JS sets a
      max-height so it fills to the viewport bottom). The header therefore pins at
      top:0 of THAT container — KPIs + toolbar stay visible above it. Row 2 stacks
      27px under row 1. Opaque bg + bottom rule so rows never bleed through. — */
.pipeline-view[data-pview="table"] { overflow: auto; }
.pipeline-table thead .thead-r1 th {
  position: sticky; top: 0; z-index: 6;
  background: var(--bg-1);
  box-shadow: inset 0 -2px 0 var(--border-strong);
}
.pipeline-table thead .thead-r2 th {
  position: sticky; top: 27px; z-index: 5;
  background: var(--bg-1);
  box-shadow: inset 0 -2px 0 var(--border-strong);
}

/* — 5. Freeze the deal-name (first) column on horizontal scroll. Scoped to data
      rows so the grouped stage-band header (a single colspan td) is untouched. — */
.pipeline-table tbody tr.deal-row td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--bg-0);
}
.pipeline-table tbody tr.deal-row:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--text-0) 3.5%, var(--bg-0));
}
.pipeline-table tbody tr.deal-row:hover td:first-child {
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-0));
}
.pipeline-table thead .thead-r1 th:first-child { z-index: 8; left: 0; }

/* — 6. Per-row actions column: right-anchored, always visible (low-key at rest,
      brightens on row hover) so the primary action is discoverable in one look. — */
.pl-actions-th { width: 96px; }
.pl-actions-cell {
  width: 96px; text-align: right; white-space: nowrap; vertical-align: middle;
  padding-right: 14px;
}
.pl-open-btn {
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 7px; padding: 4px 13px; cursor: pointer;
  opacity: .82; transition: opacity .12s, background .12s, color .12s;
}
.pl-open-btn:hover { background: var(--accent); color: #fff; opacity: 1; }
.pl-row-more {
  font: inherit; font-size: 16px; line-height: 1; color: var(--text-secondary);
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 2px 7px; margin-left: 4px; cursor: pointer; vertical-align: middle;
  opacity: .5; transition: opacity .12s, color .12s, border-color .12s;
}
.pl-row-more:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.deal-row:hover .pl-open-btn { opacity: 1; }
.deal-row:hover .pl-row-more { opacity: .85; }

/* Row-actions overflow menu */
.pl-row-menu {
  position: fixed; z-index: 9600; min-width: 200px;
  background: var(--bg-1); border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px; padding: 5px; box-shadow: 0 16px 40px rgba(0,0,0,.34);
}
.pl-menu-item {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13px; color: var(--text-primary);
  background: transparent; border: 0; border-radius: 7px;
  padding: 8px 11px; cursor: pointer; white-space: nowrap;
}
.pl-menu-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.pl-menu-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary); padding: 9px 11px 3px;
}
.pl-menu-sub { padding-left: 22px; font-size: 12.5px; color: var(--text-secondary); }

/* — 7. Collapsible STAGE group header: a clear, scannable band with a
      stage-colored left accent + prominent count pill. The data-group-key only
      matches stage keys when grouped by Stage (otherwise no accent — clean). — */
.deal-group-row { border-top: 1px solid var(--border-strong, var(--border)); }
.deal-group-row > td { padding: 13px 16px; background: var(--bg-2); }
.deal-group-row:hover > td { background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.dgr-chev { font-size: 13px; color: var(--text-secondary); margin-right: 8px; }
.dgr-label { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-right: 9px; }
.dgr-count {
  font-size: 12.5px; font-weight: 700; min-width: 24px; padding: 2px 10px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dgr-aggs { margin-left: 18px; }
.dgr-agg-l { color: var(--text-tertiary); }
.dgr-agg-v { color: var(--text-primary); }
.deal-group-row[data-group-key="demos"] > td          { box-shadow: inset 4px 0 0 var(--stage-demos); }
.deal-group-row[data-group-key="underwriting"] > td    { box-shadow: inset 4px 0 0 var(--stage-uw); }
.deal-group-row[data-group-key="loi_rec"] > td,
.deal-group-row[data-group-key="loi_out"] > td,
.deal-group-row[data-group-key="under_loi"] > td       { box-shadow: inset 4px 0 0 var(--stage-loi); }
.deal-group-row[data-group-key="under_contract"] > td  { box-shadow: inset 4px 0 0 var(--stage-uc); }
.deal-group-row[data-group-key="closed"] > td          { box-shadow: inset 4px 0 0 var(--stage-closed); }
.deal-group-row[data-group-key="dead"] > td            { box-shadow: inset 4px 0 0 var(--stage-dead); }

/* — 8. KPI band numerals a touch larger so the headline value dominates. — */
.pl-kpi.pl-kpi-primary .val { font-size: 32px; }
.pl-kpi:not(.pl-kpi-primary) .val { font-size: 18px; }

/* ── UIiq fixes (2026-06-29) ─────────────────────────────────────────────────
   Per-view page heading so every SPA view has exactly one visible <h1>, a
   clearly-primary New Deal CTA, and empty-state action rows. ─────────────── */
.view-h1 {
  margin: 2px 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}
/* On Deal Detail the title sits above the rail layout — keep it tight. */
#view-deal .view-h1 { margin-bottom: 10px; }
/* IndicatorIQ is a full-bleed iframe — keep the heading compact above it. */
#view-reit .view-h1 { margin: 2px 0 8px; }
/* Pipeline: the view title lives inline in the stage toolbar row (replaced the
   old "Active Pipeline" label + the redundant standalone header), so keep it
   tight and vertically centered with the stage pills. */
#view-pipeline .ptb-row-stages .view-h1 { margin: 0 6px 0 0; align-self: center; }

/* New Deal — elevate to the obvious PRIMARY action: cobalt accent fill,
   distinct from the ghost view-control buttons, with a left separator. */
.pipeline-toolbar-right #new-deal-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 700;
  margin-left: 10px;
  box-shadow: 0 1px 10px color-mix(in srgb, var(--accent) 32%, transparent);
}
.pipeline-toolbar-right #new-deal-btn::before {
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-50%);
  height: 18px; width: 1px;
  background: var(--border);
}
.pipeline-toolbar-right #new-deal-btn { position: relative; }
.pipeline-toolbar-right #new-deal-btn:hover { filter: brightness(1.08); background: var(--accent); }

/* Empty-state CTA rows. */
.dei-actions { margin-top: 16px; }
.dei-actions .dei-cta { padding: 7px 16px; }

/* ===========================================================================
   UIiq high/medium findings — readability + hierarchy pass (2026-06-29 b)
   Surgical typography/weight tweaks only; no layout or data changes.
   =========================================================================== */

/* — #1 readability: KPI sub-labels were too small / faint to read. Lift the
     uppercase label off the faintest token onto --text-secondary, and bump the
     sub line a step so both clear the house readability bar. — */
.pl-kpi .lbl { color: var(--text-secondary); }
.pl-kpi .sub { font-size: 13px; color: var(--text-secondary); line-height: 1.3; }
.pl-kpi.pl-kpi-primary .sub { font-size: 13px; }

/* — #3 organization: normalize the KPI tiles so primary + secondary read as one
     system. Same internal rhythm (centered content, consistent gap + label
     metrics) keeps the deliberate value-size hierarchy while removing the
     uneven whitespace between tiles. — */
.pl-kpi { justify-content: center; gap: 3px; }
.pl-kpi .lbl {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.pl-kpi .sub { margin-top: 1px; }
.pl-kpi.pl-kpi-primary .lbl { color: var(--text-secondary); }

/* — #4 usability: make the selected category tab unmistakable. Reserve a 3px
     underline on every tab (no reflow on activate), then give the active tab a
     bold weight + saturated accent underline so the current view is obvious. — */
.tabs .tab { border-bottom-width: 3px; }
.tabs .tab.active {
  font-weight: 700;
  color: var(--text-primary);
  border-bottom-color: var(--accent-blue, var(--accent));
}

/* — #5 readability/organization: the stock-ticker bar was visually loud enough
     to compete with the nav. Drop its fill saturation, soften the borders, kill
     the shimmer sweep, and ease the symbol weight so it reads as a secondary
     status strip that sits below the navigation. (Ticker is NOT removed.) — */
.reit-ticker::before { opacity: .55; }
.reit-pill { font-size: 11.5px; }
.reit-pill .rp-sym { font-weight: 700; }
.reit-pill .rp-chg { font-weight: 600; }
.reit-pill.up {
  background: color-mix(in srgb, var(--positive) 12%, transparent);
  border-color: color-mix(in srgb, var(--positive) 32%, transparent);
}
.reit-pill.down {
  background: color-mix(in srgb, var(--negative) 12%, transparent);
  border-color: color-mix(in srgb, var(--negative) 32%, transparent);
}
.reit-pill::after { display: none; }  /* drop the animated sheen — no longer competes for attention */

/* ===========================================================================
   UIiq workflow/usability/errors pass (2026-06-30) — targeted fixes.
   All theme-token styled (light + dark). Appended last so it wins.
   =========================================================================== */

/* — Pipeline toolbar: logical control clusters with thin dividers — */
.pipeline-toolbar-right .ptb-group { display: inline-flex; align-items: center; gap: 8px; }
.pipeline-toolbar-right .ptb-divider {
  width: 1px; align-self: stretch; min-height: 22px;
  background: var(--border-strong, var(--border)); margin: 0 4px; flex: 0 0 auto;
}

/* — Pipeline pricing cells: "Unpriced" reads as intentional, not broken — */
.pl-unpriced {
  /* Was --text-tertiary on a 4% chip → near-invisible dead text on dark themes
     (UIiq readability/usability high). Lift to a legible secondary token with a
     concrete light fallback, a stronger chip fill + border so it reads as an
     intentional "not priced yet" pill, not missing data. */
  font-size: 12px; font-style: italic;
  color: var(--text-secondary, var(--text-2, #b8c0cc));
  background: color-mix(in srgb, var(--text-0) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-0) 14%, transparent);
  border-radius: 4px; padding: 1px 7px; white-space: nowrap;
}
/* Clickable "+ Add price" affordance on unpriced rows (UIiq workflow). */
.pl-add-price {
  cursor: pointer; font-style: normal; color: var(--accent, #1E50C8);
  border-color: color-mix(in srgb, var(--accent, #1E50C8) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #1E50C8) 8%, transparent);
  transition: background .12s ease, border-color .12s ease;
}
.pl-add-price:hover, .pl-add-price:focus-visible {
  background: color-mix(in srgb, var(--accent, #1E50C8) 16%, transparent);
  border-color: var(--accent, #1E50C8); outline: none;
}
.pl-add-price.inline-saving { opacity: .6; }
.pl-add-price.inline-error  { border-color: var(--negative, #e5484d); color: var(--negative, #e5484d); }
.pl-add-price-input { width: 92px; max-width: 92px; }

/* Deal-detail loading state — spinner + label, distinct from the empty state so
   "loading vs. nothing here" is never ambiguous (UIiq usability/workflow). */
.dd-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 48px 16px; color: var(--text-secondary, var(--text-2, #b8c0cc));
  font-size: 14px;
}
.dd-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-0) 18%, transparent);
  border-top-color: var(--accent, #1E50C8);
  animation: nd-spin 0.8s linear infinite;
}
/* Deal-detail loading SKELETON — mirrors the real layout (title + KPI tiles +
   content) so it's unmistakably "loading," never confused with an empty state. */
.dd-loading-skel { padding: 18px 4px; }
.dd-skel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dd-skel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.dd-skel-body { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 720px) { .dd-skel-kpis { grid-template-columns: repeat(2, 1fr); } }

/* — Deal-picker: browsable chevron affordance on the search field — */
.deal-picker-bar .dpb-input-wrap {
  position: relative; display: flex; align-items: center;
  flex: 1 1 280px; min-width: 200px; max-width: 460px;
}
.deal-picker-bar .dpb-input-wrap input {
  flex: 1 1 auto; width: 100%; max-width: none; padding-right: 30px;
}
.deal-picker-bar .dpb-chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text-tertiary, var(--text-3, var(--text-2)));
  pointer-events: none; line-height: 1;
}

/* — Deal-detail empty-state quick-pick chips: a touch wider so names read — */
.deal-empty-chip { max-width: 360px; }
.deal-empty-chip .dec-name { max-width: 260px; }

/* — ReportIQ: real last-run line on cards + honest saved-reports affordance — */
.riq-card-meta { font-size: 12px; color: var(--text-secondary); margin: 6px 0 2px; }
.riq-card-meta b { color: var(--text-primary); font-weight: 650; }
.riq-card-meta-none { color: var(--text-tertiary, var(--text-3, var(--text-2))); font-style: italic; }
.riq-saved-note {
  margin: 10px 2px 0; padding: 10px 14px; width: 100%;
  border: 1px dashed var(--border-strong, var(--border)); border-radius: 10px;
  color: var(--text-secondary); background: color-mix(in srgb, var(--text-0) 2.5%, transparent);
}

/* — FuelPoint: indeterminate progress bar beneath the loading label — */
.fp-progress {
  position: relative; height: 3px; width: 220px; max-width: 60vw; margin-top: 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px; overflow: hidden;
}
.fp-progress > span {
  position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px;
  background: var(--accent); animation: fp-indet 1.15s ease-in-out infinite;
}
@keyframes fp-indet {
  0%   { left: -42%; }
  100% { left: 102%; }
}
@media (prefers-reduced-motion: reduce) { .fp-progress > span { animation: none; left: 0; width: 100%; opacity: .5; } }

/* — TaxIQ: high-contrast warning treatment for the "N unmapped" drill-down — */
#view-taxiq .tx-kpi-cta {
  color: var(--warning, #b8860b); font-weight: 700;
  background: color-mix(in srgb, var(--warning, #b8860b) 16%, transparent);
  border-radius: 4px; padding: 0 6px;
}
#view-taxiq .tx-kpi-btn { border-color: color-mix(in srgb, var(--warning, #b8860b) 45%, var(--line)); }
#view-taxiq .tx-kpi-btn:hover { border-color: var(--warning, #b8860b); }
#view-taxiq .tx-kpi-btn.is-on { border-color: var(--warning, #b8860b); background: color-mix(in srgb, var(--warning, #b8860b) 10%, var(--bg-1)); }