* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-ui: "Inter", "Segoe UI", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --bg-body: #efe9e5;
  --surface: #fffdfc;
  --surface-soft: #f9f3ef;
  --text-main: #2b1a13;
  --text-muted: #6b4f42;
  --border: #dcc8bc;
  --border-strong: #cfae9b;
  --accent: #7f4a33;
  --accent-contrast: #fffdfc;
  --danger: #b42318;
  --danger-contrast: #fff6f5;
  --success: #2d6a46;
  --sale-bg: #f7cf76;
  --sale-text: #33231a;
  --notice-bg: #f6ede8;
  --notice-text: #6f4230;
}

/* Screen-reader-only heading for SEO/a11y without visual impact. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

body {
  font-family: var(--font-ui);
  font-size: 14px;
  display: flex;
  height: 100vh;    /* fallback for browsers without dvh */
  height: 100dvh;   /* dynamic viewport excludes mobile browser chrome */
  overflow: hidden;
  background: var(--bg-body);
  color: var(--text-main);
}

/* ── Sidebar ── */
#sidebar {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 2px 0 8px rgba(0,0,0,.1);
  z-index: 10;
}

#search-box {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;  /* never shrink the search row when results overflow */
  display: block;
}

#search-row {
  display: flex;
  gap: 8px;
}

#search-input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-main);
  border-radius: 8px;
  font-size: 16px;  /* 16px prevents iOS from zooming on focus */
  outline: none;
  transition: border-color .2s;
}
#search-input:focus { border-color: var(--accent); }

#suggestions {
  position: absolute;
  left: 14px; right: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
}
.suggestion {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.suggestion:last-child { border-bottom: none; }
.suggestion:hover { background: var(--surface-soft); }

#results {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  margin-top: 60px;
  line-height: 1.8;
}
.empty-state strong { display: block; font-size: 16px; color: var(--text-main); margin-bottom: 8px; }
.empty-state .empty-logo {
  width: 150px; height: 150px;
  display: block;
  margin: 0 auto 10px;
}

/* ── Entry (per address) ── */
.entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
}
.entry-num {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.entry-label { flex: 1; font-weight: 600; font-size: 13px; color: var(--text-main); }
.entry-aerial {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-soft);
  white-space: nowrap;
}
.entry-aerial:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.entry-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 20px; line-height: 1;
  padding: 0 2px; flex-shrink: 0;
}
.entry-remove:hover { color: var(--danger); }
.entry-divider { border: none; border-top: 2px solid var(--border); margin: 8px 0; }

.limit-notice {
  font-size: 12px; color: var(--notice-text);
  padding: 8px 12px; background: var(--notice-bg);
  border-radius: 6px; margin-bottom: 10px;
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}
.card-title {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.address-header {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.address-for-sale-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.25);
  text-underline-offset: 2px;
  word-break: break-word;
}
.address-for-sale-link:hover {
  text-decoration-color: var(--accent);
}
.for-sale-badge {
  display: inline-block;
  background: var(--sale-bg);
  color: var(--sale-text);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.property-type {
  font-size: 13px;
  color: var(--text-muted);
}

table { width: 100%; border-collapse: collapse; }
td { padding: 4px 0; vertical-align: top; }
td:first-child { color: var(--text-muted); width: 130px; }
td:last-child { font-weight: 500; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Sales history table (4 columns, different layout than key/value) ── */
.sales-history td,
.sales-history th { padding: 4px 6px 4px 0; white-space: nowrap; }
.sales-history td { padding: 4px 6px 4px 0; }
.sales-history td:first-child { color: var(--text-muted); width: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sales-history td:last-child { font-weight: 400; white-space: normal; }
.sales-history th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.sales-history td.num,
.sales-history th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-history td.num { white-space: nowrap; }

/* ── Matrikel table (header + total row) ── */
.matrikel-table thead th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); padding: 4px 6px 4px 0; white-space: nowrap; }
.matrikel-table thead th.num { text-align: right; }
.matrikel-table tfoot td { border-top: 1px solid var(--border); font-weight: 600; padding-top: 4px; }
.matrikel-table tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrikel-table tfoot .matrikel-total-label { color: var(--text-muted); }

@media (max-width: 520px) {
  .sales-history th,
  .sales-history td {
    padding-right: 4px;
    font-size: 11px;
  }
  .sales-history th:last-child,
  .sales-history td:last-child {
    max-width: 74px;
    overflow-wrap: anywhere;
  }
}

/* ── Mortgage items ── */
.mortgage {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mortgage:last-child { margin-bottom: 0; }
.mortgage-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.mortgage-type { font-weight: 600; }
.mortgage-amount { font-weight: 700; color: var(--text-main); }
.mortgage-meta { font-size: 12px; color: var(--text-muted); }

.loan-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.badge-certain  { background: #dcfce7; color: #166534; }
.badge-close    { background: #fef9c3; color: #854d0e; }
.badge-uncertain { background: #fee2e2; color: #991b1b; }

.candidates {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.candidate { display: flex; justify-content: space-between; padding: 2px 0; }
.candidate.best { color: var(--text-main); font-weight: 600; }
.delta-bar-wrap { width: 80px; background: var(--surface-soft); border-radius: 3px; height: 6px; margin-top: 5px; overflow: hidden; }
.delta-bar { height: 100%; background: var(--accent); border-radius: 3px; }

.assumption-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.assumption-tab { flex: 1; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; cursor: pointer; background: var(--surface-soft); color: var(--text-muted); text-align: center; }
.assumption-tab.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ── Easements ── */
.easement { font-size: 12px; color: var(--text-main); padding: 3px 0; border-bottom: 1px solid var(--border); }
.easement:last-child { border-bottom: none; }

/* ── Spinner ── */
.spinner {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

/* ── Retry button (shown in the error banner) ── */
.retry-btn {
  margin-left: 10px;
  padding: 3px 10px;
  font-size: 12px;
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  cursor: pointer;
}
.retry-btn:hover { background: var(--danger); color: var(--danger-contrast); }
[data-theme="dark"] .retry-btn { background: var(--surface-soft); color: var(--danger); border-color: var(--danger); }
[data-theme="dark"] .retry-btn:hover { background: var(--danger); color: var(--danger-contrast); }

/* ── Map ── */
#map { flex: 1; cursor: crosshair; }

/* ── Map pin ── */
.map-pin {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Leaflet popup ── */
.leaflet-popup-content { min-width: 180px; font-size: 13px; }
.popup-address { font-weight: 700; margin-bottom: 6px; }
.popup-owners { color: var(--text-main); }

.card-intro-andel {
  border-left: 3px solid var(--accent);
  background: var(--notice-bg);
}

.card-intro-paraply {
  border-left: 3px solid var(--border-strong);
  background: var(--notice-bg);
}

.card-intro-andel .card-title,
.card-intro-paraply .card-title {
  color: var(--notice-text);
}

.card-blurb {
  font-size: 13px;
  line-height: 1.5;
}

.card-note {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11px;
}

/* ── Dark mode toggle ── */
.darkmode-btn {
  width: 44px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  color: var(--text-muted); transition: all .2s;
}
.darkmode-btn:hover { background: var(--surface); color: var(--text-main); }

/* ── History button ── */
#search-input { flex: 1; min-width: 0; }
.history-btn {
  width: 44px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--text-muted); transition: all .2s;
}
.history-btn:hover { background: var(--surface); color: var(--text-main); border-color: var(--border); }

.gps-btn {
  width: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-muted);
  transition: all .2s;
}

.gps-btn:hover {
  background: var(--surface);
  color: var(--text-main);
  border-color: var(--border);
}

.gps-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.gps-btn.is-loading svg {
  animation: gps-spin 1s linear infinite;
}

@keyframes gps-spin {
  to { transform: rotate(360deg); }
}

#search-feedback {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

#search-feedback.feedback-error {
  color: var(--danger);
}

.nosy-map-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  padding: 8px 10px;
  margin-top: 56px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.map-control-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.map-link-btn {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
}
.map-link-btn:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

#basemap-select {
  min-width: 152px;
  max-width: 200px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text-main);
  padding: 6px 8px;
  font-size: 12px;
}

.map-toggle {
  white-space: nowrap;
}

.map-toggle input {
  width: 14px;
  height: 14px;
}

#history-dropdown {
  position: absolute;
  left: 14px; right: 14px; top: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.history-entry {
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.history-entry:last-child { border-bottom: none; }
.history-entry:hover { background: var(--surface-soft); }
.history-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.history-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.history-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.history-clear {
  display: block; width: 100%; padding: 8px;
  border: none; border-top: 1px solid var(--border);
  background: none; cursor: pointer;
  font-size: 12px; color: var(--danger); text-align: center;
}
.history-clear:hover { background: var(--surface-soft); }

/* ── Clear results button (bottom of sidebar, only shown when results exist) ── */
#sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.footer-link {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all .2s;
}
.footer-link:hover { color: var(--text-main); border-color: var(--border); background: var(--surface-soft); }
.clear-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.clear-btn:hover { background: var(--danger); color: var(--danger-contrast); }

.card-andel-liens {
  border-left: 3px solid var(--accent);
}

.text-danger { color: var(--danger); }
.text-muted { color: var(--text-muted); }
.text-italic { font-style: italic; }
.value-positive { color: var(--success); font-weight: 700; }
.value-negative { color: var(--danger); font-weight: 700; }
.value-subtle { color: var(--text-muted); font-weight: 400; }
.error-banner { color: var(--danger); padding: 4px 0 10px; }
.clear-btn[hidden] { display: none; }

/* ── Readme viewer page ── */
.readme-page {
  display: block;
  height: auto;
  overflow: auto;
  padding: 2rem;
}
.readme-nav {
  max-width: 860px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.readme-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}
.readme-nav a:hover { text-decoration: underline; }
.readme-nav .secondary { color: var(--text-muted); margin-left: auto; }
.readme-nav .version-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--surface-soft);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.readme-content {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 2.5rem 3rem;
}
.readme-content h1 { font-size: 1.6rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e5e7eb; }
.readme-content h2 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.5rem; color: #111; }
.readme-content h3 { font-size: 1rem; margin-top: 1.25rem; margin-bottom: 0.4rem; color: #333; }
.readme-content p  { line-height: 1.7; margin-bottom: 0.75rem; }
.readme-content ul, .readme-content ol { margin: 0.5rem 0 0.75rem 1.5rem; line-height: 1.7; }
.readme-content li { margin-bottom: 0.2rem; }
.readme-content code {
  background: #f3f4f6;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.88em;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.readme-content pre {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
.readme-content pre code { background: none; padding: 0; font-size: 0.85em; }
.readme-content table { width: 100%; margin: 0.75rem 0; font-size: 0.9rem; }
.readme-content th {
  background: #f3f4f6;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  font-weight: 600;
}
.readme-content td { padding: 0.45rem 0.75rem; border: 1px solid #e5e7eb; width: auto; font-weight: normal; }
.readme-content tr:nth-child(even) td { background: #fafafa; }
.readme-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
.readme-content blockquote {
  border-left: 3px solid #cbd5e1;
  padding-left: 1rem;
  color: #4b5563;
  margin: 0.75rem 0;
}
.readme-content a { color: var(--accent); }
.readme-content em { color: var(--text-muted); }
.readme-content img { max-width: 100%; height: auto; }

#readme-loading { color: #888; font-size: 0.9rem; }
#readme-error   { color: #c00; font-size: 0.9rem; }

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg-body: #070c13;
  --surface: #0f1823;
  --surface-soft: #15202d;
  --text-main: #eff5fd;
  --text-muted: #9fb1ca;
  --border: #253447;
  --border-strong: #3c5269;
  --accent: #c08a6f;
  --accent-contrast: #1f1916;
  --danger: #f18b88;
  --danger-contrast: #1f1718;
  --success: #7cc89f;
  --sale-bg: #d9b46e;
  --sale-text: #2a2320;
  --notice-bg: #1a2633;
  --notice-text: #e8f1fb;
}
[data-theme="dark"] #sidebar { box-shadow: 2px 0 8px rgba(0,0,0,.45); }
[data-theme="dark"] #search-input::placeholder { color: #9baaca; }
[data-theme="dark"] .history-btn,
[data-theme="dark"] .darkmode-btn,
[data-theme="dark"] .gps-btn { background: var(--surface-soft); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .history-btn:hover,
[data-theme="dark"] .darkmode-btn:hover,
[data-theme="dark"] .gps-btn:hover { background: var(--surface); color: var(--text-main); border-color: #4b5563; }
[data-theme="dark"] .map-control-item { color: var(--text-muted); }
[data-theme="dark"] .nosy-map-control { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.45); }
[data-theme="dark"] #basemap-select { background: var(--surface-soft); border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] #suggestions,
[data-theme="dark"] #history-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .suggestion:hover,
[data-theme="dark"] .history-entry:hover { background: var(--surface-soft); }
[data-theme="dark"] .suggestion,
[data-theme="dark"] .history-entry { border-bottom-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .history-clear { border-top-color: var(--border); color: var(--danger); }
[data-theme="dark"] .history-clear:hover { background: #2a1b1d; }
[data-theme="dark"] .address-for-sale-link { color: inherit; text-decoration-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .address-for-sale-link:hover { text-decoration-color: var(--sale-bg); }
[data-theme="dark"] .for-sale-badge { background: var(--sale-bg); color: var(--sale-text); }
[data-theme="dark"] .leaflet-popup-content-wrapper { background: var(--surface); color: var(--text-main); }
[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); }

[data-theme="dark"] #sidebar-footer { border-top-color: var(--border); }
[data-theme="dark"] .footer-link { color: var(--text-muted); }
[data-theme="dark"] .footer-link:hover { color: var(--text-main); border-color: var(--border); background: var(--surface-soft); }
[data-theme="dark"] .clear-btn { background: var(--surface-soft); color: var(--danger); border-color: var(--danger); }
[data-theme="dark"] .clear-btn:hover { background: var(--danger); color: var(--danger-contrast); }

[data-theme="dark"] .readme-content { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .readme-content h1 { border-bottom-color: var(--border); }
[data-theme="dark"] .readme-content h2 { color: var(--text-main); }
[data-theme="dark"] .readme-content h3 { color: var(--text-muted); }
[data-theme="dark"] .readme-content p,
[data-theme="dark"] .readme-content li { color: var(--text-main); }
[data-theme="dark"] .readme-content code { background: var(--surface-soft); color: var(--text-main); }
[data-theme="dark"] .readme-content pre { background: #111a25; border-color: var(--border); }
[data-theme="dark"] .readme-content th { background: var(--surface-soft); border-color: var(--border); }
[data-theme="dark"] .readme-content td { border-color: var(--border); }
[data-theme="dark"] .readme-content tr:nth-child(even) td { background: var(--surface-soft); }
[data-theme="dark"] .readme-content hr { border-top-color: var(--border); }
[data-theme="dark"] .readme-content blockquote { border-left-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .readme-content a { color: #f3c5ad; }
[data-theme="dark"] .readme-content em { color: var(--text-muted); }
[data-theme="dark"] .readme-nav a { color: var(--accent); }
[data-theme="dark"] .readme-nav .secondary { color: var(--text-muted); }
[data-theme="dark"] .readme-nav .version-tag { background: var(--surface-soft); color: var(--text-muted); }

/* ──────────────────────────────────────────────────────────────────────────
   Mobile layout (< 768px): sidebar becomes an off-canvas drawer so the map
   isn't squeezed into a 10px strip. Hamburger button floats top-right over
   the map (top-left is used by Leaflet's zoom controls).
   ────────────────────────────────────────────────────────────────────────── */
.sidebar-toggle {
  display: none;  /* shown only on mobile via media query */
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  color: var(--text-main);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  /* Prevent MIUI/Chrome from converting tap into gesture (which suppresses
     the synthetic click event). manipulation disables double-tap zoom and
     gesture detection on this element, so touchstart→touchend always fires
     a click. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  -webkit-user-select: none;
  user-select: none;
}
.sidebar-toggle:active { background: var(--surface-soft); }
/* SVG children should be transparent to pointer events so every tap lands
   on the button itself (some mobile browsers route taps to the nearest
   painted child, which has no click handler). */
.sidebar-toggle svg, .sidebar-toggle svg * { pointer-events: none; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s;
}

[data-theme="dark"] .sidebar-toggle {
  background: var(--surface);
  color: var(--text-main);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Mobile rules apply both at narrow width (portrait phones) and at short
   height with limited width (landscape phones up to ~900px wide). */
@media (max-width: 767px), (max-height: 500px) and (max-width: 900px) {
  .sidebar-toggle { display: flex; }

  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 88%;
    max-width: 380px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    /* Leaflet's internal panes use z-index 200-700 inside #map's own
       stacking context, but #map itself creates compositing layers that
       on some mobile browsers (Chrome on Android, Safari on iOS) paint
       above anything with a lower z-index in the document order even when
       they shouldn't. Force the drawer above that. */
    z-index: 10000;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }
  /* Hide toggle while drawer is open; tapping backdrop closes it. */
  body.sidebar-open .sidebar-toggle { display: none; }

  /* Make the map fill the whole viewport below the drawer. */
  #map { width: 100%; }

  /* Slightly larger Leaflet controls for easier tapping. */
  .leaflet-bar a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }

  /* Tighter padding inside the drawer so cards don't waste horizontal space. */
  #results { padding: 12px; }
  .nosy-map-control { margin-top: 0; display: none; }

  /* Footer buttons with a proper tap target. */
  #sidebar-footer { padding: 12px 14px; min-height: 56px; }
  .footer-link { padding: 8px 12px; font-size: 13px; }
  .clear-btn { padding: 8px 14px; font-size: 13px; }
}

/* Landscape phones: keep empty-state compact so it doesn't eat all vertical
   space on a 375×667-ish viewport turned sideways. */
@media (max-height: 480px) and (max-width: 900px) {
  .empty-state { margin-top: 20px; }
  .empty-state .empty-logo { width: 28px; height: 28px; }
}