/* ── Dashboard overrides ───────────────────────────────────────── */
:root {
  --sidebar-w: 260px;
  --header-h:  48px;
}

/* ── Nav Sections ── */
.nav-section { display: none; }
.nav-section.active { display: block; }

/* ── Discover sub-tabs ── */
.discover-subtabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* ── Filter Chips Bar ── */
.filter-chips-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px 10px;
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: 6px;
  font-size: var(--text-micro);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  min-height: 44px; /* Finding #6: 44px touch target */
}
.filter-chip:hover { border-color: var(--color-primary-700); color: var(--color-primary-700); }
.filter-chip.chip-active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}
.filter-chip.toggle-chip.chip-active {
  background: var(--color-primary-100);
  border-color: var(--color-primary-700);
  color: var(--color-primary-900);
}
.filter-chip.chip-add { border-style: solid; color: var(--color-neutral-500); }
.filter-chip.chip-add:hover { color: var(--color-primary-700); border-color: var(--color-primary-700); }
.filter-chip.chip-reset { border-color: var(--color-neutral-400); color: var(--color-neutral-600); }

/* ── Filter chip dropdowns (created by nav-rail.js) ── */
.chip-dropdown-item {
  min-height: 44px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--text-body-sm);
}
.chip-dropdown-item:hover {
  background: var(--color-neutral-100);
}

/* ── Discover Stat Summary ── */
.discover-stat-summary {
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-3);
  padding: var(--space-1) 0;
  display: block;
}
.discover-stat-summary .stat-num { font-weight: var(--font-bold); color: var(--color-neutral-900); }
.discover-stat-summary .stat-sep { color: var(--color-neutral-400); margin: 0 var(--space-1); }

/* ── Neutral badge (data-collecting indicator) ── */
.badge.badge-neutral {
  display: inline-block;
  font-size: var(--text-micro, 0.65rem);
  font-weight: var(--font-semibold, 600);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── State data coverage note ── */
.state-coverage-note {
  font-size: var(--text-micro, 0.65rem);
  color: var(--color-neutral-500);
  margin-left: var(--space-2);
}
.state-coverage-note::before {
  content: '\00b7';
  margin-right: var(--space-1);
  color: var(--color-neutral-400);
}

/* ── Settings Section ── */
.settings-view { max-width: 600px; }
.settings-view h2 { font-size: 1.2rem; font-weight: var(--font-extrabold); color: var(--color-neutral-900); margin: 0 0 var(--space-4) 0; }
.settings-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.settings-card h3 { font-size: var(--text-body-sm); font-weight: var(--font-bold); color: var(--color-neutral-900); margin: 0 0 var(--space-3) 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-100); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: var(--text-caption); color: var(--color-neutral-700); font-weight: var(--font-medium); }
.settings-value { font-size: var(--text-caption); color: var(--color-neutral-900); font-weight: var(--font-semibold); }
.settings-select { font-size: var(--text-caption); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--color-neutral-800); font-family: var(--font-sans); }
.settings-theme-toggle { display: flex; gap: 2px; background: var(--color-neutral-100); border-radius: var(--radius-sm); padding: 2px; }
.settings-theme-btn { padding: var(--space-1) var(--space-2); border: none; background: none; border-radius: var(--radius-sm); font-size: var(--text-micro); font-weight: var(--font-medium); color: var(--color-neutral-600); cursor: pointer; font-family: var(--font-sans); }
.settings-theme-btn.active { background: var(--surface-card); color: var(--color-neutral-900); box-shadow: var(--shadow-sm); }
.settings-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── Theme toggle ── */
.theme-toggle {
  background: none; border: none; cursor: pointer; padding: var(--space-1);
  color: rgba(255,255,255,0.8); display: flex; align-items: center;
  border-radius: var(--radius-sm); transition: background 0.15s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Icons are toggled via JS; hide both by default to prevent flash */
.theme-icon-sun, .theme-icon-moon { display: none; }

/* ── Dark mode (#14) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces */
    --surface-page: #1a1a2e;
    --surface-card: #242442;
    --surface-sidebar: #1e1e36;

    /* Neutrals */
    --color-neutral-50: #2a2a4a;
    --color-neutral-100: #2e2e4e;
    --color-neutral-200: #363658;
    --color-neutral-300: #454570;
    --color-neutral-400: #5a5a80;
    --color-neutral-500: #7a7aa0;
    --color-neutral-600: #9a9ab8;
    --color-neutral-700: #b8b8d0;
    --color-neutral-800: #d4d4e0;
    --color-neutral-900: #eaeaf0;

    /* Primary: flip 700/800/900 for dark-on-light -> light-on-dark */
    --color-primary-50:  #1a3040;
    --color-primary-100: #1e3646;
    --color-primary-200: #305060;
    --color-primary-700: #3BC9DB;  /* links, interactive (7.5:1 on card) */
    --color-primary-800: #2BB5C7;  /* hover state */
    --color-primary-900: #C5F6FA;  /* badge/pill text on dark teal bg */

    /* Success: light text + dark bg for dark mode */
    --color-success-100: #1a2e24;
    --color-success-600: #48BB78;
    --color-success-700: #68D391;  /* rent-low, badge text (8:1 on card) */

    /* Warning */
    --color-warning-100: #2e2a1a;
    --color-warning-700: #ECC94B;  /* badge text (8.9:1 on warning-100) */

    /* Error */
    --color-error-100: #2e1e1e;
    --color-error-600: #F56565;
    --color-error-700: #FC8181;    /* rent-high, badge text (6.1:1 on card) */

    /* Accent */
    --color-accent-100: #1a2638;
    --color-accent-700: #63B3ED;

    /* Shadows: stronger opacity for dark surfaces */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  }

  /* ── Header: keep original dark teal bg despite primary-900 flip ── */
  :root:not([data-theme="light"]) #header {
    background: #064E5C;
  }
  :root:not([data-theme="light"]) #header .btn-login {
    color: #eaeaf0;
  }
  :root:not([data-theme="light"]) #header .btn-signup {
    background: #C5F6FA;
    color: #064E5C;
  }

  /* ── Buttons using primary bg: dark text on bright teal ── */
  :root:not([data-theme="light"]) .btn-upgrade:hover,
  :root:not([data-theme="light"]) .plan-dropdown-footer .btn-upgrade-sm:hover,
  :root:not([data-theme="light"]) .csv-upsell-popover .btn-upgrade-inline:hover,
  :root:not([data-theme="light"]) .btn-upgrade-views:hover,
  :root:not([data-theme="light"]) .account-links .btn-account-upgrade:hover {
    background: #2BB5C7;
  }

  /* ── Plan badge overrides for non-var colors ── */
  :root:not([data-theme="light"]) .plan-pro {
    background: linear-gradient(135deg, #2e2a1a 0%, #3a3020 100%);
    color: #ECC94B;
  }

  /* ── Skeleton shimmer: subtler on dark bg ── */
  :root:not([data-theme="light"]) .skeleton-block,
  :root:not([data-theme="light"]) .stat-card .value.skeleton-block {
    background: linear-gradient(90deg, #363658 25%, #2e2e4e 50%, #363658 75%);
    background-size: 200% 100%;
  }

  /* ── Dropdown price text: bump from neutral-500 to neutral-600 ── */
  :root:not([data-theme="light"]) .plan-dropdown-item .plan-item-price {
    color: var(--color-neutral-600);
  }

  /* ── Reset button: bump text contrast ── */
  :root:not([data-theme="light"]) #btn-reset {
    color: var(--color-neutral-700);
  }

  /* ── Focus ring: brighter on dark bg ── */
  :root:not([data-theme="light"]) :focus-visible {
    outline-color: #3BC9DB;
  }

  /* ── Filter inputs in dark mode ── */
  :root:not([data-theme="light"]) .filter-group select,
  :root:not([data-theme="light"]) .filter-group input[type="text"],
  :root:not([data-theme="light"]) .filter-group input[type="number"] {
    background: #2a2a4a;
    border-color: #454570;
    color: #d4d4e0;
  }
  :root:not([data-theme="light"]) .filter-group select:focus,
  :root:not([data-theme="light"]) .filter-group input:focus {
    border-color: #3BC9DB;
    box-shadow: 0 0 0 2px rgba(59,201,219,0.2);
  }
  :root:not([data-theme="light"]) .filter-group.filter-active select,
  :root:not([data-theme="light"]) .filter-group.filter-active input[type="text"],
  :root:not([data-theme="light"]) .filter-group.filter-active input[type="number"] {
    background: #1a3040;
    border-color: #3BC9DB;
  }
  :root:not([data-theme="light"]) .combobox-listbox {
    background: #242442;
    border-color: #454570;
  }
  :root:not([data-theme="light"]) .combobox-option:hover,
  :root:not([data-theme="light"]) .combobox-option.highlighted {
    background: #1a3040;
  }
  :root:not([data-theme="light"]) .search-shortcut-hint {
    background: #363658;
    border-color: #454570;
    color: #7a7aa0;
  }
  :root:not([data-theme="light"]) .mobile-filter-backdrop { background: rgba(0,0,0,0.6); }
  :root:not([data-theme="light"]) .filter-section { border-bottom-color: #363658; }
  :root:not([data-theme="light"]) .sidebar-result-count { border-top-color: #363658; }
  :root:not([data-theme="light"]) #sidebar { background: #1e1e36; box-shadow: -4px 0 16px rgba(0,0,0,0.4); }
  :root:not([data-theme="light"]) .sidebar-header { border-bottom-color: #363658; }
  :root:not([data-theme="light"]) .sidebar-footer { border-top-color: #363658; }
  :root:not([data-theme="light"]) .sidebar-close-btn { color: #9a9ab8; }
  :root:not([data-theme="light"]) .sidebar-close-btn:hover { background: #2a2a4a; color: #d4d4e0; }
}

/* Manual dark override */
html[data-theme="dark"] {
  /* Surfaces */
  --surface-page: #1a1a2e;
  --surface-card: #242442;
  --surface-sidebar: #1e1e36;

  /* Neutrals */
  --color-neutral-50: #2a2a4a;
  --color-neutral-100: #2e2e4e;
  --color-neutral-200: #363658;
  --color-neutral-300: #454570;
  --color-neutral-400: #5a5a80;
  --color-neutral-500: #7a7aa0;
  --color-neutral-600: #9a9ab8;
  --color-neutral-700: #b8b8d0;
  --color-neutral-800: #d4d4e0;
  --color-neutral-900: #eaeaf0;

  /* Primary */
  --color-primary-50:  #1a3040;
  --color-primary-100: #1e3646;
  --color-primary-200: #305060;
  --color-primary-700: #3BC9DB;
  --color-primary-800: #2BB5C7;
  --color-primary-900: #C5F6FA;

  /* Success */
  --color-success-100: #1a2e24;
  --color-success-600: #48BB78;
  --color-success-700: #68D391;

  /* Warning */
  --color-warning-100: #2e2a1a;
  --color-warning-700: #ECC94B;

  /* Error */
  --color-error-100: #2e1e1e;
  --color-error-600: #F56565;
  --color-error-700: #FC8181;

  /* Accent */
  --color-accent-100: #1a2638;
  --color-accent-700: #63B3ED;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .freshness-orange { background: #2e241a; color: #ED8936; }
html[data-theme="dark"] #header {
  background: #064E5C;
}
html[data-theme="dark"] #header .btn-login {
  color: #eaeaf0;
}
html[data-theme="dark"] #header .btn-signup {
  background: #C5F6FA;
  color: #064E5C;
}
html[data-theme="dark"] .btn-upgrade:hover,
html[data-theme="dark"] .plan-dropdown-footer .btn-upgrade-sm:hover,
html[data-theme="dark"] .csv-upsell-popover .btn-upgrade-inline:hover,
html[data-theme="dark"] .btn-upgrade-views:hover,
html[data-theme="dark"] .account-links .btn-account-upgrade:hover {
  background: #2BB5C7;
}
html[data-theme="dark"] .plan-pro {
  background: linear-gradient(135deg, #2e2a1a 0%, #3a3020 100%);
  color: #ECC94B;
}
html[data-theme="dark"] .skeleton-block,
html[data-theme="dark"] .stat-card .value.skeleton-block {
  background: linear-gradient(90deg, #363658 25%, #2e2e4e 50%, #363658 75%);
  background-size: 200% 100%;
}
html[data-theme="dark"] .plan-dropdown-item .plan-item-price {
  color: var(--color-neutral-600);
}
html[data-theme="dark"] #btn-reset {
  color: var(--color-neutral-700);
}
html[data-theme="dark"] :focus-visible {
  outline-color: #3BC9DB;
}
html[data-theme="dark"] .filter-group select,
html[data-theme="dark"] .filter-group input[type="text"],
html[data-theme="dark"] .filter-group input[type="number"] {
  background: #2a2a4a;
  border-color: #454570;
  color: #d4d4e0;
}
html[data-theme="dark"] .filter-group select:focus,
html[data-theme="dark"] .filter-group input:focus {
  border-color: #3BC9DB;
  box-shadow: 0 0 0 2px rgba(59,201,219,0.2);
}
html[data-theme="dark"] .filter-group.filter-active select,
html[data-theme="dark"] .filter-group.filter-active input[type="text"],
html[data-theme="dark"] .filter-group.filter-active input[type="number"] {
  background: #1a3040;
  border-color: #3BC9DB;
}
html[data-theme="dark"] .combobox-listbox {
  background: #242442;
  border-color: #454570;
}
html[data-theme="dark"] .combobox-option:hover,
html[data-theme="dark"] .combobox-option.highlighted {
  background: #1a3040;
}
html[data-theme="dark"] .search-shortcut-hint {
  background: #363658;
  border-color: #454570;
  color: #7a7aa0;
}
html[data-theme="dark"] .mobile-filter-backdrop { background: rgba(0,0,0,0.6); }
html[data-theme="dark"] .filter-section { border-bottom-color: #363658; }
html[data-theme="dark"] .sidebar-result-count { border-top-color: #363658; }
html[data-theme="dark"] #sidebar { background: #1e1e36; box-shadow: -4px 0 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .sidebar-header { border-bottom-color: #363658; }
html[data-theme="dark"] .sidebar-footer { border-top-color: #363658; }
html[data-theme="dark"] .sidebar-close-btn { color: #9a9ab8; }
html[data-theme="dark"] .sidebar-close-btn:hover { background: #2a2a4a; color: #d4d4e0; }

/* Dark mode: filter chips, settings */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filter-chip { background: #242442; border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .filter-chip:hover { border-color: #3BC9DB; color: #3BC9DB; }
  :root:not([data-theme="light"]) .filter-chip.chip-active { background: #1a3040; border-color: #3BC9DB; color: #3BC9DB; }
  :root:not([data-theme="light"]) .filter-chip.toggle-chip.chip-active { background: #1e3646; border-color: #3BC9DB; color: #C5F6FA; }
  :root:not([data-theme="light"]) .settings-card { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .settings-card h3 { color: #eaeaf0; }
  :root:not([data-theme="light"]) .settings-row { border-bottom-color: #363658; }
  :root:not([data-theme="light"]) .settings-theme-toggle { background: #2a2a4a; }
  :root:not([data-theme="light"]) .settings-theme-btn.active { background: #363658; color: #eaeaf0; }
}
html[data-theme="dark"] .filter-chip { background: #242442; border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .filter-chip:hover { border-color: #3BC9DB; color: #3BC9DB; }
html[data-theme="dark"] .filter-chip.chip-active { background: #1a3040; border-color: #3BC9DB; color: #3BC9DB; }
html[data-theme="dark"] .filter-chip.toggle-chip.chip-active { background: #1e3646; border-color: #3BC9DB; color: #C5F6FA; }
html[data-theme="dark"] .settings-card { background: #242442; border-color: #454570; }
html[data-theme="dark"] .settings-card h3 { color: #eaeaf0; }
html[data-theme="dark"] .settings-row { border-bottom-color: #363658; }
html[data-theme="dark"] .settings-theme-toggle { background: #2a2a4a; }
html[data-theme="dark"] .settings-theme-btn.active { background: #363658; color: #eaeaf0; }

/* ── Header: logged-in state hides tagline, nav-links, lang-select ── */
#header.logged-in .tagline { display: none; }
#header.logged-in .nav-links-dash { display: none; }
#header.logged-in #lang-select { display: none; }

/* ── Stat summary merged into section header line ── */
.section-header .discover-stat-summary-inline {
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
  font-weight: var(--font-medium);
  margin-left: var(--space-2);
}
.section-header .discover-stat-summary-inline .stat-num {
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}
.section-header .discover-stat-summary-inline .stat-sep {
  color: var(--color-neutral-400);
  margin: 0 var(--space-1);
}

/* ── Pipeline drag hint: show once, then hide ── */
.pipeline-drag-hint.dismissed { display: none; }

/* ── Accessibility: focus-visible (#15) ── */
:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

/* ── Skip to content (#15) ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 999;
  background: var(--color-primary-700);
  color: var(--surface-card);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  text-decoration: none;
}
.skip-to-content:focus {
  top: var(--space-2);
}

/* ── Visually hidden (#15) ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--color-neutral-800);
  min-height: 100vh;
  font-size: 14px;
}

/* ── Header ── */
#header {
  position: sticky;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--color-primary-900);
  color: var(--surface-card);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-2);
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#header .brand-logo { font-size: var(--space-4); }
#header .tagline {
  font-size: var(--text-micro);
  opacity: 0.8;
  border-left: 1px solid rgba(255,255,255,0.3);
  padding-left: var(--space-3);
  white-space: nowrap;
  color: rgba(255,255,255,0.9);
}
#header .spacer { flex: 1; }
#header .nav-links-dash {
  display: flex;
  gap: var(--space-4);
  margin-right: var(--space-4);
}
#header .nav-links-dash a {
  color: rgba(255,255,255,0.9);
  font-size: var(--text-caption);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color 0.15s;
}
#header .nav-links-dash a:hover { color: var(--surface-card); }
#header .auth-buttons { display: flex; gap: var(--space-2); }
#header .auth-buttons button,
#header .auth-buttons a {
  padding: 0.3rem var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
}
#header .btn-login { background: rgba(255,255,255,0.15); color: var(--surface-card); }
#header .btn-signup { background: var(--surface-card); color: var(--color-primary-900); }
#header .auth-buttons button:hover,
#header .auth-buttons a:hover { opacity: 0.85; }

/* ── Layout ── */
#layout {
  display: flex;
  min-height: calc(100vh - var(--header-h));
}
#main { margin-left: 0; }

/* ── Sidebar (hidden on desktop; slide-over filter panel on mobile) ── */
#sidebar {
  display: none;
}
#sidebar h3 {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-3) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Section dividers between filter groups */
.filter-section {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
}
/* Remove bottom border from last filter section (before reset button) */
.filter-section:has(+ #btn-reset) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.filter-section-label {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  margin-bottom: var(--space-2);
}
.filter-group { margin-bottom: var(--space-3); }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label {
  display: block;
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-1);
}
.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="number"] {
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: max(16px, var(--text-caption));
  background: var(--surface-card);
  color: var(--color-neutral-800);
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
}
.filter-group select:focus,
.filter-group input:focus {
  border-color: var(--color-primary-700);
  box-shadow: 0 0 0 2px rgba(11,114,133,0.15);
}
/* Active filter indicator (#7) - use background tint, not border-width (avoids layout shift) */
.filter-group.filter-active select,
.filter-group.filter-active input[type="text"],
.filter-group.filter-active input[type="number"] {
  border-color: var(--color-primary-700);
  background: var(--color-primary-50);
}
.filter-group.filter-active label {
  color: var(--color-primary-700);
}
.lot-range-row { display: flex; gap: var(--space-2); align-items: center; }
.lot-range-row input { flex: 1; min-width: 0; }
.lot-range-row span { font-size: var(--text-micro); color: var(--color-neutral-500); flex-shrink: 0; }

/* ── Dual-handle range slider with histogram ── */
.range-slider-wrap {
  position: relative;
  padding-top: 34px;
}
.range-histogram {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}
.range-histogram .hist-bar {
  flex: 1;
  background: var(--color-primary-200);
  border-radius: 1px 1px 0 0;
  min-width: 0;
  transition: background 0.15s;
}
.range-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-neutral-300);
  border-radius: 3px;
  margin-bottom: 2px;
}
.range-selected {
  position: absolute;
  height: 100%;
  background: var(--color-primary-700);
  border-radius: 3px;
  top: 0;
}
.range-slider-wrap input[type="range"] {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
  outline: none;
}
.range-slider-wrap input[type="range"].range-min { z-index: 3; }
.range-slider-wrap input[type="range"].range-max { z-index: 4; }
/* When min handle is at max position, allow it to be grabbed */
.range-slider-wrap input[type="range"]:active { z-index: 5; }
.range-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: none;
}
.range-slider-wrap input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}
.range-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-700);
  border: 2px solid var(--surface-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -6px;
  position: relative;
  z-index: 4;
}
.range-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-700);
  border: 2px solid var(--surface-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: auto;
}
.range-slider-wrap input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(11,114,133,0.25);
}
.range-slider-wrap input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(11,114,133,0.25);
}
.range-slider-wrap .range-inputs {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}
.range-slider-wrap .range-inputs input[type="number"] {
  flex: 1;
  min-width: 0;
}
.range-slider-wrap .range-inputs span {
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  flex-shrink: 0;
}

/* Dark mode histogram bars */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .range-histogram .hist-bar {
    background: #305060;
  }
}
html[data-theme="dark"] .range-histogram .hist-bar {
  background: #305060;
}
.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  cursor: pointer;
  padding: var(--space-1) 0;
  min-height: 44px;
}
.filter-checkbox-row label {
  display: inline;
  cursor: pointer;
  margin: 0;
  margin-bottom: 0;
  font-weight: var(--font-medium);
}
.filter-checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary-700);
  flex-shrink: 0;
}

/* Search input with icon prefix */
.search-wrap {
  position: relative;
}
.search-wrap .search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7A8D; /* Finding #12: darkened from neutral-500 for 4.5:1 contrast */
  display: flex;
  align-items: center;
  pointer-events: none;
}
.search-wrap input#filter-search {
  padding-left: 2.25rem !important;
  padding-right: 28px;
}

/* Combobox / searchable dropdown */
.combobox-wrap {
  position: relative;
}
.combobox-wrap input[type="text"] {
  cursor: text;
  padding-right: 28px;
}
.combobox-chevron {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-500);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.combobox-listbox {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 120;
  margin-top: -1px;
}
.combobox-listbox.open { display: block; }
.combobox-option {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-neutral-800);
  cursor: pointer;
  transition: background 0.08s;
}
.combobox-option:hover,
.combobox-option.highlighted {
  background: var(--color-primary-50);
  color: var(--color-primary-900);
}
.combobox-option.selected {
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
}
.combobox-no-results {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  font-style: italic;
}

/* ── Multi-select county pills ── */
.county-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-1);
}
.county-pills:empty { display: none; }
.county-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 8px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-full);
  font-size: var(--text-micro);
  color: var(--color-primary-900);
  font-weight: var(--font-medium);
  line-height: 1.3;
}
.county-pill .county-pill-dismiss {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary-700);
  font-size: 12px;
  line-height: 1;
}
.county-pill .county-pill-dismiss:hover { color: var(--color-error-600); }

/* ── PA link in expanded detail ── */
.pa-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-micro);
  color: var(--color-primary-700);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color 0.15s;
  margin-left: var(--space-2);
}
.pa-link:hover { color: var(--color-primary-900); text-decoration: underline; }
.pa-link svg { width: 12px; height: 12px; }

/* ── Valuation calculator card ── */
.valuation-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.valuation-card h5 {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-2) 0;
}
.valuation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: var(--text-micro);
  color: var(--color-neutral-800);
}
.valuation-row .val-label { font-weight: var(--font-medium); color: var(--color-neutral-600); }
.valuation-row .val-amount { font-family: var(--font-mono); font-weight: var(--font-bold); }
.valuation-estimate {
  font-size: var(--text-body-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-extrabold);
  color: var(--color-primary-700);
}
.valuation-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.valuation-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--color-primary-700);
  cursor: pointer;
}
.valuation-slider-row .cap-rate-label,
.valuation-slider-row .vacancy-rate-label,
.valuation-slider-row .expense-ratio-label {
  font-size: var(--text-micro);
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--color-neutral-800);
  min-width: 3.5em;
  text-align: right;
}
.valuation-slider-row .val-label {
  font-size: var(--text-micro);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.valuation-row.valuation-deduct .val-amount {
  color: var(--color-error-600);
  font-weight: var(--font-medium);
}
.valuation-row.valuation-noi {
  border-top: 1px solid var(--color-neutral-300);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
}
.valuation-row.valuation-noi .val-label {
  font-weight: var(--font-bold);
  color: var(--color-neutral-800);
}
.valuation-row.valuation-noi .val-amount {
  font-weight: var(--font-extrabold);
  color: var(--color-success-700);
}
.valuation-formula {
  font-size: 0.65rem;
  color: var(--color-neutral-500);
  font-family: var(--font-mono);
  margin-top: var(--space-1);
  word-break: break-all;
}

#btn-reset {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background 0.15s, border-color 0.15s;
  min-height: 44px;
}
#btn-reset:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
}

/* Active filter count badge on reset button */
.reset-filter-count {
  background: var(--color-primary-700);
  color: #fff;
  font-size: 0.65rem;
  font-weight: var(--font-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Sidebar footer with filter result count */
.sidebar-result-count {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-200);
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  text-align: center;
}
.sidebar-result-count strong {
  color: var(--color-neutral-900);
}

/* Keyboard shortcut hint */
.search-shortcut-hint {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--color-neutral-400);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: 3px;
  padding: 1px 5px;
  pointer-events: none;
  line-height: 1.4;
}
.search-wrap input:focus ~ .search-shortcut-hint,
.search-wrap input:not(:placeholder-shown) ~ .search-shortcut-hint { display: none; }

/* Hide sidebar close button on desktop */
.sidebar-close-btn { display: none; }

/* Screen reader only: filter results live region */
#filter-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Views indicator in sidebar (#8) ── */
.views-indicator-sidebar {
  display: none;
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  margin-top: var(--space-3);
}
.views-indicator-sidebar.active { display: block; }
.views-indicator-sidebar.warn {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
  border: 1px solid var(--color-warning-600);
}
.views-indicator-sidebar.limit-reached {
  background: var(--color-error-100);
  color: var(--color-error-700);
  border: 1px solid var(--color-error-600);
}
.views-indicator-sidebar .views-bar {
  width: 100%; height: 4px;
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}
.views-indicator-sidebar .views-bar-fill {
  height: 100%;
  background: var(--color-primary-700);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.views-indicator-sidebar.warn .views-bar-fill { background: var(--color-warning-600); }
.views-indicator-sidebar.limit-reached .views-bar-fill { background: var(--color-error-600); }
.views-upgrade-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--color-primary-700);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-decoration: underline;
}
.views-upgrade-section { margin-top: var(--space-3); }
.views-upgrade-pros { margin-bottom: var(--space-2); }
.upgrade-pro-item {
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  padding: 2px 0;
}
.upgrade-pro-item::before {
  content: '\2713 ';
  color: var(--color-success-600);
  font-weight: bold;
}
.btn-upgrade-views {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-700);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.btn-upgrade-views:hover { background: var(--color-primary-800); }

/* ── Daily views counter (stat bar) ── */
.daily-views-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
  line-height: 1;
}
.daily-views-counter.active {
  display: inline-flex;
}
.daily-views-counter.warning {
  color: var(--color-warning-700);
  background: var(--color-warning-100);
  border-color: var(--color-warning-300);
}
.daily-views-counter.limit-reached {
  color: var(--color-error-700);
  background: var(--color-error-100);
  border-color: var(--color-error-400);
  font-weight: var(--font-semibold);
}
.daily-views-text {
  line-height: 1.2;
}
.daily-views-bar {
  width: 48px;
  height: 4px;
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.daily-views-bar-fill {
  height: 100%;
  background: var(--color-primary-600);
  border-radius: var(--radius-full);
  transition: width 0.3s ease, background 0.2s;
  width: 0%;
}
.daily-views-counter.warning .daily-views-bar-fill {
  background: var(--color-warning-600);
}
.daily-views-counter.limit-reached .daily-views-bar-fill {
  background: var(--color-error-600);
}
@media (max-width: 700px) {
  .daily-views-counter {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    font-size: var(--text-micro);
  }
}

/* ── Main ── */
#main { flex: 1; padding: var(--space-5) var(--space-6) var(--space-8); min-width: 0; }

/* ── Stat cards ── */
#stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-top: 3px solid var(--color-primary-700);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.stat-card .label {
  font-size: var(--text-micro); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-neutral-600); margin-bottom: 0.25rem;
  display: flex; align-items: center; gap: var(--space-2);
}
.stat-card .value { font-size: 1.6rem; font-weight: var(--font-extrabold); color: var(--color-neutral-900); line-height: 1; }
.stat-card .sub { font-size: var(--text-micro); color: var(--color-neutral-600); margin-top: 0.2rem; }

/* Skeleton shimmer for stat cards (#6) */
.stat-card .value.skeleton-block {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 1.6rem;
  width: 80px;
  color: transparent;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Section header (#13) ── */
.section-header { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-3) 0; flex-wrap: wrap; }
.section-header h2 { font-size: 1rem; font-weight: var(--font-bold); margin: 0; color: var(--color-neutral-900); }
.section-header .count-badge {
  font-size: var(--text-micro); background: var(--color-primary-100);
  color: var(--color-primary-900); padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full); font-weight: var(--font-semibold);
}

/* ── Filter pills above table (#7) ── */
.active-filters-bar {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  align-items: center;
}
.active-filters-bar.active { display: flex; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-full);
  font-size: var(--text-micro);
  color: var(--color-primary-900);
  font-weight: var(--font-medium);
}
.filter-pill .pill-dismiss {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary-700);
  font-size: 14px;
}
.filter-pill .pill-dismiss:hover { color: var(--color-error-600); }

/* ── Notice banner ── */
#no-rent-notice {
  display: none;
  background: var(--color-warning-100); border: 1px solid var(--color-warning-600);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption); color: var(--color-warning-700);
  margin-bottom: var(--space-3);
}

/* ── Table wrapper (#16) ── */
.table-wrap {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ── Parks table ── */
#parks-table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
#parks-table thead tr { background: var(--color-neutral-100); border-bottom: 1px solid var(--color-neutral-300); }
#parks-table th {
  padding: 0.55rem var(--space-3); text-align: left;
  font-size: var(--text-micro); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-neutral-600); white-space: nowrap;
  cursor: pointer; position: relative;
  /* Finding #18: removed user-select: none so investors can copy-paste */
}
#parks-table th:hover { color: var(--color-primary-700); }
#parks-table th .sort-icon { margin-left: 3px; opacity: 0.4; display: inline-flex; vertical-align: middle; }
#parks-table th .sort-icon svg { width: 14px; height: 14px; }
#parks-table th.sort-asc .sort-icon,
#parks-table th.sort-desc .sort-icon { opacity: 1; color: var(--color-primary-700); }
/* Sortable header pointer + hover for any table with data-col / data-county-col */
th[data-col], th[data-county-col] {
  cursor: pointer;
}
th[data-col]:hover, th[data-county-col]:hover {
  background: var(--color-neutral-100);
}
html[data-theme="dark"] th[data-col]:hover,
html[data-theme="dark"] th[data-county-col]:hover {
  background: var(--color-neutral-800);
}
.col-help-btn { background:none; border:none; padding:2px; cursor:pointer; color:var(--color-neutral-500); vertical-align:middle; position:relative; }
.col-help-btn:hover { color:var(--color-primary-700); }
.col-help-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--color-neutral-200); color:var(--color-neutral-700); font-size:12px; font-weight:var(--font-bold); line-height:1; }
.col-help-badge:hover { background:var(--color-primary-100); color:var(--color-primary-700); }
.column-hint { display:block; font-size:9px; font-weight:normal; color:var(--color-neutral-500); line-height:1.2; margin-top:1px; white-space:nowrap; }
.col-help-popover { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); background:var(--surface-card); border:1px solid var(--color-neutral-300); border-radius:var(--radius); padding:var(--space-3) var(--space-4); font-size:var(--text-caption); font-weight:normal; color:var(--color-neutral-700); white-space:normal; width:220px; box-shadow:var(--shadow-md); z-index:100; text-align:left; line-height:1.5; }
#parks-table tbody tr {
  border-bottom: 1px solid var(--color-neutral-100);
  cursor: pointer; transition: background 0.08s;
}
#parks-table tbody tr:last-child { border-bottom: none; }
#parks-table tbody tr:hover { background: var(--color-neutral-100); }
/* Zebra striping (#16) */
#parks-table tbody tr:nth-child(even) { background: var(--color-neutral-50); }
#parks-table tbody tr:nth-child(even):hover { background: var(--color-neutral-100); }
#parks-table td { padding: 0.5rem var(--space-3); vertical-align: middle; }

.park-name-cell { font-weight: var(--font-semibold); color: var(--color-neutral-900); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rent cell: visually dominant (#2) */
.rent-cell {
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
  color: var(--color-neutral-900);
}
.rent-cell .rent-suffix {
  font-size: var(--text-micro);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
}
.rent-low  { color: var(--color-success-700); }
.rent-high { color: var(--color-error-700); }
.rent-none { color: var(--color-neutral-700); }

/* ── Park row selected highlight ── */
tr.park-row-expanded {
  border-left: 3px solid var(--color-primary-700);
  background: var(--color-primary-50) !important;
}

/* Copy button (#10) */
.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px 4px;
  color: var(--color-neutral-500);
  font-size: 12px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.btn-copy:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}
.copy-tooltip {
  position: absolute;
  background: var(--color-neutral-900);
  color: var(--surface-card);
  font-size: var(--text-micro);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  pointer-events: none;
  animation: fadeInOut 1.2s ease forwards;
  z-index: 200;
}
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(4px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.rent-history-table { width: 100%; font-size: var(--text-micro); border-collapse: collapse; }
.rent-history-table th, .rent-history-table td { padding: 0.25rem var(--space-1); text-align: left; }
.rent-history-table thead tr { border-bottom: 1px solid var(--color-neutral-300); }
.rent-history-table tbody tr:hover { background: var(--color-primary-50); }
.rent-history-table .amount { font-family: var(--font-mono); font-weight: var(--font-bold); color: var(--color-success-700); }
.no-rent-msg { font-size: var(--text-micro); color: var(--color-neutral-600); font-style: italic; }

/* ── Skeleton rows (#6) ── */
.skeleton-row td {
  padding: 0.6rem var(--space-3);
}
.skeleton-block {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 16px;
  display: inline-block;
}
.skeleton-row { pointer-events: none; }

/* ── Detail panel loading skeleton ── */
.detail-skeleton {
  padding: var(--space-4);
}
.detail-skeleton-section {
  margin-bottom: var(--space-5);
}
.detail-skeleton-section-title {
  height: 14px;
  width: 120px;
  margin-bottom: var(--space-3);
}
.detail-skeleton-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.detail-skeleton-label {
  height: 14px;
  width: 100px;
  flex-shrink: 0;
}
.detail-skeleton-value {
  height: 14px;
  flex: 1;
  max-width: 200px;
}
.detail-skeleton-bar-wide {
  height: 14px;
  width: 80%;
  margin-bottom: var(--space-2);
}
.detail-skeleton-bar-medium {
  height: 14px;
  width: 55%;
  margin-bottom: var(--space-2);
}
.detail-skeleton-bar-narrow {
  height: 14px;
  width: 35%;
  margin-bottom: var(--space-2);
}
.detail-skeleton-map-placeholder {
  height: 180px;
  border-radius: var(--radius-md, var(--radius));
  margin-bottom: var(--space-4);
}
.detail-load-error {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-error-700);
}
.detail-load-error svg {
  display: block;
  margin: 0 auto var(--space-2);
}
.detail-load-error p {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-small);
}
.detail-load-error button {
  background: var(--color-primary-700);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
}
.detail-load-error button:hover {
  background: var(--color-primary-800);
}

/* ── Spinner ── */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--color-neutral-300);
  border-top-color: var(--color-primary-700);
  border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

#table-loading { display: none; text-align: center; padding: var(--space-8); color: var(--color-neutral-600); font-size: var(--text-small); }
#table-empty { display: none; text-align: center; padding: var(--space-8); color: var(--color-neutral-600); font-size: var(--text-small); }
#table-empty[role="status"] { }

/* ── Pagination (#9) ── */
.pagination-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-neutral-300);
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
}
.pagination-bar.active { display: flex; }
.pagination-bar .page-info { font-weight: var(--font-medium); }
.pagination-buttons {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.pagination-buttons button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.pagination-buttons button:hover:not(:disabled) { background: var(--color-primary-50); }
.pagination-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-buttons .page-indicator {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  padding: 0 var(--space-2);
}


/* ── County comparison (#5) ── */
/* County comparison table styles (now in Counties view tab) */
.county-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#county-compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); min-width: 700px; }
#county-compare-table thead tr { background: var(--color-neutral-100); border-bottom: 1px solid var(--color-neutral-300); }
#county-compare-table th {
  padding: var(--space-2) var(--space-3); text-align: left;
  font-size: var(--text-micro); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-neutral-600);
  cursor: pointer;
  /* Finding #18: removed user-select: none */
  white-space: nowrap;
}
#county-compare-table th:hover { color: var(--color-primary-700); }
#county-compare-table th .sort-icon { margin-left: 3px; opacity: 0.4; display: inline-flex; vertical-align: middle; }
#county-compare-table th .sort-icon svg { width: 14px; height: 14px; }
#county-compare-table th.sort-asc .sort-icon,
#county-compare-table th.sort-desc .sort-icon { opacity: 1; color: var(--color-primary-700); }
#county-compare-table tbody tr { border-bottom: 1px solid var(--color-neutral-100); cursor: pointer; transition: background 0.08s; }
#county-compare-table tbody tr:last-child { border-bottom: none; }
#county-compare-table tbody tr:hover { background: var(--color-neutral-100); }
#county-compare-table td { padding: 0.45rem var(--space-3); vertical-align: middle; }

/* ── Demographic columns ── */
.demo-growth-positive { color: var(--color-success-700); }
.demo-growth-negative { color: var(--color-error-700); }
.demo-col { white-space: nowrap; }

/* Hide demographic columns on narrow screens (Finding #3: lowered from 900px) */
@media (max-width: 700px) {
  .demo-col { display: none; }
}

/* ── County demographics in expanded park detail ── */
.county-demo-card {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
}
.county-demo-card .demo-title {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
  margin-bottom: var(--space-1);
  font-size: var(--text-micro);
}
.county-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--space-4);
}
.county-demo-item {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.county-demo-item .demo-label {
  color: var(--color-neutral-600);
  font-weight: var(--font-medium);
}
.county-demo-item .demo-value {
  font-weight: var(--font-bold);
  color: var(--color-neutral-800);
  font-family: var(--font-mono);
}

/* Dark mode: demographics */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-growth-positive { color: #68D391; }
  :root:not([data-theme="light"]) .demo-growth-negative { color: #FC8181; }
  :root:not([data-theme="light"]) .county-demo-card { background: #2a2a4a; border-color: #454570; }
  :root:not([data-theme="light"]) .county-demo-card .demo-title { color: #9a9ab8; }
  :root:not([data-theme="light"]) .county-demo-item .demo-label { color: #9a9ab8; }
  :root:not([data-theme="light"]) .county-demo-item .demo-value { color: #d4d4e0; }
}
html[data-theme="dark"] .demo-growth-positive { color: #68D391; }
html[data-theme="dark"] .demo-growth-negative { color: #FC8181; }
html[data-theme="dark"] .county-demo-card { background: #2a2a4a; border-color: #454570; }
html[data-theme="dark"] .county-demo-card .demo-title { color: #9a9ab8; }
html[data-theme="dark"] .county-demo-item .demo-label { color: #9a9ab8; }
html[data-theme="dark"] .county-demo-item .demo-value { color: #d4d4e0; }

/* ── Footer ── */
#footer {
  background: var(--color-neutral-100);
  border-top: 1px solid var(--color-neutral-300);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
}
#footer .footer-links { display: flex; gap: var(--space-4); margin-left: auto; }
#footer a { color: var(--color-primary-700); text-decoration: none; }
#footer a:hover { text-decoration: underline; }

/* ── Mobile filter panel (replaces sidebar on mobile) ── */
#mobile-filter-toggle {
  display: none;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  cursor: pointer;
  font-family: var(--font-sans);
  margin-bottom: var(--space-3);
  min-height: 48px;
  text-align: left;
  align-items: center;
  gap: var(--space-2);
  transition: background 0.15s, border-color 0.15s;
}
#mobile-filter-toggle:hover { background: var(--color-primary-50); border-color: var(--color-primary-700); }

/* ── Dashboard mobile hamburger menu ── */
.dash-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.dash-hamburger:hover { background: rgba(255,255,255,0.1); }

.dash-mobile-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dash-mobile-backdrop.active { display: block; }

.dash-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 85vw);
  background: var(--surface-card, #fff);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0,0,0,0.15);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dash-mobile-menu.open {
  transform: translateX(0);
}

.dash-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}
.dash-mobile-menu-title {
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}
.dash-mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-neutral-600);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.dash-mobile-menu-close:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
}

.dash-mobile-menu-links {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}
.dash-mobile-menu-links li { margin: 0; }
.dash-mobile-menu-links a,
.dash-mobile-menu-links button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-800);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.1s;
  box-sizing: border-box;
  text-align: left;
}
.dash-mobile-menu-links a:hover,
.dash-mobile-menu-links button:hover {
  background: var(--color-neutral-100);
  color: var(--color-primary-700);
}

.dash-mobile-menu-settings {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
  margin-top: auto;
}
.dash-mobile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: var(--space-1) 0;
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  font-weight: var(--font-medium);
}
.dash-mobile-select {
  font-size: var(--text-caption);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-family: var(--font-sans);
  min-height: 36px;
}
.dash-mobile-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-neutral-600);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.dash-mobile-theme-btn:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
}
/* Theme icon visibility in mobile menu matches main theme toggle logic */
.dash-mobile-theme-btn .theme-icon-sun,
.dash-mobile-theme-btn .theme-icon-moon { display: none; }

/* ── Dark mode: mobile nav menu ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dash-mobile-menu { background: #1e1e36; box-shadow: -4px 0 16px rgba(0,0,0,0.4); }
  :root:not([data-theme="light"]) .dash-mobile-menu-header { border-bottom-color: #363658; }
  :root:not([data-theme="light"]) .dash-mobile-menu-title { color: #eaeaf0; }
  :root:not([data-theme="light"]) .dash-mobile-menu-close { color: #9a9ab8; }
  :root:not([data-theme="light"]) .dash-mobile-menu-close:hover { background: #2a2a4a; color: #d4d4e0; }
  :root:not([data-theme="light"]) .dash-mobile-menu-links a,
  :root:not([data-theme="light"]) .dash-mobile-menu-links button { color: #d4d4e0; }
  :root:not([data-theme="light"]) .dash-mobile-menu-links a:hover,
  :root:not([data-theme="light"]) .dash-mobile-menu-links button:hover { background: #2a2a4a; color: #3BC9DB; }
  :root:not([data-theme="light"]) .dash-mobile-menu-settings { border-top-color: #363658; }
  :root:not([data-theme="light"]) .dash-mobile-menu-row { color: #b8b8d0; }
  :root:not([data-theme="light"]) .dash-mobile-select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .dash-mobile-theme-btn { border-color: #454570; color: #9a9ab8; }
  :root:not([data-theme="light"]) .dash-mobile-theme-btn:hover { background: #2a2a4a; color: #d4d4e0; }
  :root:not([data-theme="light"]) .dash-mobile-backdrop { background: rgba(0,0,0,0.6); }
}
html[data-theme="dark"] .dash-mobile-menu { background: #1e1e36; box-shadow: -4px 0 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .dash-mobile-menu-header { border-bottom-color: #363658; }
html[data-theme="dark"] .dash-mobile-menu-title { color: #eaeaf0; }
html[data-theme="dark"] .dash-mobile-menu-close { color: #9a9ab8; }
html[data-theme="dark"] .dash-mobile-menu-close:hover { background: #2a2a4a; color: #d4d4e0; }
html[data-theme="dark"] .dash-mobile-menu-links a,
html[data-theme="dark"] .dash-mobile-menu-links button { color: #d4d4e0; }
html[data-theme="dark"] .dash-mobile-menu-links a:hover,
html[data-theme="dark"] .dash-mobile-menu-links button:hover { background: #2a2a4a; color: #3BC9DB; }
html[data-theme="dark"] .dash-mobile-menu-settings { border-top-color: #363658; }
html[data-theme="dark"] .dash-mobile-menu-row { color: #b8b8d0; }
html[data-theme="dark"] .dash-mobile-select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .dash-mobile-theme-btn { border-color: #454570; color: #9a9ab8; }
html[data-theme="dark"] .dash-mobile-theme-btn:hover { background: #2a2a4a; color: #d4d4e0; }
html[data-theme="dark"] .dash-mobile-backdrop { background: rgba(0,0,0,0.6); }

/* ── Responsive ── */
@media (max-width: 960px) {
  #stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile filter backdrop */
.mobile-filter-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 899;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-filter-backdrop.active { display: block; }

@media (max-width: 700px) {
  #main { margin-left: 0; }
  #layout { flex-direction: column; }
  #header .tagline { display: none; }
  #header .nav-links-dash { display: none; }
  /* Also hide standalone lang-select and theme-toggle on mobile (available in hamburger menu) */
  #header #lang-select { display: none; }
  #header .theme-toggle { display: none; }
  .plan-dropdown { width: 250px; right: -40px; }
  .upsell-toast { left: var(--space-4); right: var(--space-4); max-width: none; bottom: var(--space-4); }

  /* ── Mobile hamburger menu ── */
  .dash-hamburger { display: flex; }
  .dash-mobile-menu { display: flex; }

  /* ── Mobile filter toggle button ── */
  #mobile-filter-toggle {
    display: flex;
  }

  /* ── Mobile sidebar slide-over panel ── */
  #sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--surface-card, #fff);
    z-index: 900;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 16px rgba(0,0,0,0.1);
  }
  #sidebar.sidebar-open {
    transform: translateX(0);
  }
  #sidebar h3 {
    font-size: var(--text-body-sm);
    font-weight: var(--font-bold);
    color: var(--color-neutral-800);
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
  }

  /* Sidebar header with close button */
  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-200);
    flex-shrink: 0;
  }
  .sidebar-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-neutral-600);
    transition: background 0.15s, color 0.15s;
  }
  .sidebar-close-btn:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
  }

  /* Sidebar scrollable body */
  .sidebar-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-3) var(--space-4);
  }

  /* Sidebar footer */
  .sidebar-footer {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-neutral-200);
  }

  /* Filter sections inside sidebar */
  #sidebar .filter-section {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-neutral-200);
  }
  #sidebar .filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  #sidebar .filter-section-label {
    display: block;
    font-size: var(--text-micro);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-2);
  }
  #sidebar .filter-section select,
  #sidebar .filter-section input[type="text"],
  #sidebar .filter-section input[type="number"] {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    font-size: max(16px, var(--text-caption));
    background: var(--surface-card);
    color: var(--color-neutral-800);
    font-family: var(--font-sans);
    min-height: 44px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
  }
  #sidebar .filter-section select:focus,
  #sidebar .filter-section input[type="text"]:focus,
  #sidebar .filter-section input[type="number"]:focus {
    border-color: var(--color-primary-700);
    box-shadow: 0 0 0 2px rgba(11,114,133,0.15);
  }

  /* Search wrap inside sidebar */
  #sidebar .search-wrap {
    position: relative;
  }
  #sidebar .search-wrap input[type="text"] {
    padding-right: 40px;
  }
  #sidebar .search-clear-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-500);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
  #sidebar .search-clear-btn:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
  }

  /* Lot range row */
  .lot-range-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .lot-range-row input[type="number"] {
    flex: 1;
  }
  .lot-range-sep {
    font-size: var(--text-caption);
    color: var(--color-neutral-500);
    flex-shrink: 0;
  }
  .lot-slider-wrap {
    position: relative;
    margin-top: var(--space-2);
    height: 24px;
  }
  .lot-slider-wrap input[type="range"] {
    position: absolute;
    width: 100%;
    top: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 24px;
  }
  .lot-slider-wrap input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary-700);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
  }

  /* Toggle rows for checkboxes */
  .filter-toggle-row {
    margin-bottom: var(--space-2);
  }
  .filter-toggle-row:last-child {
    margin-bottom: 0;
  }
  .filter-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-caption);
    color: var(--color-neutral-800);
    min-height: 44px;
    padding: 0 var(--space-1);
  }
  .filter-toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-primary-700);
  }

  /* Combobox inside sidebar */
  #sidebar .combobox-wrap {
    position: relative;
  }
  #sidebar .combobox-listbox {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 910;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: none;
  }
  #sidebar .combobox-listbox.open {
    display: block;
  }

  /* County pills inside sidebar */
  #sidebar #county-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
  }

  .table-wrap { overflow: visible; border: none; background: none; }
  /* Parks table: card layout on mobile */
  #parks-table { min-width: auto; }
  #parks-table thead { display: none; }
  #parks-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius);
    background: var(--color-surface);
  }
  #parks-table tbody tr td {
    border: none;
    padding: 2px 0;
    font-size: var(--text-small);
  }
  #parks-table tbody tr td:first-child {
    grid-column: 1 / -1;
    font-weight: var(--font-semibold);
    font-size: var(--text-body);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 4px;
  }
  #parks-table tbody tr td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-micro);
    color: var(--color-neutral-500);
    font-weight: var(--font-medium);
  }
  #parks-table tbody tr td:first-child::before { display: none; }
  #parks-table tbody tr td.col-hide-mobile { display: none; }

  /* ── County comparison: mobile card layout ── */
  .county-compare-wrap { overflow-x: hidden; }
  #county-compare-table { min-width: auto; display: block; }
  #county-compare-table thead { display: none; }
  #county-compare-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
  }
  #county-compare-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }
  #county-compare-table tbody tr:hover {
    border-color: var(--color-primary-200);
    background: var(--color-neutral-50);
  }
  /* County name: full width header */
  #county-compare-table tbody tr td.county-cell-name {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0 0 var(--space-2) 0;
    font-size: var(--text-body-sm);
    border-bottom: 1px solid var(--color-neutral-100);
    margin-bottom: var(--space-2);
  }
  /* Key stats: 2-column grid */
  #county-compare-table tbody tr td.county-cell-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: var(--text-caption);
    background: none !important;
  }
  #county-compare-table tbody tr td.county-cell-stat::before {
    content: attr(data-label);
    font-size: var(--text-micro);
    font-weight: var(--font-medium);
    color: var(--color-neutral-600);
    margin-right: var(--space-2);
  }
  /* Demo stats: show on mobile cards (override the demo-col hide) */
  #county-compare-table tbody tr td.county-cell-demo {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: var(--text-caption);
    background: none !important;
  }
  #county-compare-table tbody tr td.county-cell-demo::before {
    content: attr(data-label);
    font-size: var(--text-micro);
    font-weight: var(--font-medium);
    color: var(--color-neutral-500);
    margin-right: var(--space-2);
  }
  /* Separator between primary stats and demo stats (7th td = first demo cell) */
  #county-compare-table tbody tr td:nth-child(7) {
    border-top: 1px solid var(--color-neutral-100);
    margin-top: var(--space-1);
    padding-top: var(--space-2);
  }
  #main { padding: var(--space-3) var(--space-4) var(--space-8); }
  #header .auth-buttons button,
  #header .auth-buttons a {
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-caption);
  }
  .filter-chips-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); position: relative; }
  .filter-chips-bar::after {
    content: '';
    position: sticky;
    right: 0;
    flex-shrink: 0;
    min-width: 32px;
    align-self: stretch;
    background: linear-gradient(to right, transparent, var(--surface-page));
    pointer-events: none;
  }
  .rent-history-table { min-width: 400px; }
  .pagination-bar { flex-direction: column; gap: var(--space-2); text-align: center; }
  .discover-subtabs { position: sticky; top: var(--header-h); z-index: 50; background: var(--surface-page); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-200); }
}

@media (max-width: 480px) {
  #stat-cards { gap: var(--space-2); }
  .stat-card { padding: var(--space-2) var(--space-3); }
  .stat-card .value { font-size: 1.3rem; }
  .stat-card .label { font-size: 0.65rem; }
  #header { gap: var(--space-2); padding: 0 var(--space-3); }
  #footer {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-3);
  }
  #footer .footer-links {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  #footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 2.8;
  }
}

@media (max-width: 375px) {
  .stat-card .value { font-size: 1.1rem; }
  #header .auth-buttons button,
  #header .auth-buttons a {
    font-size: 0.7rem;
    padding: 0.3rem var(--space-2);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.mono { font-family: var(--font-mono); }
.muted { color: var(--color-neutral-600); }
#county-loading { text-align: center; padding: var(--space-6); color: var(--color-neutral-600); font-size: var(--text-caption); }

/* ── Auth overlay (#15) ── */
#auth-gate {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface-page);
  z-index: 200;
  justify-content: center;
  align-items: center;
}
#auth-gate.active { display: flex; }
.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.auth-card h2 {
  font-size: var(--space-6);
  margin: 0 0 var(--space-2);
  color: var(--color-neutral-900);
}
.auth-card .subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
}
.btn-google:hover { border-color: var(--color-primary-700); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.btn-google svg { width: 20px; height: 20px; }
.auth-card .value-props {
  margin-top: var(--space-6);
  text-align: left;
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
  line-height: 1.7;
}
.auth-card .value-props li {
  margin-bottom: 0.3rem;
  list-style: none;
  padding-left: 1.2rem;
  position: relative;
}
.auth-card .value-props li .li-check {
  position: absolute;
  left: 0;
  color: var(--color-success-600);
}
.btn-preview-anonymous {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-700);
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.btn-preview-anonymous:hover {
  border-color: var(--color-primary-700);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  color: var(--color-neutral-900);
}

/* ── Sign-in banner (non-blocking, dismissable) ── */
.signin-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-primary-200);
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  position: relative;
  z-index: 50;
}
.signin-banner .btn {
  white-space: nowrap;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  background: var(--color-primary-700);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
}
.signin-banner .btn:hover {
  background: var(--color-primary-800);
}
.signin-banner .btn-dismiss {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-neutral-500);
  padding: var(--space-1);
  line-height: 1;
  margin-left: auto;
}
.signin-banner .btn-dismiss:hover {
  color: var(--color-neutral-800);
}
@media (max-width: 600px) {
  .signin-banner {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}
:root:not([data-theme="light"]) .signin-banner { background: #1a1a3a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .signin-banner { background: #1a1a3a; border-color: #454570; color: #d4d4e0; }

/* ── Upgrade banner (#4 - less dominant) ── */
#upgrade-banner {
  display: none;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
#upgrade-banner.active { display: flex; }
#upgrade-banner .upgrade-text {
  flex: 1;
  font-size: var(--text-caption);
  color: var(--color-primary-900);
  font-weight: var(--font-medium);
}
#upgrade-banner .upgrade-text strong { font-weight: var(--font-bold); }
.btn-upgrade {
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary-700);
  color: var(--surface-card);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.btn-upgrade:hover { background: var(--color-primary-900); }

/* ── User avatar in header ── */
.user-menu {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.user-menu.active { display: flex; }
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
}
.user-name {
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.85);
  font-weight: var(--font-medium);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-logout {
  padding: 0.25rem var(--space-2);
  background: rgba(255,255,255,0.15);
  color: var(--surface-card);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn-logout:hover { background: rgba(255,255,255,0.25); }


/* ── Plan badge (#15 contrast fix) ── */
.plan-badge {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.1rem var(--space-1);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Export CSV button states */
.btn-export-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  position: relative;
}

/* ── Plan dropdown menu ── */
.plan-badge-wrap {
  position: relative;
  cursor: pointer;
}
.plan-badge-wrap .plan-badge {
  cursor: pointer;
  transition: opacity 0.15s;
}
.plan-badge-wrap .plan-badge:hover { opacity: 0.85; }

.plan-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  padding: 0;
  overflow: hidden;
}
.plan-dropdown.open { display: block; }
.plan-dropdown-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: var(--text-caption);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}
.plan-dropdown-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-neutral-100);
}
.plan-dropdown-item.current {
  background: var(--color-primary-50);
  font-weight: var(--font-semibold);
  color: var(--color-primary-900);
}
.plan-dropdown-item .plan-check {
  color: var(--color-success-600);
  font-weight: bold;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-dropdown-item .plan-item-label { flex: 1; }
.plan-dropdown-item .plan-item-price {
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
}
.plan-dropdown-footer {
  padding: 0.65rem var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.plan-dropdown-footer .btn-upgrade-sm {
  display: block;
  width: 100%;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-700);
  color: var(--surface-card);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.plan-dropdown-footer .btn-upgrade-sm:hover { background: var(--color-primary-900); }
.plan-dropdown-footer .btn-manage-billing {
  display: block;
  width: 100%;
  padding: 0.35rem var(--space-3);
  background: none;
  color: var(--color-primary-700);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
  transition: border-color 0.15s;
}
.plan-dropdown-footer .btn-manage-billing:hover { border-color: var(--color-primary-700); }

/* ── CSV upsell popover ── */
.csv-upsell-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 120;
  padding: var(--space-3) var(--space-4);
}
.csv-upsell-popover.open { display: block; }
.csv-upsell-popover p {
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}
.csv-upsell-popover .btn-upgrade-inline {
  display: block;
  width: 100%;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-700);
  color: var(--surface-card);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.csv-upsell-popover .btn-upgrade-inline:hover { background: var(--color-primary-900); }
.csv-export-wrap { position: relative; display: inline-block; }

/* ── Mobile sort dropdown (visible below 700px) ── */
.mobile-sort-bar {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}
.mobile-sort-bar label {
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  white-space: nowrap;
}
.mobile-sort-bar select {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  font-size: var(--text-small);
  background: var(--surface-card);
  color: var(--color-neutral-900);
  min-height: 44px;
  font-family: var(--font-sans);
  cursor: pointer;
}
@media (max-width: 700px) {
  .mobile-sort-bar { display: flex; }
}

/* ── Cell locked indicator (gated data for free/anonymous users) ── */
.cell-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-100);
  border: 1px dashed var(--color-neutral-400);
  transition: border-color 0.15s, color 0.15s;
  user-select: none;
  font-style: italic;
  white-space: nowrap;
}
.cell-locked::before {
  content: "\1F512 ";
  font-style: normal;
}
.cell-locked:hover {
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}

/* ── Rent locked cell (#15 contrast fix) ── */
.rent-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-100);
  border: 1px dashed var(--color-neutral-400);
  transition: border-color 0.15s, color 0.15s;
}
.rent-locked:hover {
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}
.rent-locked .lock-icon { display: inline-flex; align-items: center; }

/* ── Rent history upsell ── */
.rent-history-upsell {
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  color: var(--color-primary-900);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.rent-history-upsell a {
  color: var(--color-primary-700);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* ── Rent History Timeline ── */
.rent-timeline-section {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
}
.rent-timeline-table {
  width: 100%;
  font-size: var(--text-small);
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}
.rent-timeline-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-50);
}
.rent-timeline-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-neutral-100);
  color: var(--color-neutral-800);
}
.rent-timeline-table td.mono {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
}
.rent-timeline-table tbody tr:hover { background: var(--color-primary-50); }
.rent-timeline-up {
  color: var(--color-error-700);
  font-weight: var(--font-semibold);
  font-size: var(--text-small);
}
.rent-timeline-down {
  color: var(--color-success-700);
  font-weight: var(--font-semibold);
  font-size: var(--text-small);
}
.rent-timeline-flat {
  color: var(--color-neutral-500);
  font-size: var(--text-small);
}
.rent-timeline-summary {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.rent-timeline-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rent-timeline-stat-label {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rent-timeline-stat-value {
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
  color: var(--color-neutral-900);
}

/* ── Plan color overrides (#15 contrast fix on plan-free) ── */
.plan-free { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.plan-investor { background: var(--color-neutral-200); color: var(--color-neutral-700); font-size: 0.6rem; }
.plan-pro {
  background: linear-gradient(135deg, #fefcbf 0%, #fbd38d 100%);
  color: #975a16;
}

/* ── Toast notification (#18) ── */
.upsell-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  max-width: 340px;
  z-index: 200;
  display: none;
  animation: slideUp 0.3s ease;
}
.upsell-toast.active { display: block; }
.upsell-toast.toast-exit {
  animation: slideDown 0.3s ease forwards;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}
/* Toast type variants (#18) */
.upsell-toast.toast-success { border-left: 4px solid var(--color-success-600); }
.upsell-toast.toast-error { border-left: 4px solid var(--color-error-600); }
.upsell-toast.toast-info { border-left: 4px solid var(--color-primary-700); }
.upsell-toast p {
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-1);
  line-height: 1.5;
}
.upsell-toast .toast-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.upsell-toast .btn-toast-upgrade {
  padding: 0.3rem var(--space-3);
  background: var(--color-primary-700);
  color: var(--surface-card);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
}
.upsell-toast .btn-toast-upgrade:hover { background: var(--color-primary-900); }
.upsell-toast .btn-toast-dismiss {
  padding: 0.3rem var(--space-2);
  background: none;
  border: none;
  color: var(--color-neutral-500);
  font-size: var(--text-micro);
  cursor: pointer;
  font-family: var(--font-sans);
}
.upsell-toast .btn-toast-dismiss:hover { color: var(--color-neutral-700); }
.upsell-toast .btn-toast-undo {
  padding: 0.3rem var(--space-3);
  background: var(--color-primary-700);
  color: var(--surface-card);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
}
.upsell-toast .btn-toast-undo:hover { background: var(--color-primary-900); }

/* ── Subscription management section in sidebar ── */
.account-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-300);
}
.account-plan-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.account-plan-label {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
}
.account-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.account-links a,
.account-links button {
  display: block;
  width: 100%;
  padding: 0.35rem var(--space-2);
  font-size: var(--text-micro);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.1s;
}
.account-links a {
  color: var(--color-primary-700);
  text-decoration: none;
  background: none;
}
.account-links a:hover { background: var(--color-neutral-100); }
.account-links .btn-account-upgrade {
  background: var(--color-primary-700);
  color: var(--surface-card);
  border: none;
  font-weight: var(--font-semibold);
  text-align: center;
}
.account-links .btn-account-upgrade:hover { background: var(--color-primary-900); }

/* ── Search clear button (#20) ── */
.search-clear-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-neutral-500);
  display: none;
  padding: 4px;
  line-height: 1;
  border-radius: var(--radius-sm);
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
}
.search-clear-btn.active { display: inline-flex; }
.search-clear-btn:hover { color: var(--color-neutral-900); background: var(--color-neutral-200); }

/* ── No results message (#20) ── */
.no-results-message {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-neutral-600);
}
.no-results-message a {
  color: var(--color-primary-700);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Rent Gap column ── */
.rent-gap-cell {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-bold);
  white-space: nowrap;
}
.rent-gap-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  min-width: 28px;
  text-align: center;
  white-space: nowrap;
}
.rent-gap-pill.rent-gap-positive {
  background: var(--color-success-100);
  color: var(--color-success-700);
}
.rent-gap-pill.rent-gap-neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
}
.rent-gap-pill.rent-gap-negative {
  background: var(--color-error-100);
  color: var(--color-error-700);
}
/* Text-only variants (used in quick facts, detail panels) */
.rent-gap-positive { color: var(--color-success-700); }
.rent-gap-neutral { color: var(--color-neutral-600); }
.rent-gap-negative { color: var(--color-error-700); }

/* ── Data freshness badges ── */
.freshness-badge {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--font-bold);
  line-height: 1;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: var(--space-1);
  vertical-align: middle;
  white-space: nowrap;
  cursor: default;
}
.freshness-green { background: var(--color-success-100); color: var(--color-success-700); }
.freshness-yellow { background: var(--color-warning-100); color: var(--color-warning-700); }
.freshness-orange { background: #FFF5EB; color: #C05621; }
.freshness-red { background: var(--color-error-100); color: var(--color-error-700); }
.freshness-unknown { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* ── Split view (map + list side by side) ── */
.split-view {
  display: flex;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 500px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}
.split-map {
  flex: 0 0 55%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.split-map #park-map {
  width: 100%;
  height: 100%;
}
.split-list {
  flex: 0 0 45%;
  overflow-y: auto;
  border-left: 1px solid var(--color-neutral-200);
  background: var(--surface-card);
}
@media (max-width: 700px) {
  /* Map hidden by default on mobile; toggled via .mobile-map-visible (see Issue #2 block below) */
  .split-view { flex-direction: column; height: auto; }
  .split-list { flex: none; max-height: none; overflow-y: auto; }
}
.map-empty-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-caption);
  color: var(--color-neutral-500);
  background: var(--surface-card);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-300);
  z-index: 500;
  pointer-events: none;
  display: none;
}
.map-empty-message.active { display: block; }

/* ── Detail panel (slide-in inside list panel) ── */
.detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--surface-card);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  z-index: 10;
}
.detail-panel.open {
  transform: translateX(0);
}
.split-list {
  position: relative;
}
.detail-panel-header {
  position: sticky;
  top: 0;
  background: var(--surface-card);
  border-bottom: 1px solid var(--color-neutral-200);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 11;
}
.detail-panel-header .detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.detail-panel-header .detail-back-btn:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}
.detail-panel-header .detail-park-name {
  flex: 1;
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-panel-header .detail-lot-count {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.detail-panel-body {
  padding: var(--space-4);
}
.detail-quick-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
}
.detail-quick-facts .quick-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  color: var(--color-neutral-800);
  font-weight: var(--font-medium);
}
.detail-quick-facts .quick-fact-rent {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}
.detail-quick-facts .quick-fact-gap {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
}
.detail-section {
  margin-bottom: var(--space-4);
}
.detail-section h4 {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-2) 0;
  border-bottom: 1px solid var(--color-neutral-300);
  padding-bottom: 0.3rem;
}
.detail-address-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.detail-address-row .detail-address-text {
  font-size: var(--text-caption);
  color: var(--color-neutral-800);
}
.detail-phone-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.detail-phone-row a {
  color: var(--color-primary-700);
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: var(--text-caption);
}
.detail-phone-row a:hover { text-decoration: underline; }
.detail-meta-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-200);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem var(--space-2);
  font-size: var(--text-micro);
}
.detail-meta-footer dt {
  color: var(--color-neutral-600);
  white-space: nowrap;
  font-weight: var(--font-medium);
}
.detail-meta-footer dd {
  margin: 0;
  color: var(--color-neutral-800);
  font-weight: var(--font-medium);
}

/* Mobile: full-screen detail panel + accordions */
@media (max-width: 700px) {
  .detail-panel {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }
  .detail-panel .detail-section h4 {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .detail-panel .detail-section h4::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-neutral-500);
    transition: transform 0.2s;
  }
  .detail-panel .detail-section.collapsed h4::after {
    transform: rotate(-90deg);
  }
  .detail-panel .detail-section.collapsed .detail-section-content {
    display: none;
  }
  .detail-phone-row .detail-call-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-700);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-decoration: none;
    font-family: var(--font-sans);
  }
  .split-map.detail-map-hidden { display: none; }
}

/* Desktop: call button hidden */
@media (min-width: 701px) {
  .detail-call-btn { display: none !important; }
}

/* Dark mode: detail panel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .detail-panel { background: #242442; }
  :root:not([data-theme="light"]) .detail-panel-header { background: #242442; border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .detail-panel-header .detail-back-btn { border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .detail-panel-header .detail-back-btn:hover { background: #2a2a4a; }
  :root:not([data-theme="light"]) .detail-panel-header .detail-park-name { color: #eaeaf0; }
  :root:not([data-theme="light"]) .detail-quick-facts .quick-fact { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .detail-quick-facts .quick-fact-rent { color: #eaeaf0; }
  :root:not([data-theme="light"]) .detail-quick-facts { border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .detail-meta-footer { border-top-color: #454570; }
  :root:not([data-theme="light"]) .detail-meta-footer dt { color: #9a9ab8; }
  :root:not([data-theme="light"]) .detail-meta-footer dd { color: #d4d4e0; }
}
html[data-theme="dark"] .detail-panel { background: #242442; }
html[data-theme="dark"] .detail-panel-header { background: #242442; border-bottom-color: #454570; }
html[data-theme="dark"] .detail-panel-header .detail-back-btn { border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .detail-panel-header .detail-back-btn:hover { background: #2a2a4a; }
html[data-theme="dark"] .detail-panel-header .detail-park-name { color: #eaeaf0; }
html[data-theme="dark"] .detail-quick-facts .quick-fact { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .detail-quick-facts .quick-fact-rent { color: #eaeaf0; }
html[data-theme="dark"] .detail-quick-facts { border-bottom-color: #454570; }
html[data-theme="dark"] .detail-meta-footer { border-top-color: #454570; }
html[data-theme="dark"] .detail-meta-footer dt { color: #9a9ab8; }
html[data-theme="dark"] .detail-meta-footer dd { color: #d4d4e0; }

/* ── Full-width detail view (Koerner audit) ── */
#detail-full-view {
  display: none;
  padding: var(--space-4);
}
#detail-full-view.active {
  display: block;
}
.detail-full-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: var(--space-4);
}
.detail-full-back-btn:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}
.detail-full-header {
  margin-bottom: var(--space-4);
}
.detail-full-header h2 {
  font-size: 1.4rem;
  font-weight: var(--font-extrabold);  /* page-level heading: 800 */
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-1) 0;
}
.detail-full-header .detail-full-subtitle {
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
}
.detail-full-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-4);
  max-width: 1400px;
  margin: 0 auto;
}
.detail-full-left { }
.detail-full-right {
  position: sticky;
  top: var(--space-4);
  align-self: start;
}
.detail-full-map {
  height: 300px;
  border-radius: var(--radius-md, var(--radius));
  overflow: hidden;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-neutral-300);
}
@media (max-width: 768px) {
  .detail-full-layout { grid-template-columns: 1fr; }
  .detail-full-right { position: static; }
}
@media (max-width: 700px) {
  .detail-full-layout { grid-template-columns: 1fr; }
  .detail-full-right { position: static; }
  #detail-full-view { padding: var(--space-3); }
  .detail-full-header h2 { font-size: 1.2rem; }
  /* Accordion sections on mobile */
  #detail-full-view .detail-section h4 {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #detail-full-view .detail-section h4::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-neutral-500);
    transition: transform 0.2s;
  }
  #detail-full-view .detail-section.collapsed h4::after {
    transform: rotate(-90deg);
  }
  #detail-full-view .detail-section.collapsed .detail-section-content {
    display: none;
  }
}

/* Dark mode: full-width detail view */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #detail-full-view { background: var(--surface-page); }
  :root:not([data-theme="light"]) .detail-full-back-btn { border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .detail-full-back-btn:hover { background: #2a2a4a; }
  :root:not([data-theme="light"]) .detail-full-header h2 { color: #eaeaf0; }
  :root:not([data-theme="light"]) .detail-full-map { border-color: #454570; }
}
html[data-theme="dark"] #detail-full-view { background: var(--surface-page); }
html[data-theme="dark"] .detail-full-back-btn { border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .detail-full-back-btn:hover { background: #2a2a4a; }
html[data-theme="dark"] .detail-full-header h2 { color: #eaeaf0; }
html[data-theme="dark"] .detail-full-map { border-color: #454570; }

/* Hide columns in split list to save space */
.split-list .col-hide-split { display: none; }
/* But keep Score column visible */
.split-list .col-show-score { display: table-cell; }

/* Park row highlight when selected from map */
.split-list tr.park-row-map-highlight {
  background: var(--color-primary-50) !important;
  outline: 2px solid var(--color-primary-700);
  outline-offset: -2px;
}

/* ── Map container (kept for map inside split-view) ── */
#park-map {
  width: 100%;
  height: 100%;
}
/* Finding #10: Leaflet zoom controls 44px touch target */
.leaflet-control-zoom a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 18px !important;
}

/* Leaflet popup overrides for brand consistency */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-sans) !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  min-width: 240px;
  max-width: 280px;
}
.map-popup-leaflet .leaflet-popup-content-wrapper { padding: 0 !important; overflow: hidden; }
/* ── Map popup card ── */
.map-popup-card { padding: 12px 14px; }
.map-popup-card .popup-header { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--color-neutral-200); }
.map-popup-card .popup-name { font-weight: 600; font-size: 14px; color: var(--color-neutral-900); margin: 0; }
.map-popup-card .popup-subtitle { font-size: 11px; color: var(--color-neutral-500); margin-top: 2px; }
.map-popup-card .popup-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 8px; }
.map-popup-card .popup-metric { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-neutral-800); }
.map-popup-card .popup-metric-label { font-size: 11px; color: var(--color-neutral-500); }
.map-popup-card .popup-metric-value { font-weight: 600; }
.map-popup-card .popup-gap-section { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-neutral-200); }
.map-popup-card .popup-gap-bar { height: 6px; border-radius: 3px; background: var(--color-neutral-200); margin: 6px 0 3px; overflow: hidden; }
.map-popup-card .popup-gap-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.map-popup-card .popup-gap-fill.below-market { background: #38A169; }
.map-popup-card .popup-gap-fill.above-market { background: #E53E3E; }
.map-popup-card .popup-gap-label { display: flex; justify-content: space-between; align-items: center; }
.map-popup-card .popup-gap-pct { font-weight: 700; font-size: 14px; }
.map-popup-card .popup-gap-pct.below-market { color: #38A169; }
.map-popup-card .popup-gap-pct.above-market { color: #E53E3E; }
.map-popup-card .popup-gap-pct.at-market { color: var(--color-neutral-500); }
.map-popup-card .popup-gap-context { font-size: 11px; color: var(--color-neutral-500); }
.map-popup-card .popup-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 6px; }
.map-popup-card .popup-secondary-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-neutral-700); }
.map-popup-card .popup-growth-up { color: #38A169; font-weight: 600; }
.map-popup-card .popup-growth-down { color: #E53E3E; font-weight: 600; }
.map-popup-card .popup-owner { font-size: 12px; color: var(--color-neutral-600); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.map-popup-card .popup-owner-count { font-size: 10px; background: var(--color-neutral-100); border-radius: 3px; padding: 1px 5px; color: var(--color-neutral-600); font-weight: 500; }
.map-popup-card .popup-action { display: block; text-align: center; margin-top: 8px; padding: 7px 12px; background: var(--color-primary-50); color: var(--color-primary-700); border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 12px; cursor: pointer; border: 1px solid var(--color-primary-100, transparent); transition: background 0.15s; }
.map-popup-card .popup-action:hover { background: var(--color-primary-100); }
/* Map legend */
.map-legend {
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-micro);
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-neutral-300);
}
.map-legend-title {
  font-weight: var(--font-bold);
  margin-bottom: var(--space-1);
  color: var(--color-neutral-800);
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-neutral-700);
}
.map-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.map-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-legend-size-note {
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  font-style: italic;
  margin-top: var(--space-1);
}

/* ── Owner badge ── */
.owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-full);
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.owner-badge:hover {
  background: var(--color-primary-100);
}
.owner-name-link {
  cursor: pointer;
  color: var(--color-neutral-800);
  transition: color 0.15s;
}
.owner-name-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

/* ── Owners section removed - full view in Owners tab ── */

/* ── Owner filter banner ── */
.owner-filter-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-primary-900);
}
.owner-filter-banner.active { display: flex; }
.owner-filter-banner .clear-owner-filter {
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  cursor: pointer;
  font-family: var(--font-sans);
}
.owner-filter-banner .clear-owner-filter:hover {
  background: var(--color-primary-100);
}

/* ── Coverage hint banner ── */
.coverage-hint-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-50, #FFFBEB);
  border: 1px solid var(--color-warning-200, #FDE68A);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-warning-900, #78350F);
}
.coverage-hint-banner.active { display: flex; }
.coverage-hint-banner .coverage-hint-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-warning-700, #B45309);
  padding: 0 var(--space-1);
}
.coverage-hint-banner .coverage-hint-dismiss:hover {
  color: var(--color-warning-900, #78350F);
}

/* ── Rent gap detail row ── */
.rent-gap-detail {
  padding: var(--space-2) var(--space-3);
  background: var(--color-success-100);
  border: 1px solid var(--color-success-600);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  color: var(--color-success-700);
  margin-top: var(--space-2);
}
.rent-gap-detail.above-market {
  background: var(--color-error-100);
  border-color: var(--color-error-600);
  color: var(--color-error-700);
}
.rent-gap-detail.at-market {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-600);
}

/* ── Dark mode: rent gap, map, owner ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cell-locked { background: #2a2a4a; border-color: #5a5a80; color: #9a9ab8; }
  :root:not([data-theme="light"]) .cell-locked:hover { border-color: #3BC9DB; color: #3BC9DB; }
  :root:not([data-theme="light"]) .rent-gap-positive { color: #68D391; }
  :root:not([data-theme="light"]) .rent-gap-negative { color: #FC8181; }
  :root:not([data-theme="light"]) .owner-badge { background: #1a3040; border-color: #305060; color: #3BC9DB; }
  :root:not([data-theme="light"]) .owner-filter-banner { background: #1a3040; border-color: #305060; color: #C5F6FA; }
  :root:not([data-theme="light"]) .coverage-hint-banner { background: #2a2518; border-color: #5a4a20; color: #FDE68A; }
  :root:not([data-theme="light"]) .coverage-hint-banner .coverage-hint-dismiss { color: #FDE68A; }
  :root:not([data-theme="light"]) .map-legend { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .map-legend-title { color: #d4d4e0; }
  :root:not([data-theme="light"]) .map-legend-item { color: #b8b8d0; }
  :root:not([data-theme="light"]) .leaflet-popup-content-wrapper { background: #242442 !important; color: #d4d4e0 !important; }
  :root:not([data-theme="light"]) .leaflet-popup-tip { background: #242442 !important; }
  :root:not([data-theme="light"]) .map-popup-card .popup-name { color: #eaeaf0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-subtitle { color: #7a7aa0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-header { border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .map-popup-card .popup-metric { color: #d4d4e0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-metric-label { color: #7a7aa0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-gap-bar { background: #3a3a5a; }
  :root:not([data-theme="light"]) .map-popup-card .popup-gap-context { color: #7a7aa0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-gap-section { border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .map-popup-card .popup-secondary-item { color: #b8b8d0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-owner { color: #9a9ab8; }
  :root:not([data-theme="light"]) .map-popup-card .popup-owner-count { background: #3a3a5a; color: #b8b8d0; }
  :root:not([data-theme="light"]) .map-popup-card .popup-action { background: #1a3040; color: #3BC9DB; border-color: #305060; }
  :root:not([data-theme="light"]) .map-popup-card .popup-action:hover { background: #254050; }
  :root:not([data-theme="light"]) .split-list { background: #242442; border-left-color: #454570; }
  :root:not([data-theme="light"]) .rent-gap-detail { background: #1a2e24; border-color: #48BB78; color: #68D391; }
  :root:not([data-theme="light"]) .rent-gap-detail.above-market { background: #2e1e1e; border-color: #F56565; color: #FC8181; }
  :root:not([data-theme="light"]) .rent-gap-detail.at-market { background: #2a2a4a; border-color: #454570; color: #7a7aa0; }

  /* Dark mode: county pills, PA link, valuation */
  :root:not([data-theme="light"]) .county-pill { background: #1a3040; border-color: #305060; color: #C5F6FA; }
  :root:not([data-theme="light"]) .county-pill .county-pill-dismiss { color: #3BC9DB; }
  :root:not([data-theme="light"]) .pa-link { color: #3BC9DB; }
  :root:not([data-theme="light"]) .valuation-card { background: #2a2a4a; border-color: #454570; }
  :root:not([data-theme="light"]) .valuation-card h5 { color: #9a9ab8; }
  :root:not([data-theme="light"]) .valuation-row .val-label { color: #9a9ab8; }
  :root:not([data-theme="light"]) .valuation-row .val-amount { color: #d4d4e0; }
  :root:not([data-theme="light"]) .valuation-row.valuation-deduct .val-amount { color: #FC8181; }
  :root:not([data-theme="light"]) .valuation-row.valuation-noi { border-top-color: #454570; }
  :root:not([data-theme="light"]) .valuation-row.valuation-noi .val-label { color: #d4d4e0; }
  :root:not([data-theme="light"]) .valuation-row.valuation-noi .val-amount { color: #68D391; }
  :root:not([data-theme="light"]) .valuation-estimate { color: #3BC9DB; }
  :root:not([data-theme="light"]) .valuation-formula { color: #7a7aa0; }
  :root:not([data-theme="light"]) .cap-rate-label,
  :root:not([data-theme="light"]) .vacancy-rate-label,
  :root:not([data-theme="light"]) .expense-ratio-label { color: #d4d4e0; }
}
html[data-theme="dark"] .cell-locked { background: #2a2a4a; border-color: #5a5a80; color: #9a9ab8; }
html[data-theme="dark"] .cell-locked:hover { border-color: #3BC9DB; color: #3BC9DB; }
html[data-theme="dark"] .rent-gap-positive { color: #68D391; }
html[data-theme="dark"] .rent-gap-negative { color: #FC8181; }
html[data-theme="dark"] .owner-badge { background: #1a3040; border-color: #305060; color: #3BC9DB; }
html[data-theme="dark"] .owner-filter-banner { background: #1a3040; border-color: #305060; color: #C5F6FA; }
html[data-theme="dark"] .coverage-hint-banner { background: #2a2518; border-color: #5a4a20; color: #FDE68A; }
html[data-theme="dark"] .coverage-hint-banner .coverage-hint-dismiss { color: #FDE68A; }
html[data-theme="dark"] .map-legend { background: #242442; border-color: #454570; }
html[data-theme="dark"] .map-legend-title { color: #d4d4e0; }
html[data-theme="dark"] .map-legend-item { color: #b8b8d0; }
html[data-theme="dark"] .leaflet-popup-content-wrapper { background: #242442 !important; color: #d4d4e0 !important; }
html[data-theme="dark"] .leaflet-popup-tip { background: #242442 !important; }
html[data-theme="dark"] .map-popup-card .popup-name { color: #eaeaf0; }
html[data-theme="dark"] .map-popup-card .popup-subtitle { color: #7a7aa0; }
html[data-theme="dark"] .map-popup-card .popup-header { border-bottom-color: #454570; }
html[data-theme="dark"] .map-popup-card .popup-metric { color: #d4d4e0; }
html[data-theme="dark"] .map-popup-card .popup-metric-label { color: #7a7aa0; }
html[data-theme="dark"] .map-popup-card .popup-gap-bar { background: #3a3a5a; }
html[data-theme="dark"] .map-popup-card .popup-gap-context { color: #7a7aa0; }
html[data-theme="dark"] .map-popup-card .popup-gap-section { border-bottom-color: #454570; }
html[data-theme="dark"] .map-popup-card .popup-secondary-item { color: #b8b8d0; }
html[data-theme="dark"] .map-popup-card .popup-owner { color: #9a9ab8; }
html[data-theme="dark"] .map-popup-card .popup-owner-count { background: #3a3a5a; color: #b8b8d0; }
html[data-theme="dark"] .map-popup-card .popup-action { background: #1a3040; color: #3BC9DB; border-color: #305060; }
html[data-theme="dark"] .map-popup-card .popup-action:hover { background: #254050; }
html[data-theme="dark"] .split-list { background: #242442; border-left-color: #454570; }
html[data-theme="dark"] .rent-gap-detail { background: #1a2e24; border-color: #48BB78; color: #68D391; }
html[data-theme="dark"] .rent-gap-detail.above-market { background: #2e1e1e; border-color: #F56565; color: #FC8181; }
html[data-theme="dark"] .rent-gap-detail.at-market { background: #2a2a4a; border-color: #454570; color: #7a7aa0; }

/* Dark mode: county pills, PA link, valuation */
html[data-theme="dark"] .county-pill { background: #1a3040; border-color: #305060; color: #C5F6FA; }
html[data-theme="dark"] .county-pill .county-pill-dismiss { color: #3BC9DB; }
html[data-theme="dark"] .pa-link { color: #3BC9DB; }
html[data-theme="dark"] .valuation-card { background: #2a2a4a; border-color: #454570; }
html[data-theme="dark"] .valuation-card h5 { color: #9a9ab8; }
html[data-theme="dark"] .valuation-row .val-label { color: #9a9ab8; }
html[data-theme="dark"] .valuation-row .val-amount { color: #d4d4e0; }
html[data-theme="dark"] .valuation-row.valuation-deduct .val-amount { color: #FC8181; }
html[data-theme="dark"] .valuation-row.valuation-noi { border-top-color: #454570; }
html[data-theme="dark"] .valuation-row.valuation-noi .val-label { color: #d4d4e0; }
html[data-theme="dark"] .valuation-row.valuation-noi .val-amount { color: #68D391; }
html[data-theme="dark"] .valuation-estimate { color: #3BC9DB; }
html[data-theme="dark"] .valuation-formula { color: #7a7aa0; }
html[data-theme="dark"] .cap-rate-label,
html[data-theme="dark"] .vacancy-rate-label,
html[data-theme="dark"] .expense-ratio-label { color: #d4d4e0; }

/* ── Comparable parks table in detail view ── */
.comps-section { margin-top: var(--space-3); }
.comps-section h4 {
  font-size: var(--text-micro); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-neutral-600); margin: 0 0 var(--space-2) 0;
  border-bottom: 1px solid var(--color-neutral-300); padding-bottom: 0.3rem;
  display: flex; align-items: center; gap: var(--space-1);
}
.comps-table {
  width: 100%; font-size: var(--text-micro); border-collapse: collapse;
}
.comps-table th {
  padding: 0.25rem var(--space-1); text-align: left;
  font-size: var(--text-micro); font-weight: var(--font-bold);
  color: var(--color-neutral-600); white-space: nowrap;
}
.comps-table td {
  padding: 0.25rem var(--space-1); vertical-align: middle;
}
.comps-table thead tr { border-bottom: 1px solid var(--color-neutral-300); }
.comps-table tbody tr { border-bottom: 1px solid var(--color-neutral-200); transition: background 0.08s; }
.comps-table tbody tr:last-child { border-bottom: none; }
.comps-table tbody tr:hover { background: var(--color-primary-50); }
.comps-table .comp-name {
  color: var(--color-primary-700); cursor: pointer; font-weight: var(--font-semibold);
  text-decoration: none;
}
.comps-table .comp-name:hover { text-decoration: underline; }
.comps-table .comp-distance {
  font-family: var(--font-mono); color: var(--color-neutral-600);
}
.comps-table .comp-rent {
  font-family: var(--font-mono); font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}
.comps-no-data {
  font-size: var(--text-micro); color: var(--color-neutral-600);
  font-style: italic; padding: var(--space-1) 0;
}


/* ── Sample rent tag ── */
.rent-sample-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Dark mode: comps, onboarding, sample tag ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .comps-table .comp-name { color: #3BC9DB; }
  :root:not([data-theme="light"]) .comps-table .comp-rent { color: #d4d4e0; }
  :root:not([data-theme="light"]) .comps-section h4 { border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .comps-table thead tr { border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .comps-table tbody tr { border-bottom-color: #363658; }
  :root:not([data-theme="light"]) .comps-table tbody tr:hover { background: #1a3040; }
:root:not([data-theme="light"]) .rent-sample-tag { background: #1a3040; border-color: #305060; color: #3BC9DB; }
}
html[data-theme="dark"] .comps-table .comp-name { color: #3BC9DB; }
html[data-theme="dark"] .comps-table .comp-rent { color: #d4d4e0; }
html[data-theme="dark"] .comps-section h4 { border-bottom-color: #454570; }
html[data-theme="dark"] .comps-table thead tr { border-bottom-color: #454570; }
html[data-theme="dark"] .comps-table tbody tr { border-bottom-color: #363658; }
html[data-theme="dark"] .comps-table tbody tr:hover { background: #1a3040; }
html[data-theme="dark"] .rent-sample-tag { background: #1a3040; border-color: #305060; color: #3BC9DB; }

/* ── Watchlist star icon ── */
.watchlist-star {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  min-width: 32px;
  min-height: 32px;
  color: var(--color-neutral-400);
  transition: color 0.15s;
  flex-shrink: 0;
}
.watchlist-star:hover { color: var(--color-warning-700); }
.watchlist-star.saved { color: var(--color-warning-700); }
.watchlist-star svg { width: 16px; height: 16px; }

/* ── Deal pipeline in expanded detail ── */
.watchlist-detail-section {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
}
.watchlist-detail-section h5 {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-2) 0;
}
.watchlist-detail-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-2);
}
.watchlist-detail-row label {
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  min-width: 60px;
  padding-top: 6px;
}
.watchlist-detail-row select,
.watchlist-detail-row textarea {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--color-neutral-800);
}
.watchlist-detail-row textarea {
  min-height: 60px;
  resize: vertical;
}

/* ── Dark mode: watchlist ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .watchlist-star { color: #5a5a80; }
  :root:not([data-theme="light"]) .watchlist-star:hover,
  :root:not([data-theme="light"]) .watchlist-star.saved { color: #ECC94B; }
  :root:not([data-theme="light"]) .watchlist-detail-section { background: #2a2a4a; border-color: #454570; }
  :root:not([data-theme="light"]) .watchlist-detail-section h5 { color: #9a9ab8; }
  :root:not([data-theme="light"]) .watchlist-detail-row select,
  :root:not([data-theme="light"]) .watchlist-detail-row textarea { background: #242442; border-color: #454570; color: #d4d4e0; }
}
html[data-theme="dark"] .watchlist-star { color: #5a5a80; }
html[data-theme="dark"] .watchlist-star:hover,
html[data-theme="dark"] .watchlist-star.saved { color: #ECC94B; }
html[data-theme="dark"] .watchlist-detail-section { background: #2a2a4a; border-color: #454570; }
html[data-theme="dark"] .watchlist-detail-section h5 { color: #9a9ab8; }
html[data-theme="dark"] .watchlist-detail-row select,
html[data-theme="dark"] .watchlist-detail-row textarea { background: #242442; border-color: #454570; color: #d4d4e0; }

/* ── Full Park Page (Phase 2) ── */
#full-park-page {
  display: none;
  padding: var(--space-4) var(--space-5) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}
#full-park-page.active { display: block; }
.fp-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  color: var(--color-primary-700);
  text-decoration: none;
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  cursor: pointer;
}
.fp-back-link:hover { text-decoration: underline; }
.fp-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.fp-header h2 {
  font-size: 1.5rem;
  font-weight: var(--font-extrabold);
  color: var(--color-neutral-900);
  margin: 0;
}
.fp-header .fp-status-badge {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-100);
  color: var(--color-success-700);
  border: 1px solid var(--color-success-600);
}
.fp-header .fp-status-badge.inactive {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-300);
}
.fp-header .fp-deal-score {
  font-size: var(--text-caption);
  font-weight: var(--font-bold);
  padding: 0.2rem var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.fp-deal-score.score-high { background: var(--color-success-100); color: var(--color-success-700); }
.fp-deal-score.score-mid { background: var(--color-warning-100); color: var(--color-warning-700); }
.fp-deal-score.score-neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.fp-deal-score.score-low, .fp-deal-score.score-red { background: var(--color-error-100); color: var(--color-error-700); }
.fp-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.fp-summary-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.fp-summary-card .fp-sc-label {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
  margin-bottom: var(--space-1);
}
.fp-summary-card .fp-sc-value {
  font-size: 1.2rem;
  font-weight: var(--font-extrabold);
  color: var(--color-neutral-900);
  font-family: var(--font-mono);
}
.fp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 768px) { .fp-grid { grid-template-columns: 1fr; } }
.fp-section {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.fp-section h3 {
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-neutral-200);
}
.fp-section-full { grid-column: 1 / -1; }
.fp-map-container { height: 300px; border-radius: var(--radius-sm); overflow: hidden; }

/* ── Deal Feed (Phase 3A) ── */
#deal-feed-view { display: none; }
#deal-feed-view.active { display: block; }
.deal-feed-container {
  max-width: 640px;
  margin: 0 auto;
}
.deal-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-3);
}
.deal-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.deal-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  flex: 1;
}
.deal-card-meta {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
}
.deal-card-meta span { display: flex; align-items: center; gap: var(--space-1); }
.deal-rent-comparison {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--color-neutral-50);
  border-radius: var(--radius-sm);
}
.deal-rent-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.deal-rent-bar {
  flex: 1;
  height: 8px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}
.deal-rent-bar-fill {
  height: 100%;
  background: var(--color-success-600);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.deal-rent-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
}
.deal-appreciation {
  padding: var(--space-3);
  background: var(--color-success-100);
  border: 1px solid var(--color-success-600);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-success-700);
}
.deal-appreciation strong {
  font-family: var(--font-mono);
}
.deal-owner-info {
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-4);
}
.deal-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.deal-card-actions button {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
  border: 1px solid var(--color-neutral-300);
  background: var(--surface-card);
  color: var(--color-neutral-800);
}
.deal-card-actions button:hover { background: var(--color-neutral-100); }
.deal-card-actions .btn-save-pipeline {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
}
.deal-card-actions .btn-save-pipeline:hover { background: var(--color-primary-800); }
.deal-card-actions .btn-save-pipeline.saved {
  background: var(--color-success-600);
  border-color: var(--color-success-600);
}
.deal-feed-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
}
.deal-feed-nav button {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-primary-700);
  cursor: pointer;
  font-family: var(--font-sans);
}
.deal-feed-nav button:hover:not(:disabled) { background: var(--color-primary-50); }
.deal-feed-nav button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Deal Grid (replaces carousel) ── */
.deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .deal-grid { grid-template-columns: 1fr; } }
.deal-grid-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.deal-grid-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-sm);
}
.deal-grid-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}
.deal-grid-card-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-body-sm);
  color: var(--color-primary-700);
  text-decoration: none;
  line-height: 1.3;
}
.deal-grid-card-name:hover { text-decoration: underline; }
.deal-grid-card-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
}
.deal-grid-rent-bar {
  padding: var(--space-1) 0;
}
.deal-grid-card-actions {
  margin-top: auto;
  padding-top: var(--space-2);
}
.deal-grid-card-actions .btn-save-pipeline {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  border: 1px solid var(--color-primary-700);
  border-radius: var(--radius-sm);
  background: var(--color-primary-700);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-sans);
}
.deal-grid-card-actions .btn-save-pipeline:hover { background: var(--color-primary-800); }
.deal-grid-card-actions .btn-save-pipeline.saved {
  background: var(--color-success-600);
  border-color: var(--color-success-600);
}
:root:not([data-theme="light"]) .deal-grid-card { background: #242442; border-color: #454570; }
html[data-theme="dark"] .deal-grid-card { background: #242442; border-color: #454570; }

/* ── Pipeline View (Phase 3B) ── */
#pipeline-view { display: none; }
#pipeline-view.active { display: block; }

/* Pipeline header bar */
.pipeline-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.pipeline-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.pipeline-header-left h2 {
  font-size: 1.1rem;
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin: 0;
  white-space: nowrap;
}
.pipeline-deal-counts {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.pipeline-stage-count {
  font-size: var(--text-micro);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.pipeline-stage-count.has-items {
  background: var(--color-primary-50);
  color: var(--color-primary-900);
}
.pipeline-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pipeline-header-right select {
  font-size: var(--text-micro);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-family: var(--font-sans);
  cursor: pointer;
  min-height: 32px;
}
.pipeline-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-700);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
  min-height: 32px;
}
.pipeline-add-btn:hover { background: var(--color-primary-800); }

/* Finding #15: In dark mode, primary-700 (#3BC9DB) is too light for white text.
   Use dark text on bright teal background instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pipeline-add-btn {
    background: #3BC9DB;
    color: #1a1a2e;
  }
  :root:not([data-theme="light"]) .pipeline-add-btn:hover {
    background: #2BB5C7;
  }
}
html[data-theme="dark"] .pipeline-add-btn {
  background: #3BC9DB;
  color: #1a1a2e;
}
html[data-theme="dark"] .pipeline-add-btn:hover {
  background: #2BB5C7;
}

/* Pipeline board: full-width horizontal scroll */
.pipeline-board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  min-height: 400px;
}
.pipeline-column {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-100);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-width: 200px; /* Finding #21: narrower for tablet portrait (was 280px) */
  max-width: 320px;
  flex: 1 0 200px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  overflow: visible; /* Prevent quick-edit form from being clipped */
}
.pipeline-column-header {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-neutral-300);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.pipeline-column-header .col-count {
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 0.6rem;
  padding: 0 5px;
  border-radius: var(--radius-full);
  min-width: 16px;
  text-align: center;
}
.pipeline-column-body {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  min-height: 120px;
}
.pipeline-card {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}
.pipeline-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pipeline-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-1);
}
.pipeline-card-name {
  font-size: var(--text-caption);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.pipeline-card-score {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-left: var(--space-2);
}
.pipeline-card-score.score-high { background: var(--color-success-100); color: var(--color-success-700); }
.pipeline-card-score.score-mid { background: var(--color-warning-100); color: var(--color-warning-700); }
.pipeline-card-score.score-neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.pipeline-card-score.score-low, .pipeline-card-score.score-red { background: var(--color-error-100); color: var(--color-error-700); }
.pipeline-card-location {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-1);
}
.pipeline-card-rent-row {
  font-size: var(--text-micro);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}
.pipeline-card-rent-gap {
  font-weight: var(--font-bold);
}
.pipeline-card-rent-gap.positive { color: var(--color-success-700); }
.pipeline-card-rent-gap.negative { color: var(--color-error-700); }
.pipeline-card-divider {
  border: none;
  border-top: 1px solid var(--color-neutral-200);
  margin: var(--space-2) 0;
}
.pipeline-card-owner-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-1);
}
.pipeline-card-owner-row .owner-phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-full);
  color: var(--color-primary-700);
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.pipeline-card-owner-row .owner-phone-btn:hover {
  background: var(--color-primary-100);
}
.pipeline-card-financials {
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-1);
}
.pipeline-card-financials-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.pipeline-card-financials-row .fin-label { color: var(--color-neutral-600); }
.pipeline-card-financials-row .fin-value { font-family: var(--font-mono); font-weight: var(--font-semibold); }
.pipeline-card-financials-row .fin-value.spread-positive { color: var(--color-success-700); }
.pipeline-card-financials-row .fin-value.spread-negative { color: var(--color-error-700); }
.pipeline-card-next-action {
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-1);
}
.pipeline-card-next-action strong {
  color: var(--color-neutral-900);
}
.pipeline-card-notes-preview {
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}
.pipeline-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pipeline-card-dd-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
}
.pipeline-dd-track {
  width: 60px;
  height: 5px;
  background: var(--color-neutral-200);
  border-radius: 3px;
  overflow: hidden;
}
.pipeline-dd-fill {
  height: 100%;
  background: var(--color-primary-700);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.pipeline-card-activity {
  font-size: 0.6rem;
  color: var(--color-neutral-500);
}
.pipeline-card-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-1);
}
.pipeline-card-actions select {
  font-size: var(--text-micro);
  padding: 2px var(--space-1);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-family: var(--font-sans);
  cursor: pointer;
  flex: 1;
}
.pipeline-card-actions .pipeline-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.pipeline-card-actions .pipeline-edit-btn:hover {
  background: var(--color-neutral-200);
}

/* Quick-edit inline form overlay on card */
.pipeline-quick-edit {
  background: var(--surface-card);
  border: 2px solid var(--color-primary-700);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-md);
}
.pipeline-quick-edit h4 {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-700);
  margin: 0 0 var(--space-2) 0;
}
.pqe-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.pqe-row label {
  font-size: var(--text-micro);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  min-width: 80px;
  flex-shrink: 0;
}
.pqe-row input,
.pqe-row textarea {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--color-neutral-800);
}
.pqe-row input:focus,
.pqe-row textarea:focus {
  border-color: var(--color-primary-700);
  outline: none;
  box-shadow: 0 0 0 2px rgba(11,114,133,0.15);
}
.pqe-row textarea {
  min-height: 50px;
  resize: vertical;
}
.pqe-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}
.pqe-actions button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  border: 1px solid var(--color-neutral-300);
  background: var(--surface-card);
  color: var(--color-neutral-700);
}
.pqe-actions .pqe-save-btn {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
}
.pqe-actions .pqe-save-btn:hover { background: var(--color-primary-800); }

/* Expandable notes on card */
.pipeline-card-notes-full {
  margin-top: var(--space-2);
}
.pipeline-card-notes-full textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  resize: vertical;
}
.pipeline-card-notes-full textarea:focus {
  border-color: var(--color-primary-700);
  outline: none;
}

/* ── Drag-and-drop (Feature 1) ── */
.pipeline-card.dragging { opacity: 0.5; }
.pipeline-column.drag-over {
  background: var(--color-primary-50);
  border: 2px dashed var(--color-primary-700);
}
.pipeline-drag-hint {
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-2);
  text-align: center;
}

/* ── Custom fields (Feature 2) ── */
.pqe-custom-fields {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-neutral-200);
}
.pqe-custom-fields-title {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
  margin-bottom: var(--space-2);
}
.pqe-custom-field-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.pqe-custom-field-row input {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--color-neutral-800);
}
.pqe-custom-field-row input:focus {
  border-color: var(--color-primary-700);
  outline: none;
  box-shadow: 0 0 0 2px rgba(11,114,133,0.15);
}
.pqe-custom-field-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-500);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.pqe-custom-field-delete:hover {
  color: var(--color-error-600);
  background: var(--color-error-100);
  border-color: var(--color-error-600);
}
.pqe-add-field-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
  margin-top: var(--space-1);
}
.pqe-add-field-btn:hover { background: var(--color-primary-100); }

/* Custom fields display on pipeline card */
.pipeline-card-custom-fields {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-1);
}
.pipeline-card-custom-field {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.pipeline-card-custom-field .cf-key {
  color: var(--color-neutral-500);
  font-weight: var(--font-medium);
}
.pipeline-card-custom-field .cf-val {
  color: var(--color-neutral-800);
  font-weight: var(--font-medium);
}

/* ── Pipeline CSV export button (Feature 3) ── */
.btn-export-pipeline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s;
  min-height: 32px;
}
.btn-export-pipeline:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}

/* ── Dark mode: drag-and-drop, custom fields, export ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pipeline-column.drag-over { background: #1a3040; border-color: #3BC9DB; }
  :root:not([data-theme="light"]) .pqe-custom-fields { border-top-color: #454570; }
  :root:not([data-theme="light"]) .pqe-custom-field-row input { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .pqe-custom-field-delete { border-color: #454570; color: #7a7aa0; }
  :root:not([data-theme="light"]) .pqe-custom-field-delete:hover { color: #FC8181; background: #2e1e1e; border-color: #F56565; }
  :root:not([data-theme="light"]) .pqe-add-field-btn { background: #1a3040; border-color: #305060; color: #3BC9DB; }
  :root:not([data-theme="light"]) .pipeline-card-custom-field .cf-val { color: #d4d4e0; }
  :root:not([data-theme="light"]) .btn-export-pipeline { background: #2a2a4a; border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .btn-export-pipeline:hover { background: #363658; }
}
html[data-theme="dark"] .pipeline-column.drag-over { background: #1a3040; border-color: #3BC9DB; }
html[data-theme="dark"] .pqe-custom-fields { border-top-color: #454570; }
html[data-theme="dark"] .pqe-custom-field-row input { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .pqe-custom-field-delete { border-color: #454570; color: #7a7aa0; }
html[data-theme="dark"] .pqe-custom-field-delete:hover { color: #FC8181; background: #2e1e1e; border-color: #F56565; }
html[data-theme="dark"] .pqe-add-field-btn { background: #1a3040; border-color: #305060; color: #3BC9DB; }
html[data-theme="dark"] .pipeline-card-custom-field .cf-val { color: #d4d4e0; }
html[data-theme="dark"] .btn-export-pipeline { background: #2a2a4a; border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .btn-export-pipeline:hover { background: #363658; }

/* Pipeline empty state */
.pipeline-empty {
  font-size: var(--text-caption);
  color: var(--color-neutral-500);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  line-height: 1.6;
}

/* Due Diligence checklist in full park page */
.dd-checklist-section {
  margin-top: var(--space-3);
}
.dd-checklist-section h3 {
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-neutral-300);
}
.dd-checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dd-checklist-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-neutral-200);
  cursor: pointer;
}
.dd-checklist-items li:last-child { border-bottom: none; }
.dd-checklist-items li:hover {
  background: var(--color-neutral-50);
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 4px;
}
.dd-checklist-items input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-neutral-400);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.dd-checklist-items input[type="checkbox"]:checked {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
}
.dd-checklist-items input[type="checkbox"]:checked::after {
  content: '\2713';
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.dd-checklist-items .dd-item-text {
  flex: 1;
  font-size: 14px;
  color: var(--color-neutral-800);
  cursor: pointer;
  user-select: none;
}
.dd-checklist-items .dd-item-text.checked {
  text-decoration: line-through;
  color: var(--color-neutral-500);
}
.dd-checklist-items .dd-item-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--color-neutral-400);
  cursor: pointer;
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  flex-shrink: 0;
  opacity: 0;
}
.dd-checklist-items li:hover .dd-item-delete {
  opacity: 1;
}
.dd-checklist-items .dd-item-delete:hover {
  color: var(--color-error-600);
  background: var(--color-error-100);
}
.dd-add-item-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dd-add-item-row input {
  flex: 1;
  padding: 4px var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  height: 32px;
}
.dd-add-item-row button {
  padding: 4px var(--space-3);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  height: 32px;
}
.dd-add-item-row button:hover { background: var(--color-primary-100); }

/* Activity timeline in full park page */
.activity-timeline {
  margin-top: var(--space-4);
}
.activity-timeline h3 {
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-neutral-300);
}
.activity-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.activity-timeline-list::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-neutral-200);
}
.activity-timeline-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  position: relative;
}
.activity-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary-700);
  border: 2px solid var(--surface-card);
  flex-shrink: 0;
  margin-top: 2px;
  z-index: 1;
}
.activity-timeline-content {
  flex: 1;
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  line-height: 1.5;
}
.activity-timeline-date {
  font-size: 0.65rem;
  color: var(--color-neutral-500);
  white-space: nowrap;
}

/* ── Deal Score badge (Phase 3C) ── */
.deal-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  min-width: 28px;
  text-align: center;
}
.deal-score-badge.score-high { background: var(--color-success-100); color: var(--color-success-700); }
.deal-score-badge.score-mid { background: var(--color-warning-100); color: var(--color-warning-700); }
.deal-score-badge.score-neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.deal-score-badge.score-low, .deal-score-badge.score-red { background: var(--color-error-100); color: var(--color-error-700); }

/* ── Deal Score micro stacked bar ── */
.deal-score-micro { display: inline-flex; align-items: center; gap: 4px; }
.deal-score-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  min-width: 28px;
  text-align: center;
}
.deal-score-num.score-high { background: var(--color-success-100); color: var(--color-success-700); }
.deal-score-num.score-mid { background: var(--color-warning-100); color: var(--color-warning-700); }
.deal-score-num.score-neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.deal-score-num.score-low, .deal-score-num.score-red { background: var(--color-error-100); color: var(--color-error-700); }
.deal-score-bar {
  display: inline-flex;
  width: 32px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-neutral-200);
}
.bar-segment { height: 100%; }
.bar-rent { background: #E53E3E; }
.bar-growth { background: #38A169; }
.bar-lots { background: #3182CE; }
.bar-owner { background: #805AD5; }
.bar-income { background: #D69E2E; }

/* ── Deal Score factor mini-bars (vertical) ── */
.deal-score-factor-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 20px;
  padding: 0 2px;
  cursor: help;
}
.factor-mini-bar {
  display: inline-block;
  width: 4px;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
}

/* ── API error state ── */
.api-error-state {
  display: flex;
  align-items: center;
  justify-content: center;
}
.api-error-retry-btn {
  border: 1px solid var(--color-primary-600);
  background: var(--color-primary-600);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}
.api-error-retry-btn:hover {
  background: var(--color-primary-700);
}

/* ── Dark mode: new phase 2/3 components ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #full-park-page .fp-section { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .fp-summary-card { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .deal-card { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .deal-rent-comparison { background: #2a2a4a; }
  :root:not([data-theme="light"]) .deal-appreciation { background: #1a2e24; border-color: #48BB78; color: #68D391; }
  :root:not([data-theme="light"]) .pipeline-column { background: #2a2a4a; border-color: #454570; }
  :root:not([data-theme="light"]) .pipeline-card { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .pipeline-card-name { color: #eaeaf0; }
  :root:not([data-theme="light"]) .pipeline-card-location { color: #9a9ab8; }
  :root:not([data-theme="light"]) .pipeline-card-rent-row { color: #d4d4e0; }
  :root:not([data-theme="light"]) .pipeline-card-divider { border-top-color: #454570; }
  :root:not([data-theme="light"]) .pipeline-card-owner-row { color: #b8b8d0; }
  :root:not([data-theme="light"]) .pipeline-card-financials-row .fin-label { color: #9a9ab8; }
  :root:not([data-theme="light"]) .pipeline-card-financials-row .fin-value { color: #d4d4e0; }
  :root:not([data-theme="light"]) .pipeline-card-next-action { color: #b8b8d0; }
  :root:not([data-theme="light"]) .pipeline-card-next-action strong { color: #eaeaf0; }
  :root:not([data-theme="light"]) .pipeline-card-notes-preview { color: #7a7aa0; }
  :root:not([data-theme="light"]) .pipeline-column-header { border-bottom-color: #454570; }
  :root:not([data-theme="light"]) .pipeline-header-left h2 { color: #eaeaf0; }
  :root:not([data-theme="light"]) .pipeline-stage-count { background: #363658; color: #b8b8d0; }
  :root:not([data-theme="light"]) .pipeline-stage-count.has-items { background: #1a3040; color: #3BC9DB; }
  :root:not([data-theme="light"]) .pipeline-header-right select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .pipeline-quick-edit { background: #242442; border-color: #3BC9DB; }
  :root:not([data-theme="light"]) .pipeline-quick-edit h4 { color: #3BC9DB; }
  :root:not([data-theme="light"]) .pqe-row input,
  :root:not([data-theme="light"]) .pqe-row textarea { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .pipeline-card-actions select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .pipeline-card-actions .pipeline-edit-btn { background: #363658; border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .dd-checklist-items li { border-bottom-color: #363658; color: #d4d4e0; }
  :root:not([data-theme="light"]) .dd-checklist-items li:hover { background: #2a2a4a; }
  :root:not([data-theme="light"]) .dd-checklist-items input[type="checkbox"] { border-color: #5a5a80; }
  :root:not([data-theme="light"]) .dd-checklist-items .dd-item-text { color: #d4d4e0; }
  :root:not([data-theme="light"]) .dd-checklist-items .dd-item-text.checked { color: #7a7aa0; }
  :root:not([data-theme="light"]) .dd-add-item-row input { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .activity-timeline-list::before { background: #454570; }
  :root:not([data-theme="light"]) .activity-timeline-content { color: #b8b8d0; }
  :root:not([data-theme="light"]) .activity-timeline-dot { background: #3BC9DB; border-color: #242442; }
  :root:not([data-theme="light"]) .deal-card-actions button { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .deal-feed-nav button { background: #2a2a4a; border-color: #454570; color: #3BC9DB; }
}
html[data-theme="dark"] #full-park-page .fp-section { background: #242442; border-color: #454570; }
html[data-theme="dark"] .fp-summary-card { background: #242442; border-color: #454570; }
html[data-theme="dark"] .deal-card { background: #242442; border-color: #454570; }
html[data-theme="dark"] .deal-rent-comparison { background: #2a2a4a; }
html[data-theme="dark"] .deal-appreciation { background: #1a2e24; border-color: #48BB78; color: #68D391; }
html[data-theme="dark"] .pipeline-column { background: #2a2a4a; border-color: #454570; }
html[data-theme="dark"] .pipeline-card { background: #242442; border-color: #454570; }
html[data-theme="dark"] .pipeline-card-name { color: #eaeaf0; }
html[data-theme="dark"] .pipeline-card-location { color: #9a9ab8; }
html[data-theme="dark"] .pipeline-card-rent-row { color: #d4d4e0; }
html[data-theme="dark"] .pipeline-card-divider { border-top-color: #454570; }
html[data-theme="dark"] .pipeline-card-owner-row { color: #b8b8d0; }
html[data-theme="dark"] .pipeline-card-financials-row .fin-label { color: #9a9ab8; }
html[data-theme="dark"] .pipeline-card-financials-row .fin-value { color: #d4d4e0; }
html[data-theme="dark"] .pipeline-card-next-action { color: #b8b8d0; }
html[data-theme="dark"] .pipeline-card-next-action strong { color: #eaeaf0; }
html[data-theme="dark"] .pipeline-card-notes-preview { color: #7a7aa0; }
html[data-theme="dark"] .pipeline-column-header { border-bottom-color: #454570; }
html[data-theme="dark"] .pipeline-header-left h2 { color: #eaeaf0; }
html[data-theme="dark"] .pipeline-stage-count { background: #363658; color: #b8b8d0; }
html[data-theme="dark"] .pipeline-stage-count.has-items { background: #1a3040; color: #3BC9DB; }
html[data-theme="dark"] .pipeline-header-right select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .pipeline-quick-edit { background: #242442; border-color: #3BC9DB; }
html[data-theme="dark"] .pipeline-quick-edit h4 { color: #3BC9DB; }
html[data-theme="dark"] .pqe-row input,
html[data-theme="dark"] .pqe-row textarea { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .pipeline-card-actions select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .pipeline-card-actions .pipeline-edit-btn { background: #363658; border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .dd-checklist-items li { border-bottom-color: #363658; color: #d4d4e0; }
html[data-theme="dark"] .dd-checklist-items li:hover { background: #2a2a4a; }
html[data-theme="dark"] .dd-checklist-items input[type="checkbox"] { border-color: #5a5a80; }
html[data-theme="dark"] .dd-checklist-items .dd-item-text { color: #d4d4e0; }
html[data-theme="dark"] .dd-checklist-items .dd-item-text.checked { color: #7a7aa0; }
html[data-theme="dark"] .dd-add-item-row input { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .activity-timeline-list::before { background: #454570; }
html[data-theme="dark"] .activity-timeline-content { color: #b8b8d0; }
html[data-theme="dark"] .activity-timeline-dot { background: #3BC9DB; border-color: #242442; }
html[data-theme="dark"] .deal-card-actions button { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .deal-feed-nav button { background: #2a2a4a; border-color: #454570; color: #3BC9DB; }

/* ── Mobile: map/split adjustments ── */
@media (max-width: 700px) {
  .split-view { border-radius: 0; }
  .split-map { display: none; }
  .fp-grid { grid-template-columns: 1fr; }
  .fp-summary-cards { grid-template-columns: repeat(2, 1fr); }
  .pipeline-board { grid-template-columns: 1fr; }
  .deal-card { padding: var(--space-3); }
}

/* ── Issue #15: Mobile touch targets (min 44px) ── */
@media (max-width: 700px) {
  .btn-export, .btn-upgrade, #btn-export-csv {
    min-height: 44px;
    min-width: 44px;
  }
  .pagination-buttons button {
    min-height: 44px;
    min-width: 44px;
  }
  .county-pill .county-pill-dismiss {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .range-slider-wrap input[type="range"] {
    min-height: 44px;
  }
  .range-slider-wrap input[type="range"]::-webkit-slider-thumb {
    width: 44px;
    height: 44px;
    margin-top: -19px;
  }
  .range-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 44px;
    height: 44px;
  }
  .btn-logout {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .theme-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .sidebar-close, .sidebar-close-btn, .detail-back-btn {
    min-height: 44px;
    min-width: 44px;
  }
  input[type="checkbox"] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
  }
  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
  }
  .brand-link, .brand-logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-manage-billing, .account-links a, .account-links button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  select, .filter-group select {
    min-height: 44px;
  }
  .watchlist-star {
    min-width: 44px;
    min-height: 44px;
  }
  .filter-pill .pill-dismiss {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .skip-to-content {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  #footer a, #footer .footer-links a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #header .nav-links-dash a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .leaflet-control-attribution a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .search-clear-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .coverage-hint-banner .coverage-hint-dismiss {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Issue #19: County row highlight when filtered ── */
#county-compare-table tbody tr.county-row-highlight {
  background: var(--color-primary-50);
  font-weight: var(--font-semibold);
}
#county-compare-table tbody tr.county-row-highlight:hover {
  background: var(--color-primary-100);
}

/* ── County table inline bar cells ── */
.county-bar-cell {
  position: relative;
}

/* ── Issue #21: Rent history notes truncation with tooltip ── */
.rent-history-table td:last-child {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Find Opportunities button (Issue #3) ── */
.btn-find-opportunities {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border: 2px solid var(--color-success-600);
  border-radius: 6px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: var(--color-success-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin-bottom: var(--space-3);
  min-height: 44px;
}
.btn-find-opportunities:hover {
  border-color: var(--color-success-600);
  color: var(--color-success-700);
}
.btn-find-opportunities.active {
  background: var(--color-success-100);
  border-color: var(--color-success-600);
  color: var(--color-success-700);
}
.opportunities-banner {
  display: none;
  padding: var(--space-2) var(--space-3);
  background: var(--color-success-100);
  border: 1px solid var(--color-success-600);
  border-radius: var(--radius);
  font-size: var(--text-caption);
  color: var(--color-success-700);
  margin-bottom: var(--space-3);
  align-items: center;
  gap: var(--space-2);
}
.opportunities-banner.active { display: flex; }
.opportunities-banner .clear-opportunities {
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-success-600);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-success-700);
  cursor: pointer;
  font-family: var(--font-sans);
}
.opportunities-banner .clear-opportunities:hover { background: var(--color-success-600); color: #fff; }

/* ── Views toggle: Parks | Owners (Issue #4) ── */
.view-toggle-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.view-toggle-btn {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-neutral-700);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.view-toggle-btn:hover { background: var(--color-neutral-100); }
.view-toggle-btn.active {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
}
#owners-full-view { display: none; }
#owners-full-view.active { display: block; }
#counties-view { display: none; }
#counties-view.active { display: block; }

/* ── Owners full table (Issue #4) ── */
#owners-full-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-caption);
}
#owners-full-table thead tr {
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-300);
}
#owners-full-table th {
  padding: 0.55rem var(--space-3);
  text-align: left;
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-600);
  white-space: nowrap;
  cursor: pointer;
  /* Finding #18: removed user-select: none */
}
#owners-full-table th:hover { color: var(--color-primary-700); }
#owners-full-table tbody tr {
  border-bottom: 1px solid var(--color-neutral-100);
  cursor: pointer;
  transition: background 0.08s;
}
#owners-full-table tbody tr:last-child { border-bottom: none; }
#owners-full-table tbody tr:hover { background: var(--color-neutral-100); }
#owners-full-table tbody tr:nth-child(even) { background: var(--color-neutral-50); }
#owners-full-table tbody tr:nth-child(even):hover { background: var(--color-neutral-100); }
#owners-full-table td { padding: 0.5rem var(--space-3); vertical-align: middle; }

/* Finding #20: Owner table mobile overflow */
@media (max-width: 700px) {
  #owners-full-view .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #owners-full-table {
    min-width: 541px;
  }
}

/* ── Map color-by dropdown (Issue #2) ── */
.map-color-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-micro);
  color: var(--color-neutral-700);
  padding: var(--space-1) 0;
  margin-top: var(--space-1);
}
.map-color-control select {
  font-size: var(--text-micro);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-family: var(--font-sans);
  cursor: pointer;
}

/* ── Valuation rent input (Issue #5) ── */
.valuation-rent-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.valuation-rent-input-row label {
  font-size: var(--text-micro);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.valuation-rent-input-row input[type="number"] {
  width: 80px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-family: var(--font-mono);
  background: var(--surface-card);
  color: var(--color-neutral-800);
}
.valuation-rent-input-row input[type="number"]:focus {
  border-color: var(--color-primary-700);
  outline: none;
  box-shadow: 0 0 0 2px rgba(11,114,133,0.15);
}

/* Dark mode: new components */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-find-opportunities { background: #242442; border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .btn-find-opportunities:hover { border-color: #48BB78; color: #68D391; }
  :root:not([data-theme="light"]) .btn-find-opportunities.active { background: #1a2e24; border-color: #48BB78; color: #68D391; }
  :root:not([data-theme="light"]) .opportunities-banner { background: #1a2e24; border-color: #48BB78; color: #68D391; }
  :root:not([data-theme="light"]) .view-toggle-btn { background: #2a2a4a; border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .view-toggle-btn.active { background: #3BC9DB; color: #1a1a2e; border-color: #3BC9DB; }
  :root:not([data-theme="light"]) .map-color-control select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .valuation-rent-input-row input[type="number"] { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
}
html[data-theme="dark"] .btn-find-opportunities { background: #242442; border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .btn-find-opportunities:hover { border-color: #48BB78; color: #68D391; }
html[data-theme="dark"] .btn-find-opportunities.active { background: #1a2e24; border-color: #48BB78; color: #68D391; }
html[data-theme="dark"] .opportunities-banner { background: #1a2e24; border-color: #48BB78; color: #68D391; }
html[data-theme="dark"] .view-toggle-btn { background: #2a2a4a; border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .view-toggle-btn.active { background: #3BC9DB; color: #1a1a2e; border-color: #3BC9DB; }
html[data-theme="dark"] .map-color-control select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .valuation-rent-input-row input[type="number"] { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST REDESIGN (max-width: 700px)
   Full feature parity with reduced chrome
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── Issue #1: Collapse stat cards to single summary line ── */
  #stat-cards {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-2);
    padding: var(--space-2) 0;
    overflow: hidden;
    grid-template-columns: none !important;
  }
  #stat-cards .stat-card {
    display: none;
  }
  #stat-cards[data-mobile-summary]::before {
    content: attr(data-mobile-summary);
    display: block;
    width: 100%;
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-700);
    padding: var(--space-1) 0;
    border: none;
    background: none;
    text-align: center;
  }

  /* Hide "Find Below-Market" button on mobile main area (it lives in filter drawer) */
  #main > .btn-find-opportunities {
    display: none !important;
  }
  /* Show the sidebar version on mobile */
  .btn-find-opportunities-sidebar {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-2);
    min-height: 44px;
  }
  .opportunities-banner {
    font-size: var(--text-micro);
    padding: var(--space-1) var(--space-2);
  }

  /* ── Issue #1: Sticky view switcher below header ── */
  .view-toggle-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    background: var(--surface-page);
    padding: var(--space-2) 0;
    margin: 0 calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: var(--space-2);
    gap: var(--space-1);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Issue #3: View switcher buttons min 44px touch target ── */
  .view-toggle-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-caption);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Issue #2: Hide map in Parks view, show toggle button ── */
  .split-view {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
  .split-map {
    display: none;
  }
  .split-map.mobile-map-visible {
    display: block;
    height: 50vh;
  }
  .split-list {
    flex: none;
    max-height: none;
    overflow-y: visible;
    border-left: none;
  }

  /* Mobile map toggle button */
  .mobile-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    color: var(--color-primary-700);
    cursor: pointer;
    font-family: var(--font-sans);
    min-height: 44px;
    margin-bottom: var(--space-2);
    transition: background 0.15s, border-color 0.15s;
  }
  .mobile-map-toggle:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-700);
  }
  .mobile-map-toggle.active {
    background: var(--color-primary-700);
    color: #fff;
    border-color: var(--color-primary-700);
  }

  /* ── Issue #4: Deal Feed immersive mode on mobile ── */
  body.mobile-deal-feed-active #stat-cards,
  body.mobile-deal-feed-active .btn-find-opportunities,
  body.mobile-deal-feed-active .opportunities-banner,
  body.mobile-deal-feed-active #mobile-filter-toggle,
  body.mobile-deal-feed-active .active-filters-bar,
  body.mobile-deal-feed-active #upgrade-banner {
    display: none !important;
  }
  body.mobile-deal-feed-active .deal-feed-container {
    max-width: 100%;
    padding: 0;
  }
  body.mobile-deal-feed-active .deal-card {
    min-height: calc(100vh - var(--header-h) - 140px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 0;
  }
  body.mobile-deal-feed-active .deal-feed-nav {
    position: sticky;
    bottom: 0;
    background: var(--surface-page);
    padding: var(--space-3) var(--space-2);
    border-top: 1px solid var(--color-neutral-200);
    margin-top: 0;
  }
  body.mobile-deal-feed-active .deal-feed-nav button {
    min-height: 48px;
    min-width: 100px;
    font-size: var(--text-body-sm);
    padding: var(--space-2) var(--space-4);
  }
  body.mobile-deal-feed-active .deal-card-actions button {
    min-height: 44px;
    flex: 1;
  }

  /* ── Issue #5: Pipeline Kanban horizontal scroll with snap ── */
  .pipeline-board {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    min-height: 300px;
  }
  .pipeline-column {
    min-width: 85vw;
    max-width: 85vw;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .pipeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .pipeline-header-right {
    width: 100%;
  }
  .pipeline-header-right select {
    min-height: 44px;
    flex: 1;
  }
  .pipeline-add-btn {
    min-height: 44px;
  }
  .pipeline-deal-counts {
    display: none;
  }
  .pipeline-card-actions select {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-caption);
  }
  .pipeline-card-actions .pipeline-edit-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }
  /* Quick-edit as bottom sheet on mobile */
  .pipeline-quick-edit {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    border-radius: 0;
    max-height: none;
    overflow-y: auto;
    box-shadow: none;
    padding-top: var(--space-4);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
  .pqe-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .pqe-row label { min-width: auto; }
  .pqe-row input,
  .pqe-row textarea {
    width: 100%;
    min-height: 44px;
    font-size: max(16px, var(--text-caption));
  }
  .dd-checklist-items input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  .dd-checklist-items li {
    padding: 10px 0;
  }
  .dd-checklist-items .dd-item-delete {
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
  }
  .dd-add-item-row input {
    min-height: 44px;
    font-size: max(16px, var(--text-caption));
  }
  .dd-add-item-row button {
    min-height: 44px;
  }

  /* ── Issue #6: Detail panel sections collapsed by default ── */
  /* Handled via JS: all sections start collapsed except first */

  /* ── Issue #7: Full park page mobile layout ── */
  #full-park-page {
    padding: var(--space-3) var(--space-4) var(--space-6);
  }
  .fp-summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2);
  }
  .fp-map-container {
    height: 200px !important;
  }
  .fp-header h2 {
    font-size: 1.2rem;
  }
  .fp-section {
    padding: var(--space-3);
  }
  .fp-section h3 {
    font-size: var(--text-caption);
  }

  /* ── Issue #8: Mobile card layout for parks table ── */
  .table-wrap {
    overflow-x: hidden;
  }
  #parks-table {
    min-width: auto !important;
    display: block;
  }
  #parks-table thead {
    display: none;
  }
  #parks-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
  }
  #parks-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    min-height: 44px;
    align-items: center;
  }
  #parks-table tbody tr:nth-child(even) {
    background: var(--surface-card);
  }
  #parks-table tbody tr:hover,
  #parks-table tbody tr:nth-child(even):hover {
    background: var(--color-neutral-50);
    border-color: var(--color-primary-200);
  }
  #parks-table tbody tr.park-row-expanded {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
  }
  /* Star cell: first column, spans both rows */
  #parks-table tbody tr td.mobile-card-star {
    grid-row: 1 / 3;
    grid-column: 1;
    display: flex !important;
    align-items: center;
    padding: 0;
  }
  /* Park name: top row, middle column */
  #parks-table tbody tr td.park-name-cell {
    grid-row: 1;
    grid-column: 2;
    max-width: none;
    white-space: normal;
    word-break: break-word;
    font-size: var(--text-body-sm);
    padding: 0;
    overflow: visible;
  }
  /* Score badge: top row, right column */
  #parks-table tbody tr td.mobile-card-score {
    grid-row: 1;
    grid-column: 3;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
  }
  /* Detail line (rent, gap, lots, county): bottom row */
  #parks-table tbody tr td.mobile-card-detail {
    grid-row: 2;
    grid-column: 2 / 4;
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 0;
    padding-top: 2px;
    font-size: var(--text-micro);
    color: var(--color-neutral-600);
  }
  #parks-table tbody tr td.mobile-card-detail .mobile-detail-item {
    white-space: nowrap;
  }
  #parks-table tbody tr td.mobile-card-detail .mobile-detail-sep {
    color: var(--color-neutral-300);
  }
  #parks-table tbody tr td.mobile-card-detail .rent-cell {
    font-size: var(--text-micro);
    color: var(--color-neutral-800);
  }
  #parks-table tbody tr td.mobile-card-detail .rent-cell.rent-low {
    color: var(--color-success-700);
  }
  #parks-table tbody tr td.mobile-card-detail .rent-cell.rent-high {
    color: var(--color-error-700);
  }
  /* Hide all original td cells replaced by the card layout */
  #parks-table tbody tr td.mobile-card-hidden {
    display: none !important;
  }
  /* Also hide any legacy mobile-hide-col cells */
  .mobile-hide-col {
    display: none !important;
  }
  /* col-hide-split cells hidden */
  #parks-table .col-hide-split {
    display: none !important;
  }

  /* ── Mobile sort chips (above card list) ── */
  .mobile-sort-chips {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .mobile-sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-card);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-700);
    cursor: pointer;
    font-family: var(--font-sans);
    white-space: nowrap;
    min-height: 44px;
    transition: background 0.15s, border-color 0.15s;
  }
  .mobile-sort-chip:hover {
    border-color: var(--color-primary-700);
    color: var(--color-primary-700);
  }
  .mobile-sort-chip.active {
    background: var(--color-primary-50);
    border-color: var(--color-primary-700);
    color: var(--color-primary-700);
  }
  .mobile-sort-chip .sort-dir {
    font-size: 10px;
    opacity: 0.6;
  }
  .mobile-sort-chip.active .sort-dir {
    opacity: 1;
  }

  /* No-star grid: JS adds this class when user is not logged in */
  #parks-table tbody tr.mobile-card-nostar td.park-name-cell {
    grid-column: 1 / 3;
  }
  #parks-table tbody tr.mobile-card-nostar td.mobile-card-score {
    grid-column: 3;
  }
  #parks-table tbody tr.mobile-card-nostar td.mobile-card-detail {
    grid-column: 1 / 4;
  }

  /* ── Issue #9: Touch targets everywhere (44px minimum) ── */
  .view-toggle-btn {
    min-height: 44px;
  }
  .pagination-buttons button {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2) var(--space-3);
  }
  .deal-feed-nav button {
    min-height: 48px;
    min-width: 48px;
  }
  .pipeline-card-actions select {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-caption);
  }
  .pipeline-card {
    min-height: 44px;
    padding: var(--space-3);
  }
  .filter-pill .pill-dismiss {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .watchlist-star {
    min-width: 44px;
    min-height: 44px;
  }
  .detail-panel .detail-section h4 {
    min-height: 44px;
    padding: var(--space-2) 0;
  }
  .detail-back-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .deal-card-actions button {
    min-height: 44px;
  }
  .btn-copy {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pa-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .detail-phone a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .detail-call-btn {
    min-height: 44px;
    min-width: 80px;
    padding: var(--space-2) var(--space-3);
  }
}

/* Map toggle button hidden on desktop */
@media (min-width: 701px) {
  .mobile-map-toggle { display: none; }
}

/* ── Fix #1: Leaflet layer control always visible ── */
.leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpolygon points='12 2 22 8.5 12 15 2 8.5'/%3E%3Cpolyline points='2 15.5 12 22 22 15.5'/%3E%3C/svg%3E") !important;
  background-size: 20px 20px !important;
  background-position: center !important;
  width: 36px !important;
  height: 36px !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-control-layers {
    background: #242442;
    border-color: #454570;
  }
  :root:not([data-theme="light"]) .leaflet-control-layers-toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4d4e0' stroke-width='2'%3E%3Cpolygon points='12 2 22 8.5 12 15 2 8.5'/%3E%3Cpolyline points='2 15.5 12 22 22 15.5'/%3E%3C/svg%3E") !important;
  }
  :root:not([data-theme="light"]) .leaflet-control-layers-list {
    background: #242442;
    color: #d4d4e0;
  }
}
html[data-theme="dark"] .leaflet-control-layers {
  background: #242442;
  border-color: #454570;
}
html[data-theme="dark"] .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4d4e0' stroke-width='2'%3E%3Cpolygon points='12 2 22 8.5 12 15 2 8.5'/%3E%3Cpolyline points='2 15.5 12 22 22 15.5'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] .leaflet-control-layers-list {
  background: #242442;
  color: #d4d4e0;
}

/* ── Fix #2: Map overlay control ── */
.map-overlay-control {
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-micro);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-neutral-300);
}
.map-overlay-control select {
  font-size: var(--text-micro);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-family: var(--font-sans);
  cursor: pointer;
}
.map-overlay-control label {
  font-size: var(--text-micro);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  margin-right: var(--space-1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-overlay-control {
    background: #242442;
    border-color: #454570;
  }
  :root:not([data-theme="light"]) .map-overlay-control select {
    background: #2a2a4a;
    border-color: #454570;
    color: #d4d4e0;
  }
  :root:not([data-theme="light"]) .map-overlay-control label {
    color: #b8b8d0;
  }
}
html[data-theme="dark"] .map-overlay-control {
  background: #242442;
  border-color: #454570;
}
html[data-theme="dark"] .map-overlay-control select {
  background: #2a2a4a;
  border-color: #454570;
  color: #d4d4e0;
}
html[data-theme="dark"] .map-overlay-control label {
  color: #b8b8d0;
}

/* ── Geolocation control ── */
.leaflet-control-geolocation a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  color: var(--color-neutral-700, #374151);
  cursor: pointer;
  text-decoration: none;
}
.leaflet-control-geolocation a:hover {
  color: var(--color-primary-600, #2563EB);
  background: var(--color-neutral-50, #f9fafb);
}
.leaflet-control-geolocation.geolocation-loading a {
  animation: geo-spin 1s linear infinite;
}
.leaflet-control-geolocation.geolocation-active a {
  color: #4285F4;
}
.leaflet-control-geolocation.geolocation-error a {
  color: #E53E3E;
}
@keyframes geo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes geo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(66, 133, 244, 0); }
}
.geolocation-pulse {
  animation: geo-pulse 2s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-control-geolocation a {
    color: #d4d4e0;
  }
}
html[data-theme="dark"] .leaflet-control-geolocation a {
  color: #d4d4e0;
}

/* ── Fix #3: Deal Score breakdown card ── */
.score-breakdown {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.score-total {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-2);
}
.score-factors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.score-factor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-micro);
}
.score-factor .factor-label {
  min-width: 60px;
  color: var(--color-neutral-600);
  font-weight: var(--font-medium);
}
.score-factor .factor-bar {
  flex: 1;
  height: 6px;
  background: var(--color-neutral-200);
  border-radius: 3px;
  overflow: hidden;
}
.score-factor .factor-fill {
  height: 100%;
  background: var(--color-primary-700);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.score-factor .factor-pts {
  min-width: 36px;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--color-neutral-700);
  font-size: 0.65rem;
}
.score-factor .factor-desc {
  min-width: 90px;
  text-align: right;
  font-size: 0.65rem;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .score-breakdown {
    background: #2a2a4a;
    border-color: #454570;
  }
  :root:not([data-theme="light"]) .score-total {
    color: #d4d4e0;
  }
  :root:not([data-theme="light"]) .score-factor .factor-label {
    color: #9a9ab8;
  }
  :root:not([data-theme="light"]) .score-factor .factor-bar {
    background: #363658;
  }
  :root:not([data-theme="light"]) .score-factor .factor-fill {
    background: #3BC9DB;
  }
  :root:not([data-theme="light"]) .score-factor .factor-pts {
    color: #b8b8d0;
  }
}
html[data-theme="dark"] .score-breakdown {
  background: #2a2a4a;
  border-color: #454570;
}
html[data-theme="dark"] .score-total {
  color: #d4d4e0;
}
html[data-theme="dark"] .score-factor .factor-label {
  color: #9a9ab8;
}
html[data-theme="dark"] .score-factor .factor-bar {
  background: #363658;
}
html[data-theme="dark"] .score-factor .factor-fill {
  background: #3BC9DB;
}
html[data-theme="dark"] .score-factor .factor-pts {
  color: #b8b8d0;
}

/* Mobile pipeline fixes */
@media (max-width: 700px) {
  .btn-export-pipeline {
    min-height: 44px;
    min-width: 44px;
  }
  .pipeline-card-name {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Avatar Dropdown ── */
.avatar-dropdown-wrap { position: relative; }
.avatar-trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: 50%; }
.avatar-trigger .user-avatar { width: 28px; height: 28px; border-radius: 50%; }
.avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  padding: var(--space-2) 0;
}
.avatar-dropdown.open { display: block; }
.avatar-dropdown-user { padding: var(--space-2) var(--space-4); }
.avatar-dropdown-name { font-weight: var(--font-semibold); font-size: var(--text-body-sm); display: block; color: var(--color-neutral-900); }
.avatar-dropdown-divider { height: 1px; background: var(--color-neutral-200); margin: var(--space-1) 0; }
.avatar-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-neutral-800);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}
.avatar-dropdown-item:hover { background: var(--color-neutral-50); }
.avatar-logout { color: var(--color-error-600); }
.avatar-dropdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-neutral-800);
}
.avatar-mini-select {
  font-size: var(--text-caption);
  padding: 2px 6px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  background: var(--surface-card);
  color: var(--color-neutral-800);
  font-family: var(--font-sans);
}
.avatar-theme-btn {
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--color-neutral-700);
}
.avatar-theme-btn:hover { background: var(--color-neutral-50); }

/* Hide standalone theme toggle when logged in (lang-select already hidden at line 445) */
#header.logged-in #theme-toggle { display: none; }

/* Dark mode: avatar dropdown */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar-dropdown { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .avatar-dropdown-name { color: #eaeaf0; }
  :root:not([data-theme="light"]) .avatar-dropdown-divider { background: #363658; }
  :root:not([data-theme="light"]) .avatar-dropdown-item { color: #d4d4e0; }
  :root:not([data-theme="light"]) .avatar-dropdown-item:hover { background: #2a2a4a; }
  :root:not([data-theme="light"]) .avatar-logout { color: #FC8181; }
  :root:not([data-theme="light"]) .avatar-dropdown-row { color: #d4d4e0; }
  :root:not([data-theme="light"]) .avatar-mini-select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
  :root:not([data-theme="light"]) .avatar-theme-btn { border-color: #454570; color: #b8b8d0; }
  :root:not([data-theme="light"]) .avatar-theme-btn:hover { background: #2a2a4a; }
}
html[data-theme="dark"] .avatar-dropdown { background: #242442; border-color: #454570; }
html[data-theme="dark"] .avatar-dropdown-name { color: #eaeaf0; }
html[data-theme="dark"] .avatar-dropdown-divider { background: #363658; }
html[data-theme="dark"] .avatar-dropdown-item { color: #d4d4e0; }
html[data-theme="dark"] .avatar-dropdown-item:hover { background: #2a2a4a; }
html[data-theme="dark"] .avatar-logout { color: #FC8181; }
html[data-theme="dark"] .avatar-dropdown-row { color: #d4d4e0; }
html[data-theme="dark"] .avatar-mini-select { background: #2a2a4a; border-color: #454570; color: #d4d4e0; }
html[data-theme="dark"] .avatar-theme-btn { border-color: #454570; color: #b8b8d0; }
html[data-theme="dark"] .avatar-theme-btn:hover { background: #2a2a4a; }

/* Mobile: full-width avatar dropdown */
@media (max-width: 700px) {
  .avatar-dropdown {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0 0 8px 8px;
  }
}

/* ── Cmd+K Search Overlay ── */
.header-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: rgba(255,255,255,0.9); /* Finding #14: improved from 0.7 for contrast */
  font-size: var(--text-caption);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  min-height: 44px; /* Finding #8: 44px touch target */
}
.header-search-trigger:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  color: #FFFFFF;
}
.header-search-trigger svg { width: 14px; height: 14px; opacity: 0.9; }
.header-search-trigger span { opacity: 1; color: rgba(255,255,255,0.95); }
.header-search-trigger kbd {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.3;
  color: rgba(255,255,255,0.85); /* Finding #14: improved contrast */
}
/* Hide search trigger when not logged in */
.header-search-trigger { display: none; }
#header.logged-in .header-search-trigger { display: inline-flex; }

/* Search overlay */
.search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 3000;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
}
.search-overlay.open { display: flex; }
.search-overlay-panel {
  width: 560px;
  max-width: 90vw;
  max-height: 70vh;
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.search-overlay-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}
.search-overlay-input-wrap svg { width: 18px; height: 18px; color: var(--color-neutral-500); flex-shrink: 0; }
.search-overlay-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-body-sm);
  font-family: var(--font-sans);
  background: transparent;
  color: var(--color-neutral-900);
}
.search-overlay-input::placeholder { color: var(--color-neutral-500); }
.search-overlay-results {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-2) 0;
}
.search-overlay-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 0.08s;
}
.search-overlay-item:hover,
.search-overlay-item.highlighted { background: var(--color-neutral-50); }
.search-overlay-item-name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
}
.search-overlay-item-meta {
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
}
.search-overlay-empty {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-neutral-500);
}
.search-overlay-footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  display: flex;
  gap: var(--space-3);
}
.search-overlay-footer kbd {
  font-family: var(--font-mono);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.65rem;
}

/* Dark mode: search overlay */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .search-overlay { background: rgba(0,0,0,0.7); }
  :root:not([data-theme="light"]) .search-overlay-panel { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .search-overlay-input-wrap { border-bottom-color: #363658; }
  :root:not([data-theme="light"]) .search-overlay-input-wrap svg { color: #7a7aa0; }
  :root:not([data-theme="light"]) .search-overlay-input { color: #eaeaf0; }
  :root:not([data-theme="light"]) .search-overlay-input::placeholder { color: #7a7aa0; }
  :root:not([data-theme="light"]) .search-overlay-item:hover,
  :root:not([data-theme="light"]) .search-overlay-item.highlighted { background: #2a2a4a; }
  :root:not([data-theme="light"]) .search-overlay-item-name { color: #eaeaf0; }
  :root:not([data-theme="light"]) .search-overlay-item-meta { color: #9a9ab8; }
  :root:not([data-theme="light"]) .search-overlay-footer { border-top-color: #363658; color: #7a7aa0; }
  :root:not([data-theme="light"]) .search-overlay-footer kbd { background: #363658; border-color: #454570; }
}
html[data-theme="dark"] .search-overlay { background: rgba(0,0,0,0.7); }
html[data-theme="dark"] .search-overlay-panel { background: #242442; border-color: #454570; }
html[data-theme="dark"] .search-overlay-input-wrap { border-bottom-color: #363658; }
html[data-theme="dark"] .search-overlay-input-wrap svg { color: #7a7aa0; }
html[data-theme="dark"] .search-overlay-input { color: #eaeaf0; }
html[data-theme="dark"] .search-overlay-input::placeholder { color: #7a7aa0; }
html[data-theme="dark"] .search-overlay-item:hover,
html[data-theme="dark"] .search-overlay-item.highlighted { background: #2a2a4a; }
html[data-theme="dark"] .search-overlay-item-name { color: #eaeaf0; }
html[data-theme="dark"] .search-overlay-item-meta { color: #9a9ab8; }
html[data-theme="dark"] .search-overlay-footer { border-top-color: #363658; color: #7a7aa0; }
html[data-theme="dark"] .search-overlay-footer kbd { background: #363658; border-color: #454570; }

@media (max-width: 700px) {
  .header-search-trigger span,
  .header-search-trigger kbd { display: none; }
  .search-overlay { padding-top: var(--header-h); }
  .search-overlay-panel { max-width: 100vw; border-radius: 0; max-height: calc(100vh - var(--header-h)); }
}


/* ================================================================
   PRINT STYLES (Finding #2)
   ================================================================ */
@media print {
  /* Hide all navigation and interactive chrome */
  #header,
  .filter-chips-bar,
  .filter-chip,
  #mobile-filter-toggle,
  .mobile-filter-backdrop,
  .bottom-nav,
  .header-search-trigger,
  .search-overlay,
  .pipeline-drag-hint,
  .btn-upgrade,
  #upgrade-banner,
  .upsell-toast,
  .theme-toggle,
  .skip-to-content,
  .view-toggle-bar,
  .mobile-map-toggle,
  .auth-card,
  #auth-gate,
  .plan-dropdown,
  .csv-upsell-popover,
  .avatar-dropdown,
  .pipeline-card-actions,
  .deal-card-actions,
  .deal-feed-nav,
  .leaflet-control-zoom,
  .leaflet-control-layers,
  #sidebar,
  .sidebar-close-btn,
  .views-indicator-sidebar {
    display: none !important;
  }

  /* Reset layout: remove sidebar margin, full width */
  #main {
    margin-left: 0 !important;
    padding: 0 !important;
  }
  #layout {
    display: block !important;
  }

  /* White backgrounds, black text */
  body,
  .stat-card,
  .table-wrap,
  .card,
  .settings-card,
  .pipeline-column,
  .pipeline-card,
  .deal-card,
  .fp-section,
  .fp-summary-card,
  .detail-panel,
  .split-list {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Table text black */
  #parks-table th,
  #parks-table td,
  #county-compare-table th,
  #county-compare-table td,
  #owners-full-table th,
  #owners-full-table td {
    color: #000 !important;
  }

  /* Borders lighter for print */
  .stat-card,
  .table-wrap,
  .card,
  .pipeline-column,
  .pipeline-card,
  .deal-card,
  .fp-section {
    border: 1px solid #ccc !important;
  }

  /* Prevent page breaks inside cards/rows */
  .stat-card, .pipeline-card, .deal-card, .fp-section {
    break-inside: avoid;
  }

  /* Full width split view */
  .split-view {
    height: auto !important;
    border: none !important;
  }
  .split-map {
    display: none !important;
  }
  .split-list {
    flex: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
  }
}


/* ================================================================
   FEATURE GATING - FREE PLAN RESTRICTIONS
   ================================================================ */

/* Blurred gated content */
.gated-blur {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  position: relative;
}

/* Overlay for upgrade CTA over blurred content */
.gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  z-index: 5;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
html[data-theme="dark"] .gate-overlay {
  background: rgba(30, 30, 35, 0.7);
}
.gate-overlay-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}
.gate-overlay-text {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-3);
  max-width: 320px;
  line-height: 1.5;
}
html[data-theme="dark"] .gate-overlay-text {
  color: var(--color-neutral-200);
}
.gate-overlay .btn-upgrade {
  font-size: var(--text-caption);
  padding: var(--space-2) var(--space-5);
}

/* Gated section placeholder (shown when user navigates to a locked section) */
.gated-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  min-height: 300px;
}
.gated-placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--color-neutral-400);
  margin-bottom: var(--space-3);
}
.gated-placeholder-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-2);
}
html[data-theme="dark"] .gated-placeholder-title {
  color: var(--color-neutral-200);
}
.gated-placeholder-desc {
  font-size: var(--text-body);
  color: var(--color-neutral-600);
  max-width: 400px;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.gated-placeholder .btn-upgrade {
  font-size: var(--text-body);
  padding: var(--space-2) var(--space-6);
}

/* Detail panel gated wrapper (for positioning the overlay) */
.detail-gated-wrap {
  position: relative;
}

/* Pipeline limit banner */
.pipeline-limit-banner {
  background: var(--color-warning-50, #FFFFF0);
  border: 1px solid var(--color-warning-200, #FEFCBF);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-warning-900, #744210);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
html[data-theme="dark"] .pipeline-limit-banner {
  background: rgba(214, 158, 46, 0.12);
  border-color: rgba(214, 158, 46, 0.3);
  color: var(--color-warning-200, #FEFCBF);
}
.pipeline-limit-banner .btn-upgrade {
  font-size: var(--text-micro);
  padding: var(--space-1) var(--space-3);
  margin-left: auto;
  white-space: nowrap;
}


/* ================================================================
   RENT GAP BAR CHART (detail panel)
   ================================================================ */
.detail-bar-chart-wrap {
  margin: var(--space-3) 0 var(--space-2);
}
.detail-bar-track {
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  height: 24px;
  position: relative;
  overflow: visible;
  border: 1px solid var(--color-neutral-400);
  margin-top: 1.5rem;
}
.detail-bar-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-success-100) 0%, #C6F6D5 100%);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-success-600);
}
.detail-bar-median {
  position: absolute;
  top: -3px;
  width: 3px;
  height: calc(100% + 6px);
  background: var(--color-primary-700);
  border-radius: 2px;
  transform: translateX(-50%);
}
.detail-bar-park-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  z-index: 2;
}
.detail-bar-park-arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--color-warning-600);
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.detail-bar-park-label {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-warning-600);
  color: #fff;
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.detail-bar-park-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-warning-600);
}
.detail-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-micro);
  color: var(--color-neutral-600);
  margin-top: 0.3rem;
}
.detail-bar-legend {
  display: flex;
  gap: 0.75rem;
  font-size: var(--text-micro);
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.detail-bar-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.detail-bar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Dark mode: bar chart */
html[data-theme="dark"] .detail-bar-track {
  background: var(--color-neutral-700);
  border-color: var(--color-neutral-600);
}
html[data-theme="dark"] .detail-bar-range {
  background: linear-gradient(90deg, rgba(72, 187, 120, 0.25) 0%, rgba(72, 187, 120, 0.35) 100%);
  border-color: rgba(72, 187, 120, 0.5);
}
html[data-theme="dark"] .detail-bar-labels {
  color: var(--color-neutral-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .detail-bar-track {
    background: var(--color-neutral-700);
    border-color: var(--color-neutral-600);
  }
  :root:not([data-theme="light"]) .detail-bar-range {
    background: linear-gradient(90deg, rgba(72, 187, 120, 0.25) 0%, rgba(72, 187, 120, 0.35) 100%);
    border-color: rgba(72, 187, 120, 0.5);
  }
  :root:not([data-theme="light"]) .detail-bar-labels {
    color: var(--color-neutral-400);
  }
}


/* ================================================================
   RENT SPARKLINE (table rows)
   ================================================================ */
.rent-sparkline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Ensure sparkline doesn't break rent cell layout */
td .rent-cell + .rent-sparkline,
td .rent-locked + .rent-sparkline,
td .rent-none + .rent-sparkline {
  margin-left: 4px;
}


/* ================================================================
   STATISTICAL INTEGRITY INDICATORS
   ================================================================ */
.low-confidence {
  opacity: 0.6;
  text-decoration: underline dashed var(--color-neutral-400);
  text-underline-offset: 3px;
  cursor: help;
}
.insufficient-data {
  font-style: italic;
  color: var(--color-neutral-500);
}
.sample-size-note {
  font-size: var(--text-micro, 0.75rem);
  color: var(--color-neutral-500);
  font-weight: normal;
}
.rent-count-emphasis {
  font-weight: var(--font-bold, 700);
  color: var(--color-neutral-800);
}
.data-not-collected {
  color: var(--color-neutral-400);
  font-style: italic;
}
.data-sign-in {
  color: var(--color-primary-600);
}
.data-sign-in::before {
  content: "\1F512 ";
  font-size: 0.8em;
}

/* ================================================================
   SCROLL SHADOW INDICATORS
   Gradient shadows on right edge of horizontally scrollable tables
   to indicate more content is available.
   ================================================================ */
.county-compare-wrap,
#owners-full-view .table-wrap {
  position: relative;
}
.county-compare-wrap::after,
#owners-full-view .table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08));
  opacity: 1;
  transition: opacity 0.2s;
  border-radius: 0 6px 6px 0;
}
/* Hide shadow when scrolled to the end (JS adds this class) */
.county-compare-wrap.scrolled-end::after,
#owners-full-view .table-wrap.scrolled-end::after {
  opacity: 0;
}
/* Dark mode scroll shadows */
html[data-theme="dark"] .county-compare-wrap::after,
html[data-theme="dark"] #owners-full-view .table-wrap::after {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.25));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .county-compare-wrap::after,
  :root:not([data-theme="light"]) #owners-full-view .table-wrap::after {
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.25));
  }
}
/* Hide scroll shadows on desktop when table fits without scrolling */
@media (min-width: 701px) {
  .county-compare-wrap::after,
  #owners-full-view .table-wrap::after {
    display: none;
  }
}
/* Hide county scroll shadow on mobile (cards don't scroll horizontally) */
@media (max-width: 700px) {
  .county-compare-wrap::after { display: none; }
}

/* Dark mode: mobile park cards */
html[data-theme="dark"] #parks-table tbody tr {
  border-color: var(--color-neutral-600);
}
html[data-theme="dark"] #parks-table tbody tr td.mobile-card-detail {
  color: var(--color-neutral-400);
}
html[data-theme="dark"] #parks-table tbody tr td.mobile-card-detail .mobile-detail-sep {
  color: var(--color-neutral-600);
}
html[data-theme="dark"] #parks-table tbody tr td.mobile-card-detail .rent-cell {
  color: var(--color-neutral-300);
}
html[data-theme="dark"] .mobile-sort-chip {
  background: var(--surface-card);
  border-color: var(--color-neutral-600);
  color: var(--color-neutral-300);
}
html[data-theme="dark"] .mobile-sort-chip.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--color-primary-400);
  color: var(--color-primary-300);
}
html[data-theme="dark"] .mobile-sort-bar {
  background: #242442;
  border-color: #454570;
}
html[data-theme="dark"] .mobile-sort-bar label {
  color: #b8b8d0;
}
html[data-theme="dark"] .mobile-sort-bar select {
  background: #2a2a4a;
  border-color: #454570;
  color: #d4d4e0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #parks-table tbody tr {
    border-color: var(--color-neutral-600);
  }
  :root:not([data-theme="light"]) #parks-table tbody tr td.mobile-card-detail {
    color: var(--color-neutral-400);
  }
  :root:not([data-theme="light"]) #parks-table tbody tr td.mobile-card-detail .mobile-detail-sep {
    color: var(--color-neutral-600);
  }
  :root:not([data-theme="light"]) #parks-table tbody tr td.mobile-card-detail .rent-cell {
    color: var(--color-neutral-300);
  }
  :root:not([data-theme="light"]) .mobile-sort-chip {
    background: var(--surface-card);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-300);
  }
  :root:not([data-theme="light"]) .mobile-sort-chip.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--color-primary-400);
    color: var(--color-primary-300);
  }
  :root:not([data-theme="light"]) .mobile-sort-bar {
    background: #242442;
    border-color: #454570;
  }
  :root:not([data-theme="light"]) .mobile-sort-bar label {
    color: #b8b8d0;
  }
  :root:not([data-theme="light"]) .mobile-sort-bar select {
    background: #2a2a4a;
    border-color: #454570;
    color: #d4d4e0;
  }
}

/* Dark mode: mobile county cards */
html[data-theme="dark"] #county-compare-table tbody tr {
  border-color: var(--color-neutral-600);
}
html[data-theme="dark"] #county-compare-table tbody tr td.county-cell-stat::before,
html[data-theme="dark"] #county-compare-table tbody tr td.county-cell-demo::before {
  color: var(--color-neutral-500);
}
html[data-theme="dark"] #county-compare-table tbody tr td.county-cell-name {
  border-bottom-color: var(--color-neutral-600);
}
html[data-theme="dark"] #county-compare-table tbody tr td:nth-child(7) {
  border-top-color: var(--color-neutral-600);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #county-compare-table tbody tr {
    border-color: var(--color-neutral-600);
  }
  :root:not([data-theme="light"]) #county-compare-table tbody tr td.county-cell-stat::before,
  :root:not([data-theme="light"]) #county-compare-table tbody tr td.county-cell-demo::before {
    color: var(--color-neutral-500);
  }
  :root:not([data-theme="light"]) #county-compare-table tbody tr td.county-cell-name {
    border-bottom-color: var(--color-neutral-600);
  }
  :root:not([data-theme="light"]) #county-compare-table tbody tr td:nth-child(7) {
    border-top-color: var(--color-neutral-600);
  }
}

/* Hide sort chips on desktop */
@media (min-width: 701px) {
  .mobile-sort-chips { display: none; }
}

/* ================================================================
   ONBOARDING OVERLAY
   ================================================================ */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.onboarding-card {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}
.onboarding-heading {
  font-size: var(--text-h2);
  font-weight: var(--font-extrabold);
  margin-bottom: var(--space-2);
}
.onboarding-subtext {
  font-size: var(--text-body);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-8);
}
.onboarding-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.onboarding-state-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  background: var(--surface-card);
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  min-height: 120px;
}
.onboarding-state-btn:hover {
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.onboarding-state-btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.onboarding-state-name {
  font-size: var(--text-h3);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}
.onboarding-state-count {
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
}
.onboarding-state-highlight {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
}
.onboarding-best-data-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-primary-700);
  color: #fff;
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  line-height: 1.4;
}
.onboarding-state-all {
  grid-column: 1 / -1;
  min-height: 80px;
  border-style: dashed;
}
@media (max-width: 480px) {
  .onboarding-states {
    grid-template-columns: 1fr;
  }
  .onboarding-state-btn {
    min-height: 80px;
    padding: var(--space-4) var(--space-3);
  }
  .onboarding-state-all {
    min-height: 64px;
  }
}

/* ── Inline skeleton shimmer (for stat bar numbers) ── */
.skeleton-inline {
  display: inline-block;
  height: 1em;
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

/* ── Inline upgrade modal ── */
.upgrade-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1500;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.upgrade-modal {
  background: var(--surface-card);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-xl, 12px);
  padding: var(--space-6) var(--space-6);
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.upgrade-modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-neutral-500);
  line-height: 1;
  padding: var(--space-1);
}
.upgrade-modal-close:hover { color: var(--color-neutral-800); }
.upgrade-modal-title {
  font-size: 1.15rem;
  font-weight: var(--font-extrabold);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-2) 0;
}
.upgrade-modal-desc {
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.5;
}
.upgrade-modal-price {
  margin-bottom: var(--space-3);
}
.upgrade-modal-amount {
  font-size: 2rem;
  font-weight: var(--font-extrabold);
  color: var(--color-neutral-900);
  font-family: var(--font-mono);
}
.upgrade-modal-period {
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
}
.upgrade-modal-billing {
  display: block;
  font-size: var(--text-micro);
  color: var(--color-neutral-500);
  margin-top: 2px;
}
.upgrade-modal-features {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-caption);
  color: var(--color-neutral-700);
  line-height: 1.8;
}
.upgrade-modal-features li::before {
  content: '\2713 ';
  color: var(--color-success-600);
  font-weight: bold;
  margin-right: 4px;
}
.btn-upgrade-modal-subscribe {
  display: block;
  width: 100%;
  padding: var(--space-3);
  background: var(--color-primary-700);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
  margin-bottom: var(--space-2);
}
.btn-upgrade-modal-subscribe:hover { background: var(--color-primary-800); }
.btn-upgrade-modal-subscribe:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-upgrade-modal-cancel {
  display: block;
  width: 100%;
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius);
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s;
}
.btn-upgrade-modal-cancel:hover {
  border-color: var(--color-neutral-500);
  color: var(--color-neutral-800);
}
/* Dark mode: upgrade modal */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .upgrade-modal { background: #242442; border-color: #454570; }
  :root:not([data-theme="light"]) .upgrade-modal-close { color: #7a7aa0; }
  :root:not([data-theme="light"]) .upgrade-modal-close:hover { color: #d4d4e0; }
  :root:not([data-theme="light"]) .upgrade-modal-title { color: #eaeaf0; }
  :root:not([data-theme="light"]) .upgrade-modal-amount { color: #eaeaf0; }
  :root:not([data-theme="light"]) .btn-upgrade-modal-cancel { border-color: #454570; color: #9a9ab8; }
  :root:not([data-theme="light"]) .btn-upgrade-modal-cancel:hover { border-color: #7a7aa0; color: #d4d4e0; }
}
html[data-theme="dark"] .upgrade-modal { background: #242442; border-color: #454570; }
html[data-theme="dark"] .upgrade-modal-close { color: #7a7aa0; }
html[data-theme="dark"] .upgrade-modal-close:hover { color: #d4d4e0; }
html[data-theme="dark"] .upgrade-modal-title { color: #eaeaf0; }
html[data-theme="dark"] .upgrade-modal-amount { color: #eaeaf0; }
html[data-theme="dark"] .btn-upgrade-modal-cancel { border-color: #454570; color: #9a9ab8; }
html[data-theme="dark"] .btn-upgrade-modal-cancel:hover { border-color: #7a7aa0; color: #d4d4e0; }

/* ================================================================
   REDUCED MOTION (Finding #19)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}