:root {
  --ink: #1c1917;
  --paper: #faf7f2;
  --muted: #78716c;
  --line: #e7e1d8;
  --historic: #b7791f;
  --dark: #9b1c1c;
  --weird: #6b46c1;
  --lost: #4a6b8a;
  --lived: #2f855a;
  --community: #0f766e;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(28, 25, 23, .18);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }

#map { position: absolute; inset: 0; z-index: 0; }

/* top bar */
.topbar {
  position: absolute; z-index: 1000; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px;
  display: flex; gap: 8px; align-items: center;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 8px;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  font-family: Georgia, serif; font-weight: 700; white-space: nowrap; padding-right: 4px; }
.search { position: relative; flex: 1; min-width: 0; }
.search input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px; font-size: 15px; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none;
  background: #fff; border-radius: 10px; box-shadow: var(--shadow); max-height: 50vh; overflow: auto; }
.search-results li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.search-results li:hover, .search-results li:focus { background: var(--paper); outline: none; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; width: 40px; height: 40px; font-size: 20px; }

/* filters */
.filters { position: absolute; z-index: 999; top: calc(max(10px, env(safe-area-inset-top)) + 64px); left: 10px; right: 10px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.08); opacity: .55; }
.chip.on { opacity: 1; border-color: var(--ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.historic { background: var(--historic); } .dot.dark { background: var(--dark); } .dot.weird { background: var(--weird); }
.dot.lost { background: var(--lost); } .dot.lived { background: var(--lived); } .dot.community { background: var(--community); }

/* markers */
.pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.pin.historic { background: var(--historic); } .pin.dark { background: var(--dark); } .pin.weird { background: var(--weird); }
.pin.lost { background: var(--lost); } .pin.lived { background: var(--lived); } .pin.community { background: var(--community); }
.pin.has-people { outline: 3px solid var(--lived); outline-offset: 1px; }
.cluster { background: rgba(28,25,23,.82); color: #fff; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* status, fab, hint */
.status { position: absolute; z-index: 1000; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 110px);
  background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }
.fab { position: absolute; z-index: 1000; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; padding: 13px 20px; font-weight: 600; box-shadow: var(--shadow); }
.add-hint { position: absolute; z-index: 1001; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); text-align: center; width: max-content; max-width: 90vw; }
.link { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0 4px; }
.adding #map { cursor: crosshair; }
.adding .fab { display: none; }

/* panel: right side on desktop, bottom sheet on phones */
.panel { position: absolute; z-index: 1002; top: 120px; right: 10px; bottom: 10px; width: min(420px, calc(100vw - 20px));
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow-y: auto; padding: 20px 20px 28px; }
@media (max-width: 640px) {
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 72vh; border-radius: 18px 18px 0 0;
    padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .brand span { display: none; }
}
.panel-close { position: sticky; top: 0; float: right; border: 0; background: #fff; border-radius: 50%; width: 32px; height: 32px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.panel h2 { margin: 4px 40px 6px 0; font-size: 24px; line-height: 1.2; }
.panel .years { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.panel img.hero { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin: 6px 0 10px; background: var(--line); }
.panel p { line-height: 1.55; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: #fff; }
.tag.historic { background: var(--historic); } .tag.dark { background: var(--dark); } .tag.weird { background: var(--weird); }
.tag.lost { background: var(--lost); } .tag.community { background: var(--community); }
.source { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--line); padding: 4px 10px; margin: 10px 0; }
.source.verified { border-color: var(--historic); }
.source.unverified { border-color: var(--community); }
.source a { color: inherit; }
.content-note { background: #fdf2f2; border: 1px solid #f5c2c2; color: var(--dark); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.btn { border: 1px solid var(--ink); background: #fff; color: var(--ink); border-radius: 10px; padding: 9px 14px; font-weight: 600; font-size: 14px; }
.btn.primary { background: var(--ink); color: #fff; }
.btn.lived { background: var(--lived); border-color: var(--lived); color: #fff; }
.btn.small { padding: 5px 10px; font-size: 13px; font-weight: 500; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 8px; font-family: inherit; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 14px 16px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); border: 2px solid var(--paper); }
.timeline li.lived::before { background: var(--lived); } .timeline li.dark::before { background: var(--dark); }
.timeline li.weird::before { background: var(--weird); } .timeline li.story::before { background: var(--historic); }
.timeline .when { font-size: 12.5px; color: var(--muted); }
.timeline .who { font-weight: 600; }
.timeline .body { margin: 4px 0; line-height: 1.5; white-space: pre-wrap; }
.timeline .meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.timeline .meta button { background: none; border: 0; color: var(--muted); padding: 0; font-size: 12px; text-decoration: underline; }
.empty { color: var(--muted); font-size: 14px; }

/* forms */
form.entry { display: grid; gap: 10px; margin-top: 8px; }
form.entry label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
form.entry input, form.entry textarea, form.entry select { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #fff; }
form.entry textarea { min-height: 110px; resize: vertical; }
form.entry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.entry .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.kind-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-picker label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px; cursor: pointer; font-weight: 500; }
.kind-picker input { margin: 0; }
.kind-picker label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.error { color: var(--dark); font-size: 13px; }

dialog { border: 0; border-radius: 18px; padding: 24px 26px; max-width: 460px; box-shadow: var(--shadow); background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(28, 25, 23, .45); }
dialog h2 { margin-top: 0; font-size: 26px; }
dialog p { line-height: 1.55; }
.legend { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.legend li { display: flex; gap: 8px; align-items: center; }

.leaflet-control-attribution { font-size: 10px; }
.leaflet-top.leaflet-left { top: 110px; }
@media (max-width: 640px) { .leaflet-control-zoom { display: none; } }

/* top places & tours */
.fab.left { right: auto; left: 16px; background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.touring .fab { display: none; }
.cat-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.cat-picker .chip { box-shadow: none; }
.toplist { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: top; }
.toplist li { display: grid; grid-template-columns: 22px 56px 1fr; gap: 10px; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer; counter-increment: top; }
.toplist li::before { content: counter(top); font-family: Georgia, serif; font-weight: 700; color: var(--muted); text-align: right; }
.toplist li:hover { background: #fff; }
.toplist .thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--line); }
.toplist .name { font-weight: 600; line-height: 1.25; }
.toplist .sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
form.tour-form .row { grid-template-columns: 1fr 1fr; }
form.tour-form select { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #fff; }
.tour-pin { width: 28px; height: 28px; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px;
  display: grid; place-items: center; border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.tour-pin.current { background: var(--dark); border-color: #fff; color: #fff; transform: scale(1.25); }
.tour-pin.visited { background: var(--line); color: var(--muted); border-color: var(--muted); }
/* During a tour, everything else on the map steps back. */
.touring .leaflet-marker-icon:not(.tour-icon, .me-icon) { filter: opacity(.35); }
.me { width: 18px; height: 18px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37,99,235,.25), 0 1px 4px rgba(0,0,0,.4); }
.icon-btn.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.icon-btn.on.free { background: #fff; color: #2563eb; }

.tourbar, .near { position: absolute; z-index: 1001; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 20px));
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.tourbar { bottom: max(14px, env(safe-area-inset-bottom)); }
.tourbar .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tourbar .stop { font-family: Georgia, serif; font-weight: 600; font-size: 18px; margin: 2px 0; cursor: pointer; }
.tourbar .dist { font-size: 13px; color: var(--muted); }
.tourbar .actions { margin: 10px 0 0; }
.near { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); display: flex; gap: 12px; align-items: center; border-left: 5px solid var(--historic); }
.touring .near { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 140px); }
.near.dark { border-color: var(--dark); } .near.weird { border-color: var(--weird); } .near.lost { border-color: var(--lost); } .near.lived { border-color: var(--lived); }
.near img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.near .text { flex: 1; min-width: 0; }
.near .kicker { font-size: 12px; color: var(--muted); }
.near .name { font-weight: 600; }
.near button { flex: none; }
@media (max-width: 640px) { body:has(.panel:not([hidden])) :is(.near, .tourbar) { display: none; } }
.link.back { padding: 0; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* why it's on the map */
.near[hidden] { display: none; }
.why { border-left: 4px solid var(--historic); padding: 2px 0 2px 12px; margin: 0 0 16px; }
.why.dark { border-color: var(--dark); } .why.weird { border-color: var(--weird); } .why.lost { border-color: var(--lost); }
.why-head { font-weight: 700; font-size: 14px; }
.why.dark .why-head { color: var(--dark); } .why.weird .why-head { color: var(--weird); }
.why.lost .why-head { color: var(--lost); } .why.historic .why-head { color: var(--historic); }
.why-head span { font-weight: 400; color: var(--muted); }
.why blockquote { margin: 6px 0; font-family: Georgia, serif; font-size: 15px; line-height: 1.5; }
.why blockquote::before { content: "“"; } .why blockquote::after { content: "”"; }
.why-facts { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.why-note { font-size: 12px; color: var(--muted); }