:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #dde1e6;
  --text: #1c2126;
  --text-muted: #5b6572;
  --primary: #1f6f4c;
  --primary-dark: #16523a;
  --danger: #b3261e;
  --warning-bg: #fff6e5;
  --warning-border: #f0c36d;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--primary); }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

header.topbar .brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
}

header.topbar .brand-logo {
  height: 62px;
  display: block;
}

header.topbar nav a {
  margin-left: 16px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
}

header.topbar nav a:hover { color: var(--primary); }

.profile-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 16px;
}

.profile-menu-trigger { margin-left: 0; display: flex; align-items: center; }

.profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-menu-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px;
  line-height: 1;
}
.profile-menu-toggle:hover { color: var(--primary); }

.profile-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  z-index: 30;
}
.profile-menu-dropdown a {
  display: block;
  margin-left: 0;
  padding: 8px 14px;
  color: var(--text);
  font-size: 0.88rem;
}
.profile-menu-dropdown a:hover { background: var(--bg); color: var(--text); }
.profile-menu-email {
  padding: 6px 14px 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  word-break: break-all;
}

@media (max-width: 680px) {
  .profile-menu { margin-left: 0; padding: 8px 4px; }
  .profile-menu-dropdown { right: auto; left: 0; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 36px;
  height: 32px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 680px) {
  header.topbar { flex-wrap: wrap; position: relative; }
  .nav-toggle { display: block; }
  header.topbar nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    order: 3;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  header.topbar nav.open { display: flex; }
  header.topbar nav a { margin-left: 0; padding: 8px 4px; }
}

main.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  flex: 1;
  width: 100%;
}

main.container.wide { max-width: 1800px; }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.footer-disclaimer { max-width: 1800px; margin: 0 auto; padding: 14px 20px 0; }

.footer-cta {
  background: var(--primary-dark);
  color: #fff;
  padding: 22px 20px;
  text-align: center;
}
.footer-cta-inner { max-width: 460px; margin: 0 auto; }
.footer-cta h2 { margin: 0 0 6px; font-size: 1.05rem; color: #fff; }
.footer-cta p { margin: 0; font-size: 0.85rem; opacity: 0.92; line-height: 1.5; }
.footer-cta-form { display: flex; gap: 8px; margin-top: 14px; }
.footer-cta-form select {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
}
.footer-cta-form button { flex-shrink: 0; }
@media (max-width: 480px) {
  .footer-cta-form { flex-direction: column; }
}

.footer-about {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 20px 20px;
}
.footer-about-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.footer-about h2 { margin: 0 0 6px; font-size: 0.95rem; }
.footer-about p { margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; }

.footer-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.footer-contact a { color: var(--text-muted); text-decoration: underline; }
.footer-contact a:hover { color: var(--primary); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3000;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast.success { background: var(--primary-dark); }
.toast.error { background: var(--danger); }
.toast.info { background: #2c3e50; }

h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.15rem; margin: 24px 0 10px; }
.subtitle { color: var(--text-muted); margin: 0 0 20px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
@media (max-width: 480px) {
  .form-row { flex-direction: column; gap: 0; }
}

.coord-entry { border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 14px; }
.coord-entry > p:first-child { margin: 0 0 8px; }
.vertex-list { list-style: decimal; padding-left: 18px; margin: 8px 0 0; max-height: 140px; overflow-y: auto; }
.vertex-list li { padding: 2px 0; }

input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

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

button, .btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--primary-dark); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--primary); }
button.secondary:hover, .btn.secondary:hover { background: #eef5f1; }
button.danger, .btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: #fbebea; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eef2f5;
  color: var(--text-muted);
}
.badge.public_listed { background: #e6f4ea; color: #1f6f4c; }
.badge.public_link { background: #e8f0fe; color: #1a56c4; }
.badge.private { background: #fdeaea; color: var(--danger); }
.badge.draft { background: #f1f1f1; color: #666; }
.badge.published { background: #e6f4ea; color: #1f6f4c; }
.badge.archived { background: #f1f1f1; color: #999; }

.alert {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.alert.error { background: #fdeaea; color: var(--danger); border: 1px solid #f3c3c0; }
.alert.success { background: #e6f4ea; color: #1f6f4c; border: 1px solid #b9dfc6; }
.alert.info { background: var(--warning-bg); color: #7a5b00; border: 1px solid var(--warning-border); }

.disclaimer {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #7a5b00;
  margin: 14px 0;
}

.listed-by { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.listed-by-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.listed-by-name { font-size: 0.85rem; color: var(--text-muted); }
.listed-by-name strong { color: var(--text); }

.profile-logo-preview {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f3f5;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-logo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-logo-empty { font-size: 0.68rem; color: var(--text-muted); text-align: center; padding: 4px; }

.listing-list { display: grid; gap: 12px; }
.listing-row {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.listing-row .meta { color: var(--text-muted); font-size: 0.85rem; }

.map-wrap { position: relative; width: 100%; height: 420px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
/* Absolute positioning against the wrap (not a percentage height) — a
   percentage height here fails to resolve when the wrap's own height comes
   from flex-grow in a column direction (the stacked mobile layout), leaving
   the map canvas at 0 height and blank on phones. */
.map-wrap > .map-canvas {
  position: absolute;
  inset: 0;
  /* Leaflet's tile images use mix-blend-mode (a workaround for seams
     between tiles, see leaflet.css) and MapLibre's tiles are WebGL-
     composited — either way, without an isolation boundary the map's
     internal compositing can paint over sibling overlay controls (like
     .map-toolbar) regardless of z-index. Isolating the canvas contains
     that blending/compositing to itself so z-index on siblings works. */
  isolation: isolate;
}

.map-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.map-toolbar button { padding: 6px 10px; font-size: 0.82rem; }

.basemap-switcher {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.basemap-btn {
  padding: 6px 10px;
  font-size: 0.82rem;
  border: none;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.basemap-btn + .basemap-btn { border-left: 1px solid var(--border); }
.basemap-btn.active { background: var(--primary); color: #fff; }
.basemap-btn:hover:not(.active) { background: #f1f3f5; }

.map-wrap.map-expanded {
  position: fixed;
  inset: 16px;
  z-index: 1000;
  height: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
body.map-expanded-active { overflow: hidden; }

.map-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
  max-width: 190px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.map-legend .legend-title { font-weight: 700; margin-bottom: 4px; color: var(--text); }
.map-legend .legend-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; color: var(--text); }
.map-legend .legend-row input { margin: 0; }
.map-legend .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.map-legend .legend-count { color: var(--text-muted); margin-left: auto; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.media-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid var(--border);
}
.media-tile img, .media-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.media-delete:hover { background: rgba(179, 38, 30, 0.9); }

.facility-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.facility-group-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; }
.facility-group .swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.facility-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.85rem; }
.facility-list li { padding: 2px 0; }

.media-tile { cursor: zoom-in; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 12, 14, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.hidden { display: none; }
body.lightbox-open { overflow: hidden; }
.lightbox-content { max-width: 88vw; max-height: 84vh; display: flex; align-items: center; justify-content: center; }
.lightbox-content img, .lightbox-content video { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 4px; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 1.1rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.8rem; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.8rem; opacity: 0.8; }

.data-gap-list { display: grid; gap: 10px; }
.data-gap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.data-gap-row:last-child { border-bottom: none; }
.data-gap-row .label { font-weight: 600; font-size: 0.9rem; }
.data-gap-row .gap-badge { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }

/* Population pyramid (age x sex), from WorldPop via the context service */
.pyramid-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.85rem; }
.pyramid-legend-item { display: flex; align-items: center; gap: 6px; }
.pyramid-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.pyramid-chart-wrap { position: relative; max-width: 300px; margin: 0 auto; }
.pyramid-svg { width: 100%; height: auto; display: block; }
.pyramid-baseline { stroke: var(--border); stroke-width: 1; }
.pyramid-bar { cursor: pointer; transition: filter 0.1s; }
.pyramid-bar:hover { filter: brightness(1.15); }
.pyramid-age-label { font-size: 7.5px; fill: var(--text-muted); }
.pyramid-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--text);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 5;
}
.pyramid-tooltip.hidden { display: none; }
.pyramid-table-toggle { margin-top: 10px; }
.pyramid-table-toggle summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.pyramid-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.78rem; }
.pyramid-table th, .pyramid-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--border); }
.pyramid-table th:first-child, .pyramid-table td:first-child { text-align: left; }

.panel-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .panel-grid { grid-template-columns: 1fr; } }

/* Demographics + hazards side by side on desktop — halves the pyramid's
   available width (on top of its own max-width) and keeps the two related
   "context" cards from stacking into a long scroll. */
.card-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.card-row-2 > .card { margin-bottom: 0; }
@media (max-width: 860px) { .card-row-2 { grid-template-columns: 1fr; } }

.fact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 0.9rem; }
.fact-list dt { color: var(--text-muted); }
.fact-list dd { margin: 0; font-weight: 600; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs button {
  background: none; border: none; color: var(--text-muted); font-weight: 600;
  padding: 8px 14px; border-radius: 0; cursor: pointer;
}
.tabs button.active { color: var(--primary); border-bottom: 2px solid var(--primary); }

.access-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.access-row:last-child { border-bottom: none; }

.muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }
.hidden { display: none !important; }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }

/* Marketplace: filter bar + split map/list view, list synced to map extent */
.filter-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 8px 20px;
  overflow-x: auto;
}
.filter-row select, .filter-row input {
  width: auto;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
  flex-shrink: 0;
}
.filter-row input[type=number] { width: 110px; }
.filter-row input#fSearch { flex: 1 1 160px; min-width: 140px; width: auto; }

/* On desktop the toggle button is unused and .filter-fields is invisible
   as a box (display:contents) — its select/input children sit directly in
   the .filter-row flex line exactly as if there were no wrapper at all.
   On mobile (below), it becomes a real collapsible panel instead. */
.filter-toggle-btn { display: none; flex-shrink: 0; }
.filter-fields { display: contents; }

@media (max-width: 680px) {
  .filter-row { flex-wrap: wrap; overflow-x: visible; }
  .filter-toggle-btn { display: inline-flex; align-items: center; gap: 6px; }
  .filter-row input#fSearch { flex: 1 1 auto; min-width: 0; }
  .filter-fields {
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    order: 5;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .filter-fields.open { display: flex; }
  .filter-fields select, .filter-fields input { width: 100%; }
}

/* Fixed height so the map stays a predictable size regardless of page
   content — the list scrolls within that same height, and once it runs
   out, normal page scroll takes over to reach the sections below (the
   surveyor CTA, the about section, the footer). */
.market-split { display: flex; gap: 16px; height: 78vh; min-height: 520px; }
.market-map-wrap { flex: 1.4; height: 100%; min-width: 0; }
/* Two columns of cards. grid-auto-rows must be min-content, not the
   default auto — with auto, once the cards' natural height would overflow
   this fixed-height scroll container, Chromium compresses every row to
   split the available height evenly instead of sizing rows to content and
   letting the container scroll (i.e. the list stops being scrollable and
   every card gets squashed). min-content forces true content-based row
   sizing regardless of whether it overflows, so overflow-y:auto can do
   its job. */
.market-list {
  width: 460px;
  flex-shrink: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  gap: 8px;
  align-content: start;
}
/* My listings" uses the same scrollable split but with wide .listing-row
   items (title + badges + a Manage button all inline), not compact cards
   — those need the full column width, not a 2-up grid. */
.market-list-single { grid-template-columns: 1fr; }

.market-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.market-card:hover { border-color: var(--primary); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); }
.market-card-highlight { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

.market-card-link { display: block; text-decoration: none; color: var(--text); }

.market-card-photo { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #eef1f3; overflow: hidden; }
.market-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; color: var(--text-muted); }

.market-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: rgba(28, 33, 38, 0.78);
}
.market-card-badge.new { background: var(--primary-dark); }

.market-card-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.market-card-fav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.market-card-fav:hover { background: #fff; }
.market-card-fav.active { color: var(--danger); }
.market-card-fav.active svg { fill: var(--danger); stroke: var(--danger); }

.market-card-body { padding: 6px 7px; }
.market-card-price { font-weight: 700; font-size: 0.78rem; }
.market-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; color: var(--text-muted); font-size: 0.66rem; }
.market-card-meta span { display: inline-flex; align-items: center; gap: 2px; }
.market-card-meta svg { width: 10px; height: 10px; flex-shrink: 0; }
.market-card-title { font-weight: 700; font-size: 0.74rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-card-desc {
  color: var(--text-muted);
  font-size: 0.68rem;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.market-card-ref { margin-top: 4px; color: var(--text-muted); font-size: 0.6rem; }

@media (max-width: 860px) {
  .market-split { flex-direction: column; height: auto; }
  .market-list { width: 100%; max-height: 50vh; }
  /* flex: none so this fixed height actually governs sizing — the base
     rule's "flex: 1.4" sets flex-basis: 0%, which otherwise wins over a
     plain "height" for main-axis (here, vertical) sizing in a column. */
  .market-map-wrap { flex: none; height: 340px; }
}

/* Two narrow columns work fine once the list is full-width on a stacked
   tablet layout (above); on a phone-width screen, drop back to one column
   so each card has room to breathe. */
@media (max-width: 480px) {
  .market-list { grid-template-columns: 1fr; }
}