/* ============================================================
   URBAN PULSE · Macau Edition
   Visual language inspired by neuberg.ai — quiet, dense, monochrome,
   with one warm accent and per-channel dot colours kept low-saturation.
   ============================================================ */

:root {
  --bg:        #0a0a0c;
  --bg-soft:   #0e0e11;
  --panel:     #111114;
  --panel-2:   #15151a;
  --line:      #1f1f25;
  --line-2:    #2a2a32;
  --ink:       #efeee9;
  --ink-mid:   #b6b5ad;
  --ink-dim:   #6e6d65;
  --ink-mute:  #43423d;
  --accent:    #ff6a3d;     /* warm "neuberg" amber-orange */
  --accent-2:  #f5c14a;
  --good:      #6affb0;

  /* device channel colours — desaturated, dark-mode friendly */
  --c-wifi:    #6fb7ff;
  --c-bt:      #b18cff;
  --c-cctv:    #ff7a5c;
  --c-cell:    #6affb0;
  --c-iot:     #ffd56b;
  --c-veh:     #ff5fa0;

  --r-1: 4px;
  --r-2: 10px;
  --r-3: 18px;
  --shadow: 0 1px 0 0 rgba(255,255,255,.02), 0 24px 60px -30px rgba(0,0,0,.7);

  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  letter-spacing: 0.005em;
  height: 100vh;
  overflow: hidden;
  display: grid;
  /* topbar | top-kpi | main | bottom-strip | footer */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

/* faint film grain for texture */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 3px 3px; opacity: .55; mix-blend-mode: overlay;
}

.mono { font-family: var(--font-mono); letter-spacing: 0; }

/* ====================== TOP BAR ====================== */
.topbar {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  gap: 18px;
  flex: 0 0 auto;
}
.topmeta { justify-self: end; }
.clock {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand__mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 8px;
  filter: drop-shadow(0 4px 12px rgba(255,106,61,.22));
  transition: transform .2s ease;
}
.brand__mark:hover { transform: scale(1.05); }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__line1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 19px;
  color: var(--ink);
}
.brand__line2 {
  font-size: 10px; color: var(--ink-dim);
  letter-spacing: 0.06em; margin-top: 4px;
  text-transform: uppercase;
}

/* topnav removed in slim redesign */

.topmeta {
  display: flex; align-items: center; gap: 22px;
  justify-self: end;
}
.kpi { display: flex; flex-direction: column; line-height: 1.1; }
.kpi__label {
  font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
}
.kpi__value { font-size: 13px; color: var(--ink); margin-top: 4px; }

/* status pill removed in slim redesign */

/* upstream status pills (WiGLE / OpenCellID / Shodan) */
.upstream-strip {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel);
  padding: 4px; border-radius: 999px;
}
.upstream-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-mid); border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-text);
}
.upstream-pill .up-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mute);
}
.upstream-pill[data-status="ok"]      .up-dot { background: var(--good); box-shadow: 0 0 0 3px rgba(106,255,176,.12); }
.upstream-pill[data-status="error"]   .up-dot { background: var(--accent); }
.upstream-pill[data-status="pending"] .up-dot { background: var(--accent-2); animation: pulse 1.6s infinite; }
.upstream-pill[data-status="disabled"] { opacity: .35; }
.upstream-pill .up-n {
  font-size: 10px; color: var(--ink); margin-left: 4px;
}
.upstream-refresh {
  background: transparent; color: var(--ink-mid);
  border: 0; cursor: pointer; font-size: 14px; padding: 4px 8px;
  border-radius: 999px;
}
.upstream-refresh:hover { color: var(--accent); background: var(--bg-soft); }
.upstream-refresh.is-spinning { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* status__dot removed in slim redesign */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(106,255,176,.55); }
  100% { box-shadow: 0 0 0 12px rgba(106,255,176,0); }
}

/* ====================== MAIN GRID ====================== */
.grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-rows: 1fr auto;   /* panels | kpi-strip */
  gap: 14px;
  padding: 14px 24px;
  min-height: 0;                  /* lets nested grids respect viewport */
  overflow: hidden;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 0;
  display: flex; flex-direction: column;
  position: relative;
  min-height: 0;                  /* important: allow inner scroll */
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.panel__h-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mid);
  text-transform: uppercase;
}
.panel__h-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.panel__h-tag.pulse-tag {
  color: var(--accent);
}

/* ====================== FILTERS ====================== */
.filters .panel__head { flex: 0 0 auto; }
.filters__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 12px;
}
.filters__body::-webkit-scrollbar { width: 6px; }
.filters__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.filters .filter-block { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.filter-block:last-of-type { border-bottom: 0; }
.filter-block__title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-mid);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-text);
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.chip.is-on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-mid)); }
.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-row input[type="range"] {
  flex: 1;
  appearance: none;
  height: 2px;
  background: var(--line-2);
  border-radius: 999px;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
}
.slider-row span { font-size: 11px; color: var(--ink); width: 70px; text-align: right; }
.hint { font-size: 11px; color: var(--ink-dim); margin: 8px 0 0; line-height: 1.5; }

.reset {
  margin: 18px 18px 0;
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--ink-mid);
  padding: 10px 12px;
  border-radius: var(--r-2);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-text);
  letter-spacing: 0.04em;
}
.reset:hover { color: var(--ink); border-color: var(--ink-dim); }

/* ====================== MAP ====================== */
.map-panel { padding: 0; overflow: hidden; }
.map-legend { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.lg {
  font-size: 10px; color: var(--ink-mid); letter-spacing: 0.08em;
  text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center;
}
.lg i {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}

.map-frame {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,106,61,.06), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(111,183,255,.05), transparent 50%),
    var(--bg-soft);
  overflow: hidden;
  margin: 8px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}
.map-corner {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--ink-dim);
  z-index: 1000; pointer-events: none;
}
.map-corner--tl { top: 8px; left: 8px;  border-top: 1px solid; border-left: 1px solid; }
.map-corner--tr { top: 8px; right: 8px; border-top: 1px solid; border-right: 1px solid; }
.map-corner--bl { bottom: 8px; left: 8px;  border-bottom: 1px solid; border-left: 1px solid; }
.map-corner--br { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }

#map-leaflet {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a0a0c;
}
/* Leaflet's overlay SVG receives our device dots / zone halos / heatmap */
#map-leaflet .leaflet-overlay-pane svg { overflow: visible; }
#map-leaflet .leaflet-control-attribution {
  background: rgba(10,10,12,.6);
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px 0 0 0;
}
#map-leaflet .leaflet-control-attribution a { color: var(--ink-mid); }
#map-leaflet .leaflet-bar a {
  background: rgba(15,15,20,.85);
  border-color: var(--line-2);
  color: var(--ink-mid);
}
#map-leaflet .leaflet-bar a:hover {
  background: var(--bg-soft);
  color: var(--accent);
}
/* dark CartoDB tiles need a faint warm tint to match neuberg accent */
#map-leaflet .leaflet-tile { filter: saturate(0.85) brightness(0.95); }
.map-overlay {
  position: absolute; left: 22px; top: 22px;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none; z-index: 1000;
}
.map-overlay__label {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.map-overlay__sub {
  font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em;
}

.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(10,10,12,.92);
  border: 1px solid var(--line-2);
  padding: 10px 12px;
  border-radius: var(--r-2);
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink);
  display: none;
  z-index: 1100;
  min-width: 160px;
  font-family: var(--font-text);
  backdrop-filter: blur(6px);
  top: 0; left: 0;
}
.map-tooltip strong { color: var(--accent); font-weight: 500; }
.map-tooltip .row { display: flex; justify-content: space-between; gap: 12px; }
.map-tooltip .row span { color: var(--ink-mid); }

.map-actions {
  position: absolute; right: 22px; top: 22px;
  display: flex; gap: 8px; z-index: 1000;
}
.map-act {
  background: rgba(10,10,12,.6);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 11px; letter-spacing: 0.08em;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-text);
}
.map-act:hover { border-color: var(--accent); color: var(--accent); }

.map-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 18px;
  font-size: 10px; color: var(--ink-dim);
  border-top: 1px solid var(--line);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* SVG layers */
.land {
  fill: #15151a;
  stroke: #2a2a32;
  stroke-width: 1.1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.land--hover { fill: #1c1c22; }
.bridge {
  stroke: #3b3b46;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
}
.zone-halo {
  fill: rgba(255,106,61,.04);
  stroke: rgba(255,106,61,.25);
  stroke-width: 0.6;
}
.zone-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.heat circle {
  mix-blend-mode: screen;
  pointer-events: none;
}
.dot {
  cursor: pointer;
  transition: r .15s ease, opacity .15s ease;
}
.dot:hover { stroke: #fff; stroke-width: 1; }
.spike-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  pointer-events: none;
  opacity: 0;
}
.graticule {
  stroke: var(--line);
  stroke-width: 0.4;
  stroke-dasharray: 1 4;
  fill: none;
}

/* ====================== INSIGHTS ====================== */
.insights { overflow: hidden; }
.insight-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insight-feed::-webkit-scrollbar { width: 6px; }
.insight-feed::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

.insight {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px 14px;
  background: var(--panel-2);
  position: relative;
  animation: fadeUp .35s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.insight--placeholder {
  font-size: 12px;
  color: var(--ink-dim);
  border-style: dashed;
  text-align: center;
  padding: 28px 14px;
}
.insight__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 10px; color: var(--ink-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.insight__sev {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.14em;
  border: 1px solid var(--line-2);
  color: var(--ink-mid);
}
.insight--alert .insight__sev { color: var(--accent); border-color: rgba(255,106,61,.4); }
.insight--notice .insight__sev { color: var(--accent-2); border-color: rgba(245,193,74,.4); }
.insight__time { color: var(--ink-dim); margin-left: auto; }
.insight__title {
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 500;
}
.insight__detail {
  font-size: 12px; color: var(--ink-mid); line-height: 1.6;
}
.insight__metrics {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.insight__metrics span {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 4px;
}
.insight--alert {
  border-color: rgba(255,106,61,.35);
  box-shadow: inset 0 0 0 1px rgba(255,106,61,.04);
}

/* ====================== KPIs ====================== */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-3);
  padding: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
.kpi-strip--top {
  margin: 8px 24px 0;
  border: 1px solid var(--line);
  background: var(--panel);
}
.kpi-card {
  padding: 6px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px;
  min-height: 0;
  justify-content: center;
}
.kpi-card:last-child { border-right: 0; }
.kpi-card__label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-dim);
}
.kpi-card__num {
  font-family: var(--font-display);
  font-size: 16px; color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 0;
}
.kpi-card__delta {
  font-size: 10px; color: var(--ink-dim);
  font-family: var(--font-mono);
  letter-spacing: 0;
  margin-top: 1px;
}
.bars { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.bar-row {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: 6px; align-items: center;
  font-size: 9px; color: var(--ink-mid);
  letter-spacing: 0.04em;
}
.bar-row .bar-track {
  position: relative; height: 3px; background: var(--bg-soft);
  border-radius: 999px; overflow: hidden;
}
.bar-row .bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--c, var(--accent));
  transition: width .4s ease;
  border-radius: 999px;
}
.bar-row .bar-num {
  font-family: var(--font-mono); color: var(--ink);
  text-align: right; font-size: 9px;
}

/* ====================== BOTTOM STRIP ====================== */
.bottom-strip {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.7fr;
  gap: 14px;
  padding: 0 24px 12px;
  height: 200px;
  flex: 0 0 auto;
}
.bottom-strip > .panel { min-height: 0; height: 100%; }

/* ----- District comparison card ----- */
.district-card .panel__head {
  flex: 0 0 auto;
  gap: 14px;
}
.district-tabs { display: flex; gap: 4px; }
.dist-tab {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-mid);
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-text);
}
.dist-tab:hover { color: var(--ink); border-color: var(--ink-dim); }
.dist-tab.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.district-bars {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.dist-row {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  gap: 10px;
  align-items: center;
}
.dist-row .dist-label {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
}
.dist-row .dist-track {
  position: relative;
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.dist-row .dist-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  transition: width .35s ease, background .25s ease;
  border-radius: 999px;
}
.dist-row .dist-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  text-align: right;
}
.dist-row .dist-delta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-dim);
  margin-left: 4px;
}
.dist-row .dist-delta.up { color: var(--accent); }
.dist-row .dist-delta.down { color: var(--good); }

/* ----- Type breakdown card (bottom-right) ----- */
.typebreak-card .panel__head { flex: 0 0 auto; }
.typebreak-body {
  flex: 1; min-height: 0;
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center;
}
.typebreak-body .bars { gap: 8px; }
.typebreak-body .bar-row {
  grid-template-columns: 56px 1fr 28px;
  font-size: 10px;
}
.typebreak-body .bar-row .bar-track { height: 5px; }
.typebreak-body .bar-row .bar-num { font-size: 10px; }

/* ----- Treemap card ----- */
.treemap-card .panel__head { flex: 0 0 auto; }
.treemap-wrap {
  flex: 1; min-height: 0; position: relative;
  padding: 6px 10px 10px;
}
#treemap-svg { width: 100%; height: 100%; display: block; }
.treemap-legend {
  position: absolute; right: 14px; bottom: 10px;
  display: flex; gap: 12px;
  pointer-events: none;
}
.treemap-legend span {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: inline-flex; gap: 5px; align-items: center;
}
.treemap-legend i {
  width: 8px; height: 8px; display: inline-block;
}
.tcell rect {
  cursor: pointer;
  transition: opacity .2s ease;
}
.tcell:hover rect { opacity: 0.45 !important; }
.tcell text {
  pointer-events: none;
  font-family: var(--font-text);
}
.tcell .tlabel {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tcell .tnum {
  font-family: var(--font-mono);
  fill: #fff;
  opacity: 0.55;
}

/* ====================== FOOT ====================== */
.botfoot {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 24px;
  font-size: 9.5px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  letter-spacing: 0.08em; text-transform: uppercase;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ====================== RESPONSIVE TUCKING ====================== */

/* ---------- Tablet (≤1280px): tighten side columns ---------- */
@media (max-width: 1280px) {
  .grid { grid-template-columns: 240px 1fr 280px; }
}

/* ---------- Tablet / Mobile (≤1100px): single-column stack ---------- */
@media (max-width: 1100px) {
  /* Allow body to scroll; abandon 100vh lock */
  html, body { height: auto; }
  body {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  /* Topbar — stack brand above pills/clock if needed */
  .topbar {
    grid-template-columns: 1fr;
    padding: 10px 14px;
    gap: 10px;
  }
  .topmeta {
    justify-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .upstream-strip { flex-wrap: wrap; }

  /* KPI strip → 2×2 grid on tablet/mobile */
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip--top { margin: 8px 14px 0; }
  .kpi-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .kpi-card:nth-child(2n) { border-right: none; }
  .kpi-card:nth-last-child(-n+2) { border-bottom: none; }

  /* Main grid → flex column, child order = map / insights / filters */
  .grid {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    gap: 12px;
    overflow: visible;
    min-height: 0;
    height: auto;
  }
  .panel {
    overflow: hidden;
    min-height: 0;
    height: auto;
  }
  .map-panel  { order: 1; height: 60vh; min-height: 360px; max-height: 540px; }
  .insights   { order: 2; max-height: 320px; }
  .insight-feed { max-height: 240px; }
  .filters    { order: 3; max-height: 380px; }
  .filters__body { max-height: 320px; }

  /* Bottom strip → stack each panel full-width */
  .bottom-strip {
    grid-template-columns: 1fr;
    height: auto;
    padding: 0 14px 14px;
    gap: 12px;
  }
  .bottom-strip > .panel { height: 240px; }
  .typebreak-card { height: auto; min-height: 200px; }

  /* Footer wrap */
  .botfoot {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---------- Phone (≤600px): tighten everything ---------- */
@media (max-width: 600px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .brand { gap: 10px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__line1 { font-size: 16px; }
  .brand__line2 { font-size: 9px; letter-spacing: 0.04em; }

  .topmeta { gap: 6px; }
  .upstream-strip { padding: 3px; gap: 4px; }
  .upstream-pill { padding: 5px 8px; font-size: 9.5px; gap: 4px; }
  .upstream-pill .up-n { display: none; }   /* save horizontal space */
  .upstream-refresh { padding: 3px 6px; font-size: 13px; }
  .clock { font-size: 10px; padding: 5px 8px; }

  .kpi-strip--top { margin: 6px 12px 0; }
  .kpi-card { padding: 7px 10px; }
  .kpi-card__num { font-size: 15px; }
  .kpi-card__label { font-size: 8.5px; letter-spacing: 0.10em; }
  .kpi-card__delta { font-size: 9px; }

  .panel__head { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .panel__h-label { font-size: 10px; }
  .panel__h-tag { font-size: 9px; }

  /* Map */
  .map-panel { height: 55vh; min-height: 320px; }
  .map-overlay { left: 14px; top: 14px; }
  .map-overlay__label { font-size: 16px; }
  .map-overlay__sub { font-size: 10px; }
  .map-legend { gap: 8px; }
  .lg { font-size: 9px; }
  .map-corner { display: none; }
  .map-actions { right: 14px; top: 14px; }
  .map-act { padding: 6px 10px; font-size: 10px; }
  .map-foot { padding: 8px 14px; font-size: 9px; gap: 8px; flex-wrap: wrap; }

  /* Filters */
  .filter-block { padding: 11px 14px; }
  .filter-block__title { font-size: 10px; }
  .chip { padding: 8px 11px; font-size: 12px; }   /* bigger touch target */
  .reset { margin: 14px 14px 0; padding: 11px 12px; }

  /* Insights */
  .insight { padding: 11px 13px; }
  .insight__title { font-size: 13px; }
  .insight__detail { font-size: 11.5px; }
  .insight-feed { max-height: 220px; padding: 6px 12px 14px; }

  /* District comparison */
  .district-tabs { gap: 4px; flex-wrap: wrap; }
  .dist-tab { padding: 7px 12px; font-size: 12px; }
  .district-bars { padding: 11px 14px; gap: 10px; }
  .dist-row { grid-template-columns: 80px 1fr 50px; gap: 8px; }
  .dist-row .dist-label { font-size: 10.5px; }
  .dist-row .dist-num { font-size: 10.5px; }
  .dist-row .dist-delta { display: block; font-size: 9px; }

  /* Treemap */
  .bottom-strip > .panel { height: auto; min-height: 220px; }
  .treemap-wrap { padding: 6px 8px 8px; min-height: 180px; }
  .treemap-legend { right: 10px; bottom: 8px; gap: 8px; }
  .treemap-legend span { font-size: 8px; }

  /* Type breakdown */
  .typebreak-body { padding: 12px 14px; }
  .typebreak-body .bars { gap: 6px; }

  /* Footer */
  .botfoot { padding: 10px 12px; flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ---------- Tiny phone (≤380px) — last-mile compactness ---------- */
@media (max-width: 380px) {
  .brand__line2 { display: none; }
  .upstream-pill { padding: 4px 6px; font-size: 9px; }
  .map-panel { height: 50vh; min-height: 280px; }
  .kpi-card__num { font-size: 14px; }
}