/* ── Lotgic Design System — Phase A (light theme) ──
   Token NAMES preserved from the prior dark-theme system so the cascade
   continues to work. VALUES swapped to the new light marketing palette.
   Phase B will clean up inline style="..." overrides in app.js that still
   reference the dark-theme hex literals.                                  */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Latin.woff2') format('woff2-variations');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/InstrumentSerif-Italic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Backgrounds */
  --bg:        #FAFAF7;                  /* page bg     (was #060B14) */
  --surface:   #FFFFFF;                  /* card bg     (was #0D1724) */
  --surface2:  #F5F4ED;                  /* subtle bg   (was #111F33) */

  /* Brand / info */
  --blue:        #185FA5;                /* info blue   (was #3B82F6) */
  --blue-bright: #185FA5;                /* emphasis collapsed to same info blue (was #60A5FA) */
  --blue-glow:   rgba(24,95,165,0.20);   /* halo        (was #93C5FD) */

  /* Accents — kept semantic names */
  --cyan:    #1D9E75;                    /* now teal    (was #22D3EE) */
  --success: #0F6E56;                    /* deep green  (was #22D3EE) */
  --warning: #C77E1E;                    /* warm amber  (was #FBBF24) */
  --danger:  #B33548;                    /* muted brick (was #F87171) */

  /* Text — note: --white now means "primary text", which is dark in light theme */
  --white:  #1A1D24;                     /* primary text (was #F0F6FF) */
  --muted:  #6B7280;                     /* tertiary    (was #4A6080) */
  --muted2: #8A8F98;                     /* muted       (was #7A90A8) */

  /* Borders */
  --border:       rgba(20,25,35,0.08);   /* default (was rgba(96,165,250,0.12)) */
  --border-hover: rgba(20,25,35,0.12);   /* strong  (was rgba(96,165,250,0.30)) */

  /* Phase B-3 additions — inverse surface (for dark pills, dark CTAs) and a
     barely-cream tint usable as a logo-tile fallback if transparent reads
     as too floaty. Mirror landing.html's tokens so visual language stays in
     sync between dashboard and marketing. */
  --bg-inverse:   #1A1D24;
  --text-inverse: #FAFAF7;
  --bg-mute:      #F1EFE8;

  /* Fonts — Inter primary (self-hosted), JetBrains Mono for data/labels.
     --font-sans/data/heading/label were referenced throughout app.css but
     never declared in the prior :root — we declare them now as part of A. */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-data:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-label:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Phase A utilities (used inline in select template strings) ── */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.serif-italic {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Logo Wordmark ──
   Updated 2026-05: brand reference is lowercase "lotgic" in solid ink
   (public/assets/whole logo.png). Markup is now a single span — the
   legacy .lot/.gic selectors are kept as no-ops so any stray older
   markup falls back to the same solid color. The app's blue accent
   stays unchanged everywhere else; only the wordmark went monochrome. */
.logo-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--white); text-transform: lowercase; }
.logo-wordmark .lot,
.logo-wordmark .gic { color: var(--white); }

/* ── Login ── */
#login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); position: relative; }
.login-bg { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-bg::before {
  content: ''; position: fixed; top: -20%; left: -10%; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%); pointer-events: none;
}
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 400px; position: relative; }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 2rem; }
.login-mark {
  width: 44px; height: 44px; background: transparent; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: -0.5px;
}
.login-title { font-size: 18px; font-weight: 600; color: var(--white); }
.login-sub { font-size: 12px; color: var(--muted); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 12px; color: var(--muted2); margin-bottom: 5px; letter-spacing: 0.03em; font-family: var(--font-mono); }
.field input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
  font-size: 14px; color: var(--white); font-family: var(--font-mono); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.login-error { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--danger); margin-bottom: 1rem; }
.login-btn {
  width: 100%; background: var(--blue); color: #fff; border: none; border-radius: 8px; padding: 11px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-display); transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.login-btn:hover { background: var(--blue-bright); box-shadow: 0 0 20px rgba(59,130,246,0.35); }
.login-btn:active { transform: scale(0.99); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-footer { font-size: 11px; color: var(--muted); margin-top: 1.5rem; text-align: center; }

/* ── App Layout ── */
#app { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
#sidebar {
  width: 220px; min-height: 100vh; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 1.25rem 1rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.sb-mark {
  width: 34px; height: 34px; background: transparent; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--white); flex-shrink: 0;
}
.sb-title { font-size: 14px; font-weight: 600; color: var(--white); }
.sb-sub { font-size: 10px; color: var(--muted); }
.nav-section-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--blue-bright); opacity: 0.6;
  padding: 0.75rem 1rem 0.25rem; text-transform: uppercase; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 1rem; font-size: 13px; color: var(--muted2); cursor: pointer;
  border-radius: 6px; margin: 1px 6px; text-decoration: none; transition: background 0.12s, color 0.12s; position: relative;
}
.nav-item:hover { background: rgba(59,130,246,0.06); color: var(--white); }
.nav-item.active { background: rgba(59,130,246,0.12); color: var(--blue-bright); }
.nav-icon { font-size: 13px; width: 16px; text-align: center; }
.notif-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 600; }
#notif-bell {
  position: fixed; top: 14px; right: 20px; z-index: 1000; cursor: pointer;
  color: var(--muted2); transition: color 0.15s;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface2);
  border: 1px solid var(--border);
}
#notif-bell:hover { color: var(--white); border-color: var(--blue); }
tr:hover .qmi-link-icon { color: var(--blue-bright) !important; }
.landing-tab {
  background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 500;
  padding: 5px 14px; border-radius: 4px; cursor: pointer; font-family: var(--font-display);
  transition: all 0.15s;
}
.landing-tab:hover { color: var(--white); }
.landing-tab.active { background: var(--bg-inverse); color: var(--text-inverse); }
.qmi-tooltip { background: var(--surface) !important; color: var(--white) !important; border: 0.5px solid rgba(20,25,35,0.10) !important; border-radius: 8px !important; font-size: 12px !important; white-space: pre-line !important; padding: 8px 12px !important; box-shadow: 0 4px 12px rgba(20,25,35,0.10) !important; }
.qmi-tooltip .leaflet-tooltip-tip { border-top-color: var(--surface) !important; }
.qmi-pin { background: none !important; border: none !important; }
#notif-bell-badge {
  position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 9px; padding: 0 4px; font-family: var(--font-mono);
}
.sidebar-footer { margin-top: auto; padding: 1rem; border-top: 1px solid var(--border); }
.sidebar-user { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-family: var(--font-mono); }
.logout-btn {
  width: 100%; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted2); font-size: 12px;
  padding: 6px; cursor: pointer; font-family: var(--font-display); transition: all 0.12s;
}
.logout-btn:hover { background: rgba(59,130,246,0.06); color: var(--white); border-color: var(--border-hover); }

/* ── Main Content ── */
#main-content { margin-left: 220px; flex: 1; min-height: 100vh; padding: 2rem; max-width: 1200px; }
.page { display: none; }
.page.active { display: block; }

/* ── Page Headers ── */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -0.02em; }
.page-header p { font-size: 13px; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }

/* ── Stat Cards ── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; transition: border-color 0.15s; }
.stat-card:hover { border-color: var(--border-hover); }
.stat-card-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
.stat-card-val { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--white); line-height: 1; }
.stat-card-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.stat-card.accent { border-color: rgba(59,130,246,0.35); }

/* ── Builder Cards ── */
.builder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.builder-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; transition: border-color 0.15s; }
.builder-card:hover { border-color: var(--border-hover); }
.builder-card.featured { border-color: rgba(59,130,246,0.4); }
.bc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.bc-name { font-size: 15px; font-weight: 600; color: var(--white); }
.bc-series { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.bc-price { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--white); text-align: right; }
.bc-price-lbl { font-size: 10px; color: var(--muted); text-align: right; }
.bc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.bc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.bc-stat { background: var(--surface2); border-radius: 6px; padding: 6px 10px; }
.bc-stat-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.bc-stat-val { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--muted2); }
.bc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--surface2); color: var(--muted2); border: 1px solid var(--border); }
.bc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.status-text { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.link-btn {
  font-size: 12px; color: var(--blue-bright); border: 1px solid rgba(59,130,246,0.3); padding: 4px 10px;
  border-radius: 6px; cursor: pointer; background: none; font-family: var(--font-display); transition: background 0.12s; text-decoration: none;
}
.link-btn:hover { background: rgba(59,130,246,0.08); }

/* ── Floor Plan Table ── */
.fp-section { margin-bottom: 2rem; }
.fp-builder-hdr {
  display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px 10px 0 0; cursor: pointer;
}
.fp-builder-hdr h3 { font-size: 14px; font-weight: 600; color: var(--white); }
.fp-builder-hdr .meta { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.fp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fp-table th { background: var(--surface2); padding: 8px 14px; text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; letter-spacing: 0.05em; font-family: var(--font-mono); text-transform: uppercase; }
.fp-table td { padding: 10px 14px; border-bottom: 1px solid rgba(96,165,250,0.06); color: var(--muted2); vertical-align: middle; }
.fp-table tr:last-child td { border-bottom: none; }
.fp-table tr:hover td { background: rgba(59,130,246,0.04); }
.plan-name { font-weight: 500; color: var(--white); }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 20px; display: inline-block; }
.pill-1 { background: rgba(34,211,238,0.1); color: var(--cyan); }
.pill-2 { background: rgba(59,130,246,0.1); color: var(--blue-bright); }
.pill-series { background: rgba(96,165,250,0.08); color: var(--muted2); font-size: 10px; margin-top: 3px; letter-spacing: 0.2px; font-weight: 500; }
.series-cell { color: var(--muted2); font-weight: 400; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-val { font-family: var(--font-mono); font-size: 13px; color: var(--blue-bright); font-weight: 500; }
.change-up { color: var(--danger); }
.change-down { color: var(--cyan); }
.fp-footer-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); font-family: var(--font-mono); }

/* ── Filters ── */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; align-items: center; }
.filter-btn {
  font-size: 12px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent;
  color: var(--muted2); cursor: pointer; font-family: var(--font-display); transition: all 0.12s;
}
.filter-btn:hover { background: rgba(59,130,246,0.06); color: var(--white); border-color: var(--border-hover); }
.filter-btn.active { background: rgba(59,130,246,0.12); color: var(--blue-bright); border-color: rgba(59,130,246,0.4); }
.filter-select { font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--muted2); font-family: var(--font-mono); cursor: pointer; }

/* ── Incentive Cards ── */
.incentive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.inc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }
.inc-card-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.inc-card-name { font-size: 14px; font-weight: 600; color: var(--white); }
.inc-card-exp { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.inc-badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; }
.inc-savings { background: rgba(34,211,238,0.1); color: var(--cyan); }
.inc-financing { background: rgba(59,130,246,0.1); color: var(--blue-bright); }
.inc-warning { background: rgba(251,191,36,0.1); color: var(--warning); }
.inc-list { list-style: none; }
.inc-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(96,165,250,0.06); }
.inc-item:last-child { border-bottom: none; }
.inc-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
.inc-icon-g { background: rgba(34,211,238,0.1); color: var(--cyan); }
.inc-icon-b { background: rgba(59,130,246,0.1); color: var(--blue-bright); }
.inc-icon-a { background: rgba(251,191,36,0.1); color: var(--warning); }
.inc-label { font-size: 13px; color: var(--muted2); line-height: 1.4; }
.inc-detail { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.inc-flag-pill { display: inline-block; font-size: 9px; padding: 1px 6px; margin-right: 4px; border-radius: 10px; background: rgba(96,165,250,0.08); color: var(--blue-bright); font-family: var(--font-mono); letter-spacing: 0.04em; }
.inc-changes { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(96,165,250,0.06); }
.inc-changes-hdr { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; font-family: var(--font-mono); }
.inc-change-pill { display: inline-block; font-size: 9px; padding: 2px 6px; margin-right: 4px; margin-bottom: 3px; border-radius: 10px; background: rgba(34,211,238,0.08); color: var(--cyan); font-family: var(--font-mono); }

/* ── Overview card incentive chips ── */
.bc-inc-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.bc-inc-chip { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; line-height: 1.5; }
.bc-inc-chip-rate { background: rgba(59,130,246,0.12); color: var(--blue-bright); border: 0.5px solid rgba(59,130,246,0.25); }
.bc-inc-chip-cash { background: rgba(34,211,238,0.1); color: var(--cyan); border: 0.5px solid rgba(34,211,238,0.25); }
.bc-inc-chip-event { background: rgba(251,191,36,0.1); color: var(--warning); border: 0.5px solid rgba(251,191,36,0.25); }
.bc-inc-chip-other { background: rgba(96,165,250,0.06); color: var(--muted2); border: 0.5px solid var(--border); }
.bc-inc-empty { margin-top: 8px; font-size: 10px; color: var(--muted); font-family: var(--font-mono); font-style: italic; }
.bc-relative { position: relative; }
.bc-inc-change { position: absolute; top: 8px; right: 8px; font-size: 9px; padding: 2px 7px; border-radius: 8px; background: rgba(248,113,113,0.12); color: var(--danger); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; z-index: 1; }
/* Remove-competitor × — top-left of the card so it doesn't collide with
   bc-inc-change on the right. Hover-revealed (and focus-visible) to keep the
   resting card clean; on touch devices it stays visible because :hover never
   triggers. */
.bc-remove { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--muted2); font-size: 16px; line-height: 1; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; z-index: 2; }
.builder-card:hover .bc-remove,
.bc-remove:focus-visible { opacity: 1; }
.bc-remove:hover { background: rgba(179, 53, 72, 0.08); color: var(--danger); }
.bc-remove:disabled { opacity: 0.5; cursor: wait; }
@media (hover: none) { .bc-remove { opacity: 1; } }
/* Reorder ↑↓ — admin-only, same hover-reveal pattern as bc-remove, sits
   just to the right of × on the top-left so the resting card stays clean. */
.bc-reorder { position: absolute; top: 8px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--muted2); font-size: 12px; line-height: 1; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; z-index: 2; }
.bc-reorder-up   { left: 32px; }
.bc-reorder-down { left: 54px; }
.builder-card:hover .bc-reorder,
.bc-reorder:focus-visible { opacity: 1; }
.bc-reorder:hover { background: rgba(24,95,165,0.10); color: var(--white); }
.bc-reorder:disabled { opacity: 0.4; cursor: wait; }
@media (hover: none) { .bc-reorder { opacity: 1; } }

/* ── Incentives Intelligence Page (inc2) ── */
.inc2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.inc2-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; }
.inc2-stat-lbl { font-size: 10px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.06em; margin-bottom: 6px; }
.inc2-stat-val { font-size: 24px; font-weight: 700; color: var(--white); font-family: var(--font-display, var(--font-mono)); }
.inc2-stat-val.rate { color: var(--blue-bright); }
.inc2-stat-val.cash { color: var(--cyan); }
.inc2-stat-val.recent { color: var(--warning); }
.inc2-stat-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.inc2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.inc2-row { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; transition: border-color 0.15s ease; }
.inc2-row:hover { border-color: rgba(96,165,250,0.25); }
.inc2-row-empty { opacity: 0.55; }
.inc2-row-empty:hover { border-color: var(--border); }
.inc2-row-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.inc2-row-title { flex: 1; min-width: 0; }
.inc2-builder { font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.3; }
.inc2-community { font-size: 11px; color: var(--blue-bright); margin-top: 2px; font-family: var(--font-mono); }
.inc2-summary { font-size: 13px; color: var(--muted2); line-height: 1.5; margin-bottom: 4px; }
.inc2-summary-detail { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 4px; }
.inc2-additional { font-size: 10px; color: var(--muted); font-family: var(--font-mono); margin-bottom: 10px; }
.inc2-empty-msg { font-size: 12px; color: var(--muted); font-style: italic; padding: 8px 0; }

.inc2-metrics { display: flex; gap: 16px; margin-top: 10px; padding: 10px 0; border-top: 0.5px solid rgba(96,165,250,0.08); border-bottom: 0.5px solid rgba(96,165,250,0.08); }
.inc2-metric { flex: 0 0 auto; }
.inc2-metric-lbl { font-size: 9px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.inc2-metric-val { font-size: 16px; font-weight: 700; color: var(--white); margin-top: 2px; font-family: var(--font-mono); }
.inc2-metric-val.rate { color: var(--blue-bright); }
.inc2-metric-val.cash { color: var(--cyan); }
.inc2-metric-val.event { color: var(--warning); font-size: 13px; font-weight: 600; }
.inc2-metric-val.muted { color: var(--muted2); font-size: 13px; font-weight: 500; font-style: italic; }

.inc2-flags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.inc2-pill { display: inline-block; font-size: 9px; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; line-height: 1.6; }
.pill-rate { background: rgba(59,130,246,0.12); color: var(--blue-bright); }
.pill-cash { background: rgba(34,211,238,0.1); color: var(--cyan); }
.pill-discount { background: rgba(248,113,113,0.1); color: var(--danger); }
.pill-perk { background: rgba(96,165,250,0.06); color: var(--muted2); }

.inc2-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: var(--muted); font-family: var(--font-mono); align-items: center; }
.inc2-source { color: var(--blue-bright); text-decoration: none; margin-left: auto; }
.inc2-source:hover { text-decoration: underline; }

.inc2-change-badge { display: inline-block; font-size: 10px; padding: 3px 9px; border-radius: 12px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; line-height: 1.6; flex-shrink: 0; }
.change-new { background: rgba(34,211,238,0.15); color: var(--cyan); border: 0.5px solid rgba(34,211,238,0.4); }
.change-rate { background: rgba(59,130,246,0.15); color: var(--blue-bright); border: 0.5px solid rgba(59,130,246,0.4); }
.change-cash { background: rgba(34,211,238,0.12); color: var(--cyan); border: 0.5px solid rgba(34,211,238,0.3); }
.change-event { background: rgba(251,191,36,0.12); color: var(--warning); border: 0.5px solid rgba(251,191,36,0.3); }
.change-other { background: rgba(96,165,250,0.08); color: var(--muted2); border: 0.5px solid var(--border); }
.change-removed { background: rgba(248,113,113,0.1); color: var(--danger); border: 0.5px solid rgba(248,113,113,0.3); }

/* ── Price Chart ── */
.chart-section { margin-bottom: 2rem; }
.chart-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chart-lbl { width: 120px; font-size: 12px; color: var(--muted); text-align: right; flex-shrink: 0; }
.chart-track { flex: 1; height: 24px; background: var(--surface2); border-radius: 4px; position: relative; overflow: hidden; }
.chart-fill { height: 100%; border-radius: 4px; opacity: 0.7; position: absolute; }
.chart-price-label { font-size: 11px; color: var(--muted); width: 100px; font-family: var(--font-mono); flex-shrink: 0; }

/* ── Notifications ── */
.notif-list { }
.notif-item { display: flex; gap: 12px; padding: 12px 10px; border-bottom: 1px solid rgba(96,165,250,0.06); cursor: pointer; transition: background 0.12s; border-radius: 6px; }
.notif-item:hover { background: rgba(59,130,246,0.04); }
.notif-item.unread { background: rgba(59,130,246,0.06); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.notif-content { flex: 1; }
.notif-title { font-size: 13px; font-weight: 500; color: var(--white); }
.notif-msg { font-size: 12px; color: var(--muted); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }
.notif-empty { text-align: center; padding: 3rem; color: var(--muted); font-size: 14px; }

/* ── Sold Homes ── */
.sold-empty { text-align: center; padding: 3rem; color: var(--muted); }

/* ── History Table ── */
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-table th { background: var(--surface2); padding: 8px 14px; text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.history-table td { padding: 9px 14px; border-bottom: 1px solid rgba(96,165,250,0.06); color: var(--muted2); }
.history-table tr:last-child td { border-bottom: none; }

/* ── User Management ── */
.user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.user-table th { background: var(--surface2); padding: 8px 14px; text-align: left; font-size: 11px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.user-table td { padding: 10px 14px; border-bottom: 1px solid rgba(96,165,250,0.06); color: var(--muted2); }
.role-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; }
.role-admin { background: rgba(59,130,246,0.12); color: var(--blue-bright); }
.role-viewer { background: var(--surface2); color: var(--muted); }
.role-owner-admin { background: rgba(59,130,246,0.12); color: var(--blue-bright); }
.role-internal-user { background: rgba(34,211,238,0.12); color: #22D3EE; }
.role-pilot-admin { background: rgba(168,85,247,0.12); color: #A855F7; }
.role-pilot-user { background: rgba(74,222,128,0.12); color: #4ADE80; }
.role-read-only { background: var(--surface2); color: var(--muted); }

/* ── Forms ── */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; transition: border-color 0.15s; }
.form-card:hover { border-color: var(--border-hover); }
.form-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 1rem; color: var(--white); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; font-family: var(--font-mono); }
.form-field input, .form-field select {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px;
  font-size: 13px; color: var(--white); font-family: var(--font-mono); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus, .form-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.btn { font-size: 13px; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: var(--font-display); border: none; font-weight: 600; transition: all 0.12s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-bright); box-shadow: 0 0 20px rgba(59,130,246,0.35); }
.btn-danger { background: rgba(248,113,113,0.1); color: var(--danger); border: 1px solid rgba(248,113,113,0.3); }
.btn-danger:hover { background: rgba(248,113,113,0.15); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--muted2); }
.btn-outline:hover { background: rgba(59,130,246,0.06); border-color: var(--border-hover); color: var(--white); }

/* ── Scraper Status ── */
.scraper-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.scraper-status-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.log-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
.log-table td { padding: 6px 10px; border-bottom: 1px solid rgba(96,165,250,0.06); color: var(--muted2); }
.log-success { color: var(--cyan); }
.log-error { color: var(--danger); }

/* ── Toast ── */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; min-width: 280px; max-width: 380px; font-size: 13px; animation: toast-in 0.25s ease; display: flex; align-items: flex-start; gap: 10px; }
.toast-icon { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.toast-title { font-weight: 500; color: var(--white); }
.toast-msg { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.toast.success { border-left: 3px solid var(--cyan); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.info { border-left: 3px solid var(--blue); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Modal (Add Competitor+, reusable) ────────────────────────────────────
   Tokens only — no new colors. Sits above #toast-container (z 9999) so toast
   notifications stay readable while a modal is open. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 25, 35, 0.40);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 1rem 2rem; overflow-y: auto;
  animation: modal-fade 0.18s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%; max-width: 720px;
  box-shadow: 0 20px 60px rgba(20, 25, 35, 0.18);
  animation: modal-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-header h2 { font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; }
.modal-header p { font-size: 12px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.modal-close { background: transparent; border: none; color: var(--muted2); font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px; transition: color 0.12s, background 0.12s; }
.modal-close:hover { color: var(--white); background: var(--surface2); }
.modal-tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--border); }
.modal-tab { background: transparent; border: none; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--muted2); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--font-display); transition: color 0.12s, border-color 0.12s; }
.modal-tab:hover { color: var(--white); }
.modal-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.modal-body { padding: 16px 20px 20px; min-height: 120px; max-height: 60vh; overflow-y: auto; }
.modal-search-row { padding: 12px 20px 8px; border-bottom: 1px solid var(--border); }
.modal-search-input { width: 100%; padding: 9px 12px; font-size: 13px; font-family: var(--font-display); background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--white); transition: border-color 0.12s, background 0.12s; }
.modal-search-input:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.modal-search-input::placeholder { color: var(--muted); }

/* Compact candidate cards — used by both Suggested and Search lists */
.candidate-list { display: flex; flex-direction: column; gap: 8px; }
.candidate-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; transition: border-color 0.12s, background 0.12s; }
.candidate-card:hover { border-color: var(--border-hover); }
.candidate-card.in-set { opacity: 0.6; background: var(--surface2); }
.candidate-card.busy { pointer-events: none; opacity: 0.7; }
.candidate-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.candidate-title { font-size: 13px; font-weight: 600; color: var(--white); }
.candidate-subtitle { font-size: 11px; color: var(--muted); margin-top: 1px; font-family: var(--font-mono); }
.candidate-meta-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; font-size: 11px; color: var(--muted2); font-family: var(--font-mono); }
.candidate-meta-row span strong { color: var(--white); font-weight: 600; }
.candidate-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.why-chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted2); font-family: var(--font-mono); border: 1px solid var(--border); }

/* Readiness pills — minimal palette (existing tokens) */
.readiness-badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid; }
.readiness-ready { color: var(--cyan); border-color: rgba(29, 158, 117, 0.30); background: rgba(29, 158, 117, 0.08); }
.readiness-partial { color: var(--warning); border-color: rgba(199, 126, 30, 0.30); background: rgba(199, 126, 30, 0.08); }
.readiness-needs { color: var(--danger); border-color: rgba(179, 53, 72, 0.30); background: rgba(179, 53, 72, 0.08); }

/* Scope picker + add row */
.scope-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.scope-option { font-size: 11px; padding: 4px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--muted2); font-family: var(--font-display); transition: all 0.1s; }
.scope-option:hover { border-color: var(--border-hover); color: var(--white); }
.scope-option.selected { border-color: var(--blue); color: var(--blue); background: rgba(24, 95, 165, 0.06); }

.candidate-actions { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.candidate-actions .btn { font-size: 11px; padding: 5px 12px; }

/* Empty / loading / error states inside the modal body */
.modal-state { padding: 28px 8px; text-align: center; color: var(--muted2); font-size: 13px; }
.modal-state-sub { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-mono); }
.modal-error { background: rgba(179, 53, 72, 0.06); border: 1px solid rgba(179, 53, 72, 0.30); color: var(--danger); padding: 10px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
.modal-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: modal-spin 0.7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes modal-spin { to { transform: rotate(360deg); } }

/* Confirm-modal variant — narrower than the Add Competitor+ modal, with a
   right-aligned action row separated by a subtle border. Shares everything
   else (overlay, header, close button, animations) so the visual language
   stays consistent. */
.modal-confirm { max-width: 460px; }
.modal-confirm .modal-body p { font-size: 13px; color: var(--white); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }

/* ── Settings ── */
.settings-section { margin-bottom: 2rem; }
.settings-section h3 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 1rem; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.toggle-label { font-size: 13px; color: var(--muted2); }
.toggle-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.toggle { position: relative; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--surface2); border-radius: 22px; cursor: pointer; transition: background 0.2s; }
.toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: transform 0.2s; }
.toggle input:checked + .toggle-slider { background: var(--blue); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── Animations ── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pulsing { animation: pulse 1.5s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,211,238,0.4); } 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34,211,238,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* ── Skeleton Loading ── */
.skel { border-radius: 8px; background: linear-gradient(90deg, var(--surface2) 25%, rgba(59,130,246,0.06) 50%, var(--surface2) 75%); background-size: 800px 100%; animation: shimmer 1.6s ease infinite; }
.skel-header { height: 22px; width: 180px; margin-bottom: 6px; }
.skel-sub { height: 14px; width: 280px; margin-bottom: 24px; }
.skel-card { height: 140px; border-radius: 12px; border: 0.5px solid var(--border); }
.skel-card-tall { height: 220px; border-radius: 12px; border: 0.5px solid var(--border); }
.skel-row { height: 40px; border-radius: 6px; margin-bottom: 8px; }
.skel-chart { height: 200px; border-radius: 12px; border: 0.5px solid var(--border); }
.skel-stat { height: 72px; border-radius: 10px; }
.page-fade-in { animation: fadeUp 0.2s ease both; }

/* ── Misc ── */
.section-divider { margin: 1.5rem 0; border: none; border-top: 1px solid var(--border); }
.empty-state { text-align: center; padding: 3rem; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; font-family: var(--font-mono); }
.badge-live { background: rgba(34,211,238,0.1); color: var(--cyan); }
.badge-soon { background: rgba(251,191,36,0.1); color: var(--warning); }
.last-updated { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); }
a { color: inherit; text-decoration: none; }

/* ── Live Badge ── */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.25); border-radius: 100px; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 10px; color: var(--blue-bright); letter-spacing: 0.08em;
}
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulseDot 2s ease infinite; }

/* ── Section Labels ── */
.section-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em; color: var(--blue-bright);
  text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.section-label::before { content: '//'; opacity: 0.5; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Landing Page ── */
#landing-page { height: 100vh; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.landing-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.landing-header-left { display: flex; align-items: center; gap: 12px; }
.landing-header-right { display: flex; align-items: center; gap: 10px; }
.landing-user-block { display: inline-flex; align-items: center; gap: 8px; }
.landing-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-inverse); color: var(--text-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  font-family: var(--font-sans);
}
.landing-logo { display: flex; align-items: center; gap: 10px; }
.landing-mark { width: 36px; height: 36px; background: transparent; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--white); }
.landing-title { font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: -0.02em; }
.landing-subtitle { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.landing-user { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

.landing-stats { display: flex; justify-content: center; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; }
.landing-stat { padding: 0.6rem 1.25rem; border-right: 1px solid var(--border); min-width: fit-content; }
.landing-stat:last-child { border-right: none; }
.landing-stat-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.landing-stat-val { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--white); }
.landing-stat-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }

/* ── Unified market header ── */
.market-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.market-header-inner { max-width: 1320px; margin: 0 auto; padding: 0 2rem; }

/* Row 1: Metrics — centered as a group */
.market-stats-row { display: flex; justify-content: center; padding: 0.75rem 0 0.65rem; }
.market-stats-cluster { display: flex; align-items: center; }
.market-stats-primary { display: flex; align-items: stretch; }
.market-stats-divider { width: 1px; background: var(--border); margin: 4px 0.6rem; align-self: stretch; }
.market-stats-secondary { display: flex; align-items: center; }
.market-stat { padding: 0.15rem 1rem; min-width: fit-content; }
.market-stats-primary .market-stat { border-right: 1px solid var(--border); }
.market-stats-primary .market-stat:last-child { border-right: none; }
.market-stat-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1px; }
.market-stat-val { font-family: var(--font-mono); font-weight: 600; color: var(--white); line-height: 1.15; }
.market-stat-sub { font-family: var(--font-mono); font-size: 9px; color: var(--muted2); margin-top: 2px; }
.market-stats-primary .market-stat-val { font-size: 17px; }
.market-stats-primary .market-stat-hero .market-stat-val { font-size: 26px; letter-spacing: -0.02em; }
.market-stats-primary .market-stat-hero .market-stat-lbl { font-size: 10px; color: var(--blue-bright); opacity: 0.9; }
.market-stats-secondary .market-stat-val { font-size: 14px; color: var(--white); font-weight: 500; }
.market-stats-secondary .market-stat-lbl { font-size: 8px; color: var(--muted); }
.market-stats-secondary .market-stat-sub { font-size: 8px; }
.market-stats-secondary .market-stat { padding: 0.15rem 0.85rem; border-right: 1px solid rgba(96,165,250,0.12); }
.market-stats-secondary .market-stat:last-child { border-right: none; }

/* Row 2: Controls — space-between toolbar */
.market-filters-row { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0 0.55rem; border-top: 1px solid rgba(96,165,250,0.08); }
.market-filters-left { display: flex; align-items: center; gap: 12px; }
.market-filters-left .filter-reset { margin-left: 2px; }
.market-filters-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }


.supply-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; position: relative; top: -1px; }
.supply-dot-green { background: var(--cyan); box-shadow: 0 0 6px rgba(34,211,238,0.4); }
.supply-dot-yellow { background: var(--warning); box-shadow: 0 0 6px rgba(251,191,36,0.4); }
.supply-dot-red { background: var(--danger); box-shadow: 0 0 6px rgba(248,113,113,0.4); }

.landing-filters { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface2); flex-wrap: wrap; }
.landing-filters .filter-reset { margin-left: 2px; }
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-label { font-size: 11px; color: var(--muted); letter-spacing: 0.03em; white-space: nowrap; font-family: var(--font-mono); }
.range-inputs { display: flex; align-items: center; gap: 4px; }
.filter-dash { color: var(--muted); font-size: 12px; }
.filter-reset { font-size: 11px; color: var(--muted2); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-family: var(--font-display); transition: all 0.12s; margin-left: auto; }
.filter-reset:hover { background: rgba(59,130,246,0.06); color: var(--white); }
.filter-count { font-size: 11px; color: var(--blue-bright); font-family: var(--font-mono); }

.landing-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.landing-map-col { flex: 1; padding: 0.75rem 1rem 1rem; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.landing-map-card { width: 100%; flex: 1; min-height: 0; min-height: 420px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); position: relative; }
.landing-list-col { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--surface); }
/* ── AI Market Snapshot (admin-only experimental panel) ── */
/* Lives at the top of the Market view's list column. Subtle blue-tinted
   chrome to signal "experimental admin surface" without competing with
   the main community list below. */
.market-ai-snapshot {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(24, 95, 165, 0.04);
}
.ai-snap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ai-snap-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-snap-btn { font-size: 11px; padding: 5px 12px; }
.ai-snap-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 8px;
}
.ai-snap-bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-snap-bullets li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--white);
}
.ai-snap-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue-bright);
}
.ai-snap-meta {
  margin-top: 10px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.ai-snap-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ai-snap-meta-sep { color: var(--border); }
.ai-snap-error {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--danger);
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 4px;
}

.landing-list-header { padding: 1rem 1rem 0.75rem; border-bottom: 1px solid var(--border); }
.landing-list-header h2 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.community-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 12px; color: var(--white); font-family: var(--font-mono); outline: none; }
.community-search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.community-list { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.community-card { display: flex; align-items: flex-start; gap: 12px; padding: 0.75rem 1rem; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid rgba(96,165,250,0.06); }
.community-card:hover { background: rgba(59,130,246,0.04); }
.community-card.has-data { border-left: 3px solid var(--blue); }
.community-card-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(59,130,246,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--blue-bright); flex-shrink: 0; margin-top: 2px; }
.community-card-body { flex: 1; min-width: 0; }
.community-card-name { font-size: 13px; font-weight: 600; color: var(--white); }
.community-card-city { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.community-card-price { font-size: 12px; color: var(--blue-bright); font-family: var(--font-mono); margin-top: 2px; }
.community-card-builders { font-size: 10px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.community-card-meta { display: flex; gap: 10px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.community-card-meta span { display: inline-flex; align-items: center; gap: 2px; }
.community-card-status { font-size: 10px; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; margin-top: 4px; font-family: var(--font-mono); }
.community-card-status.live { background: rgba(34,211,238,0.1); color: var(--cyan); }
.community-card-status.coming { background: rgba(251,191,36,0.1); color: var(--warning); }

/* ── View Toggle (M/I / Market) ── */
.landing-header-center { display: flex; align-items: center; }
.view-toggle {
  display: flex; gap: 2px; background: var(--surface2); border-radius: 8px; padding: 3px;
  border: 1px solid var(--border);
}
.view-toggle-btn {
  background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 6px 20px; border-radius: 6px; cursor: pointer; font-family: var(--font-display);
  transition: all 0.15s; letter-spacing: -0.01em;
}
.view-toggle-btn:hover { color: var(--white); }
.view-toggle-btn.active { background: var(--bg-inverse); color: var(--text-inverse); }

/* ── Market View ── */
/* IMPORTANT: never animate `transform` on .market-pin. Leaflet uses
   `transform: translate3d(…)` inline to position each marker; animating
   transform (even just translateY) with animation-fill-mode:both clobbers
   that inline positioning and stacks every marker at the pane origin
   (bug signature: "stacked multicolor dot in the upper-left corner"). */
.market-pin {
  background: none !important; border: none !important;
  animation: market-pin-fade 260ms ease-out both;
}
@keyframes market-pin-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pin-toggle-btn {
  padding: 3px 10px; background: var(--surface); color: var(--muted2);
  border: none; cursor: pointer; font-size: 11px; font-family: var(--font-mono);
  transition: background 0.15s, color 0.15s;
}
.pin-toggle-btn:hover { background: var(--surface2); }
.pin-toggle-btn.active { background: var(--bg-inverse); color: var(--text-inverse); }

.market-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 1000;
  background: var(--surface); border: 1px solid rgba(20,25,35,0.10);
  border-radius: 10px; padding: 10px 12px; max-height: 300px; overflow-y: auto;
  min-width: 160px;
  box-shadow: 0 1px 2px rgba(20,25,35,0.06), 0 4px 14px rgba(20,25,35,0.05);
}
.market-legend-title {
  font-size: 11px; font-weight: 600; color: var(--muted2); margin-bottom: 6px;
  font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.market-legend-item {
  display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 4px;
  cursor: pointer; transition: background 0.12s; font-size: 11px;
}
.market-legend-item:hover { background: var(--surface2); }
.market-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.market-legend-name { flex: 1; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-legend-count { color: var(--muted); font-family: var(--font-mono); font-size: 10px; }

.market-builder-group { border-bottom: 1px solid rgba(96,165,250,0.06); }
.market-builder-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-left: 3px solid var(--blue);
  background: var(--surface); transition: background 0.12s; user-select: none;
}
.market-builder-header:hover { background: rgba(59,130,246,0.04); }
.market-builder-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.market-builder-name { font-size: 12px; font-weight: 600; color: var(--white); flex: 1; }
.market-builder-count {
  font-size: 10px; color: var(--muted); font-family: var(--font-mono);
  background: rgba(96,165,250,0.08); padding: 1px 6px; border-radius: 8px;
}
.market-builder-arrow {
  font-size: 10px; color: var(--muted); transition: transform 0.2s; flex-shrink: 0;
}
.market-builder-group.expanded .market-builder-arrow { transform: rotate(90deg); }
.market-builder-communities { display: none; }
.market-builder-group.expanded .market-builder-communities { display: block; }
.market-builder-header { cursor: pointer; }
.market-builder-header:hover .market-builder-name { color: var(--blue-bright); }
.market-builder-group.selected .market-builder-header {
  background: rgba(59,130,246,0.14);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.35);
}
.market-builder-group.selected .market-builder-name { color: var(--blue-bright); }
.market-builder-group.selected .market-builder-count {
  background: rgba(96,165,250,0.22); color: var(--white);
}
.market-builder-arrow { cursor: pointer; }

/* Builder summary panel */
.builder-summary { padding: 1rem; }
.builder-summary-back { font-size: 12px; color: var(--blue-bright); cursor: pointer; font-family: var(--font-mono); margin-bottom: 12px; display: inline-block; }
.builder-summary-back:hover { color: var(--white); }
.builder-summary-title { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.builder-summary-subtitle { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-bottom: 16px; }
.builder-summary-metrics { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.builder-summary-metric { flex: 1; min-width: 70px; background: var(--surface2); border-radius: 8px; padding: 10px; text-align: center; border: 1px solid var(--border); }
.builder-summary-metric-val { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--white); }
.builder-summary-metric-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.builder-summary-section { margin-bottom: 16px; }
.builder-summary-section-title { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.builder-summary-rank { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px solid rgba(96,165,250,0.04); }
.builder-summary-rank:last-child { border-bottom: none; }
.builder-summary-rank-name { color: var(--white); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-summary-rank-val { color: var(--muted2); font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; margin-left: 8px; }

/* Community coming-soon placeholder */
.coming-soon-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 2rem; }
.coming-soon-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--blue); }
.coming-soon-title { font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.coming-soon-sub { font-size: 14px; color: var(--muted); max-width: 400px; line-height: 1.6; margin-bottom: 1.5rem; }
.coming-soon-details { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 2rem; text-align: left; font-size: 13px; color: var(--muted2); line-height: 2; max-width: 500px; width: 100%; }
.coming-soon-details strong { color: var(--muted2); }

/* Builder recent activity */
.builder-activity { margin-bottom: 18px; }
.builder-activity-title { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.builder-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.builder-activity-item { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 4px 0; }
.builder-activity-label { color: var(--muted2); font-family: var(--font-mono); font-size: 11px; }
.builder-activity-val { color: var(--white); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }

/* Leaflet overrides — basemap is now CartoDB Voyager (cream/light), so the
   former invert() filter that faked a dark tone is removed. The container
   background tracks --bg so empty/loading panes match the page. */
.leaflet-container { background: var(--bg); }
.leaflet-control-zoom a { background: var(--surface) !important; color: var(--muted2) !important; border-color: var(--border) !important; }
.leaflet-popup-content-wrapper { background: var(--surface2); color: var(--white); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.leaflet-popup-tip { background: var(--surface2); }
.leaflet-popup-content { margin: 10px 14px; font-family: var(--font-display); font-size: 13px; }
.leaflet-popup-content .popup-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.leaflet-popup-content .popup-city { color: var(--muted2); font-size: 12px; margin-bottom: 6px; }
.leaflet-popup-content .popup-price { font-family: var(--font-mono); color: var(--cyan); font-size: 13px; margin-bottom: 4px; }
.leaflet-popup-content .popup-builders { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.leaflet-popup-content .popup-btn { display: inline-block; padding: 5px 14px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; border: none; font-family: var(--font-display); }
.leaflet-popup-content .popup-btn:hover { background: var(--blue-bright); }
.leaflet-popup-close-button { color: var(--muted) !important; }

/* Lotgic map markers */
.lotgic-marker { background: none !important; border: none !important; filter: none; }
.leaflet-marker-shadow { display: none; }

/* Census tooltip */
.census-tooltip { background: var(--surface2) !important; color: var(--white) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; font-family: var(--font-mono) !important; font-size: 12px !important; padding: 4px 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; }
.census-tooltip::before { border-top-color: var(--surface2) !important; }

/* Census legend */
.census-legend { position: absolute; bottom: 12px; left: 12px; z-index: 1000; background: rgba(6,11,20,0.9); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 160px; }
.legend-title { font-size: 11px; font-weight: 600; color: var(--muted2); margin-bottom: 6px; }
.legend-bar { margin-bottom: 2px; }
.legend-gradient { height: 10px; border-radius: 3px; background: linear-gradient(to right, var(--warning), var(--cyan), var(--success)); }
.legend-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-family: var(--font-mono); }

/* ── AI Overview ── */
/* CSS class prefix stays `.da-*` for stability — the prefix isn't user-
   visible and renaming it would be cosmetic churn. */
/* Beta pill — small inline label next to the page title. Signals to the
   operator that this surface is premature and outputs should be reviewed
   before being treated as authoritative. */
.da-beta-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-bright);
  background: rgba(24, 95, 165, 0.08);
  border: 1px solid rgba(24, 95, 165, 0.35);
  border-radius: 999px;
  line-height: 1.4;
}
/* One-line takeaway above the four cards. Subtle blue-tinted surface so
   it reads as "highlighted" without competing with the cards below. Uses
   only existing tokens. */
.da-bottomline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 1.25rem;
  background: rgba(24, 95, 165, 0.05);
  border: 1px solid rgba(24, 95, 165, 0.18);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
}
.da-bottomline-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  font-weight: 600;
}
.da-bottomline-text {
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .da-bottomline { flex-direction: column; gap: 4px; align-items: flex-start; }
}
.da-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-bottom: 1.5rem;
}
.da-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.da-card-top {
  grid-column: 1 / -1;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.35);
}
/* Full-width card inside the 2-column grid. Used by Competitive Pressure
   so it reads as a wider, set-level section without the highlighted
   blue-tint treatment reserved for the top Market Snapshot card. */
.da-card-span {
  grid-column: 1 / -1;
}
/* Standalone card outside the grid — used by Market Snapshot now that
   the support charts live between it and the rest of the cards. Adds
   the same vertical rhythm a grid row would. */
.da-card-standalone {
  margin-bottom: 16px;
}
/* Supporting-evidence chart strip. Sits between the narrative cards
   and the Bottom Line so the page reads narrative-first, evidence-
   second. The wrapper exists so the two charts share top spacing
   without duplicating margin rules. */
.da-charts {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Deterministic support charts. Same surface tokens as .da-card so the
   chart reads as a section of the briefing rather than a widget;
   padding is tighter than .da-card to match the executive-appendix
   density target. */
.da-chart-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem 0.8rem;
}
.da-chart-card .da-card-label { margin-bottom: 2px; }
/* Subtitle directly under the chart title — communicates the chart's
   semantic immediately ("Homes reduced · avg reduction") so the user
   doesn't have to infer it from the bars. */
.da-chart-sub {
  font-size: 11px;
  color: var(--muted2);
  margin-bottom: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans, system-ui, sans-serif);
}
/* Secondary variant — used by Price Reductions to sit visually below
   Sales Momentum in the supporting-evidence hierarchy. */
.da-chart-card-secondary {
  padding: 0.55rem 0.9rem 0.65rem;
  background: var(--surface);
}
.da-chart-card-secondary .da-card-label { font-size: 10px; }
.da-chart-card-secondary .da-chart-sub { font-size: 10px; margin-bottom: 6px; }
.da-chart-svg { display: block; }
/* Chart text — labels in muted slate, subject builder lifted to the
   primary text color. The SVG text uses real CSS classes (not SVG-only
   styling) so the colour tokens stay consistent with the rest of the
   page. */
.da-chart-label {
  font-size: 12px;
  fill: var(--muted);
  font-family: var(--font-sans, system-ui, sans-serif);
}
.da-chart-label-compact { font-size: 11px; }
.da-chart-label-primary { fill: var(--white); font-weight: 600; }
.da-chart-value {
  font-size: 12px;
  fill: var(--muted2);
  font-family: var(--font-mono);
}
.da-chart-value-compact { font-size: 11px; }
.da-chart-value-primary { fill: var(--white); font-weight: 600; }
.da-chart-empty {
  padding: 20px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
/* Subtitle below the page H1. Pure typographic helper — no background,
   no border, no separator — so the framing line reads as a continuation
   of the header rather than its own UI block. */
.da-subtitle {
  margin-top: 4px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.da-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.da-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--white);
}
.da-card-body-strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
/* Trust strip — subtle "Synthesized from" + "Data refreshed" lines under
   the cards. Subtitle-weight, no background or border, so the framing
   reads as professional context rather than another UI block. */
.da-trust {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.5;
}
.da-trust-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.da-trust-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 1px;
}
.da-trust-value {
  flex: 1;
  min-width: 220px;
}
.da-inputs {
  margin-top: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--muted2);
}
.da-inputs summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.da-inputs dl { margin: 12px 0 4px; }
.da-inputs dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 8px;
}
.da-inputs dd { margin: 4px 0 0; line-height: 1.5; }
@media (max-width: 720px) {
  .da-grid { grid-template-columns: 1fr; }
  .da-card-top { grid-column: 1; }
  .da-card-span { grid-column: 1; }
}

/* ── AI Overview — shared loaders/placeholders (legacy ai-* classes) ── */
.ai-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.ai-placeholder { text-align: center; padding: 4rem 2rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; }
.ai-placeholder-icon { font-size: 2.5rem; margin-bottom: 12px; color: var(--blue-bright); }
.ai-placeholder-text { max-width: 400px; margin: 0 auto; line-height: 1.6; }
.ai-loading { text-align: center; padding: 4rem 2rem; color: var(--muted2); }
.ai-spinner { width: 32px; height: 32px; border: 3px solid rgba(59,130,246,0.2); border-top-color: var(--blue); border-radius: 50%; margin: 0 auto 16px; animation: spin 0.8s linear infinite; }
.ai-error { padding: 1.5rem; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); border-radius: 8px; color: var(--danger); }
.ai-section { margin-bottom: 2rem; }
.ai-section-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; }
.ai-summary-box { padding: 1.25rem; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); border-radius: 8px; line-height: 1.7; color: var(--muted2); font-size: 14px; }
.ai-builder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.ai-builder-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }
.ai-builder-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.ai-builder-name { font-weight: 600; font-size: 16px; }
.ai-builder-price { font-size: 13px; color: var(--muted2); margin-top: 2px; font-family: var(--font-mono); }
.ai-position-badge { font-size: 11px; padding: 3px 10px; border: 1px solid; border-radius: 20px; font-weight: 500; }
.ai-builder-best { font-size: 13px; color: var(--muted); margin-bottom: 14px; font-style: italic; }
.ai-strengths-weaknesses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai-sw-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.ai-sw-item { font-size: 13px; padding: 4px 0; line-height: 1.4; }
.ai-strength { color: var(--cyan); }
.ai-weakness { color: var(--danger); }
.ai-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ai-selling-point { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 1.15rem; }
.ai-sp-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ai-sp-detail { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.ai-sp-builders { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-sp-tag { font-size: 11px; padding: 2px 8px; background: rgba(59,130,246,0.1); color: var(--blue-bright); border-radius: 20px; }
.ai-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ai-rec-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 1.15rem; }
.ai-rec-profile { font-weight: 600; font-size: 14px; color: var(--warning); margin-bottom: 6px; }
.ai-rec-text { font-size: 13px; color: var(--muted2); line-height: 1.6; margin-bottom: 8px; }
.ai-rec-plans { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

/* ── Extended Census Cards ── */
.ext-census-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; transition: border-color 0.15s; }
.ext-census-card:hover { border-color: var(--border-hover); }
.ext-card-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--white); }
.ext-talking-points { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ext-talking-points summary { font-size: 12px; font-weight: 600; color: var(--blue-bright); cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.ext-talking-points summary::before { content: '\25B6'; font-size: 8px; transition: transform 0.2s; }
.ext-talking-points[open] summary::before { transform: rotate(90deg); }
.ext-talking-points summary::-webkit-details-marker { display: none; }

/* ── Competitive Grid ── */
details > summary .grid-chevron { transition: transform 0.2s; }
details:not([open]) > summary .grid-chevron { transform: rotate(-90deg); }
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }
.grid-cell-input::placeholder { color: var(--muted); }
.grid-cell-input:focus { outline: none; }

/* ── Mobile Top Bar ── */
#mobile-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 48px; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 180; align-items: center; padding: 0 12px; gap: 10px; }
#hamburger-btn { background: none; border: none; color: var(--muted2); font-size: 20px; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
#mobile-titles { flex: 1; overflow: hidden; }
#mobile-community-name { font-size: 13px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mobile-page-title { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 199; }
.sidebar-overlay.visible { display: block; }

/* ── Mobile Bottom Nav ── */
#mobile-bottom-nav { display: none; }
.mob-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; color: var(--muted); font-size: 9px; cursor: pointer; padding: 6px 0; min-height: 44px; font-family: var(--font-mono); }
.mob-nav-btn span { font-size: 16px; }
.mob-nav-btn.active { color: var(--blue-bright); }

/* ── Responsive ── */
@media (max-width: 1024px) { #main-content { padding: 1rem; } .page-header h1 { font-size: 20px; } }
@media (max-width: 768px) {
  #sidebar { position: fixed; left: -230px; top: 0; bottom: 0; transition: left 0.25s ease; z-index: 200; }
  #sidebar.open { left: 0; }
  #mobile-topbar { display: flex; }
  #mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--surface); border-top: 1px solid var(--border); z-index: 150; }
  #community-dashboard { flex-direction: column; }
  #main-content { margin-left: 0 !important; padding: 56px 0.75rem 64px !important; width: 100% !important; }
  .stats-row, .builder-grid, .landing-stats,
  [style*="grid-template-columns: 3fr 2fr"], [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .form-card, .ext-census-card, .stat-card { padding: 0.75rem; }
  .page-header { padding: 0.5rem 0; } .page-header h1 { font-size: 18px; } .page-header p { font-size: 11px; }
  .landing-header { flex-direction: column; gap: 8px; padding: 0.75rem; }
  .landing-grid { grid-template-columns: 1fr !important; }
  .community-card { padding: 0.75rem; }
  .filter-row { flex-wrap: wrap; gap: 6px; }
  #census-map { height: 220px !important; }
  .fp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  svg { max-width: 100%; height: auto; }
  [style*="min-width:52px"] { min-width: 44px !important; }
  .login-card { margin: 0 12px; max-width: 100%; }
}

/* ── Overview (decision-layer) ────────────────────────────────────────────
   Three stacked cards. Status drives hero color, urgency drives action
   color. Uses existing CSS variables only — no hardcoded hex.
   ───────────────────────────────────────────────────────────────────────── */

.ov-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ov-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  padding: 24px 28px;
  position: relative;
}
.ov-hero--losing  { border-left-color: var(--danger);  background: linear-gradient(135deg, rgba(248,113,113,0.06), var(--surface) 60%); }
.ov-hero--neutral { border-left-color: var(--muted2);  background: var(--surface); }
.ov-hero--winning { border-left-color: var(--cyan);    background: linear-gradient(135deg, rgba(34,211,238,0.06),  var(--surface) 60%); }

.ov-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.ov-pill--losing  { background: rgba(248,113,113,0.12); color: var(--danger); border: 1px solid rgba(248,113,113,0.25); }
.ov-pill--neutral { background: rgba(122,144,168,0.12); color: var(--muted2); border: 1px solid rgba(122,144,168,0.25); }
.ov-pill--winning { background: rgba(34,211,238,0.12);  color: var(--cyan);   border: 1px solid rgba(34,211,238,0.25); }

.ov-hero__headline {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--white);
  margin: 0 0 8px 0;
}

.ov-hero__threat {
  font-size: 13px;
  color: var(--blue-bright);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 18px;
}

.ov-hero__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ov-reason {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--white);
}
.ov-reason + .ov-reason { border-top: 1px dashed var(--border); }
.ov-reason__label { flex: 1; }
.ov-reason__metric {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted2);
  white-space: nowrap;
}

/* ── Change Feed ────────────────────────────────────────────────────────── */
.ov-changes {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
}
.ov-changes__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin: 0 0 12px 0;
}
.ov-changes__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-change {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  font-size: 13px;
  color: var(--white);
}
.ov-change + .ov-change { border-top: 1px solid var(--border); }
.ov-change__builder {
  font-weight: 600;
  color: var(--blue-bright);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-change__desc {
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-change__delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--cyan);
  font-weight: 600;
}
.ov-change--rate_drop  .ov-change__delta { color: var(--cyan); }
.ov-change--price_drop .ov-change__delta { color: var(--warning); }
.ov-change--event      .ov-change__delta { color: var(--blue-bright); }
.ov-change__time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.ov-changes--empty .ov-changes__empty-msg {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  padding: 4px 0;
}

/* ── Action Card ────────────────────────────────────────────────────────── */
.ov-action {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  padding: 18px 22px;
}
.ov-action--high { border-left-color: var(--danger);  background: linear-gradient(135deg, rgba(248,113,113,0.06), var(--surface) 60%); }
.ov-action--med  { border-left-color: var(--warning); background: linear-gradient(135deg, rgba(251,191,36,0.05),  var(--surface) 60%); }
.ov-action--low  { border-left-color: var(--cyan);    background: var(--surface); }

.ov-action__tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted2);
  margin-bottom: 6px;
}
.ov-action--high .ov-action__tag { color: var(--danger); }
.ov-action--med  .ov-action__tag { color: var(--warning); }
.ov-action--low  .ov-action__tag { color: var(--cyan); }

.ov-action__label {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.ov-action__rationale {
  font-size: 12px;
  color: var(--muted2);
  margin: 0;
}

@media (max-width: 720px) {
  .ov-stack { gap: 12px; }
  .ov-hero { padding: 18px 20px; }
  .ov-hero__headline { font-size: 22px; }
  .ov-change { grid-template-columns: 1fr auto; row-gap: 2px; }
  .ov-change__builder { grid-column: 1; }
  .ov-change__time { grid-column: 2; text-align: right; }
  .ov-change__desc { grid-column: 1 / -1; font-size: 12px; }
  .ov-change__delta { grid-column: 2; text-align: right; }
}

/* ── Community Analysis Drawer ──────────────────────────────────────────── */
.ca-drawer {
  position: fixed; top: 0; right: -480px; width: 460px; height: 100vh;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 10001; overflow-y: auto; transition: right 0.3s ease;
  box-shadow: -8px 0 30px rgba(0,0,0,0.4);
}
.ca-drawer.open { right: 0; }
.ca-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.45); z-index: 10000; opacity: 0;
  transition: opacity 0.3s ease; pointer-events: none;
}
.ca-backdrop.open { opacity: 1; pointer-events: auto; }

.ca-header {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.ca-header__info { flex: 1; }
.ca-header__builder {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: var(--font-label); font-size: 11px; color: var(--muted2);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ca-header__builder-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ca-header__name {
  font-family: var(--font-heading); font-size: 20px; font-weight: 600;
  color: var(--white); margin-bottom: 4px;
}
.ca-header__location {
  font-size: 12px; color: var(--muted2); margin-bottom: 8px;
}
.ca-header__price {
  font-family: var(--font-data); font-size: 14px; color: var(--blue-bright);
}
.ca-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 20px; padding: 0 0 0 16px; line-height: 1;
}
.ca-close:hover { color: var(--white); }

.ca-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 4px;
}
.ca-badge--full { background: rgba(34,211,238,0.12); color: var(--cyan); }
.ca-badge--partial { background: rgba(251,191,36,0.12); color: var(--warning); }
.ca-badge--none { background: rgba(74,96,128,0.12); color: var(--muted2); }

.ca-section {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.ca-section__title {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted2);
  margin-bottom: 12px;
}

.ca-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ca-metric {
  background: var(--surface2); border-radius: 8px; padding: 12px;
}
.ca-metric__value {
  font-family: var(--font-data); font-size: 18px; font-weight: 600;
  color: var(--white);
}
.ca-metric__label {
  font-family: var(--font-label); font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;
}
.ca-metric__delta {
  font-family: var(--font-data); font-size: 11px; margin-top: 4px;
}
.ca-metric__delta--up { color: var(--danger); }
.ca-metric__delta--down { color: var(--cyan); }
.ca-metric__delta--favorable { color: var(--success); }
.ca-metric__delta--unfavorable { color: var(--danger); }
.ca-metric__delta--neutral { color: var(--muted2); }

.ca-insight {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
}
.ca-insight__icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.ca-insight__icon--pricing { background: rgba(59,130,246,0.15); color: var(--blue-bright); }
.ca-insight__icon--inventory { background: rgba(34,211,238,0.15); color: var(--cyan); }
.ca-insight__icon--incentives { background: rgba(251,191,36,0.15); color: var(--warning); }
.ca-insight__icon--general { background: rgba(74,96,128,0.15); color: var(--muted2); }
.ca-insight__text {
  font-size: 13px; color: var(--white); line-height: 1.4;
}

.ca-nearby-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.ca-nearby-table th {
  text-align: left; font-family: var(--font-label); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.ca-nearby-table td {
  padding: 8px; border-bottom: 1px solid rgba(96,165,250,0.06);
  color: var(--white); vertical-align: middle;
}
.ca-nearby-table td:first-child { font-weight: 500; }
.ca-nearby-table .ca-nearby-builder {
  font-size: 10px; color: var(--muted2); display: block;
}
.ca-nearby-table .ca-nearby-dist {
  font-family: var(--font-data); font-size: 11px; color: var(--muted2);
}

.ca-inv-bars { display: flex; gap: 8px; align-items: flex-end; height: 60px; }
.ca-inv-bar {
  flex: 1; border-radius: 4px 4px 0 0; min-height: 4px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.ca-inv-bar__fill {
  width: 100%; border-radius: 4px 4px 0 0; transition: height 0.3s ease;
}
.ca-inv-bar__label {
  font-family: var(--font-label); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--muted); margin-top: 6px; text-align: center;
}
.ca-inv-bar__count {
  font-family: var(--font-data); font-size: 14px; font-weight: 600;
  color: var(--white); margin-bottom: 4px;
}

.ca-incentive-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--white);
  margin: 0 6px 6px 0;
}

.ca-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px; color: var(--muted2); font-size: 13px;
}

@media (max-width: 768px) {
  .ca-drawer { width: 100%; right: -100%; }
}

/* ── Summary pages (Weekly / Monthly) ─────────────────────────────────── */
.summary-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.summary-tab {
  background: transparent; border: none; color: var(--muted2);
  padding: 6px 14px; font-size: 13px; font-weight: 500; border-radius: 6px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  font-family: var(--font-sans);
}
.summary-tab:hover { color: var(--white); }
.summary-tab.active { background: var(--blue); color: var(--white); }

.summary-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.summary-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px;
}
.summary-kpi-lbl {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
}
.summary-kpi-val {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.summary-kpi-sub {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted2);
  margin-top: 4px;
}

.summary-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.summary-card-title {
  font-size: 13px; font-weight: 600; color: var(--white);
  margin-bottom: 0.85rem; letter-spacing: 0.02em;
}
.summary-grid-2 {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) { .summary-grid-2 { grid-template-columns: 1fr; } }

.summary-position-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}
.summary-stat-lbl {
  font-size: 11px; color: var(--muted); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.summary-stat-val {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600;
  color: var(--white); line-height: 1.1;
}

.summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.summary-table thead th {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 500; padding: 6px 8px;
  border-bottom: 1px solid var(--border); text-align: left;
}
.summary-table tbody td {
  padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--white);
}
.summary-table tbody tr:last-child td { border-bottom: none; }

.summary-signal-list { list-style: none; padding: 0; margin: 0; }
.summary-signal {
  padding: 8px 0; font-size: 13px; color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; gap: 10px; align-items: flex-start;
}
.summary-signal:last-child { border-bottom: none; }
.summary-signal-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue-bright);
  margin-top: 7px; flex-shrink: 0;
}
.summary-empty { color: var(--muted2); font-size: 13px; padding: 8px 0; }

/* Stat-sub footnote (e.g. "per-home price-change rows logged") */
.summary-stat-sub {
  font-size: 11px; color: var(--muted2); margin-top: 4px; line-height: 1.35;
}

/* Leaderboard emphasis */
.summary-card-lb { padding-top: 1.25rem; }
.summary-leaderboard thead th { font-size: 11px; }
.summary-leaderboard .lb-rank {
  text-align: right; padding-right: 12px; color: var(--muted2);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; width: 36px;
}
.summary-leaderboard .lb-sales {
  text-align: right; font-family: var(--font-mono); font-size: 17px;
}
.summary-leaderboard tbody td { padding: 10px 8px; font-size: 14px; }
.summary-leaderboard tr.leaderboard-leader {
  background: linear-gradient(90deg, rgba(251,191,36,0.08), rgba(251,191,36,0));
}
.summary-leaderboard tr.leaderboard-leader .lb-rank-top {
  color: var(--warning); font-weight: 700; font-size: 16px;
}
.summary-leaderboard tr.leaderboard-leader .lb-sales {
  color: var(--warning) !important;
}
.summary-leaderboard tr.leaderboard-you {
  box-shadow: inset 3px 0 0 var(--blue-bright);
}
.summary-leaderboard .lb-you-label {
  color: var(--blue-bright); font-weight: 600;
}

/* Weekly breakdown emphasis */
.wb-table tbody td { padding: 10px 8px; }
.wb-val-head { text-align: right; }
.wb-week { color: var(--muted2); font-size: 12px; }
.wb-peak-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: rgba(96,165,250,0.14); color: var(--blue-bright);
  border-radius: 3px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; vertical-align: middle;
}
.wb-val {
  text-align: right; font-weight: 600; font-size: 15px;
  font-family: var(--font-mono);
}
.wb-val-peak { font-size: 17px; font-weight: 700; }
.wb-track {
  background: var(--surface2); height: 8px; border-radius: 4px;
  overflow: hidden; min-width: 60px;
}
.wb-fill { height: 100%; transition: width 0.3s; opacity: 0.75; }
.wb-fill-peak { opacity: 1; box-shadow: 0 0 8px rgba(96,165,250,0.35); }

/* ── Field Report v2 ───────────────────────────────────────────────────── */
/* Page-scoped content-width override. Only applies while the Field Report
   is the active page (body class toggled in showPage()), so every other
   dashboard page keeps the default 1200px reading width. 1700px here gives
   the 11-column table room to breathe on 1920px+ desktops without forcing
   the table into a scroll container. */
body.field-report-page #main-content { max-width: 1700px; }
.fr-badge {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.fr-badge-draft { color: var(--warning); background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.35); }
.fr-badge-final { color: var(--cyan); background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.35); }

.fr-header { gap: 12px; flex-wrap: wrap; }
.fr-header-controls { display: flex; gap: 8px; align-items: center; }
.fr-month-input {
  background: var(--surface2); border: 1px solid var(--border); color: var(--white);
  padding: 6px 10px; border-radius: 4px; font-family: inherit; font-size: 12px;
  color-scheme: dark;
}

/* Trust strip: prominent "Auto-updated {time}" bar above the table so
   users trust the baseline numbers before adding manual notes. */
.fr-trust-strip {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 14px;
  padding: 10px 14px; background: var(--surface2);
  border: 1px solid var(--border); border-left: 3px solid var(--cyan);
  border-radius: 6px; font-size: 13px;
}
.fr-trust-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 6px rgba(34,211,238,0.5); flex-shrink: 0;
}
.fr-trust-main { color: var(--white); font-weight: 600; }
.fr-trust-sub { color: var(--muted2); font-size: 12px; }
.fr-trust-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fr-finalize { border-color: rgba(34,211,238,0.4); color: var(--cyan); }
.fr-final-note { font-size: 11px; color: var(--cyan); }

/* Table — column minimums sum to ~1280px so the 11-column layout fits
   even a 1440px desktop; on wider viewports (1680+) the Notes column
   absorbs the extra space via flex-style `width: auto` since all other
   columns have fixed widths. overflow-x:auto is a safety net only for
   sub-1400 viewports. */
.fr-table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  overflow-x: auto;
}
.fr-table {
  width: 100%; border-collapse: collapse; table-layout: auto;
  font-size: 13px; color: var(--white);
}
/* Notes column is the only flexible one — every other cell has a
   defined width so extra container width flows into Notes. */
.fr-table thead th:last-child,
.fr-table tbody td:last-child { width: auto; }
.fr-table thead th:not(:last-child) { width: 1%; }
.fr-table thead th {
  text-align: left; padding: 11px 10px; font-size: 11px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); background: var(--surface2);
  white-space: nowrap;
}
.fr-table thead th.fr-n { text-align: right; }
.fr-table thead th.fr-manual { color: var(--blue-bright); }
.fr-table thead th.fr-th-id { min-width: 240px; padding-left: 16px; }
.fr-table thead th.fr-th-inc { min-width: 200px; }

.fr-table tbody td {
  padding: 13px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.fr-table tbody tr.fr-band { background: rgba(96,165,250,0.025); }
.fr-table tbody tr:last-child td { border-bottom: none; }

/* De-emphasize snap columns on zero-activity rows so active competitors
   stand out. Manual cells keep full brightness since users may still
   want to enter field intel against a zero-inventory row. */
.fr-row-quiet .fr-snap,
.fr-row-quiet .fr-id-comm { opacity: 0.55; }
.fr-row-quiet .fr-id-builder { opacity: 0.78; }

/* Merged Builder+Community identity cell. */
.fr-td-id {
  padding-left: 16px !important; min-width: 220px; max-width: 280px;
}
.fr-id-builder {
  font-weight: 600; color: var(--white); font-size: 14px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-id-comm {
  color: var(--muted2); font-size: 12px; line-height: 1.35; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-scope-tag {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; background: rgba(96,165,250,0.14); color: var(--blue-bright);
  border-radius: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: 1px;
}
.fr-table .fr-n {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.fr-td-price, .fr-td-sqft { white-space: nowrap; font-size: 13px; }
.fr-td-price { min-width: 110px; }
.fr-td-sqft { min-width: 130px; }
.fr-td-inc {
  min-width: 200px; max-width: 320px; font-size: 12px; color: var(--muted2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-muted { color: var(--muted); }

/* Manual input cells */
.fr-manual { background: rgba(96,165,250,0.03); }
.fr-table thead th.fr-manual + th.fr-manual,
.fr-table tbody td.fr-manual + td.fr-manual { border-left: 0; }
.fr-input {
  width: 100%; background: transparent; border: 1px solid transparent;
  border-radius: 3px; padding: 5px 7px; color: var(--white);
  font-size: 13px; font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.fr-input:hover { background: rgba(96,165,250,0.05); }
.fr-input:focus {
  outline: none; border-color: var(--blue); background: var(--surface2);
}
.fr-input-n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-width: 44px; max-width: 64px; padding: 5px 6px; font-size: 13px; }
/* Notes input: wide baseline so it's a real entry field, but allowed to
   expand (width: 100% of cell) since the Notes column is the flex slot. */
.fr-input-t { width: 100%; min-width: 180px; padding: 6px 8px; font-size: 13px; }
.fr-input:disabled { color: var(--muted); cursor: default; }

.fr-empty { padding: 40px 20px; text-align: center; color: var(--muted2); font-size: 13px; }

/* ── Demand by Price Band (supporting market context BELOW the map) ───── */
/* Lighter container than the map card so the map stays the hero. The
   takeaway is the entry point — sized larger than rows; the band rows
   are a glanceable scan list, not a spreadsheet. */
.market-velocity-card { flex-shrink: 0; }
.mv-card {
  background: transparent; border: none; border-top: 1px solid var(--border);
  padding: 14px 2px 4px;
}
.mv-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.mv-title {
  font-size: 11px; font-weight: 600; color: var(--muted2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mv-sub {
  font-size: 11px; color: var(--muted); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Takeaway leads — first thing the eye catches. Kept subtle (no box,
   no border) but sized + colored so it reads as a market summary, not
   a footer. */
.mv-lead {
  font-size: 14px; color: var(--white); font-weight: 500;
  line-height: 1.4; margin: 4px 0 12px;
}

/* Scan-feel rows: pill | band label | summary. No grid columns of equal
   weight — the pill is the anchor, the band is the index, the summary is
   muted supporting detail. */
.mv-rows { display: flex; flex-direction: column; gap: 2px; }
.mv-row {
  display: flex; align-items: center; gap: 14px;
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px dotted rgba(255,255,255,0.04);
}
.mv-row:last-child { border-bottom: none; }
.mv-row-no_inventory { opacity: 0.5; }

.mv-band {
  color: var(--white); font-weight: 500; min-width: 110px;
}
.mv-summary {
  color: var(--muted2); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: 12px;
  margin-left: auto;
}

/* Status pills — visible enough to anchor the row, restrained enough
   not to compete with the map. Tighter than the previous version. */
.mv-pill {
  display: inline-block; min-width: 70px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.mv-pill-fast     { color: var(--cyan);    background: rgba(34,211,238,0.10);  border-color: rgba(34,211,238,0.28); }
.mv-pill-balanced { color: var(--warning); background: rgba(251,191,36,0.08);  border-color: rgba(251,191,36,0.26); }
.mv-pill-slow     { color: var(--danger);  background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.26); }
.mv-pill-no_inventory { color: var(--muted); background: var(--surface2); border-color: var(--border); }

.mv-loading, .mv-error { color: var(--muted2); font-size: 11px; padding: 4px 0; }
.mv-error { color: var(--danger); }