/* === Tally — warm-cream + deep-navy luxury palette === */
:root {
  /* Warm ivory surfaces — softer than stark white, no yellow cast. */
  --bg: #faf7f1;
  --bg-surface: #f3eee3;
  --bg-elevated: #fdfbf5;
  --bg-hover: #ede7d9;
  /* Cream-toned separators so divider lines don't read as cold gray. */
  --separator: #e0d9c8;
  --separator-soft: #ece6d8;
  /* Warm dark text — rich black with a touch of warmth so it reads against cream. */
  --text: #1c1917;
  --text-secondary: #44403c;
  --text-tertiary: #78716c;
  /* Deep navy as the primary accent — classic premium real estate (Compass / Sotheby's
     territory), distinct from the Apple-blue tech palette we had before. */
  --accent: #1e3a5f;
  --accent-hover: #15294a;
  --accent-bg: rgba(30, 58, 95, 0.08);
  /* Restrained positive/negative — slightly muted from the bright versions so they
     pair with the cream surfaces. */
  --positive: #0c6e3f;
  --positive-bg: rgba(12, 110, 63, 0.08);
  --negative: #9b2c2c;
  --negative-bg: rgba(155, 44, 44, 0.08);

  /* Body & UI: keep Inter for tabular-nums and dense data legibility. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Display: Cormorant Garamond for brand wordmark and section headlines —
     one tasteful serif accent, applied surgically to avoid the old-world heaviness
     of an all-serif treatment. */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* Softer, warmer shadows — less "tech card", more "printed paper edge". */
  --shadow-xs: 0 1px 2px rgba(40, 30, 12, 0.04);
  --shadow-sm: 0 2px 10px rgba(40, 30, 12, 0.06);
  --shadow-md: 0 10px 28px rgba(40, 30, 12, 0.08);
  --shadow-lg: 0 22px 52px rgba(40, 30, 12, 0.10);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --topbar-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Global UI scale — keeps the layout dense and reads like browser zoom at
   ~85%, so the deployed site doesn't feel oversized at default 100% zoom.
   `zoom` is the cleanest single-property approach; it's well-supported in
   Chrome / Safari / Edge (and now standardized). Skipped under 768px so the
   mobile experience stays at native scale where text legibility matters. */
@media (min-width: 769px) {
  html { zoom: 0.85; }
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

body.detail-body { overflow: auto; background: var(--bg); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* === Topbar === */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h);
  display: grid; grid-template-columns: minmax(460px, auto) 1fr auto;
  align-items: center; gap: 28px;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-link { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  display: block;
  flex-shrink: 0;
  border-radius: 12px;
}
.brand-text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.brand-name {
  font-family: var(--font-serif); font-weight: 600;
  letter-spacing: -0.005em; font-size: 34px;
  line-height: 1;
  color: var(--text);
}
.brand-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
}

/* === Search === */
.search {
  position: relative; max-width: 580px; width: 100%; margin: 0 auto;
}
.search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none;
}
.search input {
  width: 100%; height: 46px;
  background: var(--bg-surface); border: 1px solid transparent;
  border-radius: 12px; padding: 0 16px 0 42px;
  font-size: 15px; color: var(--text);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.search input::placeholder { color: var(--text-tertiary); }
.search input:focus {
  background: var(--bg);
  border-color: var(--separator);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg); border: 1px solid var(--separator-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 360px; overflow-y: auto; z-index: 30;
  padding: 6px;
}
.search-result {
  padding: 10px 12px; cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 12px;
}
.search-result:hover, .search-result.active { background: var(--bg-surface); }
.search-result-icon { color: var(--text-tertiary); flex-shrink: 0; }
.search-result-main { font-size: 14px; color: var(--text); }
.search-result-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: 980px; font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: all 0.15s var(--ease);
  cursor: pointer; white-space: nowrap;
}
.btn-ghost {
  background: var(--bg-surface); border: 1px solid transparent;
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg-hover); }
.btn-primary {
  background: var(--accent); color: white;
  border: 1px solid var(--accent); font-weight: 500;
  height: 36px; padding: 0 18px;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-text {
  background: transparent; color: var(--accent);
  height: auto; padding: 4px 6px; border-radius: 6px;
  font-size: 13px; font-weight: 400;
}
.btn-text:hover { background: var(--accent-bg); }
.btn-icon {
  background: transparent; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; color: var(--text-secondary);
  display: grid; place-items: center;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* === Layout === */
.layout {
  position: fixed; inset: var(--topbar-h) 0 0 0;
  display: grid; grid-template-columns: 1fr 440px;
}

@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr 380px; }
}

/* === Map === */
.map-section { position: relative; background: var(--bg-surface); }
.map { position: absolute; inset: 0; }

.map-overlay-tl {
  position: absolute; top: 16px; left: 16px; z-index: 5;
}
.results-pill {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--separator-soft);
  border-radius: 980px;
  padding: 7px 14px; font-size: 13px; color: var(--text-secondary);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.results-pill span { color: var(--text); font-weight: 600; }

/* === Map markers === */
.au-marker {
  background: var(--bg);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 980px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  cursor: pointer; white-space: nowrap;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.au-marker:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  z-index: 5;
}
.au-marker.positive { color: var(--positive); }
.au-marker.negative { color: var(--negative); }
.au-marker.active {
  background: var(--accent); color: white !important;
  border-color: var(--accent);
  transform: scale(1.08);
  z-index: 6;
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.32);
}

.au-marker.compact {
  width: 12px; height: 12px; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0;
  background: var(--text); border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.au-marker.compact.positive { background: var(--positive); }
.au-marker.compact.negative { background: var(--negative); }
.au-marker.compact:hover {
  transform: scale(1.8);
  background: var(--accent);
}
.au-marker.compact.active {
  transform: scale(1.8);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.24);
}

/* === Listings panel === */
.panel {
  background: var(--bg);
  border-left: 1px solid var(--separator);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--separator-soft);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
}
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters-row-3 { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.range-field {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-tertiary);
  background: var(--bg-surface); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 0 12px; height: 36px;
  font-weight: 500;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.range-field:focus-within {
  background: var(--bg);
  border-color: var(--separator);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.range-field input {
  flex: 1; min-width: 0; background: transparent; border: 0;
  font-size: 14px; padding: 0; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.select {
  height: 36px; background: var(--bg-surface); border: 1px solid transparent;
  color: var(--text); padding: 0 32px 0 12px; border-radius: var(--radius-sm);
  font-size: 13px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.75'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  text-overflow: ellipsis;
  font-weight: 500;
  transition: background 0.15s var(--ease);
}
.select:hover { background-color: var(--bg-hover); }
.select-wide { width: 100%; }

.listings {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--separator) transparent;
}
.listings::-webkit-scrollbar { width: 8px; }
.listings::-webkit-scrollbar-thumb { background: var(--separator); border-radius: 4px; }

.listing-card {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--separator-soft);
  transition: background 0.15s var(--ease);
  text-decoration: none; color: inherit;
}
.listing-card:hover, .listing-card.active { background: var(--bg-surface); }
.listing-photo-wrap {
  width: 132px; height: 100px; border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-surface);
}
.listing-photo {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.listing-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.listing-eyebrow {
  font-size: 11px;
  letter-spacing: -0.005em; color: var(--text-tertiary);
  font-weight: 500;
}
.listing-price {
  font-size: 22px; font-weight: 600;
  color: var(--text); line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.listing-address {
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.listing-specs {
  font-size: 12px; color: var(--text-tertiary); display: flex; gap: 8px;
  margin-top: 2px;
}
.listing-specs span::before { content: '·'; margin-right: 8px; color: var(--separator); }
.listing-specs span:first-child::before { display: none; }
.listing-specs .ferry-near { color: var(--accent); font-weight: 600; }
.listing-metrics {
  display: flex; gap: 16px; margin-top: 8px;
}
.listing-metric { display: flex; flex-direction: column; }
.listing-metric .label {
  font-size: 10px; color: var(--text-tertiary);
  letter-spacing: 0;
  font-weight: 500;
}
.listing-metric .value {
  font-size: 13px; font-weight: 600; margin-top: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.value.positive { color: var(--positive); }
.value.negative { color: var(--negative); }
.value.neutral { color: var(--text); }

.empty {
  text-align: center; padding: 60px 20px; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}

/* === Underwriting panel === */
.backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.assumptions-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: 420px; max-width: 92vw;
  background: var(--bg);
  border-left: 1px solid var(--separator);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  padding: 24px 28px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
}
.assumptions-panel.open { transform: translateX(0); }
.ap-head { display: flex; justify-content: space-between; align-items: center; }
.ap-head h2 {
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}
.ap-sub { color: var(--text-secondary); font-size: 14px; margin: 6px 0 24px; }
.ap-section { margin-bottom: 24px; }
.ap-section h3 {
  font-size: 12px; color: var(--text-tertiary);
  font-weight: 600; letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 2px;
}
.field > span:first-child {
  font-size: 13px; color: var(--text); font-weight: 500;
}
.input-with-suffix {
  display: flex; align-items: center;
  background: var(--bg-surface); border: 1px solid transparent;
  border-radius: var(--radius-sm); height: 36px; padding: 0 10px 0 12px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input-with-suffix:focus-within {
  background: var(--bg);
  border-color: var(--separator);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.input-with-suffix input {
  flex: 1; min-width: 0; background: transparent; border: 0;
  font-size: 14px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.input-with-suffix .suffix {
  color: var(--text-tertiary); font-size: 13px; padding-left: 8px;
}
.field input[type="range"] {
  width: 100%; height: 4px; -webkit-appearance: none;
  background: var(--separator-soft);
  border-radius: 2px;
  margin-top: 2px;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: white; cursor: pointer;
  border: 1px solid var(--separator);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.ap-actions {
  margin-top: 16px; display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--separator-soft);
}

/* === Listing detail page === */
.detail-body { background: var(--bg); }
.detail {
  max-width: 1080px; margin: calc(var(--topbar-h) + 32px) auto 96px;
  padding: 0 32px;
}
.detail-loading { color: var(--text-tertiary); padding: 60px 0; text-align: center; }

.detail-hero {
  width: 100%;
  margin-bottom: 24px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface);
}
.detail-hero-single { aspect-ratio: 5 / 3; }
/* When Google Maps key is set, the hero splits into two equally-weighted
   photos side by side: top-down satellite + real eye-level Street View. */
.detail-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 2 / 1;
}
.detail-hero .main-photo {
  width: 100%; height: 100%;
  background-color: var(--bg-surface);
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}
.detail-hero .photo-placeholder {
  background-size: 240px auto !important;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 768px) {
  .detail-hero-single { aspect-ratio: 4 / 3; }
  .detail-hero-split { grid-template-columns: 1fr; aspect-ratio: auto; }
  .detail-hero-split .main-photo { aspect-ratio: 4 / 3; }
}

.detail-thumbs {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 48px;
}
.detail-thumbs .photo {
  width: 100%; aspect-ratio: 16 / 10;
  background-color: var(--bg-surface);
  background-size: cover; background-position: center;
  border-radius: var(--radius-md);
}

.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; }

.detail-eyebrow {
  font-size: 13px; color: var(--text-secondary);
  font-weight: 500; margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.detail-header h1 {
  font-family: var(--font-serif);
  font-size: 56px; font-weight: 500;
  line-height: 1.02; letter-spacing: -0.018em;
  color: var(--text);
}
.detail-header .sub {
  color: var(--text-secondary); margin-top: 12px; font-size: 15px;
}
.detail-specs {
  display: flex; gap: 36px; margin-top: 28px; padding: 20px 0;
  border-top: 1px solid var(--separator-soft);
  border-bottom: 1px solid var(--separator-soft);
  flex-wrap: wrap;
}
.detail-spec .label {
  font-size: 12px; color: var(--text-tertiary);
  font-weight: 500;
}
.detail-spec .value {
  font-size: 20px; color: var(--text);
  margin-top: 4px; font-weight: 500;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.detail-section { margin-top: 44px; }
.detail-section h2 {
  font-family: var(--font-serif);
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
  color: var(--text);
}
.detail-description {
  color: var(--text-secondary); font-size: 17px; line-height: 1.55;
  max-width: 62ch;
  letter-spacing: -0.005em;
}

/* Financial summary card */
.fin-card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl); padding: 28px;
  position: sticky; top: calc(var(--topbar-h) + 24px);
}
.fin-card .price-block { position: relative; }
.fin-card .price {
  font-family: var(--font-serif);
  font-size: 48px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fin-card .price-amount { display: inline-block; }
.fin-card .price-edit-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.fin-card .ed-cell-price {
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
  transition: background 0.15s ease;
}
.fin-card .ed-cell-price:hover {
  background: rgba(0, 113, 227, 0.08);
}
.fin-card .ed-cell-price:hover .price-edit-icon {
  color: var(--accent);
}
.fin-card .ed-cell-price:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fin-card .price-cta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.fin-card .price-cta-reset {
  color: var(--accent);
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
}
.fin-card .price-cta-reset:hover { text-decoration: underline; }

/* === Rent block — mirrors the price treatment one tier smaller. Rent is
   the other primary driver of cash flow, so it earns prominent placement. */
.fin-card .rent-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--separator-soft);
}
.fin-card .rent-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.fin-card .rent-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.fin-card .ed-cell-rent {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
  transition: background 0.15s ease;
}
.fin-card .ed-cell-rent:hover {
  background: rgba(0, 113, 227, 0.08);
}
.fin-card .ed-cell-rent:hover .rent-edit-icon {
  color: var(--accent);
}
.fin-card .ed-cell-rent:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fin-card .rent-suffix {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.fin-card .rent-edit-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
  align-self: center;
  margin-left: 4px;
  transition: color 0.15s ease;
}
.fin-card .rent-range {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.fin-card .rent-range .rent-band {
  font-weight: 500;
  color: var(--text);
}
.fin-card .rent-cta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.fin-card .price-sub {
  color: var(--text-tertiary); font-size: 13px;
  margin-top: 10px;
}
.fin-card-cta {
  margin-top: 20px;
  background: var(--bg);
  border-radius: var(--radius-md); padding: 18px 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.fin-card-cta .label {
  font-size: 12px; color: var(--text-tertiary);
  font-weight: 500;
}
.fin-card-cta .cf {
  font-size: 34px; font-weight: 600;
  margin-top: 4px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.fin-card-cta .cf-sub {
  font-size: 12px; color: var(--text-tertiary);
  text-align: right; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.metric-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 20px;
}
.metric {
  background: var(--bg);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.metric .label {
  font-size: 11px; color: var(--text-tertiary);
  font-weight: 500;
}
.metric .value {
  font-size: 18px; margin-top: 3px; font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.metric .sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* === Full-width section (used for P&L tables that span outside the grid) === */
.detail-section-wide { margin-top: 56px; }

/* P&L tables */
.pnl-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
/* The 10-year P&L has 11 cols — force a min-width so values never collide. */
.pnl-table-wide {
  min-width: 1180px;
}
.pnl-table-wide th:not(:first-child),
.pnl-table-wide td:not(:first-child) {
  width: 92px;
}
.pnl-table th, .pnl-table td {
  padding: 12px 14px;
  /* Center-align numeric cells per design preference; first column (row label)
     stays left-aligned below. */
  text-align: center;
  border-bottom: 1px solid var(--separator-soft);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.pnl-table th {
  font-size: 11px;
  color: var(--text-tertiary); font-weight: 600;
  text-align: center; background: var(--bg);
  position: sticky; top: 0;
  border-bottom: 1px solid var(--separator);
}
.pnl-table th:first-child, .pnl-table td:first-child {
  text-align: left;
  color: var(--text-secondary);
  width: 180px;
  font-weight: 500;
}
.pnl-table tr.subtotal td {
  border-top: 1px solid var(--separator);
  font-weight: 600; color: var(--text);
  background: var(--bg-elevated);
}
.pnl-table tr.total td {
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  font-weight: 600; color: var(--text);
  background: var(--bg-surface);
}
.pnl-table tr.income td { color: var(--text); }
.pnl-table tr.expense td { color: var(--text-secondary); }

/* Section header row inside the 10-year P&L — labels the operating block vs.
   the equity/appreciation block so the user can scan the table top to bottom. */
.pnl-table tr.section-header td {
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 14px 14px 10px;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--separator);
}
.pnl-table tr.section-header:first-child td {
  border-top: 0;
}
/* Indent expense sub-lines so the operating-income structure reads like a
   real P&L. Subtotals/totals stay flush-left. */
.pnl-table tr.indent td.rowlabel {
  padding-left: 28px;
  color: var(--text-secondary);
  font-weight: 400;
}
/* Color is reserved for the headline rows at the bottom of each section
   (Cash flow, Total return). Subtotals and per-line items stay black with
   bold as the only weighting cue. */
.pnl-table tr.total td.num.pos { color: var(--positive); }
.pnl-table tr.total td.num.neg { color: var(--negative); }
.pnl-wrap {
  overflow-x: auto;
  border: 1px solid var(--separator-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.kvs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px;
  margin-top: 20px;
}
.kv {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator-soft);
}
.kv .k { color: var(--text-secondary); font-size: 13px; }
.kv .v {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* === Demo data badge === */
.demo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface);
  border-radius: 980px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.demo-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-tertiary);
}

/* === Sensitivity heatmap === */
.sensitivity-wrap {
  border: 1px solid var(--separator-soft);
  border-radius: var(--radius-md);
  overflow-x: auto;
  background: var(--bg);
}
.sensitivity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  table-layout: fixed;
  min-width: 720px;
}
.sensitivity-table th, .sensitivity-table td {
  padding: 14px 12px;
  text-align: center;
}
.sensitivity-table thead th {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--separator);
}
.sensitivity-table thead th:first-child {
  background: var(--bg);
  color: var(--text-tertiary);
  font-weight: 500;
  text-align: left;
  padding-left: 18px;
}
.sensitivity-table tbody th {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border-right: 1px solid var(--separator-soft);
  font-weight: 600;
  text-align: right;
  padding-right: 14px;
  width: 110px;
}
.sensitivity-table tbody td {
  border-right: 1px solid var(--separator-soft);
  border-bottom: 1px solid var(--separator-soft);
  text-align: center;
  font-weight: 600;
  font-size: 13.5px;
}
.sensitivity-table tbody tr:last-child td,
.sensitivity-table tbody tr:last-child th { border-bottom: 0; }
.sensitivity-table tbody td:last-child,
.sensitivity-table tbody tr th:last-child,
.sensitivity-table thead th:last-child { border-right: 0; }
.sens-baseline-row th,
.sens-baseline-row td {
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}
.sens-baseline-col {
  border-left: 1px solid var(--separator) !important;
  border-right: 1px solid var(--separator) !important;
}

/* === Lender preset chips (inside Underwriting panel) === */
.preset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--separator-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.preset:hover { background: var(--bg-hover); }
.preset.active {
  background: var(--accent-bg);
  border-color: rgba(0, 113, 227, 0.4);
}
.preset-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.preset.active .preset-name { color: var(--accent); }
.preset-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* === Inline "Adjust underwriting" CTA (inside fin-card) === */
.fin-card-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 4px;
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.08s var(--ease);
}
.fin-card-action:hover { background: var(--accent-hover); }
.fin-card-action:active { transform: scale(0.99); }
.fin-card-action svg { opacity: 0.95; flex-shrink: 0; }
.fin-card-action svg:last-child { margin-left: 2px; }

/* === Est. pill (marks defaulted/estimated values) === */
.est-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  color: var(--text-tertiary);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: help;
  vertical-align: middle;
  line-height: 1.4;
}
.est-pill:hover, .est-pill:focus-visible { color: var(--text-secondary); border-color: var(--separator); }

/* === Rent confidence band (used inside the rent block on the detail page) === */
.rent-band { color: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }

/* === Sensitivity heatmap cells === */
.sensitivity-table .sens-cell {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sensitivity-table .sens-cell.pos { color: var(--positive); }
.sensitivity-table .sens-cell.neg { color: var(--negative); }
.sensitivity-table .sens-cell.sens-base {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

/* === Floating action button for Underwriting (listing detail page) === */
.fab-underwriting {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  background: var(--accent);
  color: white;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.15s var(--ease);
}
.fab-underwriting:hover {
  transform: translateY(-2px);
  background: var(--accent-hover);
  box-shadow: 0 14px 32px rgba(0, 113, 227, 0.42), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.fab-underwriting:active { transform: translateY(0); }
.fab-underwriting svg { flex-shrink: 0; }
@media (max-width: 768px) {
  .fab-underwriting {
    bottom: 16px; right: 16px;
    height: 48px; padding: 0 18px 0 14px;
    font-size: 14px;
  }
}

/* === View switcher (map | list segmented control in panel-header) === */
.view-switcher {
  display: inline-flex;
  background: var(--bg-surface);
  border-radius: 980px;
  padding: 3px;
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 2px;
}
.view-btn {
  background: transparent;
  border: 0;
  padding: 5px 13px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.view-btn:hover:not(.active) { color: var(--text); }
.view-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.view-btn svg { opacity: 0.8; }

/* === List view layout (panel only, no map) === */
body.view-list .map-section { display: none; }
body.view-list .layout { grid-template-columns: 1fr; }
body.view-list .panel {
  border-left: 0;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  border-right: 1px solid var(--separator);
  border-left: 1px solid var(--separator);
}
body.view-list .listing-card {
  padding: 18px 28px;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}
body.view-list .listing-photo-wrap {
  width: 200px; height: 140px;
}
body.view-list .listing-price {
  font-size: 26px;
}
body.view-list .listing-address {
  font-size: 14px;
}
body.view-list .listing-eyebrow {
  font-size: 12px;
}
body.view-list .listing-metrics {
  gap: 22px;
  margin-top: 10px;
}
body.view-list .listing-metric .value {
  font-size: 15px;
}

/* === Detail modal (in-page property view) === */
.detail-modal-backdrop {
  position: fixed; inset: 0;
  z-index: 54;
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
.detail-modal {
  position: fixed; inset: 0;
  z-index: 55;
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
.detail-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.detail-modal-card {
  background: var(--bg);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 1200px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform 0.28s var(--ease);
}
.detail-modal.open .detail-modal-card { transform: translateY(0); }
.detail-modal-head {
  position: sticky; top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator-soft);
  padding: 12px 20px;
  display: flex; justify-content: flex-end;
  flex-shrink: 0;
}
.detail-modal-close {
  background: var(--bg-surface);
  width: 36px; height: 36px;
}
.detail-modal-close:hover { background: var(--bg-hover); }
.detail-modal-body {
  flex: 1;
  overflow: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.detail-modal-body .detail {
  margin: 24px auto 48px;
  max-width: 1080px;
  padding: 0 32px;
}
body.modal-open { overflow: hidden; }
@media (max-width: 768px) {
  .detail-modal { padding: 0; }
  .detail-modal-card { border-radius: 0; }
  .detail-modal-body .detail { padding: 0 18px; margin: 16px auto 32px; }
}

/* Make Calculator / Saved tray sit ABOVE the detail modal so users can
   tweak underwriting while the modal stays visible at the edges. */
#assumptions-panel, #saved-panel { z-index: 100; }
#assumptions-backdrop, #saved-backdrop { z-index: 99; }

/* === Flood-zone badge (FEMA NFHL data) === */
.flood-zone-high { color: var(--negative); }
.flood-zone-low { color: var(--positive); }
.flood-zone-unknown { color: var(--text-tertiary); }

/* === Detail-page actions row (Save + Share side by side) === */
.detail-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.detail-actions-row .detail-save-btn,
.detail-actions-row .detail-share-btn { margin-top: 0; }

.detail-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 0;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.detail-share-btn:hover { background: var(--bg-hover); color: var(--text); }
.detail-share-btn svg { flex-shrink: 0; }

/* === Toast notification === */
.aureum-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: white;
  padding: 12px 22px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 200;
  box-shadow: var(--shadow-lg);
}
.aureum-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Inline hint for "Property mgmt — off, click to add" === */
.mgmt-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  font-style: italic;
  letter-spacing: 0;
}

/* === Getting around (Walk / Transit / Bike scores) === */
.getting-around-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ga-score {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.ga-circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  line-height: 1;
  text-align: center;
}
.ga-of {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
  letter-spacing: 0;
  line-height: 1;
}
.ga-high { background: var(--positive); }
.ga-mid { background: var(--accent); }
.ga-low { background: #ff9500; }
.ga-vlow { background: var(--negative); }

.ga-body { min-width: 0; }
.ga-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ga-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.45;
}
.ga-note {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 6px;
  line-height: 1.5;
}

/* === Nearby schools === */
.schools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.school-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.school-rating {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  line-height: 1;
  text-align: center;
}
.school-rating-of {
  display: block;
  font-size: 8px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 1px;
  letter-spacing: 0;
  line-height: 1;
}
.rating-good { background: var(--positive); }
.rating-ok { background: var(--accent); }
.rating-poor { background: #ff9500; }
.rating-low { background: var(--negative); }

.school-body { flex: 1; min-width: 0; }
.school-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.school-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.schools-note {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 12px;
  line-height: 1.5;
}

/* === Transit & commute === */
.transit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.transit-item {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.transit-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}
.transit-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.transit-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 8px;
  line-height: 1.45;
}
.transit-distance {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.transit-op {
  font-weight: 400;
  color: var(--text-tertiary);
}

.transit-subhead {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 600;
  margin: 4px 0 12px;
}
.commute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.commute-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.commute-time {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.commute-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.commute-body { min-width: 0; }
.commute-dest {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.commute-via {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* === Climate & natural hazards === */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.risk-item {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.risk-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 6px;
}
.risk-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.risk-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.risk-low { color: var(--positive); }
.risk-medium { color: var(--warning); }
.risk-high { color: var(--negative); }

/* === Section header row (h2 + optional action button) === */
.section-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.section-head-row h2 { margin-bottom: 6px; }

/* === Reset overrides button (shown when ≥1 cell has been edited) === */
.reset-overrides-btn {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s var(--ease);
}
.reset-overrides-btn:hover { background: var(--accent-bg); }

/* === Editable cells in the year-one monthly breakdown ===
   Per designer audit: click-to-edit cells with subtle hairline on row hover,
   blue numerals as the override badge (no separate pill), per-row × reset
   appearing on row hover. */
.pnl-table .ed-cell {
  cursor: text;
  position: relative;
  user-select: none;
  transition: box-shadow 0.12s var(--ease);
}
.pnl-table tr:hover .ed-cell {
  box-shadow: inset 0 0 0 1px var(--separator);
  border-radius: 4px;
}
.pnl-table .ed-cell:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pnl-table .ed-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.pnl-table .ed-cell.ed-invalid {
  box-shadow: inset 0 0 0 2px var(--negative);
}

/* Override badge: blue numerals + 2px blue inset on the label cell. */
.pnl-table tr.has-override td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
  position: relative;
}
.pnl-table tr.has-override td:nth-child(2),
.pnl-table tr.has-override td:nth-child(4) {
  color: var(--accent);
  font-weight: 600;
}

/* Per-row × reset button — appears in the label cell on row hover. */
.pnl-table .row-reset {
  display: none;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 4px;
  transition: color 0.12s var(--ease), background 0.12s var(--ease);
}
.pnl-table tr.has-override:hover .row-reset { display: inline-block; }
.pnl-table .row-reset:hover {
  color: var(--negative);
  background: rgba(201, 27, 27, 0.08);
}

/* Inline-edit input. type="text" + inputmode so iOS Safari behaves. */
.ed-input {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
  outline: none;
}

/* === Embedded Google Maps preview on the detail page === */
.map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--separator-soft);
  box-shadow: var(--shadow-xs);
}
.map-embed iframe {
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  .map-embed iframe { height: 280px; }
}
.map-zoom-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.map-zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--separator-soft);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.05s ease;
}
.map-zoom-btn:hover {
  background: #fff;
}
.map-zoom-btn:active {
  transform: scale(0.96);
}
.map-zoom-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === External link (e.g. "View on Google Maps ↗") === */
.external-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s var(--ease);
}
.external-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* === Saved-deals: topbar button + count === */
.saved-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.saved-toggle .saved-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  min-width: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.saved-toggle.has-items .saved-count {
  background: var(--accent);
  color: white;
  padding: 1px 7px;
  border-radius: 980px;
  font-size: 10px;
}

/* === Card heart button (overlay on photo) === */
.listing-photo-wrap { position: relative; }
.card-save-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-tertiary);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
  z-index: 2;
}
.card-save-btn:hover {
  background: #fff;
  color: var(--negative);
  transform: scale(1.08);
}
.card-save-btn.saved {
  background: #fff;
  color: var(--negative);
}

/* === Detail-page save button (next to H1 in detail-header) === */
.detail-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 0;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.detail-save-btn:hover { background: var(--bg-hover); }
.detail-save-btn.saved {
  background: rgba(201, 27, 27, 0.08);
  color: var(--negative);
}
.detail-save-btn svg { flex-shrink: 0; }

/* === Saved tray (reuses .assumptions-panel base; adds saved-specific styles) === */
.saved-panel { width: 460px; }
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.saved-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}
.saved-checkbox {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  cursor: pointer;
}
.saved-checkbox input {
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.saved-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.saved-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.saved-item-head strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.saved-item-head .btn-icon { width: 24px; height: 24px; }
.saved-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.saved-item-metrics {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.saved-item-snapshot {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.saved-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* === Compare modal === */
.compare-backdrop { z-index: 48; }
.compare-modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 40px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.compare-modal.open { opacity: 1; pointer-events: auto; }
.compare-card {
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 100%;
  max-height: 100%;
  width: 1080px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.compare-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--separator-soft);
}
.compare-head-left { min-width: 0; }
.compare-head h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text);
}
.compare-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  max-width: 64ch;
}
.compare-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.compare-body {
  padding: 16px 24px 24px;
  overflow: auto;
  flex: 1;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.compare-table th,
.compare-table td {
  padding: 12px 14px;
  /* Center-align numeric cells; row-label column stays left below. */
  text-align: center;
  border-bottom: 1px solid var(--separator-soft);
  white-space: nowrap;
}
.compare-table thead th {
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}
.compare-table thead th a {
  color: var(--accent);
  text-decoration: none;
}
.compare-table thead th a:hover { text-decoration: underline; }
.compare-table .compare-label {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 170px;
}
.compare-table .compare-best {
  background: var(--positive-bg);
  color: var(--positive);
  font-weight: 600;
}
/* Editable per-listing cell — gets a subtle dashed accent border so the
   user can see at a glance which cells they can click to override. */
.compare-table .compare-editable {
  cursor: pointer;
  position: relative;
  border: 1px dashed rgba(30, 58, 95, 0.32);
  border-radius: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.compare-table .compare-editable:hover,
.compare-table .compare-editable:focus-visible {
  background: var(--accent-bg);
  border-color: var(--accent);
  outline: none;
}
.compare-table .compare-editable .compare-edit-icon {
  margin-left: 6px;
  color: var(--accent);
  opacity: 0.55;
  vertical-align: -1px;
  transition: opacity 0.15s ease;
}
.compare-table .compare-editable:hover .compare-edit-icon { opacity: 1; }
.compare-table .compare-editable.is-overridden {
  background: var(--accent-bg);
  border-style: solid;
  border-color: var(--accent);
  font-weight: 600;
  color: var(--accent);
}
.compare-edit-input {
  width: 100%;
  text-align: center;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  outline: none;
}
.compare-table .compare-divider td {
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid var(--separator);
}
/* === Demo pill + disclaimer modal === */
.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--separator);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.demo-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}
.disclaimer-backdrop { z-index: 48; }
.disclaimer-modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 40px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.disclaimer-modal.open { opacity: 1; pointer-events: auto; }
.disclaimer-card {
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 560px; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.disclaimer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid var(--separator-soft);
}
.disclaimer-head h2 {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
}
.disclaimer-body {
  padding: 20px 26px 26px;
  overflow-y: auto;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.disclaimer-body p { margin-bottom: 12px; }
.disclaimer-body p:last-child { margin-bottom: 0; }
.disclaimer-body strong { color: var(--text); font-weight: 600; }

@media (max-width: 920px) {
  .demo-pill span { display: none; }
  .demo-pill { padding: 6px; }
}

/* === Add-listing modal === */
.add-listing-backdrop { z-index: 48; }
.add-listing-modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 40px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.add-listing-modal.open { opacity: 1; pointer-events: auto; }
.add-listing-card {
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 720px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.add-listing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--separator-soft);
}
.add-listing-head h2 {
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.05;
}
.add-listing-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 56ch;
}
.add-listing-form {
  padding: 22px 26px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.al-section h3 {
  font-size: 12px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.al-grid {
  display: grid;
  gap: 12px 14px;
}
.al-grid-address {
  grid-template-columns: 2fr 1fr 1.5fr 0.7fr 0.9fr;
}
.al-grid-property {
  grid-template-columns: repeat(3, 1fr);
}
.al-full { grid-column: 1 / -1; }
.al-section .field input,
.al-section .field select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.al-section .field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.al-section .field-hint[data-tone="ok"]   { color: var(--positive); }
.al-section .field-hint[data-tone="warn"] { color: #b85c00; }
.al-section .field-hint[data-tone="err"]  { color: var(--negative); }
.input-with-prefix {
  display: flex; align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  padding-left: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-with-prefix:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.input-with-prefix .prefix {
  color: var(--text-tertiary);
  font-size: 14px;
  margin-right: 6px;
}
.input-with-prefix input {
  flex: 1; min-width: 0;
  height: 36px;
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px 0 0 !important;
  outline: none;
  box-shadow: none !important;
}
.input-with-prefix .suffix-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-right: 10px;
}
.al-status {
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 18px;
}
.al-status[data-tone="ok"]  { color: var(--positive); }
.al-status[data-tone="err"] { color: var(--negative); }
.al-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--separator-soft);
  margin-top: 4px;
  padding-top: 16px;
}

/* Floating Action Button — sticky bottom-right "Add property" pill that
   appears on mobile where the topbar's text label gets hidden and the
   "Don't see what you're looking for?" CTA is buried at the bottom of
   the listings scroll. Always visible above the fold on small screens. */
.add-listing-fab {
  display: none;  /* hidden on desktop — topbar button is enough there */
}
@media (max-width: 768px) {
  .add-listing-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 16px;
    bottom: 20px;
    padding: 12px 18px 12px 14px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(15, 30, 58, 0.32),
                0 2px 6px rgba(15, 30, 58, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .add-listing-fab:active {
    transform: translateY(1px);
    box-shadow: 0 4px 14px rgba(15, 30, 58, 0.32);
  }
  .add-listing-fab:hover { background: var(--accent-hover); }
}
.add-listing-fab-label { white-space: nowrap; }

/* "Don't see what you're looking for?" CTA card at the bottom of the
   listings panel — invites the user into the Add-property flow. */
.add-listing-cta {
  margin: 16px 14px;
  padding: 18px 20px;
  background: var(--bg-elevated);
  border: 1px dashed var(--separator);
  border-radius: var(--radius-md);
  text-align: center;
}
.add-listing-cta-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.add-listing-cta-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.add-listing-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.add-listing-cta-btn:hover { background: var(--accent-hover); }

@media (max-width: 768px) {
  .saved-panel { width: 100vw; max-width: 100vw; }
  .compare-modal { padding: 0; }
  .compare-card { border-radius: 0; height: 100%; width: 100%; }
  .add-listing-modal { padding: 0; }
  .add-listing-card { border-radius: 0; height: 100%; width: 100%; max-height: none; }
  .al-grid-address,
  .al-grid-property { grid-template-columns: 1fr 1fr; }
  .al-full { grid-column: 1 / -1; }
}

/* === Inline help-hint icon === */
.help-hint {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: 9px; font-weight: 700;
  cursor: help;
  vertical-align: middle;
  line-height: 1;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.help-hint:hover, .help-hint:focus-visible {
  background: var(--bg-hover);
  color: var(--text-secondary);
  outline: none;
}

/* === Compliance footer (listing detail page) === */
.legal-footer {
  max-width: 1080px;
  margin: 80px auto 32px;
  padding: 28px 32px 0;
  border-top: 1px solid var(--separator-soft);
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.65;
  letter-spacing: -0.005em;
}
.legal-footer p { margin-bottom: 10px; }
.legal-footer p:last-child { margin-bottom: 0; }
.legal-footer strong { color: var(--text-secondary); font-weight: 600; }
@media (max-width: 768px) {
  .legal-footer { padding: 24px 20px 0; margin-top: 48px; }
}

/* === Misc === */
.divider { height: 1px; background: var(--separator-soft); margin: 24px 0; }
[hidden] { display: none !important; }

/* === Responsive === */
@media (max-width: 1080px) {
  .brand-tagline { display: none; }
}
@media (max-width: 920px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 14px; padding: 0 16px; }
  .topbar-actions .btn-label { display: none; }
  .topbar-actions .btn-ghost svg:last-child { display: none; }
}
@media (max-width: 768px) {
  body { overflow: auto; }
  .layout {
    position: static;
    margin-top: var(--topbar-h);
    grid-template-columns: 1fr;
    grid-template-rows: 50vh auto;
    min-height: calc(100vh - var(--topbar-h));
  }
  .map-section { min-height: 50vh; }
  .panel { border-left: 0; border-top: 1px solid var(--separator); }
  .panel-header { padding: 14px 16px; }
  .listing-card { padding: 14px 16px; grid-template-columns: 100px 1fr; }
  .listing-photo-wrap { width: 100px; height: 80px; }
  .search { display: none; }
  .detail { padding: 0 20px; margin-top: calc(var(--topbar-h) + 16px); }
  .detail-hero { height: 300px; border-radius: var(--radius-lg); }
  .detail-thumbs { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-header h1 { font-size: 34px; }
  .detail-specs { gap: 22px; }
  .fin-card { position: static; padding: 22px; }
  .fin-card .price { font-size: 32px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .assumptions-panel { width: 100vw; max-width: 100vw; padding: 22px; }
  .ap-grid { grid-template-columns: 1fr; }
  .kvs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .filters, .filters-row-2 { grid-template-columns: 1fr 1fr; }
  .listing-metrics { gap: 12px; flex-wrap: wrap; }
}