* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; overscroll-behavior:none; }
body { font-family:Archivo,system-ui,sans-serif; background:#0E1116; color:#EDF0F4; -webkit-text-size-adjust:100%; }
button,input { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
a { color:#4BA3E3; }
a:hover { color:#7CC2F2; }
:focus-visible { outline:2px solid #4BA3E3; outline-offset:2px; border-radius:8px; }
.noscroll::-webkit-scrollbar { width:0; height:0; }
.noscroll { scrollbar-width:none; }
.leaflet-container { font-family:Archivo,sans-serif; background:#EFEBE4; }
.leaflet-control-attribution { font-size:9px; background:rgba(255,255,255,.72); }
.leaflet-popup-content-wrapper { border-radius:14px; }

/* Leaflet builds markers from HTML strings, so marker skin has to live in a stylesheet */
.pin { transform:translate(-50%,-50%); display:flex; align-items:center; gap:5px; background:#fff; color:#0E1116;
  border-radius:999px; padding:4px 9px; white-space:nowrap; font-family:'DM Mono',monospace; font-size:12px;
  font-weight:500; line-height:1; box-shadow:0 2px 8px rgba(10,13,18,.4); border:2px solid #8A93A3; }
.pin.facebook { border-color:#2D8CFF; } .pin.craigslist { border-color:#8B5CF6; }
.pin.redfin { border-color:#E31837; } .pin.zumper { border-color:#F0A500; }
.pin.apartments { border-color:#00A0A0; }
.pin.approx { border-style:dashed; }
/* ruled out: still on the map and still openable, just visibly discounted */
.pin.out { opacity:.45; background:#C8CDD6; border-color:#6E7686 !important; }
.pin.saved::after { content:'♥'; font-size:11px; color:#F0A500; }
.pin.sel { background:#0E1116; color:#fff; border-color:#fff; z-index:1000; padding:6px 11px; font-size:13px;
  box-shadow:0 4px 16px rgba(0,0,0,.55); }
.pin .stop { font-family:Archivo; font-stretch:125%; font-weight:600; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.85; max-width:9rem; overflow:hidden; text-overflow:ellipsis; }
.marker-cluster { background:none; border:0; box-shadow:0 2px 8px rgba(10,13,18,.45); border-radius:999px; }
.marker-cluster > div { margin:0; width:100%; height:100%; border-radius:999px; background:none; display:flex;
  align-items:center; justify-content:center; }
.marker-cluster .ring { width:100%; height:100%; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.marker-cluster .core { background:#0E1116; border-radius:999px; width:calc(100% - 8px); height:calc(100% - 8px);
  display:flex; align-items:center; justify-content:center; }
.marker-cluster span { font-family:'DM Mono',monospace; font-size:11px; font-weight:500; color:#fff; }
/* one address, many units: a building with its unit count rather than a bare circle */
.marker-cluster.bldg { box-shadow:none; }
.bldgIcon { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:#12161D; border:1.5px solid #8A93A3; color:#8A93A3;
  box-shadow:0 2px 8px rgba(10,13,18,.5); }
.bldgIcon .cnt { position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:#8A93A3; color:#0E1116; font-family:'DM Mono',monospace; font-size:10px;
  font-weight:500; display:flex; align-items:center; justify-content:center; }
.lm { transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center;
  height:17px; padding:0 5px; border-radius:5px; background:#12161D; border:1px solid currentColor;
  font-family:Archivo,sans-serif; font-stretch:125%; font-weight:700; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; line-height:1; box-shadow:0 1px 4px rgba(10,13,18,.45); }
.lm.hi { background:currentColor; }
.lm span { color:currentColor; }
.lm.hi span { color:#0E1116; }
.lm.dest { height:20px; padding:0 7px; font-size:10px; box-shadow:0 2px 7px rgba(10,13,18,.5); }
/* zoomed out there is no room for a word, so the chips become plain dots */
.lm-compact .lm { height:12px; width:12px; padding:0; border-radius:50%; background:currentColor; }
.lm-compact .lm span { display:none; }
.lm-compact .lm.dest { height:15px; width:15px; }
.lm.culled { display:none; }
.coreLbl { background:rgba(6,8,12,.82); border:0; color:#EDF0F4; font-family:Archivo,sans-serif;
  font-stretch:112%; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:none; padding:3px 8px; border-radius:8px; }
.coreLbl::before { display:none; }

/* the only layout rule inline styles cannot express: the desktop split */
@media (min-width:900px) {
  #sheet { top:0 !important; bottom:0; left:0; right:auto; width:392px; height:100% !important; transform:none !important;
    border-radius:0 !important; border-right:1px solid #232A36; box-shadow:none; }
  #mapctl { bottom:24px; }
  #grabber { display:none; }
  #more { left:0; width:392px; right:auto; height:100%; max-height:100%; border-radius:0; }
  #scrim { left:392px; }
  /* the detail opens as a second column instead of covering the list */
  #app.two #detailPane { display:flex; left:392px; width:424px; }
  #app.two #scrim { left:816px; }   /* #map and #rail carry inline left — see layoutChrome() */
}
#searchBox { transition:width .22s cubic-bezier(.32,.72,0,1); }
@media (prefers-reduced-motion:reduce) { #sheet, #more, #scrim, #searchBox { transition-duration:.01ms !important; } }

/* ── quiet map: district bubbles, flatter pins, neutral clusters ────────── */
.dist { transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 11px 6px; border-radius:14px; background:rgba(14,17,22,.93); border:1px solid #39424F;
  color:#EDF0F4; box-shadow:0 3px 14px rgba(8,10,14,.3); cursor:pointer; }
.dist:hover { border-color:#4BA3E3; }
.dist b { font-family:'DM Mono',monospace; font-size:15px; font-weight:500; line-height:1; }
.dist span { font-stretch:112%; font-weight:600; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#9AA3B2; max-width:11rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dist em { font-family:'DM Mono',monospace; font-style:normal; font-size:10.5px; color:#8FB8D8; }
.pin { box-shadow:0 1px 4px rgba(10,13,18,.28); border-width:1.5px; padding:3px 8px; font-size:11.5px; }
.pin.sel { box-shadow:0 4px 16px rgba(0,0,0,.45); }
.marker-cluster { box-shadow:0 2px 8px rgba(10,13,18,.3); }

/* a price tag with no room keeps its place as a dot: visible, clickable, quiet */
.pin.dot { width:13px; height:13px; padding:0; border-radius:50%; font-size:0; gap:0;
  border-width:2.5px; box-shadow:0 1px 3px rgba(10,13,18,.3); overflow:hidden; }
.pin.dot .stop, .pin.dot::after { display:none; }
.pin.dot.saved { background:#F0A500; border-color:#F0A500; }