*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }   /* prevent mobile horizontal wobble */

:root {
  /* ── New warm tokens ── */
  --bg-page:        #F7F5F2;   /* warm off-white */
  --bg-card:        #FFFFFF;
  --bg-muted:       #F2EFE9;   /* warm grey */
  --bg-pill:        #EDEAE4;   /* neutral pill */

  --green-deep:     #2A7A5A;
  --green-mid:      #4CAF80;
  --green-light:    #E6F4ED;
  --amber:          #E8922A;
  --amber-light:    #FEF3E2;
  --coral:          #E05C4B;
  --coral-light:    #FDEEEC;
  --blue-soft:      #4A90D9;
  --blue-light:     #EBF4FF;

  --text-primary:   #1A1A1A;
  --text-secondary: #6B6560;
  --text-muted:     #6F6962;   /* 5.4:1 on white — AA for small text */
  /* Darker "ink" shades for text on the light tints above */
  --green-ink:      #1F6B4C;
  --coral-ink:      #B42318;
  --amber-ink:      #8A5410;
  --blue-ink:       #1A5FA8;
  --text-inverse:   #FFFFFF;

  --border-light:   #E8E4DE;
  --border-strong:  #D4CFC8;

  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    999px;

  --shadow-card:    0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-hover:   0 8px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-score:   0 4px 16px rgba(42,122,90,0.25);

  /* Lume warm accent — used sparingly for the flame, gems, loading states */
  --lume-glow:      #E8A23A;
  --lume-glow-soft: #FCEDD3;

  --font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Keyboard focus ring — 6.4:1 on white */
  --focus:          #1F6B4C;
  /* Hidden Gem has its own colour, distinct from every status colour */
  --gem:            #7C5CE0;
  --gem-ink:        #5B3FB0;
  --gem-light:      #F1ECFC;

  /* Type scale — 12 px is the floor */
  --text-xs:  12px;  --text-sm: 13px;  --text-md: 14px;  --text-lg: 16px;
  --text-xl:  18px;  --text-2xl: 24px; --text-3xl: 32px;
  --lh-tight: 1.25;  --lh-normal: 1.45;

  /* Spacing — 4 pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  /* Controls: rounded rectangles for actions and inputs, pills only for
     chips, badges and segmented controls */
  --control-h:      36px;
  --control-h-lg:   44px;
  --radius-control: 10px;
  --shadow-pop:     0 8px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);

  /* Layers */
  --z-sticky: 100; --z-dropdown: 200; --z-drawer: 300; --z-modal: 1000; --z-toast: 4000; --z-tooltip: 9999;
}

/* Dark mode — follows the system unless the header toggle picked a theme
   (data-theme on <html>). Same token names, darker values. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg-page:        #141413;
  --bg-card:        #1E1E1C;
  --bg-muted:       #282725;
  --bg-pill:        #302F2C;
  --green-deep:     #5BBF92;
  --green-mid:      #6CCB9F;
  --green-light:    #1C362B;
  --amber:          #F0A54A;
  --amber-light:    #3A2C17;
  --coral:          #F27D6C;
  --coral-light:    #3D2420;
  --blue-soft:      #6FA9EA;
  --blue-light:     #1B2A3C;
  --text-primary:   #F2F0EC;
  --text-secondary: #B8B2AA;
  --text-muted:     #A39D95;
  --focus:          #8EDDB8;
  --gem:            #9C82EA;
  --gem-ink:        #C4B2F5;
  --gem-light:      #2A2340;
  --shadow-pop:     0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
  --text-inverse:   #10241B;
  --green-ink:      #8EDDB8;
  --coral-ink:      #F6A497;
  --amber-ink:      #F4C27A;
  --blue-ink:       #9CC6F2;
  --border-light:   #33312E;
  --border-strong:  #46433F;
  --shadow-card:    0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-hover:   0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-score:   0 4px 16px rgba(91,191,146,0.25);
  --lume-glow-soft: #3A2E17;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:        #141413;
  --bg-card:        #1E1E1C;
  --bg-muted:       #282725;
  --bg-pill:        #302F2C;
  --green-deep:     #5BBF92;
  --green-mid:      #6CCB9F;
  --green-light:    #1C362B;
  --amber:          #F0A54A;
  --amber-light:    #3A2C17;
  --coral:          #F27D6C;
  --coral-light:    #3D2420;
  --blue-soft:      #6FA9EA;
  --blue-light:     #1B2A3C;
  --text-primary:   #F2F0EC;
  --text-secondary: #B8B2AA;
  --text-muted:     #A39D95;
  --focus:          #8EDDB8;
  --gem:            #9C82EA;
  --gem-ink:        #C4B2F5;
  --gem-light:      #2A2340;
  --shadow-pop:     0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
  --text-inverse:   #10241B;
  --green-ink:      #8EDDB8;
  --coral-ink:      #F6A497;
  --amber-ink:      #F4C27A;
  --blue-ink:       #9CC6F2;
  --border-light:   #33312E;
  --border-strong:  #46433F;
  --shadow-card:    0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-hover:   0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-score:   0 4px 16px rgba(91,191,146,0.25);
  --lume-glow-soft: #3A2E17;
}

/* Elements with the hidden attribute stay hidden whatever their display rule */
[hidden] { display: none !important; }
/* Form controls use the page font, not the browser's (Arial 13.33 px) */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Card entrance animation ───────────────────────────── */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card { animation: cardEntrance 0.32s cubic-bezier(0.4, 0, 0.2, 1) both; }
.card:nth-child(1)  { animation-delay: 0.00s; }
.card:nth-child(2)  { animation-delay: 0.04s; }
.card:nth-child(3)  { animation-delay: 0.08s; }
.card:nth-child(4)  { animation-delay: 0.12s; }
.card:nth-child(5)  { animation-delay: 0.16s; }
.card:nth-child(6)  { animation-delay: 0.20s; }
.card:nth-child(7)  { animation-delay: 0.24s; }
.card:nth-child(8)  { animation-delay: 0.28s; }
.card:nth-child(n+9){ animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none !important; }
}

/* Cards rendered after the initial batch skip the entrance animation —
   the staggered fade-in only makes sense for the first wave the user sees. */
.card.no-anim { animation: none !important; opacity: 1; transform: none; }

/* ── Infinite-scroll status indicator ─────────────────────────────────── */
.scroll-status {
  text-align: center;
  padding: 16px 24px 24px;
  font-size: 13px;
  color: var(--text-muted);
  min-height: 24px;
}
.loading-dots::after {
  content: '...';
  display: inline-block;
  width: 20px;
  text-align: left;
  animation: scrollLoadDots 1.4s steps(4, end) infinite;
}
@keyframes scrollLoadDots {
  0%, 20%   { content: ''; }
  40%       { content: '.'; }
  60%       { content: '..'; }
  80%, 100% { content: '...'; }
}
.scroll-meta { margin-left: 8px; color: var(--text-muted); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .loading-dots::after { animation: none; content: '...'; }
}

/* ── Header ── */
header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
header h1 { font-size: 18px; font-weight: 700; white-space: nowrap; color: var(--text-primary); letter-spacing: -0.3px; }
header h1 span { color: var(--green-deep); }

.server-note {
  font-size: 12px;
  color: var(--amber);
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.25);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  white-space: nowrap;
}
.meta { color: var(--text-secondary); font-size: 12px; margin-left: auto; white-space: nowrap; }

.btn-fetch-toggle {
  background: rgba(45,106,79,0.08);
  border: 1px solid rgba(45,106,79,0.3);
  color: var(--green-deep);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-fetch-toggle:hover    { background: rgba(45,106,79,0.14); }
.btn-fetch-toggle.is-open  { background: var(--green-deep); color: var(--bg-card); border-color: var(--green-deep); }

/* ── Fetch panel ── */
.fetch-panel {
  background: var(--bg-muted);
  border-bottom: 2px solid var(--green-deep);
  padding: 14px 24px 12px;
}
.fetch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.city-checks { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.city-checks label {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; cursor: pointer;
}
.city-checks input[type=checkbox] { accent-color: var(--green-deep); }

.expected-pill {
  font-size: 12px;
  color: var(--green-deep);
  background: rgba(45,106,79,0.08);
  border: 1px solid rgba(45,106,79,0.2);
  border-radius: var(--radius-lg);
  padding: 4px 12px;
  white-space: nowrap;
  align-self: center;
}
.btn-start-fetch {
  background: var(--green-deep);
  border: none;
  color: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.btn-start-fetch:hover:not(:disabled) { opacity: 0.88; }
.btn-start-fetch:disabled { opacity: 0.4; cursor: not-allowed; }

/* Log panel */
.log-panel {
  margin-top: 10px;
  background: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  max-height: 200px;
  overflow-y: auto;
}
.log-output {
  font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
  font-size: 12px;
  color: #A6ADBF;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}

/* ── Filter bar ── */
.filters {
  background: var(--bg-card);
  border: none;
  padding: 12px 18px;
  margin: 14px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  position: sticky;
  top: 0;   /* adjusted by JS after measuring header + tab bar */
  z-index: 90;   /* below header (100), above cards (1) */
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  transition: box-shadow 180ms ease, border-radius 180ms ease, margin 180ms ease;
}
/* When the sentinel scrolls out, the bar is "stuck" — go edge-to-edge with a
   stronger bottom shadow so it reads as a distinct layer above the content. */
.filters.is-stuck {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 0 var(--border-light);
}
.filters-sentinel {
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .filters { margin: 12px 14px 0; border-radius: var(--radius-md); padding: 10px 14px; }
  .filters.is-stuck { margin-left: 0; margin-right: 0; border-radius: 0; }
}

/* Listing cards must sit BELOW the sticky filter bar.
   The cardEntrance animation leaves transform:translateY(0)/scale(1) on cards,
   which creates a stacking context — make z-index explicit so .filters wins. */
.card { position: relative; z-index: 1; }
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-group label { color: var(--text-secondary); font-size: 12px; white-space: nowrap; font-weight: 500; }

select,
.filter-group input[type=number],
.filter-group input[type=text],
.filter-group input[type=search] {
  background: var(--bg-muted);
  border: 1px solid transparent;
  color: var(--text-primary);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  font-family: var(--font);
  max-width: min(220px, calc(100vw - 80px));
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
select:hover,
.filter-group input[type=number]:hover,
.filter-group input[type=text]:hover,
.filter-group input[type=search]:hover { background: var(--border-strong); }
select:focus,
.filter-group input[type=number]:focus,
.filter-group input[type=text]:focus,
.filter-group input[type=search]:focus {
  background: var(--bg-card);
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(42,122,90,0.15);
}
.filter-group input[type=number]::placeholder,
.filter-group input[type=text]::placeholder,
.filter-group input[type=search]::placeholder { color: var(--text-muted); }
/* Strip the native WebKit X-clear button so the input keeps the
   muted pill look. The bar's own "Start fresh" / "Clear filters"
   button already wipes the field. */
.filter-group input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
input[type=range] { padding: 0; width: 100px; accent-color: var(--green-deep); }
.range-val { color: var(--green-deep); font-size: 12px; min-width: 26px; font-weight: 600; }
.filter-sep { width: 1px; height: 28px; background: var(--border-light); flex-shrink: 0; }

.btn-reset {
  background: var(--bg-muted);
  border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
  transition: background 140ms ease, color 140ms ease;
  font-family: var(--font);
}
.btn-reset:hover { background: var(--border-strong); color: var(--text-primary); }

/* "🔔 Save alert" button — sits in the rentals filter bar after the
   stale toggle. Hidden until the user signs in (toggled by Auth.user
   events). Same pill geometry as the other filter pills, with a green
   accent on hover to telegraph the save action. */
.btn-save-digest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border-light, var(--border-light));
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text-secondary);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.btn-save-digest:hover {
  background: var(--green-light);
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.btn-save-digest:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Save Alert modal ─────────────────────────────────────────────────────
   Centred modal opened by saveDigestFilters(). Lets the user review the
   pre-filled rentals-tab filter state before submitting to Supabase.
   Backdrop click + Esc close. Mobile: full-screen with scrolling body. */
.save-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 22, 25, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}
.save-alert-backdrop[hidden] { display: none; }
.save-alert-modal {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  font-family: var(--font);
  padding: 28px;
  animation: saveAlertIn 180ms ease-out;
}
@keyframes saveAlertIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.save-alert-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.save-alert-header h2 {
  margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.2px;
}
.save-alert-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--text-secondary);
  padding: 0 6px; border-radius: var(--radius-sm);
  transition: color 120ms ease, background 120ms ease;
}
.save-alert-close:hover { color: var(--text-primary); background: var(--bg-muted); }
.save-alert-subtitle {
  margin: 0 0 24px; color: var(--text-secondary); font-size: 13px; line-height: 1.55;
}
.save-alert-section { margin-bottom: 22px; }
.save-alert-section-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.save-alert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.save-alert-field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; color: var(--text-primary);
}
.save-alert-field > span { font-weight: 600; color: var(--text-secondary, var(--text-secondary)); font-size: 12px; }
.save-alert-field input[type="number"],
.save-alert-field input[type="time"],
.save-alert-field input[type="text"],
.save-alert-field select {
  padding: 9px 11px;
  border: 1px solid var(--border-light, var(--border-light));
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px; font-family: var(--font); color: var(--text-primary);
}
.save-alert-field input:focus,
.save-alert-field select:focus {
  outline: none; border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(42, 122, 90, 0.12);
}
.save-alert-field input[type="range"] { width: 100%; margin-top: 4px; }
.save-alert-rangeval {
  font-weight: 700; color: var(--text-primary); font-size: 13px; text-align: right;
  margin-top: -2px;
}
.save-alert-field-wide { grid-column: 1 / -1; }
.save-alert-field-checkbox {
  flex-direction: row; align-items: center; gap: 8px;
  grid-column: 1 / -1; padding: 8px 0;
}
.save-alert-field-checkbox > span { font-weight: 600; font-size: 13px; }
.save-alert-hint {
  color: var(--text-secondary); font-size: 12px; line-height: 1.4; margin-top: 2px;
}
.save-alert-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--border-light, var(--border-light));
}
.save-alert-btn {
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.save-alert-btn-secondary {
  background: var(--bg-muted); color: var(--text-secondary, var(--text-secondary));
  border-color: var(--border-light, var(--border-light));
}
.save-alert-btn-secondary:hover { background: var(--border-light, var(--border-light)); color: var(--text-primary); }
.save-alert-btn-primary {
  background: var(--green-deep); color: var(--bg-card);
}
.save-alert-btn-primary:hover { background: var(--green-ink); }
.save-alert-btn-primary:disabled { background: #8AB7A0; cursor: not-allowed; }
.save-alert-error {
  background: var(--coral-light); color: var(--coral-ink); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 12px;
  font-size: 12px; line-height: 1.5;
}

/* ── Daily-alerts list (Settings tab) ─────────────────────────────────
   One card per saved digest_filters row. Editable via the same modal. */
.settings-alert-new-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-light, var(--border-light));
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.settings-alert-new-btn:hover {
  background: var(--green-light); border-color: var(--green-deep); color: var(--green-deep);
}
.digest-alert-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light, var(--border-light));
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.digest-alert-row1 { display: flex; align-items: flex-start; gap: 12px; }
.digest-alert-name {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.digest-alert-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--text-secondary); margin-top: 3px;
  align-items: center;
}
.digest-alert-meta strong { color: var(--text-primary); font-weight: 600; }
.digest-alert-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0;
}
.digest-alert-chip {
  background: var(--bg-muted, var(--bg-muted));
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; color: var(--text-secondary, var(--text-secondary));
}
.digest-alert-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--bg-muted, var(--bg-muted));
}
.digest-alert-actions button {
  padding: 6px 12px;
  border: 1px solid var(--border-light, var(--border-light));
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary, var(--text-secondary));
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.digest-alert-actions button:hover {
  background: var(--bg-muted, var(--bg-muted)); color: var(--text-primary);
}
.digest-alert-actions .digest-alert-delete:hover {
  background: var(--coral-light); border-color: var(--coral-ink); color: var(--coral-ink);
}
@media (max-width: 600px) {
  .save-alert-modal { padding: 20px; }
  .save-alert-grid  { grid-template-columns: 1fr; }
}

/* Agency-pin banner — set when an agency is clicked in Stats leaderboard */
.agency-pin-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 14px 12px;
  background: var(--green-light, var(--green-light));
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(42,122,90,0.25);
}
.agency-pin-banner strong {
  font-weight: 700;
  color: var(--text-primary);
}
.agency-pin-clear {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(42,122,90,0.30);
  color: var(--green-deep);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: background 120ms ease;
}
.agency-pin-clear:hover { background: var(--bg-card); }

/* Clickable agency name in the Stats leaderboard */
.agency-link {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--green-deep);
  cursor: pointer;
  text-align: left;
}
.agency-link:hover { text-decoration: underline; }

/* Banner that appears on cards when a stale listing is shown via the toggle */
/* Extreme-underpricing banner — sits above the stale banner on cards
   whose comps-delta dropped below -60 %. Amber tone to signal caution
   without the louder red used for hard exclusions; the row is still
   visible (genuine distressed sales exist) but the user is asked to
   verify before acting on it. */
.extreme-underpricing-banner {
  background: var(--amber-light);
  color: var(--amber-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  text-align: center;
  border-top: 1px solid rgba(184, 92, 0, 0.18);
  line-height: 1.4;
}
.stale-banner {
  background: var(--coral-light, var(--coral-light));
  color: var(--coral, var(--coral));
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  text-align: center;
  border-top: 1px solid rgba(224,92,75,0.20);
  border-radius: 0 0 var(--radius-lg, 20px) var(--radius-lg, 20px);
  margin: 4px -1px -1px;
}

/* Investor-specific reason-component pill colours
   (extends the existing reason-component-* set from buyer mode) */
.reason-component-yield     { background: rgba(42, 122, 90, 0.12);   color: var(--green-deep); }
.reason-component-upside    { background: rgba(232, 146, 42, 0.18);  color: var(--amber-ink); }
.reason-component-demand    { background: rgba(74, 144, 217, 0.15);  color: var(--blue-ink); }
.reason-component-costs     { background: rgba(224, 92, 75, 0.12);   color: var(--coral); }
.reason-component-liquidity { background: rgba(108, 99, 165, 0.15);  color: #5B4F8E; }
.reason-component-returns   { background: rgba(108, 99, 165, 0.15);  color: #5B4F8E; }

/* Verdict ──────────────────────────────────────────────────── */
.verdict-card {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  border-left: 4px solid;
}
.verdict-strong   { background: var(--green-light); border-left-color: var(--green-deep); }
.verdict-decent   { background: var(--bg-page);            border-left-color: var(--green-mid); }
.verdict-mediocre { background: var(--amber-light); border-left-color: var(--amber); }
.verdict-weak     { background: var(--coral-light); border-left-color: var(--coral); }

.verdict-headline {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.verdict-tier-label { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.verdict-rate       { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.verdict-desc       { font-size: 14px; line-height: 1.6; color: var(--text-primary); margin: 0 0 10px; }
.verdict-note       { font-size: 12px; color: var(--text-muted); margin: 0; font-style: italic; }
.verdict-no-data    { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 0; }

.benchmark-strip {
  padding-top: 16px;
  border-top: 1px solid var(--border-light, var(--border-light));
}
.benchmark-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.benchmark-grid { display: grid; gap: 8px; margin-bottom: 12px; }
.benchmark-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  font-size: 13px;
  gap: 12px;
}
.benchmark-row.benchmark-this { background: var(--green-light); font-weight: 600; }
.benchmark-name { font-weight: 600; }
.benchmark-rate { font-weight: 700; text-align: center; }
.benchmark-rate.positive { color: var(--green-deep); }
.benchmark-rate.neutral  { color: var(--text-primary); }
.benchmark-source { font-size: 12px; color: var(--text-muted); }
.benchmark-disclaimer {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.5; font-style: italic;
  /* Fix 8: the parent section's bottom had no padding, so the
     disclaimer butted up against the next section's heading on the
     detail page. Give it explicit breathing room + tuck the paragraph
     inside the surrounding card via a top border for visual closure. */
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

/* Investment analysis section ─────────────────────────────── */

.projection-wrap, .sensitivity-wrap { margin-bottom: 24px; }
.projection-wrap h3, .sensitivity-wrap h3 {
  font-size: 14px; font-weight: 700;
  margin: 0 0 10px 0; color: var(--text-primary);
}

.sensitivity-table tr.sensitivity-default { background: var(--green-light); }
.sensitivity-table tr.sensitivity-default td:first-child::after {
  content: ' ← default';
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
}
.sensitivity-disclaimer {
  font-size: 12px; color: var(--text-muted);
  margin-top: 10px; line-height: 1.55;
}

/* Cost breakdown ──────────────────────────────────────────── */
.costs-intro {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.55; margin-bottom: 16px;
}
.cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cost-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-light, var(--border-light));
}
.cost-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light, var(--border-light));
}
.cost-table .cost-note {
  font-size: 12px; color: var(--text-muted); font-style: italic;
}
.cost-table .cost-total {
  background: var(--bg-muted);
  font-weight: 700;
}
.cost-table .cost-total td { border-bottom: none; }
@media (max-width: 600px) {
  .cost-table .cost-note { display: none; }
  .cost-table { font-size: 12px; }
}

/* Phase 2/3 placeholder sections ──────────────────────────── */
.detail-placeholder { opacity: 0.6; }
.placeholder-text {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  margin: 0;
}

/* OMI benchmark card — full-width row below the two estimate cards. */
.val-omi-marker {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--green-deep, var(--green-ink));
  font-weight: 700;
  pointer-events: none;
}

/* ── Grid ── 3 cards per row on desktop, 2 on tablet, 1 on mobile */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 24px;
}
@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
}

/* ── Card ── */
.card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 220ms ease, transform 220ms ease;
  box-shadow: var(--shadow-card);
  position: relative;
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* Hover photo zoom — .card-thumb is the <img> itself; .card already clips */
.card-photo-wrap { overflow: hidden; }
.card-photo-wrap img, .card-thumb {
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover .card-photo-wrap img,
.card:hover .card-thumb {
  transform: scale(1.04);
}
/* Left accent stripes for gem / good-value cards */
.card.is-gem        { box-shadow: var(--shadow-card), inset 3px 0 0 var(--green-deep); }
.card.is-gem:hover  { box-shadow: var(--shadow-hover), inset 3px 0 0 var(--green-deep); }
.card.is-goodvalue        { box-shadow: var(--shadow-card), inset 3px 0 0 var(--amber); }
.card.is-goodvalue:hover  { box-shadow: var(--shadow-hover), inset 3px 0 0 var(--amber); }

/* Card header */

.card-title { flex: 1; overflow: hidden; }

/* Lume internal listing-ID pill — replaces the OMI fascia badge in
   card headers. The full ID is shown so users can copy/paste it
   into the header search box. Click-to-copy via JS.
   Monospace digits so two-digit + four-digit ids line up vertically
   when stacked in the grid. */
.id-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  margin-left: 6px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border-light, var(--border-light));
  cursor: pointer;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.id-pill:hover { background: var(--bg-card, var(--bg-card)); color: var(--text-primary); }
.id-pill::before {
  content: '#';
  margin-right: 2px;
  opacity: 0.55;
  font-weight: 500;
}

/* ── Gem badges ── */
.card { position: relative; }

/* ── Variant A card layout ── */

/* Photo wrapper (positions the gem chip) */
.card-photo-wrap { position: relative; }
.gem-photo-chip {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.96); border-radius: var(--radius-full);
  padding: 5px 11px 5px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1px;
}
.gem-photo-chip.chip-hidden { color: var(--green-ink); }
.gem-photo-chip.chip-good   { color: var(--blue-ink); }

/* ── Card header (Fix 3) — clean two-line block ─────────────────────────── */
.card-header-text { flex: 1; min-width: 0; }
.card-neighbourhood-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-neighbourhood {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  letter-spacing: -0.2px;
}
.card-address-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.card-address {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.source-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0;
}
.source-badge.immobiliare { background: var(--blue-light); color: var(--blue-ink); }
.source-badge.idealista   { background: var(--amber-light); color: var(--amber-ink); }

/* If both flag + new badge would collide, the flag wins (top-right slot). */

/* New-badge as photo overlay (Fix 3) — top-right corner */
.card-photo-wrap { position: relative; }
.card-photo-new-badge {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.92);
  color: var(--blue-ink);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ── Toast (bottom-centre pill, 2.4 s auto-dismiss) ─────────────────────── */
.lume-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--text-primary);
  color: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
  opacity: 0;
  pointer-events: none;
  z-index: 4000;
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.lume-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Share button (icon-only pill in card footer) ───────────────────────── */
.btn-share, .btn-bookmark {
  width: 34px; height: 34px; padding: 0;
  border-radius: var(--radius-full);
  background: var(--bg-pill); color: var(--text-secondary);
  border: none; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font);
}
.btn-share:hover     { background: var(--blue-light); color: var(--blue-soft); }
.btn-bookmark:hover  { background: var(--green-light); color: var(--green-deep); }
.btn-bookmark.active { background: var(--green-light); color: var(--green-deep); }
.btn-bookmark.active svg { fill: currentColor; stroke-width: 2; }

/* ── Shared-highlight pulse on deep-linked card (?l=) ───────────────────── */
@keyframes sharedHighlight {
  0%, 100% { box-shadow: var(--shadow-card); }
  35%      { box-shadow: 0 0 0 4px rgba(232,162,58,0.55), var(--shadow-hover); }
}
.card.shared-highlight {
  animation: sharedHighlight 1.5s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .card.shared-highlight { animation: none; box-shadow: 0 0 0 4px rgba(232,162,58,0.55), var(--shadow-hover); }
}

/* ── Collection popover menu ────────────────────────────────────────────── */
.collection-menu {
  position: fixed;
  width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 3000;
  animation: menuFadeIn 150ms ease-out;
}
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.collection-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none; border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  text-align: left;
  color: var(--text-primary);
  transition: background 100ms ease;
}
.collection-item:hover  { background: var(--bg-muted); }
.collection-item.checked { color: var(--green-deep); font-weight: 600; }
.collection-check {
  width: 18px; text-align: center; flex-shrink: 0;
  color: var(--green-deep); font-weight: 700;
}
.collection-name {
  flex: 1; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 500;
}
.collection-count {
  font-size: 12px; color: var(--text-muted);
  font-weight: 500; flex-shrink: 0;
  background: var(--bg-pill); padding: 2px 7px;
  border-radius: var(--radius-full);
}
.collection-create {
  border-top: 1px solid var(--border-light);
  margin-top: 4px; padding-top: 12px;
  color: var(--green-deep); font-weight: 600;
}
.collection-empty {
  padding: 16px 10px; text-align: center;
  font-size: 12px; color: var(--text-muted);
}

/* ── Avatar dropdown menu ───────────────────────────────────────────────── */
.avatar-menu {
  position: fixed;
  width: 240px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 3000;
  animation: menuFadeIn 150ms ease-out;
}
.avatar-menu-header {
  padding: 10px 12px 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.avatar-menu-header strong { color: var(--text-primary); font-weight: 600; }
.avatar-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none; border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  text-align: left;
  color: var(--text-primary);
  font-weight: 500;
  transition: background 100ms ease;
}
.avatar-menu-item:hover { background: var(--bg-muted); }
.avatar-menu-item .badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-pill);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}
/* Active digest alerts get a coral pill; paused-only alerts use the
   neutral .badge styling above. */
.avatar-menu-item .badge.badge-alert {
  background: var(--coral-ink);
  color: var(--bg-card);
  font-weight: 700;
}

/* Red dot on the avatar — visible whenever the user has ≥1 active
   digest alert. Pure visual signal; the count is only revealed once
   the menu is opened. */
.avatar-alert-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--coral-ink);
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5);
  animation: avatarDotPulse 2.4s ease-out infinite;
}
@keyframes avatarDotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(192, 57, 43, 0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(192, 57, 43, 0);    }
}

/* ── Collections drawer (slide in from right on desktop, bottom on mobile) ─ */
.collections-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 2900;
  opacity: 0;
  transition: opacity 220ms ease;
}
.collections-drawer-backdrop.open { opacity: 1; }
.collections-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--bg-card);
  z-index: 2950;
  box-shadow: -8px 0 32px rgba(0,0,0,0.10);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  font-family: var(--font);
}
.collections-drawer.open { transform: translateX(0); }
@media (max-width: 768px) {
  .collections-drawer {
    top: auto; right: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
    max-height: 80vh;
  }
  .collections-drawer.open { transform: translateY(0); }
}
.collections-drawer .drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-light);
}
.collections-drawer .drawer-header h2 {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.collections-drawer .drawer-close {
  background: var(--bg-pill); border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--text-secondary);
  transition: background 120ms ease;
}
.collections-drawer .drawer-close:hover { background: var(--border-strong); }
.collections-drawer .drawer-body {
  flex: 1; overflow-y: auto;
  padding: 12px 16px;
}
.collections-drawer .drawer-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--border-light);
}
.btn-create-collection {
  width: 100%;
  background: var(--green-deep); color: white;
  border: none; border-radius: var(--radius-full);
  padding: 11px 16px;
  font-size: 14px; font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 120ms ease;
}
.btn-create-collection:hover { background: var(--green-ink); }
.collection-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.collection-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.collection-card-main { flex: 1; min-width: 0; }
.collection-card-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.collection-card-name:hover { color: var(--green-deep); }
.collection-card-meta {
  font-size: 12px; color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}
.collection-card-actions {
  display: flex; gap: 4px; flex-shrink: 0;
}
.collection-card-actions button {
  width: 30px; height: 30px;
  background: var(--bg-pill); color: var(--text-secondary);
  border: none; border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.collection-card-actions button:hover     { background: var(--border-strong); color: var(--text-primary); }
.collection-card-actions button.danger:hover { background: var(--coral-light); color: var(--coral); }
.collections-empty {
  padding: 48px 20px;
  text-align: center;
}
.collections-empty .empty-icon { font-size: 36px; margin-bottom: 10px; }
.collections-empty .empty-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px;
}
.collections-empty .empty-text {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.5;
}

/* ── Shared-collection banner ───────────────────────────────────────────── */
.shared-collection-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--green-light);
  border-radius: var(--radius-lg);
  margin: 0 24px 0;
  border: 1px solid #C8E6D6;
}
@media (max-width: 768px) { .shared-collection-banner { margin: 0 14px; } }
.shared-collection-banner .banner-icon { font-size: 24px; flex-shrink: 0; }
.shared-collection-banner .banner-text { flex: 1; min-width: 0; }
.shared-collection-banner .banner-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.shared-collection-banner .banner-sub {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.shared-collection-banner .banner-sub a {
  color: var(--green-deep); font-weight: 600; text-decoration: underline;
}
.shared-collection-banner .banner-clear {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  font-family: var(--font);
  transition: background 120ms ease;
}
.shared-collection-banner .banner-clear:hover { background: var(--bg-muted); }

/* Combined specs pill (rooms · baths · sqm) inside the price row */
.specs-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ── Stat pills row (Fix 2) — replaces 4-col facts-strip ─────────────────── */
.stat-pills {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.stat-pills::-webkit-scrollbar { display: none; }
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-primary);
}

/* ── Comps row (Fix 1 + Fix 4) — single-line context | slider | delta ────── */
.comps-row {
  padding: 8px 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.comps-context {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.comps-context-info { opacity: 0.55; cursor: help; }
.comps-track-wrap {
  flex: 1;
  position: relative;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  min-width: 40px;
}
.comps-track-gradient {
  position: absolute; inset: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--green-mid) 0%, #F5C842 55%, var(--coral) 100%);
  opacity: 0.85;
}
.comps-track-dot {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.comps-delta-label {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.1px;
}

/* Score ring (SVG-based gauge) */
.score-ring-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;     /* tap/click reveals the Score breakdown popover */
  width: 52px;
  height: 52px;
}
.score-ring-fill {
  transition: stroke-dashoffset 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hidden Gem — soft warm glow around the score circle */
.card.is-gem .score-ring-wrap {
  filter: drop-shadow(0 0 6px rgba(232, 162, 58, 0.5));
}
/* Great Value — softer green glow */
.card.is-goodvalue .score-ring-wrap {
  filter: drop-shadow(0 0 4px rgba(42, 122, 90, 0.3));
}
@media (prefers-reduced-motion: reduce) {
  .score-ring-fill { transition: none; }
}

/* 4-up facts strip */
.facts-strip {
  display: flex;
  background: var(--bg-muted);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* Why sentence */
.why-sentence {
  margin: 12px 16px 4px;
  font-size: 12px; color: var(--green-ink);
  background: var(--bg-page);
  padding: 8px 10px; border-radius: var(--radius-sm);
  line-height: 1.5;
}
.why-sentence.why-neutral { color: var(--text-secondary); background: var(--bg-muted); }
.why-sentence.why-suspect { color: var(--amber); }
/* Keyboard focus stays visible even where a rule set outline:none. */
:focus-visible { outline: 2px solid var(--green-mid, var(--green-deep)) !important; outline-offset: 2px; }
.comps-context[data-comps-tip] { cursor: pointer; }
.comps-tip-text {
  margin: 4px 16px 0; padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.4; color: var(--text-secondary); background: var(--bg-muted);
}
.details-note { font-size: 12px; color: var(--text-secondary); margin: 4px 0 2px; }
.btn-comps-list {
  margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: var(--bg-card, var(--bg-card)); font: inherit; font-size: 12px; cursor: pointer; color: var(--text-primary);
}
.comps-list { margin-top: 6px; max-height: 260px; overflow: auto; }
.comps-list-msg { font-size: 12px; color: var(--text-secondary); padding: 4px 0; }

/* ── Score reason bullets inside the callout ────────────────────────────── */
.callout-reasons {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.callout-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
}
.callout-reason .reason-icon {
  width: 14px;
  flex-shrink: 0;
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
}
.callout-reason .reason-component {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  line-height: 1.4;
  align-self: center;
}
.reason-component-price    { background: rgba(74, 144, 217, 0.15);  color: var(--blue-ink); }
.reason-component-property { background: rgba(42, 122, 90, 0.12);   color: var(--green-deep); }
.reason-component-location { background: rgba(232, 146, 42, 0.15);  color: var(--amber-ink); }
.reason-component-penalty  { background: rgba(224, 92, 75, 0.12);   color: var(--coral); }
.callout-reason .reason-text {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}
.callout-reason-positive .reason-icon { color: var(--green-deep); }
.callout-reason-negative .reason-icon { color: var(--coral); }
.callout-reason-neutral  .reason-icon { color: var(--text-muted); font-size: 14px; line-height: 1; }

/* Gradient comps bar */
.comps-bar-wrap { padding: 10px 16px 14px; }
.comps-bar-header {
  font-size: 12px; color: var(--text-secondary);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.comps-bar-track { height: 6px; background: var(--bg-muted); border-radius: var(--radius-xs); position: relative; }
.comps-bar-gradient {
  position: absolute; inset: 0; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--green-mid) 0%, var(--amber) 55%, var(--coral) 100%);
  opacity: 0.9;
}
.comps-bar-dot {
  position: absolute; top: -2.5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid currentColor;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

/* New card header (Variant A) */
.card-header-a {
  padding: 14px 16px 0;
  display: flex; align-items: flex-start; gap: 12px;
}
.card-title-a { flex: 1; min-width: 0; }
.card-neigh-a {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; color: var(--text-primary);
}
.card-subline-a { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

/* New price row (Variant A) */
.price-row-a {
  padding: 12px 16px 4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.price-main-a { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); }

/* New footer (Variant A) */
.card-footer-a {
  padding: 10px 16px 12px;
  display: flex; align-items: center; gap: 8px;
}
.card-footer-a .omi-note { font-size: 12px; color: var(--text-secondary); flex: 1; }

/* Area-median €/m² pill — sits next to the listing's own €/m² so the
   reader can see at a glance how the asking price compares per-m² to
   what the neighbourhood is fetching. Sized to match .specs-pill so
   the two pills in the price row are visually aligned. */
.price-area-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  vertical-align: middle;
}
.price-area-vs {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Listing's own €/m² — colour-coded against the area median. Same
   colour vocabulary as the .vs-omi / .vs-below pill family so the
   page reads consistently: green = below market, red = above,
   amber = at market. */
.price-area-ask              { font-weight: 600; }
.price-area-ask.tone-good    { color: var(--green-ink); }
.price-area-ask.tone-bad     { color: var(--coral-ink); }
.price-area-ask.tone-at      { color: var(--amber-ink); }
.price-area-ask.tone-neutral { color: var(--text-primary); }

/* Suggested rent row */
.suggested-rent-row {
  padding: 0 16px 8px;
  font-size: 12px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.suggested-rent-row .sug-label { color: var(--text-secondary); }
.suggested-rent-row .sug-val   { font-weight: 700; }
.sug-good  { color: var(--green-ink); }
.sug-warn  { color: var(--amber-ink); }
.sug-bad   { color: var(--coral-ink); }

/* Comps info line */
.comps-info-line {
  font-size: 12px; color: var(--text-primary); padding: 4px 0 2px;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
/* Explanation bullets */
.expl-list { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 2px; }
.expl-bullet {
  font-size: 12px; line-height: 1.4;
  padding: 2px 4px; border-radius: var(--radius-xs);
}
.expl-good { color: var(--green-ink); background: var(--bg-page); }
.expl-bad  { color: var(--coral-ink); background: var(--coral-light); }
.expl-warn { color: var(--amber-ink); background: var(--amber-light); }
/* Scoring settings panel */
.score-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  margin: 12px 0;
}
.ss-field { display: flex; flex-direction: column; gap: 4px; }
.ss-field label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.ss-field .ss-desc { font-size: 12px; color: var(--text-secondary); }
.ss-field input[type=number], .ss-field input[type=range] {
  font-size: 13px; padding: 5px 8px; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); background: var(--bg-page); color: var(--text-primary); width: 100%;
}
.ss-field .ss-range-row { display: flex; align-items: center; gap: 8px; }
.ss-field .ss-range-row input[type=range] { flex: 1; }
.ss-field .ss-range-val { font-size: 12px; font-weight: 700; min-width: 36px; color: var(--green-deep); }

/* Card footer */
.link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  justify-content: center;
  min-width: 78px;
  font-size: 12px; font-weight: 600; color: var(--bg-card);
  text-decoration: none;
  padding: 7px 14px;
  border: none;
  background: var(--green-deep);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background 140ms ease, transform 140ms ease;
  font-family: var(--font);
}
.link-btn:hover { background: var(--green-ink); transform: translateY(-1px); }
.link-btn:active { transform: translateY(0); }

/* Empty / error */
.empty {
  grid-column: 1/-1;
  text-align: center; padding: 60px 20px; color: var(--text-secondary);
}
.empty h3 { font-size: 20px; margin-bottom: 10px; color: var(--text-primary); }
.empty code {
  background: var(--bg-muted); padding: 3px 9px;
  border-radius: var(--radius-xs); font-size: 13px;
}
.empty p { line-height: 1.7; }

/* ── Favourites header link ── */
.fav-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.fav-link:hover { color: var(--text-primary); border-color: var(--green-deep); }
.fav-badge {
  background: var(--green-deep);
  color: var(--bg-card);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  display: none;
}
.fav-badge.visible { display: inline-block; }

/* ── Multi-select dropdown ── */
.msd-wrap { position: relative; }
.msd-trigger {
  background: var(--bg-muted);
  border: 1px solid transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  min-width: 140px;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
  font-family: var(--font);
}
.msd-trigger:hover { background: var(--border-strong); }
.msd-trigger.has-selection { background: var(--green-light); color: var(--green-deep); }
.msd-caret { margin-left: auto; opacity: 0.6; font-size: 12px; }
.msd-panel {
  display: none;   /* hidden by default — toggled via .is-open class, NOT the hidden attribute */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  z-index: 300;
  width: 240px;
  flex-direction: column;
  max-height: 340px;
}
.msd-panel.is-open { display: flex; }
.msd-search-input {
  background: var(--bg-muted);
  border: none; border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 8px 12px; font-size: 12px;
  outline: none; border-radius: 10px 10px 0 0;
  width: 100%;
  font-family: inherit;
}
.msd-list {
  overflow-y: auto; flex: 1; padding: 4px 0;
}
.msd-group-header {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-secondary);
  padding: 6px 12px 2px;
}
.msd-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; cursor: pointer; font-size: 12px;
  user-select: none;
}
.msd-option:hover { background: var(--bg-muted); }
.msd-option input[type=checkbox] { accent-color: var(--green-deep); cursor: pointer; flex-shrink: 0; }
.msd-footer {
  border-top: 1px solid var(--border-light);
  padding: 5px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.msd-footer-btn {
  background: none; border: 1px solid var(--border-light);
  color: var(--text-secondary); border-radius: var(--radius-xs);
  padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.msd-footer-btn:hover { border-color: var(--green-deep); color: var(--green-deep); }
.msd-footer-clear:hover { border-color: var(--coral); color: var(--coral); }

/* ── Tab bar ── */
.tab-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  padding: 0 24px;
  display: flex;
  gap: 0;
  position: sticky;
  top: 0;   /* adjusted by JS after measuring header height */
  z-index: 90;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  font-family: inherit;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--green-deep); border-bottom-color: var(--green-deep); }

/* ── Scanner panel — warm card ─────────────────────────────────────────── */
.scanner-panel {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin: 14px 24px 0;
}
@media (max-width: 768px) {
  .scanner-panel { margin: 12px 14px 0; padding: 14px 16px; border-radius: var(--radius-md); }
}
.scanner-meta  { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 0; }
.scanner-new-badge {
  display: none; font-size: 12px; font-weight: 700;
  background: var(--green-light); color: var(--green-deep);
  border: none; border-radius: var(--radius-full);
  padding: 3px 10px;
}
.scanner-new-badge.visible { display: inline-block; }

/* Idealista row inside the scanner card — subtle separator instead of new card */
#idealistaStatusRow,
#idealSaleStatusRow {
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 4px;
}

.new-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  background: var(--blue-light); color: var(--blue-ink);
  border-radius: var(--radius-full); padding: 2px 8px;
  vertical-align: middle; letter-spacing: 0.2px;
}

.btn-stop  { background: var(--coral-light); color: var(--coral); border: none; }
.btn-stop:hover:not(:disabled)  { background: var(--border-light); }

/* ── Card thumbnail ── */
.card-thumb {
  width: 100%;
  height: 155px;
  object-fit: cover;
  display: block;
  background: var(--bg-muted);
}
.card-thumb-placeholder {
  width: 100%; height: 0;   /* hidden when no image */
}

/* ── Source badge ── */
.source-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.source-pill.source-immobiliare {
  background: rgba(37,99,235,0.14);
  color: var(--blue-ink);
  border: 1px solid rgba(37,99,235,0.30);
}
.source-pill.source-idealista {
  background: rgba(234,179,8,0.18);
  color: var(--amber-ink);
  border: 1px solid rgba(234,179,8,0.40);
}

/* ── Email digest panel — warm card ───────────────────────────────────── */
.email-panel {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 4px 20px;
  margin: 14px 24px 0;
}
@media (max-width: 768px) {
  .email-panel { margin: 12px 14px 0; padding: 4px 16px; border-radius: var(--radius-md); }
}
.email-panel-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
}
.email-panel-header h3 {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--font);
}
.email-panel-body {
  display: none;
  padding-bottom: 16px;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}
.email-panel-body.is-open { display: block; }
.email-panel-caret {
  font-size: 12px; color: var(--text-muted);
  transition: transform 0.2s;
}
.email-panel-caret.open { transform: rotate(180deg); }

.email-row {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: flex-end; margin-bottom: 10px;
}
.email-group { display: flex; flex-direction: column; gap: 4px; }
.email-lbl   { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 2px; }
.email-input {
  background: var(--bg-muted);
  border: 1px solid transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  outline: none;
}
.email-input:hover { background: var(--border-strong); }
.email-input:focus {
  background: var(--bg-card);
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(42,122,90,0.15);
}
.email-input::placeholder { color: var(--text-muted); }
.email-input[type="password"] { letter-spacing: 2px; }

.email-section-sep {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin: 14px 0 10px;
  font-family: var(--font);
}

/* Toggle switch — warm tokens */
.email-toggle-wrap { display: flex; align-items: center; gap: 8px; }
.email-toggle {
  position: relative; display: inline-block;
  width: 38px; height: 22px; flex-shrink: 0;
}
.email-toggle input { opacity: 0; width: 0; height: 0; }
.email-slider {
  position: absolute; inset: 0; background: var(--bg-muted);
  border: 1px solid var(--border-light); border-radius: var(--radius-full);
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.email-slider::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 3px; bottom: 3px;
  background: var(--text-muted); border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.email-toggle input:checked + .email-slider { background: var(--green-light); border-color: var(--green-deep); }
.email-toggle input:checked + .email-slider::before { transform: translateX(16px); background: var(--green-deep); }

.btn-email {
  border: none; border-radius: var(--radius-full);
  padding: 8px 16px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  font-family: var(--font);
  transition: background 140ms ease, transform 140ms ease;
}
.btn-email-save { background: var(--green-deep); color: var(--bg-card); }
.btn-email-save:hover { background: var(--green-ink); transform: translateY(-1px); }
.btn-email-send { background: var(--bg-pill); color: var(--text-secondary); border: none; }
.btn-email-send:hover { background: var(--border-strong); color: var(--text-primary); }
.email-status { font-size: 12px; color: var(--text-muted); }

/* New sub-score colors */
.s-geo      { color: var(--green-mid); }   /* emerald */
.s-physical { color: #fb923c; }   /* orange */
.s-value    { color: #a78bfa; }   /* violet — city-wide value */

/* Score breakdown — badge wrap (item 4: global tooltip, no clipping) */
/* Cursor: pointer + subtle hover ring → users learn the score is clickable.
   Click toggles a pinned tooltip; hover still shows it as before on desktop. */
.score-badge-wrap,
.score-ring-wrap[data-sc-rent] {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.score-badge-wrap:hover,
.score-ring-wrap[data-sc-rent]:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 4px rgba(42, 122, 90, 0.10);
}
.score-ring-wrap[data-sc-rent].is-pinned,
.score-badge-wrap.is-pinned {
  box-shadow: 0 0 0 4px rgba(42, 122, 90, 0.18);
}
/* .score-breakdown is hidden; content read by JS global tooltip */
.score-breakdown { display: none; }
.sb-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sb-label { color: var(--text-secondary); }
.sb-val   { font-weight: 700; }
.sb-sep   { border-top: 1px solid var(--border-light); margin: 4px 0; }

/* ── Global fixed tooltip (item 4 + item 5: avoids card overflow:hidden clipping) ── */
#globalTooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 12px; color: var(--text-primary);
  white-space: normal;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  pointer-events: none;
  line-height: 1.9;
  min-width: 200px;
  max-width: 300px;
}
#globalTooltip .gt-title {
  font-weight: 700; margin-bottom: 4px; color: var(--green-deep); font-size: 12px;
}
#globalTooltip .gt-sep { border-top: 1px solid var(--border-light); margin: 4px 0; }

/* Geo coverage indicator + enrich button */
.geo-coverage {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
  white-space: nowrap;
}
.btn-enrich-geo {
  background: rgba(52,211,153,0.2);
  border: 1px solid rgba(52,211,153,0.4);
  color: var(--green-mid);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-enrich-geo:hover:not(:disabled) { background: rgba(52,211,153,0.35); }
.btn-enrich-geo:disabled { opacity: 0.45; cursor: not-allowed; }
.geo-progress-bar {
  height: 3px;
  background: rgba(52,211,153,0.2);
  border-radius: var(--radius-xs);
  overflow: hidden;
  width: 80px;
  display: none;
}
.geo-progress-fill {
  height: 100%; background: var(--green-mid);
  border-radius: var(--radius-xs);
  transition: width 0.4s ease;
}

/* (card-details styles defined above with global tooltip block) */
.details-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-secondary);
  margin: 0 0 6px;
}
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  font-size: 12px;
  margin-bottom: 10px;
}
.details-grid:last-child { margin-bottom: 0; }
.dg-row { display: flex; justify-content: space-between; gap: 6px; }
.dg-lbl { color: var(--text-secondary); white-space: nowrap; }
.dg-val { color: var(--text-primary); font-weight: 600; text-align: right; white-space: nowrap; }
.dg-val.good  { color: var(--green-mid); }
.dg-val.bad   { color: var(--coral); }
.dg-val.muted { color: var(--text-secondary); font-weight: 400; }

.btn-details-toggle {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%;
  background: none;
  border: none; border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.btn-details-toggle:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.btn-details-toggle.open  { color: var(--green-deep); }
.details-caret { font-size: 12px; transition: transform 0.2s; }
.btn-details-toggle.open .details-caret { transform: rotate(180deg); }

/* Geo score pill — uses global tooltip (no clipping) */
.geo-tooltip-wrap { display: inline-block; cursor: help; }
.geo-tooltip { display: none; }  /* content read by JS global tooltip */

/* OMI zone code pill (item 5) */
.omi-zone-pill {
  display: inline-block; cursor: help;
  background: rgba(45,106,79,0.08); color: var(--green-deep);
  border: 1px solid rgba(45,106,79,0.2);
  border-radius: var(--radius-xs); padding: 1px 7px; font-size: 12px; font-weight: 700;
}

/* ── Cache indicator row ── */
.cache-indicator {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-muted);
  flex-wrap: wrap;
  font-family: var(--font);
}
.cache-count { color: var(--text-secondary); font-weight: 600; }
.btn-cache-clear {
  background: none;
  border: none;
  color: var(--coral);
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font);
  transition: color 140ms ease;
}
.btn-cache-clear:hover { color: #C04638; }

/* ── Card details panel ── */
.card-details {
  display: none;
  padding: 10px 16px 12px;
  background: var(--bg-muted);
  border-top: 1px solid var(--border-light);
}
.card-details.open { display: block; }

/* ── Map view ── */
#mapView { display: flex; flex-direction: column; height: calc(100vh - 120px); }
#mapContainer { flex: 1; min-height: 0; }
.leaflet-popup-content-wrapper { border-radius: 12px !important; font-family: inherit; padding: 0 !important; overflow: hidden; }
.leaflet-popup-content { margin: 0 !important; }
.map-popup-img { width: 100%; height: 130px; object-fit: cover; display: block; }
.map-popup-body { padding: 10px 12px 12px; }
.map-popup-score {
  font-size: 14px; font-weight: 700;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.map-popup-score.high { background: var(--green-ink); color: var(--bg-card); }
.map-popup-score.mid  { background: var(--amber-ink); color: var(--bg-card); }
.map-popup-score.low  { background: var(--coral-ink); color: var(--bg-card); }
.map-popup-title { font-weight: 700; font-size: 13px; line-height: 1.3; }
.map-popup-sub   { color: var(--text-secondary); font-size: 12px; margin-top: 1px; }
.map-popup-price { font-size: 18px; font-weight: 700; margin: 8px 0 2px; }
.map-popup-comps { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.map-popup-comps.below { color: var(--green-ink); }
.map-popup-comps.above { color: var(--coral-ink); }
.map-popup-comps.at    { color: var(--amber-ink); }
.map-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.map-popup-link { display: block; text-align: center; background: var(--green-deep); color: var(--bg-card) !important; font-size: 12px; font-weight: 700; padding: 7px; border-radius: var(--radius-sm); text-decoration: none !important; }
.map-popup-link:hover { opacity: 0.88; }

/* ── Settings view ──
   Outer container is unconstrained — the inner .settings-page handles
   width + centering. The previous max-width:960px combined with no
   horizontal margin made the whole settings area hug the left edge of
   the screen on wide monitors. */
#settingsView { padding: 0; }

/* ── Branded loading state (initial-fetch placeholder) ─────────────────
   Replaces the "Lume hasn't scanned yet" empty-state message during the
   initial loadRentals() in-flight window. Three pieces:
     • Pulsing green-glow mark from the login screen for instant brand
       recognition + visible "something is happening" cue.
     • Localised "Lume is reading the listings…" text.
     • Three shimmering skeleton cards so the grid silhouette is right
       before the real cards land — softens the layout shift. */
.lume-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Match the real .grid padding (20 px 24 px) on the sides so the
     skeleton cards land exactly where the real cards will, no width
     pop on the swap. Generous top padding so the brand mark has room
     to breathe above the skeletons. */
  padding: 48px 24px 24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  /* CRITICAL: the loading container is mounted INSIDE #rentGrid /
     #salesGrid, which are themselves display:grid with 3 columns. As
     a grid item it would only take 1 column (~280 px wide), making
     the brand mark + skeletons look like a single tall card pinned
     to the left. grid-column: 1 / -1 spans every column so the
     loading state fills the full grid width. */
  grid-column: 1 / -1;
}
.lume-loading-mark {
  margin-bottom: 14px;
  animation: lume-loading-pulse 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.lume-loading-mark .lume-loading-halo {
  transform-origin: center;
  animation: lume-loading-halo 2.2s ease-in-out infinite;
}
.lume-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  margin-bottom: 28px;
}
@keyframes lume-loading-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.7; }
}
@keyframes lume-loading-halo {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.35); opacity: 0.55; }
}

/* Skeleton cards — placeholders that match the real listings grid
   layout exactly (3 columns on desktop, 1 on mobile) so the silhouette
   is identical to the cards that replace it. No max-width cap, so the
   skeletons fill the same width the real grid fills. */
.lume-loading-skeletons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.lume-skel-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0 0 14px 0;
  overflow: hidden;
}
.lume-skel-photo {
  height: 180px;
  background: linear-gradient(90deg,
    var(--bg-muted) 0%,
    rgba(255,255,255,0.7) 50%,
    var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: lume-skel-shimmer 1.4s linear infinite;
}
.lume-skel-line {
  height: 12px;
  margin: 14px 16px 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--bg-muted) 0%,
    rgba(255,255,255,0.7) 50%,
    var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: lume-skel-shimmer 1.4s linear infinite;
}
.lume-skel-line.w-80 { width: 80%; }
.lume-skel-line.w-40 { width: 40%; }
@keyframes lume-skel-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
/* Match the real .grid breakpoints exactly so the skeleton layout is
   identical to whatever the real listings would render at this width. */
@media (max-width: 1023px) {
  .lume-loading-skeletons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .lume-loading-skeletons { grid-template-columns: 1fr; gap: 12px; }
  .lume-loading           { padding: 28px 14px 16px; }
  .lume-skel-photo        { height: 160px; }
}

/* ── Data Quality section ── */
.dq-cards { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.dq-card { flex: 1; min-width: 170px; background: var(--bg-card); border-radius: var(--radius-sm); padding: 14px 16px; border: 1px solid var(--border-light); }
.dq-card-value { font-size: 28px; font-weight: 700; line-height: 1; }
.dq-card-label { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.dq-heatmap-row { margin-bottom: 14px; }
.dq-heatmap-tier { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); margin-bottom: 6px; }
.dq-heatmap-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.dq-cell { padding: 5px 8px; border-radius: var(--radius-xs); font-size: 12px; cursor: pointer; border: 2px solid transparent; transition: opacity 0.12s; }
.dq-cell:hover { opacity: 0.8; }
.dq-cell.dq-active { border-color: var(--green-deep); }
.dq-cell-name { font-weight: 600; }
.dq-cell-pct { font-size: 12px; opacity: 0.8; }
.cov-green  { background: var(--green-light); color: var(--green-ink); }
.cov-amber  { background: #fef9c3; color: var(--amber-ink); }
.cov-orange { background: var(--amber-light); color: #9a3412; }
.cov-red    { background: var(--coral-light); color: var(--coral-ink); }
.grade-badge-A { background: var(--green-ink); color: var(--bg-card); }
.grade-badge-B { background: #0d9488; color: var(--bg-card); }
.grade-badge-C { background: var(--amber-ink); color: var(--bg-card); }
.grade-badge-D { background: #ea580c; color: var(--bg-card); }
.grade-badge-F { background: var(--coral-ink); color: var(--bg-card); }
.dq-grade-bar { display: flex; height: 11px; border-radius: var(--radius-sm); overflow: hidden; min-width: 100px; gap: 1px; }
.dq-grade-seg { flex: 0 0 auto; }
.omi-tag { display: inline-block; padding: 2px 7px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; }
.omi-polygon   { background: var(--green-light); color: var(--green-ink); }
.omi-centroid  { background: #fef9c3; color: var(--amber-ink); }
.omi-nominatim { background: var(--blue-light); color: #1e40af; }
.omi-keyword   { background: var(--coral-light); color: var(--coral-ink); }
.omi-nocoord   { background: var(--coral-light); color: #831843; }
.omi-other     { background: var(--bg-page); color: #4b5563; }
.dq-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 12px; cursor: default; }
.dq-pill-crit { background: var(--coral-light); color: var(--coral-ink); }
.dq-pill-imp  { background: #fef9c3; color: var(--amber-ink); }
.dq-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dq-tbl th { text-align: left; padding: 6px 10px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); cursor: pointer; user-select: none; white-space: nowrap; }
.dq-tbl th:hover { color: var(--text-primary); }
.dq-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.dq-tbl tr:last-child td { border-bottom: none; }
.dq-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.dq-sel { font-size: 12px; padding: 4px 8px; border-radius: var(--radius-xs); border: 1px solid var(--border-light); background: var(--bg-page); color: var(--text-primary); font-family: inherit; }
.dq-btn-sm { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-xs); border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-family: inherit; }
.dq-btn-sm:hover { background: var(--border-light); }
.dq-btn-danger { border-color: var(--coral-ink); color: var(--coral-ink); }
.dq-btn-danger:hover { background: var(--coral-light); }
.dq-skeleton { height: 16px; border-radius: var(--radius-xs); background: var(--bg-muted); animation: skeleton-pulse 1.4s ease-in-out infinite; margin-bottom: 8px; }
@keyframes skeleton-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
.settings-section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-secondary); margin: 24px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.settings-section-title:first-child { margin-top: 0; }

/* ── Warm-card Settings layout ─────────────────────────────────────────
   Container + per-section card. Each section in Settings sits inside
   a .settings-card so the page reads as a stack of focused panels
   rather than a long form. Matches the listing card aesthetic. */
.settings-page {
  /* Wide enough that side-by-side cards (Hidden Gem | Great Value, etc.)
     breathe, but capped so reading line length stays comfortable on
     very large monitors. Centred horizontally — the previous 760 px
     left a huge empty gutter on a 27" screen and made the page look
     squished to the left. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
@media (max-width: 720px) {
  .settings-page { padding: 16px 12px 80px; }
}
.settings-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--border-light);
}
.settings-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.settings-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}
.settings-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.settings-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ── Scanner status indicator (right side of card header) ─────────────── */
.scanner-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.status-idle    { background: var(--text-muted); }
.status-dot.status-running {
  background: var(--green-deep);
  animation: settings-pulse 1.2s ease-in-out infinite;
}
@keyframes settings-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── City scan grid (Scanner card) ──────────────────────────────────── */
.city-scan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* Listing-kinds toggle (Rentals / Sales) — same look as city tiles, two
   columns. Sits in its own grid so it doesn't merge with city-scan-grid
   if the latter ever changes layout. */
@media (max-width: 500px) {
  .city-scan-grid { grid-template-columns: 1fr; }
}
.city-scan-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  user-select: none;
}
.city-scan-card:hover { border-color: var(--border-strong); }
.city-scan-card.city-scan-card-on {
  background: var(--green-light);
  border-color: var(--green-deep);
}
.city-scan-card input[type=checkbox] { display: none; }
.city-scan-icon { font-size: 20px; flex-shrink: 0; }
.city-scan-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.toggle-track {
  width: 36px;
  height: 20px;
  background: var(--border-strong);
  border-radius: var(--radius-sm);
  position: relative;
  transition: background 150ms ease;
  flex-shrink: 0;
}
.toggle-track.toggle-on { background: var(--green-deep); }
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: left 150ms ease;
}
.toggle-track.toggle-on .toggle-thumb { left: 18px; }

/* ── Scan settings row (number inputs) ──────────────────────────────── */
.scan-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 500px) {
  .scan-settings-grid { grid-template-columns: 1fr; }
}
.scan-setting { display: flex; flex-direction: column; gap: 6px; }
.scan-setting-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.scan-setting-input {
  padding: 9px 12px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font);
  background: var(--bg-muted);
  color: var(--text-primary);
  outline: none;
  transition: border 150ms ease, background 150ms ease;
  width: 100%;
  box-sizing: border-box;
}
.scan-setting-input:focus {
  border-color: var(--green-deep);
  background: var(--bg-card);
}
.scan-last-run {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.scan-skipped-details {
  margin: 0 0 14px;
  font-size: 12px;
  background: rgba(217, 119, 6, 0.06);
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.scan-skipped-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--amber-ink);
  user-select: none;
  list-style: none;
}
.scan-skipped-details > summary::-webkit-details-marker { display: none; }
.scan-skipped-details > summary::before { content: '▸ '; display: inline-block; transition: transform 0.15s; }
.scan-skipped-details[open] > summary::before { transform: rotate(90deg); }
.scan-skipped-list {
  margin: 10px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scan-skipped-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  color: var(--text-primary);
}
.scan-skipped-item code {
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 12px;
}
.scan-fix-hint {
  font-size: 12px;
  color: var(--green-mid);
}
.scan-skipped-help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Archive-listing banner stack (bottom-right floating prompt) ─────────────
   Fires when the user clicks the "View" link on a card. Lets them flip
   is_stale=true on a listing they just confirmed is no longer available
   on the source site, without leaving the dashboard. */
.archive-banner-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;       /* container is invisible; children re-enable */
}
.archive-banner {
  pointer-events: auto;
  background: var(--bg-card, var(--bg-card));
  border: 1.5px solid var(--border-strong, var(--border-strong));
  border-left: 4px solid var(--amber, var(--amber-ink));
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--text-primary, var(--text-primary));
  display: flex;
  align-items: center;
  gap: 10px;
  animation: archive-banner-slide-in 200ms ease-out;
}
@keyframes archive-banner-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.archive-banner.is-done   { border-left-color: var(--green-mid, var(--green-ink)); }
.archive-banner.is-error  { border-left-color: var(--coral, var(--coral)); }
.archive-banner-text { flex: 1; min-width: 0; line-height: 1.35; }
.archive-banner-sub  { font-size: 12px; color: var(--text-muted, #71717a); margin-top: 2px; }
.archive-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.archive-banner-btn {
  border: 1.5px solid var(--border-light, var(--border-light));
  background: var(--bg-card, var(--bg-card));
  border-radius: var(--radius-sm, 4px);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary, var(--text-primary));
}
.archive-banner-btn.primary {
  border-color: var(--amber, var(--amber-ink));
  color: var(--amber, var(--amber-ink));
}
.archive-banner-btn.primary:hover {
  background: var(--amber, var(--amber-ink));
  color: var(--bg-card);
}
.archive-banner-btn.subtle {
  color: var(--text-muted, #71717a);
  border-color: transparent;
  background: transparent;
  font-weight: 500;
}
.archive-banner-btn.subtle:hover {
  background: var(--bg-muted, var(--bg-page));
}
.archive-banner-btn[disabled] { opacity: 0.5; cursor: progress; }
.scan-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-scan-start,
.btn-scan-stop,
.btn-scan-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background 150ms ease, border-color 150ms ease;
}
.btn-scan-start  { background: var(--green-deep); color: white; }
.btn-scan-start:hover:not(:disabled)  { background: var(--green-ink); }
.btn-scan-stop   { background: var(--coral); color: white; }
.btn-scan-stop:hover:not(:disabled)   { background: #C04535; }
.btn-scan-start:disabled,
.btn-scan-stop:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-scan-secondary {
  background: var(--bg-muted);
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
}
.btn-scan-secondary:hover { border-color: var(--border-strong); background: var(--bg-card); }

/* ── Scan Areas: per-city tab row ─────────────────────────────────── */
.scan-areas-city-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.scan-areas-city-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  user-select: none;
}
.scan-areas-city-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }
.scan-areas-city-tab.is-active {
  background: var(--green-light);
  border-color: var(--green-deep);
  color: var(--green-deep);
}

/* ── Scan Areas: macro-area card grid ─────────────────────────────── */
.scan-areas-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.scan-areas-actions .btn-secondary {
  padding: 6px 12px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.scan-areas-actions .btn-secondary:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.scan-areas-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.scan-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.scan-area-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  user-select: none;
}
.scan-area-card:hover { border-color: var(--border-strong); }
.scan-area-card.scan-area-card-on {
  background: var(--green-light);
  border-color: var(--green-deep);
}
.scan-area-card input { display: none; }
.scan-area-card-content {
  flex: 1;
  min-width: 0;
}
.scan-area-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scan-area-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.scan-area-toggle { flex-shrink: 0; }
.scan-areas-city-tab .city-tab-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius-full);
  padding: 1px 7px;
}
.scan-areas-city-tab.is-active .city-tab-count {
  color: var(--green-deep);
  background: white;
}

/* ── Enrichment panel ────────────────────────────────────────────────────
   Per-city × per-kind progress rows, rendered in #enrichmentPanelBody by
   _renderEnrichmentPanel() on every /scanner-status tick. The "Run all"
   button issues a single POST and the orchestrator drains the queue
   sequentially — the user clicks once and walks away. */
.enrich-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.enrich-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 16px; }
.enrich-toolbar .btn-run-all {
  background: var(--green-deep); color: var(--bg-card); border: 0; border-radius: var(--radius-sm);
  padding: 9px 18px; font-weight: 700; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.enrich-toolbar .btn-run-all:hover:not(:disabled) { background: var(--green-deep, var(--green-ink)); }
.enrich-toolbar .btn-run-all:disabled { opacity: 0.5; cursor: not-allowed; }
.enrich-toolbar .btn-stop {
  background: rgba(220, 38, 38, 0.08); color: var(--coral-ink); border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius-sm); padding: 8px 14px; font-weight: 600; cursor: pointer; font-size: 12px;
}
.enrich-toolbar .btn-stop:hover { background: rgba(220, 38, 38, 0.16); }
/* One row per city; rentals + sales are two equal columns inside. */
.enrich-row {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  align-items: stretch; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color 120ms ease, background 120ms ease;
}
.enrich-row.is-running   { border-color: rgba(45, 106, 79, 0.55); background: rgba(45, 106, 79, 0.05); }
.enrich-row.is-error     { border-color: rgba(220, 38, 38, 0.55); background: rgba(220, 38, 38, 0.04); }
.enrich-row .city-name {
  font-weight: 700; font-size: 14px; align-self: center;
  display: flex; flex-direction: column; gap: 2px;
}
.enrich-row .city-name .city-pending-total {
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.enrich-cell {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-muted, var(--bg-page));
  border: 1px solid transparent;
  transition: border-color 120ms ease, background 120ms ease;
}
.enrich-cell.is-running { border-color: rgba(45, 106, 79, 0.45); background: rgba(45, 106, 79, 0.08); }
.enrich-cell.is-queued  { border-color: rgba(120, 113, 108, 0.35); }
.enrich-cell.is-done    { opacity: 0.78; }
.enrich-cell.is-error   { border-color: rgba(220, 38, 38, 0.45); background: rgba(220, 38, 38, 0.06); }
.enrich-cell.is-stopped { border-color: rgba(120, 113, 108, 0.45); opacity: 0.72; }
.enrich-state.is-stopped { color: var(--text-secondary); }
.enrich-cell .kind-pill {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: var(--radius-full); background: var(--bg-card); color: var(--text-secondary);
  font-weight: 700; text-align: center;
}
.enrich-cell .kind-pill.is-rental { background: rgba(45, 106, 79, 0.15); color: var(--green-deep); }
.enrich-cell .kind-pill.is-sale   { background: rgba(14, 116, 144, 0.15); color: var(--blue-ink); }
.enrich-bar {
  position: relative; height: 8px; background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full); overflow: hidden;
}
.enrich-bar-fill {
  position: absolute; inset: 0; right: auto; width: 0%;
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--green-ink) 100%);
  border-radius: inherit; transition: width 280ms ease;
}
.enrich-bar-fill.is-indeterminate {
  width: 30% !important;
  animation: enrich-indet 1.1s ease-in-out infinite alternate;
}
@keyframes enrich-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}
.enrich-cell .meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 80px;
}
.enrich-count {
  font-size: 12px; color: var(--text-primary); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.enrich-count .pending-num {
  font-size: 13px; font-weight: 700; color: var(--green-deep);
}
.enrich-state {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; line-height: 1.2;
}
.enrich-state.is-running { color: var(--green-deep); }
.enrich-state.is-queued  { color: var(--text-secondary); }
.enrich-state.is-done    { color: var(--green-deep); }
.enrich-state.is-error   { color: var(--coral-ink); }
.enrich-state.is-idle    { color: var(--text-secondary); }
.enrich-cell .cell-error {
  grid-column: 1 / -1; font-size: 12px; color: var(--coral-ink); margin-top: 4px;
}
@media (max-width: 720px) {
  .enrich-row { grid-template-columns: 1fr; gap: 8px; }
  .enrich-row .city-name { font-size: 14px; }
  .enrich-cell { grid-template-columns: 60px 1fr auto; gap: 8px; }
}
.area-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.area-table th {
  text-align: left; padding: 6px 12px;
  background: var(--bg-muted); border-bottom: 2px solid var(--border-light);
  font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.area-table td { padding: 6px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.area-table tr:hover td { background: var(--bg-muted); }
.area-table select {
  font-size: 12px; padding: 3px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; max-width: 200px;
}
.area-table select[multiple] {
  min-width: 280px;
  max-width: 360px;
  min-height: 120px;
  padding: 6px 8px;
}
.settings-save-btn {
  margin-top: 16px; background: var(--green-deep); color: var(--bg-card);
  border: none; border-radius: var(--radius-sm); padding: 8px 20px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.settings-save-btn:hover { opacity: 0.88; }
.settings-status { margin-left: 12px; font-size: 12px; color: var(--text-secondary); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-xs); }

/* ── SVG Wordmark ── */
.logo-wordmark { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-text { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; color: var(--text-primary); }
.logo-text .logo-scorer { color: var(--green-deep); }

/* ── Live / Snapshot status pill (header) ── */
/* ── City selector (multi-city expansion, migration 007) ──────────────────
   Pill next to the Lume wordmark. Opens a dropdown of every active city
   from the Supabase cities table; clicking one re-fetches listings
   scoped to that city. State is persisted to localStorage so the choice
   sticks across reloads. */

.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap;
}
.status-pill .status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0;
}
.status-pill.is-live .status-dot { background: var(--green-mid); }


/* ── GitHub Actions CI status pill ── */
@keyframes ci-pulse { to { opacity: 0.4; } }

/* ── Mobile layout ── */
@media (max-width: 768px) {
  /* Global horizontal overflow lock — any single overflowing element on
     mobile makes the whole page rubber-band sideways. Apply ONLY to
     <html>, not <body>: overflow on body breaks position: sticky on
     descendants (the sticky element's nearest-scrolling-ancestor
     becomes <body> and sticky stops working). The .view-mode-toggle-wrap
     needs sticky to work, so we keep body's overflow-x at visible.
     Legitimate horizontal scroll inside .stats-bar / .filter-row
     still works because they're inner overflow-x:auto containers. */
  html {
    max-width: 100vw;
    overflow-x: hidden;
  }
  body { max-width: 100vw; }
  /* iOS Safari auto-zooms on any input whose font-size is < 16 px when
     it gets focus — which then rescales the entire viewport and
     leaves the user manually pinch-zooming back out. Inputs inside
     the filter drawer (msd-search-input is 12 px, the score number is
     13 px etc.) all triggered this. Force a minimum 16 px on every
     focusable form field on mobile to disable the auto-zoom. The
     desktop sizing is untouched (rule is gated by the mobile media
     query). */
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
  /* Fixed mobile header. The combined safe-area + 56 px content row
     means the actual painted height grows with the device — needed so
     the body padding-top calc below matches. */
  header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top);
    box-sizing: content-box;     /* keep 56 px visible chrome below the inset */
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;                    /* tighter gap so all 5 items fit @ 390px */
    z-index: 200;
  }
  /* The Sign-in / avatar circle: never shrink + always paint inside the
     header bounds even when other items push for space. */
  #user-avatar, #user-avatar-wrap { flex-shrink: 0; }
  /* Cards: rare CSS rule that survived prior refactors — make sure no
     child can push the card wider than its container. */
  .card { max-width: 100%; overflow: hidden; }
  /* Push content below fixed header */
  body > *:not(header):not(#onboardingOverlay):not(#mobileFilterDrawer):not(#mobileFilterBackdrop) {
    padding-top: 0;
  }
  nav.tab-bar {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top));
    left: 0; right: 0;
    z-index: 190;
    padding: 0 12px;
    overflow-x: auto;
  }
  /* Main content offset so it clears fixed header + tab bar */
  main#content { margin-top: calc(56px + 44px + env(safe-area-inset-top)); }
  /* Hide server-note in header on mobile */
  .server-note { display: none !important; }
  /* Hide meta (listing count) from header on mobile */
  header .meta { display: none !important; }
  /* Status pill — hide on mobile */
  .status-pill { display: none !important; }
  /* Saved: icon-only, count as a small overlay */
  #favLink { position: relative; width: var(--control-h); padding: 0; }
  #favLink .fav-badge { position: absolute; top: -6px; right: -6px; height: 18px; min-width: 18px; padding: 0 4px;
                        background: var(--text-primary); color: var(--bg-card); }
  .logo-wordmark svg { width: 92px; }
  /* Card tap feedback */
  .card:active { transform: scale(0.98) !important; transition: transform 80ms !important; }
  /* Scanner panel padding */
  .scanner-panel { padding: 10px 12px; }
  /* Hide the sales & rentals scanner control panels on mobile */
  #sScanPanel,
  #rentalsView > .scanner-panel {
    display: none !important;
  }
  /* Favourites: icon-only on mobile */
  .fav-label { display: none; }
  /* Language toggle takes ~70px on a 390px viewport and is set once;
     move it to Settings (or keep it on desktop only). Hiding here
     frees space for the user avatar which was getting pushed off the
     right edge due to `header { overflow: hidden }`. */
  header .lang-toggle { display: none !important; }
  /* Scan status / meta: prevent header overflow on mobile */
  .scanner-meta, .scan-status-indicator, #sScanMeta {
    flex-shrink: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; max-width: 100px;
  }
  header { overflow: hidden; max-width: 100vw; }
  /* User avatar: full size on mobile too + never shrink/clip so the
     signed-in indicator is always reachable. */
  #user-avatar      { flex-shrink: 0; }
  #user-avatar-wrap { flex-shrink: 0; }
}

/* Mobile filter trigger — hidden on desktop */
.mobile-filter-btn { display: none; }

/* ── Mobile filter drawer (bottom sheet) ── */
#mobileFilterBackdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 400;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#mobileFilterBackdrop.is-open { display: block; opacity: 1; }

#mobileFilterDrawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  z-index: 500;
  max-height: 85vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
#mobileFilterDrawer.is-open {
  transform: translateY(0);
}
#mobileFilterDrawer.is-closing {
  transition: transform 0.25s ease-in;
}

.drawer-handle {
  width: 36px; height: 4px;
  background: var(--bg-pill); border-radius: var(--radius-xs);
  margin: 12px auto 0;
  flex-shrink: 0;
}
.drawer-title-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.drawer-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.drawer-reset-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--green-deep);
  padding: 4px 0;
}
.drawer-body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 20px 16px;
  /* `contain`: scroll never propagates to the underlying page once the
     drawer's own scroll hits top/bottom — iOS Safari otherwise treats
     the bottom-sheet's edge as the start of a page scroll, which makes
     the whole modal feel like it's being dragged when the user is just
     trying to scroll the area list. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.drawer-field { margin-bottom: 16px; }
.drawer-range-wrap { display: flex; align-items: center; gap: 10px; }
.drawer-range-wrap input[type=range] { flex: 1; accent-color: var(--green-deep); }
.drawer-range-val { font-size: 13px; font-weight: 700; color: var(--green-deep); min-width: 28px; }
/* ── Area searchable multiselect (inside drawer) ── */
.area-msearch {
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: text;
  background: var(--bg-muted);
}
.area-msearch-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.area-msearch-tags:empty { margin-bottom: 0; }
.area-msearch-tag {
  background: var(--green-deep); color: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 3px 6px 3px 8px;
  font-size: 12px; font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.area-msearch-tag button {
  background: none; border: none; color: var(--bg-card); cursor: pointer;
  padding: 0; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center;
}
.area-msearch-input {
  border: none; background: none; color: var(--text-primary);
  font-size: 14px; outline: none; width: 100%; min-width: 80px;
  font-family: inherit;
  padding: 4px 2px;
}
.area-msearch-input::placeholder { color: var(--text-secondary); }
.area-msearch-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 600;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  max-height: 220px; overflow-y: auto;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.area-msearch-option {
  padding: 8px 12px; font-size: 14px; cursor: pointer;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.area-msearch-option:hover,
.area-msearch-option.focused { background: rgba(45,106,79,0.08); }
.area-msearch-option.selected { color: var(--green-deep); font-weight: 600; }
.area-msearch-option .opt-check {
  width: 14px; height: 14px;
  flex-shrink: 0;
  accent-color: var(--green-deep);
  pointer-events: none;
}
.area-msearch-empty {
  padding: 10px 12px; font-size: 12px; color: var(--text-secondary);
}

/* Mobile map filter button — hidden on desktop */
#mapFilterBtn { display: none; }

/* ── Card entrance animations ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .card {
    animation: cardIn 0.35s ease-out both;
  }
  .card:nth-child(1)  { animation-delay: 0.00s; }
  .card:nth-child(2)  { animation-delay: 0.05s; }
  .card:nth-child(3)  { animation-delay: 0.10s; }
  .card:nth-child(4)  { animation-delay: 0.15s; }
  .card:nth-child(5)  { animation-delay: 0.20s; }
  .card:nth-child(6)  { animation-delay: 0.25s; }
  .card:nth-child(n+7) { animation-delay: 0.25s; }

  @keyframes gemPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
  }
  .gem-photo-chip {
    animation: gemPulse 2.5s ease-in-out infinite;
  }

  /* Tab content fade */
  #salesView, #rentalsView, #mapView, #settingsView {
    animation: tabFadeIn 0.2s ease-out both;
  }
  @keyframes tabFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ── Onboarding overlay ── */
#onboardingOverlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--bg-page);
  /* no overflow:hidden — the inner .onboard-slides handles its own scrolling */
  display: none; flex-direction: column;
}
#onboardingOverlay.is-visible {
  display: flex;
}
#onboardingOverlay.hiding {
  animation: onboardFadeOut 0.4s ease forwards;
}
@keyframes onboardFadeOut {
  to { opacity: 0; }
}
.onboard-progress {
  position: fixed; top: max(16px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 1010;
  pointer-events: none;
}
.onboard-dot {
  width: 6px; height: 6px; border-radius: var(--radius-xs);
  background: rgba(45,106,79,0.2);
  transition: background 0.3s, width 0.3s;
}
.onboard-dot.active { background: var(--green-deep); width: 18px; }
.onboard-skip {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 20px;
  z-index: 1010;
  background: none; border: none;
  font-size: 14px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  padding: 6px 10px;
}
.onboard-slides {
  flex: 1;                     /* fill the fixed overlay */
  min-height: 0;               /* allow flex child to shrink below content height */
  overflow-y: scroll;          /* always scrollable — avoids snap failing on bounce */
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.onboard-slides::-webkit-scrollbar { display: none; }
.onboard-slide {
  height: 100svh;
  min-height: 100vh;           /* fallback for browsers without svh */
  flex-shrink: 0;              /* prevent squashing inside the flex scroll container */
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 72px 32px 40px;
  text-align: center;
  position: relative;
}
.onboard-slide h2 {
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 700; line-height: 1.2;
  letter-spacing: -0.5px; color: var(--text-primary);
  margin-bottom: 14px;
}
.onboard-slide p {
  font-size: 16px; color: var(--text-secondary);
  line-height: 1.6; max-width: 360px;
}
.onboard-big-number {
  font-size: clamp(72px, 20vw, 96px);
  font-weight: 700; line-height: 1;
  color: var(--coral); margin-bottom: 16px;
}
.slide2 { background: var(--bg-page); }

.onboard-step-cards { width: 100%; max-width: 400px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 12px; }
.onboard-step-card {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left;
}
.onboard-step-icon { font-size: 24px; flex-shrink: 0; }
.onboard-step-body h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.onboard-step-body p  { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* Score demo for slide 4 */
.onboard-score-demo { margin: 20px auto; }
.onboard-score-circle {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(22,163,74,0.10); border: 3px solid var(--green-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: var(--green-ink);
  margin: 0 auto 20px;
}
.onboard-bars { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.onboard-bar-row { text-align: left; }
.onboard-bar-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: flex; justify-content: space-between; }
.onboard-bar-track { height: 8px; background: var(--border-light); border-radius: var(--radius-xs); overflow: hidden; }
.onboard-bar-fill  { height: 100%; border-radius: var(--radius-xs); background: var(--green-deep); width: 0; transition: width 0.6s ease-out; }
.onboard-bar-fill.filled { }

/* Slide 5 CTA */
.slide5 { background: var(--green-ink); }
.slide5 h2, .slide5 p, .slide5 small { color: var(--bg-card) !important; }
.slide5 p { color: rgba(255,255,255,0.8) !important; }

.onboard-drift-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.onboard-drift-circle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.15); filter: blur(60px);
}
@media (prefers-reduced-motion: no-preference) {
  .onboard-drift-circle:nth-child(1) { width: 300px; height: 300px; top: -10%; left: -10%; animation: drift1 6s ease-in-out infinite alternate; }
  .onboard-drift-circle:nth-child(2) { width: 250px; height: 250px; top: 40%; right: -15%; animation: drift2 8s ease-in-out infinite alternate; }
  .onboard-drift-circle:nth-child(3) { width: 200px; height: 200px; bottom: 0%; left: 20%; animation: drift3 7s ease-in-out infinite alternate; }
  @keyframes drift1 { from { transform: translate(0,0); }   to { transform: translate(20px, 20px); } }
  @keyframes drift2 { from { transform: translate(0,0); }   to { transform: translate(-20px,15px); } }
  @keyframes drift3 { from { transform: translate(0,0); }   to { transform: translate(10px,-20px); } }
}

.onboard-cta-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 360px;
  height: 56px;
  background: var(--bg-card); color: var(--green-ink);
  border: none; border-radius: var(--radius-md);
  font-size: 18px; font-weight: 700;
  cursor: pointer; margin-top: 28px;
  font-family: inherit;
  transition: opacity 0.15s;
}
.onboard-cta-btn:hover { opacity: 0.92; }

@media (prefers-reduced-motion: no-preference) {
  .ob-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .ob-animate.ob-visible { opacity: 1; transform: translateY(0); }
  .ob-delay-1 { transition-delay: 0.15s; }
  .ob-delay-2 { transition-delay: 0.30s; }
  .ob-delay-3 { transition-delay: 0.45s; }
}

/* ── Icons (assets/icons.svg sprite, Tabler outline) ────────────────────── */
.i { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em;
     fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ══════════════════════════════════════════════════════════════════════════
   Design system components (2026-10-15 review)
   Buttons are rounded rectangles; pills are reserved for chips, badges and
   segmented controls. Sizes: sm 32 · md 36 · lg 44 (44 everywhere on touch).
   ══════════════════════════════════════════════════════════════════════════ */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Keyboard focus: always visible, 3:1+ against every surface */
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       height: var(--control-h); padding: 0 14px; border-radius: var(--radius-control);
       border: 1px solid transparent; background: transparent; color: var(--text-primary);
       font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap;
       text-decoration: none; cursor: pointer; flex: none;
       transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.btn .i { width: 16px; height: 16px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--green-deep); color: var(--text-inverse); }
.btn-primary:hover:not(:disabled) { background: var(--green-ink); }
.btn-secondary { background: var(--bg-card); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-muted); }
.btn-ghost { color: var(--green-ink); }
.btn-ghost:hover:not(:disabled) { background: var(--green-light); }
.btn-danger { background: var(--bg-card); border-color: var(--border-strong); color: var(--coral-ink); }
.btn-danger:hover:not(:disabled) { background: var(--coral-light); border-color: var(--coral-ink); }
.btn-danger-text { color: var(--coral-ink); }
.btn-danger-text:hover:not(:disabled) { background: var(--coral-light); }
.btn-sm { height: 32px; padding: 0 10px; }
.btn-lg { height: var(--control-h-lg); padding: 0 18px; font-size: var(--text-md); }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* ── Segmented control (deal type, source, language) ── */
.seg { display: inline-flex; align-items: stretch; gap: 2px; height: var(--control-h); padding: 3px;
       background: var(--bg-muted); border-radius: var(--radius-full); flex: none; }
.seg .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
                border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary);
                font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
                transition: background 140ms ease, color 140ms ease; }
.seg .seg-btn:hover { color: var(--text-primary); }
.seg .seg-btn.active { background: var(--bg-card); color: var(--text-primary);
                       box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 0 0 1px var(--border-light); }
.seg .seg-btn.active[data-gem="good"]   { color: var(--green-ink); }
.seg .seg-btn.active[data-gem="hidden"] { color: var(--gem-ink); }
.seg .pill-count { font-weight: 500; color: var(--text-secondary); }
.seg-full { display: flex; width: 100%; }
.seg-full .seg-btn { flex: 1; padding: 0 8px; }

/* ── Inputs ── */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.input, select.input { height: var(--control-h); width: 100%; max-width: none; padding: 0 10px;
         border: 1px solid var(--border-strong); border-radius: var(--radius-control);
         background: var(--bg-card); color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; }
.input:hover { background: var(--bg-card); border-color: var(--text-muted); }
.input:focus { outline: none; border-color: var(--green-deep); background: var(--bg-card);
               box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-deep) 22%, transparent); }
.input::placeholder { color: var(--text-muted); }
input[type=range] { accent-color: var(--green-deep); }
input[type=checkbox] { accent-color: var(--green-deep); width: 16px; height: 16px; }

/* ── Header ── */
header { gap: 10px; padding: 10px 24px; z-index: var(--z-sticky); }
.hdr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h);
           padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-control);
           background: var(--bg-card); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600;
           cursor: pointer; flex: none; text-decoration: none; white-space: nowrap; }
.hdr-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.hdr-btn .i { width: 18px; height: 18px; }
.hdr-icon { width: var(--control-h); padding: 0; position: relative; }
.fav-link .i { color: var(--text-primary); }
.fav-badge { display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
             background: var(--bg-muted); color: var(--text-primary); font-size: var(--text-xs); font-weight: 700;
             align-items: center; justify-content: center; }
.fav-badge.visible { display: inline-flex; }
.lang-toggle .seg-btn { padding: 0 10px; font-size: var(--text-xs); letter-spacing: .04em; }
.user-avatar-wrap { position: relative; flex: none; }
.user-avatar.is-signed-in { width: var(--control-h); padding: 0; border-radius: 50%; border-color: transparent;
                            background: var(--green-deep); color: var(--text-inverse); }
.meta { font-size: var(--text-sm); }
.status-pill { position: relative; display: inline-flex; align-items: center; justify-content: center;
               width: 20px; height: 20px; cursor: help; }
.status-pill .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.status-pill.is-live .status-dot { background: var(--green-deep); box-shadow: 0 0 0 3px var(--green-light); }
.mobile-filter-btn .fb-badge { position: absolute; top: -6px; right: -6px; }
.hdr-btn.mobile-filter-btn { display: none; }
.msd-trigger { justify-content: space-between; gap: 8px; }
.msd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* ── Tab bar ── */
.tab-bar { z-index: var(--z-sticky); }
.tab-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
           border-bottom-width: 2px; font-size: var(--text-sm); }
.tab-btn .i { width: 18px; height: 18px; margin: 0; }
.tab-btn.active { color: var(--green-ink); border-bottom-color: var(--green-deep); }

/* Views only some tabs show */
body[data-tab="saved"] #filterBar, body[data-tab="insights"] #filterBar, body[data-tab="settings"] #filterBar,
body[data-tab="sales"] #filterBar, body[data-tab="sales"] #rActiveChips,
body[data-tab="saved"] #rActiveChips, body[data-tab="insights"] #rActiveChips, body[data-tab="settings"] #rActiveChips { display: none; }

/* ── Filter bar: one sticky row; panels open as popovers below it ── */
.filters.fbar { display: block; padding: 10px 12px; margin: var(--s-4) var(--s-6) 0; z-index: var(--z-sticky); }
.filters.fbar.is-stuck { margin-left: 0; margin-right: 0; }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fbar .seg .seg-btn { padding: 0 10px; }
.fbar .msd-trigger, .fb-field { height: var(--control-h); border: 1px solid var(--border-strong);
       border-radius: var(--radius-control); background: var(--bg-card); color: var(--text-primary); }
.fbar .msd-trigger { min-width: 140px; padding: 0 10px; font-size: var(--text-sm); font-weight: 500; }
.fbar .msd-trigger:hover, .fb-field:hover { border-color: var(--text-muted); background: var(--bg-card); }
.fbar .msd-trigger.has-selection { background: var(--green-light); border-color: var(--green-deep); color: var(--green-ink); }
.msd-trigger .i { width: 14px; height: 14px; margin-left: auto; color: var(--text-secondary); }
.fb-field { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; font-size: var(--text-sm); }
.fb-field:focus-within { border-color: var(--green-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-deep) 22%, transparent); }
.fb-field input { border: 0; outline: none; background: transparent; height: 100%; padding: 0; width: 76px;
                  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); -moz-appearance: textfield; }
.fb-field input::-webkit-outer-spin-button, .fb-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fb-field input::placeholder { color: var(--text-muted); font-weight: 400; }
.fb-field-narrow input { width: 52px; }
.fb-field .i { width: 16px; height: 16px; color: var(--text-secondary); }
.fb-sort select { field-sizing: content; border: 0; background: transparent; height: 100%; padding: 0 2px; max-width: none;
                  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); cursor: pointer; outline: none; box-shadow: none; }
.fb-sort select:hover, .fb-sort select:focus { background: transparent; box-shadow: none; }
.fb-prefix, .fb-suffix { color: var(--text-secondary); }
.fb-btn.on, .fb-btn[aria-expanded="true"] { background: var(--green-light); border-color: var(--green-deep); color: var(--green-ink); }
.fb-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--green-deep);
            color: var(--text-inverse); font-size: var(--text-xs); font-weight: 700; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center; }
.fb-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown);
            max-height: min(70vh, 600px); overflow: auto; padding: var(--s-4); background: var(--bg-card);
            border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.fb-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
#rMorePanel .fb-panel-foot { justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: var(--s-3); }
.fb-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); cursor: pointer; min-height: 32px; }
.fb-check-box { height: var(--control-h); }
.fb-hint { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--s-2); }
.fb-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3) var(--s-4); }
/* The source buttons (four sites since Subito) don't fit one 190 px column. */
.fb-more-grid .field-span2 { grid-column: span 2; }
.fb-more-grid .field-span2 .seg-full { max-width: 420px; }
.score-filter { display: flex; align-items: center; gap: var(--s-2); height: var(--control-h); }
.score-filter .score-slider { flex: 1; min-width: 60px; }
.score-filter .score-number-input { width: 64px; flex: none; text-align: center; }
.must-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.must-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; min-height: 52px;
             border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-card);
             color: var(--text-primary); text-align: left; cursor: pointer; }
.must-chip:hover { border-color: var(--text-muted); }
.must-chip.on { border-color: var(--green-deep); background: var(--green-light); }
.must-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; }
.must-label .i { width: 16px; height: 16px; color: var(--text-secondary); }
.must-chip.on .must-label, .must-chip.on .must-label .i { color: var(--green-ink); }
.must-count { font-size: var(--text-xs); color: var(--text-secondary); padding-left: 24px; }
.must-count strong { color: var(--text-primary); font-weight: 600; }

/* Active-filter chips (scroll with the page) */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s-3) var(--s-6) 0; min-height: 32px; }
.fchip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 12px;
         border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--bg-card);
         font-size: var(--text-xs); font-weight: 500; color: var(--text-primary); cursor: pointer; }
.fchip:hover { border-color: var(--border-strong); background: var(--bg-muted); }
.fchip .i { width: 14px; height: 14px; color: var(--text-secondary); }
.fchips-count { margin-left: auto; font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.fchips-count strong { color: var(--text-primary); font-weight: 700; }

/* ── Cards ── */
.grid { gap: var(--s-4); padding: var(--s-4) var(--s-6) var(--s-6); align-items: stretch; }
.grid-flush { padding: 0; }
.card { border-radius: var(--radius-lg); }
.card.is-gem, .card.is-gem:hover { box-shadow: var(--shadow-card), inset 3px 0 0 var(--gem); }
.card.is-goodvalue, .card.is-goodvalue:hover { box-shadow: var(--shadow-card), inset 3px 0 0 var(--green-deep); }
.card.is-gem:hover { box-shadow: var(--shadow-hover), inset 3px 0 0 var(--gem); }
.card.is-goodvalue:hover { box-shadow: var(--shadow-hover), inset 3px 0 0 var(--green-deep); }
.card-photo-wrap { position: relative; display: block; width: 100%; aspect-ratio: 5 / 2; padding: 0; border: 0;
                   background: var(--bg-muted); overflow: hidden; cursor: pointer; }
.card-photo-wrap .card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.gem-photo-chip { top: 10px; left: 10px; gap: 5px; padding: 4px 10px 4px 8px; background: var(--bg-card);
                  backdrop-filter: none; box-shadow: 0 2px 6px rgba(0,0,0,.18); font-size: var(--text-xs); }
.gem-photo-chip.chip-hidden { color: var(--gem-ink); }
.gem-photo-chip.chip-good   { color: var(--green-ink); }
.card-photo-new-badge { top: 10px; right: 10px; background: var(--bg-card); color: var(--blue-ink);
                        backdrop-filter: none; -webkit-backdrop-filter: none; font-size: var(--text-xs); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: var(--s-3) var(--s-4) 0; }
.card-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.card-title-wrap { flex: 1; min-width: 0; }
.card-title { font-size: var(--text-lg); font-weight: 600; line-height: var(--lh-tight); margin: 0; letter-spacing: -0.2px; }
.card-title-btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit;
                  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title-btn:hover { color: var(--green-ink); }
.card-sub { margin-top: 3px; font-size: var(--text-sm); color: var(--text-secondary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.price-main { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.4px; line-height: 1.1; }
.price-unit { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; margin-left: -4px; }
.deal-delta { display: inline-flex; align-items: center; gap: 4px; align-self: center; height: 24px; padding: 0 8px;
              border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.deal-delta .i { width: 14px; height: 14px; }
.deal-delta.tone-good { background: var(--green-light); color: var(--green-ink); }
.deal-delta.tone-at   { background: var(--bg-muted);    color: var(--text-secondary); }
.deal-delta.tone-bad  { background: var(--coral-light); color: var(--coral-ink); }
.deal-delta.tone-warn { background: var(--amber-light); color: var(--amber-ink); }
/* Real monthly cost under the price (cards.js _costLineHtml): a bar sized by
   rent / condo / heating, the parts, and a tag. */
.cost-line { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px;
             font-size: var(--text-xs); color: var(--text-secondary); }
.cost-bar { display: flex; flex: 0 0 64px; height: 6px; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-muted); }
.cost-bar i { display: block; height: 100%; }
.cost-bar .seg-rent  { background: var(--border-strong); }
.cost-bar .seg-condo { background: var(--amber); }
.cost-bar .seg-heat  { background: var(--coral); }
.cost-bar.is-unknown { background: none; border: 1px dashed var(--border-strong); }
.cost-parts { min-width: 0; }
.cost-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--radius-full);
            font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.cost-tag .i { width: 12px; height: 12px; }
.cost-tag.tone-ok    { background: var(--green-light); color: var(--green-ink); }
.cost-tag.tone-warn  { background: var(--amber-light); color: var(--amber-ink); }
.cost-tag.tone-muted { background: var(--bg-muted);    color: var(--text-secondary); }
.lm-costs { flex-basis: 100%; width: 100%; max-width: 420px; border-collapse: collapse; font-size: var(--text-sm); }
.lm-costs td { padding: 3px 0; color: var(--text-secondary); }
.lm-costs td + td { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lm-costs tr.is-muted td + td { color: var(--text-muted); }
.lm-costs tr.is-total td { padding-top: 7px; border-top: 1px solid var(--border-light); color: var(--text-primary); font-weight: 700; }
.lm-costs tr.is-entry td { font-size: var(--text-xs); }
.card-specs { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--text-sm); color: var(--text-primary); }
.card-specs > span + span::before { content: '·'; margin: 0 6px; color: var(--text-muted); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: var(--text-xs); color: var(--text-secondary); }
.card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.card-meta .i { width: 14px; height: 14px; }
.card-meta .near { color: var(--green-ink); font-weight: 600; }
.card-meta .fresh { color: var(--blue-ink); font-weight: 600; }
.was-price { margin: 0; font-size: var(--text-xs); color: var(--green-ink); }
.card-footer { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding: var(--s-3) var(--s-4) var(--s-4); }
.card-footer .btn-open { margin-left: auto; }
.btn-fav.is-fav { color: var(--text-primary); border-color: var(--text-primary); }
.btn-fav.is-fav .i, .lm-actions .on .i { fill: currentColor; }
.btn-fav .i { width: 18px; height: 18px; }

/* Score ring: arc and number take the score-class colours */
.sc-high { --ring: var(--green-deep); --ring-ink: var(--green-ink); }
.sc-mid  { --ring: var(--amber);      --ring-ink: var(--amber-ink); }
.sc-low  { --ring: var(--coral);      --ring-ink: var(--coral-ink); }
.score-ring-wrap { width: 44px; height: 44px; }
.score-ring-wrap .ring-track { stroke: var(--border-light); }
.score-ring-wrap .score-ring-fill { stroke: var(--ring); }
.score-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                   font-size: 15px; font-weight: 700; color: var(--ring-ink); }
.card.is-gem .score-ring-wrap { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gem) 55%, transparent)); }
.card.is-goodvalue .score-ring-wrap { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--green-deep) 45%, transparent)); }

/* Empty state */
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }

/* ── Details view ── */
body.lm-open { overflow: hidden; }
.lm-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(20, 20, 18, 0.5);
               display: flex; align-items: center; justify-content: center; padding: 3vh 16px; }
.lm { display: flex; flex-direction: column; width: 100%; max-width: 780px; max-height: 94vh;
      background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
#lmBody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3);
           padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 1px solid var(--border-light); flex: none; }
.lm-title h2 { font-size: var(--text-xl); font-weight: 600; line-height: var(--lh-tight); margin: 0; }
.lm-sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }
.lm-sub a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
.lm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-5); overscroll-behavior: contain; }
.lm-photos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.lm-photo { flex: none; width: 168px; height: 112px; border-radius: var(--radius-control); overflow: hidden; background: var(--bg-muted);
            display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: var(--text-sm); text-decoration: none; }
.lm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-photo-empty .i { width: 28px; height: 28px; }
.lm-verdict { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-control); background: var(--bg-muted); }
.lm-verdict.good { background: var(--green-light); color: var(--green-ink); }
.lm-verdict.gem  { background: var(--gem-light);   color: var(--gem-ink); }
.lm-verdict.warn { background: var(--amber-light); color: var(--amber-ink); }
.lm-verdict.bad  { background: var(--coral-light); color: var(--coral-ink); }
.lm-verdict-head { font-weight: 700; font-size: var(--text-md); }
.lm-verdict-sub { font-size: var(--text-sm); margin-top: 2px; }
.lm-photo-verdict { margin-top: var(--s-2); }
.lm-photo-verdict .lm-verdict-head { display: flex; align-items: center; gap: 6px; }
/* Details: the user's verdict on the photos (_lmPhotoFeedbackHtml) */
.pfb { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); }
.pfb-q { font-size: var(--text-sm); font-weight: 600; }
.pfb-seg { justify-self: start; flex-wrap: wrap; }
.pfb-note { width: 100%; min-height: 56px; resize: vertical; font-size: var(--text-sm); }
.pfb-grade { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.pfb-grade .input { width: auto; min-width: 72px; }
.pfb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pfb-status { font-size: var(--text-xs); color: var(--text-secondary); }
.lm-photo-meta { font-size: var(--text-xs); margin-top: 6px; opacity: .85; }
.lm-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: var(--s-4); font-size: var(--text-sm); }
.lm-rent { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.5px; }
.lm-muted { color: var(--text-secondary); }
.lm-history { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); font-weight: 600; }
.lm-section-title { font-size: var(--text-md); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.lm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.lm-fact { background: var(--bg-muted); border-radius: var(--radius-control); padding: 8px 10px; min-width: 0; }
.lm-fact-k { font-size: var(--text-xs); color: var(--text-secondary); }
.lm-fact-v { font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.lm-unknown-line { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--s-2); }
.lm-note { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--s-2); }
.lm-note .i { width: 14px; height: 14px; }
.lm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-6); }
.lm-near { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.lm-near li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; padding: 4px 0; }
.lm-near .i { width: 16px; height: 16px; color: var(--text-secondary); }
.lm-bar { display: grid; grid-template-columns: minmax(110px, max-content) 1fr 32px; align-items: center; gap: 10px;
          font-size: var(--text-sm); margin: 6px 0; }
.lm-bar-track { height: 6px; background: var(--bg-muted); border-radius: var(--radius-full); overflow: hidden; }
.lm-bar-fill { display: block; height: 100%; background: var(--ring, var(--green-deep)); border-radius: var(--radius-full); }
.lm-bar-v { text-align: right; font-weight: 700; color: var(--ring-ink, var(--text-primary)); }
.lm-cap { font-size: var(--text-sm); color: var(--coral-ink); margin-top: 6px; }
.lm-comps { margin-top: 2px; }
.comps-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.comps-table th { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-align: right; padding: 6px 8px;
                  border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.comps-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.comps-table th:last-child, .comps-table td:last-child { text-align: left; }
.comps-table tr.is-self td { background: var(--green-light); font-weight: 600; }
.comps-table tr.is-archived td { color: var(--text-secondary); }
.comps-table a { color: var(--green-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.comps-table a:hover { text-decoration: underline; }
.comps-table a .i { width: 13px; height: 13px; }
.comps-list-msg { font-size: var(--text-sm); color: var(--text-secondary); padding: 6px 0; }
.comps-archived { font-size: var(--text-xs); color: var(--text-secondary); }
.lm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5);
              border-top: 1px solid var(--border-light); background: var(--bg-card); flex: none; }
.lm-actions .lm-open { margin-left: auto; }
.lm-actions .on { color: var(--text-primary); border-color: var(--text-primary); }
.lm-collections { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--border-light); border-radius: var(--radius-control); }
.lm-col-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--text-sm); cursor: pointer; }
.lm-col-row .col-count { margin-left: auto; color: var(--text-secondary); font-size: var(--text-xs); }
.lm-col-new { display: flex; gap: 8px; margin-top: var(--s-2); }
.callout-reasons { border-top-color: var(--border-light); }
@media (max-width: 639px) {
  .lm-backdrop { padding: 0; align-items: stretch; }
  .lm { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .lm-head, .lm-scroll, .lm-actions { padding-left: var(--s-4); padding-right: var(--s-4); }
  .lm-actions { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .lm-actions .lm-open { flex-basis: 100%; order: -1; margin-left: 0; height: var(--control-h-lg); }
  .lm-photo { width: 132px; height: 92px; }
}

/* ── Pages: Saved, Stats ── */
.page { max-width: 1240px; margin: 0 auto; padding: var(--s-6) var(--s-6) 64px; }
.page-narrow { max-width: 980px; }
.page-title { font-size: var(--text-xl); font-weight: 700; margin: 0; letter-spacing: -0.2px; }
.section-title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.section-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.section-meta { font-size: var(--text-sm); color: var(--text-secondary); }
.section-hint { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--s-3); }
.page-section + .page-section { margin-top: var(--s-8); }
.inline-form { display: flex; gap: var(--s-2); max-width: 520px; margin-bottom: var(--s-4); }
.collections-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.col-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-card);
            border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.col-card-main { flex: 1; min-width: 0; }
.col-card-name { font-size: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-card-meta { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.col-card-actions { display: flex; gap: 4px; flex: none; }
.col-card .input { height: 32px; }
.empty-block { padding: var(--s-6); text-align: center; color: var(--text-secondary); font-size: var(--text-sm);
               background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.stats-section { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-top: var(--s-4); }
.stats-section > summary { display: flex; align-items: center; gap: 10px; padding: var(--s-4); cursor: pointer;
                           list-style: none; font-size: var(--text-md); font-weight: 600; }
.stats-section > summary::-webkit-details-marker { display: none; }
.stats-section > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--text-secondary);
                                   border-bottom: 2px solid var(--text-secondary); transform: rotate(-45deg); transition: transform 150ms ease; }
.stats-section[open] > summary::before { transform: rotate(45deg); }
.stats-body { padding: 0 var(--s-4) var(--s-4); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.kpi { background: var(--bg-muted); border-radius: var(--radius-md); padding: var(--s-3) var(--s-4); }
.kpi-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.kpi-value { font-size: var(--text-2xl); font-weight: 700; margin-top: 2px; letter-spacing: -0.3px; }
.kpi-value.gem-text { color: var(--gem-ink); }
.kpi-value.good-text { color: var(--green-ink); }
.chart-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--s-2); }
.chart-box { position: relative; height: 200px; }
.chart-box-sm { height: 160px; }
.table-wrap { overflow-x: auto; }
.area-table { font-size: var(--text-sm); }
.area-table th { font-size: var(--text-xs); text-transform: none; letter-spacing: 0; padding: 8px 12px; }
.area-table td { padding: 8px 12px; }
.area-table th.num, .area-table td.num { text-align: right; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
           font: inherit; color: inherit; cursor: pointer; }
.th-sort:hover { color: var(--text-primary); }
.sort-ind { min-width: 8px; color: var(--green-ink); }
.area-table tr.zone-row { cursor: pointer; }
.area-table tr.zone-row:hover td { background: var(--green-light); }
.area-table .agency-link { color: var(--green-ink); font-weight: 600; }
.type-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs);
              font-weight: 600; background: var(--bg-muted); color: var(--text-secondary); }
.gem-text { color: var(--gem-ink); }
.good-text { color: var(--green-ink); }
.score-text.sc-high, .score-text.sc-mid, .score-text.sc-low { color: var(--ring-ink); font-weight: 600; }
.table-more { margin-top: var(--s-2); }
.stats-search { max-width: 280px; margin-bottom: var(--s-3); }

/* ── Map ── */
#mapView { display: flex; flex-direction: column; height: auto; min-height: 420px; }
#mapView[hidden] { display: none !important; }
#mapContainer { flex: none; height: 480px; min-height: 360px; margin: var(--s-3) var(--s-6) var(--s-4); border-radius: var(--radius-lg);
                overflow: hidden; box-shadow: var(--shadow-card); }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-6) 0;
               font-size: var(--text-sm); color: var(--text-secondary); }
.map-toolbar strong { color: var(--text-primary); }
.map-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-left: auto; font-size: var(--text-xs); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ring); }
.lg-dot.lg-good { background: var(--green-ink); box-shadow: 0 0 0 2px var(--green-light); }
.lg-gem { width: 11px; height: 11px; border-radius: 2px; background: var(--gem); transform: rotate(45deg); }
.map-cap-notice { margin: 0 var(--s-6) var(--s-3); font-size: var(--text-xs); color: var(--text-secondary); text-align: center; }
.map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88); }
.map-marker { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
              color: #fff; font-size: 12px; font-weight: 700; border: 2px solid rgba(255,255,255,.9);
              box-shadow: 0 2px 6px rgba(0,0,0,.3); background: var(--ring); }
.map-marker.mk-good { background: var(--green-ink); }
.map-marker.mk-gem { border-radius: 4px; transform: rotate(45deg); background: var(--gem); }
.map-marker.mk-gem > * { transform: rotate(-45deg); }
.map-marker .i { width: 15px; height: 15px; }
.map-cluster { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-inverse);
               background: var(--green-deep); font-size: var(--text-sm); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25);
               border: 2px solid var(--bg-card); }
.leaflet-container { font-family: var(--font); background: var(--bg-muted); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-card); color: var(--text-primary); }
.leaflet-container a.map-popup-link { color: var(--text-inverse); }
.map-popup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.map-popup-score { width: 38px; height: 38px; font-size: var(--text-md); background: var(--ring); color: #fff; }
.map-popup-score.high, .map-popup-score.mid, .map-popup-score.low { background: var(--ring); }
.map-popup-price { font-size: var(--text-xl); font-weight: 700; }
.map-popup-actions { display: flex; gap: 6px; }
.map-popup-actions .btn { flex: 1; }

/* ── Tools (settings) ── */
.settings-card-header { cursor: default; }
.settings-card.is-collapsible > .settings-card-header { cursor: pointer; margin-bottom: 0; }
.settings-card.is-collapsible:not(.is-collapsed) > .settings-card-header { margin-bottom: 18px; }
.settings-card.is-collapsed > :not(.settings-card-header) { display: none !important; }
.collapse-ind { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
                border-radius: var(--radius-control); color: var(--text-secondary); transition: transform 150ms ease; }
.settings-card.is-collapsed .collapse-ind { transform: rotate(-90deg); }
.threshold-title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; margin-bottom: 8px; }
.maint-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-4); font-size: var(--text-sm); color: var(--text-secondary); }
.maint-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.maint-item strong { color: var(--text-primary); }
.maint-status { font-size: var(--text-xs); color: var(--text-secondary); }
.geo-progress-bar { display: inline-block; width: 80px; height: 4px; }
.dq-table-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--text-xs); color: var(--text-secondary); }
.scan-actions .btn .i { width: 16px; height: 16px; }

/* ── Phone drawer ── */
#mobileFilterDrawer { visibility: hidden; transition: transform .3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .3s; }
#mobileFilterDrawer.is-open { visibility: visible; transition: transform .3s cubic-bezier(.34,1.56,.64,1), visibility 0s; }
.drawer-title-row { padding: var(--s-3) var(--s-5) var(--s-2); }
.drawer-title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.drawer-field { margin-bottom: var(--s-4); }
.drawer-field .field-label { display: block; margin-bottom: 6px; }
.drawer-field .input, .drawer-field .seg { height: var(--control-h-lg); }
.drawer-field .input { font-size: 16px; }
.drawer-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.drawer-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); }
.drawer-field input[type=range] { width: 100%; }
.drawer-field .must-grid { grid-template-columns: 1fr 1fr; margin-bottom: var(--s-2); }
.drawer-field .must-chip { padding: 8px 10px; }
.drawer-field .must-count { padding-left: 0; }
.drawer-foot { display: flex; flex-direction: column; gap: var(--s-2); flex: none;
               padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-light); }
.drawer-foot .btn { width: 100%; }

/* ── Touch: 44 px targets ── */
@media (pointer: coarse) {
  .btn, .hdr-btn, .fb-field, .fbar .msd-trigger, .input, select.input { min-height: var(--control-h-lg); }
  .seg { height: var(--control-h-lg); }
  .btn-icon, .hdr-icon { min-width: var(--control-h-lg); }
  .fchip { height: 36px; }
  .tab-btn { min-height: 44px; }
}

/* ── Breakpoints: phone ≤ 639 · tablet 640–1023 · desktop ≥ 1024 ── */
/* The filter row stays on one line down to ~1024 px: counts go first,
   then the two panel buttons shrink to icon + badge. */
@media (max-width: 1439px) {
  .fbar .seg .pill-count { display: none; }
}
@media (max-width: 1279px) {
  .fbar .fb-btn > span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden;
                                    clip: rect(0 0 0 0); white-space: nowrap; }
  .fbar .fb-btn { padding: 0 10px; }
  .fbar .msd-trigger { min-width: 118px; }
  .fb-field input { width: 84px; }
  .fb-field-narrow input { width: 44px; }
}
@media (max-width: 639px) {
  #filterBar { display: none !important; }
  .mobile-filter-btn { display: inline-flex !important; }
  /* Sales keep their bar inline on a phone (no drawer): it scrolls away
     instead of taking half the screen, and the Rentals drawer button goes. */
  #saleFilterBar { position: static; margin: var(--s-3) var(--s-3) 0; }
  body[data-tab="sales"] .mobile-filter-btn { display: none !important; }
  .fchips { margin: var(--s-3) var(--s-3) 0; }
  .grid { padding: var(--s-3); gap: var(--s-3); }
  .page { padding: var(--s-4) var(--s-3) 64px; }
  #mapContainer { margin: var(--s-2) var(--s-3) var(--s-3); }
  .map-toolbar { padding: var(--s-2) var(--s-3) 0; }
  .map-legend { margin-left: 0; }
  nav.tab-bar { padding: 0; overflow: visible; }
  .tab-btn { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 1px;
             padding: 0 2px; font-size: var(--text-xs); }
  .tab-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-btn .i { width: 17px; height: 17px; }
}

/* Tools → Scanner: work between slots (scanner.js _renderPipeline) */
.pipeline-box { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
                font-size: var(--text-xs); color: var(--text-secondary); }
.w-card { padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius); display: grid; gap: 4px; align-content: start; }
.w-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.w-head .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-secondary); }
.w-title { color: var(--text-primary); font-weight: 600; font-size: var(--text-sm); }
.w-sub { color: var(--text-muted); }
.w-today { color: var(--text-primary); }
.pipe-bar { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; gap: 8px; }
.pipe-bar > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pipe-track { height: 6px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.pipe-track i { display: block; height: 100%; background: var(--green-ink); }
@media (max-width: 640px) { .pipeline-box { grid-template-columns: minmax(0, 1fr); } }

/* Sales (sales.js): the bar, chips and cards reuse the Rentals classes. */
.sale-figs { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
.sale-figs > span { display: inline-flex; align-items: center; gap: 4px; }
.sale-figs .i { width: 14px; height: 14px; flex: none; }
/* Details: where the asking €/m² sits — nearby sales and the OMI range */
.sale-scale { margin-top: var(--s-4); }
.sale-scale-track { position: relative; height: 12px; border-radius: var(--radius-full); background: var(--bg-muted); }
.sale-scale-omi { position: absolute; top: 0; bottom: 0; background: var(--blue-light); border-radius: var(--radius-full); }
.sale-scale-median { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text-primary); border-radius: 1px; }
.sale-scale-this { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
                   background: var(--text-primary); border: 3px solid var(--bg-card); box-shadow: 0 0 0 1px var(--border-strong); }
.sale-scale-this.tone-good, .k-this.tone-good { background: var(--green-deep); }
.sale-scale-this.tone-bad, .k-this.tone-bad { background: var(--coral); }
.sale-scale-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: var(--text-xs); color: var(--text-secondary); }
.sale-scale-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sale-scale-legend i { display: inline-block; flex: none; }
.k-this { width: 10px; height: 10px; border-radius: 50%; background: var(--text-primary); }
.k-median { width: 2px; height: 12px; background: var(--text-primary); }
.k-omi { width: 16px; height: 8px; border-radius: var(--radius-full); background: var(--blue-light); }
/* Details: the numbers that matter for buying */
.sale-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; }
.sale-tile { background: var(--bg-muted); border-radius: var(--radius-control); padding: 10px 12px; min-width: 0; }
.sale-tile-k { font-size: var(--text-xs); color: var(--text-secondary); }
.sale-tile-v { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.3px; margin-top: 2px; }
.sale-tile-v span { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.sale-tile-s { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.sale-tile.is-good { background: var(--green-light); }
.sale-tile.is-good .sale-tile-v, .sale-tile.is-good .sale-tile-k, .sale-tile.is-good .sale-tile-s { color: var(--green-ink); }
.sale-tile.is-muted .sale-tile-v { font-size: var(--text-md); color: var(--text-secondary); }
.sale-compare { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--border);
                border-radius: var(--radius-control); font-size: var(--text-sm); }
.sale-compare .i { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--green-ink); text-decoration: underline; cursor: pointer; }
/* Tools → Areas for sale */
.sale-limits { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 6px; }
.sale-limits .field { width: 160px; }