/* =========================================================
   Foundation tokens
   ========================================================= */
:root{
  /* Surface stack — deepest to brightest */
  --bg-deep:#080b14;
  --bg-base:#0a0d18;
  --surf-1:rgba(16,20,32,0.78);     /* outer panel */
  --surf-2:rgba(22,28,44,0.55);      /* inner cards */
  --surf-3:rgba(28,34,52,0.92);      /* popovers / dropdowns */
  --surf-hi:rgba(40,48,72,0.55);     /* hover */
  /* Borders / specular */
  --line:rgba(255,255,255,0.06);
  --line-strong:rgba(255,255,255,0.12);
  --specular:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0) 40%);
  /* Type */
  --txt-1:#f4f6fb;
  --txt-2:#d6dde9;
  --txt-3:#a4adc4;
  --txt-4:#8a91a8;
  --accent:#88c0d0;
  --accent-warm:#f0883e;
  /* Severity (kept untouched — these are intuitive, don't break) */
  --sev-4:#f85149;
  --sev-3:#db6d28;
  --sev-2:#e3b341;
  --sev-1:#56d364;
  /* Radius scale */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:14px;
  --r-pill:999px;
  /* Shadow vocabulary */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.35),0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.3);
  --glow-cool:0 0 24px rgba(136,192,208,0.18);
  --glow-warm:0 0 28px rgba(248,81,73,0.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-base);
  color:var(--txt-2);
  overflow:hidden;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#map{width:100vw;height:100vh}

/* Subtle radial vignette to focus attention on the center of the map.
   Sits above tiles but below the panel/controls (z>800, z<1000). */
.map-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:850;
  background:
    radial-gradient(ellipse 90% 70% at center,transparent 45%,rgba(8,11,20,0.55) 100%),
    radial-gradient(ellipse at top left,rgba(80,120,200,0.04),transparent 40%),
    radial-gradient(ellipse at bottom right,rgba(140,80,160,0.03),transparent 40%);
}

/* =========================================================
   Sidebar panel — "outer glass"
   ========================================================= */
.P{
  position:absolute;top:0;left:0;width:460px;height:100vh;z-index:1000;
  display:flex;flex-direction:column;
  background:var(--surf-1);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-right:3px solid rgba(255,255,255,0.13);
  box-shadow:var(--shadow-lg);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.P::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--specular);
  border-radius:0;
}
.P.hide{transform:translateX(-460px)}
.P.resizing{transition:none}
.panel-cols{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.panel-results{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.col-resize{display:none}
.panel-resize{display:none}

.P-tog{
  position:absolute;right:-30px;top:18px;width:30px;height:38px;
  background:var(--surf-1);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--line);border-left:none;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--txt-3);font-size:13px;z-index:5;
  box-shadow:var(--shadow-sm);
}
.P-tog:hover{color:var(--txt-1);background:var(--surf-hi)}

/* Header — branded wordmark */
.P-hdr{padding:20px 20px 10px;position:relative}
.P-hdr h1{
  font-size:19px;font-weight:700;color:var(--txt-1);
  letter-spacing:-0.01em;
  display:flex;align-items:baseline;gap:8px;
  white-space:nowrap;
}
.hdr-main{
  background:linear-gradient(135deg,#f4f6fb 0%,#c9d1de 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hdr-sep{color:var(--txt-4);font-weight:300;opacity:.5}
.hdr-loc{
  color:var(--accent);font-weight:700;
  letter-spacing:-0.005em;
  font-size:19px;
}
.P-hdr p{font-size:12px;color:var(--txt-3);line-height:1.5;margin-top:4px}

/* =========================================================
   Collapsed rail
   ========================================================= */
.rail{
  position:absolute;top:0;left:0;width:54px;height:100vh;z-index:999;
  background:var(--surf-1);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
  padding:16px 0;gap:14px;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.rail.show{opacity:1;pointer-events:auto}
.rail-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--surf-2);border:1px solid var(--line-strong);
  color:var(--txt-2);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.rail-btn:hover{background:var(--surf-hi);color:var(--txt-1)}
.rail-stats{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%;padding:0 6px}
.rail-stats .rs{width:100%;padding:6px 0;text-align:center;border-radius:var(--r-sm);background:var(--surf-2)}
.rail-stats .rs .n{font-size:14px;font-weight:700;line-height:1;letter-spacing:-.01em}
.rail-stats .rs .l{font-size:9px;color:var(--txt-3);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
.rail-active{margin-top:6px;font-size:10px;color:var(--accent);text-align:center;padding:0 4px;line-height:1.3}

/* =========================================================
   Search bar — hero treatment
   ========================================================= */
.SB{margin:6px 16px 10px;position:relative}
.SB input{
  width:100%;padding:13px 36px 13px 14px;
  font-family:inherit;font-size:14px;font-weight:500;
  background:var(--surf-2);
  border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--txt-1);outline:none;
  transition:border-color .15s,box-shadow .2s,background .15s;
}
.SB input::placeholder{color:var(--txt-3);font-weight:400}
.SB input:focus{
  border-color:rgba(136,192,208,0.4);
  background:rgba(22,28,44,0.85);
  box-shadow:0 0 0 4px rgba(136,192,208,0.08),var(--glow-cool);
}
.si-clr{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:var(--r-pill);
  border:none;background:rgba(255,255,255,0.06);color:var(--txt-3);
  cursor:pointer;font-size:14px;line-height:1;
  display:none;align-items:center;justify-content:center;
}
.si-clr.show{display:flex}
.si-clr:hover{background:rgba(248,81,73,0.18);color:var(--sev-4)}
.DD{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--surf-3);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  max-height:260px;overflow:auto;display:none;z-index:10;
  box-shadow:var(--shadow-lg);
}
.DD.show{display:block}
.DD button{
  display:block;width:100%;padding:9px 14px;
  border:none;background:none;color:var(--txt-2);
  font-family:inherit;font-size:13px;text-align:left;cursor:pointer;
  border-bottom:1px solid var(--line);
}
.DD button:last-child{border-bottom:none}
.DD button:hover,.DD button.kbd{background:var(--surf-hi);color:var(--txt-1)}
.DD .ct{color:var(--txt-3);font-size:11px;float:right;font-weight:500}
/* Inline note shown when the typed query has zero autocomplete
   matches. Makes it clear that the absence of matches means "no
   reports filed at matching addresses" rather than "search broke".
   Pairs with the geo button below to point to the next step. */
.DD .dd-note{
  padding:10px 14px;font-size:12px;line-height:1.55;
  color:var(--txt-3);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.18);
}
.DD .dd-note strong{color:var(--txt-2);font-weight:600}
/* Geocoder option. Two-line layout: bold title + descriptive
   subtitle, with a chevron on the right. When it's the only
   actionable option (no autocomplete matches), it gets an
   accented background (.dd-geo-primary) so the user's eye lands
   on it immediately. */
.DD .dd-geo{
  display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line-strong);
  background:rgba(136,192,208,0.06);
  color:var(--txt-2);
  padding:11px 14px;
}
.DD .dd-geo.dd-geo-primary{
  background:rgba(136,192,208,0.14);
  border-top-color:rgba(136,192,208,0.30);
}
.DD .dd-geo:hover,.DD .dd-geo.kbd,
.DD .dd-geo-primary:hover,.DD .dd-geo-primary.kbd{
  background:rgba(136,192,208,0.22);color:var(--txt-1);
}
.DD .dd-geo strong{color:var(--txt-1);font-weight:600;font-size:13px}
.dd-geo-icon{color:var(--accent);font-size:16px;flex-shrink:0;line-height:1}
.dd-geo-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dd-geo-sub{font-size:11.5px;color:var(--txt-3);line-height:1.4}
.dd-geo-sub em{font-style:normal;color:var(--txt-2)}
.dd-geo-chev{color:var(--accent);opacity:0.7;flex-shrink:0;font-size:14px}
.DD .dd-geo:hover .dd-geo-chev{opacity:1}
.DD .dd-status{
  padding:11px 14px;font-size:12.5px;line-height:1.5;
  color:var(--txt-3);
}
.DD .dd-loading{color:var(--txt-2)}
.DD .dd-loading::before{
  content:'';display:inline-block;width:10px;height:10px;
  margin-right:8px;vertical-align:-1px;
  border:2px solid var(--accent);border-right-color:transparent;
  border-radius:50%;
  animation:dd-spin 0.8s linear infinite;
}
.DD .dd-error{color:var(--sev-3)}
@keyframes dd-spin{to{transform:rotate(360deg)}}

/* =========================================================
   Block Report card — primary entry point for the feature
   ========================================================= */
/* Always visible. The full pitch (eyebrow, title, desc, samples,
   divider, search) shows at the homepage baseline. Once the user
   has searched or filtered, JS adds .collapsed which hides every
   inner section except the search bar — same border, same width,
   so the affordance persists at the top of the panel and the
   user can search a new address at any time. */
.hero{
  display:block;
  /* Right margin is 21 (vs left 16) so the BlockReport card's
     right edge aligns with the Results column's card content
     right edge (which sits 16 + 5 scrollbar-gutter = 21 from
     the panel's inner right edge). The 5px asymmetry isn't
     visible at glance but keeps the right edges of BlockReport,
     stat-row tiles, and report cards on the same vertical line. */
  margin:6px 21px 12px 16px;
  padding:14px 14px 12px;
  background:linear-gradient(135deg,rgba(136,192,208,0.12) 0%,rgba(136,192,208,0.04) 60%,rgba(136,192,208,0.02) 100%);
  border:3px solid rgba(136,192,208,0.40);
  border-radius:var(--r-md);
  position:relative;
}
/* Collapsed state — only the search input survives. Padding
   tightens so the collapsed card doesn't carry empty space. */
.hero.collapsed{padding:8px 8px 8px}
.hero.collapsed .hero-eyebrow,
.hero.collapsed .hero-title,
.hero.collapsed .hero-desc,
.hero.collapsed .hero-samples,
.hero.collapsed .hero-or-label{display:none}
.hero.collapsed .SB{margin:0}
.hero-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px;
}
.hero-title{
  font-size:16px;font-weight:700;color:var(--txt-1);
  letter-spacing:-0.005em;line-height:1.25;margin-bottom:5px;
}
.hero-desc{
  font-size:12.5px;color:var(--txt-2);line-height:1.55;
  margin-bottom:10px;
}
.hero-samples{
  display:flex;flex-direction:column;gap:5px;
  margin-bottom:11px;
}
.hero-samples-row{display:flex;gap:6px}
.hero-samples-row .hero-sample{flex:1;min-width:0}
/* Section label shared between "Try a sample —" and the new
   "Or type any address —" so the two paths read as parallel
   options under matching headers. */
.hero-samples-label{
  display:block;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:3px;
}
.hero-or-label{margin-top:2px;margin-bottom:5px}
.hero-sample{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:7px 11px;
  background:rgba(0,0,0,0.22);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--txt-2);
  font:inherit;text-align:left;cursor:pointer;
  transition:background .12s,border-color .12s,transform .06s;
}
.hero-sample:hover{
  background:rgba(136,192,208,0.10);
  border-color:rgba(136,192,208,0.35);
  color:var(--txt-1);
}
.hero-sample:active{transform:translateY(1px)}
.hero-sample-text{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.hero-sample-text strong{
  font-size:12.5px;font-weight:600;color:var(--txt-1);
}
.hero-sample-sub{
  font-size:11px;color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}
.hero-sample-arrow{
  color:var(--accent);font-size:14px;flex-shrink:0;opacity:0.6;
  transition:opacity .12s,transform .12s;
}
.hero-sample:hover .hero-sample-arrow{opacity:1;transform:translateX(2px)}
/* Search bar inside the hero card — strip the outer margins
   that .SB carries when standalone since the card provides its
   own padding. */
.hero .SB{margin:0;position:relative}
/* When collapsed, the input strips its outer chrome so the card
   border carries the visual frame. :not(:focus) preserves the
   bright focus state — when the user clicks back in, the input
   lights up with the normal focus ring instead of vanishing. */
.hero.collapsed .SB input:not(:focus){
  background:transparent;
  border-color:transparent;
}

/* =========================================================
   Active filter pills row
   ========================================================= */
.active-bar{
  display:none;align-items:flex-start;justify-content:space-between;gap:8px;
  margin:0 16px 10px;padding:8px 8px 8px 12px;
  background:rgba(136,192,208,0.08);
  border:1px solid rgba(136,192,208,0.22);border-radius:var(--r-md);
  min-height:36px;
}
/* Hidden by default; only shown once at least one filter is
   active — when there's nothing to clear there's nothing to
   display, and the "Showing N" count in the status strip
   already conveys the unfiltered state. */
.active-bar.has-filters{display:flex;align-items:center}
.ab-label{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);flex-shrink:0;
  user-select:none;
}
.pills{flex:1;display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:22px}
.pills-empty{font-size:12px;color:var(--txt-4);padding:3px 0;letter-spacing:.01em}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 4px 3px 10px;
  background:rgba(136,192,208,0.13);
  border:1px solid rgba(136,192,208,0.32);
  border-radius:var(--r-pill);
  font-size:11px;font-weight:500;color:var(--txt-1);line-height:1.4;
}
.pill .pl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.pill .px{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;border:none;
  background:transparent;color:var(--txt-3);
  cursor:pointer;font-size:14px;line-height:1;padding:0;
}
.pill .px:hover{background:rgba(248,81,73,0.25);color:var(--sev-4)}
/* Auto badge — shown on pills that were engaged as a side-
   effect of another filter (e.g. Hotspot Locations auto-
   engages when you pick a category). Subdued, uppercase,
   sits between the label and the × so the user can tell at a
   glance that the pill wasn't a deliberate choice. */
.pill .pl-auto{
  font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--txt-4);
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:1px 6px;
  margin-left:4px;
}
.pill.pill-auto{border-style:dashed}
.clear-btn{
  flex-shrink:0;padding:5px 10px;font-family:inherit;font-size:11px;font-weight:500;
  background:transparent;border:1px solid var(--line-strong);color:var(--txt-3);
  border-radius:var(--r-sm);cursor:pointer;align-self:center;
}
.clear-btn:hover:not(:disabled){
  background:rgba(248,81,73,0.1);border-color:rgba(248,81,73,0.35);color:var(--sev-4);
}
.clear-btn:disabled{opacity:.4;cursor:default}

/* =========================================================
   Stat tiles — hero numbers
   ========================================================= */
/* =========================================================
   Status strip — total count header + Hotspot toggle
   ========================================================= */
/* Parent-count tile lives inside .sev-row now so the parent
   stat and its severity breakdown read as one row that adds
   up. Styled neutral so it stands apart from the four colored
   severity tiles to its right. */

/* Featured filter row — the single Hotspot Locations toggle.
   Full-width since it's the only featured filter now. Zero
   bottom margin lets the section header below sit as tight to
   the button as possible; the text's own line-height leading
   gives the remaining visual breathing room. */
.featured-filters{
  display:block;margin:0;
}
.hs-btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  padding:10px 14px;min-height:42px;
  border-radius:var(--r-md);
  font-family:inherit;text-align:center;
  cursor:pointer;outline:none;
  background:rgba(219,109,40,0.07);
  border:1px solid rgba(219,109,40,0.24);
  transition:transform .12s ease,background .15s,border-color .15s,box-shadow .15s;
}
.hs-btn::before{display:none}
.hs-btn:hover,.hs-btn:focus-visible{
  transform:translateY(-1px);
  background:rgba(219,109,40,0.13);
  border-color:rgba(219,109,40,0.45);
}
.hs-btn:focus-visible{box-shadow:0 0 0 2px rgba(136,192,208,0.5)}
.hs-btn.on{
  background:rgba(219,109,40,0.20);
  box-shadow:inset 0 0 0 1px rgba(248,81,73,0.5);
  border-color:rgba(248,81,73,0.5);
}
.hs-btn-label{
  font-size:13px;font-weight:700;color:var(--accent-warm);
  line-height:1.2;letter-spacing:-.005em;
}
.hs-btn.on .hs-btn-label{color:#fff}


/* =========================================================
   Severity breakdown row — secondary, no border
   ========================================================= */
/* Same .st elements as the old stat-tile grid, just restyled
   smaller / flatter since they're context, not anchors. The
   click-to-filter affordance stays via the existing handler.

   Each tile is a tinted card matching its severity color — much
   stronger visual hierarchy than the old transparent treatment,
   and the proportion bar at the bottom (driven by --pct, set in
   JS) gives an at-a-glance view of each tier's share of the
   visible total. */
.sev-row{
  display:grid;
  /* parent | "=" | four severity tiles. Parent is 1.7fr so the
     "REPORTS SHOWING" label fits on one line; the four siblings
     share the remaining width equally. The narrow "=" column
     carries an actual equals sign so the math relationship
     reads at a glance. Right padding is 21 (vs left 16) so the
     Low tile's right edge lines up with the report cards on
     the right (which lose 5px to the scrollbar gutter). */
  grid-template-columns:1.7fr auto repeat(4,1fr);
  gap:8px;padding:0 21px 14px 16px;align-items:stretch;
}
.sev-row .ss-total{
  padding:7px 9px 9px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-start;
  text-align:left;cursor:default;min-width:0;
}
/* Parent number matches severity-tile number exactly (size,
   weight, line-height, padding) so all five numbers sit on the
   same baseline and all five labels sit on the same baseline.
   The parent is differentiated by being wider (1.7fr column),
   neutral-tinted, and having the "=" next to it. */
.sev-row .ss-n{
  font-size:15px;font-weight:700;color:var(--txt-1);
  line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.sev-row .ss-l{
  font-size:9px;color:var(--txt-3);margin-top:3px;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;
  line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sev-row .sev-eq{
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;color:var(--txt-4);
  padding:0 1px;user-select:none;
  /* Vertically center the "=" against the row of numbers
     (not the row of labels). Numbers occupy roughly the top
     60% of each tile, so nudge the equals sign up a touch. */
  align-self:flex-start;margin-top:8px;
}
.sev-row .st{
  position:relative;text-align:left;min-width:0;
  padding:7px 9px 9px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  cursor:pointer;outline:none;overflow:hidden;
  transition:transform .12s ease,background .15s,border-color .15s,box-shadow .15s;
}
/* Per-severity tints — soft wash that still reads on dark bg. */
.sev-row .st[data-sev="4"]{background:rgba(248,81,73,0.07);border-color:rgba(248,81,73,0.24)}
.sev-row .st[data-sev="3"]{background:rgba(219,109,40,0.07);border-color:rgba(219,109,40,0.24)}
.sev-row .st[data-sev="2"]{background:rgba(227,179,65,0.07);border-color:rgba(227,179,65,0.24)}
.sev-row .st[data-sev="1"]{background:rgba(86,211,100,0.07);border-color:rgba(86,211,100,0.24)}
/* Hover/focus — lift and deepen the wash so the filter
   affordance reads. translateY is the smallest "this is a
   button" cue that doesn't shift layout. */
.sev-row .st:hover{transform:translateY(-1px)}
.sev-row .st[data-sev="4"]:hover,.sev-row .st[data-sev="4"]:focus-visible{background:rgba(248,81,73,0.13);border-color:rgba(248,81,73,0.45)}
.sev-row .st[data-sev="3"]:hover,.sev-row .st[data-sev="3"]:focus-visible{background:rgba(219,109,40,0.13);border-color:rgba(219,109,40,0.45)}
.sev-row .st[data-sev="2"]:hover,.sev-row .st[data-sev="2"]:focus-visible{background:rgba(227,179,65,0.13);border-color:rgba(227,179,65,0.45)}
.sev-row .st[data-sev="1"]:hover,.sev-row .st[data-sev="1"]:focus-visible{background:rgba(86,211,100,0.13);border-color:rgba(86,211,100,0.45)}
.sev-row .st:focus-visible{box-shadow:0 0 0 2px rgba(136,192,208,0.5)}
/* Active filter state — solid saturated edge so it reads as
   "this filter is engaged" from across the sidebar. */
.sev-row .st.on{box-shadow:0 0 0 1px var(--sc,rgba(136,192,208,0.5)) inset,0 0 0 1px var(--sc,rgba(136,192,208,0.5))}
.sev-row .st[data-sev="4"].on{--sc:rgba(248,81,73,0.7);background:rgba(248,81,73,0.16)}
.sev-row .st[data-sev="3"].on{--sc:rgba(219,109,40,0.7);background:rgba(219,109,40,0.16)}
.sev-row .st[data-sev="2"].on{--sc:rgba(227,179,65,0.7);background:rgba(227,179,65,0.16)}
.sev-row .st[data-sev="1"].on{--sc:rgba(86,211,100,0.7);background:rgba(86,211,100,0.16)}
/* Number — large enough to scan, tabular for visual alignment
   across the four tiles. */
.sev-row .st .n{
  font-size:15px;font-weight:700;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.sev-row .st[data-sev="4"] .n{color:var(--sev-4)}
.sev-row .st[data-sev="3"] .n{color:var(--sev-3)}
.sev-row .st[data-sev="2"] .n{color:var(--sev-2)}
.sev-row .st[data-sev="1"] .n{color:var(--sev-1)}
/* When the count is zero the severity color stops being
   meaningful (there's nothing critical to attend to) — fade
   the digit AND background so the eye isn't drawn to an
   empty pile. */
.sev-row .st .n.is-zero{color:var(--txt-4)!important}
.sev-row .st:has(.n.is-zero){background:rgba(255,255,255,0.015);border-color:var(--line)}
.sev-row .st .l{
  font-size:9.5px;color:var(--txt-3);margin-top:3px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.sev-row .st .n.is-zero + .l,
.sev-row .st .n.is-zero ~ .l{color:var(--txt-4)}

/* =========================================================
   Filters card (Card 3) — all filter chips grouped under one
   bordered frame at narrow widths. Wide-screen layout (>=1400px)
   overrides the outer border + margin so it integrates into the
   side-by-side grid with the results column.
   ========================================================= */
.FS{
  padding:12px 14px 14px;
  margin:0 16px 12px;
  background:var(--surf-2);
  border:3px solid rgba(255,255,255,0.13);
  border-radius:var(--r-md);
  overflow-y:auto;flex:1;min-height:0;
}
.FS::-webkit-scrollbar{width:5px}
.FS::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
.FS::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.16)}

/* Section headers — visibly larger than .fb chip buttons (chips
   are 12px, so .sec at 16px). Each section also gets a hairline
   top divider + generous top margin so the eye actually registers
   "here's a new region" instead of scanning past another label.
   First section in the panel has no top divider since the
   featured filter above already breaks the visual rhythm. */
.sec{
  font-size:16px;color:var(--txt-1);font-weight:700;
  letter-spacing:-.015em;
  margin:22px 0 10px;padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.FS > .sec:first-of-type{
  margin-top:0;padding-top:0;border-top:none;
}
.sec-help{
  display:inline-flex;width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,0.06);border:1px solid var(--line-strong);
  font-size:10px;align-items:center;justify-content:center;
  cursor:help;color:var(--txt-3);text-transform:none;font-weight:600;
}
.sec-help:hover{background:rgba(136,192,208,0.18);color:var(--accent);border-color:rgba(136,192,208,0.35)}
/* Sub-group label — much quieter than the section header so the
   three-tier hierarchy (section > sub-group > chip) actually
   reads. 9.5px uppercase letter-spaced caps in --txt-4 (most-
   muted text color) makes these feel like dividers, not titles. */
.grp-label{
  font-size:9.5px;color:var(--txt-4);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  margin:12px 0 5px;padding-left:2px;
}
/* 2-column grid for filter chips. Every chip is either half-row
   (one column) or full-row (both columns). An odd-count container
   spans its last child across both columns so a chip never sits
   alone with empty space next to it. Single-chip containers
   (HVAC, Mold, Pest, Vacant in their own .FB row) span full-width
   via the same rule — the only child is also the last child of
   an odd-count set. */
.FB{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;margin-bottom:5px;
}
.FB > .fb:last-child:nth-child(odd){
  grid-column:span 2;
}
/* FB-stack: every chip in this container spans both columns.
   Used when half-width would compromise readability for the
   labels in that section (Landlord & Building, Refinements). */
.FB.FB-stack > .fb{
  grid-column:span 2;
}

/* Filter chip — centered label with symmetric padding. Chips
   that carry the ▾ sub-filter indicator get symmetric 26px L/R
   so the label still reads as centered despite the indicator
   sitting in the right padding zone. */
.fb{
  position:relative;
  padding:7px 13px;
  font-family:inherit;font-size:12.5px;font-weight:500;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:transparent;color:var(--txt-2);
  cursor:pointer;outline:none;
  text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s,background .15s,color .15s,box-shadow .2s,transform .12s;
}
.fb[data-has-subs]{padding-left:26px;padding-right:26px}
.fb:hover{
  border-color:rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.04);
  color:var(--txt-1);
  transform:translateY(-1px);
}
.fb:focus-visible{box-shadow:0 0 0 2px rgba(136,192,208,0.5)}
.fb.on{
  color:#fff;border-color:var(--c,#88c0d0);
  background:color-mix(in srgb,var(--c,#88c0d0) 22%,transparent);
  box-shadow:inset 0 0 0 1px var(--c,#88c0d0),0 0 6px color-mix(in srgb,var(--c,#88c0d0) 20%,transparent);
}
/* Sub-filter indicator — small ▾ glyph anchored to the right
   edge of the chip (not inline next to the label) so the label
   stays left-aligned and the indicator reads as a separate
   affordance. Flips to ▴ when the parent is active (subs shown). */
.fb[data-has-subs]::after{
  content:'▾';
  position:absolute;
  right:10px;top:50%;
  transform:translateY(-50%);
  font-size:9px;
  opacity:0.5;
  transition:transform .2s,opacity .15s;
}
.fb[data-has-subs]:hover::after{opacity:0.85}
.fb[data-has-subs].on::after{
  transform:translateY(-50%) rotate(180deg);
  opacity:0.95;
}

/* Sub-filter chip containers (HVAC sub-types, pest sub-types,
   mold sub-types, vacant sub-types). Same half-row / full-row
   grid pattern as the main .FB containers so the layout reads
   consistently. Visual subcategory cues:
   - 14px left margin + 10px padding-left + 2px colored left rail
     anchors them visually as "children of the parent chip above"
   - Smaller font + tighter padding distinguishes them from main
     chips without losing legibility */
.sub-btns{
  display:none;
  margin:0 0 6px 14px;
  padding-left:10px;
  border-left:2px solid var(--sub-tint,rgba(240,136,62,0.3));
}
.sub-btns.show{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.sub-btns > .fb:last-child:nth-child(odd){grid-column:span 2}
.sub-btns .fb{
  font-size:11px;padding:5px 10px;
  /* Match the main chip text-overflow behavior but at sub scale */
}
/* Back-compat: legacy class still works for the pest container */
.pest-sub{
  display:none;
  margin:0 0 6px 14px;
  padding-left:10px;
  border-left:2px solid rgba(240,136,62,0.3);
}
.pest-sub.show{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.pest-sub > .fb:last-child:nth-child(odd){grid-column:span 2}
.pest-sub .fb{font-size:11px;padding:5px 10px}

/* Date section */
.sec-toggle{cursor:pointer;user-select:none;justify-content:flex-start}
.sec-toggle:hover{color:var(--txt-2)}
.sec-toggle .sec-state{margin-left:auto;font-size:10px;color:var(--accent);text-transform:none;letter-spacing:0;font-weight:500}
.sec-toggle .sec-arrow{font-size:10px;color:var(--txt-3);transition:transform .2s;margin-left:6px}
.sec-toggle.open .sec-arrow{transform:rotate(180deg)}
.date-body{display:none;padding-left:2px}
.date-body.open{display:block}
.date-presets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.date-presets .pre{
  padding:5px 11px;font-family:inherit;font-size:11px;font-weight:500;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:transparent;color:var(--txt-3);cursor:pointer;
}
.date-presets .pre:hover{border-color:var(--line-strong);color:var(--txt-2)}
.date-presets .pre.on{background:rgba(136,192,208,0.13);border-color:rgba(136,192,208,0.4);color:var(--accent)}

.yr-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.mo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:6px}
.mo{
  padding:6px 0;font-family:inherit;font-size:11px;font-weight:600;
  text-align:center;border-radius:var(--r-sm);
  border:1px solid var(--line);background:transparent;color:var(--txt-3);
  cursor:pointer;outline:none;letter-spacing:.02em;
  transition:all .15s;
}
.mo:hover{background:var(--surf-2);color:var(--txt-2)}
.mo:focus-visible{box-shadow:0 0 0 2px rgba(136,192,208,0.5)}
.mo.on{background:rgba(136,192,208,0.13);border-color:rgba(136,192,208,0.35);color:var(--accent)}

/* =========================================================
   Results header + list
   ========================================================= */
.results-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 6px;border-top:1px solid var(--line);
}
.r-hdr-text{
  font-size:11px;color:var(--txt-3);font-weight:500;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.02em;
}
.r-hdr-btn{
  padding:5px 11px;font-family:inherit;font-size:11px;font-weight:500;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:transparent;color:var(--txt-3);cursor:pointer;
}
.r-hdr-btn:hover{background:var(--surf-2);color:var(--txt-2)}
.r-hdr-btn.on{background:rgba(136,192,208,0.13);border-color:rgba(136,192,208,0.4);color:var(--accent)}

.R{
  flex:1;overflow-y:auto;padding:12px 16px 18px;min-height:140px;
  /* scrollbar-gutter:stable keeps the visible content width
     constant whether or not the scrollbar is actually showing,
     so the cards' right edge stays at the same X position the
     stats row's tiles and BlockReport card align to. */
  scrollbar-gutter:stable;
}
.R::-webkit-scrollbar{width:5px}
.R::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
.R::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.16)}
.R-hdr{font-size:11px;color:var(--txt-3);margin:6px 0 8px;font-weight:500;display:flex;align-items:center;gap:8px}

/* Empty state */
.empty{padding:28px 12px;text-align:center;color:var(--txt-3);font-size:13px;line-height:1.6}
.empty .e-icon{font-size:28px;opacity:.45;margin-bottom:8px}
.empty .e-hint{font-size:11px;color:var(--txt-4);margin-top:6px}
.empty button{
  margin-top:12px;padding:7px 14px;font-family:inherit;font-size:11px;font-weight:500;
  background:rgba(136,192,208,0.13);border:1px solid rgba(136,192,208,0.35);
  color:var(--accent);border-radius:var(--r-sm);cursor:pointer;
}
.empty button:hover{background:rgba(136,192,208,0.22)}

/* Hotspot card.
   Replaced the leading fire emoji with a 3px orange accent rail on
   the left edge — same "hot/important" semantic, native to the dark
   theme, no character clutter in the title. Card content sits flush
   with the rail. */
.cl-card{
  background:linear-gradient(135deg,rgba(219,109,40,0.06),rgba(248,81,73,0.03));
  border:1px solid rgba(219,109,40,0.18);
  border-left:3px solid var(--accent-warm);
  border-radius:var(--r-md);
  padding:11px 13px 11px 13px;margin-bottom:7px;cursor:pointer;
  position:relative;transition:border-color .15s,background .15s,box-shadow .2s,transform .15s;
}
.cl-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--specular);border-radius:inherit;opacity:.4;
}
.cl-card:hover{
  border-color:rgba(219,109,40,0.4);
  border-left-color:var(--accent-warm);
  background:linear-gradient(135deg,rgba(219,109,40,0.1),rgba(248,81,73,0.05));
  box-shadow:0 0 0 1px rgba(248,81,73,0.15),var(--shadow-md);
}
.cl-card .cn{font-size:14px;font-weight:600;color:var(--accent-warm);padding-right:24px;letter-spacing:-.005em;line-height:1.25}
/* Scatter zone variant — purple/magenta to mirror the scatter map palette */
.cl-card-scatter{background:linear-gradient(135deg,rgba(168,85,247,0.07),rgba(236,72,153,0.03));border-color:rgba(168,85,247,0.22);border-left-color:#c4b5fd}
.cl-card-scatter:hover{background:linear-gradient(135deg,rgba(168,85,247,0.12),rgba(236,72,153,0.05));border-color:rgba(168,85,247,0.45);border-left-color:#c4b5fd;box-shadow:0 0 0 1px rgba(236,72,153,0.18),var(--shadow-md)}
.cl-card-scatter .cn{color:#c4b5fd}
.cl-card .ca{font-size:12px;color:var(--txt-2);margin-top:2px}
.cl-card .cs{font-size:11.5px;color:var(--txt-3);margin-top:7px;font-variant-numeric:tabular-nums;letter-spacing:.005em}
/* Empty-state icon — colored disc instead of the fire emoji */
.empty .e-icon.e-icon-hs{width:14px;height:14px;border-radius:50%;background:var(--accent-warm);box-shadow:0 0 8px rgba(240,136,62,0.45);margin:0 auto 8px;font-size:0;opacity:1}
.cl-card .copy{
  position:absolute;top:8px;right:8px;width:24px;height:24px;
  border-radius:var(--r-sm);border:none;
  background:rgba(255,255,255,0.05);color:var(--txt-3);
  cursor:pointer;font-size:12px;opacity:0;
  transition:opacity .15s,background .15s;
  display:flex;align-items:center;justify-content:center;
}
.cl-card:hover .copy{opacity:1}
.cl-card .copy:hover{background:rgba(136,192,208,0.18);color:var(--accent)}

/* Address group */
.addr-group{margin-bottom:8px;border-radius:var(--r-md);overflow:hidden}
/* Address-group wrapper. Neutral gray outline — severity is now
   communicated by the colored dot at the start of the header
   row, not by the box outline. Keeps a row of groups visually
   calm while still surfacing severity at a glance via the dots. */
.addr-group{
  margin-bottom:8px;
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .15s;
}
.addr-group:not(.open):hover,.addr-group:hover{
  border-color:var(--line-strong);
}

.ag-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;cursor:pointer;
  transition:background .15s;
}
.ag-header:hover{background:rgba(255,255,255,0.03)}
.addr-group.open .ag-header{
  border-bottom:1px solid var(--line);
}
/* Severity dot — fills the role the box outline used to carry.
   Color comes from --ag-sc (max severity at the address). */
.ag-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--ag-sc,var(--txt-4));
  flex-shrink:0;
  box-shadow:0 0 6px color-mix(in srgb,var(--ag-sc,transparent) 35%,transparent);
}
.ag-addr{
  font-size:13px;font-weight:600;color:var(--txt-1);letter-spacing:-.005em;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ag-count{
  font-size:11px;color:var(--txt-3);font-variant-numeric:tabular-nums;flex-shrink:0;
}
/* Chevron always present — single-report groups start .open so
   the glyph displays rotated (▴). Users can still toggle a
   single-report group closed if they want a cleaner scan. */
.ag-arrow{
  font-size:11px;color:var(--txt-3);flex-shrink:0;
  width:11px;text-align:center;
  transition:transform .2s;
}
.addr-group.open .ag-arrow{transform:rotate(180deg)}
.ag-body{display:none}
.addr-group.open .ag-body{display:block}

/* Cards inside the group — no individual outline (the parent
   carries it). Internal bottom borders divide stacked cards.
   Layout flipped: description (.ds) at the top as the main
   content, metadata row (.rc-meta) at the bottom with tags +
   date as small neutral metadata. */
.rc{
  background:transparent;
  border:none;border-bottom:1px solid var(--line);
  border-radius:0;padding:11px 13px;
  cursor:pointer;transition:background .15s;
}
.rc:last-child{border-bottom:none}
.rc:hover{background:rgba(40,48,72,0.30)}
.rc.zoomed{background:rgba(136,192,208,0.10);box-shadow:inset 0 0 0 1px rgba(136,192,208,0.25)}
.rc .ds{
  font-size:13px;color:var(--txt-2);line-height:1.6;
  max-height:0;overflow:hidden;transition:max-height .25s;
}
.rc.open .ds{max-height:1400px;margin-bottom:8px}
/* Metadata row at the bottom of each card: 'Tags: X Y' on the
   left, date on the right. Divider line above only when the
   description is shown — keeps collapsed cards compact. */
.rc-meta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.rc.open .rc-meta{padding-top:8px;border-top:1px solid var(--line)}
/* Tag strip — horizontally scrolls instead of wrapping so the
   date stays pinned to the right on one line. */
.rc .tg-row{
  display:flex;flex-wrap:nowrap;align-items:center;gap:5px;
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.rc .tg-row::-webkit-scrollbar{height:4px}
.rc .tg-row::-webkit-scrollbar-track{background:transparent}
.rc .tg-row::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px}
.rc .tg-row > *{flex-shrink:0}
.rc .tg-label{
  font-size:10px;color:var(--txt-4);font-weight:500;letter-spacing:.02em;
  margin-right:2px;
}
.rc .dt{
  font-size:10.5px;color:var(--txt-4);flex-shrink:0;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  white-space:nowrap;
}
/* Tag chips — outlined, neutral. Same treatment for severity
   and category tags so the row reads as one consistent strip.
   Severity color isn't repeated here because the address-group
   dot already carries it; doubling up in the Tags row added
   visual noise without adding signal. */
.rc .tg{
  display:inline-flex;font-size:10px;padding:1.5px 7px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:transparent;
  color:var(--txt-3);font-weight:500;letter-spacing:.005em;
}

.load-more{
  display:block;width:100%;padding:9px 12px;margin:8px 0;
  font-family:inherit;font-size:12px;font-weight:500;
  background:var(--surf-2);border:1px solid var(--line);
  color:var(--txt-2);border-radius:var(--r-sm);cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s;
}
.load-more:hover{background:var(--surf-hi);border-color:var(--line-strong)}

/* =========================================================
   Map controls
   ========================================================= */
.mode-bar{
  position:absolute;top:14px;right:14px;z-index:1000;
  display:flex;align-items:center;gap:3px;
  background:var(--surf-1);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:3px 4px 3px 11px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,0.04);
}
/* Visually demoted compared to .mb buttons — smaller, dimmer,
   no border/background so the eye reads it as a section label
   instead of a fourth tab. Trailing colon reinforces the
   grammatical relationship to the buttons that follow. */
.mode-bar-label{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-4);margin-right:4px;flex-shrink:0;
  user-select:none;
}
/* Vertical line separating the mode group (Heatmap/Scatter/
   Markers) from the viewport-filter toggle so the eye reads
   them as two unrelated controls that just happen to share a
   row. */
.mode-bar-divider{
  display:inline-block;width:1px;height:18px;
  background:var(--line-strong);
  margin:0 5px;
  flex-shrink:0;
}
.mb{
  padding:7px 13px;font-family:inherit;font-size:12px;font-weight:500;
  background:transparent;border:1px solid transparent;
  color:var(--txt-3);cursor:pointer;border-radius:var(--r-sm);outline:none;
  transition:color .15s,background .15s,border-color .15s;
}
.mb:hover{color:var(--txt-1);background:var(--surf-hi)}
.mb:focus-visible{box-shadow:0 0 0 2px rgba(136,192,208,0.5)}
.mb.on{background:rgba(136,192,208,0.18);border-color:rgba(136,192,208,0.35);color:var(--accent)}
.mb-vp{margin-left:6px}

.legend{
  position:absolute;bottom:16px;right:14px;z-index:1000;
  background:var(--surf-1);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line);border-radius:var(--r-md);
  font-size:11px;color:var(--txt-2);
  overflow:hidden;box-shadow:var(--shadow-md);
}

/* Context box — top-right, sits under the mode bar */
.ctx-box{
  position:absolute;top:60px;right:14px;z-index:1000;
  width:340px;max-width:calc(100vw - 28px);
  background:var(--surf-1);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;
  transition:width .2s;
}
.cb-hdr{
  padding:9px 13px;font-weight:600;color:var(--txt-3);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  user-select:none;
}
.cb-hdr:hover{color:var(--txt-2)}
.cb-hdr .cb-arrow{margin-left:auto;font-size:9px;transition:transform .2s}
.ctx-box.open .cb-arrow{transform:rotate(180deg)}
.cb-body{
  display:none;padding:0 14px 13px;
  font-size:13px;color:var(--txt-2);line-height:1.5;
}
.ctx-box.open .cb-body{display:block}
.cb-body strong{color:var(--txt-1);font-weight:600}
.cb-body .cb-note{
  margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line);
  font-size:11px;color:var(--txt-3);line-height:1.5;
}
.cb-body .cb-tip{
  margin-top:8px;font-size:11px;color:var(--txt-4);
}
.ctx-box:not(.open){width:auto}
.legend .lg-hdr{
  padding:8px 13px;font-weight:600;color:var(--txt-3);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
}
.legend .lg-hdr:hover{color:var(--txt-2)}
.legend .lg-arrow{transition:transform .2s;font-size:9px}
.legend.open .lg-arrow{transform:rotate(180deg)}
.legend .lg-body{display:none;padding:4px 13px 11px}
.legend.open .lg-body{display:block}
.legend .lg-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px}
.legend .lg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,0.4) inset}
.legend .lg-sub{margin-top:7px;font-size:10px;color:var(--txt-4);line-height:1.4;max-width:200px}

.nearby-label{font-size:11px;color:var(--txt-4);padding:9px 0 5px;border-top:1px solid var(--line);margin-top:8px;font-style:italic}

/* =========================================================
   Right-click context menu + tooltip
   ========================================================= */
.ctx{
  position:absolute;z-index:2000;
  background:var(--surf-3);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:5px;display:none;min-width:200px;
  box-shadow:var(--shadow-lg);
}
.ctx.show{display:block}
.ctx button{
  display:block;width:100%;padding:8px 12px;
  border:none;background:none;color:var(--txt-2);
  font-family:inherit;font-size:12px;text-align:left;cursor:pointer;
  border-radius:var(--r-sm);
}
.ctx button:hover{background:var(--surf-hi);color:var(--txt-1)}

.tip{
  position:absolute;z-index:2000;
  background:var(--surf-3);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:9px 11px;display:none;
  font-size:11px;color:var(--txt-2);line-height:1.5;
  max-width:280px;box-shadow:var(--shadow-md);pointer-events:none;
}
.tip.show{display:block}

/* =========================================================
   Leaflet overrides
   ========================================================= */
.leaflet-container{background:var(--bg-deep)!important;font-family:inherit!important}
.marker-cluster-small{background:rgba(136,192,208,0.2)!important}
.marker-cluster-small div{background:rgba(136,192,208,0.55)!important;color:#fff!important;font-size:11px!important;font-weight:600!important;font-family:inherit!important}
.marker-cluster-medium{background:rgba(219,109,40,0.2)!important}
.marker-cluster-medium div{background:rgba(219,109,40,0.55)!important;color:#fff!important;font-size:11px!important;font-weight:600!important;font-family:inherit!important}
.marker-cluster-large{background:rgba(248,81,73,0.2)!important}
.marker-cluster-large div{background:rgba(248,81,73,0.55)!important;color:#fff!important;font-size:11px!important;font-weight:600!important;font-family:inherit!important}
.leaflet-popup-content-wrapper{
  background:var(--surf-3)!important;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  color:var(--txt-2)!important;
  border-radius:var(--r-md)!important;
  border:1px solid var(--line-strong)!important;
  box-shadow:var(--shadow-lg)!important;
}
.leaflet-popup-tip{background:var(--surf-3)!important}
.leaflet-popup-content{font-size:13px!important;line-height:1.6!important;margin:14px 16px!important;max-width:380px!important;font-family:inherit!important}
.lp-addr{font-size:15px;font-weight:700;color:var(--txt-1);margin-bottom:6px;letter-spacing:-.01em}
.lp-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.lp-sev{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-sm)}
.lp-date{font-size:11px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.lp-cats{font-size:11px;color:var(--txt-3);margin-bottom:6px}
.lp-desc{font-size:13px;color:var(--txt-2);line-height:1.6}

.leaflet-control-zoom a{
  background:var(--surf-1)!important;
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--line)!important;
  color:var(--txt-2)!important;
}
.leaflet-control-zoom a:hover{background:var(--surf-hi)!important;color:var(--txt-1)!important}

/* =========================================================
   Two-column wide-screen layout (>=1400px)
   ========================================================= */
@media (min-width:1400px){
  .P{width:var(--panel-w,500px)}
  .P.hide{transform:translateX(calc(-1 * var(--panel-w,500px)))}
  .panel-cols{display:grid;grid-template-columns:var(--col-left,250px) 6px 1fr;grid-template-rows:1fr;border-top:3px solid rgba(255,255,255,0.13)}
  /* At wide screens the FS sits in a grid cell next to the
     results column — drop the card border + margin so it
     integrates with the grid frame instead of floating. The
     right edge is replaced by a thicker divider that visually
     separates the FS zone from the col-resize gutter and the
     results zone beyond it. */
  .FS{
    grid-column:1;min-height:0;
    margin:0;
    border:none;border-right:3px solid rgba(255,255,255,0.13);
    border-radius:0;
    background:transparent;
    padding:12px 16px 14px;
  }
  .col-resize{
    grid-column:2;display:block;cursor:col-resize;
    background:transparent;
    border-right:3px solid rgba(255,255,255,0.13);
    transition:background .15s;position:relative;
  }
  .col-resize::after{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:2px;height:32px;background:var(--line-strong);border-radius:1px;
  }
  .col-resize:hover,.col-resize.dragging{background:rgba(136,192,208,0.15)}
  .panel-results{grid-column:3;min-height:0}
  .panel-resize{
    display:block;position:absolute;top:0;right:-3px;width:6px;height:100%;
    cursor:col-resize;z-index:1001;background:transparent;
  }
  .panel-resize:hover,.panel-resize.dragging{background:rgba(136,192,208,0.15)}
  body.col-dragging{cursor:col-resize!important;user-select:none}
  body.col-dragging *{cursor:col-resize!important;user-select:none!important}
}

/* =========================================================
   Block Report — address-anchored neighborhood readout
   ========================================================= */

/* CTA — appears at the top of the search-result panel when an
   address is selected. Pulse uses a two-layer shadow (a hard
   outer ring + a soft halo) and a brightening border so it's
   visible even out of the corner of the eye. Pauses on hover
   so the user can read it in peace before clicking. */
.br-cta{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:11px 14px;margin:4px 0 10px;
  background:linear-gradient(135deg,rgba(136,192,208,0.14),rgba(136,192,208,0.05));
  border:1px solid rgba(136,192,208,0.45);
  border-radius:var(--r-md);
  color:var(--txt-1);
  font:inherit;text-align:left;cursor:pointer;
  transition:background .15s,border-color .15s,transform .08s,box-shadow .15s;
  animation:br-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes br-cta-pulse{
  0%,100%{
    border-color:rgba(136,192,208,0.45);
    box-shadow:
      0 0 0 0 rgba(136,192,208,0.0),
      0 0 0 0 rgba(136,192,208,0.0);
    background:linear-gradient(135deg,rgba(136,192,208,0.14),rgba(136,192,208,0.05));
  }
  50%{
    border-color:rgba(136,192,208,1);
    box-shadow:
      0 0 0 4px rgba(136,192,208,0.32),
      0 0 22px 6px rgba(136,192,208,0.45);
    background:linear-gradient(135deg,rgba(136,192,208,0.26),rgba(136,192,208,0.10));
  }
}
.br-cta:hover{
  background:linear-gradient(135deg,rgba(136,192,208,0.28),rgba(136,192,208,0.10));
  border-color:rgba(136,192,208,0.85);
  animation:none;                              /* pause the pulse on hover */
  box-shadow:
    0 0 0 4px rgba(136,192,208,0.28),
    0 0 24px 4px rgba(136,192,208,0.35);
}
.br-cta:active{transform:translateY(1px)}
.br-cta-icon{font-size:18px;line-height:1;flex-shrink:0}
.br-cta-text{flex:1;min-width:0}
.br-cta-text strong{
  font-size:13.5px;font-weight:600;color:var(--txt-1);
  white-space:nowrap;
}
.br-cta-chevron{color:var(--accent);font-size:16px;flex-shrink:0;opacity:.85}
.br-cta:hover .br-cta-chevron{opacity:1}

/* Modal overlay */
.br-modal{
  position:fixed;inset:0;z-index:5000;
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 20px;
}
.br-modal.show{display:flex}
.br-backdrop{
  position:absolute;inset:0;
  background:rgba(4,6,12,0.78);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
}
.br-panel{
  position:relative;
  width:min(880px,100%);max-height:calc(100vh - 80px);
  background:var(--surf-1);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* Pulse on the "Open Block Report" CTA is great for catching the
   eye when the report is closed, but redundant (and distracting)
   while it's open. Suppress while the modal is showing. */
body:has(.br-modal.show) .br-cta{animation:none}
.br-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--specular);border-radius:var(--r-lg);
}
.br-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,0.4);
  border:1px solid var(--line);
  color:var(--txt-2);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.br-close:hover{background:rgba(248,81,73,0.18);color:var(--txt-1);border-color:rgba(248,81,73,0.3)}
.br-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:28px 32px 32px;
}

/* Header */
.br-hdr{margin-bottom:18px;padding-right:32px}
.br-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.br-addr{
  font-size:28px;font-weight:700;color:var(--txt-1);
  letter-spacing:-0.015em;line-height:1.2;
}
.br-sub{font-size:13.5px;color:var(--txt-3);margin-top:6px}

/* Caveat (sparse data) */
.br-caveat{
  font-size:12px;color:var(--sev-2);
  background:rgba(227,179,65,0.08);
  border:1px solid rgba(227,179,65,0.2);
  border-radius:var(--r-sm);
  padding:8px 12px;margin-bottom:14px;
}

/* Hero block — sentence-as-headline. Paragraphs separate counts,
   severity rollup, and any narrative adds into distinct beats.
   Only the raw numbers carry color; descriptor words stay in
   body text so the eye lands on magnitude without the prose
   reading over-painted. */
.br-hero{
  font-size:16.5px;color:var(--txt-1);line-height:1.6;
  background:var(--surf-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:16px 18px;
  margin-bottom:22px;
}
.br-hero p{margin:0}
.br-hero p+p{margin-top:10px}
.br-hero-n{
  color:var(--accent);font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Quiet inline line for the "no reports at this exact address"
   state — replaces the old empty bordered card so the page
   doesn't waste vertical space on a null result. */
.br-noadd{
  font-size:13px;color:var(--txt-3);line-height:1.55;
  padding:10px 0;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
}

/* Section headings — each major section gets a solid top divider
   so the visual rhythm clearly separates ideas (noteworthy ≠ chronic
   neighbors ≠ map ≠ closest-most-relevant). */
.br-h{
  font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--txt-1);
  margin:24px 0 6px;
  padding-top:22px;
  border-top:2px solid rgba(255,255,255,0.18);
}
.br-h-sub{
  font-size:13px;color:var(--txt-3);margin-bottom:14px;line-height:1.55;
}

/* Shared dot used in at-address chips and elsewhere */
.br-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* At-this-address card — click to expand and reveal every report
   at the searched address. Closed: header + category chips.
   Open: header + chips + a divider line + the full report list. */
.br-atad{
  background:rgba(136,192,208,0.06);
  border:1px solid rgba(136,192,208,0.22);
  border-radius:var(--r-sm);
  margin-bottom:8px;
  overflow:hidden;
  transition:background .15s,border-color .15s;
}
.br-atad-summary{padding:12px 14px;cursor:pointer}
.br-atad-summary:hover{background:rgba(136,192,208,0.06)}
.br-atad.open{border-color:rgba(136,192,208,0.35)}
.br-atad-hdr{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
.br-atad-caret{
  margin-left:auto;font-size:13px;color:var(--accent);
  transition:transform .2s;flex-shrink:0;
}
.br-atad.open .br-atad-caret{transform:rotate(180deg)}
.br-atad-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--txt-1)}
.br-atad-chip{display:inline-flex;align-items:center;gap:6px}
.br-atad-chip strong{color:var(--txt-1);font-variant-numeric:tabular-nums}
.br-atad-body{
  display:none;
  border-top:1px solid rgba(136,192,208,0.22);
  background:rgba(0,0,0,0.18);
  padding:12px 14px;
  cursor:default;
}
.br-atad.open .br-atad-body{display:flex;flex-direction:column;gap:10px}
.br-atad-body .br-row{background:var(--surf-2);border:1px solid var(--line)}

/* Potentially noteworthy — dashboard tile grid. Each tile leads
   with a giant count (the visual hit) and uses the category color
   as a top accent bar so the four tiles read as a coordinated
   panel. 2 columns by default; stacks to 1 on narrow screens. */
.br-nw-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
/* Two-tier tinting. Both tiers use the same recipe: solid colored
   border + very-light wash of the same hue + number rendered in
   the border color. The two hues are tuned to sit next to each
   other without clashing (dusty pink + muted teal). */
.br-nw-card{
  background:rgba(142,195,211,0.05);
  border:1px solid #8EC3D3;
  border-radius:var(--r-sm);
  padding:16px 16px 14px;
  transition:background .15s,border-color .15s;
}
.br-nw-card:hover{
  background:rgba(142,195,211,0.10);
}
.br-nw-card .br-nw-num{color:#8EC3D3}

.br-nw-card:has(.br-nw-tag){
  background:rgba(143,71,101,0.06);
  border-color:#8f4765;
}
.br-nw-card:has(.br-nw-tag):hover{
  background:rgba(143,71,101,0.12);
}
.br-nw-card:has(.br-nw-tag) .br-nw-num{color:#b56b85}
.br-nw-card-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:4px;
}
.br-nw-num{
  font-size:38px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.025em;
}
.br-nw-cat{
  font-size:14px;font-weight:600;color:var(--txt-1);
  margin-top:8px;line-height:1.3;
}
.br-nw-sev{
  font-size:12.5px;color:var(--txt-3);margin-top:4px;line-height:1.4;
}
.br-nw-tag{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#b56b85;
  background:rgba(143,71,101,0.12);
  border:1px solid #8f4765;
  border-radius:var(--r-pill);
  padding:3px 8px;
  flex-shrink:0;align-self:center;
}
@media (max-width:640px){
  .br-nw-grid{grid-template-columns:1fr}
}

/* Chronic-neighbor callout — same expandable pattern as at-address */
.br-cn-list{display:flex;flex-direction:column;gap:8px}
.br-cn{
  background:var(--surf-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  overflow:hidden;
  transition:background .15s;
}
.br-cn-summary{padding:11px 14px 11px 16px;cursor:pointer}
.br-cn-summary:hover{background:var(--surf-hi)}
.br-cn-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.br-cn-addr{font-size:14px;font-weight:600;color:var(--txt-1)}
.br-cn-dist{font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.br-cn-caret{
  margin-left:auto;font-size:14px;color:var(--accent);
  width:22px;height:22px;line-height:22px;text-align:center;
  border:1px solid var(--line-strong);border-radius:50%;
  transition:transform .2s,background .15s;
}
.br-cn-summary:hover .br-cn-caret{background:rgba(136,192,208,0.12)}
.br-cn.open .br-cn-caret{transform:rotate(180deg);color:var(--txt-1)}
.br-cn-meta{font-size:12.5px;color:var(--txt-2);margin-top:4px;line-height:1.5}
.br-cn-body{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,0.18);
  padding:12px 14px;
  cursor:default;
}
.br-cn.open .br-cn-body{display:flex;flex-direction:column;gap:10px}
.br-cn-body .br-row{background:var(--surf-1);border:1px solid var(--line)}

/* Likely-same-building cards. Same structure as chronic-neighbor
   cards, with a different accent (cyan, matching the "this is
   about your specific location" affordance) and slightly looser
   tone since the relationship is heuristic. */
.br-sb-list{display:flex;flex-direction:column;gap:8px}
.br-sb{
  background:var(--surf-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  overflow:hidden;
  transition:background .15s;
}
.br-sb-summary{padding:11px 14px 11px 16px;cursor:pointer}
.br-sb-summary:hover{background:var(--surf-hi)}
.br-sb-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.br-sb-addr{font-size:14px;font-weight:600;color:var(--txt-1)}
.br-sb-dist{font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.br-sb-caret{
  margin-left:auto;font-size:14px;color:var(--accent);
  width:22px;height:22px;line-height:22px;text-align:center;
  border:1px solid var(--line-strong);border-radius:50%;
  transition:transform .2s,background .15s;
}
.br-sb-summary:hover .br-sb-caret{background:rgba(136,192,208,0.12)}
.br-sb.open .br-sb-caret{transform:rotate(180deg);color:var(--txt-1)}
.br-sb-meta{font-size:12.5px;color:var(--txt-2);margin-top:4px;line-height:1.5}
.br-sb-body{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,0.18);
  padding:12px 14px;
  cursor:default;
}
.br-sb.open .br-sb-body{display:flex;flex-direction:column;gap:10px}
.br-sb-body .br-row{background:var(--surf-1);border:1px solid var(--line)}

/* Empty variant of the at-address card — shown for geocoded
   addresses that have no reports of their own. Just a one-line
   note, no expansion. Visually muted so it doesn't shout. */
.br-atad-empty{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
}
.br-atad-empty .br-atad-summary{cursor:default}
.br-atad-empty .br-atad-hdr{color:var(--txt-3)}
.br-atad-empty-msg{
  font-size:13px;color:var(--txt-2);line-height:1.55;
}

/* Mini-map */
.br-map-wrap{
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.br-map{
  width:100%;height:320px;
  background:#0a0d18;
}
.br-map-legend{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;color:var(--txt-3);
  padding:8px 14px;
  border-top:1px solid var(--line);
}
.br-mlg-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:3px;vertical-align:middle;
}
.br-map-detail{display:none;padding:10px 12px 12px;border-top:1px solid var(--line)}
.br-map-detail.show{display:block}
.br-map-detail .br-row{background:transparent;border:none;padding:0}
.br-map-detail .br-row-head{margin-bottom:5px}
/* Leaflet inside our dark modal — make controls readable */
.br-map .leaflet-control-zoom a{
  background:var(--surf-1)!important;color:var(--txt-2)!important;
  border:1px solid var(--line)!important;
}
.br-map .leaflet-control-zoom a:hover{background:var(--surf-hi)!important;color:var(--txt-1)!important}

/* Drill-down list — every row is click-to-expand. Closed: truncated
   description (clamped to ~3 lines). Open: full description. The
   click target is the whole row so the affordance is generous. */
.br-list{display:flex;flex-direction:column;gap:10px}
.br-row{
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:12px 14px;
  transition:background .12s,border-color .12s;
  position:relative;
}
.br-row[data-expand-toggle]{cursor:pointer}
.br-row[data-expand-toggle]:hover{background:var(--surf-hi);border-color:var(--line-strong)}
.br-row.open{background:var(--surf-hi);cursor:default}
.br-row-head{
  display:flex;flex-wrap:nowrap;align-items:center;gap:8px;
  margin-bottom:6px;
}
/* Chips strip — scrolls horizontally instead of wrapping so the
   meta + caret stay pinned to the right on one line, no matter
   how many chips a row has. */
.br-row-chips{
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px 8px;
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.br-row-chips::-webkit-scrollbar{height:4px}
.br-row-chips::-webkit-scrollbar-track{background:transparent}
.br-row-chips::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px}
.br-row-chips > *{flex-shrink:0}
.br-row-caret{
  font-size:11px;color:var(--txt-4);
  transition:transform .2s,color .2s;flex-shrink:0;
}
.br-row:hover .br-row-caret{color:var(--txt-2)}
.br-row.open .br-row-caret{transform:rotate(180deg);color:var(--txt-1)}
/* Closed: clamp description; Open: show full. Using a max-height
   approach (rather than -webkit-line-clamp alone) so the fade-out
   gradient overlays only when truncated. */
.br-row-desc{font-size:13.5px;color:var(--txt-2);line-height:1.6;position:relative}
.br-row:not(.open) .br-row-desc.clamped{
  max-height:4.8em;overflow:hidden;
}
.br-row:not(.open) .br-row-desc.clamped::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.6em;
  background:linear-gradient(180deg,rgba(22,28,44,0) 0%,rgba(22,28,44,0.95) 100%);
  pointer-events:none;
}
.br-row:hover:not(.open) .br-row-desc.clamped::after{
  background:linear-gradient(180deg,rgba(40,48,72,0) 0%,rgba(40,48,72,0.95) 100%);
}
.br-sev{
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:2px 7px;border-radius:var(--r-sm);
}
.br-sev-1{background:rgba(86,211,100,0.14);color:var(--sev-1)}
.br-sev-2{background:rgba(227,179,65,0.14);color:var(--sev-2)}
.br-sev-3{background:rgba(219,109,40,0.14);color:var(--sev-3)}
.br-sev-4{background:rgba(248,81,73,0.18);color:var(--sev-4)}
.br-chip{
  font-size:11px;font-weight:500;
}
.br-chip-sub{
  color:var(--accent-warm);
  padding:1px 6px;
  background:rgba(240,136,62,0.08);
  border-radius:var(--r-sm);
  text-transform:capitalize;
}
.br-row-meta{
  font-size:11px;color:var(--txt-3);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;white-space:nowrap;
}
.br-row-addr{font-size:12px;color:var(--txt-2);margin-bottom:4px;font-weight:500}
.br-row-desc{font-size:13px;color:var(--txt-2);line-height:1.55}

/* Empty state */
.br-empty{
  text-align:center;padding:32px 20px;color:var(--txt-3);
}
.br-empty-icon{font-size:32px;color:var(--txt-4);margin-bottom:8px}

/* Footer methodology */
.br-foot{
  margin-top:22px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:11.5px;color:var(--txt-4);line-height:1.6;
}
.br-foot strong{color:var(--txt-3);font-weight:600}
.br-foot em{font-style:italic;color:var(--txt-3)}

/* Small viewports */
@media (max-width:600px){
  .br-modal{padding:0}
  .br-panel{max-height:100vh;height:100vh;border-radius:0;border:none}
  .br-body{padding:24px 18px}
  .br-map{height:260px}
}