:root {
  --ink:#10212b; --muted:#607382; --line:#dce5ea; --panel:#ffffff; --bg:#eef4f5;
  --brand:#008f95; --deep:#063b45; --glow:#ff7a1a;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
.auth-pending .app { visibility:hidden; pointer-events:none; }
.auth-loading { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:#fff; color:#607382; font-size:14px; font-weight:750; text-align:center; }
.auth-loading[hidden] { display:none; }
.auth-loading p { margin:0; }
.app { display:grid; grid-template-columns:360px 1fr; height:100vh; min-height:620px; }
.side { background:var(--panel); border-right:1px solid var(--line); overflow:auto; display:flex; flex-direction:column; }
.hero { padding:13px 18px 11px; color:white; background:linear-gradient(140deg,#052b35 0%,#07616c 58%,#00a5a5 100%); }
.brand { min-height:29px; margin-bottom:6px; display:flex; align-items:center; }
.brand-mark { font-size:20px; font-weight:850; letter-spacing:0; }
.brand img { max-width:148px; height:auto; display:block; }
h1 { margin:0; font-size:25px; line-height:1.05; letter-spacing:0; }
.hero p { margin:5px 0 0; color:#dff6f4; font-size:13px; line-height:1.3; }
.controls { padding:14px 16px 12px; border-bottom:1px solid var(--line); background:#fbfdfd; }
label { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#536978; margin:0 0 6px; }
input, select, button { width:100%; border:1px solid #cbd9df; border-radius:8px; background:white; color:var(--ink); font:inherit; }
input, select { height:42px; padding:0 12px; margin-bottom:10px; outline:none; }
input:focus, select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,143,149,.14); }
button { height:40px; font-weight:800; cursor:pointer; background:#eef6f6; color:#07535d; }
button:hover { background:#dff0f0; }
.filter-actions { display:flex; gap:8px; align-items:stretch; }
.filter-actions #clearFilters { flex:0 1 176px; min-width:0; height:32px; font-size:12px; color:#496773; background:#f7fbfb; }
.usage-button { flex:0 0 26px; width:26px; height:26px; padding:0; align-self:center; display:grid; place-items:center; border-color:#b6d3d6; background:#fff; color:#07535d; }
.usage-button:hover, .usage-button[aria-expanded="true"] { background:#dff0f0; border-color:#4aabb0; }
.usage-button svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.usage-panel { display:grid; gap:6px; margin-top:8px; padding:9px 10px 8px; border:1px solid #bdd9db; border-radius:8px; background:#fff; box-shadow:0 7px 18px rgba(8,30,38,.10); }
.usage-panel[hidden] { display:none; }
.usage-panel div { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.usage-panel span { color:#536978; font-weight:800; }
.usage-panel strong { color:#07535d; font-size:13px; }
.usage-panel small { padding-top:6px; border-top:1px solid #e4eeee; color:#72838d; font-size:10px; font-weight:750; }
.selected { padding:12px 16px; border-bottom:1px solid var(--line); background:#fff; }
.selected-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#536978; margin-bottom:8px; }
.selected-head strong { color:#10212b; }
.selected-list { display:grid; gap:6px; min-height:28px; }
.selected-pill { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 8px; border:1px solid #e2eaee; border-radius:8px; background:#f6fbfb; font-size:12px; }
.selected-pill button { width:26px; height:24px; padding:0; border-radius:6px; background:#fff; color:#8a2e12; }
.quote { display:flex; align-items:center; justify-content:center; min-height:42px; border-radius:8px; margin-top:10px; background:var(--glow); color:#fff; text-decoration:none; font-weight:900; box-shadow:0 8px 18px rgba(255,122,26,.28); }
.quote.disabled { pointer-events:none; background:#ccd7dc; color:#667783; box-shadow:none; }
.count { padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; color:#536978; }
.count strong { color:#0b5a64; }
.list { padding:4px 7px 8px; overflow:auto; }
.row { border:1px solid #e4ecef; border-radius:6px; background:#fff; padding:5px 8px; margin-bottom:3px; cursor:pointer; transition:background .12s ease,border-color .12s ease,transform .12s ease; }
.row:hover { background:#f3fbfb; border-color:#9ed4d7; transform:translateY(-1px); }
.row.active { border-color:var(--glow); box-shadow:0 0 0 2px rgba(255,122,26,.16); }
.row h2 { margin:0; overflow:hidden; color:#526d79; font-size:11px; font-weight:500; line-height:1.16; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }
.row h2 strong { color:#0d3340; font-size:12px; font-weight:850; }
.row h2 span { font-weight:500; }
.map-wrap { position:relative; min-width:0; }
#map { height:100%; width:100%; background:#dae7ea; }
.layer-switch { position:absolute; top:14px; right:14px; z-index:500; display:flex; gap:4px; padding:4px; background:rgba(255,255,255,.84); border:1px solid rgba(15,45,55,.12); border-radius:8px; box-shadow:0 5px 15px rgba(8,30,38,.10); }
.layer-options { display:flex; gap:4px; }
.map-style-menu-button { display:none; }
.layer-switch button { width:auto; height:28px; padding:0 8px; border-radius:6px; font-size:11px; background:rgba(255,255,255,.9); }
.layer-switch button.active { background:#073b46; color:white; border-color:#073b46; }
.real-estate-toggle { position:absolute; top:66px; right:14px; z-index:500; display:flex; align-items:center; gap:7px; min-height:34px; padding:0 11px; border:1px solid rgba(15,45,55,.16); border-radius:8px; background:rgba(255,255,255,.92); color:#173d49; font-size:11px; font-weight:800; letter-spacing:0; text-transform:none; box-shadow:0 8px 22px rgba(8,30,38,.12); cursor:pointer; user-select:none; }
.real-estate-toggle input { width:15px; height:15px; margin:0; accent-color:#073b46; cursor:pointer; }
.nearby-hint { position:absolute; right:14px; top:108px; z-index:500; padding:7px 10px; border:1px solid rgba(15,45,55,.14); border-radius:8px; background:rgba(255,255,255,.9); color:#315766; font-size:12px; font-weight:800; box-shadow:0 8px 22px rgba(8,30,38,.12); pointer-events:none; }
.nearby-popup-button { width:auto; height:34px; padding:0 12px; border-radius:8px; background:#ff7a1a; color:white; border-color:#ff7a1a; font-size:13px; font-weight:900; }
.nearby-popup .leaflet-popup-content { margin:10px; }
.watermark { position:absolute; inset:0; z-index:450; pointer-events:none; overflow:hidden; display:grid; place-items:center; }
.watermark::before { content:none; display:none; }
.map-conditions-link { position:absolute; right:14px; bottom:14px; display:block; padding:4px 7px; border:1px solid rgba(255,255,255,.76); border-radius:7px; background:rgba(255,250,250,.92); color:#b42318; font-size:11px; font-weight:900; letter-spacing:.01em; line-height:1.1; text-decoration:none; box-shadow:0 5px 14px rgba(8,30,38,.13); pointer-events:auto; }
.map-conditions-link:hover, .map-conditions-link:focus-visible { background:#fff; color:#8e1c13; text-decoration:underline; outline:none; }
.release-version { position:absolute; left:14px; bottom:14px; z-index:500; color:#284d59; font-size:9px; font-weight:850; letter-spacing:.04em; text-shadow:0 1px 2px rgba(255,255,255,.92),0 0 4px rgba(255,255,255,.82); pointer-events:none; }
.watermark-logo { width:min(24vw,255px); max-width:48%; height:auto; transform:rotate(-18deg); opacity:.24; filter:drop-shadow(0 2px 2px rgba(4,35,40,.28)); }
.leaflet-popup-content-wrapper { border-radius:10px; }
.pop { min-width:238px; }
.pop h2 { margin:0 0 8px; font-size:17px; color:#0d3340; }
.facts { display:grid; gap:6px; margin:8px 0 12px; }
.fact { display:flex; justify-content:space-between; gap:12px; font-size:12px; border-bottom:1px solid #edf2f4; padding-bottom:5px; }
.fact span:first-child { color:#6b7b86; }
.fact span:last-child { color:#10212b; font-weight:750; text-align:right; }
.popup-actions { display:grid; gap:8px; }
.popup-actions button, .popup-actions a { display:flex; align-items:center; justify-content:center; min-height:38px; border-radius:8px; text-decoration:none; font-weight:850; }
.popup-actions a { background:var(--glow); color:#fff; }
.empty { padding:18px 12px; color:#667783; font-size:13px; }
@media (max-width: 860px) {
  .app { grid-template-columns:1fr; grid-template-rows:48vh 52vh; height:100vh; }
  .map-wrap { order:1; min-height:0; }
  .side { order:2; border-right:0; border-top:1px solid var(--line); }
  .hero { padding:14px 16px 12px; }
  h1 { font-size:22px; }
  .layer-switch { top:10px; right:10px; max-width:calc(100% - 20px); overflow:auto; }
  .real-estate-toggle { top:58px; right:10px; }
  .leaflet-top.leaflet-right { top:102px; }
  .nearby-hint { top:100px; right:10px; }
}


.decision { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; background:rgba(8,25,32,.28); padding:18px; }
.decision-box { width:min(360px,100%); background:white; border-radius:10px; padding:18px; box-shadow:0 18px 60px rgba(8,25,32,.28); }
.decision-box h2 { margin:0; font-size:22px; color:#0d3340; }
.decision-box p { margin:8px 0 14px; color:#607382; font-size:14px; line-height:1.35; }
.decision-actions { display:grid; gap:8px; }
.decision-actions button { min-height:42px; }
.decision-actions [data-no] { background:#ff7a1a; color:white; border-color:#ff7a1a; }


.map-request {
  position:absolute;
  top:14px;
  left:14px;
  z-index:700;
  width:220px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,252,252,.94));
  border:1px solid rgba(15,45,55,.16);
  border-radius:10px;
  box-shadow:0 14px 36px rgba(8,30,38,.20);
  padding:10px;
}
.request-list {
  display:grid;
  gap:5px;
}
.request-row {
  display:grid;
  grid-template-columns:46px 1fr 24px;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 5px;
  border:1px solid #e2eaee;
  border-radius:7px;
  background:#f8fcfc;
  font-size:11px;
}
.request-row span { color:#607382; font-weight:800; }
.request-row strong { color:#10212b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.request-row.filled { border-color:rgba(255,122,26,.38); background:#fff8f1; }
.request-row em { color:#8a9aa4; font-style:normal; }
.request-row button {
  width:22px;
  height:22px;
  padding:0;
  border-radius:6px;
  color:#8a2e12;
  background:#fff;
}
.empty-slot { grid-template-columns:46px 1fr; }
.request-full { margin:5px 2px 0; color:#637984; font-size:10px; font-weight:800; text-align:right; }
.map-request .quote,
.popup-actions a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:8px;
  border-radius:8px;
  background:#ff7a1a;
  color:white;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 8px 18px rgba(255,122,26,.25);
}
.map-request .quote.disabled {
  pointer-events:none;
  background:#ccd7dc;
  color:#667783;
  box-shadow:none;
}
.map-request .quote { font-size:13px; }
.export-map { display:flex; align-items:center; justify-content:center; gap:6px; width:max-content; min-width:132px; padding:0 12px; min-height:30px; margin-top:7px; border-color:#9cc9cc; background:#edf6f6; color:#07535d; font-size:11px; font-weight:900; }
.export-map-icon { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.export-map:hover:not(:disabled) { background:#dceeee; }
.export-map:disabled { cursor:default; border-color:#d5e0e3; background:#f2f5f6; color:#9aabb3; }
.count.nearby-results { font-size:0; }
.count.nearby-results strong { font-size:15px; }
.count.nearby-results::after { content:" ‘titles near here’ shown on the current map"; font-size:13px; color:#587280; }
.export-dialog[hidden] { display:none; }
.conditions-dialog[hidden] { display:none; }
.conditions-dialog { position:fixed; inset:0; z-index:1800; display:grid; place-items:center; padding:18px; background:rgba(5,30,38,.64); }
.conditions-dialog-card { width:min(490px,100%); padding:32px; border:1px solid rgba(255,255,255,.64); border-radius:18px; background:linear-gradient(150deg,#fff,#edf7f7); color:#163d47; box-shadow:0 28px 80px rgba(2,25,31,.42); text-align:center; }
.conditions-kicker { color:#0b8f95; font-size:11px; font-weight:900; letter-spacing:.12em; }
.conditions-dialog h2 { margin:7px 0 13px; color:#063b45; font-size:26px; }
.conditions-dialog p { margin:0; color:#4d6872; font-size:14px; line-height:1.5; }
.conditions-summary { margin:18px 0; padding:13px 15px; border:1px solid #c9e0e2; border-radius:9px; background:#fff; color:#315766; font-size:13px; font-weight:700; line-height:1.45; }
.conditions-summary a { color:#07535d; font-weight:900; }
.conditions-accept { width:100%; min-height:45px; border-color:#ff7a1a; background:#ff7a1a; color:#fff; font-size:15px; font-weight:900; }
.conditions-accept:hover:not(:disabled) { background:#e86b12; }
.conditions-accept:disabled { cursor:progress; opacity:.7; }
.conditions-leave { display:inline-block; margin-top:14px; color:#52707a; font-size:13px; font-weight:750; }
.conditions-status { margin-top:14px !important; color:#b42318 !important; font-weight:800; }
.export-dialog { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:18px; background:rgba(5,30,38,.48); }
.export-dialog-card { position:relative; width:min(470px,100%); padding:24px; border:1px solid rgba(255,255,255,.55); border-radius:16px; background:linear-gradient(160deg,#fff,#f2f9f9); box-shadow:0 24px 70px rgba(4,30,37,.32); }
.export-dialog-logo { display:block; box-sizing:content-box; width:142px; height:auto; margin:0 0 14px; padding:8px 12px; border-radius:8px; background:#063b45; box-shadow:0 5px 14px rgba(5,49,59,.16); }
.export-dialog h2 { margin:0; color:#0d3340; font-size:23px; }
.export-dialog-close { position:absolute; top:10px; right:10px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:#47616c; font-size:25px; font-weight:400; }
.export-dialog-close:hover { background:#e2eeee; }
.export-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.export-option { display:flex; align-items:center; min-height:78px; gap:10px; padding:12px; text-align:left; border-color:#b8d5d7; background:#fff; color:#0b4d58; }
.export-option:hover:not(:disabled) { transform:translateY(-1px); background:#f5fbfb; border-color:#39a2a7; }
.export-option:disabled { cursor:progress; opacity:.65; }
.export-option svg { width:27px; height:27px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; }
.export-option span { display:grid; gap:3px; }
.export-option strong { font-size:13px; }
.export-option small { color:#617987; font-size:11px; font-weight:650; line-height:1.2; }
.export-status { margin:14px 0 0; padding-top:12px; border-top:1px solid #dce8e9; color:#42616b; line-height:1.35; font-size:12px; font-weight:750; }
.popup-actions { display:grid; gap:8px; }
.popup-actions button { min-height:38px; }
.popup-actions button:disabled { opacity:.65; cursor:default; }
.leaflet-top.leaflet-right { top:112px; }
.market-marker {
  width:auto;
  min-width:48px;
  height:22px;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  box-shadow:0 8px 18px rgba(8,30,38,.24);
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.market-marker.sale { background:#f26f21; }
.market-marker.rent { background:#007f8a; }
.market-marker.both { background:#172f3a; }
.market-marker span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:13px;
  height:13px;
  margin-left:3px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  font-size:8px;
}
/* The desktop panel remains over the map. On phones the equivalent panel belongs in the sidebar flow. */
.sidebar-request { display:none; }
@media (max-width: 860px) {
  .app { grid-template-rows:42vh 58vh; }
  .hero { padding:8px 14px 7px; }
  .brand { min-height:24px; margin-bottom:5px; }
  .brand img { max-width:118px; }
  h1 { font-size:20px; }
  .hero p { margin-top:4px; font-size:12px; }
  .controls { padding:10px 14px; }
  input, select { height:38px; margin-bottom:8px; }
  .controls button { height:36px; }
  .map-conditions-link { right:8px; bottom:8px; padding:4px 6px; font-size:9px; }
  .release-version { left:8px; bottom:8px; font-size:8px; }
  .map-request { display:none; }
  .sidebar-request { display:block; padding:10px 14px 12px; border-bottom:1px solid var(--line); background:#fff; }
  .sidebar-request .quote { font-size:12px; min-height:36px; margin-top:8px; }
  .sidebar-request .export-map { min-height:30px; margin-top:7px; }
  .sidebar-request .request-row { min-height:26px; }
  .market-marker { min-width:44px; height:21px; font-size:9px; }
  .layer-switch { top:10px; right:10px; z-index:510; padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
  .layer-switch .map-style-menu-button { width:44px; height:44px; padding:8px; display:grid; gap:4px; place-content:center; border:1px solid rgba(15,45,55,.16); border-radius:8px; background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(8,30,38,.18); }
  .map-style-menu-button span { display:block; width:18px; height:2px; border-radius:2px; background:#073b46; }
  .layer-options { display:none; position:absolute; top:50px; right:0; flex-direction:column; gap:5px; padding:6px; border:1px solid rgba(15,45,55,.16); border-radius:9px; background:rgba(255,255,255,.96); box-shadow:0 10px 24px rgba(8,30,38,.18); }
  .layer-switch.open .layer-options { display:flex; }
  .layer-options button { width:112px; text-align:left; }
  .export-options { grid-template-columns:1fr; }
}

/* Parcel pulse is applied through Leaflet canvas style changes in app.js. */