/* ═══════════════════════════════════════════════════════════════════════════
   Home Search — Design System
   Ported from Python gallery (report_gallery.py)
   Fraunces + DM Sans, glass morphism, dark mode, editorial layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --bg: #faf9f6;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --ink: #1a1a17;
  --ink-secondary: #5c5c56;
  --ink-tertiary: #8e8e86;
  --ink-quaternary: #b4b4ac;
  --border: rgba(20, 20, 18, 0.08);
  --border-strong: rgba(20, 20, 18, 0.16);
  --hairline: rgba(20, 20, 18, 0.06);
  --accent-ink: #1a1a17;
  --danger: #a32d2d;
  --success: #3b6d11;

  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --card-min-width: 220px;
  --header-h: 60px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0d;
    --bg-elevated: #171714;
    --surface: #1c1c18;
    --ink: #ecebe6;
    --ink-secondary: #9c9c95;
    --ink-tertiary: #6a6a63;
    --ink-quaternary: #44443f;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);
    --hairline: rgba(255, 255, 255, 0.06);
    --accent-ink: #ecebe6;
  }
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

::selection { background: var(--ink); color: var(--bg); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 0.5px; }

img { display: block; max-width: 100%; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  max-width: 1720px;
  margin: 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
}

.brand-rule {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}

.brand-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  color: var(--ink-tertiary);
  transition: all 150ms var(--ease);
  text-decoration: none !important;
}
.brand-map-btn:hover { color: var(--ink); background: var(--border); text-decoration: none !important; }

.brand-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius);
  color: var(--ink-tertiary);
  cursor: pointer;
  padding: 0;
  transition: all 150ms var(--ease);
  text-decoration: none !important;
}
.brand-icon-btn:hover { color: var(--ink); background: var(--border); text-decoration: none !important; }

.brand-title-link {
  text-decoration: none !important;
  color: inherit;
}
.brand-title-link:hover { text-decoration: none !important; }

.brand-dropdown-wrap { position: relative; }

.brand-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 4px;
  z-index: 10000;
}

.brand-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink-secondary);
  border-radius: var(--radius);
  text-decoration: none !important;
  transition: all 120ms var(--ease);
}

.brand-dropdown-item:hover {
  background: var(--border);
  color: var(--ink);
  text-decoration: none !important;
}

.brand-dropdown-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-count {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Header search */
.header-search-form {
  flex: 1;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.header-search {
  width: 100%;
  height: 36px;
  font-family: var(--sans);
  font-size: 12px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 150ms var(--ease);
}

.header-search:focus { border-color: var(--ink-tertiary); }
.header-search::placeholder { color: var(--ink-quaternary); }

/* Header controls — filter icon | sort group | mic icon */
.header-controls {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.hc-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 150ms var(--ease);
  text-decoration: none !important;
}
.hc-btn:hover { border-color: var(--ink-tertiary); color: var(--ink); text-decoration: none !important; }
.hc-btn-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hc-btn:disabled { opacity: 0.4; cursor: default; }

.hc-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hc-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 10px;
}

.hc-sort-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.hc-sort-select {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  height: 36px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%238e8e86'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.hc-dir-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
  color: var(--ink-secondary);
  text-decoration: none !important;
  transition: all 150ms var(--ease);
}
.hc-dir-btn:hover { border-color: var(--ink-tertiary); color: var(--ink); text-decoration: none !important; }

/* Nav links — kept for non-gallery pages */
.nav-links {
  display: none;
}

/* ─── Status Bar ─────────────────────────────────────────────────────────── */
.status-bar {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 28px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms var(--ease), padding 300ms var(--ease);
}

.status-bar.visible {
  max-height: 44px;
  padding: 6px 28px;
}

.status-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-secondary);
}

.status-bar-inner .undo-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Voice intent feedback in the status bar. Each kind is its own state class
   that also unfolds the bar (mirrors .visible). */
.status-bar.status-listening,
.status-bar.status-thinking,
.status-bar.status-ok,
.status-bar.status-error,
.status-bar.status-info {
  max-height: 44px;
  padding: 8px 28px;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.status-bar.status-listening { color: var(--ink); }
.status-bar.status-thinking  { color: var(--ink-secondary); }
.status-bar.status-ok        { color: #2c7a3e; }
.status-bar.status-error     { color: #b54040; }

/* Pulse the mic icon while recording. */
.hc-btn.voice-listening {
  background: #b54040;
  border-color: #b54040;
  color: #fff;
  animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 64, 64, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(181, 64, 64, 0); }
}

/* ─── Loading Overlay (Turbo navigation) ─────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 249, 246, 0.7);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}

@media (prefers-color-scheme: dark) {
  .loading-overlay { background: rgba(15, 15, 13, 0.7); }
}

.loading-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.loading-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-secondary);
}

/* ─── Flash Messages ─────────────────────────────────────────────────────── */
.flash {
  max-width: 1720px;
  margin: 12px auto;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 12px;
}

.flash-notice { background: rgba(59, 109, 17, 0.1); color: var(--success); }
.flash-alert { background: rgba(163, 45, 45, 0.1); color: var(--danger); }

/* ─── Main Content ───────────────────────────────────────────────────────── */
.main-content {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 28px 40px;
}

/* ─── Gallery Grid ───────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  gap: 24px;
  padding-top: 20px;
}

/* Pagination turbo-frames (page-1 → page-N) must not become grid items — let
   their children (cards + nested lazy frame) flow as direct grid items instead. */
.gallery-grid turbo-frame { display: contents; }
/* The lazy "next page" frame needs a real box so IntersectionObserver can
   detect it entering the viewport; once Turbo sets `complete`, revert to
   display:contents so loaded cards flow as grid items. */
.gallery-grid turbo-frame[loading="lazy"]:not([complete]) {
  display: block;
  grid-column: 1 / -1;
}
.gallery-grid .loading-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 0;
  color: var(--ink-tertiary);
  font-size: 13px;
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
}

.gallery-count {
  font-size: 11.5px;
  color: var(--ink-tertiary);
}

/* ─── Filter Panel (advanced) ────────────────────────────────────────────── */
.filter-panel {
  padding: 24px 0 0;
  border-bottom: 1px solid var(--hairline);
}

.fp-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr;
  gap: 32px;
}

@media (max-width: 900px) {
  .fp-grid { grid-template-columns: 1fr; gap: 20px; }
}

.fp-col {}

.fp-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 8px;
}

.fp-range {
  display: flex;
  align-items: center;
  gap: 0;
}

.fp-input {
  flex: 1;
  font-family: var(--sans);
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 150ms var(--ease);
}

.fp-input::placeholder { color: var(--ink-quaternary); }
.fp-input:focus { border-color: var(--ink-tertiary); }

.fp-dash {
  padding: 0 8px;
  color: var(--ink-quaternary);
  font-size: 12px;
}

.fp-chips {
  display: flex;
  gap: 0;
}

.fp-chip {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 150ms var(--ease);
  text-decoration: none !important;
  text-transform: uppercase;
}

.fp-chip:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.fp-chip:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.fp-chip:not(:first-child) { margin-left: -1px; }
.fp-chip:hover { border-color: var(--ink-tertiary); color: var(--ink); z-index: 1; text-decoration: none !important; }
.fp-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); z-index: 2; }

.fp-chip-tier { text-transform: none; }

.fp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  margin-top: 20px;
  border-top: 1px solid var(--hairline);
}

.fp-footer-standalone {
  margin-top: 0;
  border-top: none;
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0;
}

.fp-count {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.fp-count strong {
  color: var(--ink);
  font-weight: 600;
}

.fp-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-toggles .fp-chip {
  border-radius: var(--radius);
  font-size: 10px;
  padding: 4px 10px;
}

.fp-toggles .fp-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 1;
}
.fp-toggles .fp-chip-icon svg { display: block; }

/* ─── Chips (reusable) ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 150ms var(--ease);
  text-decoration: none !important;
}

.chip:hover { border-color: var(--ink-tertiary); color: var(--ink); text-decoration: none !important; }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ─── Property Card ──────────────────────────────────────────────────────── */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
  content-visibility: auto;
  contain-intrinsic-size: 260px 370px;
}

.card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}

.card.deleted { opacity: 0.4; }

/* Photo strip */
.photo-strip {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e6e4dd;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .photo-strip { background: #1e1e1b; }
}

.photo-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.photo-track::-webkit-scrollbar { display: none; }

.photo-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

.photo-strip:hover .photo-track img {
  transform: scale(1.018);
  transition: transform 260ms var(--ease);
}

.photo-no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-quaternary);
  font-size: 12px;
}

/* Photo nav arrows */
.photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 18, 16, 0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease), background 150ms var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.photo-strip:hover .photo-arrow,
.detail-hero:hover .photo-arrow { opacity: 1; pointer-events: auto; }
.photo-arrow:hover { background: rgba(18, 18, 16, 0.78); }
.photo-arrow-left { left: 8px; }
.photo-arrow-right { right: 8px; }

.photo-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(18, 18, 16, 0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  z-index: 2;
}

/* Price chip + hover popover */
.price-chip-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
}

.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 11px;
  border-radius: var(--radius);
  background: rgba(18, 18, 16, 0.78);
  backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  cursor: default;
}

.price-delta {
  font-weight: 400;
  font-size: 11.5px;
  opacity: 0.82;
  letter-spacing: 0;
}

.delta-down { color: #ffd6d6; opacity: 0.95; }
.delta-up { color: #d6ffe0; opacity: 0.95; }

.vastu-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.vastu-chip.vastu-tone-good { background: #dff0d8; color: #2f6b1f; }
.vastu-chip.vastu-tone-mid  { background: #fcf4dd; color: #7a5a00; }
.vastu-chip.vastu-tone-bad  { background: #f7d7d4; color: #8a2a1f; }

.price-popover {
  display: none;
  position: absolute;
  top: 36px;
  left: 8px;
  right: 8px;
  max-height: calc(100% - 44px);
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgba(18, 18, 16, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-size: 11px;
  z-index: 5;
  scrollbar-width: none;
}

.price-popover::-webkit-scrollbar { display: none; }

.price-chip-wrap:hover ~ .price-popover,
.price-popover:hover { display: block; }

.ph-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  line-height: 1.3;
}

.ph-date {
  color: rgba(255,255,255,0.45);
  min-width: 52px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.ph-ago {
  color: rgba(255,255,255,0.45);
  min-width: 78px;
  font-size: 10.5px;
}

.ph-label {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
}

.ph-price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  font-size: 11px;
}

/* price-popover hover handled via sibling selector below */

.popover-title {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}

/* Shared popover row (used by distance popover) */
.popover-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  line-height: 1.3;
}

/* Distance popover — shown on hover of icon row */
.dist-popover {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 60px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(18, 18, 16, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  z-index: 5;
}

.popover-icon {
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popover-icon .di-svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255,255,255,0.7);
  opacity: 1;
}

.popover-name {
  flex: 1;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover-drive {
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Vote buttons (star / X) */
.vote-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.vote-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(18, 18, 16, 0.38);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms var(--ease);
}

.vote-btn:hover { transform: scale(1.10); background: rgba(18, 18, 16, 0.7); }
.vote-btn.active { background: var(--ink); }
.vote-star:hover { background: rgba(59, 109, 17, 0.7); }
.vote-star.active { color: #fff; background: rgba(59, 109, 17, 0.85); }
.card.liked { box-shadow: 0 0 0 1.5px var(--ink); }

.vote-svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vote-trash:hover { background: rgba(163, 45, 45, 0.7); }

/* Status badges for off-market properties */
.status-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.status-sold { background: rgba(163, 45, 45, 0.85); color: #fff; }
.status-contingent { background: rgba(202, 138, 4, 0.85); color: #fff; }
.status-pending { background: rgba(37, 99, 235, 0.85); color: #fff; }
.status-withdrawn { background: rgba(100, 100, 100, 0.85); color: #fff; }
.vote-restore:hover { background: rgba(59, 109, 17, 0.7); }

/* Larson pick badge — inline next to address */
.larson-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
}

/* Bottom overlay on photo: address + photo count */
.card-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 14px 13px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.58) 78%, rgba(0,0,0,0.78) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 2;
}

.card-address-overlay {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: #fff;
}

.card-address-overlay a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.card-address-overlay a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; }

.photo-count {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Card body — compact stats below photo */
.card-body {
  padding: 8px 12px 10px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
}

.card-stats-line {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.card-meta-line {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-subdivision {
  font-style: italic;
  margin-left: 8px;
  color: var(--ink-quaternary);
}

/* HOA badge — inline next to address, mirrors Larson-pick circle */
.hoa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(202, 138, 4, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
}

/* Risk badge — red "!" circle, same geometry as L / H badges */
.risk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(163, 45, 45, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
}

/* Distance icon row — compact icons with drive minutes */
.card-dist-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: auto -4px 0;
  padding: 2px 4px;
  cursor: default;
  border-radius: var(--radius);
  transition: background 150ms var(--ease);
}

.card-dist-icons:hover {
  background: var(--border);
}

.dist-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--ink-tertiary);
  padding: 1px 3px;
  transition: color 150ms var(--ease);
}

.dist-icon-pill:hover { color: var(--ink); }

.di-icon {
  display: inline-flex;
  align-items: center;
}

.di-svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.di-val { font-variant-numeric: tabular-nums; font-size: 11px; }

/* Hovering anywhere on the icon strip shows the distance popover on the photo */
.card:has(.card-dist-icons:hover) .dist-popover { display: block; }

/* Tier colors (used elsewhere) */
.tier-t1 { background: rgba(59, 109, 17, 0.12); color: #3b6d11; }
.tier-t2 { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.tier-t3 { background: rgba(202, 138, 4, 0.12); color: #ca8a04; }
.tier-borderline { background: rgba(234, 88, 12, 0.12); color: #ea580c; }
.tier-unknown { background: var(--border); color: var(--ink-tertiary); }

/* ─── Property Detail ────────────────────────────────────────────────────── */
.detail-page {
  max-width: 920px;
  margin: 0 auto;
}

/* Sticky sub-header with nav */
.detail-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 8;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  margin: 0 -28px;
  padding: 0 28px;
}

.detail-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dn-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  color: var(--ink-secondary);
  background: var(--surface);
  text-decoration: none !important;
  transition: all 150ms var(--ease);
}
.dn-btn:hover { border-color: var(--ink-tertiary); color: var(--ink); text-decoration: none !important; }
.dn-btn.disabled { opacity: 0.3; pointer-events: none; }

/* button_to wraps dn-btn in a form — strip default form margin/padding so it sits inline */
.detail-nav-right form { margin: 0; padding: 0; display: inline-flex; }
.dn-refresh-btn { cursor: pointer; }
.dn-refresh-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
  margin: 0 4px;
  min-width: 0;
}
.dn-refresh-status:empty { display: none; }
.dn-refresh-status.is-refreshing { color: var(--ink-tertiary); }
.dn-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink-tertiary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: dn-spin 700ms linear infinite;
}
@keyframes dn-spin { to { transform: rotate(360deg); } }

.dn-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dn-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dn-price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  margin-right: 4px;
}

.dn-address {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}

.dn-location {
  font-size: 11px;
  color: var(--ink-tertiary);
}

.dn-action-btn {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 150ms var(--ease);
}
.dn-action-btn:hover { border-color: var(--ink-tertiary); color: var(--ink); }
.dn-action-btn.dn-active { background: rgba(59, 109, 17, 0.1); border-color: #3b6d11; color: #3b6d11; }
.dn-action-btn.dn-trash:hover { border-color: var(--danger); color: var(--danger); }

turbo-frame#detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dn-source-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-tertiary);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 150ms var(--ease);
}
.dn-source-btn:hover { border-color: var(--ink-tertiary); color: var(--ink); text-decoration: none !important; }
.dn-source-btn .ds-gmaps-icon { width: 10px; height: 14px; }

/* Risk summary chip — jump-link to the Risk Checks section */
.dn-risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px 3px 5px;
  border-radius: 999px;
  background: rgba(163, 45, 45, 0.1);
  border: 1px solid rgba(163, 45, 45, 0.4);
  color: rgb(163, 45, 45);
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dn-risk-chip:hover { background: rgba(163, 45, 45, 0.18); border-color: rgba(163, 45, 45, 0.7); }
.dn-risk-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(163, 45, 45, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Give anchored sections room so the sticky detail-nav doesn't cover their heading */
#risk-checks { scroll-margin-top: 72px; }
html { scroll-behavior: smooth; }

.dn-hint {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Two-column grid */
/* Single-column reading order at every width so desktop + mobile match.
   .detail-grid, .detail-photos-col, .detail-sidebar are flattened with
   `display: contents` and the grandchildren sit directly inside .detail-page,
   which is a flex column. Per-section `order:` in the responsive block below
   defines the sequence. */
.detail-page {
  display: flex;
  flex-direction: column;
}
.detail-grid,
.detail-photos-col,
.detail-sidebar,
.detail-page [data-controller="carousel"] { display: contents; }

/* Default (desktop) order. Every flex-item direct-child of .detail-page
   needs an explicit order or it defaults to 0 and falls above the hero. */
.detail-nav                 { order: 0; }
.detail-risk-banner         { order: 0; }
.detail-hero                { order: 1; }
.ds-head                    { order: 10; display: flex; align-items: baseline;
                              justify-content: space-between; gap: 16px;
                              margin: 20px 0 8px; }
.ds-stats                   { order: 12; }
.ds-stats-secondary         { order: 13; }
.ds-agent                   { order: 14; }
.ds-description             { order: 15; }
.ds-notes                   { order: 18; }
.vastu-section              { order: 20; }
#risk-checks                { order: 30; }
.tcad-section               { order: 40; }
.ds-minimap-section         { order: 48; }
.ds-poi-groups              { order: 50; }
.timeline-section           { order: 60; }
.detail-section-collapsible { order: 70; }
.hotkey-legend              { order: 99; }

/* .ds-head collapses address + price onto one row; reset inner margins. */
.ds-head .ds-address   { margin-bottom: 0; }
.ds-head .ds-price-row { margin: 0; flex-shrink: 0; }

/* Hero photo */
.detail-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #e6e4dd;
}

.detail-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.detail-hero-track::-webkit-scrollbar { display: none; }

.detail-hero-img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 10;
  cursor: zoom-in;
  object-fit: cover;
  scroll-snap-align: start;
}

/* Thumbnail strip */
.detail-thumbs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.detail-thumbs::-webkit-scrollbar { display: none; }

.detail-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 150ms var(--ease);
}
.detail-thumb:hover { opacity: 1; }

/* Sidebar */
.detail-sidebar {
  padding-top: 4px;
}

.ds-address {
  margin-bottom: 10px;
}

.ds-address-street {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
}

.ds-address-location {
  font-size: 14px;
  color: var(--ink-secondary);
  margin-top: 2px;
}

.ds-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.ds-price {
  font-size: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Stat strip: value on top, uppercase label below. Wraps to multiple rows
   using flex; each cell reads as a discrete data point. */
.ds-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 14px 0 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ds-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds-stat-val {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-top: 3px;
}

.ds-subdivision {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-tertiary);
  margin-bottom: 16px;
}

.ds-sources {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.ds-source-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-secondary);
  text-decoration: none !important;
  transition: all 150ms var(--ease);
}
.ds-source-btn:hover { border-color: var(--ink-tertiary); color: var(--ink); text-decoration: none !important; }

.ds-gmaps-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ds-gmaps-icon {
  width: 14px;
  height: 20px;
}

.ds-agent {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-bottom: 10px;
}

.src-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: #6b7280;
  margin-left: 8px;
  vertical-align: middle;
}
.src-icon:hover { opacity: 0.85; }
.src-icon-redfin { background: #c82021; }
.src-icon-zillow { background: #006aff; }
.src-icon-har { background: #ea580c; }
.src-icon-apartments { background: #0ea5e9; }
.src-icon-craigslist { background: #6d28d9; }

/* Description in sidebar */
.ds-description {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-secondary);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  position: relative;
}

.ds-description.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.ds-description.is-clamped { cursor: pointer; }

.ds-description.is-clamped:not(.expanded)::after {
  content: "Read more";
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 6px 0 40px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: linear-gradient(to right, transparent, var(--bg) 40%);
  pointer-events: none;
}

.ds-description.expanded::after {
  content: "Read less";
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-tertiary);
  cursor: pointer;
}

.ds-description p { margin-bottom: 8px; }
.ds-description p:last-child { margin-bottom: 0; }

/* Inline notes */
.ds-notes {
  margin-bottom: 14px;
}

.ds-notes-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  min-height: 40px;
  outline: none;
  overflow-x: hidden;
  word-wrap: break-word;
  transition: border-color 150ms var(--ease);
}

.ds-notes-input::placeholder { color: var(--ink-quaternary); }
.ds-notes-input:focus { border-color: var(--ink-tertiary); }

.ds-notes-status {
  display: block;
  font-size: 10px;
  color: var(--ink-quaternary);
  text-align: right;
  height: 16px;
  line-height: 16px;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.ds-notes-status.visible { opacity: 1; }
.ds-notes-status.saved { color: var(--success); }

/* Mini map in sidebar */
.ds-minimap-link { display: block; }
.ds-minimap-link:hover .ds-minimap { border-color: var(--accent, #4285F4); }
.ds-minimap {
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 120ms ease;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* POI groups in sidebar */
.ds-poi-groups {
  padding-top: 4px;
}
.ds-poi-heading { margin-top: 16px; }

.ds-poi-group {
  margin-bottom: 8px;
}

.ds-poi-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.ds-poi-group-icon { display: flex; align-items: center; }
.ds-poi-group-icon .di-svg { width: 14px; height: 14px; }

.ds-poi-group-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
}

.ds-dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1px 0;
  font-size: 14px;
  line-height: 1.35;
  color: inherit;
  text-decoration: none;
}
.ds-dist-row:hover .ds-dist-name { text-decoration: underline; }

.ds-dist-icon { display: flex; align-items: center; }
.ds-dist-icon .di-svg { width: 15px; height: 15px; }
.ds-dist-name { flex: 1; color: var(--ink-secondary); }
.ds-dist-val { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Description */
.detail-section {
  padding-top: 8px;
}

/* Vastu Shastra score card */
.vastu-section { padding-bottom: 16px; }
.vastu-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.vastu-head .section-title { margin: 0; }
.vastu-score {
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
}
.vastu-score .vastu-den { opacity: 0.6; font-weight: 600; font-size: 11px; }
.vastu-tone-good { background: #dff0d8; color: #2f6b1f; }
.vastu-tone-mid  { background: #fcf4dd; color: #7a5a00; }
.vastu-tone-bad  { background: #f7d7d4; color: #8a2a1f; }
.vastu-scored-at { color: var(--muted); font-size: 11px; margin-left: auto; }

.vastu-factors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.vastu-factor {
  background: var(--panel, #fafafa);
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 8px; padding: 8px 10px;
}
.vf-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.vf-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.vf-score { font-size: 12px; font-weight: 700; }
.vf-body  { font-size: 12px; line-height: 1.45; }
.vf-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.vf-unknown { color: var(--muted); font-style: italic; }
.vastu-footnote { margin-top: 8px; font-size: 11px; color: var(--muted); font-style: italic; }

.vastu-explain { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.vastu-explain p { margin: 6px 0; }
.vastu-explain .vx-intro { color: var(--ink-secondary, #555); }
.vastu-explain .vx-h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 14px 0 4px; color: var(--ink, #222);
}
.vastu-explain .vx-weight { color: var(--muted, #888); font-weight: 500; text-transform: none; letter-spacing: 0; }
.vastu-explain .vx-table {
  width: 100%; border-collapse: collapse; margin: 4px 0 6px; font-size: 11.5px;
}
.vastu-explain .vx-table th, .vastu-explain .vx-table td {
  padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--hairline, #eee);
}
.vastu-explain .vx-table th { color: var(--muted, #888); font-weight: 600; font-size: 11px; }
.vastu-explain .vx-list { margin: 4px 0 6px 18px; }
.vastu-explain .vx-list li { margin-bottom: 3px; }
.vastu-explain .vx-caveat {
  margin-top: 10px; padding: 8px 10px;
  background: var(--surface-sunken, #f6f6f6);
  border-radius: 6px; font-size: 11.5px; color: var(--ink-secondary, #555);
}

/* Inline "show more" disclosure — native <details>/<summary>. No JS. */
.more-toggle { margin-top: 6px; }
.more-toggle > summary {
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600;
  color: var(--ink-secondary, #555);
  padding: 4px 0;
  user-select: none;
}
.more-toggle > summary::-webkit-details-marker { display: none; }
.more-toggle > summary::before {
  content: "▸"; display: inline-block;
  margin-right: 4px; transition: transform 120ms ease;
}
.more-toggle[open] > summary::before { transform: rotate(90deg); }
.more-toggle > summary:hover { color: var(--ink, #222); }

/* Risk checks — three-state list: clear (computed OK), risk (flagged), pending (not yet computed) */
.risk-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.risk-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.risk-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 11px;
}

.risk-check-label { font-weight: 500; }

.risk-check-detail {
  color: var(--ink-quaternary);
  font-size: 11px;
  margin-left: auto;
  text-align: right;
}

.risk-check-clear {
  background: rgba(59, 109, 17, 0.06);
  color: var(--ink-quaternary);
}
.risk-check-clear .risk-check-icon { color: rgb(59, 109, 17); }

.risk-check-risk {
  background: rgba(163, 45, 45, 0.10);
  color: var(--danger);
  font-weight: 600;
}
.risk-check-risk .risk-check-icon { color: var(--danger); }
.risk-check-risk .risk-check-detail { color: var(--danger); opacity: 0.8; }

.risk-check-pending {
  background: transparent;
  color: var(--ink-quaternary);
  opacity: 0.65;
}
.risk-check-pending .risk-check-icon { color: var(--ink-quaternary); }

.detail-description {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-secondary);
  max-width: 720px;
}

/* Bottom grid: timeline + notes */
.detail-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .detail-bottom-grid { grid-template-columns: 1fr; }
}

.detail-timeline .ph-row {
  display: grid;
  grid-template-columns: 60px 64px 90px auto;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}
.detail-timeline .ph-date,
.detail-timeline .ph-label,
.detail-timeline .ph-price {
  color: var(--ink);
}
.detail-timeline .ph-ago {
  color: var(--ink-tertiary);
}
.detail-timeline .ph-date,
.detail-timeline .ph-ago,
.detail-timeline .ph-label,
.detail-timeline .ph-price {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-timeline .ph-price { text-align: left; }

.detail-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 4px;
  font-size: 13px;
}
.detail-kv-row {
  display: grid;
  grid-template-columns: 42% auto;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.detail-kv-key {
  color: var(--ink-tertiary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-kv-val {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-box {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 500;
}

.section-title {
  font-family: var(--serif);
  font-size: 16px;
  font-variation-settings: 'opsz' 24;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

/* Event timeline */
.event-timeline { list-style: none; }
.event-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
}

.event-date { color: var(--ink-tertiary); min-width: 80px; }
.event-type {
  font-weight: 500;
  text-transform: capitalize;
  min-width: 100px;
}
.event-price { font-variant-numeric: tabular-nums; }

/* Source links */
.source-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.source-link {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-transform: capitalize;
}

/* Distance table */
.distance-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

.distance-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-tertiary);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.distance-table td {
  padding: 8px;
  border-bottom: 1px solid var(--hairline);
}

/* User state form */
.state-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.state-form label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-tertiary);
  display: block;
  margin-bottom: 4px;
}

.state-form input,
.state-form textarea {
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}

.state-form textarea { resize: vertical; min-height: 60px; }

.state-form .full-width { grid-column: 1 / -1; }

/* ─── Map ────────────────────────────────────────────────────────────────── */
.map-container {
  position: relative;
  height: calc(100vh - var(--header-h) - 40px);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.map-loading {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 249, 246, 0.7);
  backdrop-filter: blur(2px);
  transition: opacity 400ms var(--ease);
}

@media (prefers-color-scheme: dark) {
  .map-loading { background: rgba(15, 15, 13, 0.7); }
}

.map-loading.hidden { opacity: 0; pointer-events: none; }

.map-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-secondary);
}

.map-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Zip labels on map */
.zip-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-quaternary);
  text-align: center;
  background: none !important;
  border: none !important;
}

.zip-label-tracked {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-secondary);
}
.zip-hoods {
  font-size: 8px;
  font-weight: 400;
  color: var(--ink-tertiary);
  white-space: nowrap;
}
.zip-hood-label {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 400;
  color: var(--ink-tertiary);
  text-align: center;
  white-space: nowrap;
  background: none !important;
  border: none !important;
}

.map-legend {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.map-legend-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-legend-toggle:hover { background: var(--border); color: var(--ink); }
.map-legend-toggle svg { width: 12px; height: 12px; }
.map-legend-toggle-expand { display: none; }
.map-legend:not(.collapsed) .map-legend-toggle { opacity: 0.5; }

.map-legend.collapsed {
  padding: 0;
  width: 28px;
  height: 28px;
}
.map-legend.collapsed .map-legend-body { display: none; }
.map-legend.collapsed .map-legend-toggle {
  position: static;
  width: 28px;
  height: 28px;
  opacity: 1;
}
.map-legend.collapsed .map-legend-toggle-collapse { display: none; }
.map-legend.collapsed .map-legend-toggle-expand  { display: block; }

.map-legend-title {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 6px;
}

.map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
  padding: 2px 0;
}

.map-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.5;
}

/* ─── Map POI markers ─────────────────────────────────────────────────────── */
.poi-marker { background: none !important; border: none !important; }
.poi-marker-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  font-size: 12px; line-height: 1;
  opacity: 0.85; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.map-toggle-btn {
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-secondary); cursor: pointer;
}
.map-toggle-btn:hover { background: var(--surface-hover); }
.map-toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.map-poi-section { min-width: 140px; }
.map-poi-check { cursor: pointer; padding: 2px 0; }
.map-poi-check input { margin: 0; }
.map-poi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; font-size: 10px;
  color: #fff; opacity: 0.9;
}
.map-poi-label { flex: 1; }
.map-poi-count { color: var(--ink-tertiary); font-size: 10px; }
.map-poi-all { border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 4px; margin-bottom: 2px; }

/* ─── Map subnav ─────────────────────────────────────────────────────────── */
.map-subnav {
  display: flex; gap: 4px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.map-subnav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.map-subnav-item:hover { background: var(--surface-hover); color: var(--ink-primary); }
.map-subnav-item.active { background: var(--accent); color: #fff; }
.map-subnav-icon { width: 14px; height: 14px; }

/* ─── Tour doc page ──────────────────────────────────────────────────────── */
.tour-wrap { padding: 0 24px 40px; max-width: 760px; margin: 0 auto; }
.tour-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
}
.tour-toolbar-label { font-size: 11px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.1em; }
.tour-btn {
  font-size: 12px; padding: 5px 10px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-secondary); border-radius: var(--radius-sm);
  cursor: pointer;
}
.tour-btn:hover { background: var(--surface-hover); }
.tour-doc { font-family: Georgia, serif; color: var(--ink-primary); line-height: 1.5; }
.tour-doc a { color: #1a73e8; text-decoration: underline; }
.tour-source-wrap { margin-top: 28px; }
.tour-source-wrap > summary { cursor: pointer; font-size: 12px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 0; }
.tour-source {
  width: 100%; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 10px; background: var(--surface-sunken);
  resize: vertical;
}

/* ─── Forms & Buttons ────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all 150ms var(--ease);
}

.btn:hover { border-color: var(--ink-tertiary); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { opacity: 0.85; }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { font-size: 10.5px; padding: 4px 10px; }

input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 150ms var(--ease);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ink-tertiary);
}

/* ─── Settings ───────────────────────────────────────────────────────────── */
.settings-section {
  max-width: 600px;
  margin-bottom: 32px;
}

.settings-section h2 {
  font-family: var(--serif);
  font-size: 16px;
  margin-bottom: 12px;
}

.zip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.zip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--border);
}

.zip-badge .tier {
  font-size: 9px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
}

/* ─── Import ─────────────────────────────────────────────────────────────── */
.import-section {
  max-width: 600px;
}

.import-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}

.import-tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  color: var(--ink-secondary);
}

.import-tab.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.upload-area {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  color: var(--ink-tertiary);
  margin-bottom: 16px;
}

/* ─── POI Manager ────────────────────────────────────────────────────────── */
.poi-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.poi-list {
  list-style: none;
}

.poi-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}

.poi-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poi-icon { font-size: 16px; }
.poi-name { font-size: 13px; font-weight: 500; }
.poi-address { font-size: 11px; color: var(--ink-tertiary); }
.poi-source { font-size: 10px; color: var(--ink-quaternary); text-transform: uppercase; letter-spacing: 0.1em; }

.field-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-tertiary);
  display: block;
  margin-bottom: 4px;
}

.poi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.poi-edit-form {
  width: 100%;
}

/* ─── Hotkey Legend ───────────────────────────────────────────────────────── */
/* Collapsed by default to a small ⌨ glyph — hovering expands the full list. */
.hotkey-legend {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 50;
  background: rgba(18, 18, 16, 0.65);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.35;
  transition: opacity 120ms ease;
}
.hotkey-legend:hover {
  opacity: 1;
  padding: 8px 12px;
}

.hk-trigger {
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  user-select: none;
  cursor: default;
}
.hotkey-legend:hover .hk-trigger { display: none; }

.hk-rows {
  display: none;
  flex-direction: column;
  gap: 4px;
}
.hotkey-legend:hover .hk-rows { display: flex; }

.hk-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
}

.hk-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
}

.hk-row span {
  margin-left: 4px;
}

/* ─── Infinite Scroll ────────────────────────────────────────────────────── */
.scroll-loader {
  text-align: center;
  padding: 24px 0;
  font-size: 11px;
  color: var(--ink-quaternary);
  letter-spacing: 0.06em;
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--hairline) 37%, var(--border) 63%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .header-inner { padding: 0 16px; }
  .main-content { padding: 0 16px 40px; }
  .brand-rule { display: none; }
  .nav-links { gap: 2px; }
  .nav-link { padding: 6px 8px; font-size: 10px; }
  .filter-bar { gap: 8px; }
  .filter-search { max-width: none; }
  .gallery-grid { gap: 16px; }
}

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Rentals ─────────────────────────────────────────────────────────────── */
.brand-nav-tab {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: all 120ms var(--ease);
  text-decoration: none !important;
}
.brand-nav-tab:hover { color: var(--ink); background: var(--border); text-decoration: none !important; }
.brand-nav-tab.active { color: var(--ink); font-weight: 600; }
.brand-nav-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.brand-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--ink-tertiary);
  text-decoration: none;
  transition: color 120ms var(--ease), background 120ms var(--ease);
}
.brand-map-btn:hover { color: var(--ink); background: var(--border); }
.brand-map-btn.active { color: var(--ink); }
.brand-map-icon { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-nav-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-tertiary);
  letter-spacing: 0;
  margin-left: 3px;
  vertical-align: middle;
}
.brand-nav-tab.active .brand-nav-count { color: var(--ink-secondary); }

.price-suffix { font-size: 0.75em; opacity: 0.7; margin-left: 0.1em; }

.chips-rental { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.chip-pet       { background: #fef3c7; color: #92400e; }
.chip-furnished { background: #ddd6fe; color: #5b21b6; }
.chip-lease     { background: #e0f2fe; color: #075985; }
.chip-fee       { background: #fee2e2; color: #991b1b; }
.chip-utilities { background: #d1fae5; color: #065f46; }

@media (prefers-color-scheme: dark) {
  .chip-pet       { background: #451a03; color: #fde68a; }
  .chip-furnished { background: #2e1065; color: #ddd6fe; }
  .chip-lease     { background: #0c4a6e; color: #bae6fd; }
  .chip-fee       { background: #450a0a; color: #fca5a5; }
  .chip-utilities { background: #064e3b; color: #a7f3d0; }
}

.cost-breakdown { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 0.5rem; }
.cost-breakdown td { padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.cost-breakdown td.amt { text-align: right; font-variant-numeric: tabular-nums; padding-left: 1rem; }
.cost-breakdown tr.total td { border-top: 2px solid var(--border-strong); border-bottom: none; padding-top: 8px; }

.lease-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; padding-top: 8px; }
.lease-dl dt { color: var(--ink-tertiary); }
.lease-dl dd { color: var(--ink); }

/* ─── Search miss / fetch pending ───────────────────────────────────────── */
.search-miss {
  max-width: 640px;
  margin: 60px auto;
  padding: 0 20px;
}
.search-miss-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 8px;
}
.search-miss-sub {
  color: var(--ink-secondary);
  font-size: 14px;
  margin: 0 0 20px;
}
.search-miss-empty {
  color: var(--ink-tertiary);
  font-size: 14px;
  margin: 20px 0 28px;
}
.search-miss-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  border-top: 1px solid var(--hairline);
}
.search-miss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.search-miss-row-addr { flex: 1; min-width: 0; }
.search-miss-row-formatted { font-size: 15px; color: var(--ink); }
.search-miss-row-display { font-size: 12px; color: var(--ink-tertiary); margin-top: 2px; }
.search-miss-btn,
.search-miss-btn button {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
.search-miss-btn button:hover { opacity: 0.85; }
.search-miss-back { font-size: 13px; }
.search-miss-back a { color: var(--ink-secondary); text-decoration: none; }

.fetch-pending {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}
.fetch-pending .map-spinner { margin: 0 auto 24px; }
.fetch-pending-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 6px;
}
.fetch-pending-addr {
  color: var(--ink-secondary);
  font-size: 14px;
  margin: 0 0 20px;
}
.fetch-pending-stage {
  color: var(--ink-tertiary);
  font-size: 13px;
  margin: 0;
}
.fetch-pending-error {
  margin-top: 20px;
  padding: 12px;
  background: rgba(200, 50, 50, 0.08);
  color: #c02020;
  font-size: 13px;
  border-radius: 4px;
}

/* ─── Auth (login screen) ─────────────────────────────────────────────────── */
.auth-body {
  background: var(--bg-subtle, #f7f4ef);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-main {
  width: 100%;
  max-width: 420px;
  padding: 24px;
}
.auth-card {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.auth-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 6px;
}
.auth-sub {
  color: var(--ink-tertiary, #888);
  font-size: 14px;
  margin-bottom: 28px;
}
.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #3c4043;
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s;
}
.auth-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.auth-google-icon {
  flex: 0 0 auto;
}
.auth-hint {
  margin-top: 18px;
  color: var(--ink-tertiary, #888);
  font-size: 12px;
}
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.nav-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-logout-btn {
  background: none;
  border: none;
  color: var(--ink-tertiary, #888);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
}
.nav-logout-btn:hover {
  color: var(--ink-primary, #111);
}

/* ─── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile-only top bar: hidden above 768px, shown via the mobile block. */
.mobile-nav { display: none; }

/* ─── Mobile (≤768px) ───────────────────────────────────────────────────────
   Kills site chrome and tightens typography. Section order is defined once,
   above, so desktop + mobile share the same sequence. */
@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
  }
  .mobile-nav-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
  }
  .mobile-nav-city {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
  }
  .mobile-nav-count {
    font-size: 12px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .mobile-nav-links { display: flex; gap: 4px; }
  .mobile-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    color: var(--ink-tertiary);
    text-decoration: none;
  }
  .mobile-nav-btn svg { width: 18px; height: 18px; }
  .mobile-nav-btn.active { color: var(--ink); background: var(--border); }

  .site-header,
  .detail-nav,
  .map-subnav,
  .filter-panel-wrap,
  .fp-footer-standalone,
  .status-bar,
  .hotkey-legend,
  .detail-risk-banner,
  .ds-notes,
  .detail-thumbs,
  .action-buttons,
  .vote-buttons,
  .dn-btn {
    display: none !important;
  }

  .main-content { padding: 0 0 40px; }

  /* Edge-to-edge hero */
  .detail-hero { border-radius: 0; }
  .detail-hero-img { aspect-ratio: 4 / 3; }
  .photo-count { bottom: 8px !important; right: 8px !important; }

  /* Touch devices have no :hover — keep carousel arrows visible always */
  .photo-arrow { opacity: 1 !important; pointer-events: auto !important; }

  /* Address + price sits ABOVE the photo on mobile and sticks to the top of
     the viewport (below the mobile-nav) as the user scrolls. */
  .ds-head {
    order: 0;
    padding: 10px 16px;
    margin: 0;
    gap: 12px;
    position: sticky;
    top: 53px;
    z-index: 9;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
  }
  .ds-address-street    { font-size: 15px; font-weight: 600; line-height: 1.2; }
  .ds-price             { font-size: 15px; font-weight: 600; }
  .ds-price-row         { gap: 6px; }

  .ds-stats             { margin: 0 16px 12px; padding: 10px 0;
                          gap: 10px 16px; }
  .ds-stat-val          { font-size: 14px; }
  .ds-stat-label        { font-size: 9px; margin-top: 2px; }
  .ds-agent             { padding: 0 16px; font-size: 11px; }
  .ds-description       { padding: 0 16px; margin: 8px 0 0; }

  .vastu-section              { margin: 12px 22px; padding: 0 0 12px;
                                 font-size: 11px; }
  /* Stack Vastu factors vertically on mobile so nothing overflows */
  .vastu-section .vastu-factors { grid-template-columns: 1fr; gap: 6px; }
  .vastu-section .vastu-factor  { padding: 6px 8px; border-radius: 6px; }
  .vastu-section .vf-body,
  .vastu-section .vf-body b    { font-size: 11px; }
  .vastu-section .vf-sub       { font-size: 10px; }
  .vastu-section .vf-label     { font-size: 10px; }
  .vastu-section .section-title { font-size: 14px; }
  .vastu-section .vastu-footnote { font-size: 10px; }

  #risk-checks                { margin: 0 22px; font-size: 11px; }

  .tcad-section               { margin: 12px 22px; font-size: 11.5px; }
  .tcad-section .section-title { font-size: 14px; }
  /* Inline 4-col grids inside TCAD collapse to 2 cols on narrow viewports */
  .tcad-section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Shrink the big value figures (market/appraised/hs-capped/new-owner tax) */
  .tcad-section div[style*="font-size:16px"] {
    font-size: 13.5px !important;
  }
  .tcad-section table { font-size: 10.5px !important; }
  .ds-minimap-section         { margin: 12px 22px; }
  .ds-poi-groups              { padding: 0 16px; margin-top: 12px; }
  .timeline-section           { margin: 12px 16px; }
  .detail-section-collapsible { margin: 0 16px; }

  .print-only { display: none !important; }

  .detail-timeline .ph-row {
    grid-template-columns: 56px 56px 1fr auto;
    gap: 8px;
    font-size: 12px;
  }
}

/* ─── Print (tour sheet / PDF) ──────────────────────────────────────────── */
.print-only { display: none; }

@page { margin: 0.5in; size: letter portrait; }

@media print {
  /* Chrome / nav / actions — hide everything that isn't content */
  .site-header, .detail-nav, .status-bar, .ds-notes, .vote-buttons,
  .photo-arrow, .photo-count, .detail-thumbs, .action-buttons,
  .hotkey-legend, .refresh-status, .dn-btn, .no-print,
  .ds-description[data-controller]::after,
  .detail-risk-banner .risk-check-detail,
  .detail-section-collapsible, .more-toggle {
    display: none !important;
  }

  .print-only { display: block; }

  body { background: #fff; color: #000; font-size: 11pt; }

  /* Single-column layout */
  .detail-page { padding: 0 !important; }
  .detail-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }
  .detail-sidebar, .detail-photos-col { padding: 0 !important; }

  /* Print header (address + MLS + city) shown in place of sticky nav */
  .print-header { margin-bottom: 10px; }
  .print-title { font-family: var(--serif); font-size: 20pt; font-weight: 500; }
  .print-sub   { font-size: 10pt; color: #555; margin-top: 2px; }

  /* Hero: show ONLY the first image, keep the overall aspect compact */
  .detail-hero { border-radius: 4px !important; break-inside: avoid; }
  .detail-hero-track {
    display: block !important;
    overflow: hidden !important;
  }
  .detail-hero-img { display: none !important; }
  .detail-hero-img:first-child {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
  }

  /* Price + stats compacted */
  .ds-address-street { font-size: 16pt; }
  .ds-price { font-size: 20pt; }
  .ds-stats, .ds-stats-secondary { font-size: 11pt; color: #111; }
  .ds-agent { color: #555; font-size: 10pt; }

  /* Sections flow as cards that don't split mid-page */
  .detail-section {
    break-inside: avoid; page-break-inside: avoid;
    border: 1px solid #ddd; border-radius: 4px;
    padding: 10px 12px !important; margin-bottom: 10px !important;
    background: #fff !important; box-shadow: none !important;
  }
  .section-title { font-size: 11pt; margin: 0 0 6px 0 !important; }

  /* Show full description (no clamp, no "read more") */
  .ds-description {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    cursor: auto !important;
    font-size: 10.5pt !important;
  }
  .ds-description::after { content: "" !important; background: none !important; }

  /* Minimap disabled — tiles don't print reliably. Hide its container. */
  .ds-minimap-link { display: none !important; }

  /* Links: keep underline, print color friendly */
  a { color: #000 !important; text-decoration: underline; }

  /* Avoid colored backgrounds bleeding */
  * { box-shadow: none !important; text-shadow: none !important; }
}

.dn-print-btn:hover { background: var(--surface-hover); }