:root{
  --bg:#c0cfb2;
  --ink:#111;
  --muted:#6b7280;
  --card:#f7f7f8;
  --border:#e5e7eb;
  --accent:#274e13;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}
header{max-width:960px;margin:24px auto 12px;padding:0 16px}
h1{font-size:28px;margin:0}
p{color:var(--muted)}
.container{max-width:960px;margin:0 auto;padding:0 16px 24px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid{grid-template-columns:380px 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.controls{display:flex;gap:8px;margin:12px 0}
input[type="search"]{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;font-size:12px;margin-right:6px}
.list{display:grid;gap:12px}
.item h3{margin:0 0 4px;font-size:16px}
.item .meta{color:var(--muted);font-size:13px}
.item .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;background:#fff}
.map{height:520px;border:1px solid var(--border);border-radius:12px}
footer{max-width:960px;margin:16px auto 40px;padding:0 16px;color:var(--muted);font-size:14px}

.navbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 24px;
  align-items: center;
}

.navbar a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 16px;
}

.navbar a:hover {
  color: var(--accent);
}

.navbar a.active {
  color: var(--accent);
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent);
}


/* Desktop: list scrolls inside its box; map stays visible */
@media (min-width: 900px) {
  .scroll-col {
    position: sticky;
    top: 16px;
    height: calc(100vh - 120px); /* fits viewport minus header */
  }
  .scroll-col .card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .scroll-col .list {
    flex: 1 1 auto;
    overflow-y: auto;  /* inner scrolling here */
    min-height: 0;     /* critical so flex child can shrink */
  }

  .sticky-col {
    position: sticky;
    top: 16px;
    height: calc(100vh - 120px);
  }
  .sticky-col .map {
    height: 100%;
  }
}

select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.controls label input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Desktop: list scrolls inside its panel; map stays visible */
@media (min-width: 900px) {
  .scroll-col, .sticky-col {
    position: sticky;
    top: 16px;
    height: calc(100vh - 120px); /* adjust if you want the boxes shorter/taller */
  }

  .scroll-col .card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .scroll-col .list {
    flex: 1 1 auto;
    overflow-y: auto;  /* inner scrolling for the list */
    min-height: 0;     /* critical so the list can shrink inside the card */
  }

  .sticky-col .map {
    height: 100%;      /* map fills the sticky column */
  }
}

/* Controls polish: wrap nicely on small widths */
.controls {
  flex-wrap: wrap;
  align-items: center;
}
.controls > * {
  flex: 0 0 auto;
}
.controls label input[type="checkbox"] {
  accent-color: var(--accent);
}
select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* Tag chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.chip {
  padding: 6px 10px; border:1px solid var(--border); border-radius:999px;
  background:#fff; font-size:13px; cursor:pointer; user-select:none;
}
.chip.active { background: var(--card); border-color: var(--accent); color: var(--accent); }


/* Search + Filters panel */
.controls { position: relative; }
.filters-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filter-panel {
  position:absolute; left:0; right:0; top:60px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:12px; z-index:30;
}
.filter-panel h4 { margin:0 0 8px; font-size:14px; color:var(--muted); }
.filter-panel .group { display:flex; flex-wrap:wrap; gap:12px 18px; }
.filter-panel label { display:flex; align-items:center; gap:8px; font-size:14px; }
.filter-actions { margin-top:10px; display:flex; justify-content:space-between; align-items:center; }
.link-btn { background:none; border:none; padding:0; color:#334155; text-decoration:underline; cursor:pointer; font-size:14px; }

/* Chips for applied filters */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.chip { padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:13px; cursor:pointer; }
.chip:hover { border-color:var(--accent); color:var(--accent); }

/* --- Card polish --- */
.item.card {
  padding: 16px;                     /* was tighter */
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  margin-bottom: 14px;
}

/* Titles & meta */
.item.card h3 {
  font-size: 18px;
  margin: 0 0 4px;
}
.item .meta {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 8px;
}

/* Tag badges on each card */
.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #eaf1ea;               /* matcha-tinted */
  color: #2f4d37;
  border: 1px solid #a8c3ab;
}

/* Controls spacing */
.controls { row-gap: 8px; }

/* Applied filter chips (under search) with a little × */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.chip { padding: 6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:13px; cursor:pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip .x { font-weight: 700; margin-right: 6px; line-height: 1; }

.link-btn { background:none; border:none; padding:0 8px; font-size:14px; cursor:pointer; text-decoration:none; color: var(--ink); }
.link-btn:hover { color: var(--accent); text-decoration:none; }