:root{
  --chart-water:#FBFBF7;
  --chart-land:#EDE4D0;
  --ink:#1B2B3A;
  --ink-soft:#5A6B79;
  --magenta:#C4187E;
  --magenta-soft:#F5DDEC;
  --green:#1E7A5A;
  --slate:#8C949B;
  --rule:#C9C2B2;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--chart-water);color:var(--ink);
  font-family:"Public Sans",system-ui,sans-serif;font-size:14px;
  display:flex;flex-direction:column;
}
h1,h3,.label,button,.tab,.badge,select{font-family:"Barlow Condensed",system-ui,sans-serif}
.mono{font-family:"IBM Plex Mono",monospace}

header{
  border-bottom:2px solid var(--ink);padding:10px 16px 8px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:var(--chart-land);
}
header h1{margin:0;font-size:27px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;line-height:1}
header .sync{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft)}
header .sync[data-s="offline"]{color:var(--slate)}
header .sync[data-s="syncing"]{color:var(--magenta)}
header .sync[data-s="online"]{color:var(--green)}
header .count{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft)}

main{flex:1;display:flex;min-height:0;position:relative}
#map{flex:1;min-width:0;background:var(--chart-water)}
/* Fixed detail card — pinned to the map's bottom-left; replaces the Leaflet popups so nothing clips
   off an edge and a click never moves the map. */
.detail{position:absolute;left:14px;top:14px;z-index:1000;width:330px;min-width:240px;
  max-width:calc(100% - 28px);max-height:calc(100% - 28px);overflow:auto;resize:horizontal;
  background:#fff;border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 8px 30px rgba(27,43,58,.28);font-family:"Public Sans",sans-serif;font-size:13px;line-height:1.5;color:var(--ink)}
/* height auto → the card fits its content (up to max-height, then scrolls); width is user-resizable + remembered */
.cluster-head{padding:9px 12px 5px;font-family:"Barlow Condensed",sans-serif;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.clus-list{padding:0}
.clus-list li{padding-left:12px;padding-right:10px}
.detail[hidden]{display:none}
.detail-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 7px 5px 11px;background:#fff;border-bottom:1px solid var(--rule);border-radius:6px 6px 0 0}
.detail-back{border:0;background:none;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--magenta);padding:2px 2px}
.detail-back:hover{text-decoration:underline}
.detail-x{border:0;background:none;cursor:pointer;font-size:20px;line-height:1;color:var(--ink-soft);padding:0 4px;margin-left:auto}
.detail-x:hover{color:var(--ink)}
.detail > .card-body{padding:11px 13px}   /* the single-listing card body (list rows pad via the <li>) */
.detail > .pop-imgwrap{height:180px;border-radius:0;margin:0}   /* big picture, full-bleed under the bar */
.det-details{margin-top:10px;padding-top:9px;border-top:1px dotted var(--rule);
  color:var(--ink-soft);font-size:12.5px;line-height:1.45;white-space:pre-wrap}
.sel-halo{pointer-events:none}
.sel-halo.pulse{animation:halo-pulse .55s ease-in-out 3}   /* pulse a few times (list click), then settle solid */
aside{width:410px;flex:none;display:flex;flex-direction:column;min-height:0}

.tabs{display:flex;border-bottom:1px solid var(--rule);background:var(--chart-land)}
.tab{flex:1;padding:9px 4px;border:0;background:none;cursor:pointer;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);border-bottom:3px solid transparent}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--magenta);font-weight:600}
.tab:focus-visible{outline:2px solid var(--magenta);outline-offset:-3px}
.pane{display:none;flex:1;min-height:0;overflow-y:auto;padding:14px}
.pane[data-open="true"]{display:block}

/* Listings pane: a fixed filter header + an independently scrolling list. Filters stay visible and
   there's no wasted space above them (replaces the old sticky-with-negative-margins approach). */
#pane-sheet[data-open="true"]{display:flex;flex-direction:column;overflow:hidden;padding:0}
#pane-sheet .sheet{flex:1;min-height:0;overflow-y:auto;margin:0;padding:0;list-style:none}
#pane-sheet .empty{padding:16px 14px}
.controls{
  flex:none;display:flex;flex-direction:column;gap:7px;
  padding:9px 12px;border-bottom:1px solid var(--rule);background:var(--chart-water);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-family:"Barlow Condensed",sans-serif;color:var(--ink-soft);
}
.ctl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.controls .search{flex:1 1 200px;min-width:150px;border:1px solid var(--rule);border-radius:2px;
  padding:4px 8px;font:inherit;font-size:13px;background:#fff;color:var(--ink);text-transform:none;letter-spacing:0}
/* Multi-select filter dropdowns (Status / Source / State) — a button + a checkbox popover. */
.dd{position:relative}
.dd-btn{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:3px 8px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.dd-btn::after{content:" ▾";color:var(--slate)}
.dd-btn:hover{background:var(--chart-land)}
.dd-btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dd-btn.on::after{color:#fff}
.dd-panel{position:absolute;z-index:20;top:calc(100% + 3px);left:0;min-width:150px;max-height:260px;overflow-y:auto;
  background:#fff;border:1px solid var(--rule);border-radius:4px;box-shadow:0 6px 20px rgba(27,43,58,.18);padding:5px}
.dd-opt{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:3px;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink);white-space:nowrap}
.dd-opt:hover{background:var(--chart-land)}
.dd-opt input{margin:0;cursor:pointer}
.dd-sw{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid var(--ink)}
.dd-div{height:1px;background:var(--rule);margin:5px 2px}
/* Starred — its own toggle (not a status). Amber highlight + filled star when active. */
.star-btn{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:3px 8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
  font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.star-btn:hover{background:var(--chart-land)}
.star-btn .star-sw{fill:none;display:block}
.star-btn.on{background:#E0A500;color:#fff;border-color:#E0A500}
.star-btn.on .star-sw{fill:currentColor}
/* "In view" mode toggle — narrows the list to the map viewport. */
.mode-btn{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:3px 8px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.mode-btn:hover{background:var(--chart-land)}
.mode-btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.legend-note{display:inline-flex;align-items:center;gap:3px;color:var(--ink-soft);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.legend-note .swatch{margin-right:0}

ol.sheet{list-style:none;margin:0;padding:6px 0 0 0;position:relative}
ol.sheet li{position:relative;padding:11px 6px 12px 12px;border-bottom:1px dotted var(--rule);cursor:pointer;display:flex;gap:10px;align-items:flex-start}
/* The thumbnail stretches to the row's full height (set by the text block) so it's as large as
   possible without adding vertical space. An empty stretched wrapper takes the row height; the
   absolutely-positioned img fills it, so a portrait photo can't push the row taller. */
.thumb-wrap{align-self:stretch;flex:none;width:88px;position:relative;overflow:hidden;border-radius:3px;background:var(--chart-land);border:1px solid var(--rule)}
.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb-wrap:not(.thumb-none){cursor:zoom-in}   /* click a list thumbnail to enlarge it */
/* No-photo placeholder — a muted image glyph so the row keeps its thumbnail column. */
.thumb-none{display:flex;align-items:center;justify-content:center;color:var(--slate)}
.thumb-none svg{width:34px;height:34px;opacity:.65}
.card-body{flex:1;min-width:0}
.pop-imgwrap{position:relative;width:100%;height:240px;margin-bottom:8px;border-radius:4px;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--chart-land)}
.pop-imgwrap::before{content:"";position:absolute;inset:0;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
.pop-img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.pop-imgwrap{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,32,.9);cursor:zoom-out;padding:24px}
#lightbox.show{display:flex}
#lightbox img{max-width:96vw;max-height:96vh;object-fit:contain;border-radius:4px;box-shadow:0 10px 50px rgba(0,0,0,.55)}
.pop-x{color:var(--ink-soft);font-size:12px}
.pop-details{display:block;margin-top:4px;color:var(--ink-soft);font-size:12px;line-height:1.4;white-space:pre-wrap}
ol.sheet li.sel{background:rgba(196,24,126,.06)}
@keyframes flash{from{background:var(--magenta-soft)}to{background:transparent}}
ol.sheet li.flash{animation:flash 1.6s ease-out}

.card-title{font-weight:600;font-size:14px;line-height:1.3;cursor:pointer}
.card-title:hover{color:var(--magenta)}
.card-meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-soft);margin-top:3px}
.card-sub{font-family:"Public Sans",sans-serif;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.badge{
  display:inline-block;font-size:11px;letter-spacing:.1em;padding:1px 5px;border-radius:2px;
  margin-left:5px;vertical-align:1px;
}
.badge.pa{border:1px dotted var(--slate);color:var(--slate)}
.badge.ok{background:var(--ink);color:#fff}
.card-note{font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-style:italic}
.card-updated{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--slate);letter-spacing:.02em;white-space:nowrap}
.card-updated.stale-amber{color:#B26A00}
.card-updated.stale-red{color:#C4362B;font-weight:600}
.card-row{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
.card-row a{font-size:12px;color:var(--magenta);text-decoration:none;border-bottom:1px solid var(--magenta-soft)}
.card-row a:hover{border-bottom-color:var(--magenta)}
select.status{font-size:13px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--rule);
  background:#fff;border-radius:2px;padding:2px 4px;color:var(--ink)}
.mini{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:2px 8px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mini:hover{border-color:var(--ink);color:var(--ink)}
.kill{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--slate);line-height:1;padding:2px 4px;display:inline-flex;align-items:center}
.kill:hover{color:var(--magenta)}
.card-row a.olink{border-bottom:0;color:var(--ink-soft);display:inline-flex;align-items:center;padding:2px}
.card-row a.olink:hover{color:var(--magenta)}
.olink-fav{width:15px;height:15px;display:block;object-fit:contain}
.kill svg,.card-row a.olink svg{display:block}
.iconbtn{border:0;background:none;cursor:pointer;color:var(--ink-soft);display:inline-flex;align-items:center;padding:2px;line-height:1}
.iconbtn:hover{color:var(--magenta)}
.iconbtn.on{color:var(--magenta)}
.iconbtn.star.on{color:#E0A500}
.iconbtn svg{display:block}
.card-title .iconbtn.star{padding:0;margin-right:5px;vertical-align:-3px}
.leaflet-bar a{width:30px;height:30px;line-height:30px}
a.recenter-btn{color:var(--ink)}
a.recenter-btn:hover{background:var(--chart-land)}
a.recenter-btn svg{vertical-align:middle}
a.names-btn{color:var(--ink)}
a.names-btn:hover{background:var(--chart-land)}
a.names-btn svg{vertical-align:middle}
a.names-btn.on{background:var(--ink);color:#fff}
#divider{flex:none;width:6px;cursor:col-resize;background:var(--chart-land);border-left:2px solid var(--ink)}
#divider:hover{background:var(--rule)}
textarea.notes{font-family:"Public Sans",sans-serif;font-size:13px;min-height:2.4em}

.editor{margin-top:10px;padding:12px;background:var(--chart-land);border-radius:2px}
.editor .label{margin:9px 0 3px}
.editor .label:first-child{margin-top:0}
.pin{border-left:3px solid var(--magenta);padding-left:9px;margin:12px 0 0}
.ed-from{margin-top:14px;border-top:1px solid var(--rule);padding-top:8px}
.ed-from>summary{cursor:pointer;list-style:none;font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ed-from>summary::-webkit-details-marker{display:none}
.ed-from>summary::marker{content:""}
.ed-from>summary:hover{color:var(--ink)}
/* Both expanders blank the native disclosure marker to keep the chart typography, so draw the
   affordance back in: without it a collapsed summary reads as a dead heading with nothing under it. */
.ed-from>summary::before,details.info>summary::before{content:"";display:inline-block;
  width:0;height:0;margin-right:7px;vertical-align:middle;
  border:4px solid transparent;border-left-color:currentColor;transition:transform .12s ease}
.ed-from[open]>summary::before,details.info[open]>summary::before{transform:rotate(90deg)}
.empty{border:1px dashed var(--rule);padding:22px;text-align:center;color:var(--ink-soft);font-style:italic;line-height:1.6}

.label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 4px}
input[type=text],textarea{width:100%;border:1px solid var(--rule);border-radius:2px;padding:7px 8px;font:inherit;background:#fff;color:var(--ink)}
textarea{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.55;resize:vertical}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid var(--magenta);outline-offset:0;border-color:transparent}
.btn{font-family:"Barlow Condensed",sans-serif;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 16px;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--magenta);border-color:var(--magenta)}
.btn.ghost{background:none;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hint{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:6px 0 0}
.hint code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--chart-land);padding:1px 4px;border-radius:2px}
input::placeholder,textarea::placeholder{color:#AEB4BA;opacity:1;font-style:italic}
/* A grab landed without something the pin needs — ring the field it wants filled in. */
input.need,textarea.need{border-color:var(--magenta);box-shadow:inset 0 0 0 1px var(--magenta)}
/* The two fields missingCritical actually blocks on. In the label, so Add doesn't have to teach it. */
.req{color:var(--magenta);font-size:10.5px;letter-spacing:.08em}
/* This link is already on the list — said while the URL is typed, not after the form is filled in. */
.dupe{font-size:12.5px;line-height:1.5;margin:6px 0 0;color:var(--ink-soft);font-style:italic}
.dupe.warn{color:var(--magenta);font-style:normal}
/* Finishing a grab: what came off the page, above the fields it filled in. Callouts carry the magenta
   rule (same vocabulary as .prefer); individual inputs don't, so it reads as context, not an alarm. */
.grabnote{display:flex;gap:10px;align-items:center;margin:0 0 4px;padding:9px 11px;border-radius:2px;
  background:var(--chart-land);border:1px solid var(--rule);border-left:3px solid var(--magenta)}
.grabnote[hidden]{display:none}
.grabnote img{width:46px;height:46px;object-fit:cover;border-radius:2px;flex:none}
.grabnote p{margin:0;font-size:12.5px;line-height:1.5}
details.info{margin-top:18px;border-top:1px solid var(--rule);padding-top:10px}
details.info>summary{cursor:pointer;list-style:none;display:inline-block;
  font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
details.info>summary::-webkit-details-marker{display:none}
details.info>summary::marker{content:""}
details.info>summary:hover,details.info[open]>summary{color:var(--ink)}
.info-body h3:first-child{margin-top:10px}
.prefer{background:var(--chart-land);border:1px solid var(--rule);border-left:3px solid var(--magenta);
  border-radius:2px;padding:12px 14px;margin:2px 0 4px}
.prefer h3{margin-top:0}
#toasts{position:fixed;top:16px;right:16px;z-index:3000;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;max-width:340px;pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;max-width:340px;
  background:var(--ink);color:#fff;padding:10px 10px 10px 15px;border-radius:6px;
  border-left:3px solid var(--magenta);
  font-family:"Public Sans",sans-serif;font-size:13.5px;line-height:1.4;
  box-shadow:0 6px 22px rgba(27,43,58,.32);
  opacity:0;transform:translateY(-10px);transition:opacity .2s ease, transform .2s ease;pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0)}
.toast-msg{flex:1;padding-top:1px}
.toast-x{flex:none;border:0;background:none;color:#fff;opacity:.55;cursor:pointer;
  font-size:19px;line-height:1;padding:0 3px}
.toast-x:hover{opacity:1}
#tip{position:fixed;left:0;top:0;z-index:4000;max-width:230px;background:#fff;color:var(--ink);
  border:1px solid var(--rule);padding:5px 8px;border-radius:4px;
  font-family:"Public Sans",sans-serif;font-size:11.5px;line-height:1.35;
  box-shadow:0 2px 10px rgba(27,43,58,.18);opacity:0;pointer-events:none;transition:opacity .08s ease}
#tip.show{opacity:1}
#status,.estatus{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--magenta);margin-top:10px;min-height:1.2em}
.sect{border-top:1px solid var(--rule);margin-top:22px;padding-top:4px}
.urlbox{width:100%;box-sizing:border-box;min-height:120px;resize:vertical;margin-top:10px;padding:8px 10px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.5;color:var(--ink);
  background:var(--chart-water);border:1px solid var(--rule);border-radius:4px}
.urlbox:focus{outline:none;border-color:var(--magenta)}
.urlout{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.urlout li{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.urlout li a{color:var(--magenta);text-decoration:none;border-bottom:1px solid var(--magenta-soft)}
.urlout li a:hover{border-bottom-color:var(--magenta)}
.urlout.note li{font-family:"Public Sans",sans-serif;color:var(--ink-soft);overflow-wrap:normal}
.bmlink{
  display:inline-block;font-family:"Barlow Condensed",sans-serif;font-size:15px;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--chart-land);
  border:1px solid var(--ink);border-bottom-width:3px;border-radius:2px;padding:7px 14px;cursor:grab;
}
.bmlink:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 2px;font-weight:600}

.leaflet-popup-content{font-family:"Public Sans",sans-serif;font-size:13px;margin:11px 13px;line-height:1.5;
  resize:both;overflow:auto;min-width:200px;max-width:92vw;min-height:80px;max-height:72vh}
.leaflet-popup-content::-webkit-scrollbar{width:10px;height:10px}
.leaflet-popup-content::-webkit-scrollbar-thumb{background:var(--slate);border-radius:5px;border:2px solid #fff}
.leaflet-popup-content::-webkit-scrollbar-track{background:transparent}
.leaflet-popup-content b{font-family:"Barlow Condensed",sans-serif;font-size:16px;letter-spacing:.02em}
.leaflet-popup-content a{color:var(--magenta)}
/* Address / town → Google Maps: reads as the surrounding (muted) text, with a hover cue. */
.maps-link, .leaflet-popup-content a.maps-link{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.maps-link:hover, .leaflet-popup-content a.maps-link:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
.leaflet-tooltip.name-tag{
  background:rgba(251,251,247,.92);border:1px solid var(--rule);box-shadow:none;border-radius:2px;
  font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.03em;color:var(--ink);padding:1px 5px;
}
.leaflet-tooltip.name-tag::before{display:none}
.cluster{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  border:2px solid var(--chart-water);box-shadow:0 0 0 1px var(--ink)}
.hover-halo{pointer-events:none;animation:halo-pulse 1.1s ease-in-out infinite}
@keyframes halo-pulse{0%,100%{opacity:.45}50%{opacity:1}}
.star-pin{background:none;border:0}
.star-pin svg{display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4))}

@media (max-width:860px){
  main{flex-direction:column}
  #map{height:46vh;flex:none}
  aside{width:auto!important;border-top:2px solid var(--ink);flex:1}
  #divider{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}