:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f5f4;
  --surface-3: #eef3f8;
  --ink: #111827;
  --muted: #5c6673;
  --faint: #8a94a3;
  --line: #d9e0e7;
  --line-strong: #c2ccd6;
  --accent: #087568;
  --accent-dark: #075b52;
  --blue: #275f9a;
  --amber: #91620f;
  --red: #a33f3a;
  --green-soft: #e8f5ef;
  --blue-soft: #e8f1fb;
  --amber-soft: #fff4dc;
  --red-soft: #fff0ef;
  --shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  /* Both elements, deliberately. iOS Safari resolves overflow from the root
     element, so `overflow-x: hidden` on body alone leaves the visual viewport
     draggable sideways - the horizontal play reported on an iPhone 15 Pro Max
     while the document itself measured no wider than the viewport. */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

button.primary,
.workspace-tabs button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid rgba(8, 117, 104, 0.22);
  outline-offset: 1px;
}

textarea {
  min-height: 72px;
  resize: vertical;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.app-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 14px clamp(16px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.brand-lockup {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.eyebrow {
  margin-bottom: 3px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

h1 {
  font-size: 25px;
  line-height: 1;
}

.dek {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.product {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 76px);
}

.mobile-filter-bar,
.mobile-filter-backdrop,
.filter-mobile-head,
.filter-mobile-footer {
  display: none;
}

.filters {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 76px);
  overflow: auto;
  padding: 16px;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.filter-head h2 {
  font-size: 18px;
}

.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.mode-btn {
  border: 0;
  border-radius: 5px;
  min-height: 32px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.mode-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
}

.filter-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.filter-section h2 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.commute-sentence {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.commute-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.checkline {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.checkline input {
  width: 16px;
  height: 16px;
  min-height: 0;
}

.filters.curated .advanced-only {
  display: none;
}

.curated-hint {
  display: none;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.4;
}

.filters.curated .curated-hint {
  display: block;
}

.workspace {
  min-width: 0;
  padding: 16px clamp(16px, 2.8vw, 34px) 34px;
}

.workspace-tabs {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -16px calc(clamp(16px, 2.8vw, 34px) * -1) 14px;
  padding: 12px clamp(16px, 2.8vw, 34px);
  border-bottom: 1px solid var(--line);
  background: rgba(247, 248, 250, 0.94);
  backdrop-filter: blur(12px);
}

.workspace-tabs button {
  min-width: 88px;
  min-height: 34px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.mobile-deck {
  display: none;
}

.result-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.result-toolbar h2 {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.08;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.toolbar-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.metric {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 12px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.metric strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 25px;
  line-height: 1;
}

.explore-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  align-items: start;
}

.results-list {
  display: grid;
  gap: 10px;
}

.listing-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.04);
  overflow: hidden;
}

.listing-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.listing-card.status-interested {
  border-left: 4px solid var(--accent);
}

.listing-card.status-touring {
  border-left: 4px solid var(--blue);
}

.listing-card.status-ruled_out {
  opacity: 0.56;
}

.listing-card.status-ruled_out h3 {
  text-decoration: line-through;
}

.listing-main,
.listing-side {
  min-width: 0;
}

.listing-main {
  display: grid;
  gap: 12px;
  align-content: start;
}

.listing-side {
  display: grid;
  gap: 10px;
  align-content: start;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

.card-head-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.card-head-copy {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-title-row h3 {
  font-size: 20px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.subtle,
.fineprint {
  color: var(--muted);
}

.subtle {
  font-size: 13px;
  line-height: 1.42;
}

.fineprint {
  font-size: 12px;
  line-height: 1.4;
}

.price {
  white-space: nowrap;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.card-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.card-meta-line span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-2);
}

.location-pros-cons {
  display: grid;
  gap: 0;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.location-signal-group {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.35;
}

.location-signal-group:first-child {
  border-top: 0;
}

.location-signal-items {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.signal-more {
  justify-self: start;
  margin: 6px 0 8px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.signal-more:hover {
  color: var(--ink, #111);
}

.location-signal-items span {
  position: relative;
  padding-left: 13px;
  color: var(--muted);
  font-weight: 760;
}

.location-signal-items span::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.location-signal-group.good .location-signal-items span {
  color: var(--accent-dark);
}

.location-signal-group.bad .location-signal-items span {
  color: var(--amber);
}

.location-signal-group.verify .location-signal-items span {
  color: var(--blue);
}

.location-signal-label {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 900;
}

/* Commute anchor: the renter's own destination, first thing in the card body */
.commute-anchor {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-dark) 32%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-dark) 6%, transparent);
  display: grid;
  gap: 3px;
}

.commute-anchor-main {
  font-size: 13px;
  font-weight: 760;
}

.commute-anchor-main b {
  font-size: 16px;
  font-weight: 900;
}

.commute-anchor-main span {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
}

.commute-anchor-rail {
  font-size: 12px;
  color: var(--muted);
}

.commute-anchor-rail b {
  color: inherit;
  font-weight: 800;
}

/* Watch signals: amber TEXT only (see .bad .location-signal-items span),
   no boxed strip -- reads like the good group, just yellow. Add breathing
   room above so it doesn't crowd the good list. */
.location-signal-group.bad {
  margin-top: 14px;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.evidence-tile {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  padding: 8px;
}

.evidence-tile span,
.evidence-tile small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.evidence-tile strong {
  display: block;
  margin: 3px 0;
  font-size: 15px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.evidence-tile.good {
  background: var(--green-soft);
  border-color: rgba(8, 117, 104, 0.18);
}

.evidence-tile.info {
  background: var(--blue-soft);
  border-color: rgba(39, 95, 154, 0.18);
}

.evidence-tile.warn {
  background: var(--amber-soft);
  border-color: rgba(145, 98, 15, 0.18);
}

.card-facts,
.comfort-line,
.detail-basics,
.data-coverage-line,
.amenity-line,
.warning-line {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.comfort-line {
  color: var(--accent-dark);
  font-weight: 800;
}

.detail-basics {
  color: var(--ink);
  font-weight: 800;
}

.data-coverage-line {
  color: var(--faint);
  font-weight: 560;
}

.warning-line {
  color: var(--amber);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tag.good {
  border-color: rgba(8, 117, 104, 0.18);
  background: var(--green-soft);
  color: var(--accent-dark);
}

.tag.info {
  border-color: rgba(39, 95, 154, 0.18);
  background: var(--blue-soft);
  color: var(--blue);
}

.tag.warn {
  border-color: rgba(145, 98, 15, 0.2);
  background: var(--amber-soft);
  color: var(--amber);
}

.tag.bad {
  border-color: rgba(163, 63, 58, 0.18);
  background: var(--red-soft);
  color: var(--red);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.status-select {
  width: auto;
  min-height: 30px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
}

.compare-check {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.compare-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
}

.unit-table,
.data-table,
.detail-units,
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.unit-table th,
.unit-table td,
.data-table th,
.data-table td,
.detail-units th,
.detail-units td,
.compare-table th,
.compare-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
}

.unit-table th,
.data-table th,
.detail-units th,
.compare-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

/* Floor plan in the row. It is what you are choosing between, so it should
   not need the detail modal opened and closed once per unit. */
.unit-table.with-plans td.u-plan { width: 58px; padding: 6px 4px 6px 0; }
.unit-plan-thumb {
  display: block; width: 54px; height: 54px; padding: 0; cursor: zoom-in;
  border: 1px solid var(--line); background: #fff; border-radius: 2px;
}
.unit-plan-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.unit-plan-thumb:hover { border-color: var(--accent); }
.unit-plan-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unit-plan-none {
  display: block; width: 54px; height: 54px;
  border: 1px dashed var(--line); border-radius: 2px;
}
.unit-table td.u-name { line-height: 1.35; }
.unit-face {
  display: block; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.price-chip.wanted {
  border-color: var(--accent); color: var(--accent); font-weight: 700;
}
.price-chip.count { color: var(--muted); font-variant-numeric: tabular-nums; }

.source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.source-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 800;
}

.note-box {
  display: grid;
  gap: 5px;
}

.note-box textarea {
  min-height: 68px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.panel + .panel {
  margin-top: 10px;
}

.panel h2,
.panel h3 {
  font-size: 15px;
}

.decision-rail {
  position: sticky;
  top: 132px;
}

.rail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.mini-stat {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  padding: 8px;
}

.mini-stat strong {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.mini-stat span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.rail-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.rail-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.rail-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rail-list span {
  color: var(--muted);
  font-size: 12px;
}

.class-stack {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.class-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.bar-track {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #e8edf2;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.reason-list {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}

.reason-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 5px;
}

.reason-list li::before {
  content: "OK";
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
}

.reason-list.warn li::before {
  content: "!";
  color: var(--amber);
  font-size: 14px;
}

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 0 4px;
  flex-wrap: wrap;
}

.page-info {
  color: var(--muted);
  font-size: 13px;
  margin-right: 8px;
}

.page-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}

.page-btn.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.page-ellipsis {
  padding: 0 4px;
  color: var(--muted);
}

.card-visuals {
  position: relative;
  min-height: 164px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3);
}

.card-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 164px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 0;
}

.card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 164px;
  object-fit: cover;
}

.card-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(17, 24, 39, 0) 48%, rgba(17, 24, 39, 0.34) 100%);
  pointer-events: none;
}

.media-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  min-height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 850;
}

.card-mini-map {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  display: block;
  width: 92px;
  height: 66px;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 7px;
  background: #eaf0f2;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.24);
  padding: 0;
}

.card-mini-map .map-pin {
  width: 10px;
  height: 10px;
  border-width: 2px;
}

.card-map {
  position: relative;
  display: block;
  width: 100%;
  min-height: 164px;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #eaf0f2;
  padding: 0;
  cursor: pointer;
}

.placeholder-map {
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}

.static-map-grid {
  position: absolute;
  left: calc(50% - var(--pin-x));
  top: calc(50% - var(--pin-y));
  display: grid;
  grid-template-columns: repeat(3, 256px);
  grid-template-rows: repeat(3, 256px);
  width: 768px;
  height: 768px;
}

.static-map-grid img {
  display: block;
  width: 256px;
  height: 256px;
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #d84b42;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
}

.coverage-grid,
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}

.coverage-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.rule-card {
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.rule-card h3 {
  margin: 8px 0;
}

.code-block {
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  background: #f2f5f7;
  color: #26303a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.amenity-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.amenity-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.amenity-item .a-icon {
  font-size: 10px;
  font-weight: 900;
}

.amenity-item.good .a-icon {
  color: var(--accent-dark);
}

.amenity-item.bad .a-icon {
  color: var(--amber);
}

.amenity-item.unknown .a-icon {
  color: var(--line-strong);
}

.compare-grid {
  overflow-x: auto;
}

.compare-table {
  min-width: 760px;
}

.compare-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  background: var(--surface);
}

.detail-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  align-items: start;
  justify-items: center;
  overflow: auto;
  padding: 24px;
  background: rgba(17, 24, 39, 0.48);
}

.detail-modal-panel {
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(17, 24, 39, 0.28);
  padding: 16px;
}

.detail-modal-head {
  position: sticky;
  top: -16px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: -16px -16px 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.detail-modal-head h2 {
  font-size: 24px;
  line-height: 1.1;
}

.detail-close {
  min-width: 74px;
}

.detail-overlay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.detail-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
}

.detail-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.section-title {
  margin: 18px 0 8px;
  font-size: 16px;
}

.review-control-panel {
  display: grid;
  gap: 12px;
}

.review-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.review-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
}

.review-actions button {
  min-height: 42px;
  font-size: 14px;
  font-weight: 850;
}

.review-actions .like {
  border-color: rgba(8, 117, 104, 0.22);
  background: var(--green-soft);
  color: var(--accent-dark);
}

.review-actions .pass {
  border-color: rgba(163, 63, 58, 0.22);
  background: var(--red-soft);
  color: var(--red);
}

.text-button {
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  text-decoration: underline;
}

.review-counts {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.review-saved-lists summary {
  cursor: pointer;
  font-weight: 850;
}

.review-saved-lists h4 {
  margin-top: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.review-mini-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.review-mini-list button {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 8px;
  text-align: left;
}

.review-mini-list small {
  color: var(--muted);
}

.condo-filters,
.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.condo-filters label,
.map-controls label {
  min-width: 170px;
}

.map-panel {
  display: grid;
  gap: 12px;
}

.map-check {
  width: auto;
  min-width: 130px;
  align-self: end;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
}

.street-map {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf2f4;
}

.map-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--muted);
}

.legend-dot.building { background: var(--ink); }
.legend-dot.grocery { background: #52b788; }
.legend-dot.cafe { background: #7abf92; }
.legend-dot.restaurant { background: #efb45d; }
.legend-dot.park { background: #91c46c; }
.legend-dot.school,
.legend-dot.healthcare { background: #6aa4d8; }
.legend-dot.fitness { background: #b085d6; }
.legend-dot.public-facility,
.legend-dot.public_facility { background: #60b8b0; }
.legend-dot.transit { background: #e7bd57; }
.legend-dot.destination { background: #d66a5d; }

.map-sidebar,
.category-stack,
.poi-list {
  display: grid;
  gap: 10px;
}

.category-stack div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.poi-list {
  max-height: 520px;
  overflow: auto;
  margin-top: 10px;
}

.poi-row {
  display: grid;
  gap: 3px;
  min-height: 44px;
  text-align: left;
}

.poi-row small {
  color: var(--muted);
}

.poi-row.selected {
  border-color: var(--accent);
  background: var(--green-soft);
}

.photo-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  margin-top: 8px;
  scroll-snap-type: x mandatory;
}

.photo-gallery-item {
  flex: 0 0 auto;
  min-height: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0;
  scroll-snap-align: start;
}

.photo-gallery img,
.photo-gallery-item img {
  height: 178px;
  min-width: 238px;
  object-fit: cover;
  border-radius: 7px;
  scroll-snap-align: start;
  cursor: pointer;
}

.photo-gallery img:hover {
  opacity: 0.88;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
  cursor: pointer;
}

.photo-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 900;
}

.photo-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  /* The script owns swipe, pinch and double-tap here. Left to the browser,
     a horizontal drag scrolls the page behind the overlay instead of moving
     to the next photo. */
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

.fp-thumb-button {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.fp-thumb {
  display: inline-block;
  width: 72px;
  height: 52px;
  object-fit: cover;
  border-radius: 5px;
  margin: 2px 2px 0 0;
  cursor: pointer;
  vertical-align: middle;
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px clamp(16px, 2.4vw, 34px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .product {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .listing-card {
    grid-template-columns: 1fr;
  }

  .listing-side {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 10px;
  }

  .card-head-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .decision-rail {
    position: static;
  }
}

@media (max-width: 900px) {
  .app-shell {
    display: none;
  }

  .app-shell .eyebrow,
  .app-shell .dek,
  .top-actions {
    display: none;
  }

  .brand-lockup {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  h1 {
    font-size: 24px;
  }

  .product {
    display: block;
    min-height: 0;
  }

  .mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 24, 39, 0.48);
  }

  body.filters-open {
    overflow: hidden;
  }

  body.filters-open .mobile-filter-backdrop {
    display: block;
  }

  .filters {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    max-height: min(84vh, 740px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 78px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #fbfcfd;
    box-shadow: 0 -24px 70px rgba(17, 24, 39, 0.28);
    transform: translateY(105%);
    transition: transform 180ms ease;
  }

  body.filters-open .filters {
    transform: translateY(0);
  }

  .filter-head {
    display: none;
  }

  .filter-mobile-head {
    position: sticky;
    top: -12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -12px -14px 4px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(251, 252, 253, 0.96);
    backdrop-filter: blur(12px);
  }

  .filter-mobile-head h2 {
    font-size: 18px;
  }

  .filter-mobile-footer {
    position: sticky;
    bottom: -78px;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    margin: 12px -14px -78px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(251, 252, 253, 0.96);
    backdrop-filter: blur(12px);
  }

  .filter-mobile-footer button {
    min-height: 46px;
    font-weight: 900;
  }

  #mobileFilterClear {
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--ink, #111);
  }

  .mode-toggle {
    display: none;
  }

  .curated-hint {
    display: none !important;
  }

  .workspace-tabs {
    display: none;
  }

  #explore > .result-toolbar,
  #explore > .summary-grid,
  #explore > .explore-grid {
    display: none;
  }

  .mobile-deck {
    display: grid;
    gap: 12px;
  }

  .mobile-deck-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px 2px;
    scrollbar-width: none;
  }

  .mobile-deck-tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-deck-tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    border-radius: 999px;
    padding: 0 13px;
    color: var(--muted);
    font-weight: 850;
  }

  .mobile-deck-tabs .mobile-filter-icon {
    position: relative;
    display: grid;
    width: 38px;
    min-width: 38px;
    padding: 0;
    place-items: center;
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink);
  }

  .mobile-filter-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .mobile-deck-tabs .mobile-filter-icon.has-active-filters {
    border-color: var(--accent);
    color: var(--accent-dark);
  }

  .mobile-deck-tabs .mobile-filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 17px;
    height: 17px;
    margin: 0;
    padding: 0 4px;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    opacity: 1;
  }

  .mobile-deck-tabs button.active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
  }

  .mobile-deck-tabs span {
    margin-left: 4px;
    opacity: 0.72;
  }

  .mobile-home-card,
  .mobile-deck-empty,
  .mobile-saved-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
  }

  .mobile-home-card {
    overflow: hidden;
  }

  .mobile-home-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 14px 10px;
  }

  .mobile-home-head h2 {
    font-size: 28px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .mobile-home-media {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    background: var(--surface-3);
  }

  .mobile-media-strip {
    display: flex;
    height: 330px;
    overflow-x: auto;
    /* Keep the swipe inside the carousel. Without this the horizontal scroll
       chains to the page once the strip hits either end, which on iOS reads as
       the whole layout sliding sideways under your thumb. */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .mobile-media-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-media-frame {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 330px;
    min-height: 330px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    scroll-snap-align: start;
  }

  .mobile-media-frame.is-floorplan,
  .mobile-media-frame.is-floorplan img {
    background: #fff;
    object-fit: contain;
  }

  .mobile-media-frame .fp-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    background: var(--accent, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 999px;
  }

  .mobile-home-media img,
  .mobile-media-frame img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
  }

  .mobile-media-controls {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    gap: 6px;
  }

  .mobile-media-controls button {
    min-height: 28px;
    border-color: rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 900;
  }

  .mobile-home-media.map-only {
    min-height: 260px;
  }

  .mobile-card-body {
    display: grid;
    gap: 10px;
    padding: 12px 14px 0;
  }

  .mobile-card-body .location-pros-cons {
    margin-top: 0;
  }

  .mobile-unit-section,
  .mobile-card-section {
    display: grid;
    gap: 8px;
  }

  .mobile-card-section {
    border-top: 1px solid var(--line);
    padding-top: 12px;
  }

  .mobile-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-section-head h3 {
    font-size: 15px;
  }

  .mobile-section-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-unit-list {
    display: grid;
    gap: 8px;
  }

  .mobile-unit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 8px;
  }

  .mobile-unit-card.has-preview {
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: stretch;
  }

  .mobile-unit-card.no-preview {
    grid-template-columns: 1fr;
  }

  .mobile-unit-photo {
    display: grid;
    width: 78px;
    min-height: 78px;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: #e8edf2;
    padding: 0;
    place-items: center;
  }

  .mobile-unit-photo img {
    width: 100%;
    height: 100%;
    min-height: 78px;
    object-fit: cover;
  }

  .mobile-unit-photo.empty-media span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-unit-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  /* Four lines, each answering one question, in the order a reader asks them:
     which unit / when / how much / what is it. The old card opened with the
     rent and buried the unit number mid-sentence three lines in, so scanning a
     list of seventeen units meant re-reading every card to find its label. */
  .mobile-unit-id {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .mobile-unit-id strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }

  .mobile-unit-when {
    flex: none;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
  }

  .mobile-unit-price {
    font-size: 19px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .mobile-unit-spec,
  .mobile-unit-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
  }

  .mobile-unit-copy .fineprint {
    margin: 0;
    min-width: 0;
  }

  /* Read the plan by scrolling, not by opening it. The product's rule is that a
     renter scrolls one card top to bottom and has the information; a modal for
     every floor plan is a tax on that. So the drawing renders at the card's full
     width at its own aspect ratio - `height: auto`, never a fixed box - because
     a plan squeezed into someone else's rectangle is either cropped or too
     small to read. It was a 92x48 chip, which is neither. Tapping still opens
     the lightbox for fine print, but nothing requires it. */
  .mobile-unit-floorplan {
    position: relative;
    display: block;
    /* A phone is 375px wide and a floor plan is the widest thing on the card,
       so every pixel of container padding comes straight off the drawing. This
       reaches back through the unit card's 12px inset and drops its own inner
       padding: 271px of usable width becomes 311px, a 15% larger drawing for no
       extra scrolling. */
    width: calc(100% + 24px);
    margin: 8px -12px 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
  }

  .mobile-unit-floorplan img {
    display: block;
    width: 100%;
    height: auto;
    /* Reserve the space before the lazy image arrives. With `height: auto` and
       nothing loaded, the block measures zero and every plan below jolts down
       the moment its drawing appears - which is exactly the scroll this design
       is built around. */
    min-height: 132px;
    /* A very tall plan should not push the next unit entirely off screen. */
    max-height: 78vh;
    object-fit: contain;
  }

  .mobile-unit-floorplan .fp-tag {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .mobile-unit-media-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
  }

  .mobile-unit-media-thumb {
    display: grid;
    width: 64px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    padding: 0;
    place-items: center;
  }

  .mobile-unit-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-unit-media-thumb.is-floorplan {
    position: relative;
    width: 92px;
    border-color: var(--accent, #2563eb);
    border-width: 2px;
  }

  .mobile-unit-media-thumb.is-floorplan img {
    object-fit: contain;
    padding: 2px;
  }

  .mobile-unit-media-thumb .fp-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent, #2563eb);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 1px 0;
  }

  .mobile-unit-media-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-detail-link {
    width: 100%;
    border-color: var(--line-strong);
    background: var(--surface);
    font-weight: 900;
  }

  .mobile-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-fact-grid div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 8px;
  }

  .mobile-fact-grid span,
  .mobile-commute-row span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
  }

  .mobile-fact-grid strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .mobile-commute-list {
    display: grid;
    gap: 8px;
  }

  .mobile-commute-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 8px;
  }

  .mobile-commute-row strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
  }

  .mobile-commute-row b {
    color: var(--accent-dark);
    font-size: 13px;
    white-space: nowrap;
  }

  .mobile-deck-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
  }

  .mobile-deck-actions button {
    display: grid;
    gap: 2px;
    min-height: 54px;
    align-content: center;
    justify-items: center;
    padding: 6px 4px;
  }

  .mobile-deck-actions strong {
    font-size: 15px;
    line-height: 1;
  }

  .mobile-deck-actions span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 760;
  }

  .mobile-deck-actions .pass {
    border-color: rgba(163, 63, 58, 0.22);
    background: var(--red-soft);
    color: var(--red);
  }

  .mobile-deck-actions .skip {
    border-color: rgba(145, 98, 15, 0.22);
    background: var(--amber-soft);
    color: var(--amber);
  }

  .mobile-deck-actions .like {
    border-color: rgba(8, 117, 104, 0.24);
    background: var(--green-soft);
    color: var(--accent-dark);
  }

  .mobile-deck-empty {
    display: grid;
    gap: 10px;
    padding: 22px 16px;
  }

  .mobile-deck-empty h2,
  .mobile-saved-head h2 {
    font-size: 24px;
  }

  .mobile-deck-empty-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-clear-filters {
    justify-self: start;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--accent, #0b7);
    color: #fff;
    font: inherit;
    font-weight: 760;
    cursor: pointer;
  }

  .mobile-saved-list {
    display: grid;
    gap: 10px;
  }

  .mobile-saved-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-saved-card {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 0;
  }

  .mobile-saved-card.expanded {
    border-color: var(--line-strong);
  }

  .mobile-saved-summary {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    padding: 10px;
    text-align: left;
  }

  .mobile-saved-copy {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
  }

  .mobile-saved-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .mobile-saved-title-row strong {
    font-size: 17px;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .mobile-saved-title-row em {
    flex: 0 0 auto;
    color: var(--accent-dark);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-saved-thumb {
    position: relative;
    display: block;
    min-height: 92px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-3);
  }

  .mobile-saved-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
  }

  .mobile-saved-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 10px 10px;
  }

  .mobile-saved-signals span {
    display: inline-flex;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-saved-signals .good {
    border-color: rgba(8, 117, 104, 0.18);
    background: var(--green-soft);
    color: var(--accent-dark);
  }

  .mobile-saved-signals .watch {
    border-color: rgba(145, 98, 15, 0.18);
    background: var(--amber-soft);
    color: var(--amber);
  }

  .mobile-saved-signals .more {
    color: var(--muted);
  }

  .mobile-saved-expanded {
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .mobile-saved-expanded .mobile-home-media {
    min-height: 300px;
  }

  .mobile-saved-expanded .mobile-media-strip,
  .mobile-saved-expanded .mobile-media-frame,
  .mobile-saved-expanded .mobile-home-media img,
  .mobile-saved-expanded .mobile-media-frame img {
    height: 300px;
    min-height: 300px;
  }

  .mobile-saved-expanded .mobile-card-body {
    padding: 12px 10px 0;
  }

  .mobile-saved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
    padding: 10px;
    border-top: 1px solid var(--line);
  }

  .mobile-saved-actions-inline {
    padding-top: 0;
    border-top: 0;
  }

  .mobile-saved-actions-detail {
    align-items: center;
  }

  .mobile-saved-actions a,
  .mobile-saved-actions button {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 9px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-saved-actions .saved-action-like {
    border-color: rgba(8, 117, 104, 0.24);
    background: var(--green-soft);
    color: var(--accent-dark);
  }

  .mobile-saved-actions .saved-action-skip {
    border-color: rgba(145, 98, 15, 0.22);
    background: var(--amber-soft);
    color: var(--amber);
  }

  .mobile-saved-actions .saved-action-pass {
    border-color: rgba(163, 63, 58, 0.22);
    background: var(--red-soft);
    color: var(--red);
  }

  .summary-grid,
  .explore-grid,
  .coverage-grid,
  .map-layout,
  .detail-overlay {
    grid-template-columns: 1fr;
  }

  .listing-card {
    grid-template-columns: 1fr;
  }

  .listing-side {
    overflow-x: auto;
  }

  .card-head-grid {
    grid-template-columns: 1fr;
  }

  .card-map {
    min-height: 190px;
  }

  .card-visuals,
  .card-photo,
  .card-photo img {
    min-height: 210px;
  }

  .result-toolbar,
  .detail-summary-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .app-shell {
    padding: 9px 12px;
  }

  .brand-lockup {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  h1 {
    font-size: 23px;
  }

  .workspace {
    padding: 14px;
  }

  .summary-grid {
    gap: 8px;
  }

  .metric {
    min-height: 64px;
    padding: 10px;
  }

  .metric strong {
    font-size: 20px;
  }

  .listing-card {
    padding: 10px;
  }

  .card-title-row {
    display: grid;
    gap: 6px;
  }

  .card-title-row h3 {
    font-size: 18px;
  }

  .price {
    font-size: 18px;
  }

  .card-visuals,
  .card-photo,
  .card-photo img {
    min-height: 164px;
  }

  .card-mini-map {
    width: 78px;
    height: 56px;
  }

  .mobile-home-head {
    padding: 12px 12px 8px;
  }

  .mobile-home-head h2 {
    font-size: 25px;
  }

  .mobile-home-media,
  .mobile-home-media img,
  .mobile-media-strip,
  .mobile-media-frame,
  .mobile-media-frame img {
    min-height: 270px;
    height: 270px;
  }

  .mobile-card-body {
    padding: 10px 12px 0;
  }

  .mobile-deck-actions {
    padding-left: 12px;
    padding-right: 12px;
  }

  .evidence-tile {
    padding: 7px;
  }

  .tag,
  .card-meta-line,
  .location-signal-group,
  .card-facts,
  .comfort-line,
  .warning-line {
    font-size: 12px;
  }

  .unit-table {
    min-width: 430px;
  }

  .source-actions a,
  .source-actions button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .panel {
    padding: 12px;
  }

  .summary-grid,
  .evidence-grid,
  .rail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-modal-backdrop {
    padding: 10px;
  }

  .detail-modal-panel {
    max-height: calc(100vh - 20px);
    padding: 12px;
  }

  .detail-modal-head {
    margin: -12px -12px 12px;
    padding: 12px;
  }

  .review-actions {
    grid-template-columns: 1fr;
  }

  .price {
    white-space: normal;
  }

  .coverage-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .street-map {
    min-height: 460px;
  }
}

/* === card visual rewrite: de-Bootstrap + fixed decision bar (mobile) === */
@media (max-width: 900px) {
  .mobile-home-head { padding: 15px 16px 9px; }
  .mobile-home-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
  .mobile-home-head .price { font-size: 16px; font-weight: 800; white-space: nowrap; }

  .mobile-home-media,
  .mobile-media-strip,
  .mobile-media-frame,
  .mobile-home-media img,
  .mobile-media-frame img { min-height: 214px; height: 214px; }

  .mobile-card-body { padding: 13px 16px 90px; gap: 15px; }

  .mobile-card-section { border-top: 1px solid var(--line); padding-top: 14px; }
  /* units is a top-level section too -> same top divider as commute */
  .mobile-unit-section { border-top: 1px solid var(--line); padding-top: 14px; }
  .mobile-section-head h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--faint); font-weight: 850;
  }

  /* rows within a section: spacing only, no hairlines (section rule) */
  .mobile-commute-list { gap: 2px; }
  .mobile-commute-row {
    border: 0; background: transparent; border-radius: 0;
    padding: 6px 0; align-items: center;
  }
  .mobile-commute-row:first-child { padding-top: 2px; }
  .mobile-commute-row strong { font-size: 13.5px; }
  .mobile-commute-row b { font-size: 14px; font-weight: 800; }

  .mobile-fact-grid { gap: 9px 18px; }
  .mobile-fact-grid div { border: 0; background: transparent; border-radius: 0; padding: 0; }
  .mobile-fact-grid span { font-size: 11px; }
  .mobile-fact-grid strong { font-size: 13.5px; }

  .mobile-unit-list { gap: 6px; }
  .mobile-unit-card {
    border: 0; background: transparent; border-radius: 0;
    padding: 8px 0;
  }
  .mobile-unit-list .mobile-unit-card:first-child { padding-top: 2px; }
  .mobile-unit-top strong { font-size: 15px; }

  .mobile-detail-link {
    background: transparent; border: 0; padding: 4px 0; min-height: 0;
    color: var(--accent-dark); font-weight: 800; font-size: 12.5px; text-align: left;
  }
  .mobile-detail-link:hover { border: 0; text-decoration: underline; }

  .mobile-deck-actions {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 40; margin: 0; border-radius: 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    padding: 9px 14px calc(11px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.07);
  }
  .mobile-deck-actions button { border-radius: 13px; min-height: 52px; font-weight: 800; }
  .mobile-deck-actions strong { font-size: 15px; font-weight: 850; }
}

/* === card cleanup: single signals module, collapsed commute, POI tags === */
@media (max-width: 900px) {
  /* no stray container lines around signals; the amber watch strip frames itself */
  .mobile-card-body .location-pros-cons { border: 0; margin: 0; }
  .mobile-card-body .location-signal-group { border-top: 0; padding: 4px 0; }
  .mobile-card-body .location-signal-group.good { padding-bottom: 0; }

  /* commute rows: label | best-time, hairline separated */
  .mobile-commute-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .mobile-commute-more { border-top: 1px solid var(--line); }
  .mobile-commute-more summary {
    list-style: none; cursor: pointer; padding: 9px 0 2px;
    color: var(--accent-dark); font-weight: 800; font-size: 12.5px;
  }
  .mobile-commute-more summary::-webkit-details-marker { display: none; }
  .mobile-commute-more[open] summary { color: var(--muted); }

  .mobile-built { color: var(--faint); font-size: 12px; font-weight: 700; }

  /* commute row: destination | time, with the how-to-get-there plan chain
     inline right below (always visible -- that's the whole point of the bake) */
  .mobile-commute-row.has-plan { display: block; }
  .mobile-commute-row-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  }
  .mobile-commute-row-line strong { font-size: 13.5px; }
  .mobile-commute-row-line b { font-size: 14px; font-weight: 800; }
  .mobile-commute-plan {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
    padding: 3px 0 1px; font-size: 12px; color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .plan-leg { white-space: nowrap; color: var(--muted); }
  .plan-arrow { color: var(--line-strong, #d9e0e7); }
  /* filter-selected destination: pinned first, time in accent — no box */
  .mobile-commute-row.is-selected b { color: var(--accent-dark, #087568); }
}

/* neutral building spec line (identity zone, not tags) */
@media (max-width: 900px) {
  .mobile-home-head .mobile-spec {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

/* mobile floor-plan thumbnails (their own section, open lightbox) */
@media (max-width: 900px) {
  .mobile-fp-section { padding-top: 14px; }
  .mobile-fp-row {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .mobile-fp-row::-webkit-scrollbar { display: none; }
  .mobile-fp-thumb {
    flex: 0 0 auto; width: 96px; height: 120px; padding: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: 9px; background: #fff;
  }
  .mobile-fp-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
}

/* lightbox gallery nav */
.photo-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(17,24,39,0.66);
  color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center;
}
.photo-lightbox-nav.prev { left: 14px; }
.photo-lightbox-nav.next { right: 14px; }
.photo-lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(17,24,39,0.66); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .mobile-commute-list + .mobile-detail-link { margin-top: 8px; }
}

/* Disabled source button (e.g. no official site on record) */
.source-btn-disabled {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #d5d5d5);
  color: #9a9a9a;
  background: transparent;
  opacity: 0.55;
  cursor: not-allowed;
  font-size: 13px;
}

/* Per-beds price strings are long: own line on mobile deck, wrap on desktop */
.card-title-row .price,
.detail-summary-head .price {
  white-space: normal;
  text-align: right;
  max-width: 58%;
  line-height: 1.35;
}

/* Per-beds price chips */
.price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}
.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #eef4f1;
  border: 1px solid #dbe7e1;
  font-weight: 700;
  font-size: 13.5px;
  color: #1d3a2f;
  white-space: nowrap;
}
.price-chip .bed {
  font-weight: 500;
  font-size: 12px;
  color: #5c6f66;
}
.price-chip small {
  font-weight: 500;
  font-size: 11px;
  color: #8a6d3b;
}
.price-chip.perbed {
  background: #fdf3e3;
  border-color: #f0dfc0;
  color: #7a5a1e;
}
.price-chip.perbed .bed { color: #9a8055; }
.price-chip.muted {
  background: #f4f4f4;
  border-color: #e2e2e2;
  color: #888;
  font-weight: 500;
}

/* ===== 2026-08-03 mobile deck visual refresh ===== */
/* Head rhythm */
.mobile-home-card .eyebrow { letter-spacing: .08em; font-size: 10.5px; color: #98a29c; margin: 0 0 2px; }
.mobile-home-card h2 { margin: 0 0 3px; font-size: 21px; line-height: 1.2; }
.mobile-home-card .subtle { margin: 0 0 3px; }
.mobile-spec { margin: 0; color: #6c7a72; font-weight: 500; }
.mobile-home-card .price-chips { margin: 10px 0 12px; }
.price-chip { font-size: 14px; padding: 5px 12px; }

/* Signals: bullet lists -> chip rows with small-caps group labels */
.location-signal-group { display: block; margin: 0 0 10px; }
.location-signal-label {
  display: block; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 6px; color: #9aa5a0;
}
.location-signal-group.good .location-signal-label { color: #4f7d68; }
.location-signal-group.bad .location-signal-label { color: #a3742c; }
.location-signal-items { display: flex; flex-wrap: wrap; gap: 6px; }
.location-signal-items span {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.35;
}
.location-signal-items span::before { content: none; }
.location-signal-group.good .location-signal-items span { background: #eef6f1; color: #24523d; border: 1px solid #ddebe2; }
.location-signal-group.bad .location-signal-items span { background: #fdf4e4; color: #7d5a1c; border: 1px solid #f0e1c2; }
.signal-more { border-radius: 999px; }

/* Unit rows -> soft cards */
.mobile-unit-card {
  background: #fbfcfb; border: 1px solid #edf1ee; border-radius: 12px;
  padding: 12px 12px 10px; margin: 0 0 10px;
}
.mobile-unit-id strong { font-size: 15px; color: #1c2822; }
.mobile-unit-when { color: #2e7d5b; font-weight: 700; font-size: 12.5px; }
.mobile-unit-price { font-size: 19px; color: #14211b; }
.mobile-unit-copy p { margin: 2px 0; color: #55605a; font-size: 12.5px; }
.mobile-unit-card .fineprint { color: #96a09a; }

/* Floor-plan thumbs: calm neutral frame + overlay pill instead of the
   heavy green border / solid label bar */
.mobile-unit-media-thumb, .mobile-media-frame { position: relative; border-radius: 10px; overflow: hidden; }
.mobile-unit-media-thumb.is-floorplan, .mobile-media-frame.is-floorplan {
  border: 1px solid #e2e7e3 !important; background: #fff;
}
.fp-tag {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(28, 40, 34, .72); color: #fff;
  font-size: 10px; font-weight: 500; padding: 2px 8px;
  border-radius: 999px; letter-spacing: .02em;
}

/* Source buttons: pill language everywhere */
.source-actions a, .source-btn-disabled { border-radius: 999px !important; }

/* fp-tag: beat the original two-class selectors */
.mobile-media-frame .fp-tag,
.mobile-unit-media-thumb .fp-tag {
  position: absolute;
  left: 6px; right: auto; top: auto; bottom: 6px;
  background: rgba(28, 40, 34, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  text-transform: none;
}
/* Tiny unit thumbs: the floor-plan look is self-evident, the tag was covering half the image */
.mobile-unit-media-thumb .fp-tag { display: none; }