/* ── 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, 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;
  --ok-soft: #e7f6ee;
  --warn: #c77700;
  --warn-soft: #fbf0dd;
  --wa: #25d366;
  --wa-deep: #1da851;
  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;
  --ok-soft: #14301f;
  --warn: #ffc061;
  --warn-soft: #3a2b12;
  --wa: #25d366;
  --wa-deep: #1da851;
}

* { 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 */
html, .panel-scroll, .city-menu, .dd-panel, .sort-menu {
  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 (identical lockup to /tolet and /brokerdirectory) ────── */
/* The whole hero is a link to the homepage (see app.js); the store badges
   opt out of that in the handler. */
.hero {
  flex: 0 0 20%; min-width: 0; overflow: hidden;
  display: flex; align-items: stretch; justify-content: center;
  cursor: pointer; 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;
}
/* Brand lockup mirrors /brokerdirectory's "Ghosla — The Broker Edit": the bird,
   "Ghosla" in bold pink, and the section name as a small letter-spaced sublabel. */
.panel-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.panel-logo { height: 60px; width: auto; display: block; }
.panel-wordmark { display: flex; flex-direction: column; line-height: 1; }
/* Exact colour of the broker-edit logo: both lines are #ff84a1 (the image is
   monochrome), kept literal so it holds in dark mode like the image does. */
.pw-name { font-size: 40px; font-weight: 900; color: #ff84a1; letter-spacing: -0.5px; }
.pw-sub { font-size: 12.5px; font-weight: 700; color: #ff84a1; letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }

/* ── 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 dropdown — 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 #cityLabel { overflow: hidden; text-overflow: ellipsis; }
.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: 240px; 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 { font-size: 12px; color: var(--text-muted); font-weight: 600; flex: 0 0 auto; }
.city-item.is-on .cnt { color: var(--primary); }

/* Search */
.search-wrap { position: relative; flex: 1 1 220px; 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;
}
#waSearch {
  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;
}
#waSearch::placeholder { color: var(--text-muted); }
#waSearch: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: auto; right: 0; z-index: 50;
  width: 300px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 14px;
  display: none; max-height: min(72vh, 560px); overflow: auto;
}
.dd.open .dd-panel { 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; }
.chip-row { 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; }
.fchip.q-on { background: var(--ok); color: #fff; border-color: var(--ok); }
[data-theme="dark"] .fchip.q-on { color: #06210f; }
.dd-clear {
  margin-top: 2px; 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); }

/* 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: 210px;
  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; }
/* Masonry: cards flow into columns and keep their natural height, so a card
   with little content stays short instead of stretching to its row. */
.card-grid { columns: 274px; column-gap: 15px; }
.grid-sentinel { height: 1px; }
.empty-msg { text-align: center; color: var(--text-muted); padding: 60px 20px; font-size: 15px; }

/* ── Group card ─────────────────────────────────────────── */
.gcard {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 12px; width: 100%;
}
.gcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.gcard.q-high { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.gcard.q-broker { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }

.gc-head { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 14px; }
.gc-av, .gc-av-fb {
  width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line);
}
.gc-av { object-fit: cover; background: var(--pill); }
.gc-av-fb {
  display: flex; align-items: center; justify-content: center;
  background: var(--pill); color: var(--primary); font-weight: 900; font-size: 21px;
}
.gc-headtxt { min-width: 0; flex: 1; padding-top: 2px; }
.gc-name { font-weight: 800; font-size: 15.5px; letter-spacing: -0.2px; color: var(--text); line-height: 1.3; }
.gc-tags { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.kind-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--pill); color: var(--chip-ink); white-space: nowrap; }
.kind-pill.k-channel { color: #2f6fed; }
[data-theme="dark"] .kind-pill.k-channel { color: #9db9ff; }
.gc-city { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Quality badge */
.qbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.qbadge svg { width: 12px; height: 12px; }
.qbadge.q-high { background: var(--ok-soft); color: var(--ok); }
.qbadge.q-broker { background: var(--warn-soft); color: var(--warn); }

.gc-desc {
  margin: 0 18px 2px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.gc-body.has-border { border-top: 1px solid var(--line); margin-top: 14px; }

.gc-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-track { position: relative; flex: 1; min-width: 50px; 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); }

.gc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--pill); color: var(--chip-ink); white-space: nowrap; }
.chip.bhk { font-weight: 800; color: var(--ink); }

.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-reach { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.join {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--wa); color: #fff; font-weight: 800; font-size: 13.5px;
  border: 0; border-radius: 10px; padding: 9px 15px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.join:hover { background: var(--wa-deep); }
.join svg { width: 15px; height: 15px; fill: currentColor; }


/* ── 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); }

/* ── 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); }

/* ── 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) {
  /* `display: contents` dissolves .main-col and .panel so the wordmark, hero,
     toolbar and cards all become direct 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. */
  .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(40px, 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(40px, 5dvh); }
  .pw-name { font-size: 27px; }
  .pw-sub { font-size: 9px; letter-spacing: 1.4px; margin-top: 4px; }
  .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; }
  #waSearch { 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; }

  .grid-wrap { padding: 12px 14px 20px; }
  .card-grid { columns: 1; }
  .gcard { margin-bottom: 11px; }
  .botbar { padding: 10px 16px 16px; }
  /* 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; }
  .bb-note { white-space: normal; overflow: visible; }
}
@media (max-width: 560px) {
  .search-row { flex: 1 1 100%; order: -1; }
  .sort-dd { margin-left: auto; }
}