* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font: 13px/1.4 system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
#filterbar { background: #2b3a4a; color: #eef; display: flex; flex-wrap: wrap;
  gap: 10px; align-items: center; padding: 6px 10px; }
#filterbar label { display: inline-flex; gap: 4px; align-items: center; }
#filterbar input, #filterbar select { font: inherit; }
#filterbar input[type=number] { width: 80px; }
main { flex: 1; display: flex; min-height: 0; }
#map { flex: 1.25; }
#listpane { flex: 1; overflow-y: auto; border-left: 2px solid #ccc; background: #fafafa; }
#count { padding: 6px 10px; color: #678; border-bottom: 1px solid #e3e3e3; }
#list { list-style: none; margin: 0; padding: 0; }
.unit { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.unit:hover, .unit.active { background: #eef4ff; }
.unit img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: #dde; }
.unit .meta { flex: 1; }
.unit .badge { background: #6a8; color: #fff; border-radius: 9px; padding: 1px 7px; font-weight: bold; }
.unit .fav { cursor: pointer; }
#bottombar { background: #2b3a4a; color: #eef; display: flex; gap: 12px; align-items: center; padding: 6px 10px; }
#bottombar .spacer { flex: 1; }
#drawer { position: fixed; top: 0; right: 0; width: 380px; height: 100%;
  background: #fff; box-shadow: -2px 0 8px rgba(0,0,0,.2); overflow-y: auto; padding: 14px; }
#drawer.hidden, #compare-modal.hidden { display: none; }
#drawer .photos { display: flex; gap: 4px; flex-wrap: wrap; }
#drawer .photos img { width: 110px; height: 80px; object-fit: cover; border-radius: 4px; }
#compare-modal { position: fixed; inset: 5%; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.3);
  overflow: auto; padding: 16px; }
#compare-modal table { border-collapse: collapse; width: 100%; }
#compare-modal th, #compare-modal td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; }
#compare-modal tr.diff td { background: #fff7e0; }
.active-marker { filter: hue-rotate(140deg) saturate(2); }

#rankpanel { position: absolute; top: 44px; right: 10px; z-index: 1000; width: 300px;
  max-height: 70vh; overflow-y: auto; background: #fff; color: #222;
  border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); padding: 10px; }
#rankpanel.hidden { display: none; }
#rankpanel .rank-h { font-weight: bold; margin: 8px 0 4px; border-bottom: 1px solid #eee; font-size: 12px; }
#rankpanel .rank-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
#rankpanel .rank-label { flex: 1; }
#rankpanel .w-input { width: 56px; }
#rankpanel .rank-note { color: #789; font-size: 11px; margin: 2px 0 6px; }

/* Desaturate only the base layer's tiles, leaving the property/station markers
   and the rail overlay in full color. Applied via the className option on the
   "Light (greyscale)" base layer in app.js. */
.base-grey { filter: grayscale(1) brightness(1.03); }