:root {
  --bg: #ffffff;
  --bg-sunk: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e5ea;
  --text: #16181d;
  --muted: #6b7280;
  --accent: #c2410c;
  --accent-soft: #fff1e9;
  --shadow: 0 1px 2px rgba(16, 18, 24, 0.06), 0 4px 12px rgba(16, 18, 24, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --bg-sunk: #0e1013;
    --panel: #1b1e24;
    --border: #2c313a;
    --text: #e9ebef;
    --muted: #9aa2af;
    --accent: #fb923c;
    --accent-soft: #2a1c12;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg-sunk);
  color: var(--text);
  font:
    15px/1.5 system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ---------- top bar ---------- */

.topbar {
  flex: 0 0 auto;
  padding: 14px 18px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topbar h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* The query and the location share one line, each taking half the space and
   wrapping to their own row only when there genuinely isn't width for both. */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search-row {
  display: flex;
  gap: 8px;
  flex: 1 1 340px;
  min-width: 0;
}

.search-row input {
  flex: 1;
  min-width: 0;
}

.loc-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 300px;
  min-width: 0;
}

.loc-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

input[type="search"],
input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

input[type="search"]:focus,
input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

button {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

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

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

button.primary:hover {
  filter: brightness(1.08);
}

button.ghost {
  min-width: 52px;
  color: var(--muted);
}

button.toggle {
  font-size: 13px;
  padding: 8px 11px;
  color: var(--muted);
}

button.toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

/* Square icon-only buttons, so the merged control row stays compact. */
button.icon {
  padding: 8px 10px;
  min-width: 36px;
  color: var(--muted);
  line-height: 1.2;
}

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
  margin-top: 3px;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.chip input:checked + span {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Categories and the list widgets share one row. The chips absorb the squeeze
   by wrapping inside their own block, so the widgets keep their place on the
   first line instead of being pushed onto a row of their own. */
.controls {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.rule {
  width: 1px;
  height: 28px;
  flex: 0 0 auto;
  background: var(--border);
  margin: 0 2px;
}

.list-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  max-width: 220px;
}

select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-form[hidden] {
  display: none;
}

.inline-form input {
  padding: 7px 10px;
}

.confirm-text {
  font-size: 13px;
  color: var(--muted);
}
.confirm-text b {
  color: var(--text);
}

button.danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

button.danger:hover {
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.views {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.views .view {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  padding: 7px 11px;
  font-size: 13px;
}

.views .view:last-child {
  border-right: none;
}
.views .view:hover {
  background: var(--bg-sunk);
}

.views .view[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.status {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Nothing to say means no line at all, rather than a reserved empty strip. */
.status:empty {
  display: none;
}

.status.error {
  color: #dc2626;
}

/* ---------- layout ---------- */

.layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(300px, 25%) 1fr;
  min-height: 0;
}

.results-pane {
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-sunk);
}

.map-pane {
  min-height: 0;
}

#map {
  height: 100%;
  width: 100%;
  background: var(--bg-sunk);
}

/* ---------- results ---------- */

.results {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  scroll-margin: 12px;
}

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

.card.active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    var(--shadow);
}

.card-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.card-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-name .idx {
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}

/* "+9" - this card stands in for 9 further-out places of the same name. */
.card-name .repeats {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}

.card-dist {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
}

.card-details[hidden] {
  display: none;
}

.card-details {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
}

.card-meta {
  font-size: 13px;
  color: var(--muted);
}

.card-addr {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.card-hours {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.badges {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  color: var(--muted);
}

.card-links {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
}

/* Narrow cards would otherwise break a phone number mid-digit. */
.card-links a {
  white-space: nowrap;
}

.card-links a {
  color: var(--accent);
  text-decoration: none;
}
.card-links a:hover {
  text-decoration: underline;
}

/* ---------- favourite / ignored ---------- */

.card-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.mark-btn {
  padding: 3px 9px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  color: var(--muted);
}

.mark-btn.expand[aria-expanded="true"] {
  background: var(--bg-sunk);
  border-color: var(--accent);
  color: var(--accent);
}

.mark-btn[aria-pressed="true"].fav {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

.mark-btn[aria-pressed="true"].ign {
  background: var(--bg-sunk);
  border-color: var(--muted);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  .mark-btn[aria-pressed="true"].fav {
    background: #3b2c07;
    border-color: #b45309;
    color: #fcd34d;
  }
}

.card.favorite {
  border-left: 3px solid #f59e0b;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.07), transparent 55%),
    var(--panel);
}

.card.favorite .card-name::after {
  content: " ★";
  color: #f59e0b;
}

.card.ignored {
  opacity: 0.5;
  border-style: dashed;
  background: var(--bg-sunk);
  box-shadow: none;
}

.card.ignored:hover {
  opacity: 0.8;
}

.card.ignored .card-name {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.card.ignored .card-dist {
  color: var(--muted);
}

/* ---------- per-card list membership ---------- */

.list-menu {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-sunk);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-menu[hidden] {
  display: none;
}

.list-menu .none {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 4px;
}

.list-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.list-opt:hover {
  background: var(--panel);
}
.list-opt input {
  accent-color: var(--accent);
  margin: 0;
}

.list-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.list-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.pin.favorite {
  background: #f59e0b;
}

.pin.ignored {
  background: var(--muted);
  opacity: 0.55;
  border-style: dashed;
}

.empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.list-end {
  padding: 14px 20px 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- map bits ---------- */

.pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  color: #fff;
  font:
    600 12px/1 system-ui,
    sans-serif;
}

.pin span {
  transform: rotate(45deg);
}

.pin.active {
  background: #2563eb;
}

.leaflet-popup-content {
  font:
    14px/1.4 system-ui,
    sans-serif;
}
.leaflet-popup-content b {
  display: block;
  margin-bottom: 2px;
}

@media (max-width: 820px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 45vh;
  }
  .results-pane {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}