/* ── Satoshi font — reused from /tolet (same deployment, absolute paths) ── */
@font-face { font-family: "Satoshi"; src: url("/tolet/assets/fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/tolet/assets/fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/tolet/assets/fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/tolet/assets/fonts/Satoshi-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ── Theme tokens — 1:1 with /tolet, so the mini-sites read as one family ── */
:root {
  /* LightTheme */
  --primary: #e91e63;       /* primary */
  --primary-deep: #d81b60;  /* rent-bar fill end, +N, median knob */
  --accent: #ff84a1;        /* primaryAccent */
  --gold: #ffb82c;          /* secondary */
  --gold-2: #ffdd9a;        /* secondaryAccent */
  --page-bg: #f8f7ef;       /* primaryBG — the window's interior (the card well) */
  --surface: #ffffff;       /* secondaryBG (cards / window / toolbar band) */
  --surface-2: #fdf4f8;     /* derived: soft hover / inputs / chips */
  --text: #1a0a32;          /* primaryText */
  --text-muted: #5f4c7b;    /* secondaryText */
  --line: #ece3ea;          /* derived hairline */
  --shadow: 0 6px 20px rgba(26, 10, 50, 0.10);
  --shadow-sm: 0 2px 8px rgba(26, 10, 50, 0.08);
  /* --backdrop is the bare page the hero, the wordmark head and the footnote
     sit on; --page-bg is the floating window's own interior. Keeping them a
     shade apart is what gives the window an edge without drawing a border. */
  --backdrop: #efece0;
  --card-edge: rgba(26, 10, 50, 0.07);

  /* Aliases left over from the wireframe pass, now pointing at the shared
     tokens so the card rules below read the same as they always did. They
     resolve lazily, so the dark block only has to restate the real tokens. */
  --pill: var(--surface-2);
  --ink: var(--text);
  --text-mid: var(--text-muted);
  --chip-ink: var(--text-muted);

  --ok: #1e9e5a;
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
  /* DarkTheme — 1:1 with constants/colors.js DarkTheme (app's COLORS) */
  --primary: #ff84a1;       /* primary */
  --primary-deep: #ff84a1;
  --accent: #e91e63;        /* primaryAccent */
  --gold: #ffdd9a;          /* secondary */
  --gold-2: #ffb82c;        /* secondaryAccent */
  /* One purple system, built up from the app's primaryBG #1A0A32 rather than
     its much lighter secondaryBG: cards at #5F4C7B read as a washed-out lilac.
     Matches /tolet and /ghoslascanner exactly. */
  --backdrop: #0b0219;      /* bare page the hero and the bands sit on */
  --page-bg: #14062a;       /* the window's interior */
  --surface: #241142;       /* cards, header, popups */
  --surface-2: #31195c;     /* hover, inputs, chips */
  --card-edge: rgba(255, 255, 255, 0.07);
  --text: #ffffff;          /* primaryText */
  --text-muted: #c6b4df;    /* secondaryText */
  --line: #3d2668;          /* derived hairline visible on purple */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --ok: #5ad695;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { color: var(--text); background: var(--backdrop); min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }

/* Themed pink scrollbars everywhere (wireframe: pink pill thumb) */
html, .panel-scroll, .list-pane, .dd-list, .city-menu, .dd-panel-filter, .map-search-results {
  scrollbar-width: thin; scrollbar-color: var(--primary) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--primary); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-deep); background-clip: content-box; }

/* ── Shell: left hero + main column ──────────────────────
   Ported from /tolet. The hero, the wordmark head and the footnote strip are
   one uninterrupted backdrop: no fills of their own, no rules, no seams. Every
   boundary that used to be drawn with a border now belongs to the window that
   floats on top of them. */
.split { display: flex; height: 100dvh; background: var(--backdrop); }

/* ── Left hero ──────────────────────────────────────────── */
.hero {
  flex: 0 0 20%; min-width: 0; overflow: hidden;
  display: flex; align-items: stretch; justify-content: center;
  z-index: 20;
}
/* Container for the lockup: every size below is a share of THIS width (cqi), so
   the whole thing keeps its proportions at any column width. */
.hero-inner {
  container-type: inline-size; width: min(510px, 90%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5cqi 0;
}

/* Staggered rotated headline, sized off the hero column */
.hero-headline {
  position: relative; display: block; width: 100%; aspect-ratio: 510 / 305;
  font-size: 13.97cqi;
  font-weight: 900; color: var(--primary); line-height: 0.9;
  letter-spacing: -0.01em; user-select: none;
}
/* The finished-artwork tagline is mobile-only; desktop draws the tilted words */
.hero-tagline { display: none; }
.hl { position: absolute; white-space: nowrap; }
.hl-too       { left: 0%;  top: 0%;  transform: rotate(-14deg); }
.hl-broke     { left: 33%; top: 7%;  transform: rotate(-7deg); }
.hl-to        { left: 36%; top: 28%; transform: rotate(-9deg); }
.hl-pay       { left: 53%; top: 39%; transform: rotate(-11deg); }
.hl-brokerage { left: 2.5%; top: 67%; transform: rotate(-5deg); }
.hero-bird { position: absolute; left: 15%; top: 19%; width: 26%; height: auto; z-index: 1; }

.hero-key { width: 29cqi; height: auto; margin: 5.73cqi 0 1.32cqi; }
.hero-skip {
  margin: 4.85cqi 0 0; font-size: max(12.5px, 4.63cqi);
  color: var(--primary); line-height: 1.55; font-weight: 400;
}
.hero-skip strong { font-weight: 700; }
.hero-rule { width: 94%; border: 0; border-top: 1px solid rgba(26, 10, 50, 0.12); margin: 8.82cqi 0 7.05cqi; }
[data-theme="dark"] .hero-rule { border-top-color: rgba(255, 255, 255, 0.16); }

/* No auto margin: the whole stack — lockup, tagline, rule, store buttons — is
   centred in the column as one group. */
.hero-download { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hd-pre { font-size: max(11px, 3.97cqi); font-weight: 500; color: var(--text); }
.hd-name { font-size: max(16px, 6.61cqi); font-weight: 800; letter-spacing: -0.4px; color: var(--text); }

/* ── Store badges (in the hero) ──────────────────────────── */
.store-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.65cqi; align-items: center; margin-top: 3.97cqi; }
.store-badge {
  display: inline-flex; align-items: center; gap: 2.43cqi;
  padding: 2.43cqi 4.85cqi 2.65cqi; border-radius: 2.43cqi;
  background: #000; color: #fff; text-decoration: none; line-height: 1;
}
.store-badge:hover { opacity: 0.85; }
.store-badge svg { width: 6.17cqi; height: 6.17cqi; flex: 0 0 auto; }
.sb-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.66cqi; font-size: max(10px, 3.97cqi); font-weight: 700; }
.sb-txt small { font-size: max(7.5px, 2.43cqi); font-weight: 500; letter-spacing: 0.3px; }

.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ── Stage: the floating window ──────────────────────────
   Wordmark, toolbar and the card well are one object rather than three bands.
   No border: the window is told apart from the backdrop by being a shade
   lighter and by its shadow, the same way /tolet does it. */
.panel {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  margin: 12px 16px 0; border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--card-edge), var(--shadow);
}

/* Product wordmark, centred above the toolbar. */
.panel-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 16px 20px 14px; z-index: 31;
}
.panel-brand { display: inline-flex; }
.panel-logo { height: 66px; width: auto; display: block; }

/* ── Toolbar ─────────────────────────────────────────────
   The same controls /tolet and /ghoslascanner use: the city button is welded to
   the left edge of the search field so the two read as one bar, and Filter and
   Sort are labelled buttons rather than tinted pills. */
.toolbar { padding: 0 16px 12px; flex: 0 0 auto; z-index: 30; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* min-width:0 all the way down: a text input's intrinsic width (~20 chars) is a
   flex floor otherwise, and on a narrow phone it pushes the Filter button off. */
.search-row { position: relative; display: flex; align-items: stretch; flex: 1 1 280px; min-width: 0; }
.search-row .search-wrap { flex: 1 1 auto; min-width: 0; }

/* City picker — sits flush on the left edge of the search bar. */
.city-select { position: relative; flex: 0 0 auto; }
.city-btn {
  height: 42px; display: flex; align-items: center; gap: 5px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line); border-right: none;
  border-radius: 12px 0 0 12px;
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap; max-width: 168px;
}
.city-btn:hover { background: var(--surface); }
.city-btn .ci-pin { color: var(--primary); flex: 0 0 auto; }
.city-btn .chev { flex: 0 0 auto; opacity: 0.65; transition: transform 0.15s ease; }
.city-select.open .city-btn .chev { transform: rotate(180deg); }
.city-menu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 230px; max-height: 55vh; overflow: auto; z-index: 50;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  display: none;
}
.city-select.open .city-menu { display: block; }
.city-item {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  width: 100%; padding: 10px 12px; border: 0; background: none;
  border-radius: 9px; cursor: pointer; font-size: 14.5px; color: var(--text); text-align: left;
}
.city-item:hover { background: var(--surface-2); color: var(--primary); }
.city-item.is-on { color: var(--primary); font-weight: 700; }
.city-item .cnt { color: var(--text-muted); font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.city-item.is-on .cnt { color: var(--primary); }

/* Search */
.search-wrap { position: relative; flex: 1 1 240px; min-width: 160px; }
.search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  line-height: 0; color: var(--text-muted); opacity: 0.8; pointer-events: none;
  display: inline-flex;
}
#brokerSearch {
  width: 100%; min-width: 0; height: 42px; padding: 0 16px 0 36px;
  border: 1px solid var(--line); border-radius: 0 12px 12px 0;
  background: var(--surface); color: var(--text);
  font-size: 14px; outline: none;
}
#brokerSearch::placeholder { color: var(--text-muted); }
#brokerSearch:focus { border-color: var(--primary); }

/* Filter and Sort — the scanner's labelled buttons, not bare pills. */
.dd { position: relative; flex: 0 0 auto; }
.dd-btn, .sort-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.dd-btn:hover, .sort-btn:hover { border-color: var(--primary); }
.dd-btn[aria-expanded="true"], .sort-btn[aria-expanded="true"] { border-color: var(--primary); background: var(--surface-2); }
.dd-btn .chev, .sort-btn .chev { opacity: 0.65; transition: transform 0.15s ease; }
.dd.open .dd-btn .chev, .sort-dd.open .sort-btn .chev { transform: rotate(180deg); }
.dd-btn.has-value { border-color: var(--primary); color: var(--primary); }
.dd-badge {
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; padding: 1px 7px;
}
[data-theme="dark"] .dd-badge { color: #1a0a32; }
.dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  width: 280px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px;
  display: none;
}
.dd.open .dd-panel { display: block; }

/* Combined filter panel: areas + rent + BHK */
.dd-panel-filter {
  width: 330px; left: auto; right: 0;
  max-height: min(72vh, 640px); overflow: auto;
  display: none; padding: 14px;
}
.dd.open .dd-panel-filter { display: flex; flex-direction: column; gap: 14px; }
.f-section + .f-section { border-top: 1px solid var(--line); padding-top: 14px; }
.f-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px;
}
.dd-search {
  width: 100%; height: 38px; padding: 0 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 13.5px; outline: none;
}
.dd-search::placeholder { color: var(--text-muted); }
.dd-search:focus { border-color: var(--primary); }
.dd-list { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.dd-item {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 7px 9px; border: 0; background: none; border-radius: 9px;
  cursor: pointer; font-size: 13.5px; color: var(--text); text-align: left; width: 100%;
}
.dd-item:hover { background: var(--surface-2); }
.dd-item .cnt { color: var(--text-muted); font-size: 12px; flex: 0 0 auto; }
.dd-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-item.is-on .nm { color: var(--primary); font-weight: 700; }
.dd-item.is-on .nm::before { content: "✓ "; }
.dd-clear {
  margin-top: 8px; width: 100%; padding: 9px; cursor: pointer; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
}
.dd-clear:hover { color: var(--primary); border-color: var(--primary); }

/* Rent: histogram + dual-thumb slider */
.ph-hist { display: flex; align-items: flex-end; gap: 2px; height: 56px; padding: 0 2px; }
.ph-bar { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; transition: background 0.12s ease; }
.ph-bar.on { background: var(--primary); opacity: 0.8; }
.ph-slider { position: relative; height: 26px; margin-top: 2px; }
.ph-track {
  position: absolute; left: 2px; right: 2px; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: 999px; background: var(--surface-2);
}
.ph-range { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--primary); opacity: 0.85; }
.ph-slider input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none;
  pointer-events: none; /* thumbs re-enable below */
}
.ph-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--primary);
  box-shadow: var(--shadow-sm); cursor: grab;
}
.ph-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--primary);
  box-shadow: var(--shadow-sm); cursor: grab;
}
.ph-slider input[type="range"]::-moz-range-track { background: none; }
.ph-vals { text-align: center; font-size: 13px; font-weight: 700; margin: 4px 0 2px; }

/* BHK chips */
.bhk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fchip:hover { border-color: var(--primary); }
.fchip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .fchip.is-on { color: #1a0a32; }

/* Sort */
.sort-dd { margin-left: auto; }
.sort-menu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 200px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  display: none;
}
.sort-dd.open .sort-menu { display: block; }
.sort-item {
  width: 100%; padding: 10px 12px; border: 0; background: none;
  border-radius: 9px; cursor: pointer; font-size: 14.5px; color: var(--text); text-align: left;
}
.sort-item:hover { background: var(--surface-2); color: var(--primary); }
.sort-item.is-on { color: var(--primary); font-weight: 700; }
.sort-item.is-on::after { content: " ✓"; }

/* The count and the theme switch share this row, the way /tolet pairs its count
   with the "Add a board" button on the far side of the toolbar. */
.toolbar-meta { display: flex; align-items: center; gap: 12px; padding: 12px 2px 0; }
.result-count { font-size: 13.5px; color: var(--text-muted); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clear-all {
  border: 0; background: none; color: var(--primary); font-size: 13px;
  font-weight: 700; cursor: pointer; padding: 2px 4px;
}
.meta-tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Scrolling card area ────────────────────────────────── */
/* The well is a shade off the window's own white, exactly as /tolet separates
   its board pane from the toolbar band above it. */
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: var(--page-bg); border-top: 1px solid var(--line); }
.grid-wrap { padding: 14px 16px 24px; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}
.grid-sentinel { height: 1px; }
.empty-msg { text-align: center; color: var(--text-muted); padding: 60px 20px; font-size: 15px; }

/* ── Broker card ────────────────────────────────────────── */
/* Plain hairline card, same as /tolet's board cards: the gold outline the
   wireframe drew round every card competed with the pink chrome once the
   window it sits in stopped having a border of its own. */
.bcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none; color: inherit; overflow: hidden;
}
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.bcard.hit { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

/* Copy-number icon, top-right of the card */
.bcard-copy {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--pill); color: var(--text-muted);
  cursor: pointer;
}
.bcard-copy:hover { border-color: var(--primary); color: var(--primary); }
.bcard-copy.done { border-color: var(--ok); color: var(--ok); }

.bcard-head { padding: 15px 48px 12px 17px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bcard-name {
  font-weight: 800; font-size: 16.5px; letter-spacing: -0.2px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard-sub {
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bcard-body {
  border-top: 1px solid var(--line);
  padding: 13px 17px 16px; margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.bcard-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bcard-n { font-size: 14px; font-weight: 700; color: var(--text-mid); }
.bhk-pill {
  font-size: 13px; font-weight: 800; color: var(--ink);
  background: var(--pill); border-radius: 999px; padding: 7px 14px;
  white-space: nowrap;
}

.bcard-areas { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 24px; }
.area-chip {
  font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 999px;
  background: var(--pill); color: var(--chip-ink); white-space: nowrap;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.area-more { font-size: 13px; color: var(--primary-deep); font-weight: 800; align-self: center; }

/* Rent range bar — fixed log scale, labels = broker's min/max */
.bcard-rent { display: flex; align-items: center; gap: 9px; }
.pb-label { font-size: 11.5px; font-weight: 700; color: var(--text-mid); flex: 0 0 auto; }
.pb-none { font-size: 11.5px; color: var(--text-muted); }
.pb-track {
  position: relative; flex: 1; min-width: 60px; height: 6px;
  border-radius: 999px; background: var(--pill);
}
.pb-fill {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--primary-deep));
}
[data-theme="dark"] .pb-fill { background: linear-gradient(90deg, var(--accent), var(--primary)); }
.pb-med {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary-deep); border: 1.5px solid var(--surface);
}

/* ── Floating map toggle over the card well ─────────────── */
.map-toggle {
  position: absolute; bottom: 20px; left: 22px; z-index: 15;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
}
.map-toggle svg { color: var(--primary); }
.map-toggle:hover { border-color: var(--primary); }
.map-toggle[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.map-toggle[aria-pressed="true"] svg { color: currentColor; }
[data-theme="dark"] .map-toggle[aria-pressed="true"] { color: #1a0a32; }

/* ── Sun/moon sliding toggle ─────────────────────────────
   Both icons are drawn (SVG, not ☀/☾ glyphs — Satoshi has neither) and both
   stay ABOVE the knob: the one the knob is parked on goes white and reads as
   the current mode, the other stays muted as the mode you can switch to. Same
   control as /tolet and /ghoslascanner. */
.theme-switch {
  position: relative; flex: 0 0 auto;
  width: 72px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 0;
  box-shadow: var(--shadow-sm);
}
.theme-switch:hover { border-color: var(--primary); }
.ts-ico {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; line-height: 0; color: var(--text-muted);
  pointer-events: none; transition: color 0.18s ease;
}
.ts-ico svg { width: 16px; height: 16px; display: block; }
.ts-sun { left: 9px; } .ts-moon { right: 9px; }
.theme-switch[aria-checked="false"] .ts-sun,
.theme-switch[aria-checked="true"] .ts-moon { color: #fff; }
.theme-switch-knob {
  position: absolute; top: 3px; left: 3px; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); transition: transform 0.18s ease;
}
.theme-switch[aria-checked="true"] .theme-switch-knob { transform: translateX(36px); }
/* Dark's --primary is the pale pink, which white-on-white-ish loses the icon
   against; the knob keeps the saturated pink in both themes. */
[data-theme="dark"] .theme-switch-knob { background: var(--accent); }

/* ── Map mode: list left, map right (inside the panel) ──── */
body.map-on .panel-scroll { overflow: hidden; }
body.map-on .grid-wrap {
  display: flex; gap: 14px; padding: 2px 16px 16px;
  flex: 1; min-height: 0; /* both panes scroll internally */
}
body.map-on .list-pane { flex: 0 0 var(--bd-list-w, 380px); overflow-y: auto; min-width: 0; }
/* widening the pane adds columns instead of stretching cards */
body.map-on .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Drag handle between list and map */
.gutter { display: none; }
/* A hairline seam, the same one /tolet drags its two panes apart by, rather
   than a pink bar competing with the cards on either side of it. */
body.map-on .gutter {
  display: block; flex: 0 0 6px; align-self: stretch;
  background: var(--line);
  cursor: col-resize; position: relative; transition: background 0.15s;
}
body.map-on .gutter:hover, body.map-on .gutter:focus-visible, body.map-on .gutter.dragging { background: var(--primary); outline: none; }
body.map-on .botbar { display: none; }
.map-pane { position: relative; flex: 1; min-width: 0; }
#map { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.map-search { position: absolute; top: 12px; left: 12px; z-index: 5; width: min(400px, 85%); display: flex; gap: 8px; }
#mapCity {
  height: 40px; max-width: 150px; padding: 0 8px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.map-search-box { position: relative; flex: 1; min-width: 0; }
.map-search input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font-size: 13.5px;
  outline: none; box-shadow: var(--shadow-sm);
}
.map-search input:focus { border-color: var(--primary); }
.map-search-results {
  list-style: none; margin: 6px 0 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); max-height: 46vh; overflow: auto;
}
.map-search-results button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; text-align: left;
}
.map-search-results button:hover { background: var(--pill); }
.map-search-results .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-search-results .cnt { color: var(--text-muted); font-size: 12px; flex: 0 0 auto; }
.map-search-none { padding: 8px 10px; color: var(--text-muted); font-size: 13px; }

/* MapLibre hover tooltip, themed */
.area-tip .maplibregl-popup-content {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 11px; font-size: 12.5px; box-shadow: var(--shadow-sm);
  font-family: inherit;
}
.area-tip .maplibregl-popup-tip { display: none; }

/* ── Small copy icon (broker page) ──────────────────────── */
.icon-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; vertical-align: middle;
  border: 1px solid var(--line); background: var(--pill); color: var(--text-muted);
  cursor: pointer; padding: 0;
}
.icon-copy:hover { border-color: var(--primary); color: var(--primary); }
.icon-copy.done { border-color: var(--ok); color: var(--ok); }

/* ── Broker detail page ─────────────────────────────────── */
.bk-banner {
  position: relative; background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: center; align-items: center;
  padding: 14px 96px; box-shadow: var(--shadow-sm); z-index: 30;
}
.bk-banner .theme-switch { position: absolute; right: 18px; bottom: auto; top: 50%; transform: translateY(-50%); box-shadow: none; }
.cta-strip {
  position: sticky; top: 0; z-index: 25;
  background: var(--pill); padding: 10px 16px; text-align: center;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.cta-strip .store-links { margin-top: 0; }
.banner-tagline {
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text); text-decoration: none; line-height: 1.3;
}
.banner-tagline:hover { color: var(--primary); }
.tag-hook { color: var(--primary); }
.cta-strip .store-badge { padding: 5px 11px; border-radius: 7px; }
.cta-strip .store-badge svg { width: 15px; height: 15px; }
.cta-strip .sb-txt { font-size: 12px; }
.cta-strip .sb-txt small { display: none; }

.bk-page { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 16px 22px 40px; }
.back-link { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--text-muted); text-decoration: none; margin-bottom: 14px; }
.back-link:hover { color: var(--primary); }

.bk-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--pill); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; letter-spacing: 0.5px;
}
.bk-hero { display: flex; align-items: center; gap: 14px; }
.bk-avatar-lg { width: 62px; height: 62px; font-size: 22px; }
.bk-hero-txt { min-width: 0; }
.bk-title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-sub { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }

.stat-pill {
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: var(--pill); color: var(--ink); white-space: nowrap;
}
.stat-pill.price { color: var(--primary); }

.bk-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 0; }
.bk-areas { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 0 0; }
.bk-section { margin: 24px 0 12px; font-size: 13px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.bk-loading { color: var(--text-muted); font-size: 13.5px; }
.bk-loading a { color: var(--primary); }

/* Masonry: cards end where their content ends */
.lst-grid { columns: 380px; column-gap: 14px; }
.lst {
  /* Hairline, same as the broker cards on the index — the gold outline the
     wireframe drew round every card went with the rest of the wireframe pass. */
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--surface);
  display: flex; flex-direction: column;
  break-inside: avoid; margin-bottom: 14px;
}
.lst-media { aspect-ratio: 16 / 10; background: var(--pill); }
.lst-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.lst-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lst-bhk {
  font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px;
  background: var(--pill); color: var(--ink); margin-left: auto; /* stays right even without a rent */
}
.lst-rent { font-weight: 800; font-size: 15px; }
.lst-where { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-text {
  margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.lst.open .lst-text { display: block; -webkit-line-clamp: unset; }
.lst-more {
  border: 0; background: none; padding: 0; align-self: start;
  font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.lst-more:hover { text-decoration: underline; }
.lst-link { font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none; align-self: start; margin-top: auto; }
.lst-link:hover { text-decoration: underline; }

/* ── Bottom band: deliberately slight — a footnote, not a footer ── */
.botbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 18px 10px; min-width: 0;
  font-size: 11.5px; line-height: 1.4; color: var(--text-muted);
}
.bb-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-links { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.bb-link {
  border: 0; padding: 0; background: none; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.bb-link:hover { color: var(--primary); }

/* ── Footer (broker detail page only) ───────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 14px 22px 18px; text-align: center; margin-top: auto;
}
.site-foot p { margin: 4px 0; font-size: 12.5px; color: var(--text-muted); }
.site-foot a { color: var(--primary); font-weight: 700; }

/* ── Disclaimer modal ───────────────────────────────────── */
.disc-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.disc-modal.is-closed { display: none; }
.disc-backdrop { position: absolute; inset: 0; background: rgba(26, 10, 50, 0.6); }
.disc-card {
  position: relative; width: min(440px, 100%); background: var(--surface);
  border-radius: 18px; box-shadow: var(--shadow); padding: 22px 22px 18px; text-align: center;
}
.disc-icon { font-size: 34px; }
.disc-title { margin: 8px 0 4px; font-size: 19px; font-weight: 900; }
.disc-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 8px 0; }
.disc-body .disc-em { font-weight: 700; color: var(--text); }
.disc-body a { color: var(--primary); font-weight: 700; }
.disc-btn {
  margin-top: 10px; width: 100%; padding: 12px; border: 0; border-radius: 12px;
  background: var(--primary); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
[data-theme="dark"] .disc-btn { color: #1a0a32; }
.disc-btn:hover { opacity: 0.92; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .panel { margin: 10px 12px 0; }
}
@media (max-width: 900px) {
  /* One stacked column: wordmark → store badges → toolbar → directory.
     `display: contents` dissolves .main-col and .panel so their header,
     toolbar and scroll area become direct flex children of `.split` and can be
     ordered freely. The window is only a window on desktop: on a phone the
     chrome stacks straight onto the backdrop, same as /tolet. */
  .split { flex-direction: column; height: 100dvh; overflow-y: auto; overflow-x: hidden; }
  .main-col, .panel { display: contents; }
  .panel-head  { order: 0; flex: 0 0 auto; padding: 8px 16px 2px;
                 position: sticky; top: 0; z-index: 31; background: var(--backdrop); }
  .hero        { order: 1; }
  /* The sticky offset is the head's own height written out — 8px + the logo +
     2px — so the two bands stay welded when the logo shrinks on a short phone. */
  .toolbar     { order: 2; flex: 0 0 auto;
                 position: sticky; top: calc(10px + min(46px, 5.5dvh)); z-index: 30; background: var(--backdrop); padding: 8px 14px 10px; }
  .panel-scroll{ order: 3; flex: 0 0 auto; overflow: visible; min-height: 0; background: none; border-top: 0; }
  .botbar      { order: 4; }

  .hero { flex: 0 0 auto; max-width: none; min-width: 0; align-items: center; padding: 4px 14px 12px; }
  /* Small and sleek on a phone: the wordmark is what carries the brand in this
     band, so the whole "TOO BROKE TO PAY BROKERAGE?" lockup goes — tilted words
     and flat artwork alike. Same call /tolet makes. */
  .panel-logo { height: min(46px, 5.5dvh); }
  .hero-inner { width: 100%; flex-direction: column; align-items: center; gap: 10px; padding: 0; }
  .hero-headline, .hero-tagline { display: none; }
  .hero-key, .hero-skip, .hero-rule, .hd-pre, .hd-name { display: none; }
  .hero-download { margin: 0; }
  .store-links { justify-content: center; margin-top: 0; gap: 9px; }
  .store-badge { padding: 7px 13px 8px; gap: 8px; border-radius: 10px; }
  .store-badge svg { width: 21px; height: 21px; }
  .sb-txt { font-size: 13px; gap: 1px; }
  .sb-txt small { font-size: 8.5px; }

  .toolbar-row { gap: 8px; }
  #brokerSearch { height: 44px; font-size: 15px; }
  .city-btn { height: 44px; font-size: 13.5px; max-width: 124px; padding: 0 9px 0 11px; }
  .dd-btn, .sort-btn { height: 44px; }
  .toolbar-meta { padding: 10px 2px 0; }
  .sort-dd { margin-left: auto; }

  .grid-wrap { padding: 12px 14px 84px; }
  .card-grid { grid-template-columns: 1fr; gap: 11px; }
  /* Tighter broker cards for phones */
  .bcard-head { padding: 11px 46px 9px 14px; }
  .bcard-name { font-size: 15px; }
  .bcard-sub { font-size: 12px; }
  .bcard-body { padding: 10px 14px 12px; gap: 9px; }
  .bcard-n { font-size: 13px; }
  .bhk-pill { font-size: 12px; padding: 5px 11px; }
  .bcard-areas { gap: 4px; min-height: 0; }
  .area-chip { font-size: 11.5px; padding: 4px 9px; }
  /* Panel no longer establishes a positioning context (display: contents),
     so pin the floating map toggle to the viewport instead. */
  .map-toggle { position: fixed; left: 14px; bottom: 14px; }

  /* One line of a footnote is a desktop luxury; on a phone the note wraps and
     the links sit under it rather than being squeezed off the end. */
  .botbar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px 16px; }
  .bb-note { white-space: normal; overflow: visible; }

  .bk-banner { padding: 10px 84px; }
  .bk-page { padding: 12px 14px 30px; }
  .bk-title { font-size: 19px; white-space: normal; }
  .bk-hero { flex-wrap: wrap; }
  .lst-grid { columns: 300px; }
  /* Map mode is contained (no page scroll / sticky): logo, hero and toolbar sit
     at the top as normal flex items and the map+list fill the rest. The map
     pane goes on top (column-reverse — it follows the list in the DOM). */
  body.map-on .split { overflow: hidden; }
  body.map-on .panel-head, body.map-on .toolbar { position: static; }
  body.map-on .panel-scroll { flex: 1 1 auto; overflow: hidden; }
  body.map-on .grid-wrap { flex-direction: column-reverse; padding: 8px 12px; gap: 10px; }
  body.map-on .gutter { display: none; }
  body.map-on .botbar { display: none; }
  .map-pane { flex: 0 0 auto; height: 22dvh; }
  body.map-on .list-pane { flex: 1 1 auto; overflow-y: auto; }
  /* Slimmer broker cards in map mode so more fit beside the small map */
  body.map-on .card-grid { gap: 9px; }
  body.map-on .bcard-head { padding: 9px 42px 7px 12px; }
  body.map-on .bcard-name { font-size: 14px; }
  body.map-on .bcard-sub { font-size: 11.5px; }
  body.map-on .bcard-body { padding: 8px 12px 10px; gap: 7px; }
  body.map-on .bcard-copy { top: 8px; right: 8px; width: 27px; height: 27px; }
}
@media (max-width: 560px) {
  .lst-grid { columns: 1; }
  /* Search on its own full-width row above filter / sort */
  .search-row { flex: 1 1 100%; order: -1; }
  /* Broker-page banner: left-align the logo so it clears the theme switch */
  .bk-banner { justify-content: flex-start; padding: 10px 92px 10px 16px; }
  .bk-banner .panel-logo { height: 42px; }
}